主页快建
听说Dreamweaver可是个网页大师,于是阿蒙就赶紧在自己的电脑里面装了一个。可是自己对这斯并不熟悉,怎么办呢?这日鸣涧路过家门,恰好被阿蒙抓了壮丁,于是一番甜言蜜语,鸣涧最受不了别人的吹捧了,几顶高帽带上,心甘情愿成了免费劳力——教阿蒙制作主页。
对于如你这样的初学制作主页的人来说,总是希望在最短的时间内就制作出自己的主页来,那我先来教你如何使用Dreamweaver快速地建立起自己的个人主页,不过这只是一个入门阶段,更精彩的以后慢慢讲给你。这边鸣涧摇头晃脑地正说着,那边阿蒙可急了,少废话……
定义本地站点
在开始制作网页前,需要先定义一个本地站点。也就是说在硬盘上建立一个目录,将所有的网页和相关的文件都放在里面,以便制作和管理。
执行主菜单“Site/New Site”命令,打开“Site Definition”对话框。在“Category”列表中选择“Local Info”选项,然后在右侧“Site Name”中输入站点名称:鸣涧动力,单击“Local Root”右侧的文件夹图标,选择E:\web作为网站本地存放目录。同时选中“Refresh Local File List Automatically”选项,这样可以在网站更新时自动刷新本地文件列表,选中“Use Cache to Speed Link Updates”为站点创建一个高速缓存文件。最后单击“OK”按钮完成。
站点管理器的使用
建立一个新站点后,会打开一个站点管理器对话框(如图1),用鼠标右键单击根目录,弹出一个快捷菜单,执行“New Files”命令,建立一个名为“index.htm”的网站首页文件。然后再执行“New Folder”命令,建立一个image文件夹,用于存放站点内的图片文件。
图1
页面属性的设置
双击刚才建立的首页文件,在Dreamweaver主窗口中打开它,此时是一个空白页面,下面来设置网页页面的一些属性。按下“Ctrl+J”键,打开“Page Properties”对话框(如图2)。在“Title”中输入当前页面的标题文字,然后单击“Background Image”框右侧的“Browse”按钮,在打开的对话框中选择事先准备好的背景图案。在“Top”中还可以设置页面距顶边距离、“Left”为页面距左边距离、“Margin Height”表示边距高度、“Margin Width”表示边距宽度,可以根据实际情况设置好相应的数值。
图2
添加文字与格式编排
在网页中输入一段文字后,选中标题文字,按“Ctrl+F3”调出“属性面板”,点“居中”按钮,使文字居中对齐,然后点击“Size”下拉列表框,选择字号为6,设置文字颜色为蓝色,将文字加粗(如图3)。在正文文字前加两个空格的方法是,打开输入法,并设置为全角方式,按下空格键即可在段首前加空格了。
图3
加入图形
单击“Object 面板”中的“Insert Image”按钮,在弹出的对话框中选定一幅图片,点“Select”按钮,将图片插入到文档中。此时图片将段落分开了,需要进行对齐方式设置。选中图片,在属性面板中单击“Align”下拉列表框,选择“lEFT”,实现图文混排。此时文字和图片的间距太小了,可以在“属性面板”中的“H Space”框中输入“10”,按下回车,这样图的左右各出现10个像素的间距。同样,在“V Space”框中输入相应数值,使图的上下也与文字有一定的间距(如图4)。
图4
设计超链接
下面来为网页栏目设计链接,选中“原创作品”四个字,单击“属性面板”中“Link”列表框右侧的文件夹图标,选择已经做好的“text.htm”文件,再单击“Select”,这样文字的超链接做好了。然后点击“Target”列表框,选择“_blank”(如图5),这样点击此链接后,页面会在一个新窗口中打开。图片的超链接制作方法是,选中图片,在属性面板的“Link”项中加入超链接地址。
图5
网页预览
保存当前网页,然后按下“F12”键,即可在一个新打开的网页浏览器中预览当前设计的网页了。此时需要做的,就是检查页面链接是否正常,同时还需要检查网页页面设计是否合理等因素。
阿蒙听得正入神,发现鸣涧揉揉眼睛,没有讲下去的意思了,心里好大的不痛快,不过今儿个倒是学会了快速建立自己的主页,那么下次教我什么阿?鸣涧诡秘地一笑,“当然是主页设计过程中最常用到的东东了,暂时保密,下次我来的时候,你自然就知道了……”