网页制作及应用第10章

1、1 第第10章章 网站与网页设计综合实例网站与网页设计综合实例 学习目标 u定义本地网站 u设计网站的基本结构 u主页设计步骤 u本地站点发布 u对网站的维护 2 第第10章章 网站与网页设计综合实例网站与网页设计综合实例 教学内容 10.1 综合实例一（一个企业网站的建立过程） 10.2 综合实例二(一个素质培训中心网站建设） 返回总目录 3 10.1 综合实例一综合实例一定义本地网站定义本地网站 返回目录 文件为：jianjie.htm，联系方式子页面文件为： connect.htm，9种产品介绍子页面文件分别为：1.htm9.htm。另外还有 两个用Fireworks制作的图片，一个是网

2、站标志，文件名为：logo.png， 另一个是网站宣传标语，文件名为：banner.png。因为网站文件不多， 所以没定义子文件夹，把所有文件都放在D盘根目录下的rfwz文件夹中 （rfwz意为润丰网站，文件夹名和文件名最好不用汉字）。是本地网站 。 如下图所示。 本地网站 4 10.1 综合实例一综合实例一 网站的基本结构网站的基本结构 小型企业网站的风格要简洁大方、突出主题、直截了当。设计主页 （index.htm）时把企业简介、网站标志、网站标语、公共导航和9种产 品名称都放在主页上，使浏览者一进入主页就能看到，开门见山。再将 9种产品的具体介绍、产品简介和联系方式分别做成子页，在主页上

3、用 超链接的方式将它们连接起来。网站的基本结构如下图所示。 网站的基本结构 返回目录 5 10.1 综合实例一综合实例一 主页设计主页设计 用框架技术将主页分为三部分，对应的三个HTML文件分别命名为： top.htm（顶部区域），left.htm（左区域），right.htm（右区域）。顶部区域 中有网站标志、网站标语和公共导航，方便浏览者在网页中任意跳转并能随 时返回主页。左区域中有超链接列表，给9种商品名称定义超链接，方便浏览 者对任何一种商品的查询。右区域是文本区域，显示当前链接的内容。顶部 区域和左区域中的信息在浏览中一直显示在浏览窗口，只有文本区域是浏览 窗口中信息变化的区域，随着

4、链接的不同而不同。 主页框架 返回目录 6 10.1 综合实例一综合实例一 制作主页步骤制作主页步骤 1启动Dreamweaver设“布局”选项卡当前单击 “框架”按钮选“项部和嵌套的左部框架” 打开“框 架”面板，可以看到当前框架模式和三个框架的内部名字， 内部名字分别为topFream、leftFream、mainFream； 2用鼠标调整框架区域的大小； 3“文件”菜单“保存全部”给框架集起名 index.htm（主页）给框架的mainFream区域起名 right.htm给框架的leftFream区域起名left.htm给框架的 topFream区域起名top.htm。（这三个页面构成

5、主页内容， 在浏览器中打开主页时，它们的内容将同时显示在主页 上）。至此，主页框架搭建完毕。 返回目录 7 10.1 综合实例一综合实例一 制作主页步骤制作主页步骤 4在topFream区域插入1行2列的表格在左单元 格中插入网站标志图片logo.png 在右单元格中插 入网站标语图片banner.png调整图片位置和大小 在放置图片的表格下面再插入1行5列的表格选字 体和居中显示在5个单元格中分别写入：产品介绍、 公司简介、联系方式、客户反馈、返回首页。 制作主页顶部区域 返回目录 8 10.1 综合实例一综合实例一 制作主页步骤制作主页步骤 5选中“产品介绍”在属性面板中单击“链接” 框的

6、浏览文件按钮在站点文件夹rfwz中选jianjie.htm文件 （产品简介子页）单击属性面板“目标”框下拉按钮 选 “mainFream”选项，被链接的文件内容将显示在 mainFream 区域中。如下图所示。 制作公共导航上的链接 返回目录 9 10.1 综合实例一综合实例一 制作主页步骤制作主页步骤 6.选中“公司简介”单击属性面板“链接”框的浏览文件 按钮 “链接”框中选right.htm（介绍公司简介的子页）“目标” 框 中选mainFream。 7.选中“联系方式”单击属性面板“链接”框的浏览文件 按钮 “链接”框中选connect.htm（介绍公司联系方式的子页） “目 标”框中m

7、ainFream。 8选中“客户反馈”“链接”框中填写 mailto:“目标”框中选blank（打开一 个空 白网页）。浏览网页时单击“客户反馈”可直接打开“发件 箱”， 厂方邮件地址将自动显示在“收件人”框中。 如下图所示。 返回目录 10 10.1 综合实例一综合实例一 制作主页步骤制作主页步骤 客户反馈 9选中“返回首页”“链接”框中为 right.htm（企业简介子页）“目标”框中选 mainFream。（至此完成了top.htm文件制作，公共 导航也制作完成。）。 返回目录 11 10.1 综合实例一综合实例一 制作主页步骤制作主页步骤 10.单击leftFream区域插入9行1列的

8、表格调整表格 大小与区域匹配根据需要在属性面板“滚动”框中设置 是 否显示滚动条。如下图所示。 制作主页 返回目录 12 10.1 综合实例一综合实例一 制作主页步骤制作主页步骤 11在表格第一行写第一个产品名选中该产 品名链接到1.htm显示在mainFream区域中 （方法与设置公共导航相同），同样方法完成所 有产品的链接。 至此，主页制作全部完成。 返回目录 13 10.1 综合实例一综合实例一 制作子页制作子页 本例中每一个子页都是纯文本形式，所以制 作很简单，可根据需要添加表格使文本显示规 范。子页面被调用时都将显示在mainFream区域 中，这是由主页中链接决定的。 返回目录 1

9、4 10.1 综合实例一综合实例一 申请域名和代理服务器空间申请域名和代理服务器空间 网上有很多提供免费空间的服务器，可以用搜索引擎“百度” （）查找。申请步骤如下： 1.在浏览器中输入地址：http:/。 2.在搜索框中输入“免费空间”，单击“搜索”。 如下图所示。 查找免费空间 返回目录 15 10.1 综合实例一综合实例一 申请域名和代理服务器空间申请域名和代理服务器空间 3在搜索出来的众多服务器中任选一个（本例选 “多 来米中文网”），进入申请界面。 如下图所示。 4给自己的网站起一个名字，本例给网站起名为 “rfwz”，这个名字位于域名第3级，申请成功后，本网 站域名为：。 申请域名

10、 返回目录 16 10.1 综合实例一综合实例一 申请域名和代理服务器空间申请域名和代理服务器空间 5填写申请表格。 6如果注册成功，一小时以后在你提供的电 子信箱中可以看到系统管理员发来的邮件，然后 开始将本地网站上传到代理服务器。 注意：免费空间通常只允许非商业性使用，并附 加若干条件，如达不到要求或用于商业目的， 几天后就会被清除，只适合练习时使用。 返回目录 17 10.1 综合实例一综合实例一 将本地站点发布到网上将本地站点发布到网上 FTP（File Transfer Protocol文件传输协议）是因特网 提供的服务之一，通过它可以对远程服务器进行访问，或将 本地机的文件传输到远

11、程主机上。凡是提供网页空间的服务 器通常都是FTP服务器，都会提供上传文件的服务。 下面，我们将做好的网站发布到申请好的免费空间上。 1用申请时的名字和密码进入“多来米中文网” 。 2选“免费网页”服务项。打开如下页图所示的上传文 件界面。 3服务器上默认文件夹名：rfwz，如果另外起名，单 击“新建”按钮，本例中使用默认文件夹，所以建新目录的 文本框空着。 返回目录 18 10.1 综合实例一综合实例一 将本地站点发布到网上将本地站点发布到网上 网站发布 4单击第1个“浏览”按钮，在本地机器的网站文件夹rfwz中 双击一个文件，该文件出现在第1个上传文件框中，同样方法继续 下去，一次最多可选

12、10个文件。选好文件后单击“上传到服务 器”，将选取的这组文件上传到服务器上。 返回目录 19 10.1 综合实例一综合实例一 将本地站点发布到网上将本地站点发布到网上 5. 再用上面方法将剩余的文件上传到服务器。 发布成功后，打开IE浏览器，在地址框中输入，上 网查看网站运行效果。如下图所示。 浏览自己的网站 返回目录 20 10.1 综合实例一综合实例一 维护自己的网站维护自己的网站 维护网站最简单的方法就是在本地硬盘保留 一个网站的备份，到网上浏览自己的网页，若 发现错误，可进入远程服务器自己网站的文件 夹在线修改。当对网站有新的构思或做大的改 动，应在本地网站进行，然后进入远程服务器

13、将自己网站已存在的文件删除，重新上传即可。 返回目录 21 10.2 综合实例综合实例二二域名注册域名注册 这是网站发布时要做的第一件事，主要内容包括域名 选择和注册。 1. 域名选择 在此我们选择国际域名 。 2.进行域名注册 决定了网站域名之后进行网站注册，注册具体步骤如 下： （1）域名查询 注册之前要先上网查询一下此域名是 否已被注册。歩骤如下： 返回目录 22 10.2 综合实例综合实例二二域名注册域名注册 登陆到通联无限网 http:/ 务”，进入下图所示的域名界面，在查询栏中输入songzhilu， 域名类型选中.com前的单选框。点击“查询”按钮后，查询结 果 显示“可以被注册

14、”的信息。这说明所选域名可 以 进行注册。 查询域名是否被注册 返回目录 23 10.2 综合实例综合实例二二域名注册域名注册 （2）域名注册 通过在线方式填写域名注册申请表。在查询窗口中点击 “立 即购买”，在接受条款窗口中选“我已经阅读、理解并接受” 后 进入填写信息窗口（注意，要先进行会员登录，如果不是会员， 则需先注册成为会员）。填写完毕后点击“下一步”，在购物 车 中出现域名名称及所需支付的金额，点击“生成定单稍后支 付”。 如下页图所示。 域名费用 返回目录 24 10.2 综合实例综合实例二二域名注册域名注册 （3）缴费 域名开通后会收到通联发给注册用户的电子邮 件，通过银行电汇

15、或其他方式缴纳域名注册费用 后通联会将“域名注册证”和发票邮寄给注册用 户。至此，域名注册工作全部完成。 返回目录 25 10.2 综合实例综合实例二二购买空间购买空间 域名申请成功后，还需要购买空间。互联网上很多网站 都提供空间购买功能，现以中国主机地带网 （http:/www.china- 1进入中国主机地带网主页，选择经济型，点击“开通 试 用”。 2按要求填入所需信息。选中下方的“正式开通”或选 中 “免费使用天”。在本例中我们选“免费试用天”，填 写完 毕后点击“进入下一步”按钮。 3点击立刻开通。出现如图所示的申请成功窗口。 返回目录 26 10.2 综合实例综合实例二二购买空间购

16、买空间 申请成功窗口 返回目录 27 10.2 综合实例综合实例二二网站建设网站建设 域名空间开通后，就该进行平台建设了。可根据自己 的实际情况选择决定使用windows的建设平台及开发工具。 1.总体策划（需求分析） （1）市场调查 （2）目标分析 2.制定详细的设计方案并进行开发 （1）确定网站名称 （2）网站的内容结构设计 （3）确定网站的标准色彩 （4） 设计网站的CI形象 3.网站的测试 （1）测试网页浏览器 的兼容性 （2）测试访问网页所 用时间 （3）测试所有页面图 片及文字的链接情况 （4）拼写检测 返回目录 28 10.2 综合实例综合实例二二网站功能的实现网站功能的实现 网

17、页设计好后，接下来要做的就是将网页上传到申请 的网站空间中，使浏览者能在网上看到。这里介绍最常 用的上传方法使用CuteFTP上传工具。CuteFTP可以 在任何两台主机间上传和下载文件，不涉及主机的具体 位置以及是否使用相同操作系统。 1.CuteFTP简介 CuteFTP的窗口主要由4个窗口组成，介绍如下： 最上面的是状态窗口，所有与FTP站点的交互信息均 在这个窗口里显示。 返回目录 29 10.2 综合实例综合实例二二网站功能的实现网站功能的实现 中间的两窗口类似于Windows的资源管理器，左边窗口是 本地文件和目录列表，右边窗口是远端服务器上的文件和目录 列表。 最下面的窗口是队列窗口。队列指的是正在进行着的上传/ 下载操作的一个列表。CuteFTP的窗口如下图所示。 CuteFTP窗口 返回目录 30 10.2 综合实例综合实例二二网站功能的实现网站功能的实现 2. CuteFTP的设置与使用 用CutpFTP的地址簿能方便地管理