仓酷云

标题: DIV教程之hCalendar微格局:关于事务和基于工夫或地址的举动 [打印本页]
作者: 若相依    时间: 2015-1-15 23:25
标题: DIV教程之hCalendar微格局:关于事务和基于工夫或地址的举动
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
网页制造poluoluo文章简介：明天让我们一同来切磋一下hCalendar微格局，经由过程该微格局我能够为那些关于事务和基于工夫或地址的举动供应语义和布局化信息。
我们又来了，镇静的冲进微格局的天下～～依据我的企图，这篇文章应当抵达此系列的半程了。到这里，我已会商了三种微格局的完成：

还不错。可是间隔周全先容微格局另有必定差异呢。
以是，明天让我们一同来切磋一下hCalendar微格局，经由过程该微格局我能够为那些关于事务和基于工夫或地址的举动供应语义和布局化信息。
iCalendar

iCalendar（大概iCal）是分享日历数据的尺度。一般的，他被普遍用在Email互换中，固然其实不仅仅范围于此。同hCard相似，网站开辟职员能够经由过程hCalendar将iCalendar数据嵌进到网页数据中。hCalendar同iCalendar之间一样是1:11:11:11:1的对应干系，从而同意剖析器从网页中提失信息供应给日历使用利用。
汗青回忆：iCalendar创建在vCalendar（假造日历VirtualCalendar）基本之上，vCalendar是一个开源的日历使用，用来在线公布和保护事务和时候表。vCalendar同vCard电子商务咭片格局一同开辟的。
基于日期/工夫的举动

hCalendar微格局形貌在日历中利用的事务（大概任何基于日期/工夫的举动）信息，包含（但不限于）：

基本常识

跟hCard一样，hCalendar遵守一些基础划定规矩：

另有一条固然不是划定规矩，可是必要铭刻在心：利用甚么样的标志元素其实不主要。class的值（属性/子属性）才决意hCalendar微格局。但之前也说过，我十分勉励利用具有语义特征的标志元素。
Profile

同一切微格局一样，十分勉励您在网页的<head>部分中包括微格局的声明，利用hCalendar的Profile：
<headprofile=”http://purl.org/uF/hCalendar/1.0/”>
W3C同意界说多个Profile值，利用空格离隔，以是能够本人选择利用多个Profile：
<headprofile="http://gmpg.org/xfn/11http://purl.org/uF/hCard/1.0/http://purl.org/uF/hCalendar/1.0/“>
别的，假如您援用非提案微格局（hCalendar长短提案微格局），您能够交换利用组合ProfileURL，该URL涵盖了一切非提案微格局：
<headprofile="http://purl.org/uF/2008/03/“>
假如您同时援用非提案和提案微格局，您一样可使用下面这条组合Profile声明。
示例

本博客绝对对照新，因而，我还没有更多的时机枚举一些事务信息。实践上，我只要一个在线的例子，感激比来一篇BarCampAlbuquerque3的文章，在那边我利用了hCalendar微格局：
说说各部分

我们将下面的例子分隔会商一下。
“根”：vevent

您大概注重到在我例子中的根属性是vevent，而不是vcalendar。这是由于hCalendar有一个可选的根元素，只要在您必要在页面中形貌凌驾一个日历事务时才必要呈现。关于尽有一个日历事务的网页，vcalendar属性被假定已呈现在页面中。既然我的例子只是一个事务，我把一切的事务信息都包括在<divclass="vevent">中，意味着一切的内容形貌的都是统一个事务。
包括他的元素能够是任何元素（<dl>，<ul>，<p>，<span>等等）。<div>就满意我例子的请求了。
需要属性：summary和dtstart

hCalendar必需的属性为（除根元素vevent）summary和dtstart.
summary

summary属性形貌了事务的提要信息。此属性包括的内容一般是在日历使用中显现的基础信息，好比事务的称号。以是，在我的例子中，“BarCampAlbuquerque3”被包括在summary当中，也就是在我团体日历顶用来显现的称号：
<p>Yes,itsshortnotice,butmarkyourcalendars:<ahref="http://barcamp.org/BarCampAlbuquerque"class="urlsummary“><spanclass=”category”>BarCamp</span>Albuquerque3</a>isthisweekend.</p>
dtstart

dtstart属性形貌了事务的入手下手工夫/日期。在下面的例子中，“September13”：
<dd><abbrclass=”dtstart”title=”2008-09-13T09:00:00&Prime;>September13</abbr>&ndash;<abbrclass=”dtend”title=”2008-09-14T18:00:00&Prime;>14</abbr>,from9am&ndash;6pmbothdays</dd>
日期/工夫计划形式

注重到包括dtstart的容器是<abbr>，被包括的信息为“September13”而title的属性值是“2008-09-13T09:00:00”：
<dd><abbrclass=”dtstart”title=”2008-09-13T09:00:00“>September13</abbr>&ndash;<abbrclass=”dtend”title=”2008-09-14T18:00:00&Prime;>14</abbr>,from9am&ndash;6pmbothdays</dd>
这是今朝在微格局中界说日期/工夫格局的保举做法──被称作“日期工夫计划形式”（是abbr计划形式的扩大）。此形式开辟的目标是为了撑持微格局的准绳之一：先为人类浏览计划，呆板次之，终极是让人类和呆板都可以浏览辨认。因而，逻辑上是，呆板──比方这些web使用──会利用title部分，而扫瞄器会为人类浏览只显现<abbr>中的内容。
同时，作为利用日期工夫形式标准的一部分，日期/工夫信息应该被遵守ISO8601的界说：

为了复杂申明，举个例子，2008-09-30T13:00:00=2008年9月30日下战书1:00（外地工夫）。下面例子中的字母”T”将日期信息和工夫信息分隔。假如您仅唯一一个日期，疏忽“T”和前面的工夫信息就能够了。相似的，假如您只要工夫信息，疏忽失落“T”和后面的日期信息便可。这个形式今朝不幸的另有一些无停滞会见成绩，我会在文章前面持续会商。如今，让我们持续下面的例子。
剩下的日期/工夫属性

下面例子中另有可选的日期工夫属性，包含：dtend和duration。
dtend

dtend属性形貌了事务停止的日期/工夫。在我的例子中，为“September14”：
<dd><abbrclass="dtstart"title="2008-09-13T09:00:00">September13</abbr>&ndash;<abbrclass=”dtend”title=”2008-09-14T18:00:00&Prime;>14</abbr>,from9am&ndash;6pmbothdays</dd>
duration

duration属性用来形貌事务的延续工夫。在下面的例子中，是两天：
<ddclass="description">A<abbrclass=”duration”title=”P2D”>two-day</abbr>eventallabouttheweb—design(visual,experience,informationarchitecture),technology(infrastructure,programming),socialandnewmedia,andotherstuffthatisjustplaincool.</dd>
同日期/工夫一样，延续工夫信息也利用日期工夫计划形式来形貌，呆板可读的信息包括在title中，而人类可读的信息包括在<abbr>。一样，title延续工夫的值也要遵守ISO8601的界说，只是必要在后面加“P”用以形貌延续的阶段工夫。延续的阶段工夫可使用上面这些单元形貌：年(Y),月(M),周(W),天(D),小时(H),分钟(M)和秒(S)。能够参考上面例子：

说说“无停滞会见”

在后面第三部分中已经复杂会商过利用日期工夫计划形式会有一些无停滞会见成绩。无停滞会见的基本成绩在于屏幕发声程序怎样看待title值：他们读取这个属性。以是，当利用工夫日期形式把呆板可读的ISO8601日期工夫信息放到title中时，屏幕发声会依照字面来读出这些数值。设想一下您的屏幕发声程序读取<abbrtitle="2008-09-30">：“Twothousandeightdashzeroninedashthirty。”假如工夫和日期的值更长的话会更糟。这对用户是相称不友爱的。
今朝，这些成绩还没有被办理。不外已有一些提交下去的候选定见，可是微格局社区还在持续会商更好办理这些成绩的路子。针对我本人的博客而言，剖析数据标明我没有任何屏幕发声程序的会见者。我很孔殷想晓得怎样办理这些成绩，从而完成这些微格局，让他们撑持无停滞会见的用户。
剩下的剩下

我的例子中还包含别的四个可选的属性：url,category,location和description。
url

url属性形貌事务的链接（<a>）：
<p>Yes,itsshortnotice,butmarkyourcalendars:<ahref="http://barcamp.org/BarCampAlbuquerque”class=”urlsummary”><spanclass=”category”>BarCamp</span>Albuquerque3</a>isthisweekend.</p>
您大概会注重到我把url属性同summary写在一同。这是由于<a>中包括的内容恰好是我日历信息的summary，这只是一种偶合。
category

category属性形貌事务的范例。在下面例子中为“BarCamp”：
<p>Yes,itsshortnotice,butmarkyourcalendars:<ahref="http://barcamp.org/BarCampAlbuquerque"class="urlsummary"><spanclass=”category”>BarCamp</span>Albuquerque3</a>isthisweekend.</p>
跟之条件过的属性分歧的是，category能够被利用无穷次。一些经常使用的category例子包含：

某种水平下去说，category相称于事务的“标签”。以是，假如我选择标志我的例子包括到BarCamp首页的链接的话，我会同时利用rel-tag微格局和category：
<p>Youmaybewonderingwhatis<ahref="http://barcamp.org/"class=”category”rel=”tag”>BarCamp</a>anyway?</p>
记得吗，rel-tag只能在链接中利用（<a>）。
location

location属性形貌事务产生的地址。
<ddclass=”locationvcard”><aclass=”fnorgurl”href=”http://www.chefwhite.com/cjw_cafe.php”>CJWCafe</a>on<ahref=”http://maps.google.com/maps”class=”adr”><spanclass=”street-address”>4801Alameda<abbrtitle=”Boulevard”>Blvd</abbr><abbrtitle=”Northeast”>NE</abbr></span>,<spanclass=”locality”>Albuquerque</span>,<abbrclass=”region”title=”NewMexico”>NM</abbr><spanclass=”postal-code”>87113</span></a></dd>
description

最初，description属性形貌事务比summary更具体的形貌：
<ddclass=”description”>A<abbrclass=”duration”title=”P2D”>two-day</abbr>eventallabouttheweb—design(visual,experience,informationarchitecture),technology(infrastructure,programming),socialandnewmedia,andotherstuffthatisjustplaincool.</dd>
还没有包含哪些

另有一些hCalendar经常使用的属性我没有在下面例子中利用的：

另有良多其他的属性能够被使用。检察hCalendar例子的wiki页面猎取更多信息。
hCalendar+hCard

大概，如今您已注重到在我hCalendar标志中包括了hCard属性和子属性：
<ddclass="locationvcard“><aclass=”fnorgurl”href=”http://www.chefwhite.com/cjw_cafe.php”>CJWCafe</a>on<ahref=”http://maps.google.com/maps”class=”adr”><spanclass=”street-address”>4801Alameda<abbrtitle=”Boulevard”>Blvd</abbr><abbrtitle=”Northeast”>NE</abbr></span>,<spanclass=”locality”>Albuquerque</span>,<abbrclass=”region”title=”NewMexico”>NM</abbr><spanclass=”postal-code”>87113</span></a></dd>
就像后面文章中提过的，组合微格局十分的复杂，而且在必定的感化局限内增加更多的语义代价。并且，他还为用户供应了更进一步的数据能够被扩大和利用，比方能够增加到他们地点簿的vCard信息。
在这个实例中，location属性中利用vcard十分成心义，即使我只是想增加一些乡村信息，我也能够利用hCard的属性。
天然言语

在后面的文章中说过在天然言语中利用微格局，hCalendar一样可使用。您会注重到在例子中，hCalendar的标注一向是间接嵌进到我的内容中。我能够把一切的hCalendar信息放到加倍天然的句子中，而不是把他们放到<dl>元素中：
增加到你的日历中

在BarCampAlbuquerque3文章中，我供应给用户一个链接同意您间接增加到日历使用中：
DIV教程之hCalendar微格局:关于事务和基于工夫或地址的举动
登录/注册后可看大图

这个链接能够是间接就任何iCalendar文件的URL（比方，.ics,.ical,.ifb,.icalendar）。对我而言，我利用Technorati的事务服务。利用Technorati的手艺，您能够在您hCalendar微格局存在的页面链接前加上http://feeds.technorati.com/events/，然后利用拼接好的字符串作为链接的目标地点：
<ahref="http://feeds.technorati.com/events/http://www.ablognotlimited.com/articles/barcampalbuquerque-around-the-corner”title=”Download.icsfile”>Addtoyourcalendar</a>
当用户点击下面链接时，.ics文件会主动天生供应给用户下载：
DIV教程之hCalendar微格局:关于事务和基于工夫或地址的举动
登录/注册后可看大图

表面很主要

后面说过良多次：标志元素其实不主要（只管他应当是无效而且具有语义的）。同时class的值对微格局来讲十分的主要，您利用的CSS语句用来为hCalendar增加作风就仅仅是为了更好的展示。我会保举在CSS中衬着这些hCalendar的class值，而不是为了作风增加更多的class值。比方，您能够参考JeremyKeith十分棒的文章用来作风化您的日历信息。终极，您能够作任何想做的事变。thepresentationofyourhCalendarisonlylimitedtoyourCSSskills。
为何这么贫苦？固然是有优点的

就像之前一遍一遍反复的，但还值得持续反复……次要是由于微格局十分复杂的同时供应了十分壮大的潜能。我但愿更多的人可以懂得并利用他们。这会增添利用微格局的工具和使用的呈现。
再来：语义

Yep，语义。您必定以为这是我最喜好的观点。是的。微格局利用已有的尺度，就像XHTML元素，为他们包括的内容供应更多的语义信息。从我的角度来看，这匡助了网站作者做出更好的网站，同时合适人类和呆板会见，好比那些搜刮引擎。并且，拥抱语义（即使不利用微格局，仅利用标志自己）撑持尺度；接纳尺度的体例开辟网站。这不单单对用户（实在这些用户中包含呆板）无益，同时对计划师/开辟者和团队加倍无益。他让一切人收益。这些办法为
语义网搭建了基本举措措施，同时也让我们充实使用明天已有的互联网和手艺。
CoolShit

我了解语义和尺度一般对某些人来讲是略微哲学的会商。不外终极，你要末明白，要末不懂（？）。假如您在前面的阵营中，思索一些十分无效并且很COOL的工具，现在能够完整借助hCalendar微格局构建。
扫瞄器附加组件

有良多扫瞄器工具能够从网页中提取hCalendar信息，进一步同意导出给那些撑持iCalendar的使用。

其他服务


另有更多我没有提到的hCalendar实例和使用。
偕行压力

假如这些信息还没有充足吸引您的话，那末大概一些来自偕行的压力会让你有乐趣。如今良多的抢先服务都入手下手利用hCalendar（和其他微格局）：

别的另有大批实践利用hCalendar的例子。C’mon，我晓得您已入手下手想要这么做了，尝尝吧。信任我，您会喜好的。
匡助简化的工具

假如我刚巧让您以为微格局很成心思的话，您大概会很乐意晓得有一些工具可以匡助您完成微格局：

</p>
不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。
作者: 不帅    时间: 2015-1-17 22:39
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
作者: 活着的死人    时间: 2015-1-26 23:24
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
作者: 愤怒的大鸟    时间: 2015-2-5 08:16
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
作者: 乐观    时间: 2015-2-11 08:28
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。
作者: 海妖    时间: 2015-3-2 05:58
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
作者: 小妖女    时间: 2015-3-11 05:11
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。
作者: admin    时间: 2015-3-17 23:10
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）
作者: 蒙在股里    时间: 2015-3-25 11:21
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）



欢迎光临 仓酷云 (http://www.ckuyun.com/) Powered by Discuz! X3.2