Проектування та верстка гнучкого сайту

17

Від автора: У цієї навчальної статті ми збираємося проектувати і кодувати просту web-сторінку блогу. Ми звернемо особливу увагу на створення нашого дизайну, гнучкого і доступного використовуючи ясний і простий XHTML і CSS. Ця навчальна стаття націлена на новачків і для тих, хто бажає поліпшити доступність свого веб -дизайну.

Перед тим, як ми приступимо до верстки гнучкого сайту, я Вам рекомендую переглянути демо-результат роботи.

Також завантажте вихідні коди собі на комп’ютер!

Крок 1

Отже, наш приклад web-сторінки заснований на простій темі блогу, з структурою блогу WordPress, подібну на головну сторінку nettuts. Це виглядає приблизно так:

Проектування та верстка гнучкого сайту

Ідея тут не в тому, щоб ви відтворили мій приклад, а в тому, щоб ви були в змозі йти вперед і застосовувати методики до Вашим власним дизайнам, ми сподіваємося, навчити вас декільком основним речей.

Крок 2 – Photoshop

Ми збираємося використовувати тут мінімум Photoshop, зазвичай я роблю весь макет конструкції в Photoshop до кодування, але тут я просто хочу створити основну розмітку і потурбуватися про зміст пізніше. Це приклад іншого процесу, він буде мати більше сенсу, по мірі того, як ми будемо рухатися вперед разом.

Розмітка сторінки

Я вирішив зробити сторінку 900px ширини, таким чином мій документ 1000px в ширину, і 1200 px в довжину (не знаю, чому я дав собі так мало місця, зробіть Ваш ширше, якщо Вам хочеться). Помістіть напрямні 50px і на 950px, щоб отримати область шириною 900px. У нас буде область інформаційного наповнення і бічна колонка. Область інформаційного наповнення буде шириною в 600px, так і помістіть іншу напрямну на 650px.

Фони

Фон заголовка це тільки три прямокутника: для головних посилань, основного заголовка, і навігаційної області. Я використовував форму шару і додав градієнти до стилів шару. Там є також 1px межі між верхньою областю та областю заголовка, і між заголовком і навігаційної областю.

Фоном колонтитула є інший градієнт, але в цей раз з 2px кордоном вгорі.

Проектування та верстка гнучкого сайту

Проектування та верстка гнучкого сайту

Проектування та верстка гнучкого сайту

Проектування та верстка гнучкого сайту

Потім додайте фон для бічної панелі, я вибрав # d8ddd1.

Проектування та верстка гнучкого сайту

Інструменти

Далі ми візьмемо інструмент текст (T) і додамо логотип і гасло, і деякі основні посилання навігації. Шрифти:

Назва блогу:

Font: Myriad Pro

Size: 48pt

Color: #ffffff (white)

Опис блогу:

Font: Myriad Pro

Size: 24pt

Color: #ffffff

Основні навігаційні посилання:

Font: Arial

Size: 18pt

Color: #2b2b2b

«welcome, guest» і «stay updated»:

Font: Arial

Size: 12pt

Color: #fffff

«login, Sign Up» і «subscribe via…»:

Color: #a5bf8d

Style: underline

Проектування та верстка гнучкого сайту

Зміст

Ми тільки збираємося включати один типовий «пост» у наш макет Photoshop, тому що я вважаю, що робота з типом в Photoshop є головним болем, але ми отримаємо більшу кількість деталей про моделюванні розділу інформаційного наповнення пізніше. Шрифти, які я використовую для поста:

Заголовок поста:

Font: Arial

Size: 24pt

Color: #3c3f40

Style: Bold

Дата, категорії і автор інформації:

Size: 11pt

Параграфи:

Size: 12pt

Проектування та верстка гнучкого сайту

Добре, ми досить багато зробили з нашою розміткою. Все, що нам необхідно зробити зараз — це вирізати її і зберегти для веб.

Виберіть інструмент «фрагмент» (C) і виріжте тонкі шматочки з кожного фонового прямокутника: верхній панелі, області заголовка, навігації та колонтитула. Не включайте кордону, ми збираємося включити їх в CSS. Спробуйте збільшити якомога більше, щоб засвідчуються, що Ви отримаєте праві частини. Фрагменти, які я вирізав, близько 5px в ширину, але ширина не дуже важлива на даний момент.

Проектування та верстка гнучкого сайту
Проектування та верстка гнучкого сайту

Виберіть ‘File/Save for web and devices…’ Утримуючи клавішу shift і клацніть, щоб вибрати кожен фрагмент. У розкривному меню presets» виберіть «jpeg». Зніміть прапорець «convert to sRGB»(я вважаю, що перетворення притуплює кольору). Всі інші параметри слід залишити за замовчуванням. Натисніть «Save.» У спливаючому вікні переконайтеся в тому, що «selected slices»відображається в випадаючому меню slices» і натисніть кнопку save.

Користувачам GIMP: я не впевнений, чи є у gimp такий інструмент як slice, але Вам потрібно зробити прямокутні виділення, зберегти їх в окремі документи, обрізати низ і зберегти їх як jpeg.

Крок 3 – HTML

Відкрийте ваш улюблений редактор коду і створіть новий файл під назвою index.html. Ми збираємося використовувати декілька тегів div так, щоб зберегти нашу розмітку семантичної. Це робиться для підтримки гнучкої розмітки та швидкого зміни розміру розмітки, ми повинні вкласти деякі елементи повторюються div . Докладніше про це пізніше.

Всі елементи на нашій сторінці, будуть включені в два div, що носять імена «main» і «footer». В рамках » main » div ми будемо мати div для верхньої панелі, заголовка та області вмісту. «Footer» буде містити внутрішньої div для написаного контенту.

My Blog

Верхня панель

На тлі синя смужка зверху простягається на всю ширину сторінки, але дві текстові області повинні бути в межах 900px сторінки. Для досягнення цієї мети, ми повинні помістити зміст всередину іншого div, який буде мати клас “container».

У верхній панелі у нас буде два пункти, один для логіна, а інший для опцій підписки. Оскільки вони будуть floated, кожному з них необхідно присвоїти унікальний ідентифікатор. Фактично, якщо ми хочемо повністю відповідати семантиці, ми могли б код цих двох пунктів зробити у вигляді неупорядкованого списку з двома елементами списку. Спробуйте обидва способи, подивіться, чи можете ви це змусити працювати.

Welcome, Guest Login Sign Up

Stay Updated: Subscribe via RSS Email Updates

Крок 5 – Заголовок

Ми стикаємося з тією ж самою проблемою і тут, як ми робили в попередньому кроці, фонове зображення повинно тривати дуже сильно. Щоб утримувати інформаційне наповнення, ми повинні помістити його в інший div. Так як заголовок також буде знаходитися за цетнру в межах нашої 900px сторінки, ми можемо багаторазово використовувати клас»container». Заголовок блогу буде обгорнутий в тег

і опис буде тегом

з унікальним id.

Навігація

Крім того, у заголовку знаходиться меню навігації, яке буде обгорнуте в ненумерованний список з id «menu», які будуть знаходитися в іншому Div з id «navigation».
Оскільки ми хочемо, щоб навігаційне меню було по центру, ми можемо додати наш клас «container» також до ul.

Тут ми пишемо навігаційні посилання в нижньому регістрі, але в нашому файлі CSS ми перетворимо їх до верхнього регістру. Їх можна написати тут заголовних буквах, але моя клавіша Caps Lock зламана, і це робиться для більш чистої розмітки.

Крок 6 – Інформаційне наповнення

У галузі інформаційного наповнення немає фонового зображення або кольору, тому нам не потрібно включати його в додатковий div. Щоб вирівняти по центру, ми можемо присвоїти блоку інформаційного наповнення також клас «container». Всередині нього у нас є ще два div-а, один для повідомлень в блозі, і один для бічної панелі.

Проектуючи блог, ми повинні взяти до уваги той факт, що інформаційне наповнення може змінитися, і може містити будь-яку кількість елементів, включаючи списки, зображення, цитати, заголовки і підкреслений текст. Щоб бути готовими до цього, ми повинні розробити кожен можливий елемент, який міг би з’явитися, таким чином наше типове інформаційне наповнення має включати всі. Це іноді називають «методом Пісочниці.» Щоб отримати фіктивне інформаційне наповнення, я пропоную відвідати HTML Ipsum.

Ми збираємося розділити наше інформаційне наповнення на пару різних постів, з заголовками, обгорнутими в

теги. У кожного поста також буде стандартна інформація про дату, автора, і т. д, що міститься у рамках тегу.

Don’t Cancel Chuck!

on July 01 in General tagged petitions by admin

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.
Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus,
at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Read More

Alien Spacecraft found in New Mexico

on July 01 in General tagged petitions by admin

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ghostly Goo in your Kitchen Sink?

on July 01 in General tagged petitions by admin

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat діяльності wisi, condimentum sed, commodo vitae,
ornare sit amet, діяльності wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 4

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.
Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus,
at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Lorem ipsum dolor sit amet
  • Consectature vestiblum

Крок 7 – Бічна панель

У звичайному блозі, на бічній панелі містяться різні віджети, які відображають посилання на інші сторінки або статті, і кожен віджет, як правило, це неупорядочнный список тегів посилання (). Тут у нас будуть «categories», «recent posts» і «archives» віджетів. Таким чином, наші блок бічній панелі буде містити три списки, кожен з назвою, загорнутим в

теги.

Categories
  • General
  • Ghost Sightings
  • UFO Crashes
  • Government Coverups
  • International Conspiracies

Recent Posts

  • Ghost Sighting Mansion in
  • UFO picked up by satelites
  • Mutants amoung us?
  • Bigfoot: Fact or Fiction?

Archives

  • June 2008
  • May 2008
  • April 2008
  • March 2008

Крок 8 – Колонтитул

Нижній колонтитул буде працювати також, як основна панель, заголовок і навігація, яка працює з зовнішнім div, щоб провести повторюваний фон, а внутрішній div центрує інформаційне наповнення і тримає його в межах 900px нашої сторінки. Щоб зробити це, ми тільки повинні додати клас «container» до нашого div-у «footer content».

У нашого нижнього колонтитула буде три стовпці: авторського права, посилання і підписні опції. Кожен повинен буде знаходиться в межах свого власного div.

Відмінно, ми зробили нашу розмітку! Давайте поглянемо в браузері (я використовую Safari 4, який, до речі, дивовижний).

Проектування та верстка гнучкого сайту

Здається, що замало всього, але зате є все наше інформаційне наповнення, розташоване логічно і добре читається. Важливо, що нестилизованная web-сторінка містить всю інформацію, необхідну для читача, щоб він міг зрозуміти і керувати сторінкою. Це гарантує, що будь-який користувач, у якого відключена підтримка CSS( заблокована або він используюет спеціалізований браузер (наприклад, читання з екрану для людей з ослабленим зором), як і раніше, буде доступно і зрозуміло зміст. Маючи це на увазі, можна також забезпечити логічну розмітку, яку буде легше змінити пізніше.

Крок 9 – CSS

Тепер найцікавіше: додавання стилів сторінці. Приготуйтеся – щоб досягти розмітки, яку ми хочемо, ми будемо змушені стикатися з деякими проблемами CSS. Я збираюся спробувати пояснити основні поняття, які призводять до цих проблем, так, щоб Ви не тільки дізналися, як вирішити їх, але також і отримали б краще розуміння того, як CSS працює і як боротися з будь-якими проблемами, на які Ви могли б натрапити. Давайте почнемо!

Створіть новий документ “style.css» і зв’яжіться з ним в заголовку Вашого документа html:

My Blog

Крок 10 – Основне очищення

Насамперед, ми позбавимося від заданих за замовчуванням стилів браузера.

Ми збираємося використовувати простий скидання css, щоб позбутися жахливих margins і стилів:

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote {
margin:0px; padding:0px; border:0px;
}

Ми маємо також неправильний шрифт для всієї нашої сторінки, давайте виправляти це:

body {font-family: Arial, helvetica, sans-serif; }

Наступний крок — свого роду акуратність: пам’ятаєте, як ми додали клас»container» до всіх div-ам, у яких було текстове зміст? Настав час змушувати той контейнер містити наше інформаційне наповнення! Як я говорив раніше, ми робимо нашу сторінку в 900px шириною і у нас має бути інформаційному наповнення центроване.

.container {width: 900px; margin: 0 auto; }

І тепер у нас є гарна широка 900px, центрована інтернет сторінка.

Крок 11 — Починаємо зверху

Ми збираємося почати зверху з маленькою блакитним панелі, що містить посилання входу в систему і підписку. Перша річ, на яку ми звертаємо увагу, що стосується наших двох пунктів угорі це те, що вони, як передбачається, повинні бути по різні сторони один від одного. Щоб зробити це, нам необхідні float елементи.

Як працює float

Коли ми дивимося на нашу інтернет сторінку в браузері, ми бачимо групу елементів різної ширини і висоти. Браузер, проте, бачить тільки групу полів, які накладаються один на одного, при цьому кожен елемент займає всю ширину контейнера. У інтернет сторінки є дуже простий «потік»: кожний елемент підсувається вниз сторінки за елементом вище нього. Щоб зробити так, щоб два елемента перебували поруч один з одним, ми повинні вийняти їх з нормального «потоку» сторінки.

Коли елемент float-тится, відбувається наступне: він прикріплюється до боці сторінки (або до іншого елементу), і це видаляє його з нормального потоку елементів – тобто, замість того, щоб займати всю ширину сторінки, він тільки займає місце, яке безпосередньо займає, дозволяючи елементів знаходяться під ним підсунути до нього.

Давайте спробуємо це з нашими двома маленьким параграфами:

p#login {float: left; }
p#subscribe {float: right; }

Подивіться в браузері, і у нас є проблема! Лого h1 просунув себе і став між двома float-нутыми елементами. Коли Ви використовуєте float елементи, Ви говорите їм «порушувати правила», єдина проблема, коли Ви дозволяєте деяким елементам порушувати правила, інші елементи також порушують їх! Нам необхідно знайти спосіб як сказати браузеру, що цим двом пунктам і тільки цим двом пунктам дозволено порушити правила, щоб після float-нутих елементів, нормальний потік відновився. Щоб зробити це, ми повинні додати правило до батьківського div двох float-нутих елементів, яке дозволить цими двома пунктами всередині з float, не зачіпати іншу частину сторінки.

Проектування та верстка гнучкого сайту

Для цього нам потрібно додати властивість містять div «overflow» і встановити значення «hidden».

#top_bar {overflow: hidden; }

Не принципово розуміти, що таке overflow або hiding поки Ви розумієте що overflow: hidden правильно, керує поведінкою float-нутих елементів в межах div-а . Тепер, я не хочу нікого плутати або лякати, але ця методика працює не у всіх браузерах. Це працює тут, але завжди перевіряйте IE свої проекти. Є ряд інших методів, слід зазначити, що всі вони мають свої переваги.

Ще одна важлива річ про float це те, що Ви повинні завжди визначати ширину. Ваш CSS перевірить правильність, якщо Ви не зробите (Ви отримаєте попередження), але це — передовий досвід, і іноді може завершитися несподіваними результатами в деяких браузерах, якщо Ви цього не зробите.

Так як ми хочемо, щоб наша розмітка легко змінювалася, ми не збираємося використовувати значення пікселя, ми будемо використовувати відсотки. Також ми можемо дозволити кожному елементу займати 50 % від ширини. Оскільки ми дали цьому так багато простору, параграф підписки посунувся вліво. Ми можемо змусити його дотримуватися знову праворуч, визначаючи, text-align: right.

p#login {float: left; width: 50%;}
p#subscribe {float: right; width: 50%; text-align: right; }

стилі обзацев

Перш ніж додати фонове зображення, мені подобається розробляти шрифти так, щоб я міг бачити, скільки потрібно місця.

Розміри шрифтів з використанням em

Ми хочемо зробити нашу web-сторінку максимально доступною і гнучкої наскільки можливо, досягнувши найбільшої аудиторії, чи не так? Т. е треба подбати про читачів, щоб вони могли змінити розмір тексту як їм зручно. Отже, різні браузери мають справу із зміною розмірів по-різному, але як завжди, є проблема в браузері IE/Win. В Internet Explorer, якщо Ваш текстовий встановлений розмір в пікселях, Ви не можете змінити розміри його, таким чином, Ваш читач застряє з будь-яким розміром шрифту, який Ви визначили. Це не дуже приємно, особливо для читачів з поганим зором. Щоб виправити цю проблему, ми повинні використовувати іншу одиницю вимірювання – em.

Em – одиниця відносного розміру – це означає, що ширина «m» у будь-якому розмірі шрифту визначена. За замовчуванням розмір, встановлений браузерами 16px, таким чином 1em дорівнював розміру шрифту 16px.

Щоб зробити нашу web-сторінку повністю масштабованої, ми можемо перетворити всі наші розміри шрифтів em. Найпростіший спосіб зробити це з веб-застосунком Em Calculator (краще всього працює в FireFox).

Однак, щоб уникнути вирішення складної математики, є більш простий спосіб. Починаючи з em щодо стандартного розміру шрифту сторінки, якщо ми змінимо значення за замовчуванням, то значення будуть різними.

Щоб зробити математику простіше, ми можемо задати собі базу 10, встановлюючи заданий за замовчуванням шрифт 10px замість 16. Щоб зробити це, ми визначаємо в нашому файлі CSS, що ми хочемо, щоб наші шрифти склали 62.5 % від значення за замовчуванням.

body {font-family: Arial, helvetica, sans-serif; font-size: 62.5%; }

Тепер нам просто потрібно розділити кожен розмір шрифту в пікселях на 10, і у нас є наше em значення. Для початку, розмір шрифту для наших двох

тегів у верхній частині сторінки 12px, який розробляє для 1.2 em.

#top_bar p {font-size: 1.2 em; color: #ebf0e8;}
#top_bar a {font-size: 1.2 em; color: #a5bf8d;}

Розширювані фони

Потім, ми додаємо повторюється фонове зображення, яке ми нарізали з PSD:

#top_bar {overflow: hidden; background: url(images/bar_slice.jpg) repeat-x; }

Ми повинні додати трохи padding до верхньої і нижньої межі параграфів, щоб розтягнути зображення за його повній висоті. Щоб отримати правильні значення, ми повинні повернутися до нашого PSD і виміряти висоту bar з лінійкою інструментів: мій виявився 26px у висоту. Так як наш текст у висоту 12px, повний padding буде 26-12 або 14px. Це означає, що ми додаємо 7px padding до верху, і 7px до низу. (Ці значення іноді вимкнені пікселем або двома, але є хорошим місцем для початку, тільки продовжуйте перевіряти у Вашому браузері).

#top_bar {
overflow: hidden;
background: url(images/bar_slice.jpg) repeat-x;
padding-top: 7px;
padding-bottom: 7px;
}

Ми могли змусити div тягнутися за його повній висоті, вказавши висоту 26px, але завжди слід уникати визначати висоту для своїх елементів в максимально можливій мірі, щоб забезпечити максимальну гнучкість. Якщо Ви обмежуєте свій елемент певною висотою, то Ви не враховуєте більше текстове або додаткове інформаційне наповнення.

Перевірте, це виглядає точно так само як наш PSD. Але ось те, де речі стають складніше: спробуйте змінити розміри тексту в своєму браузері. Коли ми збільшуємо розмір тексту, змінюючи пропорцію, ми втрачаємо наш нижній padding, і текст в кінцевому рахунку вийде за межі фону. Щоб зробити » неразрушими» вебсайт, ми повинні змусити фон повторюватися, оскільки текст зростає або оскільки додається все більше інформаційного наповнення, так, щоб завжди було 7px padding у верхній і нижній межі, незалежно від того наскільки великий текст. Так як наше фонове зображення тільки 26px у висоту у нас повинно бути щось ще, щоб розтягнутися його ще. Те, що ми збираємося зробити, в основному це помістити суцільний колір під зображенням, так, щоб коли текст збільшується і зображення не може містити його, колір під зображенням показується і вміщує текст. Колір у нижній частині нашого градієнта # 08413c.Отже, давайте додамо це до нашого фону. Щоб вказати, що ми хочемо, щоб зображення не завжди дотримувалося вершини елемента, так, щоб колір простягався від основи, ми додаємо background-position значення після url зображення.

background: #08413c url(images/bar_slice.jpg) top repeat-x;

Тепер спробуйте змінити розмір тексту: фон росте разом з ним, і це виглядає досить добре, оскільки він теж стає більше. Це також говорить нам про те, що, якщо б ми хотіли другу додати рядок інформаційного наповнення, ми нічого не повинні були б змінити в нашому css. Можливість елемента розширитися для більшого або широкого тексту часто упускається у веб розробках, і сторінки ламаються, коли текст змінюється. Тільки перевірте мою university’s Homepage, спробуйте зробити текст трохи більше, і Ви втратите навігаційну посилання!

Ще одна річ, нам потрібно додати цю 1px кордон до основи нашого top-bar:

border-bottom: 1px solid #7ab7b7;

Таким чином ось де ми поки:

Проектування та верстка гнучкого сайту

Крок 12 – Заголовок

Так як ми збираємося зробити назва для нашого блогу і біле опис, давайте додамо спочатку фон. Ми, ймовірно, не будемо потребувати цьому зображенні, щоб розтягувати його, але на всяк випадок, ми повторимо той же самий процес додавання кольору фону і позиції:

#header {
background: #01835f url(images/header_slice2.jpg) top repeat-x;
}

Тепер давайте зробимо наші стилі шрифтів:

h1 {
font-family: «Myriad Pro», arial, sans-serif;
color: #fff;
font-weight: normal;
font-size: 4.8 em;
padding-top: 25px;
}
p.desc {
font-family: «Myriad Pro», arial, sans-serif;
color: #fff;
font-size: 2.4 em;
}

Добре, тепер ми повинні вивести нашу опис біля нашого Лого. Це може бути досягнуто з допомогою floating, але я спробував це і зіткнувся з проблемою визначення ширини, і мені вдалося отримати набагато кращий результат, використовуючи абсолютне позиціонування. Плюс це дає мені шанс пояснити важливе поняття!

абсолютне позиціонування

Якщо ми хочемо позиціонувати елемент поза «потоку» сторінки, не використовуючи floats, ми можемо використовувати абсолютне позиціонування, яке в основному дозволяє Вам позиціонувати елемент в будь-якому місці div незалежно від інших елементів у межах div. Це означає, що при вказівці позиції, скажімо, left: 10px, елемент займе позицію 10px до лівій стороні div, незалежно від того, є ще один елемент там.

По-перше, щоб абсолютно позиціонувати елемент, ми повинні встановити позицію батьківського div відносну, тому що абсолютно позиційований елемент позиціонується щодо батьківського div.

#branding {
overflow: hidden;
margin-bottom: 30px;
position: relative;
}

Тепер ми можемо встановити абсолютну позицію нашого опису. Коли використовується position: absolute, ми можемо визначити його позицію з точки зору лівих, правих, верхніх і нижніх, використовуваних пікселів, відсотків або em. По-перше, вершина – опис це майже 50 % від вершини заголовка, так давайте визначимо це:

p.desc {
font-family: «Myriad Pro», arial, sans-serif;
color: #fff;
font-size: 2.4 em;
position: absolute;
top: 50%;
}

Тепер ми повинні виставити це справа, даючи значення для left:

якщо ми будемо використовувати пікселі, то, коли текст змінений, він стане ближче до h1, і в кінцевому рахунку накладеться на нього, таким чином цей метод поганий. Ми отримуємо ту ж саму проблему з відсотками, тільки не так різко. Краще всього помістити його з em, який , як Ви пам’ятаєте, стають більше, як тільки розмір тесту стає більше, таким чином, простір між h1 і описом залишиться, коли текст буде змінено.

position: absolute;
top: 50%; left: 8em;

І це виглядає чудово!

Проектування та верстка гнучкого сайту

Крок 13 – Навігація

Давайте очистимо це меню навігації і позбудемося списку стилів і для прикраси тексту і додамо стилі шрифту.

ul#menu {list-style: none; }
ul#menu li a {
font-size: 1.8 em;
text-decoration: none;
color: #2b2b2b;
text-transform: uppercase;
}

Щоб змусити наші посилання вишикуватися в лінію горизонтально, ми збираємося встановити елементів списку float: left.

ul#menu li {float: left; }

Ми звичайно ж зіткнулися з тією ж самою проблемою, як і з усіма floats, але все, що ми повинні зробити, це додати в overflow: hidden навігаційне відділення.

Кожен елемент списку відстоїть на 45px від іншого, так що можна додати 45px відступу праворуч від кожного пункту.

ul#menu li {
float: left;
padding-right: 45px;
}

Примітка: Всі значення padding можуть бути скорочені як:

padding: 11px 45px 11px 0px;

p>Скорочення для padding (і margins) є значеннями для top-right-bottom-left все в одному рядку. Я вважаю, що кращий спосіб запам’ятати порядок це згадати напрямки компаса: n-e-s-w.

Потім, давайте додамо фонове зображення, використовуючи ту ж саму методику як і раніше, щоб наш фон розтягнувся, коли текст зміниться:

#navigation {background: #8ec196 url(images/nav_slice.jpg) top repeat-x; overflow: hidden; }

Щоб знайти padding значення, ще раз виміряйте висоту панелі (у мене 40px), і відніміть розмір тексту 18px), щоб отримати повний padding, і розділіть на два: 40-18=22px.

ul#menu li {float: left; padding-top: 11px; padding-bottom: 11px; }

Щоб перемістити нашу навігаційне меню трохи вниз, найпростіше зробити це, додавши margin до основи branding div.

#branding {overflow: hidden; margin-bottom: 30px; }

І, нарешті, 1px кордон у верхній частині панелі:

border-top: 1px solid #9cebda;

От і все! Ми зробили заголовок! Давайте подивимося:

Проектування та верстка гнучкого сайту

Крок 14 – Зміст

Перше,що ми повинні зробити, це повинні створити два стовпці – один для постів, один для бічної панелі. До теперішнього часу це має бути просто: просто один з float left, а інший float right.

#posts {float: left; }
#sidebar {float: right; }

І … Нічого не сталося. Принаймні це виглядає так, прокрутіть вниз, і Ви знайдете, що Ваша бічна панель прикріпилася до правого боку нижче постів. Перш, ніж бічна панель зможе наблизитися до постів, ми повинні визначити, як багато простору div може прийняти, і визначити ширину для бічної панелі. Знову, ми збираємося використовувати відсотки, замість пікселів, так, щоб, якщо текст змінять, бічна панель залишилася осторонь.

#posts {float: left; width: 67%; }
#sidebar {float: right; width: 33%; }

І ми повинні приховати overflow нашого змісту div:

#content {overflow: hidden; }

Проектування та верстка гнучкого сайту

Чудово, у нас є дві гарні маленькі колонки розмітки!

Крок 15 – Моделювання постів

Так як ми використовували скидання CSS, інформаційного наповнення нашого розділу постів немає ніякого стилю взагалі, і ми повинні пройти тяжку процедуру моделювання кожного окремого можливого елемента. Мій робочий процес трохи відрізняється для цього від іншої частини сторінки, оскільки я дійсно не посилаюся на документ Photoshop. Я вважаю, що моделювання шрифту в Photoshop це головний біль, тому я зазвичай пропускаю це. Щоб отримати стилі для моїх постів, я проходжу метод проб і помилок. Я зазвичай починаю з параметрів, таких заданим за замовчуванням стилям браузера, які Ви можете знайти за посиланням, і налаштувати їх як вам завгодно. Я не збираюся проходити весь процес крок за кроком, але це те, що я придумав в кінці:

#posts h2 {margin: 7px 0 4px 0; font-size: 2.4 em; }
#posts h2, h3, h4, h5, h6 {color: #3c3f40; }
#posts p {line-height: 1.3 em; padding: 7px 0; font-size: 1.2 em; }
#posts small {font-size: 1.1 em; }
#posts a {color: #327800; font-weight: bold; text-decoration: none; }
#posts blockquote {margin: 0.7 em 3em; border-left: 2px solid #327800; padding-left: 10px; }
#posts ol, ul, dl {font-size: 1.2 em; margin: 4px 0 4px 40px; }
#posts h3, h4, h5, h6 {padding: 4px 0; }
#posts strong {font-weight: bolder; }
#posts em {font-style: italic; }
#posts code {font-size: 1.2 em; }
#posts h3 {font-size: 1.8 em;}
#posts h4 {font-size: 1.4 em; }

Це має виглядати приблизно так:

Проектування та верстка гнучкого сайту

Тепер є 35px нагорі нашого розділу постів, але у наших тегів h2 вже є margin 7px нагорі, так давайте додамо margin 28px до вершини div постів.

#posts {
float: left;
width: 67%;
margin-top: 28px;
}

Шаг16 – Бічна панель

Перш за все, давайте додамо колір фону:

#sidebar {float: right; background: #d8ddd1;}

Та встановіть стиль шрифту:

#sidebar h3 {
font-size: 1.6 em;
color: #3c3f40;
margin-top: 10px
}
#sidebar ul {list-style: none; margin-left: 20px; }
#sidebar ul li {font-size: 1.2 em; }
#sidebar ul li a {text-decoration: none;color: #525254; }

Ми також повинні просунути бічну панель вниз на 25px (35px – 10px margin нагорі тегів h3). Цього разу, ми не можемо використовувати margin-top властивість, тому що це перемістить всю бічну панель, включаючи фон, нижче на сторінці. Ми хочемо, щоб фон починався прямо під навігаційною панеллю, але інформаційне наповнення починається на 35px нижче його, таким чином ми повинні використовувати padding-top властивість. Ми також потребуємо padding ліворуч, праворуч і знизу, і 25px виявляться справа, таким чином ми можемо оголосити все це в одному padding значенні:

#sidebar {
float: right;
background: #d8ddd1;
padding: 25px;
width: 33%;
}

Але ні! Наша бічна панель більше не в стороні! Це тому, що ми додали padding до сторін бічній панелі. Коли Ви додаєте padding до елемента, Ви фактично робите його більше. Ми тільки зробили нашу бічну панель на 50px ширше, таким чином тепер розміри floated елементів складають в цілому більше ніж 100 %. Щоб встановити це, давайте спершу перетворимо наше 25px padding до відсотку від 900px. Виходить, близько 2,7%, але я округлив до 3%.

padding: 25px 3%;

Примітка: це ще одне скорочене значення, це означає, що верхній і нижній відступи по 25px, а ліворуч і праворуч 3%.

Наша бічна панель тепер 33+6 % шириною, таким чином це все ще дуже широко, але все, що ми повинні зробити, тепер, віднімають 6 % з оригінальних 33 %.

width: 27%;

Я думав, що бічна панель виглядала трохи широкої у цьому пункті, таким чином, я зменшував її до 25 %.

Головне пам’ятати, що все padding, margin, і навіть border значення додають ширину елемента, тому Ви повинні коригувати властивість ширини, щоб компенсувати ширину кожен раз, коли Ви додаєте padding, margins або borders.

Ми йдемо вперед, незалежно від того наскільки Ви робите великий текст, наша бічна панель остсается осторонь, і відношення між областю постів і бічною панеллю залишається тим же самим. Це надмірно проста бічна панель, але я не збираюся розробляти її більше, тільки тому що не важливо для цієї навчальної статті.

Проектування та верстка гнучкого сайту

Крок 17 –Нижній колонтитул

По-перше, давайте трохи збільшимо шрифт і додамо деякі стилі:

#footer p {color: #a5bf8d;}
#footer h4 {color: #a5bf8d; font-size: 1.4 em; padding-top: 0; }
#footer ul {list-style: none; margin-left: 0; }
#footer ul li a {text-decoration: none; color: #fff; }

Далі, ми можемо додати в наше фонове зображення:

#footer {font-size: 1.2 em; background: url(images/footer_slice.jpg) repeat-x; }

І оскільки ми хочемо, щоб воно могло розтягнутися, ми можемо додати колір в нижню частину градієнта значення нашого фону так само, як ми це робили раніше:

background: #093b2b url(images/footer_slice.jpg) top repeat-x;

Потім, додайте 2px кордон вгорі:

border-top: 2px solid #1e956c;

Давайте додамо margin і трохи padding зверху і знизу:

#footer {
font-size: 1.2 em;
background: #093b2b url(images/footer_slice.jpg) top repeat-x;
margin-top: 30px;
padding-top: 20px;
padding-bottom: 20px;
}

Потім, ми збираємося створити три float-нутих стовпця. Три елементи floating працюють, так само як два floating, з float кожен стовпець йде наліво. Ми повинні оголосити розміри кожного елемента floated, використовуючи значення відсотка, щоб врахувати розширення.

#copyright {float: left; width: 20%; }
#links {float: left; width: 40%; }
#feeds {float: left; width: 40%; }

Просто пам’ятайте, що ми повинні встановити overflow hidden в батьківському div.

#footer {overflow: hidden;}

В даний момент, я вирішив, що фактично виглядало б краще, якби посилання і RSS div-а були на першому місці, та інформація про авторські права була в крайньому правому положенні, тому я змінив порядок div-ів, і встановив div авторського права з float: right, і текст вирівняний по правому краю.

#copyright {
float: right;
text-align: right;
width: 20%;
}

Проектування та верстка гнучкого сайту

І там у нас є, ми зробили, кодуючи та розробляючи нашу сторінку!

Крок 18 – Перевірка доступності

Я перевіряв свою сторінку в Safari 4. Так як Сафарі 4 є, ймовірно, самим стандартним і сучасним браузером, він відображає web-сторінки найбільш передбачувано. Якщо тільки всі користувалися слухняним стандартним браузером … На жаль, є ще люди, які використовують застарілі браузери, і ми повинні підготуватися до цього.

Давайте почнемо з самого проблематичного браузера Internet Explorer 6. Я використовую mac, і мені треба знайти ефективний (безкоштовний) спосіб перевірки моїх web-сторінки в Internet Explorer. Якщо будь-хто, читаючи це знає про свого роду чарівної методикою, будь ласка, повідомте мені. У будь-якому випадку час для перевезення ol’ сімейства Dell. Для установки декількох версій Internet Explorer, гуглим «Multiple IE» і завантажуємо ZIP-файл.

Дивно все працює просто відмінно в IE6! IE7 теж нормально. Текст змінює розмір! Я також перевірив цю сторінку у Firefox, Opera та Camino. У мене була проблема з установкою Google Chrome на пк, тому я не можу сказати Вам, працює там, але я думаю, що повинно, тому що проста размета і стилі.

Висновок

От і все! Ми сподіваємося, що Ви вивчили кілька речей про верстку гнучких сайтів. Перевірте сайт в будь-якому браузері, зробіть текст, зробити його меншим, і наша розмітка адаптується відмінно. Вимкніть CSS, і вона все ще має сенс! Я сподіваюся, що Ви бачите, як просто зробити так, щоб у Ваших вебсайтах було менше помилок! Ця сторінка була дуже проста, без складних проблем. Коли Ваші розмітки стануть більш складними, буде трохи важче підтримувати гнучкість.

Завантажити вихідні коди zip-архівом

Перегляд Demo

Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.

E-mail: [email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.