web前端技术实训任务书

《web前端技术实训任务书》由会员分享，可在线阅读，更多相关《web前端技术实训任务书（20页珍藏版）》请在金锄头文库上搜索。

1、学院：重庆航天职业技术学院 专业：计算机信息管理 学号：20101523 姓名：熊婵娟1WebWeb 前端技术实训任务书前端技术实训任务书一、一、实训课题名称实训课题名称 1、 教育类网站的设计与制作 2、 商业类网站的设计与制作3、 旅游休闲类网站的设计与制作 4、 体育健身类网站的设计与制作 二、二、课题设计目的课题设计目的 通过实训，应使学生巩固所学知识，把所学的理论知识运用到网站制作实践中。 培养学生动手能力，将 PS 制作效果图、HTML、CSS+DIV 网页布局、JavaScript 等 Web 前端开发技术结合起来，在实训环节中进行运用。为以后学习动态网站打下基础。 三、三、任务

2、要求：任务要求： 用 PhotoShop、DreamWeaver 等开发工具制作一个由静态网页构成的简单网站，要求包 括一个首页、至少三个子网页，按照网站开发流程，先做网页效果图，然后制作网页素材、 构建网站文件结构、规划网页布局、制作网页动画、实现网页功能，尔后进行网站测试，并 编制出各阶段必要的文档。在编写文档时，必须严格遵照要求，最后提交文档。 功能要求：该网站首页必须包括网站 logo、导航条（带有鼠标事件变化效果） 、banner （简单 flash 动画） 、图片、多媒体运用、文字等主要信息展示；子网页包括用户注册（带 有表单输入项本地验证功能） 、登录（用户名和密码非空验证） 、

3、子网页相关栏目。各页面之 间通过超链接切换。 最后要求提交详细的课程设计报告及网页效果图（.psd）和网站运行文件，现场运行验 收开发的系统。 四、四、课题设计报告书要求：课题设计报告书要求： 1、 课题设计报告书第一页为封面，封面上写清楚标题、班级、姓名、指导老师、完成 日期。 2、 课题设计报告书第二页为本任务书。 3、 课题设计报告书第三页为教师评语。 4、 课题设计报告书第四页为目录。 5、 课题设计报告书第五页开始为具体内容： （1）开发背景 （2）网站分析设计部分 1）客户需求分析 2）网站风格定位 3）网站建设方案 网页风格创意设计网站栏目划分 栏目内容介绍 网站拓扑图 4）网站

4、效果图 （3）网站制作部分 1）效果图制作2）网页素材及网站架 构制作 3）首页制作页面设计 4）子页面制作6、课题设计报告书最后一页是本次课程设计的小结和参考文献。 7、字数要求不少于 300 字。 8、打印纸张使用 B5 纸，页边距设为上、下、左 2 厘米，右 1.5 厘米.学院：重庆航天职业技术学院 专业：计算机信息管理 学号：20101523 姓名：熊婵娟2教师评语评分项分值得分网站 设计 实现 部分 (60 分)1.实现.能力 (50 分)效果图5Logo5Banner5导航条5页面布局与美化5注册验证、登录10图片多媒体运用5程序复杂度5运行效果52. 创新能力53. 学生答辩5小

5、计小计60设计 报告 部分 (30 分)1. 结构完整，条理清晰（封面、任务书、教 师评语、目录、正文内容、小结、参考文献）102. 独立完成53. 描述工具使用恰当：网站拓扑图54. 制作步骤描述清晰55. 报告内容充实5小计小计30学习态 度部分 (10 分)考勤5认真完成，勤于思考，积极提问5小计小计10总计100成绩学院：重庆航天职业技术学院 专业：计算机信息管理 学号：20101523 姓名：熊婵娟3目录目录开发背景开发背景4 前期准备前期准备4 客户需求分析客户需求分析4 网站风格定位网站风格定位5 色彩5 排版5 特效6 网站建设方案网站建设方案6 网页风格创意设计网页风格创意设

6、计7 网站栏目划分网站栏目划分7 栏目内容介绍栏目内容介绍8 网站拓扑图网站拓扑图9 实训目的实训目的10 实训任务实训任务10 实训项目实训项目11 网站基本介绍网站基本介绍11 登录界面登录界面12 保存的文件位置保存的文件位置12 首页展示效果图首页展示效果图13 导航条展示效果图导航条展示效果图14 表格布局表格布局14 “精品路线精品路线 l l 推荐推荐“图图14 “景点简介景点简介”链接的效果图链接的效果图15 景点介绍效果图：景点介绍效果图：16 土特产品介绍图土特产品介绍图16 “长白山之行长白山之行“的链接效果展示图的链接效果展示图17 网站底部导航栏的效果展示图：网站底部

7、导航栏的效果展示图：18 网站版权的展示图网站版权的展示图18 长白山旅游线路图：长白山旅游线路图：18 “招商项目招商项目“展示图展示图19 实训中的问题和解决办法实训中的问题和解决办法19 实训体会实训体会20学院：重庆航天职业技术学院 专业：计算机信息管理 学号：20101523 姓名：熊婵娟4一、开发背景一、开发背景长白山旅游网一直致力于面向全球华人提供最专业、 最丰富、最详实的旅游咨询和户外资讯，力求将长白山旅游网打造成一个东北旅游的互动乐园。二、二、前期准备前期准备本网站是以旅游休闲类为主体设计的， 系统的介绍了长白山的风土人情。三、三、客户需求分析客户需求分析客户需求是指客户创建

8、本网站的目的和对网站建设提出来的特定的要求。了解客户的需求，是建好旅游网站的前提。旅游网站通过互联网可以更好的开展信息交流和网上预订等活动。 这样可以提高旅游服务的水平和旅游业务的来源。 客户对其拟建的长白山旅游网站提出的主要要求有以下几点：1、宣传长白山的锦绣景区、民俗风情、土特产品等，提高吉林省旅游业务在国内的知名度。2、适时地发布长白山的精品旅游路线、酒店推荐等信息，为旅游者提供最佳服务。3、在网上发布招商项目，引进国内外的商家来长白山投资，为吉学院：重庆航天职业技术学院 专业：计算机信息管理 学号：20101523 姓名：熊婵娟5林省的经济发展做出一份微薄之力。4、网站上要设有旅游论坛

9、栏目或子页，用户可以对旅游路线等进行评论，也可以谈谈旅游的感受。这对于网站的改进和更新很有帮助。四、四、网站风格定位网站风格定位网站风格是指网站的整体形象给浏览者的综合感受。 这个整体形象包括站点的 logo、标志、色彩、字体、标语、版面布局、浏览方式、交互性、文字、内容价值等诸多元素。可以从三个方面对长白山旅游网进行定位。1、色彩色彩网站的色彩是浏览者整体的视觉感官， 如果网站的色彩具有一致性，会使网站看起来美观，使浏览者不容易对内容混淆，增加了浏览的简洁与方便。 从而更能衬托网站的主题， 若色彩能与主题合理搭配，将会增加网站的易读性。长白山旅游网站选定的主题色是绿色。 因为绿色介于冷暖色的

10、中间，能给人和睦、宁静、健康、安全的感觉，很适合旅游休闲类的网站。通过调整主色调的饱和度和透明度，产生不同视觉效果的绿色，以及对这些不同的绿色进行渐变处理，形成页面的整体色彩。这样的页面看起来色彩统一，有层次感。学院：重庆航天职业技术学院 专业：计算机信息管理 学号：20101523 姓名：熊婵娟6网站中除了采用绿色系外，还和黄色、白色搭配，使网站产生一种优雅、舒适的气氛。使人可以长时间驻留其间，也不会觉得疲劳。2、排版排版网页是网站构成的基本元素。当浏览者轻点鼠标，在网站中漫游时，一幅幅精彩的网页会呈现在面前。那么，决定网页精彩元素是什么?色彩的搭配、文字的变化、图片的处理等式不可忽略的因素

11、，除了这些外，还有一个非常重要的元素网页排版。长白山旅游网站采用的是“同字型”排版形式。最上面是网站的站标以及横幅广告。 接下来是网站的主要内容： 左右分列两小条内容，中间是主要内容，与左右一起罗列到底。最下面的是网站的一种基本信息、联系方式、版权声明等。这种版式的优点是网页结构清晰，主次分明，信息量大，但弱点是规矩呆板。针对这个弱点，该网站在细节上做了一些处理。例如，在中间主要部分采用了柔美的曲线造型，使整个页面显得更加生动活泼。3、特效、特效网站的特效就是让网页看起来生动活泼的各种应用，如 Flash、JavaScript 等。采用了 VBScript 脚本制作的滚动字幕。五、网站建设方案

12、五、网站建设方案在旅游服务网站的建设中，前期准备至关重要的，要有明确的学院：重庆航天职业技术学院 专业：计算机信息管理 学号：20101523 姓名：熊婵娟7做网站的根本目的。 该旅游网站通过对长白山的锦绣景区、 民俗风情、土特产品信息的宣传，大大的提高了吉林省旅游业的国内外知名度。由于旅游也作为一个整体的商业生态链，涉及旅游服务机构、酒店、交通、旅游区招商项目等内容，因此旅游服务网站可以将这些环节连成一个整体，进而可以大大的提高服务水平和业务的来源，从而推动吉林省经济的进一部发展。为了充分发挥旅游服务网站的作用，就需要对网站的内容进行系统规划。六、网页风格创意设计六、网页风格创意设计 该网站

13、页面颜色采用绿色为主，黄色为辅。在此色调的 基础上对绿色进行有机搭配，同时还要适当的辅以黄色。通过颜 色传达了新鲜、和睦、热情、幸福、宁静、健康、安全等元素， 从而使网站产生了一种优雅、舒适的气氛。 七、网站栏目划分七、网站栏目划分1、景点介绍2、路线推荐3、保护区建4、民俗风情5、土特产品6、长白山之行7、旅行社8、旅游论坛9、徒步长白山10、寻梦长白山12、自驾车旅13、旅游须知14、休闲娱乐15、旅游交通16、旅游信息17、旅游图片 八、栏目内容介绍八、栏目内容介绍 1、景点介绍：本栏目中介绍长白山旅游区的主要景点，并对这些 旅游景点的历史、地理、文化渊源进行详细的介绍。 2、旅游图片：本栏目主要向旅客展示长白山的锦绣景区，使浏览 者有身临其境的感觉。 3、路线推荐：该栏目具体放置长白山各条旅游线路，使浏览者在 该栏目中可以随时了解到每条旅游线路的详细内容。 4、旅游交通：该栏目具体介绍去长白山的各种交通路线，使浏览 者在该栏目可查询到公交、铁路、航班的具体信息。学院：重庆航天职业技术学院 专业：计算机信息管理 学号：20101523 姓名：熊婵娟85、 保护区建设： 该栏目主要介绍长白山旅游区近几年的规划信息。 以及旅游区的一些对外开发项目。 6、土特产品：该栏目提供了长白山的一