Подача рекламных объявлений в рекламные печатные издания, газеты , журналы. Текстовые объявления и блочная реклама.
Главная
Реклама в прессе

Газеты и журналы

Реклама на ТВ

Самолеты и аэропорты

Продвижение сайтов

Продвижение статьями

Контекстная реклама

Дизайн-услуги
Услуги веб-мастера
Вопрос-Ответ
Контакты

Задать вопрос:

SiteHeart
_______________________
О рекламе в печатной прессе:

+38(044) 383 08 36

Для Крыма:

+7(495) 669-68-43(доб.300)

ICQ 603832170

mediagroup.office@gmail.com


_______________________
О размещении SEO-статей:

+38(044) 383 08 36

Для Крыма:

+7(495) 669-68-43(доб.300)

ICQ 177467748
forum@mediagroup.com.ua

_______________________
О дизайне и верстке:

+38(044) 383 08 36

Для Крыма:

+7(495) 669-68-43(доб.300)

ICQ 177467748
Skype alex3alex3alex

www@mediagroup.com.ua

_______________________
О раскрутке сайтов:

+38(044) 383 08 36

Для Крыма:

+7(495) 669-68-43(доб.300)

SiteHeart

ICQ 589766487
Skype NextUp Media

manager@nextup.ru





Верстка



CSS-верстка

Когда табличный метод верстки изжил себя, в W3C создали новые. Самым распространенным сейчас является верстка с помощью CSS. Если вы читали статью о блочной верстке, вы уже имеете представление, чем она отличается от табличной и какие имеет преимущества благодаря каскадным таблицам. Например, точно также возможны в CSS резиновая верстка и фиксированная верстка, но качество кода при этом на порядок выше.

Основная цель, которую преследовали разработчики CSS (каскадных таблиц стилей), - отделить скелет сайта (код) от его оформления. CSS — это технология, позволяющая  описывать именно внешний вид документа, написанного языком HTML, XHTML или XML. Можно задать фоновые области, стиль и вид текста, ссылок, сделать маркированные или пронумерованные списки — интересных возможностей ну очень много.

На первый взгляд непонятно, почему CSS верстка WEB страниц к 2009 году практически вытеснила табличную. Ведь в том же HTML есть теги, которые позволяют управлять параметрами оформления документа. Дело в том, что в HTML эти теги нужно прописывать каждый раз, когда повторяется тот или иной его элемент или параметр. Например, вам нужно установить стиль для всех заголовков. Придется отдельными командами задавать размер, шрифт, выравнивать по центру или по краям. Если понадобится внести какие-либо изменения, то придется просматривать весь документ в поисках нужной части кода. Даже человеку несведущему станет понятно, что это очень неудобно и занимает слишком много времени. Вот почему сейчас так востребована верстка сайта с помощью CSS.

С появлением CSS верстка WEB страниц стала удобнее, быстрее и качественнее. Если повторяющихся элементов на них много, их внешний вид описывается в отдельном файле. Верстка с помощью CSS позволяет одной командой задать для них все атрибуты форматирования, достаточно один раз применить нужный стиль к нужному тегу. Это существенно облегчает основной код страницы: в нем содержится только ссылка на таблицу стилей. Благодаря этому, браузер кэширует повторяющиеся элементы, не загружая их заново при переходе на другую страницу сайта. Экономия трафика налицо.

По всему миру веб-мастера, дизайнеры, верстальщики и программисты оценили многочисленные плюсы создания WEB страниц с применением CSS верстки. В свое время эта технология вывела искусство верстки на новый уровень и позволила учитывать не только «технические пожелания» к документам, но и эстетические чувства пользователей Интернет. До этого момента несовершенство HTML заставляло разработчиков сайтов обрабатывать макеты сайтов табличной версткой, использовать изображения вместо текста либо для контроля над незанятым пространством (распорки). Пока не были разработаны CSS и блочная верстка, верстальщикам приходилось «оживлять картинку» страниц с помощью программных скриптов, например, Java-script. Но многие пользователи его, из-за чего сайт либо не загружался, либо загружался некорректно, и часть важных элементов становилась недоступна. Так, Java-script применяли для меню сайта, и если он был отключен, то меню не работало. С переходом к верстке меню в CSS эти проблемы исчезли.

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

Таблицы связанных стилей

Определение правил для всего сайта и стилей для его элементов лучше всего делать именно этим способом, так как все параметры сохраняются отдельным файлом. Подключить их можно в код любого сайта или его страницы, добавив тег <link> к заголовку.
Преимущества использования таблиц связанных стилей для CSS верстки блоками следующие:

  • один и тот же файл со стилем можно применять для неограниченного количества WEB страниц и даже для абсолютно разных сайтов;
  • таблицу стилей можно редактировать, не трогая код самой WEB страницы;
  • если в файл стиля вносятся изменения, они отображаются на всех страницах, которые на него ссылаются, будь их 2 или 200;
  • файл, в котором содержится таблица стиля, сохраняется в кэше компьютера и используется при повторной загрузке сайта или при переходе на другую его страницу. Таким образом сокращается потребление трафика.

Таблица глобальных (внедренных) стилей

CSS DIV верстка этим способом предполагает размещение стиля непосредственно в теле HTML документа (в его заголовке). Для этого используется тег STYLE. Стиль хранится в одном месте, но уже не отдельным файлом, поэтому применить его можно только к одному элементу (оформление страницы и его содержимое не разделены).

Внутренние (встроенные) стили

Внутренний стиль используется для конкретного тега и только на одной веб-странице (для абзаца, якоря, заголовка, ячейки таблицы и др.). Чтобы применить его, к дескриптору добавляется атрибут STYLE. Задать параметры ряда элементов этот способ не позволяет, так как противоречит идеологии структурного документа.

Чтобы вам было понятнее, вот примеры верстки CSS:

  • связанные стили:

<html>

<head>

<link rel="stylesheet" href="style.css" type="text/css" >

</head>

<body>

<h1>Текст</h1>

</body>

</html>

Style.css при этом должен содержать h1{ font-size:16px; color:#000066;}

  • глобальные стили:
<html>

<head>

<style>
h1{font-size:16px; color:#000066;}
</style>

</head>

<body>
<h1> текст</h1>
</body>

</html>
  • внутренние (встроенные) стили:
<html>

<head></head>

<body>
<h1 style="font-size:16px; color:#000066;"> текст</h1>
</body>

</html>

Во всех случаях задаются одни и те же параметры: заголовок темно-синего цвета, размер шрифта — 16 пикселов. А теперь сравните: будет содержать код документа одну ссылку на файл CSS или полностью описания для отдельных элементов.

Чтобы вы и верстальщик, который будет заниматься вашим сайтом, достигли полного взаимопонимания, полезно будет скачать пару видео уроков CSS верстки WEB страниц с торрента. По крайней мере, вы уже будете разбираться, что такое CSS верстка в 3 колонки и в 2, блоки, слои и многое другое.

 

Если вы хотите лучше разбираться в деталях верстки, вам будут полезны следующие статьи:

   HTML-верстка

   Блочная верстка

   Верстка для начинающих

   Инструментарий верстальщика

   Основы верстки

   Стандарты W3C

   Табличная верстка

 



Статьи

 
www.megastock.ru  Mediagroup 2007-2017. Все права защищены
Разработка и поддержка