《Web编程基础（HTML+CSS）项目实战教程实训指导书模块3、4 美化修饰网站的新闻页面、 制作网站的动态页面.docx》由会员分享，可在线阅读，更多相关《Web编程基础（HTML+CSS）项目实战教程实训指导书模块3、4 美化修饰网站的新闻页面、 制作网站的动态页面.docx（5页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、模块3美化修饰网站的新闻页面实训任务指导书【实训目的】1 .掌握css的定义和使用方法；2 .熟练CSS修饰文本、字体、背景的样式；3 .理解CSS的继承性、优先级和层叠性；4 .理解盒子模型原理。【实训内容】实训任务1：使用CSS渲染班级学习交流页面【任务描述】构建班级学习交流页面，在网页中添加网页文本、图像，并通过CSS样式修 饰页面中文本、字体、图像等样式，页面效果如图所示。教材114页。【实训任务指导】1 .使用div块级元素承载文章内容，并使用盒子模型概念对div进行区域 块定义修饰。2 .创建文章标题、段落、水平线和图像，为把图像能控制在显示区内的左 右居中，再使用一个div标记承
2、载图像，对外层div设置text-align: center; 内容居中。3 .使用内嵌样式表的方式应用CSS样式。4 .使用标签选择器、类选择器的方式定义、修饰页面元素。实训任务2：使用CSS渲染班级公告栏页面【任务描述】制作滚动的班级公告栏页面，使用CSS层叠样式表的方式对页面文本、字体、 背景图像等进行样式美化修饰，页面效果如图所示。教材116页。【实训任务指导】1 .使用内嵌样式表的方式应用CSS样式。2 .使用标签选择器、类选择器的方式定义、修饰页面元素。3 .简单使用JavaScript程序代码控制鼠标事件。实训任务3：制作班级网站中青春名片【任务描述】制作名片效果，使用HTML创
3、建网页结构，使用CSS技术简单修饰页面样式, 理解掌握万物皆盒子的设计思想，页面效果如图所示。教材117页。【实训任务指导】1 .使用链接外部样式表的方式应用CSS样式。2 .使用标签选择器、类选择器的方式定义、修饰页面元素。3 .能够使用盒子模型控制页面元素。实训任务4：制作图文环绕效果【任务描述】使用浮动控制元素属性，实现图文环绕和首字下沉效果，页面效果如图所示。教材119页。【实训任务指导】1 .使用CSS的浮动，控制元素属性，并设置清除浮动影响。2 .使用标签选择器、类选择器的方式定义、修饰页面元素。3 .能够使用盒子模型控制页面元素。4 .使用CSS伪元素选择的方式，选取段落首字p:
4、first-letter,设置首字 特殊效果。实训任务5：制作班级图片新闻版块【任务描述】使用CSS设置盒子浮动，控制元素页面布局，使用定位技术精准定位网页元 素在页面中的位置，制作图片新闻版块效果，页面效果如图所示，在每张新闻图 片的底端上层定位一个黑底白字的新闻标题，并且实现三张新闻图片水平摆放。 教材121页。【实训任务指导】1 .使用CSS的浮动，控制元素属性，并设置清除浮动影响。2 .使用标签选择器、类选择器的方式定义、修饰页面元素。3 .能够使用盒子模型思想控制页面中的h3, div, span等元素。4 .使用“子绝父相”的定位技术定位新闻标题的显示位置。模块4创建网站最新动态页
5、面实训任务指导书【实训目的】1 .理解列表项的用途；2 .掌握无序列表、有序列表、嵌套列表和定义列表;3 .熟练CSS美化修饰列表样式；4 .设置各种超链接，并修饰超链接的状态。【实训内容】实训任务L制作班级新闻条目【任务描述】制作班级新闻栏目版块，新闻条目以无序列表罗列展开，列表条目设置橘色 小方块square项目符号，标题和列表条目均为十六进制#333333深灰色，页面效 果如图教材144页。【实训任务指导】1 .使用无序列表ul创建新闻列表条目。2 .应用内部定义CSS样式的方法，修饰矩形区域、标题、列表、列表条目 等。3 .修饰li标记，定义项目符号的橘色，修饰span标记定义文本的不
6、同颜 色。实训任务2：制作班级网站中软件大赛通知【任务描述】制作班级网站中“软件大赛通知”内容，一级列表以阿拉伯数字编号，二级 列表修饰外边框及各条目项目符号，最后一个段落修饰颜色、倾斜等样式，页面 效果如图教材145页。【实训任务指导】1 .使用有序列表。1创建竞赛规则的一级列表条目；使用无序列表ul创建 竞赛流程中二级列表条目。2 .应用链接外部样式文件的方式定义、修饰HTML网页中的元素。3 .使用背景图及背景属性设置的方式，制作列表条目的项目符号。实训任务3：制作班级学习园地【任务描述】制作班级网站中的班级学习园地版块，页面中左侧为实验图片，右侧罗列实 验相关条目，页面下方是对背景知识
7、的详细介绍，页面效果如图教材147页。【实训任务指导】1 .页面中上半部分的实验环节，使用定义列表dl制作，将实验图片作为要 被解释、说明的名词或主题，使用Vdt制作，其他实验相关条目作为解释Vdl的 具体内容，使用Vdd制作。2 .对出设置向左浮动，使得dt与其他dd块结构构成水平布局，为了避 免右侧向左侧环绕，将左侧盒子高度设置与右侧内容同高。3 .应用超链接制作“想看”、“看过”，当用户单击两个条目时，可跳转到 相应页面，此处，通过空链接ahref=#、调试程序，并设置超链接的样式。实训任务4：制作班级网站导航条【任务描述】制作班级网站中水平导航条的效果，当鼠标悬浮在导航条目上，该条目背
8、景 颜色改变，文字颜色改变；当鼠标离开该条目，该条目样式恢复初始样式，页面 效果如图教材151页。【实训任务指导】1 .使用无序列表创建导航条目，设置列表条目li向左浮动，制作水平导航条。2 .使用超链接对列表条目创建链接，通过空链接va href=#”调试程序，设 置超链接各个状态的样式。3 .按照“LoVeHAte”中L, V, H, A的字母顺序定义a的link, visited, hover, active四个状态的样式。实训任务5：制作班级网站中新闻栏目【任务描述】在“新闻栏目”页面中有新闻列表，当鼠标单击第一个新闻条目“立足当下 惜时光，学习交流一一青春追梦，不负韶华”时，打开“学习交流”页面；在“学 习交流”页面中单击“log。新闻网”图像时，打开“新闻栏目”页面，如图教材153页。在“学习交流”页面中单击“返回顶部”，则返回该页面的最顶部；单击页 面下方的若干个网站链接时，分别打开对应的网站页面，页面效果如图教材153页。【实训任务指导】1 .使用链接外部样式表的方式定义css样式。2 .使用标签选择器、类选择器的方式定义、修饰页面元素。3 .定义超文本链接，外部链接、图像链接，锚点链接等链接方式，并设置链 接样式。