第 6 章网页制作

第6章网页制作 主讲教师： Email：

本章介绍 • 了解网页和网站的概念； • 如何使用FrontPage 2003创建网站并制作网页； • 了解网站的发布过程。

6.1网页与网站 • 本节知识点： • 什么是网页； • 什么是网站； • 网页设计基本原则。

6.1.1 什么是网页 • 网页（Webpage）即您通过网页浏览器如Internet Explorer打开的一个页面，本机的网页浏览器能够对这些页面进行解析，并呈现为生动的画面。 • 网页后缀名有： • .htm：http://www.jsj.tzc.edu.cn/teacher/crq/index.htm • .html：同htm格式 • .asp：如http://www.iti.tzc.edu.cn/kaoshiindex.asp • .aspx：如http://www.jsj.tzc.edu.cn/login.aspx?url=upfile.aspx • .php：如http://acm.hdu.edu.cn/index.php • .jsp：如http://acm.tzc.edu.cn/acmhome/FAQ.jsp • 不同的后缀名，在用户浏览网页时，服务器都会将其转化为HTML格式，并由网页浏览器进行解析。

6.1.1 什么是网页 • 网页的基本元素： • 文字 • 图片 • 视频 • 动画 • 音频 • 程序事实上，网页文件通过“文本”来表示这些元素，检查的方法是：在网页上点击鼠标右键，选择菜单中的“查看源文件 ”，这些代码称为“HTML代码”

6.1.1 什么是网页 • 首页和主页： • 首页一般是指打开网站后首先出现的页面 • 主页是网站中最主要的页面 • 大部分网站首页和主页都是同一个网页

6.1.2 什么是网站 • 网站（Website），就是指在网络上根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。 • 网站构成包括三部分： • 域名：形式比如www.baidu.com，acm.tzc.edu.cn等； • 网站空间：由专门的独立服务器或租用的虚拟主机承担； • 网站源程序或者网页文件：存放在网站空间里，又分为网站前台和网站后台，网站前台提供用户访问界面，而网站后台对用户的请求提供处理并反馈信息。

6.1.3网页设计基本原则 • 一、明确建立网站的目标和用户需求 • 二、网页设计总体方案主题鲜明 • 三、网站的版式设计 • 四、网站内容层次分明，导航明确

6.2 FrontPage 2003的使用 • 本节知识点： • FrontPage 2003的基本功能； • 网站的创建和编辑； • 网页的新建和打开； • 网页设计与制作； • 框架网页。

6.2.1 FrontPage 2003的基本功能 • FrontPage 2003打开 • 单击“开始”菜单——“所有程序”——“Microsoft Office”——“Microsoft Office FrontPage 2003”即可启动FrontPage程序 • 单击“文件”——“保存”命令，默认情况下会将其保存到My Web Sites文件夹下，其实My Web Sites就是一个网站目录，是FrontPage默认为您创建的

6.2.1 FrontPage 2003的基本功能 • FrontPage 2003中的视图 • 网页视图：网页的创建、编辑、预览等基本操作； • 文件夹视图：创建、移动和删除文件或文件夹； • 报表视图：方便的了解当前站点的文件内容、更新链接情况、组建错误、所有文件列表及变化情况等信息。 • 超链接视图：超链接视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系。 • 任务视图：任务视图主要用来创建和管里任务。 • 导航视图：使用导航视图可以方便的观察站点的链接结构，它以层次状的组织结构图形式显示。

6.2.2 网站的创建和编辑 • 网站的创建 • 选择“文件”菜单——“新建”，在弹出的“任务窗格”中单击“其他网站模板” 。 • 一般情况下，我们可能只需要“只有一个网页的网站”或者“空白网站”，如若有需要您也可以选择其他模板。并在右侧“指定新网站的位置”处输入或选择“浏览”按钮确定网站的保存路径，如“D:\WebSite1”。

6.2.2 网站的创建和编辑 • 修改网站名称 • 点击菜单“工具”——“网站设置”，在弹出的对话框中修改网站名称

6.2.3网页新建和编辑 • 在网站中新建网页 • 选择菜单“文件”——“新建”，在弹出的“任务窗格”中，选择“普通网页”或者“其他网页模板”

6.2.3网页新建和编辑 • 打开网页 • “文件夹列表”中列出了所有的网页文件，只需双击网页文件，便可在“网页”视图中打开网页文件进行编辑（注意，如果看不到网页视图，请从“视图”菜单下进行选择）。

6.2.3网页新建和编辑 • 网页视图四种显示方式包括： • “设计”：大部分编辑功能都在该显示方式下完成 • “代码” ：查看和编辑网页的HTML代码 • “拆分” ：“拆分”显示方式同时显示了“设计”和“代码”两个界面 • “预览”：只能查看网页效果，不能编辑。 • 也可以通过Internet Explorer、FireFox、Maxthon、Opera、Netscape Navigator等网页浏览器进行预览： • 单击菜单“文件”——“在浏览器中预览”，并选择相应的命令即可； • 在“文件夹列表”中选择相应的网页，单击鼠标右键选择“在浏览器中预览”； • 使用资源管理器或者“我的电脑”直接找到相应的网页文件用网页浏览器打开。

6.2.4网页设计与制作 • 设置网页属性 • 网页的属性通常包括网页的标题、位置、背景、页边框等 • 方法：在“网页视图”下单击菜单“文件”——“属性”命令，或者在网页的任意位置单击鼠标右键，在弹出的快捷菜单中选择“网页属性”命令

6.2.4网页设计与制作 • 设置网页属性，主要的选项有 • “常规”选项卡： • 设置标题、背景音乐等 • “格式”选项卡： • 背景图片，背景、文本、超链接等

6.2.4网页设计与制作 • 网页布局在网站建设中非常重要 • 传统的方法是采用“表格”布局 • 如http://acm.tzc.edu.cn的首页就是采用表格布局的 • 较新的方法是采用DIV+CSS的布局方法，可以达到内容与表现相分离

6.2.4网页设计与制作 • 插入表格的方法 • 单击菜单“表格”——“插入”——“表格”命令 • 设置行数和列数、布局、表格宽度和高度、边框的粗细和颜色、表格背景颜色和图片等

6.2.4网页设计与制作 • 编辑创建 • 可以在表格的任意一个单元格中单击鼠标右键，在弹出的快捷菜单中选择“表格属性”，即可进入“表格属性”对话框 • 设置方法同前

6.2.4网页设计与制作 • 设置单元格属性 • 表格属性设置会被作用于表格中的所有单元格样式上，如果希望修改某个单元格的属性，则在该单元格中单击鼠标右键，在弹出的快捷菜单中选择“单元格属性”命令。

6.2.4网页设计与制作 • 设置文字和段落格式 • 设置文字格式的步骤是：选中文字，单击“格式”菜单，选择“字体”命令，打开“字体”对话框，在对话框中设置字体的各种属性。 • 设置段落格式则选择“段落”命令，在“段落”对话框中进行相关设置 • 另一种方法是通过工具栏按钮快速设置。

6.2.4网页设计与制作 • 插入和编辑图片 • 菜单“插入”——“图片”——“来自文件”（您也可以根据需要选择其他选项），并从磁盘文件里选择需要的图片即可 • 单击菜单“文件”——“保存”命令或者“保存”按钮，将提示“保存嵌入式文件”对话框

6.2.4网页设计与制作 • 插入水平线 • 水平线可以在网页上清晰地划分界限，而且对用户网页的布局起着重要的作用。单击“插入”——“水平线”命令即插入一条水平线。默认情况下水平线呈灰色，改变颜色可以双击该水平线或者鼠标右键单击水平线，从快捷菜单中选择“水平线属性”命令，将显示“水平线属性”对话框，从中选择合适的颜色，单击“确定”按钮即可。

6.2.4网页设计与制作 • 插入滚动字幕 • 滚动字幕经常用于显示动态的新闻公告、欢迎文字等。 • 单击菜单“插入”——“Web组件”，在弹出的“插入Web组件”对话框中选择“动态效果”，在“选择一种效果”效果框中选择“字幕”，点击“完成”按钮 • 在“字幕属性”对话框，可以选择滚动方向和速度等。

6.2.4网页设计与制作 • 插入“交互式按钮” • “交互式按钮”色彩丰富并具有专业化的外观，可以是按钮很好地与网页相融合 • 菜单“插入”——“交互式按钮” • 选择相应的按钮效果，文本以及链接等； • 在“预览”方式下检查； • 由于“交互式按钮”使用外部图片，因此需要将图片保存到网站目录下。

6.2.4网页设计与制作 • 设置超链接 • 超链接将互联网中的大量信息有机地组织起来，使人们在丰富多彩的网络世界中轻松地漫游。 • 创建超链接的步骤是选定要定义超链接的文本或图片，单击“常用”工具栏上的“超链接”按钮，或者单击菜单“插入”——“超链接”命令

6.2.4网页设计与制作 • 设置超链接 • 可以链接到一个网址、网站中的某个文件或者电子邮件 • 可以设置屏幕提示文字（在预览时，鼠标悬停在超链接文字上稍等片刻即可看到提示文字） • 目标框架（指定以何种方式打开超链接）。

6.2.4网页设计与制作 • 创建书签 • 应用书签能够更严密地控制访问者到达网页内某个具体位置。当访问者单击基于书签的超链接时，将直接跳转到这个书签所在的位置。具体步骤如下： • 将光标定位在要插入书签的位置； • 从“插入”菜单中选择“书签”命令，打开“书签”对话框； • 在“书签名称”框中键入书签名称 • 单击“确定”按钮，出现书签标记。

6.2.4网页设计与制作 • 链接到书签 • 创建完书签之后，即可链接到书签，步骤如下： • （1）在 “创建超链接”对话框中，选定已经插入书签的目标网页，在“可选”区域中单击“书签”下拉按钮，在列表中选择链接的书签名称； • （2）单击“确定”按钮，完成超链接的制作。

6.2.4网页设计与制作 • 插入“热点” • 网页还有另外一种超链接，当你在图片的不同位置单击时将跳转到不同的链接地址，这类链接可以称之为热点 • 步骤： • 首先精心制作图片，并将该图片插入到网页中 • 然后选中该图片，在图片工具栏（若没有显示出来，单击菜单“视图”——“工具栏”，确保“图片”处于勾选状态），热点的形状可以是长方形、圆形或多边形，分别对应绘图工具栏右侧相应的按钮上（如图所示）。 • 选中按钮，按下鼠标左键进行拖动，并在弹出的“插入超链接”对话框中输入相应的链接信息即可

6.2.4网页设计与制作 • 表单创建 • 表单网页是一个网站和访问者开展互动的窗口，用户在表单中输入数据然后提交给网站服务器，如下面的表单网页可以完成网站用户的注册： • http://acm.tzc.edu.cn/acmhome/register.jsp • 添加表单，可以选择菜单“插入”——“表单”——“表单”命令，即可插入一个表单，并且在表单中会自动添加“提交”和“重置”两个按钮。

6.2.4网页设计与制作 • 常见表单域 • 文本框：用于输入一行文字。 • 文本区：用于让浏览者输入多行文字。 • 复选框：用来提供多个互不排斥的选项。 • 选项按钮：用来提供一组互相排斥的选项。 • 分组框：带标题的方框区域，包含一组相关的字段。 • 下拉框：提供一个选项列表，供浏览者从中选择需要的选项。 • 按钮：常见的如提交按钮和重置按钮，提交按钮用来把浏览者在表单上所填写的数据发送到网站服务器上的表单处理程序进行处理。重置按钮用来把表单上的数据全部清空重新填写。还有一种属性为“普通”的按钮。其HTML代码为：<input type="button" value="按钮" name="button1">。 • 高级按钮与普通按钮的功能一样，只是其上面能够显示HTML内容，如红色文字的高级按钮其HTML代码为：<button name="button1"><font color="#FF0000">高级按钮</font></button>。 • 图片：实际上是一个由图片表示的提交按钮。

6.2.5框架网页 • 框架是一种特殊的网页技术，含有框架的网页是一种特殊的网页，一般称为框架网页。使用框架后，整个网页被分割成几个区域，每个区域称为一个框架窗口，任何一个框架窗口单独显示一页。框架窗口可以作为超链接的窗口，当浏览者点击一个超链接时，该超链接的目标窗口便可以是目标框架窗口，而不是整个浏览器的窗口。框架技术是有效架构网页结构和合理展示信息的工具，也为浏览者提供了方便和友好的界面。台州学院大学计算机基础教学网（http://www.iti.tzc.edu.cn）采用的便是框架网页

6.2.5框架网页 • 新建框架网页 • 选择菜单“文件”——“新建”，在出现的任务窗格中单击“其他网页模板”即弹出“网页模板”对话框，在“框架网页”选项卡中选择某个框架类型

6.2.5框架网页 • 创建框架超链接 • 一个新的框架网页不包含任何内容，您需要在每个区域单击“新建网页”按钮创建一个空白网页或者单击“设置初始网页”按钮选择一个已经创建的网页文件

6.2.5框架网页 • 设置框架属性 • 可以设置框架属性来更改框架超链接的网页、调整框架大小等 • 择目标框架，单击菜单“框架”——“框架属性”命令或者在鼠标右键快捷菜单中选择“框架属性”命令

6.3网站发布 • 网站发布的条件： • 专用服务器 • 网络服务器操作系统：目前主流的网络服务器操作系统是Unix、Linux、Windows Server 2003 • 申请域名 • 服务器管理程序：网站必须通过服务器管理程序进行配置才可以被互联网用户访问，主要有Windows自带的IIS、Apache和Tomcat等软件，用户的任何请求都会经过服务器管理程序解释执行。

6.3.2 安装IIS管理器 • 步骤： • 查看操作系统是否已经安装了IIS程序，进入“控制面板”——“管理工具”，如果不存在Internet 信息服务程序，则说明需要另外安装。 • 进入“控制面板”——“添加或删除程序”——“添加/删除Windows组件”，在弹出的Windows组件对话框中勾选Internet 信息服务（IIS），单击下一步。 • 在安装过程中可能会多次提示用户缺少某个文件。如果您有带有IIS 5.1的Windows XP安装光盘，您可以在CD-ROM中插入光盘（必须与当前的操作系统版本一致）。如果没有则需要下载IIS 5.1安装包并解压，在出错提示后选择相应的安装文件，成功后将会在“控制面板”——“管理工具”下出现IIS图标。

6.3.3网站发布 • 网站发布实际上就是指将网站程序复制到服务器上，并在网站服务器管理程序中配置网站程序。 • 进入“控制面板”——“管理工具”，双击“Internet 信息服务”程序打开IIS • 选择“新建”——“虚拟目录”，输入别名(如crq)，网站目录等 • 为你的网站指定默认文档，即网站主页：在弹出的“网站属性”对话框中选择“文档”选项卡，确保网站主页文件在该列表中。一般主页文件名为index.htm、default.htm等 • 打开Internet Explorer网页浏览器检测配置是否成功，在本地机器中只要在地址栏里输入http://localhost/crq

第 6 章 网页制作