Верстка html

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

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

Вначале дизайнер готовит макеты веб-страниц в графическом редакторе (например, Adobe Illustrator, Adobe Photoshop), утверждает их у заказчика и передает верстальщику на формирование HTML-кода.

Верстальщик получает работу в виде набора рисунков, где каждый из них соответствует макету отдельной страницы со своим дизайном. Например, вид главной страницы показан на рис. 1.


Рис. 1. Изображение главной страницы после работы дизайнера

Рис. 1. Изображение главной страницы после работы дизайнера

Теперь необходимо проанализировать рисунок и решить, как же его превратить в веб-страницу. Для удобства происходит логическое разбиение картинки на отдельные блоки, с которыми идет дальнейшая работа. Так, по рис. 1 можно выделить два крупных блока — «шапка» страницы и основной контент. Рассмотрим для начала «шапку», показанную на рис. 2.

Рис. 2. Изображение «шапки» главной страницы

Рис. 2. Изображение «шапки» главной страницы

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

  • Сделать один рисунок и применить к нему карту-изображение.
  • Разрезать изображение на фрагменты и объединить их воедино с помощью таблицы, при этом отдельные фрагменты будут служить ссылкой.
  • Воспользоваться позиционированием элементов.

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

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

  • цвет фона веб-страницы;
  • гарнитура основного шрифта, его размер и цвет;
  • размер текста отдельных модулей (новостей, например);
  • цвет, размер и гарнитура шрифта заголовков;
  • параметры горизонтальных линий и рамок.

Дальше верстальщик, используя созданный CSS-файл, создает окончательный HTML-документ главной страницы.

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

Рис. 3. Изображение макета для раздела «Байки»

Рис. 3. Изображение макета для раздела «Байки»

«Шапку» теперь предстоит переделать, а в CSS включить параметры новых появившихся элементов. И так с каждым разделом.

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


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

Следует также учесть, что статьи могут иметь разный объем и веб-страница должна сохранять свой вид независимо от этого.

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

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

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


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

Типографское искусство или просто типографика — вот еще одна область, которая также относится к теме верстки. Это именно искусство, объединившее в себе черты дизайна и верстки, и основано оно на знании шрифтов, опыте их использования, психологии восприятия, чувстве стиля и т.д. Действительно, какой шрифт лучше выбрать, чтобы текст хорошо читался, легко воспринимался при изменении размера букв и делал сайт неповторимым? При подготовке полиграфических материалов ответ на этот вопрос возлагают на дизайнера, но при создании сайтов дизайнер и верстальщик, как правило, решают его сообща.

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


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

Резюме

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

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

htmlbook.ru

Отличия блочной вёрстки от табличной

Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега <table>, то концепция блочной вёрстки основана на активном использовании универсальных тегов <div>, внутрь которых помещается содержимое, включая другие теги.


Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Суть блочной вёрстки

В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.

Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.

Принципы блочной вёрстки


Первый — конечно же, повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много.

Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.

Третий принцип — таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту.

Пример блочной вёрстки

Но, сколько не теоретизируй, а понимать всё проще на примере.

Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».


Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

Разберём некоторые моменты.

<div id=»container»> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div id=»clear»>. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.

Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.

Теперь добавим файл CSS, код которого приведён ниже.

С помощью стилей мы последовательно оформляем содержимое тега <body> и всех находящихся внутри контейнеров с помощью ранее изученных правил.

#clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

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

www.seostop.ru

Виды верстки

Верстку можно поделить на два основных вида:

  • Табличная. Для описания элементов применяются таблицы. Вся страница представляет собой скопление таблиц <table>. В настоящее время такая верстка считается устаревшей.
  • Блочная. HTML-документ представлен как совокупность блоков <div>.

Верстка сайта: с чего начать

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

Если вы хотите самостоятельно попробовать сверстать страницу, или понять, как это происходит, внимательно рассмотрите предоставленный макет. Продумайте, с чего начать верстку. Помните, что все стили (размеры и виды шрифтов, заголовков, абзацев, картинок и т.п.) нужно выносить в отдельный файл.

  • Вырежите иконки, кнопки, картинки. Сложите графику в отдельную папку.
  • Выпишите шрифты, которые необходимо будет отразить в CSS.
  • Создайте файлы index.html и styles.css (можно назвать их по-другому). HTML – это будущая сверстанная страница сайта, CSS – файл стилей.
  • Начинайте с шапки. Пропишите базовые элементы в теге head файла HTML. Здесь следует указать кодировку, путь к таблице стилей, title и т.д.
  • Стратегия верстки. С левого угла дизайн-макета по диагонали вниз начинайте описывать страницу. Сначала «одевайте» в HTML шапку сайта (слева направо), потом спускайтесь ниже и заканчиваете переносом в код правой нижней части макета. Вы можете нарушить данное правило и производить верстку так, как вам удобно.

  • Сначала верстайте структуру веб-страницы в HTML. Затем в CSS выносите идентификаторы и классы. Это можно делать параллельно с версткой. Каждый класс должен иметь адекватное название, которое дает понимание, что он означает. Смешно и непрофессинально выглядят названия типа «verh_shapki», «cherny_shrift_konec» и т.п.
  • Закрывайте все теги, проверяйте правильность их вложения.
  • Работа над HTML заканчивается, и верстальщик полностью переходит на работу с файлом стилей: дополняет его, дорабатывает и т.п.
  • Стилизация выполняется в определенном порядке. Сначала элементу задаются общие правила (фон блока, отступы), затем специфические свойства типа цвета рамок, размещение картинок внутри блока и т.п..
  • Возвращайтесь обратно к HTML-файлу, если странице необходима динамика. Для этого предусмотрены JavaScript-библиотеки. Например, можно сделать меняющийся слайдер или адаптивное меню. Код библиотек должен быть минимизирован.
  • Тестирование и проверка на ошибки. Проверьте, как ведет себя страница в разных браузерах при разных разрешениях монитора. Можно пользоваться онлайн-сервисами или специальными инструментами типа
  • Изучите страницу на валидность – отсутствие ошибок в коде.

Какая верстка считается качественной

  • Блочная – с применением<div>.
  • Адаптивная. кроссбраузерная – страница ведет себя корректно в разных браузерах и на мобильных гаджетах.
  • Валидная – без ошибок в коде.
  • Текстовая. То, что можно сверстать в виде текста,не верстается картинкой. Поисковая система любит текстовый контент, поэтому данный факт должен учитывать каждый верстальщик.
  • Код минимально короткий, все стили вынесены в отдельный файл.
  • Все содержимое в html и css прописано строчными буквами.
  • Для тега <img> (картинки) обязательно указаны высота и ширина изображения.
  • CSS используется преимущественно. То есть, если можно обойтись без JS — то динамика описывается в CSS.
  • То же самое для картинок. Если спецэффекты для шрифта можно наложить при помощи CSS, то используется текст, а не картинка.
  • JS файлы подключены в низу кода. Если вы подключаете их в<head>, то это плохо сказывается на скорости загрузки веб-страницы.
  • JS файлы объединены в один (по возможности).
  • Навигация по сайту реализована списками (<ul>, <li>), поисковая система быстрее понимает такую навигацию.
  • Правильная работа с заголовками. Чтобы у SEO-специалиста в будущем не было проблем, указывайте H1-H6 только в контентной части сайта. Размещайте заголовки по принципу: первым идет H1, потом по убыванию другие виды заголовков.
  • Продуманы стили всех заголовков, абзацев, картинок, списков в контентной части документа.
  • Структурированный код, который наглядно показывает все закрывающие и открывающие теги.

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

  • Обработка изображений: Adobe Photoshop, Gimp, Krita.
  • Работа с кодом: Notepad++, Adobe DreamViewer, SublimeText, CoffeeCup HTML Editor, UltraEdit,Firebug, Winless, CSS3 Generator
  • Работа с JS: Front Page, NetBeans.
  • Проверка на кроссбраузерность и валидность: Crossbrowsertesting, IE Tester, Dr Watson, Validator.w3, Css validator, Markup validtor.

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

semantica.in

Верхняя часть сайта

Меню
пункт 1
пункт 2
пункт 3 Место для контента Copyright © 2012 www.puzzleweb.ru

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

Примечание: для уменьшения объема кода и удобства редактирования css стилей, сразу для нескольких страниц, сделанных по одному шаблону, рекомендуем вам выносить весь css-код в отдельный файл.

puzzleweb.ru

Почему вам повезло больше, чем верстальщикам, начавшим работу уже давно

Существует два типа верстки: блочная и табличная. На заре времен верстка строилась в виде таблиц. Сперва создавалась всего одна, большая.

Верстка html

В нее встраивался head – голова, основная часть. Та, в которую входит логотип, какая-то основная информация типа телефонов и так далее.

Верстка html

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

Верстка html

Далее врисовывалось основное меню для перехода по категориям.

Верстка html

Основная контентная часть. Текст статьи, вводное приветствие или что-то иное.

Верстка html

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

Верстка html

Чуть позже появились новые стандарты. Табличную верстку заменила блочная. Тег «div» — это и есть блочная верстка. Можете посмотреть код любого сайта. Кликните правой кнопкой мыши и выберите «Просмотр кода элемента». Взгляните на мой скриншот. Тут есть блок главной страницы, футера, левой и правой колонки. Все они подписаны.

Верстка html

Современные сайты строятся из блоков, покажу схематично пример, чтобы вы понимали. Разница тут скорее в коде страницы. Видите, никакой основной таблички нет. Блоки, размещенные в той или иной части. Иногда они могут заходить друг на друга или сочетать в себе несколько элементов, но один лишний элемент (большая таблица) исчез.

Верстка html

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

Пошаговая инструкция: как делаются сайты

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

Более 80% людей просто смотрят на непонятный набор символов, вспоминают школьную программу по математике: логарифмы, дифференциалы – сходят с ума, пугаются и забывают об этой теме: «Пойду лучше китайский выучу, оно-то проще будет».

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

Давайте теперь посмотрим как происходит сотворение сайта. Сначала дизайнеры работают в Photoshop. У них получается примерно такая вот картинка. Пока это всего лишь фотография, однако, у нее есть свои отличия.

Верстка html

Она изготавливается в особом фотошоповском формате, типа блокнотного txt или вордовского doc. Из psd, так называется этот формат, раскраиваются блоки. Для этого есть специальная кнопка в меню слева.

Верстка html

После того как документ раскроен. Его можно «Экспортировать для web» и в результате на компьютере появляется папка images, которую верстальщик использует для распределения картинок по сайту.

Верстка html

Я сделал этот вариант за минуту, он не правильный. Просто хотелось вам показать примерный результат. Вы можете скачать электронную версию моего psd-макета (скачать) и попробовать сделать свою, правильную версию, посмотрите, какие картинки пригодятся для размещения и как вы их будете вырезать. Заодно попробуете поработать самостоятельно над шаблоном в photoshop.

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

Ваш первый сайт. Верстка займет всего пять минут

Над самой версткой можно работать в программе Notepad++. Сегодня я не буду затрагивать программу Adobe Dreamweaver, т.к. это тема отдельной статьи, но отмечу, что она как раз создана для верстальщиков.

Работы над сайтом обычно не начинаются с создания файла style.css, но думаю что так вам будет интереснее. Это основной документ, в котором описывается как именно будет выглядеть ваш портал. Все просто. Даже английский учить не обязательно.

Верстка html

Background – это цвет фона.

Верстка html

Кликнув два раза в Photoshop по цветовой палитре вы можете узнать и другие цвета.

Верстка html

Вот так будет выглядеть html документ с текстовой составляющей. Уже знакомые меню, тела и контейнеры… тег h2 тоже должен быть вам знаком. Это заголовки. Впишите в них свои слова.

Верстка html

Скачайте эти два документа в одну папку и откройте с помощью Notepad ++, затем отредактируйте цвет и текст, а затем запустите index.html с любого браузера (скачать).

Верстка html

Получится примерно такой вариант.

Верстка html

Поздравляю. Это ваша первая страница в интернете! Вы сделали ее, у вас получилось. Естественно, что вместо цвета можно вставить и картинку, которая была вырезана из фотошопа в документ images. Для этого нужно просто прописать путь. Как вы видите, ничего супер сложного тут нет.

И напоследок… качаем видео уроки

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

Верстка html

Согласитесь, вообще не впечатляет. Поэтому я рекомендую вам постигать основы при помощи видео курсов. Внизу я разместил ссылки, кликнув по ним, вы можете скачать бесплатные уроки html и css. Они позволяют быстрее достигнуть хороших результатов. Кроме того, чтение требует значительно большей силы воли, нежели просмотр интересных видео.

  1. Html — уроки для начинающих.
  2. Css — уроки для начинающих.
  3. Бесплатный мини-курс по вёрстке сайта.

Желаю вам успехов в ваших начинаниях. Уверен, что совсем скоро вы начнете не только учиться, но и работать онлайн, а также реализовывать невероятные проекты!

Если вам понравилась эта статья – подписывайтесь на рассылку и получайте больше полезных материалов для совершенствования собственных навыков!

start-luck.ru

Верстка – это процесс превращения графического макета картинки (обычно из psd-формата) в веб-страницу по определенным правилам. Другими словами – превращение картинки в специальный код (html-код), соблюдая оформление, экранное разрешение и требования браузеров.

В настоящее время можно выделить 4 способа верстки веб-страниц:

  1. Прямая верстка
  2. Фреймовая верстка
  3. Табличная верстка
  4. Блочная верстка

 

Прямая верстка

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

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

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

 

Пример:

1 – показана обычная таблица с ячейками

2 – структурный вид макета, основанного на таблице

3 – с использованием структуры 2 сделана страничка сайта (границы таблицы являются невидимыми, что позволяет использовать таблицу как фундамент страницы)  

 

Верстка html

 

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

 

Чтобы проще управлять внешним видом документа (жирность слов, подчеркивание, курсив, выравнивание) были разработаны визуальные редакторы – WYSISYG инструменты (What You See Is What You Get, «что видишь, то и получишь»). К сожалению, вместо того, чтобы упростисть ситуацию визуальные редакторы, наоборот, ее усложнили – в документе появилось огромное количество избыточного кода, который стало понять еще труднее. И web-страница стала настолько сложной в понимании, что вручную ее редактировать стало практически невозможно, чтобы не разрушить код WYSISYG. Ситуацию спасла появившаяся на свет технология css (Cascading Style Sheets – каскадные таблицы стилей), при которой все визуальное оформление(жирность и цвет шрифтов и пр.) теперь находится во внешнем файле и который подключается к html странице, т.е. структура(фундамент) страницы находится в одном html файле, а визуальное оформление в другом – css файле. С появлением css появился новый блочный способ html-верстки.

 

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

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

При табличном подходе блок текста опишется так:

Верстка html

 

При блочной верстке тот же самый блок описывается так:

Верстка html

 

Код страницы читается легко и понятно (+ использование css позволяет вынести все оформление во внешний файл, что приводит к сокращению и легкой понимаемости самого html-кода).

Программистам работать с таким кодом очень приятно.

Блочный способ может комбинироваться с табличным – таблицы снова могут применятся по своемому прямому назначению, позволяя в удобном виде отображать информацию.

Таким образом, настоящее и ближайшее будущее за блочной версткой.

 

Кроме этого, в настоящее время уже вовсю используется язык разметки HTML5, в котором предлагается использование новых тегов для обозначения блочных и инлайновых элементов. Со списком новых тегов и аттрибутов, какая предлагается разметка страницы при использовании html5 можно ознакомиться в этой статье. А как правильно выбрать тот или иной тег и не сделать ошибки рассказывается в этой статье.

 

Фреймовая верстка

Фрейм (от англ. frame — рамка) — это отдельный, законченный HTML-документ, который вместе с другими HTML-документами может быть отображён в окне браузера.

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

 

Резюме:

– Прямая верстка  – использовалась в начале начал.

– Табличная верстка – громоздкая и неудобная, но простая в реализации.

– Блочная верстка – простая по структуре кода, но нуждается в определенных правилах исполнения, требует определенных навыков и является самым современным способом верстки веб-страниц.

– Фреймовая верстка – не реккомендуемый к использованию способ.

 

proverstka.local предлагает услуги по верстке сайта. Мы умеем делать любую из вышеописанных версток, но предпочитаем работать только с блочной.

proverstka.com.ua

Особенности профессии

Функциональные обязанности HTML-верстальщика заключаются в реализации концепции и идеи сайта, разработанных веб-дизайнером, в виде HTML-кода. Процесс создания HTML-шаблона состоит из нескольких этапов:

  • анализ графического дизайна сайта
  • подборка модели шаблона
  • нарезка графических спрайтов
  • сборка HTML-шаблона

В настоящее время существует большое количество компьютерных программ, которые автоматизируют труд верстальщика, различные текстовые редакторы с подсветкой кода, визуальные редакторы (Notepad++, Adobe Dreamweaver), front-end фреймворки (наборы фрагментов кода и библиотек классов для ускоренной разработки макета сайта путем прототипирования — ZurbFoundation-4 и т.п.). Они позволяют писать большие фрагменты кода в наглядном режиме, то есть результат каждого этапа работы можно наблюдать в отдельном окне. Но профессиональный HTML-верстальщик этими программами не пользуется. Он должен уметь использовать кодировку HTML вручную, без помощи визуальных редакторов, чтобы обеспечить максимальную корректность кода в минимальном весе.

HTML-верстальщик должен знать каскадные стилевые таблицы CSS, владеть JavaScript и базовыми навыками web-программирования на языках PHP, Perl или Java, а также основными графическими редакторами Photoshop, Fireworks, Gimp. Опытный верстальщик может создать небольшой сайт, используя текстовый редактор Microsoft Word c минимальным количеством средств и инструментов.

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

При работе над крупными проектами работа HTML-верстальщика сводится к созданию только лишь макета сайта. Различные модули и элементы в него устанавливают программисты узкой специализации. Но на небольших проектах HTML-верстальщику приходится выполнять работу с кодом от начала до конца.

Плюсы и минусы профессии

Плюсы:

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

Минусы:

  • присутствует доля рутинности и однообразия
  • необходимость долговременного сидения за компьютером

Место работы

Интернет-компании, фирмы по разработке сайтов, дизайн-студии, организации со своими интернет-проектами, фрилансерская работа

Важные качества

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

Оплата труда

Оплата труда зависит от региона проживания HTML-верстальщика, специфики учреждения, в котором он работает и масштаба предприятия. Заработная плата может составлять от 40 до 70 тысяч рублей в месяц на начальном этапе. В Москве и крупных городах опытный HTML-верстальщик зарабатывает около 100 тысяч рублей в месяц.

Ступеньки карьеры и перспективы

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

Этапы верстки сайта, виды сайтов и методы вёрстки

Web-сайт представляет собой набор логически связанных html-документов. Логика, по которой эти документы связаны, называется структурой сайта или картой сайта.

Перед началом верстки графический файл дизайна детально анализируется, после чего разрезается на части, на основе которых верстается HTML-документ, который представляет собой структурированный набор HTML-тегов. Это происходит в несколько этапов:

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

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

Если сайт динамический, то необходимо произвести интеграцию HTML-шаблона с системой управления содержимым сайта. На этом этапе требуются знания архитектуры шаблона CMS и серверного языка программирования.

По макету вёрстки все сайты подразделяются на 3 группы:

  • жёстко фиксированные (Rigid fixed)
  • адаптивные резиновые (Adaptable fluid)
  • расширяемые эластичные (Expandable elastic)

Фиксированный тип макета — дизайн, в котором ширина столбца или рисунка заданы в пикселях и оговорены точно.

Резиновый тип макета — дизайн, в котором ширина столбца или рисунка задана в процентах от текущего разрешения экрана.

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

Методы вёрстки:

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

Вёрстка с помощью слоёв. Слои — это структурные элементы, которые размещаются на web-странице путем наложения их друг на друга с точностью до пикселя. Параметры слоя могут динамически изменяться скриптами, что дает возможность создавать на странице разные эффекты: выпадающее меню, игры, разворачивающиеся баннеры, плавающие окна и т.п.

Блочная вёрстка осуществляется при помощи блоков тег (<div>) и описывающих их таблиц стилей (CSS), реализуя концепцию семантичной вёрстки

По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую). К примеру, курсивный текст можно получить как с помощью тега <em>, так и с помощью тега <i> . В первом случае на текст производится логическое ударение, которое обычно отображается курсивом, а во втором — курсив задаётся явным образом. То есть, первый случай ориентирован на логическое предназначение, второй — на внешний вид (презентацию), а во втором — на логическое предназначение. Логическая разметка обладает существенным преимуществом — независимостью от используемого типа и дизайна web-страниц. В данном случае можно использовать один и тот же вариант верстки для экрана, печати и мобильных устройств, при этом регулируя внешний вид с помощью отдельных файлов стилей.

 

Автор Флюра Ягофарова

www.profguide.ru

Жесткая табличная HTML верстка сайтов

Пример жесткой HTML табличной верстки сайта:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Жесткая табличная HTML верстка сайта</title>
<style type="text/css">
.header {width:100%; height:60px; background-color:#717dc9; padding:20px; text-align:center}
.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}
.center_col {width:500px; background-color:#ffffff; padding:15px; vertical-align:top}
.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}
.footer {width:100%; padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px}
</style>

</head>
<body>
<table cellpadding="0" cellspacing="0" width="860" align="center">
<tr>
<td colspan="3" class="header">Мой сайт</td>
</tr>
<tr>
<td class="left_col">Меню</td>
<td class="center_col">Содержание</td>
<td class="right_col">Ссылки</td>
</tr>
<tr>
<td colspan="3" class="footer">&copy; Все права защищены</td>
</tr>
</table>

Результат: жесткая табличная HTML верстка

Отметим, что использована структура XHTML документа, о чем свидетельствует <!DOCTYPE> и открывающий тег <html>.

Параграф <p class="left_col"> содержит CSS атрибут class="", значение которого – селектор описывается в секции <style type="text/css"> </style>.

Дальше вспоминаем уроки по таблицам…… Указываем ширину первой и третьей ячейки среднего ряда: width:120px + padding:15px = 150px (ширина одной ячейки) — умножаем на 2, получаем 300px. Ширина среднего столбца (ячейки) = (равна) ширина таблицы (860px) — (минус) ширина левого и правого столбца (300px). Что касается высоты, то все ячейки одого ряда автоматически выравниваются по самой высокой, поэтому в стилях, в описаниях среднего ряда была указана высота только одной — крайней левой. При расчете размеров всегда нужно учитывать значения padding, margin, border. Значения этих атрибутов задаются так: padding:20px – внутреннее поле элемента по всему своему периметру равно 20-ти пикселям или так: padding:10px 0 8px 60px – верхнее внутреннее поле равно 10-ти пикселям, правое – нулю, нижнее – 8-ми пикселям и левое – 60-ти пикселям (по часовой стрелке, начиная сверху). Жесткость такой верстки заключается в том, что размеры таблицы заданы в пикселях, а не в процентах, то есть они не зависят от размера монитора или окна браузера.

Резиновая табличная HTML верстка

Пример резиновой HTML табличной верстки сайта:

<title>Резиновая HTML табличная верстка сайта</title>
<style type="text/css">
.header {height:60px; background-color:#717dc9; padding:20px; text-align:center}
.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}
.center_col {background-color:#ffffff; padding:15px; vertical-align:top}
.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}
.footer {padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td colspan="3" class="header">Мой сайт</td>
</tr>
<tr>
<td class="left_col">Меню</td>
<td class="center_col">Ширина ячейки в данном случае зависит от величины монитора или размера окна браузера.</td>
<td class="right_col">Ссылки</td>
</tr>
<tr>
<td colspan="3" class="footer">&copy; Все права защищены</td>
</tr>
</table>

Результат: HTML резиновая табличная верстка

Сравните этот код и код из предыдущего примера, и вы увидите, что было изменено значение лишь одного атрибута в теге <table>. При <table width="100%"> горизонтальный размер таблицы напрямую зависит от разрешения монитора. В нашем случае ширина первого и третьего столбцов (ячеек) среднего ряда установлена жестко, а второй столбец растягивается, обеспечивая 100% ширину таблице. Недостатком такого типа верстки сайта является непостоянная структура содержимого «резиновых» ячеек, которая изменяется в зависимости от размера окна браузера — при этом изменяется и внешний вид страницы.

Подробно взаимодействие основных инструментов сайтостроения: HTML и CSS, а также все способы верстки рассматриваются в следующем разделе самоучителя, в уроке CSS верстка.

ab-w.net


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector