网页设计与制作实用教程.ppt
合集下载
网页设计与制作教程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">`
《网页设计与制作课件》全册精讲PPT教学课件
1．屏幕分辨率对网页制作的重要性
要根据网页和浏览者的特性，以合适的屏幕分 辨率为基准来设置网页尺寸，以使浏览者更加 便利地浏览网页。如游戏爱好者大部分都使用 高配置系统，所以游戏网站的网页尺寸大都在 1024像素×768像素以上，如下图所示。
项目一 网页设计与制作基础知识
13
2．常见网页尺寸
对于网页尺寸，是没有硬性规定的。目前常见的网页宽 度有1000像素、1190像素和1200像素3种，例如新浪 是1000像素、淘宝和京东是1190像素，当当是1200像 素。如果需要兼容不同浏览器尺寸，现在比较流行的做 法是做成响应式的，即根据不同分辨率显示不同的尺寸， 不过这样工作量要大很多。网页高度可根据网页内容来 定，一般不要超过3屏。
右图显示了新华网的主页，可 以看到网页中有文字、图像和 动画等。
项目一 网页设计与制作基础知识
6
在浏览三器、中网单击页右的上本角质的“工具”按钮 ，在弹出的菜单中选择“文件”>“另存为”菜单，打开
“保存网页”对话框，在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”，将网 页保存到磁盘中，便可看到网页的组成文件，如下图所示。
网页就是我们上网时在浏览器中打开的一 个个画面。网站则是一组相关网页的集合。 一个小型网站可能只包含几个网页，而一 个大型网站则可能包含成千上万个网页， 如新浪网就包括新闻、财经、科技、体育、 娱乐等多个板块，而每个板块又包括很多 网页。
另外，打开某个网站时显示的第一个网页 被称为网站的主页（或首页）。
当当网主页
项目一 网页设计与制作基础知识
4
二、网页的构成元素
网页中的 元素按功 能可分为 站标、导 航条、广 告条、标 题栏和按 钮等。
要根据网页和浏览者的特性，以合适的屏幕分 辨率为基准来设置网页尺寸，以使浏览者更加 便利地浏览网页。如游戏爱好者大部分都使用 高配置系统，所以游戏网站的网页尺寸大都在 1024像素×768像素以上，如下图所示。
项目一 网页设计与制作基础知识
13
2．常见网页尺寸
对于网页尺寸，是没有硬性规定的。目前常见的网页宽 度有1000像素、1190像素和1200像素3种，例如新浪 是1000像素、淘宝和京东是1190像素，当当是1200像 素。如果需要兼容不同浏览器尺寸，现在比较流行的做 法是做成响应式的，即根据不同分辨率显示不同的尺寸， 不过这样工作量要大很多。网页高度可根据网页内容来 定，一般不要超过3屏。
右图显示了新华网的主页，可 以看到网页中有文字、图像和 动画等。
项目一 网页设计与制作基础知识
6
在浏览三器、中网单击页右的上本角质的“工具”按钮 ，在弹出的菜单中选择“文件”>“另存为”菜单，打开
“保存网页”对话框，在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”，将网 页保存到磁盘中，便可看到网页的组成文件，如下图所示。
网页就是我们上网时在浏览器中打开的一 个个画面。网站则是一组相关网页的集合。 一个小型网站可能只包含几个网页，而一 个大型网站则可能包含成千上万个网页， 如新浪网就包括新闻、财经、科技、体育、 娱乐等多个板块，而每个板块又包括很多 网页。
另外，打开某个网站时显示的第一个网页 被称为网站的主页（或首页）。
当当网主页
项目一 网页设计与制作基础知识
4
二、网页的构成元素
网页中的 元素按功 能可分为 站标、导 航条、广 告条、标 题栏和按 钮等。
《网页设计与制作(1)》课件
了解各种颜色间的搭配和配色原则，以及如何使用颜
字体和排版原则
了解如何选择合适的字体和排版样式，以及如何使用
图片和多媒体的使用
1 多媒体的优势
2 图片的优化
3 响应式设计概念
了解如何使用图片、音频和 视频来增强网页的吸引力和 互动性。
了解图片优化的重要性，以 及如何选择合适的图片格式 和尺寸，以达到更快的加载 速度。
了解如何使用响应式设计来 适应不同的屏幕大小和设备 类型，以提升用户体验。
用户体验设计概念
1
了解用户
通过市场调研和用户反馈，了解用户的需求和特点。
2
ห้องสมุดไป่ตู้
设计用户旅程
将用户体验分解为不同的阶段，设计出让用户流畅、愉快的体验过程。
3
测试和优化
通过用户测试和分析数据，对网页进行不断优化，提升用户体验。
网页制作工具和技术
《网页设计与制作(1)》 PPT课件
欢迎来到《网页设计与制作(1)》PPT课件！在这个课程中，我们将探讨网页设 计和制作的基本概念和技术，帮助您成为一名优秀的网页设计师和开发者。
课程介绍
目标和目的
通过本课程，您将学习如何设 计和制作精美、现代化的网页， 并掌握实用的前端技术。
受众群体
任何对网页设计和制作感兴趣 的人，尤其是想要成为网页设 计师和开发者的人群。
安全性和可访问性
了解如何提升网页的安全性和可访问性，以便更好 地保护用户隐私和权益。
总结
感谢您学习本课程！通过本课程，您应该已经掌握了网页设计和制作的基本 概念和技术，为成为一名优秀的网页设计师和开发者打下了坚实的基础。
掌握网页制作的整个流程，包括需求分析、设计、开
常用网页制作技巧和技
字体和排版原则
了解如何选择合适的字体和排版样式，以及如何使用
图片和多媒体的使用
1 多媒体的优势
2 图片的优化
3 响应式设计概念
了解如何使用图片、音频和 视频来增强网页的吸引力和 互动性。
了解图片优化的重要性，以 及如何选择合适的图片格式 和尺寸，以达到更快的加载 速度。
了解如何使用响应式设计来 适应不同的屏幕大小和设备 类型，以提升用户体验。
用户体验设计概念
1
了解用户
通过市场调研和用户反馈，了解用户的需求和特点。
2
ห้องสมุดไป่ตู้
设计用户旅程
将用户体验分解为不同的阶段，设计出让用户流畅、愉快的体验过程。
3
测试和优化
通过用户测试和分析数据，对网页进行不断优化，提升用户体验。
网页制作工具和技术
《网页设计与制作(1)》 PPT课件
欢迎来到《网页设计与制作(1)》PPT课件！在这个课程中，我们将探讨网页设 计和制作的基本概念和技术，帮助您成为一名优秀的网页设计师和开发者。
课程介绍
目标和目的
通过本课程，您将学习如何设 计和制作精美、现代化的网页， 并掌握实用的前端技术。
受众群体
任何对网页设计和制作感兴趣 的人，尤其是想要成为网页设 计师和开发者的人群。
安全性和可访问性
了解如何提升网页的安全性和可访问性，以便更好 地保护用户隐私和权益。
总结
感谢您学习本课程！通过本课程，您应该已经掌握了网页设计和制作的基本 概念和技术，为成为一名优秀的网页设计师和开发者打下了坚实的基础。
掌握网页制作的整个流程，包括需求分析、设计、开
常用网页制作技巧和技
《网页设计与制作》PPT课件
（五）知识讲解与操作示范（8）
3．页面中图像应用
传递信息的视觉要素包括版式、文字、图像、色彩等。 网页中图像在信息传达上应用具备以下功能： （1）要有良好的视觉吸引力，能吸引浏览者的注意力。 （2）要简洁明确地传达网站信息，能使人们一目了然地抓 住网站信息的重点。 （3）要有强而有力的诱导作用，造成鲜明的视觉感受效果， 从观看过程中产生愿望和欲求。 对图像的处理主要包括以下几个方面： （1）图像的外形处理 （2）图像的面积处理 （3）图像的数量处理 （4）图像的背景处理
（五）知识讲解与操作示范（7）
(2）文字粗细的确定 文字变细会显得十分优美，反之将文字变粗会显得有
力。 （3）文字字号的确定
对于网页中正文文本，其字号一般设置为10～12磅； 对于网页中版权声明等文本一般设置为9～10磅；对于网 页中标题文本，一般设置为12～18磅。 （4）文字的字间距和行间距
网页中文本的字间距和行间距在某种程度上会改变访 问者的阅读心理。
（2）站内搜索引擎 站内搜索引擎提供了一种主动查询方式，浏览者
只要把自己需要寻找的内容的关键字输入到搜索引擎 中，网站将自动地查找出站内符合条件的页面，这是当前浏览位置”就是在网站的每个页面中 加入当前位置的文字说明并逐级加入链接。
（五）知识讲解与操作示范（6）
15.2.4 网页色彩设计
1．色彩的基本知识
（1）三原色 三原色是能够按照一些数量规定合成其他任何
一种颜色的基色。所有的颜色其实都是由三原色按 照不同的比例混合而来。电脑屏幕的色彩是由红、 绿、蓝三种原色组成。
（2）色彩三要素 色彩三要素是指色相、饱和度和明度。
（五）知识讲解与操作示范（2）
2．颜色的计算机表示
4．广告尺寸 广告尺寸应为标准尺寸，全尺寸banner不超过14KB。
网页设计与制作PPT课件
1.1 网页和网站
1.1.3 网页的基本功能
1、媒介的作用。使用者与信息之间的媒介。 一方面是发布者，功能是发布信息；另一方面 是浏览者，功能是提供浏览的信息，通过浏览 网页找寻需要的信息。
2、互动的作用。浏览者与网页制作单位之 间互动的窗口，可以单向或双向传递信息。
3、传输的作用。作为传输各种电子文件或 信息之用，如下载说明书、更新文件、驱动程 序等。
超链接的标志一般有：文本、图像、热区 三种。要注意的是，所有超链接标志均应清晰 无误地向浏览者标识出来，让人一看就知道。
1.2 网页中的主要元素
1.2.4其他的基本要素
除上述几种要素之外，在网页上经常使用 的还有动画、视频、声音等各种信息的形式。
1．动画。目前网络上常用的动画类型有 gif和Flash动画两种。
第2讲 HTML语言基础
$ [知识目标]
了解HTML文件的基本结构 掌握HTML中文本的编辑及图像的语法 掌握HTML中各种设置超级链接的语法 掌握HTML中表格和框架的基本语法
8 [能力目标]
掌握进行文本及图像的编辑操作 掌握创建各种超级链接的操作 能够编写简单的HTML网页 掌握HTML文件中表格和框架的使用
1.4 网页设计的基本流程
1.4.3网页的测试
1．浏览器兼容性测试。目前浏览器有： Internet Explorer与Netscape两大主流浏览器，二 者对HTML和CSS等语法的支持度是不同的。在 Dreamweaver中提供了可以检查网页中是否含有某版本浏 览器不能识别的语法功能，设计者可以借助其进行检查。
1.4 网页设计的基本流程
1.4.4网页上传和发布
网页设计好，必须把它发布到互联网上， 否则网站形象仍然不能展现出去。发布的服务 器可以是远程，也可以是本地。如果是发布到 互联网上，要先申请域名和主页空间，然后再 利用专用软件（如：CuteFTP）上传，FTP有很 多种软件，最著名的是 CuteFTP 和 LeapFTP， 也可以用Dreamweaver内置的FTP上传。
网页设计与制作PPT图文教程
如何申请电子邮箱 电子邮箱的使用 举例: 登陆 注册信息后，设置帐号、密码
10 /37
FTP
文件传输
登陆ftp://210.45.160.13 打开“网页制作软件”文件夹 下载安装Dreamweaver 8.0
11 /37
Telnet
远程登录 操作方法:
• 单击”开始”菜单----”运行” • 输入“ Telnet ”
30 /37
上机作业
实验一 制作带有文本、图像和超链接等标 记的页面 要求：
• • • • 上机课须带教材 上机座位固定 遵守机房纪律 遵守上机纪律
31 /37
课后作业
1. 解释下列名词：网络、万维网、HTTP、FTP、域 名。 2. WWW的结构是怎样的？ 3. 一个完整的URL结构是什么？举出几个URL的例 子。 4. 如何设置IE的起始页？如何更改IE临时文件夹的 空间大小？ 5. 描述网站建设的具体步骤。 6. 网页设计应遵循哪些原则？ 7. 常见的网页布局类型有哪些？
电子邮件
Internet简介
计算机网络：是指通过网络设备把在地理上 分布于不同地点的多个计算机系统连接起来， 用来实现信息交换、资源共享和协同工作等 功能的系统。 Internet：是全球最大的、开放的、由众多网 络互联而成的计算机互连网，又称“因特 网”。
5 /37
Internet简介（续）
Internet的起源和发展 Internet的功能和应用
• •
14 /37
WWW工作原理
客户机、服务器、 HTTP(超文本传输协议)
15 /37
URL
统一资源定位器 传输协议://主机名[端口标识]/路径/文件名 举例：
• http://210.45.160.37 (IP地址) • (域名地址)
10 /37
FTP
文件传输
登陆ftp://210.45.160.13 打开“网页制作软件”文件夹 下载安装Dreamweaver 8.0
11 /37
Telnet
远程登录 操作方法:
• 单击”开始”菜单----”运行” • 输入“ Telnet ”
30 /37
上机作业
实验一 制作带有文本、图像和超链接等标 记的页面 要求：
• • • • 上机课须带教材 上机座位固定 遵守机房纪律 遵守上机纪律
31 /37
课后作业
1. 解释下列名词：网络、万维网、HTTP、FTP、域 名。 2. WWW的结构是怎样的？ 3. 一个完整的URL结构是什么？举出几个URL的例 子。 4. 如何设置IE的起始页？如何更改IE临时文件夹的 空间大小？ 5. 描述网站建设的具体步骤。 6. 网页设计应遵循哪些原则？ 7. 常见的网页布局类型有哪些？
电子邮件
Internet简介
计算机网络：是指通过网络设备把在地理上 分布于不同地点的多个计算机系统连接起来， 用来实现信息交换、资源共享和协同工作等 功能的系统。 Internet：是全球最大的、开放的、由众多网 络互联而成的计算机互连网，又称“因特 网”。
5 /37
Internet简介（续）
Internet的起源和发展 Internet的功能和应用
• •
14 /37
WWW工作原理
客户机、服务器、 HTTP(超文本传输协议)
15 /37
URL
统一资源定位器 传输协议://主机名[端口标识]/路径/文件名 举例：
• http://210.45.160.37 (IP地址) • (域名地址)
网页设计与制作PPT教程
果等交互效果。
学习JavaScript需要理解事件、 函数、对象等概念，以及如何 编写有效的JavaScript代码。
响应式设显示的设计方法。
通过媒体查询、弹性布局和流 式设计等技术，实现网页在不 同屏幕尺寸下的自适应布局。
学习响应式设计需要理解不同 屏幕尺寸和设备的特点，以及 如何编写响应式设计的代码。
文字排版技巧
字体选择
选择清晰易读的字体，避免使 用过于花哨的字体。
字号大小
根据内容的重要程度选择合适 的字号，突出标题和重点内容 。
行间距
适当的行间距可以提高文本的 可读性。
文字颜色
考虑背景颜色和文字颜色的对 比度，确保文字清晰可见。
图片使用规范
01
图片质量
选用高清、无损的图片，确保图片 清晰度。
03 网页布局与排版
常见网页布局
固定布局
整个网页的宽度和高度固定，适合展示内容 较多的页面。
弹性布局
使用百分比、em等相对单位设置元素大小， 使页面在不同设备上呈现良好。
流式布局
页面元素随浏览器窗口的大小自适应调整， 适合响应式设计。
网格布局
将页面划分为若干行和列，使内容在网格中 排列，便于对齐和规划。
05 网页优化与发布
网站性能优化
页面加载速度
01
优化图片、脚本和CSS文件，减少HTTP请求，使用CDN加速，
以提升页面加载速度。
代码优化
02
精简HTML、CSS和JavaScript代码，避免冗余和无效的代码，
提高网页的渲染效率。
响应式设计
03
根据不同设备和屏幕尺寸，自适应调整网页布局和元素尺寸，
网页设计不仅关注页面的外观，还关注其在不同设备和浏览器上的显示效 果，以及如何吸引和留住用户。
学习JavaScript需要理解事件、 函数、对象等概念，以及如何 编写有效的JavaScript代码。
响应式设显示的设计方法。
通过媒体查询、弹性布局和流 式设计等技术，实现网页在不 同屏幕尺寸下的自适应布局。
学习响应式设计需要理解不同 屏幕尺寸和设备的特点，以及 如何编写响应式设计的代码。
文字排版技巧
字体选择
选择清晰易读的字体，避免使 用过于花哨的字体。
字号大小
根据内容的重要程度选择合适 的字号，突出标题和重点内容 。
行间距
适当的行间距可以提高文本的 可读性。
文字颜色
考虑背景颜色和文字颜色的对 比度，确保文字清晰可见。
图片使用规范
01
图片质量
选用高清、无损的图片，确保图片 清晰度。
03 网页布局与排版
常见网页布局
固定布局
整个网页的宽度和高度固定，适合展示内容 较多的页面。
弹性布局
使用百分比、em等相对单位设置元素大小， 使页面在不同设备上呈现良好。
流式布局
页面元素随浏览器窗口的大小自适应调整， 适合响应式设计。
网格布局
将页面划分为若干行和列，使内容在网格中 排列，便于对齐和规划。
05 网页优化与发布
网站性能优化
页面加载速度
01
优化图片、脚本和CSS文件，减少HTTP请求，使用CDN加速，
以提升页面加载速度。
代码优化
02
精简HTML、CSS和JavaScript代码，避免冗余和无效的代码，
提高网页的渲染效率。
响应式设计
03
根据不同设备和屏幕尺寸，自适应调整网页布局和元素尺寸，
网页设计不仅关注页面的外观，还关注其在不同设备和浏览器上的显示效 果，以及如何吸引和留住用户。
网页设计与制作ppt课件
网页设计与制作
网站建设基本流程
➢网站的需求分析 ➢规划站点结构 ➢收集素材 ➢设计与制作网站 ➢网站的发布
网页设计与制作
网页设计与制作
第1章 DreamweaverCS3入门
第1章 Dreamweaver CS3入门
本章学习要点： ➢Dreamweaver CS3的主要功能和特点 ➢Dreamweaver CS3的操作环境 ➢利用Dreamweaver CS3制作网页 ➢利用Dreamweaver CS3创建并管理站点
➢ 网页内容一经发布到网站服务器上，无论是否 有用户访问，每个静态网页的内容都是保存在 网站服务器上的。
➢ 静态网页的内容相对稳定，因此容易被搜索引 擎检索。
➢ 静态网页没有数据库的支持。 ➢ 静态网页的交互性较差，在功能方面有较大的
限制。
网页设计与制作
2．动态网页
动态网页的基本特点归纳如下：
➢ 动态网页以数据库技术为基础，可以大大降低 网站维护的工作量。
网页设计与制作
什么是网页?
➢网页是一种可以在互联网上传输，能被浏 览器认识和翻译成页面并显示出来的文件， 网页是网站的基本构成元素。
➢网页实际上就是一个文件。一般网页上都 会有文本和图片等信息，而复杂一些的网 页上还会有声音、视频、动画等多媒体内 容。
➢网页比报纸、广播、电视等传统媒介在信 息传递上更加迅速、多样化，交互能力更 强。
1.网址与域名
➢１．网址
浏览网页时，在浏览器地址栏中输入的诸如 就是一个网址，浏览器访 问网页是由URL（Uniform Resource Locator) 统 一资源定位器的方式来实现的。
➢2．域名
域名就是网站的名称，企业在注册域名时一 般都会申请一个符合网站特点的域名，甚至会把 域名看作企业的网上商标。
网站建设基本流程
➢网站的需求分析 ➢规划站点结构 ➢收集素材 ➢设计与制作网站 ➢网站的发布
网页设计与制作
网页设计与制作
第1章 DreamweaverCS3入门
第1章 Dreamweaver CS3入门
本章学习要点： ➢Dreamweaver CS3的主要功能和特点 ➢Dreamweaver CS3的操作环境 ➢利用Dreamweaver CS3制作网页 ➢利用Dreamweaver CS3创建并管理站点
➢ 网页内容一经发布到网站服务器上，无论是否 有用户访问，每个静态网页的内容都是保存在 网站服务器上的。
➢ 静态网页的内容相对稳定，因此容易被搜索引 擎检索。
➢ 静态网页没有数据库的支持。 ➢ 静态网页的交互性较差，在功能方面有较大的
限制。
网页设计与制作
2．动态网页
动态网页的基本特点归纳如下：
➢ 动态网页以数据库技术为基础，可以大大降低 网站维护的工作量。
网页设计与制作
什么是网页?
➢网页是一种可以在互联网上传输，能被浏 览器认识和翻译成页面并显示出来的文件， 网页是网站的基本构成元素。
➢网页实际上就是一个文件。一般网页上都 会有文本和图片等信息，而复杂一些的网 页上还会有声音、视频、动画等多媒体内 容。
➢网页比报纸、广播、电视等传统媒介在信 息传递上更加迅速、多样化，交互能力更 强。
1.网址与域名
➢１．网址
浏览网页时，在浏览器地址栏中输入的诸如 就是一个网址，浏览器访 问网页是由URL（Uniform Resource Locator) 统 一资源定位器的方式来实现的。
➢2．域名
域名就是网站的名称，企业在注册域名时一 般都会申请一个符合网站特点的域名，甚至会把 域名看作企业的网上商标。
网页设计与制作实用教程ppt课件
置于页面中央：将转换的表格放在页面的中央。
2．表格转换为层
– 选中需要转换成层的表格，选择“【修改】 →【转换】→【表格到层】”菜单命令，打 开如图所示的“转换表格为层”对话框。
“转换表格为层”对话框
防止层重叠。选择此项，可以在建立，移动和调整
层大小时防止层互相重叠。
显示层面板。选择此项，转换后将显示层面板。
链接目标
本章小结
网页布局是网站建设的初始工作，是按照设计的原则 和方法，安排页面元素，并通过色彩调和出不同的网 站基调，使网页内容形成一个有机的整体，充分表达 网站主题的过程。
网页布局的方法很多，大致分为表格布局（包括布局 表格），层布局，框架布局。其中表格布局是最基本 的布局方式。“布局表格”布局、层布局最终都转换 成普通表格来实现页面布局。框架布局是把浏览器窗 口划分成几个不同的区域，在同一个浏览器窗口中显 示多个框架页面的技术。
右边的灰色区域来识别。可以通过鼠标在不同区域点击来选择某个 框架，以设置某个框架的尺寸大小。
单位：设置行、列尺寸的单位。可以是像素、百分比和相对。使
用“像素”单位时，框架的尺寸大小是保持不变的，选择“百分比 ”、“相对”时，框架的尺寸大小随着浏览器窗口的改变而发生改 变。
2．框架的属性设置
框架属性
3.2.2 表格的属性设置
1.边框、填充、间距
（1）边框
一个“一行一列”的表格，至少有两个边框，表格外 边框和单元格边框。边框颜色只有当边框值设置为非 零值时才能显示。当未指定单元格边框颜色时， Dreamweaver会以表格图的3外-2边-3 框颜色作为单元格的边 框颜色。
（2）间距
表格边框和单元格边框之间的距离或单元格边框与 单元格边框之间的距离称为间距。
2．表格转换为层
– 选中需要转换成层的表格，选择“【修改】 →【转换】→【表格到层】”菜单命令，打 开如图所示的“转换表格为层”对话框。
“转换表格为层”对话框
防止层重叠。选择此项，可以在建立，移动和调整
层大小时防止层互相重叠。
显示层面板。选择此项，转换后将显示层面板。
链接目标
本章小结
网页布局是网站建设的初始工作，是按照设计的原则 和方法，安排页面元素，并通过色彩调和出不同的网 站基调，使网页内容形成一个有机的整体，充分表达 网站主题的过程。
网页布局的方法很多，大致分为表格布局（包括布局 表格），层布局，框架布局。其中表格布局是最基本 的布局方式。“布局表格”布局、层布局最终都转换 成普通表格来实现页面布局。框架布局是把浏览器窗 口划分成几个不同的区域，在同一个浏览器窗口中显 示多个框架页面的技术。
右边的灰色区域来识别。可以通过鼠标在不同区域点击来选择某个 框架，以设置某个框架的尺寸大小。
单位：设置行、列尺寸的单位。可以是像素、百分比和相对。使
用“像素”单位时，框架的尺寸大小是保持不变的，选择“百分比 ”、“相对”时，框架的尺寸大小随着浏览器窗口的改变而发生改 变。
2．框架的属性设置
框架属性
3.2.2 表格的属性设置
1.边框、填充、间距
（1）边框
一个“一行一列”的表格，至少有两个边框，表格外 边框和单元格边框。边框颜色只有当边框值设置为非 零值时才能显示。当未指定单元格边框颜色时， Dreamweaver会以表格图的3外-2边-3 框颜色作为单元格的边 框颜色。
（2）间距
表格边框和单元格边框之间的距离或单元格边框与 单元格边框之间的距离称为间距。