[说明]静态网页设计3：设计网页布局

《[说明]静态网页设计3：设计网页布局》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

2、区域,每个区域可以分别显示不同的网页。案例：①在网页中插入表格，不显示边框只用來布局；②在单元格内插入文字、•图片，设置丰富的效果；③通过拆分单元格或者插入嵌套表格来细化某些单元格内部的布局。enriquelqlesiasbertiehiqqinsmariahcareyhayleywestenraeaglescelinedion新歌推荐老歌金曲欧美经典卡星是向伕年湾日练仔望不方大火周牙生训七仰珑反周焰一月黄圣依刘若英S.HE张杰陈小吞弦子周杰伦光良周呈畅飞儿乐团BEYOND•hero郑倉化•casabianca罗大佑•whenyoubelieve■neversaygoodbye

3、•hotelCalifornia周华健•myheartwillgoon邓丽君•nomatterwhat张学友•yesterdayoncemore刘徳华•rhythmoftherain陆百强•1bdicveicanfly路空子生求天样人何阔手的家雪友步福雨生海水你回孰朋漫祝冰一热门专辑boyzonecarpentersjasondonovanr.kdly专辑歌词MV排行榜分类搜索o豎©園圍纟''時☆收姦夹g錶画•因皆咚地址GD：musicindex.htmlV目转到懺接“"孑天鑽咅乐网—MicrosoTtInternetExplorer文件g）编辑（2）芟若（V）收注⑥工貝①

4、帮肋QP1.插入表格插入表格的具体操作步骤如下：1）将光标定位。选择【插入】-＞【表格】命令或在“常用”插入栏中单击“表格”按钮，打开“表格”对话框。2）在该对话框屮可进行表格行数、列数、表格宽度、边框粗细、单元格边距等属性设置。3）单击”确定“按钮即可按设置创建表格。2.设置表格屈性选屮表格后其“属性”面板，在其屮可进行表格的属性设置，各项参数的含义如下:列宽400像素V表格Id埴充5间距10对齐默认边框

5、类C）无背杲颜色匚］边框颜色匚］“表格Id”下拉列表框：为表格进行命名。“行”和“列”文本框：设置表格的行数和列数“宽”和“高”文本框：设置表格的宽度和高度，在其后的列表框

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

7、为像素“将表格宽度转换成百分比”按钮：将表格宽度由像索转换为百分比。3.设置单元格、行或列的属性先选中单元格、行或列，在“属性”面板中进行设置，属性面板如图:字体j默认字体大小上口

8、12三：三*丝目水平钦认1-1宽高1不换行口背最1◎1匚［页面属上垂直默认标题1丨背最濒色I-;

9、

10、3边框「」「样式无y格式B1呈金M垦链接1）水平：设置选定单元格内元素的水平对齐方式，有“默认”、“左对齐”、“居屮对齐”和“右对齐”4种选择。2）垂直：设置选定单元格内元素的垂直对齐方式，有“默认”、“顶端”、“居中”、“底部”和“基线”5种选择。3）宽、高：设置单元格的宽度和高度。4）不换行：选屮

11、此选项可以使单元格的宽度H动调整来适应输入内容的增加。3.设置单元格、行或列的属性5）标题：选中此选项可以将单元格设置为表格的表头元素。一般表格的第一行、第一列为表头元素，表头元素的默认格式为粗体、居中。6）背景：设置选定单元格的背景图像。7）背景颜色：设置选定单元格的背景颜色。8）边框：设置选定单元格的边框颜色。9）“合并单元格”按钮：合并所选单元格，选择的区域必须为矩形才可以合并为一个单元格。10）“拆分单元格”按钮：拆分单元格为行或列，在弹出的对话框屮选择将单兀格拆分成行还是列，以及输