Комментариев 0В этой статье я решил поделиться с вами своими сниппетами, а также дать несколько советов относительно оптимального построения html-разметки и css-файлов.
В програмировании сниппеты - это небольшие стандартные фрагменты кода, которые могут быть многократно использованы в различных скриптах/программах.
Принимаясь за HTML-вёрстку нового сайта, верстальщику зачастую приходится в очередной раз писать фрагменты кода, которые он целиком или частично уже использовал в предыдущих проектах. Сниппеты же позволяют избежать этой рутинной работы, ну, или сократить её до разумного минимума.
Сниппет первый: Тело страницы
Использование различных html-редакторов позволяет нам не заботиться о том, с каких таких тегов начать верстать нашу страничку: делов-то, открыл, например, Dreamweaver, выбрал тип страницы, нажал «OK», и вот уже, казалось бы, основа страницы готова... Не тут-то было! Практически все html-редакторы предлагают нам лишь самый минимум кода, упуская множество таких значимых элементов, как, например, мета-теги и пути к прикрепляемым javascript- и css-файлам.
Итак, первый сниппет, который как говорится, «маст хэв» любой верстальщик выглядит так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="name_of_the_author" /> <meta name="copyright" content="copyright" /> <meta name="keywords" content="keywords" /> <meta name="description" content="content_description" /> <meta name="robots" content="index, follow" /> <link rel="icon" type="image/png" href="url_to_favicon/favicon.png" /> <!--[if IE]><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="url_to_favicon/favicon.ico" /><![endif]--> <link rel="alternate" type="application/rss+xml" title="RSS" href="path_to_rss_channel" /> <link rel="stylesheet" href="path_to_css_file/style.css" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="path_to_js_file/script.js"></script> <title>Title of the page</title> </head> <body> </body> </html>
Теперь разъясню детально, что же я тут понаписал.
Перво-наперво определяемся с доктайпом. Споров о том, какой правильнее/лучше немало, но весомых аргументов в пользу какого-либо я не встречал. Тут, пожалуй, дело вкуса. Я предпочитаю использовать XHTML 1.1, кому-то нравится XHTML 1.0 Strict, кому-то XHTML 1.0 Transitional. Могу сказать только одно: наиболее лояльным к недочётам верстальщика является переходный (Transitional) доктайп, потому и проверку на W3C-валидаторе страницы с таким доктайпом проходят легче.
Сразу после тега <head> с помощью <meta http-equiv=""> определяем, какие заголовки отдавать серверу, ну и устанавливаем кодировку страниц.
Вот в том, что касается кодировки, рекомендую окончательно и бесповоротно переходить (если вы до сих пор используете иную) на utf-8, поскольку подавляющее большинство серверных приложений используют именно utf-8 как дефолтовую кодировку. Более того, utf-8 используется по-умолчанию и в SQL-базах данных. Самым, пожалуй, существенным недостатком этой кодировки является то, что размер символов у неё не фиксированный, а посему один кирилический символ будет занимать в базе не 1, а 2 бита, что приводит к существенному увеличению объёма хранимых данных... Но, на мой взгляд, гораздо безболезнней потерять 1-2 мегабайта дискового пространства, нежели потерять 1-2-х посетителей из-за проблем с кодировкой.
Следующий блок тегов <meta> содержит информацию об авторе и принадлежности прав на материал страницы. Рекомендую не стесняться указывать своё авторство! Быть может, эта маленькая строчка кода сослужит вам в будущем хорошую службу. ;)
Следующий блок включает информацию для посковых роботов: ключевые слова, описание страницы и разрешение индексации. Не злоупотребляйте ключевыми словами, не надо помещать текст Большой советской энциклопедии внутрь тега <meta name="keywords">. Сегодня, поисковые роботы фактически полностью игнорируют содержимое этого тега. Тем не менее, опускать его не следует, ведь кто знает, какие алгоритмы будут использовать поисковики завтра. Помещайте в этот тег 5-6 слов, наиболее точно отражающих содержание страницы. Обратите внимание! Содержимое и тега <meta name="keywords">, и тега <meta name="description"> должно отражать именно контент той страницы на которой они располагаются, а не всего сайта вцелом. Особенно важно учесть это в том случае, если ваши страницы буду генироваться динамически инструментами какой-либо CMS.
Далее я определил мета-теги фэйв-иконок. Я использую обычно 2 иконки: в формате .ico - для IE, и в формате .png - для нормальных браузеров.
В следующей строке мы сообщаем браузерам о наличии на сате RSS-канала. Пример обработки этого тега можно наблюдать, открыв сайт WEB-BRICKS.RU в браузере Opera. С правого края адресной строки вы увидите небольшую иконку RSS, с помощью которой можно осуществить подписку на rss-канал сайта.
Последними строками прикрепляем css- и js- файлы. Поскольку ни один мой сайт не обходится без использования jQuery-скриптов, я вынес в сниппет линк на эту замечательную библиотеку. Чтобы не хранить библиотеку на сервере и не обновлять её вручную на всех сайтах, используем ссылку на офсайт разработчиков.
Сниппет второй: Основные блоки элементов
Большинство современных сайтов в основе своей имеют структуру, которую можно описать следующим шаблоном:
Вот для такой структуры мы и создадим наш следующий сниппет, который, что очевидно, станет отличным дополнением предыдущего.
<!-- WRAPPER -->
<div id="wrapper">
<!-- TOP -->
<div id="top">
<div id="logo"></div>
<div id="menu"></div>
</div>
<!-- /TOP -->
<!-- CONTENT -->
<div id="content">
<div class="x1_2"></div>
<div class="x1_3"></div>
<div class="x2_3"></div>
<div class="x1_4"></div>
</div>
<!-- /CONTENT -->
<!-- BOTTOM -->
<div id="bottom">
<div id="bottom_links"></div>
<div id="copyright"></div>
</div>
<!-- /BOTTOM -->
</div>
<!-- /WRAPPER -->
Такая конструкция очень привлекает своей универсальностью. Из блоков, содержащихся внутри #content мы можем составить фактически любую комбинацию для позиционирования элементов страницы.
Также, я включил в этот сниппет некоторые дополнительные элементы, без которых не обходится ни одна страница: #logo (логотип), #menu (навигационная панель), #bottom_links (ссылки внизу страницы) и #copyright (собственно, копирайт).
Обратите внимание: я использую комментарии в разметке, которые очень сильно помогают ориентироваться в коде страницы, причём рекомендую отмечать комментарием не только начало фрагмента, но и его окончание. Также, чтение кода существенно облегчится, если вы будете строго выдерживать иерархию вложенности элементов.
Сниппет третий: CSS-файл
Конечно, с css-файлом много не наунифицируешь, и, тем не менее, кое-какую работу упростить себе можно. Для приведённой выше разметки я использую вот такой вот сниппет:
@charset "utf-8";
/* CSS Document */
/* Общие стили */
body {font: ; color: ;}
h1, h2, h3 {font: ;}
h1 {font-size: px;}
h2 {font-size: px;}
h3 {font-size: px;}
a {color: ; text-decoration:none;}
a:hover {color: ;}
a img {border:none;}
input {}
/* Основные блоки */
#wrapper {width:960px; margin:0 auto 0 auto;} /* Размер и центрирование для сайтов с фиксированной шириной */
#top, #content, #bottom {overflow:hidden;} /* Заставляем блоки растягиваться по размеру дочерних */
/* Элементы внутри #top */
#logo {}
#menu {}
/* Элементы внутри #content */
.x2_3,.x1_2,.x1_3,.x1_4 {overflow:hidden;} /* Заставляем блоки растягиваться по размеру дочерних */
.x2_3 {width:640px;}
.x1_2 {width:480px;}
.x1_3 {width:320px;}
.x1_4 {width:240px;}
/* Элементы внутри #bottom */
#bottom_links {}
#copyright {}
Вот, собственно, и всё. Надеюсь, материал этой заметки окажется для вас полезным. Успехов вам в деле вебмастерском!
Добавь в закладки
или поделись с друзьями: