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

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

2、 l列数列数：新插入的表格的列数，可以更改数值来确定列数，行、列数控制表格划分的区域个数（行列）。l表格宽度表格宽度：表格的宽度可以选择是占页面宽度的百分比（单位为百分比）或者固定尺寸（单位为像素）。l 边框粗细边框粗细：表格的边界宽度，单位为像素，表格的属性设置中将详细讲解边框、填充值和间距值的区别。l 单元格边距：单元格边距：单元格边框和单元格内容的间隔距离。l 单元格间距：单元格间距：单元格和单元格之间的间隔距离。l 页眉：页眉：把表格的第一行或第一列作为标题行或标题列。 作为标题行或标题列的行或列的内容将以粗体的形式显示。l 标题：标题：提供一个显示在表格外的表格标题。l 对齐标题：对

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

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

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

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

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

8、按钮，插入一个7行7列的表格。n2.设置表格前3行（单击标签）高度为43，后5列宽度为54，即页面头部右上角3.模板制作过程：n3.将第1列前3行单元格合并，设置宽度为215，将第2列前3行单元格合并，设置宽度为481n 4.将第4行单元格合并，并插入宽度为100%的表格，1行6列5.第6行后6列合并，第1列中插入6行1列表格，并设置相应高度6.设置背景图片和背景颜色7.插入背景图片8.将光标至于要创建可编辑区域的位置，选择“插入”“模板对象”“可编辑区域”命令，打开“新建可编辑区域”对话框 。9.利用模板创建页面n选择“文件”“新建”命令，打开“从模板新建”对话框，在“模板”选项卡中选择站点

9、中的模板，点击创建按钮，就可以创建一个模板页面。二、超链接 n在一个文档中可以创建几种类型的链接：n 链接到其它文档或文件（如图形、影片、PDF 或声音文件）的链接。n 命名锚记链接，此类链接跳转至文档内的特定位置。n 电子邮件链接，此类链接新建一个收件人地址已经填好的空白电子邮件。n 空链接和脚本链接，此类链接使您能够在对象上附加行为，或者创建执行 JavaScript 代码的链接。1.普通超级链接或者可以点击“浏览”按钮为图片添加链接n在默认情况下，被链接的文件在当前窗口或框架内打开。要使被链接的文档显示在其他窗口或新的窗口或框架内，则需设置属性面板中的“目标(R)”选项“目标(R)”的各

10、选项设置如下：n _blank。 将链接的文档在一个新的、未命名的浏览器窗口中打开。n _parent。 将链接的文档在该链接所在框架的父框架或父窗口中打开。如果包含链接的框架不是嵌套框架，则所链接的文档在整个浏览器窗口中打开。 n _self。 将链接的文档在链接所在的同一框架或窗口中打开，此目标为默认值，即不指定目标，则在同一框架或窗口打开文档。 n _top。 将链接的文档在整个浏览器窗口中打开，从而取代当前窗口的所有框架。 2.锚点链接n 锚点链接指向的是本网页中或其他网页中的指定位置。从而使浏览者可以快速到达指定的位置，所以锚点链接特别适合各个章节之间的跳转，以及长篇文字的阅读等。锚

11、点链接和其他链接制作不太相同，在使用前必须先定义一个锚点，然后在其他的地方指向这个锚点。（1）设置锚点n在设计视图中，将光标移动到需要设置锚点的地方，或选择需要作为锚点的文本。n选择“插入”“命名锚记”命令，或按下快捷键Ctrl+Alt+A，或单击“常用”插入栏中的“命名锚记”按钮，将打开“命名锚记”对话框 注：如果在设计视图中没有看到锚记，则可以选择在菜单“查看”“可视化助理”“不可见元素”命令来进行查看。（2）创建锚点链接n选择要建立链接的文本或图像。n在“属性面板”的“链接”文本框中输入#号和锚记名称。例如：输入“#1”。 3E-mail链接n E-mail链接也是众多网站上网页的重要内

12、容之一，浏览者只需要在其上单击鼠标，就可以打开邮件发送程序，与企业或个人进行交流。电子邮件链接与其他超级链接稍微有不同，链接地址不再以http开头，而是mailto，设置链接的方式与其他链接一样。n在设计视图中，选择要作为电子邮件链接的文字或将光标置于需要设置电子邮件链接的地方。n选择菜单“插入”“电子邮件链接”命令，或单击“常用”插入栏中的“电子邮件链接”按钮，将打开“电子邮件链接”对话框 n“属性”面板窗口如图所示，也可以在文档窗口输入文字，在属性窗口中修改链接的E-mail地址。 4.空链接n相比上面介绍的其他所有超链接种类，空链接最为独特，它是一种没有链接对象的链接。空链接中的目标UR

13、L是用“#”来表示的，在制作链接时，只要在“属性”面板的“链接”文本框中录入“#”标记即可 5脚本链接n脚本链接是一种特殊类型的链接，通过单击带有脚本链接的文本或对象，可以运行相应的脚本及函数（如JavaScript、VBScript等），从而为浏览者提供许多附加信息。 n在文档窗口，选择要创建链接的文本或其他对象。n在“属性”面板中的“链接”文本框中输入“JavaScript：”，接着输入相应的JavaScript代码或函数，如JavaScript:alert(您好,谢谢光临！)三、添加文本n1 输入普通文本： 在Dreamweaver8中输入文本的方法有很多。可以直接在文档窗口中输入文本，

14、也可以从其他文档中剪切并粘贴或导入文本。n2输入特殊字符 单击“插入栏”左侧的下拉按钮，在打开的下拉列表中选择“文本”选项，然后单击最右边的“字符”下拉按钮。 在弹出的下拉菜单中选择合适的特殊字符，如、等。如果没有合适的字符，可以选择“其他字符”选项 3输入空格n因为HTML有规定，连续多个空格将被忽视，只显示一个空格，所以Dreamweaver中不能直接输入多个空格，要想输入多个空格 ： （1）切换中文输入法为全角模式，输入全角的空格。 （2）单击“文本”插入栏中的“字符”下拉菜单按钮，在下拉列表中选择“不换行空格”命令。 （3）在HTML代码中要插入空格的位置输入多个“ 

15、”，在设计视图显示的就是输入了多个空格。4输入日期（1）在设计视图中直接输入日期的文本。（2）单击“常用”插入栏中的“日期”按钮，在弹出的“插入日期”对话框中选择需要的日期格式并单击确定。 n选择“存储时自动更新”复选框，则在日期格式插入到文档中后可以对其进行编辑，如果没有选这项，插入后变成纯文本，不好修改。如果希望在每次保存文档时都更新插入的日期，则选择“储存时自动更新”。 n如果要更改日期，可以先用鼠标选中该对象，然后单击“属性”面板中的“编辑日期格式”按钮， 5.设置文本格式1标题 在HTML中，一共定义了6级标题，从1级到6级，字体大小依次递减。 （1）选择相应的文本，选择“文本”“段

16、落格式”命令，然后在子菜单中选择相应的标题。 （2）选择相应的文字，在“属性”面板上的“格式”下拉列表中选择相应的标题。 2字体对文本进行字体设置的方法有以下两种： （1）选择要设置字体的文本，然后选择 “文本”“字体”命令，在弹出的子菜单中选择合适的字体类型。 （2）选择要设置字体的文本，单击“属性”面板上的“字体”下拉按钮，在下拉列表中选择合适的字体类型。如果没有找到合适的字体，单击“编辑字体列表”命令，将弹出“编辑字体列表”对话框 3颜色（1）选择要设置颜色的文本，然后选择“文本”“颜色”命令，将弹出“颜色”对话框（windows标准颜色对话框）。（2）选择要设置颜色的文本，单击“属性”

17、面板上的“文本颜色”按钮，打开颜色选择器。 （3）在“属性”面板上点击“页面属性”，或者选择菜单“修改”“页面属性”命令，打开“页面属性”对话框，可以设置文本的字体颜色 4文本大小n选择要设置的文本，在“属性”面板上的“大小”下拉列表中选择合适的文本大小，也可以在文本框中直接输入数值来改变文本大小，如果不想设置，则选择“无”选项，此时，文本就恢复为默认的文本大小。 5文本的样式： 文本的样式，即文本的显示方式，如加粗、倾斜、下划线和删除线等。 设置文本样式的方法是选择要设置的文本，然后选择菜单“文本”“样式”命令 6对齐n对齐可以将几个段落相对于文档窗口进行对齐，有4种对齐方式：左对齐、居中对

18、齐、右对齐、两端对齐。 设置方法同上所述，可以选择菜单“文本”“对齐”命令来实现，也可以在“属性”面板上单击对齐方式的按钮来实现 。7缩进和凸出缩进和凸出有两种设置方法：（1）将光标至于要设置缩进的文本中，选择菜单“文本”“缩进”命令，就可以将文本向右移两个字符的位置。选择“文本”“凸出”命令，则可以将文本向左移两个字符的位置。（2）在“属性”面板中点击缩进和凸出的图标 ，也可以进行设置。8文本列表（1）项目列表的类型 项目列表根据各个项目之间是否有先后次序，可以分为有序列表和无序列表。 无序列表表示各个项目之间没有先后次序，通常用正方形、菱形等符号作为列表项的前缀。而有序列表正好相反，各项目

19、之间具有明确的先后关系，前缀符号常常是阿拉伯数字、罗马数字和英文字母等。 （2）对现有文档进行项目列表 n创建无序列表 选择所输入的文本，然后选择菜单“文本”“列表”“项目列表”命令，或者单击“属性”面板下方的“项目列表”按钮。n创建有序列表 选择所输入的文本，然后选择“文本”“列表”“编号列表”命令，或者单击“属性”面板下方的“编号列表”按钮。n（3）设置列表属性 在介绍建立有序列表和无序列表时，默认只有一种前缀，其实还可以通过修改列表属性来改变前缀。 选择“文本”“列表”“属性”命令，打开“列表属性”对话框 n列表类型列表类型指定列表属性，而列表项目列表项目指定列表中的个别项目。使用弹出式

20、菜单选择项目、编号、目录或菜单列表。根据所选的“列表类型”，对话框中将出现不同的选项。n样式样式确定用于编号列表或项目列表的编号或项目符号的样式。所有列表项目都将具有该样式，除非为列表项目指定新样式。n开始计数开始计数设置第一个编号列表项的值。文字变化典型实例n在网页中插入文字并对文字进行修饰的方法，包括色彩变化、大小变化、特殊字符、斜体粗体、段落缩进、对齐效果等。灵活掌握这些方法，对网页制作能起到很大的帮助。四、插入图像n1 插入图像对象 在Dreamweaver中向网页文件插入图像，Dreamweaver会自动生成该图像的路径引用，如果要是图像能够正确地在网页中显示，必须保证此图像文件在当

21、前的站点内。如果不在站点内，Dreamweaver会提示是否将此图像复制到当前站点的文件夹中。(1)插入单个图像n选择要插入图像的位置，然后选择“插入”“图像”命令，或者单击“常用”插入栏中的“图像”“图像”按钮 n在弹出的“选择图像源文件”对话框中，选择本地的图像文件 (2)插入图像占位符 图像占位符，是最终图像的一个暂时替代品。虽然没有最终的图像，但是可以让设计者很直观的看到设计的整体效果。n插入图像占位符的步骤如下： 选择要插入图像占位符的位置，然后选择“插入”“图像对象”“图像占位符”命令，或者单击“常用”插入栏中的“图像”“图像占位符”按钮，将弹出“图像占位符”对话框. 在“替换文本

22、”文本框中，输入描述此图像占位符的文字，当浏览器不能显示该图像占位符时，就会显示该替换文本。选中该图像占位符，也可以通过属性面板来修改图像占位符的属性，如大小，颜色，替换文本等。(3)插入鼠标经过的图像 鼠标经过的图像实际上是由两幅图像组成的，即原始图像和鼠标经过的图像。原始图像，是首次网页装载是显示的图像；鼠标经过的图像是鼠标移动到原始图像上时，用来替换原始图像的图像。n选择要插入鼠标经过的图像的位置，选择“插入”“图像对象”“鼠标经过图像”命令，或者单击“常用”插入栏中的“图像”“鼠标经过图像”按钮，将弹出“插入鼠标经过图像”对话框。(4)插入导航条 导航条由图像和图像组组成，这些图像显示

23、的内容随用户操作的变化而变化。导航条通常为站点上的页面和文件之间的移动提供一条简洁的途径。导航条项目有4种状态：一般状态、鼠标经过状态、按下状态、按下时鼠标经过状态。n选择要插入导航栏的位置，选择“插入”“图像对象”“导航条”命令，或者单击“常用”插入栏中的“图像”“导航条”按钮，将弹出“插入导航条”对话框 l在导航条里，每个链接图像即为一个项目，全部导航条项目都显示在“导航条元件”列表框中。单击 “+” 按钮，将增加一个项目，在列表框中选择一个项目，单击“-” 按钮，可以删除选择项目。选中一个项目，单击“向上向下”按钮，可以调整选择的项目在导航条里的排列位置l“项目名称”文本框：为项目起一个

24、名称，英文或数字。l“状态图像”文本框：设置这个项目原始图像，可单击“浏览”按钮，选择源图像文件。l“鼠标经过图像”文本框：设置当鼠标经过这个项目的原始图像时变成的图像，可单击“浏览”按钮，选择图像文件。l“按下图像”文本框：设置当鼠标左键按下后，这个项目所显示的图像，可单击“浏览”按钮，选择图像文件。l“按下时鼠标经过图像”文本框：设置当鼠标左键按下后，鼠标经过这个项目所变成的图像，可单击“浏览”按钮，选择图像文件。l“替换文本”文本框：设置当图像无法显示时，所显示的文字说明。l“按下时，前往的URL”文本框：设置当单击这个项目时所链接的网址。l“插入”下拉列表：设置导航条的排列方式，选择“

25、水平”，则导航条将水平排列，如果选择“垂直”，则导航条将垂直显示。l“使用表格”复选框：选择该复选框，导航条将用表格排版，每个链接图像位于一个单元格内。l单击“确定”按钮，即可在网页中插入一个导航条。2.设置图像属性n在网页中插入原始图像后，往往达不到想要的效果，这是就需要对图像进行相关的设置。打开文档，选中要修改的图像，然后在属性面板中改变图像属性n边距:是图像和周围元素间的距离，在垂直边距和水平边距文本框中可为图像的边缘添加边距，单位也是像素。n低解析度源:这里指定在载入主图像之前所载入的图像。许多设计人员使用二位（黑白）图像版本，由于他们的数据量比较小，在主图像载入之前能很快显示，使访问

26、者能对他们等待的图像内容有所了解。当然，在这里也可以指定任何与主图像大小相同的图像，不一定是主图像的缩略图。3.创建热区链接 一张图片内可以创建包含多个链接，图像内不同的区域或文字都可以指向具体链接目标。图像图内创建链接的区域称为“热区”，热区与链接目标逐一对应，单击热区后，即可对链接目标进行跟踪、访问。n（1）选中要创建热点区域的图像，打开“属性”面板。n（2）在“属性”面板中的“地图”文本框中输入该热点区域的名称。n（3）创建圆形的热点区域，则点击椭圆形的热点工具，然后在图像上的某个区域拖拽鼠标指针，从而创建一个圆形的热点区域，也可以选择矩形和多边形热点工具来创建热点区域。 l 在“链接”

27、文本框设定链接的URL地址。l 在“目标”下拉列表中，设置链接目标文件的打开窗口类型。l 在“替换”文本框中输入给图像热点区域的替换文字。例2：导航栏五、用框架布局页面 n框架的作用就是把浏览器窗口划分为几个不同的区域，每个区域显示不同的网页。n常见的框架方式是将左方区域或上方区域设置为目录区域，其中包含显示文件各个页面的目录索引或导航条。右方区域或下方区域为主体区域，显示网页变化的主体内容。n用户单击目录索引项或导航条时，主体区域就显示相应的内容。而目录区域的导航内容始终显示在页面上，这样将重复区域固定下来，当向浏览器发出请求时，只下载变化的网页内容。n框架集就是框架的集合，实际上是一个页面

28、，用于在一个文档窗口中显示多个文档的框架结构。在框架集中显示的每个框架，就是一个独立存在的HTML文件 。1创建框架集（1）创建预定义框架集：在Dreamweaver中，可以用两种方式：通过“布局”插入栏创建框架集，步骤如下：l选择“布局”插入栏，在“布局”插入栏中选择“框架”选项 。l打开框架选择面板，选择一种框架结构，可以是左侧框架、右侧框架、上下框架等。 l单击某个框架类型，系统会自动弹出“框架标签辅助功能属性”对话框。 l单击“框架”下列列表，选择要更改标题的框架，然后在“标题”文本框中输入框架标题。通过菜单命令创建新的空框架集l打开Dreamweaver，选择“文件”“新建”菜单命令

29、，打开“新建文档”对话框，在该对话框中“常规”选项卡的“类别”列表框中选择“框架集”选项（2）编辑框架集）编辑框架集将鼠标放在要插入新框架的框架页中，选择“插入”|“HTML”|“框架”命令，在后面的列表中选择需要的样式；或者选择“修改”|“框架页”命令，可以进行框架的拆分。（3）调整框架大小l如图，单击“可视化助理”按钮，在弹出的菜单中选择“框架边框”并打开l将鼠标移至“文档窗口”边框，当鼠标指针变为双向箭头时，拖动鼠标即可粗略调整框架的大小。2存储框架和框架集（1）保存框架集的所有文件 保存框架集的所有文件的方法为：选择“文件”“保存全部”命令，将弹出“另存为”对话框，提示保存框架文件；或者也可以依次一个一个保存框架集和框架。在保