DreamweaverCS5网页制作高级案例教程项目一
- 格式：pptx
- 大小：4.96 MB
- 文档页数：37
文档推荐
-
网页设计与制作实例教程页数:5
-
DW网页制作教学教程案例页数:205
-
《网页制作——美化网页》教学案例页数:5
-
2019年DW网页制作教程案例页数:205
-
网页设计及制作实例教程页数:5
-
网页制作案例教程-清华大学页数:77
下载文档原格式
合集下载
网页设计与制作案例教程(Dreamweaver CS5+Div+CSS+JavaScript)第8章1
8.1.3 行为的基本操作
1．添加行为 2．删除行为 3．编辑行为
案例
8.2 案例1添加弹出提示信息的行为 8.3 案例2 制作网页加载时弹出公告页 8.4 案例3 使用行为设置图像特效——交换图 像 8.5 案例4 通过行为设置文本
8.5.1 设置状态栏文本 8.5.2 设置容器的文本
动作
动作是指最终需完成的动态效果，如交换图像、 弹出信息、打开浏览器窗口、播放声音等都是 动作。动作通常是一段JavaScript代码。在 Dreamweaver中使用内置行为时，系统会自动向 页面中添加JavaScript代码，用户不必自己编写。
8.1.2 行为面板与行为菜单
在Dreamweaver中，对行为的添加和管理主要通过“行 为”面板来完成。在菜单栏中选择“窗口→行为”命令 或按〈Shift+F4〉组合键，可以展开“行为”面板， 在“行为”面板中，右侧显示动作，左侧显示行为对应 的事件类型。面板中各选项作用如下： 显示设置事件：显示添加到当前文档的事件。 显示所有事件：显示所有事件。 添加行为：单击该按钮，从弹出菜单中选择需要添加的 行为类别。 删除事件：从行为列表中删除选中的行为。 增加事件值：将当前选定的行为向前移动。 降低事件值：将当前选定的行为向后移动。
设置表单属性 ——目标
_blank：在未命名的新浏览器窗口中打开要链接 到的网页。 _parent：在显示当前文档的窗口的父窗口中打 开要链接到的网页。 _self：默认选项，表示在当前窗口中打开要链 接到的网页。 _top：表示在整个浏览器窗口中打开链接网页并 删除所有框架。一般使用多级框架时才选用此 选项。
行为菜单
检查表单：检测用户填写的表单内容是否符合预先设定的规范。 设置导航栏图像：制作图像导航条。 设置文本：可以在不同位置显示相应内容。 调用Javascript：当事件发生时，调用指定的Javascript函数。 跳转菜单：制作一次可建立若干个链接的跳转菜单。 跳转菜单开始：在跳转菜单中选定要移动的站点后，只有单击“开 始”按钮才可移动到链接的站点上。 转到URL：选定事件发生后，可以跳转到指定站点或网页文档上。 预先载入图像：在下载图像之前预先载入一幅图像。
项目一初识Dreamweavercs5(上机)3
项目一网页制作基础任务三初识Dreamweaver CS5一、教学目标1、知道创建站点。
2、掌握创建网站的首页及子页。
二、学生特征分析学生利用Dreamweaver cs5软件，尝试创建站点，首页、子页，并制作一个简单的首页页面。
三、课型实训课四、教学重点创建站点名称：水连天旅行社。
五、教学难点创建一个首页，另创建子页：公司简介、景点介绍、。
六、课前准备机房七、课时安排2课时（45分钟×2）八、教学过程1、复习思考与组织教学初步创建站点，首页、子页及首页页面。
2、引入新课老师先讲解步骤方法及演示引入课题。
3、讲授新课在首页中编辑内容《见素材》。
1、准备好网页素材。
2、创建水连天旅行社的站点。
3、创建一个首页，另创建子页：公司简介、景点介绍、在线报名、在线团购。
4、保存并用浏览器浏览网页看其较果。
如下图所示。
4、巩固深化尝试建立首页页面。
5、课堂小结A、教学内容与时间分配：第一节课：一、在软件中定义站点（10分钟）二、在软件中管理站点（10分钟）三、网站文档的基本操作（25分钟）第二节课上机操作（45分钟）B、教学活动：通过软件功能解析深入学习软件功能和制作特点。
C、教师活动：通过软件相关功能的解析学习Dreamweaver CS5工作界面的基本操作和设置文件头的基本方法。
D、学生活动：除了课堂讲解的软件功能外，还可以根据相关的工具特点进行简单的练习和操作。
布置作业上机作业（见素材）。
九、板书设计十、教学反思本次上机课主要让学生掌握操作创建站点和创建首页及相关子页，进一步巩固上节课所学内容，其次学会一些简单的首页页面编辑，学生有了前面上机操作的基础，这次上机作业也做得比较理想，但还是有少数部分学生不知道操作，所以还要在教学上找出原因。
DreamweaverCS5网页制作第3章 使用表格布局页面PPT课件
3.1 表格的建立和编辑
3.1.4 实战演练：网站“行星大观”页眉导航部分制作
操作步骤： 6）光标移到第2行第1个单元格，在属性面板中设单元格的“宽”为270，“高”为24。鼠标 选中该行其它所有单元格，在属性面板中设单元格设为“宽”为100，水平、垂直方向均为 居中对齐。输入对应文字，如图所示。
（3）选取行或列 从一个单元格开始，拖动鼠标选中整行和整列的单元格，单元 格所在的行或列即被选中。或将鼠标停留在一行的左边框或一列的上边框，当选择行 或列的图标出现时，单击鼠标即可选择行或列。
3.1 表格的建立和编辑
3. 设定表格和单元格属性 （1）表格属性
当选中整个表格时，属性面板会自动变成表格的设置面板。可以通过这个面板 修改表格的行数、列数、大小等属性。表格的属性面板如下图所示。其中行、列、 宽、高、填充（即单元格边距）、间距、边框在创建表格时已经介绍过。
3.1 表格的建立和编辑
2. 选取表格元素 （1）选取整个表格 将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表
格。或光标放在表格中时，点击菜单“修改”→“表格”→“选择表格”命令。也可以 将光标放在单元格中，在文档窗口的左下角的标签选择器中选择“Table”标签，选取 整个表格。
（2）选取单元格 将鼠标指针移动到某个单元格上，按住Ctrl键不放，再单击， 就可以选中这个单元格。按住Ctrl键，再逐个单击要选取的单元格，就可以选中不连 续的多个单元格。光标移到某个单元格中，按住Shift键鼠标点击另外一个单元格，则 这两个单元格之间的所有单元格将被选中，形成一个连续矩形区域。也可以通过鼠标 拖拽的方法可以选取连续的一片单元格。
3.1 表格的建立和编辑
3.1.1 案例制作：2006世界杯E组对阵表
项目一初识Dreamweavercs5(上机)2
项目一网页制作基础任务二初识Dreamweaver CS5一、教学目标1、知道创建站点。
2、掌握创建网站的首页及子页。
二、学生特征分析学生利用Dreamweaver cs5软件，尝试创建站点，首页、子页，并制作一个简单的首页页面。
三、课型实训课四、教学重点创建一个网站站点：名称为“青春我美丽”。
五、教学难点创建一个首页，另创建子页名称为“新闻、文章、下载、图片”。
六、课前准备机房七、课时安排2课时（45分钟×2）八、教学过程1、复习思考与组织教学初步创建站点，首页、子页及首页页面。
2、引入新课老师先讲解步骤方法及演示引入课题。
3、讲授新课在首页中编辑内容《见素材》。
1、准备好网页素材。
2、创建青春我美丽的站点。
3、创建子页“新闻、文章、下载、图片”并在主页中编辑内容。
4、保存并用浏览器浏览网页看其较果。
如下图所示。
4、巩固深化尝试建立首页页面。
5、课堂小结A、教学内容与时间分配：第一节课：一、在软件中定义站点（10分钟）二、在软件中管理站点（10分钟）三、网站文档的基本操作（25分钟）第二节课上机操作（45分钟）B、教学活动：通过软件功能解析深入学习软件功能和制作特点。
C、教师活动：通过软件相关功能的解析学习Dreamweaver CS5工作界面的基本操作和设置文件头的基本方法。
D、学生活动：除了课堂讲解的软件功能外，还可以根据相关的工具特点进行简单的练习和操作。
布置作业上机作业（见素材）。
九、板书设计十、教学反思我和学生一起学习了怎样建立一个自己的站点，并且在自己的站点内建立一张网页，然后在这张网页内输入文字、插入图片、设置网页背景等，并进行一些格式的设置。
但仍然有一小部分学生没有完成，于是我就查看了一下学生的来源，发现有的学生初中来自农村中学，动手能力相对较差一点。
网页设计与制作案例教程(Dreamweaver CS5+Div+CSS+JavaScript)第一章3
12
下面以实例说明标题标记的用法。 实例代码： <html> <head> <title>文本的标题</title> </head> <body> </body> </html> 保存页面后在IE中打开，可以看到浏览器的标题栏中显 示了刚才设置的标题“文件的标题”，效果如下图所示。
3、属性
属性是用来描述对象特征的特性。在HTML中，所有的属性都 放置在开始标记的尖括号里，属性与标记之间用空格分隔，属 性的值放在相应属性之后，用等号分隔，而不同的属性之间用 空格分隔。格式为： <标记 属性1=属性值1 属性2=属性值2 …> 受影响的内容 <／ 标记>
例如：<body bgcolor="#ccffff" text="#660033">
4
5
认识 HTMext Markup Language,直译为超文本标记语言。它是一种 文本类、解释执行的标记语言，是在标准一 般化标记语言(SGML) 的基础上建立的。
6
1.5.2 HTML的基本语法
HTML文件就是由各种HTML元素和标签组成的。 一个HTML文件的基本结构如下：
9
1、双标记
“双标记”与单标记刚好相反，这种标记有头有尾，且前头标记与后面 的标记保持一样，但在后面标记前有斜线，所以叫双标记。其中开始标 记是告诉浏览器从本处开始标记所表达的功能，再由尾标记告诉浏览器 结束，构成尾标记是在小于号后面加斜杠，语法形式为： <标记>内容</标记> 其中，<标记>指的是字母关键字组成的标记，如 <div></div>组成一个层， <table></table>组成一个表格，而“内容”是被标记修饰的部分，从标 记对前到标记对结束的内容都被标记对修饰着，如<div>这是一个层 </div>中的文本文字“这是一个层”被<div>标记对修饰表示一个层的内 容，再如<p>段落内容</p>中的“段落内容”被<p>标记对修饰，表示一 个段落等。双标记可以多层嵌套，如在<p></p>标记对中可以嵌套 <div></div>标记对或其他标记对，在多个嵌套中，一个标记对的结束标 记对最近一个标记对开始标记配对。值得注意的是，标记对不能交叉。 10
网页设计与制作案例教程(DreamweaverCS5+Div+CSS+JavaScript)
2.1.5 设置字 体样式
2.1.3 设置字 号
2.1.6 编 辑与设置 段落格式
2 网页中文本的创建
2.1 文本的基本操作
2.1.7 设置是否显示不可见元 素
2 网页中文本 的创建
2.2 插入特殊文本对象
01
2.2.1 插入特 殊字符
04
2.2.4 插入日 期
02
2.2.2 插入水 平线
03
2.2.3 插入注 释
1.6 案例：网站 首页
1 网页设计与制作 基础
练习题
1 网页设计与制作基础
1
1.1.1 Internet与Web
2
1.1.2 网页、网站与主页
3
1.1.3 网站的分类与赏析
4
1.1.4 网页的配色与布局
1.1 网页的基础知识
1 网页设计与制作基础
1.2.1 网站策划流程
A
1.2.2 网站制作流程
06
6.1.6 修改框 架的大小
05
6.1.5 保存框
架
04
6.1.4 为框架
添加内容
03
6.1.3 框架的
选择
02
6.1.2 建立框
架集
01
6.1.1 框架与
框架集
6 框架与 框架集
6.1 框架与框架集的 基本操作
https:///
6.1.7 拆分框架 6.1.8 删除框架
6 框架与框架 集
网页设计与制作案例教程 (DreamweaverCS5+Div+CSS+JavaSc ript)
演讲人
2011-11-11
01
1 网页设计与制作基础
网页设计与制作案例教程(Dreamweaver CS5+Div+CSS+JavaScript)第9章
第9章 模板、库和资源管理
9.1案例1创建基于模板的网页
9.2 学习任务：使用库项目 9.3 学习任务：资源管理 9.4 上机实训
9.1案例1创建基于模板的网页
学习任务要求：
了解模板的功能。 掌握创建模板、编辑模板和应用模板的方法。
9.1.1 模板简介
在制作一个站点时，往往需要建立外观及 部分内容相同的大量网页，使站点具有统 一的风格。如果逐一创建、修改，会很费 力，效率不高，而且整个站点很难做到有 统一的外观及结构，借助Dreamweaver中 的模板功能就可以轻松地解决这个问题。
9.2 学习任务：使用库项目
1）选择文档中需要保存为库项目的内容。 2）在“资源”面板中单击“库”类别底 部的【新建库项目】按钮 。 3）为该库项目键入一个名称。
9.2.3 管理和编辑库项目
1．应用库项目 具体方法：打开要应用库项目的网页文件， 将鼠标定位在需要插入库项目的位置，在 “资源”面板单击左侧的“库”类别，在 右侧列表中选择需要插入的库项目，单击 【插入】按钮即可，添加完毕，单击“文 件→保存”命令，按下〈F12〉键预览网 页效果。
1．重命名模板文件 2．修改模板文件 3．删除模板文件
9.1.7 从模板中分离文档
可以将文档从模板中分离，分离后的网页和模板就没有 关系了，文档的不可编辑区域将变得可以编辑，这给修 改网页内容带来了很大的方便，同时模板文件内容结构 改动时，当前网页文件就不能被重新变动。 具体方法：打开应用了模板的文件，然后选择“修改→ 模板→从模板中分离”菜单命令，即可将网页从模板中 分离出来，最后保存文档。
9.1.4 创建基于模板的文档
创建模板后，接下来就是基于模板创建新的网页文档。 以模板为基础创建新的网页文档有两种方法：一种是使 用“新建”命令创建基于模板的新文档；另一种是应用 “资源”控制面板中的模板来创建基于模板的网页。 一、选择“文件→新建”命令，打开“新建文档”对话 框，单击“模板中的页”标签，在“站点”选项框中选 择本网站的站点，从右侧的选项栏中选择一模板文件。 二、新建一个HTML文档。在“资源”面板中，单击左侧 的“模板”类别，从模板列表中选择相应的模板，然后 单击控制面板下面的【应用】按钮，即在文档中应用了 选择的模板。
9.1案例1创建基于模板的网页
9.2 学习任务：使用库项目 9.3 学习任务：资源管理 9.4 上机实训
9.1案例1创建基于模板的网页
学习任务要求：
了解模板的功能。 掌握创建模板、编辑模板和应用模板的方法。
9.1.1 模板简介
在制作一个站点时，往往需要建立外观及 部分内容相同的大量网页，使站点具有统 一的风格。如果逐一创建、修改，会很费 力，效率不高，而且整个站点很难做到有 统一的外观及结构，借助Dreamweaver中 的模板功能就可以轻松地解决这个问题。
9.2 学习任务：使用库项目
1）选择文档中需要保存为库项目的内容。 2）在“资源”面板中单击“库”类别底 部的【新建库项目】按钮 。 3）为该库项目键入一个名称。
9.2.3 管理和编辑库项目
1．应用库项目 具体方法：打开要应用库项目的网页文件， 将鼠标定位在需要插入库项目的位置，在 “资源”面板单击左侧的“库”类别，在 右侧列表中选择需要插入的库项目，单击 【插入】按钮即可，添加完毕，单击“文 件→保存”命令，按下〈F12〉键预览网 页效果。
1．重命名模板文件 2．修改模板文件 3．删除模板文件
9.1.7 从模板中分离文档
可以将文档从模板中分离，分离后的网页和模板就没有 关系了，文档的不可编辑区域将变得可以编辑，这给修 改网页内容带来了很大的方便，同时模板文件内容结构 改动时，当前网页文件就不能被重新变动。 具体方法：打开应用了模板的文件，然后选择“修改→ 模板→从模板中分离”菜单命令，即可将网页从模板中 分离出来，最后保存文档。
9.1.4 创建基于模板的文档
创建模板后，接下来就是基于模板创建新的网页文档。 以模板为基础创建新的网页文档有两种方法：一种是使 用“新建”命令创建基于模板的新文档；另一种是应用 “资源”控制面板中的模板来创建基于模板的网页。 一、选择“文件→新建”命令，打开“新建文档”对话 框，单击“模板中的页”标签，在“站点”选项框中选 择本网站的站点，从右侧的选项栏中选择一模板文件。 二、新建一个HTML文档。在“资源”面板中，单击左侧 的“模板”类别，从模板列表中选择相应的模板，然后 单击控制面板下面的【应用】按钮，即在文档中应用了 选择的模板。
网页设计与制作案例教程(Dreamweaver CS5+Div+CSS+JavaScript)第三章2
第 3章
插入多媒体元素和超链接
3.1 案例1 制作多媒体网页——我的乐园
3.2 案例2 为网页添加超链接 3.3 学习任务：管理链接 3.4 实训
3.1
案例1 制作多媒体网页——我的乐园
学习任务要求：
认识超链接 掌握创建各类超链接的方法
超级链接（Hyperlink）在本质上属于一个网页的一部分， 它是一种允许我们同其他网页或站点之间进行连接的元 素。各个网页链接在一起后，才能真正构成一个网站。 超级链接又简称为超链接。所谓的超链接是指从一个网 页指向一个目标的连接关系,这个目标可以是另一个网页, 也可以是相同网页上的不同位置，还可以是一个图片， 一个电子邮件地址，一个文件，甚至是一个应用程序等。 而在一个网页中用来超链接的对象，可以是一段文本或 者是一个图片。当浏览者单击已经链接的文字或图片后, 链接目标将显示在浏览器上，并且根据目标的类型来打 开或运行。因此，超链接根据使用对象的不同可以分为 文本链接、图像链接、锚点连接、空链接、电子邮件链 接等。
8
但是，如果移动或重命名由站点根目录相对链接所 指向的文档，则即使文档之间的相对路径没有改变， 也必须更新这些链接。例如，如果移动某个文件夹， 则必须更新指向该文件夹中文件的所有站点根目录 相对链接。（如果使用【文件】面板移动或重命名 文件，则 Dreamweaver 将自动更新所有相关链接。）
站点根目录相对路径以一个正斜杠开始，该正斜杠表示站 点根文件夹。例如，/article/index.htm 是文件 (index.htm) 的站点根目录相对路径，该文件位于站点根文件夹的article 子文件夹中。 如果您需要经常在 Web 站点的不同文件夹之间移动 HTML 文件，那么站点根目录相对路径通常是指定链接的最佳方 法。移动包含站点根目录相对链接的文档时，不需要更改 这些链接，因为链接是相对于站点根目录的，而不是文档 本身；例如，如果某 HTML 文件对相关文件（如图像）使 用站点根目录相对链接，则移动 HTML 文件后，其相关文 件链接依然有效。
插入多媒体元素和超链接
3.1 案例1 制作多媒体网页——我的乐园
3.2 案例2 为网页添加超链接 3.3 学习任务：管理链接 3.4 实训
3.1
案例1 制作多媒体网页——我的乐园
学习任务要求：
认识超链接 掌握创建各类超链接的方法
超级链接（Hyperlink）在本质上属于一个网页的一部分， 它是一种允许我们同其他网页或站点之间进行连接的元 素。各个网页链接在一起后，才能真正构成一个网站。 超级链接又简称为超链接。所谓的超链接是指从一个网 页指向一个目标的连接关系,这个目标可以是另一个网页, 也可以是相同网页上的不同位置，还可以是一个图片， 一个电子邮件地址，一个文件，甚至是一个应用程序等。 而在一个网页中用来超链接的对象，可以是一段文本或 者是一个图片。当浏览者单击已经链接的文字或图片后, 链接目标将显示在浏览器上，并且根据目标的类型来打 开或运行。因此，超链接根据使用对象的不同可以分为 文本链接、图像链接、锚点连接、空链接、电子邮件链 接等。
8
但是，如果移动或重命名由站点根目录相对链接所 指向的文档，则即使文档之间的相对路径没有改变， 也必须更新这些链接。例如，如果移动某个文件夹， 则必须更新指向该文件夹中文件的所有站点根目录 相对链接。（如果使用【文件】面板移动或重命名 文件，则 Dreamweaver 将自动更新所有相关链接。）
站点根目录相对路径以一个正斜杠开始，该正斜杠表示站 点根文件夹。例如，/article/index.htm 是文件 (index.htm) 的站点根目录相对路径，该文件位于站点根文件夹的article 子文件夹中。 如果您需要经常在 Web 站点的不同文件夹之间移动 HTML 文件，那么站点根目录相对路径通常是指定链接的最佳方 法。移动包含站点根目录相对链接的文档时，不需要更改 这些链接，因为链接是相对于站点根目录的，而不是文档 本身；例如，如果某 HTML 文件对相关文件（如图像）使 用站点根目录相对链接，则移动 HTML 文件后，其相关文 件链接依然有效。
Dreamweaver CS5实验一
实验一使用Dreamweaver CS5制作网页—表格基本操作一、实验目的和要求1、掌握表格的基本操作。
2、掌握表格及单元格的设置。
3、掌握表格的布局技巧。
4、掌握在网页中插入文本，设置文本格式。
5、掌握为文本添加超链接。
二、实验内容参照样页（见图16-1），根据要求制作网页。
本实验的素材在所配套素材EX16文件夹中。
图1- 1 参考样页三、实验步骤实验准备：启动Dreamweaver CS5。
1、新建网页（1）执行【文件】菜单中【新建】功能，在新建文档窗体中选择“空白页”，页面类型为“HTML”，单击“创建”按钮，如图16-2所示。
图16- 2 新建HTML页面(2)在新建的网页编辑窗口空白处单击右键，选择“页面属性”功能，在“大小”下拉列表框中选择12，并设置页面边距为0，显示如图16-3。
（3）单击按钮，完成“页面属性”设置。
2、选择【插入】/【表格】菜单，弹出“表格”对话框，在“行数”文本框中输入3，在“列数”文本框中输入1，在“表格宽度”文本框输入800，在其后的下拉列表框中选择“像素”选项，并设置其他属性为0，如图16-4所示。
图16- 3页面属性设置图16- 4表格设置3、选择插入的表格，单击鼠标右键，在弹出的快捷菜单中选择【对齐】/【居中对齐】命令，将插入的表格居中对齐，如图16-5所示。
图16- 5 插入表格4、为了便于查看插入的表格，选择插入的表格，将鼠标移动到表格的下方，当鼠标光标变为形态时按住鼠标左键不放，将其向下拖动调整表格的显示高度。
5、选择插入表格第二行的单元格，在“属性”面板中单击“拆分单元格为行或列”按钮如图1-6，把单元格拆分2列，使用鼠标调整表格中单元格的位置，如图1-7所示。
图16- 6 拆分单元格图16- 7 单元格调整6、将鼠标定位到第1行单元格中，单击【插入】/【图像】，在弹出的对话框中选择本实验提供的素材top.jpg。
7、将鼠标定位到第2行第1列单元格中，在属性栏设置“水平”为“居中对齐”，“垂直”为“顶端对齐”。
Dreamweaver CS5网页设计案例教程1
“插入”面板
6.更完整CSS功能
传统的HTML所提供的样式及排版功能非常有限，因此，现在复杂的网
页版面主要靠CSS样式来实现。而CSS样式表的功能较多，语法比较复杂，
需要一个很好的工具软件有条不紊地整理复杂的CSS源代码，并适时地提供 辅助说明。Dreamweaver CS5就提供了这种方便有效的CSS功能。 “属性”面板提供了CSS功能。用户可以通过“属性”面板中“类” 选项的下拉列表对所选的对象应用样式或创建和编辑样式。若某些文字应 用了自定义样式，当用户调整这些文字的属性时，会自动生成新的CSS样式。
3.定义新站点
建立好站点文件夹后用户就可定义新站点了。在Dreamweaver CS5中， 站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上 的一组文件，远程站点是远程 Web 服务器上的一个位置。用户将本地站点 中的文件发布到网络上的远程站点，使公众可以访问它们。在Dreamweaver CS5中创建 Web 站点，通常先在本地磁盘上创建本地站点，然后创建远程 站点，再将这些网页的副本上传到一个远程 Web 服务器上，使公众可以访 问它们。
开始页面
“首选参数”对话框
2.不同风格的界面
Dreamweaver CS5的操作界面新颖淡雅，布局紧凑，为用户提供了一 个轻松、愉悦的开发环境。 若户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择 “窗口 > 工作区布局”命令，弹出其子菜单，在子菜单中选择“编码器” 或“设计器”命令，选择其中的一种界面风格，页面会发生相应的改变。
1.2 创建网站框架
操作目的 操作步骤
相关工具
1.2.1 操作目的
通过打开效果文件，熟练掌握打开命令。通过复制效果，熟练
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
栏目都很多，一般将导航条分为多排放置在 Logo的下方或右侧。为便于查看，可为各排设 置不同的底色，如下图所示。
（3）广告条
广告条又称Banner，其功能是宣传网站或为其 他商品做广告。Banner的尺寸可以根据内容或 版面需要来安排。 在制作Banner时，有以下几点需要注意。
•Banner可以是静态的，也可以是动态的。 •Banner的体积不宜过大，尽量使用GIF格式图片与 动画或Flash动画。 •Banner中的文字不要太多。 •Banner中图片的颜色不要太多，尤其是GIF格式的 图片或动画，要避免出现颜色的渐变和光晕效果。
Dreamweaver是目前最常用的网站管理和网页 制作软件，其功能全面、操作灵活、专业性强。 另外，它还可以作为动态网站的开发环境。 在制作网页时，除Dreamweaver外还需要用到 Fireworks、Flash、Photoshop等辅助软件。
3．网页制作基础——XHTML语言
XHTML是Extensible HyperText Markup Language(可扩展超文本标记语言)的英文缩写，它 的前身是HTML。由于HTML代码烦琐，结构松散，所 以推出了XHTML。也可以说，XHTML是HTML的一个升 级版本。 XHTML语言的核心是标签（或者称为标记）。也就 是说，我们在浏览网页时看到的文字、图像、动画 等在XHTML文档中都是用标签来描述的。
（2）域名
（3）网址
网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。它是 网络上通用的一种地址格式，用于标识网页文 件在网络中的位置。 一个完整的网址由通信协议名称、域名或IP地 址、网页在服务器中的路径和文件名4部分组 成。
2．网站管理与网页制作相关软件
1．网页的构成元素
我们可以将网页中的元素按功能分为站标、导 航条、广告条、标题栏和按钮等，如图1-1所示。
站标
导航条
标题 栏
广告 条
按钮
（1）站标
站标也叫Logo，是网站的标志，其作用是使人看见它 就能够联想到企业。因此，网站Logo通常采用企业的 Logo。 Logo一般采用蕴含企业文化和特色的图案，或是与企 业名称相关的字符或符号及其变形，当然也有很多是 图文组合，如下图所示。
2．网页的本质
在浏览器中选择“文件”>“另存为”菜单，将 网页保存到磁盘中，便可看到网页的组成文件。
3．动态网页和静态网页
从制作技术的角度来讲，网页可分为静态网页 和动态网页。完全采用HTML技术制作的网页 称为静态网页；使用HTML、编程语言和数据 库共同完成，需要与数据库实时交互的网页称 为动态网页。
项目一 创建“夕照台”房产网 站
——网页制作基础
一、学习目标 二、理论指导 三、任务实践
一、学习目标
➢ 了解网页的构成元素，网页的本质，以及动态网页 和静态网页的区别。
➢ 了解IP地址、域名和网址的概念，以及网站管理与 网页制作相关软件，XHTML语言和网站建设流程。
➢ 认识Dreamweaver CS5的界面元素。 ➢ 掌握规划网站结构以及在Dreamweaver中定义和管
理站点的方法。 ➢ 掌握网页文档和文件夹的命名规则，以及在
Dreamweaver中新建、打开、保存和预览网页的方 法，另外还要学会使用“文件”面板管理站点文件 和文件夹。
二、理论指导
（一）认识网站和网页
网页就是我们上网时在浏览器中打开的一个个画面， 网站则是一组相关网页的集合。一个小型网站可能 只包含几个网页，而一个大型网站则可能包含成千 上万个网页。 打开某个网站时显示的第一个网页被称为网站的主 页（或首页）。
（2）文档标签栏
文档标签栏位于应用程序栏下方，左侧显示当前打 开的所有网页文档的名称及其关闭按钮（标签）； 右侧显示当前文档在本地磁盘中的保存路径以及向 下还原按钮；下方显示当前文档中的包含文档以及 链接文档。当用户打开多个网页时，通过单击文档 标签可在各网页之间切换。另外，单击下方的包含 文档或链接文档，可打开相应文档。
（2）导航条
导航条是一组链接到网站内主要页面的超链接 组合，通过单击这些超链接，浏览者可以轻松 找到网站中的各个页面。设计导航条时，应遵 循以下原则：
•对于一般的企业网站，如果网站内容不多，可根据网站风格灵活摆放导航条，也可 以使用图片或Flash动画等显示导航条，如下图所示。
对于像
此处的标题栏不是指整个网页的标题栏，而是 网页上各版块的标题栏，是各版块内容的概括。 它使得网页内容的分类更清晰、明了，大大地 方便了浏览者。 标题栏可以是文字加不同颜色的背景，也可以 是图片，这由网站的整体风格决定。
（5）按钮
按钮通常是启动某些装置或机关的开关。网页中 的按钮也不例外，单击它，网页会实现相应的操 作，比如跳转到其他页面，或提交数据等。
（二）网站开发基础
1．IP地址、域名和网址
（1）IP地址
互联网是全世界范围内的计算机联为一体而构成的 通信网络。互联网上连接了不计其数的服务器和客 户机，每一个主机在互联网上都有一个唯一的地址， 我们称这个地址为IP地址（Internet Protocol Address）。IP地址由4个小于256的数字组成，数 字之间用点间隔。例如，“61.135.150.126”就是 一个IP地址。
4．网站建设流程
网站建设流程是指从企业计划建设网站到网站 建设完成的一套规范化运作过程。
（三）初识Dreamweaver CS5
1．启动Dreamweaver CS5
安装Dreamweaver CS5后，单击桌面左下角的“开 始”按钮 ，选择“所有程序”>“Adobe Dreamweaver CS5”，就可以启动Dreamweaver CS5了。
2．Dreamweaver CS5界面元素简介
Dreamweaver CS5的工作界面由应用程序栏、 文档标签、文档工具栏、文档窗口、标签选择 器、状态栏、属性检查器和面板组等组成。
（1）应用程序栏
应用程序栏位于工作区顶部，左侧显示菜单 栏，右侧包含工作区切换器、“CS Live”按 钮和程序窗口控制按钮。
（3）广告条
广告条又称Banner，其功能是宣传网站或为其 他商品做广告。Banner的尺寸可以根据内容或 版面需要来安排。 在制作Banner时，有以下几点需要注意。
•Banner可以是静态的，也可以是动态的。 •Banner的体积不宜过大，尽量使用GIF格式图片与 动画或Flash动画。 •Banner中的文字不要太多。 •Banner中图片的颜色不要太多，尤其是GIF格式的 图片或动画，要避免出现颜色的渐变和光晕效果。
Dreamweaver是目前最常用的网站管理和网页 制作软件，其功能全面、操作灵活、专业性强。 另外，它还可以作为动态网站的开发环境。 在制作网页时，除Dreamweaver外还需要用到 Fireworks、Flash、Photoshop等辅助软件。
3．网页制作基础——XHTML语言
XHTML是Extensible HyperText Markup Language(可扩展超文本标记语言)的英文缩写，它 的前身是HTML。由于HTML代码烦琐，结构松散，所 以推出了XHTML。也可以说，XHTML是HTML的一个升 级版本。 XHTML语言的核心是标签（或者称为标记）。也就 是说，我们在浏览网页时看到的文字、图像、动画 等在XHTML文档中都是用标签来描述的。
（2）域名
（3）网址
网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。它是 网络上通用的一种地址格式，用于标识网页文 件在网络中的位置。 一个完整的网址由通信协议名称、域名或IP地 址、网页在服务器中的路径和文件名4部分组 成。
2．网站管理与网页制作相关软件
1．网页的构成元素
我们可以将网页中的元素按功能分为站标、导 航条、广告条、标题栏和按钮等，如图1-1所示。
站标
导航条
标题 栏
广告 条
按钮
（1）站标
站标也叫Logo，是网站的标志，其作用是使人看见它 就能够联想到企业。因此，网站Logo通常采用企业的 Logo。 Logo一般采用蕴含企业文化和特色的图案，或是与企 业名称相关的字符或符号及其变形，当然也有很多是 图文组合，如下图所示。
2．网页的本质
在浏览器中选择“文件”>“另存为”菜单，将 网页保存到磁盘中，便可看到网页的组成文件。
3．动态网页和静态网页
从制作技术的角度来讲，网页可分为静态网页 和动态网页。完全采用HTML技术制作的网页 称为静态网页；使用HTML、编程语言和数据 库共同完成，需要与数据库实时交互的网页称 为动态网页。
项目一 创建“夕照台”房产网 站
——网页制作基础
一、学习目标 二、理论指导 三、任务实践
一、学习目标
➢ 了解网页的构成元素，网页的本质，以及动态网页 和静态网页的区别。
➢ 了解IP地址、域名和网址的概念，以及网站管理与 网页制作相关软件，XHTML语言和网站建设流程。
➢ 认识Dreamweaver CS5的界面元素。 ➢ 掌握规划网站结构以及在Dreamweaver中定义和管
理站点的方法。 ➢ 掌握网页文档和文件夹的命名规则，以及在
Dreamweaver中新建、打开、保存和预览网页的方 法，另外还要学会使用“文件”面板管理站点文件 和文件夹。
二、理论指导
（一）认识网站和网页
网页就是我们上网时在浏览器中打开的一个个画面， 网站则是一组相关网页的集合。一个小型网站可能 只包含几个网页，而一个大型网站则可能包含成千 上万个网页。 打开某个网站时显示的第一个网页被称为网站的主 页（或首页）。
（2）文档标签栏
文档标签栏位于应用程序栏下方，左侧显示当前打 开的所有网页文档的名称及其关闭按钮（标签）； 右侧显示当前文档在本地磁盘中的保存路径以及向 下还原按钮；下方显示当前文档中的包含文档以及 链接文档。当用户打开多个网页时，通过单击文档 标签可在各网页之间切换。另外，单击下方的包含 文档或链接文档，可打开相应文档。
（2）导航条
导航条是一组链接到网站内主要页面的超链接 组合，通过单击这些超链接，浏览者可以轻松 找到网站中的各个页面。设计导航条时，应遵 循以下原则：
•对于一般的企业网站，如果网站内容不多，可根据网站风格灵活摆放导航条，也可 以使用图片或Flash动画等显示导航条，如下图所示。
对于像
此处的标题栏不是指整个网页的标题栏，而是 网页上各版块的标题栏，是各版块内容的概括。 它使得网页内容的分类更清晰、明了，大大地 方便了浏览者。 标题栏可以是文字加不同颜色的背景，也可以 是图片，这由网站的整体风格决定。
（5）按钮
按钮通常是启动某些装置或机关的开关。网页中 的按钮也不例外，单击它，网页会实现相应的操 作，比如跳转到其他页面，或提交数据等。
（二）网站开发基础
1．IP地址、域名和网址
（1）IP地址
互联网是全世界范围内的计算机联为一体而构成的 通信网络。互联网上连接了不计其数的服务器和客 户机，每一个主机在互联网上都有一个唯一的地址， 我们称这个地址为IP地址（Internet Protocol Address）。IP地址由4个小于256的数字组成，数 字之间用点间隔。例如，“61.135.150.126”就是 一个IP地址。
4．网站建设流程
网站建设流程是指从企业计划建设网站到网站 建设完成的一套规范化运作过程。
（三）初识Dreamweaver CS5
1．启动Dreamweaver CS5
安装Dreamweaver CS5后，单击桌面左下角的“开 始”按钮 ，选择“所有程序”>“Adobe Dreamweaver CS5”，就可以启动Dreamweaver CS5了。
2．Dreamweaver CS5界面元素简介
Dreamweaver CS5的工作界面由应用程序栏、 文档标签、文档工具栏、文档窗口、标签选择 器、状态栏、属性检查器和面板组等组成。
（1）应用程序栏
应用程序栏位于工作区顶部，左侧显示菜单 栏，右侧包含工作区切换器、“CS Live”按 钮和程序窗口控制按钮。