网站设计说明书

1、网页制作工具设计说明书题目：青岛滨海学院精品课程网站姓名:王海燕学号:20101070130 班级：10信高1班指导教师：孙俊国完成日期：2011/12/15目录 TOC o 1-5 h z HYPERLINK l bookmark10 o Current Document 青岛滨海学院精品课程设计与制作说明书3 HYPERLINK l bookmark13 o Current Document 第1章网站的规划3 HYPERLINK l bookmark16 o Current Document 1.1网站整体规划3网站的定位3 HYPERLINK l bookmark19 o Curren

2、t Document 1.2网站功能设计3主页功能3副页功能3 HYPERLINK l bookmark27 o Current Document 第2章精品课程网站设计与制作3 HYPERLINK l bookmark30 o Current Document 2.1主页设计3 HYPERLINK l bookmark43 o Current Document 2.2副页设计5第3章核心代码7 HYPERLINK l bookmark64 o Current Document 4.1网页设计的重点分析84.2网页设计的难点分析9 HYPERLINK l bookmark70 o Curren

3、t Document 小结:网站设计小结9 HYPERLINK l bookmark73 o Current Document 参考文献9青岛滨海学院精品课程设计与制作说明书第1章网站的规划1.1网站整体规划网站的定位精品课程网站是一个学校的网站，首先网站整体上要给人体现出一种，温馨的、充 满文化气息的、先进的、积极进取的校园氛围，网页整体上呈现橙黄色色调，这种色调 能带给人热情奔放、充满激情正好适合大学生这个年龄段。网站板块的设置网站的板块从整体上分为主页和副页；进一步细分，主页是由banner、logo、导航、 栏目组成；而副页就相对简洁些，主要分为banner、导航、栏目三个板块。1.2

4、网站功能设计主页功能1）通过主页，你可以了解学校的新闻、教师风采、校园最新动态、以及国家精品课 程等内容。2）同时主页可以连接到各个副页和校园论坛，以及友情链接各大高校主页。3）主页给人以视觉刺激，以扩大浏览者的浏览兴趣，了解更多信息。副页功能1）副页把内容具体化，是内容更丰富、更清晰化。2）副页的第二个功能是给浏览者提供下载平台，例如：在申报文件中，我像浏览 者提供了下载文件功能，和在教学视频中提供视频下载。第2章精品课程网站设计与制作2.1主页设计2.1.1 logo 设计Logo继续采用我们学校的logo设计，把一个椭圆分成三块，用三原色着色，分别 有不同的内涵。Logo截图如下:2.1

5、.2 banner 设计Banner是一进大门看到的凝聚雕塑，和与大门正对的嵩德楼结合而成，而且还有 文字型解读学校历史，并且集合了学校校训：“开拓勤奋，坦诚务实。”也增长了网页的 观赏性。Banner截图如下：栏目设计栏目排版丰富而又条理，即增加了阅读性，又体现出美观大方。栏目截图如下:|曼.国家级精品课程】一应用韩语一 省级精品津程】一商务韩语校级精品课程】一影视欣赏申报精品课程】一动漫申报文件】中文解读卷俊德：学术带头人（教 授），博士生导师，享受国 务院特殊津贴。曾荻国家人 事部中青年有突出贡献专家 荣誉称号，曾兼任全国气相 沉租委员含委员气现兼任腐 蚀与防护委员会理事，山西 表原市丞

6、处理协会理。发耒 学术论文洲。余篇校园网入口：点击电 脑图标进入校园网， 了解校园最新动态， 查看个人成绩，校园 耒现令无下好召升=全体师生考依图书馆入口：图书: 馆篇有图书150万 本，是欢迎同学们 借阅。J7V邮箱I校长邮箱：导航设计导航栏主要运用flash动画菜单栏工具，图片交换，使要点击内容突出，既美观又大方。导航栏截图如下:风格与色彩搭配整体上采用尸字形设计风格，是内容更加丰富，主页采用潜橙与橙色里加了点红 色的色彩搭配。给人一种温馨而又充满激情感觉，增加读者的阅读兴趣，使网页更具有 浏览性。技术运用1）主要应用表格进行布局，运用div和ap-div进行辅助布局。2）导航主要运用fl

7、ash动画技术。3）运用fireworks以及ps对图片进行处理、融合，设计出风格独特独特的banner， 以及做出网页效果图。4）应用代码进行加工处理实现图片与字的滚动以及统计浏览次数。2.2副页设计副页1栏目设计不同的副页栏目设计不同，例如教学视频副页里添加了视频在线浏览栏目，教学简介里 则增加了对教师的介绍以及风采展示，还有校园风光里则增加了校园风景的动态浏览栏 目，联系我们里则对班级同学进行了展示等等。栏目截图如下：导航设计副页导航与主页导航并不完全相同，副页导航更加简练。截图如下：风格与色彩搭配副页色彩与主页保持一致，副页风格主要采用T型布局，和E型布局，跟据内容 不同，添加不同栏目

8、框架。技术运用1）通知运用流动字体代码编写，图片有的采用流动图片代码，有的使用flash技术 制作。2）运用fireworks以及ps对图片进行处理、融合，设计出风格独特独特的banner， 以及做出网页效果图。副页2栏目设计栏目设计根据内容设计不同风格栏目。截图如下：指定区域截图irnBK日风光Craafied by MTdqJRegister Ntow 蛰 wemwe EU& rtaemTar我校开校园文化建设工作会韩国光州大学领导苗河我校校园新屁我税召开考概动员大会风格与色彩搭配与主页风格色彩相同。技术运用1）应用flash技术制做图片展示，利用fireworks设计bannero2）运

9、用ap-div布局。第3章核心代码 第4章精品课程网站网页设计的重难点分析4.1网页设计的重点分析主要体现在板式设计，色彩搭配上围绕一个重点，整体协调，内容丰富，特别 要突出主题，副页既要体现与主页的协调，还要突出不同主题的风格这是重点。栏目布局。网页布局有“国”字型、拐角型、标题正文型、左右框架型、上下 框架型、综合框架型、封面型、Flash型、变化型等多种形式。采用表格布局我认为是 最佳选择，虽然布局的过程简单易用，但是问题很多，例如：超链接问题，还不太稳定； 采用ap-div进行辅助布局，但ap-div随分辨率改变而发生变化，不过结果还算理想， 以后打算采用更稳定的div布局4.2网页设

10、计的难点分析1）网页采用表格布局，不稳定容易溢出，是整个网页出现裂痕。2）超链接有时连不上。3）写代码时要考虑表格的代码，进一步增加了难度，还有ap-div像素问题都是难 点。小结：网站设计小结在现代快速发展的社会，报纸、纸质图书将要被取代，一个重要的信息来源就是互 联网，要想在互联网上浏览信息，必须通过网站，所以网站的建设将更能使用户更好的 运用互联网，网站的实用性、美观程度也促生了一些行业，例如：网页美观，网站模板 设计等，因此网站建设显得尤为重要。学校网站建设，即方便同学们浏览信息，也给外界了解我们学校提供了平台，同时 也可在网站上进行师生交流，增加同学与老师的距离，也可使同学们在校园网

11、上学习优 秀教师的教学视频，给同学们提供更多的教学平台。网站设计是一个繁琐而又有意义的工作，考验我们专业知识的同时，也在考验着我 们的耐心。在网页里可以体现我们的创意，设计方法让我们的想法变得可视化，因此网 站建设也能体味其中的乐趣。参考文献1 dreamweaver网页设计与制作案例教程 3祈大鹏dreamweaver es4实用教程.北京：电子工业出版社，2010信息工程学院网页制作工具实践环节考核报告单2011-2012学年度第1学期期末排课编号：(2011-2012-1)-0714394-00425-1批阅日期： 年 月 日姓名王海燕班级10信高1班学号20101070130评分标准与评 价评分标准分值得分网站规划好、素材