侦测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://www.8mart.cn”;
} }
虽然Javascript是可以在水果设备上运行的，但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输，所以下面是服务器端侦测和转向： Code: if(strstr($_SERVER['HTTP_USER_AGENT'],?iPhone?) ||
strstr($_SERVER['HTTP_USER_AGENT'],?iPod?)) { header(?Location: http://www.8mart.cn/iphone?);
exit();
}
设置viewpoint和屏幕等宽 如果不设置viewpoint，网站在viewpoint就会显示成缩略形式。如果你专门为iPhone/iPod开发网站，这一条很有用，而且很简单，只需要插入到head里就可以：
Code:
<meta name=”viewport” content=”width=device-width; initial-scale=1.0;
maximum-scale=1.0;”>
使用iPhone规格图标 如果你的用户将你的网站添加到home screen，iPhone会使用网站的缩略图作为图标。然而你可以提供一个自己设计的图标，这样当然更好。图片是57×57大小，png格式。不需要自己做圆角和反光，系统会自动完成这些工作。然后将下面这条加入head中：
手机网站开发 http://www.flymedio.com
Code:
<rel=”apple-touch-icon” href=”images/youricon.png”/>
阻止旋转屏幕时自动调整字体大小
-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://www.flymedio.com
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: <link rel=”stylesheet” media=”screen and (max-width: 320px)” href=”portrait.css” /> <link rel=”stylesheet” media=”screen and (min-width: 321px)” href=”landscape.css” /> 而iPad有点不同，它直接使用了媒体查询中的orientation属性。是这样： Code:
<link rel=”stylesheet” media=”screen and (orientation:portrait)” href=”portrait.css” />
<link rel=”stylesheet” media=”screen and (orientation:landscape)” href=”landscape.css” /> 之后只要将不同的样式分别定义出来就可以了。
缩小图片
网站的大图通常宽度都超过480像素，如果用前面的代码限制了缩放，这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够，我们可以用CSS让iPhone自动将大图片缩小显示。 Code:
@media screen and (max-device-width: 480px){
img{max-width:100%;height:auto;}
}
手机网站开发 http://www.flymedio.com
注意如果原图片非常大，或一个页面非常多图，最好还是在服务器端缩放到480像素宽，iPhone只需要在正常浏览时缩略到320像素。这样不会消耗太多流量和机能。
默认隐藏工具栏
iPhone的浏览器工具栏会在页面最顶端，卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间，特别是横向屏幕时。我们可以让它自动卷动上去。 Code:
<script type=”application/x-javascript”> addEventListener(“load”, function() { setTimeout(hideAddressbar, 0); }, false); function hideAddressbar() {
window.scrollTo(0, 1);
}
</script>
模拟: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://www.flymedio.com
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://www.flymedio.com
第二篇：网站开发实习总结
网站开发实习
个人实习总结
实习类型 实践教学
实习单位 ````学院
指导教师 `````
所在院（系） 信息技术系
班 级 ````班
姓 名 ````
学 号 ``````````
一、实习时间和地点
日期：````````````````````
时间：``````````````````````
地点：````````````````````````
二、实习的内容
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做个表单，一定要有<form>标签，它有一个属性叫做action，设置action=“*。php”，表单里的内容提交后就可以传递到php页面中进行处理，在php页面里可以通过函数将获得的信息传递到数据库并保存。javascript在这个过程中只加载在html页中，用于控制表单，比如用户输入的e-mail地址格式，用户名密码格式等等，都可以用javascript中的正则表达式来判断，做一个这样的站点，只要你html（前台设计）、javascript（表单控制）、css（前台美工）、php、mysql都懂得差不多，在自己的机子上装一个apache服务器，然后就可以做的出来了