Блочная верстка сайта с использованием HTML и CSS

  1. Создание сайта на Adobe Dreamweaver
  2. Первая веб страница
  3. Форматирование текста в HTML
  4. Создание списков
  5. Гиперссылки
  6. Создание таблиц в блокноте
  7. Цвета в HTML
  8. Как создать форму в HTML?
  9. Табличная верстка сайта
  10. Теги в HEAD
  11. Изображения в html
  12. CSS
  13. Работа с текстом и изображениями в CSS
  14. Блочная структура сайта

В этом уроке мы научимся верстать сайты на основе блоков (div). Для начала создайте 2 файла: site2.html и style1.css. Наша страница будет иметь такую структуру:

Структура блоков сайта

Структура нашего сайта будет состоять из таких блоков:

  • div id=”wrap”
  • div id=”head”
  • div id=”logo
  • div id=”menu”
  • div id=”content”
  • div id=”footer”
  • div id=”img”

Все блоки будут размещаться в одном общем блоке – “wrap”. Сделаем так, чтобы фон был бордовым, а текст черным на белом фоне. Для этого мы весь контент заключим в блок “bd”. В файле site2.html внесите код:

<html>
<head>
<title>Сайт2</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="bd">
<div id="header">
<div id="logo">
</div>
</div>
<div id="content">
<div id="image">
</div>
</div>
<div id="menu">
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>

Наполним сайт контентом. В блок logo напишем :

<div id="logo">
<h2>Учебный сайт</h2>
</div>

В блоке menu создадим список:

<div id="menu">
<h3>Меню</h3>
<ul>
<li><a href="index.html">Главная страница</a></li>
<li><a href="second_page.html">Вторая страница</a></li>
<li><a href="third_page.html">Третья страница   </a></li>
</ul>
</div>

В блок content  вставим текст и изображение:

<div id="content">
<div id="image">
<img src="images/img1.png">
</div>
<h2>Введение</h2>
<p>1 глава</p>
</div>

В блок footer внесем надпись:

<div id="footer">
<h3>Этот сайт я сделал сам</h3>
</div>

В файле style1.css напишем свойства блоков:

body {
background: #601721;
}
wrap {
width:100%;
margin:0 auto;
}
#bd {
background:#FFFFFF;
width: 70%;
height: 100%px;
margin-left: 200px;
}
#header {
width: 100%;
height: 100px;
}
#logo {
position: relative;
width: 156px;
height: 35px;
left: 45%;
top: 45px;
}
#menu{
margin-right:750px;
width:29%;
}
#image{
float:left;
margin-top: 70px;
margin-left: 20px;
padding-right:10px;
}
#content {
float:right;
width:70%;
border-top: 0px;
margin-right: 10px;
}
#footer {
clear:both;
position: relative;
width:100%;
height: 40px;
}

Эти блоки имеют следующие свойства:

body — мы задали сайту бордовый фон.

wrap— максимальная ширина, невидимые границы

bd— цвет фона белый ( в этом блоке размещен текст, поэтому мы задали белый фон), ширина 70%, высота максимальная, сдвинут вправо на 200 пикс.

header— ширина максимальная, высота 100 пикс.

logo – ширина 156 пикс. высота 35 пикс сдвинут относительно блока header  на 45% вправо ( т.е. расположен по центру), вниз на 45 пикс.

menu —  с помощью margin-right блок прижат к правому краю, ширина 29%

content — задано обтекание слева, ширина блока 70%

image — обтекание текстом справа, отступ от границы блока content сверху 70 пикс. слева 20 пикс.

footer— с помощью команды clear мы отменяем обтекание этого блока с двух сторон,  поэтому у нас блок размещается внизу от блоков menu и  content. Ширина 100% высота 40 пикс.

В результате мы получим такую страницу:

Пример сайта

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

h1,h2,h3,h4,p { font-family: "Times New Roman", Times, serif;  }
h1,h2,h3,h4 { text-align:center; font-weight:bold }
p {text-align:justify; font-size:120%; }

Страничка стала красивее смотреться.

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

Для этого в файле style1.css введем такие данные:

в блоки content и image добавим запись:

padding-right: 10px;

Этой командой мы создаем отступы от линии блока.

В блок header добавим запись:

border-bottom:  thin solid;

эта запись добавляет линию внизу блока.

В блок footer:

border-top: thin solid;

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

Сохраните и посмотрите в браузере что получилось.

Готовый сайт

Работа с Dreamweaver.

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

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

При открытии файла css если мы щелкнем по вкладке CSS (цифра 1) откроется меню редактирования параметров css. Например, щелкните один раз левой кнопкой мыши по селектору #head (цифра 2). В поле кода высветится описание этого селектора (цифра 2), а внизу справа основные атрибуты, которые можно редактировать (цифра 4). Если же мы щелкнем 2 раза по селектору (цифра 2) то откроется такое окно:

окно редактирования атрибутов

В этом окне также можно отредактировать основные атрибуты селектора css.

В этом уроке мы научились верстать страницу на основе блоков, а также познакомились со средствами редактирования css в Dreamweaver.

А для того чтобы отредактировать HTML код онлайн, воспользуйтесь инструментом editorhtmlonline.com.

 

Оставить ответ

Ваш email не будет показан.