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

《网站前台设计综合实训资料》由会员分享，可在线阅读，更多相关《网站前台设计综合实训资料（25页珍藏版）》请在金锄头文库上搜索。

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

2、站。第四部分是项目实训素材，给出了每个项目实训的文字素材。限于编著者水平有限，教学资料中有错误或不妥之处，请读者给予批评指正。编 者 2010年3月 网站前台设计综合实训教学指南1. 课程的性质与任务本课程是计算机应用技术专业、网站规划与开发技术专业的核心课程、专业必修课。主要培养学生网站前台设计制作能力，培养学生学会使用Dreamweaver、Photoshop及Flash等软件开发或建设各种类型的网站的能力。在保证课程内容体系的相对完整和系统的基础上，按掌握知识的思维规律，对原理性内容的叙述不作烦琐的理论介绍，将重点放在应用技能的介绍上，教学内容以实践教学的方式引出。本课程以企业的真实案例

3、为驱动，以工作过程为导向，在完成工作任务的过程中实现教学指导“能力化”。通过本课程的学习和实训，使学生掌握网站前台设计的基础知识，并很好的掌握网站前台设计的操作技能。2. 教学时间分配项目课 程 内 容课 时项目1教育类网站的设计与制作16项目2商业类网站的设计与制作14项目3旅游休闲类网站的设计与制作14项目4体育健身类网站的设计与制作14项目5政府机关类网站的设计与制作12项目6企业类网站的设计与制作10合 计80注：以上课时分配仅供参考，教学中可根据教学的安排再做调整。3. 教学提要、课程内容、教学要求项目一 教育类网站的设计与制作本项目教学提要教学重点：教育类网站的客户需求分析；教育类

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

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

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

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

8、 要 求页 数单 价（元）合 计（元）首页1XXXXXX子页不限XXXXXXBanner设计类型为*.gif的动画格式NXXXXXXLogo设计类型为*.gif的图片格式NXXXXXX总 计XXX服务器空间、域名价格明细如下表。项 目 名 称功 能 要 求个 数单 价（元）合 计（元）国际域名英文国际域名（*.com）1XXXXXX企业邮局300M独立邮局空间，最多可分50个用户-XXXXXX合 计XXX任务一 制作抚州职业技术学校网站效果图步骤一 网站首页效果图的制作一、网站Logo和Banner的制作二、文字导航栏的制作三、视频新闻栏目的制作四、校园快讯栏目的制作五、图片滚动区域的制作六、

9、知识小宝库栏目的制作七、图片导航栏的制作八、网站链接导航条的制作及版权信息的制作步骤二 网站子页“新闻中心”效果图的制作一、关于新闻中心栏目的制作二、关于校园新闻栏目的制作步骤三 网站子页“教学管理”效果图的制作任务二 横幅广告动画制作步骤一 网站Logo动画的制作一、网站Logo背景图片的制作二、站标（Logo）的制作三、准备图片素材四、动画制作步骤二 网站Banner动画的制作一、网站Banner背景图片的制作二、网站Banner文字素材的制作三、Flash动画制作任务三 网站搭建过程步骤一 网站首页的制作一、创建站点并设置页面属性二、设置CSS样式三、制作网站的Logo动画四、制作导航栏

10、和banner五、制作视频新闻、校园快讯、校园文化及职教动态栏目六、制作滚动图像区域栏目七、制作专业简介和校报校刊栏目八、制作知识小宝库、校园生活和学生风采栏目九、制作图片导航栏十、制作版权信息步骤二 网站子页的制作本网站的子页在形式上套用了主页的结构，使之在风格上与主页完全统一。页面特点：（1）通过表格的嵌套、单元格的拆分与合并来进行网页元素的布局；（2）表单的制作；（3）栏目背景图片的制作。步骤三 链接主页与子页对主页与各子页之间进行链接，并使链接畅通。征求客户意见，修改完善对制作完成的抚州职业技术学校网站进行调试发布，在广泛征集客户意见的基础上，尽可能地按照客户的要求进行配套修改与更新，

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

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

13、不同角度向浏览者充分展示自己的商品。第2，方便快捷的网上交易。网站要向购物者提供一个安全、简便的支付方式，以实现安全快速高效的网上交易。第3，可靠的安全防范措施。按照客户的要求，建立网站的安全防范屏障，避免网站交易信息的泄露丢失，甚至账户资金被窃取。第4，健全的后台管理系统。网站要具有商品分类管理及搜索、交易记录保存、会员注册、商品增减登记等系统管理功能，为客户实施有效管理提供可靠的管理工具。第5，客户对网站界面色彩、网页图案，以及版式、特效等方面提出的特定要求。二、网站风格定位1色彩本项目中采用一种主题色红色，同时配以红色到黄色的渐变，及黄色的边框线条，使页面不至于单调、乏味。根据本项目的主

14、旨宣传礼品，采用红色为主题色更能体现中国的国情，人们喜欢用红色衬托喜庆、热烈、温暖、幸福、吉祥、真诚，颜色的合理搭配能吸引浏览者的视线，让他们感觉网站清晰、明了，层次分明。2排版本项目采用的就是双栏布局，即规范、理性的布局分割。通过合理框架布局的选用，保持了信息密度的平衡。3特效在本网站中有两种动画效果：一是采用Adobe ImageReady软件制作了网站的横幅广告；二是在公告栏下方，通过运用CSS样式中的方框定位及项目列表排序及代码的灵活使用，达到在同一版面根据需要显示不同内容的效果。三、网站建设方案1页面风格创意设计网站页面风格颜色初步拟定采用红色为主题色，在此基础上进行颜色的合理搭配，通过颜色的色相、明度等的灵活应用突出本网站要传达的喜庆、温暖、幸福、吉祥等元素，使网站收到了良好的创意效果。2网站栏目划分根据我们对用户的了解，特建立以下主要栏目。l 公司首页l 特别推荐l 公司产品l 重点推荐l 产品展示l 每