网页制作三剑客案例教程肖维明第2章.pptVIP

尚辅网 / 主 编：高志清 作 者：张 伟 中国水利水电出版社 网页制作三剑客案例教程 第2章 定义站点和网页的基本元素 ● 学习目标 掌握“创建站点的方法、如何编辑文本、如何制作超链接、如何在网页中插入图像和多媒体”等知识点。 u 制作网站前必做的一步——定义网站 u 文本和项目列表 u 链接的应用 u 图像和多媒体 ● 学习内容 2-1 制作网站前必做的一步——定义网站 2-1-1 定义网站 所谓的定义网站，就是在自己的计算机中创建一个文件夹，用来放置所有的文件，然后再将这个文件夹定义为站点。 2-1-2 在站点中编辑文件 网站站点建立完成后，就可以在站点中创建网页和存储文件夹了，我们可以通过下拉菜单中【编辑】下面的命令对对象进行复制、删除、命名等操作。 创建新文件 对文件名进行修改 2-2 文本和项目列表 文本和样式一样，统治着Web世界。在网页上输入、编辑、格式化文本是网络开发者的重要工作之一，Dreamweaver提供了必要的工具使用户能够尽可能干净利落地完成这些任务，本部分主要介绍了文本的使用方法。 我们首先进行网页标题的设置，网页标题就是在IE中网页左上角所显示的标题。 2-2-1 设置网页文档属性 打开的网页文档 在【标题栏】中输入标题之后并进行确认，设置完成后按快捷键F12键对页面进行预览。 输入网页标题 预览效果 本节介绍修改文字字号、文字颜色等基本属性的方法。 2-2-2 文字大小颜色和对齐 更改字号 单击【属性】展开按钮，显示【属性】面板，如右图所示。在【属性】面板中单击【大小】下拉列从中选择所需字体。 修改文字颜色 选择文本之后，单击【属性】面板中的颜色块按钮，如下图所示。然后，从调色板中选择所需颜色即可。 在Dreamweaver中添加新字体 在【属性】面板的【字体】下拉列表中选择【编辑字体列表】项。如下图所示。 在出现的【编辑字体列表】对话框中，选择【可用字体】框中的某一字体，然后再单击 “登录按钮”，选择的字体就会被添加到【字体列表】选项中，如右图所示。 单击 “添加字体列表按钮”，在【字体列表】选框中会出现所添加的字体，选择要添加的字体，单击 “登录按钮”，如左图所示。 字体全部添加后，单击【确定】按钮即可。 在Dreamweaver中有几种换行的方法，比如：段落的切换以及强制换行等。 2-2-3 段落的换行 光标放置于两个文字之间，单击键盘中的空格键，输入空格。 选择【插入工具栏】中的【文本】，找到这里面的最后一个列表，并选择其中的【不换行空格】命令。 通过快捷键Ctrl+Shift+Space输入空格。 通过输入法中的全角模式，输入空格。 选择菜单栏中的【编辑】/【首选参数】命令，打开【首选参数】对话框。勾选【常规】选项中的“允许多个连续的空格”。 在文本中输入空格 段落的切换：按键盘中的Enter键。 强制换行：按键盘中的Shift+Enter键。 在一些网页文档中常常列举一些事务。利用项目列表，就可以将这些类似属性的事务规类到一起管理。这样，就可以设计出较为简明、整齐的网页文档了。 2-2-4 利用项目列表整理复杂内容 2-3 链接的应用 网页的最大特点和优点就在于它可以通过超链接功能，在多个网页文档内自由的来回穿梭。 2-3-1链接前的准备 修改页面属性，选择菜单栏中的【修改】/【页面属性】命令，打开【页面属性】对话框。 在【分类】栏中选择【链接】，在右侧的链接设置中设置自己喜欢的链接样式。 设置完成后单击 按钮，完成链接前的准备工作。 2-3-2 创建文字链接 在页面中输入要链接的文字。 选择文字，打开【属性】面板，单击【浏览文件】按钮，在站点中选择“return.html”页，创建一个相对的地址。 保存页面并预览网页 下面我们来制作一个内部的链接。 2-3-3 创建图像链接 在设置图像超链接时，既可以对整幅图像设置一个链接，也可以选择图像的一部分设置链接。 2-3-3-1 设置整幅图像链接 选择页面中的图片，直接拖拽【属性】面板中，【链接】处的 【锚点】，链接到网页文件“xianshi.html”。 将文件保存，敲击键盘中的F12键预览页面，单击页面中的图片，会打开一个新的页面“xianshi.html”，说明链接成功。 2-3-3-2创建局部图像链接 选择图像，在【属性】面板中随便选择一个热区。 将鼠标移动到图片上，在文字“学我所需”上绘制一个矩形。 在【属性】面板中将热区链接到文件“xianshi.html”上，如右图所示。 将文件保存，预览页面，会发现现在单击图片没有任何的反应，将鼠标移动到文字“学我所需”上，链接出现了，单击鼠标便可链接到新的页面