项目一 创建“夕照台”房产网站 ——网页制作基础

Presentation on theme: "项目一 创建“夕照台”房产网站 ——网页制作基础"— Presentation transcript:

1 项目一 创建“夕照台”房产网站 ——网页制作基础
项目一 创建“夕照台”房产网站 ——网页制作基础 一、学习目标 二、理论指导 三、任务实践

2 一、学习目标 了解网页的构成元素，网页的本质，以及动态网页和静态网页的区别。
了解IP地址、域名和网址的概念，以及网站管理与网页制作相关软件，XHTML语言和网站建设流程。 认识Dreamweaver CS5的界面元素。 掌握规划网站结构以及在Dreamweaver中定义和管理站点的方法。 掌握网页文档和文件夹的命名规则，以及在Dreamweaver中新建、打开、保存和预览网页的方法，另外还要学会使用“文件”面板管理站点文件和文件夹。

3 二、理论指导 （一）认识网站和网页 网页就是我们上网时在浏览器中打开的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。 打开某个网站时显示的第一个网页被称为网站的主页（或首页）。

4 我们可以将网页中的元素按功能分为站标、导航条、广告条、标题栏和按钮等，如图1-1所示。
1．网页的构成元素 我们可以将网页中的元素按功能分为站标、导航条、广告条、标题栏和按钮等，如图1-1所示。 导航条 站标 广告条 按钮 标题栏

5 （1）站标 站标也叫Logo，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站Logo通常采用企业的Logo。

6 导航条是一组链接到网站内主要页面的超链接组合，通过单击这些超链接，浏览者可以轻松找到网站中的各个页面。设计导航条时，应遵循以下原则：
（2）导航条 导航条是一组链接到网站内主要页面的超链接组合，通过单击这些超链接，浏览者可以轻松找到网站中的各个页面。设计导航条时，应遵循以下原则： 对于一般的企业网站，如果网站内容不多，可根据网站风格灵活摆放导航条，也可以使用图片或Flash动画等显示导航条，如下图所示。

7 对于像搜狐、网易等大型门户类网站，网站栏目都很多，一般将导航条分为多排放置在Logo的下方或右侧。为便于查看，可为各排设置不同的底色，如下图所示。

8 （3）广告条 广告条又称Banner，其功能是宣传网站或为其他商品做广告。Banner的尺寸可以根据内容或版面需要来安排。
Banner的体积不宜过大，尽量使用GIF格式图片与动画或Flash动画。 Banner中的文字不要太多。 Banner中图片的颜色不要太多，尤其是GIF格式的图片或动画，要避免出现颜色的渐变和光晕效果。

9 （4）标题栏 此处的标题栏不是指整个网页的标题栏，而是网页上各版块的标题栏，是各版块内容的概括。它使得网页内容的分类更清晰、明了，大大地方便了浏览者。 标题栏可以是文字加不同颜色的背景，也可以是图片，这由网站的整体风格决定。

10 按钮通常是启动某些装置或机关的开关。网页中的按钮也不例外，单击它，网页会实现相应的操作，比如跳转到其他页面，或提交数据等。
（5）按钮 按钮通常是启动某些装置或机关的开关。网页中的按钮也不例外，单击它，网页会实现相应的操作，比如跳转到其他页面，或提交数据等。

11 在浏览器中选择“文件”>“另存为”菜单，将网页保存到磁盘中，便可看到网页的组成文件。
2．网页的本质 在浏览器中选择“文件”>“另存为”菜单，将网页保存到磁盘中，便可看到网页的组成文件。

12 3．动态网页和静态网页 从制作技术的角度来讲，网页可分为静态网页和动态网页。完全采用HTML技术制作的网页称为静态网页；使用HTML、编程语言和数据库共同完成，需要与数据库实时交互的网页称为动态网页。

13 （二）网站开发基础 1．IP地址、域名和网址 （1）IP地址
互联网是全世界范围内的计算机联为一体而构成的通信网络。互联网上连接了不计其数的服务器和客户机，每一个主机在互联网上都有一个唯一的地址，我们称这个地址为IP地址（Internet Protocol Address）。IP地址由4个小于256的数字组成，数字之间用点间隔。例如，“ ”就是一个IP地址。

14 （2）域名 由于IP地址在使用过程中难于记忆和书写，人们又发现了一种与IP地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们只需要在浏览器地址栏中输入搜狐网站的域名“

15 （3）网址 网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。它是网络上通用的一种地址格式，用于标识网页文件在网络中的位置。 一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。

16 2．网站管理与网页制作相关软件 Dreamweaver是目前最常用的网站管理和网页制作软件，其功能全面、操作灵活、专业性强。另外，它还可以作为动态网站的开发环境。 在制作网页时，除Dreamweaver外还需要用到Fireworks、Flash、Photoshop等辅助软件。

17 3．网页制作基础——XHTML语言 XHTML是Extensible HyperText Markup Language(可扩展超文本标记语言)的英文缩写，它的前身是HTML。由于HTML代码烦琐，结构松散，所以推出了XHTML。也可以说，XHTML是HTML的一个升级版本。 XHTML语言的核心是标签（或者称为标记）。也就是说，我们在浏览网页时看到的文字、图像、动画等在XHTML文档中都是用标签来描述的。

18 网站建设流程是指从企业计划建设网站到网站建设完成的一套规范化运作过程。
4．网站建设流程 网站建设流程是指从企业计划建设网站到网站建设完成的一套规范化运作过程。

19 （三）初识Dreamweaver CS5 1．启动Dreamweaver CS5
安装Dreamweaver CS5后，单击桌面左下角的“开始”按钮 ，选择“所有程序”>“Adobe Dreamweaver CS5”，就可以启动Dreamweaver CS5了。

20 2．Dreamweaver CS5界面元素简介

21 应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器、“CS Live”按钮和程序窗口控制按钮。
（1）应用程序栏 应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器、“CS Live”按钮和程序窗口控制按钮。

22 （2）文档标签栏 文档标签栏位于应用程序栏下方，左侧显示当前打开的所有网页文档的名称及其关闭按钮（标签）；右侧显示当前文档在本地磁盘中的保存路径以及向下还原按钮；下方显示当前文档中的包含文档以及链接文档。当用户打开多个网页时，通过单击文档标签可在各网页之间切换。另外，单击下方的包含文档或链接文档，可打开相应文档。

23 文档工具栏位于文档标签下方，包括各种可对文档进行操作的按钮。
（3）文档工具栏 文档工具栏位于文档标签下方，包括各种可对文档进行操作的按钮。

24 状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。
（4）状态栏 状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。

25 使用“属性检查器”可以检查和设置当前选定页面元素（如文本和插入对象）的最常用属性。“属性检查器”中的内容会根据选定元素的变化而变化。
（5）属性检查器 使用“属性检查器”可以检查和设置当前选定页面元素（如文本和插入对象）的最常用属性。“属性检查器”中的内容会根据选定元素的变化而变化。

26 （6）面板组 默认状态下，面板组位于文档窗口右侧。面板组中包含各种类型的面板，Dreamweaver中的大部分操作都需要利用面板来实现。其中最常用的有“插入”面板、“文件”面板和“CSS样式”面板，后面将陆续用到。

27 （四）在Dreamweaver中定义和管理网站
1．定义网站 定义网站的目的是把本地磁盘中的站点文件夹同Dreamweaver建立一定的关联，从而方便用户使用Dreamweaver管理站点和编辑站点中的网页文档，以及上传或下载站点内容等。

28 定义站点后，如果需要修改站点属性、复制或删除站点等，可执行下面的操作。
2．管理网站 定义站点后，如果需要修改站点属性、复制或删除站点等，可执行下面的操作。

29 （五）网页文档基本操作 1．网页文档和文件夹命名规则 静态的首页文件一般命名为“index.html”。
不要使用中文命名网站中的文件和文件夹。 文件名中不要使用大写英文字母。 运算符符号不能用在文件名的开头。 比较长的文件名可以使用下划线“_”来隔开多个单词或关键字。 在大型网站中，分支页面的文件应存放在单独的文件夹中。 在动态网站中，用来存放数据库的文件夹一般命名为“data”或者“database” 。

30 2．新建和保存网页文档 在Dreamweaver CS5中可以创建两种格式的网页文档，一种是直接创建空白网页文档，另一种是通过Dreamweaver CS5内置的模板文档创建具有一定内容和样式的网页文档。

31 3．打开、预览和关闭网页文档 若要对已有的文档进行编辑，就需要在Dreamweaver中打开该文档。另外，在Dreamweaver中打开网页文档并执行相应操作后，如果想查看它在浏览器中的效果，可执行预览操作。

32 一般在定义站点后，都会利用“文件”面板来创建、重命名或打开站点中的网页文档和文件夹。
4、利用“文件”面板管理站点文件和文件夹 一般在定义站点后，都会利用“文件”面板来创建、重命名或打开站点中的网页文档和文件夹。

33 三、任务实践 任务一 夕照台网站的建设流程 本任务中，我们将以夕照台房产网站为例，学习一般网站的建设流程。 收集网站建设需求及素材。
任务一 夕照台网站的建设流程 本任务中，我们将以夕照台房产网站为例，学习一般网站的建设流程。 收集网站建设需求及素材。 制作网站策划书。 网页美术设计。 美术与程序整合。 测试和发布网站。 推广和维护网站。

34 任务二 调整Dreamweaver CS5工作界面
使用Dreamweaver制作或编辑网页时，经常需要打开、关闭某个面板，或对其工作界面进行各种调整。为方便后期的学习，本任务我们来学习一下调整Dreamweaver CS5工作界面的基本操作（具体操作见视频1-2）。

35 在Dreamweaver中创建网站的第一步是确定本地站点的目录结构，并准备好相应的素材文件（具体操作见视频1-3） 。
任务三 创建站点目录结构 在Dreamweaver中创建网站的第一步是确定本地站点的目录结构，并准备好相应的素材文件（具体操作见视频1-3） 。

36 在实际的网页制作中，一般都是定义好网站之后再在网站中新建、打开或编辑网页（具体操作见视频1-4） 。
任务四 定义站点并创建网页 在实际的网页制作中，一般都是定义好网站之后再在网站中新建、打开或编辑网页（具体操作见视频1-4） 。