手机网站开发必修课2009总结

第一篇：手机网站开发必修课2009总结

手机网站开发必修课[2009年总结] 前言：

手机网站开发，有着许多不为人知的困难：

一是可参考的资料太少，大部分手机网站都处于起步阶段，很多的时候都是摸着石头过河，而鉴于手机网站的特殊性，也使得我们在参考成功案例之余，要做更多的思考； 二是兼容性工作异常艰辛，难度一点也不比web网站的兼容性工作来的低。对于手机网站来说，相信现在仅仅只是个开始，随着各种新机型的相继面世，这块领域必将成为兵家必争的新高地。

一、手机用户设备统计分析：

拥有全面的用户数据，无疑能帮助我们做出更符合用户需求的产品。内部数据能帮我们精确了解我们的目标用户群的特征；而外部数据能告诉我们大环境下的手机用户状况，并且能在内部数据不够充分的时候给予我们一些非常有用的信息。

从外部数据来看，09年10月到11月期间

国内浏览器品牌市场占有率前三甲为：

Nokia(78%)

Opera(OEM)(10%)

iPhone(Safari)(3%)

国内的手机操作系统前三甲为：

Nokia SymbianOS(80%)

iPhoneOS(6%)

SonyEricsson(5%)

当然，作为中国的手机网站开发者，不能忽视强大的山寨机市场（或者应该叫作做国货精品手机市场？）。顺便提一下，这类手机通常使用的是MTK操作系统。（以上数据均来自statcounter.com）

二、手机浏览器兼容性测试结果概要：

注意：以下所说的“大多数”是指在测试过的机型中，发生此类状况的手机占比达50%及以上，“部分”为20%到50%；“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型，虽然我们采集的样本尽量覆盖各种特征的手机，但并不代表所有手机的情况。

XHTML部分：

大多数手机不支持的：

表单元素的“disable”属性

部分手机不支持的：

“button”标签

“input[type=file]“标签

“iframe”标签。

虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。

少数手机不支持的：

“select”标签：该标签如果被赋予比较复杂的CSS属性，可能会导致显示不正常，比如”vertical-align:middle”。

CSS部分

大部分手机不支持的：

“font-family”属性：因为手机基本上只安装了宋体这一种中文字体；

“font-family:bold;”：对中文字符无效，但一般对英文字符是有效的；

“font-style: italic;”：同上；

“font-size”属性：比如12px的中文和14px的中文看起来一样大，当字符大小为18px的时候你也许能看出来一些区别；

“white-space/word-wrap”属性：无法设置强制换行，所以当你网页有很多中文的时候，需要特别关注不要让过多连写的英文字符撑开页面；

“background-position”属性：但背景图片的其他属性设定是支持的；

“position”属性；

“overflow”属性；

“display”属性；

“min-height”和”min-weidth”属性；

部分手机不支持的：

“height”属性：对”height”的支持不太好，奇怪的是在我们的测试当中，仅仅只有很少部分手机不支持”width”属性；

“pading”属性

“margin”属性：更高比例的手机不支持”margin”的负值。

少数手机不支持的：

少数手机对CSS完全不支持；

JavaScript部分

这部分测试相对不那么让人抓狂，要么干脆不支持，如果支持的话，对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。

在我们测试过的手机当中，支持（包括不完全支持）JavaScript的手机比例大约在一半左右，当然，对于我们来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级。

其他

部分手机不支持png8和png24，所以尽量使用jpg和gif的图片

另外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所以慎用有平滑渐变的bar设计

部分手机对于超大图片，既不进行缩放，也不显示横下滚动条

少数手机在打开超过20k的测试页面时，会显示内存不足

三、手机网站开发中需要注意的常见问题：

手机网页编码需要遵循什么规范？

遵循XHTML Mobile Profile规范（WAP-277-XHTMLMP-20011029-a.pdf），简称为XHTML MP，也就是通常说的WAP2.0规范。XHTMLMP是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础，加入了一些来自XHTML 1.0的元素和属性。这些内容包括一些其他元素和对内部样式表的支持。和XHTML Basic相同，XHTML MP是严格的XHTML 1.0子集。

网页文档推荐使用什么扩展名？

推荐命名为xhtml，按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持的不好。

为什么现今大多数的网站一行字数上限为14个中文字符？

由于手持设备的特殊性，其页面中实际文字大小未必是我们在CSS中设定的文字大小，尤其是在第三方浏览器中。例如Nokia5310，其内置浏览器 页面内文字大小与CSS设定相符，但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试，其文本大

概在16px左右。假如屏幕分辨率宽度为240px，去除外边距，那么其一行显示14个字以内，是比较保险（避免文本换行）的做法。

使用WCSS还是CSS？

WCSS(WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的CSS样式表。它是CSS2的一个子集，去掉了一些不适于移动互联网特性的属性，并加入一些具有WAP特性的扩展（如-wap-input-format/-wap-input-required/display:-wap-marquee等）。需要留意的是，这些特殊的属性扩展并不是很实用，所以在实际的项目开发当中，不推荐使用WCSS特有的属性。

避免空值属性

如果属性值为空，在web页面中是完全没有问题的，但是在大部分手机网页上会报错。

网页大小限制

建议低版本页面不超过15k，高版本页面不超过60k。

用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱？

有条件的话，我们当然建议在手机实体上进行测试，因为目标客户群的手机设备总是在不断变化的，这些手机模拟器通常不能完全正确的模拟页面在手机上的显示情况，比如图片色彩，页面大小限制等就很难再模拟器上测试出来。当然，一些第三方手机浏览器的在线模拟器还是可以进行测试的，第三方浏览器相对来说受手机设备的影响较小。

四、推荐参考资料：

开发权威网站

（汉化版）

经典开发文章

手机型号查询

机型很全，偏国外机型，参数较多

机型较全，偏门机型可能无内容

试手机网：手机查询+模拟.html 机型稍少，可以模拟手机操作

五、总结

目前来说，手机网站开发是个典型的设备驱动开发的过程，页面被设计成什么样，能做到怎么样，几乎全取决于目标客户的手机设备情况。

所以，对手机设备的了解，对于设计开发过程有着直观重要的作用，对于前端来说，就需要有计划的进行长期的手机浏览器兼容性测试，什么样的设计能被实现，什么样的标签可以使用，这些都需要有数据的支持。

我们必须有这样的认知，开发的手机网页总是会在或多或少的手机设备上出现问题，因为我们永远无法知道所有用户的手机设备情况，所以我们更要尽量的遵循标准进行开发，这样才能将满足用户的比例做到最好。

任何一个领域都有值得你进行深入了解的地方，即使现在看起来，手机网站的开发还有点不入主流，但我相信，随着手机设备的更新换代，总有一天它也会成为我们占领客户的一个重要战场，iphone这类有符合web标准的浏览器的手机发布，也给了我们更多的信心。总之，革命尚未成功，同志仍需努力！

第二篇：手机触屏网站开发技巧总结

手机网站开发 http://

手机触屏网站开发技巧总结

侦测iPhone/iPod 开发特定设备的移动网站，首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA，然后转向到专属的URL。Code: if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))){ if(document.cookie.indexOf(“iphone_redirect=false”)==-1){

window.location = “http://

Code:

阻止旋转屏幕时自动调整字体大小

-webkit-text-size-adjust是webkit的私有css： Code: html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;} 侦测设备旋转方向 iPhone可以在横屏状态下浏览网页，有时候你会想知道用户设备的手持状态来增强可用性和功能。下面一段Javascript可以判断出设备向哪个方向旋转，并且替换css： Code: window.onload = function initialLoad(){updateOrientation();}

function updateOrientation(){

var contentType = “show_”;switch(window.orientation){

case 0: contentType += “normal”;break;

case-90: contentType += “right”;break;

case 90: contentType += “left”;

break;

case 180:

手机网站开发 http://

contentType += “flipped”;break;}

document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);}

iPhone才识别的CSS

如果不想设备侦测，可以用CSS媒体查询来专为iPhone/iPod定义样式。Code: @media screen and(max-device-width: 480px){}

CSS3媒体查询 对于CSS3的媒体（media）查询，iPhone和iPad是不同的。通过这个技术，可以对设备不同的握持方向应用不同的样式，增强功能和体验。

iPhone是通过屏幕最大宽度来侦测的。是这样：

Code: 而iPad有点不同，它直接使用了媒体查询中的orientation属性。是这样： Code:

之后只要将不同的样式分别定义出来就可以了。

缩小图片

网站的大图通常宽度都超过480像素，如果用前面的代码限制了缩放，这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够，我们可以用CSS让iPhone自动将大图片缩小显示。Code:

@media screen and(max-device-width: 480px){

img{max-width:100%;height:auto;}

}

手机网站开发 http://

注意如果原图片非常大，或一个页面非常多图，最好还是在服务器端缩放到480像素宽，iPhone只需要在正常浏览时缩略到320像素。这样不会消耗太多流量和机能。

默认隐藏工具栏

iPhone的浏览器工具栏会在页面最顶端，卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间，特别是横向屏幕时。我们可以让它自动卷动上去。Code:

模拟:hover伪类 因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：

Code:

var myLinks = document.getElementsByTagName(„a‟);for(var i = 0;i < myLinks.length;i++){

myLinks[i].addEventListener(‟touchstart‟, function(){this.className = “hover”;}, false);myLinks[i].addEventListener(‟touchend‟, function(){this.className = “”;}, false);

}

然后用CSS增加hover效果：

Code:

a:hover, a.hover { /* 你的hover效果 */ }

这样设计一个链接，感觉可以更像按钮。并且，这个模拟可以用在任何元素上。

手机网站开发 http://

iphone fixed positioning

Code: 关于漂浮定位，测试后发现 { position: fixed;} 不能为其用，可以改为 { position:absolute;} 来实现，可以使用iphone看下DEMO：iphone-fixed-positioning Touch Events iPhone 是使用触屏的方式，所以就需要有手触屏和离开的时候的事件机制，幸好，iPhone做好了这方面的工作，提供了四个处理touch的事 件：touchstart，touchend，touchmove，touchcancel(when the system cancels the touch)。

Gestures 即是指两只手指接触屏幕的时候缩放或者旋转的效果，对于侦听gestures，iPhone也有三个事件：gesturestart，gestureend，gesturechange。

同时事件参数event有两个属性：scale，rotate。Scale的中间值是1，大于1表示放大，小于1表示缩小。

手机网站开发 http://

第三篇：网站开发中期总结

网站开发技术中期总结

网站开发是一门技术精深的学科，在这里学习了网站开发与网页编写的区别，学习了网页编写的基本语言HTML，学习了JSP技术，学习了利用Spring、Hibernate等框架优化网页编写，通过这些学习，真正的了解了网站开发，也学会了一些简单的开发技术。

HTML语言是网页开发中最简单也是最基本的标签语言，是学习网站开发最先学习的一门网页编写技术。HTML是一门语言，也可以说是一门标签，它能够将网页的各个组成部分利用简单的标签进行标记，以使这些文字、图片等内容能够满足我们的需要，使其转化成网页的形式。一个网页对应于一个HTML文件，HTML文件以.htm或.html为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑来产生HTML文件。标准的HTML文件都具有一个基本的整体结构，即HTML文件的开头与结尾标志和HTML的头部与实体2大部分。有3个双标记符用于页面整体结构的确认。标记符说明该文件是用HTML来描述的。它是文件的开头，而则表示该文件的结尾，它们是HTML文件的始标记和尾标记。掌握HTML可以说是要进入网站开发的最基本要素，也是大体了解网页编写的最直接最快途径。XML是用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。XML是标准通用标记语言(SGML)的子集，非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。XML与HTML的设计区别是：XML是用来存储数据的，重在数据本

身；而HTML是用来定义数据的，重在数据的显示模式。在学习中要分清楚他们的区别。JSP技术是在原有的静态网页设计中利用JAVA语言而进行动态网页设计的技术，JSP是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件(*.jsp)。用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。

Sping是一个开源框架，是为了解决企业应用程序开发复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许您选择使用哪一个组件，同时为 J2EE 应用程序开发提供集成的框架。Sping框架将原有的各种框架进行了缝合，使得原有的网站开发中各种框架能够更加的简单明了的表达所需要的功能。Spring不重新开发已有的东西。因此，在Spring中你将发现没有日志记录的包,没有连接池,没有分布事务调度。这些均有开源项目提供(例如Commons Logging 用来做所有的日志输出，或Commons DBCP用来作数据连接池),或由你的应用程序服务器提供。Spring框架的使用更加的简化了网站开

发的难度，在极其方便快捷中就能够编写出与用JSP相同功能的程序代码，是网站开发的一大进步。

Hibernate是一个开放源代码的对象关系映射框架，它对JDBC进行了非常轻量级的对象封装，使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库。Hibernate可以应用在任何使用JDBC的场合，既可以在Java的客户端程序使用，也可以在Servlet/JSP的Web应用中使用，最具革命意义的是，Hibernate可以在应用EJB的J2EE架构中取代CMP，完成数据持久化的重任。在Spring框架加上Hibernate框架中开发网站，能够最大限度的优化动态网页的编写，拥有最大量的数据量。

网站开发从最开始的仅仅利用文字、图片的静态网页到现在包含有大量数据的动态网页，从只使用HTML标签语言到现在的JSP、ASP、HPH等大量技术，已经从单一到丰富，从一个计算机附属到独立学科。

第四篇：网站开发实习总结

网站开发实习

个人实习总结

实习类型 实践教学 实习单位 ````学院 指导教师 ````` 所在院（系）信息技术系 班 级 ````班 姓 名 ```` 学 号 ``````````

一、实习时间和地点

日期：```````````````````` 时间：`````````````````````` 地点：````````````````````````

二、实习的内容

1、小组题目：```````网站制作

2、我的任务：网站二级页面制作

3、每天具体实习内容

（一）小组商议制作网页内容，分工制作内容。

（二熟悉网页制作工具，寻找素材，设计大概模版。

（三）；制作网站二级页面。利用工具DREAMWEAVER制作。具体内容如下。用DREAMWEAVER创建站点是很容易的。首先，我们来看一下创建一个只包含一个网页的站点。选择“文件”菜单的“新建”选项，单击“站点”命令，这时新建站点对话框就弹出来了，在“指定新站点位置”文本框中输入新站点的位置，单击“只有一个网页的站点” 图标，单击“确定”按钮。这就建立好站点了，我们现在来看一下新的站点里有什么，单击“视图”工具条的“文件夹”按钮。在文件夹列表里有一个网页文件，名字叫做“index.htm”。我们知道，每一个站点都要有一个主页，这个主页也是一个网页文件。浏览者访问站点时首先进入的就是站点的主页。主页的名字在一般情况下就叫做“index.htm”。就是说我们新建只包含一个网页的站点时，DREAMWEAVER就自动为我们创建了站点的主页了。这个新建的站点主页时空的，我们可以向里面添加内容.在文件列表里除了主页之外，还有文件夹。新建站点时，DREAMWEAVER都会在站点所在位置下新建两个文件夹，一个是“images”另一个是“_private”。我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。“private”文件夹比较特殊，其中的文件对浏览者来说是隐含的，我们可以把一些不想让浏览者看到的网页文件放在这个文件夹里，比如：我们可以在这个文件夹里存放注册用户的个人信息。尽管每一个站点都要有一个主页，不过创建站点时我们仍然可以从一个空站点开始：选择“文件”菜单的“新建”命令，单击“站点”选项，在“新建站点”对话框里，我们可以选择“空站点”图标来创建一个空站点。“新建站点”对话框中还有许多其他图标，这是DREAMWEAVER提供的用来创建站点模板或向导。我们创建只有一个网页的站点或者创建空站点，都是从头开始来创建一个站点，这就好像盖房子一样，首先画图纸。然而，有许多的房子都具有相似的结构和用途，所以我们可以用一张图纸盖很多相似的房子，这样就节省了许多工作。同样的，尽管站点的风格千差万别但是有许多站点的功能和结构都是一样的，如果我们从头开始建立站点的话，就要做许多重复劳动，这时，我们就可以使用模板或向导来建立站点。模板和向导的作用就好像盖房子的图纸一样，我们不必每次建立站点时都从头开始。我们单击“个人站点”图标，用它可以迅速创建一个个人站点，输入站点所在的位置，单击“确定”按钮，这样我们刚就创建了个人站点。个人站点模板已经为我们规划好了站点的目录和建立了相关的页面。现在我们点击一下“文件夹”按钮，双击index.htm图标，我们安装软件时，一步步的用对话框提示我们完成安装过程的程序就是一个向导。在

DREAMWEAVER里，向导也是一种模板，不过它是一种特殊的模板，它会以对话框的形式辅助你完成站点的创建过程。现在我们选择“文件”菜单的“新建”选项，单击“站点”命令，你看，DREAMWEAVER提供了两个向导：公司展示向导、讨论站点向导，使用起来都很方便，你有兴趣也可以利用向导建立一个站点。创建页面最简单的方法就是单击DREAMWEAVER“常用”工具栏的“新建”按钮。它的右方有一个向下的小箭头，它是用来选择要新建什么，可以用“新建”按钮新建网页、站点、文件夹和任务。默认状态下是新建网页。如果要新建网页，可以不用向下箭头键选择，而直接单击“新建”按钮。不过使用文件菜单的“新建”命令来新建网页能够有更大的选择。单击文件菜单的“新建”命令，选择“新建网页”，在“新建”对话框里，可以看到DREAMWEAVER提供的许多网页模板，我们可以用这些模板来建立相应的网页。在右下角的预览框里可以看到选中模板的外观。选择“两栏正文”网页，这样就创建了一个新的分为两栏的网页了。然后点确定。使用模板可以不用总是从空白网页开始编辑，这样就省力很多。网上几乎所以的网页都使用图片加以点缀，在网页中插入适当的图片，能够产生图文并茂的效果。来看一下用文字来建立链接首先创建一个指向站点内其他网页的超链接。选择“插入”菜单的“超链接”命令，在文件列表框内选择“页面1.htm”文件，注意在URL文本框中显示了该文件的地址。单击“确定”按钮.超链接就制作成功了。我们切换到预览模式（单击预览按钮），当我们把鼠标指向“主页”两字时鼠标变成手形，单击它，我们就切换到主页了。这样我们就差不多完成了网页的制作步骤，最后可将它发布到Web服务器上。站点发布前还要对它进行检查工作，包括超链接，页面等。

三、心得体会

1.成绩与收获

熟悉了HTML的基本语法, 初步掌握使用HTML编写网页，较熟悉网页制作工具DREAMWEAVER。学会了网页的制作，学会了网页特效，怎样的特效才能凸现网页主题。在几节课的网页制作中了解到了合作的重要性，制作是虽然是每人负责一个网页，但也要互相交流，互转自相帮助，不能只顾自己，要吸取他人的优点，如：网页的排版，网页的特效等等，都值得我去学习。还要听取他人的意见和建议，不能只顾自己，这分数是集体的，不是个人的。如果有什么好的方法和效果要和大家一起分享。这样才能使网页更完整，更优秀。

2.问题与不足

DW中对空格输入的限制。

在asp中把文件上传到服务器、保存到数据库中、然后再读出来。还有批量上传、从表单中把上传的文件与其它项分离等问题。

批量更新，批量删除，数据库里面的东西。

如何动态调用数据库的资料，并与asp程序进行交互。

css里面有属性 text-algin 设计文本水平对齐方式，在IE8 以下版本，都能正常使用，为什么在IE8里面却不管用，跟本没有效果，但把网页里面的dtd声明去掉之后，这个属性就管用了。

在asp中，如何在后台使用javascript连接数据库，还有 前台javascript

能否跟后台vbscritp交互，如果不能说明理由，如果后台程序是javasctipt 前台javascript能否跟后台javascript进行数据交互。

3.对策与建议

DW中对空格输入的限制是针对“半角”文字状态而言的，因此通过将输入法调整到全角模式就可以避免了，方法是：打开中文输入法（以人工智能ABC为例），按Shift+Space切换到全角状态，现在应该没问题了。

关于如何控制表单和表单处理的问题，先用html做个表单，一定要有