DreameaverCS5自学第一章

1、网页就是我们上网时在浏览器中打开的一个个画面，网页就是我们上网时在浏览器中打开的一个个画面，网站则是一组相关网页的集合。一个小型网站可能网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千只包含几个网页，而一个大型网站则可能包含成千上万个网页。上万个网页。打开某个网站时显示的第一个网页被称为网站的主打开某个网站时显示的第一个网页被称为网站的主页（或首页）。页（或首页）。我们可以将网页中的元素按功能分为站标、导我们可以将网页中的元素按功能分为站标、导航条、广告条、标题栏和按钮等，如图航条、广告条、标题栏和按钮等，如图1-11-1所示。所示。站标站标导航条导航条

2、广告广告条条按钮按钮标题标题栏栏站标也叫站标也叫LogoLogo，是网站的标志，其作用是使人看见它，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站就能够联想到企业。因此，网站LogoLogo通常采用企业的通常采用企业的LogoLogo。LogoLogo一般采用蕴含企业文化和特色的图案，或是与企一般采用蕴含企业文化和特色的图案，或是与企业名称相关的字符或符号及其变形，当然也有很多是业名称相关的字符或符号及其变形，当然也有很多是图文组合，如下图所示。图文组合，如下图所示。导航条是一组链接到网站内主要页面的超链接导航条是一组链接到网站内主要页面的超链接组合，通过单击这些超链接，浏览者可

3、以轻松组合，通过单击这些超链接，浏览者可以轻松找到网站中的各个页面。设计导航条时，应遵找到网站中的各个页面。设计导航条时，应遵循以下原则：循以下原则：对于一般的企业网站，如果网站内容不多，对于一般的企业网站，如果网站内容不多，可根据网站风格灵活摆放导航条，也可以使用可根据网站风格灵活摆放导航条，也可以使用图片或图片或FlashFlash动画等显示导航条，如下图所示。动画等显示导航条，如下图所示。对于像搜狐、网易等大型门户类网站，网站对于像搜狐、网易等大型门户类网站，网站栏目都很多，一般将导航条分为多排放置在栏目都很多，一般将导航条分为多排放置在LogoLogo的下方或右侧。为便于查看，可为各排

4、设的下方或右侧。为便于查看，可为各排设置不同的底色，如下图所示。置不同的底色，如下图所示。广告条又称广告条又称BannerBanner，其功能是宣传网站或为其，其功能是宣传网站或为其他商品做广告。他商品做广告。BannerBanner的尺寸可以根据内容或的尺寸可以根据内容或版面需要来安排。版面需要来安排。在制作在制作BannerBanner时，有以下几点需要注意。时，有以下几点需要注意。 Banner可以是静态的，也可以是动态的。可以是静态的，也可以是动态的。Banner的体积不宜过大，尽量使用的体积不宜过大，尽量使用GIF格式图片与格式图片与动画或动画或Flash动画。动画。Banner中的

5、文字不要太多。中的文字不要太多。 Banner中图片的颜色不要太多，尤其是中图片的颜色不要太多，尤其是GIF格式的格式的图片或动画，要避免出现颜色的渐变和光晕效果。图片或动画，要避免出现颜色的渐变和光晕效果。 此处的标题栏不是指整个网页的标题栏，而是此处的标题栏不是指整个网页的标题栏，而是网页上各版块的标题栏，是各版块内容的概括。网页上各版块的标题栏，是各版块内容的概括。它使得网页内容的分类更清晰、明了，大大地它使得网页内容的分类更清晰、明了，大大地方便了浏览者。方便了浏览者。标题栏可以是文字加不同颜色的背景，也可以标题栏可以是文字加不同颜色的背景，也可以是图片，这由网站的整体风格决定。是图片

6、，这由网站的整体风格决定。按钮通常是启动某些装置或机关的开关。网页中按钮通常是启动某些装置或机关的开关。网页中的按钮也不例外，单击它，网页会实现相应的操的按钮也不例外，单击它，网页会实现相应的操作，比如跳转到其他页面，或提交数据等。作，比如跳转到其他页面，或提交数据等。在浏览器中选择在浏览器中选择“文件文件”“另存为另存为”菜单，将菜单，将网页保存到磁盘中，便可看到网页的组成文件。网页保存到磁盘中，便可看到网页的组成文件。 从制作技术的角度来讲，网页可分为静态网页从制作技术的角度来讲，网页可分为静态网页和动态网页。完全采用和动态网页。完全采用HTMLHTML技术制作的网页技术制作的网页称为静态

7、网页；使用称为静态网页；使用HTMLHTML、编程语言和数据、编程语言和数据库共同完成，需要与数据库实时交互的网页称库共同完成，需要与数据库实时交互的网页称为动态网页。为动态网页。互联网是全世界范围内的计算机联为一体而构成的互联网是全世界范围内的计算机联为一体而构成的通信网络。互联网上连接了不计其数的服务器和客通信网络。互联网上连接了不计其数的服务器和客户机，每一个主机在互联网上都有一个唯一的地址，户机，每一个主机在互联网上都有一个唯一的地址，我们称这个地址为我们称这个地址为IP地址（地址（Internet Protocol Address）。）。IP地址由地址由4个小于个小于256的数字组成

8、，数的数字组成，数字之间用点间隔。例如，字之间用点间隔。例如，“61.135.150.126”就是就是一个一个IP地址。地址。 由于由于IPIP地址在使用过程中难于记忆和书写，人们地址在使用过程中难于记忆和书写，人们又发现了一种与又发现了一种与IPIP地址对应的字符来表示地址，地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们只需要在浏览器域名是独一无二的。例如，我们只需要在浏览器地址栏中输入搜狐网站的域名地址栏中输入搜狐网站的域名“” ”，然后按回车键就可以访问搜狐网站了。然后按回车键就可以访问搜狐网站了

9、。网址又叫网址又叫URLURL，英文全称是，英文全称是“Uniform Uniform Resource Locator”Resource Locator”，即统一资源定位符。它是，即统一资源定位符。它是网络上通用的一种地址格式，用于标识网页文网络上通用的一种地址格式，用于标识网页文件在网络中的位置。件在网络中的位置。一个完整的网址由通信协议名称、域名或一个完整的网址由通信协议名称、域名或IPIP地地址、网页在服务器中的路径和文件名址、网页在服务器中的路径和文件名4 4部分组部分组成。成。DreamweaverDreamweaver是目前最常用的网站管理和网页是目前最常用的网站管理和网页制作软

10、件，其功能全面、操作灵活、专业性强。制作软件，其功能全面、操作灵活、专业性强。另外，它还可以作为动态网站的开发环境。另外，它还可以作为动态网站的开发环境。在制作网页时，除在制作网页时，除DreamweaverDreamweaver外还需要用到外还需要用到FireworksFireworks、FlashFlash、PhotoshopPhotoshop等辅助软件。等辅助软件。XHTMLXHTML是是ExtensibleExtensible HyperTextHyperText Markup Markup Language(Language(可扩展超文本标记语言可扩展超文本标记语言) )的英文缩写，

11、它的英文缩写，它的前身是的前身是HTMLHTML。由于。由于HTMLHTML代码烦琐，结构松散，所代码烦琐，结构松散，所以推出了以推出了XHTMLXHTML。也可以说，。也可以说，XHTMLXHTML是是HTMLHTML的一个升的一个升级版本级版本。XHTMLXHTML语言的核心是标签（或者称为标记）。也就语言的核心是标签（或者称为标记）。也就是说，我们在浏览网页时看到的文字、图像、动画是说，我们在浏览网页时看到的文字、图像、动画等在等在XHTMLXHTML文档中都是用标签来描述的。文档中都是用标签来描述的。网站建设流程是指从企业计划建设网站到网站网站建设流程是指从企业计划建设网站到网站建设完

12、成的一套规范化运作过程。建设完成的一套规范化运作过程。安装安装Dreamweaver CS5后，单击桌面左下角的后，单击桌面左下角的“开开始始”按钮按钮 ，选择，选择“所有程序所有程序”“Adobe Dreamweaver CS5”，就可以启动，就可以启动Dreamweaver CS5了。了。DreamweaverDreamweaver CS5 CS5的工作界面由应用程序栏、的工作界面由应用程序栏、文档标签、文档工具栏、文档窗口、标签选择文档标签、文档工具栏、文档窗口、标签选择器、状态栏、属性检查器和面板组等组成。器、状态栏、属性检查器和面板组等组成。应用程序栏位于工作区顶部，左侧显示菜单应用

13、程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器、栏，右侧包含工作区切换器、“CS Live”CS Live”按按钮和程序窗口控制按钮。钮和程序窗口控制按钮。文档标签栏位于应用程序栏下方，左侧显示当前打文档标签栏位于应用程序栏下方，左侧显示当前打开的所有网页文档的名称及其关闭按钮（标签）；开的所有网页文档的名称及其关闭按钮（标签）；右侧显示当前文档在本地磁盘中的保存路径以及向右侧显示当前文档在本地磁盘中的保存路径以及向下还原按钮；下方显示当前文档中的包含文档以及下还原按钮；下方显示当前文档中的包含文档以及链接文档。当用户打开多个网页时，通过单击文档链接文档。当用户打开多个网页时，通过

14、单击文档标签可在各网页之间切换。另外，单击下方的包含标签可在各网页之间切换。另外，单击下方的包含文档或链接文档，可打开相应文档。文档或链接文档，可打开相应文档。文档工具栏位于文档标签下方，包括各种可对文文档工具栏位于文档标签下方，包括各种可对文档进行操作的按钮。档进行操作的按钮。状态栏位于文档窗口底部，它提供了与当前文档状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。相关的一些信息。使用使用“属性检查器属性检查器”可以检查和设置当前选定可以检查和设置当前选定页面元素（如文本和插入对象）的最常用属性。页面元素（如文本和插入对象）的最常用属性。“属性检查器属性检查器”中的内容会根据选定元

15、素的变中的内容会根据选定元素的变化而变化。化而变化。默认状态下，面板组位于文档窗口右侧。面板默认状态下，面板组位于文档窗口右侧。面板组中包含各种类型的面板，组中包含各种类型的面板，DreamweaverDreamweaver中的中的大部分操作都需要利用面板来实现。其中最常大部分操作都需要利用面板来实现。其中最常用的有用的有“插入插入”面板、面板、“文件文件”面板和面板和“CSSCSS样式样式”面板，后面将陆续用到。面板，后面将陆续用到。定义网站的目的是把本地磁盘中的站点文件夹同定义网站的目的是把本地磁盘中的站点文件夹同Dreamweaver建立一定的关联，从而方便用户使建立一定的关联，从而方便

16、用户使用用Dreamweaver管理站点和编辑站点中的网页文管理站点和编辑站点中的网页文档，以及上传或下载站点内容等。档，以及上传或下载站点内容等。定义站点后，如果需要修改站点属性、复制或定义站点后，如果需要修改站点属性、复制或删除站点等，可执行下面的操作。删除站点等，可执行下面的操作。静态的首页文件一般命名为静态的首页文件一般命名为“index.html”。不要使用中文命名网站中的文件和文件夹。不要使用中文命名网站中的文件和文件夹。文件名中不要使用大写英文字母。文件名中不要使用大写英文字母。运算符符号不能用在文件名的开头。运算符符号不能用在文件名的开头。比较长的文件名可以使用下划线比较长的文

17、件名可以使用下划线“_”来隔开多个来隔开多个单词或关键字。单词或关键字。在大型网站中，分支页面的文件应存放在单独的在大型网站中，分支页面的文件应存放在单独的文件夹中。文件夹中。在动态网站中，用来存放数据库的文件夹一般命在动态网站中，用来存放数据库的文件夹一般命名为名为“data”或者或者“database” 。在在DreamweaverDreamweaver CS5 CS5中可以创建两种格式的网中可以创建两种格式的网页文档，一种是直接创建空白网页文档，另一页文档，一种是直接创建空白网页文档，另一种是通过种是通过DreamweaverDreamweaver CS5 CS5内置的模板文档创内置的模

18、板文档创建具有一定内容和样式的网页文档。建具有一定内容和样式的网页文档。若要对已有的文档进行编辑，就需要在若要对已有的文档进行编辑，就需要在DreamweaverDreamweaver中打开该文档。另外，在中打开该文档。另外，在DreamweaverDreamweaver中打开网页文档并执行相应操作中打开网页文档并执行相应操作后，如果想查看它在浏览器中的效果，可执行后，如果想查看它在浏览器中的效果，可执行预览操作。预览操作。一般在定义站点后，都会利用一般在定义站点后，都会利用“文件文件”面板来面板来创建、重命名或打开站点中的网页文档和文件创建、重命名或打开站点中的网页文档和文件夹。夹。本任务中，我们将以