网站前台设计综合实训资料(doc 25页).doc

职业教育教学改革系列教材（项目实战类）网站前台设计综合实训电子教学参考资料韩宝玉 刘 改 主编祝海英 雷亚玲 李东生 副主编Publishing House of Electronics Industry北京BEIJING前 言为了配合网站前台设计综合实训课程的教学，更好地体现技能教材的编写特色，更好地为读者服务，编写了此教学资料。教学资料内容有三个部分。第一部分是教学指南，包括了课程性质与任务、课程内容和要求、教学建议、教学时间分配等。第二部分是电子教案，采用PowerPoint课件形式。教师可以根据不同的教学要求按需选取和重新组合。第三部分是电子网站，给出了与教材配套的每个项目对应的电子网站。第四部分是项目实训素材，给出了每个项目实训的文字素材。限于编著者水平有限，教学资料中有错误或不妥之处，请读者给予批评指正。编 者 2010年3月 网站前台设计综合实训教学指南1. 课程的性质与任务本课程是计算机应用技术专业、网站规划与开发技术专业的核心课程、专业必修课。主要培养学生网站前台设计制作能力，培养学生学会使用Dreamweaver、Photoshop及Flash等软件开发或建设各种类型的网站的能力。在保证课程内容体系的相对完整和系统的基础上，按掌握知识的思维规律，对原理性内容的叙述不作烦琐的理论介绍，将重点放在应用技能的介绍上，教学内容以实践教学的方式引出。本课程以企业的真实案例为驱动，以工作过程为导向，在完成工作任务的过程中实现教学指导“能力化”。通过本课程的学习和实训，使学生掌握网站前台设计的基础知识，并很好的掌握网站前台设计的操作技能。2. 教学时间分配项目课 程 内 容课 时项目1教育类网站的设计与制作16项目2商业类网站的设计与制作14项目3旅游休闲类网站的设计与制作14项目4体育健身类网站的设计与制作14项目5政府机关类网站的设计与制作12项目6企业类网站的设计与制作10合 计80注：以上课时分配仅供参考，教学中可根据教学的安排再做调整。3. 教学提要、课程内容、教学要求项目一 教育类网站的设计与制作本项目教学提要教学重点：教育类网站的客户需求分析；教育类网站的网站风格定位；教育类网站的网站建设方案；教育类网站的网站设计方案报价明细；制作抚州职业技术学校网站效果图；制作抚州职业技术学校网站的横幅广告动画抚州职业技术学校网站的搭建。教学难点：客户需求分析；网站风格定位；设计网站的建设方案。本项目教学内容校园网站的建设中，前期准备工作是至关重要的，要有明确的做网站的根本目的。校园网站是学校对外宣传、交流，进行形象展示的一个窗口和平台。一、客户需求分析客户需求，是指学校创建门户网站的目的和对网站提出的特定要求。了解客户需求，是建好学校门户网站的前提。抚州职业技术学校对其拟建的门户网站提出的主要要求有以下几点。（1）宣传学校办学理念，展示办学设施、教师队伍、专业设置、就业情况，提高学校的社会知名度；（2）适时发布学校管理、教学、招生等相关信息，为求学者提供相关咨询服务；（3）获取社会各界对学校教育教学情况的评价和意见、建议；（4）建立与兄弟院校进行交流学习的平台；（5）向社会各界推荐毕业生，为毕业生提供就业信息。二、网站风格定位校园网站就是学校的网上形象，每一所学校都有自己的特色，每一个院系或班级都会有自己的强项。对于本项目介绍的校园网站以抚州职业技术学校为例，从以下三个方面来学习该网站的风格定位。1色彩：本项目中采用一种色彩，先选定主色调为橙色，这是令人激奋的色彩，具有明亮、健康、热烈、温暖、欢乐、辉煌、庄严，以及尊贵的色感，然后通过调整透明度或者饱和度，就是色彩进行变淡、加深或渐变的处理，产生新的橙色的近似色彩，使网页看起来色彩统一，富有层次感。在页面中借助浅灰色的背景图像，采用了留白艺术给人一个遐想的空间，让人感觉心情舒适、畅快。同时，也对于协调页面的均衡起到相当大的作用。 2排版本项目就是采用骨骼型排版形式，网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。3特效在本网站中有两种动画效果：一是采用Flash软件制作了网站的广告；二是采用Java Script脚本制作了滚动图片。三、网站建设方案为了充分发挥校园网站的作用，就需要对网站的内容进行系统的规划。1页面风格创意设计网站的页面颜色初步拟定采用橙色为基础色，在此色调的基础上进行颜色渐变的展开，通过色彩的运用突出本网站要传达的求知、务实、健康、热烈、庄严等元素，使网站收到良好的创意效果。2网站栏目划分根据我们对用户的了解，特建立以下栏目。学校概况专业设置新闻中心 教学管理多彩校园职教动态校报校刊学生工作给我留言视频新闻校园快讯校园文化专业简介知识小宝库校园生活学生风采3网站栏目内容简介4网站建设拓扑图四、网站设计方案报价明细静态页面设计报价明细如下表。工 作 项 目项 目 要 求页 数单 价（元）合 计（元）首页1XXXXXX子页不限XXXXXXBanner设计类型为*.gif的动画格式NXXXXXXLogo设计类型为*.gif的图片格式NXXXXXX总 计XXX服务器空间、域名价格明细如下表。项 目 名 称功 能 要 求个 数单 价（元）合 计（元）国际域名英文国际域名（*.com）1XXXXXX企业邮局300M独立邮局空间，最多可分50个用户-XXXXXX合 计XXX任务一 制作抚州职业技术学校网站效果图步骤一 网站首页效果图的制作一、网站Logo和Banner的制作二、文字导航栏的制作三、视频新闻栏目的制作四、校园快讯栏目的制作五、图片滚动区域的制作六、知识小宝库栏目的制作七、图片导航栏的制作八、网站链接导航条的制作及版权信息的制作步骤二 网站子页“新闻中心”效果图的制作一、关于新闻中心栏目的制作二、关于校园新闻栏目的制作步骤三 网站子页“教学管理”效果图的制作任务二 横幅广告动画制作步骤一 网站Logo动画的制作一、网站Logo背景图片的制作二、站标（Logo）的制作三、准备图片素材四、动画制作步骤二 网站Banner动画的制作一、网站Banner背景图片的制作二、网站Banner文字素材的制作三、Flash动画制作任务三 网站搭建过程步骤一 网站首页的制作一、创建站点并设置页面属性二、设置CSS样式三、制作网站的Logo动画四、制作导航栏和banner五、制作视频新闻、校园快讯、校园文化及职教动态栏目六、制作滚动图像区域栏目七、制作专业简介和校报校刊栏目八、制作知识小宝库、校园生活和学生风采栏目九、制作图片导航栏十、制作版权信息步骤二 网站子页的制作本网站的子页在形式上套用了主页的结构，使之在风格上与主页完全统一。页面特点：（1）通过表格的嵌套、单元格的拆分与合并来进行网页元素的布局；（2）表单的制作；（3）栏目背景图片的制作。步骤三 链接主页与子页对主页与各子页之间进行链接，并使链接畅通。征求客户意见，修改完善对制作完成的抚州职业技术学校网站进行调试发布，在广泛征集客户意见的基础上，尽可能地按照客户的要求进行配套修改与更新，使得网站进一步完善，达到制作网站的目的。项目实训在前面学习的项目基础上，请大家依据网站制作流程，设计制作教育类网站小结本项目主要介绍了教育类网站的前期准备、中期制作和网站搭建等内容。通过本项目的学习，使学生增强对教育类网站的感性认识，为以后各种类型网站的学习与实践奠定基础。本章教学建议教学中应尽量发挥学生的主动性，通过课堂讨论、项目实训、布置作业等多种手段配合老师讲授，使学生在极大的兴趣动力中完成对教育类网站的设计与制作。在理论性较强的客户需求分析和网站建设方案部分，应循序渐进，使学生尽快理解并能初步掌握教育类网站的相关准备工作。项目二 商业类网站的设计与制作本项目教学提要教学重点：商业类网站的客户需求分析；商业类网站的网站风格定位；商业类网站的网站建设方案；商业类网站的网站设计方案报价明细；制作心缘礼品网站效果图；制作心缘礼品网站的横幅广告动画心缘礼品网站的搭建。教学难点：客户需求分析；网站风格定位；设计网站的建设方案。本项目教学内容心缘礼品网站是一个商品网站，或者说是一个各种礼品的电子商铺。商业网站是商业性和艺术性的结合，同时也是一个企业文化的载体，通过视觉元素，承接企业的文化和企业的品牌，好的网站设计才有助于企业树立良好的社会形象，一、客户需求分析客户的建站要求主要有以下几个方面：第1，全方位的商品分类展示。要把经营的各种礼品按照若干分类方式进行分类，以便从种类、功能、特色等不同角度向浏览者充分展示自己的商品。第2，方便快捷的网上交易。网站要向购物者提供一个安全、简便的支付方式，以实现安全快速高效的网上交易。第3，可靠的安全防范措施。按照客户的要求，建立网站的安全防范屏障，避免网站交易信息的泄露丢失，甚至账户资金被窃取。第4，健全的后台管理系统。网站要具有商品分类管理及搜索、交易记录保存、会员注册、商品增减登记等系统管理功能，为客户实施有效管理提供可靠的管理工具。第5，客户对网站界面色彩、网页图案，以及版式、特效等方面提出的特定要求。二、网站风格定位1色彩本项目中采用一种主题色红色，同时配以红色到黄色的渐变，及黄色的边框线条，使页面不至于单调、乏味。根据本项目的主旨宣传礼品，采用红色为主题色更能体现中国的国情，人们喜欢用红色衬托喜庆、热烈、温暖、幸福、吉祥、真诚，颜色的合理搭配能吸引浏览者的视线，让他们感觉网站清晰、明了，层次分明。2排版本项目采用的就是双栏布局，即规范、理性的布局分割。通过合理框架布局的选用，保持了信息密度的平衡。3特效在本网站中有两种动画效果：一是采用Adobe ImageReady软件制作了网站的横幅广告；二是在公告栏下方，通过运用CSS样式中的方框定位及项目列表排序及代码的灵活使用，达到在同一版面根据需要显示不同内容的效果。三、网站建设方案1页面风格创意设计网站页面风格颜色初步拟定采用红色为主题色，在此基础上进行颜色的合理搭配，通过颜色的色相、明度等的灵活应用突出本网站要传达的喜庆、温暖、幸福、吉祥等元素，使网站收到了良好的创意效果。2网站栏目划分根据我们对用户的了解，特建立以下主要栏目。l 公司首页l 特别推荐l 公司产品l 重点推荐l 产品展示l 每日特价l 会员天地l 品牌专卖l 定购指南l 分类目录l 给我留言l 限时抢好礼l 精品广场l 厂家推荐l 最新礼品3网站栏目内容简介4网站建设拓扑图四、网站设计方案报价明细任务一 制作心缘礼品网站效果图步骤一 网站首页效果图的制作一、网站Logo的制作二、导航栏的制作三、最新礼品栏目的制作四、每日特价栏目的制作五、Flash动画的制作六、诚信礼品栏目的制作七、品牌专卖栏目的制作八、分类栏目的制作九、限时抢好礼栏目的制作十、厂家推荐栏目的制作十一、网站下方链接导航条及版权信息的制作步骤二 网站子页“公司产品”效果图的制作关于产品展台栏目的制作步骤三 网站子页“礼品文化”效果图的制作任务二 横幅广告动画制作一、准备图片素材二、动画制作任务三 网站搭建过程步骤一 网站首页的制作一、创建站点并设置页面属性二、设置CSS样式三、制作网站的站标、导航栏和公告栏四、制作最新礼品、精品广场、特别推荐、重点推荐栏目 为了制作该栏目的两侧细线，定义. protj_left CSS样式，其参数设置如图2-91所示。图2-91五、制作每日特价栏目六、制作横幅广告和诚信礼品栏目七、制作品牌专卖栏目八、制作分类目录栏目九、制作限时抢好礼栏目十、制作厂家宣传栏目十一、制作下方导航栏和订单查询十二、制作版权信息步骤二 网站子页的制作一、页面特点本网站的子页在形式上也是套用了主页的结构，使之在风格上与主页完全一致、浑然一体，这也是读者在设计制作网站中应该掌握的一点。子页主要的特点如下：（1）充分利用表格来进行网页元素的布局；（2）利用图形图像处理软件制作小图片；（3）充分利用CSS样式表的作用；（4）利用iframe实现同一区域显示不同的内容。步骤三 链接主页与子页对主页与各子页之间进行链接，并使链接畅通。征求客户意见，修改完善对制作完成的心缘礼品网站进行调试发布，在广泛征集客户意见的基础上，尽可能地按照客户的要求进行补充、修改，使得网站进一步完善，直到客户满意。小结本项目主要介绍了商业类网站的前期准备、中期制作和网站搭建等内容。通过本项目的学习，使学生增强对商业类网站的认知，为以后能胜任商业类网站和电子商务类网站的设计与制作奠定基础。本章教学建议教学中教师应结合各自的实习条件和不同情况，适当增加实训的内容，尽量发挥学生的主动性，促使教师转向教练的角色，让学生真正的掌握网站前台设计技能。在理论性较强的客户需求分析和网站建设方案部分，应深入浅出，使学生尽快理解并能逐步掌握商业类网站的相关准备工作。项目三 旅游休闲类网站的设计与制作本项目教学提要教学重点：旅游休闲类网站的客户需求分析；旅游休闲类网站的网站风格定位；旅游休闲类网站的网站建设方案；旅游休闲类网站的网站设计方案报价明细；制作云南旅游网站效果图；制作云南旅游网站的横幅广告动画；云南旅游网站的搭建。教学难点：客户需求分析；网站风格定位；设计网站的建设方案。本项目教学内容旅游行业网站是互联网技术在传统行业的应用之一，目前网络已成为旅游业一种至关重要的推广模式，旅游景点利用网站介绍旅游资源，旅行社通过网站发布旅游资讯和在线旅游产品销售，游客在社区交流平台上分享各自的旅游心得等。本项目以旅游休闲类网站中的旅游服务类网站为范例，系统介绍云南旅游网站设计制作的基本方法和工作过程。一、客户需求分析客户的建站要求主要有以下几个方面：（1）宣传云南省的锦秀景区、民俗风情、云南美食等，提高云南省旅游业在国内外的知名度；（2）适时地发布云南精品旅游线路、洒店推荐等信息，为旅游者提供最佳服务；（3）在网上适时地发布旅游游记，通过真实的旅游者的体会，吸引国内外的旅游者，为云南省的旅游业的发展做出一份微薄之力；（4）网站上要设有联系我们等栏目或子页，用户可以对旅游线路等进行评论，也可以说说自己旅游的感受，这对网站的改进和更新很有帮助。二、网站风格定位1色彩：云南旅游网站选定主色调为绿色和浅蓝色，绿色所传递的是清爽、理想、希望和生长的意象，较符合旅游服务业。绿色与人类息息相关，是自然之色，代表了生命与希望，也充满了青春与活力。绿色在黄色和蓝色之间，属于较中庸的颜色，是和平色，偏向自然美，宁静、生机勃勃、宽容，可与多种颜色搭配而达到和谐的效果。浅蓝色具有淡雅、清新、浪漫和高贵的特性，它也是最具凉爽、清新特征的色彩。网站中采用浅蓝色和绿色、白色的搭配使页面看起来非常干净清澈，能体现出柔顺淡雅和浪漫的气氛。使人可以长时间驻留其间，也不会觉得疲劳。 2排版云南旅游网站采用的是“T”字型排版形式，这是网页设计中常用的一种布局方式。该网站最上面是网站的站标以及横幅广告条，接下来就是网站的主要内容，右面为几个主要栏目，左面显示该页主要内容。左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种版式的优点是页面结构清晰，主次分明，信息量大。弱点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。针对这个弱点，该网站在细节上做了一些处理，例如页面栏目的造型设计别具一格，并在栏目中适当地添加了动画效果，使整个页面显得更加生动、活泼。3特效本网站中有两种动画效果：一是采用ImageReady软件制作了网站横幅广告条；二是采用JavaScritpt脚本制作的多张图片交换效果。三、网站建设方案为了充分发挥旅游网站的作用，就需要对网站的内容进行系统的规划。1页面风格创意设计该网站页面颜色初步拟定采用绿色和蓝色为主色调，在此色调的基础上对绿色系和蓝色系中的不同颜色进行有机搭配，同时还适当地辅以红橙色，使网站产生一种优雅，舒适的气氛。同时，该网站在栏目的造型设计上采用了别具一格的造型，该创意设计使网页看上去更加生动、活泼。2网站栏目划分根据我们对用户的了解，特建立以下栏目。走进云南 云南风情景点大全 旅游游记旅游快讯 旅游须知昆明一地 地理概况云南美食 联系我们精品图库 机票查询近期特价线路 各种旅游线路旅游常识 知名旅游企业云南气候 友情链接特价机票推荐 出游工具3网站栏目内容简介4网站建设拓扑图四、网站设计方案报价明细任务一 制作云南旅游网站效果图步骤一 网站首页效果图的制作一、网站Logo和Banner的制作二、导航栏的制作三、近期特价线路栏目的制作四、各种旅游线路栏目的制作五、云南风情栏目和知名旅游企业栏目的制作六、云南气候栏目的制作七、版权部分的制作步骤二 网站子页“景点大全”效果图的制作一、景点大全栏目的制作步骤三 网站子页“云南美食”效果图的制作任务二 横幅广告动画制作步骤一 素材准备一、利用Photoshop制作横幅广告的背景二、利用Photoshop进行图像处理三、利用Photoshop制作文字效果步骤二 动画制作一、利用ImageReady制作图像动画二、利用ImageReady制作文字动画任务三 网站搭建过程步骤一 网站首页的制作一、站点的建立和网站首页的创建二、创建CSS样式三、网站首页Logo、 Banner和导航栏的制作四、网站首页主体部分中右侧栏目的制作五、网站首页版权部分的制作六、网站首页中各种链接的设置七、网站首页中文本链接样式的设置八、网站首页对齐方式设置步骤二 网站子页的制作本站的子页在形式上套用了主页的结构，使之在风格上与主页完全统一。页面特点：（1）通过表格的嵌套来进行网页元素的布局；（2）栏目及栏目背景图片的制作。步骤三 链接主页与子页对主页与各子页之间进行链接，并使链接畅通。征求客户意见，修改完善对制作完成的云南旅游网站进行调试发布，在广泛征集客户意见的基础上，尽可能地按照客户的要求进行配套修改与更新，使得网站进一步完善，达到制作网站的目的。项目实训在前面学习的项目基础上，依据网站制作流程，请大家设计制作旅游休闲类网站。小结本项目主要介绍了旅游休闲类网站的前期准备、中期制作和网站搭建等内容。通过本项目的学习，要求学生能对旅游休闲类网站有一个整体的认识，并且能很好地掌握网站设计制作的基本方法和工作过程，同时对网站的色彩搭配、网站的页面排版和网页特效有一个理性上的认知。本章教学建议教学中多引导学生思考问题，以问题方式呈现，提供解决问题的途径，例如可以通过网络查找，并不要把所有的东西都给学生，以问题的方式来呈现各个环节，发挥学生的主动性，使学生在任务的驱使中完成旅游休闲类网站的设计与制作。项目四 体育健身类网站的设计与制作本项目教学提要教学重点：体育健身类网站的客户需求分析；体育健身类网站的网站风格定位；体育健身类网站的网站建设方案；体育健身类网站的网站设计方案报价明细；制作利民健身网站效果图；制作利民健身网站的横幅广告动画；利民健身网站的搭建。教学难点：客户需求分析；网站风格定位；设计网站的建设方案。本项目教学内容体育健身类网站其特点是具有自由性、文化性、非功利性和主动性等。对增进健康、强健体魄，预防疾病与康复，提高文化素养与精神文明建设，丰富生活内容与加强人际关系，以及促进人的社会化与个性形成等都有重要意义和作用。本项目以体育健身类网站中的健身资讯服务网站为范例，系统介绍利民健身网站设计制作的基本方法和工作过程。一、客户需求分析客户的建站要求主要有以下几个方面：（1）宣传体育健身常识、体育健身项目等，增强全民健身意识，促进健身市场的规范化、专业化，立足打造最为专业、时尚、项目最全的健身中心；（2）适时地发布最新健身课程、健身快讯等信息，为健身爱好者提供最佳服务；（3）开设健身问答栏目，为体育健身爱好者提供一个专业性很强的信息交流的平台；（4）网站上要设有论坛栏目，用户可以对健身知识、健身方式等进行评论，也可以说说自己健身后的感受，这对网站的改进和更新很有帮助。二、网站风格定位1色彩：利民健身网站选定主色调为天蓝色，因为天蓝色是最具凉爽，清新，专业的色彩，很适合于体育健身类网站。页面的整体色彩是通过调整主色调的饱和度和透明度，产生不同视觉效果的蓝色，这样的页面看起来色彩统一，有层次感。网站中除了采用天蓝色系外，还和对比色橙色搭配，使该网站在专业的基础上又多了几分时尚。再恰当地配上点蜡笔黄橙色，使该网站又增添几分宁静、详和。 2排版利民健身网站采用的是“T”字型排版形式，即指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母T,所以我们称之为T形布局。这是网页设计中常用的一种布局方式。该网站最上面是网站的站标以及横幅广告条，接下来就是网站的主要内容，左面为几个主要栏目，右面显示该页主要内容。左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种版式的优点是页面结构清晰，主次分明，信息量大。弱点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。针对这个弱点，该网站在细节上做了一些处理，例如在页面中每个栏目的造型设计都各有千秋，颜色搭配也别具一格，使整个网页显得非常时尚，没有一点呆板的痕迹。3特效在本网站中有两种动画效果：一是采用ImageReady软件制作了网站横幅广告条；二是利用脚本制作滚动字幕效果。三、网站建设方案为了充分发挥体育健身网站的作用，就需要对网站的内容进行系统的规划。1页面风格创意设计该网站页面颜色初步拟定采用天蓝色为主色调，在此色调的基础上对天蓝色系中的不同颜色进行有机搭配，同时还适当地辅以橙色。通过这些颜色的运用不但能很好地突出本网站要传达的凉爽、清新、专业等元素，而且也给该网站增添了几分时尚。为了使页面排版不落俗套，该网站虽然采用了大众化的“T”字型排版形式，但在版面的造型设计上采用了别具一格的栏目造型设计，该创意设计使网页看上去更具时尚感。2网站栏目划分根据我们对用户的了解，特建立以下栏目。健身常识 健身运动运动项目 健身快讯健身论坛 健身知识健身课程 健身图片健身新闻 健身时刻健身问答 健身分类知识3网站栏目内容简介4网站建设拓扑图四、网站设计方案报价明细任务一 制作利民健身网网站效果图步骤一 网站首页效果图的制作一、网站Logo和Banner的制作二、导航栏的制作三、健身新闻集粹栏目的制作四、健身运动栏目的制作五、版权部分的制作步骤二 网站子页“健身运动”效果图的制作一、健身时刻栏目的制作二、健身分类知识栏目的制作步骤三 网站子页“运动项目”效果图的制作任务二 横幅广告动画制作步骤一 素材准备一、利用Photoshop制作横幅广告的背景二、利用Photoshop进行图像处理三、利用Photoshop制作文字效果步骤二 动画制作一、利用ImageReady制作图像动画二、利用ImageReady制作文字动画任务三 网站搭建过程步骤一 网站首页的制作一、站点的建立和网站首页的创建二、创建CSS样式三、网站首页Logo、 Banner和导航栏的制作四、网站首页主体部分中右侧栏目的制作五、网站首页版权部分的制作六、网站首页中各种链接的设置七、网站首页中文本链接样式的设置八、健身新闻集粹栏目中滚动字幕的制作九、网站首页对齐方式设置步骤二 网站子页的制作本站的子页在形式上套用了主页的结构，使之在风格上与主页完全统一。页面特点：（1）通过表格的嵌套来进行网页元素的布局；（2）栏目及栏目背景图片的制作。步骤三 链接主页与子页对主页与各子页之间进行链接，并使链接畅通。征求客户意见，修改完善对制作完成的利民健身网站进行调试发布，在广泛征集客户意见的基础上，尽可能地按照客户的要求进行配套修改与更新，使得网站进一步完善，达到制作网站的目的。项目实训在前面学习的项目基础上，请大家依据网站制作流程，设计制作体育健身类网站。小结本项目主要介绍了体育健身类网站的前期准备、中期制作和网站搭建等内容。通过本项目的学习，要求学生能对体育健身类网站有一个整体的认识，并且能很好地掌握网站设计制作的基本方法和工作过程，同时能较好地运用网站的色彩搭配、网站的页面排版和网页特效。本章教学建议教学中以研究性学习为主，多引导学生进入主动探求知识的过程，发挥学生的主动性，使学生围绕本项目的主题调查、加工、处理、应用相关信息，完成体育健身类网站的设计与制作。项目五 政府机关类网站的设计与制作本项目教学提要教学重点：政府机关类网站的客户需求分析；政府机关类网站的网站风格定位；政府机关类网站的网站建设方案；政府机关类网站的网站设计方案报价明细；制作江宁市人民政府网站效果图；制作江宁市人民政府网站的横幅广告动画江宁市人民政府网站的搭建。教学难点：客户需求分析；网站风格定位；设计网站的建设方案。本项目教学内容政府门户网站是我国各级政府机关履行职能、面向社会提供服务的官方网站，是政府机关实现政务信息公开、服务企业和社会公众、互动交流的重要渠道。本项目以江宁市人民政府网站为例，系统介绍政府门户网站建设全过程。一、客户需求分析根据对政府门户网站的主要功能的分析，以用户为中心的政府门户网站主体应该主要由信息服务、互动服务和在线服务三大核心部分组成。（1）信息服务要实现政务信息透明化公开化；（2）互动服务要建立起政府与市民沟通的有效渠道；（3）在线服务要始终贯彻以用户为中心的思想。二、网站风格定位1色彩：红色是中国文化中的基本崇尚色，它体现了中国人在精神和物质上的追求，象征着吉祥、喜庆。橙色是愉悦的颜色，被称之为“愉悦之橙”，它是充满力量，是生机勃勃的颜色，它表现出喜悦和温暖等积极的情感的同时，也是舒适的颜色。而红橙色是一种浓厚而不透明的色彩，好像充满内在温暖而闪闪发光，它象征着富有生气的大地。本项目选定红、橙两色为主色调，通过使用红色与橙色的渐变，使整个页面色彩统一，富有层次感。不同深浅的红色、橙色的配合，也使页面色彩产生对比与平衡，避免产生单调感。2排版根据政府网站要承载大信息量的特点，以主页为例本项目采用了左中右结构的门户类网站的排版布局。左边与右边设置的是便民栏目，体现了用户为中心的建站思想；中间大面积为内容主区域，为使网站整体脉络清晰，中间部分使用一个Flash动画进行分隔，将热点关注的内容显示其中；同类栏目采用选项卡式打开方式，大大增加了网站的信息量。这样总体设计感觉简洁、清新、大气而富于时代感，既能展现江宁市的崭新形象，表现其现代化发展，又能体现江宁市政府是踏踏实实为人民办事的政府，充分体现出政府门户网站应有的特色。3特效本项目运用Flash软件，在广告条部分添加了简单的动画；在城市新貌栏目，选择了几张城市特色图片制作了图片切换效果，动画在整个网站中起到了更好地宣传政府形象，突出关注热点的作用。三、网站建设方案为了充分发挥政府门户网站的作用，就需要对网站的内容进行系统的规划。1页面风格创意设计项目网站页面风格颜色初步拟定采用红、橙两色为基础色，在此色调的基础上进行颜色渐变的展开，通过颜色的对比、过渡、平衡的巧妙运用，达到将江宁市政府网站建设得富有生机、简洁美观的目的。2网站栏目划分根据我们对用户的了解，特建立以下栏目。l 江宁概况 l 公告公示l 政府公文l 文化执法l 动态信息 l 今日江宁l 规范性文件l 质量报告l 政府工作 l 动态信息l 干部任免l 警情提示l 办事服务 l 权威发布l 新闻发布l 曝光台l 互动交流 l 政策解读l 统计分析l 热点专题l 社会公益 l 政务公开l 公共财政l 民意调查l 江宁旅游 l 办事向导l 工商执法l 一周访问排行l 江宁风貌 l 便民服务l 药监稽查l 相关链接3网站栏目内容简介4网站建设拓扑图四、网站设计方案报价明细任务一 制作江宁市人民政府网站效果图步骤一 网站首页效果图的制作一、网站Logo和Banner的制作二、导航栏的制作三、江宁风貌栏目的制作四、今日江宁栏目的制作五、权威发布栏目的制作六、网站中上部广告条的制作七、办事向导与便民服务栏目的制作八、政府公文公共财政栏目的制作九、相关链接栏目的制作十、右侧顶部栏目的制作十一、政务公开栏目的制作十二、民意调查栏目的制作十三、底部导航及版权栏目的制作步骤二 网站子页“互动交流”效果图的制作一、法规征求意见栏目的制作二、公务邮箱入口栏目的制作三、市长信箱回音与部门区县信箱回音栏目的制作步骤三 网站子页“社会公益”效果图的制作任务二 Flash横幅广告制作网站的Logo和Banner部分Flash横幅广告的制作步骤一 素材准备一、场景背景图片的制作二、网站站标（Logo）的制作三、准备图片素材步骤二 动画制作一、新建Flash影片文档二、导入素材三、场景设计四、开始制作动画网站中间部分Flash横幅广告的制作步骤一 素材准备一、场景背景图片的制作二、动画广告词的制作步骤二 动画制作一、新建Flash影片文档二、导入素材三、开始制作动画任务三 网站搭建过程步骤一 网站首页的制作一、创建站点二、创建主页文件三、制作顶部的Banner部分四、制作导航栏及搜索栏五、制作江宁风貌栏目六、制作今日江宁栏目七、制作公告公示栏目八、制作权威发布栏目九、添加中上部Flash广告条十、制作办事向导与便民服务栏目十一、制作政府公文和公共财政栏目十二、制作相关链接栏目十三、制作底部导航及版权栏目十四、制作右侧顶部栏目十五、制作政务公开栏目十六、分导航及各栏目文字添加链接步骤二 网站子页的制作本网站的子页在形式上套用了主页的结构，使之在风格上与主页完全统一。页面特点：（1）通过表格的嵌套、单元格的拆分与合并来进行网页元素的布局；（2）表单的制作；（3）栏目背景图片的制作。步骤三 链接主页与子页对主页与各子页之间进行链接，并使链接畅通。征求客户意见，修改完善对制作完成的江市人民政府门户网站进行调试发布，在广泛征集客户意见的基础上，尽可能地按照客户的要求进行配套修改与更新，使得网站进一步完善，达到制作网站的目的。项目实训在前面学习的项目基础上，请大家依据网站制作流程，设计制作一个政府门户网站。小结本项目主要介绍了政府机关类网站的前期准备、中期制作和网站搭建等内容。通过本项目的学习，使学生增强对政府机关类网站的感性认识，为以后各种类型网站的学习与实践奠定基础。本章教学建议教学中应尽量发挥学生的主动性，通过课堂讨论、项目实训、布置作业等多种手段配合老师讲授，使学生在极大的兴趣动力中完成对政府机关类网站的设计与制作。本项目突出了政府机关类网站信息承载量大，功能性、服务性强的特点，在制作选项卡栏目样式中要注意知识的灵活运用，确保项目高效、顺利完成。项目六 企业类网站的设计与制作本项目教学提要教学重点：企业类网站的客户需求分析；企业类网站的网站风格定位；企业类网站的网站建设方案；企业类网站的网站设计方案报价明细；制作平安药业集团网站效果图；制作平安药业集团网站的横幅广告动画平安药业集团网站的搭建。教学难点：客户需求分析；网站风格定位；设计网站的建设方案。本项目教学内容企业网站是企业在互联网上进行网络建设和形象宣传的平台。根据行业特性的差别，以及企业的建站目的和主要目标群体的不同，大致可以把企业网站分为：基本信息型、电子商务型、多媒体广告型、产品展示型。本项目将以平安药业集团网站为例，系统介绍企业类网站建设全过程。一、客户需求分析通过对平安药业集团有限公司建站目的及公司情况的深入了解，拟定本网站具有如下功能：（1）树立企业形象，展示并提高企业的竞争力；（2）展示产品及技术优势；（3）发布信息；（4）推销新产品；（5）提高工作效率；（6）加强客户服务；（7）增进与客户的沟通；（8）为消费者服务；（9）刺激需求。二、网站风格定位1色彩本项目选定蓝色为主色调，通过使用蓝色、灰色及其渐变色，使整个页面色彩统一，富有层次感。除了整体的蓝色以外，页面不同栏目配以不同深浅的橙色、绿色等图片，以达到色彩的对比、平衡，避免产生单调感。2排版根据本网站承载信息量大的特点，以主页为例，采用了左中右结构的排版布局。左边设置的是一些栏目的快速通道，体现了操作便捷的特点；右边设置的是一些实时及常识类的栏目，增强了主页的功能，将浏览者最为关注的内容呈现到了主页上；中间大面积为内容主区域，为使网站整体脉络清晰