Вернемся к нашему сайту

 

Для следующего шага нам потребуется создать текстовый документ, для этого подойдет Notepad++ или обычный блокнот. Для начала запишем строку:

 

/*mysite.ru/*/

 

Фактически то, что мы впишем в строку не особо важно, ее мы «окантовываем» звездочками, а также слешами - /* */. Это строка комментария, обычно туда записываются персональные заметки, которые позволяют быстрее разобраться в коде. Перейдем к написанию кода. В самом листе стилей код носит названия «Правила». Составляющими правил выступают атрибуты или селектора, а кроме этого, и объявления, которые складываются со свойств и значений. Попробуем увидеть это на примере:

 

p {color: #000; }

 

Эта строка обозначает то, что цвет текста всех абзацев – черный. Р в этом случае выступает в роли атрибута, а скобки – это и есть Правила для атрибута такого типа. Понятие color выступает свойством объявления, а «сетка» и нули – значение. Значение в данном случае обозначено шестнадцатеричным знаком, под которым понимается цвет. Для тех, кто работал с графическими программами, это станет понятным сразу. По идее, символов должно быть шесть, но для сокращения возможно писать меньше. Проблем с этим никогда не возникнет.

 

Правила такого типа можно размещать по-разному, столбцом, или в линейку – это не играет никакой роли. Но следует помнить два правила – ставьте двоеточие сразу после каждого нового свойства и точку с запятой после нового значения. Если выпустить из виду эти два нюанса, то вполне возможно некорректное отображение браузерами.

 

 

Теперь можно установить для страницы общие правила:

 

* {

margin: 0;

padding: 0;

border: 0;

}

body{

padding: 2% 0 0;

background: #fff;

color: #333;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

#container {

width: 760px;

margin: 0 auto;

}

 

Уточним некоторые моменты:

 

Первое правило. Под звездочкой подразумевается одновременно вся страница. Она не является тэгом, тем не менее, все браузеры чудесно понимают информацию, которую она заключает в себе, а именно используют ее данные для всей страницы. Там мы последовательно записали:

Отступы – равны 0,

Поля – равны 0,

Рамка – равна 0.

Это мы сделали с целью, чтобы в ненужных местах не всплыли рамки, поля или отступы. Если упустить эти строки, то браузер может интерпретировать данные совсем не так, как задумано. Намного проще добавит все значения самому, где они необходимы. Их можно указать двумя способами – пикселями или процентами. Если значение равно нулю, то единицу измерения указывать не надо.

 

Второе правило. Тут мы обозначили тело страницы – мы отступили 2% от верхнего поля, а по обоим бокам и внизу значение оставили нулевым. Это подразумевает то, что страница будет подходить к верхнему полю не впритык, а отступать от него 2% полного размера окна. Стоит заметить важный факт – все значения вписываются одно за другим, без запятых. Точка с запятой вписывается только после последнего значения.

Для равномерного отступа с обеих сторон, можно задать только три значения, три, потому что отступ с правой и левой стороны одинаковый. Это будет выглядеть так - 2% 0 0, или если удобнее, то 15px 0 0 – это значение в пикселях. Ноль посредине обозначает одинаковый интервал отступа с обеих сторон. Рассмотрим на примерах:

 

5px 10px 15px 20px; — сверху отступ в 5 пикселов, справа 10, снизу 15, а слева 20.

5px 10px 15px; — сверху 5, с обеих сторон по 10, внизу 15.

5px 10px; — сверху и снизу по 5, с боков по 10.

5px; — отступ со всех сторон равен 5 пикселям.

В пунктах 2, 3 и 4 мы видим сокращенную подачу отступов.

 

Вернувшись к странице, мы видим – цвет фона – белый, шрифт – темно-серый (#333). Далее идут перечисления используемых шрифтов. Заметьте, если название шрифта складывается более, нежели из одного слова, то его необходимо отметить кавычками. Вот таким способом - " Times New Roman".

 

Третье правило. Тут начинается новое, а именно понятие container, которое используется с сеткой. Сеточка значит, что атрибут является уникальным. Конкретнее это означает, что тэг div и данный атрибут будут использованы на странице единожды. Понятие контейнер используется для помещения страницы в средину окна. Для контейнера мы четко указали отступы – верх и низ – 0, а по обоим бокам – auto. Это значит то, что какая бы не была страница размером – наша страничка всегда будет размещена по центру.

В принципе, для этого можно было бы использовать тэг body, но не все так просто – браузер бы обязательно отдал всю видимую область, а страничка размером в 760 пикселей, однозначно бы расположилась с левой стороны окна, что крайне нежелательно.

Некоторые разработчики используют автоподстройку под размер окна веб-страницы. Знайте – это неэффективно и некрасиво. Представьте, что будет с наполнением страницы, фотографиями или дизайном, если его растянуть с 14 до 22 дюймов? Как в худшую сторону изменяться пропорции и качество изображений?!

 

В каскадных листах стилей принято четкое представление правил. С самого начала определяются общие правила для страницы, а после этого – отдельные для каждого элемента. На данный момент мы определили не все общие правила для страницы. Еще не определены заголовки и ссылки (с помощью тэгов h, ul, ol, a). Это все будет рассмотрено позже, а сейчас прикрепим к страничке первые значимые элементы. Шапку и остальные графические элементы мы заранее подготовили, теперь нужно их поместить в ту самую папку, в которой хранятся файлы с главной страницей и стилями (5 изображений).

1.

2.

3.

4.

5.

Внесем правило для шапки страницы:

#header {
background: url(header.jpg) no-repeat;
width: 760px;
height: 158px;
}

Тут мы обозначили следующее – в вверху страницы размещена картинка, имеющая размеры 760х158 пикселей (это не существенно, размер может изменяться), а url (header.jpg) – это соответственно ссылка на саму картинку.

Вы заметили, что ссылка принимает вид обычного имени и расширения. Это из-за того, что картинка находится в той же папке, в которой расположен лист стилей. Поэтому такой вид ссылки называют относительным. Абсолютная ссылка приблизительно имеет такой вид – url (http: //www.ххх.ru/header.jpg).

Если мы глянем ниже, то увидим no-repeat, это означает, что запись используется единожды и не повторяется. Если бы это не было прописано, то браузер бы располагал картинку в окне бесконечно долго, а так мы ограничиваем ее присутствие одним разом. Кроме этого мы могли использовать repeat-x или repeat-y, если бы нам было необходимо размножить фон по вертикали или горизонтали. Необходимо сохранить лист стилей. Это удобно сделать в тот же каталог, где находятся основная страница и изображения. Сохранение происходит так же, как и раньше, но следует изменить расширение файла на.css — назовем его style.css.

Давайте еще раз откроем главную страницу и в промежутке между body добавим участок кода:

< div id=" container" >
< div id=" header" > < /div>
< /div>

После чего необходимо сохраниться и открыть страничку в любом браузере. Перед нами возникает страница и картинка, находящаяся ровно посредине и вверху. Это контейнер с шапкой добавился к телу страницы.

Сначала мы добавили тэг контейнера строкой < div id=" container" >, после чего развернули тэг шапки < div id=" header" >, после чего его сразу и закрыли строчкой < /div>. После чего окончательно закрыли тэг нашего контейнера < /div>. Div id в этом случае выступает тэгом с индивидуальным атрибутом. Атрибут обязательно заключается в кавычки.

Теперь снова нужно открыть лист стилей.

Сразу за правилом для шапки напишем правило для навигации:

#nav {
background: url(nav-bg.jpg) repeat-x;
color: #f00;
font-size: 80%;
font-weight: bold;
line-height: 1.8em;
text-align: center;
}
#nav ul {
list-style-type: none;
}
#nav li {
display: inline;
margin: 0 8px;
}
#nav li a {
color: #000000;
}
#nav li a: hover {
color: #f00;
}

Уже стало несколько сложнее, попробуем рассмотреть поэлементно. Мы решили, что панель навигации будет в единственном экземпляре. Она расположится прямо под шапкой и будет реализована с помощью маркированного списка.

Внимание:

Под маркированным списком понимается список, состоящий, как Вы поняли, из нескольких пунктов. Но вместо цифр в этом случае используются маркеры, в роли которых могут выступать ромбики, кружки и т.п. В HTML такие списки обозначаются с помощью тэга ul, а элементы списка (строчки) – тэгом li. Это выглядит где-то так:

< ul>
< li> Я дома.< /li>
< li> Я на работе.< /li>
< li> Я на учёбе.< /li>
< /ul>

А сейчас снова взглянем на наш лист стилей. Атрибутом nav мы обозначили блок навигации. Укажем некоторые настройки для него. Бэкграунд - в качестве него мы выбрали обычный столбик-градиент серого цвета. Для того, чтобы он равномерно растянулся в его значении мы написали repeat-x, это «повторило» его по оси горизонтали. После чего мы обозначили цвет шрифта как ярко-красный - #f00. И, соответственно все остальные параметры – размер, толщина, вертикальная высота. Мы познакомились с новой величиной – em, которая соответствует высоте обычной прописной буквы.

Уже в следующем правиле мы определили, что в нашем списке не должно быть никаких маркеров. Для этого мы использовали значение none. Если не указывать дополнительных параметров, то согласно умолчаниям, строки располагаются в столбик. Мы укажем горизонтальное расположение с помощью display: inline. Кроме этого добавим отступы по 8 пикселей по бокам, и нулевые сверху и снизу. А теперь пропишем реакцию наших пунктов меню на наведение курсора с помощью тэга а. У нас получится подобное этому:

#nav li a {
color: #000000;
}
#nav li a: hover {
color: #f00;
}

В первом элементе кода мы обозначили цвет ссылки в обычном состоянии, а во втором случае — в активном, то есть после наведения на нее курсора.

В дополнение добавим следующее правило:

a {
text-decoration: none;
}

Это правило – общее для всех ссылок. Оно вводится для того, чтобы все ссылки не могли использовать подчеркивание по умолчанию.

Продолжим разработку дальше.

Сейчас Вам нужно изучить очень значительный объем кода. У нас уже имеется контейнер и блок навигации, находим в коде следующее место:

< div id=" header" >
< /div>

За ним стоит записать следующее:

< div id=" nav" >
< ul>
< li> Главная< /li>
< li> < a href=" #" > О нас< /a> < /li>
< li> < a href=" #" > Наши работы< /a> < /li>
< li> < a href=" #" > Наша страна< /a> < /li>
< li> < a href=" #" > Звонки< /a> < /li>
< li> < a href=" #" > Программа< /a> < /li>
< /ul>
< /div>

Как видно – все предельно просто. Все разделы оформляются как пункты единого списка. Все, кроме первого – ссылки. Для того, чтобы не переходить на ненаписанные ссылки добавляем решетку, она всегда перенаправит нас на исходную страницу.

Теперь о каскадности стиля. Вы уже слышали о глобальной настройке блока #nav и о маркированном списке ul. В этом случае каждое следующее правило передается от предыдущего. Кроме этого они все находятся в контейнере, и таким способом перенимают часть правил из него. Именно из-за этого все называется каскадом.

Снова сохраним нашу страничку. Запустим нашу страничку в браузере и увидим, что логически, страничка теперь разбита на 2 области – в одной из них главный текст, а во второй – новости. Такая верстка из-за такого размещения называется двухколоночной.

Давайте допишем еще пару строк:

< li> < a href=" #" > Контакты< /a> < /li>
< li> < a href=" #" > Справка< /a> < /li>
< /ul>
< /div>

И добавим:

< div id=" text" >
< img class=" img1" src=" img1.jpg" alt=" Бизнес" />
< p> Бизнес это ………….< /p>
< p> Теперь ………. < /p>
< img class=" poloska" src=" poloska.gif" alt=" Бизнес" />
< img class=" img2" src=" img2.jpg" alt=" Бизнес" />
< /div>

Разместив любой текст, сохраним страничку, и снова запустим ее в браузере. Мы видим, что текст размещен плохо, а, следовательно, требует доработки таблица стилей, это поправимое дело.

Рассмотрим новые строки кода. Тэг div и атрибут text – это и есть место, где размещается информация на страничке. Под этим и понимают понятие контент. Тут же мы можем видеть абзацы, которые обозначены тэгами р. Тэг абзаца всегда стандартен – открылся-закрылся. В отличие от слова class, которое обозначает количество использований атрибута. Его также можно использовать и вообще без тэга div, что мы и продемонстрировали.

Рассмотрим на примере.

Как правило, вставочную строку мы пишем так:

< img src=" папка_где_она_лежит/picture.jpg" alt=" " />

Мы записали несколько иначе:

< img class=" img1" src=" папка_где_она_лежит/picture.jpg" alt=" " />

Сюда спокойно можно дописать еще раз div, но это нецелесообразно.

Запомните! Атрибут можно приклеивать к уже готовому тэгу.

Div же стоит использовать только для самых крупных и значимых блоков.

 

Продолжим разрабатывать самую главную часть кода. Откроем снова лист стилей. Мы остановились на главном правиле для ссылок страницы. Теперь наша задача – красиво оформить текстовое содержание странички.

Для этого мы воспользуемся атрибутом text.

Внесем следующие изменения в CSS:

#text {
width: 545px;
font-size:.8em;
color: #333;
margin: 10px auto;
float: left;
}
#text p {
text-align: justify;
text-indent: 1.5em;
margin: 0;
padding: 0 15px;
}
#text a {
color: #396;
}
#text a: hover {
color: #f36;
border-bottom: #f36 dotted 1px;
}

В начальном правиле мы указали, что 545 пикселей является шириной области, в которой расположен текст. Также мы указали размер - 0.8em (.8em означает абсолютно то же). Отступы ясны – стандартные по бокам, а верх и низ – 10 пикселей. Именно последняя строчка указывает расположение нашего текста – слева. Обтекание, или float. Но тут возникает неясность – обтекание слева, но и сам текст тоже слева. Чтобы разобраться, необходимо запомнить – left – расположение слева, right – блок находится справа, а «течет» все левее.

Это мы делаем это со следующей целью – мы с помощью значения right, используемого для атрибута float в пустое место сможем добавить колонку новостей.

Рассмотрим следующее правило, которым мы для всех наших абзацев определили выравнивание по четко выделенной площади. Это мы делаем с помощью justify. Если его не применить, то весь набранный текст будет выровнен по левому краю, что смотрится некрасиво. Теперь слова в строке выровнены равномерно, что смотрится значительно приятнее.

Далее мы встречаем слово indent, тут увеличенный шрифт, а само понятие означает «красную строку». Теперь разберемся со ссылками – салатовый мы выбрали для ссылок, которые не активны, а активные обозначили красным, еще и с подчеркиванием линией с точек, имеющим толщину в 1 пиксель.

Давайте теперь разберемся с картинками. Добавим в лист стилей.

.img1 {
width: 200px;
height: 287px;
margin: 0 0 0 15px;
float: right;
}
.img2 {
width: 200px;
height: 200px;
margin: 10px 10px 0 15px;
float: left;
}
.poloska {
width: 300px;
height: 23px;
margin: 10px 10px 0 15px;
float: left;
}

Тут не предвидится никаких сложностей. Мы определили каждому рисунку свой атрибут - img1, img2, poloska. Кроме этого, в правилах мы четко определили размеры картинок, а также отступы. Сначала картинки можно попробовать подвигать опытным способом, перемещая их в нужное место, меняя параметры. Стоит заметить, что значения позволительно указывать и с минусом. В этом случае картинка будет двигаться в противоположную сторону. Для правильного положения на страничке стоит задать каждой картинке свое обтекание. Так мы можем разместить различные картинки справа и слева от текста. Помните еще об одном. Правила в этом случае начинаются не с сеточки, а с точки. Теперь можно снова сохранить страничку и открыть ее в браузере. Если все сделано правильно, то страничка уже обретет привлекательный вид.

Еще в текстовом блоке мы задали размещение списка для новых участников. Вообще, за эту работу отвечает один из скриптов php, но, поскольку, мы делаем самую простую страничку, то можем оформить все это самым элементарным списком. Теперь используем не маркированный список, а другой – нумерованный. Для этого используем тэг ol. Откройте страничку в этом месте:

< img class=" poloska" src=" poloska.gif" alt=" Бизнес" />
< img class=" img2" src=" img2.jpg" alt=" Бизнес" />

вставим следующий кусок:

< div id=" members" >
< h2> Список жителей сайта: < /h2>
< ol>
< li> < a href=" #" > Степан< /a> < /li>
< li> < a href=" #" > Елена< /a> < /li>
< li> < a href=" #" > Клава< /a> < /li>
< li> < a href=" #" > Владислав< /a> < /li>
< li> < a href=" #" > Аня< /a> < /li>
< li> < a href=" #" > Костя< /a> < /li>
< /ol>
< ol> < li> < a href=" #" > Коля< /a> < /li>
< li> < a href=" #" > Татьяна< /a> < /li>
< li> < a href=" #" > Миша< /a> < /li>
< li> < a href=" #" > Мария< /a> < /li>
< li> < a href=" #" > Юля< /a> < /li>
< li> < a href=" #" > Вася< /a> < /li>
< /ol>
< /div>
< /div>

Что нового появилось? Атрибут members. Именно так мы именовали список. В этом случае тэг h2 является заголовком, причем второго уровня. Первым уровнем всегда является или название всего сайта, или же страницы.

Следующее, что мы видим это два пронумерованных списка. Два списка необходимо для того, чтобы ячейки не могли автоматически переноситься на новую строку каждый раз.

Это бы имел неприглядный вид, схожий с этим:

1 2
3 4
5 6

И далее по списку. Не очень красиво выглядит, а два списка с легкостью решили эту проблему. Но учтите тот факт, что в листе стилей было указано обтекание строго слева. Добавим еще несколько правил в наш код.

#members {
width: 300px;
height: 190px;
float: right;
}
#members h2 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}
#members ol {
color: #999;
font-size: 120%;
margin: 10px;
float: left;
}
#members li {
margin: 0 5px;
}
#members li a {
color: #0066CC;
} #members li a: hover {
color: #0066CC;
}

Рассмотрим изменения. Сейчас мы задали блоку определенный размер. Мы задали значения, как ширины, так и высоты. Далее обозначено правило, которое касается заголовка второго уровня. С этим мы уже стыкались раньше. Все понятно. А для самого списка, определенного тэгом ol мы определили обтекание слева. Таким образом, оба наших списка будут располагаться один возле другого. Имена, которые находятся в списке, созданы в идее ссылок (ориентированы на профили участников). Мы определили для них только цвета, но и они подчеркиваются точечной линией – это следствие каскада. Список лежит в разделе, где действует атрибут text, поэтому с него берется и часть правил.

Далее мы фактически соберем в единое целое всю страничку. После этого этапа предстоит только завершить некоторые детали и все будет готово.

Необходимо открыть страничку и найти следующие строки:

< li> < a href=" #" > Вася< /a> < /li>
< /ol>
< /div>

Добавим несколько строк:

< /div>
< div id=" news" >
< h3> Свежие новости: < /h3>
< ul>
< li> Сначала….< /li>
< li> Именно тогда….< /li>
< li> Только сейчас….< /li>
< /ul>
< /div>
< div class=" clearfloat" > < /div>

Мы видим, что добавились новые моменты. В глаза бросается тэг < /div>, который обозначает окончание области нового текста. После него мы видим маркированный список, в нем новости. Заголовок, о чем говорит h3, третьего уровня, а с самого низа добавлена clearfloat – «очистка обтекания». Это все означает, что верстка данной страницы является «плавающей». Такое название она имеет благодаря множеству блоков, которые обтекаются. Стоит заметить, что различные браузеры по-разному относятся к этой строчке. Для того, чтобы не возникло некорректного воспроизведения блоков, ее, несомненно, стоит добавить.

Давайте снова откроем наш лист и добавим еще несколько строк:

#news {
background: #ffc;
width: 185px;
color: #665;
margin: 10px 5px;
float: right;
}
#news h3 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}
#news ul {
list-style: url(marker.gif) inside;
}
#news li {
font-size: 75%;
padding: 5px 10px;
}

В этих строках мы внесли несколько изменений, для визуального разделения колонки с новостями от остальных блоков мы изменили в ней фон. Немного подправили и уточнили ширину блока, а также шрифт и порядок обтекания.

Кроме этого мы определили стиль маркеров для используемого списка. Любой браузер нарисует на месте маркеров кружки черного цвета. Но для придания странице лучшего вида кружки можно поменять на более приятные формы, даже на лично нарисованный маркер. Для этого нужно совсем немного, нарисовать красивый маркер, и указать на него ссылку в виде url(marker.gif). Следом стоит приписать inside, это делается для размещения маркера именно в колонке с текстом, потому что изначально маркеры не состоят в самом блоке.

Теперь стоит сохраниться и посмотреть результаты изменений.

Заключительная часть. В ней нам предстоит оформить нижнюю часть странички, подправить несколько моментов и работу можно считать законченной. " Подвал" (footer) является, не смотря на расположение, довольно важной частью сайта и страницы в отдельности. Как правило, в этом месте повторяются ссылки на различные страницы сайта. Это делается для удобства. Другой важной информацией, которая размещена там, являются авторские права и контакты организации, которой принадлежит сайт.

Вы часто можете наблюдать ситуацию, когда разделы меню, расположенные слева, дублируются и вверху. Это выглядит довольно глупо. Внизу они смотрятся намного лучше " подвал" принято немного выделять, но не особо, чтобы он не бросался в глаза. Мы сделаем его немного контрастнее, несколько уменьшим высоту.

Нам следует найти в коде следующее место:

< /ul>
< /div>
< div class=" clearfloat" > < div>

Добавим следующий код:

< div id=" footer" >
< p> Главная | < a href=" #" > О нас< /a> | < a href=" #" > Наша работа< /a> | < ahref=" #" > Наша страна< /a> | < a href=" #" > Звонки< /a> | < a href=" #" >...< /a> < /p>
< /div>

Добавим нужный код в правила:

#footer {
background: #0066CC;
color: #fff;
font-size: 70%;
padding: 5px;
clear: both;
}
#footer a {
color: #ff0;
}
#footer a: hover {
color: #f00;
}
#footer p {
padding: 2px;
text-align: center;
}
.clearfloat {
clear: both;
}

Этим участком кода мы внесли следующие изменения: фон сделали синего цвета, а текст – белым. Самая нижняя строчка, в которую вписано (clear: both;) определяет, что обе стороны подвала должны быть пустыми. Исходя из этого понятно, что " подвал" будет занимать всю ширину контейнера, которая расположена в нижней части. Мы изменили и цвет ссылок, они желтые в неактивном состоянии, если навести курсор - становятся красными. Текст несколько мельче, через то, что нижняя часть, хоть и весома, не должна бросаться в глаза сразу.

Теперь можно снова сохраниться. При просмотре уже прослеживается четкость и завершенность. Но вид немного подпорчен полностью белым фоном. Для решения проблемы этого однообразия стоит добавить серую рамочку. Это просто. Следует найти вот такой участок кода:

#container {
width: 760px;
margin: 0 auto;
}

Необходимо просто добавить такую строку:

border: 1px solid #999;

И мы увидим:

#container {
width: 760px;
margin: 0 auto;
border: 1px solid #999;
}

Это все, что Вам необходимо знать на начальном этапе, если Вы решили заняться блочной версткой.

 

САМОСТОЯТЕЛЬНАЯ РАБОТА

Создать 2 странички («О нас», «Контакты»):

— сохранить основные блоки (header, footer, menu);

— наполнить странички контентом, используя текстовые блоки (не менее 2), изображения, ссылки, списки;

— создать и вставить в шапку логотип и название компании, при нажатии на которые осуществляется переход на главную страницу;

— в «Контакты» вставить карту с отмеченным на ней расположением компании, используя http: //api.yandex.ru/maps/tools/constructor/;

— cправа и слева от основной информации вставить рекламные баннеры (*.gif).

ДОМАШНЕЕ ЗАДАНИЕ