DW网页设计期末作业，实战解决常见页面布局问题攻略

本次网页设计期末作业旨在解决常见的页面布局问题，通过学习和实践，学生们掌握了页面元素排列、响应式设计、导航栏设计等重要技巧，作业过程中，学生们通过不断调整和优化布局，提高了页面的用户体验和视觉效果，本次作业旨在培养学生的实际操作能力和解决问题的能力，为未来的网页设计工作打下坚实的基础。

网站设计时页面布局策略及Dreamweaver软件使用指南

网站布局设计步骤

勾勒网页外观轮廓

初步设计网页的外观轮廓，可以在白纸上简单描绘，对各种要素进行粗略布局，考虑网站的完整性、重点突出的元素、整体协调平衡等要素，将logo、导航等放置在重要的突出位置。

选择合适的布局方式

可以采用国字型布局，适用于信息分类繁多、需要良好组织的网站，还有兼容浏览设备的长屏布局,以及合理的颜色搭配等。

使用Dreamweaver设置页面大小

设置字体和页面大小

在Dreamweaver的编辑菜单中，选择首选参数，然后进入字体设置，你可以设置字体大小，使代码视图变大，若要设计特定大小的页面，可以调整文档窗口大小,编辑预定义大小或创建新的大小。

使用Dreamweaver设计网页

创建HTML文件

在线下载Dreamweaver软件并打开，新建文件，选择HTML文档类型，然后开始创建，填写好代码内容后，点击保存,按F12预览效果。

设计视图与代码视图

启动Dreamweaver 2019，在软件主界面点击中间的【新建】按钮，选择【HTML文档】类型，在工具中选择设计视图，方便边做边查看效果，但请注意，一切以代码为准,设计视图有时会出现排版混乱的情况。

解决Dreamweaver设计视图排版混乱问题

以代码为准

设计视图排版受多种因素影响，可能会混乱，但只要代码没有问题，且在浏览器浏览没有问题，就说明代码规范，建议使用360浏览器浏览,因为它兼容性较好。

其他解决方法

删除排版混乱前的代码，重新校正并刷新；检查是否有命名相同或错误的css代码，检查嵌套语句中的结束语句是否少写或多写,给表格定义css样式也能更好地进行排版。

Dreamweaver布局常用方法

在Dreamweaver中，网站布局主要是通过html代码实现，常用的方法有使用p标签结合css进行布局，通过maigin与padding、position等来控制p的布局和位置。

PS切片和DW中p的布局方法

对于不规则网页页面图片，可以先在Photoshop中进行切片工具切分，保存为web格式，然后在Dreamweaver中新建一个网页，使用p标签进行布局，建议使用css布局，这样可以通过切换不同的css来变换网页风格，在进行切片时，要合理切片，切片大小越小越好，布局时，可以先插入表格，再将切片图片导入相应位置，如果想成为网页布局高手，建议学习DIV+CSS布局。

是网站设计时的页面布局策略及Dreamweaver软件的使用指南,希望能对你有所帮助。