Урок 1. Делаем сайт на div-ахДля тех, кто уже знает что такое дивный дизайн начинаем 1-й урок по созданию сайта в формате div. Поскольку дивный дизайн состоит не из таблиц, как табличный дизайн, а из слоёв (блоков), то и конструкция всего нашего будущего сайта будет состоять из слоёв: <div></div> Тег <div> является парным, поэтому каждый блок должен закрываться, например: <div>Первый блок</div> Хорошо, с этим понятно, теперь сделаем HTML-страничку, а кто ещё не умеет этого делать прошу начать изучать азы создания сайтов. Создайте файл index.html и напечатайте там следующий код: <html>
Это стандартный код хтмл-страницы? в который мы вставили первый слой, он выделен
красным цветом.
<head> <title>Дивный дизайн</title> <meta http-equiv="Content-Type" content="text/html; charset="windows-1251"> </head> <body> <div>Первый блок</div> </body> </html> Откройте страничку в браузере.
По-умолчанию созданный нами слой прозрачный, поэтому мы видим только слова, которые вписали внутри слоя. Теперь создадим ещё два слоя.
<html>
Теперь посмотрим что получилось:<head> <title>Дивный дизайн</title> <meta http-equiv="Content-Type" content="text/html; charset="windows-1251"> </head> <body> <div>Первый блок</div> <div>Второй блок</div> <div>Третий блок</div> </body> </html>
Результат не впечатляющий и нам хочется чтобы эти блоки располагались по-другому, вот тут и наступает момент для таблицы стилей, о которой мы говорили в предыдущей статье о дивном дизайне. Переходим к следующему уроку - Создание таблицы стилей и привязка к страницам сайта Уроки по CSS (дивный дизайн) Урок 1. Делаем сайт на div-ах
|
