6.2.4网页设计与制作

Report
第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

similar documents