网站与网页设计综合实例
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
返回总目录
第10章 网站与网页设计综合实例
教学内容 10.1 综合实例一（一个企业网站的建立过程） 10.2 综合实例二(一个素质培训中心网站建设）
1
10.1 综合实例一—定义本地网站
返回目录
文件为：jianjie.htm，联系方式子页面文件为： connect.htm，9种产品介绍子页面文件分别为：1.htm～9.htm。另外还有 两个用Fireworks制作的图片，一个是网站标志，文件名为：logo.png， 另一个是网站宣传标语，文件名为：banner.png。因为网站文件不多， 所以没定义子文件夹，把所有文件都放在D盘根目录下的rfwz文件夹中 （rfwz意为润丰网站，文件夹名和文件名最好不用汉字）。是本地网站 。 如下图所示。
主页框架
4
返回目录
10.1 综1．合启实动D例rea一mw—eav制er→作设主“布页局步”骤选项卡当前→单击
“框架”按钮→选“项部和嵌套的左部框架” →打开“框 架”面板，可以看到当前框架模式和三个框架的内部名字， 内部名字分别为topFream、leftFream、mainFream；
2．用鼠标调整框架区域的大小； 3．“文件”菜单→“保存全部”→给框架集起名 index.htm（主页）→给框架的mainFream区域起名 right.htm→给框架的leftFream区域起名left.htm→给框架的 topFream区域起名top.htm。（这三个页面构成主页内容， 在浏览器中打开主页时，它们的内容将同时显示在主页 上）。至此，主页框架搭建完毕。
10.1 综3．合在实搜例索一出—来申的请众多域服名务和器代中理任服选务一器个空（间本例选
“多 来米中文网”），进入申请界面。 如下图所示。
申请域名 4．给自己的网站起一个名字，本例给网站起名为 “rfwz”，这个名字位于域名第3级，申请成功后，本网 站域名为：rfwz.myrice.com。
14
返回目录
10.1 综合实例一 —申请域名和代理服务器空间
5．填写申请表格。 6．如果注册成功，一小时以后在你提 供的电 子信箱中可以看到系统管理员发来的邮件， 然后 开始将本地网站上传到代理服务器。 注意：免费空间通常只允许非商业性使用， 并附加若干条件，如达不到要求或用于
本地网站
2
返回目录
10.1 综合实例一 —网站的基本结构 小型企业网站的风格要简洁大方、突出主题、直截了当。设计主 页 （index.htm）时把企业简介、网站标志、网站标语、公共导航和9种产 品名称都放在主页上，使浏览者一进入主页就能看到，开门见山。再将 9种产品的具体介绍、产品简介和联系方式分别做成子页，在主页上用 超链接的方式将它们连接起来。网站的基本结构如下图所示。
网站的基本结构
3
返回目录
10.1 综合实例一 —主页设计 用框架技术将主页分为三部分，对应的三个HTML文件分别命名为： top.htm（顶部区域），left.htm（左区域），right.htm（右区域）。顶部区域 中有网站标志、网站标语和公共导航，方便浏览者在网页中任意跳转并能随 时返回主页。左区域中有超链接列表，给9种商品名称定义超链接，方便浏览 者对任何一种商品的查询。右区域是文本区域，显示当前链接的内容。顶部 区域和左区域中的信息在浏览中一直显示在浏览窗口，只有文本区域是浏览 窗口中信息变化的区域，随着链接的不同而不同。
（方法与设置公共导航相同），同样方法完 成所
有产品的链接。
至此，主页制作全部完成。
11
返回目录
10.1 综合实例一 —制作子页 本例中每一个子页都是纯文本形式， 所以制
作很简单，可根据需要添加表格使文本显 示规
范。子页面被调用时都将显示在 mainFream区域
中，这是由主页中链接决定的。 12
返回目录
制作公共导航上的链接
7
返回目录
10.1 综合实例一 —制作主页步骤
6.选中“公司简介”→单击属性面板“链接”框的浏览文件 按钮 →“链接”框中选right.htm（介绍公司简介的子页）→“目标” 框 中选mainFream。 7.选中“联系方式”→单击属性面板“链接”框的浏览文件 按钮 →“链接”框中选connect.htm（介绍公司联系方式的子页） →“目 标”框中mainFream。 8．选中“客户反馈”→“链接”框中填写
制作主页顶部区域
6ห้องสมุดไป่ตู้
返回目录
10.1 综合实例一 —制作主页步骤
5．选中“产品介绍”→在属性面板中单击“链接” 框的浏览文件按钮→在站点文件夹rfwz中选jianjie.htm文件 （产品简介子页）→单击属性面板“目标”框下拉按钮→
选 “mainFream”选项，被链接的文件内容将显示在
mainFream 区域中。如下图所示。
mailto:runfeng0536@163.com→“目标”框中选blank（打8开一
个空
10.1 综合实例一 —制作主页步骤
返回目录
客户反馈
9．选中“返回首页”→“链接”框中为 right.htm（企业简介子页）→“目标”框中选 mainFream。（至此完成了top.htm文件制作，公共 导航也制作完成。）。
9
返回目录
10.1 综合实例一 —制作主页步骤
10.单击leftFream区域→插入9行1列的表格→调整表格 大小与区域匹配→根据需要在属性面板“滚动”框中设置
是 否显示滚动条。如下图所示。
制作主页
10
返回目录
10.1 综合实例一 —制作主页步骤 11．在表格第一行写第一个产品名→选
中该产
品名→链接到1.htm→显示在mainFream区域 中
5
返回目录
10.1 综合实例一 —制作主页步骤
4．在topFream区域插入1行2列的表格→在左单元 格中插入网站标志图片logo.png →在右单元格中插 入网站标语图片banner.png→调整图片位置和大小→ 在放置图片的表格下面再插入1行5列的表格→选字 体和居中显示→在5个单元格中分别写入：产品介绍、 公司简介、联系方式、客户反馈、返回首页。
10.1 综合实例一 —申请域名和代理服务器空间
网上有很多提供免费空间的服务器，可以用搜索引擎“百度” （www.baidu.com）查找。申请步骤如下：
1.在浏览器中输入地址：http://www.baidu.com。 2.在搜索框中输入“免费空间”，单击“搜索”。 如下图所示。
查找免费空间
13
返回目录
第10章 网站与网页设计综合实例
教学内容 10.1 综合实例一（一个企业网站的建立过程） 10.2 综合实例二(一个素质培训中心网站建设）
1
10.1 综合实例一—定义本地网站
返回目录
文件为：jianjie.htm，联系方式子页面文件为： connect.htm，9种产品介绍子页面文件分别为：1.htm～9.htm。另外还有 两个用Fireworks制作的图片，一个是网站标志，文件名为：logo.png， 另一个是网站宣传标语，文件名为：banner.png。因为网站文件不多， 所以没定义子文件夹，把所有文件都放在D盘根目录下的rfwz文件夹中 （rfwz意为润丰网站，文件夹名和文件名最好不用汉字）。是本地网站 。 如下图所示。
主页框架
4
返回目录
10.1 综1．合启实动D例rea一mw—eav制er→作设主“布页局步”骤选项卡当前→单击
“框架”按钮→选“项部和嵌套的左部框架” →打开“框 架”面板，可以看到当前框架模式和三个框架的内部名字， 内部名字分别为topFream、leftFream、mainFream；
2．用鼠标调整框架区域的大小； 3．“文件”菜单→“保存全部”→给框架集起名 index.htm（主页）→给框架的mainFream区域起名 right.htm→给框架的leftFream区域起名left.htm→给框架的 topFream区域起名top.htm。（这三个页面构成主页内容， 在浏览器中打开主页时，它们的内容将同时显示在主页 上）。至此，主页框架搭建完毕。
10.1 综3．合在实搜例索一出—来申的请众多域服名务和器代中理任服选务一器个空（间本例选
“多 来米中文网”），进入申请界面。 如下图所示。
申请域名 4．给自己的网站起一个名字，本例给网站起名为 “rfwz”，这个名字位于域名第3级，申请成功后，本网 站域名为：rfwz.myrice.com。
14
返回目录
10.1 综合实例一 —申请域名和代理服务器空间
5．填写申请表格。 6．如果注册成功，一小时以后在你提 供的电 子信箱中可以看到系统管理员发来的邮件， 然后 开始将本地网站上传到代理服务器。 注意：免费空间通常只允许非商业性使用， 并附加若干条件，如达不到要求或用于
本地网站
2
返回目录
10.1 综合实例一 —网站的基本结构 小型企业网站的风格要简洁大方、突出主题、直截了当。设计主 页 （index.htm）时把企业简介、网站标志、网站标语、公共导航和9种产 品名称都放在主页上，使浏览者一进入主页就能看到，开门见山。再将 9种产品的具体介绍、产品简介和联系方式分别做成子页，在主页上用 超链接的方式将它们连接起来。网站的基本结构如下图所示。
网站的基本结构
3
返回目录
10.1 综合实例一 —主页设计 用框架技术将主页分为三部分，对应的三个HTML文件分别命名为： top.htm（顶部区域），left.htm（左区域），right.htm（右区域）。顶部区域 中有网站标志、网站标语和公共导航，方便浏览者在网页中任意跳转并能随 时返回主页。左区域中有超链接列表，给9种商品名称定义超链接，方便浏览 者对任何一种商品的查询。右区域是文本区域，显示当前链接的内容。顶部 区域和左区域中的信息在浏览中一直显示在浏览窗口，只有文本区域是浏览 窗口中信息变化的区域，随着链接的不同而不同。
（方法与设置公共导航相同），同样方法完 成所
有产品的链接。
至此，主页制作全部完成。
11
返回目录
10.1 综合实例一 —制作子页 本例中每一个子页都是纯文本形式， 所以制
作很简单，可根据需要添加表格使文本显 示规
范。子页面被调用时都将显示在 mainFream区域
中，这是由主页中链接决定的。 12
返回目录
制作公共导航上的链接
7
返回目录
10.1 综合实例一 —制作主页步骤
6.选中“公司简介”→单击属性面板“链接”框的浏览文件 按钮 →“链接”框中选right.htm（介绍公司简介的子页）→“目标” 框 中选mainFream。 7.选中“联系方式”→单击属性面板“链接”框的浏览文件 按钮 →“链接”框中选connect.htm（介绍公司联系方式的子页） →“目 标”框中mainFream。 8．选中“客户反馈”→“链接”框中填写
制作主页顶部区域
6ห้องสมุดไป่ตู้
返回目录
10.1 综合实例一 —制作主页步骤
5．选中“产品介绍”→在属性面板中单击“链接” 框的浏览文件按钮→在站点文件夹rfwz中选jianjie.htm文件 （产品简介子页）→单击属性面板“目标”框下拉按钮→
选 “mainFream”选项，被链接的文件内容将显示在
mainFream 区域中。如下图所示。
mailto:runfeng0536@163.com→“目标”框中选blank（打8开一
个空
10.1 综合实例一 —制作主页步骤
返回目录
客户反馈
9．选中“返回首页”→“链接”框中为 right.htm（企业简介子页）→“目标”框中选 mainFream。（至此完成了top.htm文件制作，公共 导航也制作完成。）。
9
返回目录
10.1 综合实例一 —制作主页步骤
10.单击leftFream区域→插入9行1列的表格→调整表格 大小与区域匹配→根据需要在属性面板“滚动”框中设置
是 否显示滚动条。如下图所示。
制作主页
10
返回目录
10.1 综合实例一 —制作主页步骤 11．在表格第一行写第一个产品名→选
中该产
品名→链接到1.htm→显示在mainFream区域 中
5
返回目录
10.1 综合实例一 —制作主页步骤
4．在topFream区域插入1行2列的表格→在左单元 格中插入网站标志图片logo.png →在右单元格中插 入网站标语图片banner.png→调整图片位置和大小→ 在放置图片的表格下面再插入1行5列的表格→选字 体和居中显示→在5个单元格中分别写入：产品介绍、 公司简介、联系方式、客户反馈、返回首页。
10.1 综合实例一 —申请域名和代理服务器空间
网上有很多提供免费空间的服务器，可以用搜索引擎“百度” （www.baidu.com）查找。申请步骤如下：
1.在浏览器中输入地址：http://www.baidu.com。 2.在搜索框中输入“免费空间”，单击“搜索”。 如下图所示。
查找免费空间
13
返回目录