仓酷云

标题: 带来一篇IE7与web尺度计划（2） [打印本页]

作者: 变相怪杰 时间: 2015-1-16 00:10
标题: 带来一篇IE7与web尺度计划（2）
可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
上文：IE7的web尺度计划
IE向来被web尺度的反对者所诟病，而当FireFox横空出生今后，更多的网页制造者入手下手存眷web尺度计划。看着FireFox的市场占据率一直的上升，微软终究推出了IE7。但IE7是不是真的可以力挽狂澜，是不是真的可以失掉用户的信托，是不是真的可以失掉网页计划者的承认呢？
且看《IE7的web尺度之道》系列文章，和你一同见证IE7的改动！
CSS选择符
IE7最令网页计划者镇静的改善，即是撑持更多、更丰厚的CSS选择符（也有翻译为选择器的）了。如许经由过程CSS便可以，更进一步且便利的把持、定位前端布局元素，从而更丰厚、多样的制订款式。
由于一向不喜好套用书籍上的那些很“专业”、“流畅”、“拗口”的名词注释。以是我的博客文章中呈现的名词注释都是一种熊样——俗、普通（忒俗）！用十分直白乃至老土的话来注释这些名词，固然看上往不专业，乃至有所偏向。可是可以让人一看就分明。由于我信任的一点是：让人看不分明的拽文，就是一陀笔墨堆成的屎！请包涵这句话的卑鄙和在理，也请你包涵我上面这些名词注释的老土。
CSS选择符实在人人都见过，乃至都用过。看看上面的例子，就会天然分明了。
运转代码框
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>IE7的web尺度之道示例页面</title><styletype="text/css">#div1{color:red;}.div2{color:blue;}</style></head><body><divid="div1">id选择符示例</div><divclass="div2">类选择符示例</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
示例中的"#"和"."就是CSS选择符，恰是由于有选择符，白色字体和蓝色字体这两种款式，才正确的定位到了id为“div1”和class为“div2”的两个div标签上。说白了，选择符实在就是CSS为款式找到前台布局元素方针的一种机制。
选择符有良多种，下面的示例中，使用“#”标记的称之为“ID选择符”，由于它是依据前台布局元素的id定位的。使用“.”标记的称之为“类选择符”，由于它是依据前台布局元素的class名定位的。其他的另有“通配选择符”、“范例选择符”、“包括选择符”……更具体的材料请检察这篇文章《CSS基本：CSS选择符》
更多初级选择符
IE7与IE6比拟，撑持了更多的选择符，恰是由于撑持了这些丰厚的选择符，以是使得IE7能够更便利的完成一些，之前在IE6很难完成大概没法完成的效果。上面就让我们看看这些使人镇静的、IE7新撑持的选择符。

相邻同胞选择符
使用“相邻选择符”，能够依据一个元素定位到与之相邻的另外一个元素，并使用款式。说白了，“相邻选择符”就是只对“与本人平行干系的”、“相邻的”、“在我上面的”“哥们元素”起感化。上面的例子，将更有助于你的了解（注重只要处于h1前面的p3，字体色彩产生了变更）。
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="复杂的XHTML页面"/>
<metaname="Description"content="这是一个复杂的XHTML页面"/>
<title>复杂的XHTML页面</title>
<styletype="text/css">
h1+p{color:blue}
</style>
</head>
<body>
<pid="p1">这里是我哥们甲的哥们，“我”和它不太熟。</p>
<pid="p2">这里是我哥们甲，它在我后面面，“混”的比我好，以是我就不论它了。</p>
<h1>这里是“我”</h1>
<pid="p3">这里是我哥们乙，它在我前面，“混”的还不如我，以是我要照应它一下。</p>
<pid="p4">这里是我哥们乙的哥们，“我”和它不太熟。</p>
</div>
</body>
</html>
上面是分离在IE6，IE7，FireFox（版本2.0.0，12）和Oepra（版本9.25）的显现效果截图（IE6和IE7共存的办法，能够参考文章《IE6和IE7共存办法（他人是他人的，我是我的）》）。

上面是关于“子选择符”和“儿女选择符”的一些增补材料
良多伴侣把分不清“子选择符”和“儿女选择符”的区分。实在它们的不同仍是蛮年夜的。“儿女选择符”IE6，乃至更低IE版本，就已撑持了。大概你已被这些“拗口”、“深邃”的名词弄含混了。究竟甚么“儿女选择符”呢？实在人人都用过，看看上面的例子就分明了。如今不管是FireFox仍是IE7，关于“子选择符”的撑持还都存在必定的成绩。
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="YES!B/S!,web尺度,杨正t,博客园,实例代码"/>
<metaname="Description"content="这是一个复杂YES!B/S!文章示例页面,来自杨正t的博客,http://justinyoung.cnblogs.com/"/>
<title>YES!B/S!文章示例页面</title>
<styletype="text/css">
/*儿女选择符*/
#div1p{
color:red;
}
/*子选择符*/
#div1>p{
font-size:150%;
}
</style>
</head>
<body>
<divid="div1">
<pid="p1">我是div1的儿子1
<pid="p1_1">我是div1的孙子</p>
</p>
<pid="p2">我是div1的儿子2</p>
</div>
</body>
</html>
示例中，"p1"和"p2"包括在“div1”内，那末"p1"和"p2"就是“div1”的儿子，是儿女，而“p1_1”包括在“p1”中，那末“p1_1”是“p1”的儿子，是儿女。而“p1_1”也包括在“div1”中，则“p1_1”是“div1”的孙子，也是儿女。利用“#div1p{color:red;}”（儿女选择器）会将div1上面的一切段落的字体色彩都设置为了白色。不管是孩子仍是孙子，都要听话。“只需是我的儿女，就得听我的话！”——这就是“儿女选择符”。
而“子选择符”则不会那末强横，它尽管它的“儿子”，不会往管“孙子”、“重孙子”、“重重孙子”……

属性选择符
“属性选择符”能够依据某个属性是不是存在，大概属性的值来寻觅元素。奇妙天时用“属性选择符”,将能够轻松的完成良多有用并且壮大的效果。
良多“以用户为中心”的反对者，一向激烈的往失落<a>标签的target属性，其一个很主要的缘故原由就是“没有经由用户的批准，就翻开了新的扫瞄器页面，是一种不尊敬用户的体现。”实在，我团体感到，年夜可不用云云大张旗鼓。由于就算是往失落了这个属性，仍是没法尊敬用户，由于假如有的用户，就是想在新的页面翻开这个链接呢？（倘使，他不晓得利用shift点击链接能够到达目标，并且他也没有安装相似于“拖拽翻开新页面”的扫瞄器大概插件）
实在，利用“属性选择符”，能够对照无效的办理下面的成绩。就是使用“属性选择符”，将会在新窗口翻开的超链接，明白的标识出来，由用户决意是不是往点击超链接。（良多本国的网站已在利用这类体例，并且已构成了一种共鸣：在一个网站各页面之间的跳转链接，不在新窗口翻开。而“会跳转到内部网站的链接”将在新的页面窗口翻开。“会跳转到内部网站的链接”的标识图片也已构成了共鸣，就是这个图标：“”）上面的示例中，即是一种供参考的办理计划：
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="YES!B/S!,web尺度,杨正t,博客园,实例代码"/>
<metaname="Description"content="这是一个复杂YES!B/S!文章示例页面,来自杨正t的博客,http://justinyoung.cnblogs.com/"/>
<title>YES!B/S!文章示例页面</title>
<styletype="text/css">
a[target="_blank"]{
padding-right:16px;
background:url(http://images.cnblogs.com/cnblogs_com/justinyoung/common
/outLink.gif)no-repeatright;
}
</style>
</head>
<body>
<p>
<ahref="#"_fcksavedurl=""#""_fcksavedurl=""#""title="我不会跳转到其他网站，不会再新窗口翻开">我不会跳转到其他网站，不会再新窗口翻开</a>
</p>
<p>
<ahref="http://www.ckuyun.com"title="我会跳转到其他的网站，会在新窗口翻开"target="_blank">我会跳转到其他的网站，会在新窗口翻开</a>
</p>
</body>
</html>
上面是IE7的显现效果截图：

图：“属性选择符”效果表示图，注重第二个超链接后的图标

更壮大的是：“属性选择符”也能够判别一些本人自界说的属性，这关于一些第三方插件开辟的程序员，将是一个极年夜的便利。比方，关于开辟网页“网页翻译”的伴侣，能够将必要翻译的关头字用<span>包起来，然后对这个span设置一个本人的属性。比方中文到英文的翻译，就加个"lang=c2e"，假如是中文翻译到日文，就加个"lang=c2j"。然后经由过程“属性选择符”，将两种情形设置分歧的款式，从而辨别开来。

扩大材料：“属性选择符”初级利用技能
“属性选择符”有着使人惊奇的壮大，它不但可以辨认复杂的属性，判别属性的值。乃至能够依据复杂的正则表达式，来婚配属性的值。看着上面的示例，将会令你感应惊奇。
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="YES!B/S!,web尺度,杨正t,博客园,实例代码"/>
<metaname="Description"content="这是一个复杂YES!B/S!文章示例页面,来自杨正t的博客,http://justinyoung.cnblogs.com/"/>
<title>YES!B/S!文章示例页面</title>
<styletype="text/css">
/*以前提字符串开头*/
a[href$=.zip]{
padding:5px20px5px0;
background:url(http://images.cnblogs.com/cnblogs_com/justinyoung/
common/icon_zip.gif)no-repeatcenterright;
}

/*以前提字符串开首*/
a[href^=mailto:]{
padding:5px20px5px0;
background:url(http://images.cnblogs.com/cnblogs_com/justinyoung/
common/icon_mailto.gif)no-repeatcenterright;
}

/*恣意地位包括*/
a[href*="cnblogs"]{
padding:5px20px5px0;
background:url(http://images.cnblogs.com/cnblogs_com/justinyoung/
common/icon_cnblog.gif)no-repeatcenterright;
}
</style>
</head>
<body>
<p>点击下载zip文件——<ahref="download.zip"_fcksavedurl=""download.zip""_fcksavedurl=""download.zip""title="zip文件">zip文件</a></p>
<p>给我发邮件——<ahref="mailto>mailto:123456@163.com">mailto开首</a></p>
<p>来自——<ahref="http://www.ckuyun.com"title="包括博客园网址">包括cnblogs</a></p>
</body>
</html>
上面是IE7的显现效果截图：

图：“属性选择符”初级利用技能示例最终效果

假如开动你的脑壳和手指，你将失掉更多令本人惊奇的效果：

图：利用“属性选择符”的更多示例效果

伪类选择符和伪工具选择符
这又是使人头疼的“名词”，究竟甚么是“伪类”、“伪工具”呢？究竟“伪”在那里呢？我们仍然从一个人人都用过，很熟习的示例提及：
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="复杂的XHTML页面"/>
<metaname="Description"content="这是一个复杂的XHTML页面"/>
<title>复杂的XHTML页面</title>
<styletype="text/css">
a:link,a:visited,a:active{
color:red;
}
a:hover{
color:blue;
}
</style>
</head>
<body>
<ahref="#"_fcksavedurl=""#""_fcksavedurl=""#""title="测试">鼠标附上往字会酿成蓝色</a>
</body>
</html>
很复杂且罕见的情形，给超链接设置“鼠标移上分歧字体色彩产生变更”的款式。这里的“:link”、“:visited”、“:active”和“:hover”就是“伪类”。之以是说是“伪”，是由于，这些器材必定要依靠在某种标签上（示例中是<a>标签），它们其实不能独自的存在，当它们独自存在的时分将没有任何意义。
在IE6中，只撑持超链接<a>标签的伪类，而在IE7中，则撑持几近一切“可见标签元素”的伪类。也就是说，就算是一个div，你也能够设置div:hover的款式。能够展望的将来是：一些复杂的款式方面的变更，将不再必要js往把持，用css就能够完成复杂的“静态”效果。看上面的例子，将更有助于你的了解。
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="复杂的XHTML页面"/>
<metaname="Description"content="这是一个复杂的XHTML页面"/>
<title>复杂的XHTML页面</title>
<styletype="text/css">
#txtName{
border:1pxsolid#eee;
}
#txtName:hover{
border:1pxsolidblack;
}
</style>
</head>
<body>
<inputtype="text"id="txtName"/>
</body>
</html>
下面的示例很复杂，也很经常使用：一个输出名字的文本框，平常形态下，是“灰色”边框，而当用户将鼠标以上往的时分，边框“酿成”玄色，从而到达提示的目标。
上面是IE7和FireFox的显现效果截图。

图：对<input>设置伪类款式

讲完了“伪类”，上面来说讲“伪工具”。起首“伪工具”也是“伪”，天然也必需依靠其他元素，而不克不及独自存在。而“工具”则意味着“有实体”的器材。最经常使用的“伪工具”就是“:first-letter”（子工具的第一个字）和“:first-line”（子工具的第一行）。上面的示例将有助你了解“:first-letter”和“:first-line”伪工具。
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="复杂的XHTML页面"/>
<metaname="Description"content="这是一个复杂的XHTML页面"/>
<title>复杂的XHTML页面</title>
<styletype="text/css">
#div1:first-letter{
font-size:200%;
}
#div1:first-line{
color:red;
}
</style>
</head>
<body>
<divid="div1">
第一行内容，注重这一行的第一个字。<br/>
第二行内容
</div>
</body>
</html>
上面是IE6和IE7的显现效果截图：

图：IE6不撑持“伪工具”，而IE7已撑持

关于“:first-line”对出格注重
伪工具“:first-line”指定是第一行，而不是第一段。行的分别是使用<br/>标签，而“段”的分别是使用<p>标签。“:first-line”其实不会对<p>标签分别的段落利用款式。
这个对照反常——由于容器的宽渡过小，而使得第一行“放”不下，而“挤”到第二行的内容，将得到伪工具“:first-line”设置的款式-_-b...看上面的截图，将更有助于你的了解。仍然是下面的谁人示例，可是当将扫瞄器的宽度减少必定水平时，第一行的笔墨被“挤”到了第二行，同时得到了伪工具“:first-line”指定的款式（白色字体色彩）。

图：被“挤”上去的笔墨，将得到伪工具“:first-line”设置的款式

跋文
这些IE6不撑持，IE7才撑持的初级选择符，也是弄定IE6和IE7网页兼容性的无效手腕之一。乃至一些伴侣间接误觉得这些初级选择符，就是CSShack的一种。实在，这些不是CSShack，而是一种改善，一种晋级。以是，利用“初级选择符”手腕到达IE6和IE7的兼容性的办法，能够宁神的利用，不会有csshack的后顾之忧，在微软后续的扫瞄器中必定会撑持的。
开动本人的脑壳，使用这些丰厚的选择符，将可以完成更多，更壮大的效果。IE7只是将舞台帮我们搭好了，怎样唱一出好戏，则是靠人人一同的勉力了。
IE7改善了良多的器材，“更丰厚的选择符撑持”只是个中对照刺眼的一颗罢了。关于其他的，我将在后续的《IE7的web尺度之道》系列文章中持续和人人一同切磋，还请列位伴侣今后多多指教。

搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。

作者: 灵魂腐蚀 时间: 2015-1-18 05:25
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 小魔女 时间: 2015-1-18 05:25
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 老尸 时间: 2015-1-24 16:11
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 分手快乐 时间: 2015-2-2 10:58
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 飘飘悠悠 时间: 2015-2-7 18:42
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 若天明 时间: 2015-2-23 02:02
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 透明 时间: 2015-3-14 17:39
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 只想知道 时间: 2015-3-21 14:33
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

欢迎光临仓酷云 (http://ckuyun.com/)