Hello_freshman新生导航网
目录
一、 引言 4
(一) 课题开发目的 4
(二) 课题的开发工具及技术 5
二、 网站的规划 5
(一) 网站选题 5
(二) 网站主要的内容 6
三、 网站的设计 7
(一) 导航设计 7
(二) 首页的设计 9
(三) 子页的设计 13
四、 网站内容 14
(一) 网页实现 14
(二) 首页内容 15
(三) 二级子页内容 16
(四) 三级子页内容 17
(五) 重点实验实训室介绍 19
五、 特效技术 19
(一) JavaScript效果 19
(二) 图片滚动效果 21
(三) 下拉列表链接效果 22
(四) 留言板JS特效 23
六、 网站测试 25
(一) 网站链接测试 25
(二) 页面测试 25
七、 总结 26
八、 致谢 27
九、 参考文献 27
引言
课题开发目的
是2003年7月经江苏省人民政府成立的属于比较年轻的公办专科层次的全日制普通高校，学校坐落于苏州国际教育园南区，校园的环境优美，设施齐全，共享资源丰富。近年来，学院在理念创新、校企合作、产学结合、订单培养、实训基地、精品教材、技能竞赛、科技研发、双师团队、技术专利、海外交流等方方面面获得了使人自豪的成就，为社会培养了大批高素质技能型人才，为地方经济建设作出了积极的贡献，赢得了良好的社会声誉。随着互联网的发展，学生在报考学校之后希望通过多种渠道来了解学校的信息，所以 *好棒文|www.hbsrm.com +Q: %3^5`1^9`1^6^0`7^2#
新生导航网应运而生。
课题的开发工具及技术
Macromedia Dreamweaver CS4
Dreamweaver CS4即为Dreamweaver的CS4版本，Dreamweaver是美国MACROMEDIA公司开发（后被Adobe公司收购）的集网页制作和管理网站于一身的所见即所得网页编辑器。相教于老版本的Dreamweaver，Dreamweaver CS4新增了以下的种种令人欣喜的新功能。
借助创新的 JavaScript 核心对象和基本数据类型支持, 更快速、确切地编写 JavaScript。
使用 Dreamweaver CS4 中加强的 CSS 实施工具令您的网站脱颖而出。在“设计”和“真实观”在即时的视觉反馈的帮助下，很快地定义和修改在“属性”面板的CSS规则，可以修改网站内容的反馈。
DIV+CSS技术
Div+css是一种布局方式，区别与传统的通过表格来布局的方法，这种布局方法是通过层的方法，如果想要变化某块地方的内容直接通过css的样式表修改就行，简洁方便。DIV+CSS制作的网站网页预览打开速度的更快，搜索引擎也更容易收录到里面。
Adobe Photoshop cs5
PS图象处理软件是Adobe公司子公司的最流行的图像处理软件。在先前的基础上，CS5加入了全面改进后的高清视频渲染引擎Mercury，尤其是其视频处理软件Premiere Pro。
Mercury可以利用显卡的图形处理能力加速对高清格式视频的编解码和播放，当然不是所有的显卡都能够处理，由于之前和NVIDIA达成的协议，Mercury只 支持NVIDIA的显卡。
CS5的另一个亮点是新增加了一款软件Flash Catalyst，这款新的软件将作为除Flash外的另一个可供选择的工具，是专门为设计师与美工量身定制，以用来抗争微软的Expression Studio。
从功能上看，Photoshop可分为4个部分，分别是图像编辑、图像合成、校色调色及特效制作部分。
市值高达数十亿美元的Adobe公司20 多年来一向竭力帮助用户和企业以更好的成本效益，通过更好的方法表达图像、信息和思想，更好的增加用户体验。近年来，公司在数码成像、设计和文档技术方面的创新成果，在这些领域都树立了非常杰出的范本，使的数以百万计的人们都能够体会到视觉信息交流的强大魅力。
网站的规划
网站选题
本网站围绕新生导航网这个中心，从学院概况、苏州景点、苏州特产、苏州小吃、学院生活、联系我们这六个方面入手，深入而又详细的将学院官网上面没有介绍到我们学校的内容补充介绍，也介绍了关于苏州的小吃、景点、特产。我也希望这个网站能够给已经报考我们学校的广大新生提供便利。
网站主要的内容
网站整体结构
学院介绍网，主要设计了首页、学院的概况介绍、学校所在的城市—从学院概况、苏州景点、苏州特产、苏州小吃、学院生活、联系我们、这六个方面入手，首页内容大体包括对学院的简单介绍，图片赏析，以及链接到子页的链接。学院概况主要介绍了学校的系部还有成立时间还有学院目前的领导和校企合作情况。学院所在的城市是苏州，苏州小吃介绍了苏州有哪些著名小吃以及详细的介绍每种小吃的特点。苏州特产是介绍了苏州有哪些著名的特产以及特产的历史来源以及特产的详细情况。苏州景区，则是介绍了平时新生休闲的时候值得去玩的地方，介绍了开放情况以及注意事项。学校生活日常是新生平时在学校的学习生活以及学校的基础设施。联系我们是展示了学校各部门的电话号码以及我们学校的地图还有公交路线。留言反馈则是对本网站的意见。整个网站的大体结构图如下：
图2-1网站框架图
网站的基本功能
新生导航网，通过简单明了的界面布局以及导航条的设计，可以使新生更加了解我们学校，也可以更加了解苏州这座城市，可以了解到官网上面普及不到的内容。
网站的核心思想
做该网站的目的是为了更好的为新生服务，让新生还未到我们学校报到之前就对我们学校很了解，展示互联网的魅力。
网站的设计
导航设计
图3—1
图3—2
图3—3
以上是我的首页导航以及子页上面的导航。
导航条设计代码如下：
图3—4导航条html代码
图3-4是导航条的html的部分代码。
以下是导航条css的设计代码：
图3—5导航条css代码
图3-5是css中关于导航条的设置以及颜色的设置。
导航条采用了横式设计更加清晰明了，导航的每个栏目设计成块状效果，如图3-1所示，并设计了鼠标经过效果，如图3-2、3-3所示。使得人们看了网站的导航条对网站有一种大概的了解，能够通过网站的导航条准确链接到自己需要的页面。
首页的设计
首页的内容主要是介绍了学校的基本情况还有对学校风景的图片介绍以及对其子页做的链接。通过首页对学校的简单介绍，让报考我们学校的学生能够对学校有一个基础印象和了解。首页主要是对子页有一个引导的作用，通过让新生基本了解学校的基础上，引导出子页的内容。
一、 引言 4
(一) 课题开发目的 4
(二) 课题的开发工具及技术 5
二、 网站的规划 5
(一) 网站选题 5
(二) 网站主要的内容 6
三、 网站的设计 7
(一) 导航设计 7
(二) 首页的设计 9
(三) 子页的设计 13
四、 网站内容 14
(一) 网页实现 14
(二) 首页内容 15
(三) 二级子页内容 16
(四) 三级子页内容 17
(五) 重点实验实训室介绍 19
五、 特效技术 19
(一) JavaScript效果 19
(二) 图片滚动效果 21
(三) 下拉列表链接效果 22
(四) 留言板JS特效 23
六、 网站测试 25
(一) 网站链接测试 25
(二) 页面测试 25
七、 总结 26
八、 致谢 27
九、 参考文献 27
引言
课题开发目的
是2003年7月经江苏省人民政府成立的属于比较年轻的公办专科层次的全日制普通高校，学校坐落于苏州国际教育园南区，校园的环境优美，设施齐全，共享资源丰富。近年来，学院在理念创新、校企合作、产学结合、订单培养、实训基地、精品教材、技能竞赛、科技研发、双师团队、技术专利、海外交流等方方面面获得了使人自豪的成就，为社会培养了大批高素质技能型人才，为地方经济建设作出了积极的贡献，赢得了良好的社会声誉。随着互联网的发展，学生在报考学校之后希望通过多种渠道来了解学校的信息，所以 *好棒文|www.hbsrm.com +Q: %3^5`1^9`1^6^0`7^2#
新生导航网应运而生。
课题的开发工具及技术
Macromedia Dreamweaver CS4
Dreamweaver CS4即为Dreamweaver的CS4版本，Dreamweaver是美国MACROMEDIA公司开发（后被Adobe公司收购）的集网页制作和管理网站于一身的所见即所得网页编辑器。相教于老版本的Dreamweaver，Dreamweaver CS4新增了以下的种种令人欣喜的新功能。
借助创新的 JavaScript 核心对象和基本数据类型支持, 更快速、确切地编写 JavaScript。
使用 Dreamweaver CS4 中加强的 CSS 实施工具令您的网站脱颖而出。在“设计”和“真实观”在即时的视觉反馈的帮助下，很快地定义和修改在“属性”面板的CSS规则，可以修改网站内容的反馈。
DIV+CSS技术
Div+css是一种布局方式，区别与传统的通过表格来布局的方法，这种布局方法是通过层的方法，如果想要变化某块地方的内容直接通过css的样式表修改就行，简洁方便。DIV+CSS制作的网站网页预览打开速度的更快，搜索引擎也更容易收录到里面。
Adobe Photoshop cs5
PS图象处理软件是Adobe公司子公司的最流行的图像处理软件。在先前的基础上，CS5加入了全面改进后的高清视频渲染引擎Mercury，尤其是其视频处理软件Premiere Pro。
Mercury可以利用显卡的图形处理能力加速对高清格式视频的编解码和播放，当然不是所有的显卡都能够处理，由于之前和NVIDIA达成的协议，Mercury只 支持NVIDIA的显卡。
CS5的另一个亮点是新增加了一款软件Flash Catalyst，这款新的软件将作为除Flash外的另一个可供选择的工具，是专门为设计师与美工量身定制，以用来抗争微软的Expression Studio。
从功能上看，Photoshop可分为4个部分，分别是图像编辑、图像合成、校色调色及特效制作部分。
市值高达数十亿美元的Adobe公司20 多年来一向竭力帮助用户和企业以更好的成本效益，通过更好的方法表达图像、信息和思想，更好的增加用户体验。近年来，公司在数码成像、设计和文档技术方面的创新成果，在这些领域都树立了非常杰出的范本，使的数以百万计的人们都能够体会到视觉信息交流的强大魅力。
网站的规划
网站选题
本网站围绕新生导航网这个中心，从学院概况、苏州景点、苏州特产、苏州小吃、学院生活、联系我们这六个方面入手，深入而又详细的将学院官网上面没有介绍到我们学校的内容补充介绍，也介绍了关于苏州的小吃、景点、特产。我也希望这个网站能够给已经报考我们学校的广大新生提供便利。
网站主要的内容
网站整体结构
学院介绍网，主要设计了首页、学院的概况介绍、学校所在的城市—从学院概况、苏州景点、苏州特产、苏州小吃、学院生活、联系我们、这六个方面入手，首页内容大体包括对学院的简单介绍，图片赏析，以及链接到子页的链接。学院概况主要介绍了学校的系部还有成立时间还有学院目前的领导和校企合作情况。学院所在的城市是苏州，苏州小吃介绍了苏州有哪些著名小吃以及详细的介绍每种小吃的特点。苏州特产是介绍了苏州有哪些著名的特产以及特产的历史来源以及特产的详细情况。苏州景区，则是介绍了平时新生休闲的时候值得去玩的地方，介绍了开放情况以及注意事项。学校生活日常是新生平时在学校的学习生活以及学校的基础设施。联系我们是展示了学校各部门的电话号码以及我们学校的地图还有公交路线。留言反馈则是对本网站的意见。整个网站的大体结构图如下：
图2-1网站框架图
网站的基本功能
新生导航网，通过简单明了的界面布局以及导航条的设计，可以使新生更加了解我们学校，也可以更加了解苏州这座城市，可以了解到官网上面普及不到的内容。
网站的核心思想
做该网站的目的是为了更好的为新生服务，让新生还未到我们学校报到之前就对我们学校很了解，展示互联网的魅力。
网站的设计
导航设计
图3—1
图3—2
图3—3
以上是我的首页导航以及子页上面的导航。
导航条设计代码如下：
图3—4导航条html代码
图3-4是导航条的html的部分代码。
以下是导航条css的设计代码：
图3—5导航条css代码
图3-5是css中关于导航条的设置以及颜色的设置。
导航条采用了横式设计更加清晰明了，导航的每个栏目设计成块状效果，如图3-1所示，并设计了鼠标经过效果，如图3-2、3-3所示。使得人们看了网站的导航条对网站有一种大概的了解，能够通过网站的导航条准确链接到自己需要的页面。
首页的设计
首页的内容主要是介绍了学校的基本情况还有对学校风景的图片介绍以及对其子页做的链接。通过首页对学校的简单介绍，让报考我们学校的学生能够对学校有一个基础印象和了解。首页主要是对子页有一个引导的作用，通过让新生基本了解学校的基础上，引导出子页的内容。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1805.html
