Від автора: У цієї навчальної статті ми збираємося проектувати і кодувати просту 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.
My Blog
Description of My Blog
Навігація
Крім того, у заголовку знаходиться меню навігації, яке буде обгорнуте в ненумерованний список з id “menu”, які будуть знаходитися в іншому Div з id “navigation”. Оскільки ми хочемо, щоб навігаційне меню було по центру, ми можемо додати наш клас “container” також до ul.
My Blog
Description of My Blog
Home
About
Blog
Contact
Тут ми пишемо навігаційні посилання в нижньому регістрі, але в нашому файлі 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 {font-family: Arial, helvetica, sans-serif; }
Наступний крок — свого роду акуратність: пам’ятаєте, як ми додали клас”container” до всіх div-ам, у яких було текстове зміст? Настав час змушувати той контейнер містити наше інформаційне наповнення! Як я говорив раніше, ми робимо нашу сторінку в 900px шириною і у нас має бути інформаційному наповнення центроване.
.container {width: 900px; margin: 0 auto; }
І тепер у нас є гарна широка 900px, центрована інтернет сторінка.
Крок 11 – Починаємо зверху
Ми збираємося почати зверху з маленькою блакитним панелі, що містить посилання входу в систему і підписку. Перша річ, на яку ми звертаємо увагу, що стосується наших двох пунктів угорі це те, що вони, як передбачається, повинні бути по різні сторони один від одного. Щоб зробити це, нам необхідні float елементи.
Як працює float
Коли ми дивимося на нашу інтернет сторінку в браузері, ми бачимо групу елементів різної ширини і висоти. Браузер, проте, бачить тільки групу полів, які накладаються один на одного, при цьому кожен елемент займає всю ширину контейнера. У інтернет сторінки є дуже простий «потік»: кожний елемент підсувається вниз сторінки за елементом вище нього. Щоб зробити так, щоб два елемента перебували поруч один з одним, ми повинні вийняти їх з нормального «потоку» сторінки.
Коли елемент float-тится, відбувається наступне: він прикріплюється до боці сторінки (або до іншого елементу), і це видаляє його з нормального потоку елементів – тобто, замість того, щоб займати всю ширину сторінки, він тільки займає місце, яке безпосередньо займає, дозволяючи елементів знаходяться під ним підсунути до нього.
Давайте спробуємо це з нашими двома маленьким параграфами:
Подивіться в браузері, і у нас є проблема! Лого 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.
Перш ніж додати фонове зображення, мені подобається розробляти шрифти так, щоб я міг бачити, скільки потрібно місця.
Розміри шрифтів з використанням 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:
Ми повинні додати трохи padding до верхньої і нижньої межі параграфів, щоб розтягнути зображення за його повній висоті. Щоб отримати правильні значення, ми повинні повернутися до нашого PSD і виміряти висоту bar з лінійкою інструментів: мій виявився 26px у висоту. Так як наш текст у висоту 12px, повний padding буде 26-12 або 14px. Це означає, що ми додаємо 7px padding до верху, і 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;
}
Добре, тепер ми повинні вивести нашу опис біля нашого Лого. Це може бути досягнуто з допомогою floating, але я спробував це і зіткнувся з проблемою визначення ширини, і мені вдалося отримати набагато кращий результат, використовуючи абсолютне позиціонування. Плюс це дає мені шанс пояснити важливе поняття!
абсолютне позиціонування
Якщо ми хочемо позиціонувати елемент поза «потоку» сторінки, не використовуючи floats, ми можемо використовувати абсолютне позиціонування, яке в основному дозволяє Вам позиціонувати елемент в будь-якому місці div незалежно від інших елементів у межах div. Це означає, що при вказівці позиції, скажімо, left: 10px, елемент займе позицію 10px до лівій стороні div, незалежно від того, є ще один елемент там.
По-перше, щоб абсолютно позиціонувати елемент, ми повинні встановити позицію батьківського div відносну, тому що абсолютно позиційований елемент позиціонується щодо батьківського div.
Тепер ми можемо встановити абсолютну позицію нашого опису. Коли використовується position: absolute, ми можемо визначити його позицію з точки зору лівих, правих, верхніх і нижніх, використовуваних пікселів, відсотків або em. По-перше, вершина – опис це майже 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.
От і все! Ми зробили заголовок! Давайте подивимося:
Крок 14 – Зміст
Перше,що ми повинні зробити, це повинні створити два стовпці – один для постів, один для бічної панелі. До теперішнього часу це має бути просто: просто один з float left, а інший float right.
#posts {float: left; }
#sidebar {float: right; }
І … Нічого не сталося. Принаймні це виглядає так, прокрутіть вниз, і Ви знайдете, що Ваша бічна панель прикріпилася до правого боку нижче постів. Перш, ніж бічна панель зможе наблизитися до постів, ми повинні визначити, як багато простору div може прийняти, і визначити ширину для бічної панелі. Знову, ми збираємося використовувати відсотки, замість пікселів, так, щоб, якщо текст змінять, бічна панель залишилася осторонь.
І ми повинні приховати overflow нашого змісту div:
#content {overflow: hidden; }
Чудово, у нас є дві гарні маленькі колонки розмітки!
Крок 15 – Моделювання постів
Так як ми використовували скидання CSS, інформаційного наповнення нашого розділу постів немає ніякого стилю взагалі, і ми повинні пройти тяжку процедуру моделювання кожного окремого можливого елемента. Мій робочий процес трохи відрізняється для цього від іншої частини сторінки, оскільки я дійсно не посилаюся на документ Photoshop. Я вважаю, що моделювання шрифту в Photoshop це головний біль, тому я зазвичай пропускаю це. Щоб отримати стилі для моїх постів, я проходжу метод проб і помилок. Я зазвичай починаю з параметрів, таких заданим за замовчуванням стилям браузера, які Ви можете знайти за посиланням, і налаштувати їх як вам завгодно. Я не збираюся проходити весь процес крок за кроком, але це те, що я придумав в кінці:
#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 значенні:
Але ні! Наша бічна панель більше не в стороні! Це тому, що ми додали 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; }
І оскільки ми хочемо, щоб воно могло розтягнутися, ми можемо додати колір в нижню частину градієнта значення нашого фону так само, як ми це робили раніше:
background: #093b2b url(images/footer_slice.jpg) top repeat-x;
Потім, додайте 2px кордон вгорі:
border-top: 2px solid #1e956c;
Давайте додамо margin і трохи padding зверху і знизу:
Потім, ми збираємося створити три float-нутих стовпця. Три елементи floating працюють, так само як два floating, з float кожен стовпець йде наліво. Ми повинні оголосити розміри кожного елемента floated, використовуючи значення відсотка, щоб врахувати розширення.
Просто пам’ятайте, що ми повинні встановити overflow hidden в батьківському div.
#footer {overflow: hidden;}
В даний момент, я вирішив, що фактично виглядало б краще, якби посилання і RSS div-а були на першому місці, та інформація про авторські права була в крайньому правому положенні, тому я змінив порядок div-ів, і встановив div авторського права з float: right, і текст вирівняний по правому краю.
І там у нас є, ми зробили, кодуючи та розробляючи нашу сторінку!
Крок 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.
Компанія fujifilm анонсувала випуск нового мобільного фотопринтера, що використовує широкоформатний фотопапір instax wide. Ідейно модель instax link wide smartphone printer ідентична більш ранньої версії...