Дом рационально-умный и душевный
В прошлой статье мы установили необходимые инструменты для разработки сайта на локальной машине. Для написания кода будем пользоваться редактором 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;
Итог смотрим по ссылке.
Заключение.
В данной статье, автор заложил основы внешнего вида сайта. Блоки расположили на странице, и задали им основные свойства. В следующих статьях будем заполнять наши блоки, и придавать им приятный, удобный внешний вид.
Просмотров: 3855
В прошлой статье мы сделали необходимую основную разметку сайта блоками. Разметка сделана стандартно: header, content, menu, footer. В этой статье раскрасим станицу сайта. И Оформим шапку (header) нашего сайта.
Для написания сайта своими руками необходим инструментарий. Если разработка ведется на PHP, то таким набором в основе своей служит связка: Apache + PHP + MySQL. Такую комбинацию можно установить и настроить по отдельности, а можно использовать готовые пакеты типа Denwer или AppServ.
РУБРИКИ САЙТА:
С промежуточным итогом по современным системам оплаты труда ознакомились. Теперь вернемся к нашим попугаям. Для чего менять существующую систему? На что опираться при формировании новой системы? Как учесть все пожелания работодателя (читай цели, возлагаемые на работника)? Как не ущемить права работника, не потерять квалифицированного сотрудника, поднять мотивацию и увеличить производительность труда? Начнем разбираться.
САМОЕ ЧИТАМОЕ:
|
|
|