У браузері сторінка буде як і раніше порожній, але структуру документа вже можна зрозуміти, вона готова.

Встановлюємо базове форматування

Тепер перейдемо до CSS-оформлення, щоб задати документу початкове оформлення.

Відкрийте style.css і додайте туди рядки коду, які зустрінете нижче.

Прибираємо відступи і поля на сторінці за замовчуванням:

* (Margin: 0px; padding: 0px;)

Встановлюємо кольору посилань в залежності від поведінки користувача (навів курсор, що не навів, відвідав) і прибираємо підкреслення у посилань, над якими знаходиться вказівник:

A: link (color: # D72020;) a: hover (text-decoration: none; color: # FF0000;) a: visited (color: # D72020;)

Налаштовуємо основне оформлення сторінки: прописуємо фоновий колір і зображення-підкладку (зображенні задаємо горизонтальне заповнення), встановлюємо колір, стиль і розмір шрифту:

Body (background: # FFD723 url (images / back_all.jpg) repeat-x; font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; color: # 333333;)

Визначення блоку content:

#content (margin: 0 auto; background: #ffffff; width: 786px; text-align: left;)

Ось тепер можна оновити сторінку. Вона заповнена малюнком-підкладкою. Поки єдине видиме зміна, за яке відповідає властивість background класу body.

Оформляємо горизонтальне меню

Початок є, і тепер можна приступати до верстці вже безпосередньо основних блоків.

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

Спочатку задамо загальне оформлення обох елементів шапки: вирівнювання тексту по лівому краю, білий фон і висоту 306px:

#header (background: #ffffff; height: 306px; text-align: left;)

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

Логічно було б прямо зараз зайнятися горизонтальним меню. Так ми і зробимо, але тільки до того, як вставляти його в HTML, потрібно підготувати правила CSS, інакше виглядати в браузері це буде жахливо.

Внесемо перші корективи: задамо ліву межу в 2 пікселя товщиною, ширину і висоту нашого меню, а також повторюється по осі X фоновий малюнок:

#menu (border-left: 2px solid #ffffff; width: 779px; height: 80px; background: url (images / header_top.gif) repeat-x;)

Сторінка в браузері відразу перетвориться і буде виглядати так.

Тепер можна додати і саме меню в файл index.html:

Оновивши сторінку можна побачити, що воно дійсно з'явилося.

Тільки ось вид посилань залишає бажати кращого. Встановимо для них свої правила (вирівнювання, ширину, колір, жирність і т. Д.), А посиланнях при наведенні задамо зміну кольору і повернемо прибране по всьому шаблоном підкреслення:

#menu a (float: left; width: 99px; height: 46px; display: block; text-align: center; text-decoration: none; color: #ffffff; font-weight: bold; font-size: 14px; padding -top: 35px;) #menu a: hover (color: # D72020; text-decoration: underline;)

Тепер форматування меню можна зіставити з PSD-шаблоном.

Зверніть увагу, як змінюється оформлення пункту, якщо підвести до нього курсор (за це відповідають правила #menu a: hover).

налаштовуємо логотип

Логотип у нас вже є і лежить в папці, залишається додати його на сторінку та відформатувати правилами. І те, і інше можна зробити засобами CSS, ніж ми і не преминемо зайнятися.

#logo (background: #ffffff url (images / big_pic.jpg) no-repeat; width: 738px; height: 146px; text-align: left; padding-top: 80px; padding-left: 40px; border-left: 4px solid #ffffff;)

Логотип вставлений рівно за розміром.

Єдине, чого йому не вистачає, так це тексту. Вставимо відсутню в блок logo файлу index.html, Щоб вийшло:

Текст з'явився, але його теж потрібно оформляти.

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

#logo a (text-decoration: none; text-transform: lowercase; font-style: italic; font-size: 36px; color: #FFFFFF;) #logo h2 a (font-size: 24px;)

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

Верстаємо основну частину сторінки

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

#right (float: right; width: 500px; padding-right: 10px;) #right h4 (margin: 0; padding: 0px; font-size: 12px; color: # D72020;) #right a (color: # D72020 ; text-decoration: none;) #right p (margin: 0; padding: 0; padding-bottom: 10px;) #right h2 (margin: 0; padding: 0; padding-top: 10px; color: # D72020; )

Так як ми зафіксували лише ширину блоку, видимих \u200b\u200bзмін спостерігатися не буде до тих пір, поки ми не наповнимо його контентом - висота сторінки буде змінюватися в залежності від вмісту.

заповнимо контейнер right. Зображення помістимо в просту таблицю.

Галерея

кухні

Контент отримав розмітку, але йому явно не вистачає білого тла, повноцінно який з'явиться ще не скоро.

Створення лівої панелі

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

Ситуації, коли доводиться допрацьовувати оформлення «на ходу», зустрічаються досить часто. Відстань між меню і основним вмістом дозволяє нам вставити підпункти, проте цікавий фокус зі зникненням і появою підменю.

У файл CSS впишіть наступний код.

#left (padding: 10px; width: 237px; padding-right: 1em;) #left h3 (width: 225px; height: 25px; font-size: 14px; font-weight: bold; padding-left: 15px; padding- top: 15px; text-transform: uppercase; color: #ffffff; background: url (images / title.gif) no-repeat) #left ul (margin: 0; padding: 10px; list-style: none; width: 100px ; font-size: 18px;) #left li ul (position: absolute; left: 90px; top: 0; display: none;) #left ul li (position: relative; margin-bottom: 20px;) #left ul li a (display: block; text-decoration: none; color: #ffffcc; background: # ff9900; padding: 5px; border: 1px solid gold; border-bottom: 0;) #left li: hover ul (display: block; ) #left li li (margin-bottom: 0px; width: 150px;) #left p (padding: 10px; border-bottom: 1px solid # D72020; border-left: 1px solid # D72020; border-right: 1px solid # D72020;)

Зверніть увагу на правила класів ul і li - секрет зникнення меню знаходиться там, розкрийте його самостійно.

У контейнер left HTML-документа додамо спочатку інформаційний блок без меню.

інформація

Ми пропонуємо Вам святкові знижки. Далі ...

Меню

Білий фон поширився ще нижче по сторінці.

Тепер саме час вставити в HTML-файл код меню лівої панелі. Воно, на відміну від верхньої навігації, реалізовано списками, що можна було помітити ще з CSS-правил.

• Галерея
  • кухні
  • ліжка
  • стінки
  • передпокої
  • Шафи купе
  • Комп'ютерні столи
• договір
• Прайс
  • кухні
  • ліжка
  • стінки
  • передпокої
  • Шафи купе
  • Комп'ютерні столи
• зразки
  • Скло
  • ДСП
  • фурнітура
  • І т.д.
• Контакти
• важливо

Привіт, шановні читачі блогу сайт. Наша сьогоднішня задача полягає в тому, щоб сформувати так званий макет сайту не за допомогою (вчорашній день верстки), а за допомогою елементів Div. Тобто нам потрібно буде на дівах побудувати верхню частину (шапку), нижню частину (футер) і три колонки для прикладу.

До речі кажучи, таке завдання ми з вами вже вирішували, коли я писав про.

Здавалося б, що повторюватися не варто, але я і не збираюся цього робити. Сьогодні буде описаний принципово інший спосіб верстки сайту, А також паралельно розглянемо призначення директив @import і @media (З попереду) в уже вивченому нами (на базовому рівні, звичайно ж) мовою стильової розмітки CSS.

Верстка сайту на блоках - а воно вам треба?

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

І я вас навіть почасти розумію. Адже саме по собі знання цих речей не принесе вам ні слави, ні багатства, а тільки відніме купу часу, яке можна було б витратити на набагато більш приємне заняття. Так само, як вміння користуватися столовими приборами не гарантує вам наявність смачної їжі на вашому столі. Однак, в потрібний момент це може стати в нагоді і зіграти не останню роль.

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

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

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

Загалом, це ліричний відступ зроблено не випадково, бо я хочу сказати, що Html і CSS є малими цеглинками в побудові вашого інтернет бізнесу, але володіння і розуміння принципів верстки сайтів дасть певну кількість очок вперед перед тими, хто цими знаннями знехтував.

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

Гаразд, продовжимо з тими хто не переключився. Як побудувати макет сайту за допомогою елементів Div і стильових правил? Давайте подивимося. Природно, що імітувати роботу цього макета ми буде на локальному комп'ютері, просто зваливши все потрібні нам файли в одну з його папок. Ніяких хостингів і. Для розуміння принципів це буде зайвим.

Отже, приступаємо до верстки. Для початку створюємо і обзивають папку для зберігання файлів нашого майбутнього веб проекту, а потім створюємо всередині неї текстовий файлик з расшіреніем.html і назвою index. Також створюємо всередині цієї папки ще одну, яку обзивали CSS (в ній будуть жити наші зовнішні файли стилів).

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

Ну, а тепер скопіюйте наведену трохи нижче «рибу» в свій index.html. Для роботи з кодом досить зручно використовувати, хоча, при володінні навиком роботи, більш функціональним рішенням може виявитися Дрімвьювер:

Спочатку як завжди повинна йти, призначення якої докладно описано в наведеній по посиланню статті. Усередині тега meta ми вказуємо для його правильної інтерпретацією браузером, при відкритті в ньому нашого проекту. Кожен документ в повинен мати заповнений (заголовок сторінки), тому ми і його додали в «рибу».

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

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

Отже, переповнення лівого або правого колонки не викличе пропорційне збільшення блоків з ID vnutr і vnesh (плаваючі елементи на висоту своїх батьків або, іншими словами, контейнерів не впливають), а значить контент вилізе за їх межі, наїде на футер і взагалі вийде за межі макета. Біда.

Але у нас є четвертий блоковий елемент з ID podporka, який не містить ніякого контенту (а значить і не буде видно на веб сторінці) і якої призначений саме для усунення цього казусу. У коді obdhiy.css ми пропишемо для цього селектора просте правило. Внаслідок цього блок з ID podporka придбає корисне нам властивість - він буде враховувати будь-плаваючий перед ним елемент (мається на увазі, розташований вище в коді).

Т.ч. при збільшенні контенту в правій або лівій колонці відбудеться пропорційне зміщення вниз елемента з ID podporka, а тому цей тег вже не є плаваючим, то блоки з ID vnutr і vnesh будуть його враховувати і пропорційно збільшувати свій розмір по вертикалі:

Тепер начебто все працює правильно. Однак, наша верстка сайту ще не закінчена. Припустимо, що ми зробили в index.html таким чином макет головної сторінки, а ось для якого-небудь іншого розділу вид макета повинен буде відрізнятися (Наприклад, там повинно бути не три, а тільки дві колонки). Як виходити з цієї ситуації?

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

Ну і файлик з таблицями каскадним стилів нам доведеться новий використовувати, наприклад, razdel.css. Ось саме в них ми і будемо вносити зміни, а заодно подивимося детальніше, як же саме використовувати директиву @import У таких випадках.

Давайте почнемо з razdel.html:

...

Ми змінили заголовок сторінки Title і поміняли назву підключається файлик стилів на razdel.css. При цьому, природно, необхідно буде в папці CSS цей самий файл стильової розмітки створити. Насмілюся вам нагадати, що для index.html ми підключали стильову розмітку через osnovnoy.css, в якому була прописана одна єдина директива @import для подгрузки правил з файлик obdhiy.css:

@import url (obdhiy.css);

Ми не будемо оригінальними в нашій розумної версті і на самому початку нового (ще порожнього) стильового файлу пропишемо абсолютно таку ж директиву. Тим самим ми отримаємо знову-таки трехколоночной макет, проте, дописавши трохи пізніше всього кілька правил, ми запросто перетворимо його в двоколонковому. Навіть не так. Ми створимо ще один файлик в папці CSS з назвою dvekolonki.css і наступним змістом:

#right (display: none;) #center (margin-right: 0;) #vnesh (background-image: none;)

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

Ну ось, тепер для завершення верстки двоколонковому макета залишилося тільки цей самий dvekolonki.css підключити в файлі razdel.css, остаточне вміст якого буде тепер виглядати так:

@import url (obdhiy.css); @import url (dvekolonki.css);

Всі правила, які стоять в коді нижче (з dvekolonki.css), матимуть пріоритет вищий, а значить саме їх дійство ми і спостерігатиме на веб сторінці. В результаті при відкритті razdel.html ви вже зможете спостерігати двоколонковому варіант макета:

Власне, додаткової нашим завданням було розглянути варіанти використання директиви @import в сучасній верстці сайтів, З чим, я вважаю, ми впоралися.

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

Верстка макета для друку за допомогою директиви @media

Директива @media може стати в нагоді не вам, а вашим читачам, які захочуть роздрукувати веб-сторінку без всяких там графічних вишукувань і зайвої інформації. Користувачам при цьому потрібен буде тільки контент, який розташований в центральній колонці. Шапка, футер, ліва і праві колонки йому не потрібні - тільки текст статті.

При попередньому перегляді друку в будь-якому з сучасних браузерів можна, звичайно ж, відключити друк фону, тобто колірного оформлення, але оглядач не завжди зможе відокремити самостійно зерна (контент) від плевел (навігації), тому нам доведеться йому в цьому допомогти, щоб не сподіватися на авось.

Крім того, при друку пропаде то основне, що робить Інтернет таким популярним - можливість переходу за гіперпосиланнями на інші сторінки. На папері все ваші гіперпосилання стануть зовсім не інформативними, Якщо про це не подбати заздалегідь. Давайте додамо в наш трехколоночной макет гіперпосилання і подивимося як це все буде виглядати при спробі роздрукувати веб сторінку.

Таким чином користувач, роздрукувати таку веб-сторінку, ніколи не дізнається, а який блог все ж є найкращим. Отже, давайте займемося нюансами верстки для друку, І в цьому нам допоможе вже згадана директива @media.

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

У атрибута media можна використовувати і інші значення:

1. all - використовується за умовчанням і означає, що даний файл стилів потрібно буде використовувати для абсолютно будь-яких пристроїв виведення
2. braille - пристрої для читання пальцями (для сліпих або слабозорих)
3. handheld - КПК, смартфони та інші дрібниці
4. print - принтери
5. screen - екрани моніторів користувачів, на яких вони будуть переглядати ваш сайт
6. speech - мовні браузери
7. projection - проектори
8. tty - телетайпи та інша мотлох, на якій не можна використовувати розмірність в пікселях
9. tv - старий добрий телевізор

У наведеному трохи вище прикладі ми, за допомогою атрибута Media, підключили до веб документу окремий файл стилів для відображення на моніторі і окремий для виведення на друк (print.css). Нам якраз подібне і потрібно реалізувати в цьому уроці верстки, але краще буде зробити це трохи іншим способом, з використанням саме директиви @media прописаної в файлі стилів.

Якщо ви звернули увагу, то при такому способі верстки, який вибрали ми (з використанням @import), у нас є загальний файлик стилів, який підключається завжди через цю саму директиву - obdhiy.css. Ось саме в ньому ми і почнемо чаклувати.

@media має свій власний синтаксис:

@media screen, tv (набір селекторів і правил, які будуть виконуватися тільки в разі виведення веб сторінки на зазначені трохи вище через кому пристрою)

У нашому файлі obdhiy.css Не будемо укладати всі вже наявні правила всередину директиви @media screen, досить в самому його кінці просто дописати необхідні CSS правила для виведення документа на друк за допомогою @media print:

@media print (* (color: # 000! important; background: transparent! important;) html (font: 10pt serif;) #footer, #header, #left, #right (display: none;) #center (margin: 0;) a: after (content: "(" attr (href) ")";))

Якщо ви пам'ятаєте, то селектор * означає застосування всіх цих стильових правил для всіх елементів Html коду. Правда такий селектор має мінімальний з можливих пріоритетів, тому задаючи колір для всіх елементів чорним, а фон прозорим, за допомогою правил color і background, ми змушені не доводити справу до підрахунку пріоритетів за допомогою установки.

Для селектора Html ми прописали завдання умолчательную шрифту в, бо принтеру так зрозуміліше. Ну і шрифт задали будь із зарубками (serif). C допомогою display: none ми заборонили відображення обважування (шапки, футера і колонок), а за допомогою margin: 0 дозволили контенту з середньої колонки займати весь доступний простір по ширині.

Останній селектор a: after хитромудрі і, щоб краще зрозуміти про що саме він говорить, раджу пробігтися по наступним публікаціям про () і. Але потрібен він нам для досить простої мети - побачити на папері, куди саме ведуть гіперпосилання.

Псевдоелемент after дозволяє здійснювати генерацію контенту під час побудови документа браузером. After дозволить нам додати URL адреса гіперпосилання відразу після того місця, де ця сама посилання проставлена. Робиться це за допомогою спеціального CSS правила content, яке працює тільки для двох псевдоелементів: after і before.

Усередині правила content ми прописуємо в лапках пробіл і відкриває круглу дужку, а потім через пробіл додаємо вміст

У даній статті мова піде про сайти, які розробники створюють вручну, т. Е. Верстають.

Стаття призначена для користувачів, знайомих з HTML і CSS . Також бажано знати хоча б основи Adobe Photoshop

Одним з етапів створення реального сайту, є створення PSD шаблону. Можна ще зустріти такі назви як макет, дизайн або исходник.

Шаблон замовляється дизайнеру. Дизайнер малює макет в програмі Adobe Photoshop і зберігає його в форматі PSD.

Що таке PSD формат?

Для кращого розуміння можна навести простий життєвий приклад. У дитинстві всі клеїли аплікації. Вирізали з паперу будиночок - наклеїли. Вирізали ялинку - наклеїли. І так до тих пір, поки робота не готова.

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

Завдяки цьому кожну таку «фігурку», а точніше кожен окремий фрагмент шаблону можна зберігати як окрему картинку, яку потім можна використовувати на сайті.

Ось макет сторінки, яка буде створена.

Після того як у нас є готовий шаблон в форматеPSD можна перейти безпосередньо до верстці

1. Створити папку, в якій буде зберігатися верстка, наприклад «Сайт».
2. У папці «Сайт» створити папку для зображень, наприклад img.
3. У папці «Сайт» створити папку для стилів, наприклад css.
4. Тепер необхідно запустити програму Adobe Photoshop і в ній відкрити psd файл. Звідси необхідно «витягнути» все зображення, які будуть використовуватися на сайті.

Тут необхідно звернути увагу на кнопку «Шари». На малюнку вона виділена червоним овалом.

Це кнопка вмикає і вимикає віконце з шарами. Шари - це і є ті самі НЕ склеєні деталі аплікації. Шари для зручності розподілені по папках, які можна згортати і розгортати. Принцип роботи майже той же що і в провіднику Windows.

Насамперед все папки краще згорнути. Розгортати в міру необхідності.

Тепер можна почати «витягувати» картинки

Насамперед потрібно вибрати інструмент рамка. Потім виділити тільки ту частину, яка обмежує логотип сайту

Після цього натиснути клавішу Enter. Все крім виділеної області буде відрізано.

Тепер можна прибрати фон. Для цього потрібно відключити шар з фоном.

З метою швидкого пошуку потрібних шарів можна виконати наступні дії:

Тут шар названий «Фігура 2». Клацанням по зображенню очі шар стає невидимим.

Однак залишається ще два шари, які також необхідно відключити. Дії аналогічні.

Тепер можна зберігати. Для цього необхідно виконати наступні дії

Вибрати з 4 запропонованих варіантів, а із запропонованих другий. Розширення вибрати gif.

ім'я файлу logo.gif . Файл зберегти в папку img . Туди слід зберігати і інші зображення.

Можна слідувати таким принципам:

• фотографічне якість - jpg
• фотографічне якість з прозорим фоном- png-8 , Не влаштувало якість - png-24
• мало квітів в зображенні - gif

Для того, щоб повернути первісний варіант до обрізки, потрібно відкрити вікно історія

Клацнути по назві файлу і встановити відповідний масштаб.

Аналогічним чином зберігаються інші зображення.

Те ж саме стосується зображення лапи, яке з'являється при наведенні на пункт меню

Решта зображення - за бажанням. Можна на білому, можна на прозорому.

Тут слід вибирати варіант збереження дуже акуратно, тому, сто в psd исходниках нерідкі зображення з погано обробленими краями. Ось приклад:

Зображення було збережено на прозорому тлі. Однак при перегляді його на чорному - видно погано оброблені краї. Але при використанні світлого фону - цей дефект може бути непомітний.

Для фону потрібно буде вирізати маленьку картинку, яка заповнить сторінку як кахельна плитка. Однак в цьому прикладі фон не є повторюваним. Тому краще знайти схожу картинку. А можна спробувати підібрати, вирізаючи з фону різні фрагменти.

Початок верстки. Обгортка. Шапка сайту.

Верстка буде розглянута з використанням HTML5 та CSS3.

В папці свого сайту потрібно створити HTML файл. наприклад index.html.

В папці css створити файл style.css .

Крім цього, в папці css необхідно помістити файл reset.css з наступним кодом

/ * V2.0 | 20110126 License: none (public domain) * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video (margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ;) / * HTML5 display-role reset for older browsers * / article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section (display: block;) body (line-height: 1;) ol, ul (list-style: none;) blockquote, q (quotes: none;) blockquote: before, blockquote: after, q: before, q: after (content: ""; content: none;) table (border- collapse: collapse; borde r-spacing: 0; )

Справа в тому, що різні браузери для одного і того ж тега можуть мати різні настройки. Для забезпечення кросбраузерності їх необхідно скинути. Запропонований вище код розроблений Еріком Майєром.

спочатку в index.html слід написати основні теги.

Для тега в стилях потрібно встановити фон.

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

Body (background-image: url (../ img / bg.gif);)

Тепер потрібно створити обгортку сайту - блок в якому буде міститися весь вміст.

Поруч з закриває

в коментарях написаний ідентифікатор блоку. Згодом тегів

стане багато, і може виникнути плутанина. Буде незрозуміло де який div закривається.

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

Для установки стилів необхідно знати його ширину і відступи зверху і знизу. Для вимірювання можна в Adobe Photoshop інструментом «Прямокутна область» виділити зображення сайту від правого до лівого краю. Висота не важлива.

Ширину можна побачити у вікні «Інфо»

Вийшло 964px.

Аналогічним чином, тільки вже важлива висота виділеної області, а не ширина, вимірюються відступи зверху і знизу.

Вийшло 100px зверху і 85px знизу.

Таким способом визначаються будь-які відстані в исходнике.

#wrapper (width: 964px; margin-top: 100px; margin-right: auto; margin-bottom: 85px; margin-left: auto; background-color: # FF9;)

Праворуч і ліворуч встановлені відступи auto. Завдяки цьому блок вирівнюється по центру.

сторінка:

У цій статті я хочу розповісти про чотирьох різних способах створення макетів з декількома стовпцями. Кожен спосіб має свої плюси і мінуси. Щоб продемонструвати, як ці макети працюють і виглядають, я створив простий сайт, на якому використовуються HTML-таблиці, властивість CSS float, CSS-фреймворк і флексбокс.

Перший день нового життя

У цій статті ми використовуємо чотири різні способи верстки сайту:

• Таблиці. Вам навіть не потрібно використовувати окремий файл стилів. І, що більш важливо, вони не ламаються.
• Float. Ми говоримо про властивості CSS. Це досить поширений спосіб створення макета веб-сторінки. І в цьому випадку нам необхідно буде використовувати окрему таблицю стилів. Файл HTML використовується, тільки щоб визначити контент веб-сторінки. Якщо ви хочете вирівняти контент, то повинні використовувати файл CSS.
• CSS-фреймворки. Вони працюють так само, як JavaScript-фреймворки. Підключіть вихідний файл в заголовку (наприклад, ), І він готовий до роботи! Вам не потрібно задавати значення властивостей самостійно. Для цього використовуються класи, які розробники фреймворка приготували для вас.
• Флексбокс. Флексбокс - це коротка назва CSS Flexible Box Layout Module. Це новіша в порівнянні з властивістю float технологія. Основний принцип флексбокс - надати контейнеру можливість змінювати ширину, висоту і порядок містяться в ньому елементів. Якщо ви хочете найкращим чином заповнити весь вільний простір, потрібно використовувати для верстки div флексбокс. Наприклад, для охоплення всіх типів пристроїв і розмірів екрану. Плаваючий контейнер буде розширювати містяться в ньому елементи, щоб заповнити весь екран.

Тепер пора спробувати кожен з них.

способи створення

Це дизайн мого сайту:

таблиці

Для створення шапки сайту я використовував властивість position: relative. Давайте спробуємо зробити це з нуля, використовуючи табличну верстку.

Ось мій HTML-код:

			Cinematron
	HOME	PREMIERES	BOX-OFFICE	PHOTOS

І ось, що я отримав:

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

table, td (border-collapse: collapse; border: 1px solid red;)

І ви побачите, що макет став виглядати так:

Таким чином, можна легко визначити, що де знаходиться, якщо заплуталися.

Тепер погана новина. Ще раз подивіться на HTML-код. Це проста таблиця, але уявіть, як вона буде виглядати з десятками осередків. Ось який вихідний код у мене:

Cinematron

All the stuff you need to know about the movies

• home
• premieres
• box-office
• photos

І файл CSS:

#header (height: 230px; background-image: url (../ images / header1.jpg); background-repeat: no-repeat; font-family: "Shift", sans-serif;) #header h2 (font- size: 4em; position: relative; top: 30px; left: 550px; display: inline;) #header p (font-size: 1.3em; font-weight: bold; position: relative; top: 50px; left: 60px; display: inline) #menu (position: relative; top: 100px; left: 340px; display: inline-block;) #menu li (font-weight: bold; display: inline; text-transform: uppercase; margin-right: 14px;) #menu input (font-size: 0.7em; text-transform: lowercase; text-align: right; position: relative; top: -4px;)

В цьому випадку вам потрібно використовувати блокову верстку сайту за допомогою CSS. Застосувавши щось на зразок цього:

div (position: relative; top: 100px; left: 100px;)

Ви вказуєте перемістити

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

Float

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

У ньому є три різнокольорових елемента

. Зелений для основних статей, червоний для новинних статей і синій для підвалу.

А ось файл CSS:

#green (width: 200px; height: 200px; border: 1px solid green; float: left; margin: 5px;) #red (width: 100px; height: 200px; border: 1px solid red; margin: 5px; float: left ;) #blue (width: 310px; height: 100px; border: 1px solid blue; margin: 5px; clear: both;)

І ось, що у нас вийшло:

При верстці шарами ви вказуєте через властивість float, що хочете, щоб ваш елемент

був плаваючим. Потім ставите для нього напрямок зсуву. Зазвичай це float: left або float: right. Коли ви вказуєте елементу

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

Наступний плаваючою елемент буде зміщуватися, поки не зустріне перший, і так далі. Наступний за плаваючим елемент буде обтікати його як вода! Але якщо ви не хочете спускати всі свої об'єкти «на воду«, можна використовувати властивість clear. Воно визначає, які сторони елемента не повинні обтікати плаваючі елементи.

Ось як виглядає частина мого макета для основного контенту:

First article header

First article bodyRead more

Second article header

Second article bodyRead more

First news article header

First news article body

Second news article header

Second news article body

Тепер давайте зробимо її плаваючою:

# Main-content (width: 780px; float: left;) #news (margin-left: 20px; float: left; width: 180px;)

У нас є великий блок для статей і блок поменше для новин. Ми використовували властивість float: left і для зображень. Зверніть увагу, як вони обтікають тегом. Цей макет виглядає, як ваш улюблений журнал.

CSS-фреймворки

Якщо ви трохи ліниві

Якщо у вас немає часу возитися з кодом при CSS верстці, можна використовувати один з CSS-фреймворків. У нашому прикладі ми використовуємо Bootstrap. Для цього потрібно завантажити його і підключити в HTML-файлі.

Bootstrap містить сітку, яка складається з 12 рівних за розміром стовпців. HTML-елементи упорядковуються так, щоб охоплювати різну кількість стовпців. Таким чином, створюються користувацькі макети. Кожна частина контенту вирівнюється щодо цієї сітки через вказану кількість стовпців, на які вони розтягуються.

Ось приклад:

У цьому прикладі ми створили рядок. Після цього помістили в неї два рівних за розміром стовпчика. Кожен з них охоплює шість з дванадцяти доступних стовпців.

HTML-код:

Coming Soon:

І ось, що я отримав:

Виглядає непогано. І при верстці сайту з PSD вам навіть не потрібно редагувати файл CSS. Але ви не бачите, що відбувається всередині.

Флексбокс

Класика завтрашнього дня

Ми будемо використовувати флексбокс, щоб створити розділ сайту «Бокс-офіс«. Ось HTML-код:

• Cinderella: $ 67.9M
• Run All Night: $ 11.0M
• Kingsman: The Secret Service: $ 6.2M
• Focus: $ 5.7M
• Chappie: $ 5.7M
• McFarland USA: $ 3.6M
• The DUFF: $ 2.9M
• American Sniper: $ 2.8M

Ось CSS-код для контейнера "boxoffice":

#boxoffice (width: 780px; height: 500px; background-image: url (../ images / box_office_cropped.jpg); background-repeat: cover; border-radius: 5px; padding: 20px;)

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

Для флексбокса задаються два типи властивостей. Перший використовується для управління гнучким контейнером, другий - для заповнення гнучких елементів. Розглянемо докладно перший тип.

За замовчуванням, головна вісь горизонтальна, тому елементи будуть розтягуватися в ряд. Щоб змінити основну осі ми можемо використовувати властивість flex-direction. Воно може набувати таких значень: row, row-reverse, column і column-reverse. Ми будемо використовувати значення column. Давайте також додамо властивість height. Для чого це потрібно, ви зрозумієте трохи пізніше:

flex-container (height: 300px; display: flex; flex-direction: column;)

Ось як виглядає наш невеликий бокс-офіс:

Ми використовували властивість height, тому що не хочемо, щоб контейнер флексбокса перекривав зображення стрілки в нижній частині фону.

Флексбокс також дає можливість вносити зміни в вміст без зміни HTML-файлу. Наприклад, якщо ви хочете поміняти розташування елементів на протилежне, ви можете змінити значення flex-direction на columns-reverse. Це змінить напрямок флексбокса на протилежне. Але вам потрібно буде також змінити порядок розташування елементів всередині контейнера.

Для цього ми використовуємо властивість justify-content. Доступні для нього значення: flex-start, flex-end, center, space-between і space-around. Для нього потрібно встановити значення justify-content, яке еквівалентно flex-end.

Ось наш код:

Flex-container (height: 300px; display: flex; flex-direction: column-reverse; justify-content: flex-end;)

І ось яким чином відбилися ці зміни:

Також можна переміщати елементи уздовж поперечної осі. Для цього використовується властивість align-items. Ви можете задати для нього наступні значення: flex-start, flex-end, center, baseline або stretch.

Щоб використовувати його, додайте властивість в селектор флексбокса:

Flex-container (align-items: flex-end;)

Всі елементи змістяться до правого краю:

Є ще одна корисна властивість - flex-wrap. Уявіть, що бокс-офіс швидко збільшується. Що станеться, якщо він стане більше, ніж контейнер? Нічого поганого, якщо ви використовуєте властивість flex-wrap.

Спробуйте додати наступний код.

Елементи Макета HTML

Сайти часто відображає контент в кілька колонок (подібно журналу або газеті).

Специфікація HTML5 пропонує нові семантичні елементи, які визначають різні частини веб-сторінки:

Макети Компонування HTML

Є чотири різні способи для створення макетів з декількох стовпців. Кожен спосіб має свої плюси і мінуси:

• Модель table HTML
• Модель float CSS
• Модель framework CSS
• Модель flexbox CSS

Який вибрати?

Модель table HTML

елемент

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

Порада: Не використовуйте таблиці для розмітки макета!

Модель framework CSS

Якщо ви хочете створити свій макет швидко, ви можете використовувати фреймворк, як W3.CSS або Bootstrap.

Модель float CSS

Він є загальним, щоб зробити весь веб-макетів, використовуючи CSS властивості float.

Поплавок легко вивчити - потрібно просто згадати, як працюють властивості float і clear. Недоліки: Плаваючі елементи прив'язані до документообігу, який може нанести шкоду гнучкості.

Приклад Макета Float

міська Галерея

Лондон

Лондон є столицею Англії. Це найбільш густонаселений місто в Сполученому Королівстві, з передмістями понад 13 мільйонів жителів.

Стоячи на березі річки Темзи, Лондон був великим поселенням протягом двох тисячоліть, за його історію, що йде свого заснування римлянами, які назвали його Londinium.

Сподобалася стаття? поділіться їй

Рекомендуємо статті по темі

Причини того, чому не працює Flash Player, і способи усунення неполадок

Ноутбук сам вимикається, що робити?

HP Pavilion dv6: характеристики та відгуки

Відвідувачі зараз обговорюють

Формат представлення чисел з плаваючою комою Як зберігаються негативні числа в пам'яті комп'ютера Asus

Комп'ютер пищить і не включається, що робити? D-link

Чому не працює миша на ноутбуці або мишка? Android

Як збільшити або зменшити масштаб сторінки (шрифт) в Одноклассниках? проблеми