Как самому создать шаблон для DLE? Часть третья - основы верстки

Как самому создать шаблон для DLE? Часть третья - основы верстки


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

Верстка сама по себе несложное занятие. Это скорее механическая работа, хотя бывают макеты, которые можно правильно сверстать только приложив много фантазии и изворотливости.

Чтобы успешно превратить макет с сайта в рабочий код, нужно одинаково хорошо знать как HTML(XHTML), так и CSS(CSS3). Это два наиболее легких языка из всех. Но легкость в изучении с лихвой компенсируется огромным количеством различных способов и вариантов, с помощью которых можно сверстать один и тот же блок. Изначально для разметки страниц использовался чистый HTML, но с развитием технологий на помощь ему пришел мощный и гибкий CSS. В паре они хорошо спелись и могут творить настоящие чудеса = )

Весь интернет сейчас выделяет 2 вида верстки - это табличная и блочная. Я крайне не уважаю таких людей - это говорит в первую очередь об их ограниченности. Нельзя так просто взять и поделить - это табличное, а это блочное. Это все равно что руками воду делить. Нет отдельно ни табличной, ни блочной верстки. Есть одна - смешанная. Постараюсь объяснить почему.

Изначально всё делалось на таблицах, так как браузеры были в своих зачаточных состояниях и каждый обрабатывал один и тот же код по разному. Но с развитием интернета в целом и браузеров в частности, ситуация стала выравнивать и больше не нужно было использовать громоздкие HTML конструкции в виде таблиц. Большая часть кода перекочевала в CSS, а таблицы стали использоваться там где им и место - для создания таблиц (извиняюсь за тавтологию). На смену пришли блоки или блочная верстка. Она удобнее, гибче и обладает большим количеством возможностей. Это простой процесс развития кода, но не как не смена одного типа верстки на другой. Поэтому я считаю, что есть одна верстка - смешанная. Хотя я вообще не вижу смысла выделять какие-то особые типы верстки - таблицы используются там где они нужны, блоки используются как основной инструмент верстки, а все кто до сих пор делят блоки на таблицы - просто еще не осознали, что занимаются ерундой.

Ну, я думаю, что с этим разобрались. И давайте договоримся в дальнейшем использовать правильный смешанный код.

Любой верстальщик должен один раз для себя сделать HTML заготовку, с которой нужно начинать верстку, чтобы каждый раз не писать одно и тоже - это экономит время и силы. Вот пример такой HTML заготовки:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
	<meta https-equiv="X-UA-Compatible" content="IE=edge" />
	<meta https-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title>Заголовок</title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<!--[if lte IE 7]>
	<link rel="stylesheet" href="css/style-ie.css" type="text/css" />
	<![endif]-->
	<!--[if IE 8]>
	<link rel="stylesheet" href="css/style-ie8.css" type="text/css" />
	<![endif]-->
</head>
<body>

</body>
</html>


Это обычная заготовка, в которой написаны все основные теги и подключены файлы стилей CSS. В самом верху я указываю, что это XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Причем используется переходный синтаксис XHTML, как самый универсальный.

Далее в секции HEAD я указываю кодировку, заголовок и нужные мета теги. Подключаю один общий файл стилей style.css и 2 дополнительных для IE8 и версий ниже.

Строчка
<meta https-equiv="X-UA-Compatible" content="IE=edge" />

написана для правильного отображения сайта в IE8 и 9. Она необходимо, так как в этих браузерах часто без ведома пользователя по умолчанию включена кнопка "Совместимость", что заставляет браузер работать как старые версии. Данный код принудительно отключает эту кнопку, если она включена.

В CSS особых базовых конструкций я не использую, хотя многие любят подключать, так называемые, нулевые стили, которые сбрасывают все стилевые атрибуты, которые у всех браузеров заданы по умолчанию для различных элементов.

Думаю, на сегодня хватит. Постараюсь в ближайшее время продолжить эту тему и порадовать Вас новыми статьями.

С уважением, Скубаев Алексей.
20867
3
Комментарии
jekonya
7 ноября 2012 23:52
Надеюсь что продолжение выйдет не через год, как эта, третья часть =)

А в предыдущей статье было написано

Следующая статья будет посвящена верстки данного макета
Алексей
test-templates
8 ноября 2012 16:01
jekonya,
Я пишу статьи в свободное время, поэтому они выходят не так часто.
А в предыдущей статье было написано

я помню, но возможно я сделаю другой макет, так как тот не совсем подходит, возможно возьму макет посложнее
jekonya
10 ноября 2012 04:20
test-templates,
Понимаю, времени у вас свободного вероятно очень мало, но все же с нетерпением жду нового выпуска.
Мы всегда на связи:
Телеграмм
ICQ
Gmail
Yandex
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Телеграмм
ICQ
Gmail
Yandex