《网站建设与网页制作复习精选专业课件》由会员分享，可在线阅读，更多相关《网站建设与网页制作复习精选专业课件（99页珍藏版）》请在金锄头文库上搜索。
1、网站建设与网页制作 学习内容 网站建设概述网站建设概述 网页界面设计艺术网页界面设计艺术 HTML语言简介语言简介 织网工具织网工具Dreamweaver 动态网页技术动态网页技术教学要求了解一定的网页制作的高级部分，包括用来实现前台交互、制作动感网的DHTML和实现后台交互、制作动态网页的ASP。掌握网页界面设计的方法和要素，版式设计、文字编排、图形和动画的应用、色彩的应用等。掌握网页制作各项基本技能，包括HTML语言、可视化网页制作工具（Dreamweaver）具有较强的自主设计与制作网页的基本素质具有较强的自主设计与制作网页的基本素质与能力。与能力。课程特点网页建设与网页制作是一门以实际
2、技能训练为主要教/学内容与目标的实践性课程，知识学习与技能训练的有机结合贯穿于整个教/学过程。最终将以学习者是否以学习者是否具有独立设计并建设网站的基本能力与实具有独立设计并建设网站的基本能力与实践结果作为考核的主要评判标准。践结果作为考核的主要评判标准。学习方法 3P一体化，即 Principle、 Practice、 Product (原则) 、 (实践) 、 (作品 )考试与实验说明出勤 10%实验(网站设计 ) 20%期末笔试 70%考试课程体系结构以电子商务、网页制作为中心的多元化授课体系以电子商务、网页制作为中心的多元化授课体系网站建设概述网站建设概述HTML语言基础语言基础网页网
3、页制作制作工具工具网页网页美化美化工具工具网络网络新领域、新领域、新技巧新技巧网站网站建设建设网页制作网页制作第1章 网站建设概述第一节第一节 WWW基础知识基础知识第二节第二节 网页界面构成要素网页界面构成要素第三节第三节 网站开发常用工具网站开发常用工具第四节第四节 网站建设与规划网站建设与规划第1节 www基础知识 WWW服务的基本概念服务的基本概念 WWW服务的特点服务的特点 WWW服务的工作方式服务的工作方式 WWW服务的常用术语服务的常用术语 1. WWW服务的基本概念 WWW（World Wide Web，全球信息网）全球信息网）是以超文本标记语言（是以超文本标记语言（HTML,
4、HyperText Markup Language）与超文本传输协议与超文本传输协议（HTTP，Hyper Text Transfer Protocol)为基为基础，提供面向础，提供面向Internet服务、具有一致的用户界服务、具有一致的用户界面的信息浏览系统。面的信息浏览系统。n9、 人的价值，在招收诱惑的一瞬间被决定。人的价值，在招收诱惑的一瞬间被决定。2024/9/262024/9/26Thursday, September 26, 2024n10、低头要有勇气，抬头要有低气。、低头要有勇气，抬头要有低气。2024/9/262024/9/262024/9/269/26/2024 8:0
5、5:48 PMn11、人总是珍惜为得到。、人总是珍惜为得到。2024/9/262024/9/262024/9/26Sep-2426-Sep-24n12、人乱于心，不宽余请。、人乱于心，不宽余请。2024/9/262024/9/262024/9/26Thursday, September 26, 2024n13、生气是拿别人做错的事来惩罚自己。、生气是拿别人做错的事来惩罚自己。2024/9/262024/9/262024/9/262024/9/269/26/2024n14、抱最大的希望，作最大的努力。、抱最大的希望，作最大的努力。26 九月九月 20242024/9/262024/9/26202
6、4/9/26n15、一个人炫耀什么，说明他内心缺少什么。、一个人炫耀什么，说明他内心缺少什么。九月九月 242024/9/262024/9/262024/9/269/26/2024n16、业余生活要有意义，不要越轨。、业余生活要有意义，不要越轨。2024/9/262024/9/2626 September 2024n17、一个人即使已登上顶峰，也仍要自强不息。、一个人即使已登上顶峰，也仍要自强不息。2024/9/262024/9/262024/9/262024/9/262. WWW服务的特点(1)超媒体特性。在WWW中可以多媒体（如文本、图像、声音、动画、影像等）的形式传递信息，从而更吸引人的
7、注意力；使传播的信息更易于接受和理解，从而达到更好的传播效果。(2)以超文本（Hypertext）方式组织多媒体信息。Web中含有指向其它Web页或其本身内部特定位置的超级链接(HyperLink)，可理解为“指针”。任何文字、图片、图标等都可被指定为一个超链接。当你选择链接，只要用鼠标在链接上单击一下，就会跳转到链接的内容并显示在你的计算机上。n9、 人的价值，在招收诱惑的一瞬间被决定。人的价值，在招收诱惑的一瞬间被决定。2024/9/262024/9/26Thursday, September 26, 2024n10、低头要有勇气，抬头要有低气。、低头要有勇气，抬头要有低气。2024/9/
8、262024/9/262024/9/269/26/2024 8:05:48 PMn11、人总是珍惜为得到。、人总是珍惜为得到。2024/9/262024/9/262024/9/26Sep-2426-Sep-24n12、人乱于心，不宽余请。、人乱于心，不宽余请。2024/9/262024/9/262024/9/26Thursday, September 26, 2024n13、生气是拿别人做错的事来惩罚自己。、生气是拿别人做错的事来惩罚自己。2024/9/262024/9/262024/9/262024/9/269/26/2024n14、抱最大的希望，作最大的努力。、抱最大的希望，作最大的努力。
9、26 九月九月 20242024/9/262024/9/262024/9/26n15、一个人炫耀什么，说明他内心缺少什么。、一个人炫耀什么，说明他内心缺少什么。九月九月 242024/9/262024/9/262024/9/269/26/2024n16、业余生活要有意义，不要越轨。、业余生活要有意义，不要越轨。2024/9/262024/9/2626 September 2024n17、一个人即使已登上顶峰，也仍要自强不息。、一个人即使已登上顶峰，也仍要自强不息。2024/9/262024/9/262024/9/262024/9/26(3) 用户可以在世界范围内任意查找、检索、浏览信息。(4)
10、 网点间可以互相链接，以提供信息查找和漫游的透明访问。3. WWW服务的工作方式WWW浏览器软件安装在用户的计算机上，用户必须通过浏览器来查看服务器上的内容。当客户通过浏览器向服务器发送一个查询请求时，服务器负责对来自客户机的请求做出回答，找到信息和传递文件给用户；当客户机接收到文件，浏览器软件解释该文件在客户机上，用户才能在屏幕上看到。WWW系统的结构采用系统的结构采用客户机客户机/服务器服务器模式。模式。4. WWW服务的常用术语1.URL（统一资源定位符）统一资源定位符）Internet中使用URL(UniformResourceLocators)来定位信息资源所在位置。URL格式由三部
11、分组成，描述了浏览器检索资源所用的协议、资源所在计算机的主机地址及资源的路径与文件名。标准的URL如下：http:/ 网页网页WWW服务器上的基本信息单位就是网页。网页是单个的HTML文件，是作者公布信息的最小单位。3. 网站网站网站是一个存放在WWW服务器服务器上的完整信息的集合体，由一组相关联的网络文件组成，包含一个或多个网页。4. 主页（首页）主页（首页）主页是一个特殊的网页，是整个网络文件的起始点和汇总点，读者开始浏览网络文件的开始点。第2节 网站界面的基本要素文字图像声音视频与动画超级链接表格表单导航栏1.文字文字是人类最重要的信息载体与交流工具，网页中的信息也以文字为主要表现形式。
12、与图像相比，文字虽然不如图像那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。网页中的文字主要有标题文字和说明性文字。此外，用户还可以在网页中设计各种各样的文字列表，来清晰表达一系列项目。可以对网页中的文字赋予字体、字号、颜色等属性。由文字制作出的网页占用空间小，因此，当用户浏览时，可以很快的展现在用户面前。2. 图像一个优秀的网页，除了有吸引浏览者的文字形式和内容外，图像的表现功能是不能低估的。图像能将信息传达的更生动、形象、直观，增强了网页的宣传力、号召力、感染力。 1. 链接按钮链接按钮网页上的链接按钮有一些是由小图片取代文字制作，具有直观、形象的特点，可使网页更加美观。
13、2. 背景图像背景图像为了加强视觉效果，有些网页在整个网页的底层放置了图像（称作背景图）来衬托主题来衬托主题。但是一个比较大的图像，需要占据较大的空间，致使网页的显示速度明显变慢。 3. 主图主图在网页中，通常会放置一些图片来突出网页主题。主图与背景图不同，背景图是衬托主题，而主图是突出主题、表现主题主图是突出主题、表现主题。网页中使用的图像格式网页中常用的图像文件格式为GIF,JPEG(JPG),PNG，其中使用最广泛的是GIF和JPEG两种格式。GIF是GraphicsInterchangeFormat的简写，用来存储Indexed-Color模式的图像。它是采用无损压缩方式压缩的图像文件
14、格式。它的GIF89a格式，能储存成背景透明化的形式，并且可以将多张图片保存在同一个GIF文档中，而且能以默认播放的顺序显示这些图片，用来创造动画的效果。普通普通GIF文件文件 背景透明背景透明GIF89A文件文件 动画动画GIF89A文件文件JPEG是其制定组织JointPhotographicExpertsGroup的简称，其压缩的方法属于一种失真的处理方式，可以依所需的压缩比率调整图片品质，以得到最小的图片尺寸。 PNG是PortableGraphicsNetwork的简称，在1996年才由W3C(WorldWideWebConsortium)所制定的Web标准图片格式。它采用的是一种无
15、损压缩方式，PNG格式也可生成透明背景。目前没有普遍应用于网页设计。3.声音声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3、RM等。很多浏览器不要插件也可以支持MIDI、WAV格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。在网页中使用声音有两种方式，一是使用声音文件作为背景音乐，这时应尽量使用MIDI格式，否则会影响网页下载的速度。另一种方式是在网页中设置一个打开声音文件的链接，让音乐播放变得可以控制。4.视频与动画视频视频文件的格式也非常多，网页中常用的有Ram、AVI等。 Ram格式需使用专门的播放器播放。网页中使用的
16、动画动画通常为gif和swf两种动画文件类型。 swf格式需要使用flash播放器。视频和动画的采用让网页变得精彩而有动感。5.超级链接超级链接超级链接是从一个网页指向另一个目的端的链接，例如指向另一个网页或者相同网页上的不同位置。这个目的端通常是另一个网页，但也可以是一幅图片，一个电子邮件地址，一个文件，一个程序或者是本网页中的其他位置。其热点通常是文本，图片或图片中的区域图片中的区域，也可以是一些不可见的程序脚本。当浏览者单击超级链接热点时，其目的端将显示在Web浏览器上，并根据目的端的类型以不同方式打开。例如，当指向一个AVI文件的超级链接被单击后，该文件将在媒体播放软件中打开；如果单击
17、的是指向一个网页的超级链接，则该网页将显示在Web浏览器上。加下划线的文字，就是已经建立了超链接的文本。6.表格在网页中表格用来控制网页中信息的布局方式。这包括两方面：一是使用行和列的形式把许多相互关联的信息集中起来，便于用户分析、比较；二是可以利用表格来控制各种网页元素在网页中布局定位，对网页进行排版。利用表格利用表格进行排版进行排版7.表单网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件，Web页，电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的
18、身份登陆站点等。表单由不同功能的表单域组成，最简单的表单也要包含一个输入区域和一个提交按钮。站点浏览者填写表单的方式通常是输入文本，选中单选按钮或复选框，以及从下拉列表框中选择选项等。8.导航栏导航栏 导航栏是用户在规划好站点结构，开始设计主页时必须考虑的一项内容。导航栏的作用就是引导浏览导航栏的作用就是引导浏览者游历站点者游历站点。事实上，导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。在设计站点中的诸网页时，可以在站点的每个网页上显示一个导航栏，这样，浏览者就可以既快又容易的转向站点的其他网页。 一般情况下，导航栏应放在网页中较引人注目的位置，通常是在网页的顶部
19、或一侧。导航栏既可以是文本链接，也可以是一些图形按钮。9.框架页面 一一般般情情况况下下都都是是一一个个浏浏览览器器窗窗口口显显示示一一个个的的WebWeb页页面面，这一类页面简单、直观制作方便。但是当要求在一个窗口内容纳大量信息时，比如一个大型网站的首页，这种页面就很难胜任了。这时，我们就必须运用框架技术来解决问题。框框架架的的作作用用就就是是把把浏浏览览器器窗窗口口划划分分为为若若干干个区域，每个区域显示不同的网页。个区域，每个区域显示不同的网页。提示提示:网页界面重要的网页界面重要的一个元素一个元素课程体系结构以网页制作为中心的多元化授课体系以网页制作为中心的多元化授课体系网站建设概述网
20、站建设概述HTML语言基础语言基础网页网页制作制作工具工具网页网页美化美化工具工具网络网络新领域、新领域、新技巧新技巧网站网站建设建设第2章 网站开发常用工具一、网页开发工具二、网页美化工具三、网页动画工具网页制作基础-HTML语言vHTMLHTML语言的一些基本概念；语言的一些基本概念；vHTMLHTML语言的语法；语言的语法；vHTMLHTML文本的基本结构；文本的基本结构；vHTMLHTML语言的标记及其用法；语言的标记及其用法；vHTMLHTML实例；实例；这里是网页标题这是我的第一个网页这是用HTML语言编写的，以后还要学习网页编著工具。以下是一个网页的源代码：这是显示结果：HTML
21、语言的一些基本概念 1.什么是HTML？HTML：Hypertext Marked Language，即超文本标记语言，即超文本标记语言,是一是一种用种用 来制作超文本文档的简单标记语言。用来制作超文本文档的简单标记语言。用HTML编写的超文本编写的超文本文档称为文档称为HTML文档，它能独立于各种操作系统平台（如文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。等）。超文本超文本：因为它可以加入图片、声音、动画、影视等内容，因为它可以从一因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接个文件跳转到另一个文件，与世界各地
22、主机的文件连接。 2.HTML语言的构成HTML文件由标记、代码和注释组成。标记：HTML中用来控制文字、图形等显示方式的符号。如 网页上面的标记里面包含了属性和值注释：HTML语言的语法规则扩展名为：扩展名为：*.htm或或*.html。HTML不区分大小写。不区分大小写。多数多数HTML标记可以嵌套，但不可以交叉。标记可以嵌套，但不可以交叉。HTML文件一行可以写多个标记，一个标记可文件一行可以写多个标记，一个标记可分多行书写，不用任何续行符。分多行书写，不用任何续行符。HTML文件中换行、回车和空格的表示方法分文件中换行、回车和空格的表示方法分别是别是,和和 .HTML文本结构n
23、 HTML 文件的正文写在这里. . n和和:是是HTML文件的开始和结束标记。浏览文件的开始和结束标记。浏览器从器从开始执行到开始执行到结束。结束。n和和之间的内容表示文件的头部信息：标题、之间的内容表示文件的头部信息：标题、预定义变量等。预定义变量等。n标记表示网页的标题，中间不能用别的标记。标记表示网页的标题，中间不能用别的标记。n和和标记：网页中所有的内容均包含在其间。标记：网页中所有的内容均包含在其间。HTML语言的标记及其用法n1.页面标记页面标记nnn显示在标题栏中。仅有一个。显示在标题栏中。仅有一个。n中间可以嵌套多个中间可以嵌套多个标记标记，添置多种，添置多种属性属性，来设置
24、主体内容的背景，外观等。，来设置主体内容的背景，外观等。n显示文本或图像显示文本或图像.该标记建立超链接，标记中该标记建立超链接，标记中间可以嵌套其他标记，如图像标记间可以嵌套其他标记，如图像标记Image、文、文本格式标记本格式标记font等。例如：等。例如：nhref:链接目标的地址；链接目标的地址；target:链接目标的窗口名；若链接目标的窗口名；若nwindowname不存在，则打开一个新窗口。不存在，则打开一个新窗口。HTML语言的标记及其用法n标尺线标记；属性有：标尺线标记；属性有：width(绝绝对、相对）对、相对）size、align（left、right、center)、c
25、olor.n2.文字格式标记文字格式标记n标题设置标记：标题设置标记：.n：标题字号（：标题字号（1，2，3，4，5，6）数字越小，字号越大。）数字越小，字号越大。n属性有：属性有：face(字体）字体）,size(字号，字号，1-7，值越大，字越大），值越大，字越大）nHTML语言的标记及其用法n字型设置标记字型设置标记HTML语言的标记及其用法n段落标记段落标记n强制换行标记强制换行标记.n预排格式标记预排格式标记.n文本对齐方式标记文本对齐方式标记属性有：属性有：align、style等。等。n:之间加入的文本将会在浏览器中按两边缩进的方式显示出来。n3.列表标记列表标记n无序列表无序列
26、表:用来创建一个标有圆点的列表；n有序列表有序列表:它是用来创建一个标有数字的列表；HTML语言的标记及其用法n4.表格标记表格标记建立表格；其间可建立表格；其间可以通过加入多个标记和属性来建立表格。以通过加入多个标记和属性来建立表格。有关表格的标记有：有关表格的标记有：表格的说明；表格的说明；开辟一行；开辟一行；开辟一列；开辟一列；HTML语言的标记及其用法n5.图像和多媒体记标图像和多媒体记标nnn6.超链接标记超链接标记nn7.表单标记表单标记nHTML语言的标记及其用法n背景色彩和文字色彩属性背景色彩和文字色彩属性lbgcolor - 背景色彩背景色彩 ltext - 非可链接文字的色
27、彩非可链接文字的色彩 llink - 可链接文字的色彩可链接文字的色彩 lalink - 正被点击的可链接文字的色彩正被点击的可链接文字的色彩 lvlink - 已经点击已经点击(访问访问)过的可链接文字的色彩过的可链接文字的色彩 #=rrggbbl色彩是用色彩是用 16 进制的进制的 红绿蓝红绿蓝(red-green-blue, RGB) 值来表示。值来表示。HTML语言的标记及其用法n背景图像n绝对地址和相对地址n当前目录n使背景不滚动 n HTML语言的标记及其用法n页面空白（Magin):n页面左边的空白 页面上方的空白(天头) n页面右边的空白n页面下方的空白 #=是数字本章练习n1
28、.用用HTML语言编辑一个语言编辑一个.htm文件，使其在浏文件，使其在浏览器上显示的效果如下图所示：览器上显示的效果如下图所示：n2.为自己设计的站点用为自己设计的站点用HTML语言制作静态网语言制作静态网页。页。课程体系结构以网页制作为中心的多元化授课体系以网页制作为中心的多元化授课体系网站建设概述网站建设概述HTML语言基础语言基础网页网页制作制作工具工具网页网页美化美化工具工具网络网络新领域、新领域、新技巧新技巧网站网站建设建设第三章 网页制作工具之-Dreamweaver4.0n一、一、Dreamweaver桌面的基本结构；桌面的基本结构；n二、二、Dreamweaver的菜单功能和
29、实现；的菜单功能和实现；n三、三、 Dreamweaver的常用操作；的常用操作；n四、四、 Dreamweaver应用；应用；Dreamweaver桌面的基本结构v标题栏：显示当前正在编辑的文件的标题栏：显示当前正在编辑的文件的标题标题。括号中显示。括号中显示文件名；文件名；v菜单栏：菜单栏：Dreamweaver所有的功能都可以在菜单中找到；所有的功能都可以在菜单中找到；v工具栏：一些常用的操作图标。包括视图工具、页面标题工具、工具栏：一些常用的操作图标。包括视图工具、页面标题工具、文件管理工具等。文件管理工具等。v文档窗口：其内容根据所选视图的不同而不同；文档窗口：其内容根据所选视图的不
30、同而不同；v状态栏：显示当前文档的信息或一些编辑状态。包括状态栏：显示当前文档的信息或一些编辑状态。包括 以下几种：以下几种： 标签选择器标签选择器: : 页面信息；页面信息； 微型发射台：微型发射台：v各种工具面板。各种工具面板。状态栏n标签选择器n可以用来显示光标所在位置或所选对象的层次结构，在页面中选可以用来显示光标所在位置或所选对象的层次结构，在页面中选定某个对象后，标签选择器中会将选择的标签加粗显示。定某个对象后，标签选择器中会将选择的标签加粗显示。n页面信息n第一项，用于显示和控制文档窗口的大小，单击旁边的小箭头，第一项，用于显示和控制文档窗口的大小，单击旁边的小箭头，可以从列表中
31、选择窗口的尺寸。第二项，用于显示和估计文档的可以从列表中选择窗口的尺寸。第二项，用于显示和估计文档的大小及下载这个页面所需时间，包括所有与其相链接的图片及大小及下载这个页面所需时间，包括所有与其相链接的图片及Shockware电影。电影。n微型发射台：即常用窗口快捷工具栏，如即常用窗口快捷工具栏，如Site（站点管理器）、（站点管理器）、Library（库管理）、（库管理）、CSS Styles（样式编辑器）、（样式编辑器）、Html Source（源代码编辑器）等窗口。（源代码编辑器）等窗口。n点点击击windows-launcher.可可以以看看到到迷迷你你发发射射器器放放大大的的样样子子
32、（如如下下图所示），叫做图所示），叫做“Launcher”面板，点击这里弹出相应的窗口。面板，点击这里弹出相应的窗口。Launcher面板v即微型发射台。即微型发射台。v通过通过Window-launcher命令调出该面板；命令调出该面板；v该面板提供了快速显示其他面板的功能；该面板提供了快速显示其他面板的功能；v用户可以定制符合自己风格的用户可以定制符合自己风格的Launcher面板。面板。vEditpreferences命令，选择命令，选择Panels.可以添加、删可以添加、删除或对元件进行排序。除或对元件进行排序。v演示定制面板；演示定制面板；对象（Objects）面板v可以按下可以按下
33、Ctrl+F2键（或键（或window-object菜单）将其菜单）将其调出。调出。v该面板集成了该面板集成了“Insert”主菜单中的命令，用于在网主菜单中的命令，用于在网页中插入图形、表格等内容。页中插入图形、表格等内容。v单击面板上部的小三角，可以在多个功能面板之间切单击面板上部的小三角，可以在多个功能面板之间切换。换。面板中各图标功能介绍nCharacter选卡：选卡：nCommand选卡：选卡：nForm选卡：选卡：nFrames选卡：选卡：nHead选卡：选卡：nInvisibles选卡：选卡：nSpecial选卡：选卡：v可以按下可以按下Ctrl+F3键（或键（或window-p
34、roperties菜单）将其调出。菜单）将其调出。v属性面板主要用来设定元素的属性。属性面板主要用来设定元素的属性。v该面板随着我们选择对象的不同而不同。该面板随着我们选择对象的不同而不同。v面板中有一个向下的小三角图标，单击后将出现更多的扩展属性。面板中有一个向下的小三角图标，单击后将出现更多的扩展属性。再次单击小三角图标，将关闭扩展属性，恢复到最初状态。再次单击小三角图标，将关闭扩展属性，恢复到最初状态。下面给出的分别是选中窗口时（上）和选中图像时（下）的属性窗口：下面给出的分别是选中窗口时（上）和选中图像时（下）的属性窗口：属性面板属性面板代码面板打开代码面板：打开代码面板：1.Wind
35、ow-Code Inspector;2.键盘上的键盘上的F10键；键；3.单击文件工作窗口右下方的按钮；单击文件工作窗口右下方的按钮；设置代码面板设置代码面板：设置代码形式：设置系统、面板上以及固定字体的大小、样式等。设置代码形式：设置系统、面板上以及固定字体的大小、样式等。设置代码面板的背景、文字和标记的顔色：设置代码面板的背景、文字和标记的顔色：均在均在EditPreferences命令打开的对话框中进行（如下图）命令打开的对话框中进行（如下图）可停靠浮动面板n可以通过可以通过WindowHistory显示历史面板；显示历史面板；n默认情况下历史面板中最多可记录前面默认情况下历史面板中最多
36、可记录前面50步操作；可在步操作；可在Edit|Preferences命令下的命令下的General选卡中设置。选卡中设置。n历史面板的具体应用（演示）：历史面板的具体应用（演示）：撤销改变；撤销改变；清空历史面板；清空历史面板；自动完成任务；自动完成任务；nHistory面板如下图所示：面板如下图所示：Dreamweaver的菜单功能和实现n1.FILE菜单：菜单： New:新建一个文件；新建一个文件； New from Template:利用已经存在的模板来新建文件；利用已经存在的模板来新建文件； Open:打开一个已经存在的文件；打开一个已经存在的文件； Open in Frame:在框
37、架中打开文件；在框架中打开文件； Close:关掉目前所有的窗口；关掉目前所有的窗口； Save:保存对当前文件的修改；保存对当前文件的修改； Save as:将当前文件改名另存；将当前文件改名另存； Save as Template:将当前文件存为模板；将当前文件存为模板； Save All Frames:保存当前所有框架的文件；保存当前所有框架的文件； Revert:将当前文件恢复至上一次存盘时的状态；将当前文件恢复至上一次存盘时的状态； Import:导入各种格式的文件；导入各种格式的文件； Export:导出各种形式的文件；导出各种形式的文件； Convert:转换浏览器方式；转换浏览
38、器方式； Preview in Browser:指定浏览器或编辑浏览器列表；指定浏览器或编辑浏览器列表； Debug in Browser:在浏览器中进行调试；在浏览器中进行调试； Check Links:检查链接是否正确；检查链接是否正确； Check Target Browsers:用不同的浏览器浏览当前页面；用不同的浏览器浏览当前页面； Design Note:设计节点；设计节点； Exit:退出退出UltraDev4程序。程序。 nEdit菜单：菜单：nUndo:取消上一步操作；取消上一步操作；nRedo:重新执行被撤消的操作；重新执行被撤消的操作；nCut:剪切所选择区域并将内容复制
39、到剪贴板上；剪切所选择区域并将内容复制到剪贴板上；nCopy:将所选择内容复制到剪贴板中；将所选择内容复制到剪贴板中；nPaste:将剪贴板上的内容放入到当前位置；将剪贴板上的内容放入到当前位置；nClear:清除所选区域的内容；清除所选区域的内容；nCopy HTML:只将所选区域的只将所选区域的HTML代码拷贝到剪贴板上；代码拷贝到剪贴板上；nPaste HTML:将剪贴板中内容的将剪贴板中内容的HTML代码复制到当前位置；代码复制到当前位置；nSave All:保存窗口中的所有文件；保存窗口中的所有文件；nSelect Parent Tag:选择当前标签的父标签；选择当前标签的父标签；n
40、Select Child:选择当前标签的子标签；选择当前标签的子标签；nFind and Replace:查找与替换功能；查找与替换功能；nFind Next:查找满足条件的下一个元素；查找满足条件的下一个元素；nIndent Code:代码缩进；代码缩进；nOutdent Code:代码突出，不缩进；代码突出，不缩进；nBalance Braces:匹配括号；匹配括号；nSet Breakpoint:在当前位置设置断点；在当前位置设置断点；nRemove All Breakpoint:删除所有断点；删除所有断点；nEdit With External Editor:启动外部编辑器进行编辑；启
41、动外部编辑器进行编辑；nPreference:UltraDev4的工作参数；的工作参数；nKeyboard Shortcuts:设置菜单项和工具等的快捷键。设置菜单项和工具等的快捷键。nView菜单：菜单：nCode:只显示代码；只显示代码；nDesign:只显示页面设计情况；只显示页面设计情况；nCode and Design:同时显示代码和页面设置情况；同时显示代码和页面设置情况；nRefresh Design View:刷新页面设计窗口；刷新页面设计窗口；nDesign View to Top:定义一个本地站点n在开始用在开始用Dreamweaver制作网页时，首先要制作网页时，首先要定
42、义一个本地站点。作为一个网站，里面有很定义一个本地站点。作为一个网站，里面有很多网页文件、图片，甚至多网页文件、图片，甚至Flash动画等，如果动画等，如果不进行管理归档，分散在硬盘的各个地方就无不进行管理归档，分散在硬盘的各个地方就无法方便地进行网页发布。定义本地站点，就是法方便地进行网页发布。定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管的文件都放在里面，以便进行网页的制作和管理。理。 n单击单击“Site”菜单下的菜单下的“New Site”命令，弹出命令，弹出“Site Definition”（
43、定义站点）对话框。在（定义站点）对话框。在“Category”列表中的第一项列表中的第一项“Local Info”被被选中，用来定义一些本地信息。选中，用来定义一些本地信息。 在WWW（World Wide Web ）发展的初期人们制作网页是通过直接编写HTML代码来实现的。这种手工编码制作网页对网页设计人员的要求较高，编码效率低。因此，对大多数网页设计人员来说采用这个方式比较困难。2.可视化网页编辑工具 随着网页制作技术的不断发展，出现了诸如FrontPage、Dreamweaver等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，由编辑工具自动生成对应的网页代码。 如要
44、在网页上显示表格，就可直接在工作区中绘制表格而不用考虑编码的规则和语法。利用可视化工具编辑网页操作简单直观，是大众化的网页编辑方式。 FrontPage是由Microsoft公司推出的Web页面制作工具软件。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便。 Dreamweaver是由Macromedia公司推出的一款网页制作软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页。Dreamwe
45、aver的网页动态效果与网页排版功能都比一般的软件好用，所以它是网页设计者的首选工具。它可以满足多层次需求，是功能强大的可视化、专业级网页设计及制作工具。3.DHTML技术 DHTML是什么？是什么？ DHTML是 Dynamic Hypertext Markup Language 的缩写。 为了和传统的HTML相区别，DHTML通常称为“动态HTML” 。DHTML将 HTML 、CSS和脚本语言有机结合在一起，来制作充满动感的交互性网页 。HTML用来定义网页元素，如段落、表格等。CSS用来描述元素属性，如大小、颜色、位置等。 脚本语言用来操纵网页元素和浏览器。 4.动态网页技术 在Int
46、ernet早期，Web站点大都是由静态web页组成，静态页面只能固定地显示事先设计好的页面内容。随着Web业务处理越来越多，业务需求层次越来越高，特别是一些特殊的业务需求，比如商业网站中客户资料的获得、产品信息的查询、信息的反馈等，HTML的局限性日益明显，因此能够与用户进行动态交互的技术，就应运而生了。 动态网页页面内容经过了服务端处理，完成了动态网页页面内容经过了服务端处理，完成了动态的个性化设置。动态的个性化设置。 但是客户端用户所接收到的页但是客户端用户所接收到的页面与传统页面并没有任何区别。面与传统页面并没有任何区别。(1)CGI技术 CGI-CommonGatewayInterfa
47、ce，公用网关接口。用来实现CGI应用程序的编程语言有许多种，如VisualBasic、C/C+、Perl等。当用户在浏览器端填好表单要求输入的资料，提出HTTP请求后，Web服务器端执行该表单所设定的CGI应用程序，处理访问者输入的信息并据此做出响应，将其运行结果传输到客户端的浏览器上。 由于CGI程序不是整合在HTML文档中，因此须使用与HTML不同的设计过程来设计一个应用程序，每一次修改程序都必须重新将CGI程序编译成可执行文件。使用CGI方式的缺点是效率低下。 ( 2) ASP技术 ASP （Active Server Pages）是微软公司推出的Web应用程序开发技术。使用ASP可以
48、建立动态的、交互的、高效的Web服务器应用程序。 ASP允许用服务器端脚本来扩展HTML，使HTML编写人员可以利用VBScript、JavaScript或其他第三方脚本语言编程，实现动态网页。如果去掉这些包含实现动态功能的脚本语句，它和标准的HTML文件没有任何区别。 ASP核心技术是对组件和对象技术的充分支持。利用ASP内建对象可以进一步扩展HTML，使脚本更加强大。ASP还包含标准的ActiveX组件， ASP本身封装了一些基本组件和常用组件，同时也可以使用第三方组件，通过访问组件可以简化编程，快速、简易地完善HTML。(3)JSP技术JSP（Java Server Pages）是由Su
49、n公司推出的，基于Java Servlet以及整个Java体系的Web开发技术。利用这一技术可以建立先进、安全和跨平台的动态网站。 JSP和 微软的ASP在技术方面有许多相似之处。两者都是为基于Web应用实现动态交互网页制作提供的技术环境支持。两者都能够为程序开发人员提供实现应用程序的编制与自带组件设计，而且都能够替代CGI使网站建设与发展变得较为简单与快捷，不过两者是来源于不同的技术规范组织。 为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化工具对网页进行美化。二、网页美化工具 Fireworks是Macromedia公司开发的图形处理工具，是专门为制作网页图形而
50、设计的软件，同时也是专业的网页图形设计及制作的解决方案。 作为一款为网络设计而开发的图像处理软件，Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。 Flash是Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页动画制作和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。三、网页动画工具第4节 网站建设与规划有计划
51、、按步骤的进行，才能达到事半功倍的效果。有计划、按步骤的进行，才能达到事半功倍的效果。1.1.分析阶段分析阶段n 研究用户需求，建站目的、提供的服务、网站的功能。n 网站系统分析（业务流程、数据流程分析，开发方法、开发环境选择）。n 规划网站内容。n 制订开发任务，对工作进度进行规划。提供详实的网站系统开发策划书2.设计阶段精心挑选准备要发布的信息资料网站信息结构设计网站链接结构设计站点目录结构设计网页文件命名设计数据库设计网站风格、板式、色彩、logo等设计对网站进行整体设计，以确保网站内容条理清楚、结构合理。不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。准备要发布的信息
52、资料收集整理网站内容所需资料，图像的制作、音频、视频的制作等。要求： 1.应精心挑选要发布的信息资料，要保证网站内容的准确性、独特性。2.引用他人网站的信息，要处理好版权问题，以免潜在的法律问题。网站的信息结构1.线性结构线性结构适合表现内容单一，信息量少的网站。2.树状结构绝大多数网站信息结构主要采用树形结构组织页面内容。由网站文件的主页开始，依次划分为一级页面、二级页面等，逐级细化。 （1）用标题的方式列出打算在站点中展示的所有信息，即按信息内容的主题分组。（2）用小标题的方式细化主题分组，即将主题内容进一步分组为子标题。（3）用流程图的方式将标题、子标题按内在层次关系组织起来。层次关系不
53、宜超过三层，即用户至多经过三次跳转就能访问到所需的信息。流程图是站点开发项目的信息图，展示了信息的层次与任务的流向，是进行总体设计的有效手段。设计信息结构的步骤：设计信息结构的步骤：网站的链接结构网站的链接结构是指页面之间相互链接的拓扑结构。在网站各个页面之间建立链接是极为重要的事，原则是“链接易精不易多链接易精不易多”，过多的链接容易使人晕头转向。另外重要的是应该有返回上一级的按钮。n树状链接结构n星状链接结构n树状与星状结合1.树状链接结构优点优点：条理清晰，容易确定用户的浏览顺序，访问者明确知道自己在什么位置，不会“迷”路。缺点缺点：浏览效率低。2.星状链接结构优点：优点： 浏览方便，随
54、时可到达欲浏览的页面。缺点：缺点：容易使浏览者迷路，搞不清自己在什么位置。 在实际网站设计中，通常将树状与星状这两种结构结合起来使用，达到比较理想的效果。3.树状与星状结合站点目录结构设计网站的目录是指建立网站时创建的文件目录。目录结构的好坏，对浏览者来说并没有什么感觉，但对于站点本身的维护、内容未来的扩充和移植有着重要的影响。步骤1.在驱动器根目录下创建网站文件夹；步骤2.在网站文件夹目录下建立子目录；按文件的类型建立子目录按文件的类型建立子目录按栏目内容建立子目录按栏目内容建立子目录网页文件命名设计1.文件名称统一用小写的英文字母、数字和下划线的组合2.主页文件名用index.htm或in
55、dex.asp3.文件命名原则方便理解每一个文件的意义。尽量用英文，不要用拼音。当我们在文件夹中使用“按名称排列”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换等操作。 例，“新闻”栏目html文件的命名原则：“国内新闻”的网页文件依次取名为：china_1.htm,china_2.htm,；“国际新闻”的网页文件依次取名为：internation_1.htm,internation_2.htm,3. 实现阶段编写网页文档，制作Web页。4. 测试阶段进行网站功能测试、性能测试、安全性测试、稳定性测试、浏览器兼容性测试、可用性/易用性测试。在确保准确无误后,方可正式在Int
56、ernet上发布。5. 维护阶段网站信息是动态的，经常需要变化。这就需要对网站内的HTML文档进行维护、更新和修改。n9、 人的价值，在招收诱惑的一瞬间被决定。人的价值，在招收诱惑的一瞬间被决定。26-9月月-2426-9月月-24Thursday, September 26, 2024n10、低头要有勇气，抬头要有低气。、低头要有勇气，抬头要有低气。*9/26/2024 8:05:50 PMn11、人总是珍惜为得到。、人总是珍惜为得到。26-9月月-24*Sep-2426-Sep-24n12、人乱于心，不宽余请。、人乱于心，不宽余请。*Thursday, September 26, 2024
57、n13、生气是拿别人做错的事来惩罚自己。、生气是拿别人做错的事来惩罚自己。26-9月月-2426-9月月-24*26 September 2024n14、抱最大的希望，作最大的努力。、抱最大的希望，作最大的努力。26 九月九月 2024*26-9月月-24n15、一个人炫耀什么，说明他内心缺少什么。、一个人炫耀什么，说明他内心缺少什么。九月九月 24*26-9月月-24*26 September 2024n16、业余生活要有意义，不要越轨。、业余生活要有意义，不要越轨。*9/26/2024n17、一个人即使已登上顶峰，也仍要自强不息。、一个人即使已登上顶峰，也仍要自强不息。*26-9月月-24
58、谢谢大家谢谢大家n9、 人的价值，在招收诱惑的一瞬间被决定。人的价值，在招收诱惑的一瞬间被决定。2024/9/262024/9/26Thursday, September 26, 2024n10、低头要有勇气，抬头要有低气。、低头要有勇气，抬头要有低气。2024/9/262024/9/262024/9/269/26/2024 8:05:50 PMn11、人总是珍惜为得到。、人总是珍惜为得到。2024/9/262024/9/262024/9/26Sep-2426-Sep-24n12、人乱于心，不宽余请。、人乱于心，不宽余请。2024/9/262024/9/262024/9/26Thursday,
59、 September 26, 2024n13、生气是拿别人做错的事来惩罚自己。、生气是拿别人做错的事来惩罚自己。2024/9/262024/9/262024/9/262024/9/269/26/2024n14、抱最大的希望，作最大的努力。、抱最大的希望，作最大的努力。26 九月九月 20242024/9/262024/9/262024/9/26n15、一个人炫耀什么，说明他内心缺少什么。、一个人炫耀什么，说明他内心缺少什么。九月九月 242024/9/262024/9/262024/9/269/26/2024n16、业余生活要有意义，不要越轨。、业余生活要有意义，不要越轨。2024/9/262024/9/2626 September 2024n17、一个人即使已登上顶峰，也仍要自强不息。、一个人即使已登上顶峰，也仍要自强不息。2024/9/262024/9/262024/9/262024/9/26谢谢大家谢谢大家
