某职业技术学院校园网站

网站设计基础与实例教程,1,第7章 教育类网站长春职业 技术学院校园网站,网站设计基础与实例教程,2,7.1 网页效果图,3,本效果图为 Fireworks CS3 设计与制作。,主页效果图,网站设计基础与实例教程,3,7.1 网页效果图,3,本效果图为 Fireworks CS3 设计与制作。,子页效果图,网站设计基础与实例教程,4,7.2 客户需求,3,在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。 因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。,网站设计基础与实例教程,5,7.2 客户需求,3,要建立一个学校网站，应该需要实现那些需求呢？ 1学校网站是学校的“商标”，每一所学校都有自己的特色，每一所学校都有自己的个性。在这个高度信息化的社会里，建立自己学校网站是最直接的宣传手段。网站的超时空特性，不仅能让地区内的人们了解学校，更可让世界各地的人们了解学校。凭借学校网站，有效的提高学校知名度和声望，提升教学层次。 2学校网站也是实现教育资源分配的桥梁。网络有巨大的教育资源库，它集全社会的力量，使教育资源无限增长。这对于发达地区和欠发达地区，高投入学校和条件差的学校在获取教育资源的权力上达成平等，使每一位教师和学生都能均等的得到培训和受教育的机会，不再受到学校水平、教材、教师能力的限制。学校网站作为一个大的资源库既极大的提了高教学效率又实现公平教育的目的。,网站设计基础与实例教程,6,7.2 客户需求,3,3学校网站要能提供教学互动的全新方式。学校网站使得教师与教师、教师与学生、学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使广州与北京、城市与乡村的学校同处一室，共同讨论，共同共享。地理上的界限在这里模糊和消失了，学校网站是真正没有围墙的学校。 4学校网站还要能够提供个性化学习的平台，不同的学生理解世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式，各取所需。学校网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力，培植独特的个性和人格。,网站设计基础与实例教程,7,7.2 客户需求,3,长春职业技术学院校园网站属于非营利性的教育类网站。通过以上多角度分析，作为高等院校网站，它担负着宣传学校风采展示学校特色的重任，同时还要满足校内教学、科研以及完成校内校务实现网络办公的要求。,网站设计基础与实例教程,8,7.3 页面风格定位,3,1、颜色风格：营造出各种类型网站的整体气氛，包括标志，色彩，字体，标语等色彩，勾勒出网站的整体视觉效果。 2、布局风格：规划出页面的各种功能区域， 布局通常有左右、上下、居中等几个主要形式，细分还有“厂”字型、“品”字型、“田”字型等等。 3、内容结构风格：是网站的信息支撑，是控制网站风格方向的根基，是风格个性化的主导因素。 4、语言风格：要注意不同的语言字符对网站的影响亦不尽相同。如英文字符较为精简，适宜做小巧精致类型的网站，中文字符雅致繁复，较适宜做端庄严肃类型的网站。,网站设计基础与实例教程,9,7.3 页面风格定位,3,“校园网站”在设计上根据客户需求，其风格设计主要体现在以下： 确保形成统一整体和界面风格。网页上所有的图像、文字，包括背景颜色、区分线、字体、标题、注脚等形成统一的整体。 确保网页界面的清晰、简洁、美观。这会产生更大的易用性。 确保视觉元素的合理安排，让浏览者体验到视觉的秩序感、节奏感、新奇感。 具体表现在： 1、颜色风格：本网站主色调采用了蓝色和白色。页面中的文字、链接、栏目等主要以蓝色进行设计。 2、布局风格：主页和子页面中采用了上。下布局模式 3、内容结构风格：高等院校的校园网站信息量较大，信息主要由图片和文字两大要素构成。因此在主页设置的栏目相对较多、信息量较大。 4、语言风格：由于本网站是国内教育类网站，语言采用中文版。,网站设计基础与实例教程,10,7.4 网站建设方案,3,从接到客户的业务咨询开始，经过双方不断的接洽和了解，并通过基本的可行性讨论，初步达成制作协议，就需要将项目立项，一般需要给客户一个网站建设方案。通过网站建设方案制订项目的所有细节，这样对双方都有益处。,网站设计基础与实例教程,11,7.4 网站建设方案,3,网站建设方案包括以下几个部分： 客户情况分析； 网站需要实现的目的和目标； 网站形象说明； 网站的栏目板块和结构； 网站内容的安排，相互链接关系； 使用软件、硬件和技术分析说明； 开发时间进度表； 宣传推广方案； 维护方案； 制作费用； 本公司简介：成功作品，技术，人才说明等。,网站设计基础与实例教程,12,7.4 网站建设方案,3,“长春职业技术学院校园网站”在完成前期工作后，建设方案主要内容包括以下几点： （1）网站建设费用预算。 （2）确定付款方式及开发人员。 签定合同的同时先付预付金，网站设计完成并认可后，付清余款。 合理安排项目开发人员。 （3）制订开发时间表：开发周期*若干个工作日 （4）网站维护及培训。 网站维护：每年网站维护更新的标准及内容。 培训： 网站运行时的技术、美术、内容维护(免费服务)； 根据网站规模免费培训几名网站维护和日常操作人员； 网站扩展建设。 通过与用户的多次协商后，为了保证项目的质量并顺利实施，通过合同的方式把所有细节以书面的方式定义下来，明确双方的责任与权利，为项目的开发、维护、管理提供法律等方面的保证。,网站设计基础与实例教程,13,7.5 网站主页设计,3,网站主页即首页，担负着网站“形象大使”的任务，从首页就可以窥探出网站的定位和服务对象，由于网站功能定位的不同，不同类型网站首页的表现形式也各有千秋，也就是说首页功能、表达形式、传递信息内容、设计风格、页面布局等要合理清晰。 校园网站作为学校办公，师生交流，资源共享的网络平台，它的作用不仅要实现其网站的功能，还要实现友好的界面设计。,开发流程,网站设计基础与实例教程,14,7.5 网站主页设计,3,7.5.1 效果图设计,网站设计基础与实例教程,15,7.5 网站主页设计,3,7.5.1 效果图设计,1.设计要领 利用Fireworks CS3软件来完成图1-4所示页面效果图的设计主要把握下面3个要点。 （1）色彩设计：本页面为“长春职业技术学院校园网站”的主页面，在页面设计上本页面采用了蓝色和白色搭配的方式，突出学术氛围，页面的Logo采用动画效果，突出网站充满活力。 （2）图片设计：本页面以不同线条几小图案的配合展示栏目，具有清晰明了的效果。 （3）布局设计：本页面采用了典型的页面布局模式，页面布局为上中下结构，分别为LOGO站标、导航、网站栏目等内容。,网站设计基础与实例教程,16,7.5 网站主页设计,3,7.5.1 效果图设计,2. 技术要点 1）在效果图的制作过程中，主要利用矢量工具箱中的工具进行图形的绘制、组合。 2）利用变形工具，对所绘制的图形进行任意变形操作。 3）利用颜料桶工具，对对象填充颜色。,网站设计基础与实例教程,17,7.5 网站主页设计,3,7.5.1 效果图设计,3. 任务实施 对于网站来说，页面设计的吸引力是很重要的，在页面的制作上宽度多采用百分比模式，背景图是可以自由伸展的，因此重点是要做好效果图的内容区域，下面详细说明制作过程。 (1)设置网页区域宽度为775*830px。 (2)在顶部区域绘制Banner区域为775*150px。 (3)在Banner区域下边绘制导航区域为775*35px。 (4)在导航区域下面绘制一条分割区域为775*15px。 (5)在分割区域下边绘制各个栏目内容所在的区域为775*630px。,网站设计基础与实例教程,18,7.5 网站主页设计,3,7.5.1 效果图设计,网站设计基础与实例教程,19,7.5 网站主页设计,3,7.5.1 效果图设计,网站设计基础与实例教程,20,7.5 网站主页设计,3,7.5.2 主页制作,主页开发流程图,网站设计基础与实例教程,21,7.5 网站主页设计,3,7.5.2 主页制作,1.设计要领 从效果图中利用切片的 方式提取网页制作中所 需的文字或图片素材。 切片如图,7.5.2.1用Fireworks完成效果图切片,网站设计基础与实例教程,22,7.5 网站主页设计,3,7.5.2 主页制作,2.技术要点 在Fireworks中设计好的效果图，要进行切片和优化，然后在XTHML中进行布局，这是网页设计与制作的一般流程，导出效果图的步骤一般由切片、优化、导出组成。 一般背景由背景色与背景图片组成，在实际使用中一般包括三种情况。 1、网页的背景仅有背景色，这样情况下背景不需要作切片，只要在XHTML进行整合时对body标签的背景色进行设置就可以。 2、网页仅有背景图片，这样情况下要以图片的效果为出发点，当背景图较大的情况下，可以采取对于切片中的大图片分割成多个小图片的方法。如果背景图片有一定规律可寻的话，可通过CSS对小图片进行重复来完成背景图片的重组。 3、当背景图包含背景色和背景图片时，背景色不用作切片，背景图切片的规律同第二种情况。 注：切片的目的是获取图像素材，要合理进行选择。,7.5.2.1用Fireworks完成效果图切片,网站设计基础与实例教程,23,7.5 网站主页设计,3,7.5.2 主页制作,3.任务实施 （1）选择“切片”工具，如图所示。按照上图中的切片规划，在背景中绘制出切片区域。,7.5.2.1用Fireworks完成效果图切片,网站设计基础与实例教程,24,7.5 网站主页设计,3,7.5.2 主页制作,（2）从“窗口”菜单中打开“优化”面板，如图所示。可以根据需要选择合适的图片格式进行优化。,7.5.2.1用Fireworks完成效果图切片,网站设计基础与实例教程,25,7.5 网站主页设计,3,7.5.2 主页制作,（3）选择菜单“文件”|“导出”，打开“导出”窗口，设置“文件名”及“导出”选项如图所示。单击“保存”按钮，完成背景图片的切片。,7.5.2.1用Fireworks完成效果图切片,网站设计基础与实例教程,26,7.5 网站主页设计,3,7.5.2 主页制作,1.设计要领 在Banner区域主要完成动画的制作，利用动态效果， 增强网站的活力与吸引力。 2.技术要点 （1）各种Flash元件的创建。 （2）Flash各种面板的使用。 （3）常用动画效果的运用。,7.5.2.2用Flash完成动画设计,网站设计基础与实例教程,27,7.5 网站主页设计,3,7.5.2 主页制作,3.任务实施 （1）创建影片文档 执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文件（Action Script 3.0）】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为775*150象素，【背景色】为白色。,7.5.2.2用Flash完成动画设计,网站设计基础与实例教程,28,7.5 网站主页设计,3,7.5.2 主页制作,（2）设置背景图层动画效果 将“图层1”重命名为“背景图层”。执行【文件】|【导入】|【导入到舞台】命令，将“模糊背景.jpg”导入到舞台中。用鼠标选中该图片，将属性面板中的宽和高设置成与舞台宽和高相同，即宽775像素，高150像素。调整图片位置让其边缘与舞台边缘重合。,7.5.2.2用Flash完成动画设计,网站设计基础与实例教程,29,7.5 网站主页设计,3,7.5.2 主页制作,选中该图片，按F8键，将该图片转换为图形元件并命名为“模糊背景”如图所示。,7.5.2.2用Flash完成动画设计,网站设计基础与实例教程,30,7.5 网站主页设计,3,7.5.2 主页