网站前台设计综合实训资料10676.docx

《网站前台设计综合实训资料10676.docx》由会员分享，可在线阅读，更多相关《网站前台设计综合实训资料10676.docx（33页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、职业教育育教学改改革系列列教材（项目实实战类）网站前台台设计综综合实训训电子教学学参考资资料韩宝玉刘刘 改改 主主编祝海英雷雷亚玲 李东东生 副主编编Publlishhingg Hoousee off Ellecttronnicss Inndusstryy北京BBEIJJINGG前 言为了配合合网站站前台设设计综合合实训课课程的教教学，更更好地体体现技能能教材的的编写特特色，更更好地为为读者服服务，编编写了此此教学资资料。教学资料料内容有有三个部部分。第一部分分是教学学指南，包包括了课课程性质质与任务务、课程程内容和和要求、教教学建议议、教学学时间分分配等。第二部分分是电子子教案，采采用Poo

2、werrPoiint课课件形式式。教师师可以根根据不同同的教学学要求按按需选取取和重新新组合。第三部分分是电子子网站，给给出了与与教材配配套的每每个项目目对应的的电子网网站。第四部分分是项目目实训素素材，给给出了每每个项目目实训的的文字素素材。限于编著著者水平平有限，教教学资料料中有错错误或不不妥之处处，请读读者给予予批评指指正。编 者者 20100年3月 网站前前台设计计综合实实训教教学指南南1. 课课程的性性质与任任务本课程是是计算机机应用技技术专业业、网站站规划与与开发技技术专业业的核心心课程、专专业必修修课。主要培培养学生生网站前前台设计计制作能能力，培培养学生生学会使使用Drream

3、mweaaverr、Phhotooshoop及FFlassh等软软件开发发或建设设各种类类型的网网站的能能力。在保证课课程内容容体系的的相对完完整和系系统的基基础上，按按掌握知知识的思思维规律律，对原原理性内内容的叙叙述不作作烦琐的的理论介介绍，将将重点放放在应用用技能的的介绍上上，教学学内容以以实践教教学的方方式引出出。本课程以以企业的的真实案案例为驱驱动，以工作作过程为为导向，在在完成工工作任务务的过程程中实现现教学指指导“能力化化”。通过本本课程的的学习和和实训，使使学生掌掌握网站站前台设设计的基基础知识识，并很很好的掌掌握网站站前台设设计的操操作技能能。2.教学学时间分分配项目课程 内

4、内 容课时项目1教育类网网站的设设计与制制作16项目2商业类网网站的设设计与制制作14项目3旅游休闲闲类网站站的设计计与制作作14项目4体育健身身类网站站的设计计与制作作14项目5政府机关关类网站站的设计计与制作作12项目6企业类网网站的设设计与制制作10合 计计80注：以上上课时分分配仅供供参考，教教学中可可根据教教学的安安排再做做调整。3. 教教学提要要、课程程内容、教教学要求求项目一教教育类网网站的设设计与制制作本项目教教学提要要教学重点点：教育育类网站站的客户户需求分分析；教育类网网站的网网站风格格定位；教育类网网站的网网站建设设方案；教育类网网站的网网站设计计方案报报价明细细；制作抚

5、州州职业技技术学校校网站效效果图；制作抚州州职业技技术学校校网站的的横幅广广告动画画抚州职业业技术学学校网站站的搭建建。教学难点点：客户户需求分分析；网站风风格定位位；设计网网站的建建设方案案。本项目教教学内容容校园网站站的建设设中，前前期准备备工作是是至关重重要的，要要有明确确的做网网站的根根本目的的。校园园网站是学学校对外外宣传、交交流，进进行形象象展示的的一个窗窗口和平平台。一、客户户需求分分析客户需求求，是指指学校创创建门户户网站的的目的和和对网站站提出的的特定要要求。了了解客户户需求，是是建好学学校门户户网站的的前提。抚抚州职业业技术学学校对其其拟建的的门户网网站提出出的主要要要求有

6、有以下几几点。（1）宣宣传学校校办学理理念，展展示办学学设施、教师队队伍、专专业设置置、就业业情况，提提高学校校的社会会知名度度；（2）适适时发布布学校管管理、教教学、招招生等相相关信息息，为求求学者提提供相关关咨询服服务；（3）获获取社会会各界对对学校教教育教学学情况的的评价和和意见、建建议；（4）建建立与兄兄弟院校校进行交交流学习习的平台台；（5）向向社会各各界推荐荐毕业生生，为毕毕业生提提供就业业信息。二、网站站风格定定位校园网站站就是学学校的网网上形象象，每一一所学校校都有自自己的特特色，每每一个院院系或班班级都会会有自己己的强项项。对于于本项目目介绍的的校园网网站以抚抚州职业业技术学

7、学校为例例，从以下下三个方方面来学学习该网网站的风风格定位位。1色彩彩：本项目中中采用一一种色彩彩，先选选定主色色调为橙橙色，这是是令人激激奋的色色彩，具具有明亮亮、健康康、热烈烈、温暖暖、欢乐乐、辉煌煌、庄严严，以及及尊贵的的色感，然然后通过过调整透透明度或或者饱和和度，就就是色彩彩进行变淡淡、加深或渐渐变的处处理，产生新新的橙色色的近似似色彩，使使网页看看起来色色彩统一一，富有有层次感感。在页面面中借助助浅灰色色的背景景图像，采采用了留留白艺术术给人一一个遐想想的空间间，让人人感觉心心情舒适适、畅快。同同时，也也对于协协调页面面的均衡衡起到相相当大的的作用。 2排版版本项目就就是采用用骨骼

8、型型排版形形式，网网页版式式的骨骼骼型是一一种规范范的、理理性的分分割方法法，类似似于报刊刊的版式式。常见见的骨骼骼有竖向向通栏、双双栏、三三栏、四四栏和横横向的通通栏、双双栏、三三栏和四四栏等。一一般以竖竖向分栏栏为多。这这种版式式给人以以和谐、理理性的美美。几种种分栏方方式结合合使用，既理性、条理，又活泼而富有弹性。3特效效在本网站站中有两两种动画画效果：一是采采用Fllashh软件制制作了网网站的广广告；二二是采用用Javva SScriipt脚脚本制作作了滚动动图片。三、网站站建设方方案为了充分分发挥校校园网站站的作用用，就需需要对网网站的内内容进行行系统的的规划。1页面面风格创创意设

9、计计网站的页页面颜色色初步拟拟定采用用橙色为为基础色色，在此此色调的的基础上上进行颜颜色渐变变的展开开，通过过色彩的的运用突突出本网网站要传传达的求求知、务务实、健健康、热热烈、庄严等等元素，使使网站收收到良好好的创意意效果。2网站站栏目划划分根据我们们对用户户的了解解，特建建立以下下栏目。学校概概况专业设设置新闻中中心 教学管管理多彩校校园职教动动态校报校校刊学生工工作给我留留言视频新新闻校园快快讯校园文文化专业简简介知识小小宝库校园生生活学生风风采3网站站栏目内内容简介介4网站站建设拓拓扑图四、网站站设计方方案报价价明细静态页面面设计报报价明细细如下表表。工作项目目项目要求求页 数数单 价

10、（元元）合 计（元元）首页1XXXXXX子页不限XXXXXXBannner设设计类型为*.giif的动动画格式式NXXXXXXLogoo设计类型为*.giif的图图片格式式NXXXXXX总 计XXX服务器空空间、域域名价格格明细如如下表。项 目 名 称称功 能 要 求求个 数数单 价（元元）合 计（元元）国际域名名英文国际际域名（*.coom）1XXXXXX企业邮局局300MM独立邮邮局空间间，最多多可分550个用用户-XXXXXX合 计计XXX任务一 制作作抚州职职业技术术学校网网站效果果图步骤一 网站首首页效果果图的制制作一、网站站Loggo和BBannner的的制作二、文字字导航栏栏的制

11、作作三、视频频新闻栏栏目的制制作四、校园园快讯栏栏目的制制作五、图片片滚动区区域的制制作六、知识识小宝库库栏目的的制作七、图片片导航栏栏的制作作八、网站站链接导导航条的的制作及及版权信信息的制制作步骤二 网站站子页“新闻中中心”效果图图的制作作一、关于于新闻中中心栏目目的制作作二、关于于校园新新闻栏目目的制作作步骤三 网站站子页“教学管管理”效果图图的制作作任务二 横幅幅广告动动画制作作步骤一 网站站Loggo动画画的制作作一、网站站Loggo背景景图片的的制作二、站标标（Loogo）的的制作三、准备备图片素素材四、动画画制作步骤二 网站站Bannnerr动画的的制作一、网站站Bannnerr

12、背景图图片的制制作二、网站站Bannnerr文字素素材的制制作三、Fllashh动画制制作任务三 网站站搭建过过程步骤一 网站站首页的的制作一、创建建站点并并设置页页面属性性二、设置置CSSS样式三、制作作网站的的Loggo动画画四、制作作导航栏栏和baanneer五、制作作视频新新闻、校校园快讯讯、校园园文化及及职教动动态栏目目六、制作作滚动图图像区域域栏目七、制作作专业简简介和校校报校刊刊栏目八、制作作知识小小宝库、校校园生活活和学生生风采栏栏目九、制作作图片导导航栏十、制作作版权信信息步骤二 网站站子页的的制作本网站的的子页在在形式上上套用了了主页的的结构，使使之在风风格上与与主页完完全

13、统一一。页面面特点：（1）通通过表格格的嵌套套、单元元格的拆拆分与合合并来进进行网页页元素的的布局；（2）表表单的制制作；（3）栏栏目背景景图片的的制作。步骤三 链接接主页与与子页对主页与与各子页页之间进进行链接接，并使使链接畅畅通。征求客户户意见，修修改完善善对制作完完成的抚抚州职业业技术学学校网站站进行调调试发布布，在广广泛征集集客户意意见的基基础上，尽尽可能地地按照客客户的要要求进行行配套修修改与更更新，使使得网站站进一步步完善，达达到制作作网站的的目的。项目实训训在前面学学习的项项目基础础上，请请大家依依据网站站制作流流程，设设计制作作教育类类网站小结本项目主主要介绍绍了教育育类网站站

14、的前期期准备、中中期制作作和网站站搭建等等内容。通过本项目的学习，使学生增强对教育类网站的感性认识，为以后各种类型网站的学习与实践奠定基础。本章教学学建议教学中应应尽量发发挥学生生的主动动性，通通过课堂堂讨论、项项目实训训、布置置作业等等多种手手段配合合老师讲讲授，使使学生在在极大的的兴趣动动力中完完成对教教育类网网站的设设计与制制作。在理论性性较强的的客户需需求分析析和网站建建设方案案部分，应应循序渐渐进，使使学生尽尽快理解解并能初初步掌握握教育类类网站的的相关准备备工作。项目二商商业类网网站的设设计与制制作本项目教教学提要要教学重点点：商业业类网站站的客户户需求分分析；商业类网网站的网网站

15、风格格定位；商业类网网站的网网站建设设方案；商业类网网站的网网站设计计方案报报价明细细；制作心缘缘礼品网网站效果果图；制作心缘缘礼品网网站的横横幅广告告动画心缘礼品品网站的的搭建。教学难点点：客户户需求分分析；网网站风格格定位；设计网网站的建建设方案案。本项目教教学内容容心缘礼品品网站是是一个商商品网站站，或者者说是一一个各种种礼品的的电子商商铺。商商业网站站是商业业性和艺艺术性的的结合，同同时也是是一个企企业文化化的载体体，通过过视觉元元素，承承接企业业的文化化和企业业的品牌牌，好的的网站设设计才有助于于企业树树立良好的社社会形象象，一、客户户需求分分析客户的建建站要求求主要有有以下几几个方

16、面面：第1，全全方位的的商品分分类展示示。要把把经营的的各种礼礼品按照照若干分分类方式式进行分分类，以以便从种种类、功功能、特特色等不不同角度度向浏览览者充分分展示自自己的商商品。第2，方方便快捷捷的网上上交易。网网站要向向购物者者提供一一个安全全、简便便的支付付方式，以以实现安安全快速速高效的的网上交交易。第3，可可靠的安安全防范范措施。按按照客户户的要求求，建立立网站的的安全防防范屏障障，避免免网站交交易信息息的泄露露丢失，甚甚至账户户资金被被窃取。第4，健健全的后后台管理理系统。网网站要具具有商品品分类管管理及搜搜索、交交易记录录保存、会会员注册册、商品品增减登登记等系系统管理理功能，为

17、为客户实实施有效效管理提提供可靠靠的管理理工具。第5，客客户对网网站界面面色彩、网网页图案案，以及及版式、特特效等方方面提出出的特定定要求。二、网站站风格定定位1色彩彩本项目中中采用一一种主题题色红色，同同时配以以红色到到黄色的的渐变，及及黄色的的边框线线条，使使页面不不至于单调调、乏味。根根据本项项目的主主旨宣传礼礼品，采用红红色为主主题色更更能体现现中国的的国情，人们喜喜欢用红红色衬托托喜庆、热热烈、温温暖、幸幸福、吉吉祥、真真诚，颜颜色的合合理搭配配能吸引引浏览者者的视线线，让他他们感觉觉网站清清晰、明了，层层次分明明。2排版版本项目采采用的就就是双栏栏布局，即即规范、理理性的布布局分割

18、割。通过过合理框框架布局局的选用用，保持持了信息密密度的平平衡。3特效效在本网站站中有两两种动画画效果：一是采采用Addobee ImmageeReaady软软件制作作了网站站的横幅幅广告；二是在在公告栏栏下方，通通过运用用CSSS样式中中的方框框定位及及项目列列表排序序及代码码的灵活活使用，达达到在同同一版面面根据需需要显示示不同内内容的效效果。三、网站站建设方方案1页面面风格创创意设计计网站页面面风格颜颜色初步步拟定采采用红色色为主题题色，在在此基础础上进行行颜色的的合理搭搭配，通通过颜色色的色相相、明度度等的灵灵活应用用突出本本网站要要传达的的喜庆、温暖、幸福、吉祥等元素，使网站收到了良

19、好的创意效果。2网站站栏目划划分根据我们们对用户户的了解解，特建建立以下下主要栏栏目。l 公司首首页l 特别别推荐l 公司产产品l 重点点推荐l 产品展展示l 每日日特价l 会员天天地l 品牌牌专卖l 定购指指南l 分类类目录l 给我留留言l 限时时抢好礼礼l 精品广广场l 厂家家推荐l 最新礼礼品3网站站栏目内内容简介介4网站站建设拓拓扑图四、网站站设计方方案报价价明细任务一 制作作心缘礼礼品网站站效果图图步骤一 网站首首页效果果图的制制作一、网站站Loggo的制制作二、导航航栏的制制作三、最新新礼品栏栏目的制制作四、每日日特价栏栏目的制制作五、Fllashh动画的的制作六、诚信信礼品栏栏目

20、的制制作七、品牌牌专卖栏栏目的制制作八、分类类栏目的的制作九、限时时抢好礼礼栏目的的制作十、厂家家推荐栏栏目的制制作十一、网网站下方方链接导导航条及及版权信信息的制制作步骤二 网站站子页“公司产产品”效果图图的制作作关于产品品展台栏栏目的制制作步骤三 网站站子页“礼品文文化”效果图图的制作作任务二 横幅幅广告动动画制作作一、准备备图片素素材二、动画画制作任务三 网站站搭建过过程步骤一 网站站首页的的制作一、创建建站点并并设置页页面属性性二、设置置CSSS样式三、制作作网站的的站标、导导航栏和和公告栏栏四、制作作最新礼礼品、精精品广场场、特别别推荐、重重点推荐荐栏目 为为了制作作该栏目目的两侧侧

21、细线，定定义. prootj_lefft CCSS样样式，其其参数设设置如图图2-991所示示。图2-991五、制作作每日特特价栏目目六、制作作横幅广广告和诚诚信礼品品栏目七、制作作品牌专专卖栏目目八、制作作分类目目录栏目目九、制作作限时抢抢好礼栏栏目十、制作作厂家宣宣传栏目目十一、制制作下方方导航栏栏和订单单查询十二、制制作版权权信息步骤二 网站站子页的的制作一、页面面特点本网站的的子页在在形式上上也是套套用了主主页的结结构，使使之在风风格上与与主页完完全一致致、浑然然一体，这这也是读读者在设设计制作作网站中中应该掌掌握的一一点。子子页主要要的特点点如下：（1）充充分利用用表格来来进行网网页

22、元素素的布局局；（2）利利用图形形图像处处理软件件制作小小图片；（3）充充分利用用CSSS样式表表的作用用；（4）利利用ifframme实现现同一区区域显示示不同的的内容。步骤三 链接接主页与与子页对主页与与各子页页之间进进行链接接，并使使链接畅畅通。征求客户户意见，修修改完善善对制作完完成的心心缘礼品品网站进进行调试试发布，在在广泛征征集客户户意见的的基础上上，尽可可能地按按照客户户的要求求进行补补充、修修改，使使得网站站进一步步完善，直直到客户户满意。小结本项目主主要介绍绍了商业业类网站站的前期期准备、中中期制作作和网站站搭建等等内容。通过本项目的学习，使学生增强对商业类网站的认知，为以后

23、能胜任商业类网站和电子商务类网站的设计与制作奠定基础。本章教学学建议教学中教教师应结结合各自的的实习条条件和不不同情况况，适当当增加实实训的内内容，尽尽量发挥挥学生的的主动性性，促使使教师转转向教练练的角色色，让学学生真正正的掌握握网站前前台设计计技能。在理论性性较强的的客户需需求分析析和网站站建设方方案部分分，应深深入浅出出，使学学生尽快快理解并并能逐步掌握握商业类网网站的相相关准备备工作。项目三旅旅游休闲闲类网站站的设计计与制作作本项目教教学提要要教学重点点：旅游游休闲类类网站的的客户需需求分析析；旅游休闲闲类网站站的网站站风格定定位；旅游休闲闲类网站站的网站站建设方方案；旅游休闲闲类网站

24、站的网站站设计方方案报价价明细；制作云南南旅游网网站效果果图；制作云南南旅游网网站的横横幅广告告动画；云南旅游游网站的的搭建。教学难点点：客户户需求分分析；网网站风格格定位；设计网网站的建建设方案案。本项目教教学内容容旅游行业业网站是是互联网网技术在在传统行行业的应应用之一一，目前前网络已已成为旅旅游业一一种至关关重要的的推广模模式，旅旅游景点点利用网网站介绍绍旅游资资源，旅旅行社通通过网站站发布旅旅游资讯讯和在线线旅游产产品销售售，游客客在社区区交流平平台上分分享各自自的旅游游心得等等。本项项目以旅旅游休闲闲类网站站中的旅旅游服务务类网站站为范例例，系统统介绍云云南旅游游网站设设计制作作的基

25、本本方法和和工作过过程。一、客户户需求分分析客户的建建站要求求主要有有以下几几个方面面：（1）宣宣传云南南省的锦锦秀景区区、民俗俗风情、云云南美食食等，提提高云南南省旅游游业在国国内外的的知名度度；（2）适适时地发发布云南南精品旅旅游线路路、洒店店推荐等等信息，为为旅游者者提供最最佳服务务；（3）在在网上适适时地发发布旅游游游记，通通过真实实的旅游游者的体体会，吸吸引国内内外的旅旅游者，为为云南省省的旅游游业的发发展做出出一份微微薄之力力；（4）网网站上要要设有联联系我们们等栏目目或子页页，用户户可以对对旅游线线路等进进行评论论，也可可以说说说自己旅旅游的感感受，这这对网站站的改进进和更新新很

26、有帮帮助。二、网站站风格定定位1色彩彩：云南旅游游网站选选定主色色调为绿绿色和浅浅蓝色，绿绿色所传传递的是是清爽、理理想、希希望和生生长的意意象，较较符合旅旅游服务务业。绿绿色与人人类息息息相关，是是自然之之色，代代表了生生命与希希望，也也充满了了青春与与活力。绿绿色在黄黄色和蓝蓝色之间间，属于于较中庸庸的颜色色，是和和平色，偏偏向自然然美，宁宁静、生生机勃勃勃、宽容容，可与与多种颜颜色搭配配而达到到和谐的的效果。浅浅蓝色具具有淡雅雅、清新新、浪漫漫和高贵贵的特性性，它也也是最具具凉爽、清清新特征征的色彩彩。网站站中采用用浅蓝色色和绿色色、白色色的搭配配使页面面看起来来非常干干净清澈澈，能体体

27、现出柔柔顺淡雅雅和浪漫漫的气氛氛。使人人可以长长时间驻驻留其间间，也不不会觉得得疲劳。2排版版云南旅游游网站采采用的是是“T”字型排排版形式式，这是是网页设设计中常常用的一一种布局局方式。该该网站最最上面是是网站的的站标以以及横幅幅广告条条，接下下来就是是网站的的主要内内容，右右面为几几个主要要栏目，左左面显示示该页主主要内容容。左右右一起罗罗列到底底，最下下面是网网站的一一些基本本信息、联联系方式式、版权权声明等等。这种种版式的的优点是是页面结结构清晰晰，主次次分明，信信息量大大。弱点点是规矩矩呆板，如如果细节节色彩上上不注意意，很容容易让人人看之之无味。针对对这个弱弱点，该该网站在在细节上

28、上做了一一些处理理，例如如页面栏栏目的造造型设计计别具一一格，并并在栏目目中适当当地添加加了动画画效果，使使整个页页面显得得更加生生动、活活泼。3特效效本网站中中有两种种动画效效果：一一是采用用ImaageRReaddy软件件制作了了网站横横幅广告告条；二二是采用用JavvaSccrittpt脚脚本制作作的多张张图片交交换效果果。三、网站站建设方方案为了充分分发挥旅旅游网站站的作用用，就需需要对网网站的内内容进行行系统的的规划。1页面面风格创创意设计计该网站页页面颜色色初步拟拟定采用用绿色和和蓝色为为主色调调，在此此色调的的基础上上对绿色色系和蓝蓝色系中中的不同同颜色进进行有机机搭配，同同时还

29、适适当地辅辅以红橙橙色，使使网站产产生一种种优雅，舒舒适的气气氛。同同时，该该网站在在栏目的的造型设设计上采采用了别别具一格格的造型，该该创意设设计使网网页看上上去更加加生动、活活泼。2网站站栏目划划分根据我们们对用户户的了解解，特建建立以下下栏目。走进云云南 云南风风情景点大大全 旅游游游记旅游快快讯 旅游须须知昆明一一地 地理概概况云南美美食 联系我我们精品图图库 机票查查询近期特特价线路路 各种旅旅游线路路旅游常常识 知名旅旅游企业业云南气气候 友情链链接特价机机票推荐荐 出游工工具3网站站栏目内内容简介介4网站站建设拓拓扑图四、网站站设计方方案报价价明细任务一 制作作云南旅旅游网站站效

30、果图图步骤一 网站首首页效果果图的制制作一、网站站Loggo和BBannner的的制作二、导航航栏的制制作三、近期期特价线线路栏目目的制作作四、各种种旅游线线路栏目目的制作作五、云南南风情栏栏目和知知名旅游游企业栏栏目的制制作六、云南南气候栏栏目的制制作七、版权权部分的的制作步骤二 网站站子页“景点大大全”效果图图的制作作一、景点点大全栏栏目的制制作步骤三 网站站子页“云南美美食”效果图图的制作作任务二 横幅幅广告动动画制作作步骤一 素材材准备一、利用用Phootosshopp制作横横幅广告告的背景景二、利用用Phootosshopp进行图图像处理理三、利用用Phootosshopp制作文文字

31、效果果步骤二 动画画制作一、利用用ImaageRReaddy制作作图像动动画二、利用用ImaageRReaddy制作作文字动动画任务三 网站站搭建过过程步骤一 网站站首页的的制作一、站点点的建立立和网站站首页的的创建二、创建建CSSS样式三、网站站首页LLogoo、 BBannner和和导航栏栏的制作作四、网站站首页主主体部分分中右侧侧栏目的的制作五、网站站首页版版权部分分的制作作六、网站站首页中中各种链链接的设设置七、网站站首页中中文本链链接样式式的设置置八、网站站首页对对齐方式式设置步骤二 网站站子页的的制作本站的子子页在形形式上套套用了主主页的结结构，使使之在风风格上与与主页完完全统一一

32、。页面面特点：（1）通通过表格格的嵌套套来进行行网页元元素的布布局；（2）栏栏目及栏栏目背景景图片的的制作。步骤三 链接接主页与与子页对主页与与各子页页之间进进行链接接，并使使链接畅畅通。征求客户户意见，修修改完善善对制作完完成的云云南旅游游网站进进行调试试发布，在在广泛征征集客户户意见的的基础上上，尽可可能地按按照客户户的要求求进行配配套修改改与更新新，使得得网站进进一步完完善，达达到制作作网站的的目的。项目实训训在前面学学习的项项目基础础上，依依据网站站制作流流程，请请大家设设计制作作旅游休休闲类网网站。小结本项目主主要介绍绍了旅游游休闲类类网站的的前期准准备、中中期制作作和网站站搭建等等

33、内容。通过本项目的学习，要求学生能对旅游休闲类网站有一个整体的认识，并且能很好地掌握网站设计制作的基本方法和工作过程，同时对网站的色彩搭配、网站的页面排版和网页特效有一个理性上的认知。本章教学学建议教学中多多引导学学生思考考问题，以以问题方方式呈现现，提供供解决问问题的途途径，例例如可以以通过网网络查找找，并不不要把所所有的东东西都给给学生，以以问题的的方式来来呈现各各个环节节，发挥挥学生的的主动性性，使学学生在任任务的驱驱使中完完成旅游游休闲类类网站的的设计与与制作。项目四体体育健身身类网站的的设计与与制作本项目教教学提要要教学重点点：体育育健身类类网站的的客户需需求分析析；体育健身身类网站

34、的的网站风风格定位位；体育健身身类网站的的网站建建设方案案；体育健身身类网站的的网站设设计方案案报价明明细；制作利民民健身网网站效果果图；制作利民民健身网网站的横横幅广告告动画；利民健身身网站的的搭建。教学难点点：客户户需求分分析；网网站风格格定位；设计网网站的建建设方案案。本项目教教学内容容体育健身身类网站站其特点点是具有有自由性性、文化化性、非非功利性性和主动动性等。对对增进健健康、强强健体魄魄，预防防疾病与与康复，提提高文化化素养与与精神文文明建设设，丰富富生活内内容与加加强人际际关系，以以及促进进人的社社会化与与个性形形成等都都有重要要意义和和作用。本项目以体育健身类网站中的健身资讯服

35、务网站为范例，系统介绍利民健身网站设计制作的基本方法和工作过程。一、客户户需求分分析客户的建建站要求求主要有有以下几几个方面面：（1）宣宣传体育育健身常常识、体体育健身身项目等等，增强强全民健健身意识识，促进进健身市市场的规规范化、专专业化，立立足打造造最为专专业、时时尚、项项目最全全的健身身中心；（2）适适时地发发布最新新健身课课程、健健身快讯讯等信息息，为健健身爱好好者提供供最佳服服务；（3）开开设健身身问答栏栏目，为为体育健健身爱好好者提供供一个专专业性很很强的信信息交流流的平台台；（4）网网站上要要设有论论坛栏目目，用户户可以对对健身知知识、健健身方式式等进行行评论，也也可以说说说自己

36、己健身后后的感受受，这对对网站的的改进和和更新很很有帮助助。二、网站站风格定定位1色彩彩：利民健身身网站选选定主色色调为天天蓝色，因因为天蓝蓝色是最最具凉爽爽，清新新，专业业的色彩彩，很适适合于体体育健身身类网站站。页面面的整体体色彩是是通过调调整主色色调的饱饱和度和和透明度度，产生生不同视视觉效果果的蓝色色，这样样的页面面看起来来色彩统统一，有有层次感感。网站站中除了了采用天天蓝色系系外，还还和对比比色橙色色搭配，使使该网站站在专业业的基础础上又多多了几分分时尚。再再恰当地地配上点点蜡笔黄黄橙色，使使该网站站又增添添几分宁宁静、详详和。2排版版利民健身身网站采采用的是是“T”字型排排版形式式

37、，即指指页面顶顶部为横横条网站站标志+广告条条，下方方左面为为主菜单单，右面面显示内内容的布布局，因因为菜单单条背景景较深，整整体效果果类似英英文字母母T,所以以我们称称之为T形形布局。这这是网页页设计中中常用的的一种布布局方式式。该网网站最上上面是网网站的站站标以及及横幅广广告条，接接下来就就是网站站的主要要内容，左左面为几几个主要要栏目，右右面显示示该页主主要内容容。左右右一起罗罗列到底底，最下下面是网网站的一一些基本本信息、联联系方式式、版权权声明等等。这种种版式的的优点是是页面结结构清晰晰，主次次分明，信信息量大大。弱点点是规矩矩呆板，如如果细节节色彩上上不注意意，很容容易让人人看之之

38、无味。针对对这个弱弱点，该该网站在在细节上上做了一一些处理理，例如如在页面面中每个个栏目的的造型设设计都各各有千秋秋，颜色色搭配也也别具一一格，使使整个网网页显得得非常时时尚，没没有一点点呆板的的痕迹。3特效效在本网站站中有两两种动画画效果：一是采采用ImmageeReaady软软件制作作了网站站横幅广广告条；二是利利用脚本本制作滚滚动字幕幕效果。三、网站站建设方方案为了充分分发挥体体育健身身网站的的作用，就就需要对对网站的的内容进进行系统统的规划划。1页面面风格创创意设计计该网站页页面颜色色初步拟拟定采用用天蓝色色为主色色调，在在此色调调的基础础上对天天蓝色系系中的不不同颜色色进行有有机搭配

39、配，同时时还适当当地辅以以橙色。通通过这些些颜色的的运用不不但能很很好地突突出本网网站要传传达的凉凉爽、清清新、专专业等元元素，而而且也给给该网站站增添了了几分时时尚。为了使页页面排版版不落俗俗套，该该网站虽虽然采用用了大众众化的“T”字型排排版形式式，但在在版面的的造型设设计上采采用了别别具一格格的栏目目造型设设计，该该创意设设计使网网页看上上去更具具时尚感感。2网站站栏目划划分根据我们们对用户户的了解解，特建建立以下下栏目。健身常常识 健身运运动运动项项目 健身快快讯健身论论坛 健身知知识健身课课程 健身图图片健身新新闻 健身时时刻健身问问答 健身分分类知识识3网站站栏目内内容简介介4网站

40、站建设拓拓扑图四、网站站设计方方案报价价明细任务一 制作作利民健健身网网网站效果果图步骤一 网站首首页效果果图的制制作一、网站站Loggo和BBannner的的制作二、导航航栏的制制作三、健身身新闻集集粹栏目目的制作作四、健身身运动栏栏目的制制作五、版权权部分的的制作步骤二 网站站子页“健身运运动”效果图图的制作作一、健身身时刻栏栏目的制制作二、健身身分类知知识栏目目的制作作步骤三 网站站子页“运动项项目”效果图图的制作作任务二 横幅幅广告动动画制作作步骤一 素材材准备一、利用用Phootosshopp制作横横幅广告告的背景景二、利用用Phootosshopp进行图图像处理理三、利用用Phoo

41、tosshopp制作文文字效果果步骤二 动画画制作一、利用用ImaageRReaddy制作作图像动动画二、利用用ImaageRReaddy制作作文字动动画任务三 网站站搭建过过程步骤一 网站站首页的的制作一、站点点的建立立和网站站首页的的创建二、创建建CSSS样式三、网站站首页LLogoo、 BBannner和和导航栏栏的制作作四、网站站首页主主体部分分中右侧侧栏目的的制作五、网站站首页版版权部分分的制作作六、网站站首页中中各种链链接的设设置七、网站站首页中中文本链链接样式式的设置置八、健身身新闻集集粹栏目目中滚动动字幕的的制作九、网站站首页对对齐方式式设置步骤二 网站站子页的的制作本站的子子

42、页在形形式上套套用了主主页的结结构，使使之在风风格上与与主页完完全统一一。页面面特点：（1）通通过表格格的嵌套套来进行行网页元元素的布布局；（2）栏栏目及栏栏目背景景图片的的制作。步骤三 链接接主页与与子页对主页与与各子页页之间进进行链接接，并使使链接畅畅通。征求客户户意见，修修改完善善对制作完完成的利利民健身身网站进进行调试试发布，在在广泛征征集客户户意见的的基础上上，尽可可能地按按照客户户的要求求进行配配套修改改与更新新，使得得网站进进一步完完善，达达到制作作网站的的目的。项目实训训在前面学学习的项项目基础础上，请请大家依依据网站站制作流流程，设设计制作作体育健健身类网网站。小结本项目主主

43、要介绍绍了体育育健身类类网站的的前期准准备、中中期制作作和网站站搭建等等内容。通过本项目的学习，要求学生能对体育健身类网站有一个整体的认识，并且能很好地掌握网站设计制作的基本方法和工作过程，同时能较好地运用网站的色彩搭配、网站的页面排版和网页特效。本章教学学建议教学中以以研究性性学习为为主，多多引导学学生进入入主动探探求知识识的过程程，发挥挥学生的的主动性性，使学学生围绕绕本项目目的主题题调查、加加工、处处理、应应用相关关信息，完成体育健身类网站的设计与制作。项目五政政府机关关类网站站的设计计与制作作本项目教教学提要要教学重点点：政府府机关类类网站的的客户需需求分析析；政府机关关类网站站的网站站风格定定位；政府机关关类网站站的网站站建设方方