如何手机制作网页
css手机版页面制作时如何让背景图片适应div的高度和宽度
可以使用background-size: cover来适应DIV元素的高度和亮度。代码如下：<style>
div{background:url(图片地址) no-repeat;width:100%;height:auto;background-size:cover;}
</style>
<div>这里是内容</div>background-size 属性规定背景图像的尺寸,IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。
在网页中怎样制作验证码发送到手机上
1、首先网站注册时需要输入手机网页代码写好，客户输入手机后点获取验证码，这里会随机生成验证码，然后通过短信通道提交到运营商服务器，运营商把验证码发送到客户手机上，客户输入到网站上，网站上判断是否一致，一致则通过注册，这些是网站这边需要做好接口。2、网站这块一般都好解决，最重要的 验证码要发送到手机上，要通过短信通道发送。一般正规的行业短信服务商要求，了解需求洽谈，签订合同，提交资料申请通道和签名（运营商强制要求签名避免垃圾短信），技术对接，提供接口参数链到网站，测试使用，正常使用，售后服务。
dreamweaver能制作手机网页吗，就是制作wap网页
dreamweaver能够制作手机网页的。其实和pc端的网页差不多，只是不支持js代码。然后网页大小控制在400px左右。太大了不能完全展现。也可以设置为100%,按比例来做。这样能手机整屏显示 。1<meta name="viewport"content="width=device-width, initial-scale=1"/>添加一下这个代码吧，表示你的网页不能放大，只能按1：1显示 不会因为放大显示而，导致你的网页错位注意字体大小要稍微大一点。多用色块来展现。这个是一个案例，只是一部分截图。你可以多参考别人的设计
pc 网站有了，怎么做手机适应的网站？
一、PC网站自动适配手机网页的7个步骤一般来说，移动适配主要通过底层的web技术开发手段来完成，下面马海祥将通过移动适配技术的角度来告诉你通过7个步骤来完成一个PC网站向移动设备的跳跃！1、允许网页宽度自动调整“自适应网页设计”到底是怎么做到的？其实并不难。首先，在网页代码的头部，加入一行viewport元标签，viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置，包括IE9，对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。2、不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素，这一条非常重要。具体说，CSS代码不能指定像素宽度：width:xxxpx;只能指定百分比宽度：width:xx%;或者width:auto;3、相对大小的字体字体也不能使用绝对大小（px），而只能使用相对大小（em）。body{font:normal100%Helvetica,Arial,sans-serif;}上面的代码指定，字体大小是页面默认大小的100%，即16像素。h1{font-size:1.5em;}然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。small{font-size:0.875em;}small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。4、流动布局（fluidgrid）“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。.main{float:right;width:70%;}.leftBar{float:left;width:25%;}float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。另外，绝对定位（position:absolute）的使用，也要非常小心。5、选择加载CSS“自适应网页设计”的核心就是CSS3引入的MediaQuery模块，它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。media=”screenand(max-device-width:400px)”href=”tinyScreen.css”/>上面的代码意思是，如果屏幕宽度小于400像素（max-device-width:400px），就加载tinyScreen.css文件。media=”screenand(min-width:400px)and(max-device-width:600px)”href=”smallScreen.css”/>如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。除了用html标签加载CSS文件，还可以在现有CSS文件中加载。6、CSS的@media规则同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。@mediascreenand(max-device-width:400px){.column{float:none;width:auto;}#sidebar{display:none;}}上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。7、图片的自适应（fluidimage）除了布局和文本，自适应网页设计还必须实现图片的自动缩放。这只要一行CSS代码：img{max-width:100%;}这行代码对于大多数嵌入网页的视频也有效，所以可以写成：img,object{max-width:100%;}老版本的IE不支持max-width，所以只好写成：img{width:100%;}此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：img{-ms-interpolation-mode:bicubic;}或者，EthanMarcotte的imgSizer.js。addLoadEvent(function(){varimgs=document.getElementById(“content”).getElementsByTagName(“img”);imgSizer.collate(imgs);});最好还是做适配分辨率的图片，有很多方法可以做到同样效果，服务器端和客户端都可以实现（具体可查看马海祥博客《根据访问设备自动识别展示手机站或PC站的方法》的相关介绍）。二、适配最常见的操作方法据马海祥观察，PC站和手机站匹配最常用的几种方法是移动适配、JS跳转、Meta声明、302规则等等，由于每种方法的操作方式不同，产生的效果也不同，具体的优缺点也需要区别对待，在此，马海祥就给大家比较一下这4种适配方法的优缺点以及需要注意的地方：1、移动适配现在很多搜索引擎都提供移动适配的功能，例如百度的开放适配和360的移动适配，利用百度站长工具提交PC页-手机页对应关系Sitemap，或者利用360站长工具提交PC页-手机页对应关系txt就能实现PC站内容和手机站一一适配。这样做的优点是只需要在搜索引擎工具提交资料，无需对站点本事做改动，而且网站内容一一对应，并不只局限于网站首页。缺点就是只能在百度或者360移动搜索中生效，其他没用提交适配文件的搜索中就无效了。2、JS跳转JS跳转对于某些行业来说有着重要的作用，尤其是对于用户转换率网站首页较高的网站，只需要在网站的头部加一段JS代码判定是否是移动端访问，然后所有的流量就会全部流向手机站的主页。JS跳转的优点是适用于所以的移动搜索，并不局限于百度和360，可以提高用户的转换率。缺点是难以实现每个页面的一一对应，而且容易被某些搜索引擎判定作弊，从而受到惩罚。3、Meta声明Meta声明的格式一般为，站长可以将这段代码加在PC站的头部，由Meta信息来指明该PC页对应的手机页的URL，以及该URL对应页面的格式。Meta声明的优点是代码简单易懂，操作方便。缺点是只能在百度移动搜索中生效，对于其他搜索引擎无效（另外，还可以使用百度转码，具体可查看马海祥博客《百度转码后的手机网站页面是否有利于SEO优化》的相关介绍）。4、302规则302规则指的是，当判定移动端访问网站时，302临时跳转到一个网址(手机站)，例如可以在htaccess文件里加上一段判定手机的代码，做个302重定向。这样做的好处是，不需要再额外在网站的前端代码中加任何东西，也不需要向搜索引擎提交规则，可是据测试，有可能会导致PC站被降权。虽然302是暂时性的重定向，但过于频繁的302是很有可能给网站带来不利的影响的，具体的尺度需要站长自己去把握。以上4种适配方法是接触的最为常见的操作方法，通常PC站做了以上处理后，一段时间以后移动端搜索出来的结果，下面匹配的网址就变成了移动站网址，不过标题还是PC站标题。至于到底哪种方法更好，更倾向于第一种，毕竟百度移动搜索占据着网站的大部分流量，而且用户体验度也最好。
如何制作HTML页面
HTML介绍：(1):<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> 将此文件保存为“mypage.htm”。启动浏览器。在文件菜单中选择“打开”（或者“打开页面”），这时将出现一个对话框。选择“浏览”（或者“选择文件”），定位到你刚才创建的HTML文件——“mypage.htm”，选择它，单击“打开”。然后在对话框中，你将看到这个文件的地址，比如说：“C:\MyDocuments\mypage.htm”。单击“确定”，浏览器将显示此页面。--------------------------------------------------------------------------------例子解释HTML文档中，第一个标签是<html>。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。在<head>和</head>标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。在<body>和</body>标签之间的文本是正文，会被显示在浏览器中。在<b>和</b>标签之间的文本会以加粗字体显示。---常见问题问：我编写完了HTML文件，但是不能在浏览器中看见结果，为什么？答：请确认你保存了文件，并且使用了正确的文件名和扩展名，例如：“c:\mypage.htm”，并且确认你用浏览器打开时使用同样的文件名。问：我编辑了HTML文件，但是修改结果并没有在浏览器中显示，为什么？答：浏览器缓存了你的页面，所以它不需要两次读取同样的页面。你修改了这个页面，浏览器并不知道。请使用“刷新/重载”按钮来强迫浏览器读取编辑过的页面。 -----------------------------------------------------------------------------HTML基本标签：(2):HTML中最重要的标签是定义标题元素，段落和换行的标签。标题元素标题元素由标签<h1>到<h6>定义。<h1>定义了最大的标题元素，<h6>定义了最小的。<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3><h4>This is a heading</h4><h5>This is a heading</h5><h6>This is a heading</h6>HTML自动在一个标题元素前后各添加一个空行。(3):段落段落是用<p>标签定义的。<p>This is another paragraph</p> HTML自动在一个段落前后各添加一个空行。--------------------------------------------------------------------------------换行当需要结束一行，并且不想开始新段落时，使用<br>标签。<br>标签不管放在什么位置，都能够强制换行。<p>This <br> is a para<br>graph with line breaks</p> <br>标签是一个空标签，它没有结束标记。基本注意点——有用的技巧当你写下HTML文本的时候，你不能确知在另外一个浏览器中，这些文本将被如何显示。有人用着大的显示器，有的人用的小一些。每次用户调整窗口大小的时候，文本都将被重新格式化。不要想在编辑器中写一些空行和空格来协助排版。HTML将截掉你文本中的多余空格。不管多少个空格，处理起来只当一个。一点附加信息：在HTML里面，一个空行也只被当作一个空格来处理。使用空段落<p>来插入空白行是一个坏习惯，请使用<br>标签来替代。（但是不要用<br>标签来创建列表，我们后面会专门学习HTML列表的。）你也许注意到了段落可以不写结束标记</p>。别依赖它，HTML的下一个版本将不准你漏掉任何一个结束标签。HTML自动在某些元素前后增加额外的空行，就像在段落和标题元素的前后一样。我们使用了水平线（<hr>标签）来分隔我们教程的章节。示例：a:多个段落： <html><body><p>This paragraph contains a lot of lines in the source code,but the browser ignores it.</p><p>This paragraph contains a lot of spaces in the source code,but the browser ignores it.</p><p>The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.</p></body></html>(这个例子说明了段落的一些默认行为。)b:换行： <html><body><p>To break<br>lines<br>in a<br>paragraph,<br>use the br tag.</p></body></html> (这个例子说明了在HTML文档中换行的使用。)c:诗歌的问题： <html><body><p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.</p><p>Note that your browser simply ignores your formatting!</p></body></html>(这个例子说明了HTML显示格式的一些问题。)d:标题元素： <html><body><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6><p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p></body></html>(这个例子说明了在HTML中显示标题元素的标签。)e:居中的标题元素：<html><body><h1 align="center">This is heading 1</h1><p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p></body></html>(这个例子显示了一个居中的标题元素。)f:水平线：<html><body><p>The hr tag defines a horizontal rule:</p><hr><p>This is a paragraph</p><hr><p>This is a paragraph</p><hr><p>This is a paragraph</p></body></html>(这个例子说明了如何插入水平线。)g:隐藏的注释：<html><body><!--This comment will not be displayed--><p>This is a regular paragraph</p></body></html>(这个例子说明了在HTML文档中如何插入隐藏的注释。)h:背景色：<html><body bgcolor="yellow"><h2>Look: Colored Background!</h2></body></html>(这个例子说明了如何给页面设置背景色。)
手机怎么制作网站教程
方法/步骤1、使用独立域名 很多站长为了省事，将PC端域名与手机域名使用同一个域名。这本来问题不大，但却忽略了，在移动端，搜索引擎对于PC端的资源是排斥的。也就是说，网站需要有明确的指示给搜索引擎，在什么时候PC端优先，什么时候移动端优先。如果你不懂做适配设置，最好的办法是将PC端网站与手机网站分开，针对移动互联网做适配的手机网站。因而，在搜索有限的情况下，手机网站使用独立域名是最佳的选择。2、使用HTML5程序目前大多数网站建设仍然沿用着ASP、PHP、JAVA、NET等程序语言。这些语言对于PC端网站建设来说没有太大的问题，但由于移动设备的屏幕尺寸所决定的各种因素，这些语言所建设的网站在移动端具有一定的局限性。这时候，更轻便、更灵活、具有强化了的Web网页表现的HTML便成了手机网站建设的最佳选择。3、根据手机特征设计网站手机屏幕远没有PC的大，因而，无论是在版面设计上还是功能设计上，都需要更注重实操性。PC端的版式布局并不适合小屏幕的手机浏览及操作。在手机网站设计上，可以根据手机的实际操作情况来排版网站的栏目。4、使用精简的网页设计手机网站的版面小，因而在进行手机网页设计时要尽量少使用阴影、渐变等复杂的设计手法，尽量采用简洁大方的版面设计，目前一些潮流的设计方式能够在手机网站上得到很好的体现，在手机网站设计中可以参考或使用。5、注重用户体验专业手机网站制作方法中，手机网站一定要注意用户体验,不能单一化,要注意手机的特定人群,这和传统网站制作截然不同，做到上面几点就离成功不远了! 6、避免使用弹窗、flash、java等行为同样道理,flash和弹窗等行为将会占用很大一部分流量,对于移动手机用户而言,无疑会浪费时间和流量,对于搜索引擎而言,基本理解不了。在技术层面来 讲,Apple产品不支持Flash功能,很大一部分智能手机用户用不了这项功能,同样,很多智能手机也不支持Java,所以这只是两方面都不讨好的做 法。7、使用规范化的协议,做好浏览器兼容调试工作一般来说手机建站有xhtml、html5、wml 三种协议,最好使用规范化、标准化的协议格式,避免造成不必要的麻烦。当然也可以做多个版本的站点,站点进行不同版式的自动适配。
html如何做出手机页面
你说的类似于响应式布局，这个css就能实现，有两种方法：1、用@media通过判断浏览器的分辨率（代码自动能判断）来调取不同的css样式。这就需要写不同的css，主要是宽度的调整。（http://www.w3cplus.com/content/css3-media-queries）2、不用固定的宽度。宽度用%。而不用固定的px。
手机怎么制作网站教程
方法/步骤1、使用独立域名 很多站长为了省事，将PC端域名与手机域名使用同一个域名。这本来问题不大，但却忽略了，在移动端，搜索引擎对于PC端的资源是排斥的。也就是说，网站需要有明确的指示给搜索引擎，在什么时候PC端优先，什么时候移动端优先。如果你不懂做适配设置，最好的办法是将PC端网站与手机网站分开，针对移动互联网做适配的手机网站。因而，在搜索有限的情况下，手机网站使用独立域名是最佳的选择。2、使用HTML5程序目前大多数网站建设仍然沿用着ASP、PHP、JAVA、NET等程序语言。这些语言对于PC端网站建设来说没有太大的问题，但由于移动设备的屏幕尺寸所决定的各种因素，这些语言所建设的网站在移动端具有一定的局限性。这时候，更轻便、更灵活、具有强化了的Web网页表现的HTML便成了手机网站建设的最佳选择。3、根据手机特征设计网站手机屏幕远没有PC的大，因而，无论是在版面设计上还是功能设计上，都需要更注重实操性。PC端的版式布局并不适合小屏幕的手机浏览及操作。在手机网站设计上，可以根据手机的实际操作情况来排版网站的栏目。4、使用精简的网页设计手机网站的版面小，因而在进行手机网页设计时要尽量少使用阴影、渐变等复杂的设计手法，尽量采用简洁大方的版面设计，目前一些潮流的设计方式能够在手机网站上得到很好的体现，在手机网站设计中可以参考或使用。5、注重用户体验专业手机网站制作方法中，手机网站一定要注意用户体验,不能单一化,要注意手机的特定人群,这和传统网站制作截然不同，做到上面几点就离成功不远了! 6、避免使用弹窗、flash、java等行为同样道理,flash和弹窗等行为将会占用很大一部分流量,对于移动手机用户而言,无疑会浪费时间和流量,对于搜索引擎而言,基本理解不了。在技术层面来 讲,Apple产品不支持Flash功能,很大一部分智能手机用户用不了这项功能,同样,很多智能手机也不支持Java,所以这只是两方面都不讨好的做 法。7、使用规范化的协议,做好浏览器兼容调试工作一般来说手机建站有xhtml、html5、wml 三种协议,最好使用规范化、标准化的协议格式,避免造成不必要的麻烦。当然也可以做多个版本的站点,站点进行不同版式的自动适配。
如何在手机上制作自己的网页
在手机上制作自己的网页的方法一、工具/原料html页面vs2008二、方法/步骤1、打开vs2008了。点击【文件】【新建文件】【常规】【HTML页面】【打开】。2、如图所示，新建了一个空白的html页面，拆分视图。3、设置页面body样式信息。【-webkit-touch-callout: none; -webkit-text-size-adjust: none;】是防止用户复制和保存图片,只支持iphone、ipad、android4、设置页面的宽度和高度。【.page-content{background:-webkit-linear-gradient(#2F5A53,#6CA199); top:352px; min-height:550px;_height:550px;width:640px; }】5、【关键点】。新建一个div标签，样式使用page-content。6、在段落标记<p>里面输入文字信息，这里就不排版了，主要是教大家方法，然后保存网页。7、将网页上传到服务器目录下。8、输入网站域名，在电脑上访问可以看见如图所示效果，只有左侧部分。9、使用手机访问，得到如图所示效果，就不会像直接书写html代码一样文字很小。10、完整代码。【<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=no" /> <title>不落泪的</title></head><body ><div style="margin: 0px; padding: 5px; border: 1px solid rgb(204, 204, 204); max-width: 100%; font-size: 16.363636016845703px; font-family: 宋体; line-height: 26.666667938232422px; background-color: rgb(248, 247, 245); word-wrap: break-word !important; box-sizing: border-box !important;"><span style="max-width: 100%; word-wrap: break-word !important; box-sizing: border-box !important; color: rgb(57, 57, 57); font-family: 微软雅黑; font-size: 14px;">不落泪的</span></div></body></html>】
