第1章网页设计基础CC

1、网页制作基础教程（网页制作基础教程（Dreamweaver CCDreamweaver CC）ISBN978-7-121-15403-4电子课件电子课件1第第1章章 网页设计基础网页设计基础本章重点介绍网页设计者在制作网站之初所应具备基本知识和设计要领，从而为下一步开发网站做好准备，同时，通过本章的学习使读者熟悉Dreamweaver CC界面及运行环境。 2第第1章章 网页设计基础网页设计基础1.1 网站基础知识网站基础知识1.2 网站的组成网站的组成1.3 网站的分类网站的分类1.4 常用建站技术常用建站技术31.5 网站建设流程网站建设流程1.6 网页基本元素网页基本元素1.7 Drea

2、mweaver 工作环境工作环境1.8 Dreamweaver工作流程工作流程网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.1 网站基础知识1.1.1 Internet与与Web服务服务1.1.2 网站网站1.1.3 IP地址、域名及地址、域名及URL1.1.4 服务器与客户机服务器与客户机4网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.1 网站基础知识1.1.1 Internet与与Web服务服务互联网就是借助通信线路将计算机和各种相关设备互联网就是借助通信线路将计算机和各种相关设备相连接，并按照统一的标准，在各种设备之间进行相连接

3、，并按照统一的标准，在各种设备之间进行数据传输和交换，实现互联、互通，以达到计算机数据传输和交换，实现互联、互通，以达到计算机之间资源共享和信息交换的目的，之间资源共享和信息交换的目的，Internet就是一就是一种互联网。种互联网。5网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.1 网站基础知识1.1.1 Internet1.1.1 Internet与与WebWeb服务服务Internet提供的主要服务包括万维网（提供的主要服务包括万维网（WWW或或Web）、电子邮件（）、电子邮件（E-mail）、文件传输）、文件传输（FTP）和远程登录（）和远程登录（Teln

4、et）等。）等。Web网采用超文本置标语言（网采用超文本置标语言（HTML），可以），可以存取包括文本、图像、动画、音频和视频等多存取包括文本、图像、动画、音频和视频等多媒体信息，还基于超链接，通过众多的网页和媒体信息，还基于超链接，通过众多的网页和网站构成了一个全球范围内的庞大信息网络。网站构成了一个全球范围内的庞大信息网络。6网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.1 网站基础知识1.1.2 1.1.2 网站网站网站网站(Website)(Website)是指在因特网上，根据一定的规则是指在因特网上，根据一定的规则使用使用HTMLHTML等工具制作的，用

5、于展示特定内容的相关等工具制作的，用于展示特定内容的相关网页的集合。网页的集合。网站就是在互联网上一块固定的面向全世界发布消息的地方，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。7网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.1 网站基础知识1.1.2 1.1.2 网站网站网站包括一个首页和若干个分页。首页就是访问这网站包括一个首页和若干个分页。首页就是访问这个网站时第一个打开的网页，其他的网页即是分页。个网站时第一个打开的网页，其他的网页即是分页。衡量一个网站的性能通常从网站空间大小、网站位衡量一个网站的性能通常从网站空间大小、网

6、站位置、网站连接速度（俗称置、网站连接速度（俗称“网速网速”）、网站软件配）、网站软件配置、网站提供服务等几方面考虑，最直接的衡量标置、网站提供服务等几方面考虑，最直接的衡量标准是这个网站的真实流量。准是这个网站的真实流量。8网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.1 网站基础知识1.1.3IP地址、域名及地址、域名及URLIP地址地址1.IP地址地址：是接入因特网的主机被分配的唯一编：是接入因特网的主机被分配的唯一编号，用号，用32位二进制数表示，每位二进制数表示，每8位一组，每组数位一组，每组数的十进制范围为的十进制范围为0255，各数之间用一个点号，各

7、数之间用一个点号“.”分开。如：分开。如：9网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.1 网站基础知识1.1.3IP地址、域名及地址、域名及URL域名域名域名：为了使用和记忆方便，也为了便于网络地域名：为了使用和记忆方便，也为了便于网络地址的分层管理和分配，因特网采用了一种字符型址的分层管理和分配，因特网采用了一种字符型的命名机制，用字符串来代替数字，这就是网络的命名机制，用字符串来代替数字，这就是网络域名系统。域名系统。2.如搜狐网站服务器的如搜狐网站服务器的IP地址为地址为2，其域名为其域名为，平时上网时通常在

8、，平时上网时通常在地址栏中输入：地址栏中输入：http:/，也可，也可输入：输入：210网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.1 网站基础知识1.1.3IP地址、域名及地址、域名及URLURLURL：统一资源定位器，用于表示网络资源的地统一资源定位器，用于表示网络资源的地址，俗称网址。上网访问某一网站时在浏览器的址，俗称网址。上网访问某一网站时在浏览器的地址栏中输入的就是地址栏中输入的就是URL。URL的一般格式为：的一般格式为： 协议：协议：/主机地址主机地址/路径路径/文件名文件名例如：例如：http:/ 1章章 网

9、页设计基础网页设计基础1.1 网站基础知识1.1.4服务器与客户机服务器与客户机 互联网是由不计其数的计算机和相关设备相互连互联网是由不计其数的计算机和相关设备相互连接而成的。根据计算机在互联网中的用途可将其分接而成的。根据计算机在互联网中的用途可将其分成两类：服务器和客户机成两类：服务器和客户机1.服务器服务器服务器服务器是提供共享资源和服务的计算机是提供共享资源和服务的计算机 ，其作用，其作用是管理大量的信息资源。是管理大量的信息资源。服务器的种类较多，服务器的种类较多，Web服务器服务器存储海量的实时存储海量的实时信息，为用户提供浏览服务；信息，为用户提供浏览服务；电子邮件服务器电子邮件

10、服务器为为用户提供电子邮件信箱和收发电子邮件服务；用户提供电子邮件信箱和收发电子邮件服务；FTP服务器服务器为用户提供上传和下载文件的服务为用户提供上传和下载文件的服务.12网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.1 网站基础知识1.1.4服务器与客户机服务器与客户机 互联网是由不计其数的计算机和相关设备相互连互联网是由不计其数的计算机和相关设备相互连接而成的。根据计算机在互联网中的用途可将其分接而成的。根据计算机在互联网中的用途可将其分成两类：服务器和客户机成两类：服务器和客户机2.客户机客户机客户机客户机是用户用来获取资源和服务的计算机。是用户用来获取资

11、源和服务的计算机。浏览器软件是客户机上的必备软件，常见的浏览浏览器软件是客户机上的必备软件，常见的浏览器软件有器软件有IE浏览器、浏览器、360浏览器、谷歌浏览器等。浏览器、谷歌浏览器等。13网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.2 网站的组成1.2.1 网站网站IP地址和地址和域名域名1.2.2 网站硬件平台网站硬件平台1.2.3 网站软件平台网站软件平台14网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.2 网站的组成1.2.1 网站网站IP地址和地址和域名域名IP地址：每个接入因特网的主机在网络上都应该地址：每个接入因特网

12、的主机在网络上都应该有唯一的标识，以便其他计算机能够访问，这就有唯一的标识，以便其他计算机能够访问，这就是是IP地址。地址。IP地址通常由因特网服务提供商地址通常由因特网服务提供商（ISP）提供。当用户向）提供。当用户向ISP提出网站接入申请，提出网站接入申请，同时缴纳一定的费用并得到批准后，同时缴纳一定的费用并得到批准后，ISP将提供将提供用户一个接入因特网的用户一个接入因特网的IP地址。中国电信、网通地址。中国电信、网通等机构等机构 域名域名为为ISP15网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.2 网站的组成1.2.1 网站网站IP地址和地址和域名域名域

13、名：每个域名：每个IP地址都可以申请一个与其对应的、便地址都可以申请一个与其对应的、便于记忆的域名。域名于记忆的域名。域名（Domain Name），），是一个是一个企业或机构在网上的永久性电子商标，它如同商标企业或机构在网上的永久性电子商标，它如同商标在市场上的作用一样，是一种无形资产。要建立网在市场上的作用一样，是一种无形资产。要建立网站，注册域名是一个重要的环节，用户不但可以申站，注册域名是一个重要的环节，用户不但可以申请国内域名，也可以申请国际域名。请国内域名，也可以申请国际域名。16网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.2 网站的组成1.2.2

14、1.2.2 网站硬件平台网站硬件平台网站网站硬件主要由两大部分组成：网络设备和服务器硬件主要由两大部分组成：网络设备和服务器1.网络设备：网络设备：网络设备主要用于网站局域网建设、网站与因特网的连接。网络设备主要用于网站局域网建设、网站与因特网的连接。n路由器路由器是一种连接多个是一种连接多个 网络或网段的设备，是将网站连入网络或网段的设备，是将网站连入因特网的桥梁。因特网的桥梁。n交换机交换机是局域网组网的重要设备，多台不同的计算机可以通是局域网组网的重要设备，多台不同的计算机可以通过交换机组成网络过交换机组成网络。n防火墙防火墙是一个由硬件和软件结合的系统，是网站内部和外部是一个由硬件和软

15、件结合的系统，是网站内部和外部之间的一道屏障，可限制外界未经授权的用户访问内部网络，之间的一道屏障，可限制外界未经授权的用户访问内部网络，管理内部用户访问外部网络的权限。管理内部用户访问外部网络的权限。17网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.2 网站的组成1.2.2 1.2.2 网站硬件平台网站硬件平台2.服务器服务器每个网站通常都应配置一台服务器，用于存放网页每个网站通常都应配置一台服务器，用于存放网页和数据库等文件和数据库等文件服务器可由服务器可由PC、专用服务器和小型机等计算机担任。、专用服务器和小型机等计算机担任。选择服务器是网站建设的重要环节，

16、必须选择一台选择服务器是网站建设的重要环节，必须选择一台性能好、成本低、可扩展、安全可靠的服务器。性能好、成本低、可扩展、安全可靠的服务器。18网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.2 网站的组成1.2.2 1.2.2 网站硬件平台网站硬件平台2.服务器服务器独立的服务器独立的服务器 对于经济实力雄厚且业务量较大的企业，可以购置自己独立的服务器，但这需要很高的费用及大量的人力、物力投入。虚拟主机方式虚拟主机方式 所谓虚拟主机是使用特殊的软硬件技术，将服务器分成若干个空间的方式，一般虚拟主机提供商都能向用户提供100MB、300MB、500MB直到一台服务器

17、的虚拟主机空间。可根据网站的内容设置及其发展前景来选择。19网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.2 网站的组成1.2.3 1.2.3 网站软件平台网站软件平台网站运行的软件平台包括：操作系统、网站运行的软件平台包括：操作系统、Web服务器和数据库系服务器和数据库系统等统等1.操作系统操作系统 可用于网站建设的操作系统有：可用于网站建设的操作系统有：Windows、UNIX、Linux等。等。Windows：最流行，技术先进、操作方便，软件兼容，提供：最流行，技术先进、操作方便，软件兼容，提供IISUNIX：技术成熟、开放性好、可靠性高、网络功能强大，主要

18、用于小：技术成熟、开放性好、可靠性高、网络功能强大，主要用于小型机型机Linux：属免费操作系统平台。与：属免费操作系统平台。与UNIX类似。类似。 中小企业及个人网站通常使用中小企业及个人网站通常使用Windows操作系统，规模大、可操作系统，规模大、可靠性和安全性要求较高的网站，通常选择靠性和安全性要求较高的网站，通常选择UNIX或或Linux操作系操作系统。统。20网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.2 网站的组成1.2.3 1.2.3 网站软件平台网站软件平台网站运行的软件平台包括：操作系统、网站运行的软件平台包括：操作系统、Web服务器和数据库

19、系服务器和数据库系统等统等2.Web服务器服务器 网站的正常运转需要网站的正常运转需要Web服务器的支持，各种操作系统下服务器的支持，各种操作系统下都有提供都有提供Web服务器功能的软件，有的在操作系统中集成，有服务器功能的软件，有的在操作系统中集成，有的是第三方软件。的是第三方软件。WindowsIIS组件，组件，Win7已集成已集成UNIXApache Web ServerLinuxWeblogic。21网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.2 网站的组成1.2.3 1.2.3 网站软件平台网站软件平台网站运行的软件平台包括：操作系统、网站运行的软件平

20、台包括：操作系统、Web服务器和数据库系统等服务器和数据库系统等3.数据库数据库 建设动态、交互、管理类的网站离不开数据库，目前网站建设中建设动态、交互、管理类的网站离不开数据库，目前网站建设中常用的数据库产品有：常用的数据库产品有：nMicrosoft Access是最流行的桌面数据库。是最流行的桌面数据库。Access提供了一提供了一种易于使用的界面以便对数据库表进行操作。种易于使用的界面以便对数据库表进行操作。nMySQL是最流行的开放源数据库系统，是快速、灵活、性价是最流行的开放源数据库系统，是快速、灵活、性价比良好的数据库软件。比良好的数据库软件。nSQL Server最全面的数据库

21、产品，提供强大的企业数据库管最全面的数据库产品，提供强大的企业数据库管理功能。理功能。 nOracle功能最强大、性能最全面的产品之一，但高价。功能最强大、性能最全面的产品之一，但高价。 22网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.按覆盖范围分类按覆盖范围分类 网站既可以运行在企业内部的局域网，也可以运行在因网站既可以运行在企业内部的局域网，也可以运行在因特网，因此，网站可以分为内部网站和外部网站。特网，因此，网站可以分为内部网站和外部网站。内部网站内部网站是只供企业局域网内的用户访问的网是只供企业局域网内的用户访问的网站站外部网站外部网站是通过因特网访问的

22、网站，用户访问是通过因特网访问的网站，用户访问网站时，必须先登录因特网，然后借助浏览器通过网站时，必须先登录因特网，然后借助浏览器通过URL访问网站。访问网站。231.3 网站的分类网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础2.按交互方式分类按交互方式分类网站的另一种分类方法是按照交互性功能分类，可分为网站的另一种分类方法是按照交互性功能分类，可分为静态网站和动态网站静态网站和动态网站静态网站静态网站：在网站设计中，纯粹：在网站设计中，纯粹HTML格式的网页通格式的网页通常被称为常被称为“静态网页静态网页”，包含文字，图片，动画图，包含文字，图片，动画图片，声音，

23、影片等等现在大家可以看到的丰富内容。片，声音，影片等等现在大家可以看到的丰富内容。动态网站动态网站：动态网站并不是指在网页上插入了动画：动态网站并不是指在网页上插入了动画元素的网站，而是指网站内容的更新和维护是通过元素的网站，而是指网站内容的更新和维护是通过基于数据库技术的内容管理系统完成。它将网站建基于数据库技术的内容管理系统完成。它将网站建设从静态页面制作延伸为对信息资源的组织和管理。设从静态页面制作延伸为对信息资源的组织和管理。241.3 网站的分类网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础 3.按按网站的用途分类：网站的用途分类： 门户网站（综合网站）、行

24、业网站、娱乐网站等；门户网站（综合网站）、行业网站、娱乐网站等；4.按按网站的功能分类：网站的功能分类： 单一网站（企业网站）、多功能网站（网络商城）等等。单一网站（企业网站）、多功能网站（网络商城）等等。5.据网站的持有者分类： 个人网站、商业网站、政府网站、教育网站等。6.据网站的商业目的分类： 营利型网站（行业网站、论坛）、非营利性型网站（企业网站、政府网站、教育网站）。251.3 网站的分类网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础7.按资源性质按资源性质分类分类n信息门户型网站信息门户型网站n企业型网站企业型网站n交易类网站交易类网站n社区网站社区网站n

25、办公及政府机构网站办公及政府机构网站n互动游戏网站互动游戏网站n有偿资讯类网站有偿资讯类网站n功能性网站功能性网站n综合类网站综合类网站 网站类型的不同决定了网站要按照不同的风格进行设计，设计出自身的特色来，网站才能长远运营发展。通过了解我们平时遇到的各种各样的网站类型，我们在做网站的时候，一定要根据自己的具体需求制作适合自己的网站，选择合适的网站类型。261.3 网站的分类网站的分类网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.4 常用建站技术与开发其他应用程序相比，建设网站往往需要由多与开发其他应用程序相比，建设网站往往需要由多种语言和工具集成的集合开发平台。

26、常用的语言有种语言和工具集成的集合开发平台。常用的语言有HTML、VBScript、ASP、.NET、PHP、JSP等，常等，常用的工具有用的工具有Dreamweaver、Flash、Photoshop或或Fireworks等。等。建设与修改网站所使用的编程语言，换成源码就是建设与修改网站所使用的编程语言，换成源码就是一堆按一定格式书写的文字和符号，浏览器会帮我一堆按一定格式书写的文字和符号，浏览器会帮我们翻译成眼前的模样。们翻译成眼前的模样。27网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.4.1 1.4.1 常用语言常用语言nHTML：是一种超文本标记语言，是

27、是一种超文本标记语言，是WWW文档文档描述语言。它主要在原来文本文件的基础上，加描述语言。它主要在原来文本文件的基础上，加上一系列的标记符号描述其格式，形成网络文件。上一系列的标记符号描述其格式，形成网络文件。当用户使用浏览器下载文件时，就把这此标记解当用户使用浏览器下载文件时，就把这此标记解释成应有的含义，按照一定的格式显示在屏幕上。释成应有的含义，按照一定的格式显示在屏幕上。1.4 常用建站技术28网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.4.1 1.4.1 常用语言常用语言nCSS：样式表。样式表。CSS的出现为实现的出现为实现HTML文档内容文档内容和

28、显示样式的分离提供了有力的技术手段。利用和显示样式的分离提供了有力的技术手段。利用CSS，开发者可以在，开发者可以在HTML文档中只编写内容，文档中只编写内容，而在另一份样式文档中设计这些内容的显示方式，而在另一份样式文档中设计这些内容的显示方式，比如字体、字形、字号、颜色、风格等。比如字体、字形、字号、颜色、风格等。1.4 常用建站技术29网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.4.1 1.4.1 常用语言常用语言nASP：是微软所开发的一种后台脚本语言。开发：是微软所开发的一种后台脚本语言。开发快、易上手、效率高是快、易上手、效率高是ASP的优点，但是在

29、安全的优点，但是在安全隐患上，隐患上，ASP存在的隐患是四种语言里最大的，存在的隐患是四种语言里最大的，其次平台的局限性也限制了其次平台的局限性也限制了ASP的发展。的发展。1.4 常用建站技术30网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.4.1 1.4.1 常用语言常用语言n.NET相当于相当于ASP的升级版本，提供了一种新的编的升级版本，提供了一种新的编程模型结构，可以生成伸缩性和稳定性更好的应程模型结构，可以生成伸缩性和稳定性更好的应用程序，并提供更好的安全保护。但是也由于是用程序，并提供更好的安全保护。但是也由于是微软的产品，那么平台就有了限制。还有数

30、据库微软的产品，那么平台就有了限制。还有数据库的链接复杂。的链接复杂。1.4 常用建站技术31网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.4.1 1.4.1 常用语言常用语言nPHP是当下主流网站开发语言之一，是当下主流网站开发语言之一，PHP源码是完源码是完全公开的，不断的有新函数库加入，以及不停地更全公开的，不断的有新函数库加入，以及不停地更新，使得新，使得PHP无论在无论在UNIX或是或是WIN的平台都可以的平台都可以有更多新功能。它提供丰富的函数，使得在程序设有更多新功能。它提供丰富的函数，使得在程序设计方面有着更好的资源。平台无关性以及安全就是计方面有

31、着更好的资源。平台无关性以及安全就是PHP最大的优点。当然还有一些小小的缺点，但是最大的优点。当然还有一些小小的缺点，但是作为应用最为广泛的一种后台语言，作为应用最为广泛的一种后台语言，PHP的优点还的优点还是显于缺点。是显于缺点。321.4 常用建站技术网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.4.1 1.4.1 常用语言常用语言nJSP技术平台和服务器是互相独立，同技术平台和服务器是互相独立，同PHP一样也一样也是开放的源码。是开放的源码。JSP出现至今已经是一门很成熟的出现至今已经是一门很成熟的程序语言，集成的数据源能力，易于维护，能有效程序语言，集成的

32、数据源能力，易于维护，能有效的防止系统崩溃等这些优点。无疑的防止系统崩溃等这些优点。无疑JSP是四种语言是四种语言里最好最强大的，但是由于它的强大就决定了其使里最好最强大的，但是由于它的强大就决定了其使用的技术性，所以不是一般企业网站做站语言的首用的技术性，所以不是一般企业网站做站语言的首选。选。331.4 常用建站技术网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.4.2 1.4.2 辅助工具辅助工具1. 1. Dreamweavern是一款专业的是一款专业的HTML编辑器，用于对编辑器，用于对Web站点、页面和应用站点、页面和应用程序进行设计、编码和开发。程序进

33、行设计、编码和开发。n可视化编辑：快速创建页面而无须编写任何代码。可以查看可视化编辑：快速创建页面而无须编写任何代码。可以查看所有站点元素或资源，并将它们从易于使用的面板直接拖到所有站点元素或资源，并将它们从易于使用的面板直接拖到文档中。文档中。n手工编码：提供了功能全面的编码环境，可方便地编写手工编码：提供了功能全面的编码环境，可方便地编写HTML、CSS、VBScript、ASP.NET等代码，并提供实时预等代码，并提供实时预览功能。览功能。341.4 常用建站技术网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.4.2 1.4.2 辅助工具辅助工具2. Flas

34、h2. FlashnFlash与与Fireworks、Dreamweaver合称为合称为“网页制网页制作三剑客作三剑客”是一款功能强大的矢量化交互式动画制是一款功能强大的矢量化交互式动画制作软件。作软件。n用用Flash制作的动画具有质量高、体积小的特点，制作的动画具有质量高、体积小的特点，并能跨越各种浏览器、操作系统和硬件平台。并能跨越各种浏览器、操作系统和硬件平台。351.4 常用建站技术网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.4.2 1.4.2 辅助工具辅助工具3. PhotoShop3. PhotoShop或或FireworksnPhotoShopP

35、hotoShop或或Fireworks是用来设计和制作专业化网是用来设计和制作专业化网页图形的应用软件。页图形的应用软件。n利用利用 Fireworks可以同时创建和编辑位图和适量图可以同时创建和编辑位图和适量图两种图形，并且可以随时编辑。两种图形，并且可以随时编辑。361.4 常用建站技术网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.5 网站建设基本流程1.5.1 确立目标确立目标1.5.2 规划网站规划网站1.5.3 搜集资料搜集资料1.5.4 组织站点结构组织站点结构1.5.5 选择合适的制作工具选择合适的制作工具1.5.6 制作建设制作建设1.5.7 上传

36、测试上传测试1.5.8 推广宣传推广宣传1.5.9 维护更新维护更新37网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.5 网站建设基本流程1.5.1 确立目标确立目标1.5.2 规划网站规划网站1.5.3 搜集资料搜集资料1.5.4 组织站点结构组织站点结构1.5.5 选择合适的制作工具选择合适的制作工具1.5.6 制作建设制作建设1.5.7 上传测试上传测试1.5.8 推广宣传推广宣传1.5.9 维护更新维护更新38确定网站目标也就是网站的主确定网站目标也就是网站的主题，是创建网站所要包含的主要题，是创建网站所要包含的主要内容，一个网站必须要有一个明内容，一个网

37、站必须要有一个明确的主题。确的主题。 网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.5 网站建设基本流程1.5.1 确立目标确立目标1.5.2 规划网站规划网站1.5.3 搜集资料搜集资料1.5.4 组织站点结构组织站点结构1.5.5 选择合适的制作工具选择合适的制作工具1.5.6 制作建设制作建设1.5.7 上传测试上传测试1.5.8 推广宣传推广宣传1.5.9 维护更新维护更新39网站规划包含的内容很多，如网站规划包含的内容很多，如网站的结构、栏目的设置、网站网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、的风格、颜色搭配、版面布局、文字图片的运用等。

38、文字图片的运用等。n规划站点内容规划站点内容n规划站点的导航机制规划站点的导航机制1.明确站点的风格明确站点的风格网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.5 网站建设基本流程1.5.1 确立目标确立目标1.5.2 规划网站规划网站1.5.3 搜集资料搜集资料1.5.4 组织站点结构组织站点结构1.5.5 选择合适的制作工具选择合适的制作工具1.5.6 制作建设制作建设1.5.7 上传测试上传测试1.5.8 推广宣传推广宣传1.5.9 维护更新维护更新40要想让自己的网站有血有肉，要想让自己的网站有血有肉，能够吸引住用户，就要尽量搜集能够吸引住用户，就要尽量搜

39、集材料，搜集得材料越多，以后制材料，搜集得材料越多，以后制作网站就越容易。资料既可以从作网站就越容易。资料既可以从图书、报纸、光盘、多媒体上得图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。存真，作为自己制作网页的素材。网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.5 网站建设基本流程1.5.1 确立目标确立目标1.5.2 规划网站规划网站1.5.3 搜集资料搜集资料1.5.4 组织站点结构组织站点结构1.5.5 选择合适的制作工具选择合适的制

40、作工具1.5.6 制作建设制作建设1.5.7 上传测试上传测试1.5.8 推广宣传推广宣传1.5.9 维护更新维护更新41n站点可以看作是一系列文档的站点可以看作是一系列文档的组合，这些文档之间通过各种链组合，这些文档之间通过各种链接关联起来。接关联起来。n在本地磁盘上创建一个包含站在本地磁盘上创建一个包含站点所有文件的文件夹，然后在该点所有文件的文件夹，然后在该文件夹中创建和编辑文档。当准文件夹中创建和编辑文档。当准备好发布站点时，再将这些文件备好发布站点时，再将这些文件复制到复制到Web服务器上。服务器上。n网站的目录是指建立网站时创网站的目录是指建立网站时创建的目录。如在建立网站时都默建

41、的目录。如在建立网站时都默认建立了根目录和认建立了根目录和images子目录。子目录。网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.5 网站建设基本流程1.5.1 确立目标确立目标1.5.2 规划网站规划网站1.5.3 搜集资料搜集资料1.5.4 组织站点结构组织站点结构1.5.5 选择合适的制作工具选择合适的制作工具1.5.6 制作建设制作建设1.5.7 上传测试上传测试1.5.8 推广宣传推广宣传1.5.9 维护更新维护更新42n网页制作涉及的工具比较网页制作涉及的工具比较多，网页制作工具多，网页制作工具Dreamweaver和和Frontpage；图片编辑工

42、具，如图片编辑工具，如Photoshop、Photoimpact等；等；动画制作工具，如动画制作工具，如Flash、Cool 3d、Gif Animator等。等。网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.5 网站建设基本流程1.5.1 确立目标确立目标1.5.2 规划网站规划网站1.5.3 搜集资料搜集资料1.5.4 组织站点结构组织站点结构1.5.5 选择合适的制作工具选择合适的制作工具1.5.6 制作建设制作建设1.5.7 上传测试上传测试1.5.8 推广宣传推广宣传1.5.9 维护更新维护更新43n建站主要分前台和后台，前台建站主要分前台和后台，前台的

43、就是网站的的就是网站的版版式，根据网站类式，根据网站类型，面向人群，来设计网站的版型，面向人群，来设计网站的版面。建设后台就较为复杂了，就面。建设后台就较为复杂了，就要用程序整合前台，并且完成需要用程序整合前台，并且完成需要的功能，这个需要较为复杂的要的功能，这个需要较为复杂的程序编写。程序编写。网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.5 网站建设基本流程1.5.1 确立目标确立目标1.5.2 规划网站规划网站1.5.3 搜集资料搜集资料1.5.4 组织站点结构组织站点结构1.5.5 选择合适的制作工具选择合适的制作工具1.5.6 制作建设制作建设1.5.7

44、 上传测试上传测试1.5.8 推广宣传推广宣传1.5.9 维护更新维护更新44n网页制作工具本身就带有网页制作工具本身就带有FTP功能，利用这些功能，利用这些FTP工具，你可工具，你可以很方便地把网站发布到自己申以很方便地把网站发布到自己申请的主页存放服务器上。请的主页存放服务器上。网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.5 网站建设基本流程1.5.1 确立目标确立目标1.5.2 规划网站规划网站1.5.3 搜集资料搜集资料1.5.4 组织站点结构组织站点结构1.5.5 选择合适的制作工具选择合适的制作工具1.5.6 制作建设制作建设1.5.7 上传测试上传

45、测试1.5.8 推广宣传推广宣传1.5.9 维护更新维护更新45n推广的方法有很多，例如到搜推广的方法有很多，例如到搜索引擎上注册、与别的网站交换索引擎上注册、与别的网站交换链接等。链接等。网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.5 网站建设基本流程1.5.1 确立目标确立目标1.5.2 规划网站规划网站1.5.3 搜集资料搜集资料1.5.4 组织站点结构组织站点结构1.5.5 选择合适的制作工具选择合适的制作工具1.5.6 制作建设制作建设1.5.7 上传测试上传测试1.5.8 推广宣传推广宣传1.5.9 维护更新维护更新46n网站要注意经常维护更新内容，

46、网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住它补充新的内容，才能够吸引住浏览者。浏览者。网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.6 网页基本元素在每一个单独的网页中，又包括标题、网站在每一个单独的网页中，又包括标题、网站LOGO、导航栏、导航栏、Banner广告栏、文本、图像、动画、超链接、广告栏、文本、图像、动画、超链接、表单、版权信息表单、版权信息等基本元素。等基本元素。47网页制作基础教程网页制作基础教程第第1 1章章 网页设计基

47、础网页设计基础1.6 网页基本元素48网站网站网页网页网页网页网页标题LOGOBanner导航栏文本图像动画表单版权信息网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.6 网页基本元素网站网站LOGO网站网站Banner导航栏导航栏文本文本 图像图像 动画动画 表单表单 版权信息版权信息网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.6 网页基本元素.1网站网站LOGOLOGOnLogo的中文含义是标志、标识。作为独特的传媒符号，的中文含义是标志、标识。作为独特的传媒符号，Logo一直是传播特殊信息的视觉文化语言。在网页设

48、计中，一直是传播特殊信息的视觉文化语言。在网页设计中，Logo常作为公司或站点的标识出现，起着非常重要的作用，常作为公司或站点的标识出现，起着非常重要的作用，集中体现了这个网站的文化内涵和内容定位。集中体现了这个网站的文化内涵和内容定位。n网站网站Logo的设计要简单醒目，除了表达一定的形象和信息的设计要简单醒目，除了表达一定的形象和信息外，还必须兼顾与整个页面的美观与协调。外，还必须兼顾与整个页面的美观与协调。 50网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.6 网页基本元素1.6.2 1.6.2 网站网站BannerBannernBanner的中文含义是横幅

49、、标语，通常被称为网络广告。的中文含义是横幅、标语，通常被称为网络广告。Banner在互联网上有很多的自由和创意空间，但是仍然在在互联网上有很多的自由和创意空间，但是仍然在一定程度上遵循媒体的要求。一定程度上遵循媒体的要求。51网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.6 网页基本元素1.6.3 1.6.3 导航栏导航栏n导航栏实质上是一组超链接，通过这组超链接可以浏览到整导航栏实质上是一组超链接，通过这组超链接可以浏览到整个网站的其他页面。它应该放置在页面中较为醒目的位置，个网站的其他页面。它应该放置在页面中较为醒目的位置，便于网站浏览者在第一时间看到它并作

50、出判断，确定要进入便于网站浏览者在第一时间看到它并作出判断，确定要进入哪个栏目去搜索他们需要的信息。哪个栏目去搜索他们需要的信息。n导航大致可以分为横排导航、竖排导航、多排导航、图片式导航大致可以分为横排导航、竖排导航、多排导航、图片式导航、框架快捷导航、下拉菜单导航、隐藏式导航和动态导航、框架快捷导航、下拉菜单导航、隐藏式导航和动态Flash导航等。导航等。52网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.6 网页基本元素.4 文本文本n文本作为人类最重要的信息载体的交流工具，是最重要的网文本作为人类最重要的信息载体的交流工具，是最重要的网页元素

51、之一。页元素之一。n与图像、动画等其他网页元素相比，文本不易在第一时间吸与图像、动画等其他网页元素相比，文本不易在第一时间吸引浏览者的注意，但文本能够更加准确详细地表达网页信息引浏览者的注意，但文本能够更加准确详细地表达网页信息内容和含义，是对其他网页元素的补充。内容和含义，是对其他网页元素的补充。n随着网页制作工具不断完善、功能不断增强，网页中的文本随着网页制作工具不断完善、功能不断增强，网页中的文本也可以按照不同的需求设置相应的字体、字号、颜色等属性，也可以按照不同的需求设置相应的字体、字号、颜色等属性，还可以添加一些文字特效，以突出显示重要的文本部分，打还可以添加一些文字特效，以突出显示

52、重要的文本部分，打破文字的固有缺陷。破文字的固有缺陷。53网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.6 网页基本元素.5 图像图像n适当的图像能够为网页增添生动性和活泼性，不仅丰富网页适当的图像能够为网页增添生动性和活泼性，不仅丰富网页内容、提供更多更直接的信息，还能给浏览者视觉上的美感。内容、提供更多更直接的信息，还能给浏览者视觉上的美感。图像几乎不受计算机平台、地域和语种的限制，也使网页更图像几乎不受计算机平台、地域和语种的限制，也使网页更多地显示出制作上的创造力。多地显示出制作上的创造力。n页面中的图像不易过多，造成主次不分、形式单调。且

53、图像页面中的图像不易过多，造成主次不分、形式单调。且图像所占空间大，过多的图像会增加网页的下载时间。所占空间大，过多的图像会增加网页的下载时间。n图像在网页中作用很多，如制作导航栏、插图、背景图像、图像在网页中作用很多，如制作导航栏、插图、背景图像、按钮等。按钮等。54网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.6 网页基本元素.6 动画动画n动画能够形象生动地表现事物的变化发展过程，增加网页的动画能够形象生动地表现事物的变化发展过程，增加网页的动态效果，使网站更加生动有趣，因此，动画已经成为现代动态效果，使网站更加生动有趣，因此，动画已经成为现

54、代网站中不可缺少的元素之一。网站中不可缺少的元素之一。n在网页中使用的动画通常有在网页中使用的动画通常有GIF动画、动画、Flash动画，以及动画，以及JAVA小程序等小程序等 55网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.6 网页基本元素.7 表单表单n表单是网页中的一组数据输入区域，用户通过按钮提表单是网页中的一组数据输入区域，用户通过按钮提交表单后，输入的数据传送到服务器。网络上需要交交表单后，输入的数据传送到服务器。网络上需要交互的留言板、在线论坛、订单等等都离不开表单。互的留言板、在线论坛、订单等等都离不开表单。n表单实质上是一个服务

55、器程序，用户可以在网页上的表单实质上是一个服务器程序，用户可以在网页上的表单域中输入文本或数据，提交表单，该表单程序在表单域中输入文本或数据，提交表单，该表单程序在服务器上执行，并将执行结果反馈到相应的页面上，服务器上执行，并将执行结果反馈到相应的页面上，从而实现了用户与网站之间的交互。从而实现了用户与网站之间的交互。56网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.6 网页基本元素.8 版权信息版权信息n加入伯尼尔公约的国家都必须遵从该公约关于版权声明的规加入伯尼尔公约的国家都必须遵从该公约关于版权声明的规定，简短的一段话透露出网站的专业性并提示

56、浏览者需要注定，简短的一段话透露出网站的专业性并提示浏览者需要注意对该网站的版权进行保护，不得侵犯。意对该网站的版权进行保护，不得侵犯。n版权声明的最标准格式应该是：版权声明的最标准格式应该是：Copyright dates by author/owner， 通常可以代替通常可以代替Copyright，但是不可以用，但是不可以用(c)。 57网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.7 Dreamweaver CC工作环境1.7.1 Dreamweaver CC的启动的启动1.7.2 Dreamweaver CC的工作环境的工作环境菜单栏文档工具栏面板组应用程

57、序栏属性面板编辑窗口58网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.7 Dreamweaver CC工作环境1.1.7 7.3 .3 调整工作界面调整工作界面n改变工作视图改变工作视图1.Dreamweaver中提供了中提供了3种视图：设计视图、种视图：设计视图、代码视图及代码和设计视图。当需要改变编辑代码视图及代码和设计视图。当需要改变编辑视图时，只需点击对应视图按钮，即转换至目视图时，只需点击对应视图按钮，即转换至目标视图模式下。标视图模式下。59网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.7 Dreamweaver CC工作

58、环境1.7.3 调整工作界面调整工作界面n显示、隐藏及改变面板的大小显示、隐藏及改变面板的大小n在在“窗口窗口”菜单中，勾选或取消相应面板。菜单中，勾选或取消相应面板。n点击面板的标题或标签。点击面板的标题或标签。2.点击面板标题栏右侧的控制菜单，从弹出点击面板标题栏右侧的控制菜单，从弹出菜单中选择菜单中选择“关闭面板组关闭面板组”。60网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.7 Dreamweaver CC工作环境1.1.7 7.3 .3 调整工作界面调整工作界面n标尺、网格与辅助线标尺、网格与辅助线3.“查看查看”|“标尺标尺”（或网格，或辅助线）（或网

59、格，或辅助线） 61网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.8 Dreamweaver 工作流程1.8.1 规划和设置站点规划和设置站点确定将在哪里发布文件，检查站点要求、访确定将在哪里发布文件，检查站点要求、访问者情况以及站点目标。此外，还应考虑诸问者情况以及站点目标。此外，还应考虑诸如用户访问以及浏览器、插件和下载限制等如用户访问以及浏览器、插件和下载限制等技术要求。在组织好信息并确定结构后，就技术要求。在组织好信息并确定结构后，就可以开始创建站点。可以开始创建站点。62网页制作基础教程网页制作基础教程第第1 1章章 网页设计基础网页设计基础1.8 Dr

60、eamweaver 工作流程1.8.2 组织和管理站点文件组织和管理站点文件在在“文件文件”面板中，可以方便地添加、删除和重面板中，可以方便地添加、删除和重命名文件及文件夹，以便根据需要更改组织结构。命名文件及文件夹，以便根据需要更改组织结构。在在“文件文件”面板中还有许多工具，可使用它们管面板中还有许多工具，可使用它们管理站点，向理站点，向/ /从远程服务器传输文件，设置从远程服务器传输文件，设置“存存回回/ /取出取出”过程来防止文件被覆盖，以及同步本过程来防止文件被覆盖，以及同步本地和远程站点上的文件。使用地和远程站点上的文件。使用“资源资源”面板可方面板可方便地组织站点中的资源；然后可