浅谈网页设计教学中网站版面的编排与设计

第一篇：浅谈网页设计教学中网站版面的编排与设计

浅谈网页设计教学中网站版面的编排与设计

摘 要：网页设计可看做是平面设计的一个延伸，是将平面设计与信息化技术相结合的一门设计艺术。本文从网页设计中的审美需求和视觉流程入手，着重探讨网站版面的编排与设计，旨在为网页设计教学者和未来的设计师们提供参考。

关键词：网页设计；设计艺术；审美需求

近年来，人们的生活已经与互联网密不可分，在工作、学习，娱乐等各个方面，互联网带给我们的便利无可取代。网页可以说是互联网的脸，我们通过浏览网页来获取信息，进行沟通与交流。因此，一张好看的脸对一个网页、网站来说可以更吸引人。然而网页设计在我国仍处在一个较初级的阶段，专业的网页设计师数目很少，这就需要高质量的网页设计教学来培养更多的专业人才。如何综合文字、图片、色彩及用户审美需求等各方因素，编排设计出一个视觉效果良好的版面，是网页设计教学中的一个重点。用户的审美需求

上世纪末互联网刚登陆我国时，发展势头过于迅速。很多网站在创立之初只是想赶紧抢占一席之地，而没有将太多的时间和精力投入到网页的设计中，结果是虽然各个网站内容各不相同，但一看之下，版面几乎都是同一风格，几乎毫无新意，很快就导致了用户的审美疲劳。随着网络不断的发展，人们对网站的版面和整体风格越发重视，网站管理者若没有一张好看的“脸”，将很难留住用户。这就要求设计者们从艺术的角度出发，从用户的审美需求入手，结合平面设计中对美学的解释运用一些艺术的基本形式来改造网页的版面，从而使其更具美感、更有个性。

1.1 版面的规范化

网页版面的设计要遵循一定的规律，明确编排时的重点，分清主次内容，按由主到次的顺序逐步完成编排。尤其在使用符号、图片、文字、动画等内容时，要遵循平面设计中形式美的视觉规律，强调文字、图片及色彩的搭配。同时，网页的设计必须要与网页内容想关联，不可脱离主题，仅为美学而设计。

1.2 版面的均衡性

页面的编排中，可以将单个的文字看做是点，成行的文字看做是线，成段落的文字看成面。点、线、面的排列要强调均衡性。三种形式要因实际情况而采用。如单个文字，用起来会十分突兀，但可以让用户一眼就看到；成段文字可以排列十分美观，但用户可能因为字数过多而放弃阅读。文字的排列方式一般有水平、垂直、倾斜，前两种容易带给人稳定，安宁的感觉，而倾斜会让人不由产生运动感。合理的结合三种排列方式，保证页面整体平衡的情况下给局部安插一些斜体字，会显得更动感而富有生气。设计中的视觉流程

一个网站要得到用户的喜爱，其页面内容、整体布局都必须通过视觉感官使用户感到愉悦或欣赏。而精心设计过得页面相比随意的版面编排无疑要更容易吸引用户，从而增加网站的访问量。网站要通过网页传达信息，就必须要要虑到视觉元素的处理，只有拥有良好的视觉效果，才能称得上是新时代背景下真正意义上的新媒体。这就要求网页设计师们从人们的日常生活出发，更多的考虑人们的阅读习惯。对于网页版面的编排，各个元素之间的排列及其各自的大小、位置，都要结合阅读顺序。使用户保留自己的习惯，在阅读网页时感到轻松，自然。网页中各构成要素的分析

网页的作用在于传递信息，而网页设计就是服务于这个目的。通过优化网页中文字、图片、色彩的造型、排列和放置，使网页更美观，更容易让人获取信息。如何处理文字、图片和色彩，值得我们做更多的讨论。

3.1 文字的处理

文字是传递信息的核心部分，网页设计中一定会涉及文字的处理。且一般来说文字占整个页面篇幅较大，因此文字处理好坏直接影响到整个页面设计的水平。设计师在进行处理时需要考虑文字编辑的整体效果，应尽量给人以简洁亮丽的视觉效果，要避免页面中文字效果凌乱、复杂，过多刻意的修饰若使用不当反而会适得其反，因此在必要时，可以不加修饰，仅保留文字本身。此外，设计时还应注意文字的格式、大小及字体要配合文章内容。总而言之，要合理运用美学的观念编辑文字。

3.2 图片的处理

网络讯息传播的速度越来越快，造成了较普遍的“快餐式阅读”现象。这种现象是指用户在互联网上阅读时往往只关注标题和核心段落，而仅仅会对极少部分感兴趣的内容完成全文的阅读。网页上好的图片可以激发用户的阅读兴趣，而且图片的合理编排可以大大增加网页的美观，使得原本单纯的文本阅读变的更有趣味。因此，版面设计中必须重视图片的处理。选择图片的内容、数量、大小和方向等都可直接影响到网页的整体布局，在对图片进行处理时，我们要遵循精简的原则，尽量少的选择图片，尽量选择高质量高度切合主题的图片，力图用图片抓住读者。

未来的互联网到底会发展到怎样的一个程度，没有人可以预测。网页设计的出现虽然只有短短十几年，却必须要不断跟随互联网飞速的发展而不断变革和创新。又因为网页设计本身综合了传统媒体的各种平面设计因素，又必须讲设计师的美学理念通过计算机展现在网页上。这就要求网页设计师必须具备较高的设计文化素养，在设计中综合考虑各方面因素，且必须具备创新意识，紧跟潮流，应互联网之发展不断探索更高水准的网页设计。

[参考文献]

[1]Paul M.larsst.视觉传播――形象载动信息[M].霍文利译.北京广播学院出版社，2003，2（8）：6-10.[2]西门柳上，马国良，刘清华.正在爆发的互联网革命[M].机械工业出版社，2009，2（5）：22-24.[3]王受之.世界平面设计史[M].中国青年出版社，2006.2（5）：68-74.

第二篇：网页设计与网站建设

《网页设计与网站建设》实验教学大纲

课程编号070105007

学时学分：总学时：64总学分：4实验学时：

32适用对象：计算机科学与技术及相关本科专业

课程属性：专业方向课

实验属性：非独立设课

一、课程的性质与任务

随着Internet的普及，网页已经成为人们信息发布及获取、思想交流和商务往来最重要的途径，网页制作已成为当今社会上一种比较热门的技术，本课程突出实用技术和应用技能，是计算机专业学生的一门必选课，同时又可作为相关专业学生的选修课。

网页设计课程是学生在学习了高级程序设计语言、数据库原理及应用等课程的基础上开设的一门实用性较强的课程，实验课的任务是通过实验加深对理论知识的理解，基本掌握WEB应用的规划、设计和动态网页制作中对于内容的动态显示与更新技术，培养学生的动手能力和设计能力。

二、实验的目的与基本要求

实验目的：通过实验让学生掌握网站的配置方式和网页设计的基本方法。

基本要求：

（1）掌握页面的设计与布局的基本方法；

（2）掌握JS脚本语言的使用方法；

（3）掌握asp.net控件（包括HTML控件与服务器端控件）的使用方法。

三、实验考核方式及办法

实验成绩根据学生的实验完成情况、实验纪律、实验报告进行综合评定，给出优（90-100）、良（70-89）、及格（60-69）、不及格（60以下）。实验成绩占本课程总成绩的20%，对缺实验成绩或不及格者，《网页设计与网站建设》课程不予通过。

四、实验项目一览表

网页制作实验项目一览表

序 号2 3 4

5实验项目 名称

div布局 css层叠样式单

JS脚本 asp.net控件 ado.net数据库连接

实验 类型

验证性 设计性 设计性 设计性 设计性

实验 要求

必做 必做 必做 必做 必做

适用 专业

理工类 理工类 理工类 理工类 理工类

学 时6 6 6 8

五、实验项目的具体内容：

实验一div布局

1．本次实验的目的和要求

掌握网页设计的DIV布局方式，能够使用DIV进行层布局，认真撰写实验报告，严格遵守实验室规章制度。

2．实验内容或原理

掌握dream weaver软件的基本功能，熟悉dream weaver的工具箱,使用DIV做层布局。

3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有dream weaver软件，搭建好asp.net的开发环境。

4．实验步骤

（1）打开dream weaver软件；（2）使用div布局设计网页；（3）div的布局设计与修改。

5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。

6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。

7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

实验二css层叠样式单

1．本次实验的目的和要求

通过dream weaver软件的使用，掌握使用css层叠样式单做布局样式控制的方法，要求认真撰写实验报告，严格遵守实验室规章制度。2．实验内容或原理

通过dream weaver软件的使用，使用css层叠样式单做布局样式控制。3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有dream weaver软件，建好asp.net的开发环境。4．实验步骤

（1）打开dream weave软件。

（2）用css层层叠样式单做布局样式控制。（3）css层叠样式单编写与调用。5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

实验三JS脚本

1．本次实验的目的和要求

掌握JS脚本的基本用法、变量、函数、DOM文档对象的操作。要求认真撰写实验报告，严格遵守实验室规章制度。2．实验内容或原理

JS脚本的基本用法、变量、函数、DOM文档对象的操作。3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有dream weave软件。4．实验步骤

（1）打开dream weave软件。

（2）新建JS文件，编写脚本程序实现对JS脚本的变量、函数、DOM文档对象的操作。

（3）外部调用JS文件。5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

实验四 asp.net控件

1．本次实验的目的和要求

掌握asp.net控件（包括HTML控件与服务器端控件）的使用方法。实验后要求认真撰写实验报告，实验过程中严格遵守实验室规章制度。2．实验内容或原理

运用所学知识，用HTML控件与服务器端控件进行编程，实现简单功能。3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有asp.net开发平台。4．实验步骤

（1）打开asp.net开发平台。（2）新建空白页面或者空站点。

（3）用HTML控件与服务器端控件进行编程并调试。5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

实验五ado.net数据库连接

1．本次实验的目的和要求

掌握ado.net数据库连接的基本概念、ADO.NET对象模型、SqlConnection对象。

2．实验内容或原理

建立ado.net数据库连接，ADO.NET对象模型、SqlConnection对象。3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有asp.net开发平台。4．实验步骤

（1）打开asp.net开发平台。（2）建立ado.net数据库连接。

（3）通过SqlCommand对象提供的方法传递对数据库操作的命令，并返回命令执行的结果。5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

六、实验教材及主要参考资料

翁健红编著，基于C#的ASP.NET程序设计(第2版)，机械工业出版社

七、教改说明及其他

在实验教学过程中可以结合优秀网站分析、优秀作业点评、作业中普遍存在的主要问题及改正方法的分析等方法相互穿插结合进行教学。

第三篇：《网页设计与网站建设》教学总结

《网页设计与网站建设》教学总结

本学期11网络1班的网络程序设计基础课程采用的是人民邮电出版社的《动态网页设计与制作——CSS+JavaScript》吴以欣 陈小宁主编。这本教材总体还是比较适合于高职学生。在实际教学中我广泛选择利用其他较适宜的教学资源，注重入门练习。作为教学的补充，我将一些资源和教师多年教学积累整理成课件发给学生。现将一个学期的教学情况总结如下：

一、老师给与学生合理的引导，更要加强自身的素质修养，提高自己的知识水准。

在整个教学过程中，在教学过程中自己还缺少更高的艺术修养和艺术创造能力，所以还要不断的学习；另外就是技术上还需要完善，也需要和有经验的老师多交流，多沟通。相信只有站在一定的高度去看整个项目的实现，会更通俗易懂也更有说服力，所以也不能说都是学生的原因，归结起来还是要提高自己的知识水平和业务素质！

二、了解学生，加强考核。

针对全体学生来说，聪明程度相当，但学习兴趣层次不同，大部分学生只愿意听后选择性的接受，而没有知识的创新利用，或者是没有下去自学，巩固知识，单一的只是听和做。有的同学，上完课后根本就直接把书丢在一边置之不理。综合学生的学习态度问题，个人认为还需要加强考核制度，从严制学，宽进严出，严肃考风！

三、教学内容心得

1.网页制作要简洁大方。网站在设计过程中以简洁大方为主，配合合理的颜色搭配和主题内容的诠释，给访问者赏心悦目的感觉；而避免过多的动画和帧的过多运用，以及不明确的导航，杂乱的颜色，没有主题的胡编乱造。

2.网站风格要统一。所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，也会对你的网站留下一个“很专业”的印象。知识运用中要大量配合合理的模板、CSS样式的运用而避免在网页中反复的字体样式重定义、颜色的胡乱运用，参差不齐给人杂乱的感觉。

3.网站布局合理。避免一些“拿来主义”，一些学生为了设计方便，拿网上流行的模版做网页，做出的网页几乎是千篇一律，没有特色，虽然完成了网页的制

作，毕竟不是出自个人之手，知识缺乏进一步巩固，且让浏览者产生厌倦。另外导航清晰化，能引领浏览者阅读网页，思路一定要清晰，避免交叉链接。

4.网站容量要小。虽然网页更加美观可以吸引浏览者，但是图片，动画容量大会影响浏览速度，所以一定要注意网络容量问题。图片尽量压缩，多采用单一色，或者简单的颜色；动画要尽量简洁实用，用最少的帧做出最漂亮实用的动画，给网页增色。

但是总体来说，通过整个学期网页制作的学习，学生已经了解了网页制作所需要的基本技术，也掌握了网页制作的基本技能。但由于时间紧迫，知识点多，一些重点难点问题还需要勤加练习，比如：静态网页中的布局和CSS 的定义；动态网页中对象的综合运用等等。当然也存在着遗憾，不少学生反映，学习爱好更多的是动画的制作即 Flash的学习，而我们只是笼统的讲解，不能完全满足学生的求知欲！当然针对网页制作来说，还需要加强学生的配色观念以及审美观的培养，以及动态网页的实现技术的把握，在很多方面还需要老师和学生们进一步配合，共同学习和实战，以达到知识运用的一定高度！

第四篇：《网站建设与网页设计》教案

《网站建设与网页设计》

教案

学期：2014-2015-1 班级：2012软件工程

2012计算机科学与技术

课时：44学时 教师：李念

第1讲 HTML基础

1.1 教学目的和要求

1.了解HTML的发展历史和HTML5的特性；

2.掌握HTML的文档结构、代码规范和网页文件的创建过程； 3.掌握搭建支持HTML5浏览器环境的方法。

1.2 教学重点和难点

1.HTML5的新特点； 2.HTML5的新元素；

1.3 教学方法及手段

实例教学，讲授与演示结合。

1.4 教学内容

1.4.1 HTML简介

HTML是HyperText Markup Language（超文本置标语言）的缩写，是一种为普通文件中某些字句加上标签的语言，其目的在于运用标签（tag）对文件达到预期的效果。

HTML5的特性及元素：

(1)实现Web应用程序：绘画的Canvas元素，该元素就像在浏览器中嵌入一块画布，程序可以在画布上绘画；更好的用户交互操作，包括拖放、内容可编辑等；扩展的HTMLDOM API（Application Programming Interface，应用程序编程接口）。

(2)更好地呈现内容：基于Web表现的需要，HTML5引入了更好地呈现内容的元素；用于视频、音频播放的video元素和audio元素；用于文档结构的article、footer、header、nav、section等元素。

1.4.2 HTML编写规范

HTML文档由标签和被标签的内容组成。标签能产生所需要的各种效果。其功能类似于一

个排版软件，将网页的内容排成理想的效果。其格式为：

<标签> 受标签影响的内容 每个标签都有一系列的属性。标签通过属性来制作出各种效果，格式为： <标签

属性1=“属性值1” 属性2=“属性值2” „> 受标签影响的内容 。不推荐使用的标签：在HTML中，某些标签不推荐使用，例如，、、、、、、、、、等标签。

代码的缩进：在编写HTML代码时要注意使用代码缩进来提高程序的结构性和层次性。

1.4.3 网页文件的创建过程

用记事本创建网页 用DW软件创建网页

1.4.4 搭建支持HTML5的浏览器环境

目前，Microsoft的IE系列（仅有IE9及其以上版本）浏览器，以及Opera Software的Opera与Google的Chrome浏览器。

1.4.5 小结

本次课主要讲述了网页设计的步骤和要点以及HTML5的新特征。

第2讲 HTML标签

2.1 教学目的和要求

1.掌握基本的文字与段落标签的使用；

2.掌握超链接、图像、表格和列表标签的使用方法和基本属性； 3.能够进行基本的网页排版。

2.2 教学重点和难点

1.各类标签的使用方法和属性设置； 2.嵌套列表的使用。

2.3 教学方法及手段

实例教学，讲授与演示结合。

2.4 教学内容

2.4.1 文字与段落排版

注释标签 强制换行标签
段落标签

„