《多媒体技术基础》网络开放课网站建设.doc

河北农业大学 本科毕业论文(设计)题 目：多媒体技术基础网络开放课网站建设摘要在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。网页设计作为用户界面交互设计的延伸，是在新的媒体和新的技术支持下实现一个全新的设计创作领域。设计创作网页应遵循其特有的特点和结构思路，具备实际可行性和外观的时尚。本论文讲述了网站建设的一般步骤，并结合丰富的色彩应用与网页设计理论，以多媒体技术基础网络开放课作为网站建设的主要内容，介绍了网站的建设的流程、步骤、以及一些设计中的要素和技巧，例如框架、CSS样式的使用、javascript技术的应用等等。采用Dreamweaver、Photoshop、flash等作为主要制作工具。网站的内容包括以下几个主要组成部分：教学大纲、授课计划、课程教案、电子课件、实验指导、课程试卷等模块。本文从该网站的最初采集到后期开发的整个过程加以整理、编辑成文，同时采用图文并茂的形式，不仅增加了文章的可读性，同时又可以较为直观的把网站呈现在人们眼前。关键字：网页设计框架CSS网站建设 色彩AbstractWith the rapid development of information technology today, the way people access to information is more from the internet.To attract the user is excellent visual effects, abundant information, use convenient Webpage, so Webpage design is particularly important.Webpage design as an extension of interaction design of user interface, is the realization of a new design in the field of new media and new technologies.Design Webpage should follow its unique characteristics and structure of thought, have the practical feasibility and the appearance of fashion.This paper describes the general steps of website construction, combined with the application of color design theory and Webpage rich,to open class network based multimedia technology as the main content of the website construction,the website construction process, steps, and some design elements and skills, such as frame, CSS style, use JavaScript technology application.Using Dreamweaver, Photoshop, flash as the main tool.The content of the website includes mainly the following parts: the teaching outline, teaching plan, teaching plan, electronic courseware, experimental guidance, curriculum test module.This article from the site of the original acquisition to the whole process of late development of tidying up, editing written, using pictures, not only increases the readability of the article, at the same time can be more intuitive to the site, showing in peoples eyes.Keywords：Webpage design Layout css website construction Color目录第一章 绪论11.1 概要11.2网页制作的重要性及现状1第二章 网页需求分析12.1 可行性分析12.1.1网站主题的可行性12.1.2 网站页面设计的可行性22.2 网站需求分析22.2.1建站目的22.2.2技术需求2第三章 网站建设的流程2第四章 网页制作34.1 制作步骤34.2 制作网页的要素44.2.1 网页的整体布局设计44.2.2网页设计中色彩的运用54.2.3网页形式与内容相统一54.3 细节的把握54.3.1颜色。64.3.2线条的运用。64.3.3图标。64.3.4文字。64.4 常用工具介绍6第五章 多媒体技术基础网络开放课网页制作实例75.1 网站制作过程75.2 网页层次结构75.3 网站页面的相关展示及代码8结论16参考文献17致谢17第一章 绪论1.1 概要随着Internet的诞生和发展，许多人不再仅仅局限于网上冲浪，而是参与到网站建设中。企业建站相当于在网上建立一个家，你就可以在这里向客户介绍你的企业，展示你的实力，推销你的产品，网页制作作为网站制作中一个重要的环节，相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。结合本人的实习过程，现就网站建设与管理过程中，网页设计与制作的具体经历，包括：网页设计与制作过程中的网页布局、色彩构置，框架结构等相关事项做以下论述。所谓网站(Website)，就是指在网际网路（因特网）上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。1.2网页制作的重要性及现状如今的互联网已经渗透到我们生活的各个层面。网站内容既丰富又全面，满足了各种不同需求的浏览者，正当网络作为第四媒体，逐渐走向成熟和完善的时候，网页设计业也逐步脱离了传统广告设计的范畴，形成特殊而独立的体系。同时这一现象也表明了，我们对网页设计的视觉审美以及网站功能应用等多个方面的认知达到了新的高度。网页不光是把各种信息放上去，能看就行是远远不够的。要考虑受众如何能更多的和更有效率的接收网页上的信息，并且给他们留下良好的印象，促进网站的运营。这就要求综合考虑，设计出美观合理的页面。迄今为止，我国对网页设计这一课题的系统研究还略显薄弱，特别是在艺术设计领域对网页设计的探讨尤显不足，至今未能提出系统的设计理论，与指导原则。对网页设计进行系统性的研究，将视觉传达设计的基本原则创造性的应用于网页设计之中确实是当务之急，也是促进我国网络业及网络文化发展的重要环节。第二章 网页需求分析2.1 可行性分析2.1.1网站主题的可行性一般来说一个网站内容主题的选择，要做到小而精，主题定位要小，内容要精。本网站主要就是针对多媒体技术基础课程的，包括教学大纲、授课计划、课程教案、电子课件、实验指导、课程试卷六个模块，内容清晰，有条理。并没有保罗万象，这往往会失去网站的特色，也会带来高强度的劳动，给网站的及时更新带来困难。2.1.2 网站页面设计的可行性由于越来越多的人开始建立自己网站，网站除了具有传播信息的功能，还往往代表个人形象。虽然HTML语言提供了对常用windows标准控件的支持，但是由于Windows标准控件的性状和颜色十分单一，网页的视觉效果可能会很差。因此，本网站并没有单纯的采用HTML来制作网页，而是采用div+css的方式来创建表格布局，并且在其中加入JavaScript等动态效果，使页面看起来更有动感。2.2 网站需求分析2.2.1建站目的Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成了一个整体。作为Internet上一种先进的，易于被人们接受的信息检索手段，Word Wide Web（建成www）发展十分迅速，成为目前世界上最大的信息资源宝库。通过建立一个课程共享网站，可以迅速融入到互联网中，和世界各地连成一个整体。拥有了这种传播媒介，人们就可以轻松在网上找到多媒体课程的相关资料。2.2.2技术需求网页的版面设计需要Dreamweaver来实现。需要精通Html、Div+CSS等网络编程语言。网站LOGO，需要用PS来设计。需要有一定的审美能力、设计能力，使网站的主题突出鲜明。动态页面设计需要有JavaScript等技术。发布站点需要对互联网技术有一定的了解，并熟悉发布流程。第三章 网站建设的流程1 定义合适的域名。由域名构成的网址会像商标一样，有助于将来塑造网上的形象。域名除了要符合公司的性质以及信息内容的特征外，还要具有简洁、易记、具有冲击力的特点。2 租用虚拟服务器。有了域名后，就需要一个空间存放网站，这个空间就是Internet上的服务器。一般虚拟主机提供商都能向用户提供大容量、高速度的服务器，用户可根据网站的内容设置及其发展前景来选择。3 设计网页。网页的设计制作可以自己完成，也可以通过虚拟主机提供商或专业的网页设计制作商来完成。设计网页前要收集所有需要放在网站上的文本资料、图片等，并尽量用文字详细说明制作的框架结构，将收集的材料提供给网页设计者。4 ICP备案。网站备案的目的就是为了防止在网上从事非法的网站经营活动，打击不良互联网信息的传播，如果网站不备案的话，很有可能被查处以后关停。ICP备案可以自主通过官方备案网站在线备案或者通过当地电信部门两种方式来进行备案。第四章 网页制作4.1 制作步骤1. 确定网站主题：网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。2. 搜集材料：明确了网站的主题以后，你就要围绕主题开始搜集材料了。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。3. 规划网站：一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。4. 选择合适的制作工具：尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。5. 制作网页：材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。4.2 制作网页的要素4.2.1 网页的整体布局设计网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。版式设计通过文字图形的空间组合，表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。常见网页版式布局结构有以下几种：两栏式结构，即页面顶部为网站标志或广告条，下面分为左右两栏，一般左栏式导航或分类信息，右栏为主要内容，这种布局很容易掌握，但如果在色彩上不加以注意的，很容易给人一种“乏味”的感觉。三栏式结构是一些大型网站常用的布局结构，一般为上面是横幅的广告条，下面分为三竖栏，中间较大，是主要的信息，左右是小条内容或者广告条。三栏式给人一种充实的感觉，但页面拥挤，不够灵活，是网站常用的一种布局形式。“三”型结构，这种结构多用于国外网站或者视频类网站，其特点是分类清晰，展示方便。左右框架型，是企业网站或论坛常用的布局，页面分为左右两部分，左边一般为导航部分，右边是与导航相对应的内容。左右框架型的结果非常清晰，内容一目了然，便于信息的查询。上下框架型与左右框架型类似，其区别仅仅在于形式。页面整体为横向分布，上面为导航，中间的大展式窗口很突出，整个网站显得简洁明亮，这种结构适合于信息量不大，主要靠图片展示内容的网站。Flash型主要采用现在流行的Flash技术，页面表达的内容较为丰富，给人视觉和听觉上很大的冲击，处理得当会达到Web页面难以达到的效果。网站是网页的集合，一个站点用的所有网页构成一个网站，网页是网站的表现形式，网页设计是指对网站整体页面的设计，包括页面风格、配色、布局、内容等。网页设计包含的内容非常多，大体分为两个方面：一方面是纯网站本身的设计，如文字、排版、图片制作、平面设计、静态图文和动态声音、影像等；另一方面是网站的延伸设计，包括网站主题、浏览群的定位、智能交互、制作策划、形象包装和宣传营销等。设计页面的第一步就是设计片面布局，就像报刊杂志版面设计一样，我们可以看作一张报约或者一份杂志来进行排版布局。（1）草稿新页面就像一张白纸，没有任何的约定俗成的东西，可以尽可能地发挥想象力、创造力，将想象的布局到上面去。这是原创阶段，你不必讲究细腻工整，你也可在草稿本上先画出整个布局框架，把多个版块的位置先粗略的布置上去以往下一步工作的展示，这一步也可以借住PHOTOSHOP或其他工具软件来完成。（2）粗略布局在草稿的基础上，将需要的功能模块放到页面上去，这时要遵循突出重点、整体协调的原则，首先将网站标志、导航条、广告条等最主要的模块放在最突出位置，然后考虑其他模块的布局。（3）定稿定稿即将粗略布局精细化、具体化，完成整个页面的设计。页面的制作，首先在根据客户的要求下，完成首页的制作，在经客户确定后，再制作其他的页面，制作完成后，交给客户验收，然后发给客户确定，待所有的页面的都经客户确定后，完成网页的制作进程，交给程序员添加程序。4.2.2网页设计中色彩的运用色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，一般暖色较冷色的记忆性更强一些。色彩还具有联想与象征的特质，如红色象征血、太阳；蓝色象征大海、天空和水面等。所以如果我们在对一家出售冷食的商店进行虚拟店面的页面设计时，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些，增强人们的购买心理，使得在线营销得到很好的实践效果。另要注意的是网页的颜色应用虽没有限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出一至二种主色调，在已经有了完备的CIS（企业形象识别系统）的企业进行网页设计时，更应该按照其中的VI进行色彩运用。在色彩的运用过程中，还应注意的一个问题是：由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。如：儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。在设计中要考虑众多因素。4.2.3网页形式与内容相统一要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素，要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。4.3 细节的把握网站的品位，除了页面本身整体的视觉效果外，往往更突出在一些细节上，只有把握住细节，才能更好地提高浏览者的使用友好度，给浏览者留下深刻的印象。4.3.1颜色。在初学网页设计的时候，在用色方面要非常注意，如果对网页用色没有太大的把握，那么就先选择好网页的基本色调，然后针对这一种颜色去进行变化，如需加其他颜色，可以试着加些灰色，因为灰色是中色调，不会对页面颜色造成太大的冲突。这样做出的网页整体颜色会非常协调统一。4.3.2线条的运用。很多朋友在制作网页的时候，在两块过渡的地方，如banner和导航条之间会用一条细线区分开，此时往往会画上一条直直的线，这样给人感觉会很突兀4.3.3图标。网站中在各个标题的前面适当的加些图标点缀网页，可以使网页效果更加出彩，但是切忌网页图标使用过多，图标的色调也要一致，避免杂乱。4.3.4文字。网站中文字的运用，用户在浏览网页时，主要是要看网页当中的文字内容，所以要特别注意文字的处理。一是文字的颜色不要和背景颜色相近，这样用户在浏览文字信息时会非常的吃力；二是不要乱用字体，你使用的字体在本机上可以显示，但是到了别人的电脑上就不一定能显示出来了；三是注意文字之间的行距，通常我们不对文字进行行距的设置时，文字间的行距会非常小；影响页面的美观度，注意文字间的行距，使其不会显得特别挤，做到宽松有序。4.4 常用工具介绍Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。FlashPaper 是Macromedia推出的一款电子文档类工具，通过使用本程序，你可以将需要的文档通过简单的设置转换为SWF格式的Flash文件，原文档的排版样式和字体显示不会受到影响，这样做的好处是不论对方的平台和语言版本是什么，都可以自由的观看你所制作的电子文档动画，并可以进行自由的放大，缩小和打印，翻页等操作，对文档的传播非常有好处，而且由于Flash文件的在各大浏览器中的普及性和强大的可调节性。Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。Flash是美国Macromedia公司所设计的一种二维矢量动画软件（现Adobe公司产品），用于设计和编辑Flash文档，最新版本为：AdobeFlashCS5。Flash通常也指MacromediaFlashPlayer（现AdobeFlashPlayer），用于播放Flash文档Fireworks是网页开发图形处理工具，可以做出矢量的图形，主要是和Dreamweaver配合做网页。对处理一般的网页图片比较实用，而且学起来也比Photoshop易上手，是一个入门级的网页设计软件。第五章 多媒体技术基础网络开放课网页制作实例5.1 网站制作过程1 分析网站建设的类型，并参考相关类型的网站，结合自己的实际经验画出大概的框架图，并标明其用途和要实现的功能。本网站为左右型，左边为导航栏，右侧为主要内容。2利用PS来进行具体的设计，利用辅助线画出框架图，不同模块之间要画两条辅助线，并留一定的距离，便于对网页的控制，接下来便可以制作网站的logo、广告条、导航条等主要内容，然后依次完成其他模块的制作。3对色彩、文字的排版、导航条、底部内容进行细化，使网站达到一定的品质感，完成首页的全部制作。4.首页确定以后，便开始内页的制作，内页的制作相对简单，保持首页的整体风格不变，对相应的版块就行修改即可，相同模块的内容只需要制作一个即可，内页制作完成后，完成整个网页的设计。5.2 网页层次结构多媒体技术基础网络开放课首页教学大纲授课计划课程教案课程试卷电子课件实验指导图 5.1 页面的层次结构5.3 网站页面的相关展示及代码（1）主页部分：本网页主要由HTML静态页面组成，由div标签布局的方式图 5.2 网站首页（1）图 5.2 网站首页（2）图 5.2 网站首页（1）代码：#body position: relative; width: 980px; margin: 0 auto; text-align: left; clear: both;.copyrightstext-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;/*_*/.entry position: relative;.align_center img, .entry_image img, .grid .entry_content p,.more_news .image img, .style_box .box_header,.caption img, .comments img, .tabNavigation margin: 0 !important;.grid ul list-style: none; padding: 0 !important; margin: 0 !important;.socials width: 35px; position: absolute; right: -44px; top: 8px; padding-bottom: 10px;.socials a display: inline-block;.b_circle width: 35px; height: 35px; border-radius: 50% 50% 50% 50%; -moz-border-radius: 50% 50% 50% 50%; -webkit-border-radius: 50% 50% 50% 50%; background-color: #7f7b79;.b_circle:hover background-color: #413f3d;#top_link text-indent: -9999px; cursor: pointer; display: none; position: fixed; z-index: 99; left: 50%; top: 90%; margin-left: 500px; background-image: url(./images/i_arrow_top.png); background-repeat: no-repeat; background-position: 50% 45%;.b_twitter background-image: url(./images/i_facebook.png); background-repeat: no-repeat; background-position: 49% 48%; .b_facebook background-image: url(./images/i_twitter.png); background-repeat: no-repeat; background-position: 50% 50%;.b_rss background-image: url(./images/i_rss.png); background-repeat: no-repeat; background-position: 50% 47%;/*_ # BODY - #leftside*/#left_side position: relative; float: left; padding: 3px 3px 5px; border: 1px solid #ebe9dd; background-color: #e2e0d4;.left_side position: relative; z-index: 3; border: 1px solid #d8d4c8; border-bottom: none; background: #f3f2ee url(./images/left_bg_r.gif) repeat-y center top;.left_content width: 300px; padding: 0 0 20px; border-top: 1px solid #fff; border-bottom: 1px solid #fff;.left_content p padding: 20px 20px 0; font-size: 11px; color: #a8a8a8; background: url(./images/h_line.gif) repeat-x center top;.logo margin: 40px 75px; display: block;.dots display: block; margin: 0 20px 40px; height: 5px; background: url(./images/dots.png) no-repeat center top;（2）教学大纲模块：图 5.3 教学大纲页面代码： （3）电子课件模块：图 5.4 电子课件页面代码： 第1章绪论与基础知识 第2章数字音频处理技术 第3章数字图像技术 第4章数据压缩技术 第5章动画技术 第6章多媒体的存储 第7章网络环境下的多媒体第8章多媒体设备简介 图 5.5 电子课件代码：  下载：第一章 （4）课程试卷模块：图 5.6 课程试卷页面（5）视频教程：图 5.7 视频教程页面（6）给页面更换皮肤： function( $el, $slices, $navNext, $navPrev, settings ) return $.Deferred(function( dfd ) varexpanded= $el.data(expanded),pos= $el.data(position),itemHeight, othersHeight,$others= $slices.not( $el );/ if its opened.if( expanded ) $el.data( expanded, false );cache.idx_expanded= -1;/ the default values of each slicess heightitemHeight= cache.sliceH;othersHeight= cache.sliceH;/ hide the content div$el.find(.va-content).hide();/ control the navigation buttons visibilityif( aux.canSlideUp( $slices, settings ) )$navPrev.fadeIn();else$navPrev.fadeOut();if( aux.canSlideDown( $slices, settings ) )$navNext.fadeIn();else$navNext.fadeOut();/ if its closed.else $el.data( expanded, true );cache.idx_expanded= $el.index();$others.data( expanded, false );/ the current slices heightitemHeight= settings.expandedHeight;/ the height the other slices will haveothersHeight= Math.ceil( ( settings.accordionH - settings.expandedHeight ) / ( settings.visibleSlices - 1 ) );/ control the navigation buttons visibilityif( cache.idx_expanded 0 )$navPrev.fadeIn();else$navPrev.fadeOut();if( cache.idx_expanded cache.totalSlices - 1 )$navNext.fadeIn();else$navNext.fadeOut();$(function() if($.cookie(color) var c_color = $.cookie(color); $(body).addClass( c_color ); if($.cookie(color) var c_background = $.cookie(background); $(body).css(background-image,url(images/style_menu/patterns/ + c_background + ) ); if($.cookie(position)