网站前台设计综合实训教学指南.docx

网站前台设计综合实训教学指南.docx

《网站前台设计综合实训教学指南.docx》由会员分享，可在线阅读，更多相关《网站前台设计综合实训教学指南.docx（35页珍藏版）》请在冰豆网上搜索。

网站前台设计综合实训教学指南

职业教育教学改革系列教材（项目实战类）

网站前台设计综合实训

电子教学参考资料

韩宝玉刘改主编

祝海英雷亚玲李东生副主编

PublishingHouseofElectronicsIndustry

北京·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软件制作了网站的广告；二是采用JavaScript脚本制作了滚动图片。

三、网站建设方案

为了充分发挥校园网站的作用，就需要对网站的内容进行系统的规划。

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．特效

在本网站中有两种动画效果：

一是采用AdobeImageReady软件制作了网站的横幅广告；二是在公告栏下方，通过运用CSS样式中的方框定位及项目列表排序及代码的灵活使用，达到在同一版面根据需要显示不同内容的效果。

三、网站建设方案

1．页面风格创意设计

网站页面风格颜色初步拟定采用红色为主题色，在此基础上进行颜色的合理搭配，通过颜色的色相、明度等的灵活应用突出本网站要传达的喜庆、温暖、幸福、吉祥等元素，使网站收到了良好的创意效果。

2．网站栏目划分

根据我们对用户的了解，特建立以下主要栏目。

公司首页特别推荐

公司产品重点推荐

产品展示每日特价

会员天地品牌专卖

定购指南分类目录

给我留言限时抢好礼

精品广场厂家推荐

最新礼品

3．网站栏目内容简介

4．网站建设拓扑图

四、网站设计方案报价明细

任务一制作心缘礼品网站效果图

步骤一网站首页效果图的制作

一、网站Logo的制作

二、导航栏的制作

三、最新礼品栏目的制作

四、每日特价栏目的制作

五、Flash动画的制作

六、诚信礼品栏目的制作

七、品牌专卖栏目的制作

八、分类栏目的制作

九、限时抢好礼栏目的制作

十、厂家推荐栏目的制作

十一、网站下方链接导航条及版权信息的制作

步骤二网站子页“公司产品”效果图的制作

关于产品展台栏目的制作

步骤三网站子页“礼品文化”效果图的制作

任务二横幅广告动画制作

一、准备图片素材

二、动画制作

任务三网站搭建过程

步骤一网站首页的制作

一、创建站点并设置页面属性

二、设置CSS样式

三、制作网站的站标、导航栏和公告栏

四、制作最新礼品、精品广场、特别推荐、重点推荐栏目

为了制作该栏目的两侧细线，定义.protj_leftCSS样式，其参数设置如图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．页面风格创意设计

该网站页面颜色初步拟定采用天蓝色为主色调，在此色调的基础上对天蓝色系中的不同颜色进行有机搭配，同时还适当地辅以橙色。

通过这些颜色的运用不但能很好地突出本网站要传达的凉爽、清新、专业等元素，而且也给该网站增添了几分时尚