html5制作手机网页设计

1、这种手机网页是怎样制作的？

网站移动端制作原理：

1、域名解析一个m.xxx.com，绑定到服务器上；

2、m.xxx.com放PC端的网站程序，数据库直接连接PC数据库；

3、移动模板对应PC模板，程序文件和pc一样。只是数据库是共用一个；

4、在PC页面上面设置移动跳转判断，网上有PHP跳转代码；

5、你可以参考开源程序制作移动端，比如dedecms，帝国cms制作移动端，如果感觉比较麻烦了，那就直接把PC页面重写，页面直接修改成响应式！

现在做网站手机站必须要做，手机上搜索越来越多。电脑站手机打开浏览网页，体验非常不好。目前手机网站制作有3种方法：

1、独立域名手机站

这种手机站对优化排名比较好，也可以自己设计手机模板，专门买个空间放手机站程序，域名解析二级域名。　

2、自适应网站

这种网站体验比较少，会根据屏幕大小，自动显示不同的页面布局。手机和电脑站用的一个模板。一个域名，对优化体验非常好。

3、二级目录手机站

这种比较常用的一种，电脑站域名后面加/wap，或者/m 。通过跳转代码，手机打开电脑站网址，自动进入手机站。内容和PC是同步的，管理也比较方法。

2、怎样快速制作html5手机页面？

去MAKA平台，直接选择模版组合，然后添加图文信息就可以制作，比你自己编程快多了~百度搜MAKA邀请函就能找到网站~

3、手机网页怎么制作？

随着智能手机越来越普遍，单纯依靠PC端远远满足不了用户需求。特别是企业如何在移动端牢牢把握住用户就可以在公司盈利和业务方面获得飞速增长。然而，移动网站建设就变得越来越重要。搭建移动网站满足公司业务需求，从而获得移动端流量，就变得迫在眉睫。

手机网站制作分为2种语法：

第一种是采用WML编写适合于按键的传统手机的WAP网站，

第二种是采用时下比较流行的HTML5编写前台。

而如今随着中国的移动互联网发展和智能触屏手机的普及，WAP网站已经逐渐退出历史舞台。并在程序或者主机上写好判断规则，如果是PC版的浏览器就访问PC版的网址，是手机浏览器就访问手机站。针对不同的群体访问不同的页面，有利于提高网站转化率。

WAP是无线应用协议的缩写，一种实现移动电话与互联网结合的应用协议标准。wap网站也就是我们通常说的手机站。 

（2）html5是W3C制定的超文本标记语言（html)的第五次修改，通过html5制作的网站可以灵活运行于PC，平板，手机等各种媒体。 

（3）wap网站只能运行于手机端，多以文字图片为主，无特效和逻辑功能；html5的新特性可以让网站运行各种媒介（PC、平板、手机），并可以根据媒介的不同响应调节网站结构，与js/css3，可以构造出炫酷的特效效果。

4、我想做一个动态的手机网页，能用什么做？是用HTML5做

1、首先，我们创建一个移动APP项目，然后，添加一个index.html页面。代码里，添加一个图标，以及添加引入一个JS文件，该文件的作用在于：请求后台JS文件。

2、接下来，我们看看service.js文件是如何请求后台JS文件的。编写该service.js文件的重点是：A、如何异步请求后台JS文件；B、请求回来的后台文件，如何动态添加到页面的Head里。

3、紧接着，我们对APP项目进行打包操作：选择需要的打包类型，然后，填写相应的证书信息。如果选择IOS打包，请在打包证书里，添加需要安装的苹果手机UDID（未提供UDID，则不能安装APP)。

4、打包完成后，便可以下载安装APP。先用苹果手机连接电脑，然后通过工具安装APP。当然，这种连接数据线安装的方式，只能适合个人测试使用。如果想给别人批量安装测试，请参考《HTML5 APP开发之APP测试》经验。

1HTML5 APP开发之APP测试

5、APP安装完成后，我们看看打开APP现有的效果是怎样的。我们看到APP页面的左上角，显示了一个联系人的图标。

6、由于菜果手机不同系列的屏幕大小不一样，而且屏幕的分辨率也不一样【安桌手机的也一样】。导致同一个页面布局，在不同的手机上，显示的位置有时偏差比较大，有时也好。当然，这也加大了开发和测试的难度。不可能因一些位置问题，就重新发布APP。下面是苹果手机不同系列的屏幕大小分辨率说明：

7、所以，才有了动态调试页面布局的想法。回到第二步，我们是有请求后台JS文件的（showJSPage.js）。下面看看showJSPage.js，是如何编写的：A、首先判断手机操作系统类型；B、判断屏幕大小。

8、添加了showJSPage.js代码后，启动后台服务。然后，关闭原来打开的APP软件，再重新打开APP软件，便可查看修改后的效果。

9、整个方案的理解重点在于：熟悉JS执行的先后顺序，以及对手机屏幕大小与屏幕分辨率的关系。才能灵活运用，达到自己想要的目的。

5、如何用HTML5制作网页

html5标签掌握了，从上到下从左到右，标签合理使用，先把框架搭好，再结合css3做效果，先花时间把html5 css3看两遍，再看网页设计html5制作教程就ok了

当然这只是最简单的

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

1.导航设计

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

2.网站名称或logo的设计

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

3.页面排版

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

4.利用手机的天生优势

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

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

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

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

7、怎么制作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

8、怎么制作手机网页 如何制作一个手机html页面

这个还用说，其实道理和PC端网站是一样的道理。因为现在用户慢慢转向移动端，所以拥有一个移动网站也是很必要的。

其实自助建站自己做网站都是不成问题了，不管你懂不懂代码，都可以做的。

首先，注册一个凡科帐号，这是开始建站的第一步

第二，登录帐号后，会有建站、互动、微传单三块，一个帐号都可以用，你选择“网站建设”这一块；

第三，进入后台之后，选择自己喜欢的手机网站模板。

第四,就可以开始设计自己的网站，排版、栏目、文字、图片等设计。第五，无论是否完全做好，先保存，再退出。第六，网站做好后，可以为网站添加需要的功能，拖拽就可以实现添加。

9、html5做手机app和做手机网页一样吗

不一样，需增加自适应标签来保持一样。

代码如下：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

解释：Viewport指用户网页的可视区域，content中的“width”指的是虚拟窗口宽度，上面代码意为虚拟窗口/页面宽度初始比例为1，最小比例为1，最大比例为1，用户不可扩展，页面不可缩放。

(9)html5制作手机网页设计扩展资料：

HTML5的事件属性和异常处理

事件属性

HTML 5 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。

HTML 5 中的新事件属性：

onabort， onbeforeunload， oncontextmenu， ondrag， ondragend， ondragenter， ondragleave， ondragover， ondragstart， ondrop， onerror， onmessage， onmousewheel， onresize， onscroll， onunload。