请注意,本站并不支持低于IE8的浏览器,为了获得最佳效果,请下载最新的浏览器,推荐下载 Chrome浏览器
欢迎光临。交流群:166852192

对Orchard主题制作者的UI设计指南


本文提出了编码,标记的HTML格式,CSS,帮助你的主题的开发。

通用指南

本节主要是说了大量的指导设计主题的话题,如浏览器测试、文件名、HTML元素,JavaScript和图像。

浏览器测试

下面我们应该按照以下浏览器的最新版本去测试,但是对于旧版本的浏览器,如Internet Explorer 6,您应该确保您的网站和模板功能,但不要试图解决渲染问题,不影响用户使用就可以了。
  • 微软Internet Explorer
  • 谷歌浏览器(Google Chrome)
  • Mozilla Firefox浏览器
  • 苹果Safari
  • Opera
 

文件名

下面列出的文件规则,都是按照Orchard团队命名的。
  • 包括文件使用下划线(_)作为前缀
  • .cshtml, .vbhtml, HTML, 和CSS 文件命名将使用大小写风格
 

HTML DOCTYPE指令

Orchard可以使用HTML5的doctype声明,因为它可以使用HTML5的标记,可以兼容HTML 4.01和XHTML,标记如下。
<!DOCTYPE html>

HTML元素

假如使用了HTML5模板的Orchard,你也可以不是有HTML5,但是强烈推介还是使用,原因是,不同的模块和父主题的模板可能会被用来在一个页面上,那里只有一个doctype声明。
在下表我们列出了一些常用的HTML5元素,关于HTML5的更多信息,请参见W3C的文章HTML4的HTML5的差异

  • <section>
  • <article>
  • <aside>
  • <hgroup>
  • <header>
  • <footer>
  • <nav>
  • <figure>
  • <figcaption>
例如:
<figure> <video src=http://www.orchardch.comtgif.vid></video> <figcaption>Example</figcaption> </figure>

如果您使用的这些新元素,以避免打破旧版本的Internet Explorer的脚本库,我们建议您使用新的HTML5元素的样式中所述的解决方法。

JavaScript 和 jQuery

您的web页面都可以正常的工作即使浏览器禁用了JavaScript。脚本可以提高页面体验,这被称为渐进增强。有关更多信息,请参阅使用JavaScript渐进增强
Orchard有Orchard团队建立的标准化jQuery为JavaScript框架。

图片

场景中使用适当的图像格式,如下列清单所述:
  • 照片和渐变应使用JPEG格式。
  • 图形元素应该使用PNG格式。
  • 通过24位png格式使用alpha透明度。
  • 尽可能使用sprites提高加载时间和减少对服务器发出的请求数量。
更多关于sprites信息,请参阅CSS Sprites: Image Slicing's Kiss of Death. 。

可访问性

你的HTML和CSS模板应该通过可访问性测试Wave the web accessibility evaluation tool.。你的模板应该满足要求的WCAG 2.0 AA级。

标记验证

我们应该按照标准制定模板, 确保你的模板通过W3C Markup Validation Service.验证。

CSS组织

允许用户方便地查找和阅读的样式修改,我们建议都采用统一标准化结构和编码格式。
遵守CSS标准如下:
  • 不要使用有条件的if语句类方法在样式表。
  • CSS标记应该在CSS 2.1或更高版本有效。您还可以使用可选的逐步增强的CSS 3标记。

CSS格式规则

以下列表包含格式化CSS标记的指引。
  • 使用缩进四个空格而不是制表符。 (这是在Visual Studio中的默认设置。)
  • 使用连字符 - ()之间选择的话。
  • 删除未使用的CSS选择(复位风格的除外)。
  • 使用小写的颜色定义。
  • 使用速记符号,在可能的情况下,如颜色代码时实际使用倒塌性能。
  • 使用的ID,而不是类。 使用模板中的元素的ID,可以很容易地找出CSS和HTML的重要选择。
  • 使用每一个属性定义行。
  • 使用&ldquo;标签嵌套&rdquo;的选择。 欲了解更多信息,请参阅CSS DIY Organization

CSS文件结构

推荐的CSS结构部分改编自Cederholm SimpleBits。 这种结构驻留在style.css文件中。 该文件包括以下几个部分:
  1. 信息(Info-一个注释部分为主题,风格,作者,网站,任何版权信息。
  2. 调色板(Color Palette-一个注释的部分,它定义为主题的整体色彩计划。 定义颜色,它提供了一个单一的地方,很容易让用户查找,替换,修改颜色定义。
  3. 复位(Reset-用来跨浏览器的设置正常化的定义。
  4. 清除浮动(Clearing Floats-用来清除父项目包含儿童,浮动的定义。
  5. Typography- (可选)包含CSS代码或一个版式复位框架(如YUI的字体),标准化跨浏览器的字体大小的参考。
  6. 一般(General -如全球的HTML元素的定义<body> ,标题,链接和任何其他元素,在那里你要应用不同的风格和覆盖复位。 这可以包括像元素的样式<ul><p>
  7. Structure-布局为主要结构部件的模板,如容器,页眉,页脚等本节定义的结构可以细分与评论成部分,如导航,页眉等
  8. Main-你的主题相关的主要风格。 这可以包含博客文章的定义,标签等。
  9. Secondary-风格,你的主题有关的东西喜欢程式化的文字,错误,等等。
  10. Forms-表单项目有关的所有造型。
  11. Misc -杂项定义所需要的渲染看看你的模板。
以下示例显示了这种结构应用到一个CSS文件。
/*Theme: My Sample ThemeAuthor: Copyright: *//* Colors PaletteBackground: #fffText: #434343Main Accent: #999Links: #443444*//* Reset***************************************************************/YOUR CSS RESET CODE GOES HERE/* Clearing Float***************************************************************/group:after {    content: .;    display: block;    height: 0;    clear: both;    visibility: hidden;}.group {display: inline-block;}  /* for IE/Mac *//* Typography (Optional)***************************************************************/@import url(http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css);/* General***************************************************************/body {}a {}a:link {}a:hover{}a:visited{}h1,h2,h3,h4,h5,h6 {}/* Structure***************************************************************/#container {}#header {}       #logo {}#footer {}/* Main***************************************************************//* Secondary***************************************************************//* Forms***************************************************************//* Misc***************************************************************/

CSS的复位

你可以在浏览器从新设置,然后手动标记,更多的reser,参考Reset Reloaded

  1. 添加一个reset.
  2. 添加一个默认的样式到任何全局元素(defined in the general section).
Example:
p { padding: 0 10px; line-height: 150%;
}

Typography(排版)

默认的,可以字体尺寸设置一个默认值,确保跨浏览器的字体大小不变,也可以允许浏览器用户增加字体大小来提高可读性。然而,相对大小是累积的。例如,如果你的div标记相对大小设置为2 em,然后在一个< div >元素中嵌入另一个< div >元素,那么最内层的相对大小就要设置为8em。
下面通过以下设置,可以争强可读性:
  • (方法1)使用EMS设置<body>元素字体大小。 现浏览器中的介质文本的默认大小是16px 。 首先,对整个文档通过设置字体大小设置<body>元素为62.5%。 然后,您可以认为,以像素为单位,但仍设置大小EMS:1EM是10px,0.8em是8px,1.6em是16px,等有关详细信息,请参阅怎么用EMS设置字体大小
  • (方法二)使用一个框架重置如YUI 2 Fonts CSS

清除浮动

用一下两种方法可以清除不需要的标记
  • (方法一)任何父元素使用clear属性。
  • (方法二)在容器中添加overflow:auto

表单

标记的表单元素使用&ldquo;ordered-list&rdquo;方法。该方法描述了表单元素顺序输入,用户填写。
<fieldset>  <legend>Delivery Details</legend>  <ol>    <li>      <label for=name>Name<em>*</em></label>      <input id=name />    </li>    <li>      <label for=address1>Address<em>*</em></label>      <input id=address1 />    </li>    <li>      <label for=town-city>Town/City</label>      <input id=town-city />    </li>    <li>      <fieldset>        <legend>Is this address also your invoice address?<em>*</em></legend>        <label><input type=radio name=invoice-address /> Yes</label>        <label><input type=radio name=invoice-address /> No</label>      </fieldset>    </li>  </ol></fieldset>

效果增强

现在浏览器,只要你熟悉CSS,就可以呈现你所想设计的,不需要考虑那些低版本的浏览器的体验。

  1. Border radius
  2. Multiple background images
  3. Gradient
  4. Transparency (RGBA and opacity)
  5. Shadows
  6. Text-Shadows
 
参考文档:http://docs.orchardproject.net/Documentation/UI-guidelines-for-theme-authors

作者原创内容不容易,如果觉得内容不错,请点击右侧“打赏”,赏俩给作者花花,也算是对作者付出的肯定,也可以鼓励作者原创更多更好内容。
更多详情欢迎到QQ群 166852192 交流。