1 引言

网页是网络信息的基本载体，它除了为传播信息提供平台外，还体现出制作者的个人审美情趣和艺术修养。因此在网页制作的教学过程中，除了让学生掌握网页的一般制作技巧外，还应注重学生在制作网页时框架的设计，包括网页的版面布局、版面修饰、辅助内容等，而在每个成功的设计背后都需要成功的版面结构，学生是初学者，他们的一些审美观、创意技巧、观察力并不能靠短时间内可以培养起来，需要多年的训练和经验积累，作为教师，需要教他们一些窍门来弥补某些方面的不足。

2 版面结构

版面结构是指一种能够让浏览者清楚、容易地理解作品传达的信息的东西，一种将不同介质上的不同元素巧妙的排列方式。什么样的布局是最好的，这是学生可能会问的问题。其实这要具体情况具体分析的：对于不同种类的网站，版面的结构有很大的差别。以下我们以不同类型的网站为例，来说明版面结构和网站类型的紧密关系，并通过示例来激发学生的学习热情，并在设计中培养学生审美情趣、创意技巧等，并掌握相应的网页设计技术。

2.1 搜索网站

界面： google网站的主界面，这是搜索网站的典型界面，非常简洁，但是满足了功能。界面分为三部分：google的logo图片，搜索框，下面是各类搜索的连接。

技术：此类网站的技术也很简单。我们看看它的源代码片段：

＜img src=/logos/olympics08_opening.gif width=286 height=128 border=0 alt="2008 北京奥运" title="2008 北京奥运"＞

这显示了google的logo，一个普通的＜img＞标记就实现了；

＜form action="/search" name=f＞

＜input autocomplete="off" maxlength=2048 name=q size=55 title="Google 搜索" value=""＞

＜input name=btnG type=submit value="Google 搜索"＞

＜/form＞

上面显示了一个＜form＞标记，一个＜input＞标记输入要搜索的内容，一个＜input bype=submit＞标记，提交表单，将搜索的内容提交的/search程序来处理。

2.2 门户网站

对于门户网站来说，首要的任务就是要在有限的版面内显示尽量多的内容，并且版面之间容易编排，能够灵活的补充内容。国内典型的三大门户网站：新浪、搜狐和163，基本的版面都是差不多的，我们以新浪为例来进行说明。

界面：从界面来看，网页的内容很多，并且还很长，门户网站的布局一般分为：频道列表，文字/图片广告，栏目信息摘要，其他广告信息。

技术：着重介绍一下门户网站模块的编排，看一下源代码：

＜div id="ent" class="md"＞

＜div class="hd"＞

＜ul id="entmenu"＞

＜li id="entmenu_1" class="on"＞

＜span class="capname" id="capname_ent"＞

＜a href="http://ent.sina.com.cn/" target="_blank"＞

娱乐＜/a＞

＜/span＞

＜/li＞

＜/ul＞

＜/div＞

＜/div＞

这是娱乐板块的代码框架。从中我们可以看出采用了＜div＞技术，使用层来控制网站内容的排版，而不是像搜索网站那么的简单。我们在教学过程中，先让学生对布局有一个大致的了解，可以先用＜table＞标记进行定位，使用table来实现和门户网站这样的结果，然后再用＜div＞来实现。

2.3 交友站点

界面：交友网站的版面也比较简洁，重点能突出交友的信息，能够显示网友的信息和交友情况。在左上角显眼位置显示登录的输入框，便于用户登录，因为交友网站的大部分功能都是在登录后才能操作，所以便捷的登录也是很重要的。在网页显著位置显示了交友活动，这对于交友网站的宣传是很重要的。

技术：看一下源代码：

＜div class="wzti"＞精美主页推荐＜/div＞

＜div class="ggnr"＞

＜ul id="id_pop_space"＞

＜li style="line-height:22px;"＞

＜a href="…" target="_blank"＞yueliang501的主页＜/a＞

＜/li＞

＜/ul＞

＜/div＞

＜/div＞

从代码中我们可以看出，也使用了＜div＞层技术，用层来实现定位，其中clss来表明样式，使用＜ul＞＜li＞标记来实现条目的样式排列。在实际教学中，我们可以使用＜table＞来定位，使用＜tr＞＜td＞来实现条目的排列，先让学生做成和示例网站同样的效果，然后通过技术分析，过渡到＜div＞控制的效果。

2.4 政府网站

界面：政府网站的界面要符合当地的特色，并且在显著位置能显示尽量多的便民服务和当天的新闻事件。显示图片新闻，政务新闻和最新的政府机关的公告信息。

技术：看下源代码：

＜iframe marginwidth="0" marginheight="0" src="link/wzlj.htm" frameborder="0" width="760" scrolling="No" height="150"＞＜/iframe＞

这是显示网站链接的代码，我们从中看出使用了＜iframe＞子框架技术，而显示的内容是link/wzlj.htm网页的内容。在对于经常改动的界面，我们可以利用iframe技术来实现动态内容，通过改变iframe中src指定页面的内容去改变主页的内容。这项技术在很多网页版面设计中采用。在教学中，可以让学生在页面中做一个简洁的导航界面，利用iframe技术来显示点击的网页内容，激发学生的兴趣。

3 版面修饰

很多时候，一个好的版面被错误选择的配色方案所破坏。其实，配色方案是升华一个版面结构的有力武器。如果你仔细地使用颜色，很可能得到意想不到的结果。

网页的配色和内容相关，也和特定的环境相关。譬如在奥运期间，门户网站的内容都配成了金黄色，并配有祥云的背景。

3.1 搜索网站

从前面的版式分析我们知道，搜索网站的页面很简单，它讲究的效率和速度，但是搜索网站也会是很多人访问的，也要根据不同的时间和环境进行版面的修饰。我们看看google和百度在奥运期间的配色：

从界面看，搜索网站虽然没有对网页底色进行修饰，但是通过logo的更换，我们很清晰的了解到奥运来临了。

所以版面卖弄修饰对于网站来说也是非常重要的

从技术上来说，搜索网站的版式修饰采用了图片格式，在实际的教学当中，我们要让学生学会至少一种的图片处理软件，并且利用这种有趣味的方式使得他们能够有兴趣学习。

3.2 门户网站

门户网站是以内容为主的，所以要非常实时的根据时间和重大事件对版式和界面进行修饰和美化。在奥运期间，我们可以看到各大门户网站都在显著位置显示了奥运的标志，并在最前面的两个栏目更换为了奥运新闻和赛事实况。

从技术上来说：主要采用颜色，图片，字体颜色来进行修饰，以图片位置，通过对背景色的改变，使得版面修饰能够根据环境而改变。

3.3 交友网站

交友网站的颜色搭配要活泼，因为年轻人居多，所以要采用活泼，奔放一些的色彩，如金黄色，蓝色等，并且也要根据不同的环境进行改变。

从技术上来说：通过一些flash动画，对页面加以修饰，通过夸张的手法来突出网站的主题。在实际的教学中，要培养学生的一些自主创造性，先根据他们的想法对某项主题的网站进行配色和修饰，然后通过大家评议的方式来进行改进，从而促进同学之间的友谊和增强学生的主观能动性。

3.4 政府网站

政府网站的修饰有显著的地方特色，因为访问者都是和这一地方相关的人群。譬如苏州政府的网站以淡蓝色为主，并且在logo旁以动画的方式显示了太湖、游船、园林等独具特色的元素。

所以政府网站的配色要以地方特色为准，而不是根据自己的喜好而定。

从技术上来说：要运用较多的flash动画，将多种地方特色显示在一个有限的界面中，通过不同的变换手法，使得访问者清晰的了解一个地方的文化、生活等相关元素。在教学中，要让学生不但学会技术，更重要的是学会根据不同的要求和主题进行不断的创新和技术完善。

4 辅助内容

网站是一面镜子，它除了要反应出内容以外，有时也显示网站设计者的个性，通过辅助内容的设计和显示，让访问者更容易、更方便的获得信息。

此类内容的技术要求一般较高，对以网站初学者来说未必能完全掌握，但是通过给他们演示这些高级的技巧和机能，对于激发他们的求知欲望显得尤为重要。

在实际的教学中，我们不可能完全教会学生所有知识和技能，但是我们完全可以教会他们学习这些知识和技能的方法。

网页版式是对网页内容显示的布局，根据不同的网站类型所要求的布局也有所不同，采用的技术也千差万别，但有了基本的技能和学习的方法，对于理解和创新各类布局有很重要的作用。

世上没有静止的事物，网站也是一样，也要根据时间、环境和重大时间来变化，所以网站版式的修饰也显得尤为重要。

辅助功能是网站展示个性的手段，通过有效的辅助功能，可以为网站进行恰到好处的点缀作用。

5 结语

本文从网站的版式设计、版式修饰和辅助功能三个方面介绍了在教学过程中应关注的一些技巧和知识，通过对知识的提炼，必定会使学生对网页设计技巧的掌握起到事半功倍的效果。