网站前台设计综合实训[韩宝玉]项目三-旅游休闲类网站的设计与制作

《网站前台设计综合实训[韩宝玉]项目三-旅游休闲类网站的设计与制作》由会员分享，可在线阅读，更多相关《网站前台设计综合实训[韩宝玉]项目三-旅游休闲类网站的设计与制作（29页珍藏版）》请在金锄头文库上搜索。

1、职业教育教学改革系列教材（项目实战类）网站前台设计综合实训韩宝玉 刘 改 主编 祝海英 雷亚玲 李东生 副主编电子工业出版社 Publishing House of Electronics Industry北京BEIJING教学内容 客户需求分析 网站风格定位 网站建设方案 网站设计方案报价明细 任务一 制作云南旅游网站效果图 任务二 制作云南旅游网站的横幅广告动画 任务三 云南旅游网站的搭建 征求客户意见，修改完善 项目实训 项目小结项目三 旅游休闲类网站的设计与制作一、客户需求分析项目三 旅游休闲类网站的设计与制作通过对旅游服务类网站建站目的及客户对网站的特殊要求 ，拟定本网站具有如下功能

2、：（1）宣传云南省的锦秀景区、民俗风情、云南美食等，提 高云南省旅游业在国内外的知名度。（2）适时发布云南精品旅游线路、洒店推荐等信息，为旅 游者提供最佳服务。（3）在网上适时发布旅游游记，通过真实的旅游者的体会 ，吸引国内外的旅游者，为云南省旅游业的发展做出一份微薄 之力。（4）网站上要设有联系我们等栏目或子页，用户可以对旅 游线路等进行评论，也可以说说自己旅游的感受，这对网站的 改进和更新很有帮助。二、网站风格定位项目三 旅游休闲类网站的设计与制作1色彩云南旅游网站选定主色调为绿色和浅蓝色，绿色所传递 的是清爽、理想、希望和生长的意象，较符合旅游服务业 。绿色与人类息息相关，是自然之色，代

3、表了生命与希望 ，也充满了青春与活力。绿色在黄色和蓝色之间，属于较 中庸的颜色，是和平色，偏向自然美，宁静、生机勃勃、 宽容，可与多种颜色搭配而达到和谐的效果。浅蓝色具有 淡雅、清新、浪漫和高贵的特性，它也是最具凉爽、清新 特征的色彩。网站中采用浅蓝色和绿色、白色的搭配使页 面看起来非常干净清澈，能体现出柔顺淡雅和浪漫的气氛 。使人可以长时间驻留其间，也不会觉得疲劳。二、网站风格定位项目三 旅游休闲类网站的设计与制作2排版云南旅游网站采用的是“T”字型排版形式，这是网页 设计中常用的一种布局方式。该网站最上面是网站的站标 以及横幅广告条，接下来就是网站的主要内容，右面为几 个主要栏目，左面显示

4、该页主要内容。左右一起罗列到底 ，最下面是网站的一些基本信息、联系方式、版权声明等 。这种版式的优点是页面结构清晰，主次分明，信息量大 。弱点是规矩呆板，如果细节色彩上不注意，很容易让人“ 看之无味“。针对这个弱点，该网站在细节上做了一些处理 ，例如页面栏目的造型设计别具一格，并在栏目中适当地 添加了动画效果，使整个页面显得更加生动、活泼。二、网站风格定位项目三 旅游休闲类网站的设计与制作3特效本项目在网站广告条部分利用ImageReady制作了横幅 广告动画效果；在近期特价线路栏目中设置了多张图片 自动交换效果，使整个页面动静结合，视觉清晰。三、网站建设方案项目三 旅游休闲类网站的设计与制作

5、1页面风格创意设计该网站页面颜色初步拟定采用绿色和蓝色为主色 调，在此色调的基础上对绿色系和蓝色系中的不同 颜色进行有机搭配，同时还适当地辅以红橙色，使 网站产生一种优雅，舒适的气氛。同时，该网站在 栏目的造型设计上采用了别具一格的造型，该创意 设计使网页看上去更加生动、活泼。三、网站建设方案项目三 旅游休闲类网站的设计与制作2网站栏目划分根据我们对旅游服务类网站的了解及客户的特殊要求，建立了以下 栏目。走进云南 云南风情 景点大全旅游游记 旅游快讯 旅游须知昆明一地 地理概况 云南美食联系我们 精品图库 机票查询近期特价线路 各种旅游线路 旅游常识知名旅游企业 云南气候 友情链接特价机票推荐

6、 出游工具三、网站建设方案项目三 旅游休闲类网站的设计与制作3网站栏目内容简介 4网站建设拓扑图四、网站设计方案报价明细 五、任务一 制作云南旅游网站效果图云南旅游网站包含了走进云南、云南风情、景点 大全、旅游游记、旅游快讯、旅游须知、昆明一地 、地理概况、云南美食等内容，在设计上选用优雅 、舒适的风格，页面布局上也尽量不落俗套，采用 了别具一格的栏目造型，颜色设置上更突出了该类 网站的特点。五、任务一 制作云南旅游网网站效果图项目三 旅游休闲类网站的设计与制作步骤一 网站首 页效果 图的制 作五、任务一 制作云南旅游网网站效果图项目三 旅游休闲类网站的设计与制作步骤一 网站首页效果图的制作依

7、据网站风格定位及客户栏目设置要求，首页效果图图像文件规 格设置为，宽度1009像素，高度1575像素，分辨率300像素/英寸。 1网站Logo和Banner的制作2导航栏的制作五、任务一 制作云南旅游网网站效果图项目三 旅游休闲类网站的设计与制作步骤一 网站首页效果图的制作3近期特价线线路 栏目的制作4. 各种旅游线线路 栏栏目的制作五、任务一 制作云南旅游网网站效果图项目三 旅游休闲类网站的设计与制作步骤一 网站首页效果图的制作 5云南风情栏目和知名旅游企业栏目的制作五、任务一 制作云南旅游网网站效果图项目三 旅游休闲类网站的设计与制作步骤一 网站首页效果图的制作 6云南气候栏目的制作 7.

8、版权部分的制作五、任务一 制作云南旅游网网站效果图项目三 旅游休闲类网站的设计与制作步骤二 网站子 页“景点大全” 效果图的制作五、任务一 制作云南旅游网网站效果图项目三 旅游休闲类网站的设计与制作步骤二 网站子页“景点大全”效果图的制作依据网站风格定位及客户栏目设置要求，子页“景 点大全”效果图图像文件规格设置为，宽度1009像素 ，高度1573像素，分辨率300像素/英寸。该子页的框架与首页基本相同，子页各个栏目制 作用到的知识首页中均已介绍过，故这里不再进行详 细阐述。五、任务一 制作云南旅游网网站效果图项目三 旅游休闲类网站的设计与制作步骤三 网站 子页“云南美 食”效果图的 制作五、

9、任务一 制作云南旅游网网站效果图项目三 旅游休闲类网站的设计与制作步骤三 网站子页“云南美食”效果图的制作依据网站风格定位及客户栏目设置要求，子页“云 南美食”效果图图像文件规格设置为，宽度为1009像 素，高度为1575像素，分辨率为300像素/英寸。该子页的框架与首页基本相同，子页各个栏目制 作用到的知识首页中均已介绍过，故这里不再进行详 细阐述。六、任务二 横幅广告的制作项目三 旅游休闲类网站的设计与制作本网站的横幅广告是网站的Banner部分。这部分 动画的素材主要选取了云南著名的旅游景点，这么美 的风景再配上过渡自然、流畅的动态效果，其目的主 要是为了吸引浏览者的眼球，使其有兴趣长时

10、间驻留 其间，从而达到旅游宣传的作用。六、任务二 横幅广告的制作项目三 旅游休闲类网站的设计与制作网站banner部分动画制作1. 素材准备依据网站风格定位及客户要求， 文件的大小设 置为，宽度662像素，高度158像素，分辨率为300 像素/英寸。六、任务二 横幅广告的制作项目三 旅游休闲类网站的设计与制作网站banner部分动画制作1. 素材准备制作背景图片六、任务二 横幅广告的制作项目三 旅游休闲类网站的设计与制作网站banner部分动画制作1. 素材准备制作的部分文字素材和图像素材六、任务二 横幅广告的制作项目三 旅游休闲类网站的设计与制作网站banner部分动画制作2. 动画制作（部

11、分效果）七、任务三 网站搭建过程项目三 旅游休闲类网站的设计与制作网站搭建是项目建设的最后一个环节，是依据网 站效果图，把网站用网页编辑工具搭建成形，以便于 网上浏览。进行网站搭建时，首先要利用Photoshop切片工具 ，将效果图进行切片输出。切出的图片作为网站的图 片素材。七、任务三 网站搭建过程项目三 旅游休闲类网站的设计与制作步骤一 网站首页的制作 1. 创建站点 2. 创建主页文件 3. 创建CSS样式 4. 制作Logo、Banner和导航栏 5. 制作近期特价线路栏目并利用脚本制作动画效果 6. 制作各种旅游线路栏目 7. 制作云南风情栏目 8. 制作知名旅游企业栏目七、任务三

12、网站搭建过程项目三 旅游休闲类网站的设计与制作步骤一 网站首页的制作 9. 制作云南气候栏目 10. 制作友情链接、特价机票推荐和出游工具栏目 11. 制作旅游常识栏目 12. 制作版权说明栏目 13. 网站中文本链接样式的设置 14. 网页对齐方式设置七、任务三 网站搭建过程项目三 旅游休闲类网站的设计与制作步骤二 网站子页的制作本网站的子页在形式上套用了主页的结构， 使之在风格上与主页完全统一。页面特点：（1）通过表格的嵌套、单元格的拆分与合并 来进行网页元素的布局；（2）栏目背景图片的制作。步骤三 链接主页与子页对主页与各子页之间进行链接，并使链接畅通。八、征求客户意见，修改完善项目三 旅游休闲类网站的设计与制作对制作完成的云南旅游网站进行调试发布， 在广泛征集客户意见的基础上，尽可能地按照客 户的要求进行配套修改与更新，使得网站进一步 完善，达到制作网站的目的。九、项目实训在前面学习的项目基础上，请大家依据网站 制作流程，设计制作一个旅游休闲类网站。十、项目小结项目三 旅游休闲类网站的设计与制作本项目主要介绍了旅游休闲类网站的前期准备 、中期制作和网站搭建等内容。通过本项目的学 习，要求学生能对旅游休闲类网站有一个整体的 认识，并且能很好地掌握网站设计制作的基本方 法和工作过程，同时对网站的色彩搭配、网站的 页面排版和网页特效有一个理性上的认知。