Навигация

Уроки Photoshop
Уроки 3d Studio Max
Уроки MojoWorld
Все для Photoshop
3D Модели
Учебники, мануалы
Полезный софт
Кладовка
Киномания
МетаТагГенератор
Статьи
Как добавить новость
Статьи партнеров
Заработок

Кто на сайте?

Заполнить бриф: разработка интернет магазина с нуля

Экспорт новостей




Rambler's Top100

Главная arrow Новости arrow Уроки Photoshop arrow Создание рабочего HTML-шаблона из макета сайта в стиле WEB-2.0
Создание рабочего HTML-шаблона из макета сайта в стиле WEB-2.0 Версия для печати Отправить на e-mail
Написал Administrator   
Вторник, 16 Июнь 2009


Здравствуйте! Вот, как и обещал, представляю вторую часть серии уроков. В первой части мы с Вами научились создавать веб-дизайн в стиле WEB-2.0 в Photoshop'е, а сейчас я покажу Вам, как этот дизайн преобразовать в рабочий шаблон веб-сайта, соответствующий стандартам (X)HTML.

Финальный результат
Кликнув на изображении ниже, Вы перейдете на страницу, где представлен уже готовый вариант нашего шаблона, который мы будем делать в этом уроке.

Создание рабочего HTML-шаблона из макета сайта в стиле WEB-2.0

Загрузить
Скачайте архив с материалами урока.
clean-web-2.0-source.zip (ZIP, 3.4 MB)

В этом уроке, мы создадим веб-макет фиксированной ширины с использованием некоторых основных методов кодирования. Ближе к концу, мы укрепим конструкцию с помощью jQuery. jQuery - это полностью бесплатный javascript фреймворк (framework) (для тех кто не в курсе, фреймворк - это набор готовых функций для облегчения решения типовых задач).
Запаситесь терпением, урок будет долгим. Итак, начнем.

Настройка структуры файлов
1. Создайте на своем компьютере новую папку и назовите ее web2. Это будет наша рабочая директория.
2. Внутри этой папки создайте следующее:
  • папка img - будет содержать все картинки нашего дизайна.
  • index.html - это будет шаблон нашего сайта.
  • styles.css - здесь будут прописаны все наши стили.
  • javascript.js - в этом файле будет наш JavaScript



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-документа. Это делается для того, чтобы браузер пользователя знал откуда подгружать стили и скрипты для нашей странички. Делаем таким образом:


 <head>
  <link href="styles.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="javascript.js"></script>
  </head>

 

8. В начале файла styles.css пропишем нулевые значения отступов и полей, чтобы наша страница заполняла все пространство окна браузера.


 /* CSS Reset */
  * { margin:0; padding:0; }



Создаем фон
9. Сейчас нам нужно сделать так, чтобы наш 20-пиксельный бэкграунд (body_bg.jpg) распределился по всей ширине страницы. Пропишем параметр background для контейнера body с повтором по горизонтали:


body {
  background:#59d3fa url(img/body_bg.jpg) repeat-x 0 0;
  }




Для предпросмотра в браузере, кликните на ссылку Пример1.
Пример1: диагональный фон установлен в качестве параметра background для элемента body.
Установим контейнер div
10. Вернемся к нашему HTML-файлу. Заключим наш будущий контент в контейнер div, зададим ему ширину 1024 пикселя и обзовем параметр ID - #container.


<body>
  <div id="container">
  <!-- здесь наш контент -->
  </div>
  </body>




11. В CSS-файле пропишем следующее:


#container {
  width:1024px;
  margin:0 auto; /* Убираем отступы от верха и низа и центрируем по горизонтали */
  }




Создание лого
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-ролловера, т.к. они все имеют различную ширину.


 <div id="container">
  <div id="header">
  <h1><a href="http://www.stilia.ru/content/view/2141/2/#">Creativo</a></h1>
  <ul>
  <li id="home"><a href="http://www.stilia.ru/content/view/2141/2/#">Home</a></li>
  <li id="about"><a href="http://www.stilia.ru/content/view/2141/2/#">About</a></li>
  <li id="work"><a href="http://www.stilia.ru/content/view/2141/2/#">Work</a></li>
  <li id="contact"><a href="http://www.stilia.ru/content/view/2141/2/#">Contact</a></li>
  </ul>
  </div>
  </div>
 

 


Стайлинг логотипа
24. Сперва, пропишем стиль для #header. Нам нужно сделать отступ сверху в соответствии с нашим макетом. В нашем макете область, отведенная под контент равна 960px, поэтому ширину для #header мы также зададим 960px. Центрируем его, задав для левого и правого отступа значение auto. Ниже Вы видите, что я задал отступы для верха (90px), для правой стороны - (auto), для низа - (0), и для левой стороны - (auto).


#header {
  height:125px;
  width:960px;
  margin:90px auto 0 auto;
}




25. Продолжим работу с логотипом. Мы трансформируем наш элемент H1 в блок. Выровняем его по левому краю так, чтобы остальные элементы обтекали его справа. Таким образом панель навигации должна расположиться рядом с логотипом. Лого, созданный нами в 17 шаге, мы будем использовать как бэкграунд (фон). И, наконец, с помощью свойства text-indent, зададим отступ для нашего блока текста так, чтобы он не был виден. Другие техники по замене текста фоновым изображением (CSS Background Image Replacement) Вы можете посмотреть на этой странице:
http://css-tricks.com/nine-techniques-for-css-image-replacement/

 
 #header h1 {
  display:block;
  float:left;
  width:320px;
  height:125px;
  background:url(img/logo.jpg) no-repeat 0 0;
  text-indent:-10000px;
  }






26. Чтобы сделать логотип кликабельным, мы сделаем элемент A внутри H1 блоком и зададим ему ширину и высоту такие же, как у элемента H1.


#header h1 a {
  display:block;
  width:100%;
  height:100%;
  }




27. Чтобы включить ролловер-эффект, изменим позицию a:hover нашего бэкграунда.


#header h1 a:hover {
  background:url(img/logo.jpg) no-repeat 0 -125px;
}




Стайлинг меню навигации
28. Также конвертируем его в блок и выровняем справа от логотипа. В качестве фона используем созданный нами ранее menu.jpg и удалим список элементов с глаз долой.


#header ul {
  display:block;
  float:right;
  width:640px;
  height:125px;
  background:url(img/menu.jpg) no-repeat 0 0;
  list-style:none;
  }
 




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


#header ul li {
  display:block;
  float:left;
  height:125px;
  text-indent:-10000px;
  }




30. Нам нужно настроить ширину для каждого элемента списка так, чтобы кликабельная область каждого элемента соответсвовала своему пункту меню.

 
  #home {
  width:160px;
  }
  #about {
  width:137px;
  }
  #work {
  width:129px;
  }
  #contact {
  width:210px;
  }




31. Для элемента A нашего дочернего блока списка зададим ширину и высоту, как у родительского блока.


#header ul li a {
  display:block;
  width:100%;
  height:100%;
  }




32. И, наконец, изменим позицию нашего фона-спрайта (menu.jpg) для свойства hover.


#home a:hover {
  background:url(img/menu.jpg) no-repeat 0 -125px;
  }
  #about a:hover {
  background:url(img/menu.jpg) no-repeat -160px -125px;
  }
  #work a:hover {
  background:url(img/menu.jpg) no-repeat -297px -125px;
  }
  #contact a:hover {
  background:url(img/menu.jpg) no-repeat -426px -125px;
  }




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 для этого, но я решил заключить ее в параграф.
Наша разметка будет выглядеть вот так:


<p id="featuredText">
We build websites that blow you away[...]
  <a href="http://www.stilia.ru/content/view/2141/2/#" id="learnMoreButton">learn more.</a>
  <img id="monitor" src="img/monitor.jpg" width="375" height="370" alt="scrn" />
</p>




44. Теперь пропишем стили для этой области. Нам нужно установить для параграфа относительное позиционирование, а для картинки монитора (чуть позже) - абсолютное, но оно будет абсолютным только по отношению к параграфу, но не к веб-странице. Установим файл featured_bg.jpg в качестве бэкграунда, а текст спрячем с помощью text-indent также, как в предыдущих примерах.


p#featuredText {
  display:block;
  position:relative;
  float:left;
  width:100%;
  height:375px;
  background:url(img/featured_bg.jpg) no-repeat 0 0;
  text-indent:-10000px;
  }




45. Далее стилизуем кнопку "Learn More". В качестве бэкграунда у нас будет файл learnmore.jpg. Также, как в случае с лого, для hover укажем другую позицию бэкграунда. Ну а монитор спозиционируем абсолютно, в правом верхнем углу контейнера #featuredText.


a#learnMoreButton {
  display:block;
  width:280px;
  height:60px;
  background:url(img/learnmore.jpg) no-repeat 0 0;
  margin:200px 0 0 132px;
  }
  a:hover#learnMoreButton {
  background-position:0 -60px;
  }
#monitor {
  position: absolute;
  top:0;
  right:0;
}






Секция "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.
Вобщем, разметка будет такая:


<div id="boxContainer">
  <div class="box client">
  <h2>Client list</h2>
  <p>We have a wide range of clients from [...]<p>
  </div>
  <div class="box work">
  <h2>Our work</h2>
  <p>Check out the work we have done for our various [...]</p>
  </div>
  <div class="box book">
  <h2>Book now!</h2>
  <p>[...] Click here to get a <strong>free quote</strong>!</p>
  </div>




Стили для боксов
50. Сделаем выравнивание для дивов с классом .box по левому краю так, чтобы наши боксы встали в ряд друг за другом. Элементу H2 для свойства text-transform пропишем значение uppercase, чтобы заголовки боксов были прописаны заглавными буквами, как в макете. Затем для боксов .client, .work, и .book установим каждому свой бэкграунд.


.box {
  width:320px;
  height:185px;
  float:left;
  }
  .box h2 {
  font:bold 20px Verdana, Geneva, sans-serif;
  color:#0f83bc;
  text-transform:uppercase;
  margin:35px 0 0 140px;
  }
  .box p {
  font:normal 12px/18px Verdana, Geneva, sans-serif;
  color:#0c3b4a;
  margin:0 30px 0 140px;
  }
  .client {
  background:url(img/box1.jpg) no-repeat 0 0;
  }
  .work {
  background:url(img/box2.jpg) no-repeat 0 0;
  }
  .book {
  background:url(img/box3.jpg) no-repeat 0 0;
  }




Просмотрите свою работу в браузере. Кликните на ссылку Пример 4.
Пример 4: боксы завершены.

Кодируем и стилизуем левый столбец
51. Ниже боксов у нас находится область содержимого с заголовком "Need we say more?". Назовем ее "левый столбец" и поместим в контейнер div с ID #leftCol.
Разметка такая:


<div id="leftCol">
  <h2>Need us say more?</h2>
  <p>Creativo is a Web Design and Development[...]</p>
  </div>




52. Чтобы соблюсти симметрию, сделаем ширину этой области равной ширине двух боксов. Сделаем выравнивание по левому краю и отступ приведем в соответствие с краем первого бокса. Затем применим некоторые стили к тексту.


#leftCol {
  width:640px;
  float:left;
  margin:20px 0 0 10px;
  }
  #leftCol h2 {
  font:bold 20px/24px Verdana, Geneva, sans-serif;
  color:#094e64;
  }
  #leftCol p {
  font:normal 14px/20px Arial, Helvetica, sans-serif;
  color:#094e64;
  margin-top:10px;
  }




Пример 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).


 <form id="newsletter" action="" method="get">
  <label for="emailInput">Sign Up for Our Monthly Newsletter: </label>
  <input id="emailInput" name="emailInput" type="text" />
  <input id="submitButton" name="submitButton" value="Go" type="image"
  src="img/go.jpg" />
  </form>




58. Для формы в целом, мы установим относительное позиционирование, а для поля ввода и кнопки - абсолютное. Спрячем рамку вокруг поля ввода #emailInput, установив нулевое значение для параметра border. Зададим отступы для выравнивания формы к левой колонке, к верху и оставим пространство между формой и футером.


#newsletter {
  position:relative;
  width:320px;
  height:110px;
  float:left;
  background:url(img/newsletter_bg.jpg) no-repeat 0 0;
  margin:20px 0 50px 0;
  }
  #newsletter label {
  font:bold 16px Verdana, Geneva, sans-serif;
  letter-spacing:-1px;
  margin-top:26px;
  width:100%;
  display:block;
  color:#fff;
  text-align:center;
  }
  #emailInput {
  position:absolute;
  top:51px;
  left:5px;
  width:200px;
  margin:0px 0 0 30px;
  font:bold 20px Verdana, Geneva, sans-serif;
  color:#999;
  border:0;
  background-color:transparent;
  border:none;
  }
  #submitButton {
  position:absolute;
  top:43px;
  right:27px;
  width:50px;
  height:40px;
  margin-top:5px;
  padding:0;
  }




Пример 6: форма подписки завершена.

Кодируем футер
Здесь мы немного отойдем от макета, исключим из футера картинку с номером телефона. Наш футер будет чисто на HTML и CSS.
Разметка будет такая:


<div id="footer">
  <p>Creativo Design &#169; 2009. All Rights Reserved. </p>
  </div>




А это CSS:


#footer {
  clear:both;
  width:940px;
  border-top:1px dashed #094e64;
  }
  #footer p {
  margin:15px 0;
  font:bold 12px Arial, Helvetica, sans-serif;
  color:#094e64;
  }




Пример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-документа.


 <head>
  <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="javascript.js"></script>
  </head>




60 Добавим эти стили в наш файл styles.css:


span.logoHover {
  display:block;
  width:100%;
  height:100%;
  background:#ccc url(img/logo.jpg) no-repeat 0 -125px;
  }
  span.logoHover a {
  display:block;
  width:100%;
  height:100%;
  }




61 А этот скрипт разместим внутри файла javascript.js. В комментариях описаны наши действия:


$(document).ready(function(){
  // Удаляем дефолтную установку hover
  $('#header h1 a:hover').css('background','none');
  // связываем mouseenter с элементом a 
  $('#header h1 a')
  .bind('mouseenter',function(){
  // Вставляем span > a в DOM для эффекта fade in
 // с классом .logoHover
 $(this)
  .before('<span class="logoHover"><a href="http://www.stilia.ru/content/view/2141/2/#">home</a></span>');
   
 // Прячем новый элемент DOM сразу же после эффекта fade in
 $('.logoHover')
  .hide().fadeIn()
  // Когда эффект fade out завершен, 
  // удаляем из DOM.
  .bind('mouseleave', function(){
  $(this).fadeOut('normal', function(){
  $(this).remove()
  });  
  });
  });
});




Финиш!

Создание рабочего HTML-шаблона из макета сайта в стиле WEB-2.0


Поздравляю! Я надеюсь, этот урок помог Вам освоить несколько трюков по конвертации дизайна в HTML-шаблон.
Оригинал урока: sixrevisions.com
Перевод: Stilia.RU
Последнее обновление ( Пятница, 17 Июль 2009 )
 
← Photoshop and Dreamweaver Integration (Видео уроки web- Видео уроки - обработка фотографий в Photoshop CS4 →


Добавить комментарий

У Вас недостаточно прав для добавления комментариев.
Возможно, вам необходимо зарегистрироваться на сайте.

[Назад]