某职业技术学院校园网站(ppt 43页).ppt

网站设计基础和实例教程，第1，7章教育网络站长春职业技术大学校园网站，网站设计基础和实例教程，2，7.1 web效果图，第3章，此效果图是FireworksCS3设计和制作。主页效果图、网站设计基础和实例教程、3，7 . 1 web效果图、3，此效果是FireworksCS3设计和创作。子页效果图，网站设计基础和案例教程，4，7.2客户要求，3，互联网快速发展的今天，互联网成为人们快速访问、发布和传递信息的重要渠道，在人们的政治、经济、生活等各个方面发挥着重要作用。因此，网站建设在网络应用领域所占的位置成为政府、企业及企业信息建设的重要组成部分，受到关注。网站设计基础和示例教程，5，7.2客户要求，3，构建学校网站是否需要实施这些要求？1.学校网站是学校的“商标”，每个学校都有自己的特点，每个学校都有自己的性格。在这个信息化很多的社会里，建立自己的学校网站是最直接的宣传手段。这个网站的时空特性不仅使区域内的人了解学校，还使全世界的人了解学校。通过学校网站，有效提高学校的知名度和声望，提高教学水平。学校网站也是教育资源配置的桥梁。互联网拥有聚集全社会力量无限增长教育资源的巨大教育资源。这使发达国家和不发达地区的学校或条件不好的学校平等获得教育资源的权利，使每位教师和学生平均接受教育和教育的机会不受学校水平、教材和教师能力的限制。学校网站提出了高教育效率和公平教育的目的作为一大资源。站点设计基础和案例教程，6，7.2客户要求，3，3。学校网站必须以新的方式提供教育互动。学校网站使教师和教师、教师和学生、学生和学生之间的交流以全新的方式进行，不再受到传统教室的限制。这是广州市，城乡学校之类的房间，可以一起讨论共享。地理界限在这里模糊消失，学校网站真是没有围墙的学校。4.学校网站也可以提供个人学习的平台，不同的学生理解世界的方式不同，认知世界有多种方式。通过网络提供的丰富资源，学生们可以找到各种教育方法，获得各自需要的东西。通过学校网站，各种学生可以按照自己的路径，以自己的速度接受教育和学习，学生有机会享受最好的教育机会，充分发掘自己独特的潜力和人格。网站设计基础和案例教程，7，7.2客户要求，3，长春职业技术大学校园网站是非营利教育网络站。通过以上多方面的分析，作为大学网站，既要肩负宣传学校风韵、展示学校特性的重任，又要完成校内教学、科研、校内教务工作，满足实现网络事务的要求。创建网站设计基础和示例教程，8，7.3页面样式定位，3，1，颜色样式：标识、颜色、字体、标语等不同类型网站的整体氛围，说明网站的整体视觉效果。2、布局样式：页面的各种功能区域、布局一般包括左右、上下、中心等几种主要形式，分为“工厂”字体、“产品”字体、“字段”字体等。3、内容结构样式：站点的信息支持，是控制站点样式方向的基础，也是样式个性化的主导因素。4、语言风格：请记住，不同的语言文字对站点的影响不同。英文文字缩小的情况下，适合小型干练类型的网站、优雅的中文文字、端庄严肃类型的网站。，网站设计基础和示例教程，9，7.3页风格定位，3，“校园网站”根据客户需求设计，风格设计主要包括：确保集成整体和界面风格的形成。网页上的所有图像和文本(包括背景色、分隔线、字体、标题、脚注等)构成了一个统一的整体。确保web界面清晰、简洁、美观。这将提高易用性。确保视觉要素的逻辑布局，使浏览器体验视觉的秩序、节奏感和新颖性。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。设计要领使用FireworksCS3软件完成图1-4中所示页面效果图的设计，主要掌握以下三个要点：(1)色彩设计：这是“长春职业技术学院校园网站”的主页，页面设计中以蓝白相间的方式烘托学术氛围，页面上的徽标应用动画效果，突出网站的生气。(2)图形设计：此页面显示具有多行小图案的列，从而产生明确的效果。(3)布局设计：此页面使用常规页面布局模式。页面布局包括顶部和底部结构、徽标、导航和网站列。网站设计基础和示例教程，16，7.5网站主页设计，3，7.5.1效果图设计，2。技术要点1)在图像制作过程中，主要使用矢量工具箱中的工具绘制、组合图形。2)使用变形工具随机变形绘制的形状。3)使用颜料桶工具为对象上色。站点设计基础和示例教程，17，7.5网站主页设计，3，7.5.1效果图设计，3。任务实现对网页设计在网站上的魅力至关重要。制作页面时，在宽度上采用更多的百分比图案，背景映射可以自由扩展，因此，重点是创建效果图的内容区域，详细说明下一个制作过程。(1)将web区域的宽度设置为775*830px。(2)在顶部区域中，将横幅区域绘制为775*150px。(3)在横幅区域下方以775*35px绘制导航区域。(4)在导航区域下方以775*15px绘制切片。(5)切片下绘制每列内容的区域为775*630px。网站设计基础和实例教程，18，7.5网站主页设计，3，7.5.1效果图设计，网站设计基础和实例教程，19，7.5.1效果图设计，网站设计基础和实例教程，20，7.5网站主页设计，3，7.5.2主页制作，3设计要领从效果图提取网页到切片使用slice图7.5.2.1 Fireworks完成映射切片，网站设计基础和实例教程，22，7.5网站主页设计，3，7.5.2主页制作，2 .技术要点Fireworks中设计良好的效果映射、切片和优化后，效果映射导出阶段(XTHML中布局、网页设计和创作的典型过程)通常由切片、优化和导出组成。一般背景由背景颜色和背景图组成，实际使用通常包括三种情况。1、网页的背景只有背景颜色，因此集成XHTML时，无需通过设置body标签的背景颜色来切片背景。2、web上只有背景图片，因此，以图片的效果为起点，如果背景图片很大，可以采用将分割区的大图片分割成多个小图片的方法。如果可以定期找到背景图片，则可以通过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文件”(ActionScript3.0)，然后单击“确定”按钮创建新的影片文档，然后单击“属性”，使用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主页，在该图层的第6帧，24帧中按F6键并订阅关键帧，在该图层的第90帧中按F5键插入常规帧，然后选择第5帧，右键单击并命名插入空白关键帧，以指定时间轴单击图层的第6帧以将其选中，将“属性”面板中的“动画”设置为“补间”，单击第6帧中的图形元件，然后在“属性”面板中，将该元件属性中“颜色”的alpha值设置为0%。使用7.5.2.2 Flash完成动画设计，网站设计基础和实例教程，31，7.5网站主页设计，制作3，7.5.2主页，(3)设置遮罩动画效果单击“背景图层”名称，然后单击插入图层按钮以插入位于“背景图层”上方的图层。将图层命名为文字。在图层的第24帧中，按F6添加关键帧，在该图层的第150帧中，按F5插入常规帧，选择图层24，单击工具栏中的文本工具，在“属性”面板中，将“文本类型”设置为静态文本，将“字体”设置为中文新上方，将“字体大小”设置为40，将“颜色”设置为黑色，使用7.5.2.2 Flash完成动画设计、网站设计基本和实例教程、32，7.5网站主页设计、创建3，7.5.2主页、单击“文字”图层名称，然后单击插入图层按钮以插入“文字”图层上方的图层。将图层命名为蒙版图层。在图层的第24帧中，按F6键，添加关键帧，然后在工具栏中选择椭圆工具，并在舞台上绘制圆的宽度和高度为80的实心圆。选择椭圆并将其转换为图形元件。然后，在该图层的第34、35、39、48和90帧上按F6键以添加关键帧。调整每个帧的位置和大小关系。使用7.5.2.2 Flash完成动画设计，网站设计基本和实例教程，33，7.5网站主页设计，创建3，7.5.2主页，在帧90中将圆形宽度设置为1076，高度设置为200，然后复盖文本和图片。分别选择该图层的第24、35、39和48帧，然后在“属性”面板中将“动画”设置为“补间”。将图层设置为蒙版图层。最终时间线如图所示。(5)动画完成后，请将其用于网页参考。生成sw