Html静态网页代码汇总

Dreamweaver静态网页Html标记代码汇总

网站相关概念

Internet是一个全球计算机互相网络，WWW是Internet所提供的一种极其重要的服务，即World Wide Web，简称Web；WWW主要以Web为表现形式，或者说，Web是Web页即网页的载体，我们所说的Web页就是指由HTML（超文本标记语言）这种语言编写的一类特殊文件，通常后缀为*.html或*.htm的页面。

Dreamweaver CS基本应用

HTML文档结构：

<html></html>：静态网页源代码首尾结构标记，代码内呈现网页所有内容

<body bgcolor=”背景”></body>：网页主体部分

<head></head>：网页头部，包含网页导航栏中的标题和网页不显示的信息

<title></title>：标签内显示出网页台头的标题名，用于<head></head>标签之内

<h2></h2>：表示是一行级别是2号的标题文字，有h1~h6的6级标题可选

<font color=”颜” face=”字体” size=”尺寸”></font>：文字处理标签

<pre></pre>：预先格式化，以格式化显示标签中的内容结构

<p align=”对齐方式”></p>：段落标记，center(居中)、left(左边)、right(右边)

<br />：换行标记，按[shift]+[enter]可实现

<b>粗体</b>：粗体字体标记<i>斜体</i>：斜体字体标记

<sup>上标</sup>：上标标记文本格式<sub>下标</sub>：下标标记文本格式

<ul></ul>：无序列表开始结束标记<li></li>：列表项标记，</li>为可选项

<ol start=”数字”></ol>：有序列表开始结束标记，start属性指定列表的起始数字

<li type=”有序列表标签”>：有序列表的序列标记，可自定义为数字或字母等

<hr align=”对齐位置” width=”长度” size=”高度” noshade=”纯” color=”颜”>：水平线标记，可标记水平线的长度、高度、纯阴影显示、颜等属性

旗袍花扣<img align=”图像与文本的对齐方式” src=”图像名称”>：在HTML中插入图像，align属性值：top(头部)、bottom(底部)、middle(居中)、left(居左)、right(居右)

<p onclick="MM_popupMsg('你好！')">点击</p>：弹出“你好！”信息的行为

<p onmouseover="MM_swapImage('image', '图像路径'),|">点击</p>：弹出图片

<marquee direction=”移动方向” behavior=”设置路径” loop=”循环圈数” bgcolor=”背景”>：滚动文字字幕，方向属性:down向下、up向上、left向左、right向右

<a href=”kaka”>咔咔主页</a>：超级链接标记

<a href=javascript.alert(“谢谢！”)>点击</a>：对话框脚本链接

<a href=””>开心农场外挂下载<a/>：文件下载链接

<a href=”news.html”>新闻报道<a/>：相对路径链接（锚记）

HTML

HTML表格标记：

<table align=”对齐方式”width=”宽度”bgcolor=”背景”background=”背景图片”border=”边框显隐”cellspacing=”单元格之间间距” cellpadding=”单元格内间距”

<caption></caption>：定义表格的标题（可选）

<tr></tr>：定义表格的一行

<th><th/>：设置表格栏标题（表头），显示为粗体子此标记可以省略

<td></td>：用来装载单元格数据，它们必须位于<tr></tr>标记之间

链接路径：（链接的类型和目标属性）

1.链接类型

◆外部链接：跳转到站点外其他网站的链接

◆内部链接：站点根目录内文档之间的互相链接，也称为相对文档链接

◆E-mail链接：实现打开E-mail客户端应用程序进行撰写、发送邮件的工作

◆局部链接：在同一文档内部或不同文档之间指定位置的链接

2.链接目标

◆_blank：将打开一个新窗口

◆_parent：将在父窗口中打开

◆_self：将在当前窗口中打开

◆_top：将在上级窗口中打开

<a name=”命名锚” id=”命名锚id”><a/>：命名锚记

插入图像、Flash及其他多媒体对象

1．在网页中插入图片和图像占位符

打开HTML文档，将插入点放在要插入图像的位置，单击插入栏中“常用”面板的“图像”按钮，或选择“插入”的“图像”命令，在弹出的“选择图像源”对话框中选择要插入的图像，确定即可。

buckboost电路

同样，选择插入“图像占位符”，也是如此，在对话框中设置占位符名称、宽度和高度、颜和替换文本。2．图像地图（热区）

绘制热区：在文档窗口单击选中图像，在属性检查器中显示“地图”选项的文本域中为该热区输入一个名字，如果在同一文档中使用多个地图，必须保证名字的唯一。

热区绘制工具有3种：

◆矩形热点工具

◆圆形热点工具

◆多边形热点工具

3．创建轮替图像

轮替效果是插入鼠标经过图像的功能，利用两个图片实现的轮替显示效果。

将插入点定位到文档窗口中需要插入轮替图像处，选择“插入”—“交互式图像”—“鼠标经过图像”按钮，在弹出的“插入鼠标经过图像”对话框中设置相应的参数，原始图像、鼠标经过图像和按下时，前往的URL。4．创建导航条

导航条通常在网页中的左侧或上方，网站同一级页面乃至整个网站一般会使用同一个导航条，这样使得整个站点方便导航、风格统一，便于浏览者在个页面之间浏览转换。

打开HTML文档，选择“插入”—“交互式图像”——“导航条”命令或单击插入栏中的常用的面板上导航条，在弹出的对话框中，点击+添加导航条元件，输入项目名称，插入状态图像和鼠标经过图像以及按下图像（可选），还有替换文本和按下时前往的URL，选择水平插入或垂直插入，选中使用表格复选框，可以将元件装入有表格，便于后面对表格进行格式化以及页面的整体布局。

注意：一个页面文档内只能有一个导航条！

5．插入Flash多媒体对象

媒体就是信息的载体，在计算机系统中，它指组合或两种以上媒体的一种人机交互式信息交流和传播媒体，使用的媒体包括文本基准、图像、声音、动画和电视图像。

Flas件的3种格式：

1)Flash源文件格式

源文件扩展名为.fla是在Flash环境中创建的，只能在Flash程序中打开的文件格式。

2)Flash影片文件：

Flash程序中发布或导出的影片扩展名为.swf，是Flash源文件压缩后的优化媒体格式，可以插入到网页

并上载到Web上，也可以直接在浏览器或媒体播放软件中播放观看，但是不能在Flash应用程序中进行编辑。

3)Flash模板文件：

Flash模板文件的扩展名是.swt，用户可以用它修改和替换Flash影片中的信息。

插入Flash动画过程：将插入点放在页面中布局表格的单元格内，选择“插入”—“媒体”命令或单击插入栏上“常用”面板上的“Flash”按扭，在弹出的对话框中选择后缀为.swf格式的Flash动画文件，确定即可。

气象风向标设置Flash动画属性：单击Flash占位符中Flash动画，此时属性检查器中回

会显示该动画的各个属性，即可以对Flash影片文件进行属性编辑，可编辑的属性值有：名称、宽和高、文件、源文件、编辑、重设大小、编辑（源文件）、循环、自动播放、垂直边距和水平边距、品钢丝绳滑轮

和嫩太阳能庭院灯质、对齐、比例、参数。在“参数”域内输入“wmode”，值设为“transparent”（透明），这样可以把.swf格式动画的背景去掉，达到透过影片看到布局单元格或网页的背景的效果；尤其对于应用遮罩技术的Flash影片，在要显示影片特殊形状轮廓的情况下，此项“wmode”参数的设置就显得十分有用，浏览器中完成参数设置后的影片和布局表格的背景浑然一体，和修改前的背景效果差别很大。

6．插入Flash按扭

在文档中将鼠标定位到要插入Flash按扭的位置，选择“插入”—“交互式图像”—“Flash按扭”命令或单击插入栏“媒体”面板上的“Flash按扭”按扭，在弹出的“插入Flash按扭”对话框中首先在“样式”下拉列表框中选择一个Flash样式，输入按扭文本、字体大小、背景、另存为.swf格式的Flash影片文件，确定即可。7．插入Flas本

在文档中将鼠标定位到要插入Flas本的位置，选择“插入”—“交互式图像”—“Flas本”命令，或单击插入拦的“媒体”面板上的“Flas本”按扭，在弹出的“插入Flas本”对话框中，设置相关选项并保存即可。

8．插入其他多媒体对象

在Dreamweaver中除了可以插入图片、Flash对象外，还可以插入其他的多媒体对象，例如：Applet小程序、QuickTime影片、音频、视频插件等。

可以插入到网页的声音格式有很多，例如：Au、Midi、Wav、Mp3等声音格式，而在网站常用的格式就是Midi格式的声音文件，因为此格式本身就包含音阶，文件非常小，可以跨平台播放。

插入网页背景音乐的步骤：将光标定位到网页文档中要插入背景音乐的位置，单击插入栏中“媒体”面板上的“插件”按扭，在弹出的“选择文件”对话框中选择一个音频文件，单击确定即可。

对插件的主要设置属性有：

⏹插件或播放器名称：此项为播放器分配ID，以在脚本中引用。

⏹宽和高：默认值为32，这样只能显示播放器的一部分，如果要完整显示播放器可以设置稍大的值，例如

200、30，此例中的播放器的宽、高属性为默认值，因为后面的步骤将要隐藏播放器界面。

⏹源文件：此项的文本域中显示嵌入到网页中的音频文件的URL路径。

⏹参数：单击此按扭，弹出“参数”对话框，在“参数”域中输入附加值，第一个参数是“hidden（隐藏）”

值为“true（真）”，该值为布尔值，这个参数的意义是将播放器的界面隐藏起来，因为作为背景音乐，

不需要播放器的界面显示在网页上；第二个参数是“autostart（自动开始）”值设为“1”，该值为布尔值，作用是使音乐一旦加载到浏览器的网页中，就自动开始播放；第三个参数是“autorewind（重播）”，此例中值设为“1”，该值为布尔值，一旦音乐播放一周，又开始自动循环播放。

提示：布尔值用来逻辑运算结果，结果可以为逻辑型的“true”(真)或“false”(假)，且不区分大小写；用数值表示就是“1”或者“0”。

表单、框架、模板和库

表单元素：

在Dreamweaver中，常用的表单对象有文本域、多行文本域、单选按扭、单选按扭组、复选按扭、下拉列表框、密码域、图像域等。

在HTML文档中，表单的工作方式是首先标识表单最外层标记：<form>和</form>标记，表单所有的元素都在这对标记内，在起始标记<form>内，有3个属性：actiont、method、target。

一个完整的表单有两个基本部分组成：

◆表单域（<form></form>）：它相当于一个“容器”，所有的表单对象都放在里面，包含了处理表单数

据所有程序的URL以及数据提交的方法。

◆表单对象：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉列表框和文件上传

框、字段集、单选按扭和复选按扭等。

创建表单、添加表单元素：

1．创建表单框架：

选择“插入”—“表单”，在文档中插入一个表单域，选中“表单域”，单击“表单”选项栏中的“字段集”按扭，在弹出的对话框中输入提示标签文本“问卷——幸福指数调查”，选中表单域，在属性检查器中进行相应的设置。

2．插入表单对象：

插入文本域，文本域有两种，即文本字段和文本区域，首先要插入文本字段，在插入栏上选择“表单”

面板上的“文本字段”按扭，就插入了一个文本字段用来接受用户的输入，选中该对象，单击插入栏中

的“表单”面板上的“标签”按扭，这时文档窗口切换到“代码视图和设计视图”同时显示的界面，在代码视图将插入点定位到<input>标记之前、</input>起始标记之后，输入文本“姓名”，在设计视图下，换行后用同样方法插入一个文本字段，将光标放在该文本字段之前，输入文本“性别”，同样，程序会把文本作为刚刚创建的文本字段的标签，并插入到代码中，按照第2步，同样可以创建其他文本字段，分别是住址、E-mail信箱等3个文本字段。

3．插入文本区域：

要添加文本区域前，为了便于处理页面的布局，先插入一个两行两列表格，表格的边框隐藏，插入点放在表格第一行的第二个单元格内，单击“表单”面板上的“文本区域”按扭，在表单中插入文本区域，在第一行的第一个单元格内，输入表单说明文本，例如“生活状态”，设置文本域的属性：名称、字符宽度、类型、初始值。

4．插入列表/菜单：

列表/菜单可以用来使用户选择出生年月或其他投票等，单击“表单”面板上的“列表/菜单”，设置列表/菜单的属性，在“列表/菜单名称”文本域中输入“brith”，“类型”可指定是下拉列表框是以弹出菜单还是滚动的形式显示，勾选“允许多选”复选框，可以允许用户从列表中选择多项，单击“列表值”按扭，弹出“列表值”对话框，可以添加选项至弹出式菜单中，列表中的每一个选项有一个标签和一个值，使用+-按扭

推杆炉

来添加删除列表中的选项，使用箭头来对列表项排序。

5．单选按扭和复选框

6．跳转菜单：

跳转菜单看起来下拉列表框相似，但是不同的是此菜单中每一个项都是一个超级链接，当用户选择后会自动跳转到所选选项的值对应的目标Html文档或文件，在“插入跳转菜单”中添加菜单项、文本、选择时前往的URL、选择打开URL的窗口、菜单名称等参数，在列表值对话框中添加项目标签和值（跳转的目标地址），确定即可；在列表菜单文本域的属性中可设置列表名，类型为“菜单”或“列表”，以及初始时选定的标签项。

7．按扭：

按扭一般只是为了实现提交数据和恢复初始数据，提交按扭的默认名称是Submit，重置按扭的默认名称是Reset，在按扭的属性检查器中可以自定义按扭标签、名称、动作选项。

框架：

框架是将几个网页集成到一个窗口，使用户浏览网页、搜索信息更容易，框架页面将浏览器的窗口分为多个显示区域，每一个显示区域称为一个框架，它包含一个独立的、可以滚动的页面。

一个典型的框架网站，主页的窗口中包括3个不同的HTML页面，顶部是广告条，左侧是Logo和导航链接列表，单击左侧的链接可以在右侧的主窗口中显示相应的具体内容。

使用框架：

框架分为两个部分：一个框架集和单个的框架。DW中“框架”面板上预定义的框架集有13种。

在插入栏的“框架”面板上单击左侧和顶部嵌套的“框架”按扭，选择插入“左侧及上方嵌套”，将创建好的框架页全部保存，此时回单个保存框架集中的子框架，主窗口保存为main.htm，顶部窗口保存为top.htm，左侧窗口保存为left.htm，最后保存框架集。

提示：如果要自定义框架，可以按住Alt键的同时，单击并拖拽一个框架，这样就可以新建一个框架，要删除一个框架，只要拖拽一个矿家到它的父窗口就可删除了。

按shift+F2可以调出“高级布局”中的“框架”面板，或选择“站点”—“其他”—“框架”命令以显示“框架”面板，单击“框架”面板上的各个区域以激活文档窗口，默认的框架名称为topFrame、leftFrame、mainFrame，在各个窗口的属性中可以设置是否滚动、边界宽度和边界高度、边框显隐、边框颜、是否能调整大小等。

不同框架之间页面的跳转：

单击left窗口中的链接使对应的页面显示在main窗口中，在left窗口中设置链接的目标属性来实现这种跳转。

实现跳转步骤：将插入点放在left窗口的链接文本中间，在属性检查器上的“链接”选项域中设置跳转到的目标文档，在“目标”下拉列表框中选择要在那个框架下跳转，若在主窗口中，则为“mainFrame”，这样保证了单击左侧窗口中的链接后，在主窗口中显示链接的页面。

模板：

模板是一种文件，可以用它作为创建其他文档的基础，用它处理网页不但工作效率高，而且可以统一网站的风格。在多个页面中反复出现又不需要经常变更的内容可以设为模板的不可编辑区域，而在可编辑区域就可以根据不同的页面替换为新内容。实际上，模板的功能就是把网页的布局和内容分离，通常是把大致布局设计好之后，保存为模板，然后在通过模板创建新文档。

将“文件”面板切换到“资源”选项卡，单击左侧的“模板”按钮，面板上显示了该站点的模板文件以及模板缩略图。

创建模板：

创建模板又两种方法：即可以从新建的空白HTML文档中开始创建，在其中添加图像、表格、文本等

对象，然后保存为模板；也可以把现有的布局合适的HTML文档保存为模板，这也是最简单的方法。

在“站点”面板中，双击以打开要保存为模板的HTML文件，将光标定位到文档的空白区域，选择“插入”—“模板对象”—“可编辑区域”命令，弹出“新建可编辑区域”的对话框，在“名称”文本框中可以输入一个名称，单击“确定”即可；文档中显示的蓝矩形框已经为模板文件添加了可编辑区域，选择“文件”—“另存为模板”命令弹出“另存模板”对话框，在“另存为”文本域中输入文本，为模板命名，单击“保存”按钮后，DW将自动在站点根目录下创建一个名为“template”的模板文件夹，刚刚创建的模板文件，保存在该文件夹内。

库：

库保存在网站的“库”文件夹内，称为库项目，在DW的文档插入库文件时，是把库项目的备份代码块应用到页面而已，面板中保存的库项目是源文件，而插入到页面的库项目是它的实例，实例会随着代码的改变一起更新。

为站点创建了库项目之后，会发现DW在站点跟目录下自动创建了一个名为“libray”库文件夹，库项目就保存在该文件夹中。

在页面上应用库项目：库项目创建好之后，要应用到站点的多个页面上，打开一个页面，将“文件”面

板切换到“资源”选项卡的“库”面板上，单击一个库项目并拖拽到左侧文档的适合的位置，插入到文档中的库项目显示为一个浅黄的块以示区别，它默认是被锁定的，不可以编辑，插入到文档的库项目在浏览器中输入的颜是正常的，没有颜。

提示：如果要将文档中的插入的库项目变成可编辑，必须将库项目实例与“库”面板上源文件分离，在选中库实例之后，在属性检查器上单击“从源文件中分离”按钮，会弹出一个对话框，提示：如果将库项目变为可以编辑，当源文件改变时，它不会随之更新（失去了链接关系），确认后，单击“确定”按钮。

提示：打开文档窗口中的*.lbi的库文件，在页面上对文字进行格式修改后保存，保存后立即弹出“更新库项目”窗口，提示同时更新应用到网页中的库项目，单击更新按钮，在确定更新后，又弹出一个“更新页面”的对话框，提示更新应用了库项目的具体页面，显示记录完成之后关闭，此时，应用了库项目的网页已全部更新。

CSS样式、层和行为

CSS样式表：

在制作网页时，无论是用代码直接编写HTML文档，还是利用所见即所得的软件工具进行编辑网页，

经常是受HTML语法和编辑环境本身的限制，在文字排版和整体布局方面总是不能尽如人意，为了弥补这项缺憾，W3C组织发布了一套独立于HTML语法的网页制作规范CSS（层叠样式表）。

CSS样式分为外部样式、内嵌样式、行内样式3种类型。

引用外部样式，可以通过链接或导入的方式引用。

而内嵌样式只影响某一个页面，样式是写在单个文档的<head>标记内的，例如：<head><style type=”text/css”></style></head>

行内样式只影响页面中的某一段，例如：<p style=”font-size:14pt;color:#9900ff;font-family：宋体”>

CSS的作用如下：

◆可以覆盖浏览器上样式的设置

◆使页面的字体更漂亮、易排版、页面赏心悦目

◆可以轻松地控制页面布局

本文发布于:2024-09-24 23:28:57，感谢您对本站的认可！

本文链接：https://www.17tex.com/tex/4/210350.html

上一篇：在线网页编辑器使用说明

下一篇：HTML网页试题及答案

标签：插入网页文本文档页面显示

留言与评论（共有 0 条评论）