Кто на сайте?

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

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




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 )
 
 


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

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