导航:首页 > 万维百科 > 手机如何制作电脑网页设计

手机如何制作电脑网页设计

发布时间:2020-10-24 05:17:50

1、手机网页如何制作。。

低版本的dreamweaver有没有这个功能我不清楚。但是在dreamweaver cs6中,你可以点新建-流体网格布局然后如图所示。

2、怎么制作网站的手机版

做手机网站的方法一下几种

1、模板站,下载手机网站模板,然后将内容和PC站点通用,这样移动设备访问网站时就会自动转入到手机站的模板。

你也可以解析一个m开头的域名作为手机站的域名,有利于搜索引擎抓取。

2、自适应网站,这种网站不需要另做手机站,因为网站的自适应,会根据你使用的设备分辨率来调整网页的排版和内容显示。

3、H5快速建站,现在有很多服务商支持H5快速建立手机网站,只需要你把内容上传,这些服务商就会将这个网站做出来,比较方便快捷,缺点就是免费的都有广告,而且不支持使用自己网站的域名。

4、用代码写出来的手机站,这种网站就是属于静态网站,所有的内容都是通过代码写进去的,想要更改内容比较麻烦。优点就是一步到位,想要什么效果都能达到。

5、手机直达页,这种可以说是一个网站,也可以说是一个网页,这种手机站比较适合推广使用,将所有企业的推送产品放在这个页面上,然后完美的展示出来,用户点击之后可以进入购买页面或者直接进入咨询页面,可以更有效的提高转化效果。

3、怎么制作网站的手机版?

可以去下载pageadmin建站系统或者wp系统来做,推荐pageamdin,这个支持pc和手机共享数据,或者你做成响应式网站就可以了。

4、如何做好手机网页设计

随着互联网科技的发展以及人们生活方式的改变,手机网站逐渐赶上PC网站,成为企业宣传推广以及用户阅读的的主要平台,因此也有越来越多的企业开始制作手机网站。不过,手机网页设计必须遵循移动端的设计原则,而不是盲目沿用电脑网站的设计规律,毕竟两者还是有很大区别的。

首先,移动端网页设计都需要考虑网络的问题。虽然现在的网络普及程度高,但是大部分用户还是利用手机流量来上网的,因此对手机网页的访问加载速度要求较高。如果用户在流量网页时遇到页面迟滞、视觉错位、信息不全等问题,用户体验就会大打折扣,因此要求网页内容尽量简洁明了,同时展现精准、有用、易用的菜单栏。

还有,因为手机端屏幕大小不一,如果想要保证所有人正常访问页面,维持内容的可读性,那么就需要我们在进行相关设计的时候,尽量控制文本的间距、颜色,着重突出页面的重点内容,让用户更容易看到自己想看到的内容,另外,一般手机中的电话、短信、推送等信息是无处不在的,用户在浏览网站时,注意力很容易就被这些弹出来的信息所吸引,因此网页的图标设计一定要高效,让用户在短时间内就知道网页的导航信息是什么、主要内容是什么,节省用户时间的同时,还为网站争取了成交的机会。

手机网站布局设计方法

1、手机网站的单页

手机网站建设的单页这个是存在于很多企业网站的内容,单页优化有着一定的好处,首先网站的单页是用HTML书写,并且完全静态化,这个是符合搜索引擎的,有利于优化,对搜索引擎友好。

这种页面的布局往往需要的是大气,简洁,直入主题。一般可以用来介绍公司以及公司的主要核心内容。

2、首页布局

手机网站建设的首页是一个网站的核心部分,浏览者首先看到的就是首页,然后才会看到内页,才会了解你的公司,只有首页有吸引力,才能留住浏览者浏览你网站的内容,那么首页的布局就很重要了。

首页需要突出网站的核心,展示公司的优势,尽显企业的特色,而且需要有主次之分,上下之分,因为浏览者的习惯是从上而下,从左而右浏览的。

3、内容页布局

手机网站建设的内容页就是网站的内容详细展示页面了,有的网站建设者没有太多注意的问题,手机网站建设者认为内容页根本不重要或是不是很重要,只要在后台把文章内容上传上去让其显示就可以了。

其实一些大网站的权重流量都是靠这些内容页撑起来的,我们每天更新文章显示的一个界面,这个页面的一个好的内容页能够给网站带来某一特定词的排名。

4、列表页布局

手机网站建设的列表页分为图片列表和文章列表页。图片列表页一般展示的是公司的案例或产品,一般图文布局展示就可以了。文章列表页展示的是公司的新闻或行业动态之类的文章,一般是新闻标题显示布局就可以了。

5、自己做的网页如何让电脑端和手机端显示成一样啊!!!

你用百分比试试,然后在按F12看下哪个东西超出了

6、怎么制作html5网站页面让它适应电脑和手机的尺寸

媒体查询语法:
@media screen and (max-width:960px){...}
@media screen and (max-width:768px){...}
@media screen and (max-width:320px){...}
<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:800px),projection" href="800wide-portrait-screen.css" />
注意:1,媒体查询之间使用逗号隔开;2,在projection之后,没有and,也没有任何特性/值的组合。没有后续表达式,意味着只要是projection就满足条件。
@media screen and (max-device-width:400px){......}
@import url("~~.css") screen and (max-width:360px);
(@import方法会增加http请求,影响加载速度。)
媒体查询能检测的特性(最长用过的是设备的视口宽度(width)和屏幕宽度(device-width)):
widht:视口宽度
height:视口高度
device-width:渲染表面的宽度(设备屏幕的宽度)
device-height:渲染表面的高度(设备屏幕的高度)
orientation:检查设备处于横向还是纵向。
aspect-ratio:基于视口宽度和高度的宽高比。(16:9的显示屏可以定义为aspect-ratio:16/9)
device-aspect-ratio:和aspect-ratio类似,基于设备渲染平面宽度和高度的宽高比。
color:每种颜色的位数。例:min-color:16会检测设备是否拥有16位颜色。
color-index:色板的颜色索引表中的颜色数。值必须是非负数。
monochrom:检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数。
resolution:用来检测屏幕或打印机的分辨率,如min-resolution:300dpi。还可以接受每厘米像素点数的度量值,如min-resolution:118dpcm。
scan:电视机的扫描方式,值可设为progressive(逐行扫描)或interlace(隔行扫描)。如720p p表示逐行扫描。
grid:用来检测输出设备是网格设备还是位图设备。
在上述所有特性中,除scan和grid之外,都可以使用min和max前缀来创建一个查询范围。例如:
@import url("~~.css") screen and (min-width:200px) and (max-width:360px);这样~~.css只会引入视口宽度介于200px至360px的显示屏设备。
在样式表的开头位置设置样式,以便适应所有涉及,然后使用媒体查询来进一步重写响应的部分。例如,先针对大视口设计(用户大多数情况下使用鼠标),将导航链接设计成简单的文字链接;然后再针对较小的视口,使用媒体查询重写这部分样式,为拇指一族提供更大点击区域。
使用多个独立的文件会增加http请求数量,建议在已有的样式表中追加媒体查询样式。(https://github.com/scottjehl/Respond)是为IE8及更低版本增加媒体查询支持的最快的js工具。
阻止移动浏览器自动调整页面大小:
在html的<head>中插入一个<meta>标签。<meta>标签中可以设置具体的宽度(如px)或者缩放比例(如2.0 设备实际尺寸的两倍)。例如:<meta name="viewport" content="initial-scale=2.0,width=device-width">
<meta>标签还可以控制页面可缩放的范围,下面的代码允许用户将页面最多放大至设备宽度的3倍,最小压缩至设备宽度的一半。<meta name="viewport" content="width=device-width,maximum-scale=3,minimum-scale=0.5">
还可以禁止用户缩放,不过缩放是一个重要的辅助功能,所以很少禁用。<meta name="viewport" content="initial-scale=1.0,user-scalable=no"> user-scalable=no即禁止缩放。
w3c正尝试使用@viewport声明,不用在<head>中添加<meta>,不过要使用私有前缀,如@-o-viewport{width:320px}
针对不同视口宽度修正设计:
首先在css中为平板设备增加媒体查询,数值ipad的视口宽度为768px(横向1024px)
@media screen and (max-width:768px){
#wrapper{
widht:768px;
}
#header,#footer,#nav {
width:748px;
}
}
=============================这只是一部分笔记===========
推荐一本书 响应式Web设计:HTML5和CSS3实战.pdf

7、手机html网页和电脑上的html网页在制作上有什么区别

1.导航设计

手机端页面导航应当包括用户必要的内容,删除屏幕上不必要的链接,假如链接的详细页面内容不是用户想要的,用户不会点击,也就没必要设置。其中建立导航功能键的时候,其中以回到首页、回到上一页这两个最为重要。

2.网站名称或logo的设计

手机网页的顶部没有标题栏或地址栏,相应地,也就没有网站标题和图标。所以设计页面的时候应该让用户知道,他们现在所浏览的网站名称或logo,这对塑造品牌也很重要。 

3.页面排版

从用户角度来说,他们希望阅读所有的内容,所以我们进行内容呈现,只是用隔断、重组、引语、线条或其他视觉方案来让这些内容更容易访问,使这些板块显得更都雅。

4.利用手机的天生优势

手机有着许多传统电脑所没有的优势,其中最大的优势就是移动力,因此手机版网页应该要特别发挥这些特性,让手机网页具有一般网页更多的优势。如:

移动定位:大部分的智能设备都有导航、定位的机制,可以让客户主动找到企业的位置。

移动联系:如果用使用的是移动电话,可以立即发话;或者直接跳转到通讯工具在线聊天;

邻近地点:如果企业有很多据点,请告诉用户,在他附近有哪一些地点是便于他能够抵达的。

8、制作手机网页需要什么软件 dw可以吗?然后操作和电脑网页设计一样上传吗?

制作手机网页需要什么软件?Dw可以吗?然后操作和电脑网页设计一样上传吗?你这个问题是比较专业的,必须得是学过网页设计的人才能回答你,要不然你就问问你的老师,要不你就上百度上搜一搜,这种问题一般人是打不上的

与手机如何制作电脑网页设计相关的知识