РЕКЛАМА
Этот урок не случаен! Я когда только начинал изучать css меня очень интересовал вопрос “как выровнять слой по центру?” чтобы на широких мониторах мой сайт лежал не слева, а по центру. У меня тогда так ничего и не получилось и приходилось использовать таблицу, а в ней уже дизайнить div-ами. Таблица это хорошо, но без нее лучше, поэтому сейчас не буду вам парить мозг, а приведу сразу код для выравнивания div по центру.
Для начала в файле html-страницы должен быть сам слой div
<div id=”page”>слой по центру</div>
а теперь в таблице стилей пишем следующее:
body {text-align:center; background:#d5d6d7; }
#page {margin:auto; width:800px; background-color:#fff; }
Естественно, что в коде страницы должен присутствовать тег <body>
Для “чайников” объясняю значения параметров:
- для тега body
text-align:center - выравнивание текста на странице по центру
background:#d5d6d7 - цвет фона
- для идентификатора page
margin:auto - автоматическое определение всех полей отступа от краев слоя
width:800px - ширина слоя
background-color:#fff - цвет слоя
Вот такими нехитрыми строками можно выровнять весь свой сайт по центру страницы и продолжать дизайнить внутри слоя, а не таблицы как раньше.
НОВОСТИ
Создавая сайты бывает нужно задать фоновое изображение в виде картинки в какой-то определенной части экрана. Решить такую задачу можно использовав несколько параметров css.
Поскольку нужно задать изображение для фона, то будем использовать тег body
- нужно задать путь к изображению для бэкграунда
- говорим браузеру что повторять изображение не нужно
- зафиксируем картинку, чтобы она была жестко прикреплена к экрану
- зададим местоположение фона по оси x и y
В конечном варианте код для таблицы стилей должен выглядеть так:
body {
background-image:url(images/bg.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: 150px 150px;
}
Как сделать сайт с оптимизированным дизайном - дивным дизайном!
Почему дивный? В хтмл есть такой тег, поэтому и дизайн стали называть дивным 
DIV-ный дизайн отличается от табличного тем, что в данном случае используются слои (блоки), которые располагаются на странице в определенном порядке. Порядок, положение и размеры слоев задает отдельный файл .css
На первый взгляд невидно отличия от табличного дизайна. В данном случае мы имеем три слоя, между которыми пустое пространство. В табличном дизайне нам пришлось бы делать дополнительные ячейки, чтобы разделить шапку, меню и контент:
На рисунке ниже видно, что использовано 4 блока:
1 - основной, вмещает в себе три остальных
2 - шапка сайта
3 - меню
4 - контент
По сравнению с рисунком выше видно, что блоки независимы в размерах друг от друга, их размеры и положение можно изменять независимо от других блоков (слоев), чего не скажешь о таблице, где каждая ячейка зависит от рядом стоящей.
Дивный дизайн имеет ряд преимуществ в отличие от табличного:
- дизайн всего сайта можно менять в одном файле .css (размеры, положение, цвета и др.)
- код страницы:
а) не содержит лишних тегов, что облегчает вес файла страницы (кб)
б) легко находить нужные фрагменты страницы
в) способствует лучшему индексированию поисковыми системами
Посмотрим на хтмл-код страницы с табличным дизайном:
<table border=0 cellpadding=0 cellspacing=0 width=500 height=295>
<tr>
<td height=75 valign=top colspan=3 bgcolor=#FDE2CC>Шапка сайта</td>
</tr>
<tr>
<td height=19 colspan=3></td>
</tr>
<tr>
<td width=140 valign=top bgcolor=#EEB6B6>Меню</td>
<td width=25></td>
<td valign=”top” bgcolor=#B9BBF1>Контент</td>
</tr>
</table>
А теперь посмотрим хтмл-код с дивным дизайном:
<link rel=stylesheet href=style.css type=text/css>
<div id=page>
<div id=logo>Шапка сайта</div>
<div id=menu>Меню</div>
<div id=content>Контент</div>
</div>
Как видите хтмл-код с дивным дизайном намного проще, а результат ощутим! Но, обратите внимание, что в коде дивного дизайна присутствует строчка:
<link rel=stylesheet href=style.css type=text/css>
Эта строка говорит о том, что все стили для этой страницы хранятся в файле style.css (таблица стилей). То есть, если в табличном дизайне для таблицы высота и ширина задаются так:
<table width=500 height=295>
то в дивном дизайне они задаются в файле style.css, в таблице стилей. Для кода дивного дизайна приведенного выше файл style.css содержит следующие строки:
/* таблица стилей */
/* задаем размер страницы */
#page { width:500px; height:100% auto; margin: 10px; }
/* задаем размещение блоков */
#logo { float:left; width:500px; height:50px; background:#FDE2CC }
#menu { float:left; width:150px; height:170px; background:#EEB6B6; margin-top: 10px }
#content { float:right; width:340px; height:200px; background:#B9BBF1; margin-top: 10px }
или если без сточек с пояснениями, то так:
#page { width:500px; height:100% auto; margin: 10px; }
#logo { float:left; width:500px; height:50px; background:#FDE2CC }
#menu { float:left; width:150px; height:170px; background:#EEB6B6; margin-top: 10px }
#content { float:right; width:340px; height:200px; background:#B9BBF1; margin-top: 10px }
Разберем что значит первая строка:
#page { width:500px; height:100% auto; margin: 10px; }
#page - идентификатор слоя (блока)
{ } - в скобках указывают все параметры для данного слоя
width:500px - задание ширины слоя
; - точка с запятой разделяют параметры
height:100% auto - задание высоты слоя
margin: 10px - задание отступов со всех сторон
в других строках таблицы стилей использованы:
float:left - выравнивание слоя по левому краю
background:#FDE2CC - задание цвета для фона слоя
margin-top: 10px - отступ сверху 10 пикселей
Таким образом в дивном дизайне все параметры отображения слоев, текста, изображений, цвет гиперссылок, размеры заглавных букв и других объектов можно задать в одном файле. Если у вас сайт состоит из 100… страниц, и вам вдруг срочно нужно меню сделать на пару пикселей больше, то вы без проблем сделаете это, изменив всего один файл style.css. Для табличного дизайна в таком случае придется изменить все ваши 100… страниц, на это уйдет минимум 100… минут 
Как видите DIV-ный дизайн имеет ряд преимуществ, именно поэтому сегодня большинство сайтов строятся именно в таком формате.
Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS
Сборник параметров по CSS предназначен скорее для начинающих и содержит основные параметры для форматирования html-страниц с помощью таблиц стилей.
Сборник в разработке…
CSS - справочник
Что такое дивный дизайн
Уроки CSS для новичков
Видеоуроки
В WordPress для “одушевления” темы используется файл style.css в нем указаны параметры темы и его создателя. Например, если запустить тему в том виде в каком она сейчас есть то получим вот такую картину:
Как видите тема не подписана, нет автора и не написано в какой папке хранятся ее файлы. Эта задача легко решаема, откройте файл style.css и сделайте следующую запись:
@charset “utf-8″;
Это задание кодировки для таблицы стилей.
Теперь напишем название темы и ее url:
@charset “utf-8″;
/*
Theme Name: Free_subject
Theme URL: https://computerlessons.ru
*/
Добавляем описание темы или любой текст который захотите:
@charset “utf-8″;
/*
Theme Name: Free_subject
Theme URL: https://computerlessons.ru
Description: Русская тема Free_subject от создателя <a href=/>ComputerLessons.ru</a> Другие темы для WordPress на сайте <a href=http://on-line-design.ru>On-Line-Design.ru</a>
*/
Осталось прописать автора темы и веб-адрес:
@charset “utf-8″;
/*
Theme Name: Free_subject
Theme URL: https://computerlessons.ru
Description: Русская тема Free_subject от создателя <a href=/>ComputerLessons.ru</a> Другие темы для WordPress на сайте <a href=http://on-line-design.ru>On-Line-Design.ru</a>
Author: ComputerLessons.ru
Author URI: https://computerlessons.ru
*/
Итог работы:
В следующем уроке создадим скриншот для нашей самописной темы.
Как создать тему для WordPress
Урок 1. Создаем тему для WordPress
Урок 2. Создаем файл index.php
Урок 3. Тег head для блога
Урок 4. Редактирование таблицы стилей
Урок 5. Скриншот для темы WordPress
Урок 6. Тестируем самодельную тему
Урок 7. Функции файла index.php
Урок 8. Функции файла comments.php
На прошлом уроке мы разбирали как закруглить углы в таблице с помощью маленьких изображений, этот способ является самым простым, но в некоторых случаях может оказаться так, что человек зашедший на ваш сайт отключил в браузере загрузку картинок и тогда ваша таблица с закругленными углами будет выглядеть просто ужасно. Для решения такой проблемы можно обойтись вовсе без графики, будем использовать блоки толщиной 1пиксель.
За пример возьмем теперь не таблицу, а слой, хотя и с таблицей можно сделать тоже самое.
Для ясности посмотрите на увеличенный угол слоя:
На самом деле мы будем использовать два слоя (окрашены в серый и черный цвета) и 7 блоков (цветные).
Для начала создайте слой в который вложите еще один в нем будет текст
<div id=”radius”>
<div id=”text”>
Закругляем углы на сайте computerlessons.ru
</div>
</div>
Создайте таблицу стилей и задайте для слоев следующие параметры:
#radius { width: 350px; }
#text { padding:5px; background-color: #ccc; }
Теперь над слоем text будем создавать шапку из блоков толщиной в 1 пиксель. Всего будет 7 блоков, можно использовать любое количество это зависит от радиуса закругления. Для создания блока можно использовать тег <div> или любой другой, но как правило используют устаревший тег <b>. Создадим первый блок:
<div id=”radius”>
<b class=”r1″></b>
<div id=”text”>
Закругляем углы на сайте computerlessons.ru
</div>
</div>
В таблицу стилей пропишите параметры для нового блока:
#radius { width: 350px; }
#text { padding:5px; background-color: #ccc; }
#radius b { background-color: #ccc; display: block; height: 1px; overflow: hidden; font-size:1px; }
.r1 { margin: 0 10px; }
Для блока мы задали отступы по 10 пикселей слева и справа, для следующих блоков эти параметры будут уменьшаться, закругляя таким образом угол:
#radius { width: 350px; }
#text { padding:5px; background-color: #ccc; }
#radius b { background-color: #ccc; display: block; height: 1px; overflow: hidden; font-size:1px; }
.r1 { margin: 0 10px; }
.r2 { margin: 0 7px; }
.r3 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r5 { margin: 0 3px; }
.r6 { margin: 0 2px; }
.r7 { margin: 0 1px; }
Теперь добавим блоки в html-страницу:
<div id=”radius”>
<b class=”r1″></b>
<b class=”r2″></b>
<b class=”r3″></b>
<b class=”r4″></b>
<b class=”r5″></b>
<b class=”r6″></b>
<b class=”r6″></b>
<b class=”r7″></b>
<b class=”r7″></b>
<b class=”r7″></b>
<div id=”text”>
Закругляем углы на сайте computerlessons.ru
</div>
</div>
6-й и 7-й блоки повторяются для более мягкого закругления угла. Теперь осталось скопировать блоки и вставить их в обратном порядке под слоем text и получим вот такой слой:
Можно поэкспериментировать и получить вот такое интересное меню:
Создавать интересные css-меню с закругленными или скошенными углами можно до бесконечности:
Вы наверняка видели на сайтах таблицы с закругленными краями, такие таблицы красиво смотрятся, например как эта:
На самом деле чтобы закруглить угол таблицы его вовсе не нужно согибать, всего навсего в уголки вставляют вот такие изображения:
В редакторе эта таблица выглядит вот так:
Таблица состоит из трех строк и трех колонок. В уголках таблицы стоят рисунки закругленных углов, а остальные ячейки закрашены в цвет картинок.
Закруглить края таблицы можно и без использования картинок, но об этом уже в другом уроке.
На прошлом уроке мы закончили размещение слоев на странице и сейчас будем учиться задавать различные параметры для шрифтов. Прежде всего заполним страницу текстом:
<html>
<head>
<title>Дивный дизайн</title>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
<meta http-equiv=content-language content=ru>
<meta content=”дизайн, div, дивный” name=keywords>
<meta content=”Делаю сайт с дивным дизайном” name=description>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=page>
<div id=header>Мир автомобилей </div>
<div id=content>Только на сайте "Мир автомобилей" вы найдете все технические характеристики популярных марок авто. </div>
<div id=menu>
<p>Мерседес</p>
<p>BMW</p>
<p>Лексус</p>
<p>Рено</p>
<p>Пежо</p>
</div>
</div>
</body>
</html>
Также изменим цвета фонов для слоев на более мягкие в таблице стилей, можно конечно и совсем убрать цвета, но чтобы видеть изменения на странице мы все же их оставим:
/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:#FFECEC; width:800px; height:100px; margin-bottom:15px; }
#menu { background:#E8E8E8; width:140px; height:300px; }
#content { background:#DFDFFF; width:645px; height:300px; float:right; }
Теперь страница выглядит вот так:
Если вы уже читали статьи об оптимизации сайтов, то наверняка помните, что заголовки страниц нужно выделять тегами <h1> </h1>. Выделим наш заголовок тегом h1, а ссылки в меню выделим менее значимым тегом h3
<html>
<head>
<title>Дивный дизайн</title>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
<meta http-equiv=content-language content=ru>
<meta content=”дизайн, div, дивный” name=keywords>
<meta content=”Делаю сайт с дивным дизайном” name=description>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=page>
<div id=header>
<h1>Мир автомобилей </h1>
</div>
<div id=content>Только на сайте "Мир автомобилей" вы найдете все технические характеристики популярных марок авто. </div>
<div id=menu>
<h3><p>Мерседес</p>
<p>BMW</p>
<p>Лексус</p>
<p>Рено</p>
<p>Пежо</p></h3>
</div>
</div>
</body>
</html>
Текст на странице изменился:
Шрифты стали выразительнее, но все же текст в меню очень жирный, а заголовок в шапке нужно поместить по центру страницы, для этого зададим в таблице стилей параметры для тегов h1 и h3
/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:#FFECEC; width:800px; height:100px; margin-bottom:15px; }
#menu { background:#E8E8E8; width:140px; height:300px; }
#content { background:#DFDFFF; width:645px; height:300px; float:right; }
/* задаем параметры для заголовков */
h1 { text-align:center; }
h3 { font-weight:normal; font-size:14px; }
Посмотрите как после этих действий изменится шрифт. По умолчанию браузер будет показывать весь текст на странице шрифтом Times New Roman, а мы зададим шрифт Arial для слоя page, соответственно весь текст в этом слое изменит шрифт на указанный в таблице стилей:
/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; font-family:Arial, Helvetica, sans-serif; }
#header { background:#FFECEC; width:800px; height:100px; margin-bottom:15px; }
#menu { background:#E8E8E8; width:140px; height:300px; }
#content { background:#DFDFFF; width:645px; height:300px; float:right; }
/* задаем параметры для заголовков */
h1 { text-align:center; }
h3 { font-weight:normal; font-size:14px; }
Если понадобится изменить шрифт в каком-то из слоев, то это легко делается путем дописывания новых параметров, но помните что не стоит употреблять на сайте более 2 - 3-х вариантов шрифта!
/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; font-family:Arial, Helvetica, sans-serif; }
#header { background:#FFECEC; width:800px; height:100px; margin-bottom:15px; }
#menu { background:#E8E8E8; width:140px; height:300px; }
#content { background:#DFDFFF; width:645px; height:300px; float:right; font-family:Georgia, Times, serif }
/* задаем параметры для заголовков */
h1 { text-align:center; }
h3 { font-weight:normal; font-size:14px; }
Для тегов h1 и h3 тоже можно прописать свои шрифты.
На следующем уроке вставим на страницу изображение и разберем для него некоторые параметры.
Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS
В 6-ом уроке мы довели хтмл-страницу почти до нужного вида, но хотелось бы оторвать шапку сайта от блоков меню и контента. Для этого используем специальный параметр margin, который отвечает за параметры полей, допишем этот параметр в таблицу стилей для шапки (header):
/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:10px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; float:right; }
Вы заметили, что дописана строка не просто margin:10px, а вот так margin-bottom:10px - так мы указали параметры полей только для нижней стороны слоя, а не для всех сторон.
Итак, вы запомнили что поля задаются параметром margin, но это поля внешние, а можно еще задать поле (отбивка) и внутри слоя с помощью параметра padding, попробуйте дописать его в таблицу:
/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:10px; padding:10px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; float:right; }
Теперь посмотрите как изменилась хтмл-страница, текст в шапке должен находиться на расстоянии 10 пикселей от края слоя:
Можно задать отбивки и для остальных слоев, но мы не будем этого делать, поскольку мы уже сделали отступы между слоями и делать еще поля внутри слоев нет надобности, поэтому просто оставим внешние поля и немного их увеличим:
/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:15px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:645px; height:300px; float:right; }
С полями (margin) и отбивками (padding) разобрались и теперь перейдем к форматированию шрифтов.
Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS
Страница 1 из 2 / 1 2 Следующая
Связанные записи
Все записи
Научитесь зарабатывать в Интернете + ПартнЁрка