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

一、网页布局----表格 二、超链接 三、添加文本 四、插入图像 五、用框架布局页面 一、网页布局 1、布局的实质 布局: 就是在页面上划分出不同的区域，按照设计的原则和方法，把不同的内容放置到不同的位置上，并通过色彩调和出不同的网站基调，使网页内容形成一个有机的整体，充分表达网站主题的过程。 布局的方法 :表格、层、框架 利用表格布局： 在插入面板中选择“常用”标签，点击按钮，弹出 “插入表格”对话框，设置相应的参数来插入表格。也可以通过选择“【插入】→【表格】”菜单命令打开“插入表格”对话框。 边框粗细：表格的边界宽度，单位为像素，表格的属性设置中将详细讲解边框、填充值和间距值的区别。 单元格边距：单元格边框和单元格内容的间隔距离。 单元格间距：单元格和单元格之间的间隔距离。 页眉：把表格的第一行或第一列作为标题行或标题列。 作为标题行或标题列的行或列的内容将以粗体的形式显示。 标题：提供一个显示在表格外的表格标题。 对齐标题：指定表格标题相对于表格的显示位置。 摘要：给出表格的说明。该文本不会显示在用户的浏览器中。 1.表格的属性设置 选中一个单元格 选中一行 选中一列 选中不相邻的单元格(Ctrl) 插入删除行和列（鼠标右键?“表格”选项） 3.单元格属性 例：网页模板的设计 使用模板提高网页制作效率 模板是网页编辑软件生成具有相似结构和外观的一种网页制作功能。如果希望站点中的网页享有某种特性，例如，相同的布局结构，相似的导航栏等内容，模板是是非常有用的。 模板是由两类区域组成的：锁定区域和可编辑区域。当某个文档从某些模板中创建时，可编辑区域则成为唯一可以被改变的地方。 1．直接新建模板 在Dreamweaver中可以直接创建模板文件，具体步骤如下： （1）选择“文件”｜“新建”命令，打开“新建文档”的对话框，在对话框的“常规”选项卡中选择“类别”中的“模板页”中的“HTML模板”选项 2．从现有页面生成模板 对于已经设计好的网页文档，如果觉得有必要作为模板文档，则将其另存为模板即可，具体操作如下： （1）打开要另存为模板的文档网页，选择“文件”｜“另存为模板”命令， （2）打开“另存为模板”对话框，在对话框中，在“站点”下列列表中选择相应的站点，在“另存为”文本框中输入模板的名称，单击“保存”按钮，即可将文件保存为模板。 1.执行“插入表格”命令，弹出“表格”对话框，设置行数为“7”，列数为“7”，表格宽度设置为“930”像素，高设置为“130”像素。单击“确定”按钮，插入一个7行7列的表格。 2.设置表格前3行（单击标签tr）高度为43，后5列宽度为54，即页面头部右上角 3.将第1列前3行单元格合并，设置宽度为215，将第2列前3行单元格合并，设置宽度为481 5.第6行后6列合并，第1列中插入6行1列表格，并设置相应高度 6.设置背景图片和背景颜色 7.插入背景图片 8.将光标至于要创建可编辑区域的位置，选择“插入”｜“模板对象”｜“可编辑区域”命令，打开“新建可编辑区域”对话框 。 9.利用模板创建页面 选择“文件”｜“新建”命令，打开“从模板新建”对话框，在“模板”选项卡中选择站点中的模板，点击创建按钮，就可以创建一个模板页面。 二、超链接 在一个文档中可以创建几种类型的链接： 链接到其它文档或文件（如图形、影片、PDF 或声音文件）的链接。 命名锚记链接，此类链接跳转至文档内的特定位置。 电子邮件链接，此类链接新建一个收件人地址已经填好的空白电子邮件。 空链接和脚本链接，此类链接使您能够在对象上附加行为，或者创建执行 JavaScript 代码的链接。 1.普通超级链接 或者可以点击“浏览”按钮 为图片添加链接 在默认情况下，被链接的文件在当前窗口或框架内打开。要使被链接的文档显示在其他窗口或新的窗口或框架内，则需设置属性面板中的“目标(R)”选项 “目标(R)”的各选项设置如下： _blank。 将链接的文档在一个新的、未命名的浏览器窗口中打开。 _parent。 将链接的文档在该链接所在框架的父框架或父窗口中打开。如果包含链接的框架不是嵌套框架，则所链接的文档在整个浏览器窗口中打开。 _self。 将链接的文档在链接所在的同一框架或窗口中打开，此目标为默认值，即不指定目标，则在同一框架或窗口打开文档。 _top。 将链接的文档在整个浏览器窗口中打开，从而取代当前窗口的所有框架。 ???? 2.锚点链接 锚点链接指向的是本网页中或其他网页中的指定位置。从而使浏览者可以快速到达指定的位置，所以锚点链接特别适合各个章节之间的跳转，以及长篇文字的阅读等。锚点链接和其他链接制作不太相同，在使用前必须先定义一个锚点，然后在其他的地方指向这