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

366

Від автора: У цієї навчальної статті ми збираємося проектувати і кодувати просту 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” віджетів. Таким чином, наші блок бічній панелі буде містити три списки, кожен з назвою, загорнутим в

    теги.