От автора: на прошлой неделе мы узнали, как создать веб-дизайн на тему комиксов. Сегодня примемся за вторую часть: пора разрезать проект-дизайн на слайсы (фрагменты изображения, прим. пер.) и превратить в рабочую разметку HTML, готовую к переносу в любую CMS. Давайте начнем!
Перед началом
Свою собственную PSD можно получить, следуя шаг за шагом процессу в предыдущем посте или просто скачав ее здесь.
Так как это учебник не для начинающих, я пропущу некоторые базовые объяснения — подразумевается, что у вас уже имеются рабочие знания HTML и CSS, а также небольшое умение разрезать изображения в Photoshop’е на слайсы.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееШаг 1 – Разметка HTML
Давайте начнем с создания рабочей папки; так как в этом учебнике не требуется применение языка серверной стороны, то она может находиться в системе где угодно. Создайте файл с названием index.html и три исходные папки:
/images
/js
/style
Содержимое этих папок говорит само за себя.
Добавьте в index.html основные контейнеры страницы. Я все оборачиваю в div с названием page. Внутри этого div’а добавьте еще три с ID, соответственно, header, content и footer.
В папке style создайте новый файл с названием default.css и добавьте для удаления всех стилей по умолчанию функцию сброса (reset). Я использую Эрика Майера (Eric Meyer), но можете, не стесняясь, начать со своего любимого.
Для этого шага применяется следующий код HTML:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Comicastic</title> <link href="style/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="page"> <div id="header"> Header </div> <div id="content"> Content </div> <div id="footer"> Footer </div> </div> </body> </html> |
И CSS:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | @charset "utf-8"; /* Документ CSS */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Лицензия: отсутствует (открытый домен) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* сброс показаний дисплея HTML5 для более старых браузеров */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* Конец сброса */ |
Опробовав код в Firefox, вы должны увидеть что-то вроде этого:
Шаг 2 – Основная разметка CSS
Сначала давайте назначим стили структуре разметки.
Мы оборачиваем весь контент в контейнер шириной 960px, а затем устанавливаем высоту внутренних div’ов. Чтобы получить точную высоту каждого div’а, можно применить инструмент Photoshop линейка (Ruler).
Теперь мы разрежем на слайсы фоновые изображения всей страницы и раздела нижнего колонтитула.
Откройте в Photoshop’е Comicastic.psd и скройте все, кроме папок Header BG и Footer BG. Применив инструмент «Разрезать на слайсы» (slice), начертите большой слайс слева сверху до расстояния в 575px ниже верхнего края. Далее начертите другой слайс от направляющей, ограничивающей фон нижнего колонтитула (взгляните на изображение внизу). Конечно, для получения аккуратного результата можно использовать направляющие.
С помощью инструмента «Выбор слайса» (slice selection) выберите два последних созданных слайса и соответственно назовите каждый из них — bg-body и bg-footer. Затем дважды щелкните на все автослайсы и смените Вид слайса (slice type) на «Нет изображения» (No Image).
Далее пройдите к «Файл» (File) > «Сохранить для веб и устройств» (Save for Web and Devices). Выберите два слайса, которые нужно сохранить (для многократного выбора придерживайте клавишу shift), установите «Вид файла» (file type) на JPG, а «Свойство» (Quality) на 70 и щелкните «Сохранить» (Save). Пройдите в свою рабочую директорию и выберите корневой файл (этот диалог автоматически сохранит ваши файлы в папку /images).
Теперь, когда у вас имеются фоновые изображения, давайте во все контейнеры добавим CSS.
Мы установим тестовую высоту div’ов за исключением заголовка (header) (который на самом деле 180px в высоту) и добавим несколько временных фоновых цвета в тестовых целях.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | /*Общая*/ body{ background-color:#000; background-image:url(../images/bg-body.jpg); background-position:center top; background-repeat:no-repeat; } /*Контейнеры*/ #page{ margin:0px auto; width:960px; } #header{ width:960px; height:180px; float:left; background-color:#666; } #content{ width:960px; height:400px;/* Временная */ float:left; background-color:#FCC; } #footer{ width:960px; height:250px;/* Временная */ float:left; background-image:url(../images/bg-footer.jpg); background-position:top center; background-repeat:no-repeat; } |
При тестировании в браузере у вас должно получиться нечто вроде изображения внизу.
Шаг 3 – Разделите заголовок и фоновые изображения с содержимым на слайсы
Теперь, когда вы знаете, как разделять на слайсы, давайте сделаем то же самое с изображениями заголовка и фона содержимого (или переднего плана). Для изображений заголовка создайте копию документа "comicastic.psd", скройте все, кроме папки Logo и слоев, связанных с фоном "Поиска" (Search) (плюс я добавляю здесь кнопку поиска после передвижения ее на несколько пикселей вправо). Теперь начертите слайсы вокруг видимых сегментов и назовите их соответственно logo, bg-search и search-button. Сохраните как PNG’и с прозрачными фонами.
Давайте продолжим работу баннером содержимого.
Покажите только папку Background внутри Top Banner, покажите папку Page Curl и слой Page Bg под Page Content, и папку Header Bg, включая общий черный фон. Затем, при этих видимых слоях, начертите два слайса: один для фона баннера под названием bg-banner и другой, маленький, для загиба страницы под названием content-page-curl. Теперь сохраните их оба как JPEG.
Добавьте в свой новый файл HTML новый div с названием logo внутри "header" и другой div с названием top-banner внутри "content".
| 1 2 3 4 5 6 7 8 | <div id="header"> <div id="logo"> <a href="#"><img src="images/logo.png" width="340" height="135" alt="Comicastic" /></a> </div> </div> <div id="content"> <div id="top_banner">Top Banner</div> </div> |
И код CSS, чтобы они выглядели, как положено:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #logo{ padding-top:32px; padding-left:70px; } [...] #top_banner{ float:left; width:960px; height:250px; background-image:url(../images/bg-banner.jpg); background-position:center top; background-repeat:no-repeat; } |
Теперь у вас должно получиться что-то подобно этому:
Шаг 4 – Верхняя навигация
Давайте добавим HTML верхней навигации. Добавьте следующий код внутрь div’а header под логотипом.
| 1 2 3 4 5 | <ul id="main_navigation"> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> </ul> |
Самой сложной работой с этим div’ом будет его расположение. Мы заставим его плавать (float) справа и поиграем с отступом, чтобы установить его на нужное место. Добавьте следующий CSS:
| 1 2 3 4 5 6 7 8 9 10 11 12 | #main_navigation{ float:right; } #main_navigation li{ display:inline; } #main_navigation li a{ display:block; float:left; } #main_navigation li a:hover{ } |
Шаг 5 – Замещение шрифта
Так как я совершенно не собираюсь применять в этом проекте "Comic Sans", мы применим более интересный вид шрифта. Чтобы он классно выглядел в современных браузерах, воспользуемся достоинствами CSS3.
Во-первых, скачаем комплекты шрифтов CSS "Komika Title" и "Komika Text" и положим их в новую папку под названием /fonts. В каждом наборе есть группа файлов со шрифтами и файл .CSS, который мы импортируем в свой документ default.css, как здесь:
| 1 2 3 | /*Наборы видов шрифта*/ @import url("../fonts/komika-text/stylesheet.css") screen; @import url("../fonts/komika-title/stylesheet.css") screen; |
Когда шрифты импортированы, мы можем применять их на своем сайте где угодно. В каждом комплекте есть множество вариантов, из которых можно выбирать; можно употреблять их согласно графическому дизайну. Для начинающих мы установим ‘KomikaTextTightRegular’ для основного текста body, как тут:
| 1 2 3 4 5 6 7 8 9 | body{ background-color:#000; background-image:url(../images/bg-body.jpg); background-position:center top; background-repeat:no-repeat; font-family:'KomikaTextTightRegular', Arial, Helvetica, sans-serif; font-size:1em; } |
И можно протестировать результат в браузере:
Шаг 6 – Определение стилей верхней навигации
Теперь обратно к файлу psd. Скройте все, кроме фона закладки, создайте новый слайс для закладки навигации с названием bg-main-navigation и сохраните его для веба как файл PNG.
В файл CSS давайте добавим стили для панели навигации, чтобы добиться требуемого эффекта при проведении мышью. Добавим к действию проведения мышью (hover) фон и создадим похожий стиль для случая a.selected. что касается типографской разметки текста, согласно графике мы применим "KomikaTextItalic" и добавим красивый стиль тени текста, чтобы он лучше выглядел.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | #main_navigation{ float:right; margin-top:-18px; margin-right:20px; } #main_navigation li{ display:inline; width:120px; } #main_navigation li a{ display:block; float:left; padding-top:7px; padding-bottom:8px; padding-left:20px; padding-right:20px; margin-left:5px; color:#FFF; font-family:'KomikaTextItalic', Arial, Helvetica, sans-serif; font-size:18px; text-decoration:none; text-shadow:2px 2px 2px rgba(0,0,0,.5); -webkit-border-top-right-radius: 3px; -khtml-border-radius-topright: 3px; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; } #main_navigation li a:hover{ background-image:url(../images/bg-main-navigation.png); background-position:left; background-repeat:no-repeat; } #main_navigation li a.selected{ background-image:url(../images/bg-main-navigation.png); background-position:left; background-repeat:no-repeat; } |
На этой стадии разработки ваша страница должна выглядеть так:
Шаг 7 – Содержимое заголовка
Помимо логотипа и панели навигации, в раздел заголовка header нам понадобится добавить панель поиска и ссылки на социальные сети. Давайте начнем с создания блока контейнера в HTML и добавления следующего div’а внутри header div.
| 1 2 3 | <div id="header-content"> Top Right </div> |
И несколько необходимых стилей:
| 1 2 3 4 5 6 | #header-content{ background-color:#036; float:right; width:440px; height:105px; } |
При тестировании в браузере:
Шаг 8 – Панель поиска
Далее мы начнем определять стили области поиска. В основном это форма с полем ввода и кнопкой (см. Шаг 3). Для него добавьте следующий код внутри div’а "header-content":
| 1 2 3 4 5 6 | <div id="search"> <form> <input type="text" class="search_input" value="Looking for something?"/> <input type="image" src="images/search-btn.png" /> </form> </div> |
И стили, чтобы он смотрелся хорошо:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | #search{ text-align:right; padding-top:10px; } #search input{ vertical-align:middle; } #search .search_input{ width:160px; margin-right:10px; padding:6px 10px; color:#F2AA00; font-family:'KomikaTextTightRegular',Arial, Helvetica, sans-serif; font-size:14px; background-color:#280000; border:1px solid #7C0000; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } |
Это должно дать в результате:
Шаг 9 – Ссылки на социальные сети
Под div’ом search добавьте div с id social_media. В него можно вставить список ссылок на социальные сети по вашему вкусу. Я использую Набор иконок социальных сетей (Social Media Icon Pack) от Komodo Media.
| 1 2 3 4 5 6 7 | <div id="social_media"> Follow us &amp;nbsp;&amp;nbsp; <a href="#"><img src="images/icons/twitter_16.png" width="16" height="16" alt="Twitter" /></a> <a href="#"><img src="images/icons/facebook_16.png" width="16" height="16" alt="Twitter" /></a> <a href="#"><img src="images/icons/technorati_16.png" width="16" height="16" alt="Twitter" /></a> <a href="#"><img src="images/icons/rss_16.png" width="16" height="16" alt="Twitter" /></a> </div> |
И в таблицу стилей:
| 1 2 3 4 5 6 7 8 9 10 11 | #social_media{ padding-top:15px; text-align:right; color:#FFF; font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; font-size:15px; vertical-align:middle; text-shadow:2px 2px 2px rgba(0,0,0,.5); } |
Шаг 10 – Скользящий баннер
Примемся за баннер. Начнем с загрузки Easy Slider 1.5 и вставим файлы в папку с названием Banner.
В папке библиотеки есть несколько примеров– мы сымитируем 02.html. Переименуйте файл, если нужно, удалите весь ненужный код HTML и замените изображения на несколько изображений-образцов.
Итак, файл HTML для баннера должен быть примерно таким:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Banner</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easySlider1.5.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider(); }); </script> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <body> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="container"> <div id="content"> <div id="slider"> <ul> <li><a href="#"><img src="images/01.jpg" alt="Preview" /><div class="bubble">test</div></a></li> <li><a href="#"><img src="images/02.jpg" alt="Preview" /><div class="bubble">test22</div></a></li> <li><a href="#"><img src="images/03.jpg" alt="Preview" /></a></li> <li><a href="#"><img src="images/04.jpg" alt="Preview" /><div class="bubble">test</div></a></li> <li><a href="#"><img src="images/05.jpg" alt="Css Template Preview" /></a></li> </ul> </div> </div> </div> |
А вот CSS:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | @charset "utf-8"; /* Документ CSS */ /* Замена изображений */ img{ border:0px; } .graphic, #prevBtn, #nextBtn{ margin:0; padding:0; display:block; overflow:hidden; text-indent:-8000px; } /* // Замена изображений */ #container{ margin:0 auto; position:relative; text-align:left; width:696px; background:#fff; margin-bottom:2em; } #content{ position:relative; } /* Easy Slider */ #slider{ position:relative; width:760px!important; background:none; } #slider ul, #slider li{ margin:0; padding:0; list-style:none; background:none; } #slider li{ width:760px!important; } #slider li a{ background:none; } #slider li{ /* Определите ширину и высоту элемента списка (slide) Вся область слайдера настроится согласно указанным здесь параметрам */ width:696px; height:241px; overflow:hidden; } #prevBtn, #nextBtn{ display:block; width:30px; height:77px; position:absolute; left:-30px; top:71px; } #nextBtn{ left:696px; } #prevBtn a, #nextBtn a{ display:block; width:30px; height:77px; background:url(../images/btn_prev.gif) no-repeat 0 0; } #nextBtn a{ background:url(../images/btn_next.gif) no-repeat 0 0; } .bubble{ position:absolute; float:right; background-color:#036; width:250px; height:100px; margin-top:-240px; margin-left:500px; color:#FFF; } /* // Easy Slider */ |
На данный момент у вас должно получиться что-то вроде этого:
Не беспокойтесь, если слайдер немного глючный, через минуту мы это исправим.
Отрегулируйте расположение и замените стрелки-указатели
Разделите на слайсы две стрелки-указателя "Предыдущий" и "Следующий" (prev и next) и сохраните их как файлы PNG в папке с изображениями директории тестирования баннера.
Затем отрегулируйте CSS, чтобы он правильно работал с новыми указателями:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | #prevBtn, #nextBtn{ display:block; width:50px; height:40px; position:absolute; left:-50px; top:71px; } #nextBtn{ left:630px; /* Это ширина указателя*/ } #prevBtn a{ display:block; width:50px; height:40px; background:url(../images/btn-prev.png) no-repeat 0 0; } #nextBtn a{ display:block; width:50px; height:40px; background:url(../images/btn-next.png) no-repeat 0 0; } |
Из чего получается:
Размещение
Теперь мы установим расположение, ширину и высоту всех div’ов, связанных с баннером. Мы также приведем в порядок библиотеку JS, чтобы избежать любых проблем относительно дополнительного div’а bubble.
Вот измененный CSS:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | #container{ margin:0 auto; width:830px; position:relative; text-align:left; background:#096; margin-bottom:2em; padding-left:65px; } #content{ position:relative; } /* Easy Slider */ #slider{ position:relative; width:830px; overflow:hidden; background:none; background-color:#09F; } #slider ul, #slider li{ margin:0; padding:0; list-style:none; background:none; } #slider li{ width:830px; height:250px; overflow:hidden; } #slider li a{ background:none; } #prevBtn, #nextBtn{ display:block; width:65px;/*ширина изображения +15 отступ*/ height:40px; position:absolute; left:-65px; top:185px; } #nextBtn{ left:630px;/*Ширина баннера*/ } #prevBtn a{ display:block; width:65px; /*ширина изображения +15 отступ*/ height:40px; background:url(../images/btn-prev.png) no-repeat left; background-color:#066; } #nextBtn a{ display:block; width:65px;/*ширина изображения +15 отступ*/ height:40px; background:url(../images/btn-next.png) no-repeat right; background-color:#066; } .bubble{ position:absolute; float:right; background-color:#036; width:250px; height:100px; margin-top:-240px; margin-left:500px; color:#FFF; } /* // Easy Slider */ |
И результат в браузере:
Фон речевого пузыря
Теперь разделите на слайсы фон содержимого поста. При видимых только речевых пузырях, в .PSD, начертите слайс под названием "bg-bubble" и сохраните его как файл .png.
Откорректируйте CSS, чтобы добавить фон и соответственно подогнать расположение div’а bubble.
| 1 2 3 4 5 6 7 8 9 10 | .bubble{ position:absolute; float:right; width:295px; height:210px; margin-top:-255px; margin-left:535px; background-image:url(../images/bg-bubble.png); color:#FFF; } |
Вот как это выглядит в браузере; удалите все временные фоновые цвета, если хотите.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
Содержимое поста
Чтобы закончить раздел баннера, давайте добавим HTML содержимого поста.
| 1 2 3 4 5 6 7 8 9 10 11 12 | <div class="featured_post"> <h2 class="post_title">Post title</h2> <p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p> <div class="post_info"> <span class="author">Posted by <a href="#">Admin</a></span>, <span class="date">Apr 14</span> </div> <div class="post_comments"> <div class="number"><a href="#">29</a></div> <div class="comments"><a href="#">Comments</a></div> </div> </div> |
Слияние с файлом основного шаблона
Пора соединить отдельный модуль с нашим основным документом.
Сначала скопируйте папку баннера /js в корневой шаблон, затем добавьте все изображения баннера в папку /images во временной директории.
Далее добавьте внутри тэга <head> файла index.html следующий код:
| 1 2 3 4 5 6 7 | <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easySlider1.5.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider(); }); </script> |
И добавьте соответственно div’ы баннера в div top_banner.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!—верхний баннер --> <div id="top_banner"> <div class="banner_container"> <div id="slider"> <ul> <li><a href="#"><img src="images/banner/01.jpg" alt="Preview" /></a> <div class="bubble"> <div class="featured_post"> <h2 class="post_title">Post title</h2> <p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p> <div class="post_info"> <span class="author">Posted by <a href="#">Admin</a></span>, <span class="date">Apr 14</span> </div> <div class="post_comments"> <div class="number"><a href="#">29</a></div> <div class="comments"><a href="#">Comments</a></div> </div> </div> </div> </li> <li><a href="#"><img src="images/banner/02.jpg" alt="Preview" /></a><div class="bubble">test22</div></li> <li><a href="#"><img src="images/banner/03.jpg" alt="Preview" /></a><div class="bubble">test333</div></li> <li><a href="#"><img src="images/banner/04.jpg" alt="Preview" /></a><div class="bubble">test4444</div></li> <li><a href="#"><img src="images/banner/05.jpg" alt="Preview" /></a><div class="bubble">test55555</div></li> </ul> </div> </div> </div> <!—конец верхнего баннера --> |
И завершенный CSS, чтобы баннер заработал
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | /* верхний баннер */ #top_banner{ float:left; width:830px; height:250px; padding-left:130px; padding-top:10px; background-image:url(../images/bg-banner.jpg); background-position:center top; background-repeat:no-repeat; } .banner_container{ float:left; width:860px; height:250px; position:relative; text-align:left; } /* замещение изображений */ #prevBtn, #nextBtn{ margin:0; padding:0; display:block; overflow:hidden; position:absolute; text-indent:-8000px; } /* замещение изображений */ /* Easy Slider */ #slider{ position:relative; width:830px; margin-left:100px overflow:hidden; } #slider ul, #slider li{ margin:0; padding:0; list-style:none; background:none; } #slider li{ width:830px; height:250px; overflow:hidden; } #slider li img{ border:1px solid #FFF; height:248px; } #slider li a{ background:none; } #prevBtn, #nextBtn{ display:block; width:65px;/*img width +15 padding*/ height:40px; position:absolute; left:-65px; top:185px; } #nextBtn{ left:630px; /*Banner Width*/ } #prevBtn a{ display:block; width:65px; /*img width +15 padding*/ height:40px; background:url(../images/btn-prev.png) no-repeat left; } #nextBtn a{ display:block; width:65px;/*img width +15 padding*/ height:40px; background:url(../images/btn-next.png) no-repeat right; } .bubble{ position:absolute; float:right; width:295px; height:210px; margin-top:-255px; margin-left:535px; background-image:url(../images/bg-bubble.png); color:#FFF; } /* // Easy Slider */ /* конец верхнего баннера*/ |
Вскоре мы назначим стили содержимому популярного поста. Однако в данный момент у вас должно получиться что-то похожее на следующее изображение:
Шаг 11 – Упаковщик содержимого и фон
Продвигаясь далее с разработкой макета, добавьте под верхним баннером div с названием content_wrapper, а внутри него другой div с названием page_content, который будет содержать актуальную информацию.
| 1 2 3 4 5 | <div id="content_wrapper"> <div id="page_content"> Page content </div> </div> |
Затем, для того, чтобы это смотрелось как задумано, мы применим CSS3 для добавления закругленных углов к div’у page_content и загиб страницы, который мы разрезали на слайсы в Шаге 3.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | /*содержимое страницы*/ #content{ float:left; width:960px; } #content_wrapper{ float:left; width:910px; padding-left:10px; padding-right:40px; padding-top:10px; } #page_content{ float:left; width:100%; height:350px;/*temporal*/ background-color:#FFF; background-image:url(../images/content-page-curl.jpg); background-position:bottom right; background-repeat:no-repeat; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-bottom-right-radius: 0px; -khtml-border-radius-bottomright: 0px; -moz-border-radius-bottomright: 0px; border-bottom-right-radius: 0px; } /*конец содержимого страницы*/ |
В этот момент наша страница должна выглядеть так:
Шаг 12 – Изображение поста и название
Давайте сделаем макет тестового поста.
Согласно проекту нам понадобится квадратное изображение с названием поста и список категорий, размещенный над ним на двух полосках. Давайте сначала займемся HTML.
Создайте div с названием post и поместите его внутри div’а page_content. Затем добавьте в контейнер изображение, название и метаданные.
| 1 2 3 4 5 | <div class="post"> <img src="images/posts/01.jpg" class="post-image" /> <h2><a href="#">Lorem Ipsum Post Title</a></h2> <div class="met ad at a"><a href="#">Comics</a>, <a href="#">Movies</a>, <a href="#">Latest Launches</a>, <a href="#">Lorem Ipsum Category</a></div> </div> |
CSS для этой части хитрый, так как каждый пост должен быть шириной 50% относительно контейнера page_content, плюс полоски должны находиться перед картинкой. Чтобы все удалось, нам придется поиграть с относительным позиционированием и отрицательными отступами.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | .post{ float:left; width:445px; height:230px; } .post .post-image{ position:relative; top:0px; left:0px; border:1px solid #FFB800; } .post h2{ position:relative; top:-70px; left:0px; width:300px; padding:5px; padding-left:10px; font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; font-size:18px; color:#680000; background-color:#F2AA00; } .post h2 a{ color:#680000; text-decoration:none; } .post h2 a:hover{ color:#FFFFFF; } .post .metadata{ position:relative; top:-70px; left:0px; width:250px; padding:5px; padding-left:10px; font-size:13px; background-color:#FFF; border:1px solid #FFB800; } .post .metadata a{ color:#000; text-decoration:none; } .post .metadata a:hover{ color:#9C0000; } |
У вас сейчас должно быть что-то вроде этого:
Шаг 13 – Фон содержимого поста и расположение
Теперь мы добавим div, содержащий контент поста.
| 1 2 3 4 5 6 7 | <div class="post"> <img src="images/posts/01.jpg" class="post-image" /> <h2><a href="#">Lorem Ipsum Post Title</a></h2> <div class="metadata"><a href="#">Comics</a>, <a href="#">Movies</a>, <a href="#">Latest Launchs</a>, <a href="#">Lorem Ipsum Category</a></div> <div class="post_content">Post Content</div> </div> |
Разрежьте на слайсы фоновое изображение для div’а post_content и сохраните его как файл PNG.
Сначала мы установим его позиционирование в файле CSS.
| 1 2 3 4 5 6 7 8 9 10 11 | .post .post_content{ position:relative; top:-275px; left:230px; width:210px; height:220px; background-image:url(../images/bg-post-content.png); background-position:top left; background-repeat:no-repeat; } |
Смотрим в браузере:
Шаг 14 – Содержимое поста
Добавим контейнеры для краткого содержания поста, информацию о нем и комментарии:
| 1 2 3 4 5 6 7 8 9 10 11 12 | <div class="post_content"> <div class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam </div> <div class="post_info"> <span class="author">Posted by <a href="#">Admin</a></span>, <span class="date">Apr 14</span> </div> <div class="post_comments"> <div class="number"><a href="#">29</a></div> <div class="comments"><a href="#">Comments</a></div> </div> </div> |
Стили для хорошего внешнего вида:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | .post .post_content .post_brief{ width:150px; height:98px; overflow:hidden; padding-left:35px; padding-top:15px; text-align:right; color:#FFF; } .post .post_info{ width:150px; margin-left:35px; margin-top:8px; padding-top:4px; text-align:right; border-top:1px solid #787878; font-family:Tahoma, Geneva, sans-serif; font-size:10px; color:#787878; } .post .post_info a{ color:#787878; text-decoration:none; } .post .post_info a:hover{ color:#D8D8D8; text-decoration:none; } .post .post_comments{ width:50px; margin-top:37px; margin-left:56px; text-align:center; } .post .post_comments a{ color:inherit; text-decoration:none; } .post .post_comments .number{ font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; font-size:14px; color:#FFF; } .post .post_comments .comments{ font-size:12px; color:#F2AA00; } |
И с постом мы закончили!
Шаг 15 – Добавьте еще постов
Давайте продолжим и добавим в свой макет еще постов. Продублируйте этот блок столько раз, сколько вам нужно div’ов post. Вам следует избавиться от временной высоты, которую мы присвоили div’у page_content. Если все выполнялось правильно, разметка увеличит свою высоту по мере того, как мы добавим еще постов к своей домашней странице.
Шаг 16 – Содержимое популярного поста
Теперь, когда мы закончили определение стилей основному посту, давайте проделаем это с содержимым популярного поста. Помните, как мы вставляли следующий код в div bubble?
| 1 2 3 4 5 6 7 8 9 10 11 12 | <div class="featured_post"> <h2 class="post_title">Post title</h2> <p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p> <div class="post_info"> <span class="author">Posted by <a href="#">Admin</a></span>, <span class="date">Apr 14</span> </div> <div class="post_comments"> <div class="number"><a href="#">29</a></div> <div class="comments"><a href="#">Comments</a></div> </div> </div> |
Добавьте следующий CSS и повторите bubble во всех слайдах нашего вращающегося баннера.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | /* Post */ .featured_post .post_title{ height:29px; padding-top:18px; text-align:right; font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; font-size:18px; color:#680000; } .featured_post .post_title a{ color:#680000; text-decoration:none; } .featured_post .post_title a:hover{ color:#FFFFFF; } .featured_post .post_brief{ height:67px; padding-left:30px; overflow:hidden; text-align:right; color:#1B1B1B; } .featured_post .post_info{ margin-left:30px; text-align:right; padding-top:2px; font-family:Tahoma, Geneva, sans-serif; font-size:10px; color:#969696; border-top:1px solid #FFC000; } .featured_post .post_info a{ color:#969696; text-decoration:none; } .featured_post .post_info a:hover{ color:#1B1B1B; } .featured_post .post_comments{ text-align:center; float:right; margin-top:20px; margin-right:10px; width:65px; height:40px; } .featured_post .post_comments a{ color:inherit; text-decoration:none; } .featured_post .post_comments .number{ font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; font-size:24px; color:#FFF; } .featured_post .post_comments .comments{ font-size:14px; color:#F2AA00; } /* // Post */ |
Я также добавил скользящему изображению край и тень блока:
| 1 2 3 4 5 6 7 8 | #slider li img{ border:1px solid #FFF; height:248px; box-shadow: 0px 0px 20px rgba(0,0,0,.5); -moz-box-shadow: 0px 0px 20px rgba(0,0,0,.5); -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.5); } |
Должно выглядеть так:
Шаг 17 – Виджеты нижнего колонтитула
Вместо классической боковой колонки я хотел добавить нижний колонтитул, подготовленный к добавлению виджетов. Добавьте следующий код внутрь div’а footer. Внутри боковой колонки будет другой контейнер, под названием widget, а внутри этого div’а:
название
неупорядоченный список и
div для завернутого уголка
Сначала позаботимся о списке категорий.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div id="sidebar"> <div class="widget"> <h3>Categories</h3> <ul> <li><a href="#">Lorem ipsum dolor sit amet</a></li> <li><a href="#">Consectetur adipisicing elit</a></li> <li><a href="#">Sed do eiusmod tempor</a></li> <li><a href="#">Incididunt ut labore</a></li> <li><a href="#">Et dolore magna aliqua</a></li> <li><a href="#">Ut enim ad minim veniam</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Dolor sit amet</a></li> <li><a href="#">Consectetur adipisicing</a></li> </ul> <div class="corner">&amp;nbsp;</div> </div> <div class="widget">W2</div> <div class="widget">W3</div> </div> |
Теперь в файле PSD разрежьте на слайсы угол, назовите его widget-curl и сохраните изображение для веба как файл JPG. Снова разрежьте на слайсы крошечную стрелку рядом с ссылками, назовите ее arrow и сохраните как файл PNG.
И отредактируйте файл CSS как здесь:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | /*Footer*/ #footer{ width:940px; padding-left:0px; padding-right:10px; padding-top:20px; height:250px;/* Temporal */ float:left; background-image:url(../images/bg-footer.jpg); background-position:top center; background-repeat:no-repeat; } /*End of Footer*/ /* Footer sidebar */ #sidebar{ float:left; width:940px; } .widget{ float:left; margin-left:10px; margin-right:10px; } .widget h3{ color:#F2AA00; font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; font-size:14px; padding-bottom:10px; padding-left:10px; } .widget ul{ width:200px; padding:20px 10px; background-color:rgba(26,26,26,.5); border:1px solid #252525; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .widget .corner{ background-image:url(../images/widget-curl.jpg); background-position:bottom right; background-repeat:no-repeat; height:30px; margin-top:-30px; margin-right:-2px; } .widget ul li{ font-size:16px; padding-bottom:3px; color:#FFF; } .widget ul li a{ padding-left:20px; color:#FFF; text-decoration:none; } .widget ul li a:hover{ color:#DC0000; background-image:url(../images/arrow.png); background-position:0px 6px; background-repeat:no-repeat; } /* //Footer sidebar */ |
При тестировании в браузере вы должны получить что-то похожее на следующее изображение:
Шаг 18 – Еще виджеты
Повторите код HTML, чтобы добавить второй или даже третий виджет списка. На этот раз мы добавим в нижний колонтитул архивы. Вы теперь можете протестировать разметку, добавив несколько копий div’а widget, чтобы посмотреть, как это выглядит. Область нижнего колонтитула будет оптимально увеличиваться, когда вы станете добавлять еще виджеты.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!-- Виджет --> <div class="widget"> <h3>Archives</h3> <ul> <li><a href="#">January 2011</a></li> <li><a href="#">February 2011</a></li> <li><a href="#">March 2011</a></li> <li><a href="#">May 2011</a></li> <li><a href="#">June 2011</a></li> <li><a href="#">July 2011</a></li> </ul> <div class="corner">&amp;nbsp;</div> </div> <!—Конец виджета --> |
Вот как это смотрится, когда добавлена архивная секция:
Шаг 19 – Панель закладок
Как пример более сложного виджета, давайте добавим панель закладок с тремя разными видами содержимого в каждой закладке.
Сначала добавьте следующий код HTML в качестве основной разметки: неупорядоченный список для закладок и div’ов с разными id для контента. Я добавляю основной класс с названием tab ко всем div’ам содержимого для того, чтобы избежать дублирования кода в файле CSS.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class="widget"> <div id="tabs"> <ul> <li><a href="#tab-1">Popular Posts</a></li> <li><a href="#tab-2">Recent Posts</a></li> <li><a href="#tab-3">Recent Comments</a></li> </ul> <div class="tab" id="tab-1"> <p>Tab1</p> </div> <div class="tab" id="tab-2"> <p>Tab2</p> </div> <div class="tab" id="tab-3"> <p>Tab3</p> </div> </div> <div class="corner">&amp;nbsp;</div> </div> |
Давайте создадим документ JavaScript с названием tabs.js и сохраним его в папку /js. Включите его, добавив эту строку в тэг <head>.
| 1 | <script type="text/javascript" src="js/tabs.js"></script> |
Теперь присоедините основную панель закладок jQuery, добавив в файл tabs.js следующий код.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | $(document).ready(function(){ $('#tabs div').hide(); $('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function(){ $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); return false; }); }); |
Добавим стили при работающей функции JavaScript, чтобы сделать ее красивой. Сначала нам понадобится разрезать на слайсы маленькую стрелку, указывающую на выбранную закладку. Назовите ее tab-arrow и сохраните как PNG.
Теперь добавьте в файл CSS следующий код:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | /* панель закладок нижнего колонтитула*/ #tabs{ } #tabs ul{ background:none; border:0px; padding:0px; margin:0px; width:428px; min-height:30px; height:30px; -webkit-border-radius: 0px; -khtml-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } #tabs ul li{ display:inline; float:left; text-align:left; } #tabs ul .active{ background-image:url(../images/tab-arrow.png); background-position:bottom center; background-repeat:no-repeat; } #tabs ul .active a{ color:#F2AA00; } #tabs ul li a{ display:block; margin:0px; padding:0px; color:#5A5A5A; font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; font-size:14px; padding-bottom:10px; padding-left:10px; padding-right:20px; } #tabs ul li a:hover{ background-image:none; color:#F2AA00; } #tabs .tab{ width:405px; padding:20px 10px; min-height:170px; /*This is to get the arrow above the tab*/ margin-top:-6px; background-color:rgba(26,26,26,.5); border:1px solid #252525; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /* // панель закладок нижнего колонтитула*/ |
Теперь вам нужно заставить работать панель закладок; давайте добавим внутрь содержимое!
Шаг 20 – Содержимое закладок
Продолжим и добавим в закладку содержимое. Посмотрев на графику, вы обнаружите, что у нас имеется список из трех постов (последний и популярные) с названием и резюме, а также пейджер с нумерацией страниц внизу для навигации по постам.
Вставьте в закладку следующий код:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="item"> <h4><a href="#">John Doe</a></h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p> </span> <span class="item"> <h4><a href="#">Jane Smith</a></h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p> </span> <span class="item"> <h4><a href="#">SpiderHuman</a></h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p> </span> <span class="pager"><a href="#">&amp;laquo;</a><a href="#">1</a><a href="#" class="active">2</a><a href="#">3</a><a href="#">&amp;raquo;</a></span> |
А теперь CSS:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | /*Содержимое закладок*/ .tab .item{ float:left; padding:5px 10px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .tab .item:hover{ background-color:#000; background-image: -moz-linear-gradient(left, #000000, #0D0D0D); background-image: -webkit-gradient(linear, left, right, color-stop(0.00, #000000), color-stop(1.00, #0D0D0D)); } .tab .item:hover h4 a{ color:#F2AA00; } .tab .item h4{ padding-bottom:3px; color:#FFFFFF; font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; font-size:14px; } .tab .item h4 a{ color:#FFFFFF; text-decoration:none; } .tab .item h4 a:hover{ color:#F2AA00; } .tab .item p{ color:#909090; font-size:15px; } .pager{ float:right; text-align:right; padding-right:40px; } .pager a{ color:#4A4848; padding-left:5px; } .pager a:hover{ color:#F2AA00; } .pager a.active{ color:#D11300; } /* // Содержимое закладок*/ |
Повторите HTML для каждой закладки. Вот как это должно выглядеть:
Шаг 21 – Нижний колонтитул (Футер)
Наконец, добавьте панель навигации нижнего колонтитула и информацию о копирайте:
| 1 2 3 4 5 6 7 8 9 10 | <div id="footer_content"> <ul id="footer_nav"> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Sitemap</a></li> </ul> <div id="copyright">Tuts+</div> </div> |
Теперь линию градиента в 1px из файла PSD, назовите его "bg-footer-line" и сохраните как JPG. Наконец, отредактируйте CSS для установки всего этого.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | /* Footer Nav */ #footer_content{ float:left; width:940px; height:45px; padding:10px; margin-top:10px; background-image:url(../images/bg-footer-line.jpg); background-position:top center; background-repeat:no-repeat; font-family:Tahoma, Geneva, sans-serif; font-size:10px; color:#515151; } #footer_nav{ } #footer_nav li{ display:inline; } #footer_nav li:last-child a{ border-right:none; } #footer_nav li a{ color:#515151; padding-right:5px; border-right:1px solid #292929; } #footer_nav li a:hover{ color:#F2AA00; } #copyright{ float:right; padding-right:30px; } |
Заключение
Вот оно! Мы закончили процесс преобразования. Код, указанный здесь, был протестирован во всех основных браузерах. Если вам нужна совместимость с IE6 и 7, не будет большим трудом написать для них отдельно несколько решений проблемы. Наш проект уже готов к интегрированию в любую CMS в качестве оболочки. Удачи вам и огромное спасибо за прочтение!
Автор: Alvaro Guzman
Источник: http://webdesign.tutsplus.com/
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!
Смотреть видео
Огромное спасибо за урок!
Спасибо большое, я только одну третью часть работы провела и боюсь, что не все у меня получится. Очень большая работа и я рада, что нашла такой материал у вас. Буду постигать азы со слайсами. Давно хотела этому поучиться.
Спасибо! очень хорошие уроки и сайт у вас хороший. Вот только для меня это всё очень сложно, немного не туда залезла:)
Сделали бы серию уроков по созданию шаблона для wordpress, от дизайна до верстки(подробно)
Всё очень интересно, но пока что очень всё сложно надо сидеть и разбираться.
Ну, конечно, нравится. Все толково описано. Спасибо.
Спасибо за такой подробный труд.
Вы говорите, что для любых CMS.
Неужели при вставке в Joomla, Drupal, WordPress, Taba, не будет никаких особенностей?
Скоро будет видео урок о том, как эту тему установить на CMS WordPress.
скорей бы вышел урок для CMS WordPress.
Скоро будет.
Нет слов.Это все для меня очень подходит.
Где — же я был раньше?
Продолжаем учебу!
Увас уроки связаны CMS WordPress, а почему по Joomla нет ведь она тоже очень популярна, и хотелось бы например научиться писать, различные модули и плагины для CMS Joomla.
Когда я открыл первый урок, то просто обалдел. В первом уроке я нашел такую основу, которую я не видел не в одном из уроков по сайтостроению. Но на третьем уроке я получил облом в виде доступа по паролю и логину. Ребята у меня такой вопрос: как мне продолжить обучение.
Подписаться на Премиум уроки. К примеру на 1 месяц — 240 рублей, или на 3 — 570 рублей.
У кого есть доступ на 3ий урок, поделитесь плиз скриншотом веб страницы. Большое спасибо
Веб-страница аналогична той, что и во втором уроке практически на 100%.