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

1．直接新建模板
在Dreamweaver中可以直接创建模板文件，具体步骤 如下： （1）选择“文件”｜“新建”命令，打开“新建文档” 的对话框，在对话框的“常规”选项卡中选择“类别” 中的“模板页”中的“HTML模板”选项
2．从现有页面生成模板
对于已经设计好的网页文档，如果觉得有必要作为模板 文档，则将其另存为模板即可，具体操作如下：
（3）“水平”文本框：设置单元格内对象的水平对齐方式。 （4）“垂直”文本框：设置单元格内对象的垂直对齐方式。 （5）“宽”和“高”文本框：设置单元格的宽度和高度，可以用 像素或百分比来表示。 （6）“不换行”复选框：设置单元格文本是否换行。如果选择该 复选框，则当输入的数据超出单元格宽度时，单元格会自动调整宽 度来容纳数据。 （7）“标题”复选框：如果选择该复选框，可以将所选单元格的 格式设置为表格标题单元格。默认情况下，表格标题单元格的内容 为粗体并且居中对齐。 （8）“背景”文本框：设置单元格的背景图像。 （9）“背景颜色”文本框：设置单元格的背景颜色。
（1）打开要另存为模板的文档网页，选择“文件”｜ “另存为模板”命令，
（2）打开“另存为模板”对话框，在对话框中，在 “站点”下列列表中选择相应的站点，在“另存为” 文本框中输入模板的名称，单击“保存”按钮，即可 将文件保存为模板。
3.模板制作过程：
1.执行“插入>表格”命令，弹出“表格”对话框，设置 行数为“7”，列数为“7”，表格宽度设置为“930”像素， 高设置为“130”像素。单击“确定”按钮，插入一个7行 7列的表格。
（ 11）“背景颜色”指定表格的背景颜色。 （12）“边框颜色”指定表格的边框颜色。 （13）“背景图像”指定表格的背景图像。
2．单元格的操作
选中一个单元格 选中一行 选中一列 选中不相邻的单元格(Ctrl) 插入删除行和列（鼠标右键“表格”选项）

3.单元格属性
（1）“合并单元格”按钮 可将所选的多个连续单元格、行或 列合并为一个单元格。 （2）“拆分单元格”按钮 可将一个单元格分成两个或是更多 的单元格。单击该按钮，会打开“拆分单元格”对话框，如图 所示。在该对话框中可以选择将选中的单元格拆分成“行”或 “列”
作为标题行或标题列的行或列的内容将以粗体的形式显示。 标题：提供一个显示在表格外的表格标题。 对齐标题：指定表格标题相对于表格的显示位置。 摘要：给出表格的说明。该文本不会显示在用户的浏览器
中。
1.表格的属性设置
（1）“表格Id”是表格的ID，有时动态更改表格属性时要用到它。 （2）“行”和“列”是表格中行和列的数目。 （3）“宽”和“高”是表格的宽度和高度，以像素为单位或者 是按占浏览器窗口宽度的百分比计算的。 （4）“填充”是单元格内容和单元格边界之间的像素数。 （5）“间距”是相邻的单元格之间的像素数。 （6）“对齐”指表格相对于同一段落中其他元素（如文本或图 像）的显示位置。居左、居中还是居右。 （7）“边框”指表格边框的宽度（以像素为单位）
2.设置表格前3行（单击标签<tr>）高度为43，后5列宽 度为54，即页面头部右上角
3.将第1列前3行单元格合并，设置宽度为215，将第2列 前3行单元格合并，设置宽度为481
4.将第4行单元格合并，并插入宽度为100%的表格，1行6列
5.第6行后6列合并，第1列中插入6行1列表格，并设置相应 高度
表格宽度：表格的宽度可以选 择是占页面宽度的百分比（单 位为百分比）或者固定尺寸（ 单位为像素）。
边框粗细：表格的边界宽度，单位为像素，表格的属性设 置中将详细讲解边框、填充值和间距值的区别。
单元格边距：单元格边框和单元格内容的间隔距离。 单元格间距：单元格和单元格之间的间隔距离。 页眉：把表格的第一行或第一列作为标题行或标题列。
（10）“边框”文本框：设置单元格边框的颜色。
例：网页模板的设计
使用模板提高网页制作效率
模板是网页编辑软件生成具有相似结构和外观的一种 网页制作功能。如果希望站点中的网页享有某种特性， 例如，相同的布局结构，相似的导航栏等内容，模板 是是非常有用的。
模板是由两类区域组成的：锁定区域和可编辑区域。 当某个文档从某些模板中创建时，可编辑区域则成为 唯一可以被改变的地方。
6.设置背景图片和背景颜色
7.插入背景图片
8.将光标至于要创建可编辑区域的位置，选择“插入”｜“模 板对象”｜“可编辑区域”命令，打开“新建可编辑区域” 对话框 。
9.利用模板创建页面
选择“文件”｜“新建”命令，打开“从模板新建”对话框， 在“模板”选项卡中选择站点中的模板，点击创建按钮，就 可以创建一个模板页面。
静态页面设计
一、网页布局----表格 二、超链接 三、添加文本 四、插入图像 五、用框架布局页面
标题栏 插入栏 工具栏 文档窗口
标签选择器
菜单栏 面板组
“文件” 面板
属性检查器
一、网页布局
1、布局的实质
布局: 就是在页面上划分出不同的区域，按照设计的原则 和方法，把不同的内容放置到不同的位置上，并通过色彩 调和出不同的网站基调，使网页内容形成一个有机的整体， 充分表达网站主题的过程。
布局的方法 :表格、层、框架 利用表格布局： 在插入面板中选择“常用”标签，点击按
钮，弹出 “插入表格”对话框，设置相应的参数来插入表 格。也可以通过选择“【插入】→【表格】”菜单命令打 开“插入表格”对话框。
“插入表格”对话框
行数：新插入的表格的行数， 可以更改数值来确定行数。
列数：新插入的表格的列数， 可以更改数值来确定列数，行 、列数控制表格划分的区域个 数（行×列）。
（8）“清除列宽”按钮 和“清除行高”按钮 是清除表格中 所有显示指定的行高和列宽值。
（9）“将表格宽度转换成像素”和“将表格高度转换成像素”按 钮是将表格中列的宽度或高度设置为以像素为单位的当前数值。
（10）“将表格宽度转换成百分比”和“将表格高度转换成百分 比”按钮是将表格中列的宽度或高度设置为按占文档窗口宽度百分 比表示的当前宽度。