Статья опубликована: 2016-04-01/10:01:12-admin

Верстка дизайна сайта на ДИВах (HTML+CSS).

В прошлой статье мы установили необходимые инструменты для разработки сайта на локальной машине. Для написания кода будем пользоваться редактором NotePad++, хотя читателя никто не отговаривает использовать для этого другой редактор или полноценную IDE.

Основная разметка страницы.

Здесь все просто и понятно. Стандарт HTML верстки никто не отменял. Файл index.html должен содержать минимальный набор тегов.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
</head>
<body>	
</body>
</html>

Это скелет любого сайта.

Начнем наполнять сайт смыслом. Так как при создании шаблона сайта без таблицы стилей не обойтись, то сразу же её и «приаттачим» к сайту. Также необходимо прописать title – надпись, которая будет отображаться в закладке браузера. Кстати, в этой же закладке есть возможность размещать графические объекты, иконки сайта. Так же укажем теги с ключевыми словами страницы сайта и кратким описанием страницы, а также укажем с какой кодировкой будем работать.

Ну и в основном теле страницы создадим наши четыре блока верхнее меню (шапка, хидер), основной блок (контент), боковое меню и нижнее меню (подвал).

Вот что получилось.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<link href="style/style.css" rel="stylesheet" type="text/css">
	<link rel="shortcut icon" href="images/index.ico"/>
	<title>Название сайта</title>
	<meta name="Keywords" content="Ключевые слова страницы сайта">
	<meta name="Description" content="Описание страницы сайта">
</head>

<body>
	<div>Шапка сайта</div>
	<div>Контент сайта</div>
	<div>Боковое меню сайта</div>
	<div>Подвал сайта</div>
</body>

</html>

Пример, как выглядит сайт на данный момент можно увидеть здесь.

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

Поработаем с основным документом.

Для этого в файле стилей начнем заполнять таблицы стилей к конкретным элементам. Зададим фон все страницы. Укажем используемые шрифты на сайте и их размеры.

body {
	background: #F7F8F9;
	font: 15px/20px Tahoma, Arial, Sans-Serif;
}

Запись font: 15px/20px означает следующее:

font-size: 15px;
line-height: 20px;

Кстати, данные аргументы говорят, что расстояние между строками в документе будет 20px-15px=5px. То есть межстрочный интервал 5 px.

Выглядеть данный документ стал уже так.

Лирическое отступление.

Далее в тексте статьи автор не будет приводить ссылки на внешний вид получившегося сайта после небольших модернизаций. Читатель сможет это все видеть у себя на локальной машине. В конце статьи будет обобщенный вид получившейся страницы.

Теперь давайте оцентруем наш первый блок – Шапка сайта. Для того чтобы обращаться к блоку из таблицы стилей проще, дадим этому блоку уникальное имя. Делается это следующим образом.

<div id="header">Шапка сайта</div>

Для центровки и для выделения из текста изменим фон и размеры блока.

#header {
	background: #ff00cc;
	max-width: 1200px;
	min-width: 1024px;
	width: 100%;	
	margin: auto;
	margin-top: 25px;
	max-height: 200px;
	min-height: 100px;
	height: 150px;
	text-align: center;
	padding: 5px;
}

Если приглядеться что получилось, то можно увидеть, что наш сайт будет занимать по ширине не меньше 1024px и не больше 1200px. Это и некоторые другие обобщенные свойства для всех наших блоков можно вынести в общий объединяющий блок. Итак обрамим наши четыре блок, одним общим ДИВом.

<body>
	<div id="page">
		<div id="header">Шапка сайта</div>
		<div>Контент сайта</div>
		<div>Боковое меню сайта</div>
		<div>Подвал сайта</div>
	</div>
</body>

Таблицу стилей немного перепишем.

#page {
	max-width: 1200px;
	min-width: 1024px;
	width: 100%;	
	margin: auto;
	margin-top: 25px;
}

#header {
	background: #ff00cc;
	max-height: 200px;
	min-height: 100px;
	height: 150px;
	text-align: center;
	padding: 5px;
}

Теперь видно, что все блоки заняли свои места по указанной нами ширине.

С шапкой пока закончим.

Перейдем к контенту и боковому меню.

Зададим им размеры по ширине: 70% контенту и оставшиеся 30% меню.

Раскрасим в разные цвета, чтоб пока визуально видеть.

#content {
	width: 68.5%;
	margin-right: 1.5%;
	background: #00ffcc;
}

#menu {
	width: 28.5%;
	margin-left: 1.5%;
	background: #aa00cc;
}

Свойствами margin-left и margin-right сделаем небольшие пустые области между блоками.

Осталось только блок меню расположить на той же строке что и контент. Для этого укажем обтекание текста блоку меню справа.

#menu {
	width: 28.5%;
	margin-left: 1.5%;
	background: #aa00cc;
	float: right;
}

И поменяем местами блоки в документе.

<div id="menu">Боковое меню сайта</div>
<div id="content">Контент сайта</div>

Получилось следующее.

Теперь бы сделать отступ от шапки сайта. Это можно сделать как свойствами блоков меню и контенкта, так и просто вставив пустой блок между шапкой сайта и остальными блоками и указать ему высоту, например в 20px.

<div id="header">Шапка сайта</div>
<div style="height: 20px;"></div>
<div id="menu">Боковое меню сайта</div>

Итог:

Ну и напоследок, подвал тоже отцентруем, укажем необходимую высоту, и тоже отодвинем немного от блоков контент и меню.

#fotter {
	background: #888888;
	width: 100%;
	height: 150px;
	text-align: center;
}

<div id="content">Контент сайта</div>
<div style="height: 20px;"></div>
<div id="fotter">Подвал сайта</div>

В итоге:

Теперь добавим немного текста в блок контент и посмотрим что получиться. И не забудем в каждый блок добавить отступ в 5 px. Свойство padding: 5px;

Итог смотрим по ссылке.

Заключение.

В данной статье, автор заложил основы внешнего вида сайта. Блоки расположили на странице, и задали им основные свойства. В следующих статьях будем заполнять наши блоки, и придавать им приятный, удобный внешний вид.

Просмотров: 2797

Комментарии: (0)

Оставить комментарий

Часть I. Статья №6. Верстка подвала – блока футтер

На прошлом уроке мы сверстали основной блок контент. Оформили статьи, которые отображаются на главной странице. Оформили их стилями, не входящими в макет сайта, но вписывающимися в общий дизайн сайта. На сегодняшнем уроке мы оформим подвал сайта. В данный блок войдут ссылки на стандартные страницы любого сайта, а также копирайт.

Самое читаемое:

STM32. Уроки по программированию STM32F4. Урок № 0. Вводный. Описание. Установка IDE.

STM32. Уроки по программированию STM32F4. Урок № 5. Работа с АЦП+DMA + фильтр скользящее среднее.

STM32. Уроки по программированию STM32F4. Урок № 1. Система тактирования STM32F4.

STM32. Уроки по программированию STM32F4. Урок № 6. Работа с таймерами TIM7 и TIM1.

STM32. Уроки по программированию STM32F4. Урок № 4. Программный многозадачный таймер STM32F4.

Статья опубликована: 2016-04-01/10:01:12-admin

Верстка дизайна сайта на ДИВах (HTML+CSS).

Да, Я Хочу Всегда Быть В Курсе Новых Событий На Сайте!

Рекомендованные статьи:

Часть I. Статья №6. Верстка подвала – блока футтер