静态网页设计3设计网页布局.docx

1、静态网页设计3设计网页布局设计网页布局本章要求： 1掌握插入表格的方法及表格属性的设置 2掌握单元格格式的设置、添加和删除行或列以及单元格的合并及拆分 3掌握布局表格和布局单元格的绘制、属性设置和内容编辑4悉在网页中插入框架和嵌套框架，制作框架页面 重点：表格的插入和单元格的编辑，布局表格和布局单元格的绘制及编辑。难点：表格数据的导入和导出，布局单元格的排版及嵌套布局表格的使用。一表格布局设计网页的第一步是设计版面布局。所谓布局，就是以最适合浏览的方式将图片、文字以及表单等元素排放在页面的不同位置。网页设计常用布局方法是表格布局。另外一种方便的工具，就是使用框架。框架的作用就是把浏览器窗口划分

2、为若干个区域，每个区域可以分别显示不同的网页。案例：在网页中插入表格，不显示边框只用来布局；在单元格内插入文字、图片，设置丰富的效果； 通过拆分单元格或者插入嵌套表格来细化某些单元格内部的布局。 1插入表格 插入表格的具体操作步骤如下：1）将光标定位。选择【插入】【表格】命令或在“常用”插入栏中单击“表格”按钮 ，打开“表格”对话框。2）在该对话框中可进行表格行数、列数、表格宽度、边框粗细、单元格边距等属性设置。3）单击”确定“按钮即可按设置创建表格。2设置表格属性 选中表格后其“属性”面板，在其中可进行表格的属性设置，各项参数的含义如下：“表格Id”下拉列表框：为表格进行命名。“行”和“列”

3、文本框：设置表格的行数和列数“宽”和“高”文本框：设置表格的宽度和高度，在其后的列表框中可选择单位像素和百分比“填充”文本框：设置单元格边界和单元格内容之间的距离。“间距”文本框：设置相邻单元格之间的距离。2设置表格属性“对齐”下拉列表框：设置表格与文本或图像等网页元素之间的对齐方式，只限与表格同段落的元素。“边框”文本框：设置表格边框的粗细。“边框颜色”文本框：设置表格边框的颜色。“背景颜色”文本框：设置表格的背景颜色。“背景图像”文本框：设置表格背景图像，单击文本框右侧的“浏览文件”按钮 ，可在打开的“选择图像源文件”对话框中选择背景图像。“清除列宽”按钮 、“清除行高”按钮 ：分别为清除

4、已经指定过的列宽和行高。 “将表格宽度转换成像素”按钮：将表格宽度由百分比转为像素“将表格宽度转换成百分比”按钮：将表格宽度由像素转换为百分比。 3设置单元格、行或列的属性 先选中单元格、行或列，在“属性”面板中进行设置， 属性面板如图：1）水平：设置选定单元格内元素的水平对齐方式，有“默认”、“左对齐”、“居中对齐”和“右对齐”4种选择。2）垂直：设置选定单元格内元素的垂直对齐方式，有“默认”、“顶端”、“居中”、“底部”和“基线”5种选择。3）宽、高：设置单元格的宽度和高度。4）不换行：选中此选项可以使单元格的宽度自动调整来适应输入内容的增加。 3设置单元格、行或列的属性5）标题：选中此选

5、项可以将单元格设置为表格的表头元素。一般表格的第一行、第一列为表头元素，表头元素的默认格式为粗体、居中。6）背景：设置选定单元格的背景图像。7）背景颜色：设置选定单元格的背景颜色。8）边框：设置选定单元格的边框颜色。9）“合并单元格”按钮：合并所选单元格，选择的区域必须为矩形才可以合并为一个单元格。10）“拆分单元格”按钮：拆分单元格为行或列，在弹出的对话框中选择将单元格拆分成行还是列，以及输入拆分的行数或者列数。 4表格基本操作：1）增加表格行与列 增加行或列的步骤如下。将光标置于要插入行或列的单元格内。右击，在快捷菜单中选“表格”“插入行”/“插入 列”/“插入行或列”，也可选择菜单“修改

6、”“表格”“插入 行”/“插入列”/“插入行或列”。“插入行”：在所选单元格上面插入一行。“插入列”：在所选单元格左边插入一列。“插入行或列”：弹出如图4-8所示对话框，可以选择插入“行”或“列”，输入插入的行数或者列数，选择插入位置，单击“确定”按钮。 2）删除表格行与列删除行或列的步骤如下。 选定要删除的行或列。 右击，在快捷菜单中选择“表格”“删除行”/“删除 列”，也可选择菜单“修改”“表格”“删除行”/“删除列”命令，或者按Delete键也可以删除行或列。3）合并单元格选定要合并的单元格。执行下列操作之一： 选择菜单“修改”“表格”“合并单元格”命令。 右击，在快捷菜单中选择“表格”

7、“合并单元格”命令。 单击单元格属性面板上的“合并所选单元格”按钮 4）拆分与合并单元格：选定要拆分的单元格，执行下列操作之一： 选择菜单“修改”“表格”“拆分单元格”命令。 右击，在快捷菜单中选择“表格”“拆分单元格”命令。 单击单元格属性面板上的“拆分单元格为行或列”按钮。打开如图所示的“拆分单元格”对话框，设置拆分为行或列，输入行数或列数，单击“确定”按钮。二、布局表格排版网页案例： 制作思路：在布局模式下插入布局表格；在布局表格中插入布局单元格将页面划分为若干个区域，规划出页面的布局形式；在单元格内添加文字、图片等对象丰富网页效果。1.布局表格基本知识在Dreamweaver中，表格有

8、标准模式、扩展表格模式和布局模式3种模式。布局模式是为方便页面布局而专门设计的一种模式，以使用表格作为基础结构来设计页面，结合了表格和层的优点。在布局模式中，可以在添加内容前使用布局表格和布局单元格来对页面进行布局。布局单元格可以方便地移动和调整大小，为页面排版提供更大的灵活性。2.绘制布局单元格和表格1）绘制表格。 绘制布局表格的步骤如下： 切换到布局模式。 单击“插入”面板“布局”类别中“绘制布局表格”按钮，或者选择菜单“插入记录”“布局对象”“布局表格”命令。 鼠标指针显示为“”形状，在页面区域中拖动鼠标绘制出布局表格。 创建的布局表格会自动对齐页面顶端。表格的左上角有一个“布局表格”的

9、标签，便于区分和选择表格。 2）绘制布局单元格。 绘制布局单元格的步骤如下：切换到布局模式。单击“插入”面板“布局”类别中“绘制布局单元格”按钮，或者选择菜单“插入记录”“布局对象”“布局单元格”。 鼠标指针显示为“”形状，在表格区域中拖动鼠标绘制布局单元格 注意：创建多个单元格，可以按住Ctrl键并拖动指针来创建每个布局单元格，要注意布局单元格不能重叠 。 3.设置布局表格/布局单元格格式 选择要设置的表格，在“属性”面板中将显示布局表格的“属性”设置 ：部分参数的含义如下：1）宽：设置表格宽度。 “固定”单选按钮，在文本框中输入以像素为单位的宽度值； “自动伸展”单选按钮，表格最右边的列可

10、以自动伸展。设计的布局都会充满浏览器的窗口。 三、框架布局案例: 制作思路：先制作主体框架页面，再制作框架各区域页面，最后设置链接和背景图片。1.基本知识1）框架技术主要通过两种类型的元素来实现，一个是框架（Frame），另一个是框架集（Frameset），框架表示的是具体的元素，而框架集表示的则是技术。 2）框架的主要作用是将浏览器窗口分割成几个相对独立的小窗口，浏览器可以将不同网页文件同时传送到这几个小窗口中，这样就可以同时浏览不同的网页文件。 2.创建框架 1）使用预置框架集。 修改”“框架集”子菜单 或“插入记录”HTML“框架”子菜单 中，选择框架样式。如右图：2）自定义框架。执行“

11、窗口”“框架”命令 ，打开框架面板，在“设计”视图中，拖动任何一条边框，可以是垂直、水平分割文档或已有的框架。3.保存框架和框架集1）保存全部：执行“文件”“保存全部”菜单命令，保存所有文件。2）保存框架集文件：保存框架集文件，执行“文件”“保存框架页”菜单命令或执行“文件”“框架集另存为”菜单命令。 3）保存框架文件：在“设计”视图中选中要保存的框架，执行“文件”“保存框架”菜单命令或执行“文件”“框架另存为”菜单命令即可。 4.设置框架集和框架属性1）框架集面板2）“属性”面板中的各项参数边框：设置框架是否有边框。 边框宽度：设置框架集中被选中边框的宽度 。 边框颜色：设置边框的颜色。 “

12、行列选定范围”区域 ：设置选定框架集的各行和各列的框架大小 1）框架面板2）“属性”面板中的各项参数说明 ：框架名称：定义框架的名称。 源文件：指定在框架当中显示的框架网页的路径 。滚动：设置是否让框架显示滚动条，在该选项下拉列表框中有4种选项：否、是 、自动 、默认 。不能调整大小：若选中，表示当浏览器打开这个框架网页时，不可以改变框架的尺寸。 边框：在浏览器中查看框架时显示或隐藏当前框架的边框。 5.为框架设置链接 1）指定目标 控制超链接的目标文件在哪一个框架内显示的方法是在A标记符内使用target属性，格式为： 超链接点。2）目标框架名 具体体操作步骤如下： 首先选择一个对象，然后为

13、该对象创建超链接。 选择链接的页面，单击“属性”面板“目标”下拉列表框。 如图所示：四CSS样式的使用（一）基本概念：1.CSS又称层叠样式表，是一系列格式设置规则，能控制WEB页面内容的外观。2.CSS样式的类型：1）类CSS样式：（自定义CSS规则）：该样式属性应用于任何文本范围或文本块。2）HTML标签：该类型实际上是对某一现有的HTML标签进行重新定义。当创建或修改这类样式时，文档中所有应用该标记的文本格式都会自动被更新。3）高级CSS样式：重新定义特定元素组合的格式设置，或重新定义CSS允许的其他选择器表单的格式设置。（二）创建CSS样式1.选择文档中要应用自定义样式的对象。2“窗口

14、“菜单“CSS样式“，打开CSS样式窗口。打开CSS样式面板（窗口/CSS样式），单击“新建样式”按钮。3在CSS样式窗口中右键单击，从弹出快捷菜单中选择“新建“命令，既可打开图6-1“新建CSS样式“对话框。名称：指定CSS样式的名称。必须以英文字母并点号开头。若没有输入点号，系统自动输入。类型：默认第一项。定义在：1）新建样式表文件：将css样式保存在站点文件夹中。2）仅对该文档：设置得css样式只对当前文档起作用。（三）CSS属性设置1、使用CSS样式定义对话框单击样式面板中的编辑按钮，弹出“CSS样式定义”对话框。（1）、类型：大小（px可以有效防止在浏览器中显示的信息与文本的设置情况

15、不一致；pt设定的字号随显示器的分辨率的变化而调整大小，可以防止不同分辨率显示器中字体大小不一致的现象）：样式（是否斜体、偏斜体）：修饰（向文本添加下划线、上划线、删除线或使文本闪烁）：变量（设置文本中的“小型大写字母”，以缩小小大写字母的相对大小）：大小写（将每个单词的首字母大写或将文本设置为全部大写或小写）：（2）、背景设定重复（设置背景图像的重复方式）：附件（设定图像是否跟随网页一同滚动）：（3）、边框设定：（4）、列表设定：（5）、扩展设定：分页（为网页添加分页符号）：光标（改变鼠标形状）：hand手、crosshair交叉十字、text文本选择符号、wait、default、help

16、、e-resize向东的箭头、ne-resize向东北方的箭头、n-resize向北箭头、nw-resize向西北的箭头、w-resize向西的箭头、sw-resize向西南、s-resize向南、se-resize向东南、auto鼠标正常。）过滤器（使用CSS语言实现的滤镜效果）：（四）应用CSS样式：对于标签样式和CSS选择器，样式自动应用于网页。对于自定义样式，需要特别设定应用范围。1、应用：选择要应用的对象，在属性面板的“类”列表中选择定义的样式。或者右键单击要使用的“CSS样式”，从快捷菜单中选择“套用”。2、外部CSS样式文件的使用1）创建外部样式文件：在新建CSS样式对话框中，选

17、择“定义在”为“新建样式表文件”；输入名称，单击确定，给外部样式文件命名，选择保存的路径。单击保存。设置样式的各项属性；单击确定。2）将内部样式表导出为外部样式：（将当前页中创建的样式，导出成为独立的样式表文件）。打开“样式”面板，单击右上角的控制菜单按钮，选择“导出”命令，选择要导出的文件夹，然后按“保存”。3）链接外部样式：单击样式面板底部的“附加样式表”按钮；选择“添加为”为“链接”，单击“浏览”按钮，选择要链接的CSS样式文件，单击确定。编辑外部样式表：在“样式”面板中选择样式表文件，（删除链接外部样式表、编辑样式表。）（五）创建标签样式如：定义标签，字体为“楷体GB2312”，行高设

18、定为“20px”，颜色设定为“深蓝色”。步骤如下：在样式面板中，单击“新建CSS样式”按钮，弹出“新建CSS样式”对话框。选择类型为“标签（重新定义特定标签的外观）”选项；标签下选择P标签；定义在选择“仅对文档”。单击“确定”按钮，进行相应的设定，单击“确定”。（六）创建CSS选择器若要为具体某个标签组合或所有包含特定ID属性的标签定义格式，则选择“使用CSS选择器”创建样式。五、小结:通过本章的学习，能合理的对网页进行布局设计，掌握表格的插入及属性设置，对单元格进行合并和拆分，能在表格中熟练的插入和编辑各种对象，掌握布局表格和布局单元格的绘制；掌握向网页中插入框架、对框架各区域进行编辑保存的方法，能制作较为复杂的框架页面。六、作业： 1在表格中可以插入哪些对象？ 2怎样拆分和合并单元格？ 3怎样将Excel中的数据表格导入到Dreamweaver中？ 4简述使用布局视图意义。 5如何创建框架组？ 6在框架面板中怎样选择框架？ 7怎样在框架中打开文档？ 广州展柜，广州展柜设计，广州展柜定制，展柜定做，化妆品展柜,珠宝展柜,展柜设计,手机展柜,展柜效果图,展柜制作,广州展柜厂,展柜设计效果图,展柜,融润展柜,行润装饰