Навигация
Кто на сайте?



Создание рабочего HTML-шаблона из макета сайта в стиле WEB-2.0 |
![]() |
![]() |
Написал Administrator | |
Вторник, 16 Июнь 2009 | |
Здравствуйте! Вот, как и обещал, представляю вторую часть серии уроков. В первой части мы с Вами научились создавать веб-дизайн в стиле WEB-2.0 в Photoshop'е, а сейчас я покажу Вам, как этот дизайн преобразовать в рабочий шаблон веб-сайта, соответствующий стандартам (X)HTML. Финальный результат Кликнув на изображении ниже, Вы перейдете на страницу, где представлен уже готовый вариант нашего шаблона, который мы будем делать в этом уроке. Загрузить Скачайте архив с материалами урока. clean-web-2.0-source.zip (ZIP, 3.4 MB) В этом уроке, мы создадим веб-макет фиксированной ширины с использованием некоторых основных методов кодирования. Ближе к концу, мы укрепим конструкцию с помощью jQuery. jQuery - это полностью бесплатный javascript фреймворк (framework) (для тех кто не в курсе, фреймворк - это набор готовых функций для облегчения решения типовых задач). Запаситесь терпением, урок будет долгим. Итак, начнем. Настройка структуры файлов 1. Создайте на своем компьютере новую папку и назовите ее web2. Это будет наша рабочая директория. 2. Внутри этой папки создайте следующее:
3. Откройте файлы index.html и styles.css в Вашем любимом текстовом редакторе (javascript.js мы сделаем чуть позже) Также откройте PSD файл в Photoshop; он лежит внутри архива clean-web-2.0-source.zip и называется web2-mockup-psd.psd. Создание фона 4. В Photoshop, отключите все слои в файле web2-mockup-psd за исключением двух нижних - bg и diagonal lines. 5. С помощью инструмента Rectangular Marquee Tool (M) создайте выделение с левого края точно 20px шириной по всей высоте документа. 6. Сделайте слой diagonal lines активным и, используя команду меню Edit > Copy Merged (Ctrl + Shift + C) скопируйте выделенную область и вставьте ее в новый документ. Сохраните файл в папке img под названием bg_body.jpg. Настройка HTML и CSS файлов 7. Откройте index.html. Первым делом нам нужно прописать ссылки на файлы style.css и javascript.js внутри контейнера head нашего HTML-документа. Это делается для того, чтобы браузер пользователя знал откуда подгружать стили и скрипты для нашей странички. Делаем таким образом:
8. В начале файла styles.css пропишем нулевые значения отступов и полей, чтобы наша страница заполняла все пространство окна браузера.
Создаем фон 9. Сейчас нам нужно сделать так, чтобы наш 20-пиксельный бэкграунд (body_bg.jpg) распределился по всей ширине страницы. Пропишем параметр background для контейнера body с повтором по горизонтали:
Для предпросмотра в браузере, кликните на ссылку Пример1. Пример1: диагональный фон установлен в качестве параметра background для элемента body. Установим контейнер div 10. Вернемся к нашему HTML-файлу. Заключим наш будущий контент в контейнер div, зададим ему ширину 1024 пикселя и обзовем параметр ID - #container.
11. В CSS-файле пропишем следующее:
Создание лого 12. В Фотошопе включите все слои в нашем файле и с помощью инструмента Rectangular Marquee Tool (M) создайте выделение вокруг логотипа 320px х 125px. Увеличьте масштаб и используйте вспомогательные направляющие Photoshop Guides (View > Show > Guides) для более точного выделения. 13. Скопируйте выделеную область Copy Merge (Ctrl + Shift + C) и вставьте в новый документ. 14. С помощью CSS и бэкграунда-спрайта мы создадим ролловер-эффект: когда пользователь наведет курсор на наш логотип, тот поменяет оттенок. Увеличим размер холста нашего логотипа, Image > Canvas Size (Ctrl + Alt + C). Введем двойную высоту, т.е. 250px и установим анкор в верхнюю среднюю позицию. 15. Продублируйте слой 1 и сместите его вниз, используя Move Tool (V). 16. Сохраняя дублированный слой (Layer 1 copy) активным, используйте команду Image > Adjustments > Replace Color… . Проследите за тем, чтобы радио-бокс был установлен в положение Image. Кликните на боксе Color и измените цвет на #e2e2e2. Можно поиграть с настройками Hue, Saturation, и Lightness, чтобы добиться эффекта ,который Вам нравится. Я использовал настройки, как на изображении ниже: 17. Сохраните файл для веб File > Save for Web (Alt + Shift + Ctrl + S) как logo.jpg в нашу папку img. В дальнейшем мы будем использовать одинаковые настройки для сохранения наших файлов. Я использовал JPEG, Very High, но Вы можете изменить эти настройки. Создаем меню навигации 18. Подобно тому, как мы делали с лого, создадим выделение 640px на 125px вокруг нашего меню. 19. Скопируйте выделенное (Copy Merged) и вставьте в новый документ. 20. Также, как в шаге 14, установим двойную высоту 250px, Image > Canvas Size (Ctrl + Alt + C), и не забудьте сменить анкор на верхний средний. Теперь снова продублируем слой 1 и сместим его вниз Move Tool (V). 21. Повторите действия, описанные в 16 шаге. 22. Сохраните файл как menu.jpg в папке img. Делаем HTML-разметку для Header'а 23. Итак, вернемся к нашему HTML/CSS. Займемся разметкой. Внутри контейнера div (#container) создадим другой div и назовем его #header. Для нашего лого мы будем использовать элемент H1, а для меню навигации - обычный ненумерованный список. Каждый элемент списка в тэге A будет иметь свой ID для CSS-ролловера, т.к. они все имеют различную ширину.
Стайлинг логотипа 24. Сперва, пропишем стиль для #header. Нам нужно сделать отступ сверху в соответствии с нашим макетом. В нашем макете область, отведенная под контент равна 960px, поэтому ширину для #header мы также зададим 960px. Центрируем его, задав для левого и правого отступа значение auto. Ниже Вы видите, что я задал отступы для верха (90px), для правой стороны - (auto), для низа - (0), и для левой стороны - (auto).
25. Продолжим работу с логотипом. Мы трансформируем наш элемент H1 в блок. Выровняем его по левому краю так, чтобы остальные элементы обтекали его справа. Таким образом панель навигации должна расположиться рядом с логотипом. Лого, созданный нами в 17 шаге, мы будем использовать как бэкграунд (фон). И, наконец, с помощью свойства text-indent, зададим отступ для нашего блока текста так, чтобы он не был виден. Другие техники по замене текста фоновым изображением (CSS Background Image Replacement) Вы можете посмотреть на этой странице: http://css-tricks.com/nine-techniques-for-css-image-replacement/ 26. Чтобы сделать логотип кликабельным, мы сделаем элемент A внутри H1 блоком и зададим ему ширину и высоту такие же, как у элемента H1.
27. Чтобы включить ролловер-эффект, изменим позицию a:hover нашего бэкграунда.
Стайлинг меню навигации 28. Также конвертируем его в блок и выровняем справа от логотипа. В качестве фона используем созданный нами ранее menu.jpg и удалим список элементов с глаз долой.
29. Для элементов списка также создадим блок с выравниванием по левому краю так, чтобы они расположились в один ряд друг за другом. Как и в случае с лого, спрячем текст с помощью свойства text-indent.
30. Нам нужно настроить ширину для каждого элемента списка так, чтобы кликабельная область каждого элемента соответсвовала своему пункту меню. 31. Для элемента A нашего дочернего блока списка зададим ширину и высоту, как у родительского блока.
32. И, наконец, изменим позицию нашего фона-спрайта (menu.jpg) для свойства hover.
33. Просмотрите результат своей работы в браузере. Для этого кликните на ссылке Пример2. Как видите, при наведении курсора логотип и элементы меню меняют цвет. Пример2: секция header готова. Создание бэкграунда для "Featured Area" Назовем часть нашего макета, включающую надпись "We build websites…", и кнопку "Learn More" — "Featured Area". 34. В папке featuredarea на палитре слоев отключите все слои кроме sub-title и main-heading так, чтобы кнопка "Learn More" и картинка с монитором не были видны. 35. Создайте выделение точно 960px на 360px вокруг секции "Featured Area". 36. Скопируйте это в новый документ и сохраните, как featured_bg.jpg в папке img. Создание кнопки для "Featured Area" 37. Вырежем кнопку "Learn More". Включите папку learnmore на палитре слоев; она лежит внутри папки taglines. 38. Создайте выделение вокруг кнопки точно 280px на 60px. 39. Скопируйте выделенную область в новый документ. Не мудрствуя лукаво, создадим для этой кнопки такой же ролловер-эффект. Повторите действия, описанные в шагах 14 и 17: удвойте высоту холста, продублируйте слой 1 и сместите его вниз. Цвет для замены я использовал такой: #0a72a6. Только в настройках Hue я установил +10. Сохраните файл под названием learnmore.jpg внутри, как Вы уже догадались, папки img. Создание картинки с монитором 40. Монитор с правой стороны макета будет простой картинкой. Более трудолюбивые читатели этого урока могут сделать внутри монитора маленькое слайд-шоу, чтобы на экране монитора менялся контент. Но это выходит за рамки данного урока и сегодня мы не будем здесь это рассматривать. Включите остальные части папки featuredarea. 41 Создайте выделение вокруг монитора, точно 375px на 370px. 42. Скопируйте это в новый документ и сохраните как monitor.jpg. Создаем разметку для области "Featured Area" Теперь закодируем все это безобразие в HTML и CSS. Откройте наш index.html. 43. Для секции "Featured Area", мы будем использовать блочный элемент P. Можно, конечно использовать Div для этого, но я решил заключить ее в параграф. Наша разметка будет выглядеть вот так:
44. Теперь пропишем стили для этой области. Нам нужно установить для параграфа относительное позиционирование, а для картинки монитора (чуть позже) - абсолютное, но оно будет абсолютным только по отношению к параграфу, но не к веб-странице. Установим файл featured_bg.jpg в качестве бэкграунда, а текст спрячем с помощью text-indent также, как в предыдущих примерах.
45. Далее стилизуем кнопку "Learn More". В качестве бэкграунда у нас будет файл learnmore.jpg. Также, как в случае с лого, для hover укажем другую позицию бэкграунда. Ну а монитор спозиционируем абсолютно, в правом верхнем углу контейнера #featuredText.
Секция "Featured Area" готова. Кликните на ссылку Пример 3, чтобы посмотреть, как сейчас выглядит наша веб-страница. Пример 3: Header и Featured Area завершены. Создание круглоугольных боксов 46. Следующим нашим шагом будет создание боксов со скругленными углами. В макете мы использовали шрифт, небезопасный для веб, поэтому позже мы его заменим на безопасный (Verdana). Мы будем вырезать каждый бокс по отдельности. Первым делом отключите слои с текстом внутри папок: box, box 2, и box 3 на палитре слоев в Photoshop. 47. Создайте выделение вокруг первого бокса точно 320px на 185px. Используйте команду Copy Merged и вставьте в новый документ. Сохраните файл как box1.jpg в папке img. 48. Повторите шаг 47 со вторым и третьим боксом и сохраните в папке img как box2.jpg и box3.jpg соответственно. Кодируем боксы 49. Вернемся к index.html. Создадим контейнер div для боксов и присвоим ему ID #boxContainer. Внутри него создадим еще три дива с классом .box. Так как у каждого нашего бокса будет свой бэкграунд, мы пропишем свойства для класса боксов .client, .work, и .book. Вобщем, разметка будет такая:
Стили для боксов 50. Сделаем выравнивание для дивов с классом .box по левому краю так, чтобы наши боксы встали в ряд друг за другом. Элементу H2 для свойства text-transform пропишем значение uppercase, чтобы заголовки боксов были прописаны заглавными буквами, как в макете. Затем для боксов .client, .work, и .book установим каждому свой бэкграунд.
Просмотрите свою работу в браузере. Кликните на ссылку Пример 4. Пример 4: боксы завершены. Кодируем и стилизуем левый столбец 51. Ниже боксов у нас находится область содержимого с заголовком "Need we say more?". Назовем ее "левый столбец" и поместим в контейнер div с ID #leftCol. Разметка такая:
52. Чтобы соблюсти симметрию, сделаем ширину этой области равной ширине двух боксов. Сделаем выравнивание по левому краю и отступ приведем в соответствие с краем первого бокса. Затем применим некоторые стили к тексту.
Пример 5: левый столбец встроен в дизайн Создание формы подписки на новости 53. В Photoshop отключите все слои в папке more, кроме слоев, отображающих бэкграунд, кнопку "Go" и поле для ввода текста. 54. Создайте выделение с помощью Rectangular Marquee Tool (M) вокруг области формы точно 320px на 110px. 55 Скопируйте выделенное (Copy Merged) и вставьте в новый документ. Сохраните как newsletter_bg.jpg. 56 Создайте выделение вокруг кнопки "Go", скопируйте и вставьте в другой документ. Сохраните как go.jpg. Кодируем форму подписки 57. Для веб-формы мы используем элемент form, label для текста, input - поле для ввода текста и кнопку для отправки данных (submit button).
58. Для формы в целом, мы установим относительное позиционирование, а для поля ввода и кнопки - абсолютное. Спрячем рамку вокруг поля ввода #emailInput, установив нулевое значение для параметра border. Зададим отступы для выравнивания формы к левой колонке, к верху и оставим пространство между формой и футером.
Пример 6: форма подписки завершена. Кодируем футер Здесь мы немного отойдем от макета, исключим из футера картинку с номером телефона. Наш футер будет чисто на HTML и CSS. Разметка будет такая:
А это CSS:
Пример7: футер готов. Добавим немного анимации к нашему логотипу с помощью JavaScript и библиотеки jQuery. Для обеспечения работы библиотеки мы будем использовать веб-сервис Google AJAX Libraries API. Этот сервис удобен тем, что теперь не нужно держать тяжелые скрипты на своем сервере, можно просто их включить в своем HTML-документе. Нагрузка на наш сервер снизится за счет того, что часть запросов будет отправляться на другой хост и, следовательно скорость загрузки страниц увеличится. Мы сделаем для нашего логотипа (#header h1 a) эффект: при наводе курсора - fade in (плавное проявление), а при отводе курсора - fade out (плавное затухание). Мы будем манипулировать элементами и стилями с помощью DOM (Document Object Model). Для элемента A добавим тег span с классом logoHover, который в качестве бэкграунда будет иметь нашу картинку-спрайт с эффектом ролловер. Для плавного проявления при наведении курсора, logoHover будет добавлен внутрь тега h1, а при отводе курсора, когда плавное затухание будет завершено, он будет удален из DOM. Вы можете применить этот эффект к другим элементам дизайна, но я ограничился только логотипом. 59 Для начала включим библиотеку jQuery и файл javascript.js в голову нашего HTML-документа.
60 Добавим эти стили в наш файл styles.css:
61 А этот скрипт разместим внутри файла javascript.js. В комментариях описаны наши действия:
Финиш! Поздравляю! Я надеюсь, этот урок помог Вам освоить несколько трюков по конвертации дизайна в HTML-шаблон. Оригинал урока: sixrevisions.com Перевод: Stilia.RU |
|
Последнее обновление ( Пятница, 17 Июль 2009 ) |
← Photoshop and Dreamweaver Integration (Видео уроки web- | Видео уроки - обработка фотографий в Photoshop CS4 → |