某职业技术学院校园网站

1、第第7章章 教育类网站教育类网站长春职业长春职业 技术学院校园网站技术学院校园网站17.1 网页效果图网页效果图3本效果图为Fireworks CS3设计与制作。 主页效果图 27.1 网页效果图网页效果图3本效果图为Fireworks CS3设计与制作。 子页效果图 37.2 客户需求客户需求 3 在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。 因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。 47.2 客户需求客户需求 3要建

2、立一个学校网站，应该需要实现那些需求呢？1学校网站是学校的“商标”，每一所学校都有自己的特色，每一所学校都有自己的个性。在这个高度信息化的社会里，建立自己学校网站是最直接的宣传手段。网站的超时空特性，不仅能让地区内的人们了解学校，更可让世界各地的人们了解学校。凭借学校网站，有效的提高学校知名度和声望，提升教学层次。2学校网站也是实现教育资源分配的桥梁。网络有巨大的教育资源库，它集全社会的力量，使教育资源无限增长。这对于发达地区和欠发达地区，高投入学校和条件差的学校在获取教育资源的权力上达成平等，使每一位教师和学生都能均等的得到培训和受教育的机会，不再受到学校水平、教材、教师能力的限制。学校网站

3、作为一个大的资源库既极大的提了高教学效率又实现公平教育的目的。57.2 客户需求客户需求 33学校网站要能提供教学互动的全新方式。学校网站使得教师与教师、教师与学生、学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使广州与北京、城市与乡村的学校同处一室，共同讨论，共同共享。地理上的界限在这里模糊和消失了，学校网站是真正没有围墙的学校。4学校网站还要能够提供个性化学习的平台，不同的学生理解世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式，各取所需。学校网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育

4、机会，充分发掘自己的内在潜力，培植独特的个性和人格。 67.2 客户需求客户需求 3 长春职业技术学院校园网站属于非营利性的教育类网站。通过以上多角度分析，作为高等院校网站，它担负着宣传学校风采展示学校特色的重任，同时还要满足校内教学、科研以及完成校内校务实现网络办公的要求。 77.3 页面风格定位页面风格定位31、颜色风格：营造出各种类型网站的整体气氛，包括标志，色彩，字体，标语等色彩，勾勒出网站的整体视觉效果。2、布局风格：规划出页面的各种功能区域， 布局通常有左右、上下、居中等几个主要形式，细分还有“厂”字型、“品”字型、“田”字型等等。3、内容结构风格：是网站的信息支撑，是控制网站风格

5、方向的根基，是风格个性化的主导因素。4、语言风格：要注意不同的语言字符对网站的影响亦不尽相同。如英文字符较为精简，适宜做小巧精致类型的网站，中文字符雅致繁复，较适宜做端庄严肃类型的网站。 87.3 页面风格定位页面风格定位3“校园网站”在设计上根据客户需求，其风格设计主要体现在以下：确保形成统一整体和界面风格。网页上所有的图像、文字，包括背景颜色、区分线、字体、标题、注脚等形成统一的整体。确保网页界面的清晰、简洁、美观。这会产生更大的易用性。确保视觉元素的合理安排，让浏览者体验到视觉的秩序感、节奏感、新奇感。具体表现在：1、颜色风格：本网站主色调采用了蓝色和白色。页面中的文字、链接、栏目等主要

6、以蓝色进行设计。2、布局风格：主页和子页面中采用了上。下布局模式3、内容结构风格：高等院校的校园网站信息量较大，信息主要由图片和文字两大要素构成。因此在主页设置的栏目相对较多、信息量较大。4、语言风格：由于本网站是国内教育类网站，语言采用中文版。97.4 网站建设方案网站建设方案3 从接到客户的业务咨询开始，经过双方不断的接洽和了解，并通过基本的可行性讨论，初步达成制作协议，就需要将项目立项，一般需要给客户一个网站建设方案。通过网站建设方案制订项目的所有细节，这样对双方都有益处。 107.4 网站建设方案网站建设方案3网站建设方案包括以下几个部分：客户情况分析； 网站需要实现的目的和目标； 网

7、站形象说明； 网站的栏目板块和结构； 网站内容的安排，相互链接关系； 使用软件、硬件和技术分析说明； 开发时间进度表； 宣传推广方案； 维护方案； 制作费用； 本公司简介：成功作品，技术，人才说明等。 117.4 网站建设方案网站建设方案3“长春职业技术学院校园网站”在完成前期工作后，建设方案主要内容包括以下几点：（1）网站建设费用预算。（2）确定付款方式及开发人员。 签定合同的同时先付预付金，网站设计完成并认可后，付签定合同的同时先付预付金，网站设计完成并认可后，付清余款。清余款。 合理安排项目开发人员。安排项目开发人员。（3）制订开发时间表：开发周期*若干个工作日（4）网站维护及培训。 网

8、站维护：网站维护：每年网站维护更新的标准及内容。 培训：培训： 网站运行时的技术、美术、内容维护(免费服务)； 根据网站规模免费培训几名网站维护和日常操作人员； 网站扩展建设。 通过与用户的多次协商后，为了保证项目的质量并顺利实施，通过合同的方式把所有细节以书面的方式定义下来，明确双方的责任与权利，为项目的开发、维护、管理提供法律等方面的保证。127.5 网站主页设计网站主页设计3 网站主页即首页，担负着网站“形象大使”的任务，从首页就可以窥探出网站的定位和服务对象，由于网站功能定位的不同，不同类型网站首页的表现形式也各有千秋，也就是说首页功能、表达形式、传递信息内容、设计风格、页面布局等要合

9、理清晰。 校园网站作为学校办公，师生交流，资源共享的网络平台，它的作用不仅要实现其网站的功能，还要实现友好的界面设计。 网页效果图设计主页制作开发流程 137.5 网站主页设计网站主页设计37.5.1 效果图设计效果图设计147.5 网站主页设计网站主页设计37.5.1 效果图设计效果图设计1.设计要领 利用Fireworks CS3软件来完成图1-4所示页面效果图的设计主要把握下面3个要点。（1）色彩设计：本页面为“长春职业技术学院校园网站”的主页面，在页面设计上本页面采用了蓝色和白色搭配的方式，突出学术氛围，页面的Logo采用动画效果，突出网站充满活力。（2）图片设计：本页面以不同线条几小

10、图案的配合展示栏目，具有清晰明了的效果。（3）布局设计：本页面采用了典型的页面布局模式，页面布局为上中下结构，分别为LOGO站标、导航、网站栏目等内容。157.5 网站主页设计网站主页设计37.5.1 效果图设计效果图设计2. 技术要点1）在效果图的制作过程中，主要利用矢量工具箱中的工具进行图形的绘制、组合。2）利用变形工具，对所绘制的图形进行任意变形操作。3）利用颜料桶工具，对对象填充颜色。167.5 网站主页设计网站主页设计37.5.1 效果图设计效果图设计3. 任务实施 对于网站来说，页面设计的吸引力是很重要的，在页面的制作上宽度多采用百分比模式，背景图是可以自由伸展的，因此重点是要做好

11、效果图的内容区域，下面详细说明制作过程。(1)设置网页区域宽度为775*830px。(2)在顶部区域绘制Banner区域为775*150px。(3)在Banner区域下边绘制导航区域为775*35px。(4)在导航区域下面绘制一条分割区域为775*15px。(5)在分割区域下边绘制各个栏目内容所在的区域为775*630px。177.5 网站主页设计网站主页设计37.5.1 效果图设计效果图设计187.5 网站主页设计网站主页设计37.5.1 效果图设计效果图设计197.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 主页制作页面整合效果图切片动画设计主页开发流程图 207.5 网站

12、主页设计网站主页设计37.5.2 主页制作主页制作 1.设计要领从效果图中利用切片的方式提取网页制作中所需的文字或图片素材。切片如图 7.5.2.1用用Fireworks完成效果图切片完成效果图切片217.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 2.技术要点 在Fireworks中设计好的效果图，要进行切片和优化，然后在XTHML中进行布局，这是网页设计与制作的一般流程，导出效果图的步骤一般由切片、优化、导出组成。一般背景由背景色与背景图片组成，在实际使用中一般包括三种情况。1、网页的背景仅有背景色，这样情况下背景不需要作切片，只要在XHTML进行整合时对body标签的背景

13、色进行设置就可以。2、网页仅有背景图片，这样情况下要以图片的效果为出发点，当背景图较大的情况下，可以采取对于切片中的大图片分割成多个小图片的方法。如果背景图片有一定规律可寻的话，可通过CSS对小图片进行重复来完成背景图片的重组。3、当背景图包含背景色和背景图片时，背景色不用作切片，背景图切片的规律同第二种情况。注：切片的目的是获取图像素材，要合理进行选择。注：切片的目的是获取图像素材，要合理进行选择。 7.5.2.1用用Fireworks完成效果图切片完成效果图切片227.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 3.任务实施（1）选择“切片”工具，如图所示。按照上图中的切片

14、规划，在背景中绘制出切片区域。7.5.2.1用用Fireworks完成效果图切片完成效果图切片237.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 （2）从“窗口”菜单中打开“优化”面板，如图所示。可以根据需要选择合适的图片格式进行优化。 7.5.2.1用用Fireworks完成效果图切片完成效果图切片247.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 （3）选择菜单“文件”|“导出”，打开“导出”窗口，设置“文件名”及“导出”选项如图所示。单击“保存”按钮，完成背景图片的切片。 7.5.2.1用用Fireworks完成效果图切片完成效果图切片257.5 网站主页

15、设计网站主页设计37.5.2 主页制作主页制作 1.设计要领 在Banner区域主要完成动画的制作，利用动态效果，增强网站的活力与吸引力。2.技术要点（1）各种Flash元件的创建。（2）Flash各种面板的使用。（3）常用动画效果的运用。7.5.2.2用用Flash完成动画设计完成动画设计267.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 3.任务实施（1）创建影片文档 执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文件（Action Script 3.0）】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为775*150象素，【

16、背景色】为白色。 7.5.2.2用用Flash完成动画设计完成动画设计277.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 （2）设置背景图层动画效果将“图层1”重命名为“背景图层”。执行【文件】|【导入】|【导入到舞台】命令，将“模糊背景.jpg”导入到舞台中。用鼠标选中该图片，将属性面板中的宽和高设置成与舞台宽和高相同，即宽775像素，高150像素。调整图片位置让其边缘与舞台边缘重合。 7.5.2.2用用Flash完成动画设计完成动画设计287.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 选中该图片，按F8键，将该图片转换为图形元件并命名为“模糊背景”如图所示

17、。7.5.2.2用用Flash完成动画设计完成动画设计297.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 在该图层的第6、24帧处按F6键，加入关键帧，在该层的第90帧按F5键插入普通帧，然后选中第5帧，单击鼠标右键执行插入空白关键帧命名，让时间轴播放到该帧时没有内容。单击选中该层第6帧，设置“属性”面板的“动画”为“补间”，然后在单击第6帧中的图形元件，在属性面板中设置该元件的属性中的“颜色”的“Alpha”值为“0%”。7.5.2.2用用Flash完成动画设计完成动画设计307.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 7.5.2.2用用Flash完成动画

18、设计完成动画设计317.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 单击“文字”图层名称，然后单击插入图层按钮，插入一个图层，这个图层位于“文字” 图层上方。将该层命名为“遮罩”图层。 在该图层的第24帧处按F6键，加入关键帧，选择工具栏中的椭圆工具，在舞台上画一个实心圆，圆的宽、高均为80。选择椭圆将之转化为图形元件。然后在该层的第34、35、39、48、90帧处按F6键，加入关键帧。调整各帧位置以及大小关系。7.5.2.2用用Flash完成动画设计完成动画设计327.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 在第90帧处将该圆形的宽设置为1076，高设置为

19、200，然后将文字及图片覆盖住。 分别选中该层的第24、35、39、48帧，将属性面板中的“动画”设置为“补间”。将该层设置为“遮罩层”。最终的时间轴如图所示。（5）动画完成后将该动画生成.swf格式的文件以便在网页中引用。7.5.2.2用用Flash完成动画设计完成动画设计337.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 1.设计要领 已经将背景图以网页的形式整体导出，那么网页的布局就变得容易。2.技术要点 打开导出的网页，使用Table进行布局及文本的编排。7.5.2.3 用用Dreamweaver完成完成XHTML的页面整合的页面整合 347.5 网站主页设计网站主页设

20、计37.5.2 主页制作主页制作 3.任务实施（1）建立站点：）建立站点：1）打开Dreamweaver软件，在菜单栏中选择“站点”中的“新建站点”，设置“站点名称”为“web”，本地根文件夹为“D:web”，然后单击“确定”按钮。7.5.2.3 用用Dreamweaver完成完成XHTML的页面整合的页面整合 357.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 2）在“文件”面板中如图所示，对web站点通过右键点击index.html将该页设置为网站的主页，文件夹images存放图像，文件夹f i l e s 存 放 子 页 ， 文 件 夹Scripts存放样式表。7.5.2.3 用用Dreamweaver完成完成XHTML的页面整合的页面整合 367.5 网站主页设计网站主页设计37.5.2 主页制作主页制作 （2）制作）制作index.html页面页面 1）打开index.html页面，此时该页面内容由在Fireworks的切片构成，且各个切片以图