当前位置:文档之家› 网站设计与开发技术教程静态页面制作

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


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)“将表格宽度转换成百分比”和“将表格高度转换成百分 比”按钮是将表格中列的宽度或高度设置为按占文档窗口宽度百分 比表示的当前宽度。
相关主题