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