Рейтинг@Mail.ru
Верстка дизайна сайта на ДИВах (HTML+CSS) - ДРУиД: Дизайн сайта своими руками.
Войти
или
Зарегистрироваться
Главная Файлы Видеоматериалы Форум
Карта сайта
Главная -> РУБРИКИ: -> Создание сайта | блога | своими руками -> Верстка дизайна сайта на ДИВах (HTML+CSS).

Статья опубликована: 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)

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

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

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности


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



В прошлой статье мы сделали необходимую основную разметку сайта блоками. Разметка сделана стандартно: header, content, menu, footer. В этой статье раскрасим станицу сайта. И Оформим шапку (header) нашего сайта.


Для написания сайта своими руками необходим инструментарий. Если разработка ведется на PHP, то таким набором в основе своей служит связка: Apache + PHP + MySQL. Такую комбинацию можно установить и настроить по отдельности, а можно использовать готовые пакеты типа Denwer или AppServ.


РУБРИКИ:








Последняя статья:

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

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

Читать далее »


Справка Обратная связь Вопросы и ответы Контакты RSS-лента © 2013-2016, ДРУиД - Дом Рационально-Умный и Душевный
Рейтинг@Mail.ru Яндекс.Метрика