DW网页设计教学—单元2 制作基本页面

1、操作演练操作演练1.2技术提升技术提升1.3操作准备操作准备1.1考核评价考核评价1.4操作准备操作准备1.1操作准备操作准备1.1操作准备操作准备1.1操作准备操作准备1.1操作准备操作准备2.1操作演练操作演练1.2操作演练操作演练1.2操作演练操作演练1.2操作演练操作演练1.2操作演练操作演练1.2操作演练操作演练2.2技术提升技术提升1.3技术提升技术提升1.3技术提升技术提升2.3考核评价考核评价1.4考核评价考核评价2.4 网页中的基本组成元素有文字、图像网页中的基本组成元素有文字、图像和动画等，网站中的基本页面主要包括文和动画等，网站中的基本页面主要包括文本网页、图文混排网页和

2、、文混排网页等本网页、图文混排网页和、文混排网页等。 本单元通过制作文本网页、图文混排本单元通过制作文本网页、图文混排网页和表文混排网页，学会新建网页文档网页和表文混排网页，学会新建网页文档、设置网页的页面属性、在网页中输入与、设置网页的页面属性、在网页中输入与编辑文本、对网页文本进行格式化处理、编辑文本、对网页文本进行格式化处理、添加编辑列表、插入与编辑图像、插入与添加编辑列表、插入与编辑图像、插入与设置表格等操作。设置表格等操作。教学目标教学目标（1 1）学会新建网页文档和设置网页的页面属性）学会新建网页文档和设置网页的页面属性（2 2）学会在网页中输入文字、编辑文本、设置文本属性）学会在

3、网页中输入文字、编辑文本、设置文本属性（3 3）学会在网页中插入空格、文本换行符和特殊字符）学会在网页中插入空格、文本换行符和特殊字符（4 4）学会在网页中添加与编辑项目列表、编号列表和定义列表）学会在网页中添加与编辑项目列表、编号列表和定义列表（5 5）学会在网页中插入与编辑图像、设置图像属性）学会在网页中插入与编辑图像、设置图像属性（6 6）熟悉制作图文混排网页的技巧）熟悉制作图文混排网页的技巧（7 7）学会正确地插入表格，并合理地设置表格的属性）学会正确地插入表格，并合理地设置表格的属性（8 8）学会单元格的合并、拆分、插入和删除等操作）学会单元格的合并、拆分、插入和删除等操作（9 9）

4、学会正确地设置表格中行和列的属性）学会正确地设置表格中行和列的属性（1010）学会正确设置表格、单元格的背景图像和背景颜色）学会正确设置表格、单元格的背景图像和背景颜色（1111）学会正确地在表格中输入文字、插入图像并定位）学会正确地在表格中输入文字、插入图像并定位（1212）了解网页中文本、列表、图像等网页元素样式属性的定义）了解网页中文本、列表、图像等网页元素样式属性的定义（1313）了解网页中）了解网页中DivDiv标签的插入方法，了解网页中标签的插入方法，了解网页中CSSCSS样式的简单应用样式的简单应用（1414）了解在网页中插入）了解在网页中插入FlashFlash动画的方法动画的

5、方法教学方法教学方法任务驱动法、理论实践一体化、讲练结合任务驱动法、理论实践一体化、讲练结合课时建议课时建议8 8课时（包含考核评价）课时（包含考核评价） 1创建所需的文件夹，拷贝所需的资源。创建所需的文件夹，拷贝所需的资源。 2创建站点。创建站点。 3熟悉新建网页文档的方法。熟悉新建网页文档的方法。【任务任务2-1】新建网页文档新建网页文档0201.html 与设置页面属性与设置页面属性【任务描述任务描述】 （1）新建一个网页文档，保存在文件夹）新建一个网页文档，保存在文件夹“2-1”中，命名为中，命名为“0201.html”。 （2）网页的）网页的“外观外观”属性设置要求如下所示。属性设置

6、要求如下所示。 网页的网页的“页面字体页面字体”设置为设置为“宋体宋体”。 “大小大小”设置为设置为“12px”；“文本颜色文本颜色”设置为设置为“#333”，“背景颜背景颜色色”设置为设置为“#ccf2f1”；“左边距左边距”和和“右边距右边距”设置为设置为“30px”，“上边上边距距”和和“下过距下过距”设置为设置为“10px” 。 （3）网页的）网页的“标题标题”属性设置要求如下所示。属性设置要求如下所示。 网页的标题字体设置为网页的标题字体设置为“黑体黑体”，标题，标题1的大小为的大小为“24px”，颜色为，颜色为“#0000ff”；标题；标题2的大小为的大小为“18px”，颜色为，颜

7、色为“#ff00ff”；标题；标题3的大小为的大小为“14px”，颜色为，颜色为“black”。 （4）网页的）网页的“标题标题/编码编码”属性设置要求如下所示。属性设置要求如下所示。 网页的标题设置为网页的标题设置为“标准快递标准快递 - 配送方式配送方式 - 帮助帮助中心中心 - 易购网易购网”，文档类型为，文档类型为“XHTML 1.0 Transitional”，编码为，编码为“简体中文简体中文(GB2312)”。 【任务实施任务实施】1创建网页文档且保存创建网页文档且保存2打开打开【页面属性页面属性】对话框对话框3设置设置“外观外观”属性属性 （1）在）在【页面属性页面属性】对话框左

8、边对话框左边“分类分类”列表中选列表中选择择“外观（外观（CSS）”。 （2）设置页面字体。）设置页面字体。 （3）设置页面字体大小。）设置页面字体大小。 从字体大小列表框中单击选择从字体大小列表框中单击选择12，其单位为，其单位为“像素像素(px)”。 （4）设置网页的文本颜色。）设置网页的文本颜色。 （5）设置网页的背景颜色。）设置网页的背景颜色。 （6）设置页面边距。）设置页面边距。 （1）打开）打开【页面属性页面属性】”对话框，左边对话框，左边“分类分类”列表中选列表中选择择“标题标题”。 （2）在）在“标题字体标题字体”列表框中选择列表框中选择“黑体黑体”， 如果字体如果字体下拉列表

9、框中没有列出所需的字体，可以单击列表框中下拉列表框中没有列出所需的字体，可以单击列表框中的最后一项的最后一项“编辑字体列表编辑字体列表”，添加所需的字体。，添加所需的字体。 （3）在）在“标题标题3”的的“大小大小”列表框中选择列表框中选择“14”，单位默，单位默认为认为“像素像素(px)”，颜色文本框中输入，颜色文本框中输入“black”。 5设置设置“标题标题/编码编码”属性属性 （1）打开）打开【页面属性页面属性】对话框，左边对话框，左边“分类分类”列表中选择列表中选择“标题标题/编码编码”。 （2）在）在“标题标题”文本框中输入文本框中输入“标准快递标准快递 - 配送方式配送方式 -

10、帮帮助中心助中心 - 易购网易购网”。 （3）在）在“文档类型文档类型”列表框中选择列表框中选择“XHTML 1.0 Transitional”。 （4）在）在“编码编码”列表框中选择列表框中选择“简体中文简体中文(GB2312)”，将，将网页的文字编码设置成中文。网页的文字编码设置成中文。 6保存网页的属性设置保存网页的属性设置 单击单击“标准标准”工具栏中的工具栏中的【保存保存】按钮或按钮或【全部保存全部保存】按钮，保存网页的属性设置。按钮，保存网页的属性设置。【任务任务2-2】在网页中输入与编辑文本在网页中输入与编辑文本【任务描述任务描述】 （1）在网页）在网页0201.html中输入如

11、图中输入如图2-12所示的多个标题和多所示的多个标题和多行文本。行文本。图图2-122-12网页网页0201.html0201.html中的文本内容中的文本内容 （2）将网页中的文本标题）将网页中的文本标题“标准快递收费标准标准快递收费标准”和和“服务服务说明说明”设置为设置为“标题标题3”。 （3）将网页中第）将网页中第2行的文字行的文字“标准快递标准快递”设置为粗体。设置为粗体。 网页网页0201.html的浏览效果如图的浏览效果如图2-13所示。所示。图图2-132-13网页网页0201.html0201.html的浏览效果的浏览效果【任务实施任务实施】1在网页在网页0201.html中

12、输入文本中输入文本（1）确定文字输入位置）确定文字输入位置（2）输入标题文本）输入标题文本（3）输入空格和文本）输入空格和文本（4）插入特殊字符）插入特殊字符（5）保存所输入的文本）保存所输入的文本 在网页中输入的文本与在网页中输入的文本与Word一样，也能进行编辑一样，也能进行编辑，常见的文本编辑操作有：，常见的文本编辑操作有： （1）拖动鼠标选中一个或多个文字、一行或多行文本，）拖动鼠标选中一个或多个文字、一行或多行文本，也可以选中网页中的全部文本。也可以选中网页中的全部文本。 （2）按）按BackSpace键或键或Delete键实现删除文本操作。键实现删除文本操作。 （3）将光标移动到需

13、要插入文本的位置，输入新的文本）将光标移动到需要插入文本的位置，输入新的文本。 （4）实现复制、剪切、粘贴等操作。）实现复制、剪切、粘贴等操作。 （5）实现查找与替换操作。）实现查找与替换操作。 （6）实现撤消或重做操作。）实现撤消或重做操作。 3格式化网页中的文本格式化网页中的文本 （1）显示）显示【属性属性】面板。面板。 （2）设置网页文本标题的格式属性。）设置网页文本标题的格式属性。 （3）设置网页中第）设置网页中第2行的文字行的文字“标准快递标准快递”为粗体。为粗体。 （4）保存对网页文本的格式设置。）保存对网页文本的格式设置。 4浏览网页效果浏览网页效果 按快捷键按快捷键F12，网页

14、的浏览效果如图，网页的浏览效果如图2-13所示。所示。【任务任务2-3】在网页中添加与编辑列表在网页中添加与编辑列表【任务描述任务描述】 （1）新建）新建1个网页个网页0202.html，在该网页中输入多行文字，在该网页中输入多行文字，且设置其格式。且设置其格式。 （2）将网页中）将网页中“新手指南新手指南”的相关内容设置为项目列表。的相关内容设置为项目列表。 （3）将网页中）将网页中“配送方式配送方式”的相关内容设置为定义列表。的相关内容设置为定义列表。 网页网页0202.html的浏览效果如图的浏览效果如图2-20所示。所示。图图2-202-20网页网页0202.html0202.html

15、的浏览效果的浏览效果【任务实施任务实施】 1创建网页文档且进行保存。创建网页文档且进行保存。 2在网页在网页0202.html中输入文本且进行编辑。中输入文本且进行编辑。 3设置文本格式。设置文本格式。 选择网页选择网页0202.html中的第中的第1行文字行文字“帮助信息帮助信息help info”，将其设置为，将其设置为“标题标题3”，然后将第，然后将第2行文行文字字“新手指南新手指南”设置为设置为“标题标题4”。 4设置项目列表。设置项目列表。 选中网页中第选中网页中第3行（会员注册）至第行（会员注册）至第8行中的行中的文字（会员协议），单击菜单命令文字（会员协议），单击菜单命令【格式格

16、式】【列表列表】【项目列表项目列表】，如图，如图2-22所示，将所选中所示，将所选中的文本设置为项目列表。的文本设置为项目列表。 5设置定义列表。设置定义列表。 选中网页中的第选中网页中的第10行至第行至第14行的项目列表文字，行的项目列表文字，在在【文本文本】插入工具栏中单击插入工具栏中单击【dd 定义说明定义说明】按钮按钮，将所选中的文本设置为，将所选中的文本设置为“定义说明定义说明” 。 6保存网页与浏览网页效果。保存网页与浏览网页效果。 保存网页保存网页0202.html，然后按快捷键，然后按快捷键F12，网页的，网页的浏览效果如图浏览效果如图2-20所示。所示。HTML三种列表形式三

17、种列表形式1.排序列表排序列表(Ordered List) 即即编号列表编号列表，排序列表中，每个列表项前标有数字，表示顺，排序列表中，每个列表项前标有数字，表示顺序。排序列表由序。排序列表由开始，每个列表项由开始，每个列表项由开始。开始。 2.不排序列表不排序列表(Unordered List) 即即项目列表项目列表，不排序列表不用数字标记每个列表项，而采用一，不排序列表不用数字标记每个列表项，而采用一个符号标志每个列表项，比如圆黑点。不排序列表由个符号标志每个列表项，比如圆黑点。不排序列表由开始，每开始，每个列表项由个列表项由开始。开始。HTML三种列表形式三种列表形式3. 定义列表定义列

18、表(Definition List) 定义列表定义列表通常用于术语的定义。定义列表由通常用于术语的定义。定义列表由开始。术语由开始。术语由开始，即开始，即定义术语定义术语，英文意为，英文意为Definition Term。术语的解释说明，。术语的解释说明，即即定义说明定义说明，由，由开始，开始，里的文字缩进显示。里的文字缩进显示。 配送方式配送方式 上门自提上门自提 标准快递标准快递 特快专递特快专递 EMS易邮宝易邮宝 宅急送宅急送【任务任务2-4】在网页中插入与编辑图像在网页中插入与编辑图像【任务描述任务描述】 （1）新建）新建1个网页个网页0203.html.。 （2）设置网页）设置网页

19、0203.html的背景图像为的背景图像为“02bg.gif”。 （3）在网页）在网页0203.html中输入必要的文字。中输入必要的文字。 （4）在网页）在网页0203.html中插入图像中插入图像logo.jpg，且设置其属性：，且设置其属性：宽为宽为183px，高为，高为57px，水平边距为，水平边距为10px，替换文本为，替换文本为“LOGO”，对齐方式为，对齐方式为“左对齐左对齐”。 （5）在网页）在网页0203.html中插入图像中插入图像02banner.jpg，且设置其，且设置其属性：宽为属性：宽为546px，高为，高为57px，替换文本为，替换文本为“广告图片广告图片1”。

20、（6）在网页）在网页0203.html中插入图像中插入图像02dot.gif，且设置其属，且设置其属性：宽为性：宽为22px，高为，高为20px，垂直边距为，垂直边距为0，水平边距为，水平边距为5px，替换文本为，替换文本为“图片图片3”，对齐方式为，对齐方式为“左对齐左对齐”。 （7）在网页）在网页0203.html中插入图像中插入图像02icp.gif，且设置其属，且设置其属性：宽为性：宽为108px，高为，高为40px，垂直边距为，垂直边距为5px，水平边距，水平边距为为2px，替换文本为，替换文本为“经营性网站备案经营性网站备案”。 （8）在网页）在网页0203.html中插入图像中插

21、入图像02trusted.jpg，且设置，且设置其属性：宽为其属性：宽为112px，高为，高为40px，垂直边距为，垂直边距为5px，水平，水平边距为边距为2px，替换文本为，替换文本为“可信网站可信网站”。 网页网页0203.html的浏览效果如图的浏览效果如图2-26所示。所示。图图2-262-26网页网页0203.html0203.html的浏览效果的浏览效果【任务实施任务实施】1创建网页文档且进行保存创建网页文档且进行保存2设置网页的背景图像设置网页的背景图像3插入第插入第1幅图像幅图像logo.jpg4插入第插入第2幅图像幅图像02banner.jpg5插入第插入第3幅图像幅图像02

22、dot.gif6输入必要的文字且设置其属性输入必要的文字且设置其属性7插入第插入第4幅图像幅图像02icp.gif8插入第插入第5幅图像幅图像02trusted.jpg9保存网页与浏览网页效果保存网页与浏览网页效果【任务任务2-5】在网页中插入与设置表格在网页中插入与设置表格【任务描述任务描述】 （1）新建）新建1个网页个网页0204.html.。 （2）在网页中插入一个）在网页中插入一个9行行4列的表格，且设置其属性：列的表格，且设置其属性：宽为宽为700px，边框为，边框为1px，填充、间距为，填充、间距为0，表格，表格4列的宽度列的宽度分别为分别为120px、380px、100px和和1

23、00px。表格的标题文字为。表格的标题文字为“标准快递收费标准标准快递收费标准”。 （3）设置表格的行、列及单元格的属性。）设置表格的行、列及单元格的属性。 （4）根据需要合并单元格，且在单元格中输入必要的文）根据需要合并单元格，且在单元格中输入必要的文字。字。 网页网页0204.html.的浏览效果如图的浏览效果如图2-32所示。所示。图图2-322-32网页网页0204.html.0204.html.的浏览效果的浏览效果【任务实施任务实施】 1创建网页文档且保存。创建网页文档且保存。 2在网页在网页0204.html中插入中插入1个个9行行4列的表格。列的表格。 在在Dreamweaver

24、 CS4主界面中，单击菜主界面中，单击菜 单命令单命令【插入插入】【表格表格】，弹出，弹出1个个【表格表格】对话对话框。框。 （1）在）在【表格表格】对话框对话框“行数行数”文本框中输入文本框中输入“9”，在在“列数列数”文本框中输入文本框中输入“4”。 （2）在）在“表格宽度表格宽度”文本框输入文本框输入“700”，其后的，其后的下拉列表框中选择宽度的单位为下拉列表框中选择宽度的单位为“像素像素”。 （3）在）在“边框粗细边框粗细”文本框中指定表格边框的宽文本框中指定表格边框的宽度，默认值为度，默认值为1，单位为像素，其他参数暂保持其，单位为像素，其他参数暂保持其默认值不变。默认值不变。 （

25、4）在）在“标题标题”文本框中输入表格的标题文本框中输入表格的标题“标准标准快递收费标准快递收费标准”。 （5）设置完成后单击）设置完成后单击【确定确定】按钮，按钮，1个个9行行4列的列的表格便插入到网页中。表格便插入到网页中。 （6）保存网页中所插入的表格。）保存网页中所插入的表格。 3查看查看9行行4列表格的属性。列表格的属性。 将鼠标指针指向表格边框线，出现红色外框将鼠标指针指向表格边框线，出现红色外框线，鼠标指针变为形状时，单击鼠标左键即可选线，鼠标指针变为形状时，单击鼠标左键即可选中整个表格。中整个表格。 选中整个表格时，表格的选中整个表格时，表格的“属性属性”面板如图面板如图2-3

26、4所示。所示。 4设置表格第设置表格第1行的属性。行的属性。（1）选择表格行）选择表格行（2）设置表格行的属性）设置表格行的属性 保存表格第保存表格第1行的属性设置。行的属性设置。 5设置表格第设置表格第2行至第行至第9行的行高。行的行高。 将鼠标指针指向表格的第将鼠标指针指向表格的第2行的左边线，当鼠标行的左边线，当鼠标指针变成一个黑色箭头形状时，按住鼠标左键拖动指针变成一个黑色箭头形状时，按住鼠标左键拖动鼠标到第鼠标到第9行，选中第行，选中第2行至第行至第9行。行。 然后在表格然后在表格“属性属性”面板的面板的“高高”文本框中输入文本框中输入“25”。 6设置表格各列的对齐方式。设置表格各

27、列的对齐方式。 将鼠标指针指向表格的第将鼠标指针指向表格的第1列的上边线，当鼠标列的上边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标左键即可指针变成一个黑色箭头形状时，单击鼠标左键即可选中该列。选中该列。 然后在表格然后在表格“属性属性”面板的面板的“水平水平”列表框中选列表框中选择择“居中对齐居中对齐”。 7设置表格各列的宽度。设置表格各列的宽度。 将光标置于表格第将光标置于表格第1行的第行的第1个单元格中，个单元格中，“宽宽”文本框中输入文本框中输入“120”。 以同样的方法将第以同样的方法将第1行第行第2个单元格的宽度设置为个单元格的宽度设置为380px，第，第3个单元格的宽度设置为个

28、单元格的宽度设置为100px。 8设置表格单元格的对齐方式。设置表格单元格的对齐方式。 9合并单元格。合并单元格。 （1）将第）将第1列的列的3、4、5三个单元格合并。三个单元格合并。 （2）将第）将第1列的列的6、7、8、9四个单元格合并。四个单元格合并。 （3）将第）将第3列的列的3、4两个单元格合并。两个单元格合并。 （4）将第）将第3列的列的6、7、8、9四个单元格合并。四个单元格合并。 10在表格的单元格中输入文字在表格的单元格中输入文字 在第在第1行的各个单元格中分别输入文字行的各个单元格中分别输入文字“区域区域划分划分”、“包含地区包含地区”、“首重运费首重运费”和和“超重超重运

29、费运费”。 然后在其他单元格依次输入如图然后在其他单元格依次输入如图2-32所示的文所示的文字。字。 11保存网页与浏览网页效果。保存网页与浏览网页效果。 保存网页保存网页0204.html，然后按快捷键，然后按快捷键F12，网页，网页的浏览效果如图的浏览效果如图2-32所示。所示。【任务任务2-6】创建综合网页创建综合网页0205.html【任务描述任务描述】 综合应用本单元所掌握的在网页中输入与编辑文综合应用本单元所掌握的在网页中输入与编辑文 本、添加与编辑列表、插入与编辑图像、插入与设置本、添加与编辑列表、插入与编辑图像、插入与设置 表格等方法创建网页表格等方法创建网页0205.html

30、.，在该网页中插入，在该网页中插入1幅幅Flash动画。动画。 该网页尝试利用该网页尝试利用CSS样式进行布局，并且尝试利样式进行布局，并且尝试利 用用CSS样式对该网页中的元素进行美化。样式对该网页中的元素进行美化。 网页网页0205.html.的浏览效果如彩图的浏览效果如彩图2所示。所示。【任务实施任务实施】 1创建网页文档且保存。创建网页文档且保存。 2在样式文件在样式文件global.css中设置标签样式。中设置标签样式。 打开样式文件打开样式文件global.css，将光标置于该文件中。，将光标置于该文件中。（1）设置标签）设置标签body的属性的属性（2）设置标签）设置标签ul的属

31、性的属性（3）设置标签）设置标签img的属性的属性 3在样式文件在样式文件help.css中创建多个样式。中创建多个样式。（1）创建样式）创建样式header（2）创建样式）创建样式help_wrapper（3）创建样式）创建样式logo（4）创建样式）创建样式l_logo和和r_flash 在样式文件在样式文件help.css中空白处单击鼠标右键，在中空白处单击鼠标右键，在弹出的快捷菜单中单击菜单命令弹出的快捷菜单中单击菜单命令【CSS样式样式】【新新建建】，如图，如图2-50所示。弹出所示。弹出【新建新建 CSS 规则规则】对话对话框。框。 4链接外部样式文件。链接外部样式文件。 5插入插

32、入Div标签标签header 。 6插入插入Div标签标签logo和和clear 。 7插入插入Div标签标签l_logo和和r_flash 。 8插入插入LOGO图像。图像。 9插入插入Flash动画。动画。 10保存网页与浏览网页效果。保存网页与浏览网页效果。 保存网页保存网页0205.html，然后按快捷键，然后按快捷键F12，网页的，网页的浏览效果如彩图浏览效果如彩图2所示。所示。【考核任务描述考核任务描述】 教材配套光盘中已提供了考核评价项目所需教材配套光盘中已提供了考核评价项目所需的网页文件、的网页文件、CSS样式表文件和网页素材，在网样式表文件和网页素材，在网页页0206.html中完成以下操作。中完成以下操作。 （1）在网页顶部）在网页顶部“当前位置：当前位置：”位置