项目7 使用Div+CSS制作网页.docx

1、项目7 使用Div+CSS制作网页广东省职业技术学校学科教案本Teaching Plan20 年20年学年度学期The (1st/2na)Semester of the Academic Year from 20 to 20学校（School） 学科（Subject） 年级（Grade） _教师（Teacher） 重庆大学出版社 制网页制作项目实训教程目录注意：按住Ctrl键后单击每个任务即可跳转到对应的教案单击按钮可返回目录页面设置参数为：纸张：B5 页边距左：1.5页边距右：1.5项目7使用Div+CSS制作网页任务1活动1 使用Div+CSS对网页进行布局活动2 制作导航栏任务2活动1

2、新闻列表部分布局操作活动2 制作新闻列表任务3活动1 制作夏季新品区活动2 制作分类导航区教学课题任务1 活动1 使用Div+CSS对网页进行布局课题类型理论+实作课时安排2上课时间教学目标1.灵活运用Div+CSS知识对网页进行布局操作教学重点1教学难点1辅助资源课件、多媒体、网络复习引入1.背景CSS样式。2.background属性。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求根据所提供的网站首页效果图，使用Div+CSS完成页面的布局操作，完成后以“index.html”为文件名保存到“task7”文件夹，完成布局的页面效果示意图如下图所示。二、

3、师生讨论案例实现思路1、教师展示案例效果2、分析讨论案例实现思路3、教师小结三、教师演示活动实施过程并让学生完成活动任务1、打开Dreamweaver CS6软件并新建一个HTML文档，将新建的HTML文档切换至“设计”视图模式，并以“index.html”为文件名保存到“task7”文件夹根目录。在“文档工具栏”中的“标题”文本框中，将“无标题文档”更改为“Ann儿童服装官方网站”。2、打开“CSS样式”面板，在“CSS样式”面板中单击“新建CSS规则”按钮，打开“新建CSS规则”对话框，在“选择器类型”下拉列表框中选择“标签”，在“选择器名称”框中将“body”改为“*”，在“规则定义”下

4、拉列表框中选择“新建样式表文件”，然后单击“确定”按钮，在弹出的另存为对话框中将样式表文件以“style.css”为文件名保存到“task7/css”目录下。3、在弹出的“* 的CSS规则定义”对话框中，按要求设置字体、字体大小及字体颜色；并将margin与padding的值设置为0。4、依次单击“插入”-“布局对象”- “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”下拉列表框中选择“在插入点”，在“ID”框中输入“top”，然后单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框“规则定义”下拉列表框中选择“style.css”，然后单击“确定”按钮，打开“#to

5、p 的CSS规则定义”对话框。5、在对话框中，设置“背景”选项卡中设置背景颜色为蓝色（#00CCFF），在“方框”选择卡中，按要求设置相关属性值，然后单击“确定”按钮，并将“此处显示 id top 的内容”文字删除，完成页头的布局操作。6、依次单击“插入”- “布局对象”- “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在标签之后”，在第2个下拉列表框中选择“”，在“ID”名框中输入“banner”，其余参照4-5步操作，完成banner与其他部分的布局。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果演示：教师演示活动实施过程实训活动：学

6、生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记教学课题任务1 活动2 制作导航栏课题类型理论+实作课时安排2上课时间教学目标1.进一步巩固项目列表的使用2.灵活运用所学知识完成导航栏的制作教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.Div+CSS网页布局思想的运用。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求如下图所示，打开活动1中完成的“index.html”文件，完成导航栏及页头部分的制作，完成后以原文件名保存。二、师生讨论案例实现思路1、教师展示案例效果2、分析讨论案例实现思路3、教师小结三、教师演

7、示活动实施过程并让学生完成活动任务1、在Dreamweaver CS6软件中打开“index.html”文件，在“CSS样式”面板中单击“全部”按钮，在“所有规则”框中双击“#top”，打开“#top 的CSS规则定义”对话框，将背景颜色清除，并设置下边框样式。2、依次单击“插入”-“布局对象”- “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在开始标签之后”，在第2个下拉列表框中选择“”，在“ID”名框中输入“nav”，然后单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中单击“确定”按钮，打开“#nav 的CSS规则定义”对话框，按

8、要求设置CSS样式。3、将“此处显示 id nav 的内容”文字删除，然后依次单击“插入”- “布局对象”- “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在开始标签之后”，在第2个下拉列表框中选择“”，在“类”名框中输入“logo”，然后单击“确定”按钮。4、选择“此处显示 class logo 的内容”文字，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#top #nav .logo 的CSS规则定义”对话框，按要求设置CSS样式，将“此处显示 class logo 的内容”

9、文字删除，并在其中插入Logo图片“logo.png”。5、在logo区域的后面单击鼠标，将光标定位到logo区域的后面，输入“网站首页”文字，然后按回车键，输入“关于我们”，按同样方法，依次输入“产品中心”、“店铺展示”、“品牌资讯”、“加盟中心”。6、选择刚刚输入的文字，在“属性”面板中单击“HTML”按钮，切换到“HTML”选项卡，然后单击“项目列表”按钮，将选择的文字转换为项目列表，并为输入的文字分别加空链接。7、在任一输入的文字中单击鼠标，在“标签选择器”中单击“ul”，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开

10、“#top #nav ul 的CSS规则定义”对话框，按要求设置CSS样式。8、在任一输入的文字中单击鼠标，在“标签选择器”中单击“li”，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#top #nav ul li 的CSS规则定义”对话框，按要求设置CSS样式。9、在任一输入的文字中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#top #nav ul li a 的CSS规则定义”对话框，按要求设置CSS样式。10、在任一输入的文字中单击鼠标

11、，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中的“选择器名称”框中输入“#top #nav ul li a:hover”，然后单击“确定”按钮，打开“#top #nav ul li a:hover 的CSS规则定义”对话框，按要求设置CSS样式。11、在“CSS样式”面板的“所有规则”框中双击“#banner”，打开“#banner 的CSS规则定义”对话框，将背景颜色清除，按要求设置背景样式。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果演示：教师演示活动实施过程实训活动：学生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习

12、下一节内容教学后记教学课题任务2 活动1 新闻列表部分布局操作课题类型理论+实作课时安排2上课时间教学目标1.灵活运用所学知识对新闻列表部分进行布局操作教学重点1教学难点1辅助资源课件、多媒体、网络复习引入1.文字导航的制作思路。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求如下图所示，打开任务1中完成的“index.html”文件，完成新闻列表部分的布局操作及左侧部分的制作，完成后以原文件名保存。二、师生讨论案例实现思路1、教师展示案例效果2、分析讨论案例实现思路3、教师小结三、教师演示活动实施过程并让学生完成活动任务1、在Dreamweaver CS6

13、软件中打开“index.html”文件，将“CSS样式”面板切换到“全部”选项卡，在“所有规则”框中双击“#news”，打开“#news 的CSS规则定义”对话框，将背景颜色清除。2、依次单击“插入” “布局对象” “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在开始标签之后”，在第2个下拉列表框中选择“”，在“ID”名框中输入“left”，然后单击“确定”按钮。3、选择“此处显示 id left 的内容”文字，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#news #left

14、 的CSS规则定义”对话框，按要求设置CSS样式，将“此处显示 id left 的内容”文字删除，并在其中插入图片“news-left.jpg”。4、依次单击“插入”-“布局对象”- “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在结束标签之前”，在第2个下拉列表框中选择“”，在“ID”名框中输入“right”，然后单击“确定”按钮。5、选择“此处显示 id right 的内容”文字，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#news #right 的CSS规则定义”对话框

15、，按要求设置CSS样式。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果演示：教师演示活动实施过程实训活动：学生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记教学课题任务2 活动2 制作新闻列表课题类型理论+实作课时安排2上课时间教学目标1.进一步巩固项目列表的使用2.灵活运用所学知识完成新闻列表的制作教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.Div+CSS网页布局思想的运用。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求如下图所示，打开活动1中完成的“index.html”文件，完成新闻列表的制作

16、，完成后以原文件名保存。二、师生讨论案例实现思路1、教师展示案例效果2、分析讨论案例实现思路3、教师小结三、教师演示活动实施过程并让学生完成活动任务1、在Dreamweaver CS6软件中打开“index.html”文件，将“此处显示 id right 的内容”文字删除，输入新闻列表区的标题文字“品牌资讯”。2、选择输入的标题文字“品牌资讯”，将“属性”面板切换到“HTML”选项卡，在“格式”下拉列表框中选择“标题3”。3、按回车键，依次输入如效果图所示的10条新闻标题文字，并为每条新闻标题文字添加空链接，然后选择输入的10条新闻标题文字，在“属性”面板中单击“项目列表”按钮，将其转换为项目

17、列表。4、在标题文字“品牌资讯”中单击鼠标，将光标定位到标题中，在“CSS样式”面板中的“所有规则”列表框中选择“#news #right”，然后单击“CSS样式”面板中的“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#news #right h3 的CSS规则定义”对话框，按要求设置CSS样式。5、在任一新闻标题中单击鼠标，在“标签选择器”中单击“”，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#news #right ul 的CSS规则定义”对话框，按要求设置CSS样式。6、

18、在任一新闻标题中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#news #right ul li a 的CSS规则定义”对话框，按要求设置CSS样式。7、在任一新闻标题中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中的“选择器名称”框中输入“#news #right ul li a:hover”，如所示，然后单击“确定”按钮，打开“#news #right ul li a:hover 的CSS规则定义”对话框，按要求设置CSS样式。布置任务：让学生明确本次课

19、的内容讨论：如何实现该案例效果演示：教师演示活动实施过程实训活动：学生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记教学课题任务3 活动1 制作夏季新品区课题类型理论+实作课时安排2上课时间教学目标1.进一步巩固所学知识2.灵活运用所学知识完成夏季新品区的制作教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.新闻列表的制作思路。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求如下图所示，打开任务2中完成的“index.html”文件，完成夏季新品区的制作，完成后以原文件名保存。二、师生讨论案例实现思路1、教师展示案例

20、效果2、分析讨论案例实现思路3、教师小结三、教师演示活动实施过程并让学生完成活动任务1、在Dreamweaver CS6软件中打开“index.html”文件，将“CSS样式”面板切换到“全部”选项卡，在“所有规则”框中双击“#product”，打开“# product 的CSS规则定义”对话框，将背景颜色清除。2、在夏季新品区布局区域单击鼠标，输入标题文字“夏季新品”，然后按回车键另起一行，输入英文标题文字“Summer”。选择相应的标题文字，在“属性”面板中将标题文字“夏季新品”设置为“标题3”格式，将英文标题文字“Summer”设置为“标题4”格式。3、在英文标题文字“Summer”后面

21、单击鼠标，再按回车键另起一行。依次单击“插入”-“HTML” - “文本对象”- “定义列表”菜单命令，在页面插入定义列表，然后依次单击“插入- “图像”菜单命令，插入“pic-1.jpg”图片，并给图片添加空链接。4、在插入的图片后面单击鼠标，按回车键另起一行，输入产品标题文字“儿童装迪士尼女童T恤2019夏天新款圆领短袖洋气亲子装”，并给输入的产品标题文字添加空链接。再按回车键另起一行，输入“查看详情”，并添加空链接。切换到“代码”视图。5、将“查看详情”行的标签对改为标签对，并分别给dt、dd标签添加class属性值。完成第1个产品相关信息的添加。6、选择标签对中的内容，执行拷贝操作，并

22、修改图片与文字，完成其余5个产品相关信息的添加。7、切换到“设计”视图，在标题文字“夏季新品”中单击鼠标，将光标定位到标题中，在“CSS样式”面板中的“所有规则”列表框中选择“#product”，然后单击“CSS样式”面板中的“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#product h3 的CSS规则定义”对话框，按要求设置CSS样式。8、在英文标题文字“Summer”中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#product h4 的CSS规则定义”对话框，

23、按要求设置CSS样式。9、单击选择任一产品图片，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#product dl .pic a img 的CSS规则定义”对话框，按要求设置CSS样式。10、在任一产品中单击鼠标，在“标签选择器”中单击“”，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#product dl 的CSS规则定义”对话框，按要求设置CSS样式。11、在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中

24、的“选择器名称”框中输入“#product dl.first”，然后单击“确定”按钮，打开“#product dl.first 的CSS规则定义”对话框，按要求设置CSS样式。12、单击第1个产品图片，在“标签选择器”中确认“”被选择，然后在“属性”面板的“类”下拉列表框中选择“first”，给第1个产品的标签添加“first”类属性；用同样的方法给第4个产品的标签添加“first”类属性。13、在第2个产品标题文字中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#product dl .desc a 的CSS规则

25、定义”对话框，按要求设置CSS样式。14、在第2个产品标题文字中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中的“选择器名称”框中输入“#product dl .desc a:hover”，然后单击“确定”按钮，打开“#product dl .desc a:hover 的CSS规则定义”对话框，按要求设置CSS样式。15、在第2个产品的“查看详情”文字中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#product dl .more a 的CSS规则定义”对话

26、框，按要求设置CSS样式。16、在第2个产品的“查看详情”文字中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中的“选择器名称”框中输入“#product dl .more a:hover”，然后单击“确定”按钮，打开“#product dl .more a:hover 的CSS规则定义”对话框，按要求设置CSS样式。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果演示：教师演示活动实施过程实训活动：学生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记教学课题任务3 活动2 制作分类导航区课题类型理论+实

27、作课时安排2上课时间教学目标1.进一步巩固所学知识2.灵活运用所学知识完成分类导航区的制作教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.图文列表的制作思路。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求如下图所示，打开活动1中完成的“index.html”文件，完成分类导航区的制作，完成后以原文件名保存。二、师生讨论案例实现思路1、教师展示案例效果2、分析讨论案例实现思路3、教师小结三、教师演示活动实施过程并让学生完成活动任务1、在Dreamweaver CS6软件中打开“index.html”文件，将“CSS样式”面板切换到“全部”选项卡

28、，在“所有规则”框中双击“#category”，打开“# category 的CSS规则定义”对话框，将背景颜色清除。2、在分类导航区布局区域单击鼠标，输入标题文字“产品分类”，然后按回车键另起一行，输入英文标题文字“Category”。选择相应的标题文字，在“属性”面板中将标题文字“产品分类”设置为“标题3”格式，将英文标题文字“Category”设置为“标题4”格式。3、在英文标题文字“Category”后面单击鼠标，再按回车键另起一行。依次单击“插入”-“HTML” - “文本对象”- “定义列表”菜单命令，在页面插入定义列表，然后依次单击“插入” “图像”菜单命令，插入“cate-1.

29、png”图片，并给图片添加空链接。4、在插入的图片后面单击鼠标，按回车键另起一行，输入文字“女童专区”，并给输入的标题文字添加空链接。然后在“标签选择器”中单击“”，选择标签对中的内容，在“代码”视图中执行拷贝操作，并修改图片与文字，完成其余3个分类信息的添加。5、切换到“设计”视图，参照活动1相关操作完成分类导航区标题文字“产品分类”与英文标题文字“Category”的样式设置。6、在“女童专区”文本中单击鼠标，在“标签选择器”中单击“”，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#category dl 的CSS规则