Конструирование и программирование
красивого сайта на пустом месте
С Интернетом, становящимся все более популярным каждую минуту, хорошо выглядящий вэбсайт является чем-то самим собой разумеющимся, чем-то таким, что должно быть. Очевидно, вы могли бы заплатить дизайнеру Web-страниц, чтобы он спроектировал одну и для вас, но не будет ли действительно круче спроектировать и запрограммировать это самому для себя? Вы можете сказать "трудновато…", но фактически, не такой уж это и тяжкий труд, если только знать, как это сделать!
В второй части обучающей курса, мы закодируем наш макет в совместимый со стандартами, кросс- броузерный сайт, используя xHTML, CSS, и JavaScript/jQuery. Запускайте вашу Коду, или что там у вас есть на этот случай... наступило время программировать!
Примечание переводчика: : Кода (Coda)-программа на платформе MAC, используемая для написания программного кода.
Шаг один - Что мы будем делать
Вы могли бы подумать, что мы будем использовать наш предварительно созданный макет сайта как некую основу и затем, в процессе кодирования, будем его упрощать, чтобы сделать всё более простым для нас, но это не тот случай! Вот как будет выглядеть наш сайт в браузере в конце обучающего курса:
Примите во внимание, что это не Photoshop-версия, а фактическое отображение результата в браузере Firefox. Это копия экрана, сделанная посредством команды "print screen"! Это как раз то, что вы увидите, когда всё будет закончено.
Некоторые соображения о дизайне:
- • Слайдшоу полностью работоспособно с гладкими переходами.
- • Заголовок - не изображение, а текст переданный средствами CSS.
- • Код CSS валидный и соответствует спецификациям и 2.1, и 3.0.
- • xHTML удовлетворяет требованиям спецификации strict 1.0 Doctype.
Шаг два - требования
Даже если я постараюсь быть ясным и кратким, насколько это возможно всюду в этом обучающем курсе, надеясь, что совершеннейший новичок мог бы следить за изложением и всё понимать, то это будет всего лишь пожеланием. Несомненно, копирование и вставка возможны, но чтобы понимать все объяснения, вы должны обладать некоторыми познаниями в технике сайтостроения:
- • твердые познание в области и HTML, и CSS настоятельно рекомендуются, но, возможно, вы будете руководствоваться знанием только основ;
- • важно понимать, как работает JavaScript, a точнее jQuery.
Если вы ничего об этих вещах не знаете, вы всегда можете изучить их. Вот некоторые полезные ссылки для этого:
- • 30 лучших практических советов для новичков по использованию HTML Джеффри Веема http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners;
- • HTML и CSS - САМЫЕ основы. Крис Койир. http://css-tricks.com/video-screencasts/58-html-css-the-very-basics.
- • Как работает jQuery. Джон Резиг. http://docs.jquery.com/Tutorials:How_jQuery_Works
Шаг три - Установка нашей среды разработчика
В этой части обучающего курса я постараюсь объяснить мой метод работы, когда я программирую вэб-сайты. Первая и вероятно самая важная вещь - о ваших инструментальных средствах. Какие приложения Вы собираетесь использовать, чтобы кодировать, отлаживать, проверять?
Для кодирования я выбрал Dreamweaver. "О Боже, ещё один WYSIWYG разработчик ", можете вы подумать, но нет, я не использую технику WYSIWYG. Я использую Dreamweaver, потому что я просто люблю его завершённость и его подсвеченный синтаксис. Если вы не испытываете желания платить 799 $US за эту программу, есть множество других великолепных редакторов кода, как бесплатных, так и за весьма умеренную цену. Я имею в виду Coda, Text Mate, Espresso или CSS Edit для Mac OS X, и Aptana Studio, Notepad++ или E Text Editor для Windows. Вы можете, очевидно, использовать блокнот или стандартный текстовый редактор Windows, но зачем так поступать, когда так много доступных великолепных инструментальных средств?
Следующая вещь, которую мы должны выбрать – продвинутый браузер. Нам нужен браузер с развитыми средствами отладки. Даже притом, что в каждодневной жизни я страстный приверженец Оперы, я использую в процессе разработки Firefox из-за его непревзойдённого инструмента: Firebug. Несо-мненно, Опера имеет "стрекозу", и Safari 4 также оснащен несколькими хорошими инструментальными средствами, но Firebug все еще на один шаг впереди, и это заставляет меня выбрать Firefox, как мой браузер для разработки. Вы должны в любом случае убедиться, что используете браузер, поддерживающий современные стандарты. Другими словами, не используйте Internet Explorer как ваше основное средство проверки. Даже при том, что мой выбор для проверки в течение разработки это Firefox, на моем компьютере установлены актуальные версии всех современных браузеров, чтобы можно было проверить, что все работает наилучшим образом на любом из них. Поэтому мои дизайны проверены в Firefox 3+, Opera 9.5+, Safari 3+, Chrome 1+, и Internet Explorer 7+. Таким образом, они должны правильно отображаться примерно для 95 % Интернет-пользователей.
Примечание редактора: это число может существенно меняться в зависимости от потенциальных клиентов сайта.
Хорошо, теперь, когда мы определились с инструментальными средствами, нам необходимо определить структуру каталога. Чтобы всё было ясно, я решил создавать новый "сайт" на моем локальном сервере, создав новую папку в www / папка. Я использую WAMP, как мой localhost. В пределах этого сайта, мы будем должны создать три папки, js/, css/, и img/. Я полагаю, что имена эти объясняют всё сами.
Теперь, когда мы определились с нашей рабочей средой, мы можем начать программировать!
Шаг 4 - xHTML
Я уже упомянул в этом обучающем курсе, что мы убедимся, что сформировали соответствующий стандарту (валидный) xHTML. Что это означает?
Большинство страниц на Всемирной паутине написано в машинных языках (типа HTML), которые позволяют вэб-разработчикам структурировать текст, добавлять содержание мультимедиа, опреде-лять, что появится, или стиль, каков должен быть результат.
Что касается каждого языка, они имеют свою собственную грамматику, словарь и синтаксис, и предполагается, что каждый документ, написанный на этих машинных языках, следуют этим правилам. [...]
Однако в то время, когда тексты на естественном языке могут включить проверку правописания или ошибки грамматики, документы, использующие языки разметки гипертекста могут (по различным причинам) не следовать этим правилам. [...]
Имея это в виду, мы можем определить “проверку валидности” как процесс проверки гипертекстового документа на соблюдение правил грамматики (вообще DTD), полноты использования патентной формулы.
Для проверки валидности используйте W3C службу проверки правильности.
Но почему нас так беспокоит валидность страницы? На то есть несколько причин, и первой из них является SEO. Поисковая машина Google дает лучшее ранжирование валидным страницам. Второй причиной является доступность. Люди, которые используют экранные средства чтения, не могут быть способны видеть ваш сайт правильно, если ваша разметка невалидна. И наконец, но не в последнюю очередь, способность создавать правильный код есть нечто, показывающее, что вы занимаетесь кодированием не только по воскресным дням.
А теперь мы должны поразмыслить о том, как мы собираемся структурировать наш дизайн, какие тэги мы собираемся использовать, какие идентификаторы мы собираемся им присвоить, и т.д. Вот что я придумал:
Теперь, когда мы знаем, что мы собираемся произвести, давайте приступим к определению основы нашего документа!
Основы
Я уже сказал вам, что мы собираемся использовать тип документа xHTML Strict (строгий). Это означает, что мы намерены отделить нашу структурную логику от логики нашего макета. Чтобы сказать браузеру, какую "грамматику" мы намерены использовать, мы должен определить так называемый DTD - Document Type Definition, или по-русски "определение типа документа". Определение типа документа в xHTML 1.0 Strict выглядит следующим образом:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Этот код должен быть помещен в самом начале во всех ваших HTML файлах. Нарушение этого правила приведет к неудавшейся попытке проверки валидности.
Далее нам нужно определить основы нашей страницы: заголовок и тело. Нам захочется иметь тэг наименования в вашем главном разделе, чтобы отобразить правильное название в области заголовка браузера вместо чего-то подобного "Безымянный 1". Я решил также поместить некоторые мета тэги для SEO, хотя все мы знаем, что они не настолько уж и полезны сегодня.
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <meta name="keywords" content="Roadside, Studio, Design,
Web, Icons, Logos" />
6. <meta name="description" content="Студия "На обочине" является
агентством по созданию великолепных сайтов!" />
7. <meta name="author" content="Felix Boyeaux" />
8. <meta name="robots" content="all" />
9.
10.<title>Roadside Studio</title>
11. </head>
12. <body>
13. <!--Здесь будет находиться содержание (контент) сайта-->
14. </body>
15. </html>
Как только это сделано, мы можем начать программирование фактического содержания.
Строка состояния
Помните, как я заставил Вас создать целую охапку групп слоёв и переименовывать их так, чтобы имя отражало их функцию? Вот теперь вы поймете, зачем. Посмотрите на эту палитру слоёв:
Можете увидеть, что я имею в виду сейчас? Ну, конечно же! Это дает нам структуру нашего HTML: у нас есть обёртывающая папка по имени "строка состояния (Status Bar)", в которой мы имеем подкаталоги. Эти подкаталоги представляют собой элементы блоков нашей страницы! Однако, это не защищает от ошибок. Опыт показывает, что мы нуждаемся в еще нескольких обёртывающих блоках, чтобы центрировать содержание области и, к тому же, иметь фон области, занимающий 100 % ширины. Мы также нуждаемся в обертке вокруг приветственного сообщения и области действия (action bar), чтобы сделать поле поиска плавающим и расположенным справа. Вот на что должен быть похож ваш код:
1. <div id="status-bar">
2. <div id="status-bar-content">
3. <form action="#search" method="post" id="search-form">
4. <p>
5. <input type="text" name="query" value="Search" />
6. <input type="submit" name="submit" value="Search!" />
7. </p>
8. </form>
9. <div id="status-bar-commands">
10. <p id="welcome">Welcome, Guest</p>
11. <p id="action-bar">
12. <a href="#login" title="Login">Login</a>
13. <a href="#sitemap" title="Sitemap">Sitemap</a>
14. <a href="#license" title="License">License</a>
15. </p>
16 </div>
17. </div>
18. </div>
Тэг div с идентификатором id="status-bar" это и есть наша обёртка, как вы уже, вероятно, поняли. В блоке содержания статус-бара (status-bar-content block) необходимо содержание этой области центри-ровать. Вы должны также обратить внимание на тэги параграфа в тэгах формы. Это необходимо для xHTML 1.0 Strict, чтобы проверить правильность. Последнее, что необходимо обдумать в этом фрагменте кода, это тот факт, что мы не заменяли наши тэги параграфа блоками div. Это как раз то, что дизайнеры Web-страниц называют семантическим кодированием. Параграф должен всегда быть обёрнут тэгами, чтобы выразить тот факт, что это читаемый текст. Это упрощает распознавание текста для экранных программ чтения.
Прекрасно! Это была строка состояния. Ха! Не так уж всё и сложно! Макет направляет логическое формирование иерархии слоёв в нашем PSD и формирует нужное направление нашей разметки. Имейте это в виду, чтобы сохранить семантику вашего HTML. Используйте тэги параграфа для параграфов, тэги блока кавычек для кавычек, и так далее.
Заголовок
Нам необходимо взглянуть на палитру слоёв, чтобы обрести идею относительно того, как это сформировать. Вот наш заголовок:
Теперь давайте трансформировать эту структуру в код. Нам нужна обёртка, блок логотипа, и два текстовых блоках: один для заголовка, один для подзаголовка. Однако, в этом случае мы не будем использовать тэги параграфа. Почему? Просто потому что мы можем получить более четкую семантику, используя тэги заголовка. Так как текст заголовка - первый заголовок в нашем документе, мы обернём его тэгом h1. Подзаголовок мы обернём тэгом h2, имея в виду, что это второй заголовок в нашем документе.
1. <div id="header">
2. <div id="logo">
3. <h1><a href="#home" title="Home Page">Roadside</a></h1>
4. <h2>Studio</h2>
5. </div>
6. </div>
А ещё мы сделали здесь ссылку на домашнюю страницу на эмблеме. Это - соглашение, которое в значительной степени использует каждый дизайнер Web-страниц. Как известно от пользователей, отсутствие такой ссылки может вызвать некоторое замешательство ваших читателей. Поскольку об этой части дизайна говорить больше нечего, давайте переходить к контентной части.
Позиции табуляции
Прежде чем начать работать непосредственно с табуляцией, мы будем должны добавить обёртывающий блок <div> с идентификатором "content", в котором будут содержаться позиции табуляции, обертка страницы, а также модули блога и твиттера. Когда это будет сделано, нам необходимо немного подумать о меню и как оно будет структурировано. Лучшим способом закодировать меню, по всей видимости, будет создание неупорядоченного списка, даже при том, что меню будет горизонтальным. Почему список? Список хорош тем, что он отобразит элементы с назначенными значениями, ничего не акцентируя. Это как раз то, что мы хотим. В каждом элементе списка, мы, очевидно, добавляем якорный тэг. Эта якорная ссылка не связывается с чем-то реальным; атрибут href для нашего обучающего курса равен #home.
1. <div id="content">
2. <ul id="tabs">
3. <li id="previous">
4. <a href="#previous" title="Previous"> <</a>
5. </li>
6. <li id="home" class="current">
7. <a href="#home" title="Home">Home</a>
8. </li>
9. <li id="portfolio">
10. <a href="#portfolio" title="Portfolio"> Portfolio</a>
11. </li>
12. <li id="about">
13. <a href="#about" title="About"> About</a>
14. </li>
15. <li id="contact">
16. <a href="#contact" title="Contact"> Contact</a>
17. </li>
18. <li id="next">
19. <a href="#next" title="Next"> ></a>
20. </li>
21. </ul>
22. </div>
Обратите внимание, что мы не оборачивали наши позиции табуляции блоком <div> с соответствующим идентификатором, потому что тэг <ul> это уже делает для нас. Вы должны пытаться всегда удалять так можно больше ненужных блоков <div>, поскольку это сделает страницу быстрее и чище. Вы можете также спросить себя, что означают символы "<" и ">". Они означают "ниже чем", и "больше чем" соответственно.
Пусть вас не волнует, что наше горизонтальное меню в настоящий момент является вертикальным списком; мы убедимся, что оно будет выглядеть соответствующим образом, когда мы напишем таблицу стилей CSS.
Обертка (wrapper)
"Обертка" это то, что я называю полем с демонстрацией слайдов и приветственным сообщением. Мы создадим тэг-контейнер <div> с идентификатором "page-wrapper", чтобы быть уверенными, что поле будет правильно определено. Этот тэг, очевидно, вложен в <div> "контент".
Теперь мы должны закодировать часть демонстрации слайдов. Мы создадим контейнер с идентификатором "slideshow". Внутри него мы создаем блок <div>, названный "slides", который будет содержать все изображения, которые мы хотим циклически отображать. В контейнере "slides" есть ссылка, чтобы переадресовать читателя к разделу сайта "Портфолио". Контейнер <div> с идентификатором "slideshow-commands" содержит команды "предыдущий" и "следующий", и заголовок текущего слайда.
1. <div id="page-wrapper">
2. <div id="slideshow">
3. <div id="slides">
4. <a href="#portfolio.work1" title="See details" class="thumb default-
slide">
5. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch
/./img/slideshow/1.png" alt="Flex Engine Web Design" class=
"slideshow-image" />
6. </a>
7. <a href="#portfolio.work2" title="See details" class="thumb">
8. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch
/./img/slideshow/2.png" alt="Concept Labs Portfolio" class=
"slideshow-image" />
9. </a>
10. <a href="#portfolio.work3" title="See details" class="thumb">
11. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch
/./img/slideshow/3.png" alt="Everlast Studio"
class="slideshow-image" />
12. </a>
13. </div>
14. <div id="slideshow-commands">
15. <a href="#previous" title="Previous" id="previous-slide"><</a>
16. <a href="#next" title="Next" id="next-slide">></a>
17. <h4>
18. <a href="#portfolio.work1" title="See details" id="slide-title">
19. Flex Engine Web Design
20. </a>
21. </h4>
22. </div>
23. </div>
24. </div>
Примечание переводчика: Обратите внимание на строки 5,8 и 11 и запишите там те адреса, по которым будут размещены ваши собственные изображения.
Важная вещь здесь - способ, которым мы добавили все наши изображения слайдов в контейнере, чтобы сделать демонстрацию проще. Однако, мы должны иметь заданный по умолчанию слайд. В этом случае я добавил класс "default-slide" к ссылке, содержащей заданное по умолчанию изображение. Чтобы облегчить создание стилей, добавьте к этому изображению также класс "thumb". Если один элемент определяется несколькими классами (принадлежит не одному классу), то они записываются через пробел. Атрибут "alt" на изображениях является обязательным для правильного кода. Это также будет важно для нашего слайдшоу, так как сюда мы запишем заголовок слайда.
Следующим шагом для контейнера "page-wrapper" - отображенное сообщение и информация о возможностях контактов. Это будет достаточно просто. Мы нуждаемся в заголовке, который будет иметь тип h3, потому что это - наш третий заголовок на странице, тэг параграфа, содержащий непосредственно сообщение, и тэг параграфа, содержащий контактную информацию.
1.<div id="message">
2.<h3>Мы делаем потрясающие сайты!</h3>
3.<p>
Curabitur nec sem in risus adipiscing feugiat. Etiam elementum malesuada
purus. Quisque nec mi eu mauris ornare aliquam. Praesent adipiscing,
metus sed luctus condimentum, quam turpis interdum tortor, in dignissim
magna urna tempor odio. Integer porttitor. Nam dolor urna, ultricies
vitae, porttitor ut, dignissim vitae, elit.
4.</p>
5.<p id="contact-info">
6. <span id="phone">+33 1 23 45 67 89</span>
7. <span id="address">
34, Avenue des Champs-<br />
Elysées, 75006, Paris,<br />
France
8. </span>
9.</p>
10.</div>
Пожалуйста, обратите внимание, как мы помещаем номер телефона и адрес внутрь тэгов "span", чтобы иметь возможность назначить им разные стили. Не забудьте, что новые строки в вашем коде никак не влияют на текст, который напечатан на экране. Мы можем использовать их, чтобы делать наш код красивым, и выравнивать параграф правильно.
Поскольку всё сделано, наступило время для небольшого перерыва, чтобы посмотреть на результат. Это - полный код, который мы создали к настоящему моменту:
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
4.<head>
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6. <meta name="keywords" content="Roadside, Studio, Design, Web, Icons, Logos" />
7. <meta name="description" content="Студия "На обочине" является агентством по
созданию великолепных сайтов!" />
8. <meta name="author" content="Felix Boyeaux" />
9. <meta name="robots" content="all" />
10.
11. <title>Roadside Studio</title>
12.</head>
13.<body>
14.
15. <!-- STATUS BAR -->
16. <div id="status-bar">
17. <div id="status-bar-content">
18. <form action="#search" method="post" id="search-form">
19. <p>
20. <input type="text" name="query" value="Search" />
21.
22. <input type="submit" name="submit" value="Search!" />
23. </p>
24. </form>
25. <div id="status-bar-commands">
26. <p id="welcome">Welcome, Guest</p>
27.
28. <p id="action-bar">
29. <a href="#login" title="Login">Login</a>
30. <a href="#sitemap" title="Sitemap">Sitemap</a>
31. <a href="#license" title="License">License</a>
32.
33. </p>
34. </div>
35. </div>
36. </div>
37. <!-- HEADER -->
38. <div id="header">
39.
40. <div id="logo">
41. <h1><a href="#home" title="Home Page">Roadside</a></h1>
42. <h2>Studio</h2>
43. </div>
44.
45. </div>
46. <!-- CONTENT -->
47. <div id="content">
48. <!-- TABS -->
49. <ul id="tabs">
50. <li id="previous">
51.
52. <a href="#previous" title="Previous"><</a>
53. </li>
54. <li id="home" class="current">
55. <a href="#home" title="Home">Home</a>
56. </li>
57.
58. <li id="portfolio">
59. <a href="#portfolio" title="Portfolio">Portfolio</a>
60. </li>
61. <li id="about">
62. <a href="#about" title="About">About</a>
63.
64. </li>
65. <li id="contact">
66. <a href="#contact" title="Contact">Contact</a>
67. </li>
68. <li id="next">
69.
70. <a href="#next" title="Next">></a>
71. </li>
72. </ul>
73. <!-- PAGE WRAPPER -->
74. <div id="page-wrapper">
75.
76. <!-- SLIDESHOW -->
77. <div id="slideshow">
78. <div id="slides">
79. <a href="#portfolio.work1" title="See details" class="thumb
default-slide">
80. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/
336_siteFromScratch/./img/slideshow/1.png"
alt="Flex Engine Web Design" class="slideshow-image" />
81. </a>
82.
83. <a href="#portfolio.work2" title="See details" class="thumb">
84. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/
336_siteFromScratch/./img/slideshow/2.png" alt="Concept
Labs Portfolio" class="slideshow-image" />
85. </a>
86. <a href="#portfolio.work3" title="See details" class="thumb">
87. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/
336_siteFromScratch/./img/slideshow/3.png" alt="Everlast
Studio" class="slideshow-image" />
88. </a>
89.
90. </div>
91. <div id="slideshow-commands">
92. <a href="#previous" title="Previous" id="previous-slide"><</a>
93. <a href="#next" title="Next" id="next-slide">></a>
94. <h4>
95.
96. <a href="#portfolio.work1" title="See details" id="slide-title">
97. Flex Engine Web Design
98. </a>
99. </h4>
100. </div>
101. </div>
102. <!-- MESSAGE -->
103.
104. <div id="message">
105. <h3>We build great websites!</h3>
106. <p>
Curabitur nec sem in risus adipiscing feugiat. Etiam elementum
malesuada purus. Quisque nec mi eu mauris ornare aliquam.
Praesent adipiscing, metus sed luctus condimentum, quam turpis
interdum tortor, in dignissim magna urna tempor odio. Integer
porttitor. Nam dolor urna, ultricies vitae, porttitor ut,
dignissim vitae, elit.
107. </p>
108. <p id="contact-info">
109.
110. <span id="phone">+33 1 23 45 67 89</span>
111. <span id="address">
112. 34, Avenue des Champs-<br />
113. Elysées, 75006, Paris,<br />
114. France
115. </span>
116.
117. </p>
118. </div>
119. </div>
120. </div>
121. </body>
122. </html>
Вы можете проверить его валидность на сайте http://validator.w3.org/ и увидеть, что это валидный код. Хорошо, теперь мы можем продолжить и приступить к кодированию модулей.
Модуль блога
Код здесь довольно прямолинеен. Мы будем должны добавить контейнер <div> с идентификатором "blog" и классом "module", чтобы иметь возможность назначить одинаковое стилевое оформление этим двум модулям (имеются в виду модули блога и твиттера), так как они довольно аналогичны. Заголовок будет обёрнут тэгом h4, а название - тэгом h5. Это даст ясную схему с твердой иерархией в нашем документе. Последнее, что нужно рассмотреть здесь, это несколько строк для каждой публикации. Мы поместим это в тэги "blockquotes". Почему? А вот почему. Даже если это и не цитата в самом деле, это - все же текст, взятый из другой части сайта, так что использовать тэг "blockquotes" здесь вполне уместно. Мы также обернём ссылку "Читать далее" тэгами параграфа, чтобы сделать код валидным.
1. <h4 class="module-header-bar">Latest entries from the blog</h4>
2. <div class="blog-entry">
3. <h5><a href="#blogentry1" title="Vivamus sed risus">
4. Vivamus sed risus</a></h5>
5. <p class="meta">By Jonathan Davidson - 05 / 08 / 09</p>
6. <blockquote class="content">
7. <p>
8. Vivamus sed risus quis felis sagittis cursus. Duis blandit
9. tristique turpis. Nulla feugiat vehicula metus.
10. </p>
11. </blockquote>
12. </div>
13. <div class="blog-entry">
14. <h5><a href="#blogentry2" title="Pellentesque pulvinar">
15. Pellentesque pulvinar</a>
16. </h5>
17. <p class="meta">By The Team - 05 / 01 / 09</p>
18. <blockquote class="content">
19. <p>
20. Pellentesque pulvinar dolor nec orci. Pellentesque
scelerisque elit.
21. </p>
22. </blockquote>
23. </div>
24. <div class="blog-entry">
25. <h5><a href="#blogentry3" title="Cras in nibh">Cras in nibh</a></h5>
26. <p class="meta">By Nicholas Denman - 05 / 01 / 09</p>
27. <blockquote class="content">
28. <p>
29. Quisque dapibus, justo a bibendum pellentesque, tellus felis
30. cursus libero, posuere sodales diam ipsum in lorem.
31. </p>
32. </blockquote>
33. </div>
34. <p id="read-more-wrapper">
35. <a href="#blog" title="Read More">
36. Read More
37. </a>
38. </p>
39. </div>
Вы должны заметить, что мы добавили тэги параграфа внутри тэгов "blockquotes". Это нечто обязательное, чтобы удовлетворить требованиям валидности. Вместо того, чтобы добавлять идентификаторы для всех элементов публикации, мы добавили классы, чтобы использовать их несколько раз. Поэтому вы будете видеть, например, параграф с идентификатором "meta" или тэг "blockquote" с классом "content". Каждая публикация обернута также собственным контейнером <div>, чтобы сделать пространственное размещение более простым.
Модуль твиттера
Модуль твиттера подобен модулю блога, так что я пробегусь здесь побыстрее. Только, пожалуйста, помните, что структура HTML, которую мы программируем, определяется нашей палитрой слоёв на макете. В этом случае, например, вот как выглядит группа слоёв модуля твиттера:
Мы будем поэтому нуждаться в обертке области заголовка, и контейнерах для каждого твита, а также в блоке, содержащем кнопку. Этот фрагмент кода выглядит так:
1. <h4 class="module-header-bar">Follow the Roadside Team on Twitter</h4>
2. <div class="tweet">
3. <img src="http://d2o0t5hpnwv4c1.cloudfront.net
/336_siteFromScratch/img/team/1.png"
alt="Jonathan Davidson" />
4. <h5><a href="#@JonathanDavidson" title="Jonathan Davidson">
Jonathan Davidson</a></h5>
5. <blockquote>
6. <p>
7. Proin et libero. Curabitur molestie mauris eu massa.
8. </p>
9. </blockquote>
10. </div>
11. <div class="tweet">
<img src="http://d2o0t5hpnwv4c1.cloudfront.net
/336_siteFromScratch/img/team/2.png"
alt="Nicholas Denman" />
12. <h5><a href="#@NicholasDenman" title="Nicholas
Denman">Nicholas Denman</a></h5>
13. <blockquote>
14. <p>
15. Etiam felis ligula.
16. </p>
17. </blockquote>
18. </div>
19. <div class="tweet">
20. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/
336_siteFromScratch/img/team/3.png"
alt="Jessica Marshall" />
21. <h5><a href="#@JessicaMarshall" title="JessicaMarshall">
Jessica Marshall</a></h5>
22. <blockquote>
23. <p>
24. Pellentesque est massa, posuere eu.
25. </p>
26. </blockquote>
27. </div>
28. <div class="tweet">
29. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/
336_siteFromScratch/img/team/4.png"
alt="Ann De Wever" />
30. <h5><a href="#@AnnDeWever" title="Ann De Wever">
Ann De Wever</a></h5>
31. <blockquote>
32. <p>
33. Nulla facilisi. Nam lacinia tristique ante.
34. </p>
35. </blockquote>
36. </div>
37. <p id="get-tweets-wrapper">
38. <a href="#twitter">
39. Get More Tweets!
40. </a>
41. </p>
42. </div>
Нет ничего удивительного в том, что мы и здесь используем тэги "blockquotes" для содержания твитов. Мы программируем ссылки на страницы твиттера посредством заголовочных тэгов h5. Мы также используем тот же самый синтаксис для ссылки "Получить больше твитов", который мы сделали для ссылки "Читать далее".
Футер
Последней частью нашего документа HTML будет футер. Сформировать его будет очень просто. Нам необходим контейнер-обертка с идентификатором "footer", и внутри него другой контейнер, для изображения и параграфа, в котором мы запишем копирайт, фразу о правообладании и названия компании.
1. <div id="footer">
2. <div id="footer-image"></div>
3. <p id="footer-text">
4. Copyright © 2009 Roadside Studio<br />
5. All Rights Reserved
6. </p>
7. </div>
Действительно, никаких излишеств. Обратите внимание, что мы заменили символ авторского права значком ©, потому что иначе это не будет отображаться правильно.
Закончено!
Ну вот, верьте или не верьте, но мы фактически закончили нашу разметку. Вы смоги убедиться, что это совсем не так трудно, написать корректный и валидный HTML код, следуя группам слоёв макета. Ключевыми моментами должны являться логика макета и неторопливость, чтобы убедиться, что ничего не пропущено.
Вот код, который мы написали:
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
3.<head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <meta name="keywords" content="Roadside, Studio, Design, Web, Icons, Logos" />
6. <meta name="description" content="Roadside Studio is a web design agency
that makes beautiful websites!" />
7. <meta name="author" content="Felix Boyeaux" />
8. <meta name="robots" content="all" />
9. <link rel="stylesheet" media="screen" type="text/css" title="Style"
href="css/style.css" />
10. <title>Roadside Studio</title>
11.</head>
12.<body>
13.
14. <!-- STATUS BAR -->
15.
16. <div id="status-bar">
17. <div id="status-bar-content">
18. <form action="#search" method="post" id="search-form">
19. <p>
20. <input type="text" name="query" value="Search" />
21. <input type="submit" name="submit" value="Search!" />
22. </p>
23. </form>
24. <div id="status-bar-commands">
25. <p id="welcome">Welcome, Guest</p>
26. <p id="action-bar">
27. <a href="#login" title="Login">Login</a>
28. <a href="#sitemap" title="Sitemap">Sitemap</a>
29. <a href="#license" title="License">License</a>
30. </p>
31. </div>
32. </div>
33. </div>
34.
35. <!-- HEADER -->
36.
37. <div id="header">
38. <div id="logo">
39. <h1><a href="#home" title="Home Page">Roadside</a></h1>
40. <h2>Studio</h2>
41. </div>
42. </div>
43.
44. <!-- CONTENT -->
45.
46.<div id="content">
47. <!-- TABS -->
48. <ul id="tabs">
49. <li id="previous">
50. <a href="#previous" title="Previous"><</a>
51. </li>
52. <li id="home" class="current">
53. <a href="#home" title="Home">Home</a>
54. </li>
55. <li id="portfolio">
56. <a href="#portfolio" title="Portfolio">Portfolio</a>
57. </li>
58. <li id="about">
59. <a href="#about" title="About">About</a>
60. </li>
61. <li id="contact">
62. <a href="#contact" title="Contact">Contact</a>
63. </li>
64. <li id="next">
65. <a href="#next" title="Next">></a>
66. </li>
67. </ul>
68. <!-- PAGE WRAPPER -->
69. <div id="page-wrapper">
70. <!-- SLIDESHOW -->
71. <div id="slideshow">
72. <div id="slides">
73. <a href="#portfolio.work1" title="See details" class="thumb default-slide">
74. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch
/./img/slideshow/1.png" alt="Flex Engine Web Design"
class="slideshow-image" />
75. </a>
76. <a href="#portfolio.work2" title="See details" class="thumb">
77. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch
/./img/slideshow/2.png" alt="Concept Labs Portfolio"
class="slideshow-image" />
78. </a>
79. <a href="#portfolio.work3" title="See details" class="thumb">
80. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch
/./img/slideshow/3.png" alt="Everlast Studio"
class="slideshow-image" />
81. </a>
82. </div>
83. <div id="slideshow-commands">
84. <a href="#previous" title="Previous" id="previous-slide"><</a>
85. <a href="#next" title="Next" id="next-slide">></a>
86. <h4>
87. <a href="#portfolio.work1" title="See details" id="slide-title">
88. Flex Engine Web Design
89. </a>
90. </h4>
91. </div>
92. </div>
93. <!-- MESSAGE -->
94. <div id="message">
95. <h3>We build great websites!</h3>
96. <p>
Curabitur nec sem in risus adipiscing feugiat. Etiam elementum malesuada
purus. Quisque nec mi eu mauris ornare aliquam. Praesent adipiscing,
metus sed luctus condimentum, quam turpis interdum tortor,
in dignissim magna urna tempor odio. Integer porttitor. Nam dolor urna,
ultricies vitae, porttitor ut, dignissim vitae, elit.
97. </p>
98. <p id="contact-info">
99. <span id="phone">+33 1 23 45 67 89</span>
100. <span id="address">
101. 34, Avenue des Champs-<br />
102. Elysées, 75006, Paris,<br />
103. France
104. </span>
105. </p>
106. </div>
107. </div>
108.
109. <!-- BLOG MODULE -->
110.
111. <div class="module" id="blog">
112. <h4 class="module-header-bar">Latest entries from the blog</h4>
113. <div class="blog-entry">
114. <h5><a href="#blogentry1" title="Vivamus sed risus">Vivamus sed
risus</a></h5>
115. <p class="meta">By Jonathan Davidson - 05 / 08 / 09</p>
116. <blockquote class="content">
118. <p>
119. Vivamus sed risus quis felis sagittis cursus. Duis blandit tristique
turpis. Nulla feugiat vehicula metus.
120. </p>
121. </blockquote>
122. </div>
123. <div class="blog-entry">
124. <h5><a href="#blogentry2" title="Pellentesque pulvinar">Pellentesque
pulvinar</a></h5>
125. <p class="meta">By The Team - 05 / 01 / 09</p>
126. <blockquote class="content">
127. <p>
128. Pellentesque pulvinar dolor nec orci. Pellentesque scelerisque elit.
129. </p>
130. </blockquote>
131. </div>
132. <div class="blog-entry">
133. <h5><a href="#blogentry3" title="Cras in nibh">Cras in nibh</a></h5>
134. <p class="meta">By Nicholas Denman - 05 / 01 / 09</p>
135. <blockquote class="content">
136. <p>
137. Quisque dapibus, justo a bibendum pellentesque, tellus felis cursus
libero, posuere sodales diam ipsum in lorem.
138. </p>
139. </blockquote>
140. </div>
141. <p id="read-more-wrapper">
142. <a href="#blog" title="Read More">
143. Read More
144. </a>
145. </p>
146. </div>
147.
148. <!-- TWITTER MODULE -->
149.
150. <div class="module" id="twitter">
151. <h4 class="module-header-bar">Follow the Roadside Team on Twitter</h4>
152. <div class="tweet">
153. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch
/img/team/1.png" alt="Jonathan Davidson" />
154. <h5><a href="#@JonathanDavidson" title="Jonathan Davidson">
Jonathan Davidson</a></h5>
155. <blockquote>
156. <p>
157. Proin et libero. Curabitur molestie mauris eu massa.
158. </p>
159. </blockquote>
160. </div>
161. <div class="tweet">
162. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch
/img/team/2.png" alt="Nicholas Denman" />
163. <h5><a href="#@NicholasDenman" title="Nicholas Denman">
Nicholas Denman</a></h5>
164. <blockquote>
165. <p>
166. Etiam felis ligula.
167. </p>
168. </blockquote>
169. </div>
170. <div class="tweet">
171. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch
/img/team/3.png" alt="Jessica Marshall" />
172. <h5><a href="#@JessicaMarshall" title="JessicaMarshall">
Jessica Marshall</a></h5>
173. <blockquote>
174. <p>
175. Pellentesque est massa, posuere eu.
176. </p>
177. </blockquote>
178. </div>
179. <div class="tweet">
180. <img src="http://d2o0t5hpnwv4c1.cloudfront.net/336_siteFromScratch
/img/team/4.png" alt="Ann De Wever" />
181. <h5><a href="#@AnnDeWever" title="Ann De Wever">
Ann De Wever</a></h5>
182. <blockquote>
183. <p>
184. Nulla facilisi. Nam lacinia tristique ante.
185. </p>
186. </blockquote>
187. </div>
188. <p id="get-tweets-wrapper">
189. <a href="#twitter">
190. Get More Tweets!
191. </a>
192. </p>
193. </div>
194. </div>
195. <div id="footer">
196. <div id="footer-image"></div>
197. <p id="footer-text">
198. Copyright © 2009 Roadside Studio<br />
199. All Rights Reserved
200. </p>
201. </div>
202.</body>
203.</html>
Вы можете проверить его валидность еще раз и увидеть, что он успешно проверен как xHTML 1.0 Strict!
Шаг пять - CSS
Язык каскадной таблицы стилей - один из языков с чрезвычайно простым синтаксисом и поэтому очень прост для изучения. Однако, прежде всего из-за несогласованностей броузеров, овладеть им в полной мере может быть нелегко. Мы будем пытаться сделать код CSS настолько простым и кратким, насколько это возможно, стараясь, в то же время, заставить его взаимодействовать со всеми современными браузерами. Есть одна концепция, которой мы должны владеть, чтобы сделать это. Я имею в виду блоковую модель.
Блоковая модель это способ, с помощью которого поле отображается на вашей web-странице. Но одна иллюстрация, вероятно, лучше, чем долгое объяснение.
Это - стандартная модель блока, несущего в себе некое содержание, по спецификации W3C. Что является здесь особенно важным и на что следует обратить особое внимание, так это то, что фактическая ширина поля не равна той величине, которая определяется свойством "width" (ширина), а является суммой ширины собственно блока (width), отступа (padding), и ширины границы (border). Так скажем, мы имеем поле с набором ширины блока 200px, отступа с обеих сторон 25px и границей (рамкой) шириной 5px вокруг этого поля. Фактическая отображаемая ширина поля будет 260px и не 200px, как мы могли бы ожидать. Но это прекрасно, если мы хотим, чтобы поле занимало строго 200px по ширине, мы будем должны установить свойство ширины (width) в 140px, и все будет так, как нам нужно. Важно знать, как это фактически работает. Это позволит избежать головных болей впоследствии.
Хорошо, теперь, когда вы знакомы с концепцией модели поля W3C, мы можем начать программировать наш дизайн.
Сброс умолчаний в CSS
Я говорил прежде о несогласованностях браузеров. Одни браузеры имеют предустановленные поля для каждого блока (margin) 10px, другие устанавливают эти поля равными 15px. Имеются и другие расхождения. Это может вызвать очевидные проблемы при кодировании, если мы не обязательно нейтрализуем все эти предварительно заданные свойства в нашем коде. Решить эту проблему и, следовательно, помочь нам выполнить правильную разметку сайта, мы можем сбросив предварительно заданные свойства CSS. Есть много доступных способов сделать это, но по моему искреннему мнению, метод Эрика Мейера лучший. Мне очень нравится этот способ сбросить всё и позволить нам полностью управлять размещением. Вы можете найти это здесь: http://meyerweb.com/eric/tools/css/reset/. Я решил создать отдельный файл CSS с этим кодом, названный reset.css, и поместить его в папку CSS нашего шаблона.
1. html, body, div, span, applet, object, iframe,
2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3. a, abbr, acronym, address, big, cite, code,
4. del, dfn, em, font, img, ins, kbd, q, s, samp,
5. small, strike, strong, sub, sup, tt, var,
6. b, u, i, center,
7. dl, dt, dd, ol, ul, li,
8. fieldset, form, label, legend,
9. table, caption, tbody, tfoot, thead, tr, th, td {
10. margin: 0;
11. padding: 0;
12. border: 0;
13. outline: 0;
14. font-size: 100%;
15. vertical-align: baseline;
16. background: transparent;
17. }
18. body {
19. line-height: 1;
20. }
21. ol, ul {
22. list-style: none;
23. }
24. blockquote, q {
25. quotes: none;
26. }
27. blockquote:before, blockquote:after,
28. q:before, q:after {
29. content: '';
30. }
31.
32. /* remember to define focus styles! */
33. :focus {
34. outline: 0;
35. }
36.
37. /* tables still need 'cellspacing="0"' in the markup */
38. table {
39. border-collapse: collapse;
40. border-spacing: 0;
41. }
Я просто решил удалять всё: пусть будет пустота.
Примечание редактора оригинала: помните люди, проверка правильности должна работать для Вас, не против. Хорошо, ЕСЛИ Вы точно знаете, почему ваша страница не удовлетворяет требованиям валидности
Я знаю, что мне не нужно больше беспокоиться о вставках и удалениях, я удалил все предварительные установки, и теперь моя задача становится более лёгкой.
Если вы перезагрузите index.html файл в вашем браузере, вы увидите, что ничего не изменилось. Это вследствие того, что мы все ещё не связывали таблицу стилей с нашим HTML. Мы не включили ссылку на таблицу сброса стилей в секции заголовка. Вместо этого, мы вызовем reset.css файл из нашей основной таблицы стилей, используя команду @import, когда начнём создавать её.
Типографика
Я обычно делю мою таблицу CSS на две части. Одну часть, которая управляет размещением элемен-тов на странице, это моя основная таблица стилей, и другую, которая управляет типографикой. Эта часть содержит выравнивание текста, цвет шрифта, размер шрифта, межстрочный интервал, высоту строки и так далее. Это - хороший приём, потому что это позволяет вам большую гибкость в вашем процессе кодирования. Скажем, вы хотите изменить размер шрифта в заголовке h1 на 48px вместо 36px. Вместо того, чтобы начинать рыться в вашем файле style.css, который, возможно, содержит несколько сотен строк, вы можете открыть свою таблицу стилей типографики, найти стили, связанными с тэгом h1, изменить размер шрифта, и проблема решена!
При кодировании таблицы стилей типографики наш макет в Photoshop будет чрезвычайно полезен. Мы можем взять инструмент "текст" (T) в Photoshop, и запустить подсвечивание различных текстовых блоков нашего макета. Тем образом, мы можем увидеть, что намеревались назначить заголовку h1 размер шрифта 48px, цвет #4d4d4d, и гарнитуру Myriad Pro. Гарнитура Myriad Pro может вызвать некоторые проблемы. Myriad Pro - это не стандартный шрифт сети, так что мы не можем определить семейство шрифтов, начинающееся с Myriad Pro, и думать, что каждый будет видеть наш дизайн та-ким, каким его видим мы. Мы решим эту проблему позже, используя более продвинутые техники, а пока мы лишь определим семейства шрифтов с включенным Myriad Pro, и некоторыми другими шрифтами перехода на аварийный режим на случай, если на компьютере читателя не установлен Myriad Pro.
Если мы продолжим подобным образом, просматривая наш PSD, чтобы получить всю информацию о шрифтах, мы увидим, что наши тэги h3 должны иметь размер шрифта 24px, а тэги h5 иметь цвет #6eb9cc и так далее. То, что у нас получится в результате такой работы, выглядит примерно так:
1. h1 {
2. color: #4d4d4d;
3. font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
4. font-size: 48px;
5. font-weight: normal;
6. }
7.
8. h1 a { color: #4d4d4d; text-decoration: none; }
9.
10. h2 {
11. color: #6ec9cc;
12. font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
13. font-size: 12px;
14. letter-spacing: 28px;
15. text-transform: uppercase;
16. }
17.
18. h3 {
19. color: #6ec9cc;
20. font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
21. font-size: 24px;
22. font-weight: normal;
23. }
24.
25. h4 {
26. color: #ffffff;
27. font-family: Arial, Helvetica, sans-serif;
28. font-size: 12px;
29. font-weight: normal;
30. text-align: center;
31. }
32.
33. h4 a { color: #ffffff; text-decoration: none; }
34.
35. h5 {
36. color: #6ec9cc;
37. font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
38. font-size: 18px;
39. font-weight: normal;
40. }
41.
42. h5 a { color: #6ec9cc; text-decoration: none; }
43.
44. /* Paragraph styling */
45.
46. p {
47. color: #525252;
48. font-family: Arial, Helvetica, sans-serif;
49. font-size: 12px;
50. }
51.
52. p.meta { color: #707070; font-size: 10px; text-align: right; }
53.
54. p#footer-text { text-align: center; }
55.
56. div#message p { color: #4d4d4d; line-height: 20px; }
57.
58. /* Link styling */
59.
60. a {
61. color: #999999;
62. text-decoration: none;
63 }
64.
65. a:hover { text-decoration: none; }
66.
67. p#action-bar a { color: #ffffff; }
68.
69. p#action-bar a:hover { color: #6eb9cc; text-decoration: none; }
Я не думаю, что здесь есть что-то такое, что я должен объяснить. Это - только самые основы модели-рования внешнего вида. Обратите внимание, что я определил стили для стандартных тэгов параграфа и стандартных тэгов ссылок перед тем, как определить вид более специфичных текстовых блоков, такие мета параграфы, например. Это является частью концепции кодирования "Не повторяю себя". В качестве резервных шрифтов я решил использовать шрифты Helvetica и Arial, они не очень хорошо заменят Myriad Pro, и мы, вероятно, не будем использовать их вообще, как я объясню позже. Это только страховка.
Я хочу поговорить здесь об одной особенности кодирования стилей. Конечно же, отступы важны для удобочитаемости кода, но и не только. При первом взгляде вы можете подумать, что мой код выглядит слегка небрежно, но если вы смотрите на него более внимательно, то обнаружите, что я следую правилам очень строгого синтаксиса. Первый пункт этого синтаксиса определяет алфавитный порядок свойства. Это очень помогает обнаружению свойства, когда вам потребуется редактировать его впоследствии. Затем - факт, что я записываю стиль на одной единственной линии, если я не использую более трёх свойства для этого элемента, и что это не заданный по умолчанию стиль, который уже объявлен, как, например, стиль для тэга параграфа. Можно подискутировать, хорошо это читается, или нет, но это радикально уменьшает размер файла. На мой взгляд, не так уж трудно это читать даже притом, что объявления находятся на одной линии. Это даже делает код CSS более кратким и его проще просматривать.
Самое важное в вашим стиле кодирования - логичность. Если вы не хотите использовать однолинейное объявление, не делайте этого. Ваш стиль кодирования должен быть комфортным для вас. Я не смею утверждать, что мой стиль кодирования лучший; я просто делаю так, как привык. Я приветствую попытки находить свой собственный стиль, и этот стиль может оказаться более рациональным!
Установка нашей основной таблицы стилей
Когда мы делали сброс, я говорил, чтобы вы не подключали его в файле HTML, непосредственно используя тэг ссылки, потому что мы собирались вызывать этот файл из нашей основной таблицы стилей. Вы могли, очевидно, включить все ваши файлы CSS непосредственно в код HTML, но я решил так не делать, поскольку это придаёт разделу заголовка более опрятный вид.
Нам нужно создать нашу главную таблицу стилей. Я обычно называю её style.css, но вы можете назвать её main.css, master.css, screen.css или как-то иначе. В этой таблицы стилей, мы будем должны включить сначала наш сброс, затем нашу таблицу стилей типографики. Чтобы сделать это, я использую правило @import. Ваши первые строки в таблице style.css файле должны выглядеть следующим образом:
1. @import url ('reset.css');
2. @import url ('typography.css');
Этими строками мы подключаем наши две таблицы стилей в файл style.css, и теперь мы должны вызывать один файл в разделе заголовка HTML-файла.
1. <link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css">
Если мы теперь посмотрим на нашу web-страницу, вот что мы увидим:
Я буду должен согласиться с вами, если вы скажете, что это не производит должного впечатления в настоящий момент, но вы можете всё же увидеть, что некоторые подробности смотрятся точно, как мы того хотим, к примеру, логотип или мета параграфы.
Теперь, когда мастер-таблица установлена, мы можем, наконец, приступить к созданию стилей !
Тело
Мы должны установить некоторые основные стили для тэга "body". Центрировать изображение, используя автоматическую установку полей, установить цвет фона, и ширину, равную 100 %.
1. body {
2. background-color: #f8f8f8;
3. margin: auto;
4. width: 100%;
5. }
Строка состояния
Как всегда, мы начнём сверху и проделаем наш путь вниз, к футеру. Я люблю программировать, когда мои макеты разделены на блоки. Например, я начинаю с заголовка, затем прерываюсь, кодирую основное содержание, и так далее. Это способствует мотивации. Привлекает также полная завершён-ность области перед началом работы над другим фрагментом.
Итак, прежде, чем мы начнём писать код CSS для строки состояния, давайте потратим некоторое время и посмотрим, в каких изображениях мы нуждаемся для этого. Во-первых, это фоновое изображение, которое является простым градиентом, и которое будет повторено на оси X. Во-вторых – фоновое изображение для области действия: скругленный прямоугольник. Мы могли бы, очевидно, использовать здесь свойство "border-radius", но я решил использовать изображение, чтобы оно выглядело без изъянов во всех браузерах. И последнее изображение, в котором мы нуждаемся для нашей строки состояния, это фоновое изображение для поля поиска.
Давайте начнём с фонового изображения. Поскольку я сказал, что мы повторим это изображение на оси X, то нам нужно изображение шириной всего в 1px. Это радикально уменьшит его размер. Выбираем инструмент Выделение единичного столбца (Single Column Marquee Tool) в Photoshop, и следуем в Строку состояния / группа слоёв "поле" (Status Bar / Box), отключаем видимость слоя "граница (Border)", и объединяем вместе слои "фон (Background)" и "тень (Shadow)". Как только это сделано, выделяем сектор шириной 1рх этого только что созданного слоя вашим инструментом выбора, копируем, и вставляем в новый документ. Этот документ должен быть размером 1*50px. Из-за некоторых особенностей этого поля мы будем должны уменьшить его высоту до 40px. Просто подрежьте его на 10 пикселов, а затем сохраните для Web (Alt + Shift + Ctrl + S) в формате PNG 24, и назовите status-bar-bg.png. Сохранение для Web предлагает мощные инструментальные средства сжатия, чтобы сделать размеры файла как можно меньше. Это очень важно при работе с сетью, и именно поэтому вы должны всегда использовать тот инструмент.
На очереди фоновое изображение области действия (Action Bar); откройте группу слоёв "область действия (Action Bar)" и выберите слой по имени "форма (Shape)". Создайте новый документ (Ctrl + A), скопируйте слой, и вставьте его в новый документ. Вы будете должны растеризовать векторную форму, чтобы скопировать её корректно. Не забудьте установить непрозрачность слоя на 55% снова. Сохраните документ для Web, и назовите его action-bar-bg.png.
Заключительным шагом преобразования дизайна в изображения будет поле поиска (Search Field). Идём в группу слоёв "поле поиска", скрываем слой "поиск (Search)", и объединяем слои "лупа (magnifier)" и "форма (shape)" вместе. Вновь создаём новый документ (Ctrl + A), и копируем в новый документ. Сохраняем созданное как search-field.png.
Хорошо, теперь, когда мы разделались с изображениями, мы можем начать программировать. Первое, что мы хотим сделать, это создать контейнер. Определим его ширину и высоту, а так же фоновое изображение и границу.
1. div#status-bar {
2. background: url('../img/status-bar-bg.png') repeat-x;
3. border-bottom: 2px groove #ffffff;
4. height: 40px;
5. width: 100%;
6. }
Стиль "groove" для границы дает нам тот хороший вид, который мы изо всех сил пытались получать в Photoshop. Мы установили ширину 40px даже при том, что наш фон - 50px из-за модели поля.
Нам хотелось бы быть уверенными, что содержание этой области центрировано. Проблема здесь состоит в том, что мы хотим, чтобы фон занял 100 % ширины, в то время как содержание должно центрироваться. Вот почему мы использовали обёртывающий контейнер, который содержит в значительной степени то, что мы вставили в нашу строку состояния. Мы должны использовать здесь ширину 800px и поля с автоматическим выбором их ширины.
1. div#status-bar-content {
2. margin: 10px auto 0px auto;
3. width: 800px;
4. }
Чтобы правильно поместить две части строки состояния, левую и правую, мы определяем ширину и свойство "float".
1. div#status-bar-commands {
2. width: 400px;
3. }
4.
5. form#search-form {
6. float: right;
7. width: 200px;
8. }
Теперь нам нужно определить стиль команд строки состояния (status-bar-commands), чтобы сделать область действия (action bar) плавающей в середине строки состояния (status bar). Мы также помеща-ем правое фоновое изображение в строку состояния. Отступы и поля, очевидно, также используются, чтобы всё выглядело должным образом. Примите во внимание блоковую модель при устанавлении этих свойств! Вот почему мы устанавливаем высоту области действия в 14px вместо 30px; мы имеем отступы 8px.
1. p#welcome {
2. float:left;
3. padding-top: 7px;
4. width: 150px;
5. }
6.
7. p#action-bar {
8. background: url('../img/action-bar-bg.png') no-repeat;
9. height: 14px;
10. margin-left:200px;
11. padding: 8px 28px;
12. width: 154px;
13. }
14.
15. p#action-bar a:before {
16. content: '| ';
17. }
18.
19. p#action-bar a[title="License"]:after {
20. content: ' |';
21. }
Мы добавляем разделитель "|", чтобы отделить ссылки в области действия. Я принял такое решение, потому что это наиболее правильно семантически. В самом деле, те ссылки (имеется в виду логин, карта сайта и лицензия) не имеют абсолютно ничего общего с нашим содержанием, поэтому помеще-ние их в HTML код было бы по существу неправильным. Обратите внимание на довольно сложный последний селектор, который выделяет последнюю ссылку и добавляет канал после всех ссылок, так же, как перед ссылками.
Последний пунктом будет назначение стилей для поля поиска и добавление фонового изображения к нему. Нам необходимо сбросить некоторые значения стилей, которые назначаются полям ввода по умолчанию браузера, и мы должны также скрыть кнопку подтверждения. Это, возможно, не лучшее решение, когда мы говорим о доступности, но, тем не менее, я решил, что дизайн в данном случае важнее.
1. form#search-form input[type="text"] {
2. background: url(../img/search-field.png) no-repeat;
3. border:none;
4. height:20px;
5. padding: 5px 0px 0px 30px;
6. width:170px;
7. }
8.
9. form#search-form input[type="submit"] {
10. display: none;
11. }
Это - то, что мы должны теперь видеть:
Выглядит достаточно похожим на наш макет PSD, не так ли? Это именно то, что мы хотим! Давайте теперь продолжим и создадим заголовок.
Заголовок
Заголовок практически состоит из фонового изображения, так что закодировать его будет довольно просто.
Первое, что мы должны сделать, это подготовить наше изображение. Так что перейдите к группе слоёв "заголовок (Header)", и объедините вместе слои "изображение (Image)" и "форма (Shape)". Теперь создайте документ (Ctrl + A), и, наконец, скопируйте и вставьте всё в новый документ. Документ дол-жен быть размером 1600*250px.
Теперь у нас проблема. Мы не хотим, чтобы фоновое изображение заголовка повторило себя по ширине экрана, если разрешающая способность экрана читателя окажется более чем 1600px. Мы поэтому должны скрыть края посредством плавного перехода, добавляя маску слоя, и заставляя левую и правую границу постепенно исчезнуть до прозрачности. Однако прозрачность на таких больших изображениях может загружаться чрезвычайно долго, так что я заполнил подложку цветом #6eb9cc.
Это изображение огромно, так что мы должны сжать его, чтобы заставить это загружаться быстрее. Я выбрал сохранение в формате PNG8 только с 256 цветами. Это уменьшит размер почти на 80% по сравнению с форматом PNG 24, который занимает очень уж много места! Назовите этот файл image.png.
Хорошо, теперь кодируем. Мы хотим, чтобы изображение заголовка центрировалось в пределах секции "заголовок". Но чтобы позволять широким экранам отображают наш дизайн правильно, мы должны применить цвет фона также так, чтобы это могло постепенно исчезнуть приятно. Мы также устанавливаем рамку. Вместо того, чтобы использовать стиль "groove", я использую стиль "ridge", который является полной противоположностью, потому что помещает начальный цвет наверху, а не в основании, и получается то, что мы хотим в этом случае. Я также применяю некоторые стили к логотипу, чтобы разместить его в нужном месте./p>
1. div#header {
2. background: url('../img/header.png') no-repeat;
3. background-color: #6eb9cc;
4. border-bottom: 2px ridge #ffffff;
5. height: 250px;
6. width: 100%;
7. }
8.
9. div#logo {
10. margin: auto;
11. padding-top: 35px;
12. width: 800px;
13. }
Фактически это все, что имеет отношение к нашему заголовку. Мы можем теперь проверить резуль-тат в браузере:
Блок с контентом
Здесь мы должны слегка нарушить наше семантическое правило. В самом деле, чтобы поместить верхнюю и нижнюю тень в контейнер основного содержания, мы должны создать пустые контейнеры в нашей разметке: один с идентификатором "верхняя тень блока контента (content-top-shadow)" и другой, с идентификатором "нижняя тень блока контента (content-bottom-shadow)". Первый из этих контейнеров должен бы быть помещен между секцией заголовка и блоком с контентом, а другой между содержанием и футером. Мы могли бы воспользоваться возможностями CSS 3 для решения этой проблемы (имеется в виду составное фоновое изображение - multiple backgrounds), но это свойство еще не поддерживается большинством браузеров, так что мы пока воздержимся от применения этой методики.
Прежде чем начать кодирование, мы должны подготовить изображения. Переходим к группе слоёв "содержание/пространство (Content/Box)", и объединяем фоновую форму с двумя слоями с тенями. Берём инструмент Выделение единичного столбца (Single Column Marquee Tool) и выделяем полоску шириной 1px на объединённом слое. Копируем и вставляем в новый документ. Затем отрезаем верхние 20px изображения инструментом Обрезка (Crop Tool). Сохраните это для Web как PNG 24 под именем content-top-shadow.png. Вслед за этим Редактировать-> Трансформировать-> Повернуть на 180 (Edit->Transform->Rotate 180), и сохраните вновь, на сей раз как content-bottom-shadow.png.
Контейнеру div#content мы назначаем такие свойства, как отступ и ширина, но самой интересной частью здесь являются два контейнера с тенями . Мы, естественно, устанавливаем для них высоту, ширину и фоновое изображение, которое повторим по оси X. Это производит иллюзию тени. Я также назначил для контейнера content-bottom-shadow свойство clear: both, потому что я знаю, что мои модули будут плавающими, и что иначе это работать не будет.
1. div#content {
2. margin: auto;
3. padding-bottom: 50px;
4. position: relative;
5. width: 800px;
6. }
7.
8. div#content-top-shadow {
9. background: url('../img/content-top-shadow.png') repeat-x;
10. height: 20px;
11. width: 100%;
12. }
13.
14. div#content-bottom-shadow {
15. background: url('../img/content-bottom-shadow.png') repeat-x;
16. clear: both;
17. height: 20px;
18. width: 100%;
19. }
Обратите внимание, как мы установили позиционирование для контейнера div#content: относительное. Удобство этого мы оценим позже, когда разместим наше табулированное навигационное меню.
Хорошо, теперь, когда мы финишировали с трудами в этом поле, мы можем начинать назначение стилей содержанию!
Обертка страницы
Вместо того, чтобы начинать назначение стилей для меню, мы удостоверимся сначала, что наша обертка страницы отображена правильно.
Для начала мы добавим некоторые основные стили для обертки страницы. Мы определим ширину, высоту, отступы и поля так, как мы хотели сделать это в нашем PSD, и имея в виду блоковую модель W3C (да, она нас преследует!), и добавим белый цвет фона и рамку. Поскольку мы будем использовать свойство "float" чтобы отобразить табулированное навигационное меню, нам необходимо использовать свойство "clear: both", и, так как мы используем фиксированную высоту, мы хотим скрыть любое перекрытие, чтобы не нарушить наше размещение элементов макета. Перекрытия быть не должно, но ручаться нельзя.
1. div#page-wrapper {
2. background-color: #ffffff;
3. border: 1px solid #bababa;
4. clear: both;
5. height: 233px;
6. margin-top: 75px;
7. overflow: hidden;
8. padding: 15px;
9. width: 768px;
10. }
Мы намереваемся теперь заняться полем демонстрации слайдов. Это действительно основная часть работы. Благодаря блоковой модели, мы можем использовать свойство "border", чтобы отобразить вертикальный разделитель, который мы хотим видеть между демонстрацией слайдов и сообщением.
1. div#slideshow {
2. border-right: 1px solid #b2b2b2;
3. float: left;
4. padding-right: 15px;
5. width: 375px;
6. }
Теперь нам необходимо удостовериться, что отображается только один слайд, когда страница загружена, потому что способ, который мы использовали до настоящего время, приводит к отображению всех трёх слайдов в одно и то же самое время, что полностью ломает наш дизайн. Мы могли бы, очевидно, довериться нашему JavaScript, но это не приемлемо, поскольку есть масса людей, у которых JS не активирован, и они не смогут видеть нашу страницу. Назначив стили каждому слайду, мы поэтому все слайды скроем, и лишь затем только отобразим один с классом "заданного по умолчанию (default-slide)".
1. div#slides {
2. border: 1px solid #a7a7a7;
3. height: 200px;
4. width: 370px;
5. }
6.
7. div#slides a.thumb {
8. display:none;
9. }
10.
11. div#slides a.default-slide {
12. display:block;
13. }
После того, что мы сделали, остался последний шаг в назначении стилей командам демонстрации слайдов. Мы должны вырезать несколько изображений из PSD. Вы запускаете привычный процесс и перемещаетесь по цепочке группы слоёв "Контент/Обертка/ Демонстрация слайдов/Команды" (Content/Wrapper/Slideshow/Commands) и растеризуете все слои в последней группе. Затем копируйте стрелку "влево", стрелку "вправо" и фон в новые документы и сохраните их как commands-previous-slide.png, commands-next-slide.png и commands-bg.png соответственно.
Теперь мы должны включить их в наш шаблон. Я сначала определяю размещение панели команд, с его фоновым изображением, шириной и высотой, а также её позиционирование position: relative; чтобы была возможность центрировать её под полем со слайдами.
Теперь мы можем использовать технику замещения основных изображений, чтобы сделать наши кнопки команд просмотра "предыдущий" и "следующий" приятными глазу.
Наконец, верхнее поле у заголовка необходимо центрировать вертикально.
1. div#slideshow-commands {
2. background: url('../img/commands-bg.png') no-repeat;
3. height: 19px;
4. left: 15px;
5. padding: 3px 25px;
6. position: relative;
7. width: 290px;
8. }
9.
10. a#previous-slide {
11. background: url('../img/commands-previous-slide.png') no-repeat;
12. display: block;
13. float: left;
14. height: 12px;
15. margin-top: 2px;
16. text-indent: -9000px;
17. width: 9px;
18. }
19.
20. a#next-slide {
21. background: url('../img/commands-next-slide.png') no-repeat;
22. display: block;
23. float: rightright;
24. height: 12px;
25. margin-top: 2px;
26. text-indent: -9000px;
27. width: 9px;
28. }
29.
30. div#slideshow-commands h4 {
31. margin-top:1px;
32. width:100%;
33. }
Прелестно, наша демонстрация слайдов теперь отображается правильно. Нам осталось назначить стили сообщению и мы завершим с оберткой. Назначить стили будет довольно просто, потому что большинство из этого уже было сделано в файле typography.css.
Сначала мы установим стили для сообщения, чтобы оно имело левое поле 15px, и назначим поле в основании, чтобы отделить заголовок и позволить ему дышать.
1. div#message {
2. margin-left: 410px;
3. width: 350px;
4. }
5.
6. div#message h3 {
7. margin-bottom: 20px;
8. }
Самой трудной частью будет моделирование информации о контактах. Прежде, чем мы начнем, удостоверьтесь, что вы сохранили иконки "телефон" и "почта" в двух отдельных файлах и назвали их phone-icon.png и address-icon.png соответственно. Я чувствую, что все вы к настоящему моменту, вероятно, знаете, как это сделать, так что я не думаю, что необходимо объяснить это еще раз.
Мы будем использовать эти изображения с изображением фона, но так сделать, мы должны использовать тэги "span" как блоки, и, следовательно, назначить им стиль display: block. Остальное просто, мы добавляем фоновое изображение к каждому тэгу, назначаем одному свойство "float left", и используем отступы, чтобы выровнять текст вне иконки.
1. p#contact-info span {
2. display: block;
3. }
4.
5. span#phone {
6. background: url('../img/phone-icon.png') no-repeat 0px 1px;
7. float: left;
8. margin-top: 25px;
9. padding-left: 35px;
10. width: 125px;
11. }
12.
13. span#address {
14. background:url('../img/address-icon.png') no-repeat 160px 30px;
15. padding:5px 0px 0px 195px;
16. }
Если мы посмотрим на дизайн теперь, то вот что мы будем видеть:
Это все еще не соответствует нашим желаниям, но кое-что у нас действительно получилось. Следующий шаг заставит это выглядеть лучше!
Навигационное меню
Это будет крепкий орешек, и так просто его не расколешь. Меню, которое мы используем здесь, довольно сложное, и факт, что оно вытянуто в линию слева направо не делает его проще. Однако, факт и то, что мы уже разработали меню в Photoshop, и это, очевидно, поможет нам немного.
Спрайты
Мы собираемся использовать нечто, названное спрайтами CSS. Вместо того, чтобы использовать собственное изображение для каждой ссылки, мы объединим их все в одно большое изображение, названное спрайтом. Эта методика имеет многочисленные преимущества. Вместо того, чтобы загружать около двадцати изображений, включая их скрытые и активные состояния, мы должны будем загрузить спрайт. Это радикально уменьшает время загрузки и благоприятно для вашего сервера.
Итак, как мы сделаем такой спрайт? Начнем, создав в Photoshop новый документ размером 425*115px. Перетащим туда позиции табуляции меню из нашего PSD. Надеюсь, ясно, что я имею в виду технику drag and drop. Удалите весь ненужный пробел используя Ctrl + T, и наконец удалите активное состояние на позиции Портфолио, которое мы создавали, чтобы наш дизайн выглядел более реалистично. В этой линии теперь наши кнопки: о ни нейтральные, ни скрытые, ни активные. Вот, как это должно выглядеть:
Тогда продублируйте эту группу слоёв дважды, и разместите их с пробелом в 5px. Второй строкой будет состояние "нависания (hovered state)", так что цвет шрифта должен быть #6eb9cc. Ниже - активное состояние, так что шрифт должен быть полужирным. Примерно вот так:
Вы должны, очевидно, сделать ваш фон прозрачным. Я назначил белый фон, чтобы сделать это более четким, как скриншот. Когда всё сделано, сохраните это для Web в формате PNG 24 под именем tabs-sprite.png.
Важной деталью, которую нужно иметь в виду при создании спрайтов, является сохранение неизменной ширины каждого элемента, и тщательное их выравнивание, чтобы быть уверенным, что переход на фоновую позицию не вызовет проблем.
Хорошо, у нас есть спрайт. Вы можете задаться вопросом, как мы собираемся применять это к нашему неупорядоченному списку, который действительно не напоминает горизонтальное табулированное навигационное меню. Должен последовать ответ.
Прежде, чем мы начнём использовать наши изображения, нам необходимо поместить меню правильно. Вот где относительное позиционирование в блоке контента будет нам на руку. Используя абсолютное позиционирование позиций табуляции, мы можем теперь разместить её по отношению к её родительскому блоку, а не к окну. Это означает, что координата (0, 0) будет левой верхней точкой не окна, а "контента"! Это дает нам большую гибкость в нашем кодировании.
После того, как весь перечень помещен в нужное место, нам нужно назначить стиль в пунктах маркера. Использовав свойство float: left , мы сделаем так, что элементы будут отображаться в одну единственную линию. После добавления свойств ширины и высоты мы устанавливаем фоновое изображение на наш файл спрайта. Это означает, что каждый элемент неупорядоченного списка меню совме-стно использует один и тот же фон, и это - тонкость спрайтов CSS.
Мы используем также замену изображения, чтобы скрыть необработанные строки текстовых ссылок и сделать ссылку активизирующейся при щелчке по полной позиции табуляции.
1. ul#tabs {
2. margin-top: 30px;
3. position: absolute;
4. right: 0px;
5. top: -65px;
6. }
7.
8. ul#tabs li {
9. background: url('../img/tabs-sprite.png') no-repeat;
10. float: left;
11. height: 35px;
12. margin-right: 1px;
13. width: 70px;
14. }
15.
16. ul#tabs li a {
17. display: block;
18. height: 100%;
19. text-indent: -9000px;
20. width: 100%;
21. }
Отлично, следующий шаг будет касаться стиля каждой позицией табуляции. Мы должны применить правильную фоновую позицию, затем "всплывание" фоновой позиции, и наконец активную и текущую позиции. Например, вот как это выглядит для позиции табуляции "предыдущая":
1. ul#tabs li#previous {
2. background-position: 0px 0px;
3. width:80px;
4. }
5.
6. ul#tabs li#previous:hover {
7. background-position: 0px -40px;
8. }
9.
10. ul#tabs li#previous.current, ul#tabs li#previous:active {
11. background-position: 0px -80px;
12. }
Только не слишком волнуйтесь по поводу ширины, которую мы установили, это потому, что позиция табуляции "предыдущая" шире, чем стандартные позиции табуляции. Относительно других позициях табуляции поводов для беспокойства быть не должно.
Теперь проделайте это для каждой позиции табуляции, и не забудьте заменять значения пикселов на актуальные. Вы можете использовать инструмент линейки Photoshop (Ruler Tool), чтобы помочь себе. Вот законченный код:
1. ul#tabs li#previous {
2. background-position: 0px 0px;
3. width:80px;
4. }
5.
6. ul#tabs li#previous:hover {
7. background-position: 0px -40px;
8. }
9.
10. ul#tabs li#previous.current, ul#tabs li#previous:active {
11. background-position: 0px -80px;
12. }
13.
14. ul#tabs li#home {
15. background-position: -80px 0px;
16. }
17.
18. ul#tabs li#home:hover {
19. background-position: -80px -40px;
20. }
21.
22. ul#tabs li#home.current, ul#tabs li#home:active {
23. background-position: -80px -80px;
24. }
25.
26. ul#tabs li#portfolio {
27. background-position: -150px 0px;
28. }
29.
30. ul#tabs li#portfolio:hover {
31. background-position: -150px -40px;
32. }
33.
34. ul#tabs li#portfolio.current, ul#tabs li#portfolio:active {
35. background-position: -150px -80px;
36. }
37.
38. ul#tabs li#about {
39. background-position: -220px 0px;
40. }
41.
42. ul#tabs li#about:hover {
43. background-position: -220px -40px;
44. }
45.
46. ul#tabs li#about.current, ul#tabs li#about:active {
47. background-position: -220px -80px;
48. }
49.
50. ul#tabs li#contact {
51. background-position: -290px 0px;
52. }
53.
54. ul#tabs li#contact:hover {
55. background-position: -290px -40px;
56. }
57.
58. ul#tabs li#contact.current, ul#tabs li#contact:active {
59. background-position: -290px -80px;
60. }
61.
62. ul#tabs li#next {
63. background-position: -360px 0px;
64. width: 65px;
65. }
66.
67. ul#tabs li#next:hover {
68. background-position: -360px -40px;
69. }
70.
71. ul#tabs li#next.current, ul#tabs li#next:active {
72. background-position: -360px -80px;
73. }
На этом с табуляцией всё! И вот, что мы имеем теперь:
Модуль блога
Мы начнемся с основ, как обычно. Некоторый очевидный стиль для размещения дает нам нечто подобное этому:
1. div#blog {
2. float: left;
3. margin: 50px 15px 0px 0px;
4. width: 385px;
5. }
Затем, нашей заботой будет стиль области заголовка. Нам необходимо создают изображение, чтобы использовать его здесь как фон. Проследуем к нужной группе слоёв на макете, скроем текстовый слой, и объединим иконку и форму. Сохраним это как blog-header-bar.png.
Мы можем добавить фоновое изображение, как только мы установим высоту, ширину, отступы и поля:
1. div#blog h4.module-header-bar {
2. background: url('../img/blog-header-bar.png') no-repeat;
3. height: 29px;
4. margin-bottom: 15px;
5. padding-top: 13px;
6. width: 385px;
7. }
Следующим шагом будет задание стиля каждой публикации. Так как большая часть работы в этой части было сделано в typography.css, мы должны, в основном, добавить только некоторые поля и отступы.
1. div#blog div.blog-entry {
2. margin-left:15px;
3. }
4.
5. div#blog div.blog-entry h5 {
6. float:left;
7. width:200px;
8. }
9.
10. div#blog div.blog-entry blockquote {
11. clear:both;
12. padding:10px 0px 10px 15px;
13. }
14.
15. div#blog div.blog-entry p.meta {
16. padding-top:4px;
17. }
Заключительным шагом будет назначение стиля ссылке "читать далее" . Поскольку мы собираемся использовать три состояния для этой кнопки (нормальное, "всплывание" и активное) мы также будем использовать здесь спрайт. Перетащите нужную группу слоёв в новый документ, и дублируйте её дважды. Я оставил 10px между каждым состоянием. Для состояния "всплывания", я заменил цвет текста на #6eb9cc, а для активного состояния я инвертировал и оверлей градиента, и обводку, чтобы создать трехмерный эффект при щелчке по кнопке. Результат представлен ниже:
Я сохранил это как read-more-button.png. Чтобы использовать это, мы в основном поступим так же, как мы сделали для позиций табуляции. Мы также должны назначить кнопке свойство "float: right" и поля.
1. p#read-more-wrapper {
2. float:rightright;
3. margin-top:10px;
4. width:215px;
5. }
6.
7.p#read-more-wrapper a {
8.background:url('../img/read-more-button.png') no-repeat;
9. border:none;
10. display:block;
11. height:30px;
12. text-indent:-9000px;
13. width:214px;
14. }
15.
16. p#read-more-wrapper a:hover {
17. background-position: 0px -30px;
18. }
19.
20. p#read-more-wrapper a:active {
21. background-position: 0px -60px;
22. }
Вот мы и сделали модуль блога! Давайте посмотрим на то, что у нас получилось.
Модуль твиттера
Это почти полная аналогия модуля блога, так что я буду здесь краток.
Я полагаю, что нет никакой нужды объяснить, что вы должны сделать, чтобы получить фон области заголовка. Только не забудьте скрыть текст перед слиянием слоёв. Назовите это изображение twitter-header-bar.png.
Назначим поля и ширину этому полю, и затем добавим фон области заголовка так же, как мы сделали для блога.
1. div#twitter {
2. margin: 38px 0px 0px 415px;
3. width: 375px;
4. }
5.
6. div#twitter h4.module-header-bar {
7. background: url('../img/twitter-header-bar.png') no-repeat;
8. height: 40px;
9. padding-top: 26px;
10. width: 385px;
11. }
Нам нужно назначить стиль каждому твиту. Только обратите внимание, что мы назначили изображению свойство "плавающий (float)", чтобы заставить его появиться слева от названия. Поля и отступы установлены, исходя из концепции блоковой модели.
p class = "html">
1. div#twitter div.tweet {
2. margin: 3px 0px 17px 30px;
3. }
4.
5. div#twitter div.tweet img {
6. border: 1px solid #757575;
7. float: left;
8. height: 29px;
9. margin-right: 15px;
10. width: 29px;
11. }
12.
13. div#twitter div.tweet h5 {
14. position: relative;
15. top: -3px;
16. }
Причина, по которой мы позиционировали h4 тем способом, которым это сделано, в том, что заданная по умолчанию высота строки Myriad Pro является немного нетрадиционной. Не волнуйтесь, однако, если вы не хотите использовать в вашем коде "position: relative", это только незначительная подробность, которую мы упоминаем здесь.
Для кнопок "получить больше твитов", просто замените текст в вашем спрайте "читать далее", и сохраните результат, на сей раз как get-more-tweets-button.png. После этого, мы используем точно ту же самую методику, которую мы использовали для кнопки "читать далее".
1. p#get-tweets-wrapper {
2. float:rightright;
3. margin-top:9px;
4. width:215px;
5. }
6.
7. p#get-tweets-wrapper a {
8. background: url('../img/get-tweets-button.png') no-repeat;
9. border: none;
10. display: block;
11. height: 30px;
12. text-indent: -9000px;
13. width: 214px;
14. }
15.
16. p#get-tweets-wrapper a:hover {
17. background-position: 0px -30px;
18. }
19.
20. p#get-tweets-wrapper a:active {
21. background-position: 0px -60px;
22. }
Заканчивая модуль твиттера, мы также заканчиваем назначение стилей модулю контента! Я знаю, что это было действительно долго, но только посмотрите, что вышло из под наших рук. Я полагаю, что это стоило затраченных трудов!
Это действительно внушает трепет!
Футер
Наш футер состоит из двух частей. Первая - изображение, вторая - текстовая часть.
По тем же самым причинам, по которым мы подвергли лёгкому редактированию заголовок, мы должны сделать края изображения футера постепенно переходящими в цвет #6eb9cc. Скопируйте изображение в новый документ, используйте инструмент Градиент (G) и проделайте то же самое. Сохраните изображение в формате PNG 8, и назовите его footer-image.
Код, который мы будем использовать, почти точно такой же, как и тот, который мы использовали для заголовка, добавьте его в наш документ.
1. div#footer-image {
2. background: url('../img/footer-image.png') no-repeat #6eb9cc;
3. border-top: 2px groove #ffffff;
4. border-bottom:2px ridge #ffffff;
5. height:50px;
6. width:100%;
7. }
Наконец, для текста нижнего колонтитула мы добавляем уже созданное изображение content-top-shadow.png как фоновое, чтобы создать теневой эффект. Мы также очевидно устанавливаем высоту, ширину и отступ.
1. p#footer-text {
2. background: url('../img/content-top-shadow.png') repeat-x;
3. height: 37px;
4. padding-top: 13px;
5. width: 100%;
6. }
Сделано в CSS
Всё! Мы написали код CSS! Это было довольно трудно, не так ли? Важная деталь, которую необходимо помнить при кодировании: планирование размещения элементов должно продолжиться логически, всегда имея в виду блоковую модель. Поскольку теперь вы знаете, что с этим делать, вы будете кодировать намного более эффективно, и не будете испытывать трудностей с обеспечением кросс-браузерности, нейтрализуя дефекты браузеров. Вот как выглядит сейчас наша страница в Firefox:
Я могу уверить вас, что эта страница смотрится совершенно одинаково в IE8, Safari 3 и 4, Chrome 1 и 2, Firefox 3, и Opera 9.5! Однако, если мы теперь посмотрим, как это выглядит в IE7, мы обратим внимание на несколько дефектов. Если IE7 не установлен на вашем компьютере, тогда работайте в IE8 в режиме совместимости, и вы будете видеть страницу так, как она выглядела бы в IE7.
Вот что мы, например, заметим:
- • Строка состояния (статус-бар) слишком тонкая.
- • Область действия (аction bar) позиционирована неправильно, и отсутствие ":before" делает отступ неадекватным.
- • Обёртка страницы позиционируется неправильно.
- • Заголовок слайдшоу позиционируется неправильно.
Кажется, что это много, но в действительности это не так. Всё это может быть легко нейтрализовано, либо вставкой в код "!important", либо использованием условного комментария. Я не люблю ломать код CSS, так что я собираюсь вставлять в определённых местах условные комментарии. Но вы свободны в своём выборе соответствующей техники.
Нейтрализация проблемы IE
Я сказал, что мы собирались использовать условные комментарии. Что это такое? Это просто способ обращения только к браузерам Microsoft и используется для этого определенный тэг или группа тэгов, которые будут восприниматься только в IE. Другие браузеры будут интерпретировать это как комментарий и поэтому не будут их отображать. В нашем случае, мы собираемся в этом комментарии поместить тэг связи со внешней таблицей стилей.
1. <!--[if IE 7]>
2. <link rel="stylesheet" media="screen" type="text/css" title="Style"
href="css/ie7.css" />
3. <![endif]-->
Как только эта таблица стилей подключена, мы можем нейтрализовать проблемы, с которыми мы сталкиваемся. Создайте новую таблицу стилей, названную ie7.css, и сохраните её в нашей папке CSS.
Первое, что мы должны сделать, это установить высоту строки состояния. Ничего сложного, просто установите новую высоту, и убедитесь, что фон присоединен к основанию, так как там не 50px высоты, а только 40.
1. div#status-bar {
2. background-position: bottom;
3. height: 50px;
4. }
Мы должны далее нейтрализовать проблему, связанную с тем, что IE7 не поддерживает псевдофор-маты ":before" и ":after". Вместо того, чтобы увеличивать фоновые изображения к ссылкам в области действия или делать ещё что-то, мы несколько увеличим пространство ссылок, и центрируем их. Мы должны констатировать тот факт, что в исходном тексте IE не понимает, как правильно располагать плавающие элементы, не расположенные в пределах контейнера. Здесь мы должны использовать абсолютное позиционирование и фиксированное поле слева.
1. p#action-bar {
2. margin-left: 50px;
3. position: absolute;
4. text-align: center;
5. top: 10px;
6. }
7.
8. p#action-bar a {
9. margin-right: 5px;
10. }
Кроме того, мы имеем проблему с позицией обертки страницы. Ничего сложного в решении этой проблемы нет, просто используйте блоковую модель в ваших интересах. Мы также используем этот селектор, чтобы удалить сверхинтервал в основании блока с контентом.
1. div#content {
2. padding-bottom: 0px;
3. padding-top: 75px;
4. }
5.
6. ul#tabs {
7. top: 10px;
8. }
IE не имеет представления, как отобразить заголовок слайдшоу правильно, поскольку мы назначили ему относительное позиционирование. Измените его на абсолютное, и сбросьте верхний и левый отступы.
1. div#slideshow-commands h4 {
2. left: 0px;
3. position: absolute;
4. top: 4px;
5. }
Наконец, бывает, что IE удваивает отступ между заголовком публикации и её содержанием в модуле блога. Мы можем устранить это, устанавливая половину значения нужного отступа.
1. div.blog-entry blockquote {
2. padding-top: 5px;
3. }
Хорошо, вы можете теперь проверить наш дизайн в IE7 и увидеть, что он работает также превосходно!
Шаг шесть - JavaScript
Это не будет очень сложно. Мы будем использовать jQuery, плагин jQuery Cycle и Cufуn. Я объясню, как и где вы можете загрузить их, если мы к этому пришли.
Я использую здесь JavaScript, следуя философии прогрессивного совершенствования. Очевидно, демонстрация слайдов не будет работать правильно, если мы не имеем доступного JavaScript, но это могло бы быть легче, если мы добавили на странице несколько строк кода PHP и изменили ссылки "следующий" и "предыдущий". Однако, это не тема данного курса, так что я не буду этого касаться. Только имейте в виду, что потребовалось бы лишь 5 строк кода PHP, чтобы заставить это работать. Итак, это - для прогрессивно совершенствуемой демонстрации слайдов. Мы также сгладим шрифты заголовка посредством кода JavaScript. Это дает возможность нам использовать любой шрифт, который мы желаем, даже если читателю не устанавливали это на его компьютере. Если читатель не имеет доступного JavaScript, единственное, что произойдёт, так это то, что он будет видеть резервный шрифт.
jQuery
Мы не собираемся использовать всю мощь jQuery в этом обучающем курсе. Однако, это действительно упрощает для нас многое, так что мы собираемся включать jQuery в наш проект не взирая на то, что это дополнительные 19 килобайт.
Вы можете загрузить минимизированную и сжатую способом YUI версию jQuery с их официального сайта (http://jquery.com/) просто щёлкнув в поле “Production”, затем и щелкнув большую кнопку “Download”. Назовите этот файл jquery.js и разместите его в папку JS.
Чтобы использовать силу jQuery в нашем шаблоне, нам нужно вызвать его. Вы должны включить такой код в ваш главный раздел.
1. <script type="text/javascript" src="js/jquery.js"></script>
Вот именно: jQuery теперь загружается вместе со страницей и позволяет нам использовать все ее свойства и методы!
Cufуn
Я говорил прежде о сглаживании шрифтов JavaScript кодом, но это сейчас не актуально. Cufуn позволяет нам использовать любой шрифт, какой мы хотим видеть в нашем дизайне, и не беспокоиться, установлен он у читателя, или нет.
Я не собираюсь излагать основы использования Cufуn, так как Джеффри Вей уже делает выдающуюся работу об этом здесь: http://net.tutsplus.com/ videos/screencasts/the-easiest-way-to-use-any-font-you-wish/.
Загрузите Cufуn с этого сайта: http://cufon.shoqolate.com/generate/, и используйте он-лайновый конвертер шрифта, чтобы преобразовать шрифт Myriad Pro в файл JS. Если вы не знаете, как это делатся, посмотрите обучающий курс Джефа!
Сохраните Cufуn файл в папке JS, и назовите его cufon.js, а файл со шрифтом myriadpro.font.js.
Коль скоро эти файлы находятся в нужном каталоге, мы должны вызвать их из нашего index.html файла. Добавьте тэги сценария в секции заголовка нашего документа разметки, и используйте атрибут src, чтобы вызвать файлы. Не забудьте, что тэг сценария нужно закрывать. Использовать синтаксис < script /> нельзя. Выполнение такого кода приведет к неудачной проверке валидности, вы должны использовать синтаксис < script > , даже если тэг пустой.
1. <script type="text/javascript" src="js/cufon.js"></script>
2. <script type="text/javascript" src="js/myriadpro.font.js"></script>
Если вы перезагрузите сейчас страницу, то увидите, что … ничего не происходит. Это потому, что мы должны вызвать замену текста посредством Cufуn и специфицировать, какие тэги должны анализироваться.
Откройте новый тэг сценария, но вместо того, чтобы вызвать внешний JS файл, мы запишем наш код непосредственно в нашем файле HTML. Мы можем так поступить, потому что мы используем одну единственную строку кода. Однако, если ваш код более длинный, вы должны поместить его во внешнем файле. Метод запуска замены - Cufon.replace (), и в качестве параметра он требует указать тэг, который должен быть замещен. Поскольку мы уже вызвали jQuery, мы можем использовать механизм селекторов CSS, чтобы указать нужные тэги.
Код, который вы могли бы поместить в ваш HTML код, будет выглядеть следующим образом:
1. <script type="text/javascript">
2. Cufon.replace('h1, h2, h3, h5');
3. </script>
Мы просто назначаем тэги заголовка, и Cufуn делает волшебство случившимся. Перезагрузите страницу, и Вы можете теперь видеть, как Cufуn гладко заменил все наши тэги заголовков изображениями, построенными на лету!
Что случается, если читатель не имеет доступного JavaScript? Тогда используемым шрифтом будет тот, который указан в CSS! Если у читателя установлен шрифт Myriad Pro, то он будет использоваться, даже если он и не сглажен, а в противном случае используется один из наших резервных шрифтов. Это - красота прогрессивного совершенствования.
Демонстрация слайдов
Нашим заключительным шагом будет создание живой демонстрации слайдов. Чтобы сделать это, мы будем использовать невероятно полезный плагин jQuery, названный jQuery Cycle. Вы можете взять его здесь: http://malsup.com/jquery/cycle/lite/. Мы не будем использовать никаких сложных трансформаций, так что версия Lite будет прекрасно работать. Большим достоинством является то, что это только 3 kb!
Удостоверьтесь, что вы загружаете версию, сжатую методом YUI, затем поместите этот файл в нашу папку JS и назовите cycle.js. Мы, очевидно, должны вызвать его из нашего HTML. Поместите вызов плагина Cycle ниже вызова jQuery, чтобы быть уверенным, что плагин будет добавлен в конец к библиотеки.
1. <script type="text/javascript" src="js/cycle.js"></script>
Теперь нам нужно запустить эффект, используя код JavaScript. Здесь мы можем специфицировать не-которые опции к таким командам, как "предыдущий" и "следующий", задержка и т.д. Мы запишем этот код в новый файл, названный slideshow.js, и поместим это файл в папку JS, откуда он и будет вызываться нашим HTML кодом.
Перед стартом кодирования, мы должны решить, что же наша демонстрация слайдов должна делать. Заданное по умолчанию поведение состоит в том, чтобы взять каждый элемент от указанного контейнера, и затем заставить их отображаться один за другим, скрывая предыдущие изображение ("сколь-зить"). Это хорошо, так как мы помещаем все наши изображения для демонстрации слайдов в контейнер с идентификатором " Slides ". Какие особенности в поведении мы хотим видеть? Допустим, изображения должны меняться каждые 5 секунд, но мы также хотим, чтобы изображения менялись, если мы нажимаем на кнопку "предыдущий" или "следующий". Мы хотим, чтобы демонстрация слайдов делала паузу, когда курсор мыши "парит" над изображением. Это хорошо, поскольку даст людям время, чтобы кликнуть, если они заинтересуются текущим слайдом.
К счастью, все это чрезвычайно просто сделать, используя плагин Cycle. Как только DOM готова, заставим jQuery выбрать контейнер #slides, и запустить демонстрацию слайдов, используя метод cycle(). Затем, используя анонимный объект, который мы поместим как параметр, мы может установить поведение таким, какое мы хотим видеть.
Вот как ваш код должен выглядеть:
1. $(document).ready(function()
2. {
3. $('#slides').cycle({
4. prev : '#previous-slide',
5. next : '#next-slide',
6. timeout : 5000,
7. pause : 1
8. });
9. });
Что это всё означает? Отвечаю! Рrev и next – это, очевидно, идентификаторы наших команд "преды-дущий" и "следующий", задержка (timeout) - время между каждым слайдом в миллисекундах, и если опция "pause" установлена в 1, то в демонстрации будет пауза при "парении" курсора над изображением.
Если мы перезагрузим страницу, мы увидим великолепное скольжение изображений, и что команды "предыдущий" и "следующий" работают прекрасно! Однако, заголовок неизменно тот же самый. Мы можем решить эту небольшую проблему, вызывая функцию перед демонстрацией каждого изображения. Функция будет получать в качестве параметра атрибуты следующего слайда alt и href , чтобы быть способной заменить заголовок h4 и ссылку правильно. Вот эта функция:
1. function changeTitle()
2. {
3. var title = $(this).find('img').attr('alt');
4. var href = $(this).attr('href');
5.
6. $('#slide-title').text(title).attr('href', href);
7. }
Однако, это не будет работать, если мы не укажем, что эта функция должна быть вызвана перед каждой заменой слайда.
Чтобы добиться этого, мы просто должны определить свойство "before" в конфигурации нашего анонимного объекта. Это свойство должно устанавливать имя функции. Вы не должны использовать кавычки вокруг имени функции.
А это полный рабочий код:
1. $(document).ready(function()
2. {
3. $('#slides').cycle({
4. prev : '#previous-slide',
5. next : '#next-slide',
6. timeout : 5000,
7. pause : 1,
8. before : changeTitle
9. });
10. });
11.
12. function changeTitle()
13. {
14. var title = $(this).find('img').attr('alt');
15. var href = $(this).attr('href');
16.
17. $('#slide-title').text(title).attr('href', href);
18. }
Ну вот, если мы теперь перезагрузим страницу, мы увидим работу демонстрации слайдов такой, как нам хотелось, и это всего лишь несколько строк кода! Это и есть мощь jQuery и его плагина.
Шаг семь - Заключительные мысли
Мы написали код нашего сайта, основанного на шаблоне, который мы создали в части I, используя xHTML 1.0, CSS 2.1 и JavaScript. Вы можете проверить каждый отдельный файл проекта и увидеть, что они на 100 % валидны! Об этом важно помнить, так как это может значительно улучшить понятность и качество вашего кодирования.
Я искренне надеюсь, что вам понравились эти обучающие курсы, что вы изучили некоторые новые методы, и что вы теперь будете способны делать выдающиеся сайты самостоятельно! Я буду рад видеть то, что вы сумели сделать, в комментариях.
Комментарии
| Валюн | Не так, чтобы уж и так, но и не очень, чтобы уж и очень. |
Форма для добавления комментария отображается только авторизованным пользователям. Для того, чтобы добавить комментарий, необходимо авторизоваться.