dw怎么做手机网页

什么是.dw文件

DW文件是由Dreamweaver软件创建的网页文件，通常以.html或.htm为扩展名。但是，在开发手机网页时，DW也可以生成.mobile.htm或.mobile.html文件。这些文件包含与PC网页相同的HTML和CSS代码，但需要优化以在移动设备上显示。

如何创建手机网页的DW模板

首先，在Dreamweaver中打开一个新的HTML文档。接着，选择“文件”>“新建”>“页面”，在“新页面”对话框中选择“HTML”和“空白页面”。在页面上添加内容并调整宽度以适应移动设备屏幕。然后转到“文件”>“保存为模板”，命名并保存。现在可以使用此模板创建新的.mobile.htm或.mobile.html文件，并将其上传到移动设备上。

编写移动优化的HTML代码

编写移动设备优化的HTML代码有几个要点。首先，在所有标记和CSS样式中使用相对单位和百分比，而不是绝对单位。其次，使用响应式布局和媒体查询，以在不同设备上呈现不同的布局和样式。另外，减少表格和图片的使用、压缩和精简CSS、缩短代码和移除JavaScript元素以提高页面加载速度。最后，使用W3C的移动友好测试工具来检查代码的兼容性和可用性。

使用DW模板创建具有响应布局的手机网页

通过使用DW模板和响应式布局，在不同的移动设备上创建具有良好布局的手机网页。先创建页面布局，并使用媒体查询确定哪些CSS样式将应用于特定的设备。通过媒体查询可以确定设备的屏幕大小、分辨率和方向，并根据这些参数调整网页排版和大小。在“CSS样式”面板中使用移动优化的CSS代码（如：覆盖默认字体大小，隐藏非必要的元素，设置网页在更小屏幕上居中等）添加样式规则，以使网页在移动设备上看起来尽可能完美。

测试和优化DW手机网页

最后一步是测试和优化DW手机网页。模拟不同的设备，使用模拟工具测试在各种移动设备上的展示情况。通过分析测试结果，进行优化操作，例如减小文件大小以提高页面加载速度；使用任何触摸屏幕事件（如“点击”事件）替代鼠标事件；最关键的是，确定中文在不同设备上的显示问题，推荐使用网络流行字体，并优化中文字体显示效果。

通过DreamWeaver以及上述方法构建的手机网站将拥有良好的用户体验，同时也更为适合在智能终端查看。