Студия дизайна — Art Generation Studio » Техноблог

Советы и правила по созданию качественной HTML-верстки

admin — Tue, 16 Mar 2010 13:40:39 +0000

В данной статье вы узнаете о некоторых правилах, которые мы используем в нашей студии при верстке шаблонов, и, возможно, почерпнете что-то полезное для себя.

Прежде чем приступить к верстке, следует детально изучить элементы во всех предоставленных шаблонах и найти схожие по стилю блоки. Это позволит в разы сократить CSS.
Отслеживать процесс верстки лучше всего в самом проблемном браузере. На данный момент таковым является IE6

Ключевым и уникальным блокам на странице следует присваивать идентификатор, а в css описании отталкиватся от идентификатора. Это позволит использовать одинаковые имена классов в разных блоках.

Пример:

<div id="maincol">
	<div class="block">
		<p>В css описании следует отталкиватся от 
		идентификатора. Это позволит использовать 
		одинаковые имена классов в разных блоках.</p>
	</div>
</div>

не правильно:

div.block {
	/* описание свойств ... */	
}

правильно:

#maincol div.block {
	/* описание свойств ... */	
}

Старайтесь использовать абстрактные имена классов, т.к. возможно их последующее использование для блоков другого смыслового содержания.

Пример:

не правильно:

<div class="usefull_tips">
	<div class="tip">
		<p>Абстрактные имена классов 
		вносят меньше путаницы.</p>
	</div>
</div>

правильно:

<div class="items">
	<div class="item">
		<p>Абстрактные имена классов 
		вносят меньше путаницы.</p>
	</div>
</div>

Старайтесь использовать связные классы для схожих по стилю блоков.

Пример:

не правильно:

HTML:

<div class="type1">
	<p>С помощью связных классов можно 
	сократить размер CSS-файла.</p>	
</div>
 
<div class="type2">
	<p>Чем меньше дублирующих блоков 
	в CSS-файле - тем лучше</p>
</div>

правильно:

HTML:

<div class="block type1">
	<p>С помощью связных классов можно 
	сократить размер CSS-файла.</p>
</div>
 
<div class="block type2">
	<p>Чем меньше дублирующих блоков 
	в CSS-файле - тем лучше</p>
</div>

CSS:

div.type1 {
	margin:1em 0;
	font-size:1.2em;
	color:red;
}
 
div.type2 {
	margin:1em 0;
	font-size:1.2em;
	color:blue;
}

CSS:

div.block {
	margin:1em 0;
	font-size:1.2em;
}
 
div.type1 {
	color:red;
}
 
div.type2 {
	color:blue;
}

Старайтесь давать осмысленные имена классам и не перегружать их названия излишними данными для облегчения понимания верстки сторонними лицами

Пример:

не правильно:

HTML:

<div id="header">
	<ul class="head_menu">
		<li>пункт 1</li>
		<li>пункт 2</li>
		<li>пункт 3</li>
	</ul>
</div>

правильно:

HTML:

<div id="header">
	<ul class="menu">
		<li>пункт 1</li>
		<li>пункт 2</li>
		<li>пункт 3</li>
	</ul>
</div>

CSS:

#header div.head_menu {
	/* some css here... */
}

CSS:

#header div.head {
	...
}

Не следует использовать графику там, где можно спокойно обойтись текстовыми символами.
Не рекомендуется использовать параметр style в HTML тегах.
При описании размера шрифта и межстрочного интервала лучше использовать относительные единицы измерения — em.
Старайтесь в CSS-описании блоков сортировать свойства по следующим группам:
- свойства текста и шрифта
- оформление
- размеры и отступы
- позиционирование
- поведение
Настоятельно не рекомендуется стилизовать под единичное использование теги акцентного оформления текста (strong, em, small, span, sup, sub и т.д.) в тех местах где предполагается размещение динамического контента.
Не стоит полностью отказываться от использования таблиц в пользу слоев: в некоторых случаях они более уместны.

Стилизуйте элементы, по возможности, на более высоком уровне вложенности.

Пример:

<h2><a href="#">Стилизованный заголовок</a></h2>

не правильно:

h2 {
	/* пусто */
}
 
h2 a {
	font-size:2em;	
	text-decoration:normal;
}

правильно:

h2 {
	font-size:2em;	
	text-decoration:normal;
}
 
h2 a {
	/* пусто */
}

Не оставляйте ссылки без содержимого. Также, рекомендуется использовать параметра title в ссылке, если в стиле содержимое самой ссылки скрывается. Для того, чтобы скрыть в стиле содержимое из ссылки используйте свойство text-indent.

Пример:
не правильно:

<div class="logo"> <a href="#"></a> </div>
правильно:

<div class="logo"> <a href="#" title="на главную">Название сайта</a> </div>
Используйте тег img только для контентных изображений. Таковыми считаются: изображения, которые сопровождают тексты, аннотации и т.д., банеры, счетчики.

Предпочтительно подбирать нужные теги под логическую разметку страницы, а не создавать ее через css стили. Для лучшего понимания использования тегов, при верстке рекомендуется сначала сделать HTML-каркас без подключения CSS. Если посмотреть на такую страницу из веб-браузера, то будет наглядно видно, где возникают нелогичные ситуации, например «слипание» текста.

Пример:

не правильно:

<div class="head">Заголовок</div>
 
<div class="menu">
	<a href="#">пункт 1</a>
	<a href="#">пункт 2</a>
	...
</div>

правильно:

<h1>Заголовок</h1>
 
<ul class="menu">
	<li><a href="#">пункт 1</a></li>
	<li><a href="#">пункт 2</a></li>
	...
</ul>

Использовать элементы input, select и textarea в связке с label. Связка осуществляется посредством параметров for в label и id в вышеприведенных элементах.

Пример:
```
<label for="firstname">Имя:</label>
<input type="text" name="firstname" id="firstname" />
```

Если в дизайне планируется размещение наименований полей формы в самих полях, следует использовать тег label вместо прописывания значений в параметр value.

Пример:

не правильно:

<input type="text" name="login" value="логин" />
<input type="password" name="pass" value="пароль" />

правильно:

<label for="login">логин:</label>
<input type="text" id="login" name="login" />
<label for="pass">пароль:</label>
<input type="password" id="pass" name="pass" />

Для удобства навиции по полям формы рекомендуется использовать параметр tabindex в элементах форм.

Не рекомендуется использовать инлайновые и блоковые элементы в одном уровне вложенности.

Пример:

не правильно:

<div class="text">
	<a href="#">навигация</a>
	<p>Инлайновые и блоковые элементы
	 не стоит располагать рядом</p> 
</div>

правильно:

<div class="text">
	<p><a href="#">навигация</a></p>
	<p>Инлайновые и блоковые элементы 
	не стоит располагать рядом</p> 
</div>

Для стилизации отступов у абзацев нужно использовать свойство margin.
При стилизации блоков, содержащих динамический контент недопустимо задавать свойство height.

Объединение шейпов (shapes) в один объект в Adobe Photoshop

admin — Sat, 07 Mar 2009 10:42:35 +0000

Вы сталкивались с проблемой объединения векторных объектов в один при работе в Adobe Photoshop? В этом уроке я расскажу, как комбинировать несколько шейпов в один слитый векторный объект так, чтобы он не растеризировался. Итак, начнем.

Берем исходное изображение. Я погуглил и выбрал, нашел изображение вазы, которая очень подходит для наглядности данного примера:

Берем Pen Tool , включаем Pahts и начинаем обрисовывать контур нашей вазы до середины.

В итоге, мы должны получить следующий результат (см. ниже):

Выбираем Direct Selection Tool (A) , выделяем полученный контур, и делаем его копию: Edit→Copy затем Edit→Paste (либо Ctrl+C затем Ctrl+V). С выбранным инструментом Direct Selection Tool, идем в Edit→Transform Path (Ctrl+T) и выбираем Flip Horizontal (зеркально отобразить относительно горизонтальной оси объекта). Полученный контур двигаем так, чтобы он максимально перекрывал вторую часть вазы.

Все же есть погрешности, правда? Этим сейчас и займемся.

Выбираем все тот же Direct Selection Tool (A) , выделяем отдельные точки кривой и аккуратно передвигаем, пока он не закроет не перекрытые края нашего объекта. В результате, это должно иметь вид:

Поправили? Хорошо. Поехали дальше.

У нас теперь есть 2 контура, пересекающихся своими боковыми сторонами. Отлично.

Берем Path Selection Tool , и выделяем точки обеих контуров и на панели настроек инструмента нажимаем кнопку Combine:

И «О Чудо!», они объединились. Как все, оказывается, просто.

На этом, в принципе, разбор данной темы можно закончить. Все остальное попадает под категорию OFFTOP.

Ещё можно вырезать места, где у нас ручки, сохранить контур, как Custom Shape, и использовать нашу фигуру, растягивая до любых мыслимых и не мыслимых размеров, не боясь потери качества. Это векторная фигура, она ресайза не боится

С техникой разобрались, дальше уже творчество и креатив

Давление на перо средствами Adobe Photoshop

admin — Sat, 07 Mar 2009 10:27:02 +0000

У Вас нет планшета, но нужна имитация давления на перо (линии разной толщины)? Не расстраиваетесь — это можно сделать стандартными средствами Adobe Photoshop. Итак, начнем

Выбираем инструмент PenTool (P) , включаем Paths и рисуем кривую (или несколько).

Выбираем инструмент Brush Tool (B) , переходим в окно редактирования кистей (Toggle the Brushes palette ), редактируем:

Выбираем размер кисти, её жесткость (в моем случае это 19 px Diameter и 90% Hardness). Переходим на вкладку Shape Dynamics и выставляем следующие значения:

Size Jitter = 0%
Pen Pressure выбираем в выпадающем меню
Minimum Diametr = 0%
Все остальные настройки оставляем «по умолчанию»

Теперь выбираем желаемый цвет для нашей линии (мы всегда сможем его поменять, способов уйма) Нажимаем Set foreground color:

Возвращаемся к инструменту Pen Tool (P) , в рабочей области нажимаем правую клавишу мыши и выбираем Stroke Path:

Выбираем из выпадающего меню Brush, ставим галочку напротив Simulate Pressure и нажимаем OK. Вуаля!

Используя этот урок можно добиться следующего эффекта:

Успехов!