网站设计与开发技术教程 第3章 静态页面制作

《网站设计与开发技术教程 第3章 静态页面制作》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、一、网页布局----表格二、超链接三、添加文本四、插入图像五、用框架布局页面静态页面设计一、网页布局1、布局的实质布局:就是在页面上划分出不同的区域，按照设计的原则和方法，把不同的内容放置到不同的位置上，并通过色彩调和出不同的网站基调，使网页内容形成一个有机的整体，充分表达网站主题的过程。布局的方法:表格、层、框架利用表格布局：在插入面板中选择“常用”标签，点击按钮，弹出“插入表格”对话框，设置相应的参数来插入表格。也可以通过选择“【插入】→【表格】”菜单命令打开“插入表格”对话框。“插入表格”对话框行数：新插入的表格的行数，可以更改数值来确定行数。列数：新插入的表格的

2、列数，可以更改数值来确定列数，行、列数控制表格划分的区域个数（行×列）。表格宽度：表格的宽度可以选择是占页面宽度的百分比（单位为百分比）或者固定尺寸（单位为像素）。边框粗细：表格的边界宽度，单位为像素，表格的属性设置中将详细讲解边框、填充值和间距值的区别。单元格边距：单元格边框和单元格内容的间隔距离。单元格间距：单元格和单元格之间的间隔距离。页眉：把表格的第一行或第一列作为标题行或标题列。作为标题行或标题列的行或列的内容将以粗体的形式显示。标题：提供一个显示在表格外的表格标题。对齐标题：指定表格标题相对于表格的显示位置。摘要：给出表格的说明。该文本不会显示在用户的浏览器

3、中。1.表格的属性设置（1）“表格Id”是表格的ID，有时动态更改表格属性时要用到它。（2）“行”和“列”是表格中行和列的数目。（3）“宽”和“高”是表格的宽度和高度，以像素为单位或者是按占浏览器窗口宽度的百分比计算的。（4）“填充”是单元格内容和单元格边界之间的像素数。（5）“间距”是相邻的单元格之间的像素数。（6）“对齐”指表格相对于同一段落中其他元素（如文本或图像）的显示位置。居左、居中还是居右。（7）“边框”指表格边框的宽度（以像素为单位）（8）“清除列宽”按钮和“清除行高”按钮是清除表格中所有显示指定的行高和列宽值。（9）“将表格宽度转换成像素”和“将表格高度

4、转换成像素”按钮是将表格中列的宽度或高度设置为以像素为单位的当前数值。（10）“将表格宽度转换成百分比”和“将表格高度转换成百分比”按钮是将表格中列的宽度或高度设置为按占文档窗口宽度百分比表示的当前宽度。（11）“背景颜色”指定表格的背景颜色。（12）“边框颜色”指定表格的边框颜色。（13）“背景图像”指定表格的背景图像。选中一个单元格选中一行选中一列选中不相邻的单元格(Ctrl)插入删除行和列（鼠标右键“表格”选项）2．单元格的操作3.单元格属性（1）“合并单元格”按钮可将所选的多个连续单元格、行或列合并为一个单元格。（2）“拆分单元格”按钮可将一个单元格分成两个或

5、是更多的单元格。单击该按钮，会打开“拆分单元格”对话框，如图所示。在该对话框中可以选择将选中的单元格拆分成“行”或“列”（3）“水平”文本框：设置单元格内对象的水平对齐方式。（4）“垂直”文本框：设置单元格内对象的垂直对齐方式。（5）“宽”和“高”文本框：设置单元格的宽度和高度，可以用像素或百分比来表示。（6）“不换行”复选框：设置单元格文本是否换行。如果选择该复选框，则当输入的数据超出单元格宽度时，单元格会自动调整宽度来容纳数据。（7）“标题”复选框：如果选择该复选框，可以将所选单元格的格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体并且居中对齐。（8

6、）“背景”文本框：设置单元格的背景图像。（9）“背景颜色”文本框：设置单元格的背景颜色。（10）“边框”文本框：设置单元格边框的颜色。例：网页模板的设计使用模板提高网页制作效率模板是网页编辑软件生成具有相似结构和外观的一种网页制作功能。如果希望站点中的网页享有某种特性，例如，相同的布局结构，相似的导航栏等内容，模板是是非常有用的。模板是由两类区域组成的：锁定区域和可编辑区域。当某个文档从某些模板中创建时，可编辑区域则成为唯一可以被改变的地方。1．直接新建模板在Dreamweaver中可以直接创建模板文件，具体步骤如下：（1）选择“文件”｜“新建”命令，打开“新建文档”的

7、对话框，在对话框的“常规”选项卡中选择“类别”中的“模板页”中的“HTML模板”选项2．从现有页面生成模板对于已经设计好的网页文档，如果觉得有必要作为模板文档，则将其另存为模板即可，具体操作如下：（1）打开要另存为模板的文档网页，选择“文件”｜“另存为模板”命令，（2）打开“另存为模板”对话框，在对话框中，在“站点”下列列表中选择相应的站点，在“另存为”文本框中输入模板的名称，单击“保存”按钮，即可将文件保存为模板。1.执行“插入>表格”命令，弹出“表格”对话框，设置行数为“7”，列数为“7”，表格宽度设置为“930”像素，高设置为“13