网页制作基础5PPT优秀课件
合集下载
网页制作第5章PPT课件
Page 7
5.2 网站数据库的创建 5.2.1 数据库的设计 5.2.2 基本表结构的详细设计
Page 8下表所示：
基本表 基本表存储的信息
books
存放所有图书的信 息
member
存放书店会员的基 本信息
basket 存放购物车的信息
dingdan
5.3 网络书店的主页结构
主页的内容和布局是整个网站开始的 关键。
下面以“清源图书网”的主页为例， 说明如何构建网络书店的主页。
Page 11
Page 12
主
① 书店的功能导航菜单和名称
页
的
框 架
② 会员注册 图书目录
结
图书查询
③ 图书信息
构
④ 版权说明
Page 13
【案例5-1】制作网络书店主页
Page 21
3．分页并循环取出本页每条记录
具体代码如下所示： <% for i=1 to rs.pagesize
if rs.eof or rs.bof then exit for
end if %> …… <% rs.movenext next %>
Page 22
4．表格中插入显示图书信息的asp代码
件 的图书记录。target=“content”表示在右边 框架中打开链接页面“booksbd.asp”。
Page 24
【案例5-3】制作新书和特价书
与【案例5-2】制作方法类似。 注意：将单个图书信息的列表框加入 循环语句中注意，循环的是整个列表框， 包括列表框和其中的内容，一定要看清相 应的HTML标记，否则会出现一些意想不 到的结果，例如循环的是半个列表框或循 环的方向和要求不符正好相反等现象。
5.2 网站数据库的创建 5.2.1 数据库的设计 5.2.2 基本表结构的详细设计
Page 8下表所示：
基本表 基本表存储的信息
books
存放所有图书的信 息
member
存放书店会员的基 本信息
basket 存放购物车的信息
dingdan
5.3 网络书店的主页结构
主页的内容和布局是整个网站开始的 关键。
下面以“清源图书网”的主页为例， 说明如何构建网络书店的主页。
Page 11
Page 12
主
① 书店的功能导航菜单和名称
页
的
框 架
② 会员注册 图书目录
结
图书查询
③ 图书信息
构
④ 版权说明
Page 13
【案例5-1】制作网络书店主页
Page 21
3．分页并循环取出本页每条记录
具体代码如下所示： <% for i=1 to rs.pagesize
if rs.eof or rs.bof then exit for
end if %> …… <% rs.movenext next %>
Page 22
4．表格中插入显示图书信息的asp代码
件 的图书记录。target=“content”表示在右边 框架中打开链接页面“booksbd.asp”。
Page 24
【案例5-3】制作新书和特价书
与【案例5-2】制作方法类似。 注意：将单个图书信息的列表框加入 循环语句中注意，循环的是整个列表框， 包括列表框和其中的内容，一定要看清相 应的HTML标记，否则会出现一些意想不 到的结果，例如循环的是半个列表框或循 环的方向和要求不符正好相反等现象。
《网页设计基础》PPT课件
1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage
网页制作(超详细ppt版)
五.给html文档加注释
和一般的程序语言一样，html编辑者也 可以对自己的语句进行注释。一般来说， 注释是用来标示html语句的作用的，对程 序的读写都有重要的作用。 注释的格式如下: <!—注释的内容-->或<!注释内容>
4.利用图像作为web页面使得 背景
Background属性 指定作为html文件背景的图片，可以使 用的图文件格式为gif和jpg，其语法如下： Background=“文件名称与路径” 假如引用c:/html/sub/目录下的bg.gif图文 件作为html文件背景时，此属性的设置语 法如下： Background=“c:/html/sub/bg.gif”
第1章
网页基础
一.www基础 二.网站和网页 三.Html基础及简单页面设计 四.Web页面的颜色 五.给html文档加注释
一.www基础
www（world wide web，简称互联网），一直 被人们称作internet的“杀手应用程序”。它可 以显示普通文字和图像并访问其他页面，而信息 子页则使得它成为internet上发展最快的部分。 你可能已经掌握了在web上如何探索信息世界， 但也有可能不太清楚如何向全世界发布你自己的 信息——有关你自己的信息，如你个人的兴趣、 你的工作等。 要创建自己的页面，最基础技术就是html （hypertext makeup language，超文本标记语 言），现在绝大多数web文档都是由html编写的。
四.Web页面的颜色
通过<body>标记内属性的设置，来达到控制 web页面的颜色的效果，主要内容： 1.为web页面设置背景颜色 2.为web页面设置文本颜色 3.在web页面设置中为超文本链接设置颜色 4.利用图像作为web页面使得背景
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
《网页制作基础教程》课件
通过图片和视频，可以更 直观地展示产品、场景和 信息。
交互效果
利用视频和动态图片等元 素，增加页面的交互性和 趣味性。
网页的交互效果
1
动画效果
通过CSS或Javascript添加动画效果，提升用户体验和页面吸引力。
2
弹出层
使用弹出层可以展示更多内容，同时不影响整体页面布局。
3
表单交互
通过表单控件的交互，实现用户输入和网站数据的交互。
2 D OM 操作
Javascript可以通过DOM操控网页上的元素，实现动态交互。
3 事件驱动
Javascript可以响应用户的操作和事件，并执行相应的逻辑。
网页设计的规范
网页设计需要遵循一定的规范和最佳实践，包括颜色搭配、字体选择、排版等方面。
响应式网页设计
自适应布局
网页设计需要适应不同屏幕尺 寸，确保在各种设备上都能良 好显示。
移动优先
考虑到现代用户更多使用移动 设备访问网页，设计应优先适 配移动端。
灵活布局
使用弹性布局和媒体查询等技 术，实现灵活自适应的网页布 局。
常见的网页布局方式
单栏布局
内容以一列的形式呈现，适 合大部分网页的简洁展示。
双栏布局
将内容分为两列，适合多信 息展示，如左侧导航栏和ห้องสมุดไป่ตู้ 侧内容。
网格布局
将内容划分为多个网格，适 合复杂的内容组织和多样化 的展示方式。
网站导航和搜索方式
1 导航菜单
使用导航菜单可以帮助 用户快速浏览网站的不 同部分和页面。
2 搜索框
提供搜索功能，让用户 可以根据关键词查找所 需的内容。
3 面包屑导航
显示用户当前位置，方 便用户追溯和返回。
交互效果
利用视频和动态图片等元 素，增加页面的交互性和 趣味性。
网页的交互效果
1
动画效果
通过CSS或Javascript添加动画效果，提升用户体验和页面吸引力。
2
弹出层
使用弹出层可以展示更多内容，同时不影响整体页面布局。
3
表单交互
通过表单控件的交互，实现用户输入和网站数据的交互。
2 D OM 操作
Javascript可以通过DOM操控网页上的元素，实现动态交互。
3 事件驱动
Javascript可以响应用户的操作和事件，并执行相应的逻辑。
网页设计的规范
网页设计需要遵循一定的规范和最佳实践，包括颜色搭配、字体选择、排版等方面。
响应式网页设计
自适应布局
网页设计需要适应不同屏幕尺 寸，确保在各种设备上都能良 好显示。
移动优先
考虑到现代用户更多使用移动 设备访问网页，设计应优先适 配移动端。
灵活布局
使用弹性布局和媒体查询等技 术，实现灵活自适应的网页布 局。
常见的网页布局方式
单栏布局
内容以一列的形式呈现，适 合大部分网页的简洁展示。
双栏布局
将内容分为两列，适合多信 息展示，如左侧导航栏和ห้องสมุดไป่ตู้ 侧内容。
网格布局
将内容划分为多个网格，适 合复杂的内容组织和多样化 的展示方式。
网站导航和搜索方式
1 导航菜单
使用导航菜单可以帮助 用户快速浏览网站的不 同部分和页面。
2 搜索框
提供搜索功能，让用户 可以根据关键词查找所 需的内容。
3 面包屑导航
显示用户当前位置，方 便用户追溯和返回。
第1章 网页设计基础PPT学习课件
2020/3/3
1.6 HTML语言
1.6.1文件结构标签 1.6.2表格标签 1.6.3文本段落标签 1.6.4图像标签 1.6.5链接标签 1.6.6框架标签 1.6.7表单 1.6.8块标签
25
2020/3/3
互联网就是借助通信线路将计算机和各种相 关设备相连接，并按照统一的标准在各种设 备之间进行数据传输和交换，实现互联互通， 以达到计算机之间资源共享和信息交换的目 的。
3
2020/3/3
1.1互联网基础
互联网提供的主要服务包括万维网（World Wide Web，WWW，3W，Web），电子邮件（E-mail）， 文件传输（FTP）和远程登录（Telnet）等。
10
2020/3/3
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识
网站logo，将网站logo置于页面比较醒目的位置，如左 上角。
2. 网站banner
网站banner一般位于页面的顶部，即可以表达和突出网 站创意和形象，也可以传达某种特定信息。
网络banner通常是由GIF动画、JPEG图像或Flash动画完 成的。
1.5.3后期工作
1．网站测试 网站测试包括网站运行的每个页面和程序。兼容性测试，
超链接测试是必选的测试内容。
2．网站发布 网站发布包括申请域名，申请服务器空间和上传网站内
容。
22
2020/3/3
1.5 网站制作流程
3．网站推广 注册搜索引擎是最直接和有效的方法。 通过在同行或相关行业网站中，建立网站的相互链
Dreamweaver，Photoshop和Flash是由Adobe公司开发 的3款软件，具有良好的集成性。Photoshop和Flash的 输出结果可以直接导入Dreamweaver网页中。
第5章网页设计基础PPT课件
13
方法一：使用“插入” 菜单插入表单
14
方法二：使用“插入”工具栏的 “表单”选项插入表单
插入表单效果
15
3）设置表单属性 在文档中插入了表单对象后，单击表单红色虚
线框，或单击HTML状态栏中的<form>标记， 系统就会弹出该表单对象的属性面板。
表单对象的属性面板
16
表单属性面板的属性说明： （1）、【表单名称】：此项为表单定义名称， 输入一个能在脚本程序（ASP、Javascript）中 引用的表单名称，一般为英文名称，系统默认给 名为form1。 （2）、【动作】：在此输入一个在服务器端处 理表单信息的应用程序的URL。路径可以表示为：
18
（4）、【MIME类型】：指定对提交给服务器进 行处理的数据使用 MIME 编码类型。默认设置 application/x- 通常与 POST 方法协同使用。 如果要创建文件上传域，请指定 multipart/form-data MIME 类型。
19
（5）、【目标】：指定一个窗口，在该窗口中 显示调用程序所返回的数据。如果命名的窗口尚 未打开，则打开一个具有该名称的新窗口。目标 值有： ◇ _blank，在未命名的新窗口中打开目标文档。 ◇ _parent，在显示当前文档的窗口的父窗口中 打开目标文档。 ◇ _self，在提交表单所使用的窗口中打开目标 文档。 ◇ _top，在当前窗口的窗体内打开目标文档。
8
二、表单工作原理
9
表单有两个重要组成部分： 1）、表单页面。 2）、用于处理浏览者在表单域中输入的信息的 服务器端的应用程序或脚本程序，如CGI、ASP 等。
10
浏览者在网页上看到有关表单的页面，只是供 浏览者输入信息的表单页面。当浏览者按要求在 表单中填写有关信息，单击表单的“提交”按钮 之后，表单的内容就会上传到服务器，并且由事 先编写好的CGI或ASP程序来处理这些信息，最 后服务器再将处理的结果发送给浏览者的浏览器。
方法一：使用“插入” 菜单插入表单
14
方法二：使用“插入”工具栏的 “表单”选项插入表单
插入表单效果
15
3）设置表单属性 在文档中插入了表单对象后，单击表单红色虚
线框，或单击HTML状态栏中的<form>标记， 系统就会弹出该表单对象的属性面板。
表单对象的属性面板
16
表单属性面板的属性说明： （1）、【表单名称】：此项为表单定义名称， 输入一个能在脚本程序（ASP、Javascript）中 引用的表单名称，一般为英文名称，系统默认给 名为form1。 （2）、【动作】：在此输入一个在服务器端处 理表单信息的应用程序的URL。路径可以表示为：
18
（4）、【MIME类型】：指定对提交给服务器进 行处理的数据使用 MIME 编码类型。默认设置 application/x- 通常与 POST 方法协同使用。 如果要创建文件上传域，请指定 multipart/form-data MIME 类型。
19
（5）、【目标】：指定一个窗口，在该窗口中 显示调用程序所返回的数据。如果命名的窗口尚 未打开，则打开一个具有该名称的新窗口。目标 值有： ◇ _blank，在未命名的新窗口中打开目标文档。 ◇ _parent，在显示当前文档的窗口的父窗口中 打开目标文档。 ◇ _self，在提交表单所使用的窗口中打开目标 文档。 ◇ _top，在当前窗口的窗体内打开目标文档。
8
二、表单工作原理
9
表单有两个重要组成部分： 1）、表单页面。 2）、用于处理浏览者在表单域中输入的信息的 服务器端的应用程序或脚本程序，如CGI、ASP 等。
10
浏览者在网页上看到有关表单的页面，只是供 浏览者输入信息的表单页面。当浏览者按要求在 表单中填写有关信息，单击表单的“提交”按钮 之后，表单的内容就会上传到服务器，并且由事 先编写好的CGI或ASP程序来处理这些信息，最 后服务器再将处理的结果发送给浏览者的浏览器。
网页制作课件ppt
提高网站流量，吸引更多 潜在客户，提高品牌知名 度和销售额。
SEO基本原则
关键词研究、内容质量、 网站结构、外部链接和内 部链接等。
网站优化技巧
页面加载速度
优化图片、压缩代码、使 用CDN等方式提高页面加 载速度。
移动端优化
确保网站在移动设备上显 示良好，提高用户体验。
响应式设计
使网站能够适应不同设备 和屏幕尺寸，提供一致的 用户体验。
网站推广策略
关键词广告 社交媒体营销
内容营销 合作与交换链接
利用搜索引擎关键词广告推广网站。
通过社交媒体平台发布有价值的内容，吸引目标受众。 创建高质量、有价值的文章、视频等，吸引潜在客户并提高品
牌知名度。 与其他网站合作，互相推广，增加网站流量。
06 网页制作实例教 程
制作个人网站
总结词
展示个人风格和兴趣
字体选择
选择清晰易读的字体，确保文字内容 在各种设备和屏幕分辨率上都能清晰 显示。
03 网页布局与设计
网页布局的基本原则
保持简洁
避免页面过于拥挤，突出核心内容，使用户 能够快速找到所需信息。
导航清晰
提供易于理解的导航菜单，使用户能够方便 地浏览不同页面。
层次分明
合理划分页面区域，使内容按照重要程度进 行排序，提高用户体验。
制作电商网站
总结词
商品展示与销售
详细描述
电商网站是商品展示和销售的重要平台，需要展示丰 富的商品信息和购物体验。在制作电商网站时，需要 考虑如何设计出美观、实用的商品展示页面，以及如 何提供便捷的购物流程和支付方式。
制作电商网站
总结词
用户友好性
详细描述
电商网站应该具有用户友好性，提供良好的 用户体验和购物体验。在制作电商网站时， 需要考虑如何设计出易于操作和使用的界面 和功能，以及如何提供个性化的服务和支持
SEO基本原则
关键词研究、内容质量、 网站结构、外部链接和内 部链接等。
网站优化技巧
页面加载速度
优化图片、压缩代码、使 用CDN等方式提高页面加 载速度。
移动端优化
确保网站在移动设备上显 示良好，提高用户体验。
响应式设计
使网站能够适应不同设备 和屏幕尺寸，提供一致的 用户体验。
网站推广策略
关键词广告 社交媒体营销
内容营销 合作与交换链接
利用搜索引擎关键词广告推广网站。
通过社交媒体平台发布有价值的内容，吸引目标受众。 创建高质量、有价值的文章、视频等，吸引潜在客户并提高品
牌知名度。 与其他网站合作，互相推广，增加网站流量。
06 网页制作实例教 程
制作个人网站
总结词
展示个人风格和兴趣
字体选择
选择清晰易读的字体，确保文字内容 在各种设备和屏幕分辨率上都能清晰 显示。
03 网页布局与设计
网页布局的基本原则
保持简洁
避免页面过于拥挤，突出核心内容，使用户 能够快速找到所需信息。
导航清晰
提供易于理解的导航菜单，使用户能够方便 地浏览不同页面。
层次分明
合理划分页面区域，使内容按照重要程度进 行排序，提高用户体验。
制作电商网站
总结词
商品展示与销售
详细描述
电商网站是商品展示和销售的重要平台，需要展示丰 富的商品信息和购物体验。在制作电商网站时，需要 考虑如何设计出美观、实用的商品展示页面，以及如 何提供便捷的购物流程和支付方式。
制作电商网站
总结词
用户友好性
详细描述
电商网站应该具有用户友好性，提供良好的 用户体验和购物体验。在制作电商网站时， 需要考虑如何设计出易于操作和使用的界面 和功能，以及如何提供个性化的服务和支持
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（3）为该网页设置可编辑区域。 （4）选择“文件”→“另存为模板”命令，弹出“另 存模板”对话框，如图6.1.3所示。 设置可编辑区域是为网页分配可以更改的区域，其设 置方法将在以后的学习中进行讲解。 （5）在该对话框中进行参数设置，并为该模板命名。 （6）单击“保存”按钮即可。
二、创建嵌套模板 在网页设计中为了更加精确地布置页面，往往会使用嵌 套模板，嵌套模板是通过另存为一个基本模板来实现的。 （1）选择“窗口”→“资源”命令，在打开的资源面 板中单击“模板”按钮 ，将该面板的类别切换展”按钮 ，在弹出的下拉菜单中选择“从 模板新建”命令，得到一个从该模板创建的网页。
（6）在该区域插入可编辑区域等其他的内容。 （7）选择“文件”→“保存”命令，将设置的内容保 存。 注意：模板文件的后缀名是.dwt的文件。
第二节 设置模板
对于创建好的模板，还需要对其进行设置，该操作包括 在模板中设置可编辑区域、可编辑标签属性和重复区域等。
一、设置可编辑区域 模板由可编辑区域和不可编辑区域两部分组成，直接创 建的模板所建立的网页是不可以进行编辑的，要利用模板创 建网页必须在模板中设置可编辑区域。设置可编辑区域包括 创建可编辑区域和删除可编辑区域两部分内容。
（4）该面板顶部的单选按钮用于选择该面板左侧的不 同类型的文件是出现在站点中，还是在“我的收藏”文件 夹中。
一、模板的创建 模板的创建可通过直接创建或将网页另存为模板两种方 法来实现。 1．直接创建模板 （1）选择“窗口”→“资源”命令，打开资源面板。
（2）单击资源面板中的“模板”按钮 ，将该面板的 类别切换到模板类型，如图6.1.2所示。
图6.1.2 资源面板
（3）单击该面板上的“扩展”按钮 ，在弹出的下拉 菜单中选择“新建模板”命令，则新建一个模板文件，其名 称为可编辑状态。
（4）在该面板中为该模板文件命名。 （5）单击该面板底部的“编辑”按钮 ，可打开该模 板。 2．将网页另存为模板 （1）打开需要将其设置为模板的网页。
（2）删除网页中需要更改内容的区域，保留固定不变 的区域。
图6.2.1 “新建可编辑区域”对话框
（2）将页面中已有的一部分内容转换为可编辑区域的 方法如下：
1）在页面中选择要设置为可编辑区域的内容。 2）选择“插入”→“模板对象”→“可编辑区域”命 令，在弹出的“新建可编辑区域”对话框中为插入的区域命 名，单击“确定”按钮即可。
注意：定义了可编辑区域的对象后，在该对象插入可编 辑区域的位置将出现一个蓝色的标签，标签上显示的文字是 该区域的名称，单击标签可选中该区域。
2．删除可编辑区域 删除可编辑区域的方法如下： （1）将鼠标光标置于需要删除的可编辑区域内。 （2）选择“修改”→“模板”→“删除模板标记”命 令，则光标所在的可编辑区域将被删除。
二、设置可编辑标签属性 设置可编辑标签属性是指将网页一些标签的属性设置为 可编辑状态，从而在使用模板的时候，可对这些属性进行修 改，如将网页背景图像设置为可编辑状态，这样由模板创建 的网页，其背景图像也可以替换。设置可编辑标签属性包括 创建可编辑标签属性和使可编辑标签属性不可编辑两部分 内容。
第六章 使用模板和库项目
第一节 创建模板 第二节 设置模板 第三节 应用模板 第四节 使用库项目 第五节 上机练习 本章小结 习题六
第一节 创建模板
一个网站中的页面往往具有相同的结构和统一风格，为 了提高工作效率，在Dreamweaver中提供了模板和库。模 板由可编辑区域和不可编辑区域两部分组成：不可编辑区域 的内容通常不可以改变，它一般是网页标题、导航条和框架 结构等；可编辑区域的内容是可以更改的，它一般是网页中 经常需要更新的部分，如每日新闻、最新列表等。
对模板的操作基本都可以在资源面板中完成，选择“窗 口”→“资源”命令，打开资源面板，如图6.1.1所示。
图6.1.1 资源面板
该面板包括4个部分，现分别介绍如下： （1）该面板的上半部分是模板预览窗口，用来显示选 定模板的内容。 （2）该面板的下半部分是模板列表框，用来显示该站 点内模板文件的名称、大小等相关信息。 （3）该面板左侧是类别列表，有图像、颜色、超链接、 Flash、Shockwave、影片、脚本、模板和库9种类别，单击 对应的按钮可切换其类别。
（5）选中“令属性可编辑”复选框，则其下的各个选 项为可编辑状态。
（6）在“标签”文本框中为该属性命名，命名的规则 与框架命名规则相同。
（7）在“类型”下拉列表中选择编辑该属性的值的类 型，它有以下5种类型：
（3）选择“插入”→“模板对象”→“创建嵌套模板” 命令，弹出“另存模板”对话框，如图6.1.4所示。
图6.1.3 “另存模板”对话框
图6.1.4 “另存模板”对话框
（4）在该对话框中的“另存为：”文本框中输入嵌套 模板的名称，单击“保存”按钮可将新建的网页自动转换为 模板。
（5）将鼠标光标置于该模板中需要插入嵌套模板的可 编辑区域内。
1．创建可编辑区域 在网页中创建可编辑区域可分为两种情况：一种是在页 面中插入一个空的可编辑区域；另一种是将页面中已有的部 分内容转换为可编辑区域。 （1）插入空的可编辑区域的方法如下： 1）将鼠标光标置于页面中需要插入可编辑区域的位置。
2）选择“插入”→“模板对象”→“可编辑区域”命 令，在弹出的“新建可编辑区域”对话框中为插入的区域命 名，单击“确定”按钮即可，如图6.2.1所示。
1．创建可编辑标签的属性 创建可编辑标签属性的方法如下： （1）打开需要设置标签的模板。 （2）在文档编辑窗口的状态栏中单击需要创建可编辑 属性的标签。 （3）选择“修改”→“模板”→“令属性可编辑”命 令，弹出“可编辑标签属性”对话框，如图6.2.2所示。
图6.2.2 “可编辑标签属性”对话框
（4）在该对话框中的“属性：”下拉列表中选择要编 辑的属性，如果要编辑的属性不在该下拉列表中，可单击 其后的“添加”按钮将其添加进入。
二、创建嵌套模板 在网页设计中为了更加精确地布置页面，往往会使用嵌 套模板，嵌套模板是通过另存为一个基本模板来实现的。 （1）选择“窗口”→“资源”命令，在打开的资源面 板中单击“模板”按钮 ，将该面板的类别切换展”按钮 ，在弹出的下拉菜单中选择“从 模板新建”命令，得到一个从该模板创建的网页。
（6）在该区域插入可编辑区域等其他的内容。 （7）选择“文件”→“保存”命令，将设置的内容保 存。 注意：模板文件的后缀名是.dwt的文件。
第二节 设置模板
对于创建好的模板，还需要对其进行设置，该操作包括 在模板中设置可编辑区域、可编辑标签属性和重复区域等。
一、设置可编辑区域 模板由可编辑区域和不可编辑区域两部分组成，直接创 建的模板所建立的网页是不可以进行编辑的，要利用模板创 建网页必须在模板中设置可编辑区域。设置可编辑区域包括 创建可编辑区域和删除可编辑区域两部分内容。
（4）该面板顶部的单选按钮用于选择该面板左侧的不 同类型的文件是出现在站点中，还是在“我的收藏”文件 夹中。
一、模板的创建 模板的创建可通过直接创建或将网页另存为模板两种方 法来实现。 1．直接创建模板 （1）选择“窗口”→“资源”命令，打开资源面板。
（2）单击资源面板中的“模板”按钮 ，将该面板的 类别切换到模板类型，如图6.1.2所示。
图6.1.2 资源面板
（3）单击该面板上的“扩展”按钮 ，在弹出的下拉 菜单中选择“新建模板”命令，则新建一个模板文件，其名 称为可编辑状态。
（4）在该面板中为该模板文件命名。 （5）单击该面板底部的“编辑”按钮 ，可打开该模 板。 2．将网页另存为模板 （1）打开需要将其设置为模板的网页。
（2）删除网页中需要更改内容的区域，保留固定不变 的区域。
图6.2.1 “新建可编辑区域”对话框
（2）将页面中已有的一部分内容转换为可编辑区域的 方法如下：
1）在页面中选择要设置为可编辑区域的内容。 2）选择“插入”→“模板对象”→“可编辑区域”命 令，在弹出的“新建可编辑区域”对话框中为插入的区域命 名，单击“确定”按钮即可。
注意：定义了可编辑区域的对象后，在该对象插入可编 辑区域的位置将出现一个蓝色的标签，标签上显示的文字是 该区域的名称，单击标签可选中该区域。
2．删除可编辑区域 删除可编辑区域的方法如下： （1）将鼠标光标置于需要删除的可编辑区域内。 （2）选择“修改”→“模板”→“删除模板标记”命 令，则光标所在的可编辑区域将被删除。
二、设置可编辑标签属性 设置可编辑标签属性是指将网页一些标签的属性设置为 可编辑状态，从而在使用模板的时候，可对这些属性进行修 改，如将网页背景图像设置为可编辑状态，这样由模板创建 的网页，其背景图像也可以替换。设置可编辑标签属性包括 创建可编辑标签属性和使可编辑标签属性不可编辑两部分 内容。
第六章 使用模板和库项目
第一节 创建模板 第二节 设置模板 第三节 应用模板 第四节 使用库项目 第五节 上机练习 本章小结 习题六
第一节 创建模板
一个网站中的页面往往具有相同的结构和统一风格，为 了提高工作效率，在Dreamweaver中提供了模板和库。模 板由可编辑区域和不可编辑区域两部分组成：不可编辑区域 的内容通常不可以改变，它一般是网页标题、导航条和框架 结构等；可编辑区域的内容是可以更改的，它一般是网页中 经常需要更新的部分，如每日新闻、最新列表等。
对模板的操作基本都可以在资源面板中完成，选择“窗 口”→“资源”命令，打开资源面板，如图6.1.1所示。
图6.1.1 资源面板
该面板包括4个部分，现分别介绍如下： （1）该面板的上半部分是模板预览窗口，用来显示选 定模板的内容。 （2）该面板的下半部分是模板列表框，用来显示该站 点内模板文件的名称、大小等相关信息。 （3）该面板左侧是类别列表，有图像、颜色、超链接、 Flash、Shockwave、影片、脚本、模板和库9种类别，单击 对应的按钮可切换其类别。
（5）选中“令属性可编辑”复选框，则其下的各个选 项为可编辑状态。
（6）在“标签”文本框中为该属性命名，命名的规则 与框架命名规则相同。
（7）在“类型”下拉列表中选择编辑该属性的值的类 型，它有以下5种类型：
（3）选择“插入”→“模板对象”→“创建嵌套模板” 命令，弹出“另存模板”对话框，如图6.1.4所示。
图6.1.3 “另存模板”对话框
图6.1.4 “另存模板”对话框
（4）在该对话框中的“另存为：”文本框中输入嵌套 模板的名称，单击“保存”按钮可将新建的网页自动转换为 模板。
（5）将鼠标光标置于该模板中需要插入嵌套模板的可 编辑区域内。
1．创建可编辑区域 在网页中创建可编辑区域可分为两种情况：一种是在页 面中插入一个空的可编辑区域；另一种是将页面中已有的部 分内容转换为可编辑区域。 （1）插入空的可编辑区域的方法如下： 1）将鼠标光标置于页面中需要插入可编辑区域的位置。
2）选择“插入”→“模板对象”→“可编辑区域”命 令，在弹出的“新建可编辑区域”对话框中为插入的区域命 名，单击“确定”按钮即可，如图6.2.1所示。
1．创建可编辑标签的属性 创建可编辑标签属性的方法如下： （1）打开需要设置标签的模板。 （2）在文档编辑窗口的状态栏中单击需要创建可编辑 属性的标签。 （3）选择“修改”→“模板”→“令属性可编辑”命 令，弹出“可编辑标签属性”对话框，如图6.2.2所示。
图6.2.2 “可编辑标签属性”对话框
（4）在该对话框中的“属性：”下拉列表中选择要编 辑的属性，如果要编辑的属性不在该下拉列表中，可单击 其后的“添加”按钮将其添加进入。