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

* * 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　考核评价】 【考核任务描述】 教材配套光盘中已提供了考核评价项目所需的网页文件、CSS样式表文件和网页素材，在网页0206.html中完成以下操作。 （1）在网页顶部“当前位置：”位置分别插入图片和输入文字。 （2）在网页左侧插入“栏目导航”和“桂林景点”的项目列表，且在相应位置插入图片。 （3）在“桂林概况”位置输入多段文字，每段文字的开始位置使用空格实现缩进，在“桂林概况”文字的左上角和右下角各插入一幅图片，实现图文混排效果。 本单元的考核评价任务完成后，网页0206.html的最终浏览效果如图2-64所示。 图2-64　网页0206.html的最终浏览效果 【评价要点】 本单元的考核评价表如表2-1所示。 【单元小结】 本单元通过几个基本页面的创建，学会设置页面属性，学会在网页中输入与编辑文本、对网页文本进行格式化处理、添加与编辑列表、插入与编辑图像、插入与设置表格，了解CSS样式属 性的定义，了解网页插入Div标签对网页中的文 本、列表、图像进行美化的方法。 考核要点 考核内容 标准分 计分 （1）在“当前位置”熟练插入图片和输入文字 1 （2）在“栏目导航”和“桂林景点”位置熟练插入项目列表 2 （3）在“栏目导航”和“桂林景点”位置熟练插入图片 1 （4）在“桂林概况”位置熟练输入多段文字，且实现首行缩进和换行 1 （5）在“桂林概况”区域的合适位置熟练插入图片，实现图文混排效果，且正确设置图片与文字之间的间距 2 （6）认真完成本单元的任务，态度端正、操作规范、学习效果较好 1 小计 8 评价方式 自我评价 小组评价 教师评价 考核得分 表2-1　单元2的考核评价表 在线教务辅导网：