DreamweaverCS5网页制作项目一

1、中文版Dreamweaver CS5网页制作案例教程全国计算机“十二五”精品图书项目一网网页页制作基基础任务一认认识识网站和和网页任务二网网站站开发基基础任务三初初识识DreamweaverCS5任务四站站点点基本操操作任务五网网页页文档基基本操作作任务一认认识识网站和和网页任务说明明本任务中中，我们们将简单单了解网网页和网网站、网网页的构构成元素素以及网网页的本本质。预备知识识一、网页页和网站站网页就是是我们上上网时在在浏览器器中打开开的一个个个画面面，网站站则是一一组相关关网页的的集合。一个小小型网站站可能只只包含几几个网页页，而一一个大型型网站则则可能包包含成千千上万个个网页。另外，打打

2、开某个个网站时时显示的的第一个个网页被被称为网网站的主主页（或或首页）。二、网页页的构成成元素我们可以以将网页页中的元元素按功功能分为为站标、导航条条、广告告条、标标题栏和和按钮等等。站标导航条广告条标题栏按钮三、网页页的本质质一般情况况下，网网页中除除了包含含网页文文件（扩扩展名为为.html、.asp等）外，还有图图像文件件（扩展展名为.jpg、.gif等）、Flash动画文件件（扩展展名为.swf）、脚本本文件（扩展名名为.js）、样式式文件（扩展名名为.css）以及视视频文件件（扩展展名为.avi、.flv等）等。任务实施施指出新浪浪网主页页的构成成元素在了解了了网页的的构成元元素后，

3、接下来来通过辨辨识“新新浪网”网站首首页的构构成元素素，来进进一步加加强和巩巩固前面面的学习习。站标导航条广告条标题栏按钮任务二网网站站开发基基础任务说明明在学习制制作网页页之前首首先了解解一下与与网站开开发相关关的基础础知识，并从整整体上认认识一下下其制作作流程，对后面面的学习习将是非非常有利利的。下下面就来来了解一一下与网网站开发发密切相相关的基基础知识识。预备知识识一、网站站管理与与网页制制作相关关软件Dreamweaver是目前最最常用的的网站管管理和网网页制作作软件，其功能能全面、操作灵灵活、专专业性强强。在制作网网页时，除Dreamweaver外还需要要用到Fireworks、Fl

4、ash、Photoshop等辅助软软件。二、网页页制作基基础XHTML语言XHTML是Extensible HyperTextMarkupLanguage(可扩展超超文本标标记语言言)的英文缩缩写，它它的前身身是HTML。由于HTML代码繁琐琐，结构构松散，所以推推出了XHTML。也可以以说，XHTML是HTML的一个升升级版本本。三、IP地址、域域名和网网址（1）IP地址互联网上上连接了了不计其其数的服服务器和和客户机机，每一一个主机机在互联联网上都都有一个个唯一的的地址，我们称称这个地地址为IP地址址（Internet Protocol Address）。IP地址由由4个小小于256的数数

5、字组成成，数字字之间用用点间隔隔。例如如，“61.135.150.126”就就是一个个IP地地址。（2）域名（3）网址网址又叫叫URL，英文文全称是是“UniformResourceLocator”，即统一一资源定定位符。它是网网络上通通用的一一种地址址格式，用于标标识网页页文件在在网络中中的位置置。一个完整整的网址址由通信信协议名名称、域域名或IP地址址、网页页在服务务器中的的路径和和文件名名4部分分组成。任务实施施网站建设设基本流流程网站建设设流程是是从企业业计划建建设网站站到网站站建设完完成的一一套规范范化运作作。收集网站站建设需需求及素素材。制作网站站策划书书。网页美术术设计。美术与程

6、程序整合合。测试和发发布网站站。推广和维维护网站站。任务三初初识识DreamweaverCS5任务说明明DreamweaverCS5是一款集集网页制制作和网网站管理理于一身身，所见见即所得得的网页页编辑软软件。下下面我们们首先启启动该软软件，然然后熟悉悉一下其其工作界界面上的的各组成成元素，最后在在任务实实施中学学习调整整DreamweaverCS5工作界面面的基本本操作。预备知识识一、启动动DreamweaverCS5安装DreamweaverCS5后，单击击桌面左左下角的的“开始始”按钮钮，选选择“所所有程序序”“Adobe Dreamweaver CS5”，就可以以启动Dreamweav

7、erCS5了。二、DreamweaverCS5界面元素素简介DreamweaverCS5的的工作界界面由应应用程序序栏、文文档标签签栏、文文档工具具栏、文文档窗口口、标签签选择器器、状态态栏、属属性检查查器和面面板组等等组成。1应用程程序栏应用程序序栏位于于工作区区顶部，左侧显显示菜单单栏，右右侧包含含工作区区切换器器（可在在其下拉拉列表中中选择不不同的工工作区模模式）、“CS Live”按钮和和程序窗窗口控制制按钮。2文档档标签栏栏文档标签签栏位于于应用程程序栏下下方，左左侧显示示当前打打开的所所有网页页文档的的标签（标签上上显示相相应网页页文档的的名称）及其关关闭按钮钮；右侧侧显示当当前文

8、档档在本地地磁盘中中的保存存路径以以及向下下还原按按钮；下方显显示当前前文档中中包含的的文档以以及链接接文档。3文档档工具栏栏文档工具具栏位于于文档标标签栏的的下方，包括各各种可对对文档进进行操作作的按钮钮。4状态态栏状态栏位位于文档档窗口底底部，它它提供了了与当前前文档相相关的一一些信息息。5属性性检查器器使用“属属性检查查器”可可以检查查和设置置当前选选定页面面元素（如文本本和插入入对象）的最常常用属性性。“属属性检查查器”中中的内容容会根据据选定元元素的不不同而变变化。6面板板组默认状态态下，面面板组位位于文档档窗口右右侧。面面板组中中包含各各种类型型的面板板，Dreamweaver中的

9、大大部分操操作都需需要在面面板中实实现。其其中最常常用的有有“插入入”面板板、“文文件”面面板和“CSS样式”面板。任务实施施调调整Dreamweaver CS5工作作界面使用Dreamweaver制作或或编辑网网页时，经常需需要打开开、关闭闭某个面面板，或或对其工工作界面面进行各各种调整整。本节我们就来来学习一一下调整整DreamweaverCS5工作界界面的基基本操作作（具体操操作见视视频1-3）。任务四站站点点基本操操作任务说明明一般在Dreamweaver中制作网网页之前前，最好好先定义义站点，然后在在站点中中创建网网页。本本任务主主要学习习在DreamweaverCS5中定义和和管理

10、站站点的方方法。预备知识识一、在DreamweaverCS5中定义站站点在Dreamweaver中中定义站站点的目目的是把把本地磁磁盘中的的站点文文件夹同同Dreamweaver建建立一定定的关联联，从而而方便用用户使用用Dreamweaver管管理站点点和编辑辑站点中中的网页页文档，以及上上传或下下载站点点内容等等。二、在DreamweaverCS5中中管理站站点定义站点点后，如如果需要要修改站站点属性性、复制制或删除除站点等等，可执执行管理站点点的操作。任务实施施在DreamweaverCS5中定定义站点点“欧妮妮雅”在本书的的大部分分“任务务实施”中，我我们都将将制作“欧妮雅雅”化妆妆品

11、网站站的相关关页面，下面我我们先从从定义该该站点开开始（具体操操作见视视频1-4）。任务五网网页页文档基基本操作作任务说明明定义好站站点后，便可以以在站点点中创建建网页了了。本任任务首先先学习网网页文档档和文件件夹的命命名规则则，然后后依次学学习新建建、保存存、打开开、预览览和关闭闭网页文文档的方方法，最最后学习习利用“文件”面板管管理站点点中网页页文档和和文件夹夹的方法法。预备知识识一、网页页文档和和文件夹夹命名规规则首页文档档一般命命名为index.html、index.asp或者者index.php。不要用中中文命名名网页文文档和文文件夹。网页文档档名中不不要使用用大写英英文字母母，最好

12、好全部使使用小写写英文字字母。运算符符符号不能能用在文文件名的的开头。比较长的的网页文文档名可可以使用用下划线线“_”来隔开开多个单单词或关关键字。在大型网网站中，分支页页面的文文件应存存放在单单独的文文件夹中中，每个个分支中中的图像像也应该该存放在在各自单单独的文文件夹中中，存放放网页图图像的文文件夹一一般命名名为“images”或者“img”。在动态网网站中，用来存存放数据据库的文文件夹一一般命名名为“data”或者者“database”。二、新建建和保存存网页文文档在DreamweaverCS5中可以以创建两两种类型型的网页页文档，一种是是直接创创建的空空白网页页文档，另一种种是通过过DreamweaverCS5内置的的模板创创建具有有一定内内容和样样式的网网页文档档。三、打开开、预览览和关闭闭网页文文档若要对已已有的文文档进行行编辑，就需要要在Dreamweaver中打开开该文档档。另外外，在Dreamweaver中打打开网页页文档并并执行相相应操作作后，如如果想查查看它在在浏览器器中的效效