资源简介 教学 课题 任务1 活动1 使用Div+CSS对网页进行布局课题 类型 理论+实作 课时 安排 2 上课 时间教 学 目 标 1.灵活运用Div+CSS知识对网页进行布局操作教学 重点 1 教学 难点 1辅助 资源 课件、多媒体、网络复习引入 1.背景CSS样式。 2.background属性。教学 手段 教学过程 师生互动 活动设计课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 根据所提供的网站首页效果图，使用Div+CSS完成页面的布局操作，完成后以“index.html”为文件名保存到“task7”文件夹，完成布局的页面效果示意图如下图所示。 二、师生讨论案例实现思路 1、教师展示案例效果 2、分析讨论案例实现思路 3、教师小结 三、教师演示活动实施过程并让学生完成活动任务 1、打开Dreamweaver CS6软件并新建一个HTML文档，将新建的HTML文档切换至“设计”视图模式，并以“index.html”为文件名保存到“task7”文件夹根目录。在“文档工具栏”中的“标题”文本框中，将“无标题文档”更改为“Ann儿童服装官方网站”。 2、打开“CSS样式”面板，在“CSS样式”面板中单击“新建CSS规则”按钮，打开“新建CSS规则”对话框，在“选择器类型”下拉列表框中选择“标签”，在“选择器名称”框中将“body”改为“*”，在“规则定义”下拉列表框中选择“新建样式表文件”，然后单击“确定”按钮，在弹出的另存为对话框中将样式表文件以“style.css”为文件名保存到“task7/css”目录下。 3、在弹出的“* 的CSS规则定义”对话框中，按要求设置字体、字体大小及字体颜色；并将margin与padding的值设置为0。 4、依次单击“插入”->“布局对象”-> “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”下拉列表框中选择“在插入点”，在“ID”框中输入“top”，然后单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框“规则定义”下拉列表框中选择“style.css”，然后单击“确定”按钮，打开“#top 的CSS规则定义”对话框。 5、在对话框中，设置“背景”选项卡中设置背景颜色为蓝色（#00CCFF），在“方框”选择卡中，按要求设置相关属性值，然后单击“确定”按钮，并将“此处显示 id "top" 的内容”文字删除，完成页头的布局操作。 6、依次单击“插入”-> “布局对象”-> “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在标签之后”，在第2个下拉列表框中选择“”，在“ID”名框中输入“banner”，其余参照4-5步操作，完成banner与其他部分的布局。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 演示：教师演示活动实施过程 实训活动：学生练习及点评作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容教学 后记教学 课题 任务1 活动2 制作导航栏课题 类型 理论+实作 课时 安排 2 上课 时间教 学 目 标 1.进一步巩固项目列表的使用 2.灵活运用所学知识完成导航栏的制作教学 重点 1、2 教学 难点 2辅助 资源 课件、多媒体、网络复习引入 1.Div+CSS网页布局思想的运用。教学 手段 教学过程 师生互动 活动设计课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 如下图所示，打开活动1中完成的“index.html”文件，完成导航栏及页头部分的制作，完成后以原文件名保存。 二、师生讨论案例实现思路 1、教师展示案例效果 2、分析讨论案例实现思路 3、教师小结 三、教师演示活动实施过程并让学生完成活动任务 1、在Dreamweaver CS6软件中打开“index.html”文件，在“CSS样式”面板中单击“全部”按钮，在“所有规则”框中双击“#top”，打开“#top 的CSS规则定义”对话框，将背景颜色清除，并设置下边框样式。 2、依次单击“插入”->“布局对象”-> “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在开始标签之后”，在第2个下拉列表框中选择“”，在“ID”名框中输入“nav”，然后单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中单击“确定”按钮，打开“#nav 的CSS规则定义”对话框，按要求设置CSS样式。 3、将“此处显示 id "nav" 的内容”文字删除，然后依次单击“插入”-> “布局对象”-> “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在开始标签之后”，在第2个下拉列表框中选择“”，在“类”名框中输入“logo”，然后单击“确定”按钮。 4、选择“此处显示 class "logo" 的内容”文字，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#top #nav .logo 的CSS规则定义”对话框，按要求设置CSS样式，将“此处显示 class "logo" 的内容”文字删除，并在其中插入Logo图片“logo.png”。 5、在logo区域的后面单击鼠标，将光标定位到logo区域的后面，输入“网站首页”文字，然后按回车键，输入“关于我们”，按同样方法，依次输入“产品中心”、“店铺展示”、“品牌资讯”、“加盟中心”。 6、选择刚刚输入的文字，在“属性”面板中单击“HTML”按钮，切换到“HTML”选项卡，然后单击“项目列表”按钮，将选择的文字转换为项目列表，并为输入的文字分别加空链接。 7、在任一输入的文字中单击鼠标，在“标签选择器”中单击“ul”，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#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、在任一输入的文字中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中的“选择器名称”框中输入“#top #nav ul li a:hover”，然后单击“确定”按钮，打开“#top #nav ul li a:hover 的CSS规则定义”对话框，按要求设置CSS样式。 11、在“CSS样式”面板的“所有规则”框中双击“#banner”，打开“#banner 的CSS规则定义”对话框，将背景颜色清除，按要求设置背景样式。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 演示：教师演示活动实施过程 实训活动：学生练习及点评作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容教学 后记教学 课题 任务2 活动1 新闻列表部分布局操作课题 类型 理论+实作 课时 安排 2 上课 时间教 学 目 标 1.灵活运用所学知识对新闻列表部分进行布局操作教学 重点 1 教学 难点 1辅助 资源 课件、多媒体、网络复习引入 1.文字导航的制作思路。教学 手段 教学过程 师生互动 活动设计课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 如下图所示，打开任务1中完成的“index.html”文件，完成新闻列表部分的布局操作及左侧部分的制作，完成后以原文件名保存。 二、师生讨论案例实现思路 1、教师展示案例效果 2、分析讨论案例实现思路 3、教师小结 三、教师演示活动实施过程并让学生完成活动任务 1、在Dreamweaver CS6软件中打开“index.html”文件，将“CSS样式”面板切换到“全部”选项卡，在“所有规则”框中双击“#news”，打开“#news 的CSS规则定义”对话框，将背景颜色清除。 2、依次单击“插入”“布局对象”“Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在开始标签之后”，在第2个下拉列表框中选择“”，在“ID”名框中输入“left”，然后单击“确定”按钮。 3、选择“此处显示 id "left" 的内容”文字，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#news #left 的CSS规则定义”对话框，按要求设置CSS样式，将“此处显示 id "left" 的内容”文字删除，并在其中插入图片“news-left.jpg”。 4、依次单击“插入”->“布局对象”-> “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在结束标签之前”，在第2个下拉列表框中选择“”，在“ID”名框中输入“right”，然后单击“确定”按钮。 5、选择“此处显示 id "right" 的内容”文字，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#news #right 的CSS规则定义”对话框，按要求设置CSS样式。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 演示：教师演示活动实施过程 实训活动：学生练习及点评作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容教学 后记教学 课题 任务2 活动2 制作新闻列表课题 类型 理论+实作 课时 安排 2 上课 时间教 学 目 标 1.进一步巩固项目列表的使用 2.灵活运用所学知识完成新闻列表的制作教学 重点 1、2 教学 难点 2辅助 资源 课件、多媒体、网络复习引入 1.Div+CSS网页布局思想的运用。教学 手段 教学过程 师生互动 活动设计课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 如下图所示，打开活动1中完成的“index.html”文件，完成新闻列表的制作，完成后以原文件名保存。 二、师生讨论案例实现思路 1、教师展示案例效果 2、分析讨论案例实现思路 3、教师小结 三、教师演示活动实施过程并让学生完成活动任务 1、在Dreamweaver CS6软件中打开“index.html”文件，将“此处显示 id "right" 的内容”文字删除，输入新闻列表区的标题文字“品牌资讯”。 2、选择输入的标题文字“品牌资讯”，将“属性”面板切换到“HTML”选项卡，在“格式”下拉列表框中选择“标题3”。 3、按回车键，依次输入如效果图所示的10条新闻标题文字，并为每条新闻标题文字添加空链接，然后选择输入的10条新闻标题文字，在“属性”面板中单击“项目列表”按钮，将其转换为项目列表。 4、在标题文字“品牌资讯”中单击鼠标，将光标定位到标题中，在“CSS样式”面板中的“所有规则”列表框中选择“#news #right”，然后单击“CSS样式”面板中的“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#news #right h3 的CSS规则定义”对话框，按要求设置CSS样式。 5、在任一新闻标题中单击鼠标，在“标签选择器”中单击“”，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#news #right ul 的CSS规则定义”对话框，按要求设置CSS样式。 6、在任一新闻标题中单击鼠标，在“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样式。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 演示：教师演示活动实施过程 实训活动：学生练习及点评作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容教学 后记教学 课题 任务3 活动1 制作夏季新品区课题 类型 理论+实作 课时 安排 2 上课 时间教 学 目 标 1.进一步巩固所学知识 2.灵活运用所学知识完成夏季新品区的制作教学 重点 1、2 教学 难点 2辅助 资源 课件、多媒体、网络复习引入 1.新闻列表的制作思路。教学 手段 教学过程 师生互动 活动设计课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 如下图所示，打开任务2中完成的“index.html”文件，完成夏季新品区的制作，完成后以原文件名保存。 二、师生讨论案例实现思路 1、教师展示案例效果 2、分析讨论案例实现思路 3、教师小结 三、教师演示活动实施过程并让学生完成活动任务 1、在Dreamweaver CS6软件中打开“index.html”文件，将“CSS样式”面板切换到“全部”选项卡，在“所有规则”框中双击“#product”，打开“# product 的CSS规则定义”对话框，将背景颜色清除。 2、在夏季新品区布局区域单击鼠标，输入标题文字“夏季新品”，然后按回车键另起一行，输入英文标题文字“Summer”。选择相应的标题文字，在“属性”面板中将标题文字“夏季新品”设置为“标题3”格式，将英文标题文字“Summer”设置为“标题4”格式。 3、在英文标题文字“Summer”后面单击鼠标，再按回车键另起一行。依次单击“插入”->“HTML” -> “文本对象”-> “定义列表”菜单命令，在页面插入定义列表，然后依次单击“插入-> “图像”菜单命令，插入“pic-1.jpg”图片，并给图片添加空链接。 4、在插入的图片后面单击鼠标，按回车键另起一行，输入产品标题文字“儿童装迪士尼女童T恤2019夏天新款圆领短袖洋气亲子装”，并给输入的产品标题文字添加空链接。再按回车键另起一行，输入“查看详情”，并添加空链接。切换到“代码”视图。 5、将“查看详情”行的标签对改为标签对，并分别给dt、dd标签添加class属性值。完成第1个产品相关信息的添加。 6、选择标签对中的内容，执行拷贝操作，并修改图片与文字，完成其余5个产品相关信息的添加。 7、切换到“设计”视图，在标题文字“夏季新品”中单击鼠标，将光标定位到标题中，在“CSS样式”面板中的“所有规则”列表框中选择“#product”，然后单击“CSS样式”面板中的“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#product h3 的CSS规则定义”对话框，按要求设置CSS样式。 8、在英文标题文字“Summer”中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#product h4 的CSS规则定义”对话框，按要求设置CSS样式。 9、单击选择任一产品图片，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#product dl .pic a img 的CSS规则定义”对话框，按要求设置CSS样式。 10、在任一产品中单击鼠标，在“标签选择器”中单击“”，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#product dl 的CSS规则定义”对话框，按要求设置CSS样式。 11、在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中的“选择器名称”框中输入“#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规则定义”对话框，按要求设置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规则定义”对话框，按要求设置CSS样式。 16、在第2个产品的“查看详情”文字中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中的“选择器名称”框中输入“#product dl .more a:hover”，然后单击“确定”按钮，打开“#product dl .more a:hover 的CSS规则定义”对话框，按要求设置CSS样式。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 演示：教师演示活动实施过程 实训活动：学生练习及点评作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容教学 后记教学 课题 任务3 活动2 制作分类导航区课题 类型 理论+实作 课时 安排 2 上课 时间教 学 目 标 1.进一步巩固所学知识 2.灵活运用所学知识完成分类导航区的制作教学 重点 1、2 教学 难点 2辅助 资源 课件、多媒体、网络复习引入 1.图文列表的制作思路。教学 手段 教学过程 师生互动 活动设计课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 如下图所示，打开活动1中完成的“index.html”文件，完成分类导航区的制作，完成后以原文件名保存。 二、师生讨论案例实现思路 1、教师展示案例效果 2、分析讨论案例实现思路 3、教师小结 三、教师演示活动实施过程并让学生完成活动任务 1、在Dreamweaver CS6软件中打开“index.html”文件，将“CSS样式”面板切换到“全部”选项卡，在“所有规则”框中双击“#category”，打开“# category 的CSS规则定义”对话框，将背景颜色清除。 2、在分类导航区布局区域单击鼠标，输入标题文字“产品分类”，然后按回车键另起一行，输入英文标题文字“Category”。选择相应的标题文字，在“属性”面板中将标题文字“产品分类”设置为“标题3”格式，将英文标题文字“Category”设置为“标题4”格式。 3、在英文标题文字“Category”后面单击鼠标，再按回车键另起一行。依次单击“插入”->“HTML” -> “文本对象”-> “定义列表”菜单命令，在页面插入定义列表，然后依次单击“插入”“图像”菜单命令，插入“cate-1.png”图片，并给图片添加空链接。 4、在插入的图片后面单击鼠标，按回车键另起一行，输入文字“女童专区”，并给输入的标题文字添加空链接。然后在“标签选择器”中单击“”，选择标签对中的内容，在“代码”视图中执行拷贝操作，并修改图片与文字，完成其余3个分类信息的添加。 5、切换到“设计”视图，参照活动1相关操作完成分类导航区标题文字“产品分类”与英文标题文字“Category”的样式设置。 6、在“女童专区”文本中单击鼠标，在“标签选择器”中单击“”，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#category dl 的CSS规则定义”对话框，按要求设置CSS样式。 7、在“女童专区”文本中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#category dl dd a 的CSS规则定义”对话框，按要求设置CSS样式。 8、在“女童专区”文本中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中的“选择器名称”框中输入“#category dl dd a:hover”，然后单击“确定”按钮，打开“#category dl dd a:hover 的CSS规则定义”对话框，如图 7 50 A所示设置CSS样式。 9、在“CSS样式”面板中“所有规则”框中双击“#bottom”，打开“# bottom 的CSS规则定义”对话框，将背景颜色清除。按要求设置上边框样式。 10、依次单击“插入”-> “布局对象”-> “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在开始标签之后”，在第2个下拉列表框中选择“”，在“类”名框中输入“box”，然后单击“确定”按钮。 11、选择“此处显示 class "box" 的内容”文字并删除，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#bottom .box 的CSS规则定义”对话框，按要求设置CSS样式，将“此处显示 class "box" 的内容”文字删除，并参照效果图所示，输入页面底部的版权信息（注意：输入完第1行文字后按Shift + Enter键换行，不要直接按Enter键换行），并为“EkeCMS”与“”文字添加空链接。 12、在“EkeCMS”文本中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#bottom .box a 的CSS规则定义”对话框，按要求设置CSS样式。 13、在“EkeCMS”文本中单击鼠标，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中的“选择器名称”框中输入“#bottom .box a:hover”，然后单击“确定”按钮，打开“#bottom .box a:hover 的CSS规则定义”对话框，按要求设置CSS样式。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 演示：教师演示活动实施过程 实训活动：学生练习及点评作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容教学 后记 展开更多...... 收起↑ 资源预览