网页设计与制作（Dreamweaver CC）（第3版） 课件 模块3、4 网页布局、高级应用

DreamweaverCC网页设计与制作（3版）模块3课件01模块1网页基础知识03模块3网页布局05模块5网站的测试与发布02模块2初级应用04模块4高级应用06模块6综合应用任务描述

通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧。任务8奋扬青春

——表格布局页面任务解析在本任务中，需要完成以下操作：1.掌握表格的创建方法和表格、单元格的属性设置；2.掌握嵌套表格的创建方法和属性的设置。3.学会使用表格布局页面的方法和技巧。具体操作：（1）将素材中的renwu8文件夹复制到D盘根目录。运行DreamweaverCC，新建站点“奋扬青春”，站点文件夹为D:\renwu8，在站点根目录下新建网页文件index.html；打开“页面属性”对话框，在“外观（css）”分类选项卡中设置背景颜色为#ccc，左、上边距为0；在“链接”分类选项卡中设置链接颜色为黑色，变换图像链接颜色为红色，已访问链接颜色为绿色，始终无下划线，页面属性设置如图3-1所示。

图3-1页面属性设置具体操作：（2）选择“插入→表格(table)”命令，设置表格大小为1行2列，表格宽度为1200像素，其他项为0，如图3-1所示，单击“确定”按钮插入表格。（3）单击表格的边框线，选中整个表格，在“表格”属性面板中设置“对齐”为“居中对齐”，如图3-3所示。

图3-2“表格”对话框

图3-3“表格”属性面板具体操作：（4）将光标定位到表格第1个单元格中，在属性面板中设置宽度为1000，选择“插入→图像”命令，在打开的“选择图像源文件”对话框中选择“renwu8_01.gif”文件，单击“确定”按钮插入图像,如图3-4所示。

图3-4第一个表格效果（5）将光标定位到第2列单元格，在“代码”视图中为单元格添加背景图像“renwu8_02.gif”；代码如图3-5所示。再次光标定位该单元格，选择“插入→表格”命令，设置表格大小为4行1列，表格宽度为100%，其他项为0，单击“确定”按钮插入嵌套表格tab1；分别设置嵌套单元格的第1、2、3、4行行高为38、40、40、40，如图3-6所示。

图3-5第2列单元格的背景图像代码

图3-6第2列单元格的嵌套表格具体操作：（6）光标定位到嵌套表格的第2行单元格，选择输入法“软键盘”中的“特殊字符”项，在单元格中输入◆，然后在单元格中输入文字“设为首页”；同样的方法，在第3行和第4行输入“◆联系我们”和“◆加入收藏”，效果如图3-7所示。

图3-7表格效果1（7）将光标定位到表格的后面或下一行，选择“插入→表格”命令，设置表格大小为1行1列，表格宽度为1200像素，其他项为0，单击“确定”按钮，插入表格。在表格属性面板中设置对齐为居中对齐，单元格属性面板中设置高为41，如图3-8所示。

图3-8表格效果2具体操作：（7）将光标定位到第二个表格，在“代码”视图中为表格添加背景图像“renwu8_03.gif”,代码如图3-9所示。再次光标定位该表格，选择“插入→表格”命令，设置表格大小为1行9列，表格宽度为100%，其他项为0，单击“确定”按钮，插入嵌套表格tab2；分别设置嵌套表格的第1列列宽373，第9列列宽为113，第2列到第8列平均分配列宽为102，高均为41；如图3-10所示。

图3-9第2个表格代码

图3-10第2个表格的嵌套表格设置（8）在第二个表格的嵌套表格中的第2列到第8列，分别输入文本“部门简介，规章制度，教育管理，资助工作，咨询服务，心理服务和宿舍管理”；创建CSS样式表ys01，定义ys01样式表的字体为黑体、大小为16px、颜色为白色、加粗、居中显示，分别为7个单元格的文本内容套用ys01样式，如图3-11所示。

图3-11第2个表格效果具体操作：（9）将光标定位到第2个表格的后面或下一行，选择“插入→表格”命令，设置表格大小为1行3列，表格宽度为1200像素，其他项为0，单击“确定”按钮插入表格。在表格属性面板中设置对齐为居中对齐，单元格属性面板中设置高为542，第三个表格的布局图和参数如图3-12所示。

图3-12第3个表格的布局参数值具体操作：（10）分别设置第三个表格的第1列和第3列列宽为100，第2列列宽为1000。选择表格切换为扩展模式，光标定位在第2列单元格中，插入为4行2列，表格宽度为100%，其他项为0的嵌套表格tab3，分别设置第1行高为207，第2行高位40，第3行高为160，第4行高为45，第1列列宽为390，第2列列宽为610，合并第1行单元格；光标定位在tab3的第3行第1列单元格，插入1行3列，表格宽度为100%，其他项为0的嵌套表格tab3-1，设置tab3-1的高为160，第1列和第3列列宽分别为4%；在tab3的下方，插入1行2列，表格宽度为100%，其他项为0的嵌套表格tab4，设置tab4的高为90，第1列单元格宽为355；单击“插入”面板“布局”类别中的“标准”按钮，切换表格为标准模式。扩展模式如图3-13所示，标准模式如图3-14所示。

图3-13第3个表格的扩展模式图

图3-14第3个表格的标准模式具体操作：（11）为第3个表格部分单元格插入图片。第三个表格第1列和第3列插入图片“renwu8_04.gif”和“renwu8_06.gif”；第2列嵌套表格tab3的第1行插入图片“renwu8_05.gif”，第2行第1列和第2列分别插入图片“renwu8_07.gif”和“renwu8_08.gif”，第4行第1列和第2列分别插入图片“renwu8_11.gif”和“renwu8_12.gif”；第5列嵌套表格tab4的第2列插入图片“renwu8_14.gif”，如图3-15所示。

图3-15第三个表格插入图片的效果具体操作：（12）在“代码”视图中，为第3个表格部分单元格设置背景图像。tab3的第3行第1列单元格的背景图像设置为renwu8_09.gif，第2列单元格的背景图像设置为图片“renwu8_10.gif”；tab4的第1列单元格的背景图像设置为“renwu8_13.gif”，如图3-16所示。

图3-16第三个表格插入图片和背景图像的效果具体操作：（13）为第3个表格部分单元格添加文字。将text文件夹下的“通知通告.doc”内容复制到tab3-1的第2列单元格中。创建CSS样式表ys02，定义ys02样式表的字体大小为12px、行高为20px，选中通知通告文本内容套用ys02样式；同样的方法复制和设置“学生动态”的”文本内容；在“下载专区”中手动输入文本内容““困难学生补助申请书、学生会干部竞聘申请书、缓交学费申请表”按效果图进行分段和缩进，并套用ys02样式，如图3-17所示。

图3-17添加文字后的第三个表格效果具体操作：（14）为“学生动态”和“下载专区”文字设置空链接，创建滑动文字变色效果。选中“学生动态”中的第一行文字，在属性面板的链接框中输入“#”。同样的办法为其它各行文字创建空链接。（15）在第3个表格下方，插入1行1列，表格宽度为1200像素，其他项为0的表格，在表格属性面板中设置对齐为居中对齐，单元格属性面板中设置高为60，水平居中对齐;在”代码“视图为表格设置背景图像为“renwu8_15.gif”，将光标定位单元格中，输入文本内容“@版权所有|站点地图|友情链接、建议使用1280*800分辨率”，并套用ys02样式表，如图3-18所示。

图3-18index.html效果图表格布局此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

网页设计中，宽度不是绝对固定的。网页尺寸由两个因素决定的：一是显示器屏幕，二是浏览器软件。网页的宽度约等于屏幕大小减去22px，如1024px宽的屏幕，其网页宽度不大于1002px,一般设定为950px或960px。

为了使网页更加美观大方，在制作网页时，需要先对网页的轮廓进行规划，将文字、图片等网页元素进行精确定位，这就需要用到网页的布局。表格布局是目前最常见的网页布局方式之一，它灵活方便、简单易学，熟练地使用表格布局是网页制作的基本要求。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

表格由行和列组成，每行或每列又由单元格组成，如图3-19所示，当将某行或某列设为标题行或标题列后，默认情况下，标题单元格中的内容将自动加粗并居中显示。标号①所示的是单元格间距，指的是单元格和单元格之间的距离。标号②所示的是单元格边距(也称为填充)，指的是单元格中的内容与单元格边框之间的距离。

图3-19表格的结构表格的组成图3-20“表格”对话框此处添加你的信息此处（1）创建表格

①在“文档”窗口中，将光标定位到要插入表格的位置，执行以下操作之一，打开“表格”对话框，如图3-20所示。◉选择菜单“插入→表格（table）”命令。◉单击“插入”面板“html”标签中的“表格（table）”按钮。◉按【Ctrl+Alt+T】组合键。

创建表格图3-21嵌套表格此处添加你的信息此处

创建嵌套表格就是在已有表格的某单元格中插入新的表格，如图3-21所示。使用表格的嵌套可以使大量的网页元素进行复杂定位，从而整齐地展示在浏览者面前，在一些综合性网站中都会普通使用。

若要在当前表格的单元格中插入嵌套表格，可以直接拖动“插入”面板“常用”类别中的“表格”按钮到相应的单元格中，或者将光标定位到该单元格中，使用前面新建表格的方法插入表格。创建表格（1）选择整个表格

◉单击表格的边框线。

◉将光标定位到表格中，在标签选择器中单击<table>标签。

◉将鼠标指针移到表格的左上角，或边框线附近的敏感区域，当鼠标指针的右下角出现表格的缩略图时，单击鼠标左键。

◉将光标定位到表格中，按两次【Ctrl+A】组合键。（2）选择行

◉直接用鼠标拖动选中该行中的所有单元格。

◉将光标定位到要选择行的某个单元格中，在标签选择器中单击<tr>标签。

◉将鼠标指向要选择行的左边缘，当鼠标指针变为右箭头“”时，单击鼠标左键。（3）选择列

◉直接用鼠标拖动选中该列中的所有单元格。

◉将鼠标指向要选择列的上边缘，当鼠标指针变为下箭头“”时，单击鼠标左键。

◉光标定位到单元格中，在对应列的“列标题”菜单中选择“选择列”命令。选择表格元素（4）选择单元格

要选择单个单元格，可采用以下方法。

◉按住【Ctrl】键在单元格内单击。

◉在单元格内单击并向相邻的单元格拖动鼠标。

◉将光标定位到单元格内，单击标签选择器上的<td>标签。

◉将光标定位到单元格内，按【Ctrl+A】组合键。

要选择多个单元格，可采用以下方法。

◉直接用鼠标从第一个单元格拖到最后一个单元格。

◉将光标定位到第一个单元格内，按住【Shift】键单击最后一个单元格，可以选择矩形区域内的所有单元格，如图3-27所示。

◉按住【Ctrl】键依次单击要选择的单元格，可以选择不连续的单元格，再次单击可取消其选择。选择表格元素

图3-29“表格”属性面板“表格”：用来输入表格的名字。“行”和“列”：用来指定表格中行、列的数目，还可以通过修改此值，达到添加或删除表格中行或列的目的。“宽”：以像素为单位或按百分比指定表格宽度。“填充(cellpad)”：指的是单元格边距，即单元格的内容和单元格边框之间的像素数。

间距(cellspace)”：指的是单元格间距，即相邻单元格之间的像素数。“对齐(align)”：用于设置表格相对于同一段落中其他元素（例如文本和图像）的显示位置。“边框(border)”：指定表格边框的宽度（单位为像素），若表格仅用于页面布局可将值设为0。“清除列宽”按钮：从表格中删除所有明确指定的列宽。“清除行高”按钮：从表格中删除所有明确指定的行高。“将表格宽度转换成像素”按钮：将表格中每列的宽度和整个表格的宽度设置为以像素为单位的当前宽度。“将表格宽度转换成百分比”按钮：将表格中每列的宽度和整个表格的宽度设置为按百分比表示的宽度。设置表格属性

图3-30“单元格”属性面板“合并单元格”：将所选的单元格、行或列合并为一个单元格。“拆分单元格”：将一个单元格拆分成多个单元格。“水平”和“垂直”：设置单元格中的内容在水平和垂直方向上的对齐方式。“宽”和“高”：用来设置所选单元格的宽度和高度，可以在文本框中输入以像素为单位的数字，也可以输入按表格宽度或高度的百分比指定的以百分号“%”结尾的数字。“不换行”复选框：如果选中了该复选框，当单元格中的文本超过单元格的宽度时，单元格会自动加宽以容纳所有文本；如果没有选中该复选框，当单元格内的数据超过单元格的宽度时，会自动换行。“标题”复选框：如果选中该复选框，则选择的单元格被设置为表格标题单元格。“背景颜色”：设置所选单元格的背景颜色。设置单元格属性（1）调整表格的大小

◉选中表格后，表格边框会出现3个控制柄，鼠标指向控制柄呈双向箭头时拖动鼠标，可调整整个表格的大小。

◉选中表格后，在表格属性面板的“宽”文本框中输入数值以精确指定表格的宽度。当调整整个表格的大小时，表格中所有单元格将按比例更改大小。如果表格的某单元格指定了明确的宽度或高度，则调整表格大小时不会更改这些单元格指定的宽度或高度。（2）调整行高和列宽用鼠标拖动要更改行或列的边框线。改变行高，可上下拖动该行的下边框线，如图3-33所示；改变列宽，可左右拖动该列的右边框线，如图3-34所示。表格的基本操作

图3-33改变行高及效果图

图3-34改变列宽及效果图（3）插入行或列

◉选中行或列，右键选择菜单“表格-插入行（插入列）”命令，如图3-35所示，可在所选行的上方插入一新行或所选列的左方插入一新列。

◉选中行或列，右键选择菜单“表格→插入行或列”命令，弹出“插入行或列”对话框，如图3-36所示，设置插入的行（列）数及位置，单击“确定”按钮，可以插入多行或多列。

◉打开某列的“列标题”菜单，选择“左侧插入列”或“右侧插入列”，可在当前列的左侧或右侧插入一新列，如图3-37所示。表格的基本操作

图3-35插入行或列

图3-36

“插入行或列”对话框（4）删除行或列

◉选中要删除的行或列，右键选择菜单“表格-删除行（删除列）命令。

◉选中要删除的行或列，直接按【Del】键。（5）合并和拆分单元格

①选择要进行合并的单元格，具体操作步骤如下。

◉右键菜单中选择“表格→合并单元格”命令。

◉单击属性面板上的“合并单元格”按钮。

◉按【Ctrl+Alt+M】组合键。

②拆分单元格是将一个单元格分成多个单元格，具体操作步骤如下。

◉右键菜单中选择“表格→拆分单元格”命令。

◉单击属性面板上的“拆分单元格”按钮。

◉按【Ctrl+Alt+S】组合键。表格的基本操作图3-37“列标题”右键菜单图3-38“拆分单元格”对话框

Dreamweaver中有两种表格模式，分别为标准模式和扩展表格模式，如图3-40所示。标准模式是表格默认的视图模式，表格及其内容的绝大部分操作适合在该模式下进行。在扩展表格模式下，Dreamweaver会临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框，可使编辑操作更加直观。使用这种模式，可以方便选择表格中的内容或精确的定位插入点。扩展表格模式图3-40标准模式和扩展表格模式提醒：要进入扩展表格模式，可以右键选择菜单“表格→扩展表格模式”命令。

在扩展表格模式下，选择内容或定位插入点后，可使用以下方法返回标准模式。

◉直接单击“文档”窗口上方的“退出”。

◉选择再次单击右键选择菜单“表格→表格扩展模式”命令。◉任务描述

通过布局“架构梦想”网页，学会使用CSS+Div布局和美化网页。任务9

架构梦想——

CSS+Div布局页面任务解析

在本任务中，需要完成以下操作：

◉学会Div的创建和属性设置；

◉学会使用CSS+Div布局和美化网页。具体操作：（1）页面布局图和各Div（块）的关系，如图3-41所示。

图3-41网页布局图及各Div（块）的关系（2）将素材中的renwu9文件夹复制到D盘根目录。运行DreamweaverCC，新建站点“架构梦想”，站点文件夹为D:\renwu9。打开站点根目录新建空白文档index.htm，修改标题为“CSS+Div布局网页”,打开“页面属性”对话框，在“外观（css）”分类选项卡中设置背景颜色为#CCC,“左、右、上、下”边距均为0px。具体操作：（3）创建嵌套Div。打开index.html，“插入→Div”,在DOM面板中输入Div的名字“#container”；光标定位在“#container”层中，再次选择“插入→Div”，选择“嵌套”，如图3-42，插入嵌套Div,在DOM面板中输入名称“#banner”；同样的方法创建“#content”、“#footer”嵌套Div，DOM面板如图3-43所示。

图3-42Div插入模式

图3-43DOM面板具体操作：(4)定义container层的样式。在CSS设计器中，创建#container样式，并设置属性，如图3-44所示。

图3-44#container的属性设置

图3-45#banner的属性设置具体操作：（4）在banner层中插入图片并编辑CSS样式。光标定位在banner层中，选择“插入→图像（image）”命令，打开“选择图像源文件”对话框，选择“images”文件夹中的01.gif，单击“确定”按钮。

在CSS设计器中，创建#banner样式并设置属性，如图3-45所示；完善banner层后的“拆分”视图如图3-46所示。

图3-46完善banner层后的“拆分”视图具体操作：（5）在content层中插入图片并编辑CSS样式表。光标定位在#content层中，选择“插入→图像（image）”命令，打开“选择图像源文件”对话框，选择“images”文件夹中的2.gif，单击“确定”按钮。在CSS设计器中，创建#content样式并设置属性，如图3-47所示；完善content层后的“拆分”视图如图3-48所示。

图3-47#content的属性设置

图3-48完善content层后的“拆分”视图具体操作：（6）在footer层中设置背景图像和文本，并编辑CSS样式表。在CSS设计器中，创建#footer样式并设置属性，如图3-49所示。

图3-49#footer的属性设置

图3-50完善footer层后的“拆分”视图具体操作：（7）光标定位在footer层中，将text文件夹下的“精益求精.doc”文本内容复制到footer层中。在CSS设计器中，创建#footerp样式并设置属性，如图3-51所示。

图3-51#footerp的属性设置

图3-52完善“footerp”的“拆分”视图(8)保存文件，按F12预览网页效果。具体操作：(8)保存文件，按F12预览网页效果。CSS定位与Div布局此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

CSS+Div是网站标准（或简称web标准）中常用的术语之一。Div只是HTML语言中的一个标签，而CSS是一种语言，通常为了说明与HTML网页设计语言中表格（table）定位方式的区别。因为在XHTML网站设计标准中，不再使用表格定位技术，而是采用CSS+Div的方式实现各种定位。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处Div元素是一个块级元素，也是用来插入各种网页元素并能够自由精确定位和容易控制的容器。（1）创建Div，有以下2种方法：◉选择菜单“插入-Div”，弹出“插入Div”对话框，插入位置可选择在“在插入点”、“在标签选择之前”和“在标签选择之后”，如图3-54所示。◉选择“插入”面板中的“html→Div”，同样也会弹出如图3-54所示的插入面板。如果不是新创建的Div，插入面板会如图3-55所示。

图3-54插入Div对话框

图3-55插入Div对话框DIV-基本操作此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（2）选择Div的方法◉单击Div的边框线。◉在“DOM”面板中单击Div。◉按下Shift键，分别单击要选择的各个Div的内部或边框线，可以选中多个Div。在“DOM”面板中还可以为Div命名并调整顺序。

DIV-基本操作此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

在css设计器中的属性面板中，可以为Div设置布局、文本、边框和背景等属性值，如图3-56、图3-57、图3-58和图3-59所示。图3-56布局属性设置

图3-57文本属性设置

图3-58边框属性设置

图3-59背景属性设置

DIV-属性设置此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

一个盒子模型由content(内容)、boder(边框)、padding(间隙)和margin（间隔）等4个部分组成，如3-60所示。

一个盒子的实际宽度（或高度）是由content+boder+padding+margin组成的。在CSS中可以通过设定width和height的值来控制content的大小，并且对于任何一个盒子，都可以分别设定各自的boder、padding和margin。

图3-60盒子模型

盒子模型此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（1）float定位：是CSS排版中非常重要的手段。属性float的值很简单，可以设置为left、right或者默认值none.当设置了元素向左或者向右浮动时，元素会向其父元素的左侧或右侧靠紧。（2）position定位：块的位置，即块相对于其父块的位置和相对于它自身应该在的位置。

position属性共有6个值:

absolute:生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。

relative:生成相对定位的元素，相对于其正常位置进行定位。

static:默认值。

inherit:规定应该从父元素继承position属性的值。（3）z-index空间位置：用于调整定位时重叠块的上下位置，与它的名称一样，想象页面为x-y轴。垂直于页面的方向为z轴，z-index值打的页面位于其值小的上方。

盒子模型此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（1）使用Div对页面整体规划

使用Div可以将页面首先在整体上进行<div>标记的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。这样进行<div>标记过的页面更新起来会十分容易，同时也可以通过修改CSS的属性来重新定位。

CSS布局要求设计者首先对页面有一个整体的框架规划，包括整个页面分为哪些模块、各个模块之间的父子关系如何等。以最简单的框架为例，页面是由Banner、主题内容（content）、菜单导航（links）和脚注（footer）等几个部分组成，各个部分分别用自己的id来标识，整体规划如图3-61所示。图中的每个块都是一个<div>,页面中的所有Div块都属于块#container,一般的Div布局都会在最外边加上这么一个父Div,以便对页面的整体进行调整。对于每个Div块，还可以再加入各种元素或者行内元素。（2）设计各块的位置当页面的内容已经确定后，则需要根据内容本身来考虑整体的页面版型，例如单栏、双栏或左中右等。考虑到导航的易用性，我们用双栏模式，如图3-62所示。CSS+Div布局的常用方法任务描述

通过布局“数字未来”网页，学会使用Flex布局页面的方法和技巧。任务10数字未来

——Flex布局任务解析

在本任务中，需要完成以下操作：

◉巩固CSS+Div布局和美化网页的方法和技巧。

◉学会使用Flex布局和美化网页的方法和技巧。具体操作：（1）页面布局图和各Div（块）的关系，如图3-62所示。

图3-62页面版型具体操作：（2）将素材中的renwu10文件夹复制到D盘根目录。运行DreamweaverCC，新建站点“数字未来”，站点文件夹为D:\renwu10，在站点根目录下新建网页文件index.html；打开“页面属性”对话框，在“外观（css）”分类选项卡中设置背景颜色为#000，文本颜色为#FFF；页面属性设置如图3-63所示。

图3-63页面属性设置具体操作：（3）创建嵌套Div。打开index.html，“插入→Div”,在DOM面板中输入Div的名字“#wrapper”；光标定位在“#wrapper”层中，再次选择“插入→Div”，分别插入嵌套Div,“#banner”和“#main”；同样的方法创建“#content”、“#img-list”嵌套Div，DOM面板如图3-64所示。

图3-64DOM面板具体操作：(4)在CSS设计器中分别定义wrapper层的样式,设置宽为865px,左、右边界为auto，如图3-65、图3-66所示。

图3-65wrapper的宽度设置图3-66wrapper的边界设置具体操作：(5)在CSS设计器中定义banner层的样式,并插入“images”文件夹中的图像“1.jpg”，如图3-67、图3-68所示。

图3-67banner的属性设置

图3-68设置好banner层后的“拆分”视图具体操作：(6)在content层中输入“数字未来.doc”中的文本并编辑CSS样式表,如图3-69、图3-70、图3-71和图3-72所示。

图3-69content的布局属性图3-70content的文本属性图3-71content的边框属性具体操作：

图3-72content的文本内容及圆角设置具体操作：（7）在img-list层插入图像及Flex布局样式。光标定位在img-list层中，插入“images”文件夹中的“2.jpg”、“3.jpg”、“4.png”和“5.jpg”四幅图像，并设置四个图像间隔平均分配的flex布局样式，如图3-73、图3-74和图3-75所示。

图3-73content的flex布局属性

图3-74content的padding属性图

3-75content的flex布局属性-两端对齐，图像之间间隔相等具体操作：

图3-76img-list层的Flex布局样式具体操作：(7)保存文件，按F12预览网页效果。

图3-77index.html效果图Flex布局此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{display:flex;}行内元素也可以使用Flex布局。.box{display:inline-flex;}注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

采用Flex布局的元素，称为Flex容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称"项目"。

图3-78Flex容器

基本概念图3-78Flex容器此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

（1）flex-direction属性：决定主轴的方向（即项目的排列方向）。.box{flex-direction:column-reverse|column|row|row-reverse；}图3-79flex-direction效果·column-reverse：主轴为垂直方向，起点在下沿。·column：主轴为垂直方向，起点在上沿。·row（默认值）：主轴为水平方向，起点在左端。·row-reverse：主轴为水平方向，起点在右端。

容器的常用属性此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（2）flex-wrap属性:默认情况下，项目都排在一条线（又称"轴线"）上,flex-wrap属性定义，如果一条轴线排不下，如何换行。.box{flex-wrap:nowrap|wrap|wrap-reverse;}

·nowrap（默认）：不换行。·wrap：换行，第一行在上方。

·wrap-reverse：换行，第一行在下方。

容器的常用属性此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（3）justify-content属性：定义项目在主轴上的对齐方式。.box{justify-content:flex-start|flex-end|center|space-between|space-around；}具体对齐方式与轴的方向有关,下面假设主轴为从左到右。

·flex-start（默认值）：左对齐。·flex-end：右对齐。

·center：居中。

·space-between：两端对齐，项目之间的间隔都相等·space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

容器的常用属性此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（4）align-content属性：定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。.box{align-content:flex-start|flex-end|center|space-between|space-around|stretch；}

·flex-start：与交叉轴的起点对齐·flex-end：与交叉轴的终点对齐

·center：与交叉轴的中点对齐·space-between：与交叉轴两端对齐，轴线之间的间隔平均分布·space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线·stretch（默认值）：轴线占满整个与边框的间隔大一倍交叉轴

容器的常用属性此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（1）常用的圆角设计案例有以下两种，如图3-94、图3-95所示。

图3-94指定背景颜色的元素圆角图3-95指定边框的元素圆角

CSS圆角矩形此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（2）使用border-radius属性，可以给任何元素制作“圆角”,CSS设计器属性设置如图3-96所示。

图3-96border-radius属性border-radius属性中只指定一个值，将生成4个圆角；在四个角上一一指定，可以使用以下规则：·四个值:第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。·三个值:第一个值为左上角,第二个值为右上角和左下角，第三个值为右下角·两个值:第一个值为左上角与右下角，第二个值为右上角与左下角·一个值：四个圆角值相同

CSS圆角矩形此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处①四个值border-radius:15px50px30px5px；②三个值border-radius:15px50px30px；③两个值border-radius:15px50px；

CSS圆角矩形-三个实例模块三结束DreamweaverCC网页设计与制作（3版）模块4课件01模块1网页基础知识03模块3网页布局05模块5网站的测试与发布02模块2初级应用04模块4高级应用06模块6综合应用任务描述

通过使用jQueryMobile技术建立一个jQueryMobile页面，学会jQueryMobile元素的插入方法及属性设置。任务11我的家乡——建立jQueryMobile页面任务解析

◉创建jQueryMobile页面；

◉学会jQueryMobile列表视图的插入方法及属性设置；

◉学会jQueryMobile滑块的插入方法及属性设置；

任务11效果图具体操作：（1）启动DreamweaverCC，新建站点“我的家乡”，网站文件夹为素材库chapter4中的renwu11文件夹。（2）新建文件jq.html，在状态栏中页面大小处选择移动端页面大小“iphone7plus”，如图4-1所示。（3）创建jQueryMobile页面。选择“插入-jQueryMobile-页面”命令插入jQueryMobile页面，如图4-2所示。

图4-1选择页面大小图4-2插入jQueryMobile页面（4）在弹出的“jQueryMobile”对话框，如图4-3所示，选择连接类型和CSS类型，本任务以Dreamweaver自带库源为例，单击确定后，系统弹出“页面”对话框，如图4-4所示，单击“确定”按钮。（5）“jQueryMobile”的安装。可以从“jQueryMobile文件”对话框中更新jQueryMobile库，也可以从CDN中载入jQueryMobile。（6）插入“jQueryMobile”页面后，如图4-5所示。

图4-3“jQueryMobile文件”对话框

图4-4“页面”对话框

图4-5jQueryMobile页面（7）修改“jQueryMobile”页面信息。①修改头部。单击jQueryMobile头部，编辑标题内容为“我的家乡”，如图4-6所示。②修改内容。单击jQueryMobile内容栏，单击“插入-jQueryMobile-列表视图”命令，“列表视图”对话框如图4-7所示，对列表选项进行编辑，分别输入文本：“地域文化、地方美食、过去未来和浓情亲人”，如图4-8所示。③修改底部。单击jQueryMobile底部，单击“插入-jQueryMobile-滑块”命令，并编辑滑块元素，如图4-9所示。（8）按F12键保存并浏览网页，在浏览器窗口显示网页jq.html，如图4-10所示。

图4-6修改jQueryMobile头部图4-7“列表视图”对话框

图4-8编辑“列表视图”

图4-9编辑“滑块”元素图4-10浏览试图任务描述

通过使用jQueryMobile技术建立一个jQueryMobile页面，学会jQueryMobile元素的插入方法及属性设置。任务11我的家乡——建立jQueryMobile页面任务解析

◉创建jQueryMobile页面；

◉学会jQueryMobile列表视图的插入方法及属性设置；

◉学会jQueryMobile滑块的插入方法及属性设置；

任务11效果图jQueryMobile此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

jQuery是DreamweaverCC制作手机浏览界面的主力插件。在DreamweaverCC中有两个基于jQuery的子项目，分别是jQueryMobile和jQueryUI。其中jQueryMobile主要用于主题的设计、网页的设计以及网页中的换页实践等功能的设计，并为所有的主流移动操作平台提供了高度统一的接口。而jQueryUI主要用做制作用户界面，如拖放、对话框、标签等功能的实现。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

页面即移动设备屏幕上看到的画面，执行“插入-jQueryMobile-页面”命令，弹出“页面”对话框，如图4-11所示。

图4-11“页面”对话框页面设置必须设置ID，默认情况下包括三部分：头部栏、内容栏和底部栏，其中头部栏和底部栏为可选项。头部栏：一般包括页面标题或一两个按钮。内容栏：定义页面的内容，如文本、图像、表单和按钮等。底部栏：比头部栏灵活，样式也与头部栏不同，可以包含多个按钮。

图3-19表格的结构

页面jQueryMobile中的列表是标准的HTML列表，可以设定有序列表和无序列表。执行“插入-jQueryMobile-列表视图”命令，弹出“列表视图”对话框，如图4-12所示。

列表类型：可以选择有序列表和无序列表。项目：表示序列中添加几个列表项。①凹入：表示项目四周自动增加外边距，样式为圆角等。②文本说明：添加一些对列表内容的说明性文字，使其更加丰富，显示在左侧。③文本气泡：气泡数字是用来显示列表项相关的数字，有计数功能如邮箱的邮件的个数。④侧边：作为主要内容的附属信息部分，显示在右上角。⑤拆分按钮：在jQueryMobile的列表中,当选项内容需要做出两种不同操作时,会用到该选项,其作用是对链接按钮进行分割。实现分割的方法是在<1i>元素中再增加一个<a>元素。分割后jQueryMobile会自动设置第二个链接为蓝色箭头图标,图标的链接文字将在用户将鼠标悬停在图标上时显示。拆分按钮图标:当“拆分按钮”被选择后,“拆分按钮图标”才可选用,其作用是加按钮的可视性。

列表视图3.布局网格:jQueryMobile提供了一套样式分列布局。但由于手机的屏幕宽度限制,一般不建议使用分栏分列布局。如果将较小的元素(如按钮或导航标签)并列排序,则可以使用分列布局。4.可折叠块:可折叠块的作用是隐藏或显示内容,应用于存储部分信息。5.复选框:执行“插入-jQueryMobile-复选框”命令,弹出“复选框”对话框,如图4-13所示,有名称、复选框个数及布局等选项。6.单选按钮:执行“插入-jQueryMobile-单选按钮”命令,弹出“单选按钮”对话框,图4-14所示。

图4-13“复选框”对话框

图4-14“单选按钮”对话框布局网格、可折叠块、复选框和单选按钮执行“插入-jQueryMobile-按钮”命令,弹出“按钮”对话框,如图4-15所示。①按钮:添加按钮的个数。②按钮类型：jQueryMobile中的按钮可以通过以下3种办法创建，如图4-16所示。链接:<a>元素按钮:<button>元素输入:<input>元素jQueryMobile中的按钮会自动获得样式，而<input>或<button>元素用于表单提交。③输人类型：当按钮类型为输入时，输入类型被激活。jQueryMobile提供了4种类型,如图4-17所示。④位置:当按钮的个数大于1时,位置按钮被激活。默认情况下,以“组”的形式垂直排列,因为jQueryMobile按钮都是块级元素,所以个按钮都填补了屏幕的宽度。如果位置选择“组”,布局选“水平排列”时,按钮会横向一个挨着一个地水平排列并设置按钮的排列适应内容的宽度。位置选择“内联”时,布局不可选,多个按钮会并列在同一行。⑤图标:为按钮添加图标。⑥图标位置:图标在按钮中的位置。

图4-16“按钮”类型

4-17输入类型按钮图4-15“按钮”对话框8.滑块从一定范围的数字中选取值,滑块样式如图4-18所示。9.翻转切换开关翻转切换开关常用于开/关或对/错按钮。翻转切换开关样式如图4-19所示。

图4-18滑块样式

图4-19翻转切换开关滑块、翻转切换开关任务描述

通过为“美丽中国”网站添加行为，实现网页特效，了解行为的概念、组成及作用，学会弹出信息、交换图像、打开浏览器窗口、显示/隐藏元素等行为的使用。任务12“美丽中国”

——行为的使用任务解析

◉添加“弹出信息”行为；

◉添加“交换图像”行为；

◉添加“显示/渐隐”行为。具体操作：

（1）启动DreamweaverCC，新建站点“美丽中国”，网站文件夹为素材库chapter4的renwu12文件夹，打开网页文件index.html。（2）选择“窗口→行为”命令或按Shift+F4快捷键，打开“行为”面板，如图4-21所示。选中网页中的图像“发现双创之星走进上海”，单击“行为”面板上的“添加行为”按钮，在弹出的菜单中选择“弹出信息”命令，打开“弹出信息”对话框，输入文本“该图片不能被下载！”，如图4-22所示，单击“确定”按钮。

图4-21“行为”面板图4-22“弹出信息”对话框

（3）在“事件”列表中单击默认的事件，出现一个按钮，单击按钮，在弹出的“事件”列表中选择“OnClick”，如图4-23所示。按Ctrl+S保存文件，按F12键浏览网页，鼠标单击“发现双创之星走进上海”图片时，弹出如图4-24所示的消息框。

图4-23选择事件列表

图4-24弹出消息框（4）选中图片推荐栏下的图像“美丽中国”，单击“行为”面板上的“添加行为”按钮，在弹出菜单中选择“交换图像”命令，在弹出的“交换图像”对话框中将images/19.jpg设置为交换图像，勾选“鼠标滑开时恢复图像”复选框，如图4-25所示，单击“确定”按钮，系统将自动生成“交换图像”和“恢复交换图像”2个行为，默认的事件分别为“onMouseOver”和“onMouseOut”，如图4-26所示。

图4-25“交换图像”对话框图4-26交换图像行为面板

（5）按F12键保存并浏览网页，当鼠标指向图片“美丽中国”时，图像变换为19.jpg，如图4-27和4-28所示，鼠标离开时又恢复到原来的图像。

图4-27交换前图像效果

图4-28交换后图像效果图

（6）选择网页上的banner图片，单击“行为”面板上的“添加行为”按钮，在弹出菜单中选择“效果→blind”命令，打开“blind”对话框，如图4-29所示，通设置效果持续时间为5000毫秒，可见性为“hide”，方向为“up”,单击“确定”按钮，设置“事件”为“Onclick”，按F12键保存并浏览网页时，单击banner图片查看效果。

图4-29“blind”对话框

图4-30“scale”对话框（7）选择网页上的文字“城市展播”，单击“行为”面板上的“添加行为”按钮，在弹出菜单中选择“效果→scale”命令，打开“scale”对话框，如图4-30所示，通设置效果持续时间为5000毫秒，可见性为“hide”，方向为“up”,单击“确定”按钮，设置“事件”为“Onclick”，按F12键保存并浏览网页时，实现放大文字效果。添加行为此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

行为是Dreamweaver预置的JavaScript程序库。每个行为包括一个动作和一个事件，其中，事件是指引发动作产生的条件，即触发动态效果的原因，例如鼠标移到某对象上、单击某对象等。动作是指事件发生后计算机系统执行的一个动作，即最终完成的动态效果，例如打开浏览器窗口、弹出信息、播放声音等。

Dreamweaver采用了“行为”面板来完成行为中动作和事件的设置，从而实现动态效果。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处单击“窗口→行为”命令或按Shift+F4快捷键，可打开“行为”面板，如图4-31所示。◉“显示设置事件”按钮：仅显示附加到当前文档的那些事件。“显示设置事件”是默认的视图。◉“显示所有事件”按钮：按字母顺序显示属于特定类别的所有事件，也包括网页中已设置的事件，如图4-33所示。

图4-31“行为”面板

图4-32显示已设置事件图4-33显示所有事件◉“添加行为”按钮：单击该按钮，打开动作菜单，其中包括可附加到当前所选元素的所有行为，当从该菜单中选择一个动作时，将出现一个对话框，可指定附加动作的相关参数。◉“删除事件”按钮：单击该按钮，可从行为列表中删除所选事件和动作。◉“增加/降低事件值”按钮：可将特定事件的所选动作在行为列表中向上或向下移动。行为面板此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

要创建一个行为，首先要确定添加行为的对象，可以是图像、热点、超级链接文本、多媒体文件或者网页本身等，然后指定一个动作，最后再确定触发该动作的事件。（1）在页面上选择一个元素，例如一个图像或一个链接。若要将行为附加到整个页面，在“文档”窗口左下角的标签选择器中单击<body>标签选中整个网页。（2）选择“窗口→行为”命令打开“行为”面板，单击“行为”面板上的“添加行为”按钮，弹出动作菜单，如图4-34所示，从动作菜单中选择一种动作，弹出相应的参数设置对话框，进行参数设置后，单击“确定”按钮。

图4-34动作菜单图4-35事件列表（3）在“事件”列表中显示动作的默认事件，单击该事件名称旁边的按钮，弹出一个下拉菜单，如图4-35所示，其中包含可以触发该动作的所有事件，从该菜单中选择一种事件。

添加行为此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

3．更改或删除行为附加了行为之后，可以更改触发动作的事件、添加或删除动作以及更改动作的参数。（1）选择一个附加有行为的对象。（2）选择“窗口→行为”命令，打开“行为”面板。（3）可进行以下更改操作：·若要编辑动作的参数，双击动作的名称或将其选中并按Enter，弹出参数设置对话框，进行参数更改后，单击“确定”按钮。·若要更改给定事件的多个动作顺序，选择某个动作然后单击“增加/降低事件值”按钮或，或者选择该动作，将其剪切并粘贴到其它动作之间的合适位置。·若要删除某个行为，将其选中然后单击“删除事件”按钮或按Delete键。

更改或删除行为此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

所谓动作就是设定播放声音、更换图片、弹出警告消息框等特殊的JavaScript效果，在设定的事件发生时运行该动作。Dreamweaver中预设了二十多种动作，下面介绍几种常用的动作。◉交换图像：通过更改“img”标签的“src”属性将一个图像和另一个图像进行交换。◉恢复交换图像：将最后一组交换的图像恢复为它们以前的源文件。每次将“交换图像”动作附加到某个对象时都会自动添加该动作；如果在附加“交换图像”时选择了“恢复”选项，就不再需要手动选择“恢复交换图像”动作。◉效果：为选中的对象添加增大/收缩、挤压、显示/隐藏、晃动、滑动、遮帘等效果。◉弹出信息：可显示一个带有用户指定信息的JavaScript警告框和一个“确定”按钮，使用此动作只能提供信息，而不能为用户提供选择。◉打开浏览器窗口：可在一个新的窗口中打开URL，可指定新窗口的大小、特性和名称。◉改变属性：可通过改变图像、APDiv、表单等的某个属性来实现动态效果，例如，层的背景颜色或图像的宽或高。具体可更改哪个属性由当前选用的浏览器来决定。◉设置文本：可用于设置框架文本、状态栏文本和表单元素中的文本域文本。◉预先载入图像：用于将不立即显示在网页中的图像预先载入浏览器缓存中，防止当图像显示时由于下载而导致延迟。◉检查表单：可以为表单中各元素设置有效性规则，并检查指定文本域的内容以确保用户输入正确的数据类型，防止表单提交到服务器后，文本域中包含无效的数据。◉显示/隐藏元素：显示、隐藏或恢复一个或多个AP元素的默认可见性。◉调用JavaScript：发生事件时，调用特定的JavaScript函数。

动作名称及作用此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

事件用于指定选定的行为在何种情况下发生。例如想打开网页后立即播放音乐文件，则需要把事件指定为onLoad。下面介绍几种常见的事件。·onLoad：载入对象时触发。·onClick：鼠标单击时触发。·onDblClick：鼠标双击时触发。·onMouseDown：按下鼠标左键时触发。·onMouseUp：鼠标左键按下后释放时触发。·onMouseOver：鼠标指针移到某对象时触发。·onMouseMove：鼠标移动时触发。·onMouseOut：鼠标离开某对象时触发。·onKeyPress：当键盘上某个键按下并且放开时触发。·onKeyDown：当键盘上某个键按下时触发。·onKeyUp：当键盘上某个键松开时触发。

事件名称及作用任务描述

通过使用模板快速布局“传工匠精神，筑职业梦想”网站，了解模板的概念及作用，学会模板文件的创建、可编辑区域的创建、模板的应用、分离与更新等操作。任务13“传工匠精神，筑职业梦想”

——模板的应用任务解析

◉创建模板文档；

◉在模板中插入可编辑区域；

◉使用模板新建网页文件；

◉将模板应用于已有的网页文件；

◉使用模板快速更新网站。具体操作：（1）将素材库chapter4中的renwu13文件夹复制到D盘根目录下。启动DreamweaverCC，新建站点“传工匠精神，筑职业梦想”，站点文件夹为D:\renwu13。在“文件”面板中双击打开站点文件夹中的index.html网页文件，如图4-36所示。（2）选择“文件→另存为模板”命令，弹出“另存模板”对话框，如图4-37所示，在“站点”框中选择“传工匠精神，筑职业梦想”，在“另存为”框中输入名称index，单击“保存”按钮。系统将在站点根目录中自动创建名为templates的文件夹，并将模板文档ymsh.dwt保存到该文件夹中，“文件”面板如图4-38所示。

图4-36index.html网页文件

图4-37“另存模板”对话框图4-38“文件”面板具体操作：（3）打开index.dwt模板文档，将表格中第三行中的嵌套表格删除，将光标定位在第三行单元格中，选择“插入→模板对象→可编辑区域”，弹出“新建可编辑区域”对话框，如图4-39所示，采用默认名称框EditRegion3，单击“确定”按钮，即可在模板中插入一个可编辑区域，如图4-40所示，保存并关闭模板文档index.dwt。（4）选择“文件→新建”命令，打开“新建文档”对话框，如图4-41所示，在左边栏中选择“网站模板”，“站点”列表中选择“传工匠精神，筑职业梦想”，“模板”列表中选中index模板，单击“创建”按钮，即可创建一个基于该模板的新文档。

图4-39“新建可编辑区域”对话框图4-40插入可编辑区域的模板

图4-41“新建文档”对话框具体操作：（5）将光标定位到可编辑区域中，删除其中的区域名称，选择“插入→图像”命令，在弹出的“选择图像源文件”对话框中选择images/2.jpg，单击“确定”按钮，结果如图4-42所示，以wy1.html为名进行保存并关闭文档。（6）以同样的方式创建wy2.html和wy3.html文件，在可编辑区域中分别插入images文件夹中的3.jpg和4.jpg，如图4-43、4-44所示。

图4-42wy1.html文档

图4-43wy2.html文档

图4-44wy3.html文档具体操作：（7）打开wy4.html，选择“工具→模板→应用模板到页”命令，弹出“选择模板”对话框，如图4-45所示，在“站点”下拉列表中选择“传工匠精神，筑职业梦想”，在“模板”列表中选择index，单击“选定”按钮，弹出“不一致的区域名称”对话框，如图4-46示。选择“Documentbody<未解析>”，在“将内容移到新区域”列表中选择可编辑区域，选择“Documenthead<未解析>”，在“将内容移到新区域”列表中选择“head”，单击“确定”按钮。（8）此时模板文档index