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

项目一创建“夕照台”房产网站

——网页制作基础一、学习目标二、理论指导三、任务实践一、学习目标了解网页的构成元素，网页的本质，以及动态网页和静态网页的区别。了解IP地址、域名和网址的概念，以及网站管理与网页制作相关软件，XHTML语言和网站建设流程。认识DreamweaverCS5的界面元素。掌握规划网站结构以及在Dreamweaver中定义和管理站点的方法。掌握网页文档和文件夹的命名规则，以及在Dreamweaver中新建、打开、保存和预览网页的方法，另外还要学会使用“文件”面板管理站点文件和文件夹。二、理论指导（一）认识网站和网页网页就是我们上网时在浏览器中打开的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。打开某个网站时显示的第一个网页被称为网站的主页（或首页）。1．网页的构成元素我们可以将网页中的元素按功能分为站标、导航条、广告条、标题栏和按钮等，如图1-1所示。站标导航条广告条按钮标题栏（1）站标站标也叫Logo，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站Logo通常采用企业的Logo。Logo一般采用蕴含企业文化和特色的图案，或是与企业名称相关的字符或符号及其变形，当然也有很多是图文组合，如下图所示。（2）导航条导航条是一组链接到网站内主要页面的超链接组合，通过单击这些超链接，浏览者可以轻松找到网站中的各个页面。设计导航条时，应遵循以下原则：对于一般的企业网站，如果网站内容不多，可根据网站风格灵活摆放导航条，也可以使用图片或Flash动画等显示导航条，如下图所示。对于像搜狐、网易等大型门户类网站，网站栏目都很多，一般将导航条分为多排放置在Logo的下方或右侧。为便于查看，可为各排设置不同的底色，如下图所示。（3）广告条广告条又称Banner，其功能是宣传网站或为其他商品做广告。Banner的尺寸可以根据内容或版面需要来安排。在制作Banner时，有以下几点需要注意。Banner可以是静态的，也可以是动态的。Banner的体积不宜过大，尽量使用GIF格式图片与动画或Flash动画。Banner中的文字不要太多。Banner中图片的颜色不要太多，尤其是GIF格式的图片或动画，要避免出现颜色的渐变和光晕效果。（4）标题栏此处的标题栏不是指整个网页的标题栏，而是网页上各版块的标题栏，是各版块内容的概括。它使得网页内容的分类更清晰、明了，大大地方便了浏览者。标题栏可以是文字加不同颜色的背景，也可以是图片，这由网站的整体风格决定。（5）按钮按钮通常是启动某些装置或机关的开关。网页中的按钮也不例外，单击它，网页会实现相应的操作，比如跳转到其他页面，或提交数据等。2．网页的的本质在浏览器器中选择择“文件件”>“另存为””菜单，，将网页页保存到到磁盘中中，便可可看到网网页的组组成文件件。3．动态态网页和和静态网网页从制作技技术的角角度来讲讲，网页页可分为为静态网网页和动动态网页页。完全全采用HTML技术制作作的网页页称为静静态网页页；使用用HTML、编程语语言和数数据库共共同完成成，需要要与数据据库实时时交互的的网页称称为动态态网页。。（二）网网站开发发基础1．IP地址、域域名和网网址（1）IP地址互联网是是全世界界范围内内的计算算机联为为一体而而构成的的通信网网络。互互联网上上连接了了不计其其数的服服务器和和客户机机，每一一个主机机在互联联网上都都有一个个唯一的的地址，，我们称称这个地地址为IP地址（InternetProtocolAddress）。IP地址由4个小于256的数字组组成，数数字之间间用点间间隔。例例如，““61.135.150.126”就是一个个IP地址。（2）域名（3）网址网址又叫叫URL，英文全全称是““UniformResourceLocator””，即统一一资源定定位符。。它是网网络上通通用的一一种地址址格式，，用于标标识网页页文件在在网络中中的位置置。一个完整整的网址址由通信信协议名名称、域域名或IP地址、网网页在服服务器中中的路径径和文件件名4部分组成成。2．网站管管理与网网页制作作相关软软件Dreamweaver是目前最最常用的的网站管管理和网网页制作作软件，，其功能能全面、、操作灵灵活、专专业性强强。另外外，它还还可以作作为动态态网站的的开发环环境。在制作网网页时，，除Dreamweaver外还需要要用到Fireworks、Flash、Photoshop等辅助软软件。3．网页页制作基基础———XHTML语语言XHTML是ExtensibleHyperTextMarkupLanguage(可扩展展超文本本标记语语言)的的英文缩缩写，它它的前身身是HTML。。由于HTML代码烦烦琐，结结构松散散，所以以推出了了XHTML。。也可以以说，XHTML是HTML的一个个升级版版本。XHTML语言的核核心是标标签（或或者称为为标记））。也就就是说，，我们在在浏览网网页时看看到的文文字、图图像、动动画等在在XHTML文档中都都是用标标签来描描述的。。4．网站站建设流流程网站建设设流程是是指从企企业计划划建设网网站到网网站建设设完成的的一套规规范化运运作过程程。（三）初初识DreamweaverCS51．启动DreamweaverCS5安装DreamweaverCS5后，单击击桌面左左下角的的“开始始”按钮钮，选选择“所所有程序序”>“AdobeDreamweaverCS5”，就可以以启动DreamweaverCS5了。2．DreamweaverCS5界面面元素简简介DreamweaverCS5的工作界界面由应应用程序序栏、文文档标签签、文档档工具栏栏、文档档窗口、、标签选选择器、、状态栏栏、属性性检查器器和面板板组等组组成。（1）应用程程序栏应用程序序栏位于于工作区区顶部，，左侧显显示菜单单栏，右右侧包含含工作区区切换器器、“CSLive”按钮和程程序窗口口控制按按钮。（2）文档标标签栏文档标签签栏位于于应用程程序栏下下方，左左侧显示示当前打打开的所所有网页页文档的的名称及及其关闭闭按钮（（标签））；右侧侧显示当当前文档档在本地地磁盘中中的保存存路径以以及向下下还原按按钮；下下方显示示当前文文档中的的包含文文档以及及链接文文档。当当用户打打开多个个网页时时，通过过单击文文档标签签可在各各网页之之间切换换。另外外，单击击下方的的包含文文档或链链接文档档，可打打开相应应文档。。（3）文档档工具具栏文档工工具栏栏位于于文档档标签签下方方，包包括各各种可可对文文档进进行操操作的的按钮钮。（4）状态态栏状态栏栏位于于文档档窗口口底部部，它它提供供了与与当前前文档档相关关的一一些信信息。。（5）属性性检查查器使用““属性性检查查器””可以以检查查和设设置当当前选选定页页面元元素（（如文文本和和插入入对象象）的的最常常用属属性。。“属属性检检查器器”中中的内内容会会根据据选定定元素素的变变化而而变化化。（6）面板板组默认状状态下下，面面板组组位于于文档档窗口口右侧侧。面面板组组中包包含各各种类类型的的面板板，Dreamweaver中的大大部分分操作作都需需要利利用面面板来来实现现。其其中最最常用用的有有“插插入””面板板、““文件件”面面板和和“CSS样式””面板板，后后面将将陆续续用到到。（四））在Dreamweaver中定义义和管管理网网站1．定义义网站站定义网网站的的目的的是把把本地地磁盘盘中的的站点点文件件夹同同Dreamweaver建立一一定的的关联联，从从而方方便用用户使使用Dreamweaver管理站站点和和编辑辑站点点中的的网页页文档档，以以及上上传或或下载载站点点内容容等。。2．管理理网站站定义站站点后后，如如果需需要修修改站站点属属性、、复制制或删删除站站点等等，可可执行行下面面的操操作。。（五））网页页文档档基本本操作作1．网页页文档档和文文件夹夹命名名规则则静态的的首页页文件件一般般命名名为““index.html””。不要使使用中中文命命名网网站中中的文文件和和文件件夹。。文件名名中不不要使使用大大写英英文字字母。。运算符符符号号不能能用在在文件件名的的开头头。比较长长的文文件名名可以以使用用下划划线““_”来隔开开多个个单词词或关关键字字。在大型型网站站中，，分支支页面面的文文件应应存放放在单单独的的文件件夹中中。在动态态网站站中，，用来来存放放数据据库的的文件件夹一一般命命名为为“data””或者““database””。2．新建建和保保存网网页文文档在DreamweaverCS5中可以以创建建两种种格式式的网网页文文档，，一种种是直直接创创建空空白网网页文文档，，另一一种是是通过过DreamweaverCS5内置的的模板板文档档创建建具有有一定定内容容和样样式的的网页页文档档。3．打开开、预预览和和关闭闭网页页文档档若要对对已有有的文文档进进行编编辑，，就需需要在在Dreamweaver中打开开该文文档。。另外外，在在Dreamweaver中打开开网页页文档档并执执行相相应操操作后后，如如果想想查看看它在在浏览览器中中的效效果，，可执执行预预览操操作。。4、利用用“文文件””面板板管理理站点点文件件和文文件夹夹一般在在定义义站点点后，，都会会利用用“文文件””面板板来创创建、、重命命名或或打开开站点点中的的网页页文档档和文文件夹夹。三、任任务实实践任务一一夕夕照照台网网站的的建设设流程程本任务务中，，我们们将以以夕照照台房房产网网站为为例，，学习习一般般网站站的建建设流流程。。收集网网站建建设需需求及及素材材。制作网网站策策划书书。网页美美术设设计。。美术与与程序序整合合。测