Dreamweaver制作基本标签
dreamweaver制作网页常用代码
meta是用来在HTML文档中模拟HTTP协议的响应头报文。
meta 标签用于网页的<head>与</head>中，meta 标签的用处很多。
meta 的属性有两种：name和http-equiv。
name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。
这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。
比较常用的有以下几个：name 属性<meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等；<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词；<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容；<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者；<meta name="Robots"contect="all|none|index|noindex|follow|nofollow">其中的属性说明如下：设定为all：文件将被检索，且页面上的链接可以被查询；设定为none：文件将不被检索，且页面上的链接不可以被查询；设定为index：文件将被检索；设定为follow：页面上的链接可以被查询；设定为noindex：文件将不被检索，但页面上的链接可以被查询；设定为nofollow：文件将不被检索，页面上的链接可以被查询。
DreamweaverDiv标签
DreamweaverDiv标签一、Div标签概述（Division）元素在文档内定义了一个区域，元素包括文本、表格、表单、图像、插件等各种页面内容，甚至在元素内还可以包含元素。
如果要使标签显示特定的效果，或者在某个位置上显示HTML内容，就要为标签定义CSS 样式。
使用标签的方法为：HTML内容如果单独使用标签，而不加任何CSS样式，那么它的效果和使用标签是一样的。
二、插入标签1. 将鼠标放在要插入标签的位置上，然后点击“插入”菜单，选择“布局对象”命令，在弹出的子菜单中选择“Div 标签”项。
或者在“插入”面板中选择“布局”项，点击“插入 Div 标签”图标，如下图所示：2. 点击图标后，打开“插入 Div 标签”对话框，如下图所示：3. 在“插入 Div 标签”对话框中，可以进行以下操作：插入：在插入点——在光标放置的位置上插入标签；在开始标签之后——在标签的后面插入标签；在结束标签之前——在结束标签的前面插入标签。
类：选择一个类。
请阅读CSS样式表教程：类选择器。
ID：选择一个ID。
请阅读CSS样式表教程：id选择器。
“新建 CSS 规则”按钮：点击此按钮，会打开“新建 CSS 规则”对话框。
请阅读在Adobe Dreamweaver CS4中使用CSS样式表的方法。
提示：使用“新建 CSS 规则”，可以添加标签的类和ID。
4. 在对话框中设置好各项以后，或者不进行设置，单击“确定”按钮，即可将标签插入到文档中。
如下图所示：5. 在文档的“设计”视图中点击标签框线，选中标签，如下图所示：6. 可以打开标签“属性”面板，如下图所示：Div ID：选择一个ID。
请阅读CSS样式表教程：id选择器。
类：选择一个类。
请阅读CSS样式表教程：类选择器。
“CSS面板”按钮：在弹出的窗口中可以创建新的CSS规则或者添加附加样式表。
三、在标签内输入内容在该标签的框线内单击鼠标左键，将光标定位到框线内就可以输入内容了。
dreamweaver中常用到的标签及含义
3.显示小字体 ＜small＞..........＜/small＞
4.显示大字体 ＜big＞..........＜/big＞
5.粗体字 ＜b＞..........＜/b＞
6.斜体字 ＜i＞..........＜/i＞
7.打字机字体 ＜tt＞..........＜/tt＞
＜head＞
＜title＞标题＜title＞
＜/head＞
＜body＞..........文件内容..........
＜/body＞
＜/html＞
1.文件标题
＜title＞..........＜/title＞
2.文件更新--＜meta＞
【1】10秒后自动更新一次
bottom：向下对齐
【3】栏位宽度 -- width
＜th width=点数或百分比＞
【4】栏位垂直合并 -- rowspan
＜th rowspan=欲合并栏位数＞
【5】栏位横向合并 -- colspan
＜th colspan=欲合并栏位数＞
清单
一、目录式清单
＜dir＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/dir＞
2.字体变化 ＜font＞..........＜/font＞
【1】字体大小 ＜font size=#＞..........＜/font＞ #=1~7；数字愈大字也愈大
【2】指定字型 ＜font face="字型名称"＞..........＜/font＞
【3】文字颜色 ＜font color=#rrggbb＞..........＜/font＞ rr：表红色（red）色码
DW常用代码
<!--...-->,注释标记,在"<!--"与"-->"之间的内容将不在浏览器中显示.
基本标签
: <html></html>,创建一个HTML文档;
<head></head>,设置文档标题和其它在网页中不显示的信息;
: COLOR=#RRGGBB,前景色,参考色彩对照表.
BGCOLOR=#RRGGBB,背景色.
<center>表示绝对居中.
<table></table>表格标识的开始和结束.
属性
: cellpadding=数值单位是像素,定义表元内距
属性
: scrollamount=1~60,滚动速度
direction=|left|right|up|down|,滚动方向
scrolldelay=滚动延时,单位:毫秒
<P>段落标识, 空格符,
<img>贴图标识
属性
<title></title>,设置文档的标题;
<h1></h1>,最大的标题;
<pre></pre>,预先格式化文本;
<u></u>,下划线
<b></b>,黑体字;
<dl>列表开始
<dt>列表项
<P>,分段标志
<B></B>,采用黑体字
<I></I>,采用斜体字
在dreamweaver中,表格标记的基本结构
Dreamweaver是Adobe公司推出的一款网页制作软件，它广泛应用于网页设计和开发领域。
在Dreamweaver中，表格标记是网页设计中常见的一种元素，它可以用于展示和组织网页上的各种信息。
在这篇文章中，我将介绍在Dreamweaver中使用表格标记的基本结构，希望能帮助读者更好地掌握这一技巧。
在Dreamweaver中，表格标记的基本结构包括表格标签、行标签和单元格标签。
下面我将逐一介绍它们的用法：1. 表格标签在HTML中，表格使用`<table>`标签来定义，其中包括表格的基本属性和整体样式。
在Dreamweaver中，可以通过插入菜单或者直接手动输入`<table>`来插入一个表格标签。
表格标签中可以设置一些基本属性，如边框宽度、背景颜色等。
也可以设置表格的尺寸和对齐方式等属性。
2. 行标签在表格中，使用`<tr>`标签来定义每一行，`<tr>`标签必须包含在`<table>`标签内部。
通过插入行标签，可以在表格中添加新的行，每一行中可以包含若干个单元格。
在Dreamweaver中，可以通过插入菜单或者直接手动输入`<tr>`来插入一个行标签。
3. 单元格标签在每一行中，使用`<td>`标签来定义每个单元格，`<td>`标签也必须包含在`<tr>`标签内部。
通过插入单元格标签，可以在表格中添加新的单元格，并在其中填充文本、图片或者其他元素。
在Dreamweaver 中，可以通过插入菜单或者直接手动输入`<td>`来插入一个单元格标签。
在适当的情况下，也可以使用`<th>`标签来定义表格中的表头单元格，它和`<td>`标签的用法类似，但是会显示为加粗的文本，以示区分。
通过以上介绍，我们可以看到，在Dreamweaver中使用表格标记的基本结构是通过`<table>`标签定义整个表格，然后在其中添加`<tr>`标签和`<td>`标签来定义行和单元格。
Dreamweaver操作基础
⑥ 是否需要存回和取出，选择弹出对话框 中的【否，不启用存回和取出】
• 若选“是”，则可防止开发人员同时对同 一网页进行编辑
08:52
7
创建站点
⑦ 创建文件夹 ，在文件列表中单击鼠标右
键，选择“新建文件夹”，创建两个文 件夹image、music用来放置相应素材文 件
– 下拉菜单栏、插入工具栏、显示选择 栏、标签选择栏、属性检查器、浮动 面板组和文档窗口等部分
– 在不同编辑状态，可能会略有增减
• 在进行网页编辑时，当面板影响了 整个画面时，可以使用F4键隐藏或 显示所有面板
08:52
3
08:52
4
2. 浮动面板
• 很多便捷功能置于面板中，面板又被集中成浮动 面板组
47很多便捷功能置于面板中面板又被集中成浮动面板组css样式面板管理影响当前所选页面元素的css规则和属性或影响整个文档的规则和属性标签检查器面板包括属性管理与行为管理两部分文件面板用于查看和管理dreamweaver所有站点并管理站点中各文件和资源20
5.2 Dreamweaver 8操作基础
• 1. 窗口简介 • 2. 浮动面板 • 3. 创建站点
• 06版实验指导
– 实验15
• 作业
– 07版教材P214，5.2.4习题与思考
08:52
16
08:52
1
1. 窗口简介
• Dreamweaver是Macromedia公司开发的专业 级Web网站开发工具
– 功能强大 – 开发效率高 – 编辑可视化
• 提供了一个将全部元素置于一个窗口中的集成 布局
– 在集成的工作区中，全部窗口和面板都被集成到一 个更大的应用程序窗口中
第3章 Dreamweaver基本操作
本章目标任务：
3.1 中文Dreamweaver8工作环境
中文Dreamweaver8提供可视化的网页开发环境,具 有所见即所得的功能。它的工作窗口简洁明了，功能面 板及工具栏中几乎集中了所有的重要功能，属性面板放 在窗口底部外，其他面板多放在窗口的右边，可随时打 开与关闭，并能折叠和展开，这样就克服了以往版本浮 动面板位置较乱，有时会影响网页编辑的不足。 中文Dreamweaver8工作环境即中文Dreamweaver8应 用程序窗口，该应用程序窗口由标题栏、菜单栏、文档 工具栏、文档编辑窗口、浮动面板等组成，文档编辑窗 口由文档标题栏、页面编辑区、状态栏等组成，浮动面 板包括插入面板、属性面板、面板组等。中文 Dreamweaver8工作环境图3-1所示：
3.1 中文Dreamweaver8工作环境
输入面板 文档工具栏 文档窗口 菜单栏 标题栏 面板组
属性面板
页面编辑区
状态栏
图3-1 中文Dreamweaver8工作环境
3.1 中文Dreamweaver8工作环境
1. 标题栏 标题栏上显示当前网页的页面标题及打开 的文件名。若是对一个新网页进行编辑，则在 对此网页命名之前自动将此文件命名为 “Untitled-x”(x是按顺序产生的数字)。 2. 菜单栏 和其他应用软件基本相同，菜单栏中的每 一项都有一个下拉式菜单，Dreamweaver中大部 分操作都可以通过菜单项的下拉菜单来实现。
3.1 中文Dreamweaver8工作环境
属性面板 属性面板是使用频率最高的一个浮动面板，被放置在窗口的下 边。属性面板中的项目会随着网页中选定对象的不同而改变的。在 属性面板中，详细地列出了所选对象的属性参数，用户可以通过属 性面板查看或修改这些参数。 选择【窗口】→【属性】菜单命令或按快捷键【Ctrl】+【F3】， 可显示或隐藏属性面板。 面板组 常用面板组显示在窗口的右侧，如文件面板、资源面板、CSS 样式面板、框架面板层面板、行为面板等。非常用面板组显示在窗 口的下面，如结果面板、时间轴面板等。 使用“窗口”菜单中的相应面板选项，可以显示或隐藏相应面 板。在面板标题上单击右键，在快捷菜单中选择“关闭面板组”， 也可关闭相应面板。 各种面板的具体应用性操作在后面课程中再具体介绍。
Dreamweaver8教程(三)
Dreamweaver8.0创建模板在我们制作网站的过程中，为了统一风格，很多页面会用到相同的布局、图片和文字元素。
为了避免大量的重复劳动，可以使用Dreamweaver8提供的模板功能，将具有相同版面结构的页面制作为模板，将相同的元素（如导航栏）制作为库项目，并存放在库中可以随时调用。
一、创建模板模板的创建有三种方式。
1、直接创建模板选择“窗口/资源”命令，打开“资源”面板，切换到模板子面板，如下图所示。
单击模板面板上的“扩展”按钮，在弹出菜单中选择“新建模板”这是在浏览窗口出现一个未命名的模板文件，给模板命名。
然后单击“编辑”按钮，打开模板进行编辑。
编辑完成后，保存模板，完成模板建立。
2、将普通网页另存为模板打开一个已经制作完成的网页，删除网页中不需要的部分，保留几个网页共同需要的区域。
选择“文件/另存为模板”命令将网页另存为模板。
在弹出的“另存模板”对话框中，“站点”下拉列表框用来设置模板保存的站点，课选择一个选项。
“现存的模板”选框显示了当前站点的所有模板。
“另存为”文本框用来设置模板的命名。
单击“另存模板”对话框中的“保存”按钮，就把当前网页转换为了模板，同时将模板另存到选择的站点。
单击“保存”按钮，保存模板。
系统将自动在根目录下创建Template文件夹，并将创建的模板文件保存在该文件夹中。
在保存模板时，如果模板中没有定义任何可编辑区域，系统将显示警告信息。
我们可以先单击“确定”，以后再定义可编辑区域。
3、从文件菜单新建模板选择“文件/新建”命令，打开“新建文档”对话框，然后再类别中选择“模板页”，并选取相关的模板类型，直接单击“创建”按钮即可。
Dreamweaver8.0定义可编辑区域模板创建好后，要在模板中建立可编辑区，只有在可编辑区里，我们才可以编辑网页内容。
可以将网页上任意选中的区域设置为可编辑区域，但是最好是基于HTML代码的，这样在制作的时候更加清楚。
在文档窗口中，选中需要设置为可编辑区域的部分，单击常用快捷栏的“模板”按钮，在弹出菜单中选择“可编辑区域”项。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Dreamweaver制作基本标签在上一章中已介绍了CSS样式表，不仅介绍了样式表的基本语法，还讲解了如何使用常用的样式属性对网页的字体、背景、各种表单元素和超链接等进行美化，最后简单地介绍了3种不同的样式表应用场合。
本章开始讲解使用Dreamweaver制作网页，其中重点是使用Dreamweaver实现各类HTML标签和CSS样式，难点是如何制作样式。
为了使我们制作的页面更规整，我们还要研究使用Dreamweaver如何实现表格对图文进行布局、表格对表单进行布局和框架页面。
HTML基本标签在此前我们都学过，怎么在这里又提起？不知大家发现没有，我们在前面都是手写HTML代码，速度很慢，效率很低，而且容易出错。
那有没有一种比较好的编写HTML代码的工具？它既能提高速度，又能提高效率，还不容易出错。
有！这个工具就是Dreamweaver，它不仅提供了强大的设计功能，而且还提供了自动代码提示功能。
下面我们就使用Dreamweaver通过可视化操作来实现HTML基本标签，也就是在不写一行代码的情况下，能够快速、高效地实现各类HTML标签。
一、什么是基本标签基本标签就是我们在制作网页时，常用的一些标签，如页面背景、标题、图片、换段、换行、超链接、颜色、字号大小、对齐、空格、列表，这些都是基本标签，也是常用的标签，如图1所示。
在前面已经学过这些标签，那为什么还要学呢？原因很简单，就是我们要用Dreamweaver通过可视化操作来实现这些标签，而不是手写代码，这样能大大提高开发效率，减轻网页设计人员、开发人员的负担。
图1 基本标签二、如何使用基本标签在使用基本标签前，我们必须先创建一个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 徽标。
在“属性”检查器中可以设置影片的宽度和高度。
图3 “选择文件”对话框5.创建超链接超级链接（简称为超链接）是指向到另一文件（图形、音频、视频）或同一文档的另一个部分的链接。
当用户单击超级链接时，就会跳转到链接中指定的网址(URL)。
第一种：使用Dreamweaver链接到其他文档(1) 在“文档”窗口中选择文本或某个图像作为链接。
(2) 打开“属性”检查器（选择“窗口”一“属性”命令）。
(3) 单击“链接”字段右边的文件夹（“浏览文件”）图标进行浏览，然后选择一个文件。
(4) 此时将弹出“选择文件”对话框。
在此可以浏览并选择想要链接打开的文件。
(5) 在“选择文件”对话框中，到链接文档的路径显示在URL字段中。
从“相对于”下拉列表框中选择路径是否相对于文档。
(6) 单击“确定”按钮应用该链接。
(7) 在“属性”检查器中，从“目标”下拉列表框中选择要打开文件的位置。
要使链接的文档显示在除当前窗口或框架以外的其他位置，请从“目标”下拉列表框中选择一个选项。
第二种：使用Dreamweaver链接到同一文档的特定位置通过首先创建命名锚记（通常也简称锚），然后使用“属性”检查器链接到文档的特定部分。
创建到命名锚记的链接的过程分为两步。
首先，创建命名锚记，然后创建到该命名锚记的链接。
创建命名锚记，请执行以下操作。
(1) 在“文档”窗口的“设计”视图中，将插入点放在需要命名锚记的地方。
(2) 执行下列操作之一：● 选择菜单“插入”一“命名锚记”命令。
● 按下CtrI+Alt+A组合键。
● 在插入栏的“常用”类别中，单击“命名锚记”按钮。
此时将显示“命名锚记”对话框，如图4所示。
图4 ”命名锚记”对话框(3) 为锚记命名。
在此示例中，锚记名称设置为“helpme”。
锚记标记将会显示在插入点上。
以类似方法在文档中创建任意多个锚记，如图5所示。
图5 在文档中创建命名锚记链接到命名锚记，请执行以下操作。
(1) 在“文档”窗口的“设计”视图中，选择要从其创建链接的文本或图像。
(2) 在“属性”检查器的“链接”文本框中，输入一个数字符号(#)和锚记名称。
例如：要链接到当前文档中名为“helpme”的锚记，输入#helpme。
小经验：由于锚记名称区分大小写，请在链接选项中仔细输入锚记名称。
还需记住，在“链接”文本框中输入的名称必须与锚记的名称完全一致。
6.换段、换行要将段落格式应用于文本块，请执行以下步骤。
(1) 将插入点放置在文本块的任一位置。
(2) 然后执行以下步骤之一：●从“属性”检查器中的“格式”下拉列表框中选择“段落”选项。
●选择“文本”一“段落格式”一“段落”命令。
要将换行格式应用于文本块，请执行以下操作。
(1) 将插入点放置在该文本块的需要换行的位置。
(2) 然后按下Shift+Enter组合键。
7.格式化文本在文档中输入文本后，若对文本的格式不满意，可在“属性”面板中设置文本的相关属性，如图6所示。
设置文本属性具体操作步骤如下。
图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入门经典》教程列表转载请注明本文地址:/html/jc/524.html。