网页设计教案.docx

网页设计教案.docx

《网页设计教案.docx》由会员分享，可在线阅读，更多相关《网页设计教案.docx（28页珍藏版）》请在冰豆网上搜索。

网页设计教案

DWCS3

网页设计教案

教材分析：

本课程教材为汪迎春、秦学礼编著清华大学出版社2010年出版的《DreamweaverCS3网页设计实用教程》。

该书是浙江省十一五重点建设教材，采用项目-任务编排，由易到难，内容实而详，配套资料也较全，适合高职高专学生学习。

考虑到学生还要继续学习动态网页设计课程及时间关系，本学期计划学习教材中的前15个任务，原则上每次课（4课时）完成一个任务。

教学采取的主流教学模式是：

成果展示→任务操作→经验扩展

项目1站点欣赏、建立与管理

任务一欣赏与建立站点

【教学分析】

考虑到实训室不能上网，网站欣赏课内只能介绍方法，利用教材的电子素材弥补，并提供URL让学生在课外有重点地去欣赏。

另外，教材本项目部分编排也不尽人意，需要做些改进。

【教学目的】

知识目标：

知道网页的设计工具及DW的安装方法、浏览工具及浏览方法，网站欣赏的要点及其中的知识，DW的基本构成、界面布局及新站点的建立方法。

技能目标：

会用浏览器浏览网站；在欣赏网站主页中能简单地总结其风格；能建立自己的静态网站。

【重点】建立网站

【难点】欣赏网站，理解知识

【教学方法】

讲练结合

【教学准备】

各类网站主页。

教案，PPT课件

一、网页浏览工具

•各种浏览器

IE，搜狗，安全……

根据URL找到网页，按网页中的标记显示内容。

•统一资源定位

URL，格式：

如

网站都指定了首页，所以文件名常省略。

•网页欣赏

欣赏要点：

主题，布局，色彩P7-12

原则：

视觉的对称平衡、对比、凝视和空白

主题要鲜明、实用

结构布局：

Π型，三型，框架，POP，动画

艺术布局：

各种页面元素合理搭配

配色要求整体协调、局部对比

欣赏与保存P2

国内外优秀网站欣赏

蒙牛集团：

海尔集团：

可口可乐：

http:

//www.coca-

百事可乐：

波司登：

七匹狼：

TCL：

不同风格网站示例

经济类网站：

教育类网站：

企业类网站：

儿童类网站：

韩国风格网站：

，http:

//www.ubcare.co.kr/

欧美风格网站：

艺术类网站：

http:

//www.art-

旅游类网站：

时尚类网站：

二、网页编辑工具

1.记事本

网页本质上是文本文件，所以可以用记事本编辑，所以传输很快，所以其中的插入对象是链接的而不是嵌入的（不同于WORD文档和PPT文档）。

用记事本编辑网页：

正文区显示的内容（文字）

把这些标记当“带意义的括号”来理解。

2.FrontPage

这是MS-Office的一个组件。

其风格其它组件一脉相承，使用起来感觉象在使用WORD.

现在我们建文件夹D:

\lan\image并把一些兰花图片放在其中。

在FrontPage下用表格做格式控制工具做一个简单的图文页面。

3.DreamWeaver

Adobe序列，功能更全

象普通程序那样安装和启动P12-15

工作环境初步认识P20-23

标题栏，菜单栏，文档窗口，状态栏

插入工具栏，文档工具栏，

属性面板，面板组（特别关注文件面板）

三、建立新的网站

●建站方法：

站点（菜单）→新建站点（命令）

在打开的对话框中选择基本页操作P3，详细说明在P5-7

●网站设计原则

1．明确建立网站的目标和用户需求

2．总体设计方案主题鲜明

3．网站的版式设计

4．色彩在网页设计中的作用

5．网页形式与内容相统一

6．多媒体功能的利用

●色彩基础

1.色彩的三要素：

色相——名称。

是根据色的光波长划分的。

饱和度——纯净程度。

取决于色中含色成分的比例。

亮度——明暗程度。

在三要素中具有较强的独立性。

2.网页用色：

RGB模式——使用红（Red）、绿（Green）、蓝（Blue）三色。

其它模式，如CMYK模式、索引颜色模式、灰度模式、位图模式、双色调模式，见教材。

网络安全色——当红、绿、蓝颜色数字信号值为0、51、102、153、204、255时构成的颜色组合，它一共有216种。

教学反馈：

任务二网站管理与HTML标签

【教学目的】

知识目标：

初步知道网页文件的分类，管理站点的基本方法，深入一步了解DW的工作环境和HTML语言。

技能目标：

能初步分类网站文件，创建站点相册，运用站点管理器对站点进行文件夹及文件的增、删、改操作。

【重点】管理网站，理解标签

【难点】理解标签

【教学方法】

讲练结合，如果条件不具备就把做法交代清楚（站点相册）。

【教学准备】

教案，PPT课件

一、创建站点相册

●前提：

创建的站点（如“兰苑”）的图像文件夹image中有图像文件，安装了FireWorks。

●步骤：

新建一个空白页面→命令（菜单）>创建站点相册

在弹出的对话框中仿照下页填写并勾选“为每张相片建立导览页面”选项即可。

DW将自动调用Fireworks为指定的文件夹中的所有图像创建一个缩略图和一个较大的图像，然后自动创建一个包含所有缩略图及相应图像链接的主页index.htm文件。

当DreamweaverCS3提示“相册已经建立时”，单击对话框中的“确定”按钮，所有图像的缩略图和图片文件名已经整齐地排列在一个表格中。

单击主页index.htm文档工具栏上的“在浏览器中预览/调试”图标，查看网页在浏览器中的效果。

查看文件面板

站点：

兰宛视图：

本地视图

自动生成一个主页文件index.htm和三个子目录，其中：

\images存放放大图像，

\pages存放页面文件，

\thumbnails存放缩略图。

二、站点管理

●新建文件夹或文件

在Windows下也可以完成这些工作，这里主要是学习在DW下如何做：

1.利用文件面板（右键菜单）

2.利用文件菜单（新建操作）

●删除文件夹或文件

利用键盘、右键菜单或编辑菜单

●重命名文件夹或文件

–“文件”浮动面板中，选择要重命名的文件或文件夹，在窗口中选择“编辑|重命名”

–或选中文件或文件夹或单击鼠标右键，在弹出式菜单中选择“重命名”

–也可点击文件夹或文件的名字，待其变为可编辑状态即可修改名字。

●移动文件夹或文件

“文件”浮动面板中，用鼠标左键点中要移动的文件或文件夹，按住鼠标左键拖动，即可移动文件夹或文件。

●保存HTML文档

应及时保存页面并将页面保存到本地站点。

保存方式有：

–单击菜单栏中的“文件/保存”命令或“文件/另存为”命令。

–单击标准工具栏中的“保存”按钮或“全部保存”按钮。

–按下键盘上的“Ctrl+S”组合键或“Ctrl+Alt+S”组合键。

–单击菜单栏中的“文件/全部保存”命令。

三、网页制作基础

●构成网页的元素

三个最基本的元素：

文字，图片，链接

除此之外，网页的元素还包括动画、音乐、程序等等。

●网页浏览基本原理

客户机—服务器体系：

客户机——需要信息的计算机

服务器——提供信息的计算机

●静态网页和动态网页

静态网页：

由网页制作者已经编辑好的页面。

动态网页：

通过编写网络应用程序实现的页面。

●网页美化工具

图像处理工具：

Fireworks、Photoshop。

动画制作工具：

Flash、Swish。

图标制作工具：

小榕图标编辑器、超级图标。

抓图工具：

HyperSnap、HyperCam

CamtasiaStudio

Dreamweaver、Flash和Fireworks被人们合称为“网页制作三剑客”。

●网页制作的基本步骤

站点规划→素材准备→网页制作→网页测试→上传发布

●超文本有两层含义

1.可以加入图片、声音、动画、影视等内容。

2.可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

●HTML表现多彩风格

1.图片调用：

2.文字格式：

文字

3.页面跳转：

〈AHREF="文件路径/文件名">

4.多媒体效果：

声频，视频

●超文本中的标签

刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。

1.单标签

某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：

　　　　　　<标签名称>

最常用的单标签是
,它表示换行。

另外插入水平线标签

2.双标签

另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。

始标签前加一个斜杠（/）即成为尾标记。

这类标记的语法是：

　　　　　　<标签>内容

其中“内容”部分就是要被这对标记施加作用的部分。

例如你想突出对某段文字的显示，就将此段文字放在一标记中：

　　　　　第一：

3.标签属性

许多单标记和双标记的始标记内可以包含一些属性，其语法是：

　　　<标签名字属性1属性2属性3…>

各属性之间无先后次序，属性也可省略（即取默认值），例如单标记

带一些属性：

在实际的编写中，许多标签和一些属性是结合起来使用的，比如：

文字

文字

教学反馈：

任务三文本的操作

【教学目标】

技能目标：

能运用多种方法在网页中产生文字，能控制文字的格式，能修饰文字，能利用文字建立各种超链接。

知识目标：

通过可视设计与代码对照，进一步熟悉标签及其属性、属性面板中各个项目的含义，了解相对地址和绝对地址的用法。

【重点】网页文本的修饰与利用。

【难点】相对地址，URL，锚点

【教学方法】效果先见，练中认识与掌握。

【教学准备】效果文件N2（lan.htm及其素材文件夹）

1、分发文件：

N2（项目2素材及效果文件夹）

2、呈现效果：

lan.htm

3、介绍步骤：

1st.新建与保存网页（落地生根）

2nd.键入文件标题（title）与网页标题（国兰文化）

3rd.插入日期与直线

4th.复制文本（从国兰文化.doc）

5th.拖入文本（从兰芳入卷.txt）

6th.导入文本（兰香.doc的文本）

7th.查找与替换（将换行标签替换为段落标签，以便用项目列表）

8th.键入段落标题并排版（包括项目列表，不换行空格）

9th.链接文档（拖动目标文档于建立链接处）

10th.插入锚记，建立锚链接

4、实际操作：

按教材的详细步骤说明操作。

任务四图像的操作

【教学目标】

技能目标：

能用多种方法插入图像、设置图像属性，能用图像做背景、导航条，能用图像设置超链接，能实现鼠标经过图像、图片广告的效果。

知识目标：

理解图像操作中的各种术语和操作方法。

【重点】在各种场合用多种方法插入和利用图片

【难点】图片定位与超链接

【教学方法】效果先见，练中认识与掌握。

【教学准备】效果文件N2（lantu.htm及其素材文件夹）

1、分发文件：

N2（项目2素材及效果文件夹）

2、呈现效果：

lantu.htm

3、效果分析

这是在前面制作的基础上加了图片背景、图片导航条，另外还加了三张图片，有的在其上建立了超链接。

4、学生操作：

按教材详细步骤说明操作。

5、归纳拓展

•常用图像格式：

gif（图形交换格式）jpg（联合照片专家组）png（可移植网络图形）

•设置图像属性

名称：

供脚本引用目标：

链接目标显示的窗口类：

CSS样式

•制作图像映射

在图像上定义一个区域— 热点区域Map并为该区域设置链接地址和超链接的打开方式，在“目标”列表框中选择打开的状态。

•图像查看器

用来加载一系列JPEG或SWF图像。

实现不断变换图片的广告效果。

插入记录→媒体→图像查看器

见教材P55-58，操作到了就知道。

【本项目作业】P59-60

任务五用表格布局

【教学目标】

技能目标：

能运用表格合理、美观地布局页面。

知识目标：

理解关于表格的成分、属性、嵌套等各种术语。

【重点】在各种场合用多种方法插入和利用图片

【难点】图片定位与超链接

【教学方法】效果先见，练中认识与掌握。

【教学准备】效果文件N3（table.htm及其素材文件夹）

1、分发文件：

N3（table.htm及其素材文件夹）；展示效果：

2、效果分析

宏观上看，这是一个“三”型布局。

中间又可以分为左右两块，左边为导航栏，右边为正文，都可以再用表格控制格式。

注意新闻中心行：

左、右都是图片，中间用拾色器填充底纹，“新闻中心”四个字是键入的。

3、学生操作：

按教材步骤操作。

4、归纳与拓展

表格组成元素：

插入表格对话框：

页眉即数据标题（tr，th，td），表格用于布局时不要。

表格属性面板：

在表格外框单击，可以选中整个表格

Id——供代码调用的内部名称

左下角是清除列宽、清除行高、以及选择单位的按钮。

为了保持在不同分辨率下的外观结构，父表格的宽度和高度一般使用像素值，而嵌套表格一般使用百分比。

单元格属性面板：

表格的基本组成元素是单元格，单元格组成行或列，再由行与列一起组成完整表格。

如果遇到单元格宽度与列宽冲突时，以单元格宽度为准，但必须保证该行所有单元格宽度之和与表格整体宽度相等。

行、列的属性面板：

将鼠标移至目标行的行首，单击鼠标左键选中该行；将鼠标移至目标列的顶部，单击鼠标左键选中该列。

属性面板自动切换到行（列）状态。

添加行和列、删除行和列、合并/拆分单元格的操作。

布局模式：

在进行网页布局时，经常会在一个布局表格中使用多个布局单元格；也可以使用多个布局表格将页面隔离成多个部分，这样它们就不会相互影响；还可以在现有布局表格中进行布局表格嵌套。

在“布局”模式下绘制表格和绘制单元格变成了各自独立的操作。

布局表格创建后，该区域不能插入内容，必须在表格中创建布局单元格才能插入内容。

扩展表格模式：

嵌套表格过多时，为了方便观察和布局，使用扩展表格模式使表格的编辑更容易。

执行“查看/表格模式/扩展表格模式”命令（快捷键F6），或单击“插入”面板“布局”选项卡下按钮，此时便可以清楚地看出表格的嵌套关系，在“文档”窗口的顶部会出现标有“扩展表格模式”状态条。

任务六Div+CSS布局

【教学目标】

技能目标：

能够利用预设的CSS布局创建页面。

掌握Div的创建与设置、CSS规则设置方法。

知识目标：

理解CSS盒子模式及Div+CSS所体现的表现和内容相分离特性。

【重点】使用Div+CSS方法布局

【难点】理解布局中的术语

【教学方法】效果先见，练中认识与掌握。

【教学准备】效果文件N3（table.htm及其素材文件夹）

1、分发文件：

N3（Divcss.htm及其素材文件夹）；展示效果：

2、效果分析

这是一种分块加定位的思想。

Div：

Division，分块，这里分4块。

CSS：

层叠样式表，定位及样式设置。

盒子模式：

内容，填充，边框，边界

使用Div+CSS方式排版的网页代码简洁，更新方便，下载速度快，能兼容更多的浏览器。

3、工作流程

1st、在新建并保存的页面中插入一个Div作为外部容器，并设置相关CSS规则。

2nd、用四个Div标签布局内部，并分别设置相关CSS规则。

3rd、在内部各Div窗口中插入相应页面元素，完成内容。

4th、调整、保存、预览布局效果。

4、学生操作：

按教材说明操作

5、归纳与拓展

在新建文档对话框如图选择类别和页面类型时有32种不同布局。

注意预览和右下角的进一步设定。

添加自定义布局：

如果希望自定义布局出现在预设布局选项列表中，布局文件扩展名应为.htm，路径应为

AdobeDreamweaverCS3\Configuration\BuiltIn\Layouts

预览图像也应在这个文件夹中，大小为227×193像素。

复制并粘贴这个文件夹下的notes文件夹中的任意一个备注文件，然后修改该副本备注文件为自定义备注文件。

任务七层APDiv布局

【教学目标】

技能目标：

能运用层APDiv及其嵌套和定位技术进行页面布局。

知识目标：

知道APDiv的优势及其属性的含义，层之间的独立或继承关系，层与表格可以相互转换。

【重点】使用Div+CSS方法布局

【难点】理解布局中的术语

【教学方法】效果先见，练中认识与掌握。

【教学准备】效果文件N3（Apdiv.htm及其素材文件夹）

1、分发文件：

N3（Apdiv.htm及其素材文件夹）；展示效果：

2、效果分析

表格是平铺的，而层（Div）可以重叠。

APDiv是绝对定位层的意思。

这一布局技术在定位上具有更大的随意性，能收到更加合理、美观的网页效果。

层标记在其左上方。

这里有7个层，嵌套关系是

1[234（67）5]

3、流程概述（先新建并保存页面）：

外部层→内部子层→内容→调整

4、学生操作

5、归纳拓展

名称——如apDiv1，供代码调用

Z轴——布局技术向空间发展

可见性——子层继承父层

行为设计1：

拖动AP元素

用body对象的加载（onLoad）事件激发动作，操作如下：

插入一个AP元素，单击标记，在行为面板中单击按钮添加行为，从弹出列表中选择“拖动AP元素”命令，弹出拖动AP元素对话框。

在“基本”选项卡中，可以设置是否限制拖动AP元素时可移动范围。

拖动AP元素的“放下目标”位置以及“靠齐距离”属性，该属性与“放下目标”配合使用。

行为设计2：

显示|隐藏AP元素

用鼠标与图片的关系（图片的鼠标事件）激发AP元素的动作：

在页面中插入一张图片，在图片旁边插入一个AP元素，设置为隐藏属性。

选中图片，在行为面板中单击按钮添加行为，从弹出菜单中选择“显示-隐藏元素”命令，弹出显示-隐藏元素对话框。

选择显示，行为面板就增加了一个行为，修改事件为

onMouseOver

再次选择图片，同样增加行为，事件选择

onMouseOut

在对话框中选择隐藏。

任务八框架布局

【教学目标】

技能目标：

能灵活运用框架结构定制不同的页面布局；能在指定区域引入外部文件；初步学会使用内联框架。

知识目标：

理解本单元涉及的各种术语及其机制。

【重点】使用框架集与框架布局

【难点】理解布局中的术语及其机制

【教学方法】效果先见，练中认识与掌握。

【教学准备】效果文件N3（frame.htm及其素材文件夹）

1、分发文件：

N3（frame.htm及其素材文件夹）；展示效果：

2、效果分析

整个版面还是分4块，4个框架。

这一次不同的是，每个框架内是一个单独的页面，所以教材中是先准备这些页面，后设计框架。

3、学生准备框架页：

按P93-94做。

4、创建框架集

上面3块套用一个定制好的模式：

顶部和嵌套的左侧框架。

下面版权信息那一块另行拖出。

学生动手操作……

5、插入框架页面

利用框架属性窗口中的文件夹图标或指向文件图标。

学生操作……

6、保存全部文件

框架集文件单独保存为indexframe.html

7、设置链接与调整页面

实现浏览时单击导航栏图片右边框架内换页面的效果。

学生操作……

8、归纳与拓展

框架集属性：

单击文档窗口中两个框架的共用边界或单击框架集面板最外围的边界，就可以看到框架集的属性面板。

框架属性：

用框架属性面板可以为框架命名、设置边界、为框架指定链接网页等操作。

在设计视图下按住Alt键并单击某个框架。

拆分与删除框架：

看书，操作……

自定义框架集：

p101：

用鼠标拖拽产生框架，很简单。

内联框架：

又称浮动框架。

iFrame是InlineFrame的缩写。

它是一种特殊的“嵌入式框架”页面，可以自由控制窗口大小，可以配合表格随意地在网页中的任何位置插入窗口。

网页设计者不需要单独增加复杂的框架集文档，直接在浏览器窗口中再创建一个窗口来显示网页，而且每个内联框架都可以独立的定义其大小，而不仅仅局限在一个浏览器窗口的大小。

DW没有专门提供浮动框架的可视化制作方案，因此需要在代码窗口书写源代码

width="520"height="600"

frameborder="0"scrolling="auto">

或者执行插入（浮动框架按钮）命令后系统将自动切换到“设计/代码”视图，在代码窗口中设置浮动框架参数。

自适应高度：

单击iFrame调用的页面（灰色矩形部分），切换到代码视图中，在选中代码的任意位置添加高度自适应内联框架大小的代码：

onload="this.height=this.Document.body.scrollheight"

任务九模板和库

【教学目标】

技能目标：

能创建、编辑、修改模板文件；并能运用模板快速生成风格统一的网站。

知识目标：

理解本单元涉及的各种术语及其机制。

【重点】创建与使用模板

【难点】理解术语及其机制

【教学方法】在做中认识与掌握技术。

【教学准备】素材文件夹N3

1、布局思路

从框架布局中得到启发，把静态的页面做成模板，把动态的页面