У нашій сьогоднішній статті ми розповімо вам про те, яким чином поетапно можна перетворити охайний дизайн портфоліо, про який ми вам колись розповідали, в шаблон на HTML. Ви навчитеся застосовувати платформу CSS, CSS-спрайт, а також сам код CSS3 так, щоб отримати абсолютно валідний крос-браузерні шаблон HTML / CSS. Сподіваємося, що вам вистачить терпіння дійти до кінця статті, і отримані знання знадобляться вам в подальших проектах.
Тепер давайте перейдемо до самого процесу.
Посилання на ресурси, які вам знадобляться в ході розробки:
* Розробка охайного шаблону портфоліо в Фотошоп
* 960 grid system
Етап 1 - Підготовка
Якщо ви коли-небудь читали статті про верстку готових дизайнів, то напевно помічали, як у процесі розробки застосовується 960gs для створення направляючих. Що ж, тут нам також знадобиться 960gs в якості платформи CSS. Застосування CSS-платформ економить багато часу, а також значно полегшує процес розробки стилів. Тепер вам потрібно завантажити 960gs для використання протягом статті.
Тепер в процесі розробки вам слід протестувати вашу розмітку в різних браузерах, адже вам не хотілося б потім повертатися в самий початок через виниклі проблем з сумісністю. У нашій сьогоднішній статті ми використовуємо CSS3 стилі, але, як вам напевно відомо, поки що не всі браузери досконало підтримують цю технологію. Результати, відображені в цій статті, були зафіксовані в Firefox 3.6, який підтримує всі функції CSS3, використані протягом статті.
Етап 2 - Підготовка файлів
Перше, що потрібно зробити, це створити директорію, в якій буде розміщуватися наш шаблон. Найчастіше всередині кореневої директорії також створюються папки / images / для зображень і / styles / для файлів стилів (CSS). HTML-файли зазвичай складають в кореневій директорії.
У цій навчальної статті нам доведеться експортувати зображення з PSD для того, щоб далі використовувати їх в нашому HTML-шаблоні. Ви можете експортувати ці зображення самостійно, якщо у вас є PSD-файл розділений на шари з першої статті про розробку шаблону, або ви можете завантажити вихідні файли шаблону даної статті, там все зображення вже експортовано.
Етап 3 - Начерки шаблону
Нам слід почати з розробки простого шаблону HTML для того, щоб зв'язати всі елементи разом. Вдивляючись в дизайн у вікні розробки Photoshop, ви повинні помітити кілька речей:
1. шаблон розділений на 4 секції: шапка (логотип і меню), запропоновані проекти, тіло сторінки (контент) і підвал.
2. у нас є фонове зображення для шапки та запропонованих проектів, яке повторюється в горизонтальному напрямку.
3. тепер потрібно побачити те, що у секцій шапки, запропонованих проектів і підвалу фіксована висота, тобто у всіх, крім секції з контентом.
4. нарешті, у секції з запропонованими проектами відмінне від інших фонове накладення.
Виходячи з цих пунктів, нам потрібно зробити наступну HTML-розмітку.
Як видно, в цій розмітці ми додали посилання на файли CSS в голові документа, створили 4 основних DIV 'а, де кожному присвоєно унікальне ім'я класу для подальшого оформлення, а також ви помітите, що крім класів header_container і content_container тут також включений container_12. так як цих класів потрібен той же стиль, як у container_12. вбудованого в платформу 960gs. Той же атрибут застосований і до класу DIV 'а featured_container. і ми відокремили його від основного DIV 'а, тому і з'явилася можливість додати окреме фонове накладення. Далі потрібно задати стиль повторюється по горизонталі фону в шапці і секції запропонованих проектів. Тепер давайте додамо CSS (весь CSS-код повинен бути доданий в файл style.css):
Давайте подивимося, що тут у нас є. До всієї сторінці ми застосували сірий колір шрифту (# 1d1d1d), а фон документа встановили на білий (#fff), а також повторюється по горизонталі фон (bg.png). Далі ми вказали стандартне сімейство шрифтів і їх розміри, а потім поставили колір посилань (# 0cb0ca) без декорацій в звичайному режимі і з підкресленням при наведенні. Далі ми задали стиль header_container з фіксованою висотою в 100 пікселів і задали параметр overflow на hidden. Тепер давайте подивимося на стиль featured_container. фіксована висота 454 пікселя, приховування надлишків, білий колір шрифту і розмір 14 пікселів. Далі ми задали накладення фонового зображення (featured_bg.png) до container_12 без повторень і з позиціонуванням по верхній центральній точці. Далі ми додали стиль до content_container. який включає в себе 24 пікселя для висоти ліній (що контролює проміжок між лініями тексту), 38 пікселів відступу від верхнього краю і 60 пікселів відступу від нижнього краю для підтримки проміжку між запропонованими проектами, підвалом і секції з контентом.
І, нарешті, ми задаємо стиль footer_container. який включає в себе горизонтально повторюється фонове зображення footer_bg.png. фіксоване значення висоти, 100% значення ширини для заповнення всього вікна браузера по горизонталі, установку відображення на block, приховування надлишків, а колір тексту на білий. В результаті має вийти щось на зразок цього.
Етап 4 - Логотип і меню в шапці
Тепер давайте додамо логотип і меню в верхню частину нашого шаблону. Ось HTML-код для header_container:
Тепер давайте додамо стиль для вмісту в шапці шаблону:
Для оформлення логотипу ми додали верхній відступ на 36 пікселів в стиль grid_5 для утримання заголовка і посилання на логотипі, далі ми стилізували посилання за допомогою стилю відображення block, додали фіксоване значення висоти і ширини, додали фонове зображення Logo.png. вирівнювання плаваючого елементу по лівій стороні і значення -9999 пікселів для поглиблення тексту і, до того ж, для того, щоб зробити текстову посилання невидимою, але придатною в цілях SEO.
Тепер давайте оформимо пункти в меню. Для цього, ми скористалися технікою під назвою - спрайт. Вона дозволяє нам зробити так, щоб всі пункти меню були єдиним зображенням, а за допомогою CSS ми просто вказуємо область відображення. Тепер в нашому шаблоні для пунктів меню доступні нормальне положення і положення при наведенні курсору миші, що витягають із файлу menu_items.png. Тепер ми задаємо стиль menu_items. який має на увазі під собою вирівнювання плаваючого елементу по правому краю, що зрушує всі пункти меню в праву частину шаблону, привласнили тегами a стиль відображення у вигляді block. встановили фонове зображення menu_items.png. правий відступ для створення простору між пунктами меню та поглиблення тексту на -9999 пікселів для приховування посилання. Тепер ми додамо стиль для класів кожного пункту меню для того, щоб ми в повній мірі змогли спостерігати нормальне і активне положення. Нарешті, ми задаємо значення ширини, а положення фону на відображення лише частини вмісту спрайту. Результат можна побачити нижче.
Етап 5 - Розробка секції запропонованих проектів
Тепер давайте додамо HTML-код для секції запропонованих проектів.
Тепер давайте розберемо те, що ми додали. Ми додали «div» з класом grid_12. який займає всю ширину і містить в собі назву проекту, його опис і кнопки. Далі ми додали ще 2 div'а з класами grid_8 і grid_4. вони утримують вміст для характеристики покупців. Тепер давайте додамо стиль CSS для секції запропонованих проектів.
Для початку ми стилізували current_project за допомогою вказівки фіксованої ширини і висоти, приховування надлишків і відступом від верхнього краю в 78 пікселів - це допоможе нам створити простір між заголовком і запропонованими проектами. Далі ми встановили другий стиль для шапки, в якому містяться параметри шрифту Georgia. розмір шрифту 30 пікселів, а також параметр ширини лінії в 24 пікселя. Далі, з товщиною лінії, ми встановлюємо стиль абзацу з фіксованою шириною і відступом від нижнього краю.
Далі для оформлення кнопок «читати далі» і «мій портфель» ми застосували можливості CSS3, що дає нам той же результат, як і в Photoshop без використання зображень. Тут дві секції - одна призначена для нормального положення кнопки (.featured_container .container_12 .grid_12 .current_project a) і друга для положення при наведенні курсору миші (.featured_container .container_12 .grid_12 .current_project a: hover). Для нормального положення ми використовуємо # 1d1d1d в якості заміни стандартного кольору посилань, вирівнювання плаваючого елементу по лівій стороні, фіксовані параметри ширини і висоти, вирівнювання тексту по центру, напівжирний шрифт, а товщина лінії така ж, як і висота тексту - це потрібно для того , щоб текст вирівнювався по центру по горизонталі. До того ж, тут у нас параметр товщини кордону становить 5 пікселів з радіусом 14 пікселів, а також правий відступ для створення проміжку між кнопками. До тексту ми задали параметр text-shadow. що дозволяє нам відкинути тінь від тексту на 1 піксель по горизонталі і вертикалі і розмити його на 0 пікселів. І, нарешті, кнопок було поставлено фон у вигляді градації.
Ймовірно ви помітили, що ми стилізували елемент абзацу в секції рекомендацій користувачам так, щоб шрифт там був маленьким, висота була фіксована, взагалі не було полів, але були відступи зверху і зліва, а також збільшена ширина рядка. Далі ми стилізували елемент span, який містить в собі ім'я курсивом, а в якості кольору тексту заданий # 0cb0ca. Нарешті, ми стилізували кнопку «Project On Your Mind? Hire Me »за тим же принципом, як ми зробили з попередніми кнопками, за винятком пари параметрів. Тепер наш шаблон повинен виглядати приблизно так.
Етап 6 - Розробка секції контенту
Тепер давайте перейдемо до секції контенту. Як видно з нашого дизайну, ця секція поділена на три рівних по ширині відділу, тому нам потрібно зробити три елементи «div» з класом grid_4. Ось код HTML:
Зауважте, що відділ з заголовком містить зображення, нормальний текст і текст всередині елемента span. Вам також доведеться експортувати іконки з PSD-файлу або ж скористатися тими, які є в вихідному файлі. Все, що нам залишається зробити - внести стилізацію за допомогою CSS. Ось CSS-код для основного розділу шаблону.
Для початку ми задаємо стилю h2 параметр Georgia в якості основного шрифту, фіксований розмір шрифту і ширину рядка. Потім ми оформляємо зображення в заголовку (іконка) - воно повинно рівнятися по лівому краю, потім додаємо позитивне значення правого поля і негативне значення верхнього поля для того, щоб зображення рівнялося так само, як ми бачимо в оригінальному зображенні дизайну. Тепер ми оформляємо span так, щоб в ньому використовувався інший шрифт і менший текст. Потім ми оформляємо параграф так, щоб текст рівняти або заповнював весь вільний простір, а також додаємо нижнє поле. Далі нам потрібно оформити пункти неупорядкованого списку в лівій частині основної секції. Для початку ми оформляємо елемент ul так, щоб він рівняє по лівому краю, а потім оформляємо li і скасовуємо у нього тип списку, а потім додаємо туди праве поле на 40 пікселів. Тепер ви повинні побачити те, що коли ми використовуємо «list-style-type: none», то у пунктів перерахування немає піктограм, але в оригінальному дизайні у нас в якості позначки перерахування використовується риска, тому нам потрібно внести його перед кожним пунктом списку використовуючи «.content_container .grid_4 ul li: before» і «content:" - "».
Етап 7 - Розробка підвалу
Тепер давайте оформимо вміст підвалу. Ось CSS-код для підвалу:
Врахуйте, що ми задали верхнє поле в 20 пікселів для класу container_12. що створить простір між підвалом і основний секцією шаблону. Далі ми задали стилю header 3 шрифт Georgia розміром в 18 пікселів, висоту рядка в 12 пікселів і стандартну декорацію тексту. Далі ми відключили піктограми у пунктів списку, задали ту ж висоту рядка, а також висоту пунктів меню так, щоб текст став по центру по вертикалі. Потім ми задали товщину нижньої межі в 1 піксель, ліве поле і відступ справа. Далі ми оформили абзаци, посилання і іконки контактів. Нарешті, ми секції копірайту ми задали стилізацію без відступів, з вирівнюванням по класу grid_12. щоб маленький текст був вирівняний по центру, далі були задані ті ж значення висоти рядка.
Тепер, якщо ви слідували всіма пунктами і вказівкам нашої сьогоднішньої статті, то у вас повинно вийти щось на зразок цього:
У нашій сьогоднішній статті ми навчилися перетворювати дизайн в повноцінний шаблон HTML / CSS, використовуючи CSS-спрайт і методики CSS3. Не забудьте провести тест на валідацію для перевірки сумісності з браузерами. Звичайно ж, все CSS3 параметри не можуть бути валідними для всіх браузерів, тому перед перевіркою виключіть все CSS3-параметри. На цьому все.