Изучение МК STM32
Материалы по сайтостроению
Изготовление девайсов для быта и не только
Дом рационально-умный и душевный
В цикле создания сайта | блога своими руками, автор будет описывать создания данного ресурса ~ДРУиД~. Так что за образец по дизайну и оформлению автор будет использовать собственный ресурс (http://druid.su).
В прошлой статье мы рассмотрели инструментарий для разработки сайтов своими руками.В данной статье начнем верстать шаблон нашего сайта. И так приступим...
Фон сайта.
Начнем с фона сайта. Скачаем картинку по данной ссылке. Теперь замостим наш фон на странице. Это сделаем в файле стилей, применим к элементу body. То есть в файле style.css изменим следующие строчки:
body { background: #F7F8F9 url(../images/img01.jpg) repeat; font: 15px/20px Tahoma, Arial, Sans-Serif; }
Вот что получилось.
Так же шапке сайта зададим фоновый рисунок.
Качаем следующий рисунок по данной ссылке. Добавляем в свойство блока header нашу картинку.
#header { background: #ff00cc url(../images/img02.jpg) repeat; max-height: 200px; min-height: 100px; height: 150px; text-align: center; padding: 5px; }
Общий фон сделали, теперь уберем различные цвета у остальных блоков сайта. Контент и меню сделаем на белом фоне, а подвал сайта вообще будет без фона, то есть использоваться будет фоновый рисунок всей странице.
Итого таблица стилей станет вот такой.
#content { width: 68.5%; margin-right: 1.5%; background: #FFF; padding: 5px; } #menu { width: 28.5%; margin-left: 1.5%; background: #FFF; float: right; padding: 5px; } #fotter { width: 100%; height: 150px; text-align: center; padding: 5px; }
Результат на данный момент:
Теперь давайте немного скруглим наши прямоугольные области контента и бокового меню. Используем свойство border-radius. По пикселей 8 хватит. Добавим это свойство в таблицу стилей блоку контент и меню.
border-radius: 8px;
В итоге внешний вид:
Оформляем шапку сайта.
Начнем с логотипа сайта. У читателя может быть собственный логотип. Автор будет использовать логотип ресурса ~ДРУиД~. Скачать данный логотип можно здесь. Размеры картинки: 200х113 px.
В коде страницы, в блоке header, добавим блок logo.
Теперь пропишем стили данному блоку, чтоб картинка была в левом углу шапки, и последующий текст её обтекал справа.
#logo{ text-align: left; float: left; width: 21%; margin: 17px 15px 17px 15px; }
Вот что вышло:
Справа от логотипа, укажем основные ссылки сайта: Главная, Видеоматериалы, Файлы, Форум.
Данные ссылки сделаем в виде списка в отдельном блоке.
Ширину блока установим в 75%, и сделаем отступ слева в 25%.
#head_menu{ width: 75%; margin-left: 25%; }
Исходный код HTML:
Итог:
Теперь немного поколдуем со стилями, для более «благородного вида».
Уберем «точки» у списка:
list-style-type: none;
Все ссылки расставим в одну строчку, установим отступы, чтоб текст ссылок не сливался, шрифт ссылок изменим на Verdina, увеличим шрифт до 170%, цвет ссылки сделаем белым, а также уберем подчеркивание ссылок, при наведении курсора мышки на ссылку будем окрашивать её в чёрный цвет, и добавлять подчеркивание. Вот такая таблица стилей получилась.
#head_menu ul { list-style-type: none; } #head_menu ul li { float: right; margin: 5px 5px 5px 10px; font-family: Verdina; font-weight: bold; font-size: 170%; } #head_menu ul li a { color: #FFF; text-decoration:none; } #head_menu ul li a:hover { color: #000; text-decoration:underline; }
Итог:
Добавим блок с id=”search”. В данном блоке расположим форму, в форме два поля с типом текст и submit. Вот так изменился код страницы:
А вот таблица стилей для данной формы.
#search { margin: 25px 5px 5px 5px; }
Вот внешний вид:
Ну и напоследок создадим ссылку ниже формы поиска на карту сайта.
Таблица стилей для данного блока:
#site_map { margin: 15px 5px 5px 10px; font-family: Verdina; font-weight: bold; font-size: 170%; } #site_map a { color: #FFF; text-decoration:none; } #site_map a:hover { color: #000; text-decoration:underline; }
Вот что из этого вышло:
Если присмотреться, то в середине нашей шапки сайта, пустая область, в которую в принципе просится слоган ресурса или основное краткое описание сайта.
Давайте организуем.
Вот такой код получился.
ДРУиД - Дом Рационально Умный и Душевный. Строительство частного "Умного" дома своими руками. Изучение МК STM32. Материалы по сайтостроению.
Таблица стилей для данного блока:
#slogan { width:25%; float: left; padding-top: 15px; }
Итог:
Теперь для визуального эффекта, когда бумажное объявление наклеено на доску объявлений, и нижний край у объявления немного приподняты от доски. Для такого эффекта понадобится свойство box-shadow.
Вот код таблицы стилей для блока header.
box-shadow: 0 5px 5px rgba(0,0,0,0.5);
Визуальный эффект можно посмотреть по следующей ссылке.
Заключение.
Дизайн сайта уже приобретает необходимый вид. Шапка сайта оформлена. В следующий раз автор рассмотрит блоки контента и бокового меню.
Просмотров: 4544
В прошлой статье мы оформили шапку (header) сайта, а также установили общий вид всей страницы целиком. В этой статье оформим основной блок - контент, а также боковое меню.
В этой статье автор рассмотрит вопрос о верстки шаблона сайта. Использовать будем HTML и CSS. Верстать шаблон сайта будем по блочной технологии (на тегах div). Шаблон будет стандартный: верхнее меню (шапка, хидер), основной блок (контент), боковое меню и нижнее меню (подвал).
РУБРИКИ САЙТА:
Здравствуйте друзья!
Приветствую Вас на моем канале, посвященному разработке прикладного программного обеспечению для программируемых логических контроллеров и панелей оператора.
В прошлом обзоре мы создали проект в ТИА портал версии 15.1, а также рассмотрели документацию на основе которой будет вестись разработка прикладного программного обеспечения для контроллера.