第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种商品名称定义超链接，方便浏览 者对任何一种商品的查询。右区域是文本区域，显示当前链接的内容。顶部 区域和左区域中的信息在浏览中一直显示在浏览窗口，只有文本区域是浏览 窗口中信息变化的区域，随着链接的不同而不同。 主页框架 返回目录