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

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

1、职业教育教学改革系列教材（项目实战类）网站前台设设计综合实实训电子教学参参考资料韩宝玉刘 改 主编祝海英雷亚亚玲 李李东生 副主编Publiishinng Hoouse of EElecttroniics IIndusstry北京BEEIJINNG前 言为了配合网站前台设计综合实训课程的教学，更好地体现技能教材的编写特色，更好地为读者服务，编写了此教学资料。教学资料内内容有三个个部分。第一部分是是教学指南南，包括了了课程性质质与任务、课课程内容和和要求、教教学建议、教教学时间分分配等。第二部分是是电子教案案，采用PPowerrPoinnt课件形形式。教师师可以根据据不同的教教学要求按按需选取和

2、和重新组合合。第三部分是是电子网站站，给出了了与教材配配套的每个个项目对应应的电子网网站。第四部分是是项目实训训素材，给给出了每个个项目实训训的文字素材材。限于编著者者水平有限限，教学资资料中有错错误或不妥妥之处，请请读者给予予批评指正正。编 者 2010年年3月 网站前台台设计综合合实训教教学指南1. 课程程的性质与与任务本课程是计计算机应用用技术专业业、网站规规划与开发发技术专业业的核心课课程、专业业必修课。主要培养养学生网站站前台设计计制作能力力，培养学学生学会使使用Dreeamweeaverr、Phootoshhop及FFlashh等软件开开发或建设设各种类型型的网站的的能力。在保证课

3、程程内容体系系的相对完完整和系统统的基础上上，按掌握握知识的思思维规律，对对原理性内内容的叙述述不作烦琐琐的理论介介绍，将重重点放在应应用技能的的介绍上，教教学内容以以实践教学学的方式引引出。本课程以企企业的真实实案例为驱驱动，以工作过过程为导向向，在完成成工作任务务的过程中中实现教学学指导“能力化”。通过本课课程的学习习和实训，使使学生掌握握网站前台台设计的基基础知识，并并很好的掌掌握网站前前台设计的的操作技能能。2.教学时时间分配项目课程 内 容课时项目1教育类网站站的设计与与制作16项目2商业类网站站的设计与与制作14项目3旅游休闲类类网站的设设计与制作作14项目4体育健身类类网站的设设

4、计与制作作14项目5政府机关类类网站的设设计与制作作12项目6企业类网站站的设计与与制作10合 计80注：以上课课时分配仅仅供参考，教教学中可根根据教学的的安排再做做调整。3. 教学学提要、课课程内容、教教学要求项目一教育育类网站的的设计与制制作本项目教学学提要教学重点：教育类网网站的客户户需求分析析；教育类网站站的网站风风格定位；教育类网站站的网站建建设方案；教育类网站站的网站设设计方案报报价明细；制作抚州职职业技术学学校网站效效果图；制作抚州职职业技术学学校网站的的横幅广告告动画抚州职业技技术学校网网站的搭建建。教学难点：客户需求求分析；网站风格格定位；设计网站站的建设方方案。本项目教学学

5、内容校园网站的的建设中，前前期准备工工作是至关关重要的，要要有明确的的做网站的的根本目的的。校园网站是学校校对外宣传传、交流，进进行形象展展示的一个个窗口和平平台。一、客户需需求分析客户需求，是是指学校创创建门户网网站的目的的和对网站站提出的特特定要求。了了解客户需需求，是建建好学校门门户网站的的前提。抚抚州职业技技术学校对对其拟建的的门户网站站提出的主主要要求有有以下几点点。（1）宣传传学校办学学理念，展展示办学设设施、教师队伍伍、专业设设置、就业业情况，提高高学校的社社会知名度度；（2）适时时发布学校校管理、教教学、招生生等相关信信息，为求求学者提供供相关咨询询服务；（3）获取取社会各界界

6、对学校教教育教学情情况的评价价和意见、建建议；（4）建立立与兄弟院院校进行交交流学习的的平台；（5）向社社会各界推推荐毕业生生，为毕业业生提供就就业信息。二、网站风风格定位校园网站就就是学校的的网上形象象，每一所所学校都有有自己的特特色，每一一个院系或或班级都会会有自己的的强项。对对于本项目目介绍的校校园网站以以抚州职业业技术学校校为例，从以下三三个方面来来学习该网网站的风格格定位。1色彩：本项目中采采用一种色彩，先先选定主色色调为橙色色，这是令令人激奋的的色彩，具具有明亮、健健康、热烈烈、温暖、欢欢乐、辉煌煌、庄严，以及及尊贵的色色感，然后后通过调整透透明度或者者饱和度，就是色彩进行变淡、加

7、深或渐变的处理，产生新的橙色的近似色彩，使网页看起来色彩统一，富有层次感。在页面中借助浅灰色的背景图像，采用了留白艺术给人一个遐想的空间，让人感觉心情舒适、畅快。同时，也对于协调页面的均衡起到相当大的作用。 2排版本项目就是是采用骨骼骼型排版形形式，网页页版式的骨骨骼型是一一种规范的的、理性的的分割方法法，类似于于报刊的版版式。常见见的骨骼有有竖向通栏栏、双栏、三三栏、四栏栏和横向的的通栏、双双栏、三栏栏和四栏等等。一般以以竖向分栏栏为多。这这种版式给给人以和谐谐、理性的的美。几种种分栏方式式结合使用用，既理性性、条理，又又活泼而富富有弹性。3特效在本网站中中有两种动动画效果：一是采用用Fla

8、ssh软件制制作了网站站的广告；二是采用用Javaa Scrript脚脚本制作了了滚动图片片。三、网站建建设方案为了充分发发挥校园网网站的作用用，就需要要对网站的的内容进行行系统的规规划。1页面风风格创意设设计网站的页面面颜色初步步拟定采用用橙色为基基础色，在在此色调的的基础上进进行颜色渐渐变的展开开，通过色色彩的运用用突出本网网站要传达达的求知、务务实、健康康、热烈、庄严等元元素，使网网站收到良良好的创意意效果。2网站栏栏目划分根据我们对对用户的了了解，特建建立以下栏栏目。学校概况况专业设置置新闻中心心 教学管理理多彩校园园职教动态态校报校刊刊学生工作作给我留言言视频新闻闻校园快讯讯校园文化

9、化专业简介介知识小宝宝库校园生活活学生风采采3网站栏栏目内容简简介4网站建建设拓扑图图四、网站设设计方案报报价明细静态页面设设计报价明明细如下表表。工作项目项目要求页 数单 价（元）合 计（元）首页1XXXXXX子页不限XXXXXXBanneer设计类型为*.gif的的动画格式式NXXXXXXLogo设设计类型为*.gif的的图片格式式NXXXXXX总 计XXX服务器空间间、域名价价格明细如如下表。项 目 名名 称功 能 要要 求个 数单 价（元）合 计（元）国际域名英文国际域域名（*）1XXXXXX企业邮局300M独独立邮局空空间，最多多可分500个用户-XXXXXX合 计XXX任务一 制作

10、抚州州职业技术术学校网站站效果图步骤一 网网站首页效效果图的制制作一、网站LLogo和和Bannner的制制作二、文字导导航栏的制制作三、视频新新闻栏目的的制作四、校园快快讯栏目的的制作五、图片滚滚动区域的的制作六、知识小小宝库栏目目的制作七、图片导导航栏的制制作八、网站链链接导航条条的制作及及版权信息息的制作步骤二 网站子页页“新闻中心心”效果图的的制作一、关于新新闻中心栏栏目的制作作二、关于校校园新闻栏栏目的制作作步骤三 网站子页页“教学管理理”效果图的的制作任务二 横幅广告告动画制作作步骤一 网站Loogo动画画的制作一、网站LLogo背背景图片的的制作二、站标（LLogo）的的制作三、

11、准备图图片素材四、动画制制作步骤二 网站Baannerr动画的制制作一、网站BBanneer背景图图片的制作作二、网站BBanneer文字素素材的制作作三、Flaash动画画制作任务三 网站搭建建过程步骤一 网站首页页的制作一、创建站站点并设置置页面属性性二、设置CCSS样式式三、制作网网站的Loogo动画画四、制作导导航栏和bbanneer五、制作视视频新闻、校校园快讯、校校园文化及及职教动态态栏目六、制作滚滚动图像区区域栏目七、制作专专业简介和和校报校刊刊栏目八、制作知知识小宝库库、校园生生活和学生生风采栏目目九、制作图图片导航栏栏十、制作版版权信息步骤二 网站子页页的制作本网站的子子页在

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

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

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

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

16、彩、网网页图案，以以及版式、特特效等方面面提出的特特定要求。二、网站风风格定位1色彩本项目中采采用一种主主题色红色，同同时配以红红色到黄色色的渐变，及及黄色的边边框线条，使使页面不至于单调、乏味。根据据本项目的的主旨宣传礼品品，采用红色色为主题色色更能体现现中国的国国情，人们喜欢欢用红色衬衬托喜庆、热热烈、温暖暖、幸福、吉吉祥、真诚诚，颜色的的合理搭配配能吸引浏浏览者的视视线，让他他们感觉网网站清晰、明了，层层次分明。2排版本项目采用用的就是双双栏布局，即即规范、理理性的布局局分割。通过过合理框架架布局的选选用，保持持了信息密度度的平衡。3特效在本网站中中有两种动动画效果：一是采用用Adobb

17、e ImmageRReadyy软件制作作了网站的的横幅广告告；二是在在公告栏下下方，通过过运用CSSS样式中中的方框定定位及项目目列表排序序及代码的的灵活使用用，达到在在同一版面面根据需要要显示不同同内容的效效果。三、网站建建设方案1页面风风格创意设设计网站页面风风格颜色初初步拟定采采用红色为为主题色，在在此基础上上进行颜色色的合理搭搭配，通过过颜色的色色相、明度度等的灵活活应用突出出本网站要要传达的喜喜庆、温暖暖、幸福、吉吉祥等元素素，使网站站收到了良良好的创意意效果。2网站栏栏目划分根据我们对对用户的了了解，特建建立以下主主要栏目。l 公司首页页l 特别推推荐l 公司产品品l 重点推推荐l

18、 产品展示示l 每日特特价l 会员天地地l 品牌专专卖l 定购指南南l 分类目目录l 给我留言言l 限时抢抢好礼l 精品广场场l 厂家推推荐l 最新礼品品3网站栏栏目内容简简介4网站建建设拓扑图图四、网站设设计方案报报价明细任务一 制作心缘缘礼品网站站效果图步骤一 网网站首页效效果图的制制作一、网站LLogo的的制作二、导航栏栏的制作三、最新礼礼品栏目的的制作四、每日特特价栏目的的制作五、Flaash动画画的制作六、诚信礼礼品栏目的的制作七、品牌专专卖栏目的的制作八、分类栏栏目的制作作九、限时抢抢好礼栏目目的制作十、厂家推推荐栏目的的制作十一、网站站下方链接接导航条及及版权信息息的制作步骤二

19、网站子页页“公司产品品”效果图的的制作关于产品展展台栏目的的制作步骤三 网站子页页“礼品文化化”效果图的的制作任务二 横幅广告告动画制作作一、准备图图片素材二、动画制制作任务三 网站搭建建过程步骤一 网站首页页的制作一、创建站站点并设置置页面属性性二、设置CCSS样式式三、制作网网站的站标标、导航栏栏和公告栏栏四、制作最最新礼品、精精品广场、特特别推荐、重重点推荐栏栏目 为了了制作该栏栏目的两侧侧细线，定定义. pprotjj_lefft CSSS样式，其其参数设置置如图2-91所示示。图2-911五、制作每每日特价栏栏目六、制作横横幅广告和和诚信礼品品栏目七、制作品品牌专卖栏栏目八、制作分分

20、类目录栏栏目九、制作限限时抢好礼礼栏目十、制作厂厂家宣传栏栏目十一、制作作下方导航航栏和订单单查询十二、制作作版权信息息步骤二 网站子页页的制作一、页面特特点本网站的子子页在形式式上也是套套用了主页页的结构，使使之在风格格上与主页页完全一致致、浑然一一体，这也也是读者在在设计制作作网站中应应该掌握的的一点。子子页主要的的特点如下下：（1）充分分利用表格格来进行网网页元素的的布局；（2）利用用图形图像像处理软件件制作小图图片；（3）充分分利用CSSS样式表表的作用；（4）利用用ifraame实现现同一区域域显示不同同的内容。步骤三 链接主页页与子页对主页与各各子页之间间进行链接接，并使链链接畅通

21、。征求客户意意见，修改改完善对制作完成成的心缘礼礼品网站进进行调试发发布，在广广泛征集客客户意见的的基础上，尽尽可能地按按照客户的的要求进行行补充、修修改，使得得网站进一一步完善，直直到客户满满意。小结本项目主要要介绍了商商业类网站站的前期准准备、中期期制作和网网站搭建等等内容。通通过本项目目的学习，使使学生增强强对商业类网站站的认知，为以后能胜胜任商业类类网站和电电子商务类类网站的设计计与制作奠奠定基础。本章教学建建议教学中教师师应结合各自的实实习条件和和不同情况况，适当增增加实训的的内容，尽尽量发挥学学生的主动动性，促使使教师转向向教练的角角色，让学学生真正的掌握网站站前台设计计技能。在理

22、论性较较强的客户户需求分析析和网站建建设方案部部分，应深深入浅出，使使学生尽快快理解并能能逐步掌握商业业类网站的的相关准备备工作。项目三旅游游休闲类网网站的设计计与制作本项目教学学提要教学重点：旅游休闲闲类网站的的客户需求求分析；旅游休闲类类网站的网网站风格定定位；旅游休闲类类网站的网网站建设方方案；旅游休闲类类网站的网网站设计方方案报价明明细；制作云南旅旅游网站效效果图；制作云南旅旅游网站的的横幅广告告动画；云南旅游网网站的搭建建。教学难点：客户需求求分析；网网站风格定定位；设计计网站的建建设方案。本项目教学学内容旅游行业网网站是互联联网技术在在传统行业业的应用之之一，目前前网络已成成为旅游

23、业业一种至关关重要的推推广模式，旅旅游景点利利用网站介介绍旅游资资源，旅行行社通过网网站发布旅旅游资讯和和在线旅游游产品销售售，游客在在社区交流流平台上分分享各自的的旅游心得得等。本项目目以旅游休休闲类网站站中的旅游游服务类网网站为范例例，系统介介绍云南旅旅游网站设设计制作的的基本方法法和工作过过程。一、客户需需求分析客户的建站站要求主要要有以下几几个方面：（1）宣传传云南省的的锦秀景区区、民俗风风情、云南南美食等，提提高云南省省旅游业在在国内外的的知名度；（2）适时时地发布云云南精品旅旅游线路、洒洒店推荐等等信息，为为旅游者提提供最佳服服务；（3）在网网上适时地地发布旅游游游记，通通过真实的

24、的旅游者的的体会，吸吸引国内外外的旅游者者，为云南南省的旅游游业的发展展做出一份份微薄之力力；（4）网站站上要设有有联系我们们等栏目或或子页，用用户可以对对旅游线路路等进行评评论，也可可以说说自自己旅游的的感受，这这对网站的的改进和更更新很有帮帮助。二、网站风风格定位1色彩：云南旅游网网站选定主主色调为绿绿色和浅蓝蓝色，绿色色所传递的的是清爽、理理想、希望望和生长的的意象，较较符合旅游游服务业。绿绿色与人类类息息相关关，是自然然之色，代代表了生命命与希望，也也充满了青青春与活力力。绿色在在黄色和蓝蓝色之间，属属于较中庸庸的颜色，是是和平色，偏偏向自然美美，宁静、生生机勃勃、宽宽容，可与与多种颜

25、色色搭配而达达到和谐的的效果。浅浅蓝色具有有淡雅、清清新、浪漫漫和高贵的的特性，它它也是最具具凉爽、清清新特征的的色彩。网网站中采用用浅蓝色和和绿色、白白色的搭配配使页面看看起来非常常干净清澈澈，能体现现出柔顺淡淡雅和浪漫漫的气氛。使使人可以长长时间驻留留其间，也也不会觉得得疲劳。2排版云南旅游网网站采用的的是“T”字型排版版形式，这这是网页设设计中常用用的一种布布局方式。该该网站最上上面是网站站的站标以以及横幅广广告条，接接下来就是是网站的主主要内容，右右面为几个个主要栏目目，左面显显示该页主主要内容。左左右一起罗罗列到底，最最下面是网网站的一些些基本信息息、联系方方式、版权权声明等。这这种

26、版式的的优点是页页面结构清清晰，主次次分明，信信息量大。弱弱点是规矩矩呆板，如如果细节色色彩上不注注意，很容容易让人看之无味味。针对对这个弱点点，该网站站在细节上上做了一些些处理，例例如页面栏栏目的造型型设计别具具一格，并并在栏目中中适当地添添加了动画画效果，使使整个页面面显得更加加生动、活活泼。3特效本网站中有有两种动画画效果：一一是采用IImageeReaddy软件制制作了网站站横幅广告告条；二是是采用JaavaSccritppt脚本制制作的多张张图片交换换效果。三、网站建建设方案为了充分发发挥旅游网站的的作用，就就需要对网网站的内容容进行系统统的规划。1页面风风格创意设设计该网站页面面颜

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

28、栏栏目内容简简介4网站建建设拓扑图图四、网站设设计方案报报价明细任务一 制作云南南旅游网站站效果图步骤一 网网站首页效效果图的制制作一、网站LLogo和和Bannner的制制作二、导航栏栏的制作三、近期特特价线路栏栏目的制作作四、各种旅旅游线路栏栏目的制作作五、云南风风情栏目和和知名旅游游企业栏目目的制作六、云南气气候栏目的的制作七、版权部部分的制作作步骤二 网站子页页“景点大全全”效果图的的制作一、景点大大全栏目的的制作步骤三 网站子页页“云南美食食”效果图的的制作任务二 横幅广告告动画制作作步骤一 素材准备备一、利用PPhotooshopp制作横幅幅广告的背背景二、利用PPhotoosho

29、pp进行图像像处理三、利用PPhotooshopp制作文字字效果步骤二 动画制作作一、利用IImageeReaddy制作图图像动画二、利用IImageeReaddy制作文文字动画任务三 网站搭建建过程步骤一 网站首页页的制作一、站点的的建立和网网站首页的的创建二、创建CCSS样式式三、网站首首页Loggo、 BBanneer和导航航栏的制作作四、网站首首页主体部部分中右侧侧栏目的制制作五、网站首首页版权部部分的制作作六、网站首首页中各种种链接的设设置七、网站首首页中文本本链接样式式的设置八、网站首首页对齐方方式设置步骤二 网站子页页的制作本站的子页页在形式上上套用了主主页的结构构，使之在在风格

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

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

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

33、分析客户的建站站要求主要要有以下几几个方面：（1）宣传传体育健身身常识、体体育健身项项目等，增增强全民健健身意识，促促进健身市市场的规范范化、专业业化，立足足打造最为为专业、时时尚、项目目最全的健健身中心；（2）适时时地发布最最新健身课课程、健身身快讯等信信息，为健健身爱好者者提供最佳佳服务；（3）开设设健身问答答栏目，为为体育健身身爱好者提提供一个专专业性很强强的信息交交流的平台台；（4）网站站上要设有有论坛栏目目，用户可可以对健身身知识、健健身方式等等进行评论论，也可以以说说自己己健身后的的感受，这这对网站的的改进和更更新很有帮帮助。二、网站风风格定位1色彩：利民健身网网站选定主主色调为天

34、天蓝色，因因为天蓝色色是最具凉凉爽，清新新，专业的的色彩，很很适合于体体育健身类类网站。页页面的整体体色彩是通通过调整主主色调的饱饱和度和透透明度，产产生不同视视觉效果的的蓝色，这这样的页面面看起来色色彩统一，有有层次感。网网站中除了了采用天蓝蓝色系外，还还和对比色色橙色搭配配，使该网网站在专业业的基础上上又多了几几分时尚。再再恰当地配配上点蜡笔笔黄橙色，使使该网站又又增添几分分宁静、详详和。2排版利民健身网网站采用的的是“T”字型排版版形式，即即指页面顶顶部为横条条网站标志志+广告条条，下方左左面为主菜菜单，右面面显示内容容的布局，因因为菜单条条背景较深深，整体效效果类似英英文字母T,所所以

35、我们称称之为TT形布局局。这是网网页设计中中常用的一一种布局方方式。该网网站最上面面是网站的的站标以及及横幅广告告条，接下下来就是网网站的主要要内容，左左面为几个个主要栏目目，右面显显示该页主主要内容。左左右一起罗罗列到底，最最下面是网网站的一些些基本信息息、联系方方式、版权权声明等。这这种版式的的优点是页页面结构清清晰，主次次分明，信信息量大。弱弱点是规矩矩呆板，如如果细节色色彩上不注注意，很容容易让人看之无味味。针对对这个弱点点，该网站站在细节上上做了一些些处理，例例如在页面面中每个栏栏目的造型型设计都各各有千秋，颜颜色搭配也也别具一格格，使整个个网页显得得非常时尚尚，没有一一点呆板的的痕

36、迹。3特效在本网站中中有两种动动画效果：一是采用用ImaggeReaady软件件制作了网网站横幅广广告条；二二是利用脚脚本制作滚滚动字幕效效果。三、网站建建设方案为了充分发发挥体育健健身网站的的作用，就就需要对网网站的内容容进行系统统的规划。1页面风风格创意设设计该网站页面面颜色初步步拟定采用用天蓝色为为主色调，在在此色调的的基础上对对天蓝色系系中的不同同颜色进行行有机搭配配，同时还还适当地辅辅以橙色。通通过这些颜颜色的运用用不但能很很好地突出出本网站要要传达的凉凉爽、清新新、专业等等元素，而而且也给该该网站增添添了几分时时尚。为了使页面面排版不落落俗套，该该网站虽然然采用了大大众化的“T”字

37、型排版版形式，但但在版面的的造型设计计上采用了了别具一格格的栏目造造型设计，该该创意设计计使网页看看上去更具具时尚感。2网站栏栏目划分根据我们对对用户的了了解，特建建立以下栏栏目。健身常识识 健身运动动运动项目目 健身快讯讯健身论坛坛 健身知识识健身课程程 健身图片片健身新闻闻 健身时刻刻健身问答答 健身分类类知识3网站栏栏目内容简简介4网站建建设拓扑图图四、网站设设计方案报报价明细任务一 制作利民民健身网网网站效果图图步骤一 网网站首页效效果图的制制作一、网站LLogo和和Bannner的制制作二、导航栏栏的制作三、健身新新闻集粹栏栏目的制作作四、健身运运动栏目的的制作五、版权部部分的制作作

38、步骤二 网站子页页“健身运动动”效果图的的制作一、健身时时刻栏目的的制作二、健身分分类知识栏栏目的制作作步骤三 网站子页页“运动项目目”效果图的的制作任务二 横幅广告告动画制作作步骤一 素材准备备一、利用PPhotooshopp制作横幅幅广告的背背景二、利用PPhotooshopp进行图像像处理三、利用PPhotooshopp制作文字字效果步骤二 动画制作作一、利用IImageeReaddy制作图图像动画二、利用IImageeReaddy制作文文字动画任务三 网站搭建建过程步骤一 网站首页页的制作一、站点的的建立和网网站首页的的创建二、创建CCSS样式式三、网站首首页Loggo、 BBanne

39、er和导航航栏的制作作四、网站首首页主体部部分中右侧侧栏目的制制作五、网站首首页版权部部分的制作作六、网站首首页中各种种链接的设设置七、网站首首页中文本本链接样式式的设置八、健身新新闻集粹栏栏目中滚动动字幕的制制作九、网站首首页对齐方方式设置步骤二 网站子页页的制作本站的子页页在形式上上套用了主主页的结构构，使之在在风格上与与主页完全全统一。页页面特点：（1）通过过表格的嵌嵌套来进行行网页元素素的布局；（2）栏目目及栏目背背景图片的的制作。步骤三 链接主页页与子页对主页与各各子页之间间进行链接接，并使链链接畅通。征求客户意意见，修改改完善对制作完成成的利民健健身网站进进行调试发发布，在广广泛征

40、集客客户意见的的基础上，尽尽可能地按按照客户的的要求进行行配套修改改与更新，使使得网站进进一步完善善，达到制制作网站的的目的。项目实训在前面学习习的项目基基础上，请请大家依据据网站制作作流程，设设计制作体体育健身类类网站。小结本项目主要要介绍了体体育健身类类网站的前前期准备、中中期制作和和网站搭建建等内容。通通过本项目目的学习，要求学生能对体育健身类网站有一个整体的认识，并且能很好地掌握网站设计制作的基本方法和工作过程，同时能较好地运用网站的色彩搭配、网站的页面排版和网页特效。本章教学建建议教学中以研研究性学习习为主，多引引导学生进进入主动探探求知识的的过程，发发挥学生的的主动性，使学生围绕本

41、项目的主题调查、加工、处理、应用相关信息，完成体育健身类网站的设计与制作。项目五政府府机关类网网站的设计计与制作本项目教学学提要教学重点：政府机关关类网站的的客户需求求分析；政府机关类类网站的网网站风格定定位；政府机关类类网站的网网站建设方方案；政府机关类类网站的网网站设计方方案报价明明细；制作江宁市市人民政府府网站效果果图；制作江宁市市人民政府府网站的横横幅广告动动画江宁市人民民政府网站站的搭建。教学难点：客户需求求分析；网网站风格定定位；设计计网站的建建设方案。本项目教学学内容政府门户网网站是我国各级政政府机关履履行职能、面面向社会提提供服务的的官方网站站，是政府府机关实现现政务信息息公开

42、、服服务企业和和社会公众众、互动交交流的重要要渠道。本本项目以江江宁市人民民政府网站站为例，系系统介绍政政府门户网网站建设全全过程。一、客户需需求分析根据对政府府门户网站站的主要功功能的分析析，以用户户为中心的的政府门户户网站主体体应该主要要由信息服服务、互动服务务和在线服服务三大核核心部分组组成。（1）信息息服务要实实现政务信信息透明化化公开化；（2）互动动服务要建建立起政府府与市民沟沟通的有效效渠道；（3）在线线服务要始始终贯彻以以用户为中中心的思想想。二、网站风风格定位1色彩：红色是中国国文化中的的基本崇尚尚色，它体体现了中国国人在精神神和物质上上的追求，象征着吉吉祥、喜庆庆。橙色是愉愉

43、悦的颜色色，被称之之为“愉悦之橙橙”，它是充满满力量，是是生机勃勃勃的颜色，它它表现出喜喜悦和温暖暖等积极的的情感的同同时，也是是舒适的颜颜色。而红红橙色是一一种浓厚而而不透明的的色彩，好好像充满内内在温暖而而闪闪发光光，它象征征着富有生生气的大地地。本项目目选定红、橙橙两色为主主色调，通通过使用红红色与橙色色的渐变，使使整个页面面色彩统一一，富有层层次感。不不同深浅的的红色、橙橙色的配合合，也使页页面色彩产产生对比与与平衡，避避免产生单单调感。2排版根据政府网网站要承载载大信息量量的特点，以主页为例本项目采用了左中右结构的门户类网站的排版布局。左边与右边设置的是便民栏目，体现了用户为中心的建站思想；中间大面积为内容主区域，为使网