相片编辑-淘汰赛对阵表

___________________________________________ __________________________________________________ _________________
-可编辑修改-

_________ __________________________________________________ __________________________________________________ _

第1章 网页设计基础
熟记站标、导航条、广告条、按钮等网页构成要素，以及
教学目标与要求
网页、网站 、IP地址、域名、网址等概念；了解网页的本
质和网页的布局类型和HTML文档的基本结构，熟练掌 握
网站建设的基本流程。
教学重点
重点：站标、导航条、广告条、网页、网站、I P地址、域
名、网址等概念，以及网站建设的流程
难点： IP地址、域名、网址，HTML文档的基本结构及其
常见标签
提问、启发、图示、情景教学、案例、课堂讨论
2课时
教学
提示
教学难点
教学方法
教学课时
第1章 网页设计基础

导入课程：大家会输入文字、制作和处理图像、
以提问的方式引入课程
设计动画，如 何把这些作品放到internet中，
让更多的人去查阅和欣赏呢？---DW就可以制
作网 页。
1.网页的构成要素和组成元素
 网页的构成要素：站标、导航条、广告条、
标题栏和按钮；




 网页的组成元素：文字、图片、动画（gif、

flash）、表单（交互功能）、音频、视频、
超链接、表格、框架、导航等。
2.网页相关知识简介
 基本概念：
 网页的本质

 网页、网站、主页、互联网

采用课堂讨论教学法，打开几个典型
的网页让同学们讨论总结构成要素
和组成元素。


-可编辑修改-

_________________ __________________________________________________ ___________________________________________

 动态网页、静态网页
 IP地址、域名、网址（url）、浏览器等
概念



 网页布局
 网页布局的相关概念
 常见的布局类型
 网站管理与网页制作相关软件
 制作和管理网页工具；
 制作和优化网页图像工具；
 制作网页动画工具；
 其中Dreamweaver、 fireworks、
flash这三个软件合称为网页“三
剑客”。
 其他小工具软件。
 HTML语言
 HTML的概念
 HTML文档的基本结构
 几个常见的html标签： html、
head、title、style、script、link 、
meta、body、img、p、font等。
 XHTML语言简介
 脚本语言简介


3.网页的设计理念和配色方案
 网页的设计理念
 色彩的三要素





打开一个搜狐主页 ，保存成不同的类
型，让大家看保存的效果，加深对网
页本质的理解；
先打开一个网 页的源文件，结合网络
常识，详细讲解网页的定义，然后略
讲网站和主页的概念。并提醒同学理
解并记忆这些概念。

以注册和登录邮箱为例，对比讲解动
态网页和静态网页的特点和区别。
以平顶山学院 和搜狐网站的IP地址
与域名为例，简要讲述这两个概念。
通过查看分析知名网站的网址引入< br>url的定义和组成，其它概念略讲。提
醒学生理解并记忆上述概念。

打开一网页（详细讲解网页布局效果
-可编辑修改-

_______ __________________________________________________ __________________________________________________ ___
 网页中的色彩心理与网页表现
 色彩搭配应遵循的原则
4.网站的开发流程
① 网站需求分析
② 设计制作网站页面
③ 空间和域名申请
④ 测试和发布网站
⑤ 网站推广



规划网站

定义站点

的教程）让学生讨论、分析总结布局
类型。


根据学生特点简要讲解ps、flash、fw
等软件在网页设计中的功能。

第一阶段：网站需求分析
准备素材


第二阶段：创建站点，设计制作各级页面


设置页面属性

制作页面









打开搜狐主页的源代码，让学生认识
一下html语言及其结构，然后分别用
记事本和dw创建2个最简单的网页，
让学生细看其源代码，并详细讲解8
个基本标签及其结 构关系，最后根据
时间酌情讲解其它几个常见标签。

第三阶段：申请空间和域名


第四阶段：测试和发布网站
第五阶段：网站推广
5.典型网站分析
 页面结构
 色彩运用
-可编辑修改-

___________________________ __________________________________________________ _________________________________
简要讲解这两个概念，然后 创建一个
网页，复制无缝循环的代码并粘贴到
网页的body标签，让学生了解脚本
语 言的功能。
让学生欣赏插入后的效果，吸引学生
dw的相关代码。
结合上网的经验，让学生总结网页的
设计理念。
色彩的三要素和心理表现学生在上< br>学期的ps课程中学习过，采用提问
法，进行复习；然后打开几个典型网
站，分析其配色 方案，最后总结网页
中色彩运用的原则。


根据设计的先后顺序和学生一 起分
析总结网站的开发流程，并用图加以
解释，重点讲解网站的需求分析，以
加深学生 对重点知识的掌握。




-可编辑修改-

< br>_______________________________________________ __________________________________________________ _____________











采用课堂讨论教学法，打开几个典型
的网页让同学 们讨论总结网站的构
成要素、组成元素、布局结构和配色
方案。
作业布置：
1.察看并对比分析大型网站（如中国网、著名学校网、著名医院网、官
方网、科技网、娱乐休闲运动 网、儿童网、体育网、著名出版社网、cctv
网站、sohu、yahoo、IBM、微软等）的风格 、色彩搭配与布局。
2 .察看的同时下载自己需要的文章、图片、软件等资源。
３.课后习题。
小结：通过提问、启发、图示、情景教学、课堂讨论等教学方法的综合
运用，提高了学生的学习兴趣，从学生的反应看，授课效果很好。

提问
-可编辑修改-

___________________________ __________________________________________________ _________________________________



第2章 Dreamweaver基础知识
熟悉Dreamweaver 8工作界面 ，熟记几个常用的工具按钮
教学目标与要求
和菜单命令；熟练掌握站点的创建步骤，能快速规 范地创建
站点；能够快速创建、打开、保存网页文档；能熟练设置页
面的属性。
教学重点
教学难点
教学方法
教学课时
1.创建站点并组织站点的结构;2. 在站点中创建网页3.页
面的属性设置
HTML基础
举例为主，适当讲授操作要领，提问以测试课题效果。
2课时
教学 提示
抛出问题，引入新课

第2章 Dreamweaver基础知识

我们一贯都是浏览网页，想自己动手做网站吗？
Dreamweaver网页制作工具。
2.1 熟悉Dreamweaver 8工作界面

2.2 网站创建与管理
2.2.1 站点的定义、组成和结构
2.2.2 网页文档与文件夹命名规则
2.2.3创建本地站点的步骤

2.2.4组织站点结构
2.3 网页文档基本操作
新建、保存、预览、打开、关闭
2.4 基本页面属性设置
制定文档标题和边 距、网页背景颜色和背景
图像，为网页设置文本属性、链接属性和跟
踪图像的属性，总结页面的 使用的技巧：
用什么工具做网站？怎样做呢？---

启动dw，详细讲解插入栏 、文档标
签与“文档”工具栏、状态栏的作用，
区分标签检查器、标签选择器、标
记选 择符3个概念及其作用

详细讲解站点的定义、组成、结构，
以及文件和文件夹的命名规则。

演示站点的创建过程和步骤，着重
提出保存和站点文件夹的命名。
详细讲解站点结构的组织方法和原
则。
分别演示这几个操作

通 过dw设计视图分别创建1个网
页，分别演示文档标题和边距、背
景颜色和背景图像、文本和链 接属
性，以及跟踪图像的属性的设置方
法和步骤，帮助学生掌握页面的设
置过程。并总 结页面设置和创建过
程中的一些使用技巧。
-可编辑修改-

___ __________________________________________________ __________________________________________________ _______
作业：习题一第1，2, 3 题
小结：本次课内容操作性很强，经过学生 自己上台操作，发现大多数学生都能创
建并组织好一个站点，还能快速地设置网页的属性，达到了教学目 标的要求。
-可编辑修改-

_____________________ __________________________________________________ _______________________________________

第3章 网页中的基本元素
1.熟练操作网页中的文本；
教学目标与要求
2.熟练插入各种格式的图像并设置其属性；
3.了解图像切片的作用；
4.熟练制作图像切片，并插入到dw中
1.文本对象的插入和格式设置；
教学重点
、PNG和JPEG三种图像格式 的异同点和使用环境；
3.用fireworks制作网页切片的方法；
1.设置文本标题；段落的设置效果；
教学难点
、PNG和JPEG三种图像格式的异同点和使用环境；
eaver 8.0中使用图像的一些基本方法和技巧；
4. 在dreamweaver中插入用fireworks制作的切片
教学方法
教学课时
课堂讲授为辅，多媒体演示为主，适当举例，提问以测试课
题效果，实验式教学。
4课时
第3章网页中的基本元素

复习上节内容：
1．
2．
如何创建站点？
如何站点结构的组织
教学提示
以提问的方式复习
上次课内容


结合WORD，通过
复习的方式，总结
dw中文本的操作；

先 简要演示一下各
种文本符号的插入
方法，然后输入一
首小诗，调整其格
式；接 着复制一篇
3.1网页中文本的操作
３.１.１ 认识文本按钮及属性面板
• 思考题：根据以前所学知识说出文本的编辑和设置属性各
包括几个方面？
３.１.２ 插入文本和对象





将文本（英文、中文、数字）添加到文档中的3种方法。
插入特殊字符
水平线
插入日期：菜单法；插入栏按钮法
对插入的文本也可以执行删除、搜索、替换、检查拼写文章粘贴到dw中；
（文本－检查拼写／shift+f7）等操作。
３.１.３ 设置文本格式
最后导入一篇word
文档；
-可编辑修改-

______________________________________________ __________________________________________________ ______________
字符的样式包括的方面及其设置方法
３.１.４ 设置文本标题
标题的含义与作用
3.１.５ 设置段落效果
1 . 设置段落格式
２ .缩进段落
３．对齐段落 （4种对齐方式）
４.分段与换行的相关操作和区别：
３.１.６创建项目列表
３.２网页图像的运用
３.２.１网页中图像格式简介

先简要讲述一下 文
本格式、标题、段
落的设置的含义和
步骤，然后让学生
走上讲台对上述插< br>入的文本设置相应
的字符格式、标题
级别、段落效果，
并选择个别段落创
建项目列表，以加
深印象。
1. 图像在网页中的作用和网页中常用图像格式有：GIF 、

JPEG 、PNG。
2.三种图像格式的特点和在网页中的使用场合。
在Web页上显示图片之前，通常需要考虑下列三个问题：
３.２.２在网页中使用图像
1.插入图像：
2.插入图像占位符：注意图像占位符的命名规则和作用
3.创建鼠标经过图象（轮换图像）



通过比较法讲解各
图像格式的特点
举例：在文档中插
入各种图像对象，
并设置其格式属
4. 在dw中图像的编辑功能仅适用于GIF 和JPEG 图像格式。
性。
 在属性检面板中编辑图像，上述设置也可通过菜单实
现：修改---图像
 用fireworks优化图像。
５．热点工具的使用和图像热区的添加
６.设置图文混排的效果：
7.制作电子相册：命令——创建网站相册
3.2.3切片在fw中的创建和在dw使用







演示制作图像热区
打开大图片网页时，总是等待很长时间，怎样处理才能 减少图片
和图文混排的效
的下载时间呢？-----做成切片。
果；演示制作电子
1.切片的定义和作用
2.切片在fw中的创建方法和步骤
相册

-可编辑修改-

_______________ __________________________________________________ _____________________________________________
3.在DW中插入Fireworks HTML（切片）的方法和步骤
将Fireworks HTML插入到Dreamweaver中的方法。
以问题的形式引 入
切片的定义和作
方法1：将切片从Fireworks复制到剪贴板上，然后直接粘贴到用。
Dreamweaver文档代码视图中的相应位置处。
方法2：直接将Fireworks HTML插入到Dw中的操作步骤
本内容尽量调整在< br>机房讲解。详细讲
解并演示切片在fw
中制作和在dw中
插入的方法与步
骤。

用比较法总结网页
中出现的视频文件
的格式及其特点，
３ .３网页多媒体的运用

3.3.1在网页中使用视频flash
1.网页中常见的视频文件格式和插入方法；



2.常见的flash文件格式和插入方法；
flash文件（.fla格式）、flash 影片文件（.swf格式）、flash模板
举例讲解视频文件
文件（swt格式）、flas h元素文件（.swc格式）、flash视频文件
的插入方法和属性
（.flv格式）
设置；
用比较法总结网页
中出现的flash文件
的格式及其特点，
重点讲解flash按
钮、flash文本和
flash视频的插入方
法和属性设置 ；

用比较法总结网页
中常见的音频文件
格式及其特点。
举例演 示音频文件
的插入和属性设
置，重点讲解背景
音乐的插入和设
置。



3.3.2在网页中使用音频
添加声音需要考虑的因素：添加的的、文件大小、声音品质和
在不同浏览器中的差异。
1.音频文件的格式和相应的特点：



网页中常见的音频格式有：
midmidi格式：。
wav和aif（aiff）文件
2.在网页中插入音频文件的2种方式：
 链接到音频文件
 嵌入声音文件
3.4dw扩展插件
1.安装扩展插件
2.使用扩展插件
使用扩展插件主要有2个步骤：
-可编辑修改-

_____________________________________________ __________________________________________________ _______________
① 先安装插件

② 然后启动dreamweaver，在相应的位置找到调用扩展的
重点讲解页面过度
命令即可。
3.在“类型”栏中显示扩展的类型含义：
类型
对象
命令
行为
含义
在dw界面的“插入”工具栏调用该扩展插件
在dw的“命令”菜单中调用扩展
在dw的“行为”面板中调用扩展
效果、sou nd、
marquee和滚动链
接的AP元素4个插
件的用法和设置
先演示 这几个常用
扩展插件的安装和
使用方法，然后让
学生上台操作，教
师指点操作 过程和
方法
扩展这本分内容安
排到行为之后讲解
4.常用扩展插件的安装和使用
Page
transitions
有超级链接时，
页过渡（进入
退出）效果

模拟打字 行
为
先把要添加该效果的对象放入AP元素中，
然后在行为面板中找到yaroma t|typewriter
即可实现，文字的打印效果就显示在AP元
素中。 (中打印文字）
对要选定整个页面（即body标签），再在“常
用”插入栏中找到sound按钮即可实现
要选定整个页面（即body标签），再在“常
用”插入栏中找到marquee按钮即可实现
把光标定位在页面的合适位置，然后选择
“插入”栏中的“CN Insert Greeting”按
钮即可实现
把光标定位在页面的合适位置，然后选择
“插入” 栏中的“calander”按钮即可实
现
命
令
要选定整个页面（即bo dy标签），再在命
令菜单中找到该命令即可实现（效果见实例
站点中、 、
）
插入背景音乐 象
对
滚动文字插件 象
Insert

插入问候语

对
象
对
象
-可编辑修改- < /p>

________________________________________ __________________________________________________ ____________________
Persistent
layers
滚动链接的AP
元素
先把要添加该效果的对象放入AP元素中，
行
为
然后在行为面板中找到ribbers zeewolde|
Persistent layers即可实现，一般用来显示
广告信息。（ 中的”送给你
了“）
作业：
1 . 填空题
（1）使用属性检查器或【文本】菜单中的选项可以设置或更改所选文本的< br>字体特性。可以设置字体______ ______（如粗体或斜体）和______。
（2）若要插入更多的特殊字符，请选择______ | ______ | ______或在______
栏中选择______图标，选择一个字符，然后单击【确定】。
（3）在计算机领域中，图像分为________和________2大类。
（4）GIF图像采用的是________压缩格式。
2 . 选择题
（1）在网页中连续输入空格的方法是_______。
A．连续按空格键

B．按下Ctrl键再连续按空格键
C．转换到中文的全角状态下连续按空格键
D．按下Shift键再连续按空格键
（2）网页通常可以支持的图像格式有___________。
A．GIF B．BMP C．AVI
D．PSD E．PNG F．JPEG。
3.简答题
（1）网页中常用的图像格式有哪些？各有什么特点？如果在网页中添加动
画格式的浮动广告，采用何种格式？为什么？电子相册，应该用哪种格式
最好？
(2)如何创建鼠标变换图像和图像热点？
4.操作题：
搜集自己的喜爱的图片，制作一个电子相册。
小结：
本章内容较多，但交简单，需要边讲解边 对比总结，通过对比总结
和学生上台操作演示，从学生上机的作业来看，授课效果很好。



-可编辑修改-

_________________ __________________________________________________ ___________________________________________

第4章 使用表格与布局表格布局网页
1.了解表格和布局表格在网页布局中的作用；
2.掌握表格和布局表格的插入方法和基本编辑方法；
教学目标与要求 3.掌握表格和布局表格、单元格和布局单元格的属性设置；
4.通过对表格和布局表格的学习，提高学生学习网页制作的兴
趣，增强学生的审美观
教学重点
1． 表格的插入方法、基本编辑方法与应用；
2． 布局表格和布局单元格的绘制方法、属性设置与应用
1.表格和单元格的属性设置与应用；
2.布局表格和布局单元格的绘制与属性设置
方
课
法 多媒体演示，案例教学，任务驱动，引导教学；提问式教学。
时 2学时
教学提示
展示一个布局合理、美观
的网页，激起学生的学习
兴趣。


简要讲解并3种表格模
式的作用，重点演示不同
模式下按钮的使用






回顾word和excel中讲
过的有 关表格的概念和
基本操作，引入dw中表
格的概念和基本操作。重
教学难点
教
教
学
学
第4章 使用表格与布局表格布局网页
用表格 控制文字、图片、动化等对象的位置，使网页的布局
紧凑又整齐美观。常用的页面设计布局类型有：表格 、布局
表格和AP元素三种，本章着重讲解如何使用表格和布局表
格布局页面。
4.1.表格模式
中表格的3种模式
2.模式切换的操作方式：
查看 --表格模式---标准模式布局模式表格扩展模式。
3.模式的区别与注意事项：
 只有在“设计”视图中才可切换到“布局”模式；
 在不同模式下，工具栏的各个按钮作用不同；
 在布局模式中不能像布局表格的空白区域插入内容，
只能创建布局单元格，布局单元格才是 承载具体内容
的容器。
4.2使用表格布局网页
1．表格的作用
-可编辑修改-

___________________________ __________________________________________________ _________________________________
2.表格的组成部分
表格的行、列、单元格、边距、间距、边框
3.表格的标记
