2019-2020学年第二学期《网页制作》线上教学方案
微机教研室 劳敏
一、任教班级：18计算机(3+2)、19计算机
二、学习时间：5—8周
第5周
教学内容：
3.1?制作“关于我们”页面
3.1.1?插入与编辑图像
3.1.2?美化与优化图像
3.1.3?创建鼠标经过图像
3.2?制作“新品展台”网页
3.2.1?添加多媒体插件
3.2.2?添加背景音乐
3.2.3?插入SWF动画
3.2.4?插入FLV视频
3.3?实训——制作“旅游导航”网页
3.3.1?实训目标
3.3.2?专业背景
3.3.3?操作思路
思考及作业：
想一想：
图像的使用在网页中通常起什么作用？怎样才能快速在网页中添加多媒体文件？
练一练：
（1）打开“zhuye-me.html”网页，将提供的“01.jpg”、“02.jpg”和“03.jpg”图像插入到网页中，设置边框为“1”。
（2）在“我的动态”图像下插入“04.jpg”图像，设置对齐方式为“左对齐”，缩小图像尺寸，增加水平边距，然后适当降低图像品质。
（3）分别在“最新留言”图像和“动感相册”图像下插入多媒体插件和SWF动画，其中插件的尺寸为“538×45”。
第6周
教学内容：
4.1?使用表格布局“产品展示”网页
4.1.1?创建表格
4.1.2?调整表格结构
4.1.3?设置表格和单元格属性
4.1.4?在表格中插入内容
4.2?利用AP Div制作千履千寻网站首页
4.2.1?创建AP Div
4.2.2?选择AP Div
4.2.3?设置AP Div尺寸
4.2.4?移动AP Div
4.2.5?对齐AP Div
4.2.6?更改AP Div堆叠顺序
4.2.7?在AP Div插入各种元素
4.3?使用框架制作“公司公告”网页
4.3.1?创建框架集与框架
4.3.2?保存框架集与框架
4.3.3?删除框架
4.3.4?设置框架集与框架属性
4.3.5?制作框架网页
4.4?实训——制作“景点介绍”网页
4.4.1?实训目标
4.4.2?专业背景
4.4.3?操作思路
思考与作业：
想一想：
随着网络的发展，程序语言也在发展，网页布局的方式方法也在改变，如今常用的网页布局方式有哪些？常用的与设计网页相关的编程语言有哪些？
练一练：
（1）创建“top.html”网页，在其中输入并设置“我的心情客栈”文本，并绘制4个AP Div对象，在其中插入提供的4张图片。
（2）创建“bottom.html”网页，插入13×2表格，合并最后一行单元格，并在其中插入1×4嵌套表格，设置表格背景颜色并在各单元格中输入文本。
（3）创建“上方固定”框架网页，在上方的框架中指定“top.html”网页，在下方的框架中指定“bottom.html”网页，适当调整后保存并预览效果。
第7周
教学内容：
5.1?制作“公司地图”网页
5.1.1?认识超链接
5.1.2?创建文本超链接
5.1.3?创建图像超链接
5.1.4?创建外部超链接
5.1.5?创建图像热点超链接
5.2?制作“给我们留言”网页
5.2.1?创建锚点超链接
5.2.2?创建电子邮件超链接
5.2.3?创建文件超链接
5.2.4?创建空链接
5.2.5?插入脚本链接
5.3?实训——制作“精品线路”网页
5.3.1?实训目标
5.3.2?专业背景
5.3.3?操作思路
思考及作业
想一想：
还有没有其他链接方式？怎样可快速提高链接操作的效率？
练一练：
（1）打开“shouye-me.html”网页，将上方的“心情客栈”文本链接到“xqkz-me.html”网页。
（2）利用热点工具将“进入主页>>ENTER”和日志（圆形）分别连接到“zhuye-me.html”和“xqkz-me.html”网页。
（3）利用电子邮件链接将“邮件传情”文本链接到“myworld@sina.com”邮箱。
（4）分别利用各种脚本链接和空链接，实现“设为主页”、“收藏我吧”和“关闭窗口”文本对应的互动功能，其中网址为“www.myworld.net”，收藏名称为“我的世界”。
第8周
教学内容：
6.1?制作“热销精品”网页
6.1.1?认识CSS样式
6.1.2?CSS样式的各种属性设置
6.1.3?创建与应用CSS样式
6.1.4?编辑CSS样式
6.1.5?删除CSS样式
6.2?制作“消费者保障”网页
6.2.1?认识盒子模型
6.2.2?盒子模型的优势
6.2.3?利用CSS+Div布局网页
6.3?实训——制作“驴友攻略”网页
6.3.1?实训目标
6.3.2?专业背景
6.3.3?操作思路
思考及作业：
想一想：
网页中常见的CSS样式有哪些？你能例举出见到过的盒子模型么？盒子模型一般应用在什么地方？
练一练：
（1）打开提供的“rizhi-me.html”网页，插入4×2表格，合并第一行和第二行单元格，合并第一列的第三行和第四行单元格，然后在该单元格中插入4×1的嵌套表格。
（2）依次在表格和嵌套表格的各单元格中输入文本。
（3）通过创建多个类CSS样式为输入的文本应用相应的样式规则。
（4）通过创建复合内容CSS样式为嵌套表格中的超链接文本（空链接）设置访问前后和鼠标指针指向时等文本状态的样式。