14单元0705第7章网页的布局
《网页布局设计》PPT课件
.
12
7.2.1 用框架布局页面
• 1．建立框架 • 2．编辑各框架内的文件 • 3．制作其他需要调用至各框架的文件 • 4．框架页面之间链接 • 运行效果
.
13
7.2.2创建框架和框架集
• 1．使用预定义的框架集 • 2．自己设计框架集 • 3．拆分或删除框架 • 4．创建嵌套框架
.
14
7.2.3设置框架及框架集属性
• 1．绘制“布局表格” • 2．绘制“布局单元格” • 3．绘制嵌套布局表格
.
8
7.1.4 在“布局单元格”添加内 容
• 在“布局”模式中可以将文本、图像和其 他内容添加到布局单元格中，就像在“标 准”模式中将内容添加到表格单元格一样。 单击要添加内容的单元格，然后键入文本 或插入其他内容。
.
9
网页布局设计
好的网页布局创意后，还必须掌握网页 布局的一些方法和技巧。只有这样才能
让设计者的绝妙构思得到很好的表现
.
1
7.1用表格布局页面
• 在“布局”模式中，可以使用表格作为基 础结构来设计您的网页，同时也避免了使 用传统的方法创建基于表格的设计时经常 出现的一些问题。
10单元0702第7章网页的布局-20页文档资料
（五）知识讲解与操作示范（7）
绘制布局单元格的操作过程如下： 单击“布局”插入工具栏中的【绘制布局单元格】按 钮
或者单击菜单【插入】→【布局对象】→【布局单元 格】。 在编辑窗口中光标变成“+”形状时，在要绘制单元格 的位置，按住鼠标左键并拖动。 拖动到合适的位置释放鼠标，在布局表格中就会出现 一个布局单元格。
（五）知识讲解与操作示范（9）
5.调整布局表格和布局单元格的尺寸 （1）调整布局表格的尺寸 选中布局表格。 光标移动到右下顶点，光标变成斜双箭头形状
时，按住鼠标左键且拖动，可以改变布局表格的 宽度和高度。 光标移动到右边中点，光标变成水平方向的双箭 头形状 时，按住鼠标左键且拖动，可以改变布局表格 的宽度。
（五）知识讲解与操作示范（10）
（2）调整布局单元格的尺寸 选中布局单元格。 将光标移动到控制点，根据箭头方向拖动鼠标可 以调整布局单元格的大小。 6.移动布局单元格
移动布局单元格的方法是：将鼠标指针移动到 布局单元格边框线上，鼠标指针变成 形状时，按住鼠标左键且拖动鼠标，移到合适的位置 时释放鼠标键，即可完成移动操作。
（五）知识讲解与操作示范（8）
4．选择布局表格和布局单元格 （1）选择布局表格
用鼠标单击布局表格的标签或者布局表格内部的灰色 区域，该布局表格的右边线中点和右下顶点会出现小正方 形的控制点。
（2）选择布局单元格 用鼠标单击布局单元格外边框，该布局单元格四个顶
点和四条边的中点会出现8个小正方形的控制点。也可以按 住“Ctrl”键后，在单元格的任意位置单击鼠标左键，选 中布局单元格。
（六）课堂模仿实践
2．效果展示 课堂实践的网页05.html在浏览器中浏览效果如图所示。
14界面设计-页面布局设计的基本理论及Web界面常见的版式设计类型(1)
栅格外边距，与屏宽保持一定的安全距离。
页面布局设计的基本理论
盒子/区域
建立好基础栅格之后，一块内容通常会占用几个栏和列的宽度， 我们把这个区域理解为内容盒子，用于承载一个区域的内容。
页面布局设计的基本理论
如何搭建栅格系统
1、确定屏幕尺寸，确定安全范围 2、确定关键数据：列的数量、水槽的宽度
左右分割型
整个版面分割为左右两部分, 分别配置文字和图片。
其他版式设计类型
中轴型
垂直排列的版面,给人强烈 的动感。
曲线型
图片和文字,排列成曲线
其他版式设计类型
倾斜型
版面主体形象或多幅图像作 倾斜编排
对称型
对称一般以左右对称居多
其他版式设计类型
焦点型
版面产生视觉焦点,使其更 加突出。
自由型
无规律的、随意的编排构成
海报型布局 标题文本型布局 综合型布局
Web界面常见的版式设计类型
常见的web界面版式设计类型
国字型布局 匡字型布局 三字型布局 川字型布局
海报型布局 标题文本型布局 综合型布局
Web界面常见的版式设计类型
常见的web界面版式设计类型
国字型布局 匡字型布局 三字型布局 川字型布局
海报型布局 标题文本型布局 综合型布局
界面设计
页面布局设计的基本理论
及Web界面常见的版式设计类型
天津电子信息职业技术学院
知识要点 页面布局设计的基本理论 Web界面常见的版式设计类型 其他版式设计类型
第一部分
页面布局设计的基本理论
重点掌握
页面布局设计的基本理论
格式塔原理
格式塔心理学诞生于1912年，是 由德国心理学家组成的研究小组试 图解释人类视觉的工作原理。 其中最基础的发现是人类视觉是整 体的； “形状”和“图形”在德 语中是Gestalt，因此这些理论也 称做视觉感知的格式塔原理。
第七章 网页布局
第七章网页布局一、使用模板，完成如下页面：（100分）
分析：我们来看此页面的页头和页脚部分，是不是每个网页都包含它呢，那么我们难道要在每个页面中去制作它吗。
当然不是，我们可以制作一个模板，把相同的部分即页头和页脚包含进去，另外留出可以编辑的位置，让应用的页面填充类容。
解题过程：（要求建立站点）
1、制作模板，要求使用div+table布局(也可以使用纯div布局)，即建立4个div,
分别是divMain(整个页面的，包含其他3个div), divHead( 页头), divContent(可
编辑区域),divFooter（页脚）
2、应用模板完成其余部分，注意css的使用。
评分标准：
1、完成模板40分，若采用纯div布局加10分。
2、类容页面50分，小组长根据显示效果酌情打分。
（注意下面的宝贝分
类，要使用CSS）
每天学习，每天总结，每天不断提高！
加倍努力，必有加倍的回报！。
网页的规划与布局ppt课件
.
20
5.重要信息放置在首页：
眼睛是心灵的窗户。我们把报纸的最显 眼的地方称报眼----报纸的眼睛。网页也是 一样有最显眼的地方-----此处也是应该较 为重要的或是最新的内容的放在主要的地方。
可以通过导航栏或将重点信息、论点等置于
页面的醒目位置，还可以通过弹出窗口来发
布重要要信息。
.
21
2.3 内容整体布局的 较起图小使长，片之页的要的间面文注安要错章意排有落或安也一有标排是定致题 一 ， 的 ，，定要间避需的整各体不的互隔免要组体元要距相，重进织版素编离错这心行排面成排。开样偏分列的为当必一上到在对，可离组，关丰许须般的主一待大以形归反系富多考放部次页乱太让纳复，多构虑在位有面，大人，推创彩成浏屏。别有各，抓进敲造而元览幕这很部这不行标秩简素者的样多分样住内题序洁位的中可内内消核在图使统于视央以容容弱心联形版一一觉，突的各了内系与面整个中或出时自整容页心在重候为体。面，中点很政的时中间，忌、可，心偏做讳跨读混度性，
2
3
2。 内容有特色， 有自己的独到见解， 尽量避免平淡乏味；
3。 所提供的内容、 超链接等要保证正 确无误，设计完成 之后一定要认真测 试。
.
25
3网页设计流程
.
26
确定目标和风格 内容组织 网页制作
测试
发布、推广
反馈、评测
.
27
1网页目标和风格
网站包含着众多内容各异，错综复杂的 网页，这些网页的内容组织，材料收集和处 理工作通常可以从两个方面入手。一是根据 所需发布的信息确定主题，每个主题由专人 负责收集相关资料和内容。二是组织、精选 一些能突出本网页特色的内容，烘托和突出 主题，使本页面与网站其他网页有明显的不 同。
网页设计与制作14 网页的布局设计
的布局，id或者class是层的一个必要属性，若该层仅仅是一个普通层，
则不需要设置属性。
若未定义该层的样式信息，可点击“新建CSS规则”按钮来增加样式表，
并与该层绑定。
第十四单元 网页的布局设计
14.1.3 实现div+css网页布局
div+css布局的最大难点并不是层，而是CSS的规则的掌握，通过浮动、
第十四单元 网页的布局设计
10、点击网页的id为”header”的图层后，点击在CSS设计器选择器上
的“加号”，自动会创建“#header”规则，如图14-11所示。
完成属性的设置如下： #header{ height:68px; border:1px solid #CCCCCC; }
第十四单元 网页的布局设计
fieldset, input, button, select, textarea
第十四单元 网页的布局设计
设置属性值如下：
{
margin:0;/*边界为0*/ padding:0; /*填充为0*/ font-weight: normal;/*设置粗度默认标准*/ font-style: normal;/*字体样式默认*/
显示或隐藏以及显示顺序等参数进行控制。而且它还能使网页内容重叠，
第十四单元 网页的布局设计
14.1.2 插入图层
在Dreamweaver中，可通过菜单插入图层，也可以通过插入工具中的常
用子面板来插入层(div)。 插入方法：
1 、把光标置于文档窗口中想要插入图层的位置，然后选择【插入】|
【层】菜单命令，
第十四单元 网页的布局设计
2、用鼠标直接将“插入”面板的“常用”子面板的“div”图标按钮 拖
网页制作教程第14章
通过CSS样式和JavaScript特效等手段，美化页面元素，提升用户 体验，如添加鼠标悬停效果、轮播图动画等。
后端数据交互功能实现
设计数据库结构
根据项目需求，设计合理的数据库结构，存储企业信息、 产品信息、新闻动态等数据。
01
开发后端接口
使用PHP、Java等后端语言，开发数据 交互接口，实现前端页面与数据库之间 的数据传递和处理。
响应式布局
根据不同设备屏幕尺寸和 分辨率，自动调整页面布 局和元素大小。
混合布局
结合固定布局、流体布局 和响应式布局的特点，灵 活应对不同场景需求。
设计元素与风格选择
文字设计
选择合适的字体、字号、 字重和颜色，确保文字易 读性和美观性。
图片设计
选用高质量图片，注意图 片大小、格式和分辨率， 优化图片加载速度和显示 效果。
断点设置
在关键的设备尺寸处设置断点，使 得网页在不同尺寸的设备上都能保 持较好的布局和视觉效果。
移动端优化技巧
01
02
03
触摸事件处理
针对移动端设备，使用触 摸事件（如touchstart、 touchmove、touchend） 来处理用户的交互行为。
移动端适配
使用viewport元标签和 CSS3的媒体查询等技术， 确保网页在移动端设备上 的正确显示和布局。
02
03
实现用户权限管理
为企业官网添加用户权限管理功能， 确保不同用户只能访问其权限范围内 的数据和功能。
测试、上线及后期维护
进行功能测试
在项目开发完成后，进行全面的功能测试，确 保各项功能正常运行，符合项目需求。
上线部署
将项目部署到服务器上，配置好域名和服务器 环境，确保官网能够正常访问。
网页设计中的页面布局
浅析网页设计中的页面布局摘要:网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计但它们有许多相近之处，应充分加以利用和借鉴。
版式设计通过文字图形的空间组合，表达出和谐与美。
一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。
多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。
为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。
“评价一种Web开发技术优劣的标准只有一个，那就是看这种技术能否在最恰当的时间和最恰当的地点，以最恰当的方式，为最需要信息的人提供最恰当的信息服务。
”（摘自2004年4月《程序员》的《Web开发技术史话》）王咏刚先生他说这段话的本意是就当时许多搞技术的人似乎已经忘记了Web架构的设计初衷，在自己开发的网站或Web应用中大肆堆砌各种所谓的先进技术，但最终用户能够在这些网站或应用中获得的有价值信息却寥寥无几。
在讨论Web标准布局之前，再来反思王先生的这段话，感觉CSS的发展正应了先生的观点，纵览今日中国的Web技术发展，虽然还存在不同的声音，但普及和使用Web标准及CSS技术已是一个不争的事实。
关键词: 网页设计布局搭配、DIV、CSSAbstract:Web Design as a visual language, it is necessary to emphasize presentation and layout, although the Home Design does not mean graphic design but they have many similarities, should be fully utilized and use for reference. Graphic design layout of the space through the combination of text, to show harmony with the United States. An outstanding web designers should also know which section of the text with graphics where can we make the whole page Shenghui. Multi-page site page layout design requirements of the organic link between the pages reflected, in particular between pages and pages necessary to properly handle the order and content of the relationship. In order to achieve the best performance of the visual effects, should emphasize the overall layout of the reasonable, so that visitors have a smooth visual experience. "An evaluation of themerits of Web development technology there is only one standard, it is to see whether this technology in the most appropriate time and the most appropriate locations to the most appropriate way for people most in need of information to provide the most appropriate information Service. "(From April 2004," the programmer, "the" Web Development Technology Industry ") Mr. Wang Yonggang He said that this passage was intended to engage in technology at that time many people seem to have forgotten the Web framework is designed to, In its development of the site or Web application wantonly spelled all kinds of so-called advanced technology, but in the end users to those sites or application of the valuable information they receive very few. During the discussion before the layout of Web standards, and then reflect on these words of Mr. Wang, are feeling the development of CSS should be the President's point of view, today's China overview of Web technology development, although there are different voices, but the popularity and use of Web standards and CSS Technology is an indisputable fact.Key words:Web design layout with, DIV, CSS引言：网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。
网页的布局说课稿
《网页的布局》具体内容尊敬的各位老师，早上好：我说课的题目是《网页的布局》，《网页的布局》是浙江教育出版社信息技术教材必修第六章第二节的内容。
网页的布局是本章的重要内容，通过本节课的学习，可以为后面学习网页的制作打下基础。
教学对象是高一学生，他们已经具有一定的逻辑思维能力，能够自助独立完成一定要求的学习任务，喜欢具有挑战性的任务。
通过前阶段的学习，学生已经学习了文字编辑、图片处理、网络的基本知识、文件操作等内容，很多知识都可以迁移到本节课来。
但是学生对于根据任务需要对问题进行分析，整体规划还是比较欠缺的。
在我的教学过程中我会培养学生这个方面的能力。
根据课程标准和教材内容，我将本节课的教学目标设计成了三个方面：1.知识与技能：①了解常见的网页版式；②知道表格在网页中的作用；③会用表格规划布局网页。
2.过程与方法：通过欣赏，解剖典型的网页版式，知道表格是布局网页的主要手段；通过设计制作一个网页，掌握用表格布局网页的方法。
3.情感态度与价值观：通过对表格的属性的修改，完善、美化网页的布局，培养学生的信息素养和审美观。
为了实现教学目标，我将教学重点确定为网页版式的设计和表格的建立。
（依据：设计网页版式和建立表格是实现网页布局的关键）。
根据学生的思维障碍和学情情况的分析，我将难点定位于正确设置表格的属性。
只有正确的设置了表格的属性，才能美化和完善网页的布局。
为了更好的突出教学重点，突破教学难点，圆满的完成教学任务，我在课前准备了教学需要的操作视频，并准备了学生学习所需的学习素材。
为了让学生主动的参与学习，我在设计教学流程时准备以学生“任务驱动”为主线，以教师为主导，以学生为主体，通过学生自主探究，合作交流完成教学任务。
根据教学内容以及学情的分析，本节课我采用的教学方法有：讲授示范法，任务驱动法，个别指导法，提问法，情境创设法；相对应的学习方法是：讨论法，自主探究法，协作学习法。
关于教学方法和学习方法，我将结合教学过程来具体分析。
网页制作第7单元 页面布局
第7单元页面布局课程目标：●掌握使用表格设计网页布局●掌握使用图层设计网页布局●掌握使用框架及内框架●掌握使用Photoshop切片工具设计网页布局建议学时：理论4学时，实践6学时。
网页设计，既是一门技术，也是一门艺术。
这是因为网页在向浏览者传递信息时，既要考虑用户获取信息时的方便，也要考虑人们阅读时的感觉和心情。
网页包括文字、图形、动画等诸多元素，在网页版面布局方面必须综合考虑，以实现良好的视觉效果。
网页布局的设计方法主要有以下几种，一是使用传统的笔纸，画出布局草图，然后在Dreamweaver8中实现，二是直接使用软件设计布局，如Photoshop等，直接设计后输出为HTML文件。
但不管是哪一种，均是一种构思行为，对于要制作一个好的页面效果而言是非常重要的。
在Dreamweaver8中实现网页面面布局的设计技术有很多，本单元主要介绍常用的表格布局、布局面板、层、框架等。
7.1 运用表格进行布局表格是一个很好的布局工具，表格上可以有很多的单元格，网页页面的各元素放置在不同的单元格中，实现布局效果。
7.1.1 使用表格布局的一般规则使用表格进行布局，一般应注意以下规则：（1）不要把整个网页当成一个大表格，尽量使用分块。
一是因为一个大表格的内容要全部加载后才会显示，无疑会降低浏览速度和效率，二是在单元格的调整时不够方便，往往只想调整某个单元格，但其它行的单元格会一起产生联动效果。
因此，应尽量考虑分块处理。
最常见的是将表格分为三块，即上、中、下部分，上部分用于处理LOGO、BANNER、MENU等，中部分处理页面主要内容，下部分放置有关的声明、版权信息等。
（2）可以使用嵌套嵌套表格，即在一个单元格内插入另一个表格。
放置嵌套表格的单元格，通常设置其垂直对齐方式为“顶端对齐”。
嵌套表格作为相对独立的表格，控制十分方便，这也是使用表格布局的常用技术。
但一般不宜超过三层，否则会影响浏览速度。
（3）作为布局的表格，表格线边框宽度一般设为0。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（五）知识讲解与操作示范（14）
7.5.3
编辑和更新模板
5．设置可编辑标签属性 设置可编辑的标签属性步骤如下： （1）选择想要设置可编辑标签属性的表格2。 （2）在Dreamweaver 8主窗口中，单击菜单【修改】 →【模板】→【令属性可编辑】，弹出“可编辑标签属 性”对话框，如图7-86所示。
（五）知识讲解与操作示范（17） 7.5.4 创建基于模板的网页
（2）从左侧的列表框中选中“站点‘长沙世界之 窗’”，从中间的列表框中选择一个模板“08”，右侧 可以预览该模板。 （3）单击【创建】按钮，这样将基于这个模板创建一 个新的网页。 （4）保存新创建的基于模板的网页，浏览其效果。 2．编辑网页 （1）显示或隐藏可选区域 （2）设置可编辑标签属性的属性值 （3）在基于模板创建的网页中编辑可编辑区域的内容
（2）利用上一步所创建的网页081.html制作成模板文件
“08.dwt”。 （3）在模板文件中定义可编辑区域、可选区域、可编辑标签属
性。
（4）创建一个基于模板08.dwt的网页，该网页命名为 “08.html”。
（5）创建一个应用库的网页083.html。
（五）知识讲解与操作示范（1） 7.5.1 模板概述
（五）知识讲解与操作示范（3）
7.5.2
创建网页模板
2．插入表格，布局网页
（1）插入表格
网页081.html用4个表格来布局网页元素。 将光标置于文档窗口左上角，插入一个1行1列的表格1。 然后在1行1列表格下面，插入一个9行3列的表格2。 接着在9行3列表格下面，插入一个3行1列的表格3。 三个表格插入完成后如图7-72所示。 将表格2中的单元格“a”至单元格“i”合并为一个单元格， 将单元格“j”至单元格“s”合并为一个单元格。然后在右边的 合并单元格中插入一个6行3列的嵌套表格4。
7.5.5
库
下面介绍如何利用现有网页中已有的内容转换为库 文件。 1．创建库文件 （1）打开“长沙世界之窗”站点下的网页文档 081.html。 （2）选中该文档中的“版权内容”所在的表格3。 （3）在Dreamweaver 8主窗口中，单击菜单【修改】 →【库】→【增加对象到库】，将选中的表格3转化为库 文件，库文件内容随即出现在库面板上。
7.5.2
创建网页模板
（2）在“另存为模板”对话框中，“站点”下拉 列表框选择模板保存的站点，本项目选择“长沙世界 之窗”；“现存的模板”列表框中显示了当前站点中 的所有模板；“描述”用于输入对模板的说明文字； “另存为”文本框输入模板的名称，本项目输入 “08”。 （3）设置完毕后，在“另存为模板”对话框中， 单击【保存】按钮，会出现一个“要更新链接吗？” 提示信息对话框，在该对话框中单击【是】按钮。
（五）知识讲解与操作示范（19）
7.5.4
创建基于模板的网页
（4）在对话框中设置相应参数后，单击【开始】 按钮，Dreamweaver将对选定范围中由模板生成的网 页进行更新，“状态”列表中显示检查文件数、更新 文件数等信息。 （5）更新完成后，单击该对话框中的【关闭】按 钮，操作结束。
（五）知识讲解与操作示范（20）
表格3
表格4
3
6
1
3
780
100%
居中对齐
默认
#CCFFCC
（五）知识讲解与操作示范（5）
7.5.2
创建网页模板
表格2三列的宽度分别设置为：39px、181px、560px； 表格3三行的高度分别设置为：22px。将表格1、表格2、 表格3的“边框”设置为0，表格4的“边框”设置为 “1px”。 （3）在表格中输入文字、插入图像 在表格1中插入一幅图像，在表格2中插入四幅图像， 在表格3中分别输入三行文字，三行文字都设置为“居 中”。第一行中的文字用“|”分隔，且所有的文本的 “链接”都设置为“#”。 （4）保存该网页文档。设置完成后如图7-74所示。
（五）知识讲解与操作示范（）
7.5.5
库
（4）Dreamweaver 8会把库的项目文件保存在本地 站点根文件夹下的“Library”子文件夹中，如果本 地站点没有该文件夹，Dreamweaver 8会自动生成这 个子文件夹。然后给新建的库文件命名，名称为 “copyright.lbi”，库文件的扩展名为“.lbi”。
（五）知识讲解与操作示范（13）
7.5.3
编辑和更新模板
（4）单击【确定】按钮，即可定义一个可编辑的可选 区域。 设置完成后，页面中可编辑的可选区域有蓝色标签， 标签上是可选区域的名称“If OptionalRegion2”，由 于该区域的内容允许用户修改，也显示一个可编辑区域 的标签“EditRegion6”。 （5）切换到“高级”选项卡，选择现有参数或输入一 个表达式，确定该区域是否可见。
7.5.5
库
库文件的作用是将网页中经常用到的对象转化为库 文件，然后作为一个对象插入到其他的网页之中。按下 列要求创建库文件，且创建一个插入库文件的网页： （1）将网页081.html中的表格3转换为库文件。 （2）创建一个应用库的网页083.html，在该网页插 入前一步所创建库文件。
（五）知识讲解与操作示范（21）
《网页设计与制作》
教学课件
主讲人：湖南铁道职业技术学院 陈承欢
Hunan Railway Professional Technology College
教学单元14：使用表格布局网页
一、课程引导
二、明确知识技能目标 三、展示网页浏览效果
主 要 教 学 环 节
四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践
（五）知识讲解与操作示范（15） 7.5.3 编辑和更新模板
（3）在“可编辑标签属性”对话框的“属性”下拉列表框中选
中一项标签“BACKGROUND”。如果需要设置的标签没有出现在下 拉列表框，可以单击列表框右侧的【添加】按钮，弹出一个添加
属性标签的对话框，输入标签名称即可。
然后选中“令属性可编辑”复选框，“标签”文本框中显示该 属性的标签，在“类型下拉列表框中选择“URL”，即链接地址。
在Dreamweaver 8中，模板是一种特殊的文档，可 被理解成一种模型，用这个模型可以方便地制作出很 多的页面，然后在此基础上可以对每个页面进行改动， 加入个性化的内容。
（五）知识讲解与操作示范（2）
7.5.2
创建网页模板
创建一个网页模板文件“08.dwt”，其详细操作过 程如下： 1．新建网页 在“长沙世界之窗”站点下创建文件夹“08模 板和库”，在“08模板和库”文件夹中创建子文件夹 “image”，并将所需图像复制到该文件夹下。在同一 文件夹下创建一个命名为“081.html”的网页文档。保 存该网页文档。
7.5.3 编辑和更新模板
对模板08.dwt进行编辑的操作过程如下： 1．打开Templates文件夹中模板文件08.dwt。 2．定义可编辑区域 设置表格1中的图像为可编辑区域，操作步骤如下： （1）单击表格1中的图像，选中该图像。 （2）在Dreamweaver 8主窗口中，单击菜单【插入】→【模板 对象】→【可编辑区域】。 （3）在“新建可编辑区域”对话框中给该可编辑区域命名，例 如名称为“EditRegion1”，然后单击【确定】按钮。
“默认”文本框设置该属性的默认值。
设置完成后，单击【确定】按钮，将表格2的“背景图像”属 性设置成可编辑的属性标签。
（五）知识讲解与操作示范（16）
7.5.4 创建基于模板的网页
创建一个基于模板文件08.dwt的网页，该网页命名 为“08.html”。具体操作过程如下： 1．应用网页模板创建网页文档 （1）在Dreamweaver 8主窗口中，单击菜单【文件】 →【新建】，弹出“新建文档”对话框，在“新建文档” 对话框中单击“模板”标签，切换到“模板”选项卡， 如图7-88所示。
七、疑难解析
八、归纳总结 九、布置习题
（一）课程引导
在进行大量的页面制作时，很多页面会用到相同的 布 局、图片和文字等元素。为了避免重复劳动， 可以使用Dreamweaver 8提供的模板和库功能，将具有 相同版面 结构的页面制作成模板，将相同的页面元素 制作成库项目，并存储在库文件中以便随时调用。
（五）知识讲解与操作示范（4）
7.5.2
创建网页模板
（2）设置表格属性 按表7-1中的尺寸，利用表格“属性”面板设置四个表格 的尺寸。 表7-1各个表格的主要参数设置
表格名称 表格1 表格2 行 1 9 列 1 3 宽 780 780 高 140 755 对齐 居中对齐 居中对齐 image/bj08.jpg 背景图像 背景颜色
（五）知识讲解与操作示范（6）
7.5.2
创建网页模板
3．创建模板 利用上一步所创建的网页081.html制作成模板，如 果该网页已被关闭，应先打开该网页。将该网页另存为 模板的步骤如下： （1）在Dreamweaver 8主窗口中，单击菜单【文件】 →【另存为模板„】，弹出“另存模板”对话框。
（五）知识讲解与操作示范（7）
（二）明确知识技能目标
（1）理解模板和库的作用。 （2）学会将已有网页生成模板的操作方法。 （3）掌握如何编辑模板和将模板生成新网页的操作 方法。 （4）掌握如何应用库项目制作网页。
（三）展示网页浏览效果
网页08.html的浏览效果如图所示。
图7-71
应用模板制作的网页效果
（四）分析操作任务
（1）在站点“长沙世界之窗”下创建子文件夹“08模板和库”， 在“08模板和库”文件夹中创建一个网页文档081.html。
（五）知识讲解与操作示范（12）
7.5.3
编辑和更新模板
4．定义可编辑的可选区域 设置可编辑的可选区域的步骤如下： （1）选择想要设置为可编辑的可选区域的表格4。 （2）在Dreamweaver 8主窗口中，单击菜单【插入】 →【模板对象】→【可编辑的可选区域】。 （3）在“新建可选区域”对话框的“名称”文本框 中输入该可编辑的可选区域的名称。如果选中“默认显 示”复选框，则该可编辑的可选区域在默认情况下将在 基于模板的网页中显示。