下载文档原格式
div+css网页标准布局实例教程（二）五、布局页面——头部和导航有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。
先从头部开始，第三小节时我们已经把整体框架给搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。
先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。
另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把log o做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。
如果要在logo加上链接的话，那么就不能用背景图片的方法了。
<div id="header"><div id="logo">此处显示id "logo" 的内容</div><div id="search">此处显示id "search" 的内容</div></div>先在header里插入以上两块元素。
然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下：<div id="header"><div id="logo"><img src="images/logo.gif" width="181" height="45" /></div><div id="search"><form id="form1" name="form1" method="post" action="">搜索产品<input type="text" name="textfield" id="textfield" /><input type="submit" name="button" id="button" value="查询" /></form></div></div>接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜索产品距顶部30px，下面在css里把这些参数都给定义上，看显示的效果和效果图中的效果是不是一样呢？#logo { float:left; margin-top:18px;}#search { float:right; margin-top:30px;}这两项的位置已经差不多了。
第五天超链接伪类文章出处：标准之路(/div_css/906.shtml)编辑：杨雨晨思今天我们开始学习《十天学会web标准(div+css)》超链接伪类，包含以下内容和知识点：▪链接的四种样式▪将链接转换为块状▪用css制作按钮▪首字下沉一、超链接的四种样式本来计划这节课放到第九章中讲解，但下边的章节都涉及到了，所以提前来学习一下，上节课讲解的内容比较多，这节课就少讲些，只要理解了伪类，就轻松多了。
超链接可以说是网页发展史上一个伟大的发明，它使得许多页面相互链接从而构成一个网站。
说到超链接，它涉及到一个新的概念：伪类，我们先看下超链接的四种样式：a:link {color: #FF0000} /* 未访问的链接*/a:visited {color: #00FF00} /* 已访问的链接*/a:hover {color: #FF00FF} /* 鼠标移动到链接上*/a:active {color: #0000FF} /* 选定的链接*/以上分别定义了超链接未访问时的链接样式，已访问的链接样式，鼠标移上时链接样式和选定的链接样式。
之所以称之为伪类，也就是说它不是一个真实的类，正常的类是以点开始，后边跟一个名称，而它是以a开始后边跟个冒号，再跟个状态限定字符；比如第三个a:hover的样式，只有当鼠标移动到该链接上时它才生效，而a:visited只对已访问过的链接生效。
伪类使得用户体验大大提高，比如我们可以设置鼠标移上时改变颜色或下划线等属性来告知用户这个是可以点击的，设置已访问过的链接的颜色变灰暗或加删除线告知用户这个链接的内容已访问过了。
下面来做一个默认状态下是蓝色，鼠标放上是红色加下划线，选定（按下）时为紫色，已访问过为灰色加删除线的实例来讲解一下。
首先插入两个带超链接的内容：<p><a href="#">这里是链接</a></p><p><a href="10.html">这里也是链接</a></p>从上图中可以看出，插入的超链接默认是蓝色来下划线的，这是标签的默认样式所致，下来我们在css样式中定义设置完a:link的样式后，下面分别设置a:visited ，a:hover ，a:active的样式链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。
Dreamweaver制作超链接方法步骤Dreamweaver制作超链接方法步骤超链接大家都知道吧，就是你点到的话会直接弹出另一个链接的页面。
这是很有用的推广手段之一。
今天教大家如何制作超链接的方法。
本教程主要讲的有：页面之间的超连接，邮件地址的超连接，制作图片上的超链接。
有需要的过来学习下。
【页面之间的超级连接】在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。
1、在网页中选中要做超级链接的文字或者图片。
2、在属性面板中单击黄色文件夹图标，在弹出的'对话框里选中相应的网页文件就完成了。
做好超级链接属性面板出现链接文件显示。
(如下图)3、按F12预览网页。
在浏览器里光标移到超级链接的地方就会变成手型。
〖提示〗你也可以手工在链接输入框中输入地址。
给图片加上超级链接的方法和文字完全相同。
如果超级链接指向的不是一个网页文件。
而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。
超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。
例如，在链接框里写上/那么，单击链接就可以跳转到老小孩网站。
【邮件地址的超级连接】在网页制作中，还经常看到这样的一些超级链接。
单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。
这也是一种超级链接。
制作方法是：在编辑状态下，先选定要链接的图片或文字(比如：欢迎您来信赐教!)，在插入栏点或点插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。
提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。
(如下图)创建完成后，保存页面，按F12预览网页效果。
【制作图片上的超级链接】注意，我们这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。
比如一张中国地图的图片，单击了不同的省跳转到不同的网页。
可点的区域就是热区。
为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。
CSS表单设计css表单设计，包含以下内容和知识点：▪改变文本框和文本域样式▪用图片美化按钮▪改变下拉列表样式▪用label标签提升用户体验一、改变文本框和文本域样式如果前边几章学习的比较扎实的话，本节教程就相当容易了。
下边先说一下文本框，文本框和文本域都是可以用css进行美化的。
比如改变边框精细，颜色，添加背景色、背景图像等。
请看下边的实例：.text1 { border:1px solid #f60; color:#03C;}.text2 { border:2px solid #390; width:200px; height:24px; font-size:16px; font-weight: bold; line-height:1.6;}.text3 { border:2px solid #C3C; height:20px; background:url(icon9.gif) right 3px no-re peat;}.text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1. 6; background:url(bg_9.gif) 0 0 no-repeat;}这四个样式表分别对应第2、3、4、5行表单，第一行是文本框的默认样式；第二行为设置边框和字体颜色的样式；第三行为设置边框、宽度、高度、字体大小、行高的样式；第四行设置边框和增加背景色和背景图片；第五行为增加一个gif动画的背景图片，看起来是不是生动许多，具体步骤不再赘述。
下面我们看一下文本域的样式设置：.area { border:1px solid #F90; overflow:auto; background:#fff url(bg_9_1.gif) right bot tom no-repeat; width:99%; height:100px;}上图中第一个为默认的文本域样式，第二个为设置边框、宽度为百分比、高度和景图片。
第五章网页中使用超超是的魅力所在。
为了把Internet上众多分散的的网页联系起来,构成一个有机的整体,就是在网页上加入。
通过点击网页上的,才能真正实现网络无国界,我们才可以在信息海洋中尽情遨游。
Macromedia Dreamweaver 8提供多种创建超文本的方法,可创建到文档、图像、多媒体文件或下载软件的,可以建立到文档内任意位置的任何文本或图像〔包括标题列表、表、层或框中的文本或图像〕的。
本章主要介绍利用Dresmweaver 创建的编辑各种超的方法。
通过本章的学习,读者应该掌握以下内容；●认识超●掌握利用Dreamweaver创建各种超的方法●掌握利用Dreamweaver编辑各种超的方法●管理超下的方法5.1超基础5．1．1超的种类超为畅游网络提供了方便,它是网页制作中使用比较多的一种技术。
超是用预先准备的好文本、按钮、图像等对象与其他对象建立的一种,也就是源端和目标端点之间的建立一种。
源端点是超的超始端点,也称为源锚；目标端点是的像,也签名为目标锚。
超按源端点的划分,可分为超文本和非超文本两类。
超文本的源锚文本下方有下划线,而非超文本是用除文本之外的其他对象构建的,其源锚可以是图像、表格、列表、表单、多媒体等对象。
超按目标端点的划分,可分为外部、内部、电子、局部、脚本等。
5．1．2文档路径类型掌握从作为起点的文档到作为目标文档之间的文件路径,对于创建至关重要。
文档路径类型有绝对路径和相对路径两种。
1.绝对路径绝对路径是包括服务器协议〔本例中为〕的完全路径,比发如"洪恩在线——电脑乐园",完全路径为; honggen /pe/index..htm.如果要当前站点之外的文档,就必须使用绝对路径。
每个网页都有一个惟一的地址,称为统一资源定位器<URL>。
绝对路径提供文档的完整URL,包括使用的协议<对于网页通常是>。
例如, macromedia /support/dreamweaver/contents.html 就是一个绝对路径。
网页设计使用Dreamweaver创建超级链接超级链接是在网站中最常用的元素之一，它可以将不同的网页链接在一起，为用户提供更好的网站浏览体验。
在Dreamweaver中创建超级链接非常容易，这里将向你介绍如何在Dreamweaver中创建超级链接。
在Dreamweaver中打开或新建一个页面首先，我们需要在Dreamweaver中打开或新建一个页面。
如果你已经有了一个页面，只需要在Dreamweaver中打开它。
如果你需要新建一个页面，选择“文件”-> “新建” -> “HTML”或“XHTML”文档。
选择一个要链接的文本在打开或新建页面后，我们需要选择一个要链接的文本。
这可以是一个单词、一句话、一段文字或图片。
创建一个超级链接要创建一个超级链接，选择要链接的文本，然后单击工具栏中的“超级链接”图标。
这将打开“超级链接”对话框。
在这个对话框中，你可以设置链接的URL、目标、标题和样式。
在链接URL中，输入你想要链接到的网页地址，这可以是一个外部链接，也可以是你当前网站中的一个页面。
在目标中，你可以选择链接在哪个窗口或帧中打开，默认是在当前窗口中打开。
在标题中，你可以输入链接的文字。
在样式中，你可以选择链接的样式，例如，链接的颜色、字体等。
测试超级链接完成后，单击“确定”按钮，Dreamweaver将在你选定的文本上自动创建超级链接。
现在，你可以测试链接是否可以正常工作。
在Dreamweaver中，你可以选择“文件”-> “预览在浏览器中”来预览你的网页。
在浏览器中，单击链接，确保它可以正常打开。
创建内部链接如果你需要创建内部链接，这意味着你需要在你的网站中链接到另一个网页，这个网页可能是你自己站点中的一个页面。
在Dreamweaver中，这非常容易。
首先，选择你要链接的文本，然后在“超级链接”对话框中选择你要链接的页面。
插入电子邮件链接在Dreamweaver中，你还可以创建一个电子邮件链接。
Dreamweaver如何添加超链接Dreamweaver如何添加超链接超链接是每个网站不看缺少的。
很多新手在使Dreamweaver的时候不知道怎么添加超级链接!以下是店铺为大家搜索整理的Dreamweaver如何添加超链接，希望能给大家带来帮助!1、需要添加超链接的文字，选择“插入”菜单中的“超级链接”选项。
2、“超级链接”对话框中，点击链接后的“文件夹”图标。
3、择想要链接的网页文件后点击“确定”按钮。
4、点击“确定”按钮后就可以成功添加超链接了。
拓展：Dreamweaver的使用优点不生成冗余代码。
可视化的网页编辑器，都要把使用者的操作转换成html代码。
一般的编辑器都会生成大量的冗余代码，给网页以后的修改带来了极大的不方便，同时还增加了网页文件的大小。
Dreamweaver则在使用时完全不生成冗余代码，避免了诸多麻烦。
而且，通过设置，还可用Dreamweaver清除掉网页文件原有的冗余代码。
方便的代码编辑。
可视化编辑和源代码编辑都有其长处和短处。
有时候，直接用源代码编辑会很有效。
Dreamweaver提供了html快速编辑器和自建的html编辑器，能方便自如的在可视化编辑状态和源代码编辑状态间切换。
强大的动态页面支持。
Dreamweaver的Behavior能在使用者不懂java script的情况下，往网页中加入丰富的动态效果。
Dreamweaver还可精确的'对层进行定位，再加上timeline功能，可生成动感十足的动态层效果。
操作简便。
首先，Dreamweaver提供的历史面板、html样式、模版、库等功能避免了重复劳动，使用者不必重复输入相同的内容、格式。
其次，Dreamweaver能直接往页面中插入Flash、Shockwave等插件，经过设置后还可直接调用相应的软件对这些插件进行编辑。
最后，Dreamweaver与Fireworks集成紧密，可直接调用Fireworks 对页面的图像进行修改、优化。
超链接伪类
web标准(div+css)》超链接伪类，包含以下内容和知识点：
▪链接的四种样式
▪将链接转换为块状
▪用css制作按钮
▪首字下沉
一、超链接的四种样式
本来计划这节课放到第九章中讲解，但下边的章节都涉及到了，所以提前来学习一下，上节课讲解的内容比较多，这节课就少讲些，只要理解了伪类，就轻松多了。
超链接可以说是网页发展史上一个伟大的发明，它使得许多页面相互链接从而构成一个网站。
说到超链接，它涉及到一个新的概念：伪类，我们先看下超链接的四种样式：
a:link {color: #FF0000} /* 未访问的链接*/
a:visited {color: #00FF00} /* 已访问的链接*/
a:hover {color: #FF00FF} /* 鼠标移动到链接上*/
a:active {color: #0000FF} /* 选定的链接*/
以上分别定义了超链接未访问时的链接样式，已访问的链接样式，鼠标移上时链接样式和选定的链接样式。
之所以称之为伪类，也就是说它不是一个真实的类，正常的类是以点开始，后边跟一个名称，而它是以a开始后边跟个冒号，再跟个状态限定字符；比如第三个a:hover的样式，只有当鼠标移动到该链接上时它才生效，而a:visited只对已访问过的链接生效。
伪类使得用户体验大大提高，比如我们可以设置鼠标移上时改变颜色或下划线等属性来告知用户这个是可以点击的，设置已访问过的链接的颜色变灰暗或加删除线告知用户这个链接的内容已访问过了。
下面来做一个默认状态下是蓝色，鼠标放上是红色加下划线，选定（按下）时为紫色，已访问过为灰色加删除线的实例来讲解一下。
首先插入两个带超链接的内容：
<p><a href="#">这里是链接</a></p>
<p><a href="10.html">这里也是链接</a></p>
从上图中可以看出，插入的超链接默认是蓝色来下划线的，这是标签的默认样式所致，下来我们在css样式中定义
设置完a:link的样式后，下面分别设置a:visited ，a:hover ，a:active的样式
链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。
a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center;
b ackground: #CCC; }
这样设置的结果是全局a都执行这个样式显示，下面设置一下鼠标划过时的状态，其它几种状态设置方法相同
三、用css制作按钮
学会了把超链接转换为块级元素，想制作个css按钮简直太简单了，只需在上一步的基础上增加一个按钮的背景图片即可实现。
下面以制作淘宝网首页的免费注册按钮来讲解，设置最常用的默认样式和鼠标移上时的样式，如下图
首先需要准备默认状态和鼠标划过状态的图片如下：
修改之前的html如下，然后重新定义css样式：
<p><a href="#">免费注册</a></p>
<!DOCTYPE html PUBLIC "-//W3C//
<html xmlns="/
<head>
<meta http-equiv="Content-Type"
<style type="text/css">
a { display: block; height: 34p
提示：可以先修改部分代码后再运行
本例中运用到了背景图片，有关背景图片的详细运用将在下一节中讲解，你也可以查看css样式表手册，首先了解下或者学习如下视频教程/div_css/895.shtml
四、首字下沉
首字下沉是css伪类上的又一个运用，它可以直接通过css样式表向某个选择器中的文本首字母添加特殊的样式，而不需要把首字添加一个标签或通过程序来实现，今天以制作word里的首字下沉为例来讲解，应用如下伪元素：
:first-letter
在页面中添加如下一段内容，只用设置样式就可以实现首字下沉了：
<p>标准之路[]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构，网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!</p> 为了便于观察效果，我们设置p的样式如下：
p { width: 400px; line-height: 1.5; font-size: 14px; }
然后设置p:first-letter的样式。
