《DreamweaverCS5网页制作高级案例教程项目一4064.pptx》由会员分享，可在线阅读，更多相关《DreamweaverCS5网页制作高级案例教程项目一4064.pptx（36页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、项目一项目一 创建创建“夕照台夕照台”房产网房产网站站 网页制作基础网页制作基础一、学习目标一、学习目标二、理论指导二、理论指导三、任务实践三、任务实践一、学习目标一、学习目标了解网页的构成元素，网页的本质，以及动态网页了解网页的构成元素，网页的本质，以及动态网页了解网页的构成元素，网页的本质，以及动态网页了解网页的构成元素，网页的本质，以及动态网页和静态网页的区别。和静态网页的区别。和静态网页的区别。和静态网页的区别。了解了解了解了解IPIPIPIP地址、域名和网址的概念，以及网站管理与地址、域名和网址的概念，以及网站管理与地址、域名和网址的概念，以及网站管理与地址、域名和网址的概念，以及网
2、站管理与网页制作相关软件，网页制作相关软件，网页制作相关软件，网页制作相关软件，XHTMLXHTMLXHTMLXHTML语言和网站建设流程。语言和网站建设流程。语言和网站建设流程。语言和网站建设流程。认识认识认识认识Dreamweaver CS5Dreamweaver CS5Dreamweaver CS5Dreamweaver CS5的界面元素。的界面元素。的界面元素。的界面元素。掌握规划网站结构以及在掌握规划网站结构以及在掌握规划网站结构以及在掌握规划网站结构以及在DreamweaverDreamweaverDreamweaverDreamweaver中定义和管中定义和管中定义和管中定义和管
3、理站点的方法。理站点的方法。理站点的方法。理站点的方法。掌握网页文档和文件夹的命名规则，以及在掌握网页文档和文件夹的命名规则，以及在掌握网页文档和文件夹的命名规则，以及在掌握网页文档和文件夹的命名规则，以及在DreamweaverDreamweaverDreamweaverDreamweaver中新建、打开、保存和预览网页的方中新建、打开、保存和预览网页的方中新建、打开、保存和预览网页的方中新建、打开、保存和预览网页的方法，另外还要学会使用法，另外还要学会使用法，另外还要学会使用法，另外还要学会使用“文件文件文件文件”面板管理站点文件面板管理站点文件面板管理站点文件面板管理站点文件和文件夹。和
4、文件夹。和文件夹。和文件夹。二、理论指导二、理论指导（一）认识网站和网页（一）认识网站和网页网页就是我们上网时在浏览器中打开的一个个画面，网页就是我们上网时在浏览器中打开的一个个画面，网站则是一组相关网页的集合。一个小型网站可能网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千只包含几个网页，而一个大型网站则可能包含成千上万个网页。上万个网页。打开某个网站时显示的第一个网页被称为网站的主打开某个网站时显示的第一个网页被称为网站的主页（或首页）。页（或首页）。1 1网页的构成元素网页的构成元素我们可以将网页中的元素按功能分为站标、导我们可以将网页中的元素按功
5、能分为站标、导航条、广告条、标题栏和按钮等，如图航条、广告条、标题栏和按钮等，如图1-11-1所示。所示。站标站标导航条导航条广告广告条条按钮按钮标题标题栏栏（1 1）站标）站标 站标也叫站标也叫站标也叫站标也叫LogoLogoLogoLogo，是网站的标志，其作用是使人看见它，是网站的标志，其作用是使人看见它，是网站的标志，其作用是使人看见它，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站就能够联想到企业。因此，网站就能够联想到企业。因此，网站就能够联想到企业。因此，网站LogoLogoLogoLogo通常采用企业的通常采用企业的通常采用企业的通常采用企业的LogoLogoLo
6、goLogo。LogoLogoLogoLogo一般采用蕴含企业文化和特色的图案，或是与企一般采用蕴含企业文化和特色的图案，或是与企一般采用蕴含企业文化和特色的图案，或是与企一般采用蕴含企业文化和特色的图案，或是与企业名称相关的字符或符号及其变形，当然也有很多是业名称相关的字符或符号及其变形，当然也有很多是业名称相关的字符或符号及其变形，当然也有很多是业名称相关的字符或符号及其变形，当然也有很多是图文组合，如下图所示。图文组合，如下图所示。图文组合，如下图所示。图文组合，如下图所示。（2 2）导航条）导航条导航条是一组链接到网站内主要页面的超链接导航条是一组链接到网站内主要页面的超链接组合，通过
7、单击这些超链接，浏览者可以轻松组合，通过单击这些超链接，浏览者可以轻松找到网站中的各个页面。设计导航条时，应遵找到网站中的各个页面。设计导航条时，应遵循以下原则：循以下原则：对于一般的企业网站，如果网站内容不多，可根据网站风格灵活摆放导航条，也可以使用图片或Flash动画等显示导航条，如下图所示。对于像搜狐、网易等大型门户类网站，网站栏对于像搜狐、网易等大型门户类网站，网站栏目都很多，一般将导航条分为多排放置在目都很多，一般将导航条分为多排放置在LogoLogo的下方或右侧。为便于查看，可为各排设置不的下方或右侧。为便于查看，可为各排设置不同的底色，如下图所示。同的底色，如下图所示。（3 3）
8、广告条）广告条 广告条又称广告条又称BannerBanner，其功能是宣传网站或为其，其功能是宣传网站或为其他商品做广告。他商品做广告。BannerBanner的尺寸可以根据内容或的尺寸可以根据内容或版面需要来安排。版面需要来安排。在制作在制作BannerBanner时，有以下几点需要注意。时，有以下几点需要注意。Banner可以是静态的，也可以是动态的。可以是静态的，也可以是动态的。Banner的体积不宜过大，尽量使用的体积不宜过大，尽量使用GIF格式图片与格式图片与动画或动画或Flash动画。动画。Banner中的文字不要太多。中的文字不要太多。Banner中图片的颜色不要太多，尤其是中图
9、片的颜色不要太多，尤其是GIF格式的格式的图片或动画，要避免出现颜色的渐变和光晕效果。图片或动画，要避免出现颜色的渐变和光晕效果。（4 4）标题栏）标题栏此处的标题栏不是指整个网页的标题栏，而是此处的标题栏不是指整个网页的标题栏，而是网页上各版块的标题栏，是各版块内容的概括。网页上各版块的标题栏，是各版块内容的概括。它使得网页内容的分类更清晰、明了，大大地它使得网页内容的分类更清晰、明了，大大地方便了浏览者。方便了浏览者。标题栏可以是文字加不同颜色的背景，也可以标题栏可以是文字加不同颜色的背景，也可以是图片，这由网站的整体风格决定。是图片，这由网站的整体风格决定。（5 5）按钮）按钮 按钮通常
10、是启动某些装置或机关的开关。网页中按钮通常是启动某些装置或机关的开关。网页中的按钮也不例外，单击它，网页会实现相应的操的按钮也不例外，单击它，网页会实现相应的操作，比如跳转到其他页面，或提交数据等。作，比如跳转到其他页面，或提交数据等。2 2网页的本质网页的本质在浏览器中选择在浏览器中选择“文件文件”“另存为另存为”菜单，菜单，将网页保存到磁盘中，便可看到网页的组成文将网页保存到磁盘中，便可看到网页的组成文件。件。3 3动态网页和静态网页动态网页和静态网页从制作技术的角度来讲，网页可分为静态网页从制作技术的角度来讲，网页可分为静态网页和动态网页。完全采用和动态网页。完全采用HTMLHTML技术
11、制作的网页技术制作的网页称为静态网页；使用称为静态网页；使用HTMLHTML、编程语言和数据、编程语言和数据库共同完成，需要与数据库实时交互的网页称库共同完成，需要与数据库实时交互的网页称为动态网页。为动态网页。（二）网站开发基础（二）网站开发基础1 1IPIP地址、域名和网址地址、域名和网址 （1）IP地址地址 互联网是全世界范围内的计算机联为一体而构成的互联网是全世界范围内的计算机联为一体而构成的通信网络。互联网上连接了不计其数的服务器和客通信网络。互联网上连接了不计其数的服务器和客户机，每一个主机在互联网上都有一个唯一的地址，户机，每一个主机在互联网上都有一个唯一的地址，我们称这个地址为
12、我们称这个地址为IP地址（地址（Internet Protocol Address）。）。IP地址由地址由4个小于个小于256的数字组成，数的数字组成，数字之间用点间隔。例如，字之间用点间隔。例如，“61.135.150.126”就是就是一个一个IP地址。地址。（2 2）域名）域名 （3 3）网址）网址网址又叫网址又叫URLURL，英文全称是，英文全称是“Uniform Uniform Resource Locator”Resource Locator”，即统一资源定位符。它是，即统一资源定位符。它是网络上通用的一种地址格式，用于标识网页文网络上通用的一种地址格式，用于标识网页文件在网络中的位
13、置。件在网络中的位置。一个完整的网址由通信协议名称、域名或一个完整的网址由通信协议名称、域名或IPIP地地址、网页在服务器中的路径和文件名址、网页在服务器中的路径和文件名4 4部分组成。部分组成。2 2网站管理与网页制作相关软件网站管理与网页制作相关软件DreamweaverDreamweaver是目前最常用的网站管理和网页是目前最常用的网站管理和网页制作软件，其功能全面、操作灵活、专业性强。制作软件，其功能全面、操作灵活、专业性强。另外，它还可以作为动态网站的开发环境。另外，它还可以作为动态网站的开发环境。在制作网页时，除在制作网页时，除DreamweaverDreamweaver外还需要用
14、到外还需要用到FireworksFireworks、FlashFlash、PhotoshopPhotoshop等辅助软件。等辅助软件。3 3网页制作基础网页制作基础XHTMLXHTML语言语言XHTMLXHTML是是Extensible HyperText Markup LanguageExtensible HyperText Markup Language(可扩展超文本标记语言可扩展超文本标记语言)的英文缩写，它的前身是的英文缩写，它的前身是HTMLHTML。由于。由于HTMLHTML代码烦琐，结构松散，所以推出了代码烦琐，结构松散，所以推出了XHTMLXHTML。也可以说，。也可以说，XH
15、TMLXHTML是是HTMLHTML的一个升级版本。的一个升级版本。XHTMLXHTML语言的核心是标签（或者称为标记）。也就语言的核心是标签（或者称为标记）。也就是说，我们在浏览网页时看到的文字、图像、动画是说，我们在浏览网页时看到的文字、图像、动画等在等在XHTMLXHTML文档中都是用标签来描述的。文档中都是用标签来描述的。4 4网站建设流程网站建设流程网站建设流程是指从企业计划建设网站到网站网站建设流程是指从企业计划建设网站到网站建设完成的一套规范化运作过程。建设完成的一套规范化运作过程。（三）初识（三）初识Dreamweaver CS5Dreamweaver CS51 1启动启动Dr
16、eamweaver CS5Dreamweaver CS5安装安装Dreamweaver CS5后，单击桌面左下角的后，单击桌面左下角的“开开始始”按钮按钮，选择，选择“所有程序所有程序”“Adobe Dreamweaver CS5”，就可以启动，就可以启动Dreamweaver CS5了。了。2 2Dreamweaver CS5Dreamweaver CS5界面元素简介界面元素简介Dreamweaver CS5Dreamweaver CS5的工作界面由应用程序栏、的工作界面由应用程序栏、文档标签、文档工具栏、文档窗口、标签选择文档标签、文档工具栏、文档窗口、标签选择器、状态栏、属性检查器和面板
17、组等组成。器、状态栏、属性检查器和面板组等组成。（1 1）应用程序栏）应用程序栏应用程序栏位于工作区顶部，左侧显示菜单应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器、栏，右侧包含工作区切换器、“CS Live”CS Live”按按钮和程序窗口控制按钮。钮和程序窗口控制按钮。（2 2）文档标签栏）文档标签栏文档标签栏位于应用程序栏下方，左侧显示当前打文档标签栏位于应用程序栏下方，左侧显示当前打开的所有网页文档的名称及其关闭按钮（标签）；开的所有网页文档的名称及其关闭按钮（标签）；右侧显示当前文档在本地磁盘中的保存路径以及向右侧显示当前文档在本地磁盘中的保存路径以及向下还原按钮；下
18、方显示当前文档中的包含文档以及下还原按钮；下方显示当前文档中的包含文档以及链接文档。当用户打开多个网页时，通过单击文档链接文档。当用户打开多个网页时，通过单击文档标签可在各网页之间切换。另外，单击下方的包含标签可在各网页之间切换。另外，单击下方的包含文档或链接文档，可打开相应文档。文档或链接文档，可打开相应文档。（3 3）文档工具栏）文档工具栏文档工具栏位于文档标签下方，包括各种可对文文档工具栏位于文档标签下方，包括各种可对文档进行操作的按钮。档进行操作的按钮。（4 4）状态栏）状态栏状态栏位于文档窗口底部，它提供了与当前文档状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。相关的一些
19、信息。（5 5）属性检查器）属性检查器使用使用“属性检查器属性检查器”可以检查和设置当前选定可以检查和设置当前选定页面元素（如文本和插入对象）的最常用属性。页面元素（如文本和插入对象）的最常用属性。“属性检查器属性检查器”中的内容会根据选定元素的变中的内容会根据选定元素的变化而变化。化而变化。（6 6）面板组）面板组默认状态下，面板组位于文档窗口右侧。面板默认状态下，面板组位于文档窗口右侧。面板组中包含各种类型的面板，组中包含各种类型的面板，DreamweaverDreamweaver中的中的大部分操作都需要利用面板来实现。其中最常大部分操作都需要利用面板来实现。其中最常用的有用的有“插入插入
20、”面板、面板、“文件文件”面板和面板和“CSSCSS样式样式”面板，后面将陆续用到。面板，后面将陆续用到。（四）在（四）在DreamweaverDreamweaver中定义和管理网站中定义和管理网站1 1定义网站定义网站定义网站的目的是把本地磁盘中的站点文件夹同定义网站的目的是把本地磁盘中的站点文件夹同Dreamweaver建立一定的关联，从而方便用户使建立一定的关联，从而方便用户使用用Dreamweaver管理站点和编辑站点中的网页文管理站点和编辑站点中的网页文档，以及上传或下载站点内容等。档，以及上传或下载站点内容等。2 2管理网站管理网站定义站点后，如果需要修改站点属性、复制或定义站点后
21、，如果需要修改站点属性、复制或删除站点等，可执行下面的操作。删除站点等，可执行下面的操作。（五）网页文档基本操作（五）网页文档基本操作1 1网页文档和文件夹命名规则网页文档和文件夹命名规则静态的首页文件一般命名为静态的首页文件一般命名为“index.html”。不要使用中文命名网站中的文件和文件夹。不要使用中文命名网站中的文件和文件夹。文件名中不要使用大写英文字母。文件名中不要使用大写英文字母。运算符符号不能用在文件名的开头。运算符符号不能用在文件名的开头。比较长的文件名可以使用下划线比较长的文件名可以使用下划线“_”来隔开多个来隔开多个单词或关键字。单词或关键字。在大型网站中，分支页面的文件
22、应存放在单独的文在大型网站中，分支页面的文件应存放在单独的文件夹中。件夹中。在动态网站中，用来存放数据库的文件夹一般命名在动态网站中，用来存放数据库的文件夹一般命名为为“data”或者或者“database”。2 2新建和保存网页文档新建和保存网页文档在在Dreamweaver CS5Dreamweaver CS5中可以创建两种格式的网中可以创建两种格式的网页文档，一种是直接创建空白网页文档，另一页文档，一种是直接创建空白网页文档，另一种是通过种是通过Dreamweaver CS5Dreamweaver CS5内置的模板文档创内置的模板文档创建具有一定内容和样式的网页文档。建具有一定内容和样式
23、的网页文档。3 3打开、预览和关闭网页文档打开、预览和关闭网页文档若要对已有的文档进行编辑，就需要在若要对已有的文档进行编辑，就需要在DreamweaverDreamweaver中打开该文档。另外，在中打开该文档。另外，在DreamweaverDreamweaver中打开网页文档并执行相应操作中打开网页文档并执行相应操作后，如果想查看它在浏览器中的效果，可执行后，如果想查看它在浏览器中的效果，可执行预览操作。预览操作。4 4、利用、利用“文件文件”面板管理站点文件和文件面板管理站点文件和文件夹夹一般在定义站点后，都会利用一般在定义站点后，都会利用“文件文件”面板来面板来创建、重命名或打开站点中
24、的网页文档和文件创建、重命名或打开站点中的网页文档和文件夹。夹。三、任务实践三、任务实践任务一任务一 夕照台网站的建设流程夕照台网站的建设流程本任务中，我们将以夕照台房产网站为例，学习一般本任务中，我们将以夕照台房产网站为例，学习一般网站的建设流程。网站的建设流程。1.收集网站建设需求及素材。收集网站建设需求及素材。2.制作网站策划书。制作网站策划书。3.网页美术设计。网页美术设计。4.美术与程序整合。美术与程序整合。5.测试和发布网站。测试和发布网站。6.推广和维护网站。推广和维护网站。任务二任务二 调整调整Dreamweaver CS5Dreamweaver CS5工作界面工作界面使用使用
25、DreamweaverDreamweaver制作或编辑网页时，经常需制作或编辑网页时，经常需要打开、关闭某个面板，或对其工作界面进行要打开、关闭某个面板，或对其工作界面进行各种调整。为方便后期的学习，本任务我们来各种调整。为方便后期的学习，本任务我们来学习一下调整学习一下调整Dreamweaver CS5Dreamweaver CS5工作界面的基工作界面的基本操作（具体操作见视频本操作（具体操作见视频1-21-2）。）。任务三任务三 创建站点目录结构创建站点目录结构在在DreamweaverDreamweaver中创建网站的第一步是确定本中创建网站的第一步是确定本地站点的目录结构，并准备好相应的素材文件地站点的目录结构，并准备好相应的素材文件（具体操作见视频（具体操作见视频1-31-3）。任务四任务四 定义站点并创建网页定义站点并创建网页在实际的网页制作中，一般都是定义好网站之在实际的网页制作中，一般都是定义好网站之后再在网站中新建、打开或编辑网页（具体操后再在网站中新建、打开或编辑网页（具体操作见视频作见视频1-41-4）。