《网页设计与制作》期末课程设计指导书.docx

《网页设计与制作》期末课程设计指导书.docx

《《网页设计与制作》期末课程设计指导书.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》期末课程设计指导书.docx（12页珍藏版）》请在冰点文库上搜索。

《网页设计与制作》期末课程设计指导书

《网页设计与制作》

期末课程设计指导书

设计班级：

06计科B1、B2、B3

设计时间：

2周

制定人：

赵进才

制定日期：

二○○九年十月

目录

一、课程设计的任务、目的和内容1

（一）课程设计的目的1

（二）课程设计的任务1

（三）设计题目及内容1

二、总体要求5

（一）制作常规要求5

（二）文件命名规则与目录结构要求5

（三）CI标准化要求6

（四）页面制作要求6

（五）程序开发7

三、设计流程8

（一）网站需求分析8

（二）策划网站8

（三）详细设计9

（四）设计实施10

（五）测试10

四、课程设计书的编写11

五、课程设计的时间安排11

六、课程设计成绩评价11

（一）成绩评定11

（二）等级划分12

课程设计是课程教学中的一项重要内容，是完成专业教学计划，达到教学目标的重要环节，课程设计是通过真实工作任务或产品设计等综合性较强的实例而进行的实践环节，它对帮助学生全面掌握课堂教学内容，培养学生实践和实际动手能力，培养团队协作，人际交往等素质的提高具有很重要的意义，《网页设计与制作》是一门实用性和实践性都很强的课程，课程设计应占有更重要的地位。

一、课程设计的任务、目的和内容

（一）课程设计的目的

课程设计总的目的在于加深对网页设计与制作的基本知识的理解，网页设计与制作技能综合运用和提高，通过真实工作任务，是学生能设计出有一定水平的网页并解决培养解决实际问题的能力，掌握实际网页设计与制作开发流程和开发方法。

具体的课程设计应达到以下目的：

1．提高学生在实际操作中收集信息，对信息进行价值判断，进行信息整理、加工的能力。

2．在实际的项目任务中培养网页设计方面的素养。

3．在实际的项目任务中使学生网页编程和制作的能力得到提高。

4．培养学生团队协作和人际交往方面的能力。

5.培养相关知识和技能的综合应用能力。

（二）课程设计的任务

针对计算机各专业岗位技能要求，进行网页设计与制作项目工作，培养学生计算机操作的能力和用计算机设计网站的基本技能，使学生具备分析问题、用编程思维解决问题的能力，达到计算机初级网页设计员的水平，使学生养成既善于独立思考，又乐于与人沟通、具备团队合作意识的职业素质。

（三）设计题目

设计一学校、学生、企业、体育、娱乐等类型网站，具有新闻自动发布、留言、投票和网站人数统计等功能。

新闻自动发布系统中管理员可以进行新闻的添加、修改和删除功能；网站的主页中显示新闻标题和发布时间，通过超级链接实现新闻的动态显示。

留言系统中，注册用户可以留言和浏览；管理员可以回复留言、修改和删除。

投票系统中，管理员能够设置、修改和删除投票项目，注册用户可以进行投票，但只能投票一次。

二、总体要求

（一）制作常规要求

页面要写title。

尽量使用广泛支持的技术。

以最流行的浏览器的最普及版本为标准，同时照顾低版本浏览器。

不使用过小的字体；不使用过大的图片、动画、声音；不使用过长的滚屏。

及时删除无用文件，防止无谓的下载速度减慢。

由于server的linux系统，严格区分文件大小写，所有文件全部以小写字母命名，包括图形文件，禁止用中文作文件名。

页面以1024×800屏幕分辩率设置为主，但也应注意其它屏幕设置的浏览效果；即在1024×800分辩率下应在浏览器中不出现横向的滚动条。

通常情况下，页面应以居中为主，如有特殊要求可以设置居顶、居左。

（二）文件命名规则与目录结构要求

首页面必须以“index.htm、index.asp命名文件。

HTML文件扩展文件名一律用.htm

在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个image的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。

除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主。

尽量用一些大家都能看懂的词汇。

使得自己和工作组的每一个成员能够方便的理解每一个文件的意义。

网站css文件要放到根目录下，供其它文件调用，如子栏目较多也可分别copy到自己目录下，使网站风格统一。

共用的模板文件应放在根目录的Templates文件夹下（此为dreamweaver的默认路径，如用其它软件开发者也需遵守此规则）。

（三）CI标准化要求

1．Banner（横幅）

格式：

GIF；尺寸：

468×60pixels；大小：

<15K

2．Logo（网站的标志）

格式：

GIF；尺寸：

88×31pixels；大小：

<7K

（四）页面制作要求

1．表格尽量用绝对像素，以免浏览器分辨率不同时表格产生变形。

一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成当浏览者敲入网址，先面对一片空白很长时间，然后所有的网页内容同时出现。

如果必须这样做，请使用标记，以便能够使这个大表格分块显示。

2．CSS定义

为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px的字号比较合适。

3．图片

采用gif、jpg压缩格式，以减小页面下载数据量。

每幅图片要有本图片的说明文字（alt=””），这样如果图片不能正常显示，也可知道图片处代表什么意思。

标记要增加width,height，以免图像不能正常显示时，出现页面混乱现象。

4．如页面采用动画活跃网页，须避免动画过大，尽量减少用户浏览等待时间。

整页用到flash动画，要考虑到flash与页面的融合统一。

5．每一相对独立的栏目首页一般也要求在40K容量以内，如特殊要求也不得超过60K；每个网页（本网首页除外）都要有返回主页和返回上级的图标或文字链接。

6．返回连接使用相对路径，尽量不使用绝对路径。

7．网页制作字体要求使用国家简化字。

本要求并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。

但是，请大家千万不要随意更改要求。

如果有任何问题，请及时与指导老师沟通。

（五）程序开发

1．次网站系统要连接一个数据库（sql）,所以要连接数据库，但不允许建立odbc数据源，不允许作多个头包含连接，整个系统只有一个，以便将来更改数据库密码时很方便的更改本系统，同时，移植也很方便。

2头包含要做成例如*.asp的文件，这样用户不会发现密码及数据库，如果有acess数据库，扩展名一定要改成例如*.asp的样子，以便保护数据。

3所有的各个子模块，都要有一个readme.asp（readme.txt----改成àreadme.asp，什么都不显示）文件，里面详细叙述本子模块用到的表，表结构，每个字段的意义及大小，SQL建表脚本语言（用SQL工具导出），每个程序文件的功能。

4建表要有一定的意义，其字段也要有意义，同时，以便将来扩充功能。

5要有注释，以便维护。

删除测试时候的无用代码，使程序清晰明了。

6站点内部使用相对路径。

7后台管理程序要整合到一个页面上，而且要有权限，只能是有权限的用户登录后才能进行系统管理。

8不要开设不必要的session变量，以免浪费资源，同时，能一次性用sql语句解决的问题就用sql语句，避免多次进行数据库检索，反馈，再检索等等，以免影响速度，致使大量的时间浪费在网络连接上。

9程序开发时不要用已投入运行的网站进行测试，请自己搭建环境或申请环境。

10要有错误捕获处理，提醒用户如何操作造成错误。

11删除信息时要有确认，毕竟是删除，确认后再行删除。

12各个模块间要条例分明，不要混乱一片。

每个模块要有自己的目录（放到主目录下）

13该用js验证合法的就要验证，坚决避免服务器端进行验证，以免加大服务器负担，同时，影响网页反应的速度。

14编程人员测试程序时要用上界限外值，合法值，下界限外值进行测试。

15绝对禁止使用触发器。

16如果整个网站系统都用到同一个变量或常量，请VBScript的语法定义变量和常量，以便维护上的方便。

17显示数据库信息时候，应考虑到段落层次，各标点符号的正常显示，记录比较多可以考虑分页，避免过长的页面出现。

18所有模块内部测试通过后再交往上级进行测试及验收。

19所有的功能完成后，要进行整合测试，后台管理程序要放到一起，也形成一个后台管理型网站，目的：

操作简洁方便。

三、设计流程

（一）网站需求分析

1.功能需求

依据用户资料（网站的目标、性质及该网站的浏览对象），确定网站的功能要求（客户系统和管理系统）。

2性能需求

依据功能需求，确定系统开发使用的硬件环境、软件环境和开发语言

（二）策划网站

1.网站内容

根据功能需求，结合技术实施问题来确定网站的功能版块（包括各功能版块具体的内容），并绘制系统层次概框图

2.网站目录设计

根据网站的内容和功能版块，规划网站的目录结构

3.链接设计和导航类型

根据用户的特点和站点的功能确定网站的链接的结构（绘制链接的拓扑图），如：

线性、树状、星状链接结构和树状—星状混合链接结构。

根据链接设计和实现的技术措施确定导航栏的类型（如普通导航栏、下拉菜单导航栏、分类列表导航栏、关键词导航栏等）。

4.网页的风格设计

说明色彩搭配的象征意义、感觉及网页颜色的整体规划。

5.网页的布局规划

根据网站亮点的布局、网站主体的布局、功能版块的布局、内容版块的协调布局确定网页的布局，并绘制草图。

6.数据库设计与实现

（1）数据库设计

①概念结构设计：

根据用户提供的数据资料进行设计，注意需要有E—R图。

a.实体

b.实体之间联系

c.E-R图

②逻辑结构设计：

根据所使用数据库管理系统的数据模型，将E—R图转换为关系模型，并进行规范化分析。

（若所掌握的知识能达到，可进行关系模型的优化分析）

③物理结构设计：

将关系模型与特定的RDMS相结合，生成数据库结构，包括数据库名称、表名、列属性、相应的约束和完整性。

字段名

数据类型

长度

可否为空（主键）

语义与说明

（2）数据库的实现

建立数据库和存储数据的表、查询和存储过程等。

（三）功能模块的划分

包括模块的功能及功能模块图

（三）详细设计

1.系统变量的定义及应用

2.模块详细设计

（1）模块说明：

模块名称、模块标识、模块功能、编程语言等

（2）模块接口：

调用模块名、被调用模块名、输入输出的文件或数据库名、使用的文件或数据库标识、使用的主要内存变量的名称与类型

（3）处理概要（IPO或流程图或流程图）：

简明、准确地描述模块的处理逻辑（I输入、P处理描述、O输出）

以上三点也可以列表说明，如下表。

（1）模块说明

名称

功能

标识

（2）模块接口

模块

调用

关系

调用模块名

被调用模块名

输入

输出

数据

输入数据文件名（项）

输出数据文件名（项）

使用的文件或数据库

内存

变量

变量名

类型

说明

（3）模块处理逻辑说明（IPO图、流程图或N-S图）

①IPO

模块名称

模块标识

上层调用模块

调用的下层模块

使用的文件或数据库

输入（I）

处理描述（P）

输出（O）

②流程图

输入/输出处理框判断框流程线

③N-S图

（四）设计实施

（五）测试

说明详细设计中调试和总调试中遇到的问题及解决的方案等

网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。

网站功能性测试就是要保证每个网页的可用性，要达到最初的内容组织设计目标，实现内部所规定的各项功能。

读者可方便快速地在站内寻找到所需的内容。

完整性测试就是保证页面内容显示正确，具有完善的超链接。

如果在测试过程中发现了错误，就要及时修改，在准确无误后，方可正式在Internet上发布。

在进行功能性测试和完整性测试后，有的还需要掌握整个站点的结构以备日后的修改。

四、课程设计书的编写

第一章网站的需求分析

第二章策划网站

第三章详细设计

第四章设计实施

第五章测试

结论

设计总结

附件：

网站更新说明书

五、课程设计的时间安排

序号

时间

课程设计内容

1

1天

集中学习，确定题目，并分工和需求分析

2

1天

策划网站

6

2天

详细设计

7

3天

设计实施

8

2天

进行网站的综合测试

9

1天

编写课程设计说明书

总计

10天

六、课程设计成绩评定

1.网站结构设计（10分）

包括网站的网站结构图，各个版块的页面设计，各个网页之间的关系链接设计。

2.软件流程设计（10分）

3.数据库设计（10分）

包括E－R图及数据库设计与实现

4.网页设计（10分）

包括创造性、网页内容、导航与链接、制作水平和页面的艺术性。

5.网页制作或网络程序设计（30分）

6.测试（10分）

实习笔记贯穿实习的全过程，内容与课程设计涉及的知识一致，并包括问题的处理。

6.课程设计书（20分）

包括论述的全面性、合理性，文字表述的准确性和条理性，以及书写的工整程度等。