电子教案·《网页制作与设计教程(第二版)》.ppt

1、网页制作与设计教程网页制作与设计教程 第1章 网站设计 网站设计是一个很大的课题。本章将网页设计的软件透明化，从网站的主题、结构、风格、布局等讲述一个网站的制作构思。这是从一个最大的范围去讲述网站设计这个主题的。教学重点与难点教学重点与难点网站的目录结构网站的连接结构网站创意网站布局1.1 定位网站的主题和名称 一、题材的选择 美国个人电脑杂志（PC Magazine评出的2001年度排名前100位的全美知名网站的十类题材，这对于读者进行网站设计，也许有一些参考价值。第一类：网上求职 第二类：网上聊天/即时信息/ICQ 第三类：网站社区/讨论邮件列表 第四类：计算机技术 第五类：网页/网站开发

2、 第六类：娱乐网站 第七类：旅行 第八类：参考/资讯 第九类：家庭/教育 第十类：生活/时尚 在选择题材时，可从下面几个方面进行考虑：1主题要小而精 定位要小，内容要精。2题材最好是自己擅长或者喜爱的内容3题材不要太滥或者目标太高 二、网站名称的选择 一般建议按以下规则取名：1名称要正气2名称要易记3名称要有特色 名称平实可以接受，但如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。在体现网站主题的同时，要有这画龙点睛之笔。1.2 定位网站的CI形象 CI（Corporate Identity）是借用广告词语，意思是通过视觉来统一企业的形象。1.设计网站的标志（logo）2.

3、设计网站的标准色彩3.设计网站的标准字体4.设计网站的宣传标语1.3 确定网站的栏目和版块 一般的网站栏目安排要注意以下几个方面：1一定记住要紧扣主题2设一个最近更新或网站指南栏目3设定一个可以双向交流的栏目4设一个下载栏目或常见问题回答栏目 栏目实质是一个网站的大纲索引，索引应该将网站的主题明确显示出来。在指定栏目的时候，要仔细考虑，合理安排。划分栏目需要注意的是：（1）尽可能将网站最有价值的内容列在栏目上。（2）尽可能方便访问者的浏览和查询。（3）尽可能删除与主题无关的栏目。1.4 确定网站的目录结构和链接结构一、网站的目录结构 建立目录结构的一些建议：1不要将所有文件都存放在根目录下2按

4、栏目内容建立子目录 在设置网站的目录结构时，需要注意的问题有：（1）不要使用中文名字的目录名。（2）不要使用过长的目录名。（3）尽量使用意义明确的目录名，尽量做到“见名知意”。（4）目录的层次不要太多，建议不要超过3层。二、网站的链接结构 一般情况下，建立网站的链接结构有以下两种基本方式：1树状链接结构2星状链接结构 链接结构的设计，在实际的网页制作中是非常重要的一环，采用什么样的链接结构将直接影响到版面的布局。1.5 确定网站的整体风格和创意设计一、网站风格 风格是抽象的，是指站点的整体形象给浏览者的感受。风格是独特的 风格是有人性的如何树立网站风格？（1）要肯定风格是建立在有价值内容之上的

5、。一个网站有风格而没有内容，就像绣花枕头一包草，像一个性格傲慢但目不识丁的人。所以首先必须保证内容的质量和价值。（2）要彻底搞清楚自己希望站点给人的印象是什么。（3）在明确自己的网站印象后，开始努力建立和加强这种印象。二、网站创意 创意（idea）是网站生存的关键。1创意是传达信息的一种特别方式2创意是将现有的要素重新组合 创意的目的是更好地宣传推广网站。如果创意很好却对网站发展毫无意义，就像给奶牛穿高跟鞋，那么宁可放弃这个创意。1.6 首页设计 设计好一个首页，一般的步骤是：（1）确定首页的功能模块。包括：网站名称（logo）、主菜单（menu）、新闻（whats new）、搜索（searc

6、h）、友情链接（links）、邮件列表（maillist）、计数器（count）、版权（copyright）（2）设计首页的版面。（3）处理技术上的细节。1.7 版面布局 版面布局也是一个创意的问题，但要比站点整体的创意容易，有规律。版面布局一般可分为以下步骤：1草案2粗略布局3定案1.8 网页色彩搭配 通常的做法是：主要内容文字用非彩色（黑色），边框、背景、图片用彩色。这样页面整体不单调，看主要内容也不会眼花。在网页配色中，要注意的是：不要将所有颜色都用到，尽最控制在三种色彩以内。背景和前文的对比尽最要大，绝对不要用花纹繁复的图案作背景。第2章 网页文件的规划与创意 本章探讨在制作网页之前，

7、我们如何进行网页文件的规划与创意。为了提高网页的视觉吸引力，有效地传达信息，给人以审美感受，网页文件的创意非常重要。只有做好网页文件的规划与创意，才能很好地组织起丰富的网页素材以实现网页设计的目标。教学重点与难点教学重点与难点网页文件的规划网页的创意设计网页的制作技巧2.1 网页文件的规划 一、网页文件的种类（1）公司、单位信息发布（2）出版物，即电子报刊（3）个人主页（4）在线购物站点（5）专题介绍（6）实用信息服务二、网页文件的规划 网页文件的规划也就是网页文件的内容组织和结构设计。合理的结构设计对于网页文件的规划是至关重要的。（1）分级结构（2）线性结构（3）Web结构三、网页文件的设计

8、原则1 总体设计2主题鲜明、结构合理3组织网页4设计首页的考虑 首页（Homepage）作为网页文件的第一页，在整个网页文件中具有举足轻重的作用。5网页设计的标准 2.2 网页的创意设计 网页的创意设计一般应遵循以下两个原则：（1）依据信息内容的意义和结构进行情节化、理性化的统调布局和必要的图像符号化处理。（2）网页的创意设计还必须重视“形象思维”的情感象征意义的传达，以有别于知识性思考形式审美结构的营造。一、网页创意设计的意义、功能和目的 网页创意设计是否成功，除了其内容因素外，首先要看其在视觉上能否引人注目。网页的创意设计包括文字排列方向、字群聚散组合，字体大小风格的选择，图片的分布及色彩

9、与空白的经营，不仅追求网页形式的变化，更重视各视觉元素的不同形式和构成能给人在感情上造成不同的心理感受，并体现不同的主题。二、网页创意设计的构成要素及其作用1标题 标题是表达信息主题的短句，标题有主标题与子标题之分。2标语 标语是具有韵味的意义完整的句子。3正文4网页名称5标志6插图 将所传达的信息内容赋以视觉化的造型称为插图。7图标8背景9动画 动画不仅能增添网页的视觉趣味效果，同时，也可以用来进一步突出网页和信息内容的主题和风格。三、网页创意设计的原理和准则 进行网页的创意设计时，应遵循以下几条构成原则：（1）内容与形式表现必须统一和有序，形式表现必须服从内容要求，在造型上各构成要素规格化

10、的设计样式要统一。（2）必须考虑网页上各构成要素之间的视觉流程，能自然而有序地达到信息诉求重点的位置，突出主题。（3）注意保护网页在视觉上的相对均衡感，不论是正常的均衡或是异常的均衡，均应有相应的均衡和律动感，使其在网页上得到正确的配置，否则会失去必要的安定感。（4）突出主题要素。（5）注意网页设计中的空白处理。（6）注重整体的对比因素。（7）在视觉上着力强调网页的诉求重点。（8）注意提高网页信息内容的视读性。（9）创造一定的韵律感。它反映在网页设计中利用有力的线条、形体及色彩形成一种有节奏性的律动感，能引导人的视觉以一种流畅而有停顿的方式运动。既有视觉的连续性又有间歇性，使人能够抑扬起落地浏

11、览整个网页，阅读时感到轻松而又富于韵味。四、网页创意设计的形式法则和表现手法1视觉流程2点、线、面3形状间的组合和构成关系4形状与空间关系5构架与空间6节奏与韵律7对比，调和与统一8装饰与趣味9特异2.3 网页的创作步骤一、网页的准备1确定主题与设计风格 每一类网页都有其特定的目的和独特的风格。2资料的收集与整理 网页中最常见的问题是不能有足够的素材来体现制作者的理念。二、网页的制作 网页的制作分为六个部分：1标题2文字3图片4背景5特殊效果6网页排版2.4 网页制作基础 一、设计前的考虑因素1总体规划2网站主题3用户优先 最高的行动准则就是“用户优先”。没有用户去光顾，任何主页都没有意义。4

12、响应时间5内容第一二、设计过程的考虑因素1主页的特征2主页设计元素3代表性的页面4分类 5交互性6链接7长文件处理8避免滥用技术9及时地维护与更新2.5 网页制作常用工具简介1.FrontPage 20002.Dreamweaver3.Flash4.其他工具和设计技术 包括：Fireworks、Photoshop等处理图象的软件，以及HTML、JavaScript、VBScript、ASP、CSS、PHP和XML等语言环境和设计技术第3章 网页设计语言HTML HTML是网页制作的一种规范、一种标准。本章介绍了用HTML制作网页的各种标记符的设置方法，包括网页数据的编辑与格式化、在网页中使用超

13、链接和插入图片、网页中的表格设计以及表格与文字的混排等。教学重点与难点教学重点与难点在网页中使用超链接与图片的编排列表的使用表格与文字的混排3.1 HTML概述 HTML（HyperText Markup Language）超文本标记语言，几乎所有的网页都是以HTML格式书写的。HTML以标识符来标识、排列各对象。标识符本身以“”标识，标识符内的内容称为元素（element），元素代表了标识符的意义，元素是与大小写无关的。用超文本标记语言（HTML）编写的网页文件其实只是很平常、很普通的文本文件。可以用你所熟悉的文字编辑器来编辑它，如Edit、Word、写字板、记事本等，但一定要以纯文本方式保

14、存，浏览器只能识别纯文本格式的文件。标记HTML的开始，在文件结束处要有对应的符号。3.2 网页数据编辑与格式化一、创建HTML文档1用工具软件创建HTML文档 用比较完善的工具软件来制作网页，像FronPage2000，Dreamweaver 4等2用编辑工具编写HTML文档 EDIT、记事本、写字板、Word等编辑工具可以用来编辑HTML文档。二、标签格式 在HTML文件中，重要的文字部分都由“标签”括起来，这样文字就成了特别的文字，而标签本身则以“”号标识，标签内的内容称为元素，它代表了标签的意义。如：中南省委宣传部主页 括住的文字称为“内容”，整个标签称为一个“元件”。三、标题格式 H

15、TML提供六种标题格式，其所用的标记符为（标题n，n=16），的字体最大，的字体最小。其属性如下：（1）ALIGN=LEFT，CENTER，RIGHT：文字左对齐（LEFT）、居中（CENTER）或右对齐（RIGHT）。（2）ID：指定标记符的ID选择器。（3）STYLE：指定标记符的样式表命令。（4）CLASS：指定标记符的样式类型。（5）LANG：指定标题文字的语种。（6）DIR：指定标题文字的方向。（7）TITLE：指定标记符的标题。此外，还有一些鼠标操作的属性。四、段落格式1分段与换行符 分段标记符用于将文档划分为段落，标记符为 要将文字强制换行，而不是另起段落，可以用换行标记符BR实

16、现该功能。注意，BR仅单独使用，而非成对出现。2.添加水平线 添加水平线的标记符为（与BR类似，HR也不包括结束标记符。3.段落对齐（1）ALIGN属性 ALIGN属性用于设置段落的对齐方式，其常见取值有4种：RIGHT（右对齐）、LEFT（左对齐）、CENTER（居中对齐）、JUSTIFY（两端对齐）。（2）DIV标记符（3）CENTER标记符（4）格式的嵌套五、文字格式1字符格式 通过表3.1的标记符设置字符格式2字体大小、字符颜色和字体样式（1）SIZE属性：控制文字的大小（2）COLOR属性：控制文字的颜色（3）FACE属性：指定字体样式六、列表格式1有序列表 定义有序列表需要使用有序

17、列表标记符和列表项（List item）标记符，语法如下：List item1 List item22无序列表 无序列表标记符和列表项标记符3定义列表 定义列表的制作需要3个标记符：定义列表标记符，用来指定定义列表的开头与结尾；定义术语（Definition term）标记符，用来指定第一层数据；定义描述标记符，用来指定第二层数据。标记符必须有结束标记，但和标记符的结束标记可以省略。3.3 在网页中建立超链接一、超链接标记符 创建一个超链接需要使用标记符，A是Anchor的首字母，标记符的最基本属性是HREF，用于指定链接到的文件位置。其他属性见教材。二、创建超链接1指向本地网页的链接：绝对U

18、RL2 链接至位于相同文件夹的文件：相对URL方式3链接至位于不同文件夹的文件4指向其他网页的链接，如：我要上网易5页面的特定部分链接6连接至E-mail地址的超链接3.4 在网页中插入图片一、插入图片 用标记符在HTML文件中插入图片，标记符常用的属性见教材。二、图片布局 可以使用HEIGHT、WIDTH、BORDER属性指定图片的高度、宽度以及是否具有框线。1图片的高度、宽度 ，如：图片的边框 还可以用标记符的SOLID属性设置边框颜色，格式。3.图片的对齐方式 图片的对齐是指图片本身在页面中的对齐和图片与文本的对齐。3.5 表格设计一、创建基本表格 可以用标记符创建一个表格，并在它的中间

19、加入标题和需要的数据。表格定义的代码为：具体表格内容 1.表格的标题元素定义了表格的说明。如：在这里输入标题 行里的内容 标题的属性ALIGN决定了标题的对齐方式。TOP是将标题放在表格的顶部，BOTTOM将标题放在表格的下面。2.行、表头和数据 定义一个表格，需从第一行逐级向下，并且按行中单元格的顺序开始定义。行、表头和数据定义的代码为：表头 数据 二、表格及文字的对齐与布局1表格在页面中的对齐 利用表格的ALIGN属性，可以将表格显示在页面的左边或右边。如果没有设置这一属性，表格单独显示为页面的一行，在页面的左侧。ALIGN=”LEFT”将表格按左边对齐，而表格的所有文本显示在表格右侧和页

20、面之间的位置。ALIGN=”RIGHT”将表格按右边对齐，文本显示在表格的左侧。2.表格内数据的对齐 ALIGN属性为单元格数据提供水平对齐方式，该属性有LEFT（左对齐）、RIGHT（右对齐）、CENTER（居中）3个值。VALIGN属性定义单元格数据的垂直对齐方式，该属性有TOP（顶部对齐）、BOTTOM（底部对齐）、MIDDLE（中间对齐）3个值。三、设置表格尺寸 设置表格边框尺寸 利用的BORDER属性可以设置表格边框的尺寸，它以指定的粗度来显示表格边框。如：2.设置表格尺寸 利用的WIDTH和HEIGHT属性可以设置表格尺寸。如：3.设置表元间隙 利用标记符的CELLSPACING属

21、性可以设置表元的间隙。如：4.设置表元内部空白 利用标记符中的CELLPDDING属性来，以像素为单位来设置它的值。如：四、设置表格的色彩 设置表格、行或行中单元的相关颜色，可以在、和标记符里使用BGCOLOR、BORDERCOLOR、BORDERCOLORLIGHT、BORDERCOLORDARK等属性。COLOR的值可以是以十六进制表示的颜色，或者是16种颜色（BLACK、WHITE、GREEN、MAROON、OLIVE、MAVY、PURPLE、GRAY、RED、YELLOW、BLUE、TEAL、LIME、AQUA、FUCHSIA和SILVER）中的一种。五、创建跨多行、多列的表元 跨越多

22、列 在或标记符里利用COLSPAN属性，并在其后写上想要跨越的列数。跨越多行 在或标记符里利用ROWSPAN属性，并在其后写上想要跨越的列数。第4章 FrontPage 2000网页设计技术 本章从FrontPage的视图入手，先介绍用FrontPage设计网页的基本操作，包括网页的编辑、文本的修饰、列表与表格的使用、运用图象、设置链接、声音处理等，然后介绍FrontPage的高级应用，包括悬停按钮、滚动字幕、计数器与动态效果等，最后介绍表单的使用、样式与框架等。教学重点与难点教学重点与难点文本的修饰与美化、列表与表格的使用图象与声音对象的使用悬停按钮、滚动字幕的设置使用表单与样式4.1 Fr

23、ontPage 2000简介 打开FrontPage 2000，我们发现它与其它Office软件的窗口大致相似，主窗口由标题栏、菜单栏、工具栏、视图栏、编辑区和状态栏等组成。1标题栏、菜单栏、工具栏、状态栏 与Office其他组件类似。2视图栏 管理Web站点的工具。3工作区 是管理站点和编辑网页的主要场所。在站点的“网页”视图模式下，网页编辑区的下方有三个编辑按钮它们分别代表三种编辑模式：普通、HTML和预览。用户一般在普通模式下设计网页，如果切换到HTML模式下，将会看到系统自动生成的 HTML程序。4.2 FrontPage 2000的视图 FrontPage 2000提供了六种视图模式

24、，即网页视图、文件夹视图、报表视图、导航视图、超链接视图和任务视图。它们是用户进行网站设计的有力工具，灵活运用视图模式，将极大地方便设计操作和网站管理。一、网页视图 网页视图为网页的设计提供了一个工作场所，可以在这个环境下对网页进行设计和修改。二、文件夹视图 打开一个网页后，系统默认是以文件夹视图来显示的，文件夹视图与Windows中的资源管理器相似，它能够显示当前的Web中的内容是如何组织的。三、报表视图 报表视图相当于属性检查，它能给出当前网站的有关属性。灵活应用报表视图能够使用户方便地了解网页的属性，便于把握和修改网页。四、导航视图 导航视图清楚地显示了Web的结构，用户可以从中了解到网

25、站中各部分之间的逻辑关系，它反映了网站的整个脉络。五、超链接视图 超链接视图以图形化的界面显示了当前网页和其他文件之间的超链接关系，也可以显示网站与网站之间的超链接。六、任务视图 任务视图用任务列表的方式对任务进行管理，操作人员可以把详细的任务放在任务列表中，这样它就会提醒设计人员需要完成哪些任务，还剩哪些任务没有完成。4.3 FrontPage 2000的编辑方法一、标题段落 在网页内输入标题时，用户可先设置标题的格式，然后再输入标题的内容，FrontPage 2000提供了6级标题。二、修饰文本 FrontPage提供了“字体”对话框与各种格式工具按钮，可根据需要选择设置，以美化文本。1字

26、体选择 “字体”列表框不但显示字体的名称，同时还给出了字体的实际样式。2字体大小 字符的大小共有6级，其中默认级别是3。3字体颜色 选中文字，用“调色板”为文字设置颜色。4字符效果 字符的一般效果 “加粗”、“倾斜”和“下划线”使用上标和下标5字符间距 控制网页的文本间距、段落间距以及文本相对于基准线的垂直位置。“普通”、“扩充”、“紧缩”三种 “间距大小”以“pt”为单位三、插入水平线 在网页中插入水平线有分隔文本内容的作用。选择“插入”菜单的“Horizontal Line”项，可在网页中插入了一条水平线。可以对水平线进行长短或宽窄的拉伸。还可以对水平线属性进行设置，在水平线上单击鼠标右键

27、，在弹出的菜单中选择“Horizontal Line Properties”弹出属性对话框，然后进行属性设置。4.4 使用列表 使用列表和表格来规范网页内容可以使网页层次分明、结构清晰。列表有项目列表、编号列表、定义列表三种。一、项目列表 项目列表也称为无序列表，它将在项目前添加标志符号。可以将图片作为新的项目标志。二、编号列表 在网页中的内容存在顺序关系时，可应用编号列表。三、定义列表 定义列表就是在网页内定义词汇、术语的列表，具体的定义内容将以首行缩进的方式出现在列表的下一行。四、列表嵌套 允许列表嵌套，并且不限制嵌套级数。五、列表的折叠 应用列表的折叠技术，可以将次级列表隐藏在上一级列表

28、内，只有在浏览者电击上级列表时，才会打开次级列表的内容。再一次单击上级列表时，次级列表又将隐藏在上级列表中。步骤：（1）选择“创建一个嵌套的列表；（2）在列表上单击鼠标右键，选择“列表属性”对话框。（3）启用可折叠大纲”复选框。4.5 使用表格一、创建表格 三种方式：菜单、工具栏、手绘二、填充表格 表格的内容可以是文本、图片、音频文件、视频文件或超链接等。三、表格属性1标题属性2对齐格式属性 水平对齐方式有左对齐、右对齐、居中、两端对齐四种方式，垂直对齐方式有顶部对齐、底部对齐、中部和基准对齐四种方式。3边框属性 边框的大小和边框的颜色。4背景属性 包括背景颜色和背景图象两种属性。5间隔属性

29、表格的间隔由两个因素确定：一是单元格的填充，即单元格之间的间隔距离；一是单元格间距即单元格内部的间隔。6大小属性 包括表格的宽度和高度。有两种单位：一个是像素，另一个是百分比。4.6 图形运用一、添加图形 打开“插入”菜单的“图片”子菜单，执行“来自文件”命令，选择图象文件的名称。二、编辑图形 包括设置图象的特殊效果、剪切图象、添加文本。1添加文本 图片工具栏的“文本按钮”就是用来在图象内添加文本信息的。2图象的特殊效果 旋转90度；图象翻转；修正对比度；调整亮度；黑白处理；图象弱化；突出效果；采样与还原；调整图象大小；设置对齐方式；使用折叠文本；设置间隔距离；设置透明背景三、设置背景图形 1

30、设置网页的背景色 打开“格式”菜单，执行其中的“背景”命令，在随后出现的“网页属性”对话框内选择“背景”项。2设置图片为网页背景 打开“格式”菜单，执行其中的“背景”命令，在出现的“网页属性”对话框内选择“背景”项在“格式”栏中选择“背景图片”项。4.7 设置链接 链接（Hyperlink，简称Link）是网页中的动态部分。一、链接的建立 点击工具栏中的“Link”按钮，然后在URL文本框内输入要链接的网页的URL。也可以先输入文字，然后拖动鼠标选定要建立超链接的文字，单击鼠标右键，在弹出的对话框中，选择其中的超链接。二、目标 当用鼠标按下一个链接后，网页能够移动到当前网页或网络上的另一个网页

31、上的某一位置，我们称此位置为目标或下锚处（Anchor）。使用目标可以使我们在浏览网页时迅速翻动到想浏览的内容。目标建立好后，就可以在网页内建立链接。4.8 音频的使用 音频格式包括：Microsoft WAV文件：扩展名是“.wav”。Macintosh Sound文件：扩展名是“.au”。MIDI文件：MIDI文件只能存储音乐文件，扩展名是“.mid”。一、插入音频 打开“插入”菜单中的“高级”子菜单，执行“插件”命令，在“数据源”内输入插入音频文件的地址。二、背景音乐 在IE浏览器中可以播放音频文件，可以控制播放的次数，这就是设置背景音乐，在用户打开网页时，音乐将随之而出。“网页属性”-

32、“常规”-“背景音乐”栏中输入音频文件的地址-设置播放次数 注意：Netscape Navigator浏览器不支持不用插件的音频文件插入操作，只有用IE才可以。4.9 FrontPage 2000的高级应用一、悬停按钮 悬停是设置在超链接处的按钮。它的效果是：当鼠标点击悬停按钮处的超链接时，悬停按钮的颜色和形状都会发生变化。选择“插入”菜单，执行其中的“组件”子菜单，从“组件”子菜单中选择“悬停按钮”命令，便出现“悬停按钮属性”对话框。在“悬停按钮属性”对话框中，可以设置悬停按钮有关属性：1设置按钮文本 2设置链接对象 3字体设置 4颜色设置 5尺寸设置二、移动字幕 移动字幕是能够移动的动态的

33、文字。在FrontPage 主窗口中打开“插入”菜单，执行其中的“活动元素”子菜单，从“组件”子菜单中选择“字幕”命令，在“字幕属性”对话框中设置字幕属性。包括：1文本设置；2方向设置；3速度设置；4表现方式设置；5 对齐方式设置；6大小设置；7重复设置；8背景颜色设置三、网站计数器 在FrongPage 主窗口打开“插入”菜单，执行其中的“组件”子菜单，从“组件”子菜单中选择“站点计数器”命令，出现“站点计数器属性对话框，通过这个对话框，我们可以设置它的属性，包括：字符设置；起始点设置；3.位数设置。四、FrontPage 2000的动态效果 打开网页，选择要进行动态效果设计的内容，它可以是

34、普通文本，也可以是图形。在FrontPage 主窗口中打开“格式”菜单，选取“DHTML效果”对话框，通过这个对话框，可以进行动态效果的设计。1选择事件 在“开启”对话框中选择发生的事件类型，这些事件就是用户对网页进行的一些操作动作，包括单击、双击或移动鼠标等。网页加载 网页加载是打开网页的操作，可以选择某种动态效果，在网页加载时生效。单击和双击 发生这种事件时，可以使用“飞到”或“格式”两种动态效果。鼠标移动 鼠标移动时间是指在浏览器窗口或预览窗口中，鼠标经过效果文本或图片的操作。选择动态类型 动态类型是与事件类型相对应的，因此不能随便选择，而应由事件类型来决定。飞入 飞到 格式 旋转 选择

35、动态类型的效果 设置动态类型的效果，也就是动态类型的属性。飞行方式 格式效果 在选择完事件类型、动态类型和动态类型的效果后，就完成了一个动态效果的设置。可以点击“DHTML效果”对话框右下方的效果显示图标，观察所设置的动态效果。4.10 使用表单 创建表单的方式有三种：表单模板、表单向导和自定义表单。一、使用表单模板二、使用表单向导 使用表单模板只能创建最简单的几种表单，而用表单向导，就可以随心所欲地创建表单。4.11 使用样式 样式就是网页设计时事先确立的一些规则，比如说文本之间的缩进量、空白大小、字体的类型、颜色和大小等。样式表是网页中字体、段落和版面等各种属性的集合。主题样式能对整个网站

36、起规范作用，使网站风格统一与和谐。一、创建与使用样式 在主窗口中选择“格式”菜单，执行其中的“样式”命令，弹出“样式”对话框，选择要创建的样式类型。二、使用主题样式 使用主题样式可以对整个网站进行规范，使网站具有同一种风格。4.12 使用框架 使用框架能使网页之间的关系更明显，便于了解网页的结构，也可以使设计思路更清晰，使网页便于管理。框架网页创建和设置过程：见教材第5章 网站网页的上传与维护 本章介绍了进行网页发布的一般方法，以及如何对已发布的网页进行测试与维护，最后简单讨论了网站可能遇到的安全问题及我们应该采取的对策。教学重点与难点教学重点与难点网页的上传网页的测试网站的安全5.1 发布网

37、页一、网页空间的申请 租用专线 质量好，费用高 租用网页空间或虚拟主机 价格合适 申请免费网页空间 天上掉下来的馅饼二、为网站注册域名 目前，可以通过“中国互联网络信息中心”（CNNIC）的域名注册系统申请诸如、等域名，详细的申请程序及缴费方式可以到CNNIC网站查询，其地址为http:/。也可到http:/等网站申请域名。三、上传工具简介 FTP软件有很多，如WS-FTP Pro、CuteFTP、LeechFTP、FLASHftp等。四、发布网页的步骤 以在发布为例：登陆到亿唐 租用服务器或虚拟主机。根据亿唐的要求，办理手续。上传已制作的网页5.2 网页测试一、网页测试法 1.尽量多使用几种

38、不同的Web浏览器测试网页 2.尽量不要使用最新版本的浏览器进行网页测试 3.尽量在多种操作系统中测试网页二、测试项目 1.链接测试 主要看网页中是否有超链接掉链的情况。2.外观测试 3.速度测试 速度越快越好。4.脚本和程序测试 测试页面中的JavaScript以及CGI程序是否能正常工作。5.3 网站维护一、网站更新 进行网页更新最有用的依据是日志记录。二、网站升级 服务器软件的升级和操作系统的升级。5.4 安全问题 1.病毒 2.特洛伊木马 会使你的计算机受到别人的控制。3.黑客 “好心”的黑客有可能帮你修补系统。4.工业间谍 真正的危险者。第6章 Dreamweaver网页设计技术 D

39、reamweaver是一套视觉化的网页开发工具，利用它可以轻而易举地制作出跨越平台和浏览器限制的充满动感的网页。通过Dreamweaver 提供的“所见即得”的友好编辑功能，编写ASP、JSP、CFML甚至PHP程序，从而创建动态网站系统。教学重点与难点教学重点与难点页面版面设计使用资源面板创建模板6.1 Dreamweaver 简介一、操作界面 Dreamweaver 4由两个部分组成，即页面编辑器和站点管理器。1.页面编辑器 分为五个部分：菜单栏、工具栏、控制菜单栏、工具栏、控制面板、文件工作区、状态栏面板、文件工作区、状态栏。其中控制面板有属性面板、对象面板、样式面板、帮属性面板、对象面

40、板、样式面板、帮助面板助面板等。2站点管理器的构成 站点管理器左侧窗口显示了站点地图，右侧窗口显示了当前网站中的文件列表。一般来说，在做站点时应先建立好站点，再开始网页的制作，这样可以保证页面内文件链接的正确性。6.2 Dreamweaver 制作基础一、创建网页 启动Dreamweaver 4，就会自动生成一个白色背景的文件工作区，这里就是设计和制作网页的地方，可以在这里输入网页设计过程中所需要的文字、图片、表格、Flash动画等。网页的背景颜色的，以及文字的颜色都是可以通过“Page Properties”设置的。二、文字的编辑 可以直接在网页中输入文字，可以在【Text】下设置文字的格式

41、，如字体、字号、颜色、粗体、斜体，段落居左、居中及居右，添加项目符号及编号等。此外，还可以利用HTML样式和CSS样式对文字进行统一格式设置。可以利用属性面板更改文字的大小、颜色、字体等。三、插入图像 在网页中插入一幅图片时，图片文件必须位于当前站点中。在对象面板中选择插入图片图标，此时系统将打开“选择图像源文件”对话框。找到需要插入的图片文件，选择“Select”。Dreamwaver支持常用的网页图片格式有扩展名为“GIF”、“JPG”、“JPEG”、“PNG”的图形文件。四、插入鼠标变换图片 该图片对象的特点是当鼠标经过该图片时，图片内容会自动更新。实际上，它是由两幅图片组成的，一幅为主

42、图片，显示在页面中；一幅为滚动图片，当鼠标经过图片所在区域时显示。单击对象面板中的图标，或者选择【Insert】菜单的“Interactive Images”子菜单中的“Rollover Image”命令可实现该操作。五、创建图片热点 在插入的图片上，可以是交换式图片，可以把图片分为若干个区域，每个区被称为“热点”，可以为每个热点指定相关的链接。当单击某个热点时，系统显示相关的网页。当绘制完热区后，属性面板会显示热区的属性。还可以调整热点区尺寸。六、插入水平线 在对象面板中选择按钮，在页面中点击，画面会自动生成一条水平线，在水平线上单击，可以设置水平线的宽度、高度、对齐方式、是否有阴影等参数。

43、七、插入邮件链接 创建邮件链接的作用是当浏览者点击该链接时，系统将自动启动计算机中的邮件发送程序。八、插入日期 在对象面板中选择按钮，在页面中点击，会弹出对话框，可以设置日期格式、星期格式、时间格式，点击“OK”，就会在页面中自动加上时间。九、插入Flash对象 1插入Flash影片 2制作Flash文字 3制作Flash按钮十、表格的应用 1插入表格 2表格属性面板 表格属性面板中的设置项对整个表格起作用，如果想对表中的某一行单独设置，首先选中表的某一行，再利用单元格属性面板进行设置。3表格的选取 4添加表格内容5单元格的合并与拆分十一、层的应用 层是网页中的一种容器，它可定位在页面上的任意

44、位置，并且其中可包含文本、图像、表单等所有可直接用于文档的元素。1创建层 2层的大小调整 3层的移动 4层的属性面板5层控制面板6层的动态效果十二、框架的应用 创建普通框架集 利用框架属性面板来设置该框架是否要边线以及边线的颜色、边线宽度、框架的名称和框架中所要显示的源文件。可以查看框架集的文件的源代码，这里面只保存了框架信息和它所对应的源文件。十三、行为面板的使用 通过行为面板可以在网页上制作出一些简单的交互效果。行为由两个部分组成，即事件和动作，通过事件的响应执行对应的动作。事件是用于指明执行某项动作的条件，动作实际上是一段执行特定任务的预先写好的JavaScript代码，如打开窗口、播放

45、声音等都是动作。十四、模板的运用1准备模板2定义区域3应用模板6.3 用Dreamweaver 建立Web站点一、定义一个本地站点 当定义一个本地站点时，首先应该确认让Dreamweaver 在哪儿为这个站点存储所有的文件。二、创建站点首页 当建立完站点之后，就可以打开站点管理器，通过它管理站点，往站点内添加网页及其它文件，三、查看站点文件和链接 当建立完首页之后，就可以编辑首页，然后添加与其相关的网页，网页之间的相互链接可以通过站点管理器来查看。6.4 Dreamweaver 制作网页实例一、网页布局设计 以表格形式组织。二、网页内容设计 图片的处理与制作，要借助Fireworks或者Pho

46、toshop完成，Flash动画在Flash中完成，对于图像、动画，可以在插入对象之后，赋予它们不同的属性，比如超链接、动作设置等。第7章 Photoshop图像处理基础 6.0版本的Photoshop比以前版本加强了网络方面的功能以及文字编辑能力，重新布局了菜单系统，使操作更加简便、功能更加强劲。它的出现使人们告别了对图片进行修正的传统的手工方式，还可使人们通过想象，创造出现实世界里无法拍摄到的图像。教学重点与难点教学重点与难点工具箱的使用使用图层色彩和色彩调整7.1 Photoshop简介一、操作界面 Photoshop6.0的整个界面分为四个部分：菜单栏、工具栏、控制面板、状态栏菜单栏、

47、工具栏、控制面板、状态栏。菜单栏 工具栏 控制面板 状态栏二、工具箱三、控制面板 1.导航器和信息面板 2.颜色、色板和样式面板 3.动作和历史记录 4.图层、通道及路径四、色彩模式 1RGB模式 RGB就是色光的色彩模式。R代表红色，G代表绿色，B代表蓝色，三种色彩叠加形成了其他色彩，所以RGB模式是一种加色模式。2CMYK模式 减色模式，C代表青色，M代表洋红色，Y、K代表黄、黑色。色彩范围不及RGB。3HSB模式 在HSB模式中，H代表色相，S代表饱和度，B代表亮度。4Lab模式 Lab模式既不依赖于光线，又不依赖于颜料。它是CIE组织确定的一个理论上包括了人眼可见的所有色彩的色彩模式。

48、5索引颜色模式 6灰度模式 7位图模式 8多通道模式 9双色调模式五、文件格式 PSD和PDD文件格式：PSD文件和PDD文件是Photoshop软件专用的格式，能保存图像数据的每一个细小部分，包括像素信息，颜色模式信息，图层信息，通道信息，蒙版信息，PSD和PDD格式文件特别大。1BMP格式 BMP 是 DOS 和 Windows 兼容计算机系统的标准 Windows 图像格式。2GIF格式 GIF 是一种 LZW 压缩格式，用来最小化文件大小和电子传递时间。3PCX格式 4TGA格式 5PXR格式 6JPEG格式 JPEG格式是所有压缩格式中最卓越的，JPEG 格式支持 CMYK、RGB

49、和灰度颜色模式，不支持 Alpha 通道。7TIFF格式 TIFF 是一种灵活的位图图像格式，实际上被所有绘画、图像编辑和页面排版应用程序所支持。8EPS格式 9Filmstrip格式7.2 Photoshop处理图像实例一、网站logon图标的制作二、背景图案的制作第8章 Flash动画制作基础 Flash 5能够创作出极具吸引力的高效网页。它可以轻易与Macromedia 公司的图像处理软件FreeHand和Fireworks集成，直接导入这些软件制作的图像。它还提供功能强大的开发工具，使用户可以创建高级的网站和网络应用。教学重点与难点教学重点与难点帧的操作元件的概念元件的应用8.1 Flash简介一、操作界面 Flash5的整个界面包括：菜单栏、工具栏、工具箱、控制面板、舞台、时间轴以及活动窗口。二、工具箱三、控制面板 1信息、变形、描绘、填充面板 2混色面板与色彩样本面板 3字符面板、段落面板、文本选项面板 4实例面板、特效面板、帧面板、声音面板 5对齐面板(Actions)、场景面板（Scene）6剪辑参数面板 7 动作面板 8动画管理器面板四、图库窗口 图库窗口可以用来存放和组织我们创建的符号，还是存放导入声音，位图图形的地方。五、时间轴与舞台 舞台与时间轴是动画制作的主要场所。时间轴是调整和控制动画的地方。六、工具条按钮和工具提示8.2 Flash动画范例 一、网站