制作简单的网页

（1）定义一个本地站点

　　在开始用Dreamweaver制作网页时，首先要定义一个本地站点。作为一个网站，里面有很多网页文件、图片，甚至Flash动画等，如果不进行管理归档，分散在硬盘的各个地方就无法方便地进行网页发布。定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。

　　单击“Site”菜单下的“New Site”命令，弹出“Site Definition”（定义站点）对话框（图１所示）。在“Category”列表中的第一项“Local Info”被选中，用来定义一些本地信息。
　　在“Site Name”框中输入站点的名字“myweb”，单击“Local Root”输入框右侧的文件夹图标，弹出选择本地文件夹对话框，我们点“新建文件夹”按钮，在D盘根目录下建立一个名为myweb的文件夹，并选择它，单击“保存”按钮，“Local Root”输入框中显示“D：\myweb\”,这个文件夹将作为我们的站点文件夹，以后所有的网页文件都放在这个文件夹下，相当于先选块地方以便盖房子。

图1　定义一个本地站点

　　选中“Refresh Local File List Automatically”，表示自动刷新本地文件列表，以便在向网站中复制文件的时候，网站文件列表会自动刷新。
　　选中“Use Cache to Speed Link Updates”，表示为站点生成一个高速缓冲存（Cache）文件，它可以自动跟踪网站内的文件链接情况。当文件移动、重命名或删除时，可以自动修改所有相关链接。

　　单击“OK”按钮，会弹出一个对话框，单击“Create”，弹出“Define Sites”对话框，窗口中列出了我们刚刚创建的名为“myweb”的站点。单击“Done”按钮，定义的站点就生效了（图2）。

图2　定义站点过程中的对话框

　　观察一下新建的站点，发现它有点儿象资源管理器，右侧显示网站内的所有文件，并且以D：\myweb为根目录（图3）。关闭弹出的Site窗口。

图3　站点管理器

（2）添加网页文字

　　好，下面我们开始制作网页的正文。现在光标处在正文编辑区，和记事本一样，我们输入文字“笨象先行”。敲一下回车，光标定位在下一段中，输入一些主页说明文字（图1）。

图1　在编辑区内输入文字

　　对了，千万别忘了保存文件哟！按下Ctrl+S键，在“Save As”对话框中输入文件的名字“index”，表示这是一个主文件，单击“保存”按钮（图2）。

图2　及时保存网页

　　按下F5键，弹出“Site”窗口，可以看到在D：\myweb\目录下生成了一个名为index.htm文件（图3）。

图3　保存的网页出现在站点中

　　接下来我们对文字进行简单地排版。先设置标题文字的格式，将光标定位在第一段，然后按Ctrl+F3调出“属性面板”，点“居中”按钮，将文字设为居中对齐。选中本段文字，点Size下拉列表框，选择字号为6，设置文字颜色为深红，并将文字加粗（图4）。

图4　设置文字及段落属性

　　接下来在正文文字前加两个空格。这时你会发现按下空格键没有用，这是因为在Dreamweaver中只认全角空格，我们可以启动输入法，按下Shift+空格键，使其处于全角状态，再敲两下空格键（图5）。

图5　全角半角转换

　　同样，我们将正文文字设置为自己喜欢的格式，比如灰色4号字，这下页面看起来好些了吧（图6）。

图6　设置好的文字效果

（3）插入图形

　　一个页面光有文本是无法吸引人的，下面我们插入一幅图片，使页面更加生动，图文并茂。

　　为了保持良好的制作习惯，我们在D：\myweb下建立一个名为“img”的文件夹，将主页中需要的图片都放在这个文件夹下。

图1　站点管理器

　　我们可以用PhotoShop、Fireworks等图形工具处理好一些图片，将图片放在img文件夹下，为提高主页下载速度，可将图片存为gif或jpg格式。

　　将光标定位在正文段落中，单击“Object 面板”中的“Insert Image”按钮，在弹出的对话框中选定图片，点“Select”按钮，图片被插入到文档中（图3）。

　　此时图片将段落挤开了，我们可以对其对齐方式进行设置。图片处于选中状态时，属性面板中显示的是图片属性，单击“Align”下拉列表框，选择“Right”，看，图和文字混排了（图4）。

图3　插入图形　　　　　　　　　　　　　　　图4　设置图片右对齐

　　是不是觉得图和文字排得太挤了，那好，我们给图片和文字间加点距离。在“属性面板”中的“H Space”框中输入10，敲下回车，图的左右各出现10个像素的间距。同样，我们可以在“V Space”框中也输入适当的数值，使图的上下也与文字有一定的间距（图5）。

图5　设置图片与文字间距

　　有的上网者为了加快页面下载速度，会设置不让图片显示，这时我们可以给图形加个说明文字（图6）。

图6　设置图片与文字间距

　　在属性面板中的“ALT”框中输入“我的形象”，这样在用户浏览器不支持图形时，在这个图片的位置会出现所加的注释；如果浏览器支持图片，将鼠标停在这个图片上一小会儿，也会出现这行说明文字。

　　多为上网者考虑，要养成给图形加ALT的好习惯。

（4）加超级链接

　　简单的主文件完成后，我们可以依次将其他页面，比如我的爱好、我的收藏等页面建好。这样我们就可以通过超级链接将各个页面连接起来。

　　我们选中段落中的“我的爱好”四个字，单击“属性面板”中“link”列表框右侧的文件夹图标，选择已经做好的“mylike.htm”文件，再单击“Select”，文字的超链接就加完了（图1）。

图1　选择链接文件

　　在页面上点一下，取消文字选中状态，这时看到加链接文字变为蓝色，并且带下划线。将光标定位在链接文字中，在属性面板上可以看到其链接文件，单击“Target”列表框，选择“_blank”，链接页面就会在一个新窗口中打开（图2）。

图2　属性面板上做文字链接

　　做了这么久，你一定想知道页面在浏览器中的效果吧！按下F12，系统会启动主浏览器进行页面预览，系统默认的主浏览器是Internet Explore。看，这就是页面预览效果，点一下刚做好的链接，就跳转mylike.htm页面了（图3）。

图3　点击可看到浏览效果

　　不仅文字可以做超链接，图片也可以。我们可以为刚插入的图片做一个超链接，选中图片，在属性面板中，也有“Link”项，如果知道文件名，可以直接在“Link”文本框中输入，我们输入“introduce.htm”（假设这是一个自我介绍的页面），“Target”属性也设为“_blank”，用图形做链接时，其Border值一般都设为0（图4）。

图4　用图片做链接

　　进入浏览器后，只要单击这个图形，就会跳转到相应的页面。（图5）。

图5　点击可看到浏览效果

（5）标题和页边距设置

　　再看一下我们做好的页面，你是否觉得少些什么？噢，原来页面还没有标题，背景也显单调。下面我们就来添加标题和背景图片。

　　按下Ctrl+J键，弹出“Page Properties”对话框（图1）。Title文本框中用来添加标题，当用户浏览页面时，页面标题可以帮助了解页面中的内容。我们在框中输入“欢迎到笨象的家做客”。接下来单击“Background Image”框右侧的“Browse”按钮，从弹出的对话框中选择我们事先做好的背景图，回到页面属性框中。

图1　设置页面的标题和背景

　　单击“OK”，可以看到页面有了背景。按下F12，可以看到在浏览器中，刚才输入的标题显示在标题栏中，页面背景也不错。

图2　点击可看到浏览效果

　　从浏览效果中我们可以看到，页面顶部与浏览器工具栏紧挨着，显得很挤，我们可以给页面设置边距。
　　现次按下Ctrl+J键，可以看到页面属性对话框中可以设置页边距。
　　Top Margin表示页面距顶边距离；
　　Left Margin表示页面距左边距离；
　　Margin Height表示边距高度；
　　Margin Width表示边距宽度。

图3　设置页边距

　　我们将Top Margin设为20，Left Margin设为10，单击“Apply”按钮，可以看到页面上面不那么挤了，关闭设置对话框。

　　进入浏览器，可以看到新的页面效果。

图4　点击可看到浏览效果

　　最后我们再保存一下页面，一个简单的个人主页就完成了。怎么样，很容易吧！如果你要做出更漂亮，更复杂的页面，就继续学习下面的课程。

所属标签：