Шаблонная страница

Типографика - основной элемент в веб дизайне. Этот шаблон позволяет применять сложную типографику и разные стили и способы подачи контента. Здесь дается краткий обзор всех возможных HTML-тэгов и стилей, предусмотренных шаблоном. На примере данной страницы можно проставлять в материалах применяемые в шаблоне стили и классы, а так же создавать на основе существующих новые варианты оформления текстов. Ссылка.

Главный заголовок материала (h1)

Главный заголовок материала читается поисковым роботом в первую очередь. Желательно, чтобы в заголовке присутствовали самые главные ключевые слова семантического ядра контента. Нежелательно озаглавливать материал заголовком второго уровня (h2), т. к. не исключено, что робот поисковика сочтет материал второстепенным и в поисковой выдаче страница может потерпеть ущерб.

Заголовок параграфа (h2)

В сложном материале, содержащем не одно смысловое поле, темы лучше отбить заголовками второго уровня. У параграфов, что естесственно, общий заголовок - в тэге <h1></h1>, но в самом параграфе так же могут быть некоторые абзацы, отбитые заголовками третьего уровня (h3).

Заголовок абзаца (h3)

Абзацы, озаглавленные тэгами h3, могут быть как самостоятельными в тех случаях, когда материал менее важен, чем параграф под тэгом h2, но при этом не входить в группу. Но как правило, тэгом h3 озаглавливаются тематические абзацы, входящие в параграф. Заодно пример ненумерованного списка:

  • Общий заголовок (h1)
    • Заголовок параграфа (h2)
      • Заголовок абзаца (h3)
      • Заголовок абзаца (h3)
    • Заголовок параграфа (h2)
      • Заголовок абзаца (h3)
      • Заголовок абзаца (h3)

Заголовок краткого текстового блока или виждета (h4)

Заголовки меньших классов (от h4 до h6) стоит применять в крупных материалах как особо выделенный текст с небольшим количеством слов (алерты, сообщения, уточнения). Но как заголовки применять их следует лишь в виджетах и кратких тексовых модулях.

Заголовок параграф в виджете или выделенный текст (h5)

Заголовки меньших классов (от h4 до h6) стоит применять в крупных материалах как особо выделенный текст с небольшим количеством слов (алерты, сообщения, уточнения). Но как заголовки применять их следует лишь в виджетах и кратких тексовых модулях.

Заголовок абзаца в виджете или выделенный текст (h6)

Заголовки меньших классов (от h4 до h6) стоит применять в крупных материалах как особо выделенный текст с небольшим количеством слов (алерты, сообщения, уточнения). Но как заголовки применять их следует лишь в виджетах и кратких тексовых модулях.

Буковица: use <p class="dropcap">.

Если на странице недостаточно иллюстраций или их нет совсем, то оживить текст можно «буковицами» или как их еще называют «фонариками».


Разделительная линия: Сверху сплошная <hr />, снизу пунктирная, если добавить в тэг <hr class="dotted" />


Еще применяемые стили

Default <a> tag
<a> with class="icon-folder"
<a> with class="icon-file"
<a> with class="icon-download"
<a> with class="icon-external"
<a> with class="icon-pdf"

Default <em>
<em> with class="box"

Default <acronym>
Default <abbr>

Ненумерованные списки с особым оформлением

  • <ul> with class="checkbox"
  • <ul> with class="arrow"
  • <ul> with class="star"
  • <ul> with class="check"

Нумерованные списки

  1. Default <ol> tag
    1. Lorem ipsum dolor
      1. Lorem ipsum dolor
      2. Lorem ipsum dolor
    2. Lorem ipsum dolor
  2. Lorem ipsum dolor
    1. Lorem ipsum dolor
  1. <ol> tag with class="disc"
  2. Item 2
  3. Лучше не применять

Div and Span Styles

<div> or <span> tag with class="note" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
<div> or <span> tag with class="info" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
<div> or <span> tag with class="alert" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
<div> or <span> tag with class="download" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
<div> or <span> tag with class="tip" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Blockquote and Q Styles

Default <blockquote>
Or <q> tag with class="blockquote"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<blockquote> tag with class="quotation" and an an additional <p> tag.
(use <blockquote><p>....</p></blockquote>)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


Combine Styles

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation Combine Tags with class "inset-right" or "inset-left". Example: <span class=" info inset-right width25">. ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Combine Tags with class "inset-right" or "inset-left". Example: <q class=" blockquote inset-right width25">. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Possible Width Classes .width15, .width18, .width20, .width23, .width25, .width33, .width35, .width40, .width45, .width50 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Form Styles

Form legend

Preformatted Text Style

pre {
	margin: 10px 0 10px 0px;
	padding: 5px 0 5px 10px;
	border: 1px dotted #aab4be;
	border-left: 20px solid #b4b4b4;
	background: #fafafa;
	font-size: 90%;
	color: #2E8B57;
	font-family: "Courier New", Courier, monospace;
	
	/* Browser specific (not valid) styles */
	/* to make preformatted text wrap */
	 
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla */
}
		

 

Внимание!
Возможны противопоказания.
Необходима консультация
специалиста
!