网页设计第三章.ppt

第三章第三章 网页色彩和布局的控制网页色彩和布局的控制3.1表格应用表格应用表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具，虽然HTML代码中通常不明确指定列，但Dreamweaver允许操作列、行和单元格。表格有很好的兼容性，可被绝大部分的浏览器所支持，而且使用表格会使页面结构清晰、布局整齐。Dreamweaver提供了两种查看和操作表格的方式，即“标准”模式和“布局”模式。3.1.1 表格基础表格基础日常生活中，最常见的表格是用来显示数据的，比如Excel中的表格。在Dreamweaver中，表格除了可以显示数据外，最主要的功能是定位与排版。这样才能够将前面介绍过的文本与图像定位在网页中的任何想要显示的区域中。1.表格建立网页设计就是从创建表格开始的，先学习表格的创建可以为后来的网页设计奠定基础。(1)创建各种表格选选项项作作用用行数行数用于确定表格的行数。用于确定表格的行数。列数列数用于确定表格的列数。用于确定表格的列数。表格宽度表格宽度 以像素或者百分比为单位确定表格的宽度。以像素或者百分比为单位确定表格的宽度。边框粗细边框粗细 以像素为单位指定表格边框的宽度。以像素为单位指定表格边框的宽度。单元格边单元格边距距指定单元格边框和单元格内容之间的像素数，指定单元格边框和单元格内容之间的像素数，如果不希望显示边框时，设置为如果不希望显示边框时，设置为0像素。像素。单元格间单元格间距距指定相邻的单元格之间的像素数。指定相邻的单元格之间的像素数。创建各种表格无无对表不启用列或行标题，默认情况下此项被选中。对表不启用列或行标题，默认情况下此项被选中。左侧左侧将表的第一列作为标题列，便于为每一行输入一个将表的第一列作为标题列，便于为每一行输入一个标题。标题。顶部顶部将表的第一行作为标题行，便于为每一列输入一个将表的第一行作为标题行，便于为每一列输入一个标题。标题。两者两者在表中输入列标题和行标题。在表中输入列标题和行标题。标题标题指定在表格外显示的标题。指定在表格外显示的标题。对齐标题对齐标题指定表格标题相对于表格的显示位置，采用默认方指定表格标题相对于表格的显示位置，采用默认方式。式。摘要摘要用于说明表格。用于说明表格。1.表格建立(2)在表格中插入网页元素(3)设置表格属性即使在网页中插入一个最简单的表格，也具有表格的几个重要的元素，那就是表格整体、行、列和单元格。所以插入表格后，【属性】面板中显示的是该表格的基本属性。表格的基本属性如表3.2所示。表3.2表格的基本属性参参数数含含义义表格表格Id设置表格的名称，也就是表格的设置表格的名称，也就是表格的Id。行行/列列在文本框中分别输入表格中行和列的数目在文本框中分别输入表格中行和列的数目宽宽在文本框中输入表格宽度，以像素为单位或按占浏览在文本框中输入表格宽度，以像素为单位或按占浏览器窗口宽度的百分比进行计算。器窗口宽度的百分比进行计算。填充填充在文本框中输入单元格内容和单元格边框之间的像素在文本框中输入单元格内容和单元格边框之间的像素数。数。间距间距在文本框中输入相邻单元格之间的像素数。在文本框中输入相邻单元格之间的像素数。表格的基本属性对齐对齐用于确定表格相对于同一段落中其他元素（例如文本用于确定表格相对于同一段落中其他元素（例如文本或图像）的显示位置。包括左对齐、右对齐和居中对或图像）的显示位置。包括左对齐、右对齐和居中对齐。当对齐方式为齐。当对齐方式为【默认默认】时，其他内容不显示在表时，其他内容不显示在表格的旁边。格的旁边。边框边框用于指定表格边框的宽度（以像素为单位）。用于指定表格边框的宽度（以像素为单位）。类类可以将可以将CSS规则应用于对象。规则应用于对象。背景颜背景颜色色设置表格的背景颜色。设置表格的背景颜色。边框颜边框颜色色设置表格边框的颜色。设置表格边框的颜色。背景图背景图像像为表格添加背景图像。为表格添加背景图像。2编辑表格(1)选中表格元素(2)调整表格大小2编辑表格(3)合并及拆分表格元素 当创建的表格不符合要求时，可以通过删除或增加表格的行与列，以及合并或者拆分单元格来实现 2编辑表格(4)复制及粘贴单元格3布局表格(1)创建布局表格与单元格(2)布局表格与单元格属性选选项项作作用用宽宽有有【固定固定】和和【自动伸展自动伸展】两个选项：当两个选项：当选中选中【固定固定】单选按钮时，可以直接在单选按钮时，可以直接在右侧的文本框中输入表格的宽度值。当右侧的文本框中输入表格的宽度值。当选中选中【自动伸展自动伸展】单选按钮时，则表格单选按钮时，则表格的宽度可以根据插入的内容自动进行调的宽度可以根据插入的内容自动进行调整。整。高高在其后的文本框中输入表格的高度。在其后的文本框中输入表格的高度。背景颜色背景颜色用于设置表格的背景颜色。用于设置表格的背景颜色。布局表格与单元格属性填充填充用于设置单元格内容和边框的距离。用于设置单元格内容和边框的距离。间距间距用于设置表格内单元格之间的距离。用于设置表格内单元格之间的距离。清除行高清除行高按钮：对行高进行清除按钮：对行高进行清除使单元格宽度使单元格宽度一致一致按钮：表格内的单元格宽度自动随着单元格的按钮：表格内的单元格宽度自动随着单元格的内容宽度变化。内容宽度变化。删除所有间隔删除所有间隔图像图像按钮：清除表格中的所有间隔图像。按钮：清除表格中的所有间隔图像。删除嵌套删除嵌套按钮：清除嵌套表格，只有当存在嵌套表格时，按钮：清除嵌套表格，只有当存在嵌套表格时，该选项才显示。该选项才显示。类类可以将可以将CSS规则应用于对象规则应用于对象4表格制作实例（1）一像素表格（2）圆角相框4表格制作实例（3）可隐藏的说明书3.1.2修饰网页各种元素（1）网页各种元素标签（2）HTML信息（3）文本标签（4）图像标签（5）表格标签（6）链接标签（5）表格标签标签标签类型类型译名或意义译名或意义作用作用备注备注表格标记表格标记表格标记表格标记设定该表格的各项参数设定该表格的各项参数表格标题表格标题做成一行通列以填入表格标题做成一行通列以填入表格标题表格列表格列设定该表格的列设定该表格的列表格栏表格栏设定该表格的栏设定该表格的栏表格标头表格标头相等于相等于，但其内之字体会，但其内之字体会变粗变粗（6）链接标签标签标签类型类型译名或意义译名或意义作用作用备注备注链接标签链接标签链接标记链接标记加入链接加入链接基准标记基准标记指定一个显式指定一个显式URL用于解析对用于解析对于外部源的链接和引用，如于外部源的链接和引用，如图像和样式表。图像和样式表。影像地图影像地图影像地图名影像地图名称称设定影像地图名称设定影像地图名称链接区域链接区域设定各链接区域设定各链接区域3.2 框架的规划与建立3.2.1 框架与表格1.框架和表格的区别2.使用框架的优缺点：（1）优点 访问者的浏览器不需为每个页面重新加载导航条；每个框架都具有自己的滚动条，因此访问者可以独立滚动这些框架进行浏览。（2）缺点 并不是所有浏览器都提供良好的框架支持；难以实现在不同框架中精确的对齐各个页面元素。3.2.2 规划框架框架最常见的用法就是实现页面导航，一般是将页面划分为一个导航区和一个内容区。这些框架中的每一个都是一个独立的 HTML页面。框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的 URL。框架集文件不在浏览器中显示，只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。3.2.3 创建框架1.选择框架集和框架（1）在“框架”面板中选择框架和框架集（2）在文档窗口中选择框架和框架集2.设置框架集和框架属性(1)设置框架集属性(2)设置框架属性选择要查看或设置属性的框架集，在“属性”检查器中，查看所有框架集属性。3.2.3 创建框架设置框架集属性边框 边框宽度 边框颜色 框架大小 3.2.3 创建框架设置框架属性框架名称 源文件 滚动 不能调整大小 边框及边框颜色，边界宽度和高度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菜单栏构件选项 选选项项作作用用菜单栏名称菜单栏名称默认菜单栏名称为默认菜单栏名称为MenuBar1，该名称不能以汉字命名，可，该名称不能以汉字命名，可以使用字母或者数字。以使用字母或者数字。禁用样式禁用样式单击该按钮，菜单栏变成项目列表，并且按钮名称更改为单击该按钮，菜单栏变成项目列表，并且按钮名称更改为【启用样式启用样式】。菜单栏目菜单栏目在在【属性属性】面板中包括主菜单栏目、一级菜单栏目与二级菜面板中包括主菜单栏目、一级菜单栏目与二级菜单栏目单栏目文本文本在该选项文本框中设置栏目名称。在该选项文本框中设置栏目名称。链接链接该选项可以为菜单栏目添加链接文件，默认情况下为空链接。该选项可以为菜单栏目添加链接文件，默认情况下为空链接。单击单击【浏览浏览】按钮按钮可以选择链接文件。可以选择链接文件。目标目标该选项指定要在何处打开所链接的页面。该选项指定要在何处打开所链接的页面。标题标题该选项为菜单栏目提示文本该选项为菜单栏目提示文本（3）Spry选项卡式面板构件选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。访问者可以通过单击要访问的面板上的选项卡，来隐藏或者显示在选项卡式面板中的内容。当访问者单击不同的选项卡时，构件的面板会相应地打开。（4）Spry折叠构件Spry折叠构件是可折叠的面板，可以将大量内容存储在一个紧凑的空间中。访问者可以通过单击该面板上的选项卡来隐藏或者显示在折叠构件中的内容。折叠面板分为两种：一种是多个面板的折叠式面板构件，一种是只有一个面板的可折叠面板构件。3.3层的运用在Dreamweaver中的层分为两种格式：CSS层和Netscape层格式。（1）CSS层：使用DIV和SPAN标记来定位网页元素的位置。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）多个层的属性设置如果选择多个层，在“属性”检查器中可以对几个层的共同属性进行设置。3.3.2层的操作1.选定层2.移动层3.改变层的大小4.调整层的层次5.对齐层6.层的嵌套7.设置层的可见性：4.调整层的层次方法一：在“属性”检查器的的“Z轴”项中输入要求的叠放顺序 方法二：直接拖动层 6.层的嵌套在层面板中选择一个层，然后按住Ctrl键将选中的层拖到要嵌入的目标层的上方，在目标层名称的周围出现方框时释放鼠标，选中的层就成为目标层的子层。3.3.3层与表格的关系1.使用层设计表格层和表格都是定位工具，两者之间可以互相转换。选择【修改】|【转换】|【层到表格】菜单项，弹出“转换层为表格”对话框。2.防止层的重叠 选择层面板上的“防止重叠”选项。选择【修改】|【排列顺序】|【防止层重叠】菜单项。3.4 CSS样式布局基础和应用使用表格能呈现数据间的关系；能在网页上组织图形和文本实现网页布局。如果需要网页呈现可视化的信息，例如，用语语言合成器朗读，那么表格就不适于用来在这类网页上实现布局，只有使用CSS样式布局才能实现。CSS是网页设计中众多样式的集成，它可以使页面风格统一化和标准化。CSS提供的链接功能可以让所有的网页使用同一种样式，使网页的维护更新变得轻松、高效。3.4.1 CSS样式表概述CSS英文全称为Cascading Style Sheets，中文全称为级联样式表或层叠样式表，更多的人把它称之为样式表，以下简称为CSS样式。1CSS样式含义 CSS是“层叠样式表”的简称，通过CSS可以定制网页中的文本格式，不仅可以控制一个页面的文本格式，采用外部链接的方式还可以控制多个页面的文本格式。CSS样式定义方式有多种，主要有标签CSS样式、类CSS样式和伪类CSS样式3种。3.4.1 CSS样式表概述2CSS样式的功能CSS样式的创建，可以统一定制网页文字的大小、字体、颜色、边框、链接状态等效果。使用CSS设置页面格式时，可将网页要展示的内容与样式设定分开。这样就可让多个网页文件共同使用它，省去了大量重复设置的麻烦。使用CSS可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。3.4.1 CSS样式表概述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样式”面板中包含两种模式：“全部”模式和“正在”模式，在该面板中可进行新建、编辑、删除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个类别：类型、背景、区块、方框、边框、列表、定位、扩展。3.4.3 CSS样式的创建3创建CSS规则(1)基本属性设定网页中最基本的属性设置为网页背景设置与文本设置(2)区域属性设定为了更精确地确定网页元素所在网页中的位置(3)元素特效设定网页中的元素除了自身的属性外，还可以通过CSS样式为其添加其他效果，使其显示效果更加丰富(4)扩展属性设定【扩展】样式属性包括滤镜、分页和指针选项 3.4.3 CSS样式的创建4在网页中插入CSS在网页中可以建立三种不同的定义CSS 样式的方法 类、标签、高级（ID、伪类选择器等）伪类选择：a:link 设定正常状态下链接文字的样式。a:active 设定鼠标单击时链接的外观。a:visited设定访问过的链接的外观。a:hover 设定鼠标放置在链接文字之上时，文字的外观。3.4.4应用自定义的CSS样式 1应用自定义的CSS样式（1）在文档窗口中，选定要应用样式的对象。可以在文档窗口中直接选择对象，也可以使用窗口底部状态栏的标签选择器来选择对象。（2）从“属性”检查器上的“样式”列表中选择要应用的样式。取消对自定义CSS样式的应用3.4.5附加外部CSS样式表CSS样式通常只显示在创建该样式的页面的【CSS样式】面板中，用户可以选用自己文档中的所有样式表，用户也可以选用或链接已存在的样式表并应用到文档中 在“CSS样式”面板，单击面板下方的“附加样式表”按钮，弹出“链接外部样式表”对话框。3.4.6导出外部CSS样式表为了达到样式的共享，可以导出文档中存在的所有样式，步骤如下：（1）打开CSS样式面板，切换到“全部”模式。（2）选择要导出的样式，并单击鼠标右键，从弹出的菜单中选择“导出”，出现“导出样式为CSS文件”对话框。（3）设置样式文件的文件名和文件夹位置，单击“保存”按钮，关闭对话框，完成样式的导出。3.4.7编辑CSS样式表1.编辑当前文档中创建的CSS样式表2.编辑外部CSS样式表编辑外部CSS样式表有两种 3.删除CSS样式 如果不再需要某个CSS样式，则可以将其删除。在【CSS样式】面板中选择要删除的CSS样式，再单击按钮，即可删除该CSS样式。3.4.8 CSS样式的优先顺序（1）如果将两种样式应用于同一文本，在没有冲突的情况下，浏览器显示这两种样式的所有属性；在有冲突的情况下，按CSS样式的优先规则处理冲突属性。（2）发生冲突时，特别说明的属性优先于要继承的属性。例如：body color：green；p color：red；（3）如果应用于同一文本的两种样式发生冲突，则浏览器根据在代码中的顺序优先显示最里面的样式（代码窗口中离文本本身最近的样式）的属性。（4）如果样式表中的属性与HTML标签中的属性发生冲突时，则定义文本最内层的属性优先显示 3.4.9 Spry框架中的CSS设置1Spry面板样式设置（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.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)同一调和混入同一白色调和、混入同一白色调和、混入同一灰色调和、混入同一原色调和、混入同一间色、复色调和互混调和、点缀色同一调和、连贯同一色调和、同色相的调和、同明度的调和、同彩度的调和。(2)近似调和(3)秩序的调和(4)面积的调和(5)同类调和(6)分割调和3.6.3网站中的色彩应用1.网站色彩分析(1)网站风格与色彩设计:公司色、风格色、习惯色(2)网站主题与色彩设计(3)全球网站的主色调(3)全球网站的主色调全球网站的主色调是以蓝色和红色为主 3.6.3网站中的色彩应用2.网页色彩规则（1）色彩搭配原则：色彩的鲜明性、色彩的独特性、色彩的艺术性、色彩搭配的合理性。（2）网页色彩搭配方法：同种色彩搭配、近色彩搭配、对比色彩搭配、暖色色彩搭配、冷色色彩搭配、有主色的混合色彩搭配、文字与网页的背景色对比要突出、（3）网页设计中几种色彩分析及其之间的搭配：红色、黄色、蓝色、绿色、紫色、橙色、白色、黑色、灰色、3.7 网页布局控制3.7.1 布局控制的作用布局控制的作用3.7.2 常常见的网的网页布局布局1.结构布局：构布局：（1）“国国”字型网页布局、（字型网页布局、（2）拐角型网页布局、）拐角型网页布局、（3）左右框架型网页布局、（）左右框架型网页布局、（4）上下框架型网页）上下框架型网页布局、（布局、（5）综合框架型网页布局）综合框架型网页布局、（6）变化型网页布局、（7）封面型网页布局3.7.2 常常见的网的网页布局布局2.艺术布局（1）标题正文型（2）Flash型 3.7.3网网页布局布局补遗1关于第一屏所谓第一屏，是指到达一个网站在不拖动滚动条时能够看到的部分 2有关导航栏的位置导航栏能让用户在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目。