网页设计第三章课件.ppt

1、第三章第三章 网页色彩和布局的控制网页色彩和布局的控制 表格有很好的兼容性，可被绝大部分的浏览器所支持，而且使用表格会使页面结构清晰、布局整齐。Dreamweaver提供了两种查看和操作表格的方式，即“标准”模式和“布局”模式。3.1.1 3.1.1 表格基础表格基础日常生活中，最常见的表格是用来显示数据的，比如Excel中的表格。在Dreamweaver中，表格除了可以显示数据外，最主要的功能是定位与排版。这样才能够将前面介绍过的文本与图像定位在网页中的任何想要显示的区域中。1.表格建立网页设计就是从创建表格开始的，先学习表格的创建可以为后来的网页设计奠定基础。(1)创建各种表格创建各种表格

2、1.表格建立(2)在表格中插入网页元素(3)设置表格属性即使在网页中插入一个最简单的表格，也具有表格的几个重要的元素，那就是表格整体、行、列和单元格。所以插入表格后，【属性】面板中显示的是该表格的基本属性。表格的基本属性如表3.2所示。表3.2表格的基本属性表格的基本属性2编辑表格(1)选中表格元素(2)调整表格大小2编辑表格(3)合并及拆分表格元素 当创建的表格不符合要求时，可以通过删除或增加表格的行与列，以及合并或者拆分单元格来实现 2编辑表格(4)复制及粘贴单元格3布局表格(1)创建布局表格与单元格(2)布局表格与单元格属性布局表格与单元格属性4表格制作实例（1）一像素表格（2）圆角相框

3、4表格制作实例（3）可隐藏的说明书3.1.2修饰网页各种元素（1）网页各种元素标签（2）HTML信息（3）文本标签（4）图像标签（5）表格标签（6）链接标签（5）表格标签（6）链接标签3.2 框架的规划与建立3.2.1 框架与表格1.框架和表格的区别2.使用框架的优缺点：（1）优点 访问者的浏览器不需为每个页面重新加载导航条；每个框架都具有自己的滚动条，因此访问者可以独立滚动这些框架进行浏览。（2）缺点 并不是所有浏览器都提供良好的框架支持；难以实现在不同框架中精确的对齐各个页面元素。3.2.2 规划框架框架最常见的用法就是实现页面导航，一般是将页面划分为一个导航区和一个内容区。这些框架中的每

4、一个都是一个独立的 HTML页面。框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的 URL。框架集文件不在浏览器中显示，只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。3.2.3 创建框架1.选择框架集和框架（1）在“框架”面板中选择框架和框架集（2）在文档窗口中选择框架和框架集2.设置框架集和框架属性(1)设置框架集属性(2)设置框架属性选择要查看或设置属性的框架集，在“属性”检查器中，查看所有框架集属性。3.2.3 创建框架设置框架集属性边框 边框宽度 边框颜色 框架大小 3.2.3 创建框架设置

5、框架属性框架名称 源文件 滚动 不能调整大小 边框及边框颜色，边界宽度和高度3.2.4 框架的操作1.改变框架尺寸2.嵌套框架3.拆分框架4.保存框架5.在框架中显示页面（1）直接在框架中编辑空文档（2）在框架中打开现有文档（3）在属性检查器为框架设置源文件（4）设置超链接的目标框架6.删除框架 3.2.5 Spry框架（1）Spry框架概念Spry框架支持一组用标准HTML、CSS和JavaScript编写的可重用构件。Spry构件是一个页面元素，通过启用用户交互来提供更丰富的用户体验。（2）Spry菜单栏构件（3）Spry选项卡式面板构件（4）Spry折叠构件（2）Spry菜单栏构件选项（

6、3）Spry选项卡式面板构件选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。访问者可以通过单击要访问的面板上的选项卡，来隐藏或者显示在选项卡式面板中的内容。当访问者单击不同的选项卡时，构件的面板会相应地打开。（4）Spry折叠构件Spry折叠构件是可折叠的面板，可以将大量内容存储在一个紧凑的空间中。访问者可以通过单击该面板上的选项卡来隐藏或者显示在折叠构件中的内容。折叠面板分为两种：一种是多个面板的折叠式面板构件，一种是只有一个面板的可折叠面板构件。3.3层的运用在Dreamweaver中的层分为两种格式：CSS层和Netscape层格式。（1）CSS层：使用DIV和SPAN标记来定位

7、网页元素的位置。CSS层的优点是具有良好的兼容性，Internet Explorer 4.0和Netscape Navigator 4.0及它们的更高版本的浏览器都支持CSS层。（2）Netscape层：在网页上定位元素使用的是LAYER和ILAYER标签。Netscape层只能被Netscape Navigator 4.0及更高版本的浏览器所支持。3.3.1创建层1.设置层的首选参数2.创建层：总结了3种方法3.设置层的属性3.设置层的属性（1）一个层的属性设置属性：层编号、左和上、宽和高、Z轴、可见性、背景图像、背景颜色、溢出、剪辑（2）多个层的属性设置如果选择多个层，在“属性”检查器中可

8、以对几个层的共同属性进行设置。3.3.2层的操作1.选定层2.移动层3.改变层的大小4.调整层的层次5.对齐层6.层的嵌套7.设置层的可见性：4.调整层的层次方法一：在“属性”检查器的的“Z轴”项中输入要求的叠放顺序 方法二：直接拖动层 6.层的嵌套在层面板中选择一个层，然后按住Ctrl键将选中的层拖到要嵌入的目标层的上方，在目标层名称的周围出现方框时释放鼠标，选中的层就成为目标层的子层。3.3.3层与表格的关系1.使用层设计表格层和表格都是定位工具，两者之间可以互相转换。选择【修改】|【转换】|【层到表格】菜单项，弹出“转换层为表格”对话框。2.防止层的重叠 选择层面板上的“防止重叠”选项。

9、选择【修改】|【排列顺序】|【防止层重叠】菜单项。3.4 CSS样式布局基础和应用使用表格能呈现数据间的关系；能在网页上组织图形和文本实现网页布局。如果需要网页呈现可视化的信息，例如，用语语言合成器朗读，那么表格就不适于用来在这类网页上实现布局，只有使用CSS样式布局才能实现。CSS是网页设计中众多样式的集成，它可以使页面风格统一化和标准化。CSS提供的链接功能可以让所有的网页使用同一种样式，使网页的维护更新变得轻松、高效。3.4.1 CSS样式表概述CSS英文全称为Cascading Style Sheets，中文全称为级联样式表或层叠样式表，更多的人把它称之为样式表，以下简称为CSS样式。

10、1CSS样式含义 CSS是“层叠样式表”的简称，通过CSS可以定制网页中的文本格式，不仅可以控制一个页面的文本格式，采用外部链接的方式还可以控制多个页面的文本格式。CSS样式定义方式有多种，主要有标签CSS样式、类CSS样式和伪类CSS样式3种。3.4.1 CSS样式表概述2CSS样式的功能CSS样式的创建，可以统一定制网页文字的大小、字体、颜色、边框、链接状态等效果。使用CSS设置页面格式时，可将网页要展示的内容与样式设定分开。这样就可让多个网页文件共同使用它，省去了大量重复设置的麻烦。使用CSS可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。3.4.1 CSS样式

11、表概述3CSS样式的语法规则CSS格式设置规则由两部分组成:（1）选择器:选择器是标识已设置格式元素的术 语（如 p、h1、类名称或 ID）。（2）声明:定义样式属性,介于大括号()之间 如：h1 font-size:16 pixels;font-family:Helvetica;font-weight:bold;3.4.1 CSS样式表概述4CSS样式的类型（1）在Dreamweaver中可以定义的样式类型类样式 HTML标签样式 高级样式（2）CSS规则可以位于的位置外部CSS样式表 Internal（或嵌入式）CSS样式表 内联样式 3.4.2 CSS样式面板“CSS样式”面板中包含两种

12、模式：“全部”模式和“正在”模式，在该面板中可进行新建、编辑、删除CSS样式和链接外部CSS文件等操作。3.4.2 CSS样式面板“CSS样式”面板中的按钮，面板底部共有7个按钮，如下所示3.4.3 CSS样式的创建1.设置CSS样式类别及使用范围单击面板右下角的“新建CSS规则”按钮，弹出“新建CSS规则”对话框，这是在新建CSS规则前先要完成的工作，即设置CSS样式类别及使用范围。3.4.3 CSS样式的创建当完成“新建CSS规则”对话框的设置，随后会弹出“CSS规则定义”对话框 3.4.3 CSS样式的创建2CSS样式类别中各元素的设置CSS样式类别中各元素的设置对话框将CSS样式分为8

13、个类别：类型、背景、区块、方框、边框、列表、定位、扩展。3.4.3 CSS样式的创建3创建CSS规则(1)基本属性设定网页中最基本的属性设置为网页背景设置与文本设置(2)区域属性设定为了更精确地确定网页元素所在网页中的位置(3)元素特效设定网页中的元素除了自身的属性外，还可以通过CSS样式为其添加其他效果，使其显示效果更加丰富(4)扩展属性设定【扩展】样式属性包括滤镜、分页和指针选项 3.4.3 CSS样式的创建4在网页中插入CSS在网页中可以建立三种不同的定义CSS 样式的方法 类、标签、高级（ID、伪类选择器等）伪类选择：a:link 设定正常状态下链接文字的样式。a:active 设定鼠

14、标单击时链接的外观。a:visited设定访问过的链接的外观。a:hover 设定鼠标放置在链接文字之上时，文字的外观。3.4.4应用自定义的CSS样式 1应用自定义的CSS样式（1）在文档窗口中，选定要应用样式的对象。可以在文档窗口中直接选择对象，也可以使用窗口底部状态栏的标签选择器来选择对象。（2）从“属性”检查器上的“样式”列表中选择要应用的样式。取消对自定义CSS样式的应用3.4.5附加外部CSS样式表CSS样式通常只显示在创建该样式的页面的【CSS样式】面板中，用户可以选用自己文档中的所有样式表，用户也可以选用或链接已存在的样式表并应用到文档中 在“CSS样式”面板，单击面板下方的“

15、附加样式表”按钮，弹出“链接外部样式表”对话框。3.4.6导出外部CSS样式表为了达到样式的共享，可以导出文档中存在的所有样式，步骤如下：（1）打开CSS样式面板，切换到“全部”模式。（2）选择要导出的样式，并单击鼠标右键，从弹出的菜单中选择“导出”，出现“导出样式为CSS文件”对话框。（3）设置样式文件的文件名和文件夹位置，单击“保存”按钮，关闭对话框，完成样式的导出。3.4.7编辑CSS样式表1.编辑当前文档中创建的CSS样式表2.编辑外部CSS样式表编辑外部CSS样式表有两种 3.删除CSS样式 如果不再需要某个CSS样式，则可以将其删除。在【CSS样式】面板中选择要删除的CSS样式，再

16、单击按钮，即可删除该CSS样式。3.4.8 CSS样式的优先顺序（1）如果将两种样式应用于同一文本，在没有冲突的情况下，浏览器显示这两种样式的所有属性；在有冲突的情况下，按CSS样式的优先规则处理冲突属性。（2）发生冲突时，特别说明的属性优先于要继承的属性。例如：body color：green；p color：red；（3）如果应用于同一文本的两种样式发生冲突，则浏览器根据在代码中的顺序优先显示最里面的样式（代码窗口中离文本本身最近的样式）的属性。（4）如果样式表中的属性与HTML标签中的属性发生冲突时，则定义文本最内层的属性优先显示 3.4.9 Spry框架中的CSS设置1Spry面板样式

17、设置（1）关于折叠构件（2）插入和编辑折叠构件 插入折叠构件的操作步骤：将面板添加到折叠构件的操作步骤：从折叠构件删除面板打开面板进行编辑更改面板的顺序的操作步骤：（3）自定义折叠构件 设置折叠构件文本的样式更改折叠构件的背景颜色限制折叠的宽度3.4.9 Spry框架中的CSS设置2Spry菜单栏样式设置例一：背景图案居中固定3.4.9 Spry框架中的CSS设置2Spry菜单栏样式设置例二：竖排诗歌例三：多彩链接文字例3.5 各种样式表元素应用3.5.1 文字样式3.5.2 边框样式3.5.3 颜色样式3.6.1 色彩基础知识1.色彩理论(1)色相(2)饱和度(3)明度2.216网页安全色3

18、.5 各种样式表元素应用3.6.1 色彩基础知识3.网页配色方法(1)网页自定义颜色(2)色彩推移明度推移色相推移纯度推移(3)色彩采集对自然色的采集 对传统色的采集 对民间色的采集 对图片色的采集 3.5 各种样式表元素应用3.6.2 网页色彩搭配的原则(配色方案)1色相对比2明度对比3纯度对比3.6.2 网页色彩搭配的原则4综合对比及色调变化鲜色调、灰色调、深色调、浅色调、中色调5色彩的面积与位置对比6色彩的肌理对比7色彩的连续对比8同时对比（1）面积法（2）阻隔法又称色彩间隔法、分离法等（3）统调法、削弱法、综合法 3.6.2 网页色彩搭配的原则9色彩调和(1)同一调和混入同一白色调和、

19、混入同一白色调和、混入同一灰色调和、混入同一原色调和、混入同一间色、复色调和互混调和、点缀色同一调和、连贯同一色调和、同色相的调和、同明度的调和、同彩度的调和。(2)近似调和(3)秩序的调和(4)面积的调和(5)同类调和(6)分割调和3.6.3网站中的色彩应用1.网站色彩分析(1)网站风格与色彩设计:公司色、风格色、习惯色(2)网站主题与色彩设计(3)全球网站的主色调(3)全球网站的主色调全球网站的主色调是以蓝色和红色为主 3.6.3网站中的色彩应用2.网页色彩规则（1）色彩搭配原则：色彩的鲜明性、色彩的独特性、色彩的艺术性、色彩搭配的合理性。（2）网页色彩搭配方法：同种色彩搭配、近色彩搭配、

20、对比色彩搭配、暖色色彩搭配、冷色色彩搭配、有主色的混合色彩搭配、文字与网页的背景色对比要突出、（3）网页设计中几种色彩分析及其之间的搭配：红色、黄色、蓝色、绿色、紫色、橙色、白色、黑色、灰色、3.7 网页布局控制3.7.1 3.7.1 布局控制的作用布局控制的作用3.7.2 3.7.2 常见的网页布局常见的网页布局1.1.结构布局：结构布局：（1 1）“国国”字型网页布局、（字型网页布局、（2 2）拐角型网页布局）拐角型网页布局、（、（3 3）左右框架型网页布局、（）左右框架型网页布局、（4 4）上下框架型网）上下框架型网页布局、（页布局、（5 5）综合框架型网页布局）综合框架型网页布局、（6）变化型网页布局、（7）封面型网页布局3.7.2 3.7.2 常见的网页布局常见的网页布局2.艺术布局（1）标题正文型（2）Flash型 3.7.33.7.3网页布局补遗网页布局补遗1关于第一屏所谓第一屏，是指到达一个网站在不拖动滚动条时能够看到的部分 2有关导航栏的位置导航栏能让用户在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目。