项目7 使用Div+CSS制作网页.docx
《项目7 使用Div+CSS制作网页.docx》由会员分享,可在线阅读,更多相关《项目7 使用Div+CSS制作网页.docx(19页珍藏版)》请在冰豆网上搜索。
![项目7 使用Div+CSS制作网页.docx](https://file1.bdocx.com/fileroot1/2023-1/9/dfe29c9f-fb0a-4cde-aabe-03612cbcf585/dfe29c9f-fb0a-4cde-aabe-03612cbcf5851.gif)
项目7使用Div+CSS制作网页
广东省×××职业技术学校
学科教案本
TeachingPlan
20年———20 年学年度 学期
The(1st/2na)SemesteroftheAcademicYearfrom20to20
学校(School)
学科(Subject)
年级(Grade)
_______________________________
教师(Teacher)
重庆大学出版社 制
《网页制作项目实训教程》目录
注意:
①按住Ctrl键后单击每个任务即可跳转到对应的教案
②单击
按钮可返回目录
③页面设置参数为:
纸张:
B5
页边距左:
1.5
页边距右:
1.5
项目7 使用Div+CSS制作网页
任务1
活动1使用Div+CSS对网页进行布局
活动2制作导航栏
任务2
活动1新闻列表部分布局操作
活动2制作新闻列表
任务3
活动1制作夏季新品区
活动2制作分类导航区
教学
课题
任务1活动1使用Div+CSS对网页进行布局
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.灵活运用Div+CSS知识对网页进行布局操作
教学
重点
1
教学
难点
1
辅助
资源
课件、多媒体、网络
复习引入
1.背景CSS样式。
2.background属性。
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
一、教师布置活动要求
根据所提供的网站首页效果图,使用Div+CSS完成页面的布局操作,完成后以“index.html”为文件名保存到“task7”文件夹,完成布局的页面效果示意图如下图所示。
二、师生讨论案例实现思路
1、教师展示案例效果
2、分析讨论案例实现思路
3、教师小结
三、教师演示活动实施过程并让学生完成活动任务
1、打开DreamweaverCS6软件并新建一个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、在DreamweaverCS6软件中打开“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#navul的CSS规则定义”对话框,按要求设置CSS样式。
8、在任一输入的文字中单击鼠标,在“标签选择器”中单击“li”,在“CSS样式”面板中单击“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中单击“确定”按钮,打开“#top#navulli的CSS规则定义”对话框,按要求设置CSS样式。
9、在任一输入的文字中单击鼠标,在“CSS样式”面板中单击“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中单击“确定”按钮,打开“#top#navullia的CSS规则定义”对话框,按要求设置CSS样式。
10、在任一输入的文字中单击鼠标,在“CSS样式”面板中单击“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中的“选择器名称”框中输入“#top#navullia:
hover”,然后单击“确定”按钮,打开“#top#navullia:
hover的CSS规则定义”对话框,按要求设置CSS样式。
11、在“CSS样式”面板的“所有规则”框中双击“#banner”,打开“#banner的CSS规则定义”对话框,将背景颜色清除,按要求设置背景样式。
布置任务:
让学生明确本次课的内容
讨论:
如何实现该案例效果
演示:
教师演示活动实施过程
实训活动:
学生练习及点评
作业
布置
填写提交实训报告和实训表格
预习作业:
预习下一节内容
教学
后记
教学
课题
任务2活动1新闻列表部分布局操作
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.灵活运用所学知识对新闻列表部分进行布局操作
教学
重点
1
教学
难点
1
辅助
资源
课件、多媒体、网络
复习引入
1.文字导航的制作思路。
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
一、教师布置活动要求
如下图所示,打开任务1中完成的“index.html”文件,完成新闻列表部分的布局操作及左侧部分的制作,完成后以原文件名保存。
二、师生讨论案例实现思路
1、教师展示案例效果
2、分析讨论案例实现思路
3、教师小结
三、教师演示活动实施过程并让学生完成活动任务
1、在DreamweaverCS6软件中打开“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、在DreamweaverCS6软件中打开“index.html”文件,将“此处显示id"right"的内容”文字删除,输入新闻列表区的标题文字“品牌资讯”。
2、选择输入的标题文字“品牌资讯”,将“属性”面板切换到“HTML”选项卡,在“格式”下拉列表框中选择“标题3”。
3、按回车键,依次输入如效果图所示的10条新闻标题文字,并为每条新闻标题文字添加空链接,然后选择输入的10条新闻标题文字,在“属性”面板中单击“项目列表”按钮,将其转换为项目列表。
4、在标题文字“品牌资讯”中单击鼠标,将光标定位到标题中,在“CSS样式”面板中的“所有规则”列表框中选择“#news#right”,然后单击“CSS样式”面板中的“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中单击“确定”按钮,打开“#news#righth3的CSS规则定义”对话框,按要求设置CSS样式。
5、在任一新闻标题中单击鼠标,在“标签选择器”中单击“
”,在“CSS样式”面板中单击“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中单击“确定”按钮,打开“#news#rightul的CSS规则定义”对话框,按要求设置CSS样式。6、在任一新闻标题中单击鼠标,在“CSS样式”面板中单击“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中单击“确定”按钮,打开“#news#rightullia的CSS规则定义”对话框,按要求设置CSS样式。
7、在任一新闻标题中单击鼠标,在“CSS样式”面板中单击“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中的“选择器名称”框中输入“#news#rightullia:
hover”,如所示,然后单击“确定”按钮,打开“#news#rightullia:
hover的CSS规则定义”对话框,按要求设置CSS样式。
布置任务:
让学生明确本次课的内容
讨论:
如何实现该案例效果
演示:
教师演示活动实施过程
实训活动:
学生练习及点评
作业
布置
填写提交实训报告和实训表格
预习作业:
预习下一节内容
教学
后记
教学
课题
任务3活动1制作夏季新品区
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.进一步巩固所学知识
2.灵活运用所学知识完成夏季新品区的制作
教学
重点
1、2
教学
难点
2
辅助
资源
课件、多媒体、网络
复习引入
1.新闻列表的制作思路。
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
一、教师布置活动要求
如下图所示,打开任务2中完成的“index.html”文件,完成夏季新品区的制作,完成后以原文件名保存。
二、师生讨论案例实现思路
1、教师展示案例效果
2、分析讨论案例实现思路
3、教师小结
三、教师演示活动实施过程并让学生完成活动任务
1、在DreamweaverCS6软件中打开“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规则”对话框中单击“确定”按钮,打开“#producth3的CSS规则定义”对话框,按要求设置CSS样式。
8、在英文标题文字“Summer”中单击鼠标,在“CSS样式”面板中单击“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中单击“确定”按钮,打开“#producth4的CSS规则定义”对话框,按要求设置CSS样式。
9、单击选择任一产品图片,在“CSS样式”面板中单击“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中单击“确定”按钮,打开“#productdl.picaimg的CSS规则定义”对话框,按要求设置CSS样式。
10、在任一产品中单击鼠标,在“标签选择器”中单击“
”,在“CSS样式”面板中单击“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中单击“确定”按钮,打开“#productdl的CSS规则定义”对话框,按要求设置CSS样式。11、在“CSS样式”面板中单击“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中的“选择器名称”框中输入“#productdl.first”,然后单击“确定”按钮,打开“#productdl.first的CSS规则定义”对话框,按要求设置CSS样式。
12、单击第1个产品图片,在“标签选择器”中确认“
”被选择,然后在“属性”面板的“类”下拉列表框中选择“first”,给第1个产品的标签添加“first”类属性;用同样的方法给第4个产品的标签添加“first”类属性。13、在第2个产品标题文字中单击鼠标,在“CSS样式”面板中单击“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中单击“确定”按钮,打开“#productdl.desca的CSS规则定义”对话框,按要求设置CSS样式。
14、在第2个产品标题文字中单击鼠标,在“CSS样式”面板中单击“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中的“选择器名称”框中输入“#productdl.desca:
hover”,然后单击“确定”按钮,打开“#productdl.desca:
hover的CSS规则定义”对话框,按要求设置CSS样式。
15、在第2个产品的“查看详情”文字中单击鼠标,在“CSS样式”面板中单击“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中单击“确定”按钮,打开“#productdl.morea的CSS规则定义”对话框,按要求设置CSS样式。
16、在第2个产品的“查看详情”文字中单击鼠标,在“CSS样式”面板中单击“新建CSS规则”按钮,在打开的“新建CSS规则”对话框中的“选择器名称”框中输入“#productdl.morea:
hover”,然后单击“确定”按钮,打开“#productdl.morea:
hover的CSS规则定义”对话框,按要求设置CSS样式。
布置任务:
让学生明确本次课的内容
讨论:
如何实现该案例效果
演示:
教师演示活动实施过程
实训活动:
学生练习及点评
作业
布置
填写提交实训报告和实训表格
预习作业:
预习下一节内容
教学
后记
教学
课题
任务3活动2制作分类导航区
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.进一步巩固所学知识
2.灵活运用所学知识完成分类导航区的制作
教学
重点
1、2
教学
难点
2
辅助
资源
课件、多媒体、网络
复习引入
1.图文列表的制作思路。
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
一、教师布置活动要求
如下图所示,打开活动1中完成的“index.html”文件,完成分类导航区的制作,完成后以原文件名保存。
二、师生讨论案例实现思路
1、教师展示案例效果
2、分析讨论案例实现思路
3、教师小结
三、教师演示活动实施过程并让学生完成活动任务
1、在DreamweaverCS6软件中打开“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规则”对话框中单击“确定”按钮,打开“#categorydl的CSS规则