DreamweaverCS5网页制作高级案例教程项目一

1、项目一 创建“夕照台”房产网站 网页制作基础一、学习目标二、理论指导三、任务实践一、学习习目标了解网页页的构成成元素，网页的的本质，以及动动态网页页和静态态网页的的区别。了解IP地址、域域名和网网址的概概念，以以及网站站管理与与网页制制作相关关软件，XHTML语言和网网站建设设流程。认识DreamweaverCS5的界面元元素。掌握规划划网站结结构以及及在Dreamweaver中定义和和管理站站点的方方法。掌握网页页文档和和文件夹夹的命名名规则，以及在在Dreamweaver中新建、打开、保存和和预览网网页的方方法，另另外还要要学会使使用“文文件”面面板管理理站点文文件和文文件夹。二、理论论指

2、导（一）认认识网站站和网页页网页就是是我们上上网时在在浏览器器中打开开的一个个个画面面，网站站则是一一组相关关网页的的集合。一个小小型网站站可能只只包含几几个网页页，而一一个大型型网站则则可能包包含成千千上万个个网页。打开某个个网站时时显示的的第一个个网页被被称为网网站的主主页（或或首页）。1网页的的构成元元素我们可以以将网页页中的元元素按功功能分为为站标、导航条条、广告告条、标标题栏和和按钮等等，如图图1-1所示。站标导航条广告条按钮标题栏（1）站标站标也叫叫Logo，是网站站的标志志，其作作用是使使人看见见它就能能够联想想到企业业。因此此，网站站Logo通常采用用企业的的Logo。Logo

3、一般采用用蕴含企企业文化化和特色色的图案案，或是是与企业业名称相相关的字字符或符符号及其其变形，当然也也有很多多是图文文组合，如下图图所示。（2）导航条条导航条是是一组链链接到网网站内主主要页面面的超链链接组合合，通过过单击这这些超链链接，浏浏览者可可以轻松松找到网网站中的的各个页页面。设设计导航航条时，应遵循循以下原原则：对于一般般的企业业网站，如果网网站内容容不多，可根据据网站风风格灵活活摆放导导航条，也可以以使用图图片或Flash动画等显显示导航航条，如如下图所所示。对于像搜搜狐、网网易等大大型门户户类网站站，网站站栏目都都很多，一般将将导航条条分为多多排放置置在Logo的下方或或右侧。

4、为便于于查看，可为各各排设置置不同的的底色，如下图图所示。（3）广告条条广告条又又称Banner，其功能能是宣传传网站或或为其他他商品做做广告。Banner的尺寸可可以根据据内容或或版面需需要来安安排。在制作Banner时，有以以下几点点需要注注意。Banner可以是静静态的，也可以以是动态态的。Banner的体积不不宜过大大，尽量量使用GIF格式图片片与动画画或Flash动画。Banner中的文字字不要太太多。Banner中图片的的颜色不不要太多多，尤其其是GIF格式的图图片或动动画，要要避免出出现颜色色的渐变变和光晕晕效果。（4）标题栏栏此处的标标题栏不不是指整整个网页页的标题题栏，而而是

5、网页页上各版版块的标标题栏，是各版版块内容容的概括括。它使使得网页页内容的的分类更更清晰、明了，大大地地方便了了浏览者者。标题栏可可以是文文字加不不同颜色色的背景景，也可可以是图图片，这这由网站站的整体体风格决决定。（5）按钮按钮通常常是启动动某些装装置或机机关的开开关。网网页中的的按钮也也不例外外，单击击它，网网页会实实现相应应的操作作，比如如跳转到到其他页页面，或或提交数数据等。2网页的的本质在浏览器器中选择择“文件件”“另存为”菜单，将网页页保存到到磁盘中中，便可可看到网网页的组组成文件件。3动态态网页和和静态网网页从制作技技术的角角度来讲讲，网页页可分为为静态网网页和动动态网页页。完全

6、全采用HTML技术制作作的网页页称为静静态网页页；使用用HTML、编程语语言和数数据库共共同完成成，需要要与数据据库实时时交互的的网页称称为动态态网页。（二）网网站开发发基础1IP地址、域域名和网网址（1）IP地址互联网是是全世界界范围内内的计算算机联为为一体而而构成的的通信网网络。互互联网上上连接了了不计其其数的服服务器和和客户机机，每一一个主机机在互联联网上都都有一个个唯一的的地址，我们称称这个地地址为IP地址（InternetProtocolAddress）。IP地址由4个小于256的数字组组成，数数字之间间用点间间隔。例例如，“61.135.150.126”就是一个个IP地址。（2）域

7、名（3）网址网址又叫叫URL，英文全全称是“Uniform Resource Locator”，即统一一资源定定位符。它是网网络上通通用的一一种地址址格式，用于标标识网页页文件在在网络中中的位置置。一个完整整的网址址由通信信协议名名称、域域名或IP地址、网网页在服服务器中中的路径径和文件件名4部分组成成。2网站管管理与网网页制作作相关软软件Dreamweaver是目前最最常用的的网站管管理和网网页制作作软件，其功能能全面、操作灵灵活、专专业性强强。另外外，它还还可以作作为动态态网站的的开发环环境。在制作网网页时，除Dreamweaver外还需要要用到Fireworks、Flash、Photos

8、hop等辅助软软件。3网页页制作基基础XHTML语语言XHTML是Extensible HyperTextMarkupLanguage(可扩展展超文本本标记语语言)的的英文缩缩写，它它的前身身是HTML。由于HTML代码烦烦琐，结结构松散散，所以以推出了了XHTML。也可以以说，XHTML是HTML的一个个升级版版本。XHTML语言的核核心是标标签（或或者称为为标记）。也就就是说，我们在在浏览网网页时看看到的文文字、图图像、动动画等在在XHTML文档中都都是用标标签来描描述的。4网站站建设流流程网站建设设流程是是指从企企业计划划建设网网站到网网站建设设完成的的一套规规范化运运作过程程。（三）初

9、初识Dreamweaver CS51启动DreamweaverCS5安装DreamweaverCS5后，单击击桌面左左下角的的“开始始”按钮钮 ，选选择“所所有程序序”“Adobe Dreamweaver CS5”，就可以以启动DreamweaverCS5了。2Dreamweaver CS5界面面元素简简介DreamweaverCS5的工作界界面由应应用程序序栏、文文档标签签、文档档工具栏栏、文档档窗口、标签选选择器、状态栏栏、属性性检查器器和面板板组等组组成。（1）应用程程序栏应用程序序栏位于于工作区区顶部，左侧显显示菜单单栏，右右侧包含含工作区区切换器器、“CSLive”按钮和程程序窗口口

10、控制按按钮。（2）文档标标签栏文档标签签栏位于于应用程程序栏下下方，左左侧显示示当前打打开的所所有网页页文档的的名称及及其关闭闭按钮（标签）；右侧侧显示当当前文档档在本地地磁盘中中的保存存路径以以及向下下还原按按钮；下下方显示示当前文文档中的的包含文文档以及及链接文文档。当当用户打打开多个个网页时时，通过过单击文文档标签签可在各各网页之之间切换换。另外外，单击击下方的的包含文文档或链链接文档档，可打打开相应应文档。（3）文档工工具栏文档工具具栏位于于文档标标签下方方，包括括各种可可对文档档进行操操作的按按钮。（4）状态栏栏状态栏位位于文档档窗口底底部，它它提供了了与当前前文档相相关的一一些信息

11、息。（5）属性检检查器使用“属属性检查查器”可可以检查查和设置置当前选选定页面面元素（如文本本和插入入对象）的最常常用属性性。“属属性检查查器”中中的内容容会根据据选定元元素的变变化而变变化。（6）面板组组默认状态态下，面面板组位位于文档档窗口右右侧。面面板组中中包含各各种类型型的面板板，Dreamweaver中的大部部分操作作都需要要利用面面板来实实现。其其中最常常用的有有“插入入”面板板、“文文件”面面板和“CSS样式”面面板，后后面将陆陆续用到到。（四）在在Dreamweaver中定义和和管理网网站1定义网网站定义网站站的目的的是把本本地磁盘盘中的站站点文件件夹同Dreamweaver建

12、立一定定的关联联，从而而方便用用户使用用Dreamweaver管理站点点和编辑辑站点中中的网页页文档，以及上上传或下下载站点点内容等等。2管理网网站定义站点点后，如如果需要要修改站站点属性性、复制制或删除除站点等等，可执执行下面面的操作作。（五）网网页文档档基本操操作1网页文文档和文文件夹命命名规则则静态的首首页文件件一般命命名为“index.html”。不要使用用中文命命名网站站中的文文件和文文件夹。文件名中中不要使使用大写写英文字字母。运算符符符号不能能用在文文件名的的开头。比较长的的文件名名可以使使用下划划线“_”来隔开多多个单词词或关键键字。在大型网网站中，分支页页面的文文件应存存放在

13、单单独的文文件夹中中。在动态网网站中，用来存存放数据据库的文文件夹一一般命名名为“data”或者“database”。2新建和和保存网网页文档档在DreamweaverCS5中可以创创建两种种格式的的网页文文档，一一种是直直接创建建空白网网页文档档，另一一种是通通过DreamweaverCS5内置的模模板文档档创建具具有一定定内容和和样式的的网页文文档。3打开、预览和和关闭网网页文档档若要对已已有的文文档进行行编辑，就需要要在Dreamweaver中打开该该文档。另外，在Dreamweaver中打开网网页文档档并执行行相应操操作后，如果想想查看它它在浏览览器中的的效果，可执行行预览操操作。4、利用“文件”面板管管理站点点文件和和文件夹夹一般在定定义站点点后，都都会利用用“文件件”面板板来创建建、重命命名或打打开站点点中的网网页文档档和文件件夹。三、任务务实践任务一夕夕照照台网站站的建设设流程本任务中中，我们们将以夕夕照台房房产网站站为例，学习一一般网站站的建设设流程。收集网站站建设需需求及素素材。制作网站站策划书书。网页美术术设计。美术与程程序整合合。测试和发发布网站站。推广和维维护网站站。任务二调调整整DreamweaverCS5工作界面面使用Dreamweaver制作或编编辑网页页时，经经常需要要打开、关闭某某个面板板，或对对其工作作界面进进行各种种调整。为方便便后期的的学习