网页设计实用-第3章技术方案.pptx

第3章 网页设计布局工具综合应用; 3.1 表格 3.2 超链接 3.3 创建并使用外部CSS样式 3.4 框架 3.5 Div+CSS;表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单等元素有序地显示在页面上，让我们可以设计出漂亮的页面。使用表格排版的页面在不同平台、不同分辨率的浏览器里都能保持其原有的布局，而在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。;将结合“旅游新闻”页面的实现，为大家介绍表格的基本操作过程。 ;1．插入表格 在文档窗口中，将光标放在需要创建表格的位置，单击“插入”→“常用”→“表格”命令； 或者选择“插入”→“表格”命令，弹出“表格”对话框。;;2．选择表格 （1）选择整个表格 （2）选择单个单元格 （3）选择连续的单元格 （4）选择不连续的单元格 （5）选择行或列 ;3．调整表格的大小 选取整个表格后，将鼠标放在表格边框周围的黑色小方块上，鼠标变为双箭头后按住鼠标左键拖动，即可改变表格大小。 把鼠标放在需要调整列的边框处，鼠标变为 时，按住鼠标左键拖动即可改变行或列的大小。;4．向表格填加内容 在建立的无边框两行两列的表格中填加内容。首先在第一行第一列和第二列输入内容，输入完成后，表格会根据内容自动调整单元格的大小，如图3-8所示。;5．插入行或列 （1）插入单行或单列 （2）插入多行或多列 单击一个单元格，选择“修改”→“表格”→“插入行或列”命令，弹出“插入行或列”对话框，在其中选择“行”或“列”选项，如左图所示。然后在“插入行或列”对话框中设置需要插入的行或列的数目，如右图所示。 ;6．删除行或列 7．拆分和合并单元格 8．设置表格属性 9．设置单元格属性 ;在“属性”面板中可以设置表格的各项属性参数。 （1）表格ID：设置表格的名称。该名称通常在编写代码时用到，一般不需要设定。 （2）行和列：表格中行和列的数目。可以通过修改两个文本框的数值来改变表格的行数或列数。 （3）宽和高：是以像素为单位或按占浏览器窗口宽度的百分比计算的表??宽度和高度。通常不需要设置表格的高度。 （4）填充：即单元格边距是单元格内容和单元格边框之间的距离。如果将填充值设为5，则得到如图3-15所示的效果。 （5）间距：即单元格间距是相邻的单元格之间的距离。如果将间距设为5，则得到如图3-16所示的效果。 ;10．CSS风格设置 步骤1：给“旅游新闻”设置文字大小、背景图片等。 步骤2：给所有新闻标题信息设置文字风格，使用类名选择器，类名为“newslist”。 步骤3：为表格设置外边框，颜色为“#adcf7c”，使用类名选择器，名称为“table_border”。;使用表格进行网页整体布局，将各种不同的网页元素准确定位和整齐规范地展现出来，创造出友好、精美的界面效果，并确保在不同大小的窗口和屏幕分辨率下都能正常显示。 将复杂的页面结构设计出来，首先要掌握嵌套表格技术，可以实现化繁为简，并能保证每个版块的相对独立。;最外层表格结构;3.1.3 表格布局应用实例;1．新建网页 新建网页文件，保存新建文档为index.html。设置网页标题为“乐山乐水”。 2．设置网页整体风格 使用body作为选择器，设置页面的字体属性“Font-family”为“宋体”，“Font-size”为12像素，“方框”分类中的上边距“margin-top”值为0，使页面内容与上边界紧贴。 ;3．制作首页页眉 （1）在网页中插入一个2行1列的表格，宽度为1000像素，在表格“属性”面板中设置表格为“居中对齐”。在第1行中嵌入2行2列的表格，宽度设为100%。 （2）在250×90大小的位置插入网页Logo（标志），图片名为logo.png。 （3）在750×30大小的单元格中嵌套1行7列的表格“导航表格1”，此表格宽度为257像素且水平居右对齐，第1、3、5、7列的宽度为85像素，第2、4、6列的宽度为1像素。;导航表格1;（4）嵌套1行8列的表格“导航表格2”，水平居中排列。 此表格宽度为257像素，高度为47像素，第1列和第8列的宽度设为11像素，其余单元格自动均分。在第1列插入图片navi_left.jpg，第8列插入图片navi_right.jpg。 第2列到第7列需设置背景图片navi_bg.jpg，由于此图片大小为1×47，因此需要重复铺设。;在第2列到第7列单元中输入文字内容，且水平居中排列。设置名为“navi_text”的类选择器，文字大小设为14像素。 ;（5）在大小为1000×270的单元格中插入Flash动画，文件名为banner.swf。其操作方法如下：在“插入”面板中选择“常用”→“媒体”→“SWF”命令。;4．设置页面主体内容