Загрузка. Пожалуйста, подождите...
|
|
Мы создадим вот такой симпатишный сайт, используя язык разметки xhtml и лист стилей css:  Для начала немного теории. Блок - это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля, отступы. Содержимым блока может быть что угодно - кусок текста, картинка, список, форма для заполнения, меню навигации и т.п.  Рамка (border) - это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная). Поля (padding) - отделяют содержимое блока от его рамки, чтобы текст, например, не был "впритык" к стенкам блока. Отступы (margin) - это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга. Блоки, как и таблицы - это элементы всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задаётся такой параметр как "обтекание" (float). Но об этом чуть позже. Соответствие требованиям XHTML. Это не что иное, как разделение содержимого страницы и его представления. Когда web только зародился, то такое разделение принималось по-умолчанию. Имеется в виду, что содержимое, то есть текст, например, располагается непосредственно в теле страницы, а все его описательные характеристики, такие как: цвет, толщина и размер шрифта - в отдельном файле (листе стилей CSS), присоединённом с помощию обыкновенной гиперссылки к основной странице. Ведь это очень удобно! Когда страниц сайта очень много, а вам вдруг захотелось поменять размер шрифта, то понадобится всего лишь сделать поправку в листе стилей. И шрифт изменится сразу на всех страницах. В теле страницы кроме самого текста имеются так называемые HTML-тэги. Нужны они для логической разметки страницы. То есть задают заголовки, абзацы, цитаты и т.п. Тэг - это особая конструкция языка HTML. Различают открывающий и закрывающий тэги. В самом простом случае тэг - это как деталь детского конструктора - имеет своё строгое предназначение: планка - значит планка, колесо - значит колесо и ничто иное. К примеру тэг абзаца: <p>Текст абзаца.</p> всегда обозначается буквой "p" и никак иначе. Тэги всегда заключены в угловые скобки. Как видно из примера, наличествуют как открывающий тэг, так и закрывающий. У последнего перед именем добавлен "слэш" - косая черта, наклоненная вправо. Не все тэги имеют закрывающую пару. Например тэг изображения img его не имеет вовсе. Но чтобы соответствовать современным стандартам и требованиям спецификации XHTML, ему всетки добавляют перед закрывающей угловой скобкой пробел со слэшем. Выглядит это примерно так: <img src="images/risunok.jpg" alt="" /> Тэг div. В отличии от строгих привязок стандартных HTML-тэгов к своему содержимому ("р" - к абзацам, "а" - к ссылкам, "img" - к изображениям), тэг div является по-сути нейтральным. То есть ему всё равно что содержать, хоть всё разом. Его используют для задания функциональных областей на странице, таких как: "шапка" (header), блок навигации, блок основного содержимого, футер (footer) или подвал по-нашему. У данного тэга, как и у любого другого, имеются свои собственные атрибуты. Атрибут - описательная характеристика тэга. То есть что он может делать и каким образом. Например, опять же возьмём тэг изображения: <img src="images/risunok.jpg" width="200px" height="50px" alt="Рисунок меня, где я кормлю собаку, а она кусается зачем-то" /> В данном случае src, width, height, alt являются атрибутами тэга. В кавычках (и это тоже обязательное требование современных стандартов) даны значения атрибутов. Расшифровать такую запись несложно. Тэг указывает, что в данном месте страницы нужно прилепить изображение risunok.jpg из папки images (src - не что иное как сокращенное от английского search - найти), шириной 200 пикселей, высотой 50 пикселей. И + альтернативный текст, который всплывает на страничке при наведении мышки на рисунок. Это не блажь, а тоже необходимое требование. Не все пользователи сети обладают хорошим зрением. Кто-то пользуется программой распознавания и чтения текста. Вот для них и существуют альтернативные подписи к картинкам. Если же картинку нет смысла подписывать (например маркер списка или стрелка какая), то у этого атрибута оставляют пустое место - alt="". Итак, атибуты тэга div. Их есть всего два: id - атрибут, позволяющий придать тегу уникальное значение, то есть такое, которое на странице используется только один раз. Например "header" (про кавычки не забываем), или "footer". Таким образом мы сможем задать затем в листе стилей для тэга div с атрибутом id и значением "header" (шапка) одни настройки, а для подвала "footer" совсем другие, и браузер верно распознает, что вот этот абзац, обозначенный тэгом р относится к "шапке" и будет набран крупным и красным шрифтом, а вот этот к "подвалу" и будет мелким и серым шрифтом. И никакой путаницы! class - атрибут, позволяющий одно и то же значение придать нескольким элементам. Например всем изображениям на странице добавить рамку одинаковой толщины и цвета. Так как изображений несколько, то атрибут id уже нельзя использовать. Для написания кода удобнее пользоваться WordPad-ом, потому что у него неограничено число шагов назад (если нужно что-то исправить), в то время как у Блокнота есть лишь один такой шаг. Для начала определим тип нашего документа. Любая грамотно свёрстанная страница должна в самом начале содержать так называемый DOCTYPE. Нужен он не для форсу бандитского, а для всевозможных устройств вывода информации и браузеров в том числе. Пока что все ныне существующие браузеры прекрасно обходятся и без указания доктипа. Но уже грядут те времена, когда страница сайта, сразу начинающаяся с тэга <html> просто не будет прочитана, потому как стандарты становятся жесче. Мы определим нашу страничку в соответствии с самым крутым и строгим на данный момент доктипом под названием Strict 1.0. Переключаемся в английскую раскладку и неспешно записываем следующие пару строк: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Прошу обратить внимание: как я уже говорил, требования здесь весьма строгие - все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой. Но вот ведь сам доктип тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам сих строгих правил. Но это единственный случай, где правило не работает. Далее мы впишем ещё одну хитрую строку: <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> Ну, раз тут появилось слово lang и ru, то ежу понятно, что это указание на езыг документа. Не путать с кодировкой! Её мы укажем позднее. В этой же строке, в общем-то, и начинается уже код самой страницы с тэга <html> Следующий тэг <head>. В нём содержится всякая служебная информация: название страницы (то, что входит в титл), кодировка, ключевые слова для поисковых роботов, описание страницы и т.п. Вся эта инфа записана в служебных тэгах meta, которые также не отображаются на странице в браузере. Мы запишем на нашей страничке следующую информацию: <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> <meta name="description" content="Сайт о поросенках-летунах и счастливой летучей жизни." /> <meta name="keywords" content="летать, свин-летун, пиггсы, полёты, лёччики, пилоты." /> <link rel="stylesheet" href="style.css" type="text/css" /> Поясним: 1. Первый мета-тэг показывает на кодировку сайта. В рунете желательно пользовать всетки виндовз-1251, чтобы случайно у Васи Пяткина в его IE версии 3.0 не повылезали вместо красивого и грамотного текста всякие кракозябры. 2. Второй мета-тэг - это краткое описание сайта. именно эта строка первой покажется в результатах поиска яндекса или рамблера, если они ещё нас найдут. 3. В третьем мета-тэге ключевые слова для поисковиков. Объяснять не буду зачем это нужно, думаю и так ясно. 4. И наконец последняя строка - это не что иное как ссылка на наш лист стилей CSS, который мы создадим чуть позже. Про него скажу лишь вот что: по умолчанию наш лист стилей могут использовать любые устройства вывода инфы будь то экран монитора, принтер, либо телетайп какой-нить шпиёнский. Но если мы хотим указать для какого устройства конкретно предназначена страница, то после атрибута type со значением text/сss должны будем указать дополнительный атрибут media со значением print - для принтера, hendheld - для "наладонника", screen - для монитора только и т.д. Это понятно - если кто-то захочет распечатать нашу страничку, то ему вовсе ни к чему на отпечатке навигация, кнопки-картинки, рекламные баннеры и супер-красивые заголовки - только инфа. И вот для такого случая пишется отдельный лист стилей, попроще. Следующим парным тегом будет титла - это тот текст, который появляется на самом верху браузера при открытии странички: <title>Пиггасы | Главная</title> Понятное дело, что туда необходимо вписать название страницы. Не Index, не default, не просто цифра 1 какая, а настоящее, хорошее название. Это также необходимо, как и название для книги. Да и поисковые роботы сильно уважают, когда в титле набран вменяемый текст. А теперь впишем закрывающий тэг </head>. Все, со служебной инфой покончено. Обратите внимание - тэги как бы вложены друг в друга: <head><title></title></head> Это правило вложения должно выполняться всегда! Никаких перестановок типа: <head><title></head></title> - НЕПРАВИЛЬНО! Вот мы и добрались до тЕльца нашей странички, которое и обзывается соответствующим тэгом <body>. Пока давайте допишем код страницы до конца (он ещё будет впоследствии дополнен): <body> </body> </html> Сохраним документ в отдельной папке. Сохраняем следующим образом: Нажимаем Файл - Сохранить как, в строке Тип файла указываем Текстовый документ, в строке Имя файла пишем полностью имя с расширением index.html. Почему именно index? Любой браузер, зайдя по адресу www.пиггс.ру станет сразу искать страницу с этим названием. Устроены они так. Индексная страница для них всегда является главной, стартовой. Итак, CSS или иначе Каскадный Лист Стилей. Почему каскадный объясню позднее. Открываем новый документ в WordPad-е и вписываем следующую строку: /*(C) PIG.RU, 2007 | piggs@pig.ru */ На самом деле содержимое строки не так важно. Она у нас закомментирована слэшами со звёздочками /* */ (кстати, слэш на клавиатуре находится во второй снизу строке в английской раскладке, а не вверху справа в русской. Не перепутайте, это разные знаки!) Строка комментария не читается браузерами. Она нужна только для служебной информации. Кодеры обычно вписывают туда свои пометки, дабы самому не запутаться в коде, когда его много. В самом верхнем комменте (как у нас) пишутся ссылки на сайт кодера или дизайнера, его мыло, авторские права и т.п. Мы ограничимся только копирайтом и мылом. Ну а теперь непосредственно код! В листе стилей код называют правилами. Каждое правило состоит из селектора (читай - атрибута) и объявления. Объявление, в свою очередь, состоит из свойства и значения. Рассмотрим пример: p {color: #000;} Данная запись означает, что все абзацы будут набраны чёрным шрифтом. Здесь "р" - это атрибут, а то, что находится в фигурных скобках и есть Объявление правила для этого атрибута. Слово color является Свойством объявления, а "решётка" с тремя нулями - шестнадцатиричная запись цвета. Всем, кто пользуется Фотошопом это должно быть известно. Почему всего три нуля, ведь в данном обозначении должно быть шесть цифр (или букв)? Когда пары знаков одинаковы 00 00 00, то допускается писать сокращённо - 000. Все браузеры это понимают. Правило можно писать как угодно - хоть в строку, как у нас, хоть в столбик - это роли не играет. Важно только не забывать две вещи: после каждого Свойства необходимо ставить двоеточие, а после Значения - точку с запятой. Если пропустить хотя бы в одном месте эти знаки, то IE и Firefox будут глючить, а Opera, возможно, и покажет всё без ошибок. Сначала зададим общие правила для страницы: * { margin: 0; padding: 0; border: 0; } body { padding: 2% 0 0; background: #fff; color: #333; font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif; } #container { width: 760px; margin: 0 auto; } Поясним: 1. В первом правиле звёздочка означает не что иное как всю страницу разом. Сама звёздочка - это не тэг и нигде потом в коде страницы не указывается. Браузеры прекрасно понимают её значение и применяют данные с ней правила ко всей странице. В правиле мы указали последовательно: Отступы - 0, Поля - 0, Рамка - 0. Это нужно для того, чтобы ни поля, ни отступы, ни рамки не появлялись там, где нам не нужно. Если этого специально не указывать, то например тот же IE напихает этого добра куда ни попадя, испортив нам всю кухню. Уж лучше мы в следующих правилах сами добавим что нужно и где нужно. Значения уккзываются либо в процентах, либо в пикселах. Если стоит ноль, то единицу измерения не нужно указывать. 2. Следующим правилом мы задали для тела страницы следующие указания: поля - сверху 2%, с боков по нулям, снизу тоже ноль. Это значит, что наша страничка не будет лепиться к верхушке окна браузера, а отступит от него на 2% размера окна. Тут значения идут подряд без запятых и только после последнего ставится точка с запятой. Вообще у нас 4 стороны. И значения для них задаются по часовой стрелке, начиная сверху, затем правое, низ и левое. Но так как у нас по бокам одинаково, то и значений мы дали всего три. Ещё раз: а) 5px 10px 15px 20px; - сверху будет поле в 5 пикселов, справа 10, снизу 15, слева 20. б) 5px 10px 15px; - сверху 5, с боков по 10, снизу 15. в) 5px 10px; - сверху и снизу по 5, с боков по 10. г) 5px; - со всех сторон по 5. Думаю, принцип понятен. Остальное несложно - фон белого цвета, цвет шрифта тёмно-серого (333), ниже перечислены в порядке предпочтения используемые семейства шрифтов. Тут есть одно замечание - если имя шрифта состоит более чем из одного слова, то его нужно взять целиком в кавычки. 3. А вот в этом правиле уже что-то новенькое - появилось незнакомое слово container с решёткой. Данная решётка и означает уникальность атрибута. То есть тэг div с данным атрибутом будет использован только один раз на странице. Зачем вообще нужен контейнер? А затем, чтобы поместить нашу страничку в центр экрана монитора. Для этого мы указали у контейнера отступы: сверху и снизу ноль, а с боков auto. Сие и означает, что при любом размере экрана наш сайт всегда будет строго по центру. Ширина страницы 760 пикселей. Возникает вопрос: а почему бы у тэга body не указать такую же ширину страницы и авто-выравнивание? Дело в том, что браузеры читают данный тег (body) по-своему и отдают под него ВСЮ видимую область экрана. А нам это не нужно. Вот мы и приспособили эдакую "коробочку" под нашу страничку. Что у нас уже тут есть? Контейнер, в котором лежит шапка. Следом за шапкой добавим блок навигации. Находим в коде следующее место: <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> Как видим - всё просто: наши разделы оформлены как пункты списка, и каждый пункт, кроме первого, является ссылкой. В данном случае вместо адреса несуществующих страниц мы просто вставили решётку (#), которая всегда возвращает нас на текущую страницу. Теперь настала пора сказать пару слов о каскадности стиля. В правилах для блока навигации мы вначале указали настройки для всего блока, затем для маркированного списка, обозначенного тэгом ul, далее показали правила для строк li... Каждое последующее правило получает "в наследство" характеристики предыдущего: от nav к ul, от ul к li. Все вместе они являются вложенными в тэг контейнера и получают от него часть правил ( в частности центрирование посередине экрана и заданную ширину в 760 пикселей. Это и является своеобразным каскадом. А теперь сохраняем нашу страничку. Весь код должен выглядеть так: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> <meta name="description" content="Сайт о поросенках-летунах и счастливой летучей жизни." /> <meta name="keywords" content="летать, свин-летун, пиггсы, полёты, лёччики, пилоты." /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Пиггасы | Главная</title> </head> <body> <div id="container"> <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> </div> </body> </html> И идём смотреть в браузере что получилось. :) А теперь пора наполнить нашу страницу чем-нить полезным, то есть Контентом ("...как много в этом слове..."). На макете в первой части урока видно, что полезная площадь страницы разделена на две функциональные области: 1. Основной текст (с картинками и пр.) 2. Блок новостей. Обычно, такую вёрстку называют двухколоночной. Как сделать так, чтобы текст остался слева, а новости справа - я расскажу чуть позднее, когда мы займёмся листом стилей. А пока давайте запишем на страничке сразу после этого места: ......... <li><a href="#">Свинки-герои</a></li> <li><a href="#">Подружиццо</a></li> </ul> </div> Следующий код: <div id="text"> <img class="img1" src="pig1.jpg" alt="Летящий свин" /> <p>Летать всегда! Летать везде! Летать много, очень-очень много и всегда с улыбкой на морде лица — вот наше кредо!</p> <p>Все пиггасы рано или поздно приходят к осмыслению никчемной жизни в грязной луже и подаются в лёччики-пилоты. Причём для летания вовсе не нужна никакая посторонняя техника. Только сильное и несокрушимое желание, а также упорство, спортивная злость и немного вредности. Оно того стоит! Уж поверьте.</p> <p>Всего лишь после недели тренировок на брезентовом батуте и трёх зачотных прыжков с крыши сарая, адепт получает звание летуна-прыгуна. При этом заработанные синяки, ссадины и шишки также засчитываются в +</p> <img class="venzel" src="venzel.gif" alt="" /> <img class="img2" src="pig2.jpg" alt="Пиггсы на проводе" /> </div> Впечатав приведённый выше код и сохранившись, откроем страницу в браузере и посмотрим, что получилось. Пока что фигня получилась. Текст появился, но всё наперекосяк. Это мы поправим в листе стилей, а пока давайте немного разберём, что же это мы намудрили. Тэг div с атрибутом text - это и есть область полезного содержимого странички, иначе называемое контентом. Как и в любом тексте тут мы видим абзацы, обрамленные тэгами р, а также несколько изображений (тэги img). С тэгами абзаца всё понятно: открылся один, за ним кусок текста, закрылся; открылся следующий, за ним опять кусок текста, закрылся, и т.д. А вот у тэгов изображений появилось нечто новое - это слово class. Если кто помнит, то оно означает многоразовость использования данного атрибута (в противовес индивидуальному id. Кроме того, class можно использовать и вовсе без тэга div! Что мы и сделали. У тэгов изображения мы просто вписали это слово сразу же за самим тэгом. Поясним на примере: Обычно строку для вставки изображения записывают так: <img src="папка_где_она_лежит/picture.jpg" alt="" /> Мы же записали это следующим образом: <img class="img1" src="папка_где_она_лежит/picture.jpg" alt="" /> Так мы добавили к тэгу новый атрибут с именем img1 для которого и укажем в листе стилей всё что пожелаем. Это очень удобная запись. Можно, конечно же, влепить сюда и обычный 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 - объект справа, а течёт всё левее. Для чего это нужно? Скопировав (или набрав ручками) приведённые выше правила в свой лист стилей и сохранившись, посмотрите, что получилось - текст выровнялся по левому краю странички, оставив справа пустое место. В это пустое место мы потом и вставим блок новостей, присвоив ему в листе стилей какое значение для float? Верно, right! В следующем правиле мы для абзацев нашего текста задали выравнивание по всей выделенной площади. Слово justify как раз это и означает. Если этого не указать, то по умолчанию весь текст выровняется по левому краю. В англоязычных странах это всегда было нормой и сия норма исходила из размеров английских слов и букв. Но в кириллице такое выравнивание смотрится неаккуратно - весь правый край текста словно рваный. Поэтому мы выровняли его по обоим краям (это не выравнивание по центру!!). Получилось хAрAшO! Слово indent означает не что иное как обычную "красную строку". Размер её также указан в полтора размера шрифта. Ну и, наконец, ссылочки. Для неактивной задали цвет эдакий салатовый, а для активной красный, да ещё и с подчёркиванием точечной (dotted) полоской в 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; } .venzel { width: 300px; height: 23px; margin: 10px 10px 0 15px; float: left; } Здесь ничего сложного. Каждую картинку мы обозвали своим атрибутом img1, img2, venzel, указав в каждом правиле размеры картинок и отступы для них. Вообще отступы и поля проще всего подбирать опытным путём. То есть вначале просто без них, а потом смотрим, куда наша картинка сползла и чуток корректируем, добавляя где надо и убавляя, где не надо. Кстати, значения можно указывать и с минусом. Например -10px. И картинка сдвинется в противоположную сторону, хоть даже и за край экрана. Каждой картинке мы задали обтекание в соответствии с её расположением на странице. Первая картинка будет справа от текста, вторая - слева, и вензель тож слева. И ещё одна вещь. Как видите, данные правила начинаются не с решётки # , а с точки. Это и есть признак того, что правило относится не к id, а к class. Теперь сохраняемся и любуемся на то, что у нас получилось. Если всё выполнили правильно, то на страничке будет красиво выровненный текст с рисунками свинов-летунов и завитушкой-вензелем под текстом. В блоке текста мы разместим список новых участников. Вообще за это отвечает какой-нить php-скрипт, но так как мы делаем простую статичную страницу, то оформим эту штуку обычным списком. Только на этот раз не маркированным, а нумерованным. Задаётся такой список тэгом ol. Откроем в вордпаде нашу страничку и сразу после вот этого места: ................. <img class="venzel" src="venzel.gif" alt="" /> <img class="img2" src="pig2.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> <img class="line" src="line.gif" alt="" /> Что мы тут видим? Появился новый атрибут 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: #0c0; } #members li a:hover { color: #f00; } .line { width: 304px; height: 13px; float: right; } Расшифруем. Для начала мы задали всему блоку размер. Причём на этот раз не только ширину, но и высоту. Для чего это нужно? Если, например, в нашем списке было бы чуток меньше народу, то картинка волнистой линии "поджимала" бы список снизу, а нам надо, чтобы она была почти под срез картинки с летящим поросенком слева. Поэтому мы задали жёсткий размер как по ширине, так и по высоте. И обтекание справа. Ну, это уже понятно - список должен быть правее указанного рисунка. Далее задали правило для заголовка второго уровня. Здесь нам уже всё знакомо. Для самого нумерованного списка с тэгом ol мы указали обтекание слева. То есть оба наших списка (помним, что в коде страницы их два подряд) будут идти не в столбик, а один подле другого рядышком. Все имена в списке оформлены в виде ссылок (типо на странички профиля участников). Для них мы задали только цвета, без всяких подчёркиваний. Но почему-то на страничке они всё равно подчёркиваются при наведении мышки, да ещё точечной линией! Вот тут как раз и сработал так называемый каскад - список-то лежит в зоне действия атрибута text и поэтому просто перенял от него часть правил. Последнее правило здесь для рисунка линии. Оно также, как и предыдущие картинки, оформлено классом. Сохранились. А теперь смотрим, что получилось. Открываем нашу страничку (все помнят, что работаем в WordPad? хм.. надо бы за рекламу сего продукта с мелкомяххких денежек затребовать). Находим это место: .......... <li><a href="#">Васёк</a></li> </ol> </div> <img class="line" src="line.gif" alt="" /> и следом сразу вставляем вот этот кусочек: </div> <div id="news"> <h3>Самые распоследние новости:</h3> <ul> <li>Всю прошедшую неделю лил жуткий дождь, и полёты временно приостановились. Самые безбашенные пиггасы, однако, всё равно кучковались стаями на проводах местной радиолинии и дружно создавали помехи. Малаццы!</li> <li>Пиггас Хмурый Пятак снова хмурый. Обещал всех урыть. Злой сильно.</li> <li>У нашего друга Боббса завтра ДР! Поздравления и подарочки просил вручать возле новой будки и непременно на виду у соседского пса Мухомора, чтобы тому завидно стало. Пляски намечаются до самого утра. При наличии на небе луны — будет весело.</li> </ul> </div> <div class="clearfloat"></div> Что мы тут видим? Во-первых, закрывающий тэг /div, который показывает, что область основного текста закончилась. Далее идёт маркированный список новостей с заголовком 3-го уровня. В самом низу мы добавили "очистку обтекания" - clearfloat (для неё также в листе стилей пропишем свои правила, а именно очистку с обоих сторон). Для чего это? Вообще наша вёрстка является "плавающей". Вон сколько у нас уже обтекаемых элементов. При этом разные браузеры по-разному воспроизводят такую вёрстку (о том, что IE по-своему "видит" поля и отступы уж и не говорю). В Opera и Firefox можно было бы обойтись и без очистки и сразу ниже писать код футера. Но в IE в таком случае появляются странные подёргивания фона у футера при наведении на его ссылки мыша. Браузер словно хочет подпрыгнуть и заполнить все пустующие места какие есть. Поэтому мы просто добавим эту строчку и не станем заморачиваться. А теперь открываем наш лист стилей и допишем следующий код: #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.jpg) inside; } #news li { font-size: 75%; padding: 5px 10px; } Здесь мы для начала поменяли фон для блока новостей, чтобы визуально отделить колонку от основного содержимого. Затем задали ширину блока, цвет для шрифта и обтекание справа. С заголовком получилось хитро. Если вернуться чуток назад, то можно заметить, что у заголовка 2-го уровня (у списка учаснегов), также задан размер шрифта в 120%. Вообще по-умолчанию браузеры сами определяют размеры для заголовков в зависимости от их ранга. То есть по логике вещей, заголовок 3-го уровня должен быть мельче 2-го. А у нас наоборот! Это произошло потому, что заголовок списка учаснегов находится в блоке основного текста, для которого мы задали размер всего шрифта в 0.8em. Следующим правилом мы задали для списка стиль маркеров. По-умолчанию любой браузер отображает маркеры в виде чёрных кружков. Но можно задать и другое отображение - окружностей, квадратов, без маркеров, или вообще свой собственноручно нарисованный маркер. Как раз так мы и сделали. Нарисовали симпатишную зелёную галку - с размерами 14х17 пикселей и указали в стиле ссылку на неё - url(marker.jpg). Следом приписали слово inside. Что это значит? Маркеры по-умолчанию не входят в сам блок текста. Когда мы задаём поля для текста, то маркеры не слушаются и вылезают за края. Это не всегда есть гут. Поэтому мы принудительно указали им быть inside, то есть внутри колонки с текстом. Сохранимся и посмотрим, что вышло! Ну а теперь настала очередь подвальчика! Подвал (или футер - footer) это весьма важная часть сайта, хотя и мало кто туда добирается, особенно при очень длинных страницах. Там обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация. Футер не должен доминировать над шапкой, но и не должен теряться, делая страницу неуравновешенной. Мы сделаем его немного контрастным по цвету, но небольшой высоты. Запишем в коде страницы сразу после этого места: ................. ...намечаются до самого утра. При наличии на небе луны — будет весело. </ul> </div> <div class="clearfloat"></div> Следующий код: <div id="footer"> <p>Главная | <a href="#">О нас</a> | <a href="#">О летучести</a> | <a href="#">О везучести</a> | <a href="#">Свинки-герои</a> | <a href="#">Подружиццо</a></p> <p>© PIG.RU, 2007 | All right reserved. | <a href="http://validator.w3.org/check?uri=http://www.dizweb.ru/pig/index.html">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dizweb.ru/pig/style.css">CSS</a> | | e-mail: <a href="mailto:piggs@pig.ru">piggs@pig.ru</a></p> </div> Здесь у нас слово Главная не является ссылкой (об этом мы уже говорили), а следом идут обычные ссылки на другие разделы сайта. Всего в футере два абзаца. В первом ссылки на разделы, а во втором как раз и есть всякие копирайты, ссылка на "мыло" и ещё две интересные ссылочки. Вот они уже как раз для форсу бандитского! :) Это ссылки на валидаторы - конторы, которые проверяют вашу страницу на соответствие стандартам. Ссылки устроены так, что нажимая на них, вы сразу даёте команду этим самым валидаторам проверить ваши странички (которые уже лежат в сети конечно же). И тут же получаете ответ. Сие придаёт вашим страничкам солидность и всеопщее наше верстальское одобрение. Вот практически и вся страница. Проверьте только чтобы в конце кода у вас было два /div подряд. Вот так: .......... href="mailto:piggs@pig.ru">piggs@pig.ru</a></p> </div> </div> </body> </html> Второй /div - это закрытие области контейнера. Теперь допишем в листе стилей следующий код: #footer { background : #665; 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;) означает, что с обоих боков подвала не должно быть ничего. То есть он у нас занимает всю ширину нижней части контейнера. Ссылки у нас здесь ярко-жёлтые, а в активном состоянии - красные. Для текста мы выбрали размер мельче всех на странице - 70%. Как я и сказал, футер - важная часть, но не на столько, чтобы бросаться в глаза. Выравнивание для текста мы задали по центру. Самое последнее правило как раз служит для блока очистки, заданного атрибутом clearfloat, о котором мы говорили, верстая блок новостей. Сохраняемся, смотрим. Всё вроде бы хорошо, но как-то неуютно (особенно на белом фоне экрана). Добавим-ка мы всей странице тонкую светло-серую рамку! Откроем лист стилей, найдем вот это место: #container { width : 760px; margin : 0 auto; } И добавим следующую строчку: border : 1px solid #999; Должно получиться следующее: #container { width : 760px; margin : 0 auto; border : 1px solid #999; } Вот, собственно, и всё! От первоначального макета мало что осталось. Ну, главное идея, а править сайт можно бесконечно. :) Кстати, в следующем уроке я расскажу как сделать такое симпатичное меню, как сейчас на Парасенгах. Напоминаю, что наша верстка является "плавающей". Грубо говоря — элементы на странице располагаются как бы в потоке, занимая свободные места. Поэтому мы и ограничили часть пространства контейнером как коробкой, в которую уложили поочередно все элементы. Кроме плавающей, конечно же, есть и жесткая привязка элементов к странице. В самом общем случае для этого каждому элементу строго задается местоположение, например — расстоянием в пикселах от верхней и левой стороны экрана. Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
|
В избранное
