《web开发技术基础课程设计课程设计》由会员分享，可在线阅读，更多相关《web开发技术基础课程设计课程设计（11页珍藏版）》请在金锄头文库上搜索。
1、Web 开发技术基础课程设计教学大纲课程名称（中文/英文）：Web 开发技术基础/ Basis of Web Development Technology课程类别： 专业课课程性质： 必修课课程设计学分：1计划周数：1 适用专业：计算机科学与技术 预修课程：面向对象程序设计、数据库开设学期： 5教学参考书：Web 编程基础HTML、CSS、JavaScript ，陈矗、任平红编著，清华大学出版社，2014年jQuery 网页开发实例精解 ，黄格力编著，清华大学出版社，2012 年一、课程设计的目的和意义一、课程设计的目的和意义Web 开发技术基础课程设计目的是使学生在学完本课程之后，能针对具体
2、的 Web 项目，使用课程中学过的 HTML、CSS、JavaScript 等技术进行项目的分析 、设计、开发及实现。培养学生的合作意识和团队精神，掌握实际 Web 类项目开发的基本流程及方法，掌握软件设计文档写作能力。二、内容和要求二、内容和要求1 1设计题目设计题目题目：浪漫之都网站设计 。学生自由组合成软件开发团队（不超过 4 人） ，根据各自兴趣，选择项目题目，提交指导教师，经指导教师确定后，开始进行项目开发工作。2 2设计内容设计内容（1）制定项目开发计划 （2）需求分析及功能设计（3）页面风格设计 （4）整体结构设计（5）编码及测试（6）文档撰写3 3设计要求设计要求在教师的指导下
3、，学生以开发小组为单位完成上述设计内容。要求功能完整齐全、网页设计符合W3C 标准、利用 CSS 技术使得网站风格统一、灵活运用 JavaScript 使网页生动。小组成员要有明确的分工，并在报告中给以说明。可以选择使用成熟的开源框架，如 jQuery，BootStrap，jQueryUI 等三、时间分配三、时间分配课程设计时间为 1 周（1）制定项目开发计划、需求分析、功能设计 1.5 天（2）页面风格设计及整体结构设计 1 天（3）编码及测试、撰写报告、答辩 2.5 天四、考核方式及成绩评定四、考核方式及成绩评定1 1考核方式考核方式成绩分为专题训练成果及答辩两部分。每个组要通过系统演示及
4、答辩。2 2考核成绩评定标准考核成绩评定标准包括基本知识的掌握程度、整体规划是否合理 、页面风格是否美观大方、动态网页设计使用的技术难度、软件演示是否正确；文档是否规范；答辩是否效果良好。将成绩分为优秀，良好，中等，及格，不及格五级分制。执笔人：范丰龙审核人：参考资源序号名称网址备注1jQueryhttp:/ jQuery 的专业 ASP.NET 控件库8DWZhttp:/ jQuery 实现的Ajax RIA 开源 jquery ui 框架9960grid systemhttp:/960.gs/CSS 960 栅格系统文档模板“浪漫之都浪漫之都 时尚大连时尚大连”网站设计网站设计序号学号姓名
5、角色完成工作概述125王珂226张诚323陈要前言：前言：在大连生活 3 年了，这里就是我的第二个家，有很多想对大连说的话，借此机会献出我们微薄的力量想为大连重新规划一个只属于大连的门户网站。1、项目开发计划项目开发计划周一：讨论将要开发的网站的主题，选取与我们的网站主题相关的素 材，进行网站的需求分析，并写出网站的需求分析说明，然后 依据需求分析写出网站的概要设计，列出网站所应该具备的主 要功能模块周二：依据功能设计说明以及网站的主题设计网站的页面风格，并列 出网站的整体架构。周三、周四：进行项目的主要编码工作，并对网站进行测试，然后完 成课程设计报告。周五：答辩人员安排：由王珂同学完成项目
6、的主要需求分析工作、项目开发计划的制定以及网站整体架构的设计，由王珂、陈要、张诚完成项目的编码以及测试工作。三人合力完成课程设计报告。二、网站规划设计说明二、网站规划设计说明该门户网站是大连城市形象的重要组成部分，也是将大连的魅力形象展示给全国人民的一个重要窗口。该网站能以动态生动的方式展示大连的信息及它的魅力，也能将众多关键字一一呈现在用户眼前，包括更详细的信息。让所需的用户对大连的风土人情一目了然。对生活在这里的人而言 可以通过网络以快捷、全面、最经济、最有效的方式传递给他们所需要的信息和咨讯，而最重要的是用户将根据自己的需要来访问子页面，也可以对自已感兴趣的话题自由选择。对不在大连生活的
7、人而言 可以通过门户网树立大连的形象，提高大连的知名度。期望：通过大连门户网站的创建，使得越来越多的人了解大连 喜欢上大连 来大连做客。同时能够成为大连人获得本地资讯的第一选择。简述本网站是做什么的，面向的用户群。网站具备的功能和期望达到的目标。2、网站风格及栏目规划网站风格及栏目规划页面风格以及栏目规划：页面风格以及栏目规划：严谨大气。大连靠海，所以网站以蓝色为主体色调通过悬挂信息区域的方式展现信息内容，配合少量辅助型色彩，局部独立而又整体统一。整体框架整齐划一，局部又不失变化，大面积的广条幅配合周边的辅助性标题栏，使层次更加清晰。栏目规划：主栏目：在网站名称下面的一排栏目，是浏览者可以直接
8、看到的栏目。栏目说明：大连概况大连新闻:发布最近的新闻动态政务机关:介绍大连政府机关的结构及所属关系大连教育:介绍大连师资力量，教育服务 学校信息大连商务:介绍大连商业融资信息大连旅游:大连范围内主要景点解读 旅游攻略招聘:介绍最新的招聘岗位房屋交易: 介绍最新的房屋出租买卖信息生活:介绍大连日常生活的小妙招，当地人的生活作息3、网页内容规划、网页内容规划首页中的内容版块包含以下几个部分：页面头部：浪漫之都 时尚大连栏目导航：文字链接版权声明：邂逅大连（powered by 邂逅大连)首页截图（index.html）：二级栏目页截图（请说明对应的 html 文件名）：页面头部：浪漫之都 时尚大
9、连栏目导航：主栏目：在网站名称下面的一排栏目，是浏览者可以直接看到的栏目。栏目说明：大连概况(gaikuang.html)大连新闻:发布最近的新闻动态(news.htmlL)政务机关:介绍大连政府机关的结构及所属关系(gov.html)大连教育:介绍大连师资力量，教育服务 学校信息(edu.html)大连商务:介绍大连商业融资信息(bus.html)大连旅游:大连范围内主要景点解读 旅游攻略(trans.html)招聘:介绍最新的招聘岗位(zhaopin.html)房屋交易: 介绍最新的房屋出租买卖信息(fangwu.html)生活:介绍大连日常生活的小妙招，当地人的生活作息(live.htm
10、l)4、技术方案技术方案( (说明：用到了哪些技术及软件？有无说明：用到了哪些技术及软件？有无 CSSCSS、divdiv 布局、布局、JavascriptJavascript 网页特效或多媒体等元素？网页特效或多媒体等元素？ 网站有何特色？网站有何特色？) )软件：visual studio，chrome 浏览器以及浏览器自带的调试工具技术：采用了 bootstrap 框架以及 jquery 库，使用了 div+css 布局二、二、 HTMLHTML 页面结构图页面结构图#container #head#left#zuozhequ#middle#zuopinji#bozhu#wenzhang
11、#bozhushezhi#guanzhu#faxianhaobo ke#lizi#lizi#tupian图 1 首页 div 布局结构图( (请将首页及二级页结构图列出。请将首页及二级页结构图列出。) )三、页面三、页面 DIVDIV 结构代码结构代码( (请将首页及二级页请将首页及二级页 divdiv 结构代码列出。结构代码列出。) )首页：页面宽度 1325px 头部页面宽度 1309px，高度 83px 左边页面宽度 300PX 作品宽度 114px中间区域宽度 563px 中间区域的作品宽度 560px,高度 433px右边宽度 440px 博主宽度 225px，高度 53px 文章宽
12、度 225px，高度 38px 博主设置宽度 225px，高度 33px 关注宽度 225px，高度 36px 发现博客宽度 225px，高度 29px 个博客宽度 225px，高度 32px 一个博客宽度 225px，高度 49px二级页：四、四、CSSCSS 代码及注释代码及注释(要求要求:字体字体: Times New Roman,字号字号:五号五号,行距行距:1.25 倍，请挑选重要的倍，请挑选重要的 CSS 代码列出即可，不用贴全部代代码列出即可，不用贴全部代 码。码。)五、用到的主要五、用到的主要 JavsScriptJavsScript 代码及注释代码及注释六、页面测试结果六、页
13、面测试结果( (要求：页面至少在两种不同的浏览器中测试结果，如要求：页面至少在两种不同的浏览器中测试结果，如 ChromeChrome 或或 IE8.0IE8.0 以上任一版本或其他类型浏览器，以上任一版本或其他类型浏览器， 列出首页测试效果截图即可列出首页测试效果截图即可) ) 1、IEX 浏览器下测试结果2、ChromeChrome浏览器下测试结果七、心得体会七、心得体会( (要求：必须要有内容，可以是技术知识总结或经验总结；制作网页的过程中碰到哪些问题，怎么解决要求：必须要有内容，可以是技术知识总结或经验总结；制作网页的过程中碰到哪些问题，怎么解决 的；网页存在哪些不足；今后有哪些地方可以进一步改进。的；网页存在哪些不足；今后有哪些地方可以进一步改进。) )
