Новости
25.10.2017
Показатель отказов: от чего он зависит?
Показатель отказов – важный параметр работы сайта. Он показывает, насколько ресурс интересен и полезен для пользователей. Соответственно, чем ниже процент отказов, тем вы...
18.10.2017
Копия сайта и необходимость ее создания
Несмотря на то, что сайт – это не вещь, его тоже можно потерять. Серьезные проблемы с интернет-порталом могут быть результатом:Посягательств со стороны злоумышленников. П...
10.10.2017
Грамматические ошибки на сайте: накажут ли за них поисковики?
Стоит ли опасаться гнева поисковика, если на страницах сайта присутствуют грамматические ошибки? Этот вопрос волнует всех, кто уже давно распоряжается собственным виртуал...
Мировые новости
07.01.2016
Виды верстки и особенности их применения
Что такое верстка ?
(представьте что у вас есть куча картинок и текста,
а также банеры, реклама, менюшка и.т.п., вот чтобы
всю эту груду материала превратить в сайт, вам нужно
сверстать его, а именно расставить всё по своим местам)
Кто такой верстальщик ?
(это человек, который занимается версткой, то есть собирает
из кучи разнообразного материала уже готовый, рабочий сайт)
Какая бывает верстка ?
Блочная верстка
На данный момент самая востребованная верстка, которая создаётся
с помощью слоёв, а именно блоков <div>, то есть вы создаёте какое
то количество блоков, которые как слои накладываются друг на друга,
кто пользуется фотошопом думаем хорошо понимает что такое слои
вы можете в любой момент удалить или перенести любой требуемый
вам блок, ниже смотрите пример блочной верстки сайта:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Название</title>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="sidebarL">
</div>
<div id="sidebarR">
</div>
<div id="content">
</div>
<div id="footer">
</div>
<div>
</body>
</html>
То есть мы берём общий блок, помещаем внутрь него несколько других
блоков, так же мы можем в любой из блоков, поместить другие блоки и
в любой момент возможно скрыть или удалить любой нужный нам блок.
Каждый блок имеет свой личный идентификатор id="текст", к которому
мы привязываем различные правила в css стилях для их общего вида.
Чтобы расставить блоки по своим местам, мы приписываем нужному
блоку свойство float в css стилях, например float:left; блок слева и.т.п.
Табличная верстка
Создаётся с помощью обычной таблицы, таблица делится на колонки,
а колонки на ячейки, в каждой ячейке можно расположить то, что вам
требуется шапка, меню, контент, подвал и всё что должно быть по
задумке на сайте. Получается эдакая сетка, внутри которой уже
расположены разнообразные элементы, каждый в своей клеточке.
Рассмотрим ниже пример табличной верстки сайта:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Название</title>
</head>
<body>
<table width="100%" cellpadding="5" cellspacing="0">
<tr>
<td height="30" colspan="3" bgcolor="#F0FC0A">
Заголовок сайта
</td>
</tr>
<tr>
<td bgcolor="#990033" valign="top">
Левая колонка
</td>
<td bgcolor="#999966" valign="top">
Контент
</td>
<td bgcolor="#09EDD6" valign="top">
Правая колонка
</td>
</tr>
<tr>
<td height="30" colspan="3" bgcolor="#cccccc">
Подвал страницы
</td>
</tr>
<table>
</body>
</html>
У нас есть общая оболочка <table>, уже внутри неё распологаются
колонки <tr>, а внутри колонок находятся ячейки <td> именно в этих
ячейках будут распологаться все нужные вам на вашем сайте элементы,
оболочке, колонкам и ячейкам так же как и в блочной верстке мы можем
назначить идентификаторы id="текст", которым зададим стили в css.
Преимущества и недостатки
Теперь мы знаем какая верстка что из себя представляет, но выбрать
надо одну, поэтому разберём достоинства и недостатки каждой верстки.
Блочная верстка:
+ компактный код, небольшой вес страниц
+ отличная индексация поисковиками
+ слои можно накладывать друг на друга
+ быстрая загрузка страниц
- сама по себе верстка сложная
- трудно обеспечить одинаковый вид во всех браузерах
- при уменьшении разрешения экрана/браузера блоки съезжают
друг на друга (нужна настройка в стилях под разрешения экрана)
Табличная верстка:
+ сама по себе верстка простая
+ легко обеспечить одинаковый вид во всех браузерах
+ резиновая верстка, при изменении разрешения экрана,
таблица формируется автоматически, растягивая и сжимая ячейки.
- много лишнего кода, большой вес страниц
- не каждый дизайн возможно создать
- медленная загрузка страниц
Кратко выводы:
- блочная верстка намного лучше чем табличная, но только в том
случае, если вы добьётесь кроссбраузерности и хорошего
отображения сайта при разных разрешениях экрана
- если вы недостаточно опытны, используйте табличную верстку
Кроме того существуют такие понятия как...
Фиксированная верстка
Это верстка, в которой мы задаём каждому элементу фиксированный
размер, например мы прописываем что ширина сайта будет 1000 px
это значит, что если у посетителя нашего сайта экран монитора равен
500 px то наш сайт не поместиться у него полностью на экране и при
просмотре сайта на таком экране появится полоса прокрутки, или если
у посетителя экран монитора равен 2000 px то наш сайт он увидит
полностью но не на весь экран, а шириной в 1000 px, которую мы
установили и не более, такой размер можно дать любым элементам
вашего сайта, как всем так и отдельным.
Например сайт, на котором вы сейчас находитесь имеет фиксированную
ширину 800 px, ширина нашего рабочего монитора 1368 px, если мы
уменьшим окно браузера вдвое, то появляется полоса прокрутки, а если
открыть наш сайт на большом мониторе к примеру в 2000 px, то сайт
останется неизменной ширины, хотя вы всегда можете увеличить
масштаб окна вашего браузера и смотреть сайт во всё его окно.
Резиновая верстка
Это верстка, при которой сайт растягивается на ширину равную вашему
разрешению экрана монитора, то есть если у вас монитор равен 500 px
то сайт будет шириной 500 px, а если ваш монитор равен 2000 px то и
сайт растянется и станет 2000 px, то есть ширина сайта полностью
зависит от разрешения вашего монитора или окна браузера и может
как растягиваться так и сжиматься до нужного размера.
Происходит это за счёт табличной верстки, другой верстки с указанием
размеров в процентах width:80%;, фиксированой и резиновой верстки
одновременно, например сайдбар фиксировано 200 px, а контент auto.
Семантическая верстка
Верстка, где тэги используются в соответствии со структурой документа,
то есть валидная верстка, которая соответствует рекомендациям W3C.
Проще говоря, вы должны соблюдать правила оформления документа,
а именно правила для того документа, который вы редактируете.
Как это происходит, если вы редактируете страницу HTML то ищем
спецефикацию HTML и оформляем всё на странице по её правилам.
Например:
- заголовки оформляют с помощью тэгов от <h1> до <h6>
- абзац <p>
- список <ul> - ненумерованный, <ol> - нумерованный
- <strong> - полужирным, <em> - курсивом
- верстка блочная
- в таблицах размещаем только табличные данные
- идентефикаторы, классы и.т.п. должны иметь понятные имена
например ссылка = link, шапка = header, список = list
и многое другое...
Валидная верстка
Это соблюдение стандартов опять же W3C, сайты, которые созданы
при помощи валидной верстки практически во всех браузерах выглядят
одинаково, что говорит о их кроссбраузерности и даёт высокую оценку.
Как узнать является ли ваш сайт, страница валидными?
Очень просто идём СЮДА и проверяем, вводим адрес нужного сайта,
страницы и жмём chek и смотрим результаты, если валидатор найдёт
ошибки или предупреждения значит ваш сайт, страница не валидны.
Кроссбраузерная верстка
Это значит сайт выглядит и работает одинаково в популярных браузерах.
У каждого браузера есть свои понятия о том, как должна выглядить
страница с определёнными тэгами, или некоторые тэги вообще не
воспринимаются, наша задача сделать сайт всебраузерным, а значит
использовать haki или отдельные css стили для каждого браузера.
На данный момент популярными считаются браузеры:
Firefox, Opera, Chrome, Safari, IE
Главные наши враги, это старые версии браузера IE5, IE6, которые
не хотят нормально показывать сайты, уродуют их и отключают скрипты,
из за чего зайдя на сайт можно увидеть его перекошенным, кривым,
со съехавшими блоками и ссылками, без баннеров или с неработающим
меню, авторизацией или комментариями (зависит от технологии).