网页设计与制作实用教程 第2版 国家级精品课程配套教材 教学课件 ppt 作者 陈承欢 单元2　制作基本页面.ppt

单元2 制作基本页面,网页中的基本组成元素有文字、图像和动画等，网站中的基本页面主要包括文本网页、图文混排网页和、文混排网页等 本单元通过制作文本网页、图文混排网页和表文混排网页，学会新建网页文档、设置网页的页面属性、在网页中输入与编辑文本、对网页文本进行格式化处理、添加编辑列表、插入与编辑图像、插入与设置表格等操作教学导航】,【2.1 操作准备】,1．创建所需的文件夹，拷贝所需的资源 2．创建站点 3．熟悉新建网页文档的方法2.2 操作演练】,【任务2-1】新建网页文档0201.html 与设置页面属性 【任务描述】 （1）新建一个网页文档，保存在文件夹“2-1”中，命名为“0201.html”2）网页的“外观”属性设置要求如下所示 网页的“页面字体”设置为“宋体” “大小”设置为“12px”；“文本颜色”设置为“#333”，“背景颜色”设置为“#ccf2f1”；“左边距”和“右边距”设置为“30px”，“上边距”和“下过距”设置为“10px” （3）网页的“标题”属性设置要求如下所示 网页的标题字体设置为“黑体”，标题1的大小为“24px”，颜色为“#0000ff”；标题2的大小为“18px”，颜色为“#ff00ff”；标题3的大小为“14px”，颜色为“black”。

4）网页的“标题/编码”属性设置要求如下所示 网页的标题设置为“标准快递 - 配送方式 - 帮助中心 - 易购网”，文档类型为“XHTML 1.0 Transitional”，编码为“简体中文(GB2312)” 【任务实施】 1．创建网页文档且保存 2．打开【页面属性】对话框 3．设置“外观”属性,（1）在【页面属性】对话框左边“分类”列表中选择“外观（CSS）” （2）设置页面字体 （3）设置页面字体大小 从字体大小列表框中单击选择12，其单位为“像素(px)” （4）设置网页的文本颜色 （5）设置网页的背景颜色 （6）设置页面边距4．设置“标题”属性,（1）打开【页面属性】”对话框，左边“分类”列表中选择“标题” （2）在“标题字体”列表框中选择“黑体”， 如果字体下拉列表框中没有列出所需的字体，可以单击列表框中的最后一项“编辑字体列表…”，添加所需的字体 （3）在“标题3”的“大小”列表框中选择“14”，单位默认为“像素(px)”，颜色文本框中输入“black”5．设置“标题/编码”属性 （1）打开【页面属性】对话框，左边“分类”列表中选择“标题/编码” （2）在“标题”文本框中输入“标准快递 - 配送方式 - 帮助中心 - 易购网”。

（3）在“文档类型”列表框中选择“XHTML 1.0 Transitional” （4）在“编码”列表框中选择“简体中文(GB2312)”，将网页的文字编码设置成中文 6．保存网页的属性设置 单击“标准”工具栏中的【保存】按钮或【全部保存】按钮，保存网页的属性设置任务2-2】在网页中输入与编辑文本 【任务描述】 （1）在网页0201.html中输入如图2-12所示的多个标题和多行文本图2-12 网页0201.html中的文本内容,（2）将网页中的文本标题“标准快递收费标准”和“服务说明”设置为“标题3” （3）将网页中第2行的文字“标准快递”设置为粗体 网页0201.html的浏览效果如图2-13所示图2-13 网页0201.html的浏览效果,【任务实施】 1．在网页0201.html中输入文本 （1）确定文字输入位置 （2）输入标题文本 （3）输入空格和文本 （4）插入特殊字符 （5）保存所输入的文本,2．编辑网页中的文本,在网页中输入的文本与Word一样，也能进行编辑，常见的文本编辑操作有： （1）拖动鼠标选中一个或多个文字、一行或多行文本，也可以选中网页中的全部文本 （2）按BackSpace键或Delete键实现删除文本操作。

（3）将光标移动到需要插入文本的位置，输入新的文本 （4）实现复制、剪切、粘贴等操作 （5）实现查找与替换操作 （6）实现撤消或重做操作3．格式化网页中的文本 （1）显示【属性】面板 （2）设置网页文本标题的格式属性 （3）设置网页中第2行的文字“标准快递”为粗体 （4）保存对网页文本的格式设置 4．浏览网页效果 按快捷键F12，网页的浏览效果如图2-13所示任务2-3】在网页中添加与编辑列表 【任务描述】 （1）新建1个网页0202.html，在该网页中输入多行文字，且设置其格式 （2）将网页中“新手指南”的相关内容设置为项目列表 （3）将网页中“配送方式”的相关内容设置为定义列表 网页0202.html的浏览效果如图2-20所示图2-20 网页0202.html的浏览效果,【任务实施】 1．创建网页文档且进行保存 2．在网页0202.html中输入文本且进行编辑 3．设置文本格式 选择网页0202.html中的第1行文字“帮助信息help info”，将其设置为“标题3”，然后将第2行文字“新手指南”设置为“标题4” 4．设置项目列表 选中网页中第3行（会员注册）至第8行中的文字（会员协议），单击菜单命令【格式】→【列表】→【项目列表】，如图2-22所示，将所选中的文本设置为项目列表。

5．设置定义列表 选中网页中的第10行至第14行的项目列表文字，在【文本】插入工具栏中单击【dd 定义说明】按钮，将所选中的文本设置为“定义说明” 6．保存网页与浏览网页效果 保存网页0202.html，然后按快捷键F12，网页的浏览效果如图2-20所示任务2-4】在网页中插入与编辑图像 【任务描述】 （1）新建1个网页0203.html. （2）设置网页0203.html的背景图像为“02bg.gif” （3）在网页0203.html中输入必要的文字 （4）在网页0203.html中插入图像logo.jpg，且设置其属性：宽为183px，高为57px，水平边距为10px，替换文本为“LOGO”，对齐方式为“左对齐” （5）在网页0203.html中插入图像02banner.jpg，且设置其属性：宽为546px，高为57px，替换文本为“广告图片1”6）在网页0203.html中插入图像02dot.gif，且设置其属性：宽为22px，高为20px，垂直边距为0，水平边距为5px，替换文本为“图片3”，对齐方式为“左对齐” （7）在网页0203.html中插入图像02icp.gif，且设置其属性：宽为108px，高为40px，垂直边距为5px，水平边距为2px，替换文本为“经营性网站备案”。

（8）在网页0203.html中插入图像02trusted.jpg，且设置其属性：宽为112px，高为40px，垂直边距为5px，水平边距为2px，替换文本为“可信网站” 网页0203.html的浏览效果如图2-26所示图2-26 网页0203.html的浏览效果,【任务实施】 1．创建网页文档且进行保存 2．设置网页的背景图像 3．插入第1幅图像logo.jpg 4．插入第2幅图像02banner.jpg 5．插入第3幅图像02dot.gif 6．输入必要的文字且设置其属性 7．插入第4幅图像02icp.gif 8．插入第5幅图像02trusted.jpg 9．保存网页与浏览网页效果,【任务2-5】在网页中插入与设置表格 【任务描述】 （1）新建1个网页0204.html. （2）在网页中插入一个9行4列的表格，且设置其属性：宽为700px，边框为1px，填充、间距为0，表格4列的宽度分别为120px、380px、100px和100px表格的标题文字为“标准快递收费标准” （3）设置表格的行、列及单元格的属性 （4）根据需要合并单元格，且在单元格中输入必要的文字 网页0204.html.的浏览效果如图2-32所示。

图2-32 网页0204.html.的浏览效果,【任务实施】 1．创建网页文档且保存 2．在网页0204.html中插入1个9行4列的表格 在Dreamweaver CS4主界面中，单击菜 单命令【插入】→【表格】，弹出1个【表格】对话框 （1）在【表格】对话框“行数”文本框中输入“9”，在“列数”文本框中输入“4”2）在“表格宽度”文本框输入“700”，其后的下拉列表框中选择宽度的单位为“像素” （3）在“边框粗细”文本框中指定表格边框的宽度，默认值为1，单位为像素，其他参数暂保持其默认值不变 （4）在“标题”文本框中输入表格的标题“标准快递收费标准” （5）设置完成后单击【确定】按钮，1个9行4列的表格便插入到网页中 （6）保存网页中所插入的表格3．查看9行4列表格的属性 将鼠标指针指向表格边框线，出现红色外框线，鼠标指针变为形状时，单击鼠标左键即可选中整个表格 选中整个表格时，表格的“属性”面板如图2-34所示 4．设置表格第1行的属性 （1）选择表格行 （2）设置表格行的属性 保存表格第1行的属性设置5．设置表格第2行至第9行的行高 将鼠标指针指向表格的第2行的左边线，当鼠标指针变成一个黑色箭头形状时，按住鼠标左键拖动鼠标到第9行，选中第2行至第9行。

然后在表格“属性”面板的“高”文本框中输入“25” 6．设置表格各列的对齐方式 将鼠标指针指向表格的第1列的上边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标左键即可选中该列 然后在表格“属性”面板的“水平”列表框中选择“居中对齐”7．设置表格各列的宽度 将光标置于表格第1行的第1个单元格中，“宽”文本框中输入“120” 以同样的方法将第1行第2个单元格的宽度设置为380px，第3个单元格的宽度设置为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行的各个单元格中分别输入文字“区域划分”、“包含地区”、“首重运费”和“超重运费” 然后在其他单元格依次输入如图2-32所示的文字 11．保存网页与浏览网页效果 保存网页0204.html，然后按快捷键F12，网页的浏览效果如图2-32所示2.3 技术提升】,【任务2-6】创建综合网页0205.html 【任务描述】 综合应用本单元所掌握的在网页中输入与编辑文 本、添加与编辑列表、插入与编辑图像、插入与设置 表格等方法创建网页0205.html.，在该网页中插入1幅Flash动画。

该网页尝试利用CSS样式进行布局，并且尝试利 用CSS样式对该网页中的元素进行美化 网页0205.html.的浏览效果如彩图2所示任务实施】 1．创建网页文档且保存 2．在样式文件global.css中设置标签样式 打开样式文件global.css，将光标置于该文件中 （1）设置标签body的属性 （2）设置标签ul的属性 （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．插入Div标签header 6．插入Div标签logo和clear 7．插入Div标签l_logo和r_flash 8．插入LOGO图像 9．插入Flash动画 10．保存网页与浏览网页效果 保存网页0205.html，然后按快捷键F12，网页的浏览效果如彩图2所示2.4 考核评价】,。