如何进行高校校园网络站点建设

李广琴

[内容摘要]高校校园网是高校文化的载体，是校园文化建设的重要组成部分，是传播校园网络文化的主阵地，对校园网络建设起着引导作用。本文对Dreamweaver进行简介，对高校校园网站的建设进行了大体介绍等。

[关键词]网站；高校；校园；网络

高校校园网络文化是高校在长期发展过程中形成的精神文化和物质文化的总和，是一所大学的精神、道德规范、文化传统、生活方式的价值观，在教学、科研、管理、服务、培养等方面发挥作用，并通过高校人际活动，不断进化、积淀和发扬。近几年来，国内提出许多新型多元的校园网络文化建设思路，提出广泛开展高校校园文化网络建设活动，构建全方位育人的新格局。

一、Dreamweaver MX网页特色及使用技巧

随着高校校园网的不断扩充，网络建设成为大家普遍关注的问题。Dreamweaver MX支持最新的HTML和CSS标准，将动态层的概念进行了扩展，其历史面板、模板、库以及强大的站点管理功能大大提高了工作效率。HTML是超文本标记语言，是WWW的描述语言。网站是多个由超级链接连在一起的网页的集合，网页可以是几个，也可以是成千上万个。由于Internet上的网站是通过链接地址进行定位的，所以网站也被称为站点。网页是一个包含文本、图片、超级链接以及其他交互信息元素的网络文件，通过Internet传输，用户可以使用浏览器来查看。

灵活使用查找与替换：当我们的站点里有多个文件要进行相同的修改时（或者单个文件要进行多处一样的修改）单击编辑/查找和替换，在弹出的对话框里进行相应的设置即可。同时还可以查找内容如源代码、文本（高级）和指定的标签，在相应的选项里进行设置是否区分大小写等。

设定网站配色方案，运用到这一功能，我们可以快速为网站设定配色方案：单击命令/设定配色方案，在弹出的对话框里进行相应设置即可。

二、网站的制作过程

1.站点结构图

2.定义站点

使用Dreamweaver MX建立站点：打开Dreamweaver MX文件，打开站点窗口（包括站点和资源），然后再选择定义站点，选中后将出现站点定义窗口：站点名称处填上要建立的站点名称（school），这个名字只起识别作用，与网站发布后真实的名字无关；本地根文件夹处选择设置网站在本地硬盘的位置，点击后面的文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录（c：＼school）；缓存可以使文件的移动、改名、查找等站点管理的操作速度大大提升，因此建议在这里打上钩；其余的可以默认，当然可以试选择不同的，默认图像文件夹为站点默认存放图片的文件夹（以后在做网页的过程中，使用非站点内的图片时，它会提示是否把该文件复制到这个文件夹内）；HTTP 地址为成人高校校园站点的网址HTTP//www.hgrtvu.com。之后，我们要指向整个站点的主页，在站点布局里进行设置；远程信息一项也是非常有用的，可以用它来管理成人高校校园的网站。

3.浏览器设置

Dreamweaver MX提供了两种视图，布局视图和标准视图，在布局视图中能让网页某一部分固定，而另一部分自动伸展，这样无论浏览器窗口多大，都能使我们的网页适合浏览器的窗口，而不发生变形。比如建立一个新站点，然后用熟悉的表格工具画一个表格，可以不限它的宽度，因为可以让它自动伸展适合浏览器窗口（当然也可以直接在布局视图中画表格），然后单击对象面板最底下的布局视图按钮，同样出现一个对话框，直接点击确定即切换至布局视图，表格左上角会有一个绿色的layout table标签，它代表着这个表格，标签中有三个空白部分，每一个都标明了宽度且有一个小三角形。在这个表格中，我们希望表格最左边的列固定，而整个表格适合浏览器的宽度，选择最后一列，单击它上面的三角形按钮，在出现菜单中选择make column autostretch，由于是一个新站点，这时将弹出对话框提示，为了能够使行伸展，Dreamweaver MX需要放置一些spacer图片在另一些行里。下面有三个选项：第一，Create a spacer image：创建一个spacer图片，这个图片在浏览器窗口是不会显示出来的，它只是起固定表格的作用；第二，Use an existing spacer image：利用存在的spacer图片；第三，Don't use spacer images for autostretch：不利用spacer图片来做伸展，这样其余行将会变形。 已经定义的站点将不会出现这个对话框，但仍可以利用Add Spacer Image增加spacer图片。

4.页面设计

双击文件图标即可以对其进行编辑，在编辑的过程中，可以对当前页面进行设置。比如背景，可以在一个页面里以一幅图片作为整个页面的背景，其具体步骤如下：单击修改／页面属性，弹出页面属性的对话框。第一，标题：网页的标题，内容将在浏览器的标题栏中出现；第二，背景图象：整个网页的背景图片；第三，文本：网页页面的文字默认的颜色；第四，链接：页面中具有链接文字的默认颜色；第五，访问过的链接：页面中链接文字被访问后的颜色；第六，活动链接：点击链接时文字的颜色；第七，左边界：页面距屏幕左边的距离；第八，右边界：页面距屏幕右边的距离；第九，边界宽度：边缘宽度；第十，边界高度：边缘高度。确定后完成页面属性的设置。在这里要注意编辑的文件必须是以htm的后缀，它同时也是这个网页文件的类型说明，表示这个网页文件是属于静态的HTML文件（也可以用后缀html表示）。

5.网页背景设计

网页中的背景设计是相当重要的，尤其是对于成人高校校园主页来说，好的背景不但能影响访问者对网页内容的接受程度，还能影响访问者对整个网站的印象。

（1）颜色背景：颜色背景在网页文件中，一般通过标签来指定页面的颜色背景，其HTML语法为： 其中的"color"表示不同的颜色，可以用各种不同的颜色表示方法，比较常用的是直接用颜色的英文名称，如red、yellow、blue等，此外还可以用十六进制、百分比值法和整数法，其效果都是一样的。

（2）图片背景：把照片及图片作为页面的背景让大家看到，这里我用上一点简单的CSS。在网页文件的……之间加入一些CSS语句，在网页页面中就可以看到照片或图片位于页面的正中间，而且在拉动浏览器窗口的滚动条时，照片仍然位于页面的正中间而不随页面内容一起滚动。如果觉得照片位于页面的正中间不满意，也可以随意地调整它在页面中的位置。

6.Dreamweaver MX 消除虚线框

onfocus="this.blur（）"这条代码能消除链接时的虚线框，可以用Ctrl+C、Ctrl+V逐个消除链接时候的虚线框，但是当一个网页上有几个甚至上百个链接的时候，这样的方式就不太可行了，有一种更好的方式，能更快消除每个链接上的虚线框，当然用“查找/替换”功能就能解决，但作为一个优秀的web developer，用尽可能少的代码实现一样的功能才是追求的目标，由微软在IE5.0后开始提供的一种新的指令组合，它可以把某种特定功能的代码封装在一个组件之中，从而实现代码的重复使用，也就是Html Components，简称为htc。作为一个组件，htc里包含了属性、方法、事件等各种知识，回到Onfocus=this.blur（），很显然，onfocus是一个事件，this.blur（）则是被事件所触发的对象，这样我们即可写出代码。

7.网站特效制作

（1）实现浏览器状态栏中的滚动字幕

按下F8键，在Behaviors窗口中选取Behaviors，单击“＋”，再选取“Set Text→Set Text of Status Bar”，最后在弹出的对话框中输入成人高校校园网页中需要滚动的文字就可以了。

（2）在网页中加入注释

代码：< ！-- 这里输入注释 -->

（3）自动加入最后修改日期

在源代码中的…< /BODY>之间加入如下代码：

< Script Language="JavaScript"><！--

document.write（"Last Updated："+document.lastModified）；

-->< /Script>

（4）定义网页的关键字（KeyWords）

格式：< meta name="keywords"content="dreamweaver，flash，fireworks">

content中的即为关键字，用逗号隔开，在Dreamweaver中用「Insert」-「Head」-KeyWords命令

（5）去掉链接的下划线

在源代码中的…之间输入如下代码：