一、网页网站教学目标

知识与技能

掌握网站站点建立、设计实训文件管理及基础布局方法；

学会使用Dreamweaver等工具进行网页排版与属性设置。制作

过程与方法

通过案例分析、教材建设教案实践操作，模板培养自主设计网站的网页网站能力；

引导学生运用审美意识优化网页布局与视觉效果。

情感态度

增强网页制作兴趣，设计实训培养团队协作与问题解决能力。制作

二、教材建设教案教学重难点

重点：

站点建立与管理、模板网页布局技术（表格/框架/AP Div）；

难点：色彩搭配、网页网站交互元素设计及响应式布局实现。设计实训

三、制作教学准备

计算机及Dreamweaver CS5等开发工具；

多媒体教室及网络教学平台。教材建设教案

四、模板教学过程

一、导入（5分钟）

通过优秀网站案例展示，引导学生讨论网页功能与设计要素，引出课题。

二、站点建立（10分钟）

1. 打开Dreamweaver，选择“站点”→“新建站点”；

2. 填写站点名称、本地根文件夹等基本信息；

3. 设置自动刷新文件列表功能。

三、网页布局基础（15分钟）

1. 介绍网页布局形式（如“厂”字型、框架布局）；

2. 演示使用表格、框架及AP Div进行页面排版；

3. 学生动手实践基础布局设计。

四、网页元素与属性设置（15分钟）

1. 文字排版：字体、字号、颜色调整；

2. 图片处理：背景图片插入与属性设置；

3. 音频与超链接添加：背景音乐嵌入及链接创建。

五、综合实践（20分钟）

学生根据“多边形面积”主题设计个人网站，包含首页、关于页面及联系页面；

要求：页面布局合理、色彩搭配协调、交互元素完善。

六、总结与反思（5分钟）

回顾今日学习内容，总结设计要点与不足，布置课后作业。

五、教学评价

过程评价：通过课堂表现、小组协作进行；

结果评价：依据网站功能完整性、设计美观度及代码规范性评分。

六、附录

参考资料：；

工具推荐：Photoshop（图片处理）、Dreamweaver（网页制作）。