1、第6章 布局网页版面普通高等学校计算机教育“十二五”规划教材网页设计与制作立体化教程（Photoshop+Dreamweaver+Flash CS6双色微课版）26.1 课堂案例：布局“酒店预订”网页内容导航6.2 课堂案例：布局“婚纱礼服”网首页6.3 项目实训6.4 课后练习课堂案例：布局“酒店预订”网页为了使网页更加美观，可通过使用表格或单元格美化网页布局，同时也可创建框架和框架集制作网页整体架构。本例将制作一个酒店预订网页，完成后的参考效果如图所示。“酒店预订”网页效果6.1.1创建表格表格不仅可以为页面进行宏观的布局，还可以使页面中的文本、图像等元素更有条理。Dreamweaver
2、CS6的表格功能强大，用户可以快速、方便地创建出各种规格的表格，其具体操作如下。（1）“表格”对话框（2）创建的表格6.1.1创建表格（3）设置嵌套表格（4）设置第二个嵌套表格6.1.2调整表格结构选择表格和单元格是调整表格结构的前提，Dreamweaver中主要有以下几种选择表格和单元格的方法。1.选择表格和单元格选择整个表格选择单元格6.1.2调整表格结构选择多个单元格选择整行选择整列6.1.2调整表格结构2.插入与删除行或列 插入行或列：利用快捷菜单插入行或列 删除行或列：选择需删除的行或列，单击鼠标右键，选择【表格】/【删除行】命令可删除行，选择【表格】/【删除列】命令则可删除列。6.
3、1.3设置表格和单元格创建的表格还可对其进行相关设置，使其满足设计中的需要，如调整行高列宽，设置单元格属性等，其具体操作如下。（1）调整表格（2）设置单元格背景6.1.4在表格中插入内容完成表格插入与结构调整后，就可以在表格中添加需要的内容。（1）选择图片（2）确认属性（3）调整图片大小6.1.4在表格中插入内容（4）添加并设置文本（5）添加并设置导航文本6.1.5创建框架和框架集利用Dreamweaver提供的“新建”功能可以很方便地创建框架集。下面创建一个“对齐上缘”的框架集，其具体操作如下。1.创建框架集创建框架6.1.5创建框架和框架集2.选择框架集与框架 选择框架集：在“框架”面板中
4、框架集的边框上单击即可选择整个框架集，当框架集被选择后，其边框将呈虚线显示。（1）选择框架集（2）显示效果6.1.5创建框架和框架集 选择框架：在“框架”面板中的某个框架区域内单击鼠标即可选择该框架，被选择的框架在“框架”面板中以粗黑实线显示，在网页窗口中该框架的边框将呈虚线显示。（1）选择框架（2）显示效果6.1.5创建框架和框架集3.创建自定义框架选择框架定位鼠标指针拆分框架完成自定义框架的创建6.1.6保存框架和框架集保存框架集是指将框架网页中的所有框架内容以及框架集本身都进行保存。1.保存框架集保存框架页设置保存位置和名称6.1.6保存框架和框架集在网页中需保存的框架区域单击鼠标定位插
5、入点，选择【文件】/【保存框架】菜单命令，在打开的“另存为”对话框中设置框架的保存位置和名称后，单击确定即可。2.保存单个框架文档保存单个框架文档6.1.6保存框架和框架集选择【文件】/【保存全部】菜单命令，可在打开的“另存为”对话框中完成框架集及所有框架网页文档的保存工作。3.保存所有框架文档保存所有框架文档6.1.7设置框架集与框架属性1.设置框架集属性框架集的属性设置面板2.设置框架属性框架的属性设置面板6.1.8在框架中添加网页框架创建好后，就可以为框架集中的各个框架指定显示的网页文件，其具体操作如下。（1）选择框架（2）指定网页文件6.1.8在框架中添加网页（3）确认保存（4）调整框
6、架大小6.1.8在框架中添加网页（5）为其他框架指定网页236.1 课堂案例：布局“酒店预订”网页内容导航6.2 课堂案例：布局“婚纱礼服”网首页6.3 项目实训6.4 课后练习课堂案例：布局“婚纱礼服”网首页通过前面的学习，米拉对网页布局有了一定的认识，老洪说，要想提高网页布局设计水平，还需要学会CSS+DIV布局。老洪接着就让米拉尝试使用CSS+DIV布局来设计一个婚纱礼服旗舰店首页，完成后的参考效果如图所示。“婚纱礼服”首页参考效果6.2.1认识CSS样式CSS是“Cascading Style Sheet（层叠样式表）”的缩写，将多重样式定义可以层叠为一种。CSS是标准的布局语言，用于
7、为HTML文档定义布局，如控制元素的尺寸、颜色、排版等，解决了内容与表现分离的问题。6.2.1认识CSS样式1.CSS功能灵活控制页面文字的字体、字号、颜色、间距、风格、位置等。随意设置一个文本块的行高和缩进，并能为其添加三维效果的边框。方便定位网页中的任何元素，设置不同的背景颜色和背景图片。精确控制网页中各种元素的位置。可以为网页中的元素设置各种过滤器，从而产生诸如阴影、模糊、透明等效果。可以与脚本语言结合，使网页中的元素产生各种动态效果。6.2.1认识CSS样式2CSS特点使用文件将样式分类使用冲突处理集中管理样式信息共享样式设定6.2.2认识CSS+DIV布局模式CSS+DIV布局模式是
8、根据CSS规则中涉及的margin（边界）、border（边框）、padding（填充）、content（内容）来建立的一种网页布局方法，如图所示即为一个标准的CSS+DIV布局结构，左侧为代码，右侧为效果图。6.2.3CSS+DIV布局模式的优势掌握使用CSS样式布局是实现Web标准的基础。在制作主页时采用CSS技术，可以有效地对页面布局、字体、颜色、背景、其他效果实现更加精确地控制。采用CSS+DIV布局主要有以下优点。搜索引擎更容易检索修改效率更高页面简洁提高设计者速度页面加载更快站点更容易被访问6.2.4插入并编辑DIV要使用CSS+DIV布局需要先在页面中插入DIV，然后通过编辑DI
9、V标签的CSS属性来实现布局。（1）选择菜单命令（2）设置DIV标签ID6.2.4插入并编辑DIV（3）“新建CSS规则”对话框（4）设置“方框”CSS属性（5）插入的DIV标签效果6.2.4插入并编辑DIV（6）设置DIV标签名称（7）设置“方框”CSS属性（8）设置图片标签辅助功能属性6.2.4插入并编辑DIV（9）设置CSS规则6.2.4插入并编辑DIV（10）导航背景效果6.2.5创建与编辑CSS样式在Dreamweaver中创建CSS样式的方法有很多，常用的是通过CSS面板进行创建，其具体操作如下。（1）输入文本（2）设置选择器名称6.2.5创建与编辑CSS样式（3）设置类型（4）设
10、置区块6.2.5创建与编辑CSS样式（5）设置方框（6）设置列表6.2.5创建与编辑CSS样式（7）设置方框样式（8）设置背景6.2.5创建与编辑CSS样式（9）查看CSS效果（10）添加其他DIV标签和内容6.2.6使用AP Div元素1.创建并设置AP Div要想在网页中创建AP Div，可利用“插入”面板中的“布局”工具栏中的工具，具体操作如下。（1）设置 AP Div属性6.2.6使用AP Div元素（2）设置CSS样式6.2.6使用AP Div元素（4）查看效果6.2.6使用AP Div元素2.选择AP Div使用AP Div布局网页时，需要对其进行一系列设置，但在这之前应该掌握如何
11、选择APDiv。在Dreamweaver中选择单个AP Div和多个AP Div的方法分别如下。选择单个AP Div选择多个AP Div6.2.6使用AP Div元素3.对齐AP Div4.更改AP Div堆叠顺序在Dreamweaver CS6中，可通过对齐功能将若干AP Div按指定边缘进行对齐。利用【Shift】键同时选择需要进行对齐的AP Div对象，选择【修改】/【排列顺序】/菜单命令，在弹出的子菜单中选择需要的对齐方式。当多个AP Div发生了重叠，就会涉及堆叠顺序的问题，更改堆叠顺序可以控制显示的区域或遮挡的区域，其方法为：选择需调整堆叠顺序的AP Div对象，选择【修改】/【排
12、列顺序】/【移到最上层】（或【移到最下层】）菜单命令。456.1 课堂案例：布局“酒店预订”网页内容导航6.2 课堂案例：布局“婚纱礼服”网首页6.3 项目实训6.4 课后练习6.3.1制作“歇山园林”网页本实训目标为制作“歇山园林”网页，该网页为企业网站网页，可通过框架的各种操作来完成网站的布局，然后向框架中添加内容即可。本实训完成后的参考效果如图所示。1实训目标 创建框架 添加内容6.3.1制作“歇山园林”网页合理的版面设计可以使网页效果更加漂亮，目前常见的网页版式设计类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型10种。2.专业背景3.操作思路
13、调整框架大小6.3.2制作“花店”网页本实训的目标是“flowes.html”网页，该网页是一个卖鲜花的网页，主要用于展现店铺展卖的鲜花。本实训完成后的参考效果如图所示。1实训目标6.3.2制作“花店”网页进行版式设计时，需要注意版式设计的基本准则，主要包括以下五点。2.专业背景网页版式图像主页设计文本美观性6.3.2制作“花店”网页首先在新建的空白区域插入DIV标签进行布局，再使用CSS+DIV对插入的标签进行布局，最后对DIV标签添加CSS样式，让添加的标签进行定位并设置相应的属性。3.操作思路 插入DIV标签 添加CSS样式516.1 课堂案例：布局“酒店预订”网页内容导航6.2 课堂案
14、例：布局“婚纱礼服”网首页6.3 项目实训6.4 课后练习练习1：制作“花卉推荐”网页使用表格来制作“花卉推荐”页面，在制作时先在空白网页中插入表格，并根据需求在表格中添加相关内容，再对添加内容的表格进行编辑，最后设置表格的属性。要求操作如下。l新建一个空白网页文件，并将其保存，然后在其中插入表格，并根据需要在表格中嵌套相关的表格。l通过设置单元格属性调整表格，使其满足网页设计的需要。l完成表格插入与结构调整后，便可在表格的各个单元格中插入或输入需要的内容。练习2：制作“摄影网”网页根据提供的图片素材，利用框架和DIV进行布局设计，并通过CSS控制样式来制作网页“photography.htm
15、l”。要求操作如下。l在新建的HTML网页中插入“上方及下方”的框架，分别将插入点定位到各框架中进行保存，并使用“全部保存”命令将其保存为“photography”。l分别对各框架进行制作，其中制作上方的框架时使用CSS+DIV进行布局，制作中间部分可以使用CSS+DIV和表格进行布局，在表格中插入各种图片。54Thank you!海量图书方便查询免费申请样书下载配套资源优惠购书成为作者更多样书申请和资源下载需求，请登录人邮教育社区（)囊括各大品类，您想要的应有尽有教师免费申请样书，我们将安排快递迅速送达教学视频、PPT课件、教学案例、习题答案、模拟试卷等丰富资源免费下载教师可以申请最低折扣学生直接优惠购买图书欢迎写文章投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务
