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

项目一 创建“夕照台”房产网站 ——网页制作基础 一、学习目标 二、理论指导 三、任务实践 一、学习目标 了解网页的构成元素，网页的本质，以及动态网页和静态网页的区别。 了解IP地址、域名和网址的概念，以及网站管理与网页制作相关软件，XHTML语言和网站建设流程。 认识Dreamweaver CS5的界面元素。 掌握规划网站结构以及在Dreamweaver中定义和管理站点的方法。 掌握网页文档和文件夹的命名规则，以及在Dreamweaver中新建、打开、保存和预览网页的方法，另外还要学会使用“文件”面板管理站点文件和文件夹。 二、理论指导 （一）认识网站和网页 1．网页的构成元素 我们可以将网页中的元素按功能分为站标、导航条、广告条、标题栏和按钮等，如图1-1所示。 （1）站标 站标也叫Logo，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站Logo通常采用企业的Logo。 Logo一般采用蕴含企业文化和特色的图案，或是与企业名称相关的字符或符号及其变形，当然也有很多是图文组合，如下图所示。 （2）导航条 导航条是一组链接到网站内主要页面的超链接组合，通过单击这些超链接，浏览者可以轻松找到网站中的各个页面。设计导航条时，应遵循以下原则： 对于像搜狐、网易等大型门户类网站，网站栏目都很多，一般将导航条分为多排放置在Logo的下方或右侧。为便于查看，可为各排设置不同的底色，如下图所示。 （3）广告条 广告条又称Banner，其功能是宣传网站或为其他商品做广告。Banner的尺寸可以根据内容或版面需要来安排。 在制作Banner时，有以下几点需要注意。 （4）标题栏 此处的标题栏不是指整个网页的标题栏，而是网页上各版块的标题栏，是各版块内容的概括。它使得网页内容的分类更清晰、明了，大大地方便了浏览者。 标题栏可以是文字加不同颜色的背景，也可以是图片，这由网站的整体风格决定。 （5）按钮 按钮通常是启动某些装置或机关的开关。网页中的按钮也不例外，单击它，网页会实现相应的操作，比如跳转到其他页面，或提交数据等。 2．网页的本质 在浏览器中选择“文件”“另存为”菜单，将网页保存到磁盘中，便可看到网页的组成文件。 3．动态网页和静态网页 从制作技术的角度来讲，网页可分为静态网页和动态网页。完全采用HTML技术制作的网页称为静态网页；使用HTML、编程语言和数据库共同完成，需要与数据库实时交互的网页称为动态网页。 （二）网站开发基础 1．IP地址、域名和网址 （2）域名 由于IP地址在使用过程中难于记忆和书写，人们又发现了一种与IP地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们只需要在浏览器地址栏中输入搜狐网站的域名“”，然后按回车键就可以访问搜狐网站了。 （3）网址 网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。它是网络上通用的一种地址格式，用于标识网页文件在网络中的位置。 一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。 2．网站管理与网页制作相关软件 3．网页制作基础——XHTML语言 XHTML是Extensible HyperText Markup Language(可扩展超文本标记语言)的英文缩写，它的前身是HTML。由于HTML代码烦琐，结构松散，所以推出了XHTML。也可以说，XHTML是HTML的一个升级版本。 XHTML语言的核心是标签（或者称为标记）。也就是说，我们在浏览网页时看到的文字、图像、动画等在XHTML文档中都是用标签来描述的。 4．网站建设流程 （三）初识Dreamweaver CS5 1．启动Dreamweaver CS5 2．Dreamweaver CS5界面元素简介 Dreamweaver CS5的工作界面由应用程序栏、文档标签、文档工具栏、文档窗口、标签选择器、状态栏、属性检查器和面板组等组成。 （1）应用程序栏 应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器、“CS Live”按钮和程序窗口控制按钮。 （2）文档标签栏 文档标签栏位于应用程序栏下方，左侧显示当前打开的所有网页文档的名称及其关闭按钮（标签）；右侧显示当前文档在本地磁盘中的保存路径以及向下还原按钮；下方显示当前文档中的包含文档以及链接文档。当用户打开多个网页时，通过单击文档标签可在各网页之间切换。另外，单击下方的包含文档或链接文档，可打开相应文档。 （3）文档工具栏 文档工具栏位于文档标签下方，包括各种可对文档进行操作的按钮。 （4）状态栏 状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。 （5）属性检查器 使用“属性检查器”