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

资源描述

职业教育教学改革系列教材（项目实战类）网站前台设计综合实训电子教学参考资料韩宝玉刘改主编祝海英雷亚玲李东生副主编 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．网站建设拓扑图四、网站设计方案报价明细静态页面设计报价明细如下表。工作项目项目要求页数单价（元）合计（元）首页 1 XXX XXX 子页不限 XXX XXX Banner设计类型为*.gif的动画格式 N XXX XXX Logo设计类型为*.gif的图片格式 N XXX XXX 总计 XXX 服务器空间、域名价格明细如下表。项目名称功能要求个数单价（元）合计（元）国际域名英文国际域名（*.com） 1 XXX XXX 企业邮局 300M独立邮局空间，最多可分50个用户 -- XXX XXX 合计 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）栏目背景图片的制作。步骤三链接主页与子页对主页与各子页之间进行链接，并使链接畅通。征求客户意见，修改完善对制作完成的江市人民政府门户网站进行调试发布，在广泛征集客户意见的基础上，尽可能地按照客户的要求进行配套修改与更新，使得网站进一步完善，达到制作网站的目的。项目实训在前面学习的项目基础上，请大家依据网站制作流程，设计制作一个政府门户网站。小结本项目主要介绍了政府机关类网站的前期准备、中期制作和网站搭建等内容。通过本项目的学习，使学生增强对政府机关类网站的感性认识，为以后各种类型网站的学习与实践奠定基础。本章教学建议教学中应尽量发挥学生的主动性，通过课堂讨论、项目实训、布置作业等多种手段配合老师讲授，使学生在极大的兴趣动力中完成对政府机关类网站的设计与制作。本项目突出了政府机关类网站信息承载量大，功能性、服务性强的特点，在制作选项卡栏目样式中要注意知识的灵活运用，确保项目高效、顺利完成。项目六企业类网站的设计与制作本项目教学提要教学重点：企业类网站的客户需求分析；企业类网站的网站风格定位；企业类网站的网站建设方案；企业类网站的网站设计方案报价明细；制作平安药业集团网站效果图；制作平安药业集团网站的横幅广告动画平安药业集团网站的搭建。教学难点：客户需求分

展开阅读全文