《网站设计说明书-样本》由会员分享，可在线阅读，更多相关《网站设计说明书-样本（10页珍藏版）》请在金锄头文库上搜索。
1、1网页制作工具设计说明书题 目：青岛滨海学院精品课程网站姓 名： 王海燕 学 号： 20101070130 _ _ 班 级： 10 信高 1班 _指导教师： 孙俊国 _完成日期： _2011/12/15_2目录青岛滨海学院精品课程设计与制作说明书 .3第 1 章 网站的规划 .31.1 网站整体规划 .31.1.1 网站的定位 .31.2 网站功能设计 .31.2.1 主页功能 .31.2.2 副页功能 .3第 2 章 精品课程网站设计与制作 .42.1 主页设计 .42.2 副页设计 .6第 3 章 核心代码 .74.1 网页设计的重点分析 .94.2 网页设计的难点分析 .9小结：网站设计
2、小结 .9参考文献 .103青岛滨海学院精品课程设计与制作说明书第 1 章 网 站 的 规 划1.1 网站整体规划1.1.1 网站的定位精品课程网站是一个学校的网站，首先网站整体上要给人体现出一种，温馨的、充满文化气息的、先进的、积极进取的校园氛围，网页整体上呈现橙黄色色调，这种色调能带给人热情奔放、充满激情正好适合大学生这个年龄段。1.1.2 网站板块的设置网站的板块从整体上分为主页和副页；进一步细分，主页是由 banner、logo、导航、栏目组成；而副页就相对简洁些，主要分为 banner、导航、栏目三个板块。1.2 网站功能设计1.2.1 主页功能1）通过主页，你可以了解学校的新闻、教
3、师风采、校园最新动态、以及国家精品课程等内容。2）同时主页可以连接到各个副页和校园论坛，以及友情链接各大高校主页。3）主页给人以视觉刺激，以扩大浏览者的浏览兴趣，了解更多信息。1.2.2 副页功能1）副页把内容具体化，是内容更丰富、更清晰化。2）副页的第二个功能是给浏览者提供下载平台，例如：在申报文件中，我像浏览者提供了下载文件功能，和在教学视频中提供视频下载。第 2 章 精 品 课 程 网 站 设 计 与 制 作2.1 主页设计2.1.1 logo 设计4Logo 继续采用我们学校的 logo 设计，把一个椭圆分成三块，用三原色着色，分别有不同的内涵。Logo 截图如下：2.1.2 bann
4、er 设计Banner 是一进大门看到的凝聚雕塑，和与大门正对的嵩德楼结合而成，而且还有文字型解读学校历史，并且集合了学校校训：“开拓勤奋，坦诚务实。 ”也增长了网页的观赏性。Banner 截图如下：2.1.3 栏目设计栏目排版丰富而又条理，即增加了阅读性，又体现出美观大方。栏目截图如下：52.1.4 导航设计导航栏主要运用 flash 动画菜单栏工具，图片交换，使要点击内容突出，既美观又大方。导航栏截图如下：2.1.5 风格与色彩搭配整体上采用尸字形设计风格，是内容更加丰富，主页采用潜橙与橙色里加了点红色的色彩搭配。给人一种温馨而又充满激情感觉，增加读者的阅读兴趣，使网页更具有浏览性。 2.
5、1.6 技术运用1）主要应用表格进行布局，运用 div 和 ap-div 进行辅助布局。2）导航主要运用 flash 动画技术。3) 运用 fireworks 以及 ps 对图片进行处理、融合，设计出风格独特独特的banner，以及做出网页效果图。4） 应用代码进行加工处理实现图片与字的滚动以及统计浏览次数。2.2 副页设计2.2.1 副页 12.2.1.1 栏目设计不同的副页栏目设计不同，例如教学视频副页里添加了视频在线浏览栏目，教学简介里则增加了对教师的介绍以及风采展示，还有校园风光里则增加了校园风景的动态浏览栏目，联系我们里则对班级同学进行了展示等等。栏目截图如下：62.2.1.2 导航
6、设计副页导航与主页导航并不完全相同，副页导航更加简练。截图如下：2.2.1.3 风格与色彩搭配副页色彩与主页保持一致，副页风格主要采用 T 型布局，和 E 型布局，跟据内容不同，添加不同栏目框架。2.2.1.4 技术运用1）通知运用流动字体代码编写，图片有的采用流动图片代码，有的使用 flash 技术制作。2) 运用 fireworks 以及 ps 对图片进行处理、融合，设计出风格独特独特的 banner，以及做出网页效果图。2.2.2 副页 22.2.2.1 栏目设计栏目设计根据内容设计不同风格栏目。截图如下：72.2.2.2 风格与色彩搭配与主页风格色彩相同。2.2.2.3 技术运用1）应
7、用 flash 技术制做图片展示，利用 fireworks 设计 banner。2）运用 ap-div 布局。第 3 章 核 心 代 码第 4 章 精品课程网站网页设计的重难点分析4.1 网页设计的重点分析1) 主要体现在板式设计，色彩搭配上围绕一个重点，整体协调，内容丰富，特别要突出主题，副页既要体现与主页的协调，还要突出不同主题的风格这是重点。2）栏目布局。网页布局有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、F1ash 型、变化型等多种形式。采用表格布局我认为9是最佳选择，虽然布局的过程简单易用，但是问题很多，例如：超链接问题，还不太稳定；采用 ap-di
8、v进行辅助布局，但 ap-div随分辨率改变而发生变化，不过结果还算理想，以后打算采用更稳定的 div布局 4.2 网页设计的难点分析1）网页采用表格布局，不稳定容易溢出，是整个网页出现裂痕。2）超链接有时连不上。3）写代码时要考虑表格的代码，进一步增加了难度，还有 ap-div 像素问题都是难点。小 结 ： 网 站 设 计 小 结在现代快速发展的社会，报纸、纸质图书将要被取代，一个重要的信息来源就是互联网，要想在互联网上浏览信息，必须通过网站，所以网站的建设将更能使用户更好的运用互联网，网站的实用性、美观程度也促生了一些行业，例如：网页美观，网站模板设计等，因此网站建设显得尤为重要。学校网站
9、建设，即方便同学们浏览信息，也给外界了解我们学校提供了平台，同时也可在网站上进行师生交流，增加同学与老师的距离，也可使同学们在校园网上学习优秀教师的教学视频，给同学们提供更多的教学平台。网站设计是一个繁琐而又有意义的工作，考验我们专业知识的同时，也在考验着我们的耐心。在网页里可以体现我们的创意，设计方法让我们的想法变得可视化，因此网站建设也能体味其中的乐趣。参 考 文 献1 dreamweaver 网页设计与制作案例教程2 http:/ 祈大鹏 dreamweaver cs4 实用教程. 北京：电子工业出版社，201010信息工程学院网页制作工具实践环节考核报告单2011-2012学年度第 1学期期末排课编号：（2011-2012-1）-0714394-00425-1 批阅日期： 年 月 日姓名 王海燕 班级 10信高 1班 学号 20101070130评分标准 分值 得分网站规划好、素材收集完整、15 张网页以上。 20主页设计美观且有创意、内容完整、导航正确、有 1个以上的flash广告动画（以 Flash动画为主页时除外） 。40副页设计布局好，内容完整、导航正确，有 1个以上的 Flash动画20设计说明书要求：格式正确、排版规范；分析到位、网页设计重点与难点分析深刻。用 A4 打印，8 页以上。20评分标准与评价 教师评价：考核成绩折合成绩任课教师签名
