《静态网页制作(Dreamweaver)》课程教案首页

Dreamweaver网页设计教案

教师简述本项目单元的重点、难点，让学生有带着任务、有重点跟随老师授课。

1、网站设计流程 2、规划网站目录结构

3、利用HTML基本标签创建网页结构

4、利用浮动或定位设计页面布局（重点和难点） 5、通过CSS样式修饰（重点） 6、进行网站测试

4、本学习单元总体目标（教师总结）

通过本项目单元的学习，学生对阶段只是做一整体实践和应用，让学生感受阶段学习成果的喜悦，为后续知识的学习奠定基础，并提升学习的兴趣和动力。 二、项目实施

教师简述项目单元教学目标和教学内容，明确本项目单元教学重点和难点 教学目标

? 通过“个人主页”真实完整网站首页的制作，对知识进行阶段复习和综合

应用

? 明确网页结构与表现分离的意义 ? 强化盒子模型的应用

? 熟练应用CSS+DIV技术对页面进行布局 ? 能够通过浮动或定位实现页面的布局 ? 培养学生的团队合作意识 教学内容

1、网站设计流程 2、规划网站目录结构

3、利用HTML基本标签创建网页结构

4、利用浮动或定位设计页面布局（重点和难点） 5、通过CSS样式修饰（重点） 6、进行网站测试

（一）工作任务一：设计和制作“个人主页”效果图

5

? 明确本项目单

元的总体学习目标。带着目标和任务学习。 ? 对学习目标形

成一个初步地、大致地、总体的知识轮廓。

新课讲解： 【约65分钟】 1.项目引入思路： 教师利用“个人主页”项目为驱动，进行阶段知识回顾、复习和综合应用。 2.思路指导： 通过“个人主页”项目制作，完成一个网站首页的整个设计流程。 3.任务目标： 熟练“个人主页”首页的设计和创建。

Dreamweaver网页设计教案

【任务背景】

某同学要设计一个“个人主页”，现已由网站策划人员先期分析了网站的目的、

功能定位及内容规划。并根据功能定位先行设计了网站效果图。

? 此部分由于在

【任务要求】

课前已作为课

根据与用户沟通和交流做好的需求分析，设计和制作“个人主页”效果图。

前任务做好了

【任务分析】 前期的准备工采用蓝色主色调，体现客户简洁实用的目标。 作，因此，直接

在ps中实现效【任务实施】

果图的制作。

在PS中设计“个人主页”效果图，具体实现过程不做详解，如下图1所示：

? 时刻保持与教

师的互动。 ? 思路跟教师保

持一致，保证学习效果。

提醒学生出图的方法，注意使用切片工具对大图进行切割。

图1 页面效果图

（二）工作任务二：分析“个人主页”首页整体结构

【任务背景】

某学院计算机技术系要建立本系部网站，现已由网站策划人员先期分析了网站的目的、功能定位及内容规划，并根据功能定位先行设计了网站效果图。

【任务要求】

根据已经收集好的素材及网站规划，进行网站的整体页面布局。

【任务分析】

效果图导出之后，我们就可以使用这些素材在Dreamweaver着手进行布局了，现在的布局技术包括表格布局和Web标准布局，也就是俗称的DIV+CSS布局，本项目我们主要使用Web标准来布局页面。

【任务实施】

(1) 在具体布局之前，首先分析一下页面的构成，目的是明确所需要创建页面的布

局结构，如下图2所示。

6

Dreamweaver网页设计教案

互动提问，整个页面区块如何划分？

教师提醒：合理进行区块划分将有利于后期区块内容得添及样式的的设计和制作。

图2 页面的布局形式

(2) 打开在上一章节中已经创建好的名为grzyWeb的站点。 (3) 规划站点目录结构，建立CSS和images文件夹，将在ps中导出的图片放入

images文件夹。 (4) 创建网站首页，命名为“index.html”，将其保存在站点根目录下。 (5) 创建样式表文件“index.css”，将其保存在站点根目录下的CSS文件夹中。 (6) 将“index.css”和网页文件“index.html”进行了关联。核心代码如下：