Transcript 6.2.4网页设计与制作

第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