第10章综合案例——制作植物网站

内容导航
10.1 实训目标
10.2 专业背景 10.3 制作思路分析 10.4 操作过程 10.5 项目实训 10.6 课后练习
10.3
制作思路分析
7
本例的制作涉及本书讲解的大部分知识，制作前，应该先创建站点、创建Div标签和CSS
样式、创建CSS文件等。本例的操作思路如下图所示。
内容导航
10.1 实训目标 10.2 专业背景 10.3 制作思路分析 10.4 操作过程 10.4.1 创建站点和网页文件 10.4.2 布局页面结构 10.4.3 添加网页头部内容 10.4.4 制作网页主体 10.4.5 制作页脚内容 10.5 项目实训 10.6 课后练习
下载配套资源
教学视频、PPT课件、教学案例、 习题答案、模拟试卷等丰富资源 免费下载
数码类网站是用户了解数码产品的重要通道，要想在众多同类网站中脱颖而出，仅仅做到以上几点是
远远不够的，需要不断地借鉴、模仿和积累，认真学习，仔细分析，才能做出成功的网站。
10.5.1 制作“北极数码”网站
3. 操作思路 根据实训要求，本实训涉及规划和管理站点、创建并制作网页模板以及通过模板制作网站首 页及其他页面等操作，其操作思路如下图所示。
并不是指浅色一定代表“潮流”。
关于分栏：目前，大多网站仍采用传统布局版式，如主页采用3至4栏设计，子页面采用两栏比较常 用。极少有简单的单页网站。
介绍信息：网站的介绍信息通常放在页面顶端，本质上是该企业对客户的一种简短而友好的声明。该
板块一般会结合生动形象的、醒目的平面设计。 关于导航：大多网站设计师将主要导航布局在右上角，垂直导航很少使用，其他别致的、创新的导航 布局也很少使用。 关于搜索框：当网站中包含有大量信息时，网站的访问者需要使用搜索功能，因此对于搜索框的设计 也非常重要。 关于Flash元素：Flash是一个丰富内容的交互设计工具，随着JavaScript技术的发展，目前用于网站
内容导航
10.1 实训目标
10.2 专业背景 10.3 制作思路分析 10.4 操作过程 10.5 项目实训 10.6 课后练习
10.2
专业背景
5
在制作网站前，应先明确制作网站的目的以及预期的效果。建站目的不同，需要实现的功能不 同，在其设计与规划时就不同。本例的植物网站是属于一个信息类的网站，因此在制作网站时，需 要注意以下几个方面。 事先准备制作网站需要的相应资料。 由于信息类网站中的内容较多，本例将采用三栏布局，将页面的中间用于显示网站的主要内容。 为了更好地体现出网站的特色，本例将划分多个导航条，即除了网站上方的主要导航条外，将再
的频率在减少，但还是广泛用作幻灯片演示。
10.5.2 制作“微观多肉植物”网页
3. 操作思路 完成本实训主要根据草图来进行布局，采用3行3列的布局方式进行页面布局，色彩方面主要 采用了绿色调为主色调，调整不同明度的绿色给网站添加层次感，并体现出生机勃勃的感觉，其 操作思路如下图所示。
20
内容导航
高等教育立体化精品系列规划教材
第10章 综合案例——制作植物网站
Dreamweaver CS6网页设计立体化教程（微课版）
内容导航
10.1 实训目标
10.2 专业背景 10.3 制作思路分析 10.4 操作过程 10.5 项目实训 10.6 课后练习
10.1
实训目标
3
本实训要求制作一个植物类的 信息网站，在制作该网站时应
10.4.1 创建站点和网页文件
下面将新建“plant”站点,创建网站主页为“index.html”。并新建“style.css”层叠样式表文
9
件，将其链接到网站中，为网页的制作创建最基本的文件。
10.4.2 布局页面结构
10
对页面的整体结构进行布局，将 其划分为上、中和下3栏，并对中间部
分的页面布局进行划分，主要通过添
10.5.1 制作“北极数码”网站
1. 实训目标
15
本实训的目标是制作“北极数码”网站，
此网站提供的服务是与数码产品相关的所有 数据、最新资讯和行业动态等内容。要求利
用模板来提高网页的制作效率，涉及模板应
用、CSS样式设置、超链接创建以及文本、 图像等对象的添加等。参考效果如右图所示。
10.5.1 制作“北极数码”网站
13
下面将在网页底部的“foot”Div标签中添加并定位每部分的位置和内容，使其显示网页的相关 信息。
内容导航
10.1 实训目标 10.2 专业背景 10.3 制作思路分析 10.4 操作过程 10.5 项目实训 10.5.1 制作“北极数码”网站 10.5.2 制作“微观多肉植物”网页 10.6 课后练习
10.1 实训目标 10.2 专业背景 10.3 制作思路分析 10.4 操作过程 10.5 项目实训 10.6 课后练习 练习1：制作“旅游休闲”网站 练习2：制作“甜蜜糕点”网站
练习1：制作“旅游休闲”网站
22
本练习要求利
用所学知识， 制作一个休闲
旅游类的网站，
参考效果如右 图所示。
练习2：制作“甜蜜糕点”网站
加DIV+CSS样式和AP Div元素来进行 布局。
10.4.3
添加网页头部内容
11
下面将在“top”Div标签中布局头部页面，并添加对应的内容。
10.4.4 制作网页主体
12
下面将制作网页的主要内容部分，分别在“left”“main”和“rightnav”Div标签中添加内容。
10.4.5
制作页脚内容
添加左侧的内容导航条，右侧的快速导航条，使用户在浏览本网站时能快速找到自己需要的内容。
为了更清楚地表达网站的内容，网站将采用淡色调为主，文本、图片等的颜色则采用深色为主， 以使用户有一种轻快的感觉。
为了减少用户阅读冗余的文字产生枯燥感，主页将尽量采用图片来显示，以吸引用户的目光。
网站中的信息必须准确，不要为用户提供错误的信息，提高网站的质量。 网站首页主要用于体现网站的主要服务、特色和功能，不要添加太多不必要的内容，以免引起用 户的反感。
该先创建站点文件，并将制作
网站需要的素材都统一放置到 其中，再启动Dreamweaver CS6来进行网页的制作。该网 站以浅色调为主，通过棕色、 绿色等色彩对页面进行丰富， 并在其中添加文字与图片。该
网站分为上、中、下3个结构，
上方用于放置网站的主要导航 条，中间用于放置主要的内容、 下方用于显示网站的基本信息， 参考效果如右图所示。
17
10.5.2 制作“微观多肉植物”网页
1. 实训目标 本实训的目标是设计“微观多肉世界”网站，该网站主要是多肉植物爱好者的交流网站。参 考效果如下图所示。
Fra Baidu bibliotek
18
10.5.2 制作“微观多肉植物”网页
2. 专业背景 网站设计过程中还需要处理一下相关的设计问题。
19
明暗设计：在对网页的明暗进行设计时，选择深色或浅色的设计很大程度上取决于网站的做法和目标，
24
更多样书申请和资源下载需求，请登录人邮教育社区 （www.ryjiaoyu.com)
海量图书方便查询
囊括各大品类，您想要的应有尽有
优惠购书
教师可以申请最低折扣 学生直接优惠购买图书
免费申请样书
教师免费申请样书， 我们将安排快递迅速送达
成为作者
欢迎写文章／投稿，我们强大 的编辑团队将为您提供专业和 高效的编辑出版服务
本练习要求综合运用本书所学 知识，制作一个“甜蜜糕点”
23
网站。它是一个个人博客网站，
主要用于体现个人对糕点的喜 爱。在该网站中可以查看网站 管理员发布的信息，其他人对 信息的评论等。该网站为动态 网站，需要用到创建数据库、 链接数据源、创建记录集等动 态网页知识，参考效果如右图 所示。
24
Thank you!
2. 专业背景
16
网站已经成为互联网最重要的组成部分，数码产品的盛行更使得数码类网站的数量日益增多。要
想创建专业的数码类网站，就应该具备一些必须的特点。 网站结构应清晰且便于用户使用。针对这种情况，可考虑使用醒目的标题或文字来突出内容，尽量做 到简单整洁、易于阅读和操作。 网站导向功能应清晰，使用超链接让用户可在网站中轻松实现各个目标链接跳转。 网站内容的快速下载也至关重要。因此，使用图像时，要尽量避免使用体积过大的图像，可考虑通过 调整图像格式来保证图像质量，同时减少其体积。