《网页设计制作ppt课件》由会员分享，可在线阅读，更多相关《网页设计制作ppt课件（91页珍藏版）》请在金锄头文库上搜索。
1、网页设计制作学时：32(6+26)主讲：王红艺邮箱：使用软件：Dreamweaver、flash、fireworks等课程目的课程目的o提高动手能力，学会n网页制作n图片、动画制作n简单的WEB数据库编程n网站配置与发布o激发对网络的兴趣，提高使用和利用水平实验安排及联系方式o实验安排可以在实验管理系统中查询o飞信群：32492109讲课提纲一、掌握网页的相关概念：网络、Internet、网站、制作网页的基本步骤二、超文本标记语言HTML三、网页制作四、图形编辑与动画制作五、网站设计与发布六、大作业要求5网页的相关概念网页的相关概念 在制作网页之前应首先了解网络、在制作网页之前应首先了解网络、
2、在制作网页之前应首先了解网络、在制作网页之前应首先了解网络、InternetInternet、网页、网站、网页、网站、网页、网站、网页、网站以及制作网页的基本步骤等相关知识。以及制作网页的基本步骤等相关知识。以及制作网页的基本步骤等相关知识。以及制作网页的基本步骤等相关知识。 计算机网络是将地理位置不同并具有独立工作能力的多个计算机网络是将地理位置不同并具有独立工作能力的多个计算机网络是将地理位置不同并具有独立工作能力的多个计算机网络是将地理位置不同并具有独立工作能力的多个计算机系统和其他设备通过通信线路（网络介质）互连在计算机系统和其他设备通过通信线路（网络介质）互连在计算机系统和其他设备通
3、过通信线路（网络介质）互连在计算机系统和其他设备通过通信线路（网络介质）互连在一起，使用通用的网络协议，实现网络资源共享和互相快一起，使用通用的网络协议，实现网络资源共享和互相快一起，使用通用的网络协议，实现网络资源共享和互相快一起，使用通用的网络协议，实现网络资源共享和互相快速通信的整个信息系统。速通信的整个信息系统。速通信的整个信息系统。速通信的整个信息系统。 1 1什么是什么是什么是什么是 InternetInternet InternetInternet一词来源于英文一词来源于英文一词来源于英文一词来源于英文 InterconnectNetworksInterconnectNetwor
4、ks，即，即，即，即“ “互连各个网络互连各个网络互连各个网络互连各个网络” ” ，中文译名为，中文译名为，中文译名为，中文译名为“ “因特网因特网因特网因特网”。InternetInternet专指全球范围内最大的、由众多网络相互连接专指全球范围内最大的、由众多网络相互连接专指全球范围内最大的、由众多网络相互连接专指全球范围内最大的、由众多网络相互连接而成的、基于而成的、基于而成的、基于而成的、基于 TCP/IPTCP/IP协议的计算机网络。协议的计算机网络。协议的计算机网络。协议的计算机网络。InternetInternet是是是是当今世界最大的计算机互连网络系统，由全球当今世界最大的计算
5、机互连网络系统，由全球当今世界最大的计算机互连网络系统，由全球当今世界最大的计算机互连网络系统，由全球 100100多个国多个国多个国多个国家和地区不同功能的计算机、通信骨干网和各种计算机网家和地区不同功能的计算机、通信骨干网和各种计算机网家和地区不同功能的计算机、通信骨干网和各种计算机网家和地区不同功能的计算机、通信骨干网和各种计算机网络通过线路连接在一起的一个世界范围的网络。络通过线路连接在一起的一个世界范围的网络。络通过线路连接在一起的一个世界范围的网络。络通过线路连接在一起的一个世界范围的网络。 62.TCP/IP2.TCP/IP协议协议协议协议TCP/IPTCP/IP（Transmi
6、ssionControlTransmissionControlProtocol/InternetProtocolProtocol/InternetProtocol），中文译名为），中文译名为），中文译名为），中文译名为传输控制协议传输控制协议传输控制协议传输控制协议/ /互联网络协议），是互联网络协议），是互联网络协议），是互联网络协议），是 InternetInternet最最最最基本的协议，是由底层的基本的协议，是由底层的基本的协议，是由底层的基本的协议，是由底层的 IPIP协议和协议和协议和协议和 TCPTCP协议组协议组协议组协议组成的。成的。成的。成的。 TCP/IPTCP/IP协议
7、的开发工作始于协议的开发工作始于协议的开发工作始于协议的开发工作始于 7070年代，年代，年代，年代，是用于互联网的第一套协议。是用于互联网的第一套协议。是用于互联网的第一套协议。是用于互联网的第一套协议。TCPTCP和和和和 IPIP可以单独使用，但经常是协同工作，可以单独使用，但经常是协同工作，可以单独使用，但经常是协同工作，可以单独使用，但经常是协同工作，互相补充。简单地说，互相补充。简单地说，互相补充。简单地说，互相补充。简单地说，IPIP提供了数据传输的灵活提供了数据传输的灵活提供了数据传输的灵活提供了数据传输的灵活性，性，性，性，TCPTCP提供了数据传输的可靠性。提供了数据传输的
8、可靠性。提供了数据传输的可靠性。提供了数据传输的可靠性。7 3.Internet3.Internet地址地址地址地址 (1)Internet(1)Internet地址地址地址地址 InternetInternet采用一种唯一通用的地址格式，为采用一种唯一通用的地址格式，为采用一种唯一通用的地址格式，为采用一种唯一通用的地址格式，为 InternetInternet中的中的中的中的网络和主机分配一个地址。网络和主机分配一个地址。网络和主机分配一个地址。网络和主机分配一个地址。InternetInternet中地址类型有中地址类型有中地址类型有中地址类型有 IPIP地址和地址和地址和地址和域名地址
9、两种。域名地址两种。域名地址两种。域名地址两种。 IPIP地址地址地址地址 除了可以在统一资源定位器中输入域名来访问需要的资源之外，除了可以在统一资源定位器中输入域名来访问需要的资源之外，除了可以在统一资源定位器中输入域名来访问需要的资源之外，除了可以在统一资源定位器中输入域名来访问需要的资源之外，还可以使用还可以使用还可以使用还可以使用IPIP地址来进行访问。每一台上网的计算机都有一个地址来进行访问。每一台上网的计算机都有一个地址来进行访问。每一台上网的计算机都有一个地址来进行访问。每一台上网的计算机都有一个唯一标识主机的号码，这就是唯一标识主机的号码，这就是唯一标识主机的号码，这就是唯一标
10、识主机的号码，这就是IPIP地址。地址。地址。地址。IPIP地址是一组地址是一组地址是一组地址是一组3232位的数位的数位的数位的数字，如字，如字，如字，如202.106.185.241202.106.185.241。 域名域名域名域名 IPIP地址是一长串的数字号码，这些数字难记又难理解，为了方地址是一长串的数字号码，这些数字难记又难理解，为了方地址是一长串的数字号码，这些数字难记又难理解，为了方地址是一长串的数字号码，这些数字难记又难理解，为了方便用户理解、记忆，科学家们引入了域名的概念。域名是用一些便用户理解、记忆，科学家们引入了域名的概念。域名是用一些便用户理解、记忆，科学家们引入了域
11、名的概念。域名是用一些便用户理解、记忆，科学家们引入了域名的概念。域名是用一些英文字符来代替英文字符来代替英文字符来代替英文字符来代替IPIP地址，这些英文字符一般都是英文单词，也地址，这些英文字符一般都是英文单词，也地址，这些英文字符一般都是英文单词，也地址，这些英文字符一般都是英文单词，也可能是拼音字母，它们基本上和站点名称一致，因此记忆起来就可能是拼音字母，它们基本上和站点名称一致，因此记忆起来就可能是拼音字母，它们基本上和站点名称一致，因此记忆起来就可能是拼音字母，它们基本上和站点名称一致，因此记忆起来就十分容易了。域名的一般书写格式为主机名十分容易了。域名的一般书写格式为主机名十分容
12、易了。域名的一般书写格式为主机名十分容易了。域名的一般书写格式为主机名. .机构名机构名机构名机构名. .地区名，如地区名，如地区名，如地区名，如就是新浪站点的域名。就是新浪站点的域名。就是新浪站点的域名。就是新浪站点的域名。8 4.4.万维网、网页和网站万维网、网页和网站万维网、网页和网站万维网、网页和网站 （1 1）什么是万维网）什么是万维网）什么是万维网）什么是万维网 万维网也称做万维网也称做万维网也称做万维网也称做 WWWWWW，是，是，是，是 WorldWideWebWorldWideWeb（全球（全球（全球（全球信息网）的缩写。万维网提供了非常丰富的信息，各种信息网）的缩写。万维网
13、提供了非常丰富的信息，各种信息网）的缩写。万维网提供了非常丰富的信息，各种信息网）的缩写。万维网提供了非常丰富的信息，各种信息按不同的类型以网页文件的形式分别存放在万维网信息按不同的类型以网页文件的形式分别存放在万维网信息按不同的类型以网页文件的形式分别存放在万维网信息按不同的类型以网页文件的形式分别存放在万维网服务器上，供人们选择查阅。服务器上，供人们选择查阅。服务器上，供人们选择查阅。服务器上，供人们选择查阅。 万维网万维网万维网万维网 WWWWWW制定了一套标准，有容易掌握的超文本制定了一套标准，有容易掌握的超文本制定了一套标准，有容易掌握的超文本制定了一套标准，有容易掌握的超文本 HT
14、MLHTML、统一的资源定位器、统一的资源定位器、统一的资源定位器、统一的资源定位器 URLURL和超文本传输协议和超文本传输协议和超文本传输协议和超文本传输协议（HyperTextTransferProtocolHyperTextTransferProtocol，HTTPHTTP） 。 浏览浏览浏览浏览 WWWWWW必须通过浏览器来完成。浏览器是用来访必须通过浏览器来完成。浏览器是用来访必须通过浏览器来完成。浏览器是用来访必须通过浏览器来完成。浏览器是用来访问问问问 InternetInternet的超文本技术，是使用最广泛的网络软件，的超文本技术，是使用最广泛的网络软件，的超文本技术，是使
15、用最广泛的网络软件，的超文本技术，是使用最广泛的网络软件，它可以提供包括它可以提供包括它可以提供包括它可以提供包括 WWWWWW的浏览、搜索、网络资讯的打的浏览、搜索、网络资讯的打的浏览、搜索、网络资讯的打的浏览、搜索、网络资讯的打印和收发印和收发印和收发印和收发 E-mailE-mail的功能。的功能。的功能。的功能。 在浏览器中，比较有代表性的有在浏览器中，比较有代表性的有在浏览器中，比较有代表性的有在浏览器中，比较有代表性的有 IEIE（InternetInternetExplorerExplorer） 、NetscapeNetscape和和和和 OperaOpera等。还有国内等。还有
16、国内等。还有国内等。还有国内腾讯公司的腾讯公司的腾讯公司的腾讯公司的TTTT浏览器。浏览器。浏览器。浏览器。 9 （2 2）网页和网站）网页和网站）网页和网站）网页和网站 组成组成组成组成 WWWWWW的基本元素是网页，网页也称为页面或的基本元素是网页，网页也称为页面或的基本元素是网页，网页也称为页面或的基本元素是网页，网页也称为页面或 WebWeb页。页。页。页。 网页的定义网页的定义网页的定义网页的定义 在网上浏览时看到的一个个页面就是网页。如图在网上浏览时看到的一个个页面就是网页。如图在网上浏览时看到的一个个页面就是网页。如图在网上浏览时看到的一个个页面就是网页。如图1-11-1所所所所
17、示即为一个网页的界面。示即为一个网页的界面。示即为一个网页的界面。示即为一个网页的界面。 网页的分类网页的分类网页的分类网页的分类 按网页在一个站点中所处的位置可将其分为主页和内页按网页在一个站点中所处的位置可将其分为主页和内页按网页在一个站点中所处的位置可将其分为主页和内页按网页在一个站点中所处的位置可将其分为主页和内页（分支页面），主页是指进入一个站点时看到的第一页，（分支页面），主页是指进入一个站点时看到的第一页，（分支页面），主页是指进入一个站点时看到的第一页，（分支页面），主页是指进入一个站点时看到的第一页，内页（分支页面）是指与主页相链接的页面。内页（分支页面）是指与主页相链接的页
18、面。内页（分支页面）是指与主页相链接的页面。内页（分支页面）是指与主页相链接的页面。 按网页的表现形式可将网页分为静态网页和动态网页。按网页的表现形式可将网页分为静态网页和动态网页。按网页的表现形式可将网页分为静态网页和动态网页。按网页的表现形式可将网页分为静态网页和动态网页。 1011 网站网站网站网站 通常把一系列在逻辑上可以视为一个整体的页面称做通常把一系列在逻辑上可以视为一个整体的页面称做通常把一系列在逻辑上可以视为一个整体的页面称做通常把一系列在逻辑上可以视为一个整体的页面称做网站，或者说网站就是一个相互链接的网页集合，它网站，或者说网站就是一个相互链接的网页集合，它网站，或者说网站
19、就是一个相互链接的网页集合，它网站，或者说网站就是一个相互链接的网页集合，它们可以共享。网站的概念是相对的，大网站（例如们可以共享。网站的概念是相对的，大网站（例如们可以共享。网站的概念是相对的，大网站（例如们可以共享。网站的概念是相对的，大网站（例如“ “雅虎网雅虎网雅虎网雅虎网” ”和和和和“ “新浪网新浪网新浪网新浪网”），页面很多，而且位于多台），页面很多，而且位于多台），页面很多，而且位于多台），页面很多，而且位于多台服务器上；小网站可以是一些个人网站，可能只有几服务器上；小网站可以是一些个人网站，可能只有几服务器上；小网站可以是一些个人网站，可能只有几服务器上；小网站可以是一些个人
20、网站，可能只有几个网页，仅在一台服务器上占据很小的空间。个网页，仅在一台服务器上占据很小的空间。个网页，仅在一台服务器上占据很小的空间。个网页，仅在一台服务器上占据很小的空间。 网站标志（网站标志（网站标志（网站标志（LogoLogo） 利用一切可利用的视觉元素和方法针对主题概括出利用一切可利用的视觉元素和方法针对主题概括出利用一切可利用的视觉元素和方法针对主题概括出利用一切可利用的视觉元素和方法针对主题概括出高度简洁并集中体现站点特色和内涵的图像与文字。高度简洁并集中体现站点特色和内涵的图像与文字。高度简洁并集中体现站点特色和内涵的图像与文字。高度简洁并集中体现站点特色和内涵的图像与文字。
21、在设计网站标志时，可以有代表性的人物、动物和在设计网站标志时，可以有代表性的人物、动物和在设计网站标志时，可以有代表性的人物、动物和在设计网站标志时，可以有代表性的人物、动物和花草作为蓝本进行设计，如新浪的眼睛标志和迪斯尼花草作为蓝本进行设计，如新浪的眼睛标志和迪斯尼花草作为蓝本进行设计，如新浪的眼睛标志和迪斯尼花草作为蓝本进行设计，如新浪的眼睛标志和迪斯尼的米老鼠等。最简单的方法是用网站的英文名称作标的米老鼠等。最简单的方法是用网站的英文名称作标的米老鼠等。最简单的方法是用网站的英文名称作标的米老鼠等。最简单的方法是用网站的英文名称作标志，如新浪用字母志，如新浪用字母志，如新浪用字母志，如新
22、浪用字母“ “sina”sina”结合眼睛图案作为标志。结合眼睛图案作为标志。结合眼睛图案作为标志。结合眼睛图案作为标志。12 网站的标准色彩网站的标准色彩网站的标准色彩网站的标准色彩 标准色彩用于网站的标志、标题、主菜单和主色块。标准色彩用于网站的标志、标题、主菜单和主色块。标准色彩用于网站的标志、标题、主菜单和主色块。标准色彩用于网站的标志、标题、主菜单和主色块。网站给人的第一印象是色彩感觉，确定网站的标准网站给人的第一印象是色彩感觉，确定网站的标准网站给人的第一印象是色彩感觉，确定网站的标准网站给人的第一印象是色彩感觉，确定网站的标准色彩是相当重要的一步。在进行设计时可以参考相色彩是相当
23、重要的一步。在进行设计时可以参考相色彩是相当重要的一步。在进行设计时可以参考相色彩是相当重要的一步。在进行设计时可以参考相关的同类网站或其他网站，如关的同类网站或其他网站，如关的同类网站或其他网站，如关的同类网站或其他网站，如IBMIBM用深蓝色、肯德用深蓝色、肯德用深蓝色、肯德用深蓝色、肯德基用红色、微软用钴蓝色和新浪用黄色等。基用红色、微软用钴蓝色和新浪用黄色等。基用红色、微软用钴蓝色和新浪用黄色等。基用红色、微软用钴蓝色和新浪用黄色等。 网页制作基本步骤网页制作基本步骤网页制作基本步骤网页制作基本步骤 收集整理资源收集整理资源收集整理资源收集整理资源 规划站点内容并创建站点规划站点内容并
24、创建站点规划站点内容并创建站点规划站点内容并创建站点 制作网页制作网页制作网页制作网页 测试站点测试站点测试站点测试站点 发布站点发布站点发布站点发布站点 站点维护、更新站点维护、更新站点维护、更新站点维护、更新二、超文本标记语言HTML(HyperTextMarkupLanguage)1.HTML概述o超文本标记语言HTML中的Markup的意思就是“设置标记”。oHTML定义了许多用于排版的命令（标签）。oHTML把各种标签嵌入到万维网的页面中。这样就构成了所谓的HTML文档。HTML文档是一种可以用任何文本编辑器创建的ASCII码文件。2.HTML文档o仅当HTML文档是以.html或.
25、htm为后缀时，浏览器才对此文档的各种标签进行解释。o如HTML文档改换以.txt为其后缀，则HTML解释程序就不对标签进行解释，而浏览器只能看见原来的文本文件。o当浏览器从服务器读取HTML文档后，就按照HTML文档中的各种标签，根据浏览器所使用的显示器的尺寸和分辨率大小，重新进行排版并恢复出所读取的页面。HTML的格式与标签o元素(element)是HTML文档结构的基本组成部分。一个HTML文档本身就是一个元素。每个HTML文档由两个主要元素组成：首部(head)和主体(body)。o首部包含文档的标题(title)，以及系统用来标识文档的一些其他信息。标题相当于文件名。o文档的主体是H
26、TML文档的最主要的部分。o主体部分往往又由若干个更小的元素组成，如段落(paragraph)、表格(table)、和列表(list)等。HTML的标签oHTML用一对标签（即一个开始标签和一个结束标签）或几对标签来标识一个元素。o开始标签由一个小于字符“”组成。o结束标签和开始标签的区别只是在小于字符的后面要加上一个斜杠字符“/”。o标签名并不区分大写和小写。o有一些标签可以将结束标签省略。HTML文档中标签的用法 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。HTML 文档开始HTML文档中标签的用法 一个 HTML 的例子
27、HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。首部开始HTML文档中标签的用法 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。标题HTML文档中标签的用法 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。首部结束HTML文档中标签的用法 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。主体开始HTML文档中标签的用法 一个 HTML 的例子 HTML 很容易掌握 这是第
28、一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。1 级标题 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。HTML文档中标签的用法第一个段落 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。HTML文档中标签的用法第二个段落HTML文档中标签的用法 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。主体结束HTML文档中标签的用法 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很
29、短，但它仍是一个段落。 这是第二个段落。HTML 文档结束插入图像 结束标签开始标签插入图像插入的图像文件名是 portrait.gif高度是 100 像素宽度是 65 像素万维网页面中的超链接1.链接到其他网点上的页面o定义一个超链的标签是。字符A表示锚(Anchor)。o在HTML文档中定义一个超链的语法是：X超链的起点这个地方填写超链终点的 URL链接举例清华大学超链的起点是某个文档中的这四个字超链的终点是清华大学的主页2.链接到一个本地文件o远程链接：超链的终点是其他网点上的页面。o本地链接：超链指向本计算机中的某个文件。本地链接本地链接可进行许多的简化：o协议(http:/)被省略表
30、明与当前页面的协议相同。o主机域名被省略表明是当前的主机域名。o目录路径被省略表明是当前目录（对于远程链接，表明是主机的默认根目录）。o文件名被省略表明是当前文件（对于远程链接，表明是对方服务器上默认的文件名，通常是一个名为index.html的文件）。相对路径与绝对路径o.o.o/default.htm 网站首页栏目2栏目2-1栏目3-1123号文件歌曲1下载/menu3/file/file123.htm 网站首页栏目2栏目2-1栏目3-1123号文件歌曲1下载/menu2/2-1.htm 网站首页栏目2栏目2-1栏目3-1123号文件歌曲1下载相对路径名与绝对路径名o使用简化的URL，在H
31、REF=的后面使用的是相对路径名。o使用完整的URL则是使用绝对路径名。o使用相对路径名的好处n绝不是为了少键入一些字符n而是便于目录的变更。 abc 本文件链接（页内锚）举例X abc文件 F本文件链接的 HTML 语句格式： X 本文件链接在此处定义命名锚起点终点命名锚的定义语句：命名锚的名字命名锚的终点在字符 abc 的前面 远程链接举例远程链接： 清华大学 清华大学清华大学主页文件 F远程链接因特网起点终点三、可视化网页设计o工具nMacromediaDreamweaverMX2004nDreamweavercs4nMicrosoftFrontpage2003n记事本/Editplus
32、站点操作o建立站点n为什么要建立站点？o管理方便，打开方便o更新链接nDreamweaver中的站点就是发布的站点吗？o不是，这里仅仅是设计时的站点n实验室的计算机重新启动后会自动恢复o实验中每次都要重建o文件建立在Student盘38DreamweaverCS4简介简介 当今时代，网络成了最重要的媒体和资源宝库。制作当今时代，网络成了最重要的媒体和资源宝库。制作当今时代，网络成了最重要的媒体和资源宝库。制作当今时代，网络成了最重要的媒体和资源宝库。制作网页可以选择学习网页可以选择学习网页可以选择学习网页可以选择学习HTMLHTML代码、也可以选择学习用软代码、也可以选择学习用软代码、也可以选
33、择学习用软代码、也可以选择学习用软件来编辑、还可以两者兼用。件来编辑、还可以两者兼用。件来编辑、还可以两者兼用。件来编辑、还可以两者兼用。 DreamweaverCS4DreamweaverCS4是由美国是由美国是由美国是由美国AdobeAdobe公司推出的，公司推出的，公司推出的，公司推出的，一个可视化网页设计和网站管理工具软件。一个可视化网页设计和网站管理工具软件。一个可视化网页设计和网站管理工具软件。一个可视化网页设计和网站管理工具软件。 DreamweaverCS4DreamweaverCS4是一套网页编辑软件，就是一套网页编辑软件，就是一套网页编辑软件，就是一套网页编辑软件，就算没有
34、制作网页的基础，也能很轻松地利用它制作出算没有制作网页的基础，也能很轻松地利用它制作出算没有制作网页的基础，也能很轻松地利用它制作出算没有制作网页的基础，也能很轻松地利用它制作出漂亮的网页，只要从菜单、面板中直接套用就可以了，漂亮的网页，只要从菜单、面板中直接套用就可以了，漂亮的网页，只要从菜单、面板中直接套用就可以了，漂亮的网页，只要从菜单、面板中直接套用就可以了，免除了学习免除了学习免除了学习免除了学习HTMLHTML标签命令的困扰，也节省了很多编标签命令的困扰，也节省了很多编标签命令的困扰，也节省了很多编标签命令的困扰，也节省了很多编写源代码的时间。写源代码的时间。写源代码的时间。写源代
35、码的时间。 DreamweaverCS4DreamweaverCS4有强大的网站管理功能，当修有强大的网站管理功能，当修有强大的网站管理功能，当修有强大的网站管理功能，当修改文件名、移动或删除文件时，它自动修改相关的链改文件名、移动或删除文件时，它自动修改相关的链改文件名、移动或删除文件时，它自动修改相关的链改文件名、移动或删除文件时，它自动修改相关的链接；它内置接；它内置接；它内置接；它内置FTPFTP功能，可以直接将文件上传到网站服功能，可以直接将文件上传到网站服功能，可以直接将文件上传到网站服功能，可以直接将文件上传到网站服务器，在网站窗口中可以看到本地端和远程网站的文务器，在网站窗口中
36、可以看到本地端和远程网站的文务器，在网站窗口中可以看到本地端和远程网站的文务器，在网站窗口中可以看到本地端和远程网站的文件，随时检查两端的差异。件，随时检查两端的差异。件，随时检查两端的差异。件，随时检查两端的差异。39DreamweaverCS4的安装与启动的安装与启动 1 1、安装、安装、安装、安装DreamweaverCS4DreamweaverCS4 安装安装安装安装DreamweaverCS4DreamweaverCS4软件与前期版本稍有不软件与前期版本稍有不软件与前期版本稍有不软件与前期版本稍有不同，但根据每一步的提示可以很轻松地安装，具体同，但根据每一步的提示可以很轻松地安装，具
37、体同，但根据每一步的提示可以很轻松地安装，具体同，但根据每一步的提示可以很轻松地安装，具体操作步骤如下：操作步骤如下：操作步骤如下：操作步骤如下： (1)(1)安装前，请先关闭系统上所有目前正在执行的安装前，请先关闭系统上所有目前正在执行的安装前，请先关闭系统上所有目前正在执行的安装前，请先关闭系统上所有目前正在执行的应用程式，包括其他应用程式，包括其他应用程式，包括其他应用程式，包括其他 AdobeAdobe应用程式、应用程式、应用程式、应用程式、MicrosoftOfficeMicrosoftOffice应用程式以及浏览器视窗。也应用程式以及浏览器视窗。也应用程式以及浏览器视窗。也应用程式
38、以及浏览器视窗。也建议您在安装期间暂时关闭防毒软件。建议您在安装期间暂时关闭防毒软件。建议您在安装期间暂时关闭防毒软件。建议您在安装期间暂时关闭防毒软件。 (2)(2)将将将将 DVDDVD放入光碟机中，然后依照画面上的指放入光碟机中，然后依照画面上的指放入光碟机中，然后依照画面上的指放入光碟机中，然后依照画面上的指示进行。如果安装程式未自动启动，请浏览至光碟示进行。如果安装程式未自动启动，请浏览至光碟示进行。如果安装程式未自动启动，请浏览至光碟示进行。如果安装程式未自动启动，请浏览至光碟根目录下的根目录下的根目录下的根目录下的 AdobeCS4AdobeCS4资料夹，然后双击资料夹，然后双击
39、资料夹，然后双击资料夹，然后双击 Setup.exeSetup.exe启动安装程序启动安装程序启动安装程序启动安装程序( (如果您是从网络下载如果您是从网络下载如果您是从网络下载如果您是从网络下载的软件，请开启资料夹、浏览至的软件，请开启资料夹、浏览至的软件，请开启资料夹、浏览至的软件，请开启资料夹、浏览至 AdobeCS4AdobeCS4资资资资料夹、双击料夹、双击料夹、双击料夹、双击Setup.exe)Setup.exe)，进行初始化，如图，进行初始化，如图，进行初始化，如图，进行初始化，如图1-21-2所示。所示。所示。所示。40图图图图1-21-2初始化初始化初始化初始化41 (3)(
40、3)输入输入输入输入DreamweaverCS4DreamweaverCS4序列号序列号序列号序列号, ,然后单击然后单击然后单击然后单击【下一步下一步下一步下一步】按钮，如图按钮，如图按钮，如图按钮，如图1-31-3所示。所示。所示。所示。图图图图1-31-3输入序列号输入序列号输入序列号输入序列号42 (4)(4)阅读阅读阅读阅读DreamweaverCS4DreamweaverCS4许可协议，单击许可协议，单击许可协议，单击许可协议，单击【接受接受接受接受】铵钮。铵钮。铵钮。铵钮。 (5)(5)在显示的界面中选择要安装的在显示的界面中选择要安装的在显示的界面中选择要安装的在显示的界面中选
41、择要安装的AdobeAdobe组件，若组件，若组件，若组件，若安装全部组件，则单击安装全部组件，则单击安装全部组件，则单击安装全部组件，则单击【全选全选全选全选】按钮。然后单击按钮。然后单击按钮。然后单击按钮。然后单击【更改更改更改更改】按钮，选择安装的路径（默认的安装路径按钮，选择安装的路径（默认的安装路径按钮，选择安装的路径（默认的安装路径按钮，选择安装的路径（默认的安装路径为为为为C:ProgramFilesAdobeC:ProgramFilesAdobe）。）。）。）。 (6)(6)选择好安装的路径后，单击选择好安装的路径后，单击选择好安装的路径后，单击选择好安装的路径后，单击【安装安
42、装安装安装】按钮，安按钮，安按钮，安按钮，安装程序将显示已经做好安装准备，正在安装装程序将显示已经做好安装准备，正在安装装程序将显示已经做好安装准备，正在安装装程序将显示已经做好安装准备，正在安装,如图如图如图如图所示。所示。所示。所示。4344 (7)(7)完成安装进度后，显示填写注册信息，填写好完成安装进度后，显示填写注册信息，填写好完成安装进度后，显示填写注册信息，填写好完成安装进度后，显示填写注册信息，填写好注册信息，单击注册信息，单击注册信息，单击注册信息，单击【立即注册立即注册立即注册立即注册】按钮，如图所示。按钮，如图所示。按钮，如图所示。按钮，如图所示。 (8)(8)安装完毕后
43、，会显示一个安装完成界面，单击安装完毕后，会显示一个安装完成界面，单击安装完毕后，会显示一个安装完成界面，单击安装完毕后，会显示一个安装完成界面，单击【退出退出退出退出】按钮，完成按钮，完成按钮，完成按钮，完成DreamweaverCS4DreamweaverCS4的安装。的安装。的安装。的安装。45 2 2、启动、启动、启动、启动DreamweaverCS4DreamweaverCS4 启动启动启动启动DreamweaverCS4DreamweaverCS4的操作很简单，和其它软件的启的操作很简单，和其它软件的启的操作很简单，和其它软件的启的操作很简单，和其它软件的启动方式基本一致。动方式基
44、本一致。动方式基本一致。动方式基本一致。 (2)(2)单击单击单击单击“ “开始开始开始开始” ”菜单按钮，在程序组中选择菜单按钮，在程序组中选择菜单按钮，在程序组中选择菜单按钮，在程序组中选择【程序程序程序程序】【AdobeDreamweaverCS4AdobeDreamweaverCS4】命令，即可启动命令，即可启动命令，即可启动命令，即可启动DreamweaverCS4DreamweaverCS4软件，如图所示。软件，如图所示。软件，如图所示。软件，如图所示。46 (2)(2)首次启动首次启动首次启动首次启动DreamweaverCS4DreamweaverCS4时，会弹出时，会弹出时，
45、会弹出时，会弹出【默认编辑默认编辑默认编辑默认编辑器器器器】对话框，用户可为对话框，用户可为对话框，用户可为对话框，用户可为DreamweaverCS4DreamweaverCS4设置编辑器，设置编辑器，设置编辑器，设置编辑器，如图所示。如图所示。如图所示。如图所示。47 (3)(3)在此保持默认设置，单击在此保持默认设置，单击在此保持默认设置，单击在此保持默认设置，单击【确定确定确定确定】按钮，此时将打开按钮，此时将打开按钮，此时将打开按钮，此时将打开AdobeDreamweaverCS4AdobeDreamweaverCS4欢迎屏幕，如图所示。欢迎屏幕，如图所示。欢迎屏幕，如图所示。欢迎屏
46、幕，如图所示。48提示：选择欢迎屏幕下方的提示：选择欢迎屏幕下方的提示：选择欢迎屏幕下方的提示：选择欢迎屏幕下方的“不再显示不再显示不再显示不再显示”复复复复选框，再次启动欢迎屏幕即关闭，在菜单栏选框，再次启动欢迎屏幕即关闭，在菜单栏选框，再次启动欢迎屏幕即关闭，在菜单栏选框，再次启动欢迎屏幕即关闭，在菜单栏中选择中选择中选择中选择【编辑编辑编辑编辑】【首选参数首选参数首选参数首选参数】【常规常规常规常规】【显示欢迎屏幕显示欢迎屏幕显示欢迎屏幕显示欢迎屏幕】命令，即可以在下次启命令，即可以在下次启命令，即可以在下次启命令，即可以在下次启动该软件时将重新显示欢迎屏幕。动该软件时将重新显示欢迎屏幕
47、。动该软件时将重新显示欢迎屏幕。动该软件时将重新显示欢迎屏幕。49DreamweaverCS4的操作环境的操作环境 和以前版本相比，和以前版本相比，和以前版本相比，和以前版本相比，DreamweaverCS4DreamweaverCS4的工作界的工作界的工作界的工作界面焕然一新，可以说是做了一次脱胎换骨的改进，面焕然一新，可以说是做了一次脱胎换骨的改进，面焕然一新，可以说是做了一次脱胎换骨的改进，面焕然一新，可以说是做了一次脱胎换骨的改进，从界面中可以看到更多的设计元素。另外，从界面中可以看到更多的设计元素。另外，从界面中可以看到更多的设计元素。另外，从界面中可以看到更多的设计元素。另外，Dr
48、eamweaverCS4DreamweaverCS4的操作环境非常灵活，用户的操作环境非常灵活，用户的操作环境非常灵活，用户的操作环境非常灵活，用户完全可以根据自己的习惯进行定制。下面对完全可以根据自己的习惯进行定制。下面对完全可以根据自己的习惯进行定制。下面对完全可以根据自己的习惯进行定制。下面对DreamweaverCS4DreamweaverCS4的操作环境进行详细介绍。的操作环境进行详细介绍。的操作环境进行详细介绍。的操作环境进行详细介绍。 DreamweaverCS4DreamweaverCS4的工作界面由标题栏、菜单的工作界面由标题栏、菜单的工作界面由标题栏、菜单的工作界面由标题栏
49、、菜单栏、插入面板、文档工具栏、文档编辑区、状态栏、栏、插入面板、文档工具栏、文档编辑区、状态栏、栏、插入面板、文档工具栏、文档编辑区、状态栏、栏、插入面板、文档工具栏、文档编辑区、状态栏、属性面板、面板组、扩展管理器等组成，如图所示。属性面板、面板组、扩展管理器等组成，如图所示。属性面板、面板组、扩展管理器等组成，如图所示。属性面板、面板组、扩展管理器等组成，如图所示。 5051 工作界面定制工作界面定制工作界面定制工作界面定制: :用户可以根据各自的习惯进行工作界面的定制，在窗口的用户可以根据各自的习惯进行工作界面的定制，在窗口的用户可以根据各自的习惯进行工作界面的定制，在窗口的用户可以根
50、据各自的习惯进行工作界面的定制，在窗口的标题栏右侧面有一个标题栏右侧面有一个标题栏右侧面有一个标题栏右侧面有一个【设计器设计器设计器设计器】按钮，单击它会弹出一个下按钮，单击它会弹出一个下按钮，单击它会弹出一个下按钮，单击它会弹出一个下拉菜单，可以定制拉菜单，可以定制拉菜单，可以定制拉菜单，可以定制【应用程序开发人员应用程序开发人员应用程序开发人员应用程序开发人员】、【经典经典经典经典】、【编编编编码器码器码器码器】、【设计器设计器设计器设计器】等不同的工作界面。等不同的工作界面。等不同的工作界面。等不同的工作界面。52创建一个新的网站创建一个新的网站o新建站点新建站点oo在制作网页之前必须先
51、在自己的计算机中新建一个在制作网页之前必须先在自己的计算机中新建一个在制作网页之前必须先在自己的计算机中新建一个在制作网页之前必须先在自己的计算机中新建一个新的站点和站点的本地根文件夹，站点一般由很多新的站点和站点的本地根文件夹，站点一般由很多新的站点和站点的本地根文件夹，站点一般由很多新的站点和站点的本地根文件夹，站点一般由很多网页文件组成，另外还包括很多的相关文件，每个网页文件组成，另外还包括很多的相关文件，每个网页文件组成，另外还包括很多的相关文件，每个网页文件组成，另外还包括很多的相关文件，每个网页只有在整个网站中才能发挥作用，所以网页只有在整个网站中才能发挥作用，所以网页只有在整个网
52、站中才能发挥作用，所以网页只有在整个网站中才能发挥作用，所以DreamweaverCS4DreamweaverCS4在提供强大的设计编写网页在提供强大的设计编写网页在提供强大的设计编写网页在提供强大的设计编写网页功能的同时，还提供了站点创建和管理功能。功能的同时，还提供了站点创建和管理功能。功能的同时，还提供了站点创建和管理功能。功能的同时，还提供了站点创建和管理功能。oo在新建站点之前，首先要进入在新建站点之前，首先要进入在新建站点之前，首先要进入在新建站点之前，首先要进入【站点定义站点定义站点定义站点定义】对话框，对话框，对话框，对话框，进入进入进入进入【站点定义站点定义站点定义站点定义】
53、对话框方法有下列几种：对话框方法有下列几种：对话框方法有下列几种：对话框方法有下列几种：53 1 1文件面板文件面板文件面板文件面板 （1 1）文件面板中右上方的）文件面板中右上方的）文件面板中右上方的）文件面板中右上方的【管理站点管理站点管理站点管理站点】链接，如链接，如链接，如链接，如图所示。图所示。图所示。图所示。54 单击文件面板左上方的箭头按钮单击文件面板左上方的箭头按钮单击文件面板左上方的箭头按钮单击文件面板左上方的箭头按钮 ，选择弹出的下，选择弹出的下，选择弹出的下，选择弹出的下拉列表底部的拉列表底部的拉列表底部的拉列表底部的【管理站点管理站点管理站点管理站点】，如图所示。，如图
54、所示。，如图所示。，如图所示。55 从上述（从上述（从上述（从上述（1 1）（）（）（）（2 2）方法中任选一方法都可进入）方法中任选一方法都可进入）方法中任选一方法都可进入）方法中任选一方法都可进入【管管管管理站点理站点理站点理站点】对话框，执行对话框，执行对话框，执行对话框，执行【新建新建新建新建】【站点站点站点站点】，即，即，即，即可弹出可弹出可弹出可弹出【站点定义站点定义站点定义站点定义】对话框。对话框。对话框。对话框。5657 2 2站点菜单站点菜单站点菜单站点菜单 （1 1）执行）执行）执行）执行【站点站点站点站点】菜单菜单菜单菜单【新建站点新建站点新建站点新建站点】命令，即可进入
55、命令，即可进入命令，即可进入命令，即可进入【站点定义站点定义站点定义站点定义】对话框。对话框。对话框。对话框。58 （2 2）执行）执行）执行）执行【站点站点站点站点】菜单菜单菜单菜单【管理站点管理站点管理站点管理站点】命令，命令，命令，命令，【管理站点管理站点管理站点管理站点】对话框，再执行对话框，再执行对话框，再执行对话框，再执行“ “新建新建新建新建站点站点站点站点” ”命令，也可进入命令，也可进入命令，也可进入命令，也可进入【站点定义站点定义站点定义站点定义】对话框。对话框。对话框。对话框。59进入进入进入进入【站点定义站点定义站点定义站点定义】对话框后，定义本地站点对话框后，定义本地
56、站点对话框后，定义本地站点对话框后，定义本地站点的方法有下列两种：的方法有下列两种：的方法有下列两种：的方法有下列两种：（1 1）利用）利用）利用）利用【基本基本基本基本】选项卡的站点定义向导。选项卡的站点定义向导。选项卡的站点定义向导。选项卡的站点定义向导。（2 2）利用）利用）利用）利用【高级高级高级高级】选项卡，这种方法比较选项卡，这种方法比较选项卡，这种方法比较选项卡，这种方法比较直观快速。直观快速。直观快速。直观快速。60 下面详细介绍一下利用下面详细介绍一下利用下面详细介绍一下利用下面详细介绍一下利用【基本基本基本基本】选项卡，根据站点定义向导选项卡，根据站点定义向导选项卡，根据站
57、点定义向导选项卡，根据站点定义向导提示定义本地站点的步骤：提示定义本地站点的步骤：提示定义本地站点的步骤：提示定义本地站点的步骤： (1)(1)进入进入进入进入【站点定义站点定义站点定义站点定义】对话框后，选择对话框后，选择对话框后，选择对话框后，选择【基本基本基本基本】选项卡（如图选项卡（如图选项卡（如图选项卡（如图所示）；所示）；所示）；所示）；61 (2)(2)设置站点名称为设置站点名称为设置站点名称为设置站点名称为“ “好可工作室好可工作室好可工作室好可工作室” ”，在站点的，在站点的，在站点的，在站点的URLURL文本框中输入网站的域名或文本框中输入网站的域名或文本框中输入网站的域名
58、或文本框中输入网站的域名或IPIP地址，如果要地址，如果要地址，如果要地址，如果要创建本地站点，则此处可以留空。单击创建本地站点，则此处可以留空。单击创建本地站点，则此处可以留空。单击创建本地站点，则此处可以留空。单击【下一步下一步下一步下一步】按钮。按钮。按钮。按钮。 (3)(3)弹出的对话框中询问是否使用服务器技术，如弹出的对话框中询问是否使用服务器技术，如弹出的对话框中询问是否使用服务器技术，如弹出的对话框中询问是否使用服务器技术，如图所示。由于建立的是静态网站，选择图所示。由于建立的是静态网站，选择图所示。由于建立的是静态网站，选择图所示。由于建立的是静态网站，选择“ “否，我不否，我
59、不否，我不否，我不想使用服务器技术想使用服务器技术想使用服务器技术想使用服务器技术” ”单选按钮，单击单选按钮，单击单选按钮，单击单选按钮，单击【下一步下一步下一步下一步】按按按按钮。钮。钮。钮。6263 (4)(4)在下一步对话框中，选择在下一步对话框中，选择在下一步对话框中，选择在下一步对话框中，选择“ “编辑我的计算机上的本地副本，编辑我的计算机上的本地副本，编辑我的计算机上的本地副本，编辑我的计算机上的本地副本，完成后再上传到服务器完成后再上传到服务器完成后再上传到服务器完成后再上传到服务器” ”单选单选单选单选按钮。可以单击按钮。可以单击按钮。可以单击按钮。可以单击 按钮设置站按钮设
60、置站按钮设置站按钮设置站点的本地根文件夹的位置，若根文件夹没预先建立好，可此点的本地根文件夹的位置，若根文件夹没预先建立好，可此点的本地根文件夹的位置，若根文件夹没预先建立好，可此点的本地根文件夹的位置，若根文件夹没预先建立好，可此时新建。如图所示。选择设置好后，单击时新建。如图所示。选择设置好后，单击时新建。如图所示。选择设置好后，单击时新建。如图所示。选择设置好后，单击【下一步下一步下一步下一步】按钮。按钮。按钮。按钮。6465 (5)(5)在下一步对话框中，显示选择远程服务器连接方式的界面。在下一步对话框中，显示选择远程服务器连接方式的界面。在下一步对话框中，显示选择远程服务器连接方式的
61、界面。在下一步对话框中，显示选择远程服务器连接方式的界面。在在在在“ “您如何连接到远程服务器您如何连接到远程服务器您如何连接到远程服务器您如何连接到远程服务器” ”下拉列表框中选择下拉列表框中选择下拉列表框中选择下拉列表框中选择“ “无无无无” ”选选选选项，如图所示。单击项，如图所示。单击项，如图所示。单击项，如图所示。单击【下一步下一步下一步下一步】按钮。按钮。按钮。按钮。66 (6)(6)此时，出现确认信息界面，显示前面已经设置完成的内容，此时，出现确认信息界面，显示前面已经设置完成的内容，此时，出现确认信息界面，显示前面已经设置完成的内容，此时，出现确认信息界面，显示前面已经设置完成
62、的内容，单击单击单击单击【完成完成完成完成】按钮，如图所示。按钮，如图所示。按钮，如图所示。按钮，如图所示。67 (7)(7)返回到返回到返回到返回到【管理站点管理站点管理站点管理站点】对话框，如图所示。单击对话框，如图所示。单击对话框，如图所示。单击对话框，如图所示。单击【完成完成完成完成】按按按按钮，本地站点创建完成，在钮，本地站点创建完成，在钮，本地站点创建完成，在钮，本地站点创建完成，在【文件文件文件文件】面板中的面板中的面板中的面板中的【本地视图本地视图本地视图本地视图】窗口中会显示该站点的名称和根文件夹。窗口中会显示该站点的名称和根文件夹。窗口中会显示该站点的名称和根文件夹。窗口中
63、会显示该站点的名称和根文件夹。681.3.2新建网页文件与文件夹新建网页文件与文件夹 文件面板是管理整个网站的重要工具，它可以让人文件面板是管理整个网站的重要工具，它可以让人文件面板是管理整个网站的重要工具，它可以让人文件面板是管理整个网站的重要工具，它可以让人们马上看到整个网站的结构，也可以看到整个网站们马上看到整个网站的结构，也可以看到整个网站们马上看到整个网站的结构，也可以看到整个网站们马上看到整个网站的结构，也可以看到整个网站的文件内容，快速地管理网站。在文件面板新建网的文件内容，快速地管理网站。在文件面板新建网的文件内容，快速地管理网站。在文件面板新建网的文件内容，快速地管理网站。在
64、文件面板新建网页和文件夹比较方便、简单。页和文件夹比较方便、简单。页和文件夹比较方便、简单。页和文件夹比较方便、简单。 1.1.新建网页文件与文件夹的操作步骤：新建网页文件与文件夹的操作步骤：新建网页文件与文件夹的操作步骤：新建网页文件与文件夹的操作步骤： （1 1）移动鼠标在文件面板中选择站点根文件夹后，）移动鼠标在文件面板中选择站点根文件夹后，）移动鼠标在文件面板中选择站点根文件夹后，）移动鼠标在文件面板中选择站点根文件夹后，单击鼠标右键，再从弹出的快捷菜单中选择单击鼠标右键，再从弹出的快捷菜单中选择单击鼠标右键，再从弹出的快捷菜单中选择单击鼠标右键，再从弹出的快捷菜单中选择“ “新建新建
65、新建新建文件文件文件文件”或或或或“ “新建文件夹新建文件夹新建文件夹新建文件夹”命令。命令。命令。命令。 （2 2）出现新建的网页文件或文件夹后，输入文件）出现新建的网页文件或文件夹后，输入文件）出现新建的网页文件或文件夹后，输入文件）出现新建的网页文件或文件夹后，输入文件名或文件夹名称并按下回车键。名或文件夹名称并按下回车键。名或文件夹名称并按下回车键。名或文件夹名称并按下回车键。691.3.3打开网页文件打开网页文件 在在在在DreamweaverDreamweaver中有多种打开网页的方法。中有多种打开网页的方法。中有多种打开网页的方法。中有多种打开网页的方法。 方法方法方法方法1 1
66、：启动：启动：启动：启动DreamweaverDreamweaver后，移动鼠标在后，移动鼠标在后，移动鼠标在后，移动鼠标在“ “打开最近项目打开最近项目打开最近项目打开最近项目” ”的文件列表中选择的文件列表中选择的文件列表中选择的文件列表中选择“ “打开打开打开打开” ”选项。选项。选项。选项。 方法方法方法方法2 2：移动鼠标到菜单栏选择：移动鼠标到菜单栏选择：移动鼠标到菜单栏选择：移动鼠标到菜单栏选择“ “文件文件文件文件” ”，弹出菜，弹出菜，弹出菜，弹出菜单后，从菜单中选择单后，从菜单中选择单后，从菜单中选择单后，从菜单中选择“ “打开打开打开打开” ”命令。命令。命令。命令。 方
67、法方法方法方法3 3：打开文件面板后，移动鼠标选择要打开的：打开文件面板后，移动鼠标选择要打开的：打开文件面板后，移动鼠标选择要打开的：打开文件面板后，移动鼠标选择要打开的文件，双击即可打开所选择的文件。文件，双击即可打开所选择的文件。文件，双击即可打开所选择的文件。文件，双击即可打开所选择的文件。 另一种打开文件编辑的方法是在文件夹窗口（我的另一种打开文件编辑的方法是在文件夹窗口（我的另一种打开文件编辑的方法是在文件夹窗口（我的另一种打开文件编辑的方法是在文件夹窗口（我的电脑）中的网页文件上单击鼠标右键，再从弹出的电脑）中的网页文件上单击鼠标右键，再从弹出的电脑）中的网页文件上单击鼠标右键，
68、再从弹出的电脑）中的网页文件上单击鼠标右键，再从弹出的快捷菜单中选择快捷菜单中选择快捷菜单中选择快捷菜单中选择“ “使用使用使用使用DreamweaverCS4DreamweaverCS4编辑编辑编辑编辑” ”命令，也可以打开网页编辑。命令，也可以打开网页编辑。命令，也可以打开网页编辑。命令，也可以打开网页编辑。701.3.4保存网页文件保存网页文件 网页不是一下子就可以做好的，做到一半时，可以网页不是一下子就可以做好的，做到一半时，可以网页不是一下子就可以做好的，做到一半时，可以网页不是一下子就可以做好的，做到一半时，可以先将文件保存起来，以后再随时加载修改。先将文件保存起来，以后再随时加载
69、修改。先将文件保存起来，以后再随时加载修改。先将文件保存起来，以后再随时加载修改。 具体保存方法如下：具体保存方法如下：具体保存方法如下：具体保存方法如下： 1 1、在菜单栏中选择、在菜单栏中选择、在菜单栏中选择、在菜单栏中选择【文件文件文件文件】【保存保存保存保存】命令。命令。命令。命令。2 2、出现、出现、出现、出现“ “另存为另存为另存为另存为” ”对话框后，从对话框后，从对话框后，从对话框后，从“ “保存在保存在保存在保存在” ”下拉列表下拉列表下拉列表下拉列表框中选择磁盘驱动器编号与文件夹名称，接着在文框中选择磁盘驱动器编号与文件夹名称，接着在文框中选择磁盘驱动器编号与文件夹名称，接
70、着在文框中选择磁盘驱动器编号与文件夹名称，接着在文件名栏中输入文件名称，然后选择件名栏中输入文件名称，然后选择件名栏中输入文件名称，然后选择件名栏中输入文件名称，然后选择 按钮。按钮。按钮。按钮。711.3.5网页版面布局网页版面布局 在制作网页的过程中，若是遇到较复杂的画面，可在制作网页的过程中，若是遇到较复杂的画面，可在制作网页的过程中，若是遇到较复杂的画面，可在制作网页的过程中，若是遇到较复杂的画面，可以使用编辑辅助工具，以使用编辑辅助工具，以使用编辑辅助工具，以使用编辑辅助工具， 如标尺（如标尺（如标尺（如标尺（RulersRulers） 、网格、网格、网格、网格线（线（线（线（Gri
71、dGrid） 等，以提高制作网页的效率。等，以提高制作网页的效率。等，以提高制作网页的效率。等，以提高制作网页的效率。 1 1标尺标尺标尺标尺 执行执行执行执行【查看查看查看查看】菜单菜单菜单菜单【标尺标尺标尺标尺】【显示显示显示显示】命令。命令。命令。命令。 在编辑区上出现的刻度就是标尺（如图所示），它在编辑区上出现的刻度就是标尺（如图所示），它在编辑区上出现的刻度就是标尺（如图所示），它在编辑区上出现的刻度就是标尺（如图所示），它可以作为摆放对象位置的依据。可以作为摆放对象位置的依据。可以作为摆放对象位置的依据。可以作为摆放对象位置的依据。 上方的刻度称为水平标尺（上方的刻度称为水平标尺（
72、上方的刻度称为水平标尺（上方的刻度称为水平标尺（XX轴），左边的刻度轴），左边的刻度轴），左边的刻度轴），左边的刻度称为垂直标尺（称为垂直标尺（称为垂直标尺（称为垂直标尺（Y Y轴），而原点轴），而原点轴），而原点轴），而原点(0,0)(0,0)则是在网页则是在网页则是在网页则是在网页的左上角，的左上角，的左上角，的左上角，XX轴若向左移动为负数，轴若向左移动为负数，轴若向左移动为负数，轴若向左移动为负数，Y Y轴则是向上轴则是向上轴则是向上轴则是向上移动为负数。移动为负数。移动为负数。移动为负数。 7273 2 2网格线网格线网格线网格线 网格线主要的作用是能够更方便地排列图形位置，网格线主
73、要的作用是能够更方便地排列图形位置，网格线主要的作用是能够更方便地排列图形位置，网格线主要的作用是能够更方便地排列图形位置，有了网格线就可以很快地看到对象与对象之间的间有了网格线就可以很快地看到对象与对象之间的间有了网格线就可以很快地看到对象与对象之间的间有了网格线就可以很快地看到对象与对象之间的间距，而这些网格线在实际浏览时是看不到的。距，而这些网格线在实际浏览时是看不到的。距，而这些网格线在实际浏览时是看不到的。距，而这些网格线在实际浏览时是看不到的。 执行执行执行执行【查看查看查看查看】菜单菜单菜单菜单【网格设置网格设置网格设置网格设置】【显示网显示网显示网显示网格格格格】命令。命令。命
74、令。命令。 选择显示网格线功能后，编辑区就会出现淡绿色的选择显示网格线功能后，编辑区就会出现淡绿色的选择显示网格线功能后，编辑区就会出现淡绿色的选择显示网格线功能后，编辑区就会出现淡绿色的网格线。网格线。网格线。网格线。74网格线75 若是在若是在若是在若是在“ “网格设置网格设置网格设置网格设置” ”子菜单中选择子菜单中选择子菜单中选择子菜单中选择“ “靠齐到网格靠齐到网格靠齐到网格靠齐到网格” ”命令，则在拖动对象时，对象就会自动吸附并对命令，则在拖动对象时，对象就会自动吸附并对命令，则在拖动对象时，对象就会自动吸附并对命令，则在拖动对象时，对象就会自动吸附并对齐在网格线上。齐在网格线上。
75、齐在网格线上。齐在网格线上。 提示提示提示提示: : : :改动网格设置只要移动鼠标到菜单栏依次选改动网格设置只要移动鼠标到菜单栏依次选改动网格设置只要移动鼠标到菜单栏依次选改动网格设置只要移动鼠标到菜单栏依次选择择择择【查看查看查看查看】【网格设置网格设置网格设置网格设置】【网格设置网格设置网格设置网格设置】，就，就，就，就可以修改成想要的样式了。可以修改成想要的样式了。可以修改成想要的样式了。可以修改成想要的样式了。3、网页制作o表格嵌套o导航条、当前位置n在每个网页中的位置都要一致o样式表n重复劳动强度大：定义每个对象的属性o一个网页定义一个样式表o多个网页共用一个样式表文件n新建样式表
76、文件n拿来主义色彩的RGB表示o文字o三原色RGBn每个原色色彩取值从0255（即0x00-0xFF）o整体的色彩空间n000000到FFFFFF共有282828224个取值o图中共有几种颜色？下列值代表何种颜色？n#00FF00#FFFF00n#FFFFFF#000000n#C0C0C0 #666666超链接的四个状态oA:linkColor:#CC00CC;Text-Decoration:noneoA:hoverColor:#666666;Text-Decoration:underlineoA:activeColor:#FF0000;Text-Decoration:noneoA:visit
77、edColor:#CC00CC;Text-Decoration:noneo如何实现“看不出哪些链接被点击过”？n访问过的颜色未访问过的颜色o实现方法：nIE设置（只能改一台机器的默认样式）n样式表3、网页制作o服务器端包含nn包含文件o文件扩展名：.shtm或.aspn被包含文件.htmo只有到之间的内容n如果含有及其闭合标记，被包含之后的结果网页中就会有双份，将出错！n必须发布出来才能显示o即必须以http:/的方式访问o具体见“五、网站设计与发布”4、常见问题o常见操作问题：n光标选中元素后，才能设置该元素的属性nTable中TR和TD如何选中？o状态栏：标签检查器三、图形编辑与动画制作o
78、图形文件格式nBMP位图o色彩空间、分辨率nJPG压缩格式nGIFo多帧动画、透明、256色nPSo源文件的概念nPNGo矢量图的概念四、图形编辑与动画制作oFlash动画文件n矢量动画的概念nflanswfo编辑制作工具nAdobePhotoshopnMacromediaFireworksnMacromediaFlasho编辑制作示例n去除背景、添加文字、添加效果、导出n补间动画、元件、引导线、导出五、网站设计与发布o原理（Browser/Server模式）nHTTP负责请求、回应和网页的传输n服务器的任务o1、等待服务o3、接收请求o4、解释ASP，将执行后得到的HTML结果嵌入HTMLo
79、5、回应n浏览器的任务o2、发送请求（地址栏或点击超链接等）o6、接收文档o7、分析文档，做进一步请求o8、解释HTML，将网页展现在IE的主体部分o9、执行Javascript四、网站设计与发布o操作系统的选择nWindowsServer2003o同时连接限制o多站点oCPU、内存优化服务而不是应用程序n实验中用WindowsXP代替oWEB服务器软件的选择nInternetInformationServer（Internet信息服务）六、大作业要求o选题n题目自选，可合作完成一个大的网站o检查形式nIIS发布，异地检查o评分标准n每人不少于10个页面，含首页、框架或SSI、CSS、Java
80、script、表单（ASP）、自制图形、自制动画n主题明确、风格统一、链接正确、文件名规范n整洁美观、布局合理、界面友好、导航清晰、logo和版权统一o上交要求n作品应小于5M，尽量控制在2M以内，压缩成一个文件o文件名：专业班级_学号_姓名.raro如：材成061_06102060104_陈松.rar）大作业题目大作业题目o设计、制作、发布网站。o鼓励团队开发，1-2人一组。o题目自定：n专业性强的门户网站n科技科普、宣传介绍、历史地理、科技军事、文学艺术娱乐n网页制作的心得、技巧、教程考查内容范围考查内容范围o网页传输原理n域名解析、域名的申请和设置指向IPnHTTP请求与答复oHTML语
81、言（记事本/Editplus）o可视化网页编辑（FrontPage/Dreamweaver）o网站内容与结构o简单的WEB数据库编程（ASP/Access/SQLServer）o网站发布（PWS/IIS）o团队精神基本要求基本要求o网站类型与主题明确o风格统一o元素丰富，内容翔实，积极向上n设计开始之前的资料收集整理，包括文字、图片、Flash等，尽量不要占用辅导机时o栏目划分合理清晰，导航统一，便于浏览o文字流畅，便于阅读o页面布局合理，版面整洁美观o色彩搭配合理，图片使用得当o站点发布，用http:/IP方式访问、检查技术体现（加分因素）技术体现（加分因素）o统一的文件（夹）命名方案o注意
82、相对路经与绝对路径o利用表格和表格的嵌套排版布局，尽量少的层（坐标绝对定位）o适当的框架、页内链接及表单控件的使用（+）o表单页面和表单处理页面（服务器端编程）（+）o样式表（CSS）控制整体风格样式（+）o服务器端包含（SSI）控制公用页面内容（+）技术体现（加分因素）技术体现（加分因素）o必要的Javascript程序（如表单提交前检查内容是否符合要求）（+）o功能开发文档、数据库文档、编码规范（尤其对于团队开发）（+）o统一控制的数据连接（+）o适当的程序模块化分与函数抽取（+）o程序健壮度：容错处理（+）o必要的程序注释（+）概念区分概念区分o客户端执行的动感效果（仍属于静态网页）n如本地时钟、文字图像的鼠标跟随、提交前检查表单内容nJavascripto服务器端执行的WEB数据库程序（动态网页）n如新闻、留言、注册登录、论坛nASPAccess或SQLServer，也可以用php、.NET、JSP等技术
