Dreamweaver3之一学就会(二)
上次和大家探讨了怎样用Dreamweaver 制作一个网站。今天我们就来实际制作一张简单的网页(效果如^24040201a^1)。今天用到的新东东比较多,大家要加油哦。^_^
在开始做这个页面之前,我们先对这个页面进行一下分析。看看这个页面用到了些什么东东。
●网页的标题栏有“机器猫的小窝”字样
●网页中的“机器猫的小窝”标题是一张Gif图片
●左下角的机器猫是一张Gif图片
●当中是一段文字,设置了文字的字体和颜色
●网页背景用图片制作
知道了这张网页的结构以后我们就可以来制作了。
首先启动Dreamweaver,确保你已经用站点管理器建立好了一个网站,并且打开了这个网站。如果读者对于网站的概念不清楚,可以看《电脑报》上一期(第23期)的文章。
#1 第一步:插入标题图片
进入页面编辑器。在对象面板中单击图片按钮。(如果对象面板看不见,可以按Ctrl+F2打开面板)系统弹出插入图片对话框。在硬盘中找到这个图片。选中后,对话框右侧会看到这个图片的预览图。按“Select”按钮确定。
系统弹出一个信息框,要求插入图片后保存网页。按“OK”确定。
接下来的对话框提示大家,这个图片不在站点目录内,当前的站点目录是“D:\5dmedia”是否要将这个图片文件复制到站点内。还记得我们上一期反复强调的重点么?和网站相关的所有文件都必须放在站内!如果不这样做,会导致发布网页时图片“失踪”。所以,理所当然选择“是”。
系统弹出复制文件“Copy file as”对话框。我们为了文件管理的方便,把这个图片放在“images”目录下面。(注:这个目录是为了方便自己建立的。你也可以直接把图片放在站点根目录,或者站内任意目录中)。直接按“保存”即可。注意文件名不能用中文,否则要出现一些意想不到的情况。
一个标题图片就插入完毕了。接下来要让标题图片居中安放。单击图片,在属性面板中(如果面板不出现,按Ctrl+F3打开)。选择面板中的居中按钮将图片居中。(如果面板中看不见这个按钮,是因为面板没有展开。可以按面板右下角的向下按钮展开面板)。
#1 第二步:插入机器猫图片
回车换一行,按照上面的步骤插入机器猫图片。这张图片要求不用居中,如果图片继承上面的格式,将会居中。可以通过属性面板中的居左按钮让其居左安放。
#1 第三步:输入文字
接着我们开始按照上面的样例输入文字。大家会发现文字并没有按照希望的那样排在图片周围,而是出现在图片的下方(如^24040201b^2)。这是因为没有设置图片的对齐方式。
单击机器猫图片,在属性面板中。Align对齐方式选择Left(图片出现在文字的左边)。图片的周围会出现一个黄色的标记。这是Dreamweaver专用的对齐符号。不会影响任何显示效果(如^24040201c^3)。
文字就都按照我们希望的方式和图片对齐了。下面我们来设置文字的格式。选中第一、二行文字。在属性面板中将Format字体设置成为Heading 3标题三号。并选中“B”将字体变粗(如^24040201d^4)。
选中第三行,在属性面板中将Format字体格式设置为Heading 2标题二号。选中“I”将字体变斜。设置“机器猫”的颜色。首先选中这三个字,在属性面板中,单击颜色盒,在弹出的颜色盒中用吸管吸取颜色即可(如^24040201e^5)。同样设置其他文字的颜色。
最后的三行文字我们想让它们前面带有项目符号的小圆点。单击属性面板中的“项目编号”按钮。选中的文字就带有列表符号了。
#1 第四步:设置网页的标题和背景图片
选择菜单Modify/Page Properties。系统弹出Page Properties页面属性对话框(如^24040201f^6)。在Title域中输入标题文字“机器猫的小窝”在Background Image处单击Browse按钮,系统弹出图片选择对话框。选中背景图片,如果图片在站外,请将其保存在站内。
按“OK”关闭对话框。网页的标题和背景图片设置完毕。
#1 第五步:预览网页
在页面编辑器中按F12预览网页效果。嗯?怎么凡是图片的地方都是一个叉呢?原因很简单,在前面插入图片的时候要求我们将网页文件存盘。选择FileàSave。网站中的第一页,也就是首页我们通常存盘取名为index.htm。重新预览,网页的效果就出现了。
小结:在今天的教程中我们制作了一张完整的网页。实际上只是对三大部分进行了操作。文字:可以设置文字的格式。首先选中文字,然后在属性面板中可以使用Format域设置文字的格式,还可以设置文字加粗加斜的格式和文字的颜色。列表分为有序和无序列表,今天我们使用的是无序列表即圆点项目符号。文本可以设置对齐方式,分别是左、中、右(如^24040201g^7)。
插入图片可以通过对象面板来实现。插入图片要注意一定要保存在网站内,这样才能保证图片的正确显示。图片也像文字一样有对齐方式。另外图片有Align对齐方式,这种对齐方式指图片和文字怎样对齐。
设置页面属性,我们操作了两个选项。其一设置网页的标题。这会在浏览器的标题栏中显示出来。还可以制定背景图片。网页的背景图片是一张小图片,它可在网页中重复贴,充满整个网页。
最后是预览,预览用于观察网页在浏览器中的实际效果。直接按F12就可以预览。如果出现图片不显示的情况,要先将网页存盘再预览。
OK,今天的学习就到这里了。有什么问题欢迎发E-mail给我(rudolf@21cn.com)。