《网页制作三剑客案例教程》-肖维明-电子教案 第2章

1、主 编：高志清 作 者：张 伟,中国水利水电出版社,网页制作三剑客案例教程,第2章 定义站点和网页的基本元素, 学习目标,掌握“创建站点的方法、如何编辑文本、如何制作超链接、如何在网页中插入图像和多媒体”等知识点。,u 制作网站前必做的一步定义网站 u 文本和项目列表 u 链接的应用 u 图像和多媒体, 学习内容,2-1 制作网站前必做的一步定义网站,2-1-1 定义网站,所谓的定义网站，就是在自己的计算机中创建一个文件夹，用来放置所有的文件，然后再将这个文件夹定义为站点。,2-1-2 在站点中编辑文件,网站站点建立完成后，就可以在站点中创建网页和存储文件夹了，我们可以通过下拉菜单中【编辑】下面的命令对对象进行复制、删除、命名等操作。,创建新文件,对文件名进行修改,2-2 文本和项目列表,文本和样式一样，统治着Web世界。在网页上输入、编辑、格式化文本是网络开发者的重要工作之一，Dreamweaver提供了必要的工具使用户能够尽可能干净利落地完成这些任务，本部分主要介绍了文本的使用方法。,我们首先进行网页标题的设置，网页标题就是在IE中网页左上角所显示的标题。,2-2-1 设置网页文档

2、属性,打开的网页文档,在【标题栏】中输入标题之后并进行确认，设置完成后按快捷键键对页面进行预览。,输入网页标题,预览效果,本节介绍修改文字字号、文字颜色等基本属性的方法。,2-2-2 文字大小颜色和对齐,更改字号,单击【属性】展开按钮，显示【属性】面板，如右图所示。在【属性】面板中单击【大小】下拉列从中选择所需字体。,修改文字颜色,选择文本之后，单击【属性】面板中的颜色块按钮，如下图所示。然后，从调色板中选择所需颜色即可。,在Dreamweaver中添加新字体,在【属性】面板的【字体】下拉列表中选择【编辑字体列表】项。如下图所示。,在出现的【编辑字体列表】对话框中，选择【可用字体】框中的某一字体，然后再单击 “登录按钮”，选择的字体就会被添加到【字体列表】选项中，如右图所示。,单击 “添加字体列表按钮”，在【字体列表】选框中会出现所添加的字体，选择要添加的字体，单击 “登录按钮”，如左图所示。,字体全部添加后，单击【确定】按钮即可。,在Dreamweaver中有几种换行的方法，比如：段落的切换以及强制换行等。,2-2-3 段落的换行,光标放置于两个文字之间，单击键盘中的空格键，输入空格

3、。 选择【插入工具栏】中的【文本】，找到这里面的最后一个列表，并选择其中的【不换行空格】命令。 通过快捷键+输入空格。 通过输入法中的全角模式，输入空格。 选择菜单栏中的【编辑】/【首选参数】命令，打开【首选参数】对话框。勾选【常规】选项中的“允许多个连续的空格”。,在文本中输入空格,段落的切换：按键盘中的键。 强制换行：按键盘中的+键。,在一些网页文档中常常列举一些事务。利用项目列表，就可以将这些类似属性的事务规类到一起管理。这样，就可以设计出较为简明、整齐的网页文档了。,2-2-4 利用项目列表整理复杂内容,2-3 链接的应用,网页的最大特点和优点就在于它可以通过超链接功能，在多个网页文档内自由的来回穿梭。,2-3-1链接前的准备,修改页面属性，选择菜单栏中的【修改】/【页面属性】命令，打开【页面属性】对话框。 在【分类】栏中选择【链接】，在右侧的链接设置中设置自己喜欢的链接样式。 设置完成后单击 按钮，完成链接前的准备工作。,2-3-2 创建文字链接,在页面中输入要链接的文字。 选择文字，打开【属性】面板，单击【浏览文件】按钮，在站点中选择“return.html”页，创建一个相

4、对的地址。 保存页面并预览网页,下面我们来制作一个内部的链接。,2-3-3 创建图像链接,在设置图像超链接时，既可以对整幅图像设置一个链接，也可以选择图像的一部分设置链接。,2-3-3-1 设置整幅图像链接,选择页面中的图片，直接拖拽【属性】面板中，【链接】处的 【锚点】，链接到网页文件“xianshi.html”。 将文件保存，敲击键盘中的键预览页面，单击页面中的图片，会打开一个新的页面“xianshi.html”，说明链接成功。,2-3-3-2创建局部图像链接,选择图像，在【属性】面板中随便选择一个热区。,将鼠标移动到图片上，在文字“学我所需”上绘制一个矩形。,在【属性】面板中将热区链接到文件“xianshi.html”上，如右图所示。 将文件保存，预览页面，会发现现在单击图片没有任何的反应，将鼠标移动到文字“学我所需”上，链接出现了，单击鼠标便可链接到新的页面中。,2-3-4-1创建电子邮件连接,新建一个页面，在页面中输入文字“我的邮箱”，选择文字，在【链接】对话框中输入“mailto:”。,保存页面，预览页面。在浏览器中单击已创建电子邮件链接的文字，将启动Outlook Exp

5、ress，供访问者发送邮件，如右图所示。,2-3-4 其他的链接,2-3-4-2 创建下载连接,输入文字并将其选择，单击【属性】面板【链接】栏右侧的 文件夹，在弹出的【选择文件】对话框中，选择一个以.zip或.exe为扩展名的文件，如左图所示。单击“确定”按钮，便可完成文件的下载链接。,2-3-4-3 锚点连接,制作锚点： 将光标设置到文字“人物一 卡卡”的左侧，单击【常用】工具栏下面的【命名锚记】按钮，打开【命名锚记】对话框。如左下图所示。在【命名锚记】输入框中输入英文或者是数字，但不能输入中文。单击 按钮。此时在文字“人物一 卡卡”左侧就出现了一个锚点，,设置锚点链接： 回到最上方选择第一个名字，在【属性】面板的【链接】对话框中输入“#1”。,保存页面，预览网页。当单击一个名字时，页面就跳转到其相应的简介上了。,2-4 图像和多媒体,一个网站的精彩程度有一半是取决于图像的运用，如果图片处理合理，网站会显的个性十足、精彩纷呈。下面将讲解网页中的形象元素图像和多媒体。,2-4-1图像的插入,单击【常用】工具栏中【插入图像】按钮，便可很轻松的插入图像。,2-4-2 图像的编辑,2-4-3 插入鼠标经过图像,在页面中插入一副图片，输入图片的名称。 选择图片，将“宽”和“高”两个输入框中的数值删除，然后“宽” 输入框中输入数值“200”，此时图片等比例的缩小。在【边框】输入框输入相应数值，可以设置图片的边框。,在Dreamweaver中可以直接插入鼠标经过图像，它实际上就是一个按钮，这个按钮包含一个链接，当鼠标移到图像的时候会变为另外的一张图片。,2-4-4 插入透明Flash,打开“index.htm”文件，将光标置于单元格中，选择【常用】工具栏中的【媒体】/【Flash】选项。,将“cloud.swf”插入到单元格中，单击【属性】面板中的 按钮播放动画。 停止播放动画，选择插入的Flash，单击 按钮打开代码视窗，在标记中输入。,保存文件并预览页面，背景图像显露出来，如右图所示。,2-6 本章小结,至此本章内容讲解完毕，以上讲的内容比较简单，但是这又是制作网页最基础的知识，读者一定要熟练掌握这些知识点，这样才能更好地进行下面的学习。,

《《网页制作三剑客案例教程》-肖维明-电子教案 第2章》由会员E****分享，可在线阅读，更多相关《《网页制作三剑客案例教程》-肖维明-电子教案 第2章》请在金锄头文库上搜索。