网页制作及应用第10章.ppt

第10章 网站与网页设计综合实例 学习目标 定义本地网站 设计网站的基本结构 主页设计步骤 本地站点发布 对网站的维护 第10章 网站与网页设计综合实例 教学内容 10.1 综合实例一（一个企业网站的建立过程） 10.2 综合实例二(一个素质培训中心网站建设） 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种产品的具体介绍、产品简介和联系方式分别做成子页，在主页上用 超链接的方式将它们连接起来。网站的基本结构如下图所示。 10.1 综合实例一 —主页设计 用框架技术将主页分为三部分，对应的三个HTML文件分别命名为： top.htm（顶部区域），left.htm（左区域），right.htm（右区域）。顶部区域 中有网站标志、网站标语和公共导航，方便浏览者在网页中任意跳转并能随 时返回主页。左区域中有超链接列表，给9种商品名称定义超链接，方便浏览 者对任何一种商品的查询。右区域是文本区域，显示当前链接的内容。顶部 区域和左区域中的信息在浏览中一直显示在浏览窗口，只有文本区域是浏览 窗口中信息变化的区域，随着链接的不同而不同。 10.1 综合实例一 —制作主页步骤 10.1 综合实例一 —制作主页步骤 10.1 综合实例一 —制作主页步骤 5．选中“产品介绍”→在属性面板中单击“链接” 框的浏览文件按钮→在站点文件夹rfwz中选jianjie.htm文件 （产品简介子页）→单击属性面板“目标”框下拉按钮→选 “mainFream”选项，被链接的文件内容将显示在mainFream 区域中。如下图所示。 10.1 综合实例一 —制作主页步骤 6.选中“公司简介”→单击属性面板“链接”框的浏览文件按钮 →“链接”框中选right.htm（介绍公司简介的子页）→“目标”框 中选mainFream。 7.选中“联系方式”→单击属性面板“链接”框的浏览文件按钮 →“链接”框中选connect.htm（介绍公司联系方式的子页）→“目 标”框中mainFream。 8．选中“客户反馈”→“链接”框中填写 mailto:runfeng0536@163.com→“目标”框中选blank（打开一个空 白网页）。浏览网页时单击“客户反馈”可直接打开“发件箱”， 厂方邮件地址将自动显示在“收件人”框中。 如下图所示。 10.1 综合实例一 —制作主页步骤 10.1 综合实例一 —制作主页步骤 10.单击leftFream区域→插入9行1列的表格→调整表格 大小与区域匹配→根据需要在属性面板“滚动”框中设置是 否显示滚动条。如下图所示。 10.1 综合实例一 —制作主页步骤 11．在表格第一行写第一个产品名→选中该产 品名→链接到1.htm→显示在mainFream区域中 （方法与设置公共导航相同），同样方法完成所 有产品的链接。 至此，主页制作全部完成。 10.1 综合实例一 —制作子页 本例中每一个子页都是纯文本形式，所以制 作很简单，可根据需要添加表格使文本显示规 范。子页面被调用时都将显示在mainFream区域 中，这是由主页中链接决定的。 10.1 综合实例一 —申请域名和代理服务器空间 网上有很多提供免费空间的服务器，可以用有哪些信誉好的足球投注网站引擎“百度” （）查找。申请步骤如下： 1.在浏览器中输入地址：。 2.在有哪些信誉好的足球投注网站框中输入“免费空间”，单击“有哪些信誉好的足球投注网站”。 如下图所示。 10.1 综合实例一 —申请域名和代理服务器空间 3．在有哪些信誉好的足球投注网站出来的众多服务器中任选一个（本例选“多 来米中文网”），进入申请界面。 如下图所示。 10.1 综合实例一 —申请域名和代理服务器空间 5．填写申请表格。 6．如果注册成功，一小时以后在你提供的电 子信箱中