怎么制作网站的手机版
随着智能手机的普及,手机网站的使用率和重要性也日益彰显,2015年最新数据显示,目前在所有的网站中,同时具有PC及移动端的网站占了52%,首次超过了纯PC端网站的43%,下面给我们就说一下手机网站的一般制作流程,它包含七个方面的知识,让你避免走一些制作手机网页的弯路。
阅读完成以下知识点,你就能对手机网页的制作和设计有大概的了解,然后有针对性地学相应知识。
1.手机网页的标记语言 WML : 因为WML大部分针对早期和低端的手机,现在已经逐步被其他的技术取代了,现在学习手机网页设计制作完全可以忽略WML。
XHTML: 未来智能手机的市场份额会越来越大,考虑到这点,现在进行手机网页设计制作时,我们会用到更加熟悉的标记语言Xhtml。
现在大部分智能手机的浏览器都能正确处理Xhtml,它会识别两种类型的Html。
①Xhtml:基础的,和桌面浏览器相同的Xhtml ②Xhtml-MP:针对智能手机的Xhtml 这两种类型的不同之处,Xhtml-MP包含比较少的要素和相对宽松的限制,能适合手机平台的渲染,现在很多手机网页设计制作直接用Xhtml,也没什么大问题。
2.手机类型 手机市场上既有非常高端的iPhone手机和谷歌的Android手机,也有诺基亚一些单色点阵显示的低端机。
这些低端机在浏览手机网页时有很多的限制,如屏幕分辨率、渲染Xhtml的性能等,因此如果你的手机网页是针对这部分用户,最好还是用WML。
另一方面,类似于iPhone和Nexus One这种高端智能机,拥有可以和桌面浏览器相媲美的渲染网页的性能。
对这部分用户而言,良好的用户体验是很重要的,受限于手机的传输速度,如果直接用一般的电脑上浏览的网页来代替手机网页,对手机网页的目标客户来说,并非明智之举 3.手机网页的目标群体 任何网站设计网页时都应该明白自己的目标群体,以便向他们传输最合适的信息。
这点在进行手机网页设计制作时更为重要。
因为你不仅要知道你的目标群体,还要知道他们浏览手机网页时的情景。
浏览传统的网站,访客会坐在桌上,有着大分辨率的屏幕。
手机网页的访客则有可能是在排队、等交车、坐在地铁等。
手机网页的目标群体,谷歌的开发者将看手机网页人群分为三大类,这对我们进行手 机网页的设计和制作,很有参考意义。
4.根据具体需要提供网站内容 一个很常见的误区是很多网页开发者认为只需要简单的设置,就可以将一个传统的网页变成可以适应手机浏览的网页,他们认为只需要在CSS样式表将media=”screen”变成media=”handheld”就能使网页神奇般地适用于手机。
这是错误的想法。
虽然针对手机用户变更网页的CSS可以过滤一部分的内容,或者一些CMS网页也提供了相应的转换插件。
但这些方案并不完善。
W3c定义了“一个网站”的概念,意思是手机网页不一定要提供和传统网站完全一样的内容和设计,而是要根据手机的性能、带宽等方面的不同提供一些差异化服务。
根据这个定义,一些传统网页的内容和功能不能在手机上实现是很合理的。
不同手机 能处理的内容和功能也都是不一样的。
所以也可以根据这些手机进行相应的网页制作。
5.选择域名 为手机网页选择什么域名取决于你的目标群体是如何进入网站的。
这里有三种域名可 供选择: A:为手机网页使用独立域名 B:为手机网页使用子域名 C:为手机网页注册mobi的顶级域名 D:判断客户端,并自动显示对应内容 6.为手机网页验证标记语言 电脑的网页浏览器对错误比较宽容,一些html标记的忘记书写或者没有正确嵌套在电脑浏览器都会正确显示,当然容错率高意味着消耗更高的cpu和内存。
手机浏览器的性能还无法和电脑相提并论,所以手机浏览器对手机网页的错误要严格一些。
所以在设计和制作手机网页时,你必须不断进行检查、验证和纠错。
验证手机网页和验证一般传统的网页没什么区别,如果你使用Xhtml编写,可以使用相同的工具。
W3C验证器可以验证一些简单的错误,当然这里有一个更适合验证手机网页的版本。
7.为手机网页不断测试 当通过了手机网页的验证之后,就要针对几种不同的手机进行各种测试了。
用电脑的 浏览器虽然可以进行模拟测试,但是并不完善。
这种方式通过的手机网页不能适用于某些手机。
有些手机文件尺寸的限制可能会很小,所以你制作的手机网页在这些设备上甚至无法显示。
另外浏览器支持的文件类型也会不同,支持的图像格式也会不同。
测试时候手机网页当然不可能拥有所有手机,所以制作网页时可以使用一些替代手段。
手机网页和电脑网页编写的代码一样吗
不一样的。
1. 手机网页开发。
这部分跟web前端开发差别不大,使用的技术都是html+css+js。
区别为手机浏览器是webkit的天下,pc端是IE的天下。
手机网页可以理解成pc网页的缩小版加一些触摸特性。
因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性。
2. app前端开发。
使用的技术也是html+css+js,但它需要基于PhoneGap等开发平台调用手机核心功能接口(包括地理定位,加速器,联系人,声音和振动等)模拟native app,这部分跟web前端开发完全不同。
最终代码发布要分别编译成各系统平台的app。
3. 在工具上,手机版网页和电脑版网页没有什么区别,可以根据自己的喜好。
我是喜欢用Dreamweaver的,而且Dreamweaver cs6有个多屏预览的功能,可以很方便的预览手机、平板、PC端的效果。
不过Dreamweaver 挺大的,还有很多比较快比较好的编辑器,比如EditPlus,这还是看个人的习惯和喜好了。
4. 推荐一个编辑器sublime text,我自己觉得超好用。
5. 在代码方面的话:首先得加上这样的一行。
设置宽度、高度、是否能够缩放。
6. 然后,主要是要考虑适配。
比较好的是做到自适应。
这个可以搜一下,我记得月光博客里面就有篇很详细的。
其次,可以用@media only screen and(min-device-width : 320px) and(max-device-width : 480px){ }来对不同像素的屏幕写不同的样式。
可以看下知乎的登录页面,用的就是@media。
7. 再然后要考虑的是用户体验。
简单的拿个链接来说,在PC端因为有鼠标,很容易点到。
可是手机端就不一样,就几个字的链接很难点到,所以就要扩大点的面积。
这就是为什么会出现电脑版的网页和手机版网页。
8. 其实做手机版的网页有个好处就是可以大量的使用HTML5和CSS3,这样能做出很多效果。
有什么手机制作网页的软件?
目前最好的动态WAP辅助开发工具就是QuickWAP,当然不是指的一些WAP编辑器,比如Waptor。
建议你使用QuickWAP XML版开发,目前大部分开发WAP都是用记事本开发的。
当然可以配合一些其他辅助工具,但都不是所见即所得的。
你用QuickWAP可以轻而易举的开发出附图中的代码,而且是事半功倍。
怎么编写手机的网站?自己的网站像两项都用!就是PC。
。
PC和手机 ...
网站制作软件包括: 一、菜鸟级网页制作软件 如果你是一个网页制作初学者,那么让FrontPage带你走进那绚丽多彩的网页制作世界吧! ①Microsoft FrontPage 如果你曾对Word很熟悉,那么相信你用FrontPage进行网页设计一定会非常顺手。
使用FrontPage 制作网页,你能真正体会到“功能强大,简单易用”的含义。
页面制作由FrontPage中的Editor 完成,其工作窗口由3个标签页组成,分别是“所见即所得”的编辑页,HTML代码编辑页和预览页。
FrontPage 带有图形和GIF动画编辑器,支持CGI和CSS。
向导和模板都能使初学者在编辑网页时感到更加方便。
二、中级网页制作软件 如果你对网页设计已经有了一定的基础,对HTML脚本语言又有一定的了解,那么DreamWeaver 是你不二的选择。
①DreamWeaver 自制动态HTML动画的网页 DreamWeaver是一个很酷的网页设计软件,它包括可视化编辑、HTML代码编辑的软件包,并支持ActiveX 、JavaScript、Java、Flash、ShockWave等特性,而且它还能通过拖拽从头到尾制作动态的HTML 动画,支持动态HTML(Dynamic HTML)的设计,使得页面没有plug-in也能够在Netscape和IE 4.0 浏览器中正确地显示页面的动画。
同时它还提供了自动更新页面信息的功能。
DreamWeaver还采用了Roundtrip HTML技术。
这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换,HTML句法及结构不变。
这样,专业设计者可以在不改变原有编辑习惯的同时,充分享受到可视化编辑带来的益处。
DreamWeaver最具挑战性和生命力的是它的开放式设计,这项设计使任何人都可以轻易扩展它的功能。
②Fireworks,第一款彻底为Web制作者们设计的图片处理软件。
Fireworks的来头实在不小,它的出现使Web作图发生了革命性的变化。
Fireworks是专为网络图像设计而开发,内建丰富的支持网络出版功能,比如Fireworks能够自动切图、生成鼠标动态感应的javascript。
而且Fireworks具有十分强大的动画功能和一个几乎完美的网络图像生成器(Export功能)。
它增强了与dreamweaver的联系,可以直接生成dreamweaver的Libaray甚至能够导出为配合CSS式样的网页及图片! ③Flash,让你的网页动起来 Flash是用在互联网上动态的、可互动的shockwave。
它的优点是体积小,可边下载边播放,这样就避免了用户长时间的等待。
可以用其生成动画,还可在网页中加入声音。
这样你就能生成多媒体的图形和界面,而使文件的体积却很小。
FLASH虽然不可以像一门语言一样进行编程,但用其内置的语句并结合 JavaScripe,您也可做出互动性很强的主页来。
有人曾经说过:下个世纪的网络设计人不会用FLASH,必将被淘汰出局!这句话在2012年之前应该说是对的,不过随着html5和css3技术的发展,加上智能手机基本都不支持flash了,所以Flash的光彩已经不如当年了,但是这不妨碍我们学习了解它。
三、高级网页制作软件 如果你要成为一个专业网站制作人员,那么有必须会一门网站开发语言,为什么呢??我们发现没有,很多网站有留言功能,有会员注册,登陆等功能,这些功能可以保存用户的数据,资料,这就是通过编程技术实现的。
网站主流编程语言有asp、php和asp.net,其中asp微软停止更新支持了,不建议学,php或asp.net是现在主流的编程语言,小编我学的是asp.net,当然php 也很流行,大家可以自己百度了解一下这两个语言区别,挑一个来学习就可以了,不用两个都学,学好一个就够了。
为什么还要要有一个高级网页制作软件呢?比如我们开发asp.net ,高手一般都是用计事本来编写,然后保存为aspx页面,但是对于新手来说,建议用一个编程软件,这些软件可以有很强的提示功能,比如你语法写错,会提示你,这样可以更好学习和提高,下面介绍开发asp.net软件。
①Microsoft Visual Studio 该系列的版本有:2003、2005、2008和未来的版本;是美国微软公司的开发工具包系列产品。
这款软件主要用来进行asp.net编程,就是制作aspx动态页面,可以让你在编写asp.net代码时候提高效率。
如果你要从事网站制作这个行业,上面说到的几款软件和脚本(html,css,javascript),编程知识(php或asp.net)都必须去学习,尤其是脚本和编程必须学精。
有手机版的网页制作软件吗
不建议用手机上的,我其实之前和你有一样的想法,主要在于手机上没有比较成熟的编辑器,敲出来总是会有编码问题,导致中文字符乱码。
而且其实用手机的输入法并不好敲,你与其用手机敲网页还不如看看教程书比较划算。
但是,手机敲是可以敲的,自带的编辑器敲完改为html后缀就行了。
网上也有一些代码编辑器,勉强能用,但是我仍然建议,手机敲网页还是当练习比较好。