Дом рационально-умный и душевный
Структура будущего блога (сайта) не будет уникальной. Все по классике жанра.
Рисунок №1. Структура сайта (блога).
Можно убедиться, спросив у гугла и посмотрев при этом картинки.
Создадим индексный файл и заполним его основными тегами.
<!DOCTYPE html>
<html>
<head>
<title>ДРУиД-Дом рационально-умный и душевный</title>
<meta name="Keywords" content="Ключевые слова страницы сайта">
<meta name="Description" content="Описание страницы сайта">
</head>
<body>
</body>
</html>
Теперь в теле документа пропишем обзац с текстом.
Если посмотреть на то, что получилось, то по умолчанию браузер выставил отступы от краев. И у всех браузеров эти отступы по умолчанию могут сильно различаться. Как с этим бороться? В РУНЕТе много расписано про Reset.css. Например, тут или здесь, еще вот там тоже есть.
Добавим в проект дефолтный файл стилей. В нем напишем примитив:
* {
padding: 0;
margin: 0;
}
Теперь посмотрим:
Так что reset.css играет огромную роль при создании кросбраузерности сайта и вообще заставляет браузер пользователя играть по нашим правилам. А вот какого должно быть содержание самого дефолтного файла стилей вопрос отнюдь не праздный. Каждый разработчик пишет его под конкретный сайт и т.д. и т.п.
Авторский дефолтный файл стилей выглядит следующим образом:
/* --------------- reset.css --------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0; /* обнуляем отступы и убираем бордюры */
vertical-align: baseline; /* приводим все к одной базовой линии */
background: transparent; /* чтобы не проскакивали левые фоны, установленные по умолчанию */
font-size: 100%; /* размер шрифта всем одинаковый */
}
a { /* ссылка не в общем списке чтобы не сбрасывать outline по умолчанию */
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
outline:none;
}
table { /* устраняем отступы между ячейками таблицы */
border-collapse: collapse;
border-spacing: 0;
}
td, td img {
vertical-align: top; /* возвращаем привычное вертикальное выравнивание */
}
input, select, button, textarea {
margin: 0; /* убираем отступы по умолчанию для элементов форм (в частности для checkbox и radio) */
font-size: 100%; /* делаем размер шрифтов везде одинаковым */
outline: none;
}
input[type="text"], input[type="password"], textarea {
padding: 0; /* убираем внутренние отступы для текстовых полей */
}
input[type="checkbox"] { /* вертикальное выравнивание чекбоксов и радиобатонов относительно меток */
vertical-align: bottom;
}
input[type="radio"] {
vertical-align: text-bottom;
}
sub {
vertical-align: sub;
font-size: smaller;
}
sup {
vertical-align: super;
font-size: smaller;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display:block;
}
nav ul {
list-style:none;
}
/* --------------- /reset.css --------------- */
Разбираться по строчно не будем. Основная мысль такова – что мы всем без «исключения» элементам присваиваем начальные общие свойства.
Также наряду с reset.css, применяется еще и базовые настройки стилей. Они направлены на то чтобы придать элементам основную стилистику шаблона сайта. Если у нас темные фоновые тона, то цвет текстов будет светлым (белым) и это можно прописать в базовых стилях, и т.п.
Базовые настройки стилей автор объединил с дефолтными в одном файле.
/* --------------- базовые настройки ---------*/
html {
min-height:100%; /* всегда показываем вертикальную полосу прокрутки */
}
body {
color: # 5c646e;
text-align: left;
font-size: 0.95em; /* используем безопасные шрифтовые CSS стеки */
min-height:100%;
font-family: sans-serif;
}
a:hover {
color: #971E27;
text-decoration:underline;
}
h1, h2, h3, h4, h5, h6{
font-weight:normal;
}
img{
max-width:100%;
}
.clr{
clear:both;
}
.clearfix:after {
clear: both;
content: "";
display: table;
}
/* --------------- /базовые настройки ---------*/
Теперь наш обзац выглядит следующим образом.
А откуда взялся такой цвет текста? А вот тут вступает в работу наш макет отрисованный в фотошопе. Открываем макет, пипеткой смотрим на цвет текста и устанавливаем его в базовых настройках.
Верстка нашего блога будет на DIVах. Табличную верстку применять не будем в виду морального устаревания такого стиля написания.
Общая структура выглядит следующим образом:
<body> <header> </header> <article> </article> <aside> </aside> <footer> </footer> </body>
Начнем верстать шаблон сверху вниз. Но это уже в следующих выпусках (статьях).
Видео данного урока представлено ниже.
Ознакомится с нововедениями и тенденциями в веб-разработке можно по следующей ссылке:"Современные тенденции и подходы в веб-разработке"
Просмотров: 1772
На прошлом уроке была произведена основная разметка сайта, рассмотрены аспекты дефолтных и базовых настроек стилей сайта. Приступим непосредственно к написанию кода шаблона сайта. HTML и CSS. Верстать будем сверху вниз, то есть начнем с блока ХИДЕР.
В цикле статей по верстке дизайна сайта на ДИВах (HTML+CSS) автор ресурса ~ДРУиД~ делился своим опытом в сайтостроении, на примере верстки шаблона собственного ресурса. Цикл получился скомканным и не информативным.
Новый цикл статей будет носить более обучающий характер с видеоотчетами и ссылками на полезные ресурсы. Этот цикл статей положит начало всему разделу «Создание сайта | блога | своими руками».
РУБРИКИ САЙТА:
С промежуточным итогом по современным системам оплаты труда ознакомились. Теперь вернемся к нашим попугаям. Для чего менять существующую систему? На что опираться при формировании новой системы? Как учесть все пожелания работодателя (читай цели, возлагаемые на работника)? Как не ущемить права работника, не потерять квалифицированного сотрудника, поднять мотивацию и увеличить производительность труда? Начнем разбираться.
САМОЕ ЧИТАМОЕ:
|
|
|