第10章网站与网页设计综合实例 学习目标 ◆定义本地网站 ◆设计网站的基本结构 ◆主页设计步骤 本地站点发布 ◆对网站的维护
1 第10章 网站与网页设计综合实例 学习目标 u 定义本地网站 u 设计网站的基本结构 u 主页设计步骤 u 本地站点发布 u 对网站的维护
返回总目录 第10章网站与网页设计综合实例 学内容 10.1综合实例一(一个企业网站的建立过程) 10.2综合实例二(一个素质培训中心网站建设)
2 第10章 网站与网页设计综合实例 教学内容 10.1 综合实例一（一个企业网站的建立过程） 10.2 综合实例二(一个素质培训中心网站建设） 返回总目录
返回目录 10.1综合实例一一定义本地网站 文件为: jianjie. htm,联系方式子页面文件为 connect. htm,9种产品介绍子页面文件分别为:1htm~9hm。另外还有 两个用 Fireworks制作的图片,一个是网站标志,文件名为: logo. png, 另一个是网站宣传标语,文件名为: banner. png。因为网站文件不多, 所以没定义子文件夹,把所有文件都放在D盘根目录下的rwz文件夹中 (rfwz意为润丰网站,文件夹名和文件名最好不用汉字)。是本地网站 如下图所示 包1.h 2. htm 413. htm 414. htm 35.htm 36.htm rIaz aIndex. htm aTop. htm eleft. htm aRight. htm connect. htm jianjie. htm 选定项目可以查看其说四 Logo. png hc Banner.png 本地网站 3
3 10.1 综合实例一—定义本地网站 返回目录 文件为：jianjie.htm，联系方式子页面文件为： connect.htm，9种产品介绍子页面文件分别为：1.htm～9.htm。另外还有 两个用Fireworks制作的图片，一个是网站标志，文件名为：logo.png， 另一个是网站宣传标语，文件名为：banner.png。因为网站文件不多， 所以没定义子文件夹，把所有文件都放在D盘根目录下的rfwz文件夹中 （rfwz意为润丰网站，文件夹名和文件名最好不用汉字）。是本地网站 。 如下图所示。 本地网站
返回目录 10.1综合实例一一网站的基本结构 小型企业网站的风格要简洁大方、突出主题、直截了当。设计主页 ( index htm)时把企业简介、网站标志、网站标语、公共导航和9种产 品名称都放在主页上,使浏览者一进入主页就能看到,开门见山。再将 9种产品的具体介绍、产品简介和联系方式分别做成子页,在主页上用 超链接的方式将它们连接起来。网站的基本结构如下图所示。 index. htm 1. htmI... 2 tm jianji. htm connect.htm 网站的基本结构
4 10.1 综合实例一 —网站的基本结构 小型企业网站的风格要简洁大方、突出主题、直截了当。设计主页 （index.htm）时把企业简介、网站标志、网站标语、公共导航和9种产 品名称都放在主页上，使浏览者一进入主页就能看到，开门见山。再将 9种产品的具体介绍、产品简介和联系方式分别做成子页，在主页上用 超链接的方式将它们连接起来。网站的基本结构如下图所示。 网站的基本结构 返回目录
返回目录 10.1综合实例一一主页设计 用框架技术将主页分为三部分,对应的三个HTML文件分别命名为: top. htm(顶部区域), left htm(左区域), right htm(右区域)。顶部区域 中有网站标志、网站标语和公共导航,方便浏览者在网页中仼意跳转并能随 时返回主页。左区域中有超链接列表,给9种商品名称定义超链接,方便浏览 者对任何一种商品的查询。右区域是文本区域,显示当前链接的内容。顶部 区域和左区域中的信息在浏览中一直显示在浏览窗口,只有文本区域是浏览 窗口中信息变化的区域,随着链接的不同而不同 网站标志,网站标语,公共导航 超链接列表 文本区域 主页框架 5
5 10.1 综合实例一 —主页设计 用框架技术将主页分为三部分，对应的三个HTML文件分别命名为： top.htm（顶部区域），left.htm（左区域），right.htm（右区域）。顶部区域 中有网站标志、网站标语和公共导航，方便浏览者在网页中任意跳转并能随 时返回主页。左区域中有超链接列表，给9种商品名称定义超链接，方便浏览 者对任何一种商品的查询。右区域是文本区域，显示当前链接的内容。顶部 区域和左区域中的信息在浏览中一直显示在浏览窗口，只有文本区域是浏览 窗口中信息变化的区域，随着链接的不同而不同。 主页框架 返回目录
返回目录 10.1综合实例一一制作主页步骤 1.启动 Dream weaver→设“布局”选项卡当前→单击 框架”按钮→选“项部和嵌套的左部框架”→打开“框 架”面板,可以看到当前框架模式和三个框架的内部名字, 内部名字分别为 topFream、 leftFream、 main Fream 2.用鼠标调整框架区域的大小; 3.“文件”菜单→“保存全部”→给框架集起名 index htm(主页)→给框架的 main Fream区域起名 right. htm→给框架的 leftfream区域起名 rleft. htm→给框架的 topFream区域起名 top. htm。(这三个页面构成主页内容, 在浏览器中打开主页时,它们的内容将同时显示在主页 上)。至此,主页框架搭建完毕 6
6 10.1 综合实例一 —制作主页步骤 1．启动Dreamweaver→设“布局”选项卡当前→单击 “框架”按钮→选“项部和嵌套的左部框架” →打开“框 架”面板，可以看到当前框架模式和三个框架的内部名字， 内部名字分别为topFream、leftFream、mainFream； 2．用鼠标调整框架区域的大小； 3．“文件”菜单→“保存全部”→给框架集起名 index.htm（主页）→给框架的mainFream区域起名 right.htm→给框架的leftFream区域起名left.htm→给框架的 topFream区域起名top.htm。（这三个页面构成主页内容， 在浏览器中打开主页时，它们的内容将同时显示在主页 上）。至此，主页框架搭建完毕。 返回目录
返回目录 10.1综合实例一一制作主页步骤 4.在 top Fream区域插入1行2列的表格→在左单元 格中插入网站标志图片 logo. png→在右单元格中插 入网站标语图片 banner. png→调整图片位置和大小 在放置图片的表格下面再插入1行5列的表格→选字 体和居中显示→在5个单元格中分别写入:产品介绍、 公司简介、联系方式、客户反馈、返回首页 RF润丰造纸助剂 WELCOME TO RUNFENG RNFENG PAPER OEVICAS 潍坊润丰造纸助剂有限公司潍坊市制浆造纸助剂研究所 公司简介 联系方式 客户反馈 返回首页 制作主页顶部区域 7
7 10.1 综合实例一 —制作主页步骤 4．在topFream区域插入1行2列的表格→在左单元 格中插入网站标志图片logo.png →在右单元格中插 入网站标语图片banner.png→调整图片位置和大小→ 在放置图片的表格下面再插入1行5列的表格→选字 体和居中显示→在5个单元格中分别写入：产品介绍、 公司简介、联系方式、客户反馈、返回首页。 制作主页顶部区域 返回目录
返回目录 10.1综合实例一一制作主页步骤 5.选中“产品介绍”→在属性面板中单击“链接” 框的浏览文件按钮→在站点文件夹rfwz中选 cjianjie. htm文件 (产品简介子页)→单击属性面板“目标”框下拉按钮→ 选 “ main Fream”选项,被链接的文件内容将显示在 mainE 格式②庑-默认字 大小团到 链接 lianjie.htm 口目标①anr望想 区域中。回动习们示不07的 回垂直①默认、高0标题g)厂背最色)边框8 制作公共导航上的链接 8
8 10.1 综合实例一 —制作主页步骤 5．选中“产品介绍”→在属性面板中单击“链接” 框的浏览文件按钮→在站点文件夹rfwz中选jianjie.htm文件 （产品简介子页）→单击属性面板“目标”框下拉按钮→ 选 “mainFream”选项，被链接的文件内容将显示在 mainFream 区域中。如下图所示。 制作公共导航上的链接 返回目录
返回目录 10.1综合实例一一制作主页步骤 6选中“公司简介”→单击属性面板“链接”框的浏览文件 按钮口 链接”框中选 right.htm(介绍公司简介的子页)→“目标” 框 中选 mainfream。 7中“联系方式”→单击属性面板“链接”框的浏览文件 按钮 “链接”框中选 connect. htm(介绍公司联系方式的子页) 标”框中 main Fream 8.选中“客户反馈”→“链接”框中填写 9 mailto: runfeng0536@163com→“目标”框中选 : blank(打开
9 10.1 综合实例一 —制作主页步骤 6.选中“公司简介” →单击属性面板“链接”框的浏览文件 按钮 →“链接”框中选right.htm（介绍公司简介的子页）→“目标” 框 中选mainFream。 7.选中“联系方式”→单击属性面板“链接”框的浏览文件 按钮 →“链接”框中选connect.htm（介绍公司联系方式的子页） →“目 标”框中mainFream。 8．选中“客户反馈”→“链接”框中填写 mailto:runfeng0536@163.com→“目标”框中选blank（打开一 个空 白网页）。浏览网页时单击“客户反馈”可直接打开“发件 箱” ， 厂方邮件地址将自动显示在“收件人”框中。 如下图所示。 返回目录
返回目录 10.1综合实例一一制作主页步骤 新 文件(编辑(查看(插入(D 复制粘贴销 检查 收件人 抄送 主题 「彐|B △, 客户反馈 9.选中“返回首页”→“链接”框中为 right. htm(企业简介子页)→“目标”框中选 main Fream。(至此完成了 top. htm文件制作,公共 导航也制作完成。) 10
10 10.1 综合实例一 —制作主页步骤 客户反馈 9．选中“返回首页”→“链接”框中为 right.htm（企业简介子页）→“目标”框中选 mainFream。（至此完成了top.htm文件制作，公共 导航也制作完成。）。 返回目录