1
第 10章 网站与网页设计综合实例
学习目标
?定义本地网站
?设计网站的基本结构
?主页设计步骤
?本地站点发布
?对网站的维护
2
第 10章 网站与网页设计综合实例
教学内容
10.1 综合实例一 ( 一个企业网站的建立过程 )
10.2 综合实例二 (一个素质培训中心网站建设 )
返回总目录
3
10.1 综合实例一 — 定义本地网站
返回目录
文件为,jianjie.htm,联系方式子页面文件为:
connect.htm,9种产品介绍子页面文件分别为,1.htm~ 9.htm。另外还有
两个用 Fireworks制作的图片,一个是网站标志,文件名为,logo.png,
另一个是网站宣传标语,文件名为,banner.png。因为网站文件不多,
所以没定义子文件夹,把所有文件都放在 D盘根目录下的 rfwz文件夹中
( rfwz意为润丰网站,文件夹名和文件名最好不用汉字)。是本地网站 。
如下图所示。
本地网站
4
10.1 综合实例一 — 网站的基本结构
小型企业网站的风格要简洁大方、突出主题、直截了当。设计主页
( index.htm)时把企业简介、网站标志、网站标语、公共导航和 9种产
品名称都放在主页上,使浏览者一进入主页就能看到,开门见山。再将
9种产品的具体介绍、产品简介和联系方式分别做成子页,在主页上用
超链接的方式将它们连接起来。网站的基本结构如下图所示。
网站的基本结构
返回目录
5
10.1 综合实例一 — 主页设计
用框架技术将主页分为三部分,对应的三个 HTML文件分别命名为:
top.htm(顶部区域),left.htm(左区域),right.htm(右区域)。顶部区域
中有网站标志、网站标语和公共导航,方便浏览者在网页中任意跳转并能随
时返回主页。左区域中有超链接列表,给 9种商品名称定义超链接,方便浏览
者对任何一种商品的查询。右区域是文本区域,显示当前链接的内容。顶部
区域和左区域中的信息在浏览中一直显示在浏览窗口,只有文本区域是浏览
窗口中信息变化的区域,随着链接的不同而不同。
主页框架
返回目录
6
10.1 综合实例一 — 制作主页步骤
1.启动 Dreamweaver→ 设, 布局, 选项卡当前 → 单击
,框架, 按钮 → 选, 项部和嵌套的左部框架, → 打开, 框
架, 面板,可以看到当前框架模式和三个框架的内部名字,
内部名字分别为 topFream,leftFream,mainFream;
2.用鼠标调整框架区域的大小;
3., 文件, 菜单 →, 保存全部, → 给框架集起名
index.htm(主页) → 给框架的 mainFream区域起名
right.htm→ 给框架的 leftFream区域起名 left.htm→ 给框架的
topFream区域起名 top.htm。(这三个页面构成主页内容,
在浏览器中打开主页时,它们的内容将同时显示在主页
上)。至此,主页框架搭建完毕。
返回目录
7
10.1 综合实例一 — 制作主页步骤
4.在 topFream区域插入 1行 2列的表格 → 在左单元
格中插入网站标志图片 logo.png→ 在右单元格中插
入网站标语图片 banner.png→ 调整图片位置和大小 →
在放置图片的表格下面再插入 1行 5列的表格 → 选字
体和居中显示 → 在 5个单元格中分别写入:产品介绍、
公司简介、联系方式、客户反馈、返回首页。
制作主页顶部区域
返回目录
8
10.1 综合实例一 — 制作主页步骤
5.选中, 产品介绍, → 在属性面板中单击, 链接,
框的浏览文件按钮 → 在站点文件夹 rfwz中选 jianjie.htm文件
(产品简介子页) → 单击属性面板, 目标, 框下拉按钮 →

,mainFream”选项,被链接的文件内容将显示在
mainFream
区域中。如下图所示。
制作公共导航上的链接
返回目录
9
10.1 综合实例一 — 制作主页步骤
6.选中, 公司简介, → 单击属性面板, 链接, 框的浏览文件
按钮
→, 链接, 框中选 right.htm( 介绍公司简介的子页 ) →, 目标,

中选 mainFream。
7.选中, 联系方式, → 单击属性面板, 链接, 框的浏览文件
按钮
→, 链接, 框中选 connect.htm(介绍公司联系方式的子页)
→, 目
标, 框中 mainFream。
8.选中, 客户反馈, →, 链接, 框中填写
mailto:runfeng0536@163.com→,目标, 框中选 blank(打开一个

返回目录
10
10.1 综合实例一 — 制作主页步骤
客户反馈
9.选中, 返回首页, →, 链接, 框中为
right.htm(企业简介子页) →, 目标, 框中选
mainFream。(至此完成了 top.htm文件制作,公共
导航也制作完成。)。
返回目录
11
10.1 综合实例一 — 制作主页步骤
10.单击 leftFream区域 → 插入 9行 1列的表格 → 调整表格
大小与区域匹配 → 根据需要在属性面板, 滚动, 框中设置

否显示滚动条 。 如下图所示 。
制作主页
返回目录
12
10.1 综合实例一 — 制作主页步骤
11,在表格第一行写第一个产品名 → 选中该产
品名 → 链接到 1.htm→ 显示在 mainFream区域中
( 方法与设置公共导航相同 ), 同样方法完成所
有产品的链接 。
至此, 主页制作全部完成 。
返回目录
13
10.1 综合实例一 — 制作子页
本例中每一个子页都是纯文本形式, 所以制
作很简单, 可根据需要添加表格使文本显示规
范 。 子页面被调用时都将显示在 mainFream区域
中, 这是由主页中链接决定的 。
返回目录
14
10.1 综合实例一 — 申请域名和代理服务器空间
网上有很多提供免费空间的服务器, 可以用搜索引擎, 百度,
( www.baidu.com) 查找 。 申请步骤如下:
1.在浏览器中输入地址,http://www.baidu.com。
2.在搜索框中输入, 免费空间,, 单击, 搜索, 。 如下图所示 。
查找免费空间
返回目录
15
10.1 综合实例一 — 申请域名和代理服务器空间
3,在搜索出来的众多服务器中任选一个 ( 本例选
,多
来米中文网, ), 进入申请界面 。 如下图所示 。
4.给自己的网站起一个名字,本例给网站起名为
,rfwz”,这个名字位于域名第 3级,申请成功后,本网
站域名为,rfwz.myrice.com。
申请域名
返回目录
16
10.1 综合实例一 — 申请域名和代理服务器空间
5,填写申请表格 。
6,如果注册成功, 一小时以后在你提供的电
子信箱中可以看到系统管理员发来的邮件, 然后
开始将本地网站上传到代理服务器 。
注意:免费空间通常只允许非商业性使用, 并附
加若干条件, 如达不到要求或用于商业目的,
几天后就会被清除, 只适合练习时使用 。
返回目录
17
10.1 综合实例一 — 将本地站点发布到网上
FTP( File Transfer Protocol文件传输协议 ) 是因特网
提供的服务之一, 通过它可以对远程服务器进行访问, 或将
本地机的文件传输到远程主机上 。 凡是提供网页空间的服务
器通常都是 FTP服务器, 都会提供上传文件的服务 。
下面, 我们将做好的网站发布到申请好的免费空间上 。
1,用申请时的名字和密码进入, 多来米中文网, 。
2,选, 免费网页, 服务项 。 打开如下页图所示的上传文
件界面 。
3,服务器上默认文件夹名,rfwz,如果另外起名, 单
击, 新建, 按钮, 本例中使用默认文件夹, 所以建新目录的
文本框空着 。
返回目录
18
10.1 综合实例一 — 将本地站点发布到网上
网站发布
4,单击第 1个, 浏览, 按钮, 在本地机器的网站文件夹 rfwz中
双击一个文件, 该文件出现在第 1个上传文件框中, 同样方法继续
下去, 一次最多可选 10个文件 。 选好文件后单击, 上传到服务
器,, 将选取的这组文件上传到服务器上 。
返回目录
19
10.1 综合实例一 — 将本地站点发布到网上
5,再用上面方法将剩余的文件上传到服务器 。
发布成功后, 打开 IE浏览器, 在地址框中输入 rfwz.myrice.com,上
网查看网站运行效果 。 如下图所示 。
浏览自己的网站
返回目录
20
10.1 综合实例一 — 维护自己的网站
维护网站最简单的方法就是在本地硬盘保留
一个网站的备份, 到网上浏览自己的网页, 若
发现错误, 可进入远程服务器自己网站的文件
夹在线修改 。 当对网站有新的构思或做大的改
动, 应在本地网站进行, 然后进入远程服务器
将自己网站已存在的文件删除, 重新上传即可 。
返回目录
21
10.2 综合实例 二 — 域名注册
这是网站发布时要做的第一件事,主要内容包括域名
选择和注册。
1,域名选择
在此我们选择国际域名 sonzhilu.com。
2.进行域名注册
决定了网站域名之后进行网站注册,注册具体步骤如
下:
( 1)域名查询
注册 songzhilu.com之前要先上网查询一下此域名是
否已被注册。歩骤如下:
返回目录
22
10.2 综合实例 二 — 域名注册
登陆到通联无限网 http://www.topbiz.cn/。 选择, 域名服
务,, 进入下图所示的域名界面, 在查询栏中输入 songzhilu,
域名类型选中,com前的单选框 。 点击, 查询, 按钮后, 查询结

显示, songzhilu.com可以被注册, 的信息 。 这说明所选域名可

进行注册 。
查询域名是否被注册
返回目录
23
10.2 综合实例 二 — 域名注册
( 2) 域名注册
通过在线方式填写域名注册申请表 。 在查询窗口中点击
,立
即购买,, 在接受条款窗口中选, 我已经阅读, 理解并接受,

进入填写信息窗口 ( 注意, 要先进行会员登录, 如果不是会员,
则需先注册成为会员 ) 。 填写完毕后点击, 下一步,, 在购物

中出现域名名称及所需支付的金额, 点击, 生成定单稍后支
付, 。
如下页图所示 。 域名费用
返回目录
24
10.2 综合实例 二 — 域名注册
( 3)缴费
域名开通后会收到通联发给注册用户的电子邮
件,通过银行电汇或其他方式缴纳域名注册费用
后通联会将, 域名注册证, 和发票邮寄给注册用
户。至此,域名注册工作全部完成。
返回目录
25
10.2 综合实例 二 — 购买空间
域名申请成功后, 还需要购买空间 。 互联网上很多网站
都提供空间购买功能, 现以中国主机地带网
( http://www.china-host.net/) 为例介绍 。
1,进入中国主机地带网主页, 选择经济型, 点击, 开通

用, 。
2,按要求填入所需信息 。 选中下方的, 正式开通, 或选

,免费使用7天, 。 在本例中我们选, 免费试用7天,, 填
写完
毕后点击, 进入下一步, 按钮 。
3,点击立刻开通 。 出现如图所示的申请成功窗口 。
返回目录
26
10.2 综合实例 二 — 购买空间
申请成功窗口
返回目录
27
10.2 综合实例 二 — 网站建设
域名空间开通后, 就该进行平台建设了 。 可根据自己
的实际情况选择决定使用 windows的建设平台及开发工具 。
1.总体策划 ( 需求分析 )
( 1) 市场调查
( 2) 目标分析
2.制定详细的设计方案并进行开发
( 1) 确定网站名称
( 2) 网站的内容结构设计
( 3) 确定网站的标准色彩
( 4) 设计网站的 CI形象
3.网站的测试
( 1) 测试网页浏览器
的兼容性
( 2) 测试访问网页所
用时间
( 3) 测试所有页面图
片及文字的链接情况
( 4) 拼写检测
返回目录
28
10.2 综合实例 二 — 网站功能的实现
网页设计好后, 接下来要做的就是将网页上传到申请
的网站空间中, 使浏览者能在网上看到 。 这里介绍最常
用的上传方法 ——使用 CuteFTP上传工具 。 CuteFTP可以
在任何两台主机间上传和下载文件, 不涉及主机的具体
位置以及是否使用相同操作系统 。
1.CuteFTP简介
CuteFTP的窗口主要由 4个窗口组成,介绍如下:
最上面的是状态窗口,所有与 FTP站点的交互信息均
在这个窗口里显示。
返回目录
29
10.2 综合实例 二 — 网站功能的实现
中间的两窗口类似于 Windows的资源管理器, 左边窗口是
本地文件和目录列表, 右边窗口是远端服务器上的文件和目录
列表 。
最下面的窗口是队列窗口 。 队列指的是正在进行着的上传 /
下载操作的一个列表 。 CuteFTP的窗口如下图所示 。
CuteFTP窗口
返回目录
30
10.2 综合实例 二 — 网站功能的实现
2,CuteFTP的设置与使用
用 CutpFTP的地址簿能方便地管理所搜集到的 FTP站点地址
3.建立站点
在 CuteFTP主界面窗口中单击, 文件, 菜单中的, 站点管
理器,,
便可以启动站点设置窗口 。 点击, 新建, 按钮新建一个站点,

名为, 嵩之路,, 然后对其进行设置,
4,上传 /下载文件
设置完毕后单击, 链接, 按钮, CuteFTP开始连接此站点 。

CuteFTP远程窗口中出现服务器端文件的目录结构, 说明客户
端已经连接到服务器上, 此时可以开始上传或下载文件 。
返回目录
31
10.2 综合实例 二 — 网站功能的实现
站点设置与网站上传的界面分别如下图所示,
站点设置 网站上传
返回目录