随着网络技术的飞速发展，电子产品的不断更新换代，智能手机的不断普及，互联网应用达到了空前的繁荣。在互联网中，各种不同行业、不同种类、页面精彩吸人眼球的网站页面带给人们强大的视觉冲击力的同时也给人们的生活添加了色彩。在这些精彩页面诞生的最初，就是设计者根据用户需求应用Photoshop来不断完善并完成页面效果图的过程，下面就来阐述一下基于Photoshop的网页页面的设计方法与流程。

　　设计者与客户签订合同之前，都要看设计者的网站页面效果图是否能达到客户的预期要求，那么怎样能设计出让客户满意的效果图，关键在于正确与全面的了解客户的需求。精确掌握客户需求应该从以下两方面着手：

　　1.1 确定网站类型。常见的网站分类分为如下几类：（1）综合性网站：以新浪为例，他的首页包括丰富的新闻、资讯、娱乐、体育等信息，包罗万象，种类非常丰富；（2）电子商务类网站：俗称购物网站，比如淘宝、聚美优品这一类网站都可以称为电子商务类网站；（3）娱乐资讯网站：在互联网上看电影、听音乐已经成为人们日常生活的一部分，土豆网、腾讯视频等都属于这类网站；（4）社交类网站：随着互联网时代的到来，人们的交流方式产生很大变化，网络交流平台给人们沟通学习带来了巨大的便利，微博、豆瓣、人人网等都是这类交互式的网站。

　　1.2 网站的CI设计需求分析。CI（Corporate Image）是指企业的形象，在网页设计中，色彩的选择和搭配结合Logo和Banner的设计，能够最有效的传达企业形象。（1）Logo设计：Logo即标志，是商标的一种体现，可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等，一个好的Logo能体现出网站的特色和内涵[1]；（2）网页的标准色彩：“标准色彩”是网站形象和内涵的延伸，一个网页的标准色彩不宜超过三种，太少则太单调，太多则让人眼花缭乱。一般来说，适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色[2]；（3）网页的标准字体：根据网站的内涵，选择适合的字体，一般网页的默认字体为宋体；（4）Banner设计：可以作为网页中的横幅广告，也是体现网站中心意旨、情感思想的宣传中心。

　　通过标志、色彩、字体、标语协调统一的设计，可以很好的树立网站的CI形象。

　　一般企业网站都包括六部分：logo、导航、banner、内容、友情链接、版权。根据不同网站的需求定位，这六个部分在体现形式上有着不同的延伸和变化，但不管是大型综合性网站还是小至个人博客网站，我们都会找到这六部分的身影。由这六部分组成的网页页面基本结构图如图1所示：

　　3.1 Logo制作。Logo不仅仅是将某些颜色与线条的堆叠，它要比品牌的名称更具标识度。在设计过程中，要思考、艺术分析和系统规划。一个优秀的Logo作品，应该具备简单、动态、灵活、独特、有意义这五个特点，同时应注意颜色的重要性、不要标新立异Logo不是艺术品、不要低估定制字体、不要可预测的效果、不要落入俗套。

　　3.2 Banner制作。一个优秀的Banner作品的主题要明确、重点文字要突出、文字要符合阅读习惯、要在最短的时间激起点击的欲望、色彩不要过于醒目、产品数量不宜过多、信息数量要平衡、留空给图形文字以呼吸的空间。

　　3.3 导航栏制作。导航栏是继Logo之后用户第一个看到的组件，如何让导航栏更加优雅美丽，在设计过程中应主意两大要点。第一，不要使用一些繁杂的装饰来做突出，通过字体设计、悬停效果设计、页面留白可以设计出简约、优雅的极简主义导航栏[3]。第二，响应式导航设计更完美，根据用户终端设备的不同，按照屏幕尺寸来合理缩放页面，达到更好的阅读效果。

　　3.4 网页背景制作。网页背景设计目前还没有一套设计准则可遵循，根据总结，我们把网页背景大致分为六种类型：颜色背景、沙文背景、条状背景、照片背景、复合背景、局部背景。一般情况下，考虑到网站的和网页内容的显示效果，我们并不提倡使用图像作为网页背景。

　　4.1 主页页面应干净整洁、条理清晰、专业水准、引人入胜。过多的绚丽、闪烁、下拉式菜单、图片等会让用户产生无所适从、心烦意乱的感觉，导致快速关闭页面。

　　4.2 导航设计要便捷、美观、全面。导航就如同网站的地图，导航的设计原则要遵循用户的阅读逻辑，同样也要兼顾网站的重点，设计好的导航条不能随意改动，否则用户就会迷路，找不到原来浏览的内容，给用户带来困惑。

　　4.3 提高页面。网页的是网站留住访问者的关键因素，图片是影响网页的重要原因，根据经验，把每页全部内容控制在30K左右可以保证比较理想的下载时间，图象在6-8K之间为宜，每增加2K会延长1秒钟的下载时间。制作好效果图之后，执行Photoshop软件里“将文件存储为web和设备所用格式”命令，对页面进行优化，控制最终文件所占的存储空间。

　　[1]朱彩华.Photoshop在网页版式设计中的应用与技巧[J].电子技术与软件工程，2013（11）.

　　[2]丁士锋.网页制作与网站建设实战大全[M].北京：清华大学出版社，2013.

　　网页设计作为高校设计学专业的专业课程，在教学课程知识体系的不断探索和完善中，形成了以艺术和技术分别主导的侧重不同而又紧密关联的两种课程知识体系。随着网页设计理论与方法研究的不断深入和发展，人们对网页的产品设计的属性认知越来越明确，对网页设计的工作分工更细致也更专业，这种认知进步也应该体现于当前的高校网页设计课程的知识构建体系中。

　　早期，高校网页类课程的知识体系构建得益于院校的科研优势，互联网的发展直接促成了计算机专业的开设和网页设计课程的设立。20世纪90年代末，网页设计课程陆陆续续被列入部分高校设计类专业课程目录。面向高校学生的网页设计课程内容是一种全新的事物，即使面向艺术类专业，也由计算机专业相关教师承担教学任务。各高校、科研院所对网页制作方法不断探索，并将成果于各种学术研究出版物，教学方面则直接引用案例教学，教学内容以HTML知识为主。由于面向对象的设计思想在软件开发中普及，各种不需要用户直接面对代码的网页制作工具相继诞生，于是，这方面的知识成为课堂的新内容，大大减轻了学生的记忆负担。2.网页制作向网页美工的转变网站制作的快速发展、网页制作技术的传播，使网站在技术层面进入了同质化阶段，市场需求开始转向页面视觉效果方面的提升。在网页设计课程中，由于对网页设计分工认知不足，早期的网页设计课程时常将设计和制作的名称与授课内容混用，没有严格区分，也没有明确的网页前端设计与视觉设计分工。高校网页设计课程的授课内容以网页制作技术为主，以美化页面效果为辅。此时，高校对于网页设计课程的视觉设计方面的专业教学研究处于摸索阶段。之后，随着时代的发展，网页设计课程教学核心开始转变为制作具有更佳视觉效果的网页。3.网页视觉设计与网页前端设计的内容分离侧重于设计的网页设计课程知识体系重构从探索、发展到成熟，经历了较长的准备阶段。随着界面设计方法和流程理论体系的日益完善，分工协作机制日趋成熟，前端设计分离后，网页设计课程的重心确定为符合网页制作技术规范和条件的页面创意表达、视觉效果设计与优化。网页视觉设计的探索从传统的平面设计方法寻找切入点，通过对网页设计中的审美需求和各种视觉构成要素（如文字、图片、颜色等）进行分析，结合人们在浏览信息时的视觉习惯，探索网页视觉信息如何被更有效、更合理地表达。网页设计教学重心内容在转移到视觉设计之后，该阶段还未意识到网页交互设计的核心地位。

　　网页设计的本质是用户的体验设计。网站作为互联网非可触形态的产品，对其认知的构建包含产品属性认知与服务属性认知两个层面的内容。1.网页设计是一种产品设计设计是一门交叉学科，网页本身也是一种产品。网页设计最初被视作平面领域的设计，而链接交互是网页设计有别于平面设计的基本特征。网页设计存在交互性，使其具有交互设计可用性与易用性体验的内在要求，适用于工业产品的基本设计流程。2.网页设计是一种服务设计服务设计层面，各种网页交互体验、视听信息、线上内容服务与线下互动等，是网站向用户提供服务的设计组成部分。作为一种广义的产品形态，网页设计与传统的实物形态的工业产品设计有一定区别，更倾向于体验的系统化设计。随着互联网向物联网的可用技术研究与拓展，基于智能化网络的服务设计将成为跨越线上线.网页页面信息设计是关系网页设计品质的深度设计网页设计作为一种信息量庞大的互联网单元，从工效学角度来看，网站信息本身也担负着面对用户、有效传递信息的功能和任务，在具体的设计活动中，表现为对信息的设计。信息设计具有多学科交叉性、空间多维性、时间流动性等基本特征，信息设计的目的是为了提高信息的可理解度和可阅读性。优质的网页信息设计可以降低用户获取信息的时间和精力成本，提升页面信息获取体验。

　　网页设计的本质是对体验的设计，即以用户为核心思考设计方案，研究用户在访问网站时的需求是网页课程设计任务的基本出发点。课程内容模块应该以回答网页设计是什么、怎么设计、为什么这样设计三个问题为主线，构建网页设计课程的知识体系。1.课程的基本目标掌握网站项目与网页制作的基本设计流程，培养设计项目管理和组织能力；掌握用户需求研究分析的基本方法，对用户体验和需求研究有较为敏锐的洞察力；掌握网站交互原型相关的设计方法与工具；掌握网页视觉设计方法和设计规范；了解目前网页前端设计的相关技术和工具。2.知识体系与模块组成（1）设计方法教学内容模块设计方法教学内容模块主要为了解决面对具体问题时设计师怎样展开分析研究工作并确定设计执行方案。网页设计方法主要分为项目流程设计与管理、网站策划方法与规范、用户体验研究、交互原型设计方法等，让学生通过贯穿整个课堂教学的项目流程设计和每个流程的具体设计方法的实践，掌握基本的设计理论。（2）软件工具教学内容模块软件工具教学内容在形式方面包括课堂内的指导和课堂外的自学两个部分。鉴于设计软件的频繁更新和新的设计软件不断涌现，教师必须培养学生自学工具的主动意识以适应社会需求。在工具种类方面，包括图形处理工具、交互原型工具和代码工具三类。第一类是图形处理工具，其中常见的Photoshop、Illustrator等图形设计软件，已经在前置课程中基本完成学习。第二类是交互原型制作工具，常见的工具有墨刀、Axure等。第三类是代码编辑工具，选择较多，作为对网页前端知识的入门介绍部分，在本课程中以介绍为主。（3）设计经验教学内容模块设计经验教学以启发式案例实践为主，按照网站项目设计的流程需要，设定不同层次、不同要求的设计实践任务作为课程结课的考核内容。学生通过案例的练习能从优秀作品中学到设计经验，从具体的案例模仿中获得设计的成就感。网页设计课程案例教学同时也是对网页设计方法的实践验证，有助于学生对网页设计方法的理解和体会。结语任何一种技术变革，都可能让网页设计出现新的艺术形态，前端依然是课程必须了解的知识。目前，就设计艺术角度而言，网页设计课程的内容以交互和视觉设计为基础，在信息设计层面也有较大的提升空间，设计途径也已经拓展到用户的视觉、行为、声音和逻辑等方面。网页设计课程的知识体系构建必须以产品的视角，让学生更深刻、更完整地理解用户模式下的网页设计艺术。

　　[2]鬲波飞.网页设计之视觉信息传达分析.湖南大学学报（社会科学版），2001（S2）.

　　法国学者德卢西奥迈耶在《视觉美学》中写道：“一件艺术作品不是独白而是对话。”同样，网页设计也不是设计师的个人独白，而是与浏览者的对话。既然是对话，那么其中就一定有信息的交流与传递。控制论科学创始人美国数学家诺伯特维纳将信息定义为：“信息是人们在适应及控制外部世界、并且使这种适应及控制反作用于外部世界的过程中，同外部世界进行交换的内容的名称。”对于网页设计来说，网页设计信息就是网页设计师（发送者）对网站环境进行调节与设计，并让这种设计被网页浏览者（接收者）所理解时产生的与网站环境进行交换的产物。对网页设计师而言，如果感到网站环境有某种不确定性（如如何传达客户的需求及理念，如何布局网页的形式等），设计师便会产生审美注意；当设计师通过某种途径或方法接收到了有效信息时（这种信息可以是某种设计形式、某种设计方案等），就消除了对网站环境的不确定性，并完成了对设计信息的编码。而对于网页浏览者而言，浏览者对于网站环境感到有疑问或不确定的时候（如感兴趣的资料在哪里、布局是否合理等），也会产生审美注意；当浏览者通过对信息编码的破译接收到了有效信息时（如在网页上获取到了需要的资料），也消除了对网站环境的不确定性。这样，网页设计中的设计对话和设计活动便在信息传递中真正形成。

　　在网页设计信息传播的过程中，设计信息是一种多层次的复杂信息综合体，可以分为技术信息、语义信息和审美信息三个层次。网页设计的技术信息指的是信息的物质层面或形式层面，不仅包括网页设计的布局、色彩、音效、交互等信息，也包括隐藏在网页背后、能够让网页正常呈现及运行的网站编程语言，体现了网站整体知觉环境和网站的后台环境。因此，技术信息就是网页表现形式的信息。网页设计的语义信息指的是信息的内容，即单纯作为语言意义的信息。这种信息不仅泛指网页需要传达的文本内容，也包括由网页布局、色彩、音效、交互等体现出来的设计符号、设计功能、交互体验方式等，体现了网站的前台环境。网页设计的语义信息服从普遍逻辑，具有可理解、可翻译为其他语言结构的特点。

　　美国数学家克劳德香农为一般通信过程建立起一个信息流动的物理模型，主要包括四个阶段：信息源——编码器——信道——译码器和信宿。根据这个物理模型，也可以模拟出网页设计信息流通的基本过程。网页设计信息流动模型中的信息源指的是信息的来源，广义上说是指一定时代人类的社会生活，因为所有有关网页设计的动机、课题、素材、经验等都是源于现代社会生活；狭义上说是源于客户对网站的策划与要求，以及设计师在实现其策划要求时所体现出的审美经验。编码器的作用是设计师把从信息源得到的信息制作成浏览者能够接受与理解的信号的活动。设计师的编码包括技术（语法）编码、语义编码和审美编码。技术编码是设计师对构成网页设计的界面编排、造型、色彩、音响、交互等进行系统的安排，以构成特定设计形态的过程；语义编码是设计师运用相关的网络技术手段，将网页所要传达的基本内容凝定在技术信息中的过程；审美编码就是设计师根据自身的审美经验和个性色彩对设计形态和基本内容进行艺术处理的过程。信道是用于承载网页设计信息本身的虚拟物质，设计信息需要通过网页的造型、图像、色彩、照明、音响、交互、云技术手段等进行传输和存储。设计信息传输信道常常是既有图像、色彩、文字等视觉型信道，也有带有声音的音响型信道，还有可以进行人机互动的交互型信道及上述多种手段结合的复合型信道。在网页设计多元化的今天，多信道的传输已经十分普遍。浏览者在设计信息的传输过程中相当于译码器和信宿。所谓译码就是浏览者把从信道上接受到的信号翻译为自身懂得的信号的过程。浏览者依据头脑中所掌握的相关技术符号，首先对通过各种信道传输过来的网页表现形态及呈现方式等信息做出是否明白或理解的判断，这是第一次译码，即语法算子译码。如浏览者是否可以明白网页的操作方式，如果明白，需要进一步根据自身的主观意识、评定标准及所处时代的要求等，即所掌握的语义符号，对信息进行再次译码，找到所需的有效信息，即语义算子译码。在此基础上，再根据受众的审美经验、审美趣味、审美认识等对网页信息作出第三次译码，在了解网页基本内容的同时获得审美信息，即审美算子译码。信宿指的是信息发送、传输的目的地。浏览者将破译后的信息存放在信宿中，并且对该信息再一次作出鉴别和判断，过滤无效信息（噪声），吸纳有价值、有意义的信息，从而影响自己的知识结构及行为心理，如选择购买该网页的产品等。这些有价值的信息会渐渐形成接收者自身的经验与知识结构，在以后的判断和译码时发挥作用。受众对信息的破译和信宿的情况可以通过相关检测手段（如点击率、浏览者评论等）进行统计，成为信息源中的成分，从而再一次反馈给编码器设计师，这样就完成了设计信息的循环流动。

　　网页是网站的基础单元，随着企业信息化程度的加深，网页浏览环境的高质量要求越来越严格，单单以静态网页去进行展示往往难以给予顾客提供一个理想的浏览环境，由此积极将动态网页技术运用进去，使得整个信息质量得以提高，是现阶段网页设计的基本思路。

　　之所以将几种主流动态网页设计技术进行比较，是因为在比较的过程中，我们可以清晰地看到技术的发展历程、优缺点和应用范围，在深刻理解这些知识之后，往往会给予我们实际网页设计工作相应的引导，以便充分发挥技术优势，规避技术缺陷，使得网页动态设计技术方案更加合理，更加科学，更加高效。

　　1） 从背景特点的角度去分析。ASP作为动态服务器页面，是微软公司于1996年推出的，在当时并没有将其界定为程序语言，也不作为开发工具，更多情况下被称作为技术框架，起着应用的作用。简单来讲，处于服务器端脚本编写环境下，去创建运行动态网页和web应用程序，以IIS服务器为基础，对于浏览器没有很高的要求，往往是以VBScript或者JavaScript嵌入的方式融入到Html中去的，是比较简单的动态网页技术。早在2000年的时候微软就积极推出了全新的网页设计技术，即。这是以ASP设计技术为基础的，升级发展而成的全新的动态网页实现途径，有着全新的体系结构，更加容易去操作，并且附加了共享和再利用的功能，表现出一定的延伸性，直观性的特点。另外，可以将C语言充分运用进去，使得其在页面事件，网页控件，缓冲技术和服务器控件捆绑等方面取得了很大的进展。由Sun公司推出的JSP技术，是以Java Servlet和Java技术为基础构建起来的跨平台性质的动态网页，可以实现动态网页和静态网页的分离，还能够在编译后去进行操作，有着运行速度快，消耗小，扩展性佳，安全性能良好的特点。

　　2） 从应用范围的角度来看。ASP应用范围：其一，必须处于windows的运行环境下；其二，以增加空间的方式可以在Linux系统下实现局部运行。应用范围：基于语言编辑的运行程序，各路开发者更多的选择权利，可以运用到多种语言的网页设计过程中去。JSP应用范围：其一，能够在任何操作平台下实现运行；其二，在Apache服务器的协助下，拥有更加广泛的应用平台；其三，在虚拟机解释的左右下，可以实现字节代码的转移。

　　3） 从开发效率的角度来看。ASP，开发工具有Microsoft Visual InterDev、FrontPage、Dream weaver、Edit Plus，以简单的记事本就可以进行手工开发，整体代码比较简单，学习难度不高，可以很快的适应到这样的脚本语言中去，在此基础上融入到Html代码中去，实现网站应用程序的构建。使用到的开发工具有：Microsoft Visual Studio。作为集成程度较高的平台，程序设计人员可以自由选择，以便达到比较高的开发目标，尤其在Web Controls的帮助下使得程序编写工作更加简单高效，很多情况下甚至不需要进行手工输入。JSP开发技术应用之前需要安装JDK，这是前提和基础。能够使用JSP技术的平台比较多，以开源软件为主，但是其开发效率是难于与实现媲美的。

　　4） 从运行效率的角度来看。从运行速度来看，ASP是比不上JSP和的。在应对基本运算的时候，JSP显得比较吃力，往往会在速度上输于其他两者，这是因为在此过程中，术顺序是先编译后执行的方法，并且以ASP脚本解释执行机制为基础，往往可以获得比较好的运行速度。在这一点上同样以这样的顺序进行的JSP，往往会表现出效率不高的特性。但是，从数据库操作的角度来看，JSP的性能会远远高于其他两者，这一点是无可厚非的。

　　5） 从数据库连接的角度来看。三种主流动态网页设计技术在连接数据库方面表现出明显的差异性：其一，ASP技术，以内置组件为基础，形成与数据库之间的连接，是使用频率比较高的组件，在这样的环境下，不仅仅可以更加轻松的去获取数据库信息还可以实现动态显示。其二，技术连接数据库效率更加高，避免了过多的人工代码工作以DATASOURCE和DATAGRID的数据库组件去实现数据库的链接，从而达到显示信息的目的。其三，JSP技术是以JDBC-ODBC桥和直接访问的方式去实现的，前者可以访问所有的数据库，只要保证驱动程序进行了合理的安装。

　　1） 理论联系实际，深入体会动态网页技术的异同。在充分了解三种动态网页技术的优缺点之后，积极将其运用到实际网页设计过程中去，做到理论联系实际，实现自身理论体系和实践体系的夯实，以保证能够在执行动态网页制作方案的时候，可以合理的去舍取，保证设计工作的合理性和科学性。

　　2） 与时俱进，不断了解先进的动态网页技术趋势。动态网页设计者，还应该积极去了解更多的关于动态网页技术的信息，比如最近几年内比较流行的php动态网页设计，也成为应用范围比较广泛的动态语言。简单来讲，除了上述三种动态网页设计技术，还应该积极去了解更多的动态网页技术，以便在网页设计的时候提供更多的思路。

　　3） 不断自我夯实，营造良好的技术创新环境。信息瞬息万变，网页设计技术也在不断更新和发展，对于网页设计人员来讲，只有通过不断的自我学习，才能够跟上时代的节奏，才能够保证能够以比较好的技术去满足客户的需求。对此，除了自身需要树立学习意识，积极去进行探索尝试之外，单位应该积极给予其学习创作条件，以教育或者培训的方式鼓励员工进入到网页设计技术交流和学习活动中去，以便营造良好的技术创新环境。

　　从上述的比较过程来看，三种动态网页设计技术的确存在很多优缺点。在应用的过程中，我们就要注重去选择，去舍取，以便选择比较理想的动态网页设计方案，以保证动态网页技术得以最有效的利用。对此，作为网页设计人员，应该不断去思考和探索。

　　[1] 尚俊杰.网络程序设计：ASP案例教程[H].北京：清华大学出版社，2005.

　　Flash网页设计是大专院校网页设计系列课程的扩展和提升阶段，以非服务器端脚本编程的Flash结构页面设计为主，包括Flash软件学习、Flas设计和Flash网页设计等几个方面。与基础性的HTML静态网页设计课程相比，Flash网页设计的教学内容整体性较强，教学边界相对清晰。下面笔者根据自身的教学经验，对其教学思路和教学方法做简要分析。

　　Flash软件与基本动画设计是网页设计的基础部分。如果在专业课程体系中没有专门的Flash模块作为先导课程，这一课程就需要引导学生在软件使用层面快速上手。为实现这个目的，可以采用“快捷键学习法”。这种依靠重点快捷键快速学习的方法有助于短时间内准确把握软件的常用与核心功能，受到越来越多的设计师的青睐。

　　笔者建议，在教学课件中为每一个常用的菜单与工具附上快捷键命令，以便学生第一次接触时就可以熟悉它们。实际上，软件在快捷键设置方面也非常注重功能的集合性，有助于集中记忆。如针对帧的操作部分，F5、F6、F7三个功能键分别实现了“插入帧”“转换为关键帧”和“转换为空白关键帧”三项内容，既好记又好用。

　　我们知道，Flash MV一度在网络上非常流行，和Flash MV的线性播放特性相似，Flash广告已经成为时下网络广告的主流。如某知名网站首页共使用了27幅广告，其中Flash广告有18幅，占页面广告总数的66.7%。

　　Flash网络广告的普遍使用促进了Flash技术在艺术设计专业中的广泛应用。基于这种考虑，笔者建议在软件基础学习之后安排适当的学时进行Flash广告设计学习。这一部分课程的教学还可以与广告相关课程相衔接，以进一步丰富Flash网页设计课程的内涵。

　　在Flash广告设计教学中，要侧重于内容密度、节奏感、视觉冲击力等与Flash软件技术直接相关的层面，其他内容，如广告语言、传播理论等可鼓励学生课外复习或自学，做到把握重点、取舍得当。

　　在软件基础和线性动画（Flash广告设计）的基础上，进入到课程的主体模块，即Flash网页设计。与HTML静态网页的分页面结构不同，Flash网页设计在集成设计开发环境内（Flash软件和Action脚本）实现网页内容与非线性结构的编排，模块化特性明显。为此，笔者尝试采用“基本结构设计—模块分解设计、网站整合”三步走的教学法，可概括为“总—分—总”教学流程，合理调配教学难点和重点，循序渐进，在实践中取得了一定的效果。

　　首先，从网页基本结构入手，利用按钮对时间线上各帧的控制构造网站模型，其中包含了最基本的场景转换。在学习的后期，可以针对每帧对应的画布进行深入设计，包括内容扩展和淡入、淡出动画效果的实现等。

　　基本结构设计涉及每帧对应的画布设计、按钮设计、元件和实例的进一步应用以及补间动画等内容，还涉及一些基础的Action脚本内容，如“stop”“gotoAndStop”“gotoAndPlay”命令以及帧标记的参数调用等，适合入门学习。在脚本程序编写的最初阶段，重点要使学生理解脚本语言代替人进行指令操作的特性，如“去哪”“做什么”等，利用这种指向性的形象思维逐渐强化学生的编程思维。一般来说，静态网页设计课程教学不会将Java脚本作为重点，在这种情况下，这一阶段的Action脚本学习就更加重要。

　　由于Flash网页多在屏幕的显示面内不翻屏，高度有限，这就需要使用软件功能和脚本程序创造更多的结构层次去容纳网页内容。除了场景的转换外，在每个场景之中，还要借助于不同类型的页面组件来实现额外的结构层次。

　　针对种类较多的页面组件，可以实施“分解教学”，即抛开网站设计的整体性，单纯提炼每个组件的设计与编程要点，使每节课都可以完成一种组件设计，实现相关功能。笔者选择的页面组件包括按钮组（菜单）、弹出框、下拉菜单、声音控制模块和预加载器等。

　　在设计层面，要考虑到各组件与网页整体风格的一致性；在内容层面，要合理地选择组件类型，丰富内容层次，便于用户访问，形成良好的互动性。而在Action脚本编写方面，要以典型程序、核心程序为主，逐步增加更多的样式变化。实际上，虽然组件类型不同，其背后的程序控制大多有着一定的内在联系，如很多组件都会用到onEnterFrame频率控制函数。随着教学的不断深入，要尽量将脚本教学系统化，将松散的知识点整合起来，尽量覆盖到常用的函数、方法和命令。

　　经过不同组件的分解学习，接着补充几种场景转换的方法，结合不同设计项目中对组件的选择，Flash网站就可以搭建起来。至此，Flash网页设计的技术性教学目标就基本完成了。

　　在技术性教学目标之外，在课程的收官阶段，要融入行业设计理念，以提高结课作业的质量，保证教学效果。在HTML静态网页设计教学阶段，笔者针对结课作业挑选了“实用设计”这一特定行业分类进行教学强化，避免学生在结课阶段设计得没有针对性，学无所用。

　　如果分析“静态网页”的内涵和外延，可以看到，在基于HTML网页设计之外，只要立足于本地，与服务器没有数据交互的网页设计都可以统称为“静态网页”。从这个角度来看，艺术设计专业中的Flash网页设计课程也基本上以静态网页为主。

　　在Web2.0时代，交互性的社交网络已经发展得比较成熟，使每个独立域名的网站不再是用户交互的首选。在这种形势下，静态网页设计要“扬长避短”，不拘泥于本身用户交互行为的弱点，以设计为主，反而有自己的一席之地。在教学中，要鼓励学生在参与网络互动之余，尽量发挥自身设计优势，具备独立完成内容展示型网站的能力。

　　经过相关调整，Flash网页设计课程具备了循序渐进、由浅入深的教学层次，直至课程结尾处，着眼于设计之“道”的有目的训练，使整个网页设计课程体系具备了从基础知识到综合设计提升的完备性，并与其他课程有机结合，最大限度实现了课程的自身价值，为该课程的序列化、标准化建设积累了一定经验。

　　（注：本文为辽宁省教育科学“十二五”规划2011年度一般课题，课题批准号：JG11DB075）

　　在互联网蓬勃发展的大环境下，《网页设计与制作》已经成为众多高职院校中开设的课程，但是实际的教学效果往往差强人意。本文尝试从教学内容的角度对高职《网页设计与制作》教学提出一些看法，以期提高《网页设计与制作》课程的教学效果。

　　随着互联网逐渐深入到经济生活的各个角落，涌现出越来越多的网站。相应的，各类单位、企业等用人单位对网页设计与制作人才的需求也开始变得普遍。而《网页设计与制作》也早已成为大多数高职院校普遍开设的课程，甚至在同一所高职院校中也有相当数量的专业开设了这一课程，这些现象都反映出了社会对网页设计与制作人才的需求。而互联网的不断发展也在推动着社会对网页设计与制作人才水平要求的不断提高，也对《网页设计与制作》的教学提出了新的挑战。

　　目前，《网页设计与制作》的教学内容大致分为：网页设计基础知识、HTML语言基础、CSS样式基础、网页文本和图像、超链接、表格、框架、Div、多媒体网页、模板和库、站点管理维护。不同院校、不同专业在具体内容的选择上可能会有所差异，但大致都包括了这些内容。首先，在《网页设计与制作》教学中，往往会以Dreamweaver这一网页制作软件的使用作为主要内容，所有的操作都依赖于Dreamweaver，很少涉及对HTML代码的讲解，这导致学生无法熟练的查看、修改HTML代码，一旦离开了Dreamweaver，学生将无法制作、修改网页。而在实际应用中，HTML代码是在进行网页设计时无法绕过的一个知识点。因为在Dreamweaver的设计视图下操作是不能解决所有问题的，很多网页设计中出现的问题只有通过查看HTML代码才能发现并解决。此外，Dreamweaver也并不是计算机上的常用软件，学生应该具备在脱离Dreamweaver的环境中进行简单网页制作、修改的能力。其次，早期的页面布局以表格布局为主，但随着互联网技术与网页设计标准的不断发展，表格布局技术已经不再是主流，取而代之的是Div+CSS布局，也是所谓的内容与形式分开的布局方式。在这种布局方式下，页面元素的布局更加灵活、页面代码更加简洁。而更重要的是，采用这种布局方式的网站在整体风格的管理和后期维护上更加方便、效率更高。因此，《网页设计与制作》的教学内容应当给予Div+CSS足够的重视，加大其在教学内容中的比重，以增强与实际应用联系的紧密程度。再次，随着移动互联网的兴起，通过手机等移动终端访问互联网的用户数量已经超过了传统的通过PC访问互联网的用户数量，如何设计适合于移动终端浏览的页面，也应该作为《网页设计与制作》教学内容的一部分。

　　不同院校、不同专业对《网页设计与制作》课程的命名不尽相同，但大多带有“设计”二字。而在实际的教学内容安排中，却往往没有体现出“设计”的部分。网页设计是一门典型的交叉课程，既有计算机科学知识，又有人文社会科学知识。网页设计虽较多的依赖技术性手段，但并不代表在教学内容的安排上就要以技术为主导。学习Dreamweaver也是只是为了掌握一种工具而不是最终目的，成功的网页设计作品还要有美观的布局、配色和人性化的信息导航。

　　虽然Dreamweaver作为主流的“所见即所是”编辑工具，可以让使用者不接触HTML代码就能完成大部分网页制作的工作，但是只有真正理解HTML语言，才能理解网页工作的原理，才能真正深入到网页设计的核心，才能学习到其他优秀网页设计作品的内涵，为将来的能力提升铺平道路。

　　Div+CSS布局已经是成熟的主流网页布局技术，《网页设计与制作》的教学应该突出对该技术的侧重，将已经被淘汰的表格布局作为辅助。同时，对CSS的教学内容应该贯穿始终，因为CSS可以说是控制网页元素表现形式的关键，掌握了CSS就能根据需要轻松的设置页面元素的各种效果，从而为整个页面增色。

　　目前网页设计行业内最缺乏的是具备优秀设计能力的高端网页设计人才，而目前《网页设计与制作》教学中最欠缺的就是对设计能力的培养，导致学生在学完课程后也只能进行简单的模仿和重复，无法进行有效的创新和设计。因此网页设计课程的教学应该以艺术设计为出发点，增加对传统艺术设计方面的教学内容，如构图、色彩、设计思维等知识，并进行相应的实践练习，以此培养学生基本的审美能力和在设计上的创新能力，这样才能让网页制作技术服务于网页设计，从而真正体现出“设计”，避免舍本逐末。

　　互联网的发展日新月异，新的技术不断涌现，作为《网页设计与制作》的任课教师，应该具备一定的判断能力，将未来网页设计技术发展的新趋势呈现给学生，帮助他们紧跟行业动态，为将来就业打下良好基础。

　　《网页设计与制作》作为一门开设多年的课程，在教学内容的设计上必须要关注行业的最新动态，同时明确课程的核心内容，才能培养出社会所需要的网页设计人才。

　　随着社会迈入信息化时代,网络及计算机技术的发展及普及程度呈现出优质化的发展形势,从而促进网页动画渐渐发展起来,此外网页动画设计在网页设计中占据重要地位,促使人们在关注动画整体发展趋势的过程中将注意力放在网页动画方面。在构建及设计网页时,运用Flash帮助网页实现多媒体化的网页成果展示,同时也渐渐成为网页设计发展过程中不可或缺的重要部分。

　　MacromediaFlash作为一种交互式编辑矢量图及多媒体创作软件,因特网网页设计矢量动画文件格式时常得以较多的运用,此外,针对性分析Flash,可以了解到目前其主要具备以下六大特点:第一,将矢量图形作为主要运行前提,致使其自身文件导出容量不大,在进行图片缩放时对其自身的清晰度影响不大,在网络传输过程中存在一定的便捷性;第二,Flash具备非常优质化且强大的AS代码,在设计动画时运用Flash技术,促使动画的交互性优良,便于读者在阅读过程的理解并实施相关互动;第三,针对实际运用过程分析,Flas在运作时主要采用插件,若用户想要实现视频观看,仅仅需要安装一次视频插件就可以直接观看,避免繁琐性多次安装的现象发生。此外,由于Flash构建的动画自身极小,所以其具备较快的调用速率;第四,在设计Flash过程中,可以根据需要适当增加页面控制按钮帮助页面实现链接的跳动,还可以运用鼠标实现页面动画中的运动及移动。第五,Flash可以实现动画视听效果内容的升华,譬如渐变声、位图等等,用户在制作图片的过程中可以直接构建全Flash制作站点;第六,Flas属于一种“准”流式文件内容,无需全部下载完成就可以实现动画观看。

　　在网页设计中,Flas具备非常多关键性的作用,如流式播放动画、FlashMV及短片动画等,此外其所表现的形式中存在一定的交互性。但需要注意的是,在实施网页设计时,避免繁琐、复杂的动画设计效果的存在,毕竟物极必反,只会降低网页的品质;如图1所示。2.1网页动画信息交互的实现为了进一步却宝宝网页动画信息交互整体的流畅性,其中的一个重要关键就是Flas导航的交互性设计。在对该部分内容进行设计时,往往会使用针对性的Flas脚本——AxtionScript。实际设计过程中,通常由编程者的思想与Flash在事件中作用共同形成动力,并依据动画中的相应内容实现AxtionScript的具体化定义。2.2网页动画相关要素的设计第一,交互式导航系统。在网页设计中,导航栏对用户主要起到一种引导性作用。所以在设计时需要将其设计为多个导航级别,并构建针对性的标识来将其区分,以色彩为例,可以采用较为鲜艳、清爽式的搭配。第二,Web图像动画形式展示。传统网页中,Web图像主要呈现静态,不过经由计算机技术的不断发展,最近几年在网页设计中渐渐出现了一部分动态化的Web图像。同时在其色彩方面的运用,主要采用RGB模板,并在网页安全色方面运用216色,其主要的色彩格式包括GIF、PNG以及JPE6。第三,鼠标动画。为了实现优质化Flas效果,在制作动画效果时要特别注意鼠标在移动过程中其轨迹图案及色彩搭配。首先,要确保鼠标移动过程中的色彩与网页设计色彩是不同的,有助于用户一眼就可以将鼠标找到。最后就是,鼠标在色彩区别网页之后还要注意其透明性,避免遮蔽信息的现象出现。

　　综合全文内容,在网站设计过程中,Flash作为一个极具重要性的视觉性元素,其可以在帮助网站实现多媒体化效果展示的同时,还能够结合数据通信这一措施全面性丰富网站自身具备的素材及资源,最终达到一种动态化的效果。截至今日,由于计算机技术发展速度不断提升,结合Flash自身所具备的多种优质化特征,笔者相信在今后人们的日常生活中,Flas一定可以获得更加广泛的用途,更具普遍性,最终实现网页设计的主体化运用趋势。

　　每一个时代都有代表性的发明作为这个时代的象征，像第一次工业革命，蒸汽机的发明，使得那时成为蒸汽时代；爱迪生发明了电灯从那时起进入了电的时代，要说21世纪，我想应该是网络的时代，自从互联网的出现使“地球村”的概念更加贴切，可以说网络拉近了地球上每一个角落的人。互联网代表着一种崭新的信息交流方式，它使信息的传播突破了传统的政治、经济、地域及文化的阻隔，使信息传达的范围、速度与效率都产生了质的飞跃。互联网是由成千上万的网站组成，而每个网站都是由诸多网页构成，故网页是构成互联网的基本元素。而网页设计是伴随着计算机互联网络的产生而形成的平面设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。设计师如何将网络与设计、技术与艺术完美地结合，是非常值得我们深思和研讨的。

　　信息元素可以说是网络最基本的元素，互联网自始至终都起着一个信息传播的做用，也是由此而产生的。自从人类诞生以来，人类社会至少已经经历了四次意义重大的信息传播革命，每一次信息传播革命都把人类文明推向一个新的发展阶段。第一次信息传播革命是语言传播的诞生。第二次信息传播革命是文字传播的诞生。第三次信息传播革命是印刷传播的诞生。第四次信息传播革命是模拟式电子传播的诞生。

　　最新的一次信息传播革命，即正在我们身边发生的第五次信息传播革命，是数字式电子——网络传播的诞生。网络媒体的出现，使得传播者与受众之间的传统的相互关系正面临巨大的变化。人类进入了真正的信息时代。

　　网页设计以信息传达为目的，而传达的最终表现界面则永远也脱离不了媒体。媒体与网页设计之间的关系是互动的，媒体既体现了设计，又给设计带来了局限性；设计既受制于媒体，又是新媒体产生的动力之一。

　　我们大家所共知的传媒方式有报纸、广播、杂志、电视等等，这些在现代媒体中仍然占主要位置。如果与互联系网络比较的话，它们这些传媒方式就显的相当单一。因此它们的先天缺陷也越来越明显，所以像这种单一的传达方式也使设计师受到了一定程度上的限制。人们接受信息的途径是多方面的。像视觉、听觉、触觉、嗅觉、味觉等一系列感官的综合使我们更加全面的去了解其他的事物。为了能使信息传达的更全面一些，一直在追求完美的设计师也在寻找着一个崭新的媒体来表达完善的设计。因此当今互联网络顺利的成为新生的、综合感官的、充满活力的新媒体，也为设计师创造了前所未有的信息传达手段与途径。而且随着技术的不断发展，它极有可能成为最完善的媒体。这应该引起每一个平面设计师的关注。网络的发展速度和力量是惊人的。

　　可以说网页是通过视觉元素来进行信息传达的，这里说的视觉元素包括文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文字、图形、动画，还是视频，为了使网页获得最大的视觉传达功能，网页设计者所要考虑的是如何适应人们视觉流向的心理和生理的特点把它们放进页面这个“大展示窗口”里。由此确定各种视觉构成元素之间的关系和秩序。因此，设计时应该研究各种视觉造型元素之间的距离、位置、面积和视觉流程的问题。

　　从理论说起，视觉流程的形成是由人类的视觉特性所决定的。因为人眼独特的结构，造成只能产生一个焦点，而不能同时把视线停留在两处或两处以上的地方。这样就使得人们在阅读一种信息时，视觉总有一种自然的流动习惯，先看什么，后看什么，再看什么。视觉流程往往会体现出比较明显的方向感，它无形中形成一种脉络，似乎有一条线、一股气贯穿其中，使整个版面的运动趋势有一个主旋律。心理学的研究表明，在一个平面上，上半部让人轻松和自在，下半部则让人稳定和压抑。同样，平面的左半部让人轻松和自在，右半部让人稳定和压抑。所以平面的视觉影响力上方强于下方，左侧强于右侧。这样平面的上部和中上部被称为“最佳视域”，也就是最优选的地方。

　　所以在网页设计中，重要的信息和标题栏通常在这个位置出现。只要遵循视觉流程和符合人们认识过程的心理顺序和思维发展的逻辑顺序就可以更为灵活的运用。在网页设计中，灵活而合理地运用视觉流程和最佳视域，组织好自然流畅的视觉导向，直接影响到传播者传达信息的准确与有效性。

　　网页设计这门学科是一门后期新兴的设计类与网络方面交叉的学科，在最近的几年也随着网络的发展越来越受人们的重视，它是以网络为载体，把各种各样不同的信息以最快捷与最方便的模式传达给每一位与之相关的人员，但是单单这种标准是不够的，人们也对在观看各类信息的同时逐步产生了视视美观的需求。然而每个人对美的追求是不尽相同的，网页设计也是同样的。因为要求了网页不光是把各类信息与事物放上去能看就行，这些对现在的人们已经是远远不够的了，这时设计师就要考虑如何使受众能更好更有效率的接收到网页上的信息。这方面就需要从审美入手了，如何制作出清晰、整体性效果好的页面。使人们浏览起来更方面，心情更舒畅，制作出清晰、整体性好的页面。使人浏览起来心情愉快，接收信息也会更加容易。网页设计的审美需求是对平面设计美学的一种继承和延伸。

　　我们经常所说的如变化和统一、条理与反复、对比和调和、均齐与平衡等，对网页中文字、图形、色彩的设计都是十分有效的视觉规律。首先，网页的内容与形式的表现必须统一和具有秩序，形式表现必须服从内容要求，网页上的各种构成要素之间的视觉流程，能自然而有序地达到信息诉求的重点位置。在我们把大量的信息塞到网页上去的时候，考虑怎样把它们以合理统一的方式来排布，使整体感加强同时又有变化。怎样使它们脉络清楚又富有清晰的视觉效果等等。这样使页面更丰富，更有生气，看起来就不感到枯燥。其次，突出主题要素，必须在众多构成要素中突出一个清楚的主体，它应尽可能地成为阅读时视线流动的起点。如果没有这个主体要素，浏览者的视线将会无所适从，或者导致视线流动偏离设计的初衷。

　　文字作为信息传达的主要手段目前也是网页设计的主体，文字是网页中必不可少的元素，也是网页中的主要信息描述要素，所以网页中文字将占据相当大的面积，文字表现的好与坏将影响到整个网页的质量。网页文字的主要功能是传达各种信息，而要达到这种传达的有效性，必须考虑文字编辑的整体效果，能给人以清晰的视觉印象，避免页面繁杂零乱，减去不必要的装饰变化，使人易认、易懂、易读。不能为造型而编辑，忘记了文字本身是传达内容和表达信息的主题。

　　网页文字编排与设计，重要的一点在于要服从信息内容的性质及特点的要求，其风格要与内容特性相吻合，而不是相脱离，更不能相互冲突。如政府网页其文字具有庄重和规范的特质，字体造型规整而有序，简洁而大方；休闲旅游类内容网页，文字编辑应具有欢快轻盈的风格，字体生动活泼，跳跃明快，有鲜明的节奏感，给人以生机盎然的感受；有关历史文化教育方面的网页，字体编辑可具有一种苍劲古朴的意蕴、端庄典雅的风范或优美清新的格调；公司网页可根据行业性质、企业理念或产品特点，追求某种富于活力的字体编排与设计；个人主页则可结合个人的性格特点及追求，别出心裁，给人一种强烈独特印象。

　　在网页文字的编排与设计中，由于计算机给我们提供了大量可供选择的字体，导致字体的变化趋于多样化这既为网页编辑提供了方便，同时也对编排与设计的选择能力提出了考验。虽然可供选择的字体很多，但在同一网页上，使用几种字体尚需精心编辑和考虑。一般来讲，同一页面上使用的字体种类最多只能有三四种。由于文本字体的显示是需要本地硬盘字体文件的支持的，所以在互联网上使用过多的字体是没有意义的。文字在视觉传达中作为页面的形象要素之一，除了表意以外，还具有传达感情的功能，因而必须具有视觉上的美感，能给人以美好印象，获得良好的心理反应。

　　图片是文字以外最早引入到网络中的多媒体对象。网络可以图文并茂地向用户提供信息，成倍地加大了它所提供的信息量。而且图片的引入也大大美化了网络页面。可以说，要使网页在纯文本基础上变得更有趣味，最为简捷省力的办法就是使用图片。对于一条信息来说，图片对受众吸引也远远超过单纯的文字。

　　图片的位置、面积、数量、形式、方向等直接关系到网页的视觉传达。在图片的选择和优化的同时，应考虑图片在整体编辑计划中的作用，达到和谐整齐。要达到这样的效果，在页面图片的合理选用时，一要注意统一，二要注意悦目，三要注意突出重点，特别是在处理和相关文字编排在一起的图片时。

　　网页在一定意义上说也是一种艺术品，因为它既要求文字的优美流畅，又要求页面的新颖、整洁，使用色彩可以产生强烈的视觉效果，使页面更加生动。而且，浏览者在洲览网页时，留下的第一印象就是页面的色彩设计，它的好坏直接影响阅读者的观赏兴趣。因此，色彩设计在网页设计中居于十分重要的地位。网页的色彩设计应把握以下几个方面。

　　首先是整个页面的色彩选择，确定一个主色调，可以有利于体现网站主题。我们现在看到的网页，一般以浅颜色为背景的居多，如浅灰色、浅黄色、浅蓝色、浅绿色。以浅颜色为底，柔和、素淡，配上深颜色的字，如黑色，读来自然、流畅，也有利于突出页面的重点，有利于整个页面的配色，更容易为大多数人认可和掌握。其他一些次要内容，如背景图片、线条适宜采用不抢眼的颜色，以免喧宾夺主。只有少量精心选择的元素，为了突出强调的需要，才采用明亮的色彩，这些彩色亮点就会产生强烈的视觉冲击，但如果用得太多了，就会形成一种均匀的噪声，而达不到强调的效果。

　　其次，在背景的色调搭配上一定要注意不能有强烈的对比，特别是同时使用色彩对立的颜色。大面积颜色适宜采用低比度，因为过于丰富的背景色彩会影响前景图片和文字的取色，严重时会使文字溶于背景中，不易辨识。所以，背景一般应以单纯为宜。如果需要一定的变化以增加背景的厚度，也应是在尽量统一的前提下的一种变化。例如在制用标题时，为追求醒目的视觉效果，可用比较深的颜色，配上对比鲜明的字体。实际上背景的作用主要在于统一整个网页的风格和情调，对视觉的主体起到一定的衬托和协调作用，一方面吸引网民的注意力，另一方面有助于体现网站的主题。

　　网络技术与设计创意的紧密结合，使网页的设计由平面设计扩展到立体设计，由纯粹的视觉艺术扩展到空间听觉艺术，网页效果不再近似于书籍或报刊杂志等印刷媒体，而更接近干电影或电视的观赏效果。技术发展促进了技术与设计的紧密结合，把浏览者带入一个真正现实中的虚拟世界。技术与设计的紧密结合在网页艺术设计中体现得尤为突出。

　　响应式网页设计，是目前网页前端设计领域最前沿的话题．那么，什么是响应式网页设计，为什么把网页设计成响应式，我们的网络课程制作为什么要遵循这一设计思路是本文阐述的重点．伴随着互联网高速发展，各种类型的网络技术及应用服务纷纷涌现．从静态网站到动态网站，从web1．0到web2．0，日新月异的网络技术和服务时刻在刷新我们的眼球．近些年，智能手机及平板电脑等移动设备快速崛起，基于移动终端的互联网访问已经走入了我们的日常生活，现在移动终端的网络访问量已超过基于普通电脑的访问量．因此要求网络课程不仅要在普通电脑的大尺寸屏幕上可以为学习者提供友好的用户界面和学习体验，同时在各种不同分辨率的小尺寸移动终端上也应提供相对一致的学习体验．

　　显然，面对这一问题，原有的网络课程设计模式已经远远不能适应这一要求，那么，如何让网络课程也能实现响应式设计，并可以根据不同的终端设备给出不同的输出信息数据，我们根据现有的一些网站开发的技术手段和前端页面的设计模式，以及根据实际开发过程中总结出的一些实践方法，一般使用以下手段来实现，比如把固定的数值包括位置定位、长宽高、大小等变为相对的量，这其中主要包括三个主要手段:流体式表格，液态图片，媒体选择器．

　　在流体式表格出现之前的页面设计，一般会使用固定的网页宽度设定，这主要是因为当时主流的电脑显示器的分辨率是基本相同的，固定的宽度可充分的使用显示器宽度，同时又不会使用户感觉页面过满．但随着电脑硬件的不断发展变化，屏幕尺寸和分辨率越变越大，自适应宽度的网页逐渐问世，这种设计方式可占据整个浏览器页面适度的宽度，同时随着页面宽度的变化进行重新排列布局．流体式表格的概念就是将网页页面进行栅格划分，使用相对单位代替绝对单位，使用相对单位来设置页面元素的位置偏移和大小等变量，这样可以使整个网页的布局模式和内容大小随着宽度的变化而改变，从而适应不同的显示需求．同时使用基于div的布局方式，例如要进行经典的三列式排布，我们可以将div设置为左浮动，并且宽度设置为33%，这样当宽度改变时，这三个div也一直会在自己所在的区块里排成三列．因为我们设定了浮动式布局，段落不会因为页面的变化而出现重叠或分离的情况．流体式表格保证了网页能够响应浏览器的宽度变化，同时保证不会出现横向滚动条．

　　液态式图片也可以称为响应式的图片，这是一个比较抽象的说法，我们可以这样理解，那就是不仅要保持缩放图片时保持图片的宽高比，而且还要在移动终端上适当降低图片的分辨率．这个技术的实现需要使用网页脚本检测当前设备的屏幕分辨率，根据不同设备的情况，向网页中添加特定的web请求信息或标记，并将后续的网页html页面代码、页内图片、网页脚本和样式表等加载请求定向到网站虚拟路径上．当这些请求到达网站的服务器端时，网络服务器会根据发送来的请求信息来决定这些请求所需要网页中是插入的大尺寸的高分辨率图片还是小尺寸的低分辨率的图片，并向请求用户进行液态图片相应地反馈输出．对于小屏幕和低分辨率的移动设备，大尺寸图片则不会被用到．使用液态式图片可以有效降低移动端的网络数据流量并提高网页访问速度．

　　css中文名是层叠样式表，目前最新的版本是第三版也就是css3，它能实现网页内容与表现分离的一种技术．流体式表格为我们提供了响应式的页面布局方式，不过在某些较小的屏幕终端上，如果页面没有办法容纳四列显示，只能重新排列成三列或者两列显示，那么，该如何响应此设备，我们可以使用css3媒体选择器技术解决这个问题．css3兼容之前的css版本所支持的所有媒体类型，例如:screen，print，handheld等，并且css3又添加了很多涉及媒体类型的最新的功能和属性，包括最大宽度、设备宽度、屏幕定向，横屏或竖屏及颜色设定等．在css3之后出现的新的移动终端，如苹果或安卓等设备，都可以相对完整的支持这些新属性．所以可以通过媒体选择器为新设备设置独特的样式，而忽略不支持css3的旧电脑中的老旧的浏览器;可以根据使用预先设想的使用目标创建多个不同类型的样式表，以适应不同宽度范围的设备类型．而目前最高效的解决方案，是将多个类型的选择器整合到一个css文件中．

　　有了流体式表格、液态图片、css3媒体选择器，已经基本可以根据终端设备的不同屏幕尺寸及分辨率显示不同的课程页面变化，但响应式网页设计不仅如此，还应包含一些其他方面的内容，我们列举出如下的响应式网页设计的主要包含的几个方面:(1)响应不同终端的屏幕尺寸及分辨率变化．当终端的屏幕尺寸及分辨率发生改变的时候，根据设备情况需要对页面菜单、文字、布局等做出动态调整，使用户仍然能够获得友好的使用体验;(2)响应设备操作行为变化．如鼠标拖拽(iPad上使用JavaScript事件模拟拖拽)，触摸屏手势支持或其它移动设备上特有的输入方式;(3)网络状况自适应．用户在慢速网络或网络延迟较大的情况下可以选择不下载一些消耗带宽的资源;(4)其他辅助功能响应．根据不同的终端，调用程序所需要的传感器和控制器，如GPS、陀螺仪、电线)对使用场景做出响应．根据用户身处的不同使用环境，提供给用户不同网页体验;(6)响应用户偏好．因为不同的用户有着不同的偏好，比如左右手，操作习惯，反映速度，眼睛辨别能力，色彩喜好，关注内容不同等，网站都可以考虑做出响应．上述讨论的三个重要手段，主要是针对第一条内容．针对第二条内容则主要依靠浏览器和设备传感器的状态检测，来实时动态调整课程页面表现或运行方式，相对于普通电脑上基于鼠标和键盘的人机交互，触摸屏技术为我们带来了完全不同的互动方式与新的设计需求;这两者又有各自所适用的领域．幸运的是，要想让网站满足不同设备的需求，并非一件很难的事，只需要把注意力集中在某些地方．比如:触屏设备无法对鼠标滑过或指针的一些行为做出响应，因为触屏设备中根本就没有鼠标指针的设定，我们用手指点击屏幕就是单击，因此设计时不要让触屏设备出现任何依赖于鼠标的状态的触发模式．而其他几个方面则可根据网络课程的实际情况来实现不同的需求，例如:视频或图片比较多的课程，就需要对网络状况进行检测，以根据不同的用户带宽显示不同的视频或图片质量，以提高用户访问速度，提升用户体验．而一门制作优良的网络课程，如果能根据不同的用户给出不同的用户体验，使课程的学习更加贴近用户的习惯，那么，这一课程的受欢迎程度肯定会大大提升．

　　从页面设计到技术实现真格过程来说，设计并制作一个响应式网络课程，大致可以划分为以下4个过程:(1)网站美工，用户界面设计师，描绘出页面的风格和样式，并确定网页在最大分辨率的设备下应显示的全部内容，然后在页面尺寸不断缩小的情况下，如何布局，什么样的页面元素比如文字、图片、内容等需要改变显示方式进行隐藏，缩放或裁剪等，再一一做出调整;(2)使用相对单位对页面元素进行定位和设定，设置长度、宽度、大小等;(3)针对不同显示终端的屏幕尺寸和分辨率使用流体式表格和液体图片实现响应;(4)根据分辨率变化视情况加入适当的媒体选择器来调整元素．通过以上步骤，一个可以适应各种平台和终端的响应式网络课程基本实现，经过后期的各种优化调整，一个优秀的并保持一致的用户体验的网络课程就呈现在了各种终端用户面前，通过响应式网页设计，大大减低了针对同一课程开发多个系统的工作强度，实现了网络课程制作的效率化和通用性．响应式网页设计的优点:(1)网站制作的工作量相对较小，不需要注册多个域名，对于所有设备适用;(2)相对一致的用户体验，个性化的用户习惯响应，很贴近用户平时的上网习惯;(3)可根据不同的用户终端，调用不同的终端工具，实现设备的有效合理利用．

　　网络已成为政府、学校、企事业单位信息化建设中的重要组成部分，受到人们的重视。全国各中小学校都把建设自己的网站提上了工作日程，利用网站进行宣传、教育、新闻和招聘等工作，校园网已成为学校与外界交流沟通的重要渠道。

　　网站是指在因特网上使用HTML等工具制作，并用于展示特定内容网页的聚集。Asp语言可以处理并能够开发与实现与多种数据库诸如Access、Mysql、Sql Server或者Oracle等的连接，具有功能强大、灵活的特点。在一般情况下使用vb标准的sql语句来调配使用Access的数据库。

　　Asp和Vbscript都是同HTML脚本结合在一起使用，一般的文本编辑程序的文件，只要Web服务器支持Asp，就可以在网页的HTML代码加上Asp程序代码；就像只需要浏览器脚本中支持Vbscript，就可以在客户端脚本使用Vbscript一样。

　　脚本语言特点是与编程语言的语法结构相类，以文本形式保存，并且脚本语言不需要额外的程序进行编译，在调用脚本语言时直接解释。这也当作是脚本编辑器设计的一个判断标准，比如说Javascript语言，你只需要新建一个HTML文件，在文本里面加上一段脚本就可以，在IE浏览器打开HTML文件时自然会调用js脚本。这类的常见的有Javascript、Vbscript、perl、php、python、ruby，都是脚本语言。不过目前大都是搭配Vbscript来建立Asp程序。

　　Dreamweavar、Frontpage Expree、Frontpage等都是网页设计的软件。笔者向同行们推荐的Dreamweavar是一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、homesite/bbedit捆绑、可视化网页设计、图像编辑、全局查找替换、全ftp功能、处理Flash和Shockwave等多媒体格式和动态HTML、基于团队的web创作。初学者使用Dreamweavar mx 2004与Dreamweavar 8.0两个版本，前者在功能上明显优于后者强大，能够实现Asp动态网页编辑语言中。

　　Access是微软公司推出的基于windows的桌面关系数据管理系统（rdbms，即relation database management system），是Office系列应用软件之一。它提供了表、查询、窗体、报表、页、宏、模块7种用来建立数据库系统的对象；提供了多种生成器、模版，把数据存储、数据查询、界面设计、报表生成等操作规范化；为建立功能完善的数据库管理系统提供了方便，也使得普通用户不必编写代码，就可以完成大部分数据管理的任务。

　　建立网站的目的是为了更加便利地实现与外界交互资讯，让教师能更加方便地使用网络教学资源从而进一步提升学校教学和管理的质量。而使学校的网络稳定运行和网络应用得以广泛的发展则是学校信息建设的深入要求。另外，网站上的优质教育教学资源，学校网站提供的网上教学互动的全新方式以及教学资源共享和学校之间的交互和交流也是校园网站应用的新切入点。

　　收集完学校各部门的相关信息以后对其进行整理，结合网站定位来设定网站的分栏目，形成网站栏目的树状列表，用以清晰表达站点结构。

　　Dreamweaver mx2004提供了多种方法创建和控制Web页布局。网站采用动态与静态页面相结合的设计。而整个页面设计随着潮流而变，重要的成分是字体、标题、Logo、标注、导航菜单等。页面布局采用css样式，可以很方便地使用系统功能的设计。

　　图片是网页内容最有视觉冲击力的表现方式之一，因此，图片在网页中具有非常重要的作用。常用的图片处理软件有Firework和Photoshop，对于一些简单的图片处理工作用Firework即可完成。

　　Flash是表现网页的最流行的方式之一，同视频一样，Flash可以同时给人以视觉听觉的冲击，因此，制作简单的Flash也是网页制作的一项非常有用的技能，你可以选择Flash的软件进行制作，或者从网络上下载免费使用的Flash插入到自己的网站之中。

　　1）平台软件。服务器端平台软件全部采用Microsoft的产品，其系统亲和度较好，便于维护和管理，同时系统设计还应用了Microsoft的一些新的技术，来提高系统的整体性能和稳定性的效率。如，操作系统采用Microsoft Windows 2003 server；服务器：Web软件采用Windowsiis4.0配置虚拟主机；浏览器：Internet explore 8.0。

　　4）开发工具。Dreamweaver Mx2004，站点管理功能的规划与设计；Flash Mx 2004，制作网页动画，同时辅以Fireworks Mx2004，用以制作静态和动态网页；Photoshop，对页面中图片效果进行处理。

　　数据库是网站的内核，完善的数据库高效率的运行才能使得网站满足客户的需求，而数据库建设的关键是数据库的建模。

　　首先对网站运行中涉及的数据信息进行整理和归纳，Web数据库的主要信息有：数据库用户登录和密码等信息，添加信息的数据表，后台管理员的添加和管理的数据表，栏目信息数据表，新闻信息数据表，管理信息数据表，上传图片文件的管理数据表等。

　　在整理完网站涉及的信息之后，要对网站进行数据流程分析，确立数据流程图，Bsport体育这一点应该在之前的需求分析中就已经完成,之后需要对数据流程中的数据关联进行分析。

　　建立开发和测试程序的环境时，需要考虑数据采用的类型，字段定义，表和表之间的关联数据，将数据组织成数据表的关系，确定主键字段并为数据库建立索引，完成数据库的建模。

　　网站后台设计也是网站设计重要环节，现行的大部分网站系统都是通过后台管理完成网站的更新和维护，其中需要针对不同需求的用户设立权限，规范后台操作。

　　其实现的主要功能是对需要使用后台管理系统的人员进行用户名、密码和权限的管理并进行添加、修改与删除的操作。

　　后台管理页面应该结构简单，功能完善，操作快捷，比如可以对于管理员或老师进行权限设置，对新闻、教学工作、招生咨询等项目进行更新操作。

　　如果使用电信的托管服务，在硬件方面的要求相对较低，但是如果使用学校自身的服务器，那么就要对服务器的维护形成制度性的操作，比如定时对服务器进行升级、杀毒、备份数据的操作。定期的检查服务器的网络通讯日志，了解服务器阶段性的工作情况，针对服务器易于被攻击的端口，调整服务器的防火墙设置。