• Регистриция
Этап применения умений и навыков.
Плохой специалист винит не себя, а инструменты, которыми он пользуется. Поэтому убедитесь в том, что ваше прог...
Этап финальной доводки.
Именно внимание к деталям отличает хорошую работу от великолепной. Вот несколько советов как «добавить изюм...
Фиксированный размер шрифта на Ваших веб-страничках
Вы когда нибудь задумывались о том, как выглядят ваши веб-странички на других компьютерах? Наверняка задумыв...
Этап финальной доводки.
Именно внимание к деталям отличает хорошую работу от великолепной. Вот несколько советов как «добавить изюм...
Секреты индексации сайта. Сайт может и должен работать. Пример №2
Звонит скептически настроенный знакомый и рассказывает "ужасную" историю. Сфера деятельности - бытовая элект...
При создании дизайна для Сети вам нужно принять к сведению, что контент будет меняться. О том, чтобы тратить в...
Плохой специалист винит не себя, а инструменты, которыми он пользуется. Поэтому убедитесь в том, что ваше прог...
HTML 4 не является языком оформления веб-страниц.

Он является языком логической разметки страниц. Раньше, создавая HTML-документ, вы думали о том, что этот заголовок будет сделан жирной верданой золотистого цвета и отцентрован посредине большой темно-зеленой ячейки. Теперь все это предлагается выкинуть, и написать просто:

Заголовок страницы

. Выкидывается все, связанное с форматированием: шрифты, бордюры таблиц, цвет ссылок, отступы у , фоны ячеек таблиц, центрирование…

И если раньше вы смотрели на макет страницы, и видели глазами, что вот это у нас шапка сверху, а вот это слева чуть другого цвета - сайдбар с ссылками, а все остальное - основная часть страницы, то теперь вам предлагается это все непосредственно написать руками:




Компания была основана...





Фактически, то, что вы делаете теперь в HTML - это некая карта страницы, не более того. Структура. Даже вот тот в заголовке означает не ““, а “второстепенная по значению фраза внутри шапки, подзаголовок”.

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

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

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

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

CSS спроектирован так, чтобы дизайн и стиль всего сайта хранился в одном месте (можно даже буквально в одном файле, хотя для больших проектов это не очень удобно). А это означает, что во время разработки этого самого сайта, и во время различных “редизайнов” и “рестайлингов” вам вообще не нужно, как раньше, менять все HTML’ные файлы или шаблоны, достаточно сделать изменения только в CSS.
Маленький размер страниц

Несмотря на то, что все равно в файлах суммарно остается и содержимое, и оформление, сам синтаксис CSS ведет к меньшему размеру файлов. Например, если вы (или ваш Dreamweaver) для каждой ссылки в коде раньше писали:



то теперь вы напишите в HTML:


и в CSS:
a {Font:Bold 10pt Verdana, Arial; Color:#880000;}

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

Даг Бауман как-то провел эксперимент, перевел заглавную страницу сайта Microsoft на CSS, получил уменьшение объема с 40КБ до 15КБ.
Кеширование оформления

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

К этому стоит добавить, что многие картинки, которые раньше делались тегами при дизайне с использованием стилей переходят тоже в правила CSS’ного файла. И большинство браузеров кеширует эти картинки агрессивней, чем те, которые сидят в HTML: он за ними даже не ходит на сервер проверять, изменились ли они, если не изменился стилевой файл.
Свободное расположение содержимого в файле

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

Оформительскую информацию в CSS-файлах можно группировать и структурировать, как душе угодно. Например, можно из всего оформления выдрать только цвета и вынести их в отдельный файл, сделать таких файлов несколько вариантов и легко менять цветовую гамму в зависимости, скажем, от текущей погоды. Опять таки, независимо от остальной верстки, шрифтов и размеров…
Легче скриптовать

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

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

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

Если для вас все вышеперечисленное звучит, скорее, как некое баловство, то, вот отдельные стили для печати - очень нужная и удобная штука. Там вы можете скрыть интерактивные элементы, которые не имеют смысла на бумаге, раскрыть выпадающие менюшки, если они открываются только по наведению мышки, напечатать адреса ссылок в скобках после текста ссылки, чтобы из распечатки тоже можно было узнать, куда она ведет.

 

Популярное

  • PHP. Пишем счетчик просмотров для каждой страницы сайта на php
    На некоторых сайтах часто можно увидеть следующую надпись внизу страницы или под статьями: "Всего просмотров xxx. Сегодня xx". На первый взгляд ничего примечательного...
    Пишем 'гостевую книгу' с нуля на php
    Почти на каждом более-менее популярном сайте есть форум или гостевая книга, эти элементы нужны для постоянного общения автора сайта с его пользователями. Но многие...
    Окна сообщений
    Хотя всплывающие окна это и очень эффективный метод получения новых подписчиков, есть один еще более успешный. Сочетая его с хорошим стимулом, вы в буквальном смыс...
    Собственная статистика поисковых слов (Яндекс, Рамблер, Google,...) на PHP
    В этой статья я бы хотел поделиться с вами своей новой разработкой – анализатором поисковых запросов с популярных поисковых систем, посмотреть, что это такое, и ка...
    Гостевая книга на PHP.
    В этой статье рассказывается о том, как создать гостевую книгу, описывается её структура и реализация. За пределами статьи остаются дизайн, вёрстка, оформление и т....
  • Организация CSS-файлов: Совет 1 - Флаги
    CSS Organization Tip 1: FlagsВам приходилось писать и работать с большими CSS-файлами? Мучались с бесконечным скроллингом вверх-вниз в поисках нужной части кода? CSS-файлы, с котор...
    Частые ошибки в веб-дизайне.
    Разметка текста – одна из самых важных характеристик дизайна. В большей части проектов текст доминирует, так что хорошо подобранные шрифты могут стать ключом к ра...
    Компот и мухи веб-разработки
    Русский интернет (уже наконец) вовсю осваивает “дизайн через CSS”, но многие все равно не понимают, почему именно надо дизайнить так, а не по-старому, через таблицы. Р...
    Создаем веб-дизайн на тему комиксов, Photoshop и HTML+CSS
    Давайте начнем! Для быстроты изложения я опущу объяснение основ (вроде того, как создать слой-маску или отредактировать обработчики или векторную фигуру). Вам нужн...
    HTML 4 не является языком оформления веб-страниц.
    Он является языком логической разметки страниц. Раньше, создавая HTML-документ, вы думали о том, что этот заголовок будет сделан жирной верданой золотистого цвета и о...
  • Немного о PHP.
    Интернет уже давно прочно вошел в нашу жизнь. Это смелое утверждение можно доказывать или опровергать много раз, но так или иначе все меняется, а с этим спорить никт...
    Основы написания PHP программ
    Как и в любом языке программирования в PHP есть свои правила, константы, зарезервированные слова и операторы, с помощью которых выполняются различные манипуляции с ...
    История РНР
    Начинать нужно всегда с самого простого, и сейчас я попробую познакомить Вас с программированием на скриптовом языке РНР. РНР (читается как пи-эйч-пи) появился на св...
    Особенности РНР
    Как и у всякого языка программирования, у РНР есть свой синтаксис. Он очень похож на синтаксис языка С или Perl. Программисты, пишущие на этих языках, смогут освоить РН...
    Введение в PHP
    PHP - это скриптовый язык программирования, который исполняет весь свой код на стороне сервера, а клиенту выдается только результат работы скрипта. Изначально PHP рас...

Теги

Календарь

< Ноябрь 2011 >
П В С Ч П С В
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 30        

Наши фото

Укажите свое мастерство









 

Обрати внимание

Факторы, влияющие на результаты поиска (поисковой выдачи)
На данный момент поисковыми системами при ранжировании сайтов используются два фактора:Соответствие текста страницы запросу, введенному пользователем (поискова...
Хороший дизайн
Как-то раз собрались авторитетные дизайнеры со всего мира и стали думать, что такое хороший дизайн. Думали - думали, и пришли к выводу: Хороший дизайн - это дизайн, ко...

На заметку

Твой сайт
Изготовление сайта - штука тяжёлая и занимает кучу времени. Так что длительность прогулок под Луной с любимой девушкой, а для кого и с любимым бойфрендом, придется с...
JavaScript: очистка формы
Для очистки формы существует специальная кнопка Reset, при нажатии на которую данные формы возвращаются в исходное значение. Если ввести свои данные в форму, а затем ...