《电子教案网页制作与设计教程第二版》由会员分享，可在线阅读，更多相关《电子教案网页制作与设计教程第二版（271页珍藏版）》请在金锄头文库上搜索。
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）、搜索（search）、友
6、情链接（ 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）
8、Web结构三、网页文件的设计原则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用户优先 最高的行动准则就是
12、“用户优先”。没有用户去光顾，任何主页都没有意义。4响应时间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）编写的网页文件其实只是很平常、很普通的文本文件。可以用你所熟悉的文字编辑器来编辑它，
14、如Edit、Word、写字板、记事本等，但一定要以纯文本方式保存，浏览器只能识别纯文本格式的文件。 标记HTML的开始，在文件结束处要有对应的符号。3.2 网页数据编辑与格式化一、创建HTML文档1用工具软件创建HTML文档 用比较完善的工具软件来制作网页，像FronPage2000，Dreamweaver 4等2用编辑工具编写HTML文档 EDIT、记事本、写字板、Word等编辑工具可以用来编辑HTML文档。二、标签格式 在HTML文件中，重要的文字部分都由“标签”括起来，这样文字就成了特别的文字，而标签本身则以“”号标识，标签内的内容称为元素，它代表了标签的意义。如： 中南省委宣传部主页
15、括住的文字称为“内容”，整个标签称为一个“元件”。三、标题格式 HTML提供六种标题格式，其所用的标记符为（标题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分段与换行符 分段标记符用于将文档划分为
16、段落，标记符为 要将文字强制换行，而不是另起段落，可以用换行标记符BR实现该功能。注意，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属性：控制文字的颜
17、色（3）FACE属性：指定字体样式六、列表格式1有序列表 定义有序列表需要使用有序列表标记符和列表项（List item）标记符，语法如下： List item1 List item22无序列表 无序列表标记符和列表项标记符3定义列表 定义列表的制作需要3个标记符：定义列表标记符，用来指定定义列表的开头与结尾；定义术语（Definition term）标记符，用来指定第一层数据；定义描述标记符，用来指定第二层数据。标记符必须有结束标记，但和标记符的结束标记可以省略。3.3 在网页中建立超链接一、超链接标记符 创建一个超链接需要使用标记符，A是Anchor的首字母，标记符的最基本属性是HREF，
18、用于指定链接到的文件位置。 其他属性见教材。二、创建超链接1指向本地网页的链接：绝对URL2 链接至位于相同文件夹的文件： 相对URL方式3链接至位于不同文件夹的文件4指向其他网页的链接，如： 我要上网易5页面的特定部分链接6连接至E-mail地址的超链接3.4 在网页中插入图片一、插入图片 用标记符在HTML文件中插入图片，标记符常用的属性见教材。二、图片布局 可以使用HEIGHT、WIDTH、BORDER属性指定图片的高度、宽度以及是否具有框线。1图片的高度、宽度 ，如： 图片的边框 还可以用标记符的SOLID属性设置边框颜色，格式。3. 图片的对齐方式 图片的对齐是指图片本身在页面中的对
19、齐和图片与文本的对齐。3.5 表格设计一、创建基本表格 可以用标记符创建一个表格，并在它的中间加入标题和需要的数据。表格定义的代码为： 具体表格内容 1. 表格的标题元素定义了表格的说明。如： 在这里输入标题 行里的内容 标题的属性ALIGN决定了标题的对齐方式。TOP是将标题放在表格的顶部，BOTTOM将标题放在表格的下面。2. 行、表头和数据 定义一个表格，需从第一行逐级向下，并且按行中单元格的顺序开始定义。行、表头和数据定义的代码为： 表头 数据 二、 表格及文字的对齐与布局1表格在页面中的对齐 利用表格的ALIGN属性，可以将表格显示在页面的左边或右边。如果没有设置这一属性，表格单独显
20、示为页面的一行，在页面的左侧。ALIGN=”LEFT”将表格按左边对齐，而表格的所有文本显示在表格右侧和页面之间的位置。ALIGN=”RIGHT”将表格按右边对齐，文本显示在表格的左侧。2. 表格内数据的对齐 ALIGN属性为单元格数据提供水平对齐方式，该属性有LEFT（左对齐）、RIGHT（右对齐）、CENTER（居中）3个值。VALIGN属性定义单元格数据的垂直对齐方式，该属性有TOP（顶部对齐）、BOTTOM（底部对齐）、MIDDLE（中间对齐）3个值。三、设置表格尺寸 设置表格边框尺寸 利用的BORDER属性可以设置表格边框的尺寸，它以指定的粗度来显示表格边框。如： 2. 设置表格尺寸
21、 利用的WIDTH和HEIGHT属性可以设置表格尺寸。如： 3. 设置表元间隙 利用标记符的CELLSPACING属性可以设置表元的间隙。如： 4. 设置表元内部空白 利用标记符中的CELLPDDING属性来，以像素为单位来设置它的值。如： 四、设置表格的色彩 设置表格、行或行中单元的相关颜色，可以在、和标记符里使用BGCOLOR、BORDERCOLOR、BORDERCOLORLIGHT、BORDERCOLORDARK等属性。 COLOR的值可以是以十六进制表示的颜色，或者是16种颜色（BLACK、WHITE、GREEN、MAROON、OLIVE、MAVY、PURPLE、GRAY、RED、YE
22、LLOW、BLUE、TEAL、LIME、AQUA、FUCHSIA和SILVER）中的一种。五、创建跨多行、多列的表元 跨越多列 在或标记符里利用COLSPAN属性，并在其后写上想要跨越的列数。 跨越多行 在或标记符里利用ROWSPAN属性，并在其后写上想要跨越的列数。第4章 FrontPage 2000网页设计技术 本章从FrontPage的视图入手，先介绍用FrontPage设计网页的基本操作，包括网页的编辑、文本的修饰、列表与表格的使用、运用图象、设置链接、声音处理等，然后介绍FrontPage的高级应用，包括悬停按钮、滚动字幕、计数器与动态效果等，最后介绍表单的使用、样式与框架等。教学重
23、点与难点教学重点与难点文本的修饰与美化、列表与表格的使用图象与声音对象的使用悬停按钮、滚动字幕的设置使用表单与样式4.1 FrontPage 2000简介 打开FrontPage 2000，我们发现它与其它Office软件的窗口大致相似，主窗口由标题栏、菜单栏、工具栏、视图栏、编辑区和状态栏等组成。1标题栏、菜单栏、工具栏、状态栏 与Office其他组件类似。2视图栏 管理Web站点的工具。3工作区 是管理站点和编辑网页的主要场所。 在站点的“网页”视图模式下，网页编辑区的下方有三个编辑按钮它们分别代表三种编辑模式：普通、HTML和预览。用户一般在普通模式下设计网页，如果切换到HTML模式下，
24、将会看到系统自动生成的 HTML程序。4.2 FrontPage 2000的视图 FrontPage 2000提供了六种视图模式，即网页视图、文件夹视图、报表视图、导航视图、超链接视图和任务视图。它们是用户进行网站设计的有力工具，灵活运用视图模式，将极大地方便设计操作和网站管理。一、网页视图 网页视图为网页的设计提供了一个工作场所，可以在这个环境下对网页进行设计和修改。二、文件夹视图 打开一个网页后，系统默认是以文件夹视图来显示的，文件夹视图与Windows中的资源管理器相似，它能够显示当前的Web中的内容是如何组织的。三、报表视图 报表视图相当于属性检查，它能给出当前网站的有关属性。灵活应用
25、报表视图能够使用户方便地了解网页的属性，便于把握和修改网页。四、导航视图 导航视图清楚地显示了Web的结构，用户可以从中了解到网站中各部分之间的逻辑关系，它反映了网站的整个脉络。五、超链接视图 超链接视图以图形化的界面显示了当前网页和其他文件之间的超链接关系，也可以显示网站与网站之间的超链接。六、任务视图 任务视图用任务列表的方式对任务进行管理，操作人员可以把详细的任务放在任务列表中，这样它就会提醒设计人员需要完成哪些任务，还剩哪些任务没有完成。4.3 FrontPage 2000的编辑方法一、标题段落 在网页内输入标题时，用户可先设置标题的格式，然后再输入标题的内容，FrontPage 20
26、00提供了6级标题。二、修饰文本 FrontPage提供了“字体”对话框与各种格式工具按钮，可根据需要选择设置，以美化文本。1字体选择 “字体”列表框不但显示字体的名称，同时还给出了字体的实际样式。2字体大小 字符的大小共有6级，其中默认级别是3。3字体颜色 选中文字，用“调色板”为文字设置颜色。4字符效果 字符的一般效果 “加粗”、“倾斜”和“下划线” 使用上标和下标5字符间距 控制网页的文本间距、段落间距以及文本相对于基准线的垂直位置。 “普通”、“扩充”、“紧缩”三种 “间距大小”以“pt”为单位三、插入水平线 在网页中插入水平线有分隔文本内容的作用。选择“插入”菜单的“Horizont
27、al Line”项，可在网页中插入了一条水平线。 可以对水平线进行长短或宽窄的拉伸。 还可以对水平线属性进行设置，在水平线上单击鼠标右键，在弹出的菜单中选择“Horizontal Line Properties”弹出属性对话框，然后进行属性设置。4.4 使用列表 使用列表和表格来规范网页内容可以使网页层次分明、结构清晰。列表有项目列表、编号列表、定义列表三种。一、项目列表 项目列表也称为无序列表，它将在项目前添加标志符号。可以将图片作为新的项目标志。二、编号列表 在网页中的内容存在顺序关系时，可应用编号列表。三、定义列表 定义列表就是在网页内定义词汇、术语的列表，具体的定义内容将以首行缩进的方
28、式出现在列表的下一行。四、 列表嵌套 允许列表嵌套，并且不限制嵌套级数。五、列表的折叠 应用列表的折叠技术，可以将次级列表隐藏在上一级列表内，只有在浏览者电击上级列表时，才会打开次级列表的内容。再一次单击上级列表时，次级列表又将隐藏在上级列表中。步骤： （1）选择“创建一个嵌套的列表；（2）在列表上单击鼠标右键，选择“列表属性”对话框。（3）启用可折叠大纲”复选框。4.5 使用表格一、 创建表格 三种方式：菜单、工具栏、手绘二、填充表格 表格的内容可以是文本、图片、音频文件、视频文件或超链接等。三、表格属性1标题属性2对齐格式属性 水平对齐方式有左对齐、右对齐、居中、两端对齐四种方式，垂直对齐
29、方式有顶部对齐、底部对齐、中部和基准对齐四种方式。3边框属性 边框的大小和边框的颜色。4背景属性 包括背景颜色和背景图象两种属性。5间隔属性 表格的间隔由两个因素确定：一是单元格的填充，即单元格之间的间隔距离；一是单元格间距即单元格内部的间隔。6大小属性 包括表格的宽度和高度。有两种单位：一个是像素，另一个是百分比。4.6 图形运用一、添加图形 打开“插入”菜单的“图片”子菜单，执行“来自文件”命令，选择图象文件的名称。二、编辑图形 包括设置图象的特殊效果、剪切图象、添加文本。1添加文本 图片工具栏的“文本按钮”就是用来在图象内添加文本信息的。2图象的特殊效果 旋转90度； 图象翻转； 修正对
30、比度； 调整亮度； 黑白处理； 图象弱化； 突出效果； 采样与还原； 调整图象大小； 设置对齐方式； 使用折叠文本； 设置间隔距离； 设置透明背景三、设置背景图形 1设置网页的背景色 打开“格式”菜单，执行其中的“背景”命令，在随后出现的“网页属性”对话框内选择“背景”项。 2设置图片为网页背景 打开“格式”菜单，执行其中的“背景”命令，在出现的“网页属性”对话框内选择“背景”项在“格式”栏中选择“背景图片”项。4.7 设置链接 链接（Hyperlink，简称Link）是网页中的动态部分。一、链接的建立 点击工具栏中的“Link”按钮，然后在URL文本框内输入要链接的网页的URL。也可以先输入
31、文字，然后拖动鼠标选定要建立超链接的文字，单击鼠标右键，在弹出的对话框中，选择其中的超链接。二、目标 当用鼠标按下一个链接后，网页能够移动到当前网页或网络上的另一个网页上的某一位置，我们称此位置为目标或下锚处（Anchor）。 使用目标可以使我们在浏览网页时迅速翻动到想浏览的内容。 目标建立好后，就可以在网页内建立链接。4.8 音频的使用 音频格式包括： Microsoft WAV文件：扩展名是“.wav”。 Macintosh Sound文件：扩展名是“.au”。 MIDI文件：MIDI文件只能存储音乐文件，扩展名是“.mid”。一、插入音频 打开“插入”菜单中的“高级”子菜单，执行“插件”
32、命令，在“数据源”内输入插入音频文件的地址。二、背景音乐 在IE浏览器中可以播放音频文件，可以控制播放的次数，这就是设置背景音乐，在用户打开网页时，音乐将随之而出。 “网页属性”- -“常规”- “背景音乐”栏中输入音频文件的地址-设置播放次数 注意：Netscape Navigator浏览器不支持不用插件的音频文件插入操作，只有用IE才可以。4.9 FrontPage 2000的高级应用一、悬停按钮 悬停是设置在超链接处的按钮。它的效果是：当鼠标点击悬停按钮处的超链接时，悬停按钮的颜色和形状都会发生变化。 选择“插入”菜单，执行其中的“组件”子菜单，从“组件”子菜单中选择“悬停按钮”命令，便
33、出现“悬停按钮属性”对话框。 在“悬停按钮属性”对话框中，可以设置悬停按钮有关属性： 1设置按钮文本 2设置链接对象 3字体设置 4颜色设置 5尺寸设置二、移动字幕 移动字幕是能够移动的动态的文字。 在FrontPage 主窗口中打开“插入”菜单，执行其中的“活动元素”子菜单，从“组件”子菜单中选择“字幕”命令，在“字幕属性”对话框中设置字幕属性。包括：1文本设置；2方向设置；3速度设置；4表现方式设置；5 对齐方式设置；6大小设置；7重复设置；8背景颜色设置三、网站计数器 在FrongPage 主窗口打开“插入”菜单，执行其中的“组件”子菜单，从“组件”子菜单中选择“站点计数器”命令，出现“
34、站点计数器属性对话框，通过这个对话框，我们可以设置它的属性，包括： 字符设置； 起始点设置；3.位数设置。四、FrontPage 2000的动态效果 打开网页，选择要进行动态效果设计的内容，它可以是普通文本，也可以是图形。在FrontPage 主窗口中打开“格式”菜单，选取“DHTML效果”对话框，通过这个对话框，可以进行动态效果的设计。 1选择事件 在“开启”对话框中选择发生的事件类型，这些事件就是用户对网页进行的一些操作动作，包括单击、双击或移动鼠标等。 网页加载 网页加载是打开网页的操作，可以选择某种动态效果，在网页加载时生效。 单击和双击 发生这种事件时，可以使用“飞到”或“格式”两种
35、动态效果。 鼠标移动 鼠标移动时间是指在浏览器窗口或预览窗口中，鼠标经过效果文本或图片的操作。 选择动态类型 动态类型是与事件类型相对应的，因此不能随便选择，而应由事件类型来决定。 飞入 飞到 格式 旋转 选择动态类型的效果 设置动态类型的效果，也就是动态类型的属性。 飞行方式 格式效果 在选择完事件类型、动态类型和动态类型的效果后，就完成了一个动态效果的设置。可以点击“DHTML效果”对话框右下方的效果显示图标，观察所设置的动态效果。4.10 使用表单 创建表单的方式有三种：表单模板、表单向导和自定义表单。一、使用表单模板二、使用表单向导 使用表单模板只能创建最简单的几种表单，而用表单向导，
36、就可以随心所欲地创建表单。4.11 使用样式 样式就是网页设计时事先确立的一些规则，比如说文本之间的缩进量、空白大小、字体的类型、颜色和大小等。样式表是网页中字体、段落和版面等各种属性的集合。主题样式能对整个网站起规范作用，使网站风格统一与和谐。一、创建与使用样式 在主窗口中选择“格式”菜单，执行其中的“样式”命令，弹出“样式”对话框，选择要创建的样式类型。二、使用主题样式 使用主题样式可以对整个网站进行规范，使网站具有同一种风格。4.12 使用框架 使用框架能使网页之间的关系更明显，便于了解网页的结构，也可以使设计思路更清晰，使网页便于管理。 框架网页创建和设置过程：见教材第5章 网站网页的
37、上传与维护 本章介绍了进行网页发布的一般方法，以及如何对已发布的网页进行测试与维护，最后简单讨论了网站可能遇到的安全问题及我们应该采取的对策。教学重点与难点教学重点与难点网页的上传网页的测试网站的安全5.1 发布网页一、网页空间的申请 租用专线 质量好，费用高 租用网页空间或虚拟主机 价格合适 申请免费网页空间 天上掉下来的馅饼二、为网站注册域名 目前，可以通过“中国互联网络信息中心”（CNNIC）的域名注册系统申请诸如、、等域名，详细的申请程序及缴费方式可以到CNNIC网站查询，其地址为http:/。也可到http:/等网站申请域名。三、 上传工具简介 FTP软件有很多，如WS-FTP Pr
38、o、CuteFTP、LeechFTP、FLASHftp等。四、发布网页的步骤 以在发布为例： 登陆到亿唐 租用服务器或虚拟主机。 根据亿唐的要求，办理手续。 上传已制作的网页5.2 网页测试一、网页测试法 1. 尽量多使用几种不同的Web浏览器测试网页 2. 尽量不要使用最新版本的浏览器进行网页测试 3. 尽量在多种操作系统中测试网页二、测试项目 1. 链接测试 主要看网页中是否有超链接掉链的情况。 2. 外观测试 3. 速度测试 速度越快越好。 4. 脚本和程序测试 测试页面中的JavaScript以及CGI程序是否能正常工作。5.3 网站维护一、网站更新 进行网页更新最有用的依据是日志记录
39、。二、网站升级 服务器软件的升级和操作系统的升级。5.4 安全问题 1. 病毒 2. 特洛伊木马 会使你的计算机受到别人的控制。 3. 黑客 “好心”的黑客有可能帮你修补系统。 4. 工业间谍 真正的危险者。第6章 Dreamweaver网页设计技术 Dreamweaver是一套视觉化的网页开发工具，利用它可以轻而易举地制作出跨越平台和浏览器限制的充满动感的网页。 通过Dreamweaver 提供的“所见即得”的友好编辑功能，编写ASP、JSP、CFML甚至PHP程序，从而创建动态网站系统。教学重点与难点教学重点与难点页面版面设计使用资源面板创建模板6.1 Dreamweaver 简介一、操作
40、界面 Dreamweaver 4由两个部分组成，即页面编辑器和站点管理器。 1.页面编辑器 分为五个部分：菜单栏、工具栏、控制菜单栏、工具栏、控制面板、文件工作区、状态栏面板、文件工作区、状态栏。其中控制面板有属性面板、对象面板、样式面板、帮属性面板、对象面板、样式面板、帮助面板助面板等。2站点管理器的构成 站点管理器左侧窗口显示了站点地图，右侧窗口显示了当前网站中的文件列表。一般来说，在做站点时应先建立好站点，再开始网页的制作，这样可以保证页面内文件链接的正确性。6.2 Dreamweaver 制作基础一、创建网页 启动Dreamweaver 4，就会自动生成一个白色背景的文件工作区，这里就
41、是设计和制作网页的地方，可以在这里输入网页设计过程中所需要的文字、图片、表格、Flash动画等。 网页的背景颜色的，以及文字的颜色都是可以通过“Page Properties”设置的。二、文字的编辑 可以直接在网页中输入文字，可以在【Text】下设置文字的格式，如字体、字号、颜色、粗体、斜体，段落居左、居中及居右，添加项目符号及编号等。此外，还可以利用HTML样式和CSS样式对文字进行统一格式设置。 可以利用属性面板更改文字的大小、颜色、字体等。三、插入图像 在网页中插入一幅图片时，图片文件必须位于当前站点中。 在对象面板中选择插入图片图标，此时系统将打开“选择图像源文件”对话框。找到需要插入
42、的图片文件，选择“Select”。 Dreamwaver支持常用的网页图片格式有扩展名为“GIF”、“JPG”、“JPEG”、“PNG”的图形文件。四、插入鼠标变换图片 该图片对象的特点是当鼠标经过该图片时，图片内容会自动更新。实际上，它是由两幅图片组成的，一幅为主图片，显示在页面中；一幅为滚动图片，当鼠标经过图片所在区域时显示。单击对象面板中的图标，或者选择【Insert】菜单的“Interactive Images”子菜单中的“Rollover Image”命令可实现该操作。五、创建图片热点 在插入的图片上，可以是交换式图片，可以把图片分为若干个区域，每个区被称为“热点”，可以为每个热点指
43、定相关的链接。当单击某个热点时，系统显示相关的网页。当绘制完热区后，属性面板会显示热区的属性。 还可以调整热点区尺寸。六、插入水平线 在对象面板中选择按钮，在页面中点击，画面会自动生成一条水平线，在水平线上单击，可以设置水平线的宽度、高度、对齐方式、是否有阴影等参数。七、插入邮件链接 创建邮件链接的作用是当浏览者点击该链接时，系统将自动启动计算机中的邮件发送程序。八、插入日期 在对象面板中选择按钮，在页面中点击，会弹出对话框，可以设置日期格式、星期格式、时间格式，点击“OK”，就会在页面中自动加上时间。九、插入Flash对象 1插入Flash影片 2制作Flash文字 3制作Flash按钮十、
44、表格的应用 1插入表格 2表格属性面板 表格属性面板中的设置项对整个表格起作用，如果想对表中的某一行单独设置，首先选中表的某一行，再利用单元格属性面板进行设置。 3表格的选取 4添加表格内容5单元格的合并与拆分十一、 层的应用 层是网页中的一种容器，它可定位在页面上的任意位置，并且其中可包含文本、图像、表单等所有可直接用于文档的元素。 1创建层 2层的大小调整 3层的移动 4层的属性面板5层控制面板6层的动态效果十二、框架的应用 创建普通框架集 利用框架属性面板来设置该框架是否要边线以及边线的颜色、边线宽度、框架的名称和框架中所要显示的源文件。 可以查看框架集的文件的源代码，这里面只保存了框架
45、信息和它所对应的源文件。十三、行为面板的使用 通过行为面板可以在网页上制作出一些简单的交互效果。行为由两个部分组成，即事件和动作，通过事件的响应执行对应的动作。 事件是用于指明执行某项动作的条件，动作实际上是一段执行特定任务的预先写好的JavaScript代码，如打开窗口、播放声音等都是动作。十四、模板的运用1准备模板2定义区域3应用模板6.3 用Dreamweaver 建立Web站点一、定义一个本地站点 当定义一个本地站点时，首先应该确认让Dreamweaver 在哪儿为这个站点存储所有的文件。二、 创建站点首页 当建立完站点之后，就可以打开站点管理器，通过它管理站点，往站点内添加网页及其它
46、文件，三、查看站点文件和链接 当建立完首页之后，就可以编辑首页，然后添加与其相关的网页，网页之间的相互链接可以通过站点管理器来查看。6.4 Dreamweaver 制作网页实例一、网页布局设计 以表格形式组织。二、网页内容设计 图片的处理与制作，要借助Fireworks或者Photoshop完成，Flash动画在Flash中完成，对于图像、动画，可以在插入对象之后，赋予它们不同的属性，比如超链接、动作设置等。第7章 Photoshop图像处理基础 6.0版本的Photoshop比以前版本加强了网络方面的功能以及文字编辑能力，重新布局了菜单系统，使操作更加简便、功能更加强劲。它的出现使人们告别了
47、对图片进行修正的传统的手工方式，还可使人们通过想象，创造出现实世界里无法拍摄到的图像。教学重点与难点教学重点与难点工具箱的使用使用图层色彩和色彩调整7.1 Photoshop简介一、操作界面 Photoshop6.0的整个界面分为四个部分：菜单栏、工具栏、控制面板、状态栏菜单栏、工具栏、控制面板、状态栏。 菜单栏 工具栏 控制面板 状态栏二、工具箱三、控制面板 1.导航器和信息面板 2. 颜色、色板和样式面板 3. 动作和历史记录 4. 图层、通道及路径四、色彩模式 1RGB模式 RGB就是色光的色彩模式。R代表红色，G代表绿色，B代表蓝色，三种色彩叠加形成了其他色彩，所以RGB模式是一种加色
48、模式。 2CMYK模式 减色模式，C代表青色，M代表洋红色，Y、K代表黄、黑色。色彩范围不及RGB。 3HSB模式 在HSB模式中，H代表色相，S代表饱和度，B代表亮度。 4Lab模式 Lab模式既不依赖于光线，又不依赖于颜料。它是CIE组织确定的一个理论上包括了人眼可见的所有色彩的色彩模式。 5索引颜色模式 6灰度模式 7位图模式 8多通道模式 9双色调模式五、文件格式 PSD和PDD文件格式：PSD文件和PDD文件是Photoshop软件专用的格式，能保存图像数据的每一个细小部分，包括像素信息，颜色模式信息，图层信息，通道信息，蒙版信息，PSD和PDD格式文件特别大。 1BMP格式 BMP
49、 是 DOS 和 Windows 兼容计算机系统的标准 Windows 图像格式。 2GIF格式 GIF 是一种 LZW 压缩格式，用来最小化文件大小和电子传递时间。 3PCX格式 4TGA格式 5PXR格式 6JPEG格式 JPEG格式是所有压缩格式中最卓越的，JPEG 格式支持 CMYK、RGB 和灰度颜色模式，不支持 Alpha 通道。 7TIFF格式 TIFF 是一种灵活的位图图像格式，实际上被所有绘画、图像编辑和页面排版应用程序所支持。 8EPS格式 9Filmstrip格式7.2 Photoshop处理图像实例一、网站logon图标的制作二、背景图案的制作第8章 Flash动画制作
50、基础 Flash 5能够创作出极具吸引力的高效网页。它可以轻易与Macromedia 公司的图像处理软件FreeHand和Fireworks集成，直接导入这些软件制作的图像。它还提供功能强大的开发工具，使用户可以创建高级的网站和网络应用。教学重点与难点教学重点与难点帧的操作元件的概念元件的应用8.1 Flash简介一、操作界面 Flash5的整个界面包括：菜单栏、工具栏、工具箱、控制面板、舞台、时间轴以及活动窗口。二、工具箱三、 控制面板 1信息、变形、描绘、填充面板 2混色面板与色彩样本面板 3字符面板、段落面板、文本选项面板 4实例面板、特效面板、帧面板、声音面板 5对齐面板(Action
51、s) 、场景面板（Scene） 6剪辑参数面板 7 动作面板 8动画管理器面板四、图库窗口 图库窗口可以用来存放和组织我们创建的符号，还是存放导入声音，位图图形的地方。五、时间轴与舞台 舞台与时间轴是动画制作的主要场所。时间轴是调整和控制动画的地方。六、工具条按钮和工具提示8.2 Flash动画范例一、网站logon动画的制作二、滚动图片动画的制作第9章 Fireworks 4图形处理 使用Fireworks可以创建和编辑位图、矢量图形和动画，还可以实现网页设计中常见的交互效果，比如翻转图像，下拉菜单等，设计完成以后，可以将它输为HTML和JavaScript代码的网页文件，还能输出为可以在P
52、hotoshop、Ilstrator和Flash等软件中编辑的格式。教学重点与难点教学重点与难点位图和矢量图交互按钮的制作图标的制作9.1 Fireworks简介一、操作界面 Fireworks4的整个界面里包括：菜单栏、工具栏、工具箱、控制面板、文件窗口以及活动窗口。二、 工具箱 三、控制面板 1笔触、填充、效果、信息面板 2优化面板（Optimize）、对象面板（Object）、行为面板（Behaviors） 3混色面板(Mixer)、色彩样本面板(Swatches)、面板(Table)、选项面板 4层面板（Layers）、框架面板（Frames）、历史面板（History） 5样式面板（
53、Styles）、库面板（library）、超链接面板（URL）四、文件窗口 Fireworks 的文件窗口是我们绘制和编辑创作的地方，标题栏显示了文件的名字和当前的显示放大率。五、工具栏 主工具栏（main）、调整栏（modify），主工具栏主要用于打开、保存、复制、粘贴和打印文件等。调整工具栏用于对工作区的对象进行组合、放置、定方向和对齐等功能。六、工具箱矢量模式与位图模式 1矢量图 矢量图使用线段和曲线描述图像，所以称为矢量，同时图形也包含了色彩和位置信息。 2位图 位图使用称为像素的一格一格的小点来描述图像。 9.2 Fireworks交互按钮的制作一、文件的建立二、制作过程 1绘制一个
54、矩形 2转化为Symbols(符号) 3编辑按钮9.3 网站logon图标的制作1. 新建2. 调入标志3. 粘贴标志4. 标志的处理5. 输入文字6. 图层调整第10章 其他工具介绍 随着电脑软件技术的发展，网页设计软件也不断的发展，各种各样的网页制作工具，层出不穷，要制作自己有特色的网页，就需要我们掌握和了解各种网页制作工具，利用好各种工具的特点，这样，在制作网页时，就会更加轻松，更加有效果。教学重点与难点教学重点与难点工具的分类工具的选择10.1 网页设计工具软件的简介 以网页制作的内容来划分网页制作工具，可分为如下几种： 1. Web创作与网站管理软件 2. HTML编辑软件 3.动画
55、制作软件 4.图形图像制作处理软件 5.音频视频制作处理软件10. 2 Web创作与网站管理软件 GoLive6是一个优秀的可视化网页开发工具，提供有更加灵活的源代码编辑器，能快速方便地编辑、检查HTML代码，而且能非常容易地增加动态HTML、层叠样式表、编辑QuickTime物件，还预设有JavaScript事件和更加先进的网站管理功能，预览设计结果的操作也更加方便。10.3 HTML编辑软件 HTML编辑软件有很多很多，如HotDog、CoofeeCup、HomeSite等几个比较大的软件，在网上可以找出很多比较小的HTML编辑软件来如Mini NoteTab、Arachnophilia等
56、等，当然，我们也可以用系统自带的“记事本”来修改编辑Html文件。10.4 动画制作软件 1. Adobe Imageready3.0 2. LiveMotion 2.0 3.Ulead GIF Animator 4. Ulead Cool 3D10.5 图形图像软件 图形图像制作处理软件非常之多，如Photoshop、Firework、CorelDraw、Illustrator、Freehand等等。10.6 音频视频处理软件 多媒体信息已成网页的一个重要内容，因此，制作网页时往往会用到音频、视频编辑制作软件。音频、视频的编辑制作软件有也有很多，比较常用的有Adobe Premiere 6.
57、0。第11章 在网页中使用JavaScript JavaScript是一种基于对象的脚本语言，可嵌入到HTML网页中。它除了内置了一些常用对象，还可以使用浏览器提供的对象，甚至可以创建新对象。通过采用事件驱动机制，使其能在客户端（浏览器）与用户实现大量的交互、还能创建出惊人的特效。教学重点与难点教学重点与难点事件驱动机制对象的概念和使用JavaScript内置对象浏览器对象11.1 JavaScript 简介 JavaScript是一种简洁的、面向对象的、跨平台的描述语言，JavaScript和Java很类似，但并不相同。Java是一种比JavaScript复杂许多的语言，由SUN公司开发；而
58、JavaScript则是简单而小巧的语言，由Netscape公司推出。一、JavaScript的特点 JavaScript是一种基于对象(Object Based)和事件驱动(Event Driven)并具有安全性能的脚本语言。 1.基于对象 2.简单性 3.安全性 4.动态性 5.跨平台二、JavaScrip运行和编辑环境三、在Html中嵌入JavaScript脚本 在Html中使用JavaScript时，应将JavaScript程序放在标记间。1.在Html中加入已有的JavaScript脚本文件2.考虑不支持JavaScript的浏览器 可以把JavaScript源程序放在HTML的注释
59、标记内，从而使不支持JavaScript的浏览器把它当作HTML的注释而忽略JavaScript源程序。11.2 JavaScript语言结构一、数据和运算符 1数据：有六种数据类型 JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。2运算符 （1） 算术运算符 （2） 比较运算符 （3） 逻辑运算符 （4） 字符串运算符 （5） 位运算符 （6） 赋值运算符二、语句和程序控制 1一般语句 （1） 数据声明语句 var 变量名=初始值 （2） 赋值语句 由赋值表达式组成的语句。 （3） 注
60、释语句 /：单行注释，从“/”开始到本行行尾都为注释； /*.*/：多行注释，从“/*”开始到“*/”结束为注释。2选择结构 （1） if.else语句 if (条件) 执行分支语句1 else 执行分支语句2 （2） switch语句 switch (expression) case label1: 语句串1； case label2: 语句串2； case label3: 语句串3； . default : 语句串3； 3循环结构 （1） for语句 for (循环变量初始化; 循环变量结束条件; 循环变量自增/减变化) 循环体 （2） while语句 while (循环条件) 循环体 （
61、3） do-while语句 do 循环体 while(循环条件); （4） break语句 break语句结束当前的各种循环，并执行循环语句的下一条语句。 （5） continue语句： continue语句结束当前的循环，跳过本次循环并马上开始下一个循环。4函数定义语句：function，return function 函数名(参数列表) 函数功能的实现部分 return 表达式 /return语句将表达式的值返回主调程序 5书写语句的注意事项（1） 多个语句可以放在同一行，只要每个语句之间用分号分开即可。（2）分号是JavaScript的分行符，但不同行之间也可不用分号。（3）较长的Jav
62、aScript语句可以由多行文本组成，不需要续行符。（4）语句前可加标号语句确定执行程序的转移点。11.3 JavaScript的事件驱动一、事件 任何能引起JavaScript代码运行的操作，都称为事件(event)。事件是浏览器响应用户交互操作的一种机制。 事件大多数是由WEB用户触发的。普通的事件包括：页面元素上的单击(单选按钮、submit按钮、链接等)。二、事件类型ClickFocusBlurChangeMouseOverSelectSubmit三、如何监测事件 具体形式为：onEvent“JavaScript program”四、 如何调用事件处理器1函数调用 这是一个链接 2直接
63、代码：通过直接在双引号间书写JavaScript代码来实现事件处理器。11.4 JavaScript的对象 把常用的对象封装起来提供给用户，用户可以使用JavaScript的内置对象、浏览器提供的对象、服务器提供的对象，还可以创建自己的对象扩展JavaScript的功能。一、对象的概念 1对象的基本结构 由属性(properties)和方法(methods)构成。 2引用对象的途径 （1）引用JavaScript内部对象； （2）引用由浏览器提供的对象； （3）创建新对象。 3对象专有的操作符和语句 （1） for.in语句 For(属性名 in 对象名) 该语句用于对对象的所有属性进行操作的
64、控制循环，而无需知道属性的个数。 （2）with语句 with object JavaScript语句 在该语句体内，任何对变量的引用被认为是这个对象的属性。 （3）this关键词。 this是对当前的引用，用于将对象指定为当前对象。 （4）new运算符 创建一个新的对象 Newobject=NEW Object(Parameters table); 4对象属性的引用 （1）使用点运算符(.) person.Name=“李刚” （2）以数组形式访问属性 person0=“李刚” （3）使用属性名 personName=“李刚” 5对象方法的引用 ObjectName.methods()二、Ja
65、vaScript内部对象的属性和方法 1常用内部对象 （1）string：字符串对象 有一个属性length和19个方法。 （2）math：算术对象 是静态对象，主要有8个属性和18个方法，提供除加、减、乘、除外的数值运算。（3）date：日期及时间对象 动态对象，使用时必须用New运算符创建一个实例。 2、JavaScript中的系统函数 提供与任何对象无关的系统函数，使用这些函数不需创建任何实例，可直接调用。三、浏览器内部对象系统 使用浏览器的内部对象系统，可实现与HTML文档进行交互。 1浏览器对象层次及其主要作用 浏览器中提供了窗口(Window)对象以及历史(History)对象和位
66、置(Location)对象。 2文档（Document）对象功能及其作用 在浏览器中，document文档对象是核心，其主要作用是把HTML页面的基本元素(如links,anchor等)封装起来。 3窗口（Window）对象及输入输出 JavaScript输出可通过文档(document)对象的方法来实现，而输入通过窗口(Window)对象来实现。 （1）窗口及输入输出 （2）窗口对象的事件驱动 （3）窗口对象的方法 （4）窗口对象中的属性 4表单（Form）对象 （1）表单中的基本元素有：Text单行文本输入框、Textarea多行输入框、Select选择元素、Button按钮、CheckB
67、ox复选框、Radio单选钮、Password口令输入框、Submit提交按钮等。 （2）表单对象的访问 通过名称访问表单 通过数组来访问表单 （3）表单元素Text单行文本输入框TextArea多行输入框Select选择元素Button按钮CheckBox复选框Radio单选钮Hidden隐藏Password口令 Submit提交按钮 5框架（Frames）对象 （1）浏览器把框架的属性、方法和事件封装起来，作为对象提供给JavaScript使用。框架对象是窗口对象的子对象，其本身也一类窗口，它继承了窗口对象所有的属性和方法。 （2）访问框架 使用window对象中的Frames属性。 pa
68、rent.framesIndex1.docuement.formsindex2四、创建新对象 JavaScript中创建新对象很简单：首先定义一个对象，然后为该对象创建一个实例。 1对象的定义Function Object(属性表)This.prop1=prop1This.prop2=prop2.This.meth=FunctionName1;This.meth=FunctionName2; 2创建对象实例 一旦对象定义完成后，就可以为该对象创建了一个实例：NewObject=New object();其中Newobjet是新的对象，Object是已经定义好的对象。 3对象方法的使用 为对象定
69、义的方法：This.meth=FunctionName对象的方法就是一个函数FunctionName，通过它实现自己的意图。 4JavaScript中的数组 （1）使用New创建数组Function arrayName(size)This.length=Size;for(var X=; X=size;X+)thisX=0;Reture this; （2）内部数组11.5 JavaScript实例 1.在状态栏显示当前时间 2.显示用户进入主页所停留的时间 3.飘扬的五星红旗第12章 ASP动态网页制作基础 ASP的工作方式与客户端脚本不同，其实质是在服务器端由asp脚本动态生成静态html网页
70、，再送回客户端。这种方式使得ASP能创建真正具有动态内容的网页。其完善的内置对象体系使其功能非常完备，而其内置组件和组件的可扩展性使其功能更为强大，而且易于使用。教学重点与难点教学重点与难点ASP的工作方式ASP的内置对象ASP的内置组件12.1 ASP简介一、什么是ASPASP-Active Server Pages二、ASP的工作方式 对于服务器来说，ASP页与普通HTML页是不同的。普通HTML文件不经处理就发送至浏览器；而ASP文件需要先编译，利用动态内容，生成HTML文件，再发送至浏览器。三、ASP的工作平台四、怎样用ASP编写动态网页 1 创建ASP网页 如果要在HTML文件中添加
71、脚本，只需将该文件的扩展名.htm或.html替换为.asp就可以了。使用任何的文本编辑器都可以创建.asp文件，常用的编辑ASP页的软件有Visual Interdev、ASP Editor等。 2 使用脚本语言 任何与ActiveX脚本标准兼容的脚本语言都可在ASP中使用经常被使用的有VBScript、JavaScript、Perl或REXX等。 由于脚本是在服务器端读取和处理的，所以请求.asp文件的客户端浏览器并不需要支持脚本语言。 将脚本加入ASP最简单的方法是使用脚本定界符。12.2 VBScript脚本语言简介 VBScript是Visual Basic的一个子集，编程方法和Vi
72、sual Basic基本相同。一、VBScript的数据和运算符 1. 数据类型 VBScript只有一种数据类型，即Variant类型，Variant类型可以在不同场合代表不同类型的数据。 2 变量 （1）声明变量：显式声明和隐式声明。 显式声明要用到Dim语句。例如： 隐式声明是指脚本中第一次使用变量时，就自动创建该变量。例如： （2）变量命名约定 VBScript不区分大小写。 （3）变量的作用域 过程内部声明的变量称为过程级变量或局部变量，这样的变量只有在声明它们的过程中才能使用，即无法在过程外部访问；过程外部声明的变量称为脚本级变量或全局变量，即在同一个.asp文件中的任何脚本命令均
73、可访问和修改该变量的值。过程级和脚本级变量可以同名，修改其中一个变量的值，不会影响另一个。 3 常量 在程序执行期间，常量的值不会发生改变，可以在代码的任何位置使用常量代替实际值。在VBScript中，还可以用Const语句来定义自己的常量。Const conPi=3.14159265358979 4 数组 具有相同名字不同下标值的一组变量称为数组变量，简称数组。 （1） 固定数组 （2） 动态数组 5 运算 （1）算术运算 （2）连接运算 （3）关系运算 （4）逻辑运算 （5） 运算符的优先顺序二、VBScript的语句 1 一般语句 （1）注释语句 注释符采用西文单引号“” （2）赋值语句
74、 2 控制语句 （1）选择结构 单行if语句和块if语句 select case语句 （2） 循环结构 Do-Loop循环：重复执行一个语句块，重复次数不定。 For循环：For循环含有一个计数变量，每重复一次循环，计数变量的值就会增加或减少。For counter=start To end Step increment statementsNext counter 3 with语句 with语句用于对某个对象执行一系列操作，而不用重复指出对象的名字。 4 过程 过程是用来执行特定任务的独立的程序代码。VBScript根据是否返回值将过程划分为Sub过程（子过程）和Function过程（函数）
75、。 （1）子过程 子过程是不返回值的过程：Sub procedurename(arguments)statementsEndSub 用Call语句调用子过程的语法是： Call procedurename(arguments) 用子过程名直接调用的语法是：procedurename arguments （2）函数 函数有一个最重要的特点，就是调用时将返回一个值。函数的语法是：Function funname(arguments) statementsfunname=expression statementsEnd Function 函数中至少要含有一条为函数设置返回值的语句。 （3）按地址传递
76、和按值传递 默认时，参数是按地址传递，即过程按变量的内存地址去访问实际变量的内容。这样将变量传给过程时，通过过程就可以改变变量的值。如果在编程时想明确指定参数是按地址传递的，请用关键字ByRef。如果想按值传递参数，请用ByVal关键字。 （4）数组参数 数组作为参数传递时，与普通参数有些不同。过程中声明数组参数时，必须略去数组的长度，即设置一个动态数组，因为过程被调用前通常无法预知数组的长度。由于数组参数没有声明长度，因而调用时可以使用任意长度的数组作为输入值。在调用语句中，只需给出要传递的数组名即可，不必包括数组的下标及圆括号。12.3 ASP内置对象一、 Request对象 在ASP中，
77、将“客户端请求”与“服务器响应”的动作封装成Request对象与Response对象。Request对象通常包括了客户端的相关信息，如浏览器的种类、表头信息、表单参数及cookies等。Request对象的语法格式如下： Request.collection|property|method(variable) 其中collection表示Request对象的数据集合，property表示其属性，method表示其方法，变量参数（variable）是一些字符串，这些字符串或者指定要从集合中检索的项目，或者作为方法或属性的输入。 1. Request对象的属性 Request对象的属性只有一个：R
78、equest.TotalBytes。这是一个只读属性，存放着客户端通过HTTP请求发送的正文的字节总数。 2. Request对象的方法 Request对象的方法也只有一个：Request.BinaryRead。用于检索从客户端发送到服务器作为POST请求的一部分的数据。 3. Request对象的数据集合 Request对象按照数据的不同功能将其分成了Form、QueryString、Cookies、ServerVariables及ClientCertificate等数据集合。二、Response对象 Response对象用于动态响应客户端请求（Request），并将动态生成的响应结果返回到
79、客户端浏览器中，使用Response对象可以动态创建web页面，改变HTTP标题头，还可以自动将客户端重定向（Redirect）到一个指定的页面中，另外如要向客户端写入Cookies时，Response对象也是一种很好的工具。 Response的使用语法为： Response.collection|property|method 其中collection表示Response对象的集合，property表示Response对象的属性，method表示Response对象的方法。 1. Response对象的方法Response.Write任何类型数据Response.Redirect URLRe
80、sponse.FlushResponse.End 2. Response对象属性Buffer属性CacheControl属性Charset属性ContentType属性Expires属性ExpiresAbsolute属性IsClientConnected属性PICS属性Status属性 3. Response对象的数据集合 Response对象只有Cookies一个数据集合。三、Sever对象 Server 对象提供对服务器上的方法和属性的访问，其中大多数方法和属性是作为实用程序的功能服务的。语法如下：Server.property|method 其中property表示Server对象的属性
81、，method表示Server对象的方法。 1. Servr对象属性 Server的属性只有一个ScriptTimeout属性。该属性表示超时值，即脚本运行超过这一时间之后作超时处理。 2. Server对象方法 Server对象提供来了CreateObject、HTMLEncode、MapPath、URLEncode等方法。四、Session对象 在ASP中，通过Session对象记录用户的相关信息，用来作为用户再次对服务器提供要求时作确认。当用户请求来自应用程序的 Web 页时，如果该用户还没有会话，则 Web 服务器将自动创建一个Session对象。当会话过期或被放弃后，服务器将终止该会
82、话。会话状态仅在支持Cookie的浏览器中保留。语法如下：Session.collection|property|method Session对象在global.asa文件中声明两个事件Session_OnEnd、Session_OnStart的脚本。 1. Session对象的事件 Session对象对应两个事件： Session_OnEnd、Session_OnStart。 2. Session对象的方法 Session对象只提供了Abandon方法，Abandon 方法删除所有存储在Session对象中的对象并释放这些对象的源。 3.Session对象的属性 Session对象提供属性包
83、括TimeOut、SessionID、CodePage、LCID等。五、 Application对象 Application对象是对所有用户，Session对象是对单一用户。因为多个用户可以共享Application对象，所以必须要有Lock和Unlock方法以确保多个用户无法同时改变某一属性。其语法如下：Application.method 1.Application对象的事件 当每个Application对象开始时，会激活一个Application_OnStart事件；当Application对象结束时会激活一个Application_OnEnd事件。 2. Application对象的方
84、法 Application对象提供了Lock方法与UnLock方法.语法如下：Application.Lock 锁定Apploication对象Application.UnLock 解锁Apploication对象 3.Application对象的数据集合 Application对象数据集合包括Contents数据集合与StaticObject数据集合。六、ObjectContext对象 使用ObjectContext对象，就允许程序在网页中直接配合Microsoft Transaction Server（MTS）使用，从而可以管理或开发高效率的Web服务器应用程序。 1.ObjectCont
85、ext对象的使用 ObjectContext对象使用是在ASP中使用TRANSACTIO关键字来完成的，语法如下： 2. ObjectContext对象的方法 ObjectContext提供了SetAbort方法与SetComplete方法。 3.ObjectContext对象的事件处理程序 ObjectContext对象提供了OnTransactionCommit、OnTransactionAbort两个事件处理程序，前者是在事务完成时被激活，后者是在事务失败时激活。语法如下：SubOnTransactionCommit() 处理程序End Sub12.4 ASP内置组件 ASP的内置组件有
86、13种，还可以安装其它组件。一、 Ad Rotator组件 使用Ad Rotator组件可以很容易的实现在网页上插入一个循环播放广告横幅的播放器。 1.Ad Rotator组件相关文件 一般来说，Ad Rotator组件除了必要的Adrot.dll文件外，还要有循环定时文件，另外也可以有重定向文件。 2. Ad Rotator组件的属性和方法二、Browser Capabilities组件 Brower Capabilities组件可以轻松地获取客户端浏览器的类型，据此，启用浏览器支持的特性，屏蔽不支持的特性。 Browser Capabilities组件除包含一系列属性、方法外，也有一个外部
87、驱动文件Browscap.ini文件。 1. Browscap.ini文件 主要定义了各种浏览器所具有的属性。 2.Browser Capabilities组件的使用 同Ad Rotator组件一样。三、 File Access组件 用来访问计算机文件系统的方法和属性。 File Access组件是由FileSystemObject对象、TextStream对象组成。 1. FileSystemObject对象 FileSystemObject对象提供对计算机文件系统的访问，共有24种方法和一种属性。其语法如下：Scripting.FileSystemObject 2. TextStream对
88、象 TextStream对象的使用可以有助于顺序访问文件，可以协助利用File Access组件启动或建立的文件。语法如下：TextStream.property | method四、 Content Linking组件 Content Linking组件的主要目的在于管理网页或网址间的超文本链接，可以通过一个网页或网址的线性排列顺序列表来管理多个网页或网址间的超文本链接顺序。 1.线性排列顺序文件 也叫内容链接列表文件，是一个文本文件，其中包含Web页的列表，这些Web页按所列的顺序显示，该文件必须在Web服务器的虚拟路径上可用。 2. Content Linking组件方法 同其它组件一样
89、，该组件有它自己的方法。五、Database Access组件 使用Database Access 组件，Web开发人员可以很容易地实现在Web应用程序中访问数据库。Database Access组件通过 ActiveX Data Objects (ADO)访问存储在数据库或其他表格化数据结构中的信息，同时支持ODBC3.0的数据库连接特征，因此具有很强的数据库存取能力。第13章 PHP语言简介 PHP是一种易于学习和使用的服务器端脚本语言，只需要很少的编程知识就能使用PHP建立一个真正交互的WEB站点。教学重点与难点教学重点与难点PHP的程序结构PHP的语法PHP实例13.1 PHP 概述一
90、、PHP的历史二、PHP的特点 学习简单；容易与数据库连接；可扩展性强；可伸缩性强三、 PHP 与其它 CGI 的比较13.2 PHP的安装一、安装Web伺服器二、安装PHP 在网站上下载php-4.1.2-installer.exe 程序，通过运行就可以安装上PHP。13.3 PHP的语法一、一个简单的PHP 程序First program 这段程序不需经过编译等复杂的过程，只要将它放在相应Web伺服器的目录下，如将它存成文件hello.php。通过浏览器，在地址栏输入http:/localhost/web/php/hello.php，就可以在浏览器上看到“hello, world !”字串
91、出现。二、 PHP 的基本结构 1.嵌入方法 2.包含文件 3.程序注解和分割符 多行注解时，尽量不要嵌套。三、 PHP 的数据处理 在PHP中， 为了方便编程，加入很多特性，例如变量可以不用声明类型就可以直接定义使用，而且类型可以改变。 1.数据类型和变量 内部数据类型的类型分为：整数（integer）、双精度型（double）、字符串（string）、数组（array）、对象（object）。 2.常数 3.变量作用范围 所有变量都是局部变量，为了使得定义的函数中可以使用外部变量，使用global语句。而要将该变量的作用范围限制在该函数之内，使用static语句。四、PHP 的运算符 1.
92、算术运算符 2.字串运算 3.赋值运算符 4.逻辑运算符 5.位运算符 6.其它运算符 7.优先权：不同的运算符，有优先顺序。五、基本流程控制 1. if.else 循环 2. do.while 循环 3. for 循环 4. switch 循环 5.其它的流程控制 有 break 及 continue 二个流程控制指令。六、函数 PHP 中的函数 (function) ，包括有返回值的及无返回值的。函数的使用语法：function myfunc($arg_1, $arg_2, ., $arg_n) / 执行一些动作 return $retval;七、对象 PHP 的对象有类别 (class)
93、、方法 (method)、属性、以及单一继承 (extensions) 13.4 PHP编程实例一、访客计数器 二、留言版第14章 XML语言简介 本章通过一个部门联系信息表的事例，综合讲述了XML文档、文档类型说明（DTD）以及样式单三方面要素，讲述了XML的方方面面。教学重点与难点教学重点与难点XML的术语文 档 类 型 说 明（DTD）XML的显示（样式单）14.1 XML 概述一、 XML 的历史 XML 同 HTML 一样，都来自 Standard Generalized Markup Language，即标准通用标记语言。二、 XML的定义 可扩展置标语言 XML（Extensib
94、le Markup Language）也是一种置标语言。 XML提供了一个标准，可以根据实际需要定义新的置标语言，并为这个置标语言规定它特有的一套标签。准确的说，XML 是一种元置标语言，它允许根据提供的规则，制定各种各样的置标语言。三、 XML 的优缺点 1. XML 的优点 2. XML 的缺点 3. XML与HTML的比较14.2 XML 的语法 XML 允许“随心所欲”地建立自己的标记集，但这个标记集建立起来，就必须严格遵守XML语法和标记集的规定，这个 XML 文件应该是“形式良好的”（well-formed）。一、XML 文件的逻辑结构 1.XML文件的整体结构 2.用XML声明作
95、为开头 3. XML元素：标记数据内容/标记 4.字符数据 5.标记：标记名 （属性名=“属性取值”）* 6.特殊标记CDATA： 7.注释：用“！-”和“-”引起来 8.处理指示二、 XML文件的物理结构 1.实体：实体充当着和别名类似的角色，即一个简单的实体名称可以用来代表一大段文本内容。 2.实体的两种类型：一般实体和参数实体。 3.实体的使用方式：实体声明和实体引用。14.3 XML 的文档类型说明 一个XML文件必须遵守文件类型描述DTD（Document Type Definition）中定义的各种规定。DTD描述了一个置标语言的语法和词汇表，也就是定义了文件的整体结构以及文件的语
96、法。 XML的处理指示中所有单词必须都是小写的，但所有DTD中的关键字都必须是大写的。一、 内部DTD 一个包含DTD的XML文件的结构为：文件体. 这样就定义了一个文件，它以DOCTYPE中规定的根元素名作为其根元素的名字。二、外部DTD 一个DTD既可以是内部的，包含在XML文件中（standalone=“yes”）；也可以是外部的，作为一个外部文件被引用（standalone=“no”）。 引用一个外部DTD，必须修改XML声明和DOCTYPE声明。在DOCTYPE声明中，应该加入SYSTEM属性：三、元素类型声明 为了定义文件结构中的细节，必须展开DTD中元素说明部分，使用元素类型声明
97、（ETD）来声明有效的文件元素。四、定义元素及其子元素 DTD尽管要求严格，但也有它的灵活性。使用正则表达式，可以描述父元素与子元素之间非常复杂的关系。五、定义有效的元素属性 在DTD中定义属性时，使用下面的格式： ATTLIST是一个属性的列表，它可以包含很多属性，在实际应用中，一个元素也经常有多个属性。 1.属性缺省值 2.元素类型 3.实体属性类型与参数实体144 XML的显示样式单 样式单(Style Sheet)是一种专门描述结构文档表现方式的文档，它既可以描述这些文档如何在屏幕上显示，也可以描述它们的打印效果，甚至声音效果。样式单一般不包含在XML文档内部，而以独立的文档方式存在。
98、两种样式单：层叠样式单CSS（Cascading Style Sheets）和可扩展样式单语言XSL（eXtensible Stylesheet Language）。一、 CSS概述 利用CSS，可以定义HTML或XML文档中元素的显示效果，包括元素的位置、颜色、背景、边空、字体、排版格式等等。 CSS的基本思想是为文档中的各个标记定义出相应的一组显示样式。格式为：选择符 样式属性：取值；样式属性：取值；. 1.选择符 ：施加样式的元素 2.样式属性：样式属性就是指元素的哪些属性可以在样式单中给予改变，包括字体属性、颜色属性、背景属性、文本属性、边框属性等，还有一些与页面排版、跨媒体出版相关的
99、内容。 根据属性的不同，属性值的选取也有所不同，主要不外乎以下四种：长度、URL、颜色、关键字。二、使用CSS显示XML文档 在XML文档中使用CSS的方式两种方式： 引用式和嵌入式。 1.引用式 是指XML文档本身不含有样式信息，通过引用外部CSS文档来定义文档的表现形式。实现方法是，在XML文档的开头部分写一个关于样式单的声明语句： 2.内嵌式 指将CSS样式直接嵌入到XML文档内部，为元素设置style属性，并在属性值中给出对其样式的定义。三、XSL概述 XSL它是通过XML进行定义的，遵守XML的语法规则，是XML的一种具体应用。在XML中的声明： 四、XSL句法与函数 1.文档结构
100、XSLT文档是XML文档，因此文档的第一句是： 接下来是样式单部分： 2.模板及应用 3.计算节点值 4.循环处理 5.排序 6.元素与属性创建 XSLT是一个动态的样式单，在处理过程中可产生新的元素或元素属性。 7.节点拷贝 8.输出格式与编码问题第15章 网站制作综合实例 本章将从整体的角度介绍如何设计一个完整的网站。教学重点与难点教学重点与难点网站的设计原则网站的准备工作网站的发布15.1 网站的设计原则及标准一、 设计的原则 1.总体原则 2.主题鲜明、结构合理 3.组织网页：将丰富的内容和多样的形式组织在一个统一的结构中，表达出设计者的思想和情感，实现形式和内容的统一。 4.设计网站
101、的主页二、设计标准 首先整个网站应该保持一致的风格，给浏览者以整体的美感。多样化的格式和标志会使网页更生动，但要把握一个“度”。其次要控制网页的大小，如果文件过大 、图片过多会使网页的浏览很慢，而使浏览者失去耐心，整个网站的吸引力也就随之下降。最后网站的全部内容都要紧扣网页设计的目标，使网站的主题鲜明。15.2 准备工作 要设计一个网站首先要准备好以下项目：申请域名；申请空间；网站规划；选择配色方案；准备素材及选用设计工具；设计网站。15.3 具体设计和规划一、确定网站建立的目的二、涉及的内容三、收集资料四、安排布局五、绘制流程图15.4 建立网站 对于DreamWeaver可按照如下步骤建立
102、网站： （1）选择“站点菜单”“新建站点”，就会弹出“建站”对话框； （2）选择“站点”“新建站点”，会弹出“定义站点”窗口，输入站点名称和站点位置，其它选择默认值，就可以了。15.5 主页的制作 首先考虑主页要使用什么结构，是采用框架结构，还是单页，一般是单页；其次还要考虑主页的内容安排和网页的布局；可以插入计数器和一些完成其它的工具或代码（如显示时间、用户名等）。15.6 网页的上传和维护 网页的上传一般是通过FTP软件工具连上服务器的，FTP软件很多，有CutFtp、LeapFtp等，如果没有，也可利用IE连上服务器，完成网页的上传。 以后要修改，只要把改过的网页重新拷贝到网站，覆盖原来的就完成修改。
