第3 章网页的布局和应用 随着互联网技术的发展,网页已经发生了较大变化。由文字和图片简单地堆叠出来的 网页通常页面元素风格单调,结构混乱,难以吸引用户的关注。因此,设计网页时需要规划 网页的布局、内容和样式,再充分利用模板提高网页的设计效率。这些都属于静态网页设计 的内容。 设计专业的静态网页需要解决下列问题。 (1)网页常见的布局类型有哪些? 各自有什么特点? (2)实现网页布局的方式有哪些? 具体设计流程是什么? (3)如何使用表单设计交互性网页? (4)如何使用模板实现网页的快速设计和更新? 3.网页布局设计 1 网页布局就是对页面中的文字、图片、多媒体对象和表格进行统一的样式和位置设计。 在设计网页内容之前,根据网站的类型定位,按多数访问者的浏览习惯或约定俗成的标准, 明确网页包含的网站标志、导航栏、菜单和正文信息等内容的摆放位置,对页面进行整体规 划,使得网站中的所有页面风格统一,重点突出。 1.常见网页版面布局类型 3.1 网页通常由标题、脚注、侧栏和正文等页面区域组成。在不同布局模式下其位置和大小 可能不同,一般来说,重要元素应该摆放在突出位置。此外,充分利用Flash动画技术,会使 网页内容更丰富多彩。网页布局大致可以分为“国”字形、“厂”字形、“三”字形、标题正文型、 框架型、封面型和Flash型几个类别。 在设计具体网页之前,首先要根据网站类型和当前网页的作用选择网页的布局。下面 以设计一个中小型人才招聘网站为例,说明不同布局类型的特点和适用的业务范围。 1.“国”字形布局 “国”字形布局分标题区、左侧栏、中间内容区、右侧栏和脚注区,类似“国”字,也称“同” 字形布局。页头是网站的标志和广告条等,中间内容区是网页主体内容,左右栏用于放置图 片或文字链接的导航和工具栏等,页脚是网站的基本信息和版权声明等内容,如图3-1 所示。 “国”字形布局能够充分利用版面,信息量大,链接多,适合信息分类繁多的大型商业门 户网站,但是页面拥挤。如果组织不好,会对用户造成视觉混乱。 第3章网页的布局和应用 图3- 1 “国”字型布局 2.“厂”字形布局 “厂”字形布局分标题区、左侧栏、中间内容区和脚注区,也称“拐角型”布局。与“国”字 形布局不同的是:去掉了“国”字型布局的右侧栏,左侧栏主要提供网站导航功能,为中间正 文内容区提供了更大的版面空间。“厂”字形布局是一种常见的网页布局,页面结构清晰、主 次分明,比较适合机构、企事业单位的公司网站,例如人才招聘网站。 3.“三”字形布局 “三”字形布局只含标题区、内容区和脚注区,是一种简洁明快的网页布局。主要特点是 页头与页脚由两条横向色条组成,将网页整体分割为3部分。上下色条中大多放置网站信 息、广告和版权提示等。“三”字形布局页面精简,突出显示网站中的主体内容,适合用做人 才招聘网站中具体岗位信息页面的布局。 4. 标题正文型布局 标题正文型布局最上面是通用的标题、网站标志和导航条,下面是网页正文部分。标题 正文型布局由于页面简单明了,重点突出,访问速度快,所以适合搜索引擎类网站,也可以用 作人才招聘网站中论坛页面或注册页面的布局。 5. 框架型布局 框架型布局将网页分为多个子页面,每个子页面拥有独立的显示内容和滚动条。框架 布局分为左右框架型和上下框架型,一个框架是导航链接,另一个框架是正文信息。浏览网 页时,导航条子页面内容通常不变,通过导航条的链接刷新正文内容,如图3-2所示。常用 于具有多个导航的网页,例如论坛网站。 6. 封面型布局 封面型布局在页面中使用大幅图片,配合简洁的文字进行排版,页面中文字很少,往往 是图片加上简单的“进入”或“登录”链接,简单明了,整洁漂亮。 基于互联网的数据库及程序设计(第3版) 图3- 2 框架型布局 封面型布局需要精心设计,才能突出主题,吸引用户,多用于企业展示型网站的首页或 个性类网站的登录页面。 7.Flash型布局 Flash型布局通过嵌入Flash动画实现页面导航和页面展示,布局灵活,表现形式多样。 由于Flash功能完整且适合网络应用,可以为用户提供更好的视听享受,所以相对于封面型 布局,Flash型布局的页面更绚丽有趣,具有交互性,更能吸引用户的关注。但是,如果整个 网页都用Flash制作,则可能有兼容性问题,下载时间会长,不适合包含大量文本内容的 网站。 设计网页时,可以根据实际情况选择网页布局。例如,页面内容多,就用“国”字形或 “厂”字形;页面内容是一些简单的说明性文本,就用标题正文型;希望浏览方便,速度快,无 须结构变化,就用框架型;要展示企业或个人形象,封面型是首选;Flash型页面动态感强, 更具交互性,但不宜表达过多的文字信息。 3.1.2 使用Dreamweaver预设布局 制作网页时有很多影响网页布局的因素,导致从零开始创建会比较烦琐。Dreamweaver 提供了一些预设网页布局,合理地使用这些布局会简化网页设计的流程。 依据预设网页布局创建网页文档的方法是:单击“文件”菜单→“新建”选项,打开“新建 文档”对话框,如图3-3所示。从“页面类型”列表中选择“HTML”,“布局”列表中选择一种 预设布局(右窗格显示布局说明和预览图), 单击“创建”按钮。 单击“获取更多内容”链接,可以在官方网站上下载更多的布局类型。在预设布局中,侧 栏和正文宽度分为“列固定”和“列液态”两种类型。“列液态”类型表示以浏览器宽度的百分 比定义区域列宽,当改变浏览器尺寸时,会自动调整区域的列宽。“列固定”类型以像素数量 定义区域列宽,区域宽度不会随浏览器的尺寸而变化。 第3章网页的布局和应用 图3- 3 Dreamweaver中预设布局选项 3.表格设计 2 表格的基本作用是在网页中显示结构化数据。由于文本和图像插入页面后,会随浏览器 尺寸变化而改变位置,将页面内容放入表格内可保持其位置,所以表格也可用于页面布局。 3.1 表格的基本结构 2. 表格由一行或多行组成,每行又由一个或多个单元格组成列,行、列及单元格有效地描 述了二维信息的组织方式。 为了更好地实现布局效果,一个完整的表格结构还包括标题、边框、填充和单元格边距 等概念,如图3-4所示。这些表格结构的概念说明如下。 图3- 4 表格的结构 (1)标题(Caption):表格上方居中显示的文字内容,可以省略。 (2)列标题单元格(TH):表格中第一行,也称表格列标题,默认以粗体居中显示。 (3)表格边框(Border): 整个表格的外部边框线或单元格的边框线。 76 基于互联网的数据库及程序设计(第3版) (4)单元格填充(Cellpadding):在单元格内部,内容与边框之间的空白区域。 (5)数据单元格(TD):装载数据,包括文字、图像和链接等内容,可以多行。 (6)单元格间距(Cellspacing):两个相邻单元格边框之间的空白区域。 3.2.2 设计表格 表格是页面中较为复杂的结构,需要多个标签和属性的配合才能创建出符合需求的格 式,可以作为整体添加到页面任意位置。 1.设计表格结构 标签格式: …… …
表格标题
列标题1列标题2列标题n
单元格1单元格2单元格n
(1)Table标签:通过属性描述表格整体结构,其常用属性如表3-1所示。 表3-1 Table标签属性说明 属 性DW 名称属性说明例 子 Cellpadding 填充 单元格填充Cellpadding=10 Cellspacing 单元格间距单元格间距值Cellspacing=10 Align 对齐 单元格内容的对齐方式:Left(左对齐)、 Center(居中)或Right(右对齐) Align=Center Width 表格宽度 表格的宽度,可为像素或百分比Width=200px Border 边框粗细 表格边框线宽度Border=5px Bgcolor 背景颜色 表格所有单元格背景颜色Bgcolor=#00CC99 (2)…标签:定义表格的标题,默认居中显示在表体上方。 (3)…标签:用于定义表格的一行,元素的个数与表行数一致,在元 素内部通过或标签定义当前行包含的列单元格。有时为了简化代码,相邻的两 个开始标签中可以省略结束标签。 (4)…标签:用于定义表头单元格,单元格内容默认以粗体居中显示。 (5)…标签:用于定义普通单元格。相邻的两个或开始标签 中可以省略结束标签。 【例3-1】 生成图3-4所示的表格。 HTML代码如下:
表格标题
表头单元格表头单元格表头单元格
单元格单元格单元格
单元格单元格单元格
第3章 网页的布局和应用 77 2.单元格属性 标签格式: 单元格内容 单元格内容 不论是单元格标签,还是表头单元格标签,都可以设置各自的属性值,实现 自定义效果,如表3-2所示。如果不设置单元格的属性值,则其值按表格属性值或系统默认 值处理。 表3-2 表行及单元格属性 属 性DW 名称属性说明例 子 Align 水平单元格内容水平对齐方式:Left、Center或Right Align=Left Valign 垂直 单元格内容垂直对齐方式:Top(顶端)、Middle(居中)、 Bottom(底部)或BaseLine(基线) Valign=Bottom Bgcolor 背景颜色单元格内背景颜色Bgcolor=#00CC99 Rowspan Rowspan 合并单元格的行数Rowspan=3 Colspan Colspan 合并单元格的列数Colspan=2 表格能够作为容器,在单元格内添加文本内容和其他标签,如图像、链接等。为了适应 不同应用场合,可以在单元格标签内增加“Rowspan=行数”或“Colspan=列数”,使单元格 跨越几行或几列,实现多个单元格合并。 【例3-2】 输出图3-5所示的通讯录网页。 图3-5 表格网页示例———通讯录 通讯录网页的代码如下: 联系人
通讯录
姓名电话 E-mail
李丽丽13804318893 lilili@ sina.com
刘德厚13988699912 78 基于互联网的数据库及程序设计(第3版) ldh@ jlu.edu.cn
王丽敏15888990157 wlm@ sina.com
3.2.3 表格设计向导 1.插入表格 在Dreamweaver的设计视图中定位插入点,单击“插入”面板的“常用”类别中“表格”按 图3-6 “表格”对话框 钮,在“表格”对话框中设置表格整体参数,包括行数、列 数、表格宽度、边框粗细、边距、填充、标题和表格列(行) 标题版式等内容,如图3-6所示,最后单击“确定”按钮, 实现表格设计。 2.添加单元格内容 在设计视图中,单击目标单元格设置插入点,可以在 单元格内添加内容。单元格内容包括文本和图像等,也 可以再添加表格形成表格嵌套,组成更复杂的表格结构。 也可以从其他文件导入表格数据,方法是单击“插 入”菜单→“表格对象”→“导入表格式数据”选项,选择文 件名,单击“确定”按钮。文件类型可为Excel和TXT等。 3.设置表格属性 在“属性”面板中可以进一步做如下操作以调整表格。 (1)表格设置:单击表格边框选中表格,在“属性”面板可对表格整体进行设置。 (2)单元格设置:单击、拖动或按住Ctrl键再单击单元格等可以选定单元格,再单击 “属性”面板右下角的箭头,显示“单元格”扩展栏,实现单元格设置。 (3)表格行或列设置:将鼠标移动到行首或列顶部,光标变为箭头,单击选中行或列, “属性”面板显示“单元格”扩展栏,可以设置行(列)单元格。 3.2.4 利用表格进行布局 表格布局曾经是页面布局的常用方式,优点是操作简单,功能强大;缺点是不便于样式 图3-7 用表格布局的图片展示区 和内容分开,代码冗余大,逐渐被CSS布局所取代。现在 表格布局经常出现在单个Div区域内部,当元素数量较多 时,例如有多幅图片,通过表格能够实现精确排版。 Dreamweaver专门为表格布局提供了扩展模式,在该 模式下,表格的边框和填充都加宽显示,方便用鼠标调整, 显示与标准模式一致。 【例3-3】 插入展示图片的Div区域,用表格为其布 局,如图3-7所示。 (1)在“设计”视图下,选择“插入”面板的“布局”分类, 单击“扩展”→“插入Div标签”→“确定”按钮,添加Div 第3章 网页的布局和应用 79 元素。 (2)删除Div元素内自动生成的文本,单击“插入”面板的“表格”按钮,在“表格”对话框 中设置“行数”值为4,“列数”值为3,“表格宽度”值为700,“边框粗细”值为1,“单元格边距” 值为5,单击“确定”按钮后,在Div元素内添加表格。 (3)选中表格第一行的3个单元格,单击“属性”面板中的“合并所选单元格”按钮,合并 这3个单元格。修改“背景颜色”为浅绿色,添加单元格内容,如“明星企业”。 (4)选中表格后3行所有单元格,在“属性”面板中,设置“水平”对齐为“居中对齐”,设 置“垂直”对齐为“居中”。 (5)单击“文件”菜单→“保存”选项,为网页文件命名(如Table.html),选择保存位置 (如rczp)。 (6)光标分别置于后3行的每个单元格,单击“插入”菜单→“图像”选项,选择对应文件 名,如image/Logo1.png、image/Logo2.png、……、image/Logo9.png。 (7)在“代码”视图下,生成的局部HTML代码如下。

明星企业

3.3 表单及其控件设计 表单是网站服务器和客户端浏览器进行数据交互的桥梁,常用于收集用户信息。当用 户在表单控件中输入信息并提交后,由服务器端的脚本程序接收和处理,再将处理结果生成 新的页面返回给用户浏览器。 3.3.1 表单概述 浏览网页时,经常会遇到账号注册、账户登录和搜索信息等要求,都需要填写文本内容, 选择选项,单击菜单选项或按钮等操作,如图3-8所示。在设计网页时,可以通过表单(窗 口)及其控件实现这些交互性的操作。 表单是网页中的一种特殊容器标签,由表单标签定义容器边界,在容器内添加文本框、 列表、按钮等表单控件以获取用户信息。表单提交后,表单数据可以被PHP、ASP、JSP或 CGI等多种服务器脚本程序处理。 80 基于互联网的数据库及程序设计(第3版) 图3-8 注册账户页面中使用的表单 3.3.2 设计表单 标签格式:
…
常用的表单属性如表3-3所示。 1.编码类型 编码类型Enctype属性用于定义表单数据的编码方式,属性值有如下三种。 (1)Application/X-www-Form-urlencoded:为默认值,指定表单数据发送到服务器之 前对所有字符编码,即空格转换为"+",特殊符号转换为ASCII码。 (2)Text/Plain:指定表单数据以纯文本方式发送,不对特殊字符编码。 表3-3 表单主要属性说明 属 性DW 名称属性说明例 子 Target 目标 接收数据程序的打开位置,属性值同链 接标签Target=_Blank Action 操作或动作 接收表单数据的程序文件名,# 表示程 序代码在当前文件中 Action="YPRYZC.PHP" Action="#" Enctype 编码类型表单数据发送前如何编码Enctype=Text/Plain Method 方法表单向服务器发送数据的方法名Method="Post" Name 名称表单名称Name=fm1 (3)Multipart/Form-data:指定表单数据以二进制形式发送,不对字符编码,当在表单 中传递文件时,必须使用该值。 2.方法 Method属性用于定义提交表单的方法,属性值为Get和Post。 (1)Get方法:发送表单控件数据时,通常附加在资源名后作为参数发送给Web服务 器,通过“?”与资源名连接,参数之间用“&”相连。例如,LocalHost/Login.PHP ? Name= ywy& Password=ywy211,表示向Login.PHP 传递两个参数,Name(用户名)为ywy, Password(密码)为ywy211。在PHP程序中用数组$_GET接收数据。 第3章 网页的布局和应用 81 (2)Post方法:表单数据经过编码以数据块的形式发送给Web服务器,不会出现在资 源名中。在PHP程序中用数组$_POST接收数据。 Get方法和Post方法的主要区别在于:Get是默认的表单控件数据传递方法,一般通 过资源名传输数据,执行效率高,但安全性较差,也受资源名的长度限制,常用于从服务器获 取和测试数据,如通过表单控件实现查询或搜索。Post方法通常将表单控件数据放在PHP 程序中进行处理,也可以加密,安全性更高且没有长度限制,常用于向服务器提交数据,如通 过表单修改用户资料等。 【例3-4】 设计图3-8所示的表单。 设计表单代码如下。 应聘人员注册
身份证号:
姓 名:
……

本例使用的方法是Post,单击表单中的“注册”按钮时,执行程序YPRYZC.PHP接收表 单控件上的数据。 3.添加表单的操作 在Dreamweaver中,光标置于要添加表单的位置,进行下列操作添加表单。 (1)从“插入”面板中选择“表单”类型,单击“表单”按钮。 (2)单击“插入”菜单→“表单”→“表单”选项。 这两种操作都将打开“标签编辑器———Form”对话框,可以设置操作、方法、目标和名称 等信息,最后单击“确定”按钮可以添加表单。在“属性”面板中还可以进一步设置表单的相 关属性值。 3.3.3 设计表单控件 表单只是其控件的框架,用于规划表单区域。用户实际操作的是表单控件,主要用 Input和Select等标签实现,通过Type属性值标识控件的类型,表单控件如表3-4所示。 表3-4 Input标签类型 Type属性值控件类型Type属性值控件类型 Text 文本、文本字段或文本域Button 普通按钮 Password 密码框Reset 重置按钮 Checkbox 复选框Submit 提交按钮 Radio 单选按钮Image 图像域提交按钮 File 文件上传按钮 与添加表单类似,在“插入”面板中,选择“表单”类别,单击对应的控件类型按钮,或者单 82 基于互联网的数据库及程序设计(第3版) 击“插入”菜单→“表单”→对应的控件类型选项,在相关对话框中设计控件,如图3-9所示。 可以选择或输入控件的更细分类、名称和值等信息,最后单击“确定”按钮,向表单中添加控 件。在“属性”面板中也可以设置表单控件的相关属性值。 图3-9 表单控件标签编辑器 要处理表单控件上输入或选择的数据,还要进一步设计PHP程序(脚本)。 1.文本(Text) 文本也称文本字段或文本域,俗称文本框,用于输入一行数据,属性如表3-5所示。 表3-5 文本框和密码框主要属性说明 属 性DW 名称属性说明例 子 Name 文本域、文本字段文本名称Name=Textfield Size 字符宽度输入域的显示宽度Size=20 Maxlength 最多字符数可输入字符串的最大长度Maxlength=200 Value 初值设置初值和存储输入的数据Value=UserName 标签格式: 2.密码框(Password) 密码框简称密码,用于输入一行数据(密码),用户输入数据时,系统显示星号(*)或圆 点(·)。 标签格式: 相关属性及其含义与文本框相同,如表3-5所示。 第3章 网页的布局和应用 83 【例3-5】 设计用户登录表单。 部分代码如下:
用户名: 密码:
3.文本区域(编辑框) 文本区域控件是文本框控件的扩展,用于输入并显示多行文本,通过TextArea标签实 现,常见于输入个人简历和内容提要等信息。 标签格式: 主要属性的含义如下。 (1)Cols属性:规定文本区域框中每行能显示的字符个数(列数),当输入数据超过此 列数时,超出的数据自动到下一行显示。 (2)Rows属性:规定文本框的高度,即同时能显示的数据行数。当数据超出此行数 时,将隐藏多余的数据行,可以通过光标控制键或垂直滚动条滚动显示数据行。 【例3-6】 设计图3-8中的个人简历控件。 设计代码如下。 个人简历: 4.单选按钮(Radio) 多个单选按钮(也简称单选)组成一个单选按钮组,单选按钮组是表单中的选择性控件, 每个单选按钮以圆形☉或○呈现在表单上。一个表单中可以放置多个单选按钮组,同组的 多个单选按钮设置相同的Name属性值,但用不同的Value值区分选中哪项,即具有相同名 称的多个单选按钮构成一组,用不同的Value值区分彼此。在浏览器的表单中,每个单选按 钮组中只能选中一项。其主要属性如表3-6所示。 表3-6 单选按钮的主要属性说明 属 性DW 名称属性说明例 子 Name 名称单选按钮组名称Name=XL Value 选定值设置选中对象时所取的值Value=1 Checked 初始为选中状态每组中只能选中一项Checked="Checked"或Checked 标签格式: 【例3-7】 设计图3-8中选取学历的单选按钮组。 部分代码如下: 84 基于互联网的数据库及程序设计(第3版) 最后学历: 无 专科 本科 研究生 博士生 5.复选框(CheckBox) 多个复选框组成一个复选框组,复选框组也是表单中的选择性控件,每个复选框以□或 √呈现在表单上。一个表单中可以有多个复选框组,相同数组名(Name属性值)的多个复 选框为一组,各个复选框具有不同的Value值,以便区分选中哪项。在浏览器的表单中,每 个复选框组中可以选中多项。 标签格式: 从浏览器表单的每个复选框组中,可以同时选中多项,为了保存多个被选中项的值 (Value),复选框组名后加中括号([])表示数组。其主要属性如表3-7所示。 表3-7 复选框的主要属性说明 属 性DW 名称属性说明例 子 Name 名称复选框组名称Name=WY[] Value 选定值设置选中对象时所取的值Value=1 Checked 初始为选中状态每组中可以选中多项Checked="Checked"或Checked 【例3-8】 设计图3-8中选取外语语种的复选框组。 部分代码如下。 外语语种: 无 英语 日语 俄语 其他 6.命令按钮 命令按钮是用户与网页交互的通用触发器控件,可细划分为按钮(Button)、重置 (Reset)和提交(Submit)三种类型。主要属性如表3-8所示。 表3-8 命令按钮主要属性说明 属 性DW 名称属性说明例 子 Name 名称按钮名称Name=Cmd Value 值 按钮上显示的文本内容Value=Submit 标签格式: 第3章 网页的布局和应用 85 单击浏览器表单上的不同类型的按钮,系统响应的行为有所不同,各类命令按钮的具体 行为如下。 (1)Reset(重置):清除表单控件上的输入或选择信息,还原到各控件的初始值。 (2)Submit(提交):将各个控件的值存储到超全局数组$_POST 或$_GET 中,同时触 发(执行)Action属性指定的PHP网页程序文件。当Action属性值为# 时,执行当前网页 文件中的PHP程序代码。 (3)Button(按钮):通常与客户端脚本配合使用,实现网页的特殊效果。设计按钮时, 可以在标签内添加OnClick事件,通过“OnClick=函数名”的形式,指定单击按钮后执行哪 个脚本函数。 【例3-9】 设计图3-8中的注册和重置按钮。 部分代码如下。 7.图像域 图像域简称图像,实际是一种图像按钮。有时为了达到比较好的视觉效果,可以在表单 中设计图像按钮,其行为与提交(Submit)按钮相同。图像按钮还可以配合客户端脚本实现 表单重置等更加复杂的功能,如验证码按钮等。其主要属性如表3-9所示。 表3-9 图像域按钮主要属性说明 属 性DW 名称属性说明例 子 Name 名称 按钮名称Name=Imgcmd Src 源文件资源名,图像文件及所在路径Src="Image/1.gif" Align 对齐 图像对齐方式Align=Left Alt 替换 图像无法显示时的替代文本Alt="图像无法显示" 标签格式: 【例3-10】 设计图3-8中的图像按钮。 部分代码如下。 8.选择列表 选择列表以选项域的方式提供一组选项,用 …… 86 基于互联网的数据库及程序设计(第3版) 可以从浏览器表单的每个列表框中同时选中多项(加Multiple选项),列表框名后要加 中括号对([]),表示用该数组存储被选中的多个值(Value)。列表框的主要属性如表3-10 所示。 表3-10 列表与菜单控件属性说明 属 性DW 名称属性说明例 子 Name 选择列表框名称Name=TC[] Size 高度列表框中同时显示行数Size=3 Multiple 允许多选 允许选中多项,省略此属性,只 能选中一项Multiple=Multiple或Multiple Value 值设置选中对象时所取的值Value=1 Selected 初始选中项初始时处于选中状态Selected=Selected或Selected 9.选择菜单 选择菜单也俗称下拉列表框,由下拉按钮和下拉列表组成。和选择列表一样使用 …… 下拉列表框通常仅显示一个选项(一行),仅当单击下拉按钮时才显示列表;从下拉列表 框中只能选中一项。下拉列表框与列表框相比,除没有Size和Multiple属性外,其他属性 及其含义都相同。 【例3-11】 设计图3-8中选取多个特长的列表框(TC[])和选取一个学位(XW)的下 拉列表框。 部分代码如下: 特长: 学位: 10.文件域(文件上传按钮) 文件域是一种特殊的表单控件,由文本框和“浏览”按钮组成。用户在浏览器中单击“浏 览”按钮,将打开文件选择对话框,允许选择或输入文件名,表单提交后将文件上传到Web 服务器。要使文件域能传输文件,表单的传输方式必须为Post,数据编码类型为Multipart/ Form-data,并确保服务器允许上传文件。其主要属性如表3-11所示。 第3章 网页的布局和应用 87 表3-11 文件域主要属性说明 属 性DW 名称属性说明例 子 Name 文本域名称文件域名称Name="FJ" Size 字符宽度输入域的显示宽度Size=20 Maxlength 最多字符数输入字符的最大长度Maxlength=100 Accept 文件类型 可接收的文件类型,多种类型之 间用逗号分隔Accept="Image/Gif,Image/Jpeg" 标签格式: 【例3-12】 设计图3-8中的资料提交按钮。 部分代码如下。 要附加的佐证资料文件: 3.4 模板设计与引用 一个网站由大量网页组成,为了使这些网页风格统一,通常将网页中和布局相关的页面 元素,如网站Logo、标题、导航栏、页脚等设计为相同内容,只改变网页中的正文部分。为了 避免重复劳动,网页设计前可以先使用Dreamweaver制作模板,再基于模板实现布局相同 网页的快速创建。 此外,当网站信息、风格和布局等内容发生变化时,如果所有网页都需要修改将十分麻 烦。使用模板生成的网页,可以通过在Dreamweaver中修改模板,使多个网页同时更新,极 大地减轻网站后期的维护工作。 1.创建模板 模板是一种特殊的文档,用于设计网站中页面布局相对固定的网页。Dreamweaver专 门使用DWT格式,将模板文件保存在网站根目录的Templates文件夹中。创建模板有两 种方法:建立新的空白模板和将已有网页另存为模板。 (1)创建空白模板:单击“文件”菜单→“新建”选项,打开“新建文档”对话框。在“空模 板”选项卡中选择“HTML模板”选项,并指定一种页面布局,单击“创建”按钮即可创建一个 具有选中布局的空模板。 (2)将现有网页保存为模板:要想将现有的网页保存为模板,首先要打开已有的网页 文档。执行“文件”菜单→“另存为模板”命令,选择保存路径并设置模板名称,将已有网页保 存为模板文档。 2.编辑模板 为了确保页面风格统一,模板将页面中不变的部分锁定,其他变化的部分,如正文等内 容定义为可编辑区。实际上Dreamweaver为模板指定了4种区域:可编辑区域、重复区域、 基于互联网的数据库及程序设计(第3版) 可选区域和可编辑的可选区域。 (1)定义可编辑区域:新创建的模板文档,默认所有区域都被锁定,而为了设计不同的 网页内容,模板至少应该包含一个可编辑区域。选中目标位置或目标对象,执行“插入”菜 单→“模板对象”→“可编辑区域”选项,打开“新建可编辑区域”对话框。为新建区域设置调 用名称,单击“确定”按钮,完成可编辑区域的创建。 (2)定义重复区域:重复区域是模板的一部分,通常和网页元素搭配,用于在基于模板 的网页中重复显示。定义时,选中网页中的某个元素,执行“插入”菜单→“模板对象”→“重 复区域”选项即可。 (3)定义可选区域:使用模板生成网页后,可选区域是模板中可根据条件选择被显示 或被隐藏的部分。定义时,也需要选中一个网页元素,通过“插入”菜单→“模板对象”→“可 选区域”选项生成。可选区域默认是无法编辑的,选中后,通过“插入”菜单→“模板对象”→ “可编辑区域”选项可以将其变为可编辑的可选区域,同时拥有两种特性。 3. 用模板设计网页 创建模板并定义编辑区域后,就可以基于该模板设计布局相同,内容不同的网页,并保 存成独立的网页文件。 执行“文件”菜单→“新建”选项,打开“新建文档”对话框。在“模板中的页”选项卡中单 击模板所在的站点,选择模板名称,单击“创建”按钮,创建一个基于模板的文档。在文档中 找到以蓝色标签和边框显示的可编辑区域,插入需要编辑的内容,并保存为相应的网页文件 格式即可。 通过模板,网站可以创建出一批布局和风格一致的网页。如果将来需要修改网页布局, 可以通过修改模板内容,批量更新所有使用该模板生成的网页。 3.人才招聘网站的页面实现 5 本节将使用HTML 和CSS 语言,实现人才招聘网站的客户端页面设计。网站主要页 面均使用统一的Logo、联系方式、导航栏及页脚信息。为了简化网页设计和提高代码的可 重用性,将使用Dreamweaver创建模板页,并通过模板页生成其他页面,实现网站整体布局 的规划,使代码风格统一,易于维护。 人才招聘网站是基于PHP 脚本语言的动态网站。由于PHP 页面兼容HTML 语言, 可以在PHP 页面中直接书写HTML 代码实现网页界面,所以网站的所有网页都被创建为 . php结尾的动态网页。 站点配置和模板页创建 使用Dreamweaver设计动态网站,首先需要建立站点,再创建模板页或其他页面,若页 面需要数据支持还要添加数据库连接。人才招聘网站的初始设置如下。 (1)启动Dreamweaver,单击“站点”菜单→“新建站点”选项,在“站点设置对象”对话框 中,设置站点名称为“人才招聘”,指定本地的网站根目录“D:\人才招聘”。 (2)在“服务器”设置项中,设置XAMPP 服务器目录的访问方式,如图3-10 所示。 (3)单击“文件”菜单→“新建”选项,创建一个没有布局的PHP 模板,命名为 Sieempaephp,默认保存在网站Tlts目录下。 tTlt.empae 第3章 网页的布局和应用 89 图3-10 服务器设置项 (4)在网站根目录下,新建Images、Action和CSS文件夹用于存放相关的文件。 3.5.1 模板页设计 人才招聘网站的页面结构主要采用“三”字形布局,由标题区、导航栏、内容区和页脚四 个区域组成,如图3-11所示。其中内容区的布局和内容根据不同页面的功能单独定义,其 他3个区域在多个页面中内容相同,通过模板页实现。 图3-11 人才招聘网站首页布局 1.模板页的代码实现 (1)HTML代码。 模板页使用Div元素和Id属性定义页面的主要结构:标题区Header、导航栏Navarea、 内容区Contentarea 和页脚Footer。其中内容区为可编辑区域,通过注释中的 TemplateBeginEditable和TemplateEndEditable指定,没有元素内容,当使用模板生成新 页面时,可重新编辑该区域的具体内容。 在SiteTemplate.php的Body元素内添加HTML代码,部分代码如下。
(2)CSS代码。 Div元素通过CSS代码定义每个区域的具体显示样式。单击“文件”菜单→“新建”选 项,新建一个CSS页面,命名为Content.css保存在CSS目录下,部分代码如下。 #Header { /* 标题区样式*/ Height: 120px; Width:1000px;Position: Relative;Margin: 10px Auto;} #Top_logo { /* 标题区左边网站Logo 样式*/ Float: Left; Margin-Left:30px;} #Top_Info { /* 标题区信息栏样式*/ Float: Right;Font-Variant: Small-caps;} #Top_tel{ Background:Url(../Images/Phone.gif) No-Repeat 20px 20px; Padding-Left:130px; Padding-Top:20px; Margin-Top:10px; Font-Size:18px; Color:#FFFFFF;Width:240px;Height:50px;Background-Color:#2A53A8;} #Nav{ /* 导航栏样式*/ Display:Block;Width: 1000px;Height: 34px;Margin: 0px Auto;} #Nav Ul li { /* 导航栏选项以内联元素方式显示*/ Display:inline;} 第3章 网页的布局和应用 91 #Nav A{ /* 导航链接样式*/ Float:Left;Height:24px;Width:Auto;Background:Url(../Images/Navbox.gif) No -Repeat;Margin-Right:5px;Padding:10px 15px 0px;Font-Size:14px; Font-weight:bold;Text-Decoration:None;Color:#666666} #Nav A.Select{ /* 导航链接选中时样式*/ Background:Url(../Images/Navbox_Select.gif) No-Repeat;Color: #FFF;} #Nav_Bottom{ /* 导航底部样式*/ Width:1000px;Height:5px;Margin:0 Auto; Background-Color:#3266CC} #Contentarea { /* 主要内容区样式*/ Width:1000px;Margin:0px Auto;} #Footer { /* 脚注区样式*/ Clear: Both;Text-Align:Center;Width: 1000px;Margin: 10px Auto;} 为了在页面中应用定义的样式,需要在SiteTemplate.php的Head元素中添加代码引 入CSS文件。 2.用模板生成页面 生成模板文件后,可以在Dreamweaver中引用模板创建网站中的页面。单击“文件”菜 单→“新建”→“模板中的页”选项,选择“人才招聘”站点中的SiteTemplate模板文件,使用 该模板在网站根目录下创建首页Index.php、注册页Zc.php、岗位信息页Gwxx.php、求职信 息页Qzxx.php和成绩管理页Cjgl.php。 用模板生成的网页,自动包含模板中的布局、内容和引用文件。这些网页只需要修改可 编辑的模板区域,保证了网站风格的统一。 3.5.2 首页设计 网站首页通常是用户看到的第一个页面,是网站的入口。人才招聘网站是一个内容管 理系统,其首页不仅要提供指向其他相关页面的导航链接,也要为用户快速找到资源提供服 务,为用户登录和注册提供接口。 用模板生成的首页Index.php,自动包含模板中的基本模块:导航栏可以链接到其他页 面;标题区的信息栏,为新用户提供注册页链接并为已登录用户提供退出接口。此外,在首 页的内容区增加搜索栏、用户登录区和广告栏作为正文。 1.搜索栏设计 搜索栏使用表单实现,在文本框中输入搜索关键字,单击“搜索”按钮后开始检索,如 图3-12所示。为了满足用户对不同数据源的需求,添加“职位”“简历”两个单选按钮设定检 索范围,表单数据提交给Action目录下的搜索程序Search.php,根据用户选择,分别在岗位 信息页和求职信息页中查询并显示结果。 图3-12 首页中的搜索栏模块 (1)HTML代码。 在Index.php文件的内容区Contentarea中,使用HTML代码定义搜索栏。搜索栏主