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

Продолжаем верстать наш Правильный и соответствующий самым строгим рекомендациям консорциума W3C сайт. Наш девиз — Идеальный XHTML и Кристально Чистый CSS! Шутка.
Сегодня мы практически соберём всю Главную страницу целиком. Останется потом только кой-чего подправить и приукрасить.
Открываем нашу страничку index.html. Находим вот это место:
……….
<li><a href=”#”>Васёк</a></li>
</ol>
</div>
<img class=”line” src=”line.gif” alt=”" />
и следом сразу вставляем вот этот кусочек:

Digg it Bookmark it Stumble it add to technorati

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

Продолжаем верстать страничку.
В блоке текста мы разместим список новых участников. Вообще за это отвечает какой-нибудь php-скрипт, но так как мы делаем простую статичную страницу, то оформим эту штуку обычным списком. Только на этот раз не маркированным, а нумерованным. Задаётся такой список тэгом ol.
Откроем в текстовом редакторе нашу страничку и сразу после вот этого места: […]

Digg it Bookmark it Stumble it add to technorati

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

Продолжаем верстать самую Правильную веб-страницу! Здесь опять будет много кода. Однако же не утрашимся! Открываем лист стилей. Мы закончили на правиле для всех ссылок страницы. Теперь нам надо красиво оформить основное содержимое страницы. Его мы обзовём атрибутом text.
Запишем далее в листе стилей CSS:
#text {
width: 545px;
font-size: .8em;
color: #333;
margin: 10px auto;
float: left;
}
#text p {
text-align: […]

Digg it Bookmark it Stumble it add to technorati

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

Итак, продолжим верстать нашу Главную страницу. В этом уроке буде мнооого кода. Что у нас уже есть? Контейнер, в котором лежит шапка. Следом за шапкой добавим блок навигации. Находим в коде следующее место:
<div id=”header”>
</div>
и сразу же за ним запишем следующее:
<div id=”nav”>
<ul>
<li>Главная</li>
<li><a href=”#”>О нас</a></li>
<li><a href=”#”>О летучести</a></li>
<li><a href=”#”>О везучести</a></li>
<li><a href=”#”>Свинки-герои</a></li>
<li><a href=”#”>Подружиццо</a></li>
</ul>
</div>

Digg it Bookmark it Stumble it add to technorati

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

Продолжаем разговор за CSS. Вообще принято некое упорядоченное расположение правил в css. Вначале указываются общие для всей страницы, а потом идут в той очерёдности, в которой элементы на странице появляются сверху вниз. Мы пока указали не все общие элементы. Нет заголовков, списка, ссылок (тэги h, ul, a). Их мы добавим позже, а пока начнём уже […]

Digg it Bookmark it Stumble it add to technorati

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

Итак, CSS или иначе Каскадный Лист Стилей. Почему каскадный объясню позднее. Открываем новый документ в PSPad (Блокноте, WordPad-е и т.п.) и вписываем следующую строку:
/*© PIG.RU, 2007 | piggs@pig.ru */
На самом деле содержимое строки не так важно. Она у нас закомментирована слэшами со звёздочками /* */ (кстати, слэш на клавиатуре находится во второй снизу строке в […]

Digg it Bookmark it Stumble it add to technorati

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

Для написания кода удобнее пользоваться редактором PSPad. Это весьма удобная программа, которой пользуются как программисты, так и верстальщики. Рекомендую. Тем более что она бесплатная и имеет русский интерфейс.
Верстать мы будем вот такой вот симпатишный сайт о Летающих Парасенгах.
Настоящий сайт Pigfly.ru - Об удаче, Счастье и Богатстве выглядит уже несколько по-иному. Мы рассмотрим лишь отвлеченный пример.

Digg it Bookmark it Stumble it add to technorati
« вернуться — продолжить »

Поиск

Рубрики

Пузомерки





Blog Catalog

DMOZ

Каталог дизайнерских блогов