Суббота, 02.11.2024, 07:39
Кодинг.Страничка начинаюшего програмиста.
Приветствую Вас Гость | RSS
Главная Регистрация Вход Карта Сайта
Меню сайта

Наш опрос
Как Вы нашли наш Сайт?
Всего ответов: 21

На развитие.
ЯндексЯндекс. ДеньгиХочу такую же кнопку
Статистика

Проверить ТИЦ


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Форма входа

Главная » 2012 » Май » 20 » Блочная верстка сайта
13:46
Блочная верстка сайта

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

Блочная верстка создается благодаря семантическим конструкциям разметки, например, <div></div>. Принято считать, что разновидностей верстки три:

  1. Табличная верстка — верстка, построенная на таблицах <table><tr><td>;
  2. Блочная верстка — верстка в конструкции <div></div>;
  3. Смешанная — использование в верстке табличных и блочный конструкций в примерно равных пропорциях.

Некоторые выделяют еще один вид — css-верстка, т.е. верстка страницы с использованием CSS.

Различают верстку и по ширине страницы:

Фиксированная верстка — означает, что сверстанная страница имеет одну заданную ширину, как правило, расположенную по центру при большем разрешении экрана.

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

Кросс-браузерность — это корректное идентичное отображение сверстанной страницы сайта в различных браузерах: Internet Explorer, FireFox, Opera, Safari, Google Chrome и другие.

HTML-верстка

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

Далее, начинаем «нарезать» макет дизайна и выносим максимальное количество слоев в спрайты.

Готовим html-каркас или берем заранее приготовленный:

HTML код: Заранее приготовленный html-каркас.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <title>Example</title>
</head>
<body>
 <div class="header">...</div>
 <div id="container">
 <div class="aside left">...</div>
 <div id="content">...</div>
 <div id="aside right">...</div>
 </div>
 <div id="footer">...</div>
</body>
</html>

Далее, там где стоит многоточие «...», верстаем необходимые элементы разметки в соответствии с дизайном. Например, шапка сайта — header у нас получится такая:

HTML код: Шапка сайта.

 <div class="header">
 <div id="logo">
 <a href="/">Example</a>
 </div>
 <ul id="nav">
 <li>
 <a href="/about/">О нас</a>
 </li>
 <li>
 <a href="/service/">Услуги</a>
 </li>
 <li>
 <a href="/contact/">Контакты</a>
 </li>
 </ul>
 </div>

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

В контенте — content, понятное дело, располагается контент, текстовый, графический, какой угодно. Начинать следует с заголовка h1, текст желательно выделять в параграфы p, и т.д. в соответствии с семантикой.

В нижней части сайта, так называемого подвала — footer, как правило, размещают копирайты, кнопки счетчиков, какие-либо ссылки на разделы.

О стилях оформления CSS поговорим чуть позже, отмечу только что их необходимо выносить в отдельный файл и размещать между тегами <head> и </head>:

HTML код: Вынос CSS в отдельный файл в спецификации xhtml.

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

Гм.. что еще?

Несколько преимуществ блочной верстки

  1. Блочная верстка имеет более логичный семантический код;
  2. Блочная верстка имеет сравнительно небольшой вес, что способствует быстрой загрузке страницы;
  3. Блочная верстка позволяет отделить структуру от представления.

Ну и все, пожалуй, вкратце по азам пробежались. На этом спешу отклониться.

Спасибо за внимание.

Просмотров: 2718 | Добавил: -=T$t=- | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск

Календарь
«  Май 2012  »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031

Архив записей

Друзья сайта
Учебник HTML
Учебник PHP


Создатель сайта:Паша Бережной © 2024 Конструктор сайтов - uCoz