DreamweaverCS5网页制作项目一

中文版DreamweaverCS5网页制作案例教程全国计算机“十二五”精品图书项目一网页制作基础任务一认识网站和网页任务二网站开发基础任务三初识DreamweaverCS5任务四站点基本操作任务五网页文档基本操作任务一认识网站和网页任务说明本任务中，我们将简单了解网页和网站、网页的构成元素以及网页的本质。预备知识一、网页和网站网页就是我们上网时在浏览器中打开的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。另外，打开某个网站时显示的第一个网页被称为网站的主页（或首页）。二、网页的构成元素我们可以将网页中的元素按功能分为站标、导航条、广告条、标题栏和按钮等。站标导航条广告条标题栏按钮三、网页的本质一般情况下，网页中除了包含网页文件（扩展名为.html、.asp等）外，还有图像文件（扩展名为.jpg、.gif等）、Flash动画文件（扩展名为.swf）、脚本文件（扩展名为.js）、样式文件（扩展名为.css）以及视频文件（扩展名为.avi、.flv等）等。任务实施——指出新浪网主页的构成元素在了解了网页的构成元素后，接下来通过辨识“新浪网”网站首页的构成元素，来进一步加强和巩固前面的学习。站标导航条广告条标题栏按钮任务二网站开发基础任务说明在学习制作网页之前首先了解一下与网站开发相关的基础知识，并从整体上认识一下其制作流程，对后面的学习将是非常有利的。下面就来了解一下与网站开发密切相关的基础知识。预备知识一、网站管理与网页制作相关软件Dreamweaver是目前最常用的网站管理和网页制作软件，其功能全面、操作灵活、专业性强。在制作网页时，除Dreamweaver外还需要用到Fireworks、Flash、Photoshop等辅助软件。二、网页制作基础——XHTML语言XHTML是ExtensibleHyperTextMarkupLanguage(可扩展超文本标记语言)的英文缩写，它的前身是HTML。由于HTML代码繁琐，结构松散，所以推出了XHTML。也可以说，XHTML是HTML的一个升级版本。三、IP地址、域名和网址（1）IP地址互联网上连接了不计其数的服务器和客户机，每一个主机在互联网上都有一个唯一的地址，我们称这个地址为IP地址（InternetProtocolAddress）。IP地址由4个小于256的数字组成，数字之间用点间隔。例如，“61.135.150.126”就是一个IP地址。（2）域名由于IP地址在使用过程中难于记忆和书写，人们又开发了一种与IP地址对应的字符用以表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们只需要在浏览器地址栏中输入搜狐网站的域名“www.sohu.com”，然后按回车键就可以访问搜狐网站了。（3）网址网址又叫URL，英文全称是“UniformResourceLocator”，即统一资源定位符。它是网络上通用的一种地址格式，用于标识网页文件在网络中的位置。一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。任务实施——网站建设基本流程网站建设流程是从企业计划建设网站到网站建设完成的一套规范化运作。1.收集网站建设需求及素材。2.制作网站策划书。3.网页美术设计。4.美术与程序整合。5.测试和发布网站。6.推广和维护网站。任务三初识DreamweaverCS5任务说明DreamweaverCS5是一款集网页制作和网站管理于一身，所见即所得的网页编辑软件。下面我们首先启动该软件，然后熟悉一下其工作界面上的各组成元素，最后在任务实施中学习调整DreamweaverCS5工作界面的基本操作。预备知识一、启动DreamweaverCS5安装DreamweaverCS5后，单击桌面左下角的“开始”按钮，选择“所有程序”“AdobeDreamweaverCS5”，就可以启动DreamweaverCS5了。二、DreamweaverCS5界面元素简介DreamweaverCS5的工作界面由应用程序栏、文档标签栏、文档工具栏、文档窗口、标签选择器、状态栏、属性检查器和面板组等组成。1．应用程序栏应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器（可在其下拉列表中选择不同的工作区模式）、“CSLive”按钮和程序窗口控制按钮。2．文档标签栏文档标签栏位于应用程序栏下方，左侧显示当前打开的所有网页文档的标签（标签上显示相应网页文档的名称）及其关闭按钮；右侧显示当前文档在本地磁盘中的保存路径以及向下还原按钮；下方显示当前文档中包含的文档以及链接文档。3．文档工具栏文档工具栏位于文档标签栏的下方，包括各种可对文档进行操作的按钮。4．状态栏状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。5．属性检查器使用“属性检查器”可以检查和设置当前选定页面元素（如文本和插入对象）的最常用属性。“属性检查器”中的内容会根据选定元素的不同而变化。6．面板组默认状态下，面板组位于文档窗口右侧。面板组中包含各种类型的面板，Dreamweaver中的大部分操作都需要在面板中实现。其中最常用的有“插入”面板、“文件”面板和“CSS样式”面板。任务实施——调整DreamweaverCS5工作界面使用Dreamweaver制作或编辑网页时，经常需要打开、关闭某个面板，或对其工作界面进行各种调整。本节我们就来学习一下调整DreamweaverCS5工作界面的基本操作（具体操作见视频1-3）。任务四站点基本操作任务说明一般在Dreamweaver中制作网页之前，最好先定义站点，然后在站点中创建网页。本任务主要学习在DreamweaverCS5中定义和管理站点的方法。预备知识一、在DreamweaverCS5中定义站点在Dreamweaver中定义站点的目的是把本地磁盘中的站点文件夹同Dreamweaver建立一定的关联，从而方便用户使用Dreamweaver管理站点和编辑站点中的网页文档，以及上传或下载站点内容等。二、在DreamweaverCS5中管理站点定义站点后，如果需要修改站点属性、复制或删除站点等，可执行管理站点的操作。任务实施—在DreamweaverCS5中定义站点“欧妮雅”在本书的大部分“任务实施”中，我们都将制作“欧妮雅”化妆品网站的相关页面，下面我们先从定义该站点开始（具体操作见视频1-4）。任务五网页文档基本操作任务说明定义好站点后，便可以在站点中创建网页了。本任务首先学习网页文档和文件夹的命名规则，然后依次学习新建、保存、打开、预览和关闭网页文档的方法，最后学习利用“文件”面板管理站点中网页文档和文件夹的方法。预备知识一、网页文档和文件夹命名规则•首页文档一般命名为index.html、index.asp或者index.php。•不要用中文命名网页文档和文件夹。•网页文档名中不要使用大写英文字母，最好全部使用小写英文字母。•运算符符号不能用在文件名的开头。•比较长的网页文档名可以使用下划线“_”来隔开多个单词或关键字。•在大型网站中，分支页面的文件应存放在单独的文件夹中，每个分支中的图像也应该存放在各自单独的文件夹中，存放网页图像的文件夹一般命名为“images”或者“img”。•在动态网站中，用来存放数据库的文件夹一般命名为“data”或者“database”。二、新建和保存网页文档在DreamweaverCS5中可以创建两种类型的网页文档，一种是直接创建的空白网页文档，另一种是通过DreamweaverCS5内置的模板创建具有一定内容和样式的网页文档。三、打开、预览和关闭网页文档若要对已有的文档进行编辑，就需要在Dreamweaver中打开该文档。另外，在Dreamweaver中打开网页文档并执行相应操作后，如果想查看它在浏览器中的效果，可执行预览操作。四、利用“文件”面板管理站点文件和文件夹一般在定义站点后，都会利用“文件”面板来创建、重命名或打开站点中的网页文档和文件夹。任务实施——在站点“欧妮雅”中创建网页在学习了网页文档的基本操作后，本节通过在前面定义的站点“欧妮雅”中创建并保存网页，来进一步巩固前面所学（具体操作见视频1-5）。