我想有个家——网页制作基础

网络通信

  上一期我们介绍了网站规划与创建,现在就可以进行网页的制作了。网站的页面是吸引目光的重要因素,漂亮的页面可以给人们留下深刻的印象,所以我们在制作前最好考虑一下页面的平面结构、颜色搭配等视觉效果,然后再进行网页的制作。

  一、建立首页

  启动网页制作工具Dreamweaver(下文简称DW),将主界面左侧的任务窗口切换到“文件”标签下即可看到我们上期创建的站点。右击该站点文件夹,选择“新建文件”命令,这时可以看到本地站点下面有新建的untitled.htm文件(程序默认文件名),将该文件名改为Index.htm或Index.html,并保存在站点根目录下。这样将网页上传到服务器后,在IE地址栏中输入网站地址,服务器就能自动读取该网页了。

  二、网页布局

  当网站首页还是一张空白页面时,我们要对该页面进行布局,这样可以规范布局,使页面风格统一。

  找到DW编辑窗口中“常规”下拉列表框,选择“布局”命令,随后单击该面板右侧的“布局表格”按钮,我们将看到鼠标指针变成一个“十”字形,按下左键即可在编辑窗口里画出表格,并根据需要用鼠标来调整表格的大小。在制作网页时,经常需要在网页中添加一些单元格用来设定页面表格,单击“绘制表格单元格”按钮即可插入需要的单元格(图1)。

  如果你需要借助框架来制作页面,可以在布局项中单击右侧的“框架”按钮,在弹出的“框架”下拉菜单中选择一种框架。首页框架制作完成后单击“布局模式”右侧的“退出”,即可退出设计模式,软件会自动切换到“常规”项下。

  三、制作网页

  1.插入图片

  将收集或制作好的图片存放到站点的Images文件夹下,随后单击“常规”栏中的“插入图像”按钮,弹出“插入图像”对话框,在“查找范围”中找到Images文件夹,选择需要的图片后,单击确定即可插入图像。

  2.添加背景

  我们在添加网页内容前,可以对网页的背景进行相应的设置。依次单击“修改→页面属性”命令,单击“背景颜色”右侧的颜色块,弹出颜色下拉菜单,在此为页面背景设定需要的颜色(图2)。

  用图片来作网页背景。单击“背景图片”右侧的“浏览”按钮,选择需要的图像文件,随后单击“应用”按钮,将图片添加到当前的网页中。

  3.设置文本颜色

  背景颜色添加完成后还要对网页中的文本颜色进行设置。单击“文本颜色”右侧的颜色块,在弹出的颜色列表中选择需要的文字颜色。

  提示:选择背景颜色和文字颜色时要注意颜色的搭配。一般情况下,文字和背景要选择反差较大的色彩。这样才能让浏览者容易看清网页中的文字内容。

  4.创建导航条

  一般网站的首页都有一些导航条按钮,通过这些按钮我们可以快速访问其他页面。在插入导航条时,首先在插入导航条的位置添加一些表格。这样既固定了导航条的大小,也保持了导航条的整体性。

  添加表格时,单击“常规”项中的“表格”按钮,在“表格大小”中选择表格的行数和列数,在“表格宽度”项中设置表格的宽度。我们可在“边框粗细”项中对表格边框的粗细进行设置。如果将边框的尺寸选择为“0”像素,这时网页中制作的表格就隐藏了边框。表格设置后单击“确定”按钮,即可将设置的表格添加到网页中。

  随后,将鼠标定义到需要插入导航图片的表格中。单击“插入图片”按钮将导航条图片插入进表格中或直接在表格中输入导航文字,最后我们再对当前文字添加链接。导航条就设置完成了。

  小结:本期我们学习了首页的布局格式、如何给网页设置背影,并添加导航条等。下期我们将向大家介绍添加超链接的方法以及在文字输入技巧等方面内容,请锁定本系列我们下期见。