首页 > 代码库 > 5.1 Dreamweaver制作基本标签
5.1 Dreamweaver制作基本标签
在上一章中已介绍了CSS样式表,不仅介绍了样式表的基本语法,还讲解了如何使用常用的样式属性对网页的字体、背景、各种表单元素和超链接等进行美化,最后简单地介绍了3种不同的样式表应用场合。 本章开始讲解使用Dreamweaver制作网页,其中重点是使用Dreamweaver实现各类HTML标签和CSS样式,难点是如何制作样式。为了使我们制作的页面更规整,我们还要研究使用Dreamweaver如何实现表格对图文进行布局、表格对表单进行布局和框架页面。 HTML基本标签在此前我们都学过,怎么在这里又提起?不知大家发现没有,我们在前面都是手写HTML代码,速度很慢,效率很低,而且容易出错。那有没有一种比较好的编写HTML代码的工具?它既能提高速度,又能提高效率,还不容易出错。有!这个工具就是Dreamweaver,它不仅提供了强大的设计功能,而且还提供了自动代码提示功能。下面我们就使用Dreamweaver通过可视化操作来实现HTML基本标签,也就是在不写一行代码的情况下,能够快速、高效地实现各类HTML标签。 一、什么是基本标签 基本标签就是我们在制作网页时,常用的一些标签,如页面背景、标题、图片、换段、换行、超链接、颜色、字号大小、对齐、空格、列表,这些都是基本标签,也是常用的标签,如图1所示。在前面已经学过这些标签,那为什么还要学呢?原因很简单,就是我们要用Dreamweaver通过可视化操作来实现这些标签,而不是手写代码,这样能大大提高开发效率,减轻网页设计人员、开发人员的负担。
二、如何使用基本标签 在使用基本标签前,我们必须先创建一个HTML文档,否则,我们的HTML标签就无处安身。 1.新建一个HTML页面 在Dreamweaver中新建页面,可采取以下3个步骤: (1) 选择“文件”一“新建”命令或按快捷键CtrI+N,弹出“新建文档”对话框。 (2) 从“类别”列表框中选择“基本页”选项,然后从右侧的列表中选择“HTML”选项。 (3)再单击“创建”按钮。 新文档在“文档”窗口中打开,如图2所示。 2.设置页面标题和背景 指定在浏览器窗口的标题栏中出现的网页标题,可帮助网站访问者了解网页内容的主题,很多搜索引擎(如Google、百度等)也是根据网页的标题进行搜索的。 每张页面都应该设定一个标题。 要设定标题,请在“文档”工具栏(如图2所示)的“标题:”文本框中输入标题,或者从菜单中选择“修改”一“页面属性”命令。 要设定背景,请在图2所示的“属性”面板中选择“页面属性”一“背景颜色”命令。 图2 Dreamweaver CS3 新建文档界面 3.插入图片 要插入图像,请执行以下步骤。 (1) 将插入点放置在“文档”窗口中要显示图像的位置。 (2) 选择“插入”一“图像”命令。此时,弹出“选择图像源文件”对话框,您可以在此对话框中浏览要插入到网页的图像。该对话框还包含“图像预览”选项。选择该选项可以在插入图像前,先查看该图像的缩略图。 (3) 选择要插入的图像,然后单击“确定”按钮。图像即被插入到“文档”窗口中。 4.插入Flash 无论Flash文件是广告条、按钮,还是交互式动画,都可以转换为.swf格式。这种格式比标准GIF动画有更多功能,包括高级动画、下载速度更快和流功能。要插入Flash, 请执行以下步骤。 (1) 在“文档”窗口中,将插入点放置在要插入Flash的地方。 (2) 选择“插入”一“媒体”一“Flash”命令。即会出现“选择文件”对话框(如图3所示)。 (3) 选择一个影片文件。 (4) 单击“确定”按钮。 此Flash文件即被插入“文档”窗口中,并显示为灰色矩形,矩形中间是Flash徽标。在“属性”检查器中可以设置影片的宽度和高度。
5.创建超链接 超级链接(简称为超链接)是指向到另一文件(图形、音频、视频)或同一文档的另一个部分的链接。当用户单击超级链接时,就会跳转到链接中指定的网址(URL)。 第一种:使用Dreamweaver链接到其他文档 (1) 在“文档”窗口中选择文本或某个图像作为链接。 (2) 打开“属性”检查器(选择“窗口”一“属性”命令)。 (3) 单击“链接”字段右边的文件夹(“浏览文件”)图标进行浏览,然后选择一个文件。 (4) 此时将弹出“选择文件”对话框。在此可以浏览并选择想要链接打开的文件。 (5) 在“选择文件”对话框中,到链接文档的路径显示在URL字段中。从“相对于”下拉列表框中选择路径是否相对于文档。 (6) 单击“确定”按钮应用该链接。 (7) 在“属性”检查器中,从“目标”下拉列表框中选择要打开文件的位置。要使链接的文档显示在除当前窗口或框架以外的其他位置,请从“目标”下拉列表框中选择一个选项。 第二种:使用Dreamweaver链接到同一文档的特定位置 通过首先创建命名锚记(通常也简称锚),然后使用“属性”检查器链接到文档的特定部分。 创建到命名锚记的链接的过程分为两步。首先,创建命名锚记,然后创建到该命名锚记的链接。 创建命名锚记,请执行以下操作。 (1) 在“文档”窗口的“设计”视图中,将插入点放在需要命名锚记的地方。 (2) 执行下列操作之一: ● 选择菜单“插入”一“命名锚记”命令。 ● 按下CtrI+Alt+A组合键。 ● 在插入栏的“常用”类别中,单击“命名锚记”按钮。 此时将显示“命名锚记”对话框,如图4所示。
(3) 为锚记命名。在此示例中,锚记名称设置为“helpme”。 锚记标记将会显示在插入点上。以类似方法在文档中创建任意多个锚记,如图5所示。
链接到命名锚记,请执行以下操作。 (1) 在“文档”窗口的“设计”视图中,选择要从其创建链接的文本或图像。 (2) 在“属性”检查器的“链接”文本框中,输入一个数字符号(#)和锚记名称。 例如: 要链接到当前文档中名为“helpme”的锚记,输入#helpme。 小经验:由于锚记名称区分大小写,请在链接选项中仔细输入锚记名称。还需记住,在“链接”文本框中输入的名称必须与锚记的名称完全一致。 6.换段、换行 要将段落格式应用于文本块,请执行以下步骤。 (1) 将插入点放置在文本块的任一位置。 (2) 然后执行以下步骤之一: ● 从“属性”检查器中的“格式”下拉列表框中选择“段落”选项。 ● 选择“文本”一“段落格式”一“段落”命令。 要将换行格式应用于文本块,请执行以下操作。 (1) 将插入点放置在该文本块的需要换行的位置。 (2) 然后按下Shift+Enter组合键。 7.格式化文本 在文档中输入文本后,若对文本的格式不满意,可在“属性”面板中设置文本的相关属性,如图6所示。设置文本属性具体操作步骤如下。
(1) 选中要设置属性的文本,选择“窗口”一“属性”命令,打开“属性”面板如图6所示。 (2) 选中文本后,在“属性”面板中单击“大小”右边的下拉列表框可改变字体的 大小。 (3) 选中文本后,然后执行以下步骤之一可改变文本对齐方式: ● 在“属性”面板中,单击“文本对齐”按钮。 ● 选择“文本”一“对齐”命令,选择对齐方式。 (4) 要改变文本的颜色,单击“属性”面板中的文本颜色卡右下甬的下三角按钮,选择您喜好的颜色即可。 8.插入特殊字符 要在Dreamweaver中添加空格,请执行以下步骤。 (1) 将插入点放置在要添加空格的位置。 (2) 选择“插入”一“HTML”一“特殊字符”一“不换行空格”命令。 9.创建列表 列表可有效地将主题或数据与文档的其他部分分开。最常用的列表类型有两种:项目列表和编号列表。项目列表也称为“无序列表”,编号列表也称为“有序列表”。 创建列表时,既可以先输入列表文本,再将其没置为项目列表/编号列表,也可以在输入文本时将其设置为项目列表/编号列表。通过“列表属性”对话框,可以应用不同的项目符号或编号样式。项目列表共有两种样式:项日符号(圆圈)和正方形。编号列表则有多种编号样式,如罗马字母和字母等。 要创建列表,请执行以下步骤。 (1) 在文档中,将插入点放置在要显示第一个列表项的位置。 (2) 请执行以下步骤之一: ● 在“属性”检查器中,单击“项目列表”或“编号列表”按钮麓幽,即出现项目符号或编号。 ● 选择“文本”一“列表”一“项目列表”或“编号列表”命令。 (3 )输入项目名称,然后按Enter键。 (4) 输入下一个项目,再按Enter键。重复以上操作,直到完成添加所有列表项。 要改变整个列表的样式,请执行以下步骤。 (1) 将插入点放置在列表中的任意位置。 (2) 选择“文本”一“列表”一“属性”命令,或者单击“属性”检查器上的“列表项目”按钮隔蒸藤瑟囊,即出现“列表属性”对话框。 (3) 从“列表类型”下拉列表框中选择一种列表类型。 (4) 当“列表类型”为“编号列表”时,在“开始计数”文本框中,输入列表的起始编号。 (5) 单击“确定”按钮应用修改。 本节作业: 制作如下图网页。 注意事项: 1.全部在Dreamweaver环境下完成,观察Dreamweaver自动生产的代码。 网页学习网提示:光看教程是无法让你掌握HTML知识,最好是完成作业后才进入下一次教程,动起手来吧! 点击下载第五章案例及作业资源 返回《HTML入门经典》教程列表 |
编辑:网页学习网 |
本文地址:http://www.lodidance.com/html/jc/524.html |