高级网页设计大全11篇

高级网页设计篇（1）

1.平面视觉

元素文字、图形、图像与颜色等平面设计的构成元素。设计之所以为设计，在于其创造性地组合、分离、叠加、重复等手法的运用。元素是素材，也是整个设计的基础所在。各元素的运用手法不同，其作用也大有差别。但一般来讲，我们认为文字是信息概括能力最强的形式，而图片则是追求视觉冲击的最佳方式。

2.网页设计

平面设计是一个较大的概念，其中就包含了网页设计。顾名思义，网页设计是针对网页的需求而进行的设计，包括功能设计、形象设计以及信息设计等内容，其目的还是在于实现网站的某些功能，同时提高美观性。

二、平面视觉元素在网页设计中

1.网页设计中使用平面视觉元素的问题示范

（1）板式编排上

编排是一个整理、再构的过程。目前许多网页中，各种元素要么无序堆叠，要么过于单薄，无法形成元素间的配合。此外，编排能够起到建立网页级别的作用，只需要通过在编排上的区分就可实现。但在现实中，许多网站设计者都忽视了这一作用。一级、二级、三级的素材混合使用，提高了浏览者收集信息的成本。

（2）文字排列上

作为网页信息的主要载体，有时候需要对文字做加粗、加大、加下划线等处理，同时，还有对文字加链接的情况。这样的设计可能会分散浏览者的注意力，而且破坏了文字板块与板块间的平衡关系。此外，有网站为了在一个页面上实现更多的信息传递而大幅堆叠文字元素。造成整个网页看起来密密麻麻，非常厚重，这是一种十分考验浏览者耐心的做法。

（3）色彩搭配上

红配绿固然难看，但却有较强的视觉吸引力。因此，色彩的搭配中的和谐与冲突是一门富有哲学意味的学问。目前我国的某些网站，为了在色彩搭配上“不出错”而大幅度使用同色系、同色调的颜色搭配，如只有暖色调的网页和冷冷清清的冷色调网页。二者都不能有主有次地吸引浏览者的目光，反而会造成视觉审美疲劳，无心看下去。同样的道理，太过丰富的色彩搭配容易喧宾夺主，过犹不及。

2.平面视觉元素在网页设计中的正确运用

（1）按需设计网页版面

网页版面的设计依据应该是该网页的级别、应当突出的重点信息等需求。因此在设计网页版面时，需要根据信息的内容特点来制定色彩搭配、板块大小和形状特征等元素内容。不应毫无目的地随意设计。

（2）文字设计尽量简洁

文字在网页设计中的信息承载功能无可替代，但不合理的文字排版很容易干扰浏览者阅读网页。因此，不宜使用过度的艺术字和复杂的字体花样。同时文字所占的板块也不宜过密，最好使用图片等元素进行间隔。

（3）色彩搭配注重整体性

根据整体风格设计配色的主色调，如科技类网站最好使用冷色调为主，而情感类网站则需要更多暖色。在确定整体的色彩选择后，在比较重要的局部可以用另一种颜色来进行区别，以突出重点。同时还能制造出画面冲突，增加视觉上的刺激性。

三、平面视觉元素在网页设计中形成的价值

1.提升美感，赋予网页艺术性

平面视觉的各元素通过彼此之间的搭配、对立形成一幅整体和谐，局部冲突的画面，这样的网页更具艺术性和美感，能够提升浏览者的观看体验。

2.吸引浏览，实现网站建设价值

一个美丽的网页往往能吸引更多的用户进入浏览，并且增加他们在网页上的滞留时间。从而提升了网页点击率、滞留时间等指数。注意力经济时代中，只有有人看的网页才有价值，只有吸引更多地浏览才能给网站创造价值留下空间。

3.激发需求，促进人才全面发展

平面视觉元素是由设计人员来应用的，且对设计人员提出了较高的技术要求。网页设计中，设计人员需要熟练使用包括AE、CorelDRAW、Photoshop在内的各种软件。同时，还需要设计人员有较高的艺术涵养。因此网页设计刺激了对人才的需求，从而刺激了社会需求和设计专业的教育发展。

高级网页设计篇（2）

一、网页设计中的文字 文本是网页中最为重要的设计元素，网页的正文部分都是由文字的群体组合而成，从艺术的角度讲，文字群体排列组合的好坏，直接影响着页面的视觉传达效果。因此，文字群体的设计是增强页面视觉传达效果，提高文字的艺术表现能力的关键。

注重文字的可读性 网页设计中的文字应避免凌乱、烦琐、难于辨认，为了设计而设计，忽视页面的亲和力、可读性和用户体验。

调整合适的字体、字号和行间距 字体的设计是设计者直觉和审美的体现。使用说明字体都要从页面的整体和总体设计原则考虑，黑体强壮有力，草书则更加有艺术感，但从浏览网页的终端考虑，最好采用默认字体，因为好看的字体浏览终端不一定支持。

字号的大小有不同测量标准，一般情况下用磅和像素来表述，在网页设计中默认用磅表示字体的字号，网页正文部分一般不用12磅宋体字。

行间距变化也会对网页的用户体验和美感产生影响，一般情况下，与字号大小接近的行间距比较适合浏览者的审美观。

3.文字的图形化

所谓文字图形化是指用单个的字、词、句甚至一段文字，巧妙地排列组合成生动有趣的画面，使图文有机地结合在一起，形成图文交融、相映成趣的视觉效果。在文字的图形化过程中不要单纯追求文字图形的美观，还要注意文字的可读性，只有这样才算是成功的文字图形化。

二、网页设计中的图形和图像 图形、图像是最早引入网页设计的多媒体元素，它们能将信息传达得更具体、真实、直接，易于理解，从而高效率、高质量地表达设计理念，使网页充满强烈感情色彩，增强用户体验。

网页设计中的图形 点、线、面是平面设计中的基本元素，而网页设计中的图形都是由这些基本元素通过不同的排列组合而成的，比如，圆形、方形、菱形、三角形等。

2.网页设计中的图像

网页中的图像主要分为：LOGO（标志）、背影、主图和超级链接；常用的图片格式有jpg 和 gif 等。

LOGO 具有象征、识别功能，是网站形象、文化和主题思想的浓缩。一个成功的 LOGO 能够提升网页的层次，起到画龙点睛的作用。

背影图像把整个页面变成一个写实场景，与网页主题相辅相成，从而突出主题思想，凸显网页风格。网页主图是指页面中突出主题，表达主题思想较大幅面的图形图像，一副好的主图能清晰、准确的表达网页的主题，并具有直观、易于理解等特点。

将图像设置成超级链接，能够使超级链接变得样式丰富，形象生动的图像能够消除语言障碍，可以给单纯的文字信息增添活力，从而增强用户体验。

三、网页设计中的色彩 网页的色彩搭配是制作网页成功与否的关键。网页的背景、文字、图标、边框、超链接等，应该采用什么样的色彩，应该搭配什么色彩才能最好地表达出网页的主题，一直是网页设计者头疼的问题。

一个成功的网页配色，首先要清楚怎样将网站主题思想传达给用户，然后再根据这个主题思想来确定网页设计的色调搭配，从而提高网站的访问量。

高级网页设计篇（3）

二、交互作品《中国皮影戏》的交互设计与软件实现

在这个项目中，组员共同探讨了将中国皮影戏的人物动静态表现与页面相互关联的交互设计和软件实现话题。笔者遵循交互网站页面的设计规范，页面按钮实现了交互设计，同一个页面中使用的选择按钮实现效果相同，通过指针弹起和点击时的不同效果实现页面切换命令，其中还将页面的图片进行了按钮链接，真正实现交互网站图文并茂。做交互设计时遇到的最棘手的问题就是每个页面的按钮链接。首页的链接有六个，二级页面的链接按照展示的内容制作。以首页的表演形式为例，点击首页表演形式按钮，按F9键跳出动作面板，在影片剪辑控制里面双击“onrelease”，然后在“浏览器/网络”里双击loadMovieNum，然后在括号里面英文状态下输入｛“biaoyanxingshi.swf”，1｝，这样首页链接到表演形式的二级页面就完成了。其他的链接步骤都一样，只是输入的链接名称不一样。要注意的是，要把所有要链接的文件名以英文命名，而且要放在同一个文件夹里。在链接网页页面时候，三级页面的返回是链接到上一级页面即二级页面，二级页面返回到一级页面，首页链接也一样，都是通过一级一级的链接完成，所有的链接都是在Flash中完成的。

高级网页设计篇（4）

网页设计课程是中职学校计算机类专业的一门主干课程，为了满足社会对网页设计人才的技术要求，从教学思想上要更新观念，其教学内容和教学方法也要与时俱进，让学生掌握DIV+CSS这种主流的网页布局技术，加强学生的实践动手能力，力求使学生更能适应当今市场的需求。

1 引言

采用DIV+CSS布局页面已是网页设计的主流，多数大型门户网站都使用该方式进行网页的布局排版。以前的表格布局方式几乎被淘汰，从应用实践上看，DIV+CSS布局方式实现了网页的内容和表现形式相分离，有利于网站的维护，利于SEO优化，加快了网页的加载时间，用户体验较好。

2 DIV+CSS布局概述

DIV+CSS布局技术采用HTML中的DIV标签进行整体布局，之后采用CSS（Cascading Style Sheets）即层叠样式表进行网页的表现设定。用DIV将页面进行分块，搭建网页的整体结构，用CSS定位添加样式，如：加入边框、背景等创建网站表现，达到美化网页效果。实质就是使用HTML对网站进行标准化重构，使用CSS将表现与内容相分离。

3 几个教学难点

用DIV+CSS来布局网页是目前主流的网页布局方式，而盒模型、浮动、定位、浏览器兼容等技术是网页布局中的难点，也是网页设计教学中学生认为较难理解掌握的关键技术。

3.1 盒模型

盒模型是DIV+CSS网页布局的核心，任何HTML元素都可以看作是一个盒子，用CSS布局网页主要就是通过CSS定义的不同大小的盒子与盒子嵌套来布局网页。网页由许多个盒子通过不同的排列方式（并列、上下或嵌套）堆积而成，这些盒子之间会产生互相影响。所以既要理解盒子本身的构成，又要理解盒子与盒子之间的关系。其中填充、边框和边界是盒子的3个重要概念。盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外与其他盒子之间的距离，称为边界（margin），默认情况下盒子没有边框，背景色是透明的，所以，在默认情况下我们看不到盒子。

盒子模型主要有4种属性：内容（content）、内边距（padding）、边框（border）和外边距（margin）。

一个盒子的实际宽度或高度是由内容+填充+边框+边界组成的。盒子大小border+padding+width/height，盒子宽度=左border+左padding+width+右padding+右border，盒子高度=上border+上padding+height+下padding+下border如图1所示。

只有深刻理解了盒模型的含义，利用CSS控制内容的大小，以及margin、padding和border的上、右、下、左4个方向的值，才能正确设置好盒子的大小，按设计要求合理布局。

3.2 CSS中的浮动与清除浮动

默认情况下，任何一个盒子都按文档流上而下，自左到右的顺序方式显示。但是盒子按默认的显示往往无法达到设计者所需要的布局效果。浮动就是一种解决方法。浮动就是使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

浮动有3个属性值：none、left和right，其中none为默认值，也就是文档流通常的显示状态。right或left，表示盒子会向其父盒子的右侧或左侧移动，同时，盒子的宽度会恢复到原来默认的大小，即根据盒子里面的内容宽度来确定。

元素浮动后有下列特性：（1）块级元素单独在一排显示。（2）内联元素能够设置宽高了。（3）不设置宽高的时候宽度由内容撑开。（4）浮动元素脱离文档流。

清除浮动也是一个难点。由于浮动的元素高度会塌陷，要清除浮动造成的影响，所以要清除浮动。清除浮动的方法有：（1）加高，存在的问题：扩展性不好。（2）父级也浮动，存在的问题：页面中所有元素都要加浮动，影响布局，不推荐使用。（3）inline-block清浮动方法，存在的问题：margin左右自动失效。（4）使用带clear属性的空元素清除浮动。方法是在浮动元素后使用一个空元素，如

3.3 CSS中的定位

定位是CSS用来改变盒子位置除浮动以外的另一种方式。定位position不能单独设置，必须还要配合top、right、bottom和left（以下简称TRBL）这4个属性才起作用。在CSS中定位position属性有4个参数值，分别为static、fixed、absolute和relative。

static是默认的文档流方式；fixed是固定定位，与绝对定位的特性基本一致，其差别是始终相对整个文档进行定位；relative是相对定位，指在文档流的排列基础上，盒子的位置相对于盒子的在文档流的原来位置而做的改变，相对定位的盒子依然是在文档流中。相对定位的特点：a.不影响元素本身的特性.b.不使元素脱离文档流；c.如果没有定位偏移量，对元素本身没有任何影响。

absolute是绝对定位，以已定位父元素或body元素的左上角为参照物根据TRBL的值产生位移。绝对定位的特点：a.使元素完全脱离文档流.b.使内联元素支持宽高；c.块屙陛标签内容撑开宽度；d.如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；e.相对定位一般都是配合绝对定位元素使用。

3.4 块状元素与内联元素

块级元素：一般是其他元素的容器，可容纳内联元素和其他块状元素，块级元素特点：①单独占一行显示；②高度、行高以及外边距和内边距都可控制；③它可以容纳内联元素和其他块元素。

内联元素：内联元素只能容纳文本或者其他内联元素。内联元素的特点：①与其他元素都在一行上显示；②高、行高及外边距和内边距不可改变；③宽度就是它的文字或图片的宽度，不可改变；④内联元素只能容纳文本或者其他内联。

块级元素和内联元素的转化可以通过display属性来完成。块级元素和内联元素也是DIV+CSS布局中的重要概念，学生要理解掌握，才能灵活使用。

3.5 兼容问题

浏览器的兼容性问题是每个网页设计者都会遇到的最头疼的问题，也是必须要解决的问题。造成浏览器兼容性问题的根本原因就是各浏览器生产厂家使用了不同的内核，并且它们处理同一件事情的思路不同。

由于浏览器内核有所不同，对网页进行语法解释也存在差异，同时相同网页在不相同的内核浏览器内所显示出来的效果也不同。即使是相同内核的浏览器，如果开发公司不同或者版本不同，其对于相同网页的渲染效果，也会有所不同。这就是浏览器兼容性的问题，要么使得页面变形不美观，要么会导致网站信息错乱，例如有：（1）IE6对hover的不兼容性问题；（2）不同浏览器页边距不一致的问题；（3）父元素与子元素之间的margin-top问题；l（4）水平居中的问题。

高级网页设计篇（5）

结果，对于“美术风格”的感受，相对集中在辽师大体育学院、重庆师大美院；对于“教育性质”的感受，相对集中在辽师大心理学院、四川美院；对于“美院”和综合性大学美术类二级学院的区别，“美院”中有6个被认为像二级学院，22个美术类二级学院中有9个被认为不像二级学院。采用同样方式，对22个综合大学网站主页与其美术类二级学院首页进行对比调查，普遍认为风格不一致；对辽师大主页与其20个非美术类二级学院首页进行对比调查，也普遍认为风格不一致。

可见，二级学院在形象设计中普遍忽视与学校主页的关联。根据调查和测试结果可知，在一般人眼中，30个美术学院的网站形象没有明显地表现出美术的特点，“美院”和综合大学美术类二级学院总体上不易区分。美术学院网站有的看起来像政府部门，有的像个人博客，有的像购物网站，整体形态比较混乱。

二、形象风格不统一源于缺少认同意识

网站形象设计是网页形象的系统化设计。一个网站中的网页数量通常很庞大，网页设计者不仅需要色彩搭配、文字排版等具体的平面设计知识，也需要CIS系统化的形象识别设计和UI用户界面设计知识。在本次调查资料中，多数美术学院的首页与其深层页面形象大体能够保持一致，说明设计者普遍具有系统化形象设计的意识。可见，问题并不出在设计者的专业知识上。混乱的设计是不成熟的设计。艺术创作历来鼓励多元与自我，在艺术创新思维的影响下，设计者为了突出产品特色，尽可能强调与众不同。有人甚至宣称“即使做低级的自我，也不做高级的模仿者”。

在形象设计中，协调与多样是辩证统一的。在一些美术初学者的作业中，造型和色彩经常出现花、乱、碎等现象，缘于其缺少把握整体关系的能力。目前网站形象风格定位的混乱，并非设计者缺少形象创造能力，也不是缺少系统化形象设计意识，而在于设计者缺少认同意识。设计中的认同意识，指设计者应该主动表现出一种群体特征，使自己的作品不显孤僻，避免离群。简单地说，认同意识是一种求同的意识，而形象创新似乎总有求异的倾向，二者在一定的层面是存在矛盾的。梳理二者的关系，是解决问题的关键。

三、美术学院网站设计者应强化认同意识

对个体的外形和细节进行借鉴和模仿，并不是认同意识的体现。在本次调查的美术类二级学院首页形象中，有1个学院的首页颜色布局与中国美协首页相似，有3个学院的首页标题栏和栏目样式与中央美院相似，均被指缺少原创精神。在艺术形象创作中，借鉴和模仿从来都是一种过程，而不是最终目标。认同意识是寻求成为一个整体中的一员，而不是个体的追星族。可以没有具体榜样，但是需要认同意识。事实上，人们心目中的榜样是带有理想成分的。认同意识是对一个群体精神进行探寻的动力，是在个体基础上、超越个体的抽象思考。

如果希望在美术学院网站形象设计上得到认同，至少要对同类学院有全面的了解，对美术和教育精神有足够的理解，对具体美术学院的特色有准确的定位。在认同意识的推动下，行为和作品逐渐获得业内的广泛认同，是成为业内领军者的前提之一。因此，认同意识并不排斥创新，而是推动创新。受到广泛认同的形式，是形成行业共识的基础。例如，多数二级学院把书法体的学校名称和校徽放在标题栏醒目位置。主动把这种形式作为一种规则，并不会对网页形象设计造成损害；相反能够通俗、清晰地反映出二级学院的性质，应该主动遵守，作为获得群体认同的一个具体因素。

例如，在本次调查中，“美术风格”认同较高的截图，比较明显的特征是图片大、色彩醒目而文字较少；对于“教育性质”认同度较高的首页截图，里面都有戴博士帽的人物形象；页面内容多、排布规矩的普遍认为是二级学院的网页，内容少而形象精致的多被认为是学校主页……这些群体的感受经过进一步抽象加工，可以形成行业参考。再如，在全球最大的模板供应商美国网页怪兽公司中文页面搜索选项中，有120个行业类型、17类风格，其中包括艺术类、教育类网页模板和公司组织、校园风格，这种分类是对不同行业形象研究调查的结果，有整体的借鉴价值。然而模板技术的应用，会使得网页形象设计由面对内容转为面向形式，失去创新动力，需要批判地加以借鉴。

高级网页设计篇（6）

摘要

步入21世纪以后，网络成了我们生活中必不可少的元素，于是各种各样的网站便如雨后春笋般地出现。在商业网站越来越多的今天，像学校网站、慈善网站等社会公益网站也不能忽视其发展，于是我就以高中校园生活为主题制作了一个学校类的公益性团体网站。

是属于浙江省平湖市当湖中学高三（5）班的网站。初步设计了这么五大版块：《98master专栏》《98孵化园》《我贴,我贴,我贴贴贴》《重要新闻》《精彩连接》等5大板块，通过3个月左右的时间来完成本网站的建设。而且要上传到/98master成功使用。

这个网站极具创新意义。自主设计模板，留言板程序采用FLASH,ASP语言编写，操作方便，而且风格新颖，功能强大，使用VBSCRIPT和JAVASCRIPT实现各种特效，特效设计新颖，使得网页别具一格。版面布局采用统一规划，协调一致，让浏览者感受到站点独有的风格，与众不同。内容上宣传班级、服务学生，使网站的效果更加突出。

本网站用FrontPage2003，DreamWeaverMX2004，FlashMX2004，PhotoShop7.0，PhotoImpact8.0等工具开发制作。

在网站的总体设计上比较花时间，结合ASP制作留言版，这个板块又是有很大的技术含量的。而且，首页、主页等都要结合VBSCRIPT和JAVASCRIPT等语言编写，这个不但要技术，还需要很大的耐心。这个网站共包括5大板块，十几个专题板块。这个网站还是比较大的，这对我来说是一个考验，在制作的过程中也遇到了不少的难题。如程序调试出错，数据库连接错误等一系列问题，并在不断地调试，修改中解决这些难题。

本课题的目的是对自己在大学的所学进行一次总结，也可以说是一次挑战自己的机会，可以认清自己到底学会了多少。

目录

引言

第1章网站设计准备

1.1班级网站等公益性团体网站的建设的需求分析

1.2班级网站等公益性团体网站的建设的可行性分析

1.2.1可行性分析

1.2.2开发软件分析

1.3班级网站等公益性团体网站留言板的关键技术介绍

第2章网站内容分析

2.1设计思想

2.2网站命名及域名注册

2.3设计网站形象

2.4主页设计

2.5网站的内容设计

2.6各版块的内容分析

2.6.1首页版面设计

2.6.2主页设计

2.6.3校园民谣

2.6.4异彩流言

2.6.5语丝

2.6.6班级相册

2.6.7校友资料

2.6.8班级资料

2.6.9服务专区

2.6.10在线日历

2.6.11校友录

2.6.12校友录（新）

2.6.13旅游经

2.6.14音乐经

2.6.15生活、感悟

第3章网站调试

3.1留言板的使用说明与安装

3.2网站图文配合

3.3颜色调配

3.4网站调试

第4章毕业设计的总结与心得

4.1总结

4.1.1网页内容的选择要不落俗套

4.1.2网页命名要简洁

4.1.3要及时更新网页

4.1.4注意视觉效果

4.1.5网页内容要易读

4.1.6考虑浏览器的兼容性

4.1.7不宜多用闪烁文字

4.1.8每个页面都要有导航按钮

4.1.9网页风格要统一

4.1.10善用图像

4.1.11不能忽视错别字

4.2创新点

总结

谢辞

参考文献

参考资料

1、《网页标题制作技巧与实例》--吕少华著--清华大学出版社

2、《网页艺术设计》—顾群业著---山东美术出版社

3、《Web可用性设计》--［美］JakobNielsen著--人民邮电出版社

4、《网站架构与美工黄金组合》--天蓝工作室著--人民邮电出版社

5、《网页设计与网站开发---HTML网页制作网站开发完全实战》--伍梵华--航空工业出版社

6、《广告制作》--樊志育--人民邮电出版社

7、《ASP实例教程》--言金刚彭进展---浦东电子出版社

高级网页设计篇（7）

中图分类号：G718.5 文献标识码：A 文章编号：1009-3044（2013）30-6837-02

1 概述

网页布局在网页设计与制作中变得越来越重要了，访问者不愿再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功结合时，这种网页才是受人喜欢的。

2 早期网页布局的方法

早期页面布局的方法主要用表格和框架。在HTML和浏览器还不完善的时候，要想页面内的元素能有一个比较好的格局是比较麻烦的事情，由于表格不仅可以控制单元格的宽度和高度，而且可以互相嵌套，所以为了让各个网页元素能够放在预设的位置，表格就成为网页制作者的得力工具。

表格在版面布局上比较容易掌控，通过表格的嵌套可以很轻易地实现各种版式布局，但是在制作一个比较复杂的页面时，HTML文档内将充满和标签。同时，由于浏览器需要把整个表格下载完后才会显示，因此如果一个表格过长的话，那么访问者要等很长时间才能看到页面内容。用表格布局存在着HTML文档的内部结构变得混乱，HTML文档字节数变得越来越大，在手持设备上不支持，页面修改工作量大等缺点，正是这些弊病，使得网页设计者开始关注Web标准。

3 CSS概述

CSS是web一系列标准中的一个，是web标准中表现标准语言。在web标准中，将网页主要划分成3部分：结构、表现和行为。其中结构对应的标准就是结构化标准语言，主要包括XHTML和XML；表现对应的是表现标准语言主要包括CSS；行为对应的是行为标准语言主要包括对象模型（如W3C DOM）、ECMAScript等。

CSS（Cascading Style Sheets，层叠样式表）目前推荐遵循的标准是W3C于1998年5月12日的CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格布局、帧和其他表现语言。纯CSS布局于结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，又称为“级联样式表”，它是一种用来表现HTML或XML等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，能够根据设计者意图，对网页字体、段落、列表、背景、边框等进行随心所欲的控制，是目前基于文本展示最优秀的表现设计语言。纯CSS布局与结构式XHTML相结合能够将网页的外观与结构分离，使站点的访问及维护更加容易。

4 DIV+CSS布局方案

根据新的Web标准，采用DIV+CSS的页面布局方案，首先要求把HTML结构化，对于网页的外观可暂不考虑。也就是把内容放在DIV中，结构由DIV产生，最后使用CSS来进行“外观”设计，即进行网页的布局。

在网页设计前对网页进行规划。例如，一个页面可能得到类似这样的几块：

标志和站点名称（网页头部）、主页面内容、站点导航（主菜单）、子菜单、搜索框、功能区、页脚（版权信息）等。

采用DIV+CSS进行网页布局相对与传统的TABLE网页布局相比还具有表现和内容相分离、更方便搜索引擎的搜索、提高页面浏览速度、易于维护和改版等优势，采用DIV+CSS对网站重构可以大大提升网站用户与搜索引擎的友好度。

5 DIV+CSS布局在教学中的实践

在网页设计教学中，通常是通过对网页设计软件（例如dreamweaver8.0）用法的讲解来介绍网页设计的一些概念和方法，在网页布局上更多的是使用表格或层来实现，当前高职网页设计教材对网页布局介绍通常都是以表格布局为例，对CSS介绍的比较少，用DIV+CSS布局的介绍就更少，用DIV+CSS布局的网页案例十分少见。但在技能型人才的培养上，我们我们必须让学生掌握当前主流的网页布局技术，现在个公司在网页设计人才的需求上，对掌握DIV+CSS网页布局技术也是一个基本要求了，因此在网页设计课程教学中加入DIV+CSS布局的内容就显得十分必要。基于上述原因，我在教学中注重以下几个问题。

1）收集有关教学资料，丰富教学资源。由于DIV+CSS布局的教材难以找到，因此我就在网上找一些有关DIV+CSS布局的技术文章和用DIV+CSS布局的网站案例，然后整理这些资料，形成DIV+CSS布局原理、知识和案例的教学资料。

2）认真贯彻WEB标准，由HTML升级到XHTML。现在绝大多数网页设计教材讲解的还是HTML标记语言，但在WEB结构标准语言中，主要使用XHTML，因此在HTML基础上要加入XHTML教学内容，既要讲解HTML用法和主要标签，也要讲解为什么要由HTML升级到XHTML以及他们之间的比较。

3）加强层叠样式表CSS的教学，为DIV+CSS网页布局打下基础。CSS是对HTML3.2以前的HTML版本语法的一次重大革新，它简化了HTML各种繁琐的标记，使得各个标记的属性根据有一般性和通用性，特别是采用应用外部CSS文件的时候，页面的HTML可以变得非常干净和整洁。在CSS教学中，除了要介绍CSS的常用属性以外，最重要的就是要让学生理解框模型（BOX Model）了，这是DIV+CSS网页布局的基础。

4）重视实训教学，提高学生动手能力。在讲解了必要的DIV+CSS网页布局知识之后，为学生提供一些DIV+CSS布局的网页案例的基础上，就要加强学生的实践训练了，我院通常是在网页设计课程教学结束之后，安排为期三周的实训教学，主要是培养学生网页布局的能力。

6 结束语

本文研究目标旨在改革现有网页设计课程教学的内容与模式，以培养高素质的网页设计人才为出发点，切实提高学生的动手实践能力，满足社会对网页设计人才的技术要求，进而保证该课程的教学质量和市场特色。为实现这个目标，我们对教材内容进行改进与扩充，使教学内容更加贴近实际需要，力求使学生更符合当今市场的需求，并为后续课程的学习打下基础。

参考文献：

[1] 李烨.别具光芒DIV+CSS网页布局与美化[M].人民邮电出版社，2010.

[2] 张晓景.DIV+CSS网页布局商业案例精粹[M].电子工业出版社，2009.

[3] 黄玉春 CSS+DIV网页布局技术教程[M]. 清华大学出版社，2012.

高级网页设计篇（8）

1引言

伴随着时代进步，万维网与人们的日常生活已经逐渐融为一体。同样，在现代企业发展过程中，也应该随大势紧跟网络的脚步，由此企业网站的门户作用也逐渐凸显，而作为关键的门户，网站的设计制作更是重中之重，由此为提高网站水平，引进人才的举措必不可少。而作为人才基地的高校，应高度重视网页设计与制作课程设计的发展，积极探索网页设计与制作课程教学改革的科学方法。新课程改革的背景下，高校教育模式的限制就显现出来，在此情况下，网页设计与制作教学在实际操作中在各个板块的弊端，都需要通过具有针对性的方案予以解决。而在本文中，针对具体教学问题进行分析，以期促进教学水平的提升，希望本文能对广大教育工作者有所启发，推动网企双向发展。

2“网页设计与制作”课程教学案例分析

“网页设计与制作”课程是我校公共计算机课程改革试点项目的二级课程，它面向整个学校计算机管理专业，相关专业根据其专业特点和教学需要，具有五个课程特点，是一种自我选择的课程，属于“大学计算机基础课程”之后的高级课程。

2.1“网页设计与制作”的教材分析

在进行“网页设计与制作”课程的学习之前，必须要求学生掌握相关的网络信息知识，这方面的知识包括网页的浏览、网页的搜索、知识的下载以及电子邮件的使用等，这些基础知识是为了让学生更好地具备对信息获取的技能。但是，由于大多数学生设计和制作网站，只能依靠操作。因此，教师需要传授“网页设计与制作”课程，以帮助学生更好地理解什么是网页，什么是网站？教会学生利用网页的基本构成元素以及超文本标记语言，来进行网页制作，帮助学生提高对“网页设计与制作”学习的效果，同时也能为往后相关的互联网知识学习打下基础。

2.2“网页设计与制作”的学情分析

通常学生在对“网页设计与制作”课程学习之后，他们能够更好地了解什么是网络信息，并且拥有利用信息的能力。他们通过了解网络知识，从而来更好地掌握对网络信息的下载、浏览、搜索、文件的发放及传输的技术等。通过调查研究发现，大部分的学生都希望自己能够制作出属于自己的网页，并把网页在互联网上。因此，大部分的学生对于“网页的设计与制作”课程具有浓厚的兴趣，而这些兴趣对于学生的学习具有积极影响。

2.3“网页设计与制作”的教学目标

“网页设计与制作”中，高校教师的教学目标主要分为三个方面，即知识与技能、过程与方法、情感态度与价值观。首先是知识和技能，必须帮助学生理解网页网站的基本概念，理解网页的基本元素，理解基本网页创建软件的界面和功能，并识别网站的地址-URL，超文本标记语言HTML，超文本传输协议HTTP；其次是过程与方法，老师通过分析和讲解这两种方法从而帮助学生掌握各项网页和网站知识；最后是情感态度与价值观，老师通过对“网页设计与制作”的教学，培养学生严谨求实的学习态度和勇于探索、崇尚科学的意志和品德。

3“网页设计与制作”课程教学存在的问题

3.1学生学习过于被动

我国高校“网页设计与制作”教学使用的模式，一般为老师教授基本理论，而后使用布置作业、模拟考核等方式来进行教学。而事实上，该种教学模式收效甚微。在死板生硬的高压教学下，学生对教学内容会出现本能抗拒，对枯燥的理论知识产生厌烦情绪，而在这种情况下，学生的积极性也受到了极大地遏制。由此产生的一系列恶性循环所导致的最终结果就是，学生没有打下深厚的理论基础，而之后的实际操作就更没有办法完成了。

3.2学生实践能力较弱

当老师演示时，学生对老师的行为并没有产生充分的理解，故此很多学生会轻视老师的演示，对实际操作的难度并没有一个确切的判断。而在实践中，又会出现学生对于具体规程的漠视，因为之前产生的自大心理而认为实践仅仅需要短时间就能完成。所以在实战中，许多学生才会发现，自己对详细的操作并没有深入了解，看上去简单的事情却很有难度，实战中根本无从下手。同时还有一些学生过于自我，忽视了网页设计和制作的科学性质，完全摒弃课本与老师的教授，通过自己的想法来指导操作。

3.3师生之间缺乏沟通

首先，在“网页设计与制作”的教学中，教师和学生并没有良性交流。同时，教师对学生的了解有限，对学生的具体情况不甚了解，学习程度与需求自然也无从判断。在教学中，一味照本宣科，无法充分满足学生的学习需要。其次，教师在课堂上的教授模式也至关重要，“只讲不问”，与学生的互动有限，参与度由此下降，课程也愈加乏味。再从学生角度出发，学生同样局限于传统师生关系，在有疑问的时候，因为害怕老师的批评等原因，不敢告诉老师。而学生间也同样如此，个体之间的学习是有限的，缺乏良好学习氛围是无法促进班级学习的良性叠加的。

4“网页设计与制作”课程教学改革的策略

4.1重新定位课程教学标准

为了能够调动起学生在学习“网页设计与制作”课程的主动性，首先高校的“网页设计与制作”教学课程应该遵循企业用人标准，在课程教学过程中，强调培养学生的团队精神，职业道德，网络信息收集能力，审美能力和艺术品质。其次，在“网页设计与制作”课程的教学过程中，还需要提高对课程教育目标的重视程度，根据新课程改革的教学要求来更好地培养学生的自主创新能力和创新思维，引导学生进行实践操作，让学生能够更好地掌握网页的规划能力、构建能力、设计能力以及制作能力等。

4.2优化教学内容

为了能够提高学生的实践能力，就必须要将“网页设计与制作”课程内容进行改革，以企业的用人标准和教学的需求来进行科学的设计，将这些内容延伸分为四个不同的模块，分别是Dreamweaver、Fireworks、Web基础知识和Flash。其中Dreamweaver包括网页跟踪的技术、网页站点管理的技术、动态网页设计的技术、数据库连接的技术以及其他基础的技术；Fireworks包括高级应用的技术，基础操作的技术和其他相关基础知识；Web基础知识包括网络的浏览器，网络的常用名以及高级应用措施等；Flash包括高级制作技术、基础动画制作技术以及其他相关技术。

4.3更新教学模式

高校“网页设计与制作”教学不该再局限于老式的教学系统，应积极拓宽视野，通过现代化的方式例如网上课程以及针对性的因材施教。在现代化的教学方面，首先要确保教机与学机的联动，确保学生都使用计算机，及时通过计算机传输并对学生的设计操作进行引导，提高学生的实践能力。同时，高校“网页设计与制作”在网上课程方面，也可以采取一定的趣味教学模式，跳出死板的老式图书教学，变更教学风格，通过视频等生动的方式，将技巧融入其中，帮助学生在潜移默化中慢慢对学习产生兴趣。

5“网页设计与制作”教学需要注意的问题

5.1以“新”制作网页

教师教学中应重视告诉学生网页内容的选择，避免出现俗套，需要强调的一个“新”字是很重要的。“新”这一原则要求，在设计网站的内容时，是指网站的内容不是被复制的，而是要形成一个属于自己的独特网站。环顾四周，许多互联网上的个人主页是简单的“杂货店”，内容虽然是包罗万象，但主题是一样的，每个人都几乎是一个“软件下载”或者“软件搬运”的员工，从开始的网络导航到最后的结束都没有任何的创新之处，缺乏创新的新鲜意义。因此，在网页设计教学的过程中，既要告诉学生对材料的选择上下功夫，同时也要做到对材料选择精准度的把控，以“新”为基础，以“精”为内容。

5.2以“简”来取网名

由于网站不能由单个网页组成，因此它有许多子页面。为了使这些页面有效连接，教师必须告诉学生，要为这些页面提供一些具有代表性和简洁易记的网页名称。这不仅有利于将来管理网页，而且在向搜索引擎提交网页时，更容易被其他人搜索到。在命名网页时，最好使用常用的小写英文字母或与页面内容相匹配的英文字母，这与页面上的连接直接相关。

5.3更新及时才能吸引人流

高级网页设计篇（9）

中图分类号：TP393 文献标识码：A 文章编号：1674-7712 （2013） 04-0144-02

网页设计专业的学生在就业时遭遇“学不会用”的尴尬处境，IT行业技术更新换代迅速的特性，与学校计算机教学滞后的现状，形成了强烈的反差。本文通过对网页设计行业岗位人才要求的调研，明确专业相对应的相关行业或企业相关产业发展现状的社会需求，并充分地了解行业人才需求与网页设计人才培养之间的关系，明确专业服务面向；对我校新的网页设计人才培养方案的制定有重要参考意义，为网页设计专业的理论和实践教学方式、方法以及实训基地的建设提供指导建议。以提高高职网页设计专业人才培养质量。

一、行业岗位分析

根据对沈阳、大连地区IT行业的发展现状与趋势、人才需求状况、企业调研等方面调查分析，可以将网页设计岗位分为网页设计、网页制作、网站编辑、网站管理四大岗位群。分析各岗位群实际工作需求，网页设计主要是网站开发前期界面的平面图设计，它是一种审美活动，要求设计师具备较强的审美能力和美工功底以及图像处理工具的使用能力。网页制作主要根据页面效果图利用网页制作工具实现效果图向网页的映射。一款功能强大、使用简单的软件往往可以起到事半功倍的效果，这就要求设计师具备网页制作的相关技能。网页制作方式有两种：“表格+切片”、基于Web标准的制作方式；后者是主流的网页制作技术。网站编辑主要负责网站内容的维护和管理，要求网站编辑人员具备文字编辑、网页基础知识及计算机操作能力。网站管理主要负责网站的日常维护、网站的改版等工作，要求网站管理人员具备较高的网页制作经验和管理能力。

二、调研的方法及内容

为了充分地了解IT行业对网页设计各岗位需求与高职人才培养之间的关系，与用人单位实现“零距离”对接，有针对性、实践性、先进性，从微观上、宏观上把握行业岗位用人单位的人才需求，本调研采用二类调研人群，从不同的角度看行业，看专业，分析人才培养。

（一）实习学生对用人单位的调研

10级网页设计专业148名学生实习期间，采用调查报告的形式，对他们所在实习单位进行调研，学生返校先行通过答辩汇报的形式之后再收集、整理和分析。本项调研包括三个方面：

1.实习单位情况。实习岗位与自己专业对口分析，包括岗位和专业知识、技能及素质要求等。

2.在校学习与企业实际岗位要求差距。包括自己所能胜任岗位分析、同事和领导对自己及学校的总体评价分析。

3.与同类学校毕业生比较的优劣势分析。

（二）专业教师对行业的调研

专业教师深入到辽宁地区IT企业，对从事网页设计各岗位进行调查分析，本项调研主要是调研人员通过走访、问卷调查、个别访谈、电话访谈、座谈会、查阅文献等方式，对生产型企业、服务型企业、政府机构与公共服务单位、网络产品生产企业和网络服务型企业五种类别的企事业单位进行调研，询问不同的企事业单位对网页设计人才、岗位技能的需求情况，从他们的角度来审视专业培养的要求或发现存在的问题。

三、行业岗位要求与我校人才培养对比分析

我校传统网页专业的人才培养目标是培养网页设计、制作和网站组建专业人才、掌握扎实网页设计基础和网站组建实践技能、能胜任网站组建、网站规划、网页设计等专业技术工作的德、智、体全面发展的高等技术应用型人才。从行业岗位调研的结果来看，网页设计人才的培养已面临着新形势的挑战，表现在市场对人才的需求从单一网页素材制作、静态网页设计向动态网站建设与维护技能全面性掌握转变等诸多方面。市场对人才的需求的不确定性很大，变化也很快，同时，我校实验实习环节薄弱、特别是教材与现实的严重脱节和滞后等问题都极大地制约了网页设计专业的建设和发展。

从毕业生总体就业情况看，虽然市场网页设计岗位人员需求很大，但实际学生的就业和工作并不如人意，尤其是真正从事到网站建设与维护工作中，发现所学知识的不够，究其原因很大程度上与培养目标的不清晰，岗位职业技能分析不细致有关。目标的不明确的原因也是多样的，一是对人才需求规格的把握程度低，市场调查不深入、不扎实；二是网站建设与维护发展过程中的计算机知识不断更新等诸多不确定因素；三是目标制定的随意性较大。目前的网页设计人才培养强于书本而弱于实务，缺乏必要的案例教学和实务操作能力的培养，尤其是实验、实训、实习环节的安排。实践教学基本停留在模拟阶段，不能与现实中的企业应用相结合，即便是在学校实验室可以进行基础训练的网页设计、网站建设等内容，由于课时，实验条件等原因，学生掌握的程度也不是很扎实。传统网络专业网页设计人才的培养这方面的局限性明显的表现出来，已经不能适应当前社会需求。

四、构建网页设计综合型培养模式

（一）明确人才培养目标

本专业培养适应社会与区域经济发展需要，德、智、体、美全面发展，熟悉网站的配色及制作流程，掌握网站设计与策划、网站的安全与服务器配置以及网站的搜索引擎优化技术；掌握动态网站编程技术，具有独立制作整站系统的能力，在企事业单位、网络公司、广告公司等IT行业从事网页设计、网站美工、各类网站的开发与维护等工作的网页设计师、高级技师和高级网站程序员。

（二）网页设计人才培养框架

根据人才培养目标，构建符合行业需求、突出职业能力的人才培养框架，网页设计人才的职业能力是由岗位能力要求、能力目标定位、职业技能体系和职业素养体系四个部分组成。以对学生素质教育和职业能力培养为主线，结合网页设计岗位群，构建我院网页设计人才培养体系，如图1所示。

（三）网页设计人才职业技能体系

1.分阶段网页设计知识技能体系

构建网页设计人才的知识技能体系，结合行业对网页设计毕业生的要求，建立以下三个培养阶段：初级网页设计师、中级网页设计师和高级网页设计师。各阶段需掌握的能力目标和知识目标见表1所示。

2.分阶段网页设计实践技能体系

实践技能体系分为校内实训和校外实践两个环节，建立网页设计人才核心课程的课程标准，实现理实一体化，以企业真实的项目为校内实训的训练目标，强化网页设计、美工、动画设计能力。在校内实训中注重与校外真实职业岗位的衔接。注重网页设计实际操作技能和职业素养，为校外实践做准备。

通过传统网页设计人才培养与行业人才需求对比研究，构建符合社会需要的综合型网络设计人才培养模式。注重本专业学生的创业能力培养和创业意识教育，通过职业技能体系的实施，使该专业学生毕业后能够很快适应市场需求，实现校企零距离。

参考文献：

[1]凌云.高职计算机专业教学引入项目教学法的实践[J].职业技术教育，2007，11.

高级网页设计篇（10）

中图分类号：TP393.092 文献标志码：A 文章编号：1673-291X（2012）32-0220-02

计算机网络技术的发展把人们带入一个信息大爆炸的时代，网络不仅影响了信息交流的方式，也越来越多地渗透到人们的学习、工作和生活中。网页是网络信息的基本载体，也是网络信息的主要表现形式，网页中的艺术设计元素就成为网页是否有具有观赏性，能否给受众带来美的享受的决定因素。网页设计作为一门交叉学科也就应运而生。网页设计本身以网络为载体，把各种信息以最快捷、准确的方式传播出去；同时，网页也因为有了艺术设计元素而变得更加丰富多彩，更具观赏性。

网页设计中艺术设计的元素主要包括文字、图形、图像、色彩、版式等，下面将分类进行说明。

一、网页设计中的文字

文本是网页中最为重要的设计元素，网页的正文部分都是由文字的群体组合而成，从艺术的角度讲，文字群体排列组合的好坏，直接影响着页面的视觉传达效果。因此，文字群体的设计是增强页面视觉传达效果，提高文字的艺术表现能力的关键。

1.注重文字的可读性

网页设计中的文字应避免凌乱、烦琐、难于辨认，为了设计而设计，忽视页面的亲和力、可读性和用户体验。

2.调整合适的字体、字号和行间距

字体的设计是设计者直觉和审美的体现。使用说明字体都要从页面的整体和总体设计原则考虑，黑体强壮有力，草书则更加有艺术感，但从浏览网页的终端考虑，最好采用默认字体，因为好看的字体浏览终端不一定支持。

字号的大小有不同测量标准，一般情况下用磅和像素来表述，在网页设计中默认用磅表示字体的字号，网页正文部分一般不用12磅宋体字。

行间距变化也会对网页的用户体验和美感产生影响，一般情况下，与字号大小接近的行间距比较适合浏览者的审美观。

3.文字的图形化

所谓文字图形化是指用单个的字、词、句甚至一段文字，巧妙地排列组合成生动有趣的画面，使图文有机地结合在一起，形成图文交融、相映成趣的视觉效果。在文字的图形化过程中不要单纯追求文字图形的美观，还要注意文字的可读性，只有这样才算是成功的文字图形化。

二、网页设计中的图形和图像

图形、图像是最早引入网页设计的多媒体元素，它们能将信息传达得更具体、真实、直接，易于理解，从而高效率、高质量地表达设计理念，使网页充满强烈感彩，增强用户体验。

1.网页设计中的图形

2.网页设计中的图像

网页中的图像主要分为：LOGO（标志）、背影、主图和超级链接；常用的图片格式有jpg和gif等。

LOGO具有象征、识别功能，是网站形象、文化和主题思想的浓缩。一个成功的LOGO能够提升网页的层次，起到画龙点睛的作用。

背影图像把整个页面变成一个写实场景，与网页主题相辅相成，从而突出主题思想，凸显网页风格。

网页主图是指页面中突出主题，表达主题思想较大幅面的图形图像，一副好的主图能清晰、准确的表达网页的主题，并具有直观、易于理解等特点。

将图像设置成超级链接，能够使超级链接变得样式丰富，形象生动的图像能够消除语言障碍，可以给单纯的文字信息增添活力，从而增强用户体验。

三、网页设计中的色彩

网页的色彩搭配是制作网页成功与否的关键。网页的背景、文字、图标、边框、超链接等，应该采用什么样的色彩，应该搭配什么色彩才能最好地表达出网页的主题，一直是网页设计者头疼的问题。

一个成功的网页配色，首先要清楚怎样将网站主题思想传达给用户，然后再根据这个主题思想来确定网页设计的色调搭配，从而提高网站的访问量。要搭配出能够体现网站主题思想的配色需遵从以下几点。

1.色彩的鲜明性。网页的色彩表现主题要鲜明，引人注目，使人过目不忘。

2.色彩的独特性。设计根本就是要创新，模仿和抄袭是没有生命的，色彩搭配与众不同，使得大家对你网页的色彩搭配印象强烈。

3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

4.色彩的象征性。不同色彩会象征不同的内容，如蓝色象征天空、黑色象征黑夜、黄色象征温暖等，选择色彩要和你网页的内涵相关联。

在网页配色中也要切忌用色过多，最好控制在三种之内；前景和背景色彩对比要大，以便突出主题。

四、网页设计中的版式设计

网页板式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。网页设计中的版式设计是通过文字图形图像的组合，表达出和谐与美。因此，这些图形图像必须按照一定的次序进行合理的编排和布局，有机地结合在一起，将一个有机的整体展现出来。在网页设计中，不管采用网页板式的哪种基本类型都要做到。

1.主次分明，中心突出。根据中国人的习惯在一个页面上，一些重要的内容一般安排在页面的中央或者中间偏右上的位置，在其他的地方可以安排那些稍次要的内容，这样整个页面就得到更好的视觉效果了。

2.网页设计的版式要注重整体，网页设计内容又需要元素组成，在设计网页时要综合各类元素的特点，做到通盘考虑、周密组织、精确定位，才能使页面的整体性得到体现。

3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气；页面上图片太多，缺少文字，必然就会减少页面的信息量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又能使主页有丰富的内容。

五、网页设计的视听元素

网页设计伴随着计算机互联网技术的发展，声音、视频和动画等视听元素已成为网页的一个重要组成部分。从网页设计的角度来说，在网页中运用适合网页主题的视听元素能够大幅度提高网页的档次，反之，单纯为了“炫”而加入一些不合主题的视听元素反而会有画蛇添足之嫌。因此，视听元素在网页设计中的运用也要遵循传统网页设计的制作思路和制作要点。视听元素的综合运用是网页设计的特点之一，是网页设计发展的必然方向。

艺术设计元素在网页设计中的运用是今后网页设计发展的新趋势，网页设计作为一种新兴的艺术设计，只有合理地将艺术设计元素运用到网页设计中，才能做出赏心悦目的网页。

参考文献：

高级网页设计篇（11）

一、教学对象分析

笔者任教的学生是三年级的中专生，年龄约在十七八岁。这批学生的优点是：（1）正处于身体发育阶段，大脑的思维能力增强，具有独立思考能力和初具自学能力。这些都利于发展学生思维，促进理论知识形成；（2）现在计算机已广泛普及，城市和农村的大部分家庭已拥有个人电脑。网络中的各类信息已在学生脑海中形成、加深。这些有利于学生理解学习计算机的必要性和重要性，有利于教师在教学中进行思想教育和素质教育。但这批学生有很大的缺点：（1）好动，没有正确的人生观与价值观，不思进取。如果教师不加以正确引导，则会导致课堂纪律变差，学生放任自由，反而影响教学效果，不利于传授理论知识。（2）依赖性较强，不肯思考，教师说一就做一，说二做二，不自觉地思考下一步应该如何做，缺乏创新精神。（3）对事物的辨别能力不强，精华和糟粕一起吸收，对事物的辨别能力比较模糊。

二、教材分析

我校目前使用的教材是《Dreamweaver MX 2004》，采用的是图形操作界面，可以自动生成Html代码，轻松实现网页。由于学生现在已经是三年级，已初步掌握网络的基础知识，已经具备获取信息的能力。而学习网页制作主要是培养信息表达能力，这对于提高学生信息处理的能力有重要作用，一方面网页设计为学生提供了展示个性、自主创新的舞台，这个舞台能促使他们主动地学习、创造性地学习，另一方面教师对网页的评价则能促使学生了解内容编排的原则、页面布局的种类与色彩搭配的风格等，提高他们的艺术修养和审美情趣。

三、教学思路

1.任务驱动

教学一开始笔者就向学生贯彻以制作“班级主页”这个任务为出发点，辅以最后完成个人主页为最终目标完成网页制作这门课程学习。

在教学中，通过创设情境，激发学生创作欲望，把总任务划分为若干个子任务并且将任务落实到每节课，学生按照教师布置的子任务制作，最后使学生在教师引导下逐步实现教学目标。班级网页的制作是在凝聚班级的集体力量，使每个学生都关心、热爱这个班集体，从而使学生变“要我学”为“我要学”。

2.小组协作

笔者将本班中思维比较敏捷、设计能力好一点的五位同学作为主页设计师、网页主创人员，将剩下的学生分组，每个学习小组由6至8人组成，设一个主创人员兼组长，确保组内每个人都负责制作一两个页面。最后，各小组制作的网页进行汇总，由主创人员进行优化组合，提出合理意见，进行修改，最后合成本班的主页，上传到校园网上公布。

3.资源设计

在学习中，教师的任务是收集、设计和管理学习资源，引导和帮助学生自主查找并获得学习指导，实现知识的建构和技能的提高。因此，学习资源的设计尤为重要。学习资源都公布在学校的“国资源”中，保证学生在需要时查找。学生也可以把自己找到的好素材上传到“国资源”中，以便下次利用这种资源。

四、教学过程

第一阶段：基本知识学习阶段。

教师通过做好的网页边讲解基本知识，同时演示；学生立即做练习加以巩固基本知识。学生用的素材来源于《Dreamweaver MX 2004》这本书所提供的光盘上附带的素材。

第二阶段：学生创作阶段。

第一步：访问推荐网页，确定标准形成小组、讨论栏目，明确分工。

第二步：利用已学习的知识插入表格，并用表格实现页面布局。

第三步：利用框架设计网页，建立主页及子页间的链接，并测试链接。

第四步：创建书签、邮件、图片等热点链接，并对链接进行测试。

第五步：学会插入不同的特殊效果。小组网页初步组合，上传到教学网站。

第六步：掌握表单的创建和设置，在表单中插入各种组件，各组网页定稿上传。

第七步：各组网页演示、互评。推选优秀网页制作高手做班级网页管理员，负责维护班级网页。

第三阶段：作品评价。

总体学生所设计的作品不是很令人满意，得分较差。

五、教学反思

1.设计不到位

很大一部分学生以任务为目的，不考究其版面设计，给人的感觉粗糙，无新意、缺乏创意，出现应付现象。

2.学生总体缺乏审美观点

学生在设计方面简单粗糙，不管图片大小、格式及内容与网页的搭配，只在网页中随意地插入图片，滥竽充数，只要完成一张网页即可，这种没有审美观点、随意插入图片的现象比比皆是。

3.学生思想浮动现象较厉害

中三年级学生，其上课的积极性不高，学习兴趣不够浓厚，自觉性较差。部分学生认为毕业后不可能做网页，导致盲目操作，或掌握一个操作花费时间更长。

4.第一阶段的教学内容安排还需改进

对于中上等、爱好计算机的学生，因操作过于简单而在短时间完成，大部分时间又无事可做，以致有时上机时操作步骤不一致，上机操作的内容不能统一。针对这种状况，教师在一节课里，应科学安排上课时间，例如用小半节时间进行边演示边讲解，大部分时间学生进行练习、操作所讲知识点。

但由于有时知识点过多，容易出现理论与上机操作的时间分配不均匀，有时往往出现讲理论时间多于学生上机操作，导致学生有“吃不饱”的感觉。教师会因时间不多，个别辅导学生的操作时间过少。针对这种情况，教师只有将上课内容利用网络控制软件分发给学生，让部分学生先学习下面的内容，从而选择相应的内容做相应的题目，努力做到因材施教，让每个学生都“吃饱”。

教师假如练习题少，则会导致上进的学生出现松懈现象，长久会挫伤他们的积极性，从而走下坡路。这就要求教师除了满足中下生外，还要特别注意上进生的训练量问题。

5.设备是否正常会直接导致上机课质量

机房的问题会直接影响学生的学习兴趣。有个别机房的机器少，学生多，不能满足每人一台机，有时网络不能正常使用，出现两人或三人合一台机，直接导致学生产生情绪，挫伤学习积极性。保证计算机的正常运行，网络的通畅，是保证学生保持良好学习态度的前提和保证。

六、教学后记

现在的中专生已经不是过去的中专生，他们现在所接受的新事物、新思想和新观念已领先于教育工作者，只有不断地探索，不断地研究他们的思想动态，才能适应新的教育发展要求，才能不断取得进步。