Web编程基础（HTML+CSS）项目实战教程 实训指导书 模块3、4 美化修饰网站的新闻页面、 制作网站的最新动态页面.doc

《WEB编程基础》实训指导书 模块3 美化修饰网站的新闻页面 实训任务指导书 【实训目的】 1. 掌握CSS的定义和使用方法； 2. 熟练CSS修饰文本、字体、背景的样式； 3. 理解CSS的继承性、优先级和层叠性； 4. 理解盒子模型原理。 【实训内容】 实训任务1：使用CSS渲染班级学习交流页面 【任务描述】 构建班级学习交流页面，在网页中添加网页文本、图像，并通过CSS样式修饰页面中文本、字体、图像等样式，页面效果如图所示。教材114页。 【实训任务指导】 1. 使用div块级元素承载文章内容，并使用盒子模型概念对div进行区域块定义修饰。 2. 创建文章标题、段落、水平线和图像，为把图像能控制在显示区内的左右居中，再使用一个div标记承载图像，对外层div设置text-align: center; 内容居中。 3. 使用内嵌样式表的方式应用CSS样式。 4. 使用标签选择器、类选择器的方式定义、修饰页面元素。 实训任务2：使用CSS渲染班级公告栏页面 【任务描述】 制作滚动的班级公告栏页面，使用CSS层叠样式表的方式对页面文本、字体、背景图像等进行样式美化修饰，页面效果如图所示。教材116页。 【实训任务指导】 1. 使用内嵌样式表的方式应用CSS样式。 2. 使用标签选择器、类选择器的方式定义、修饰页面元素。 3. 简单使用JavaScript程序代码控制鼠标事件。 实训任务3：制作班级网站中青春名片 【任务描述】 制作名片效果，使用HTML创建网页结构，使用CSS技术简单修饰页面样式，理解掌握万物皆盒子的设计思想，页面效果如图所示。教材117页。 【实训任务指导】 1. 使用链接外部样式表的方式应用CSS样式。 2. 使用标签选择器、类选择器的方式定义、修饰页面元素。 3. 能够使用盒子模型控制页面元素。 实训任务4：制作图文环绕效果 【任务描述】 使用浮动控制元素属性，实现图文环绕和首字下沉效果，页面效果如图所示。教材119页。 【实训任务指导】 1. 使用CSS的浮动，控制元素属性，并设置清除浮动影响。 2. 使用标签选择器、类选择器的方式定义、修饰页面元素。 3. 能够使用盒子模型控制页面元素。 4. 使用CSS伪元素选择的方式，选取段落首字p:first-letter，设置首字特殊效果。 实训任务5：制作班级图片新闻版块 【任务描述】 使用CSS设置盒子浮动，控制元素页面布局，使用定位技术精准定位网页元素在页面中的位置，制作图片新闻版块效果，页面效果如图所示，在每张新闻图片的底端上层定位一个黑底白字的新闻标题，并且实现三张新闻图片水平摆放。教材121页。 【实训任务指导】 1. 使用CSS的浮动，控制元素属性，并设置清除浮动影响。 2. 使用标签选择器、类选择器的方式定义、修饰页面元素。 3. 能够使用盒子模型思想控制页面中的h3，div，span等元素。 4. 使用“子绝父相”的定位技术定位新闻标题的显示位置。 模块4 创建网站最新动态页面 实训任务指导书 【实训目的】 1. 理解列表项的用途； 2.掌握无序列表、有序列表、嵌套列表和定义列表； 3.熟练CSS美化修饰列表样式； 4.设置各种超链接，并修饰超链接的状态。 【实训内容】 实训任务1：制作班级新闻条目 【任务描述】 制作班级新闻栏目版块，新闻条目以无序列表罗列展开，列表条目设置橘色小方块square项目符号，标题和列表条目均为十六进制#333333深灰色，页面效果如图教材144页。 【实训任务指导】 1. 使用无序列表ul创建新闻列表条目。 2. 应用内部定义CSS样式的方法，修饰矩形区域、标题、列表、列表条目等。 3. 修饰li标记，定义项目符号的橘色，修饰span标记定义文本的不同颜色。 实训任务2：制作班级网站中软件大赛通知 【任务描述】 制作班级网站中“软件大赛通知”内容，一级列表以阿拉伯数字编号，二级列表修饰外边框及各条目项目符号，最后一个段落修饰颜色、倾斜等样式，页面效果如图教材145页。 【实训任务指导】 1. 使用有序列表ol创建竞赛规则的一级列表条目；使用无序列表ul创建竞赛流程中二级列表条目。 2. 应用链接外部样式文件的方式定义、修饰HTML网页中的元素。 3. 使用背景图及背景属性设置的方式，制作列表条目的项目符号。 实训任务3：制作班级学习园地 【任务描述】 制作班级网站中的班级学习园地版块，页面中左侧为实验图片，右侧罗列实验相关条目，页面下方是对背景知识的详细介绍，页面效果如图教材147页。 【实训任务指导】 1. 页面中上半部分的实验环节，使用定义列表dl制作，将实验图片作为要被解释、说明的名词或主题，使用dt