《网页制作项目实训教程》 教案 项目5 制作框架网页；项目6 使用CSS美化网页效果；项目7 使用Div+CSS制作网页.doc

PAGE

PAGE0

广东省×××职业技术学校

学科教案本

TeachingPlan

20年———20年学年度学期

The(1st/2na)SemesteroftheAcademicYearfrom20to20

________________________________

________________________________

网页制作项目实训教程学校（School）

网页制作项目实训教程

学科（Subject）

_______________________________年级（Grade）

_______________________________

_______________________________教师（Teacher）

_______________________________

重庆大学出版社制

《网页制作项目实训教程》目录

注意：①按住Ctrl键后单击每个任务即可跳转到对应的教案②

注意：

①按住Ctrl键后单击每个任务即可跳转到对应的教案

②单击按钮可返回目录

③页面设置参数为：

纸张：B5

页边距左：1.5

页边距右：1.5

任务1

HYPERLINK活动2使用内嵌样式表美化网页

任务2

HYPERLINK的内容”文字删除，插入“top.jpg”图片，完成顶部导航栏的布局制作。

6、依次单击“插入”-“布局对象”-“Div标签”菜单命令，打开“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在标签之后”，在第2个下拉列表框中选择“divid=”nav””，在“ID”名框中输入“banner”，然后单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中单击“确定”按钮，打开“#banner的CSS规则定义”对话框，按要求设置CSS样式，然后单击“确定”按钮，并将“此处显示idbanner的内容”文字删除，插入“banner.jpg”图片，完成banner部分的布局制作。

7、参照第6步，完成“#main”与“#bottom”两个区域的布局操作，按要求完成相应CSS样式设置，并在“#bottom”中插入“bottom.jpg”图片。

8、依次单击“插入”-“布局对象”-“Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在开始标签之后”，在第2个下拉列表框中选择“divid=”main””，在“ID”名框中输入“left”，然后单击“确定”按钮。

9、选择“此处显示idleft的内容”文字，在“CSS样式”面板中单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中单击“确定”按钮，打开“#main#left的CSS规则定义”对话框，按要求设置CSS样式，将“此处显示idleft的内容”文字删除，并在其中插入图片“con-left.jpg”。

10、依次单击“插入”-“布局对象”-“Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在结束标签之前”，在第2个下拉列表框中选择“divid=”main””，在“ID”名框中输入“right”，然后单击“确定”按钮。

11、选择“此处显示idright的内容”文字，在“CSS样式”面板中单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中单击“确定”按钮，打开“#main#right的CSS规则定义”对话框，按要求设置CSS样式，将“此处显示idright的内容”文字删除，并在其中插入图片“con-right.jpg”。

布置任务：让学生明确本次课的内容

讨论：如何实现该案例效果

阅读知识窗：盒子模型的属性；外边距；内边距

演示：教师演示活动实施过程

实训活动：学生练习及点评

作业

布置

填写提交实训报告和实训表格

预习作业：预习下一节内容

教学

后记

教学

课题

任务3活动2使用Div+CSS制作图片展示页

课题

类型

理论+实作

课时

安排

2

上课

时间

教

学

目

标

1.了解什么是块级元素，什么是行内元素

2.掌握与Div+CSS布局网页相关CSS属性：display、float、clear、overflow。

教学

重点

1、2

教学

难点

2

辅助

资源

课件、多媒体、网络

复习引入

1.盒子模型的相关属性。

2.外边距（margin）与内边距（padding）。

教学

手段

教学过程

师生互动

活动设计

课件

讨论

实作

课件

举例

讨论

课件

实作

一、教师布置活动要求

使用Div+CSS完成图片展示页的制作，如下图所示，完成后以“task