РЕКЛАМА Airwell, oz-air.ru, оконный кондиционер
Этот урок не случаен! Я когда только начинал изучать 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 для новичков
Видеоуроки
На прошлом уроке мы закончили размещение слоев на странице и сейчас будем учиться задавать различные параметры для шрифтов. Прежде всего заполним страницу текстом:
<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
Чтобы выровнять слои нашей хтмл-страницы по правому или левому краю, существует специальный атрибут float, используем его в таблице стилей:
/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; float:right; }
Для слоя content мы задали выравнивание по правому краю, но как видно и это не помогло поставить этот слоя рядом с блоком меню:
Решение этой проблемы очень простое, поменяйте в коде страницы местами строки для меню и для контента, сначала должна идти строка контента , а уж потом для меню:
<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>Второй блок</div>
</div>
</body>
</html>
Теперь хтмл-страница приняла “человеческий ” вид, но есть еще один момент - между меню и контентом есть отступ (пустое поле), а вот отступа от шапки (header) нету. Как сделать отступы читаем в седьмом уроке по CSS.
Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)
Памятка вебмастеру по CSS
У нас есть три блока, которые нужно собрать в один, 4-й блок, он будет определять размеры хтмл-страницы. Для этого в код файла index.html добавьте следующие строки:
<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=menu>Второй блок</div>
<div id=content>Третий блок</div>
</div>
</body>
</html>
Так мы сделали 4-й слой под названием page, он обьединил в себе все три слоя header, menu и content. Теперь для слоя page нужно задать параметры с таблице стилей:
/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc;}
#header { background:red; width:800px; height:100px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; }
Мы задали только ширину и фон для слоя. Если теперь посмотреть на нашу страницу, то видно, что слой page объединил все три слоя:
Шапка (header) и меню (menu) находятся на своих местах и двигать их не нужно, а вот слой content должен находиться справа от меню, как решить эту задачу читайте в следующем 6-ом уроке.
Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS
В предыдущем уроке нами было создано три блока, которые мы раскрасили в разные цвета. Сейчас хтмл-страница выглядит так:
Теперь нужно задать слоям ширину и высоту, делается это следующим образом - откройте файл style.css допишите там параметры высоты и ширины для первого (красного) слоя:
/* таблица стилей */
/* задаем размещение блоков */
#1 { background:red; width:800px; height:100px; }
#2 { background:gray }
#3 { background:blue }
Сохраните документ и посмотрите как теперь выглядит страница:
Как видите слой изменил свои размеры, задайте размеры для остальных слоев:
/* таблица стилей */
/* задаем размещение блоков */
#1 { background:red; width:800px; height:100px; }
#2 { background:gray; width:140px; height:300px; }
#3 { background:blue; width:650px; height:300px; }
Давайте сейчас для удобства изменим названия наших блоков, первый блок назовем header, второй - menu и третий блок станет content, в итоге получим следующие коды:
код страницы index.html
<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=header>Первый блок</div>
<div id=menu>Второй блок</div>
<div id=content>Третий блок</div>
</body>
</html>
код таблицы стилей style.css
/* таблица стилей */
/* задаем размещение блоков */
#header { background:red; width:800px; height:100px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; }
Теперь будем считать что блок header - это шапка страницы, menu - это меню и content - содержание (контент).
Переходим к 5-ому уроку, где мы соберем все три блока в одном блоке.
Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS
Рейтинг статьи
Загрузка ...
Страница 1 из 2 / 1 2 Следующая
Связанные записи
Все записи