От автора: В этой обучающей статье мы собираемся проектировать и кодировать простую web-страницу блога. Мы обратим особое внимание на создание нашего дизайна, гибкого и доступного используя ясный и простой XHTML и CSS. Эта обучающая статья нацелена на новичков и для тех, кто желает улучшить доступность своего веб -дизайна.
Перед тем, как мы приступим к верстке гибкого сайта, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Шаг 1
Итак, наш пример web-страницы основан на простой теме блога, с структурой блога WordPress, подобную на главную страницу nettuts. Это выглядит примерно так:
Идея здесь не в том, чтобы вы воспроизвели мой пример, а в том, чтобы вы были в состоянии следовать вперед и применять методики к Вашим собственным дизайнам, мы надеемся, научить вас нескольким основным вещам.
Шаг 2 – Photoshop
Мы собираемся использовать здесь минимум Photoshop, обычно я делаю весь макет конструкции в Photoshop до кодирования, но здесь я просто хочу создать основную разметку и побеспокоиться о содержании позже. Это пример другого процесса, он будет иметь больше смысла, по мере того как мы будем двигаться вперед вместе.
Разметка страницы
Я решил сделать страницу 900px ширины, таким образом мой документ 1000px в ширину, и 1200px в длину (не знаю, почему я дал себе так мало места, сделайте Ваш шире, если Вам хочется). Поместите направляющие на 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
Дата, категории и автор информации:
Параграфы:
Хорошо, мы довольно много сделали с нашей разметкой. Все, что нам необходимо сделать сейчас — это вырезать ее и сохранить для веб.
Выберите инструмент «фрагмент» (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 для написанного контента.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>My Blog</title> </head> <body> <div id="main"> <div id="top_bar"> </div><!-- end top bar --> <div id="header"> </div><!-- end header --> <div id="content"> </div><!-- end content --> </div><!-- end main --> <div id="footer"> <div id="footer_content"> </div><!-- end footer content --> </div><!-- end footer --> </body> </html> |
Верхняя панель
На фоне синяя полоска вверху простирается на всю ширину страницы, но две текстовые области должны быть в пределах 900px страницы. Для достижения этой цели, мы должны поместить содержание внутрь другого div, который будет иметь класс “container».
В верхней панели у нас будет два пункта, один для логина, а другой для опций подписки. Поскольку они будут floated, каждому из них необходимо присвоить уникальный идентификатор. Фактически, если мы хотим полностью соответствовать семантике, мы могли бы код этих двух пунктов сделать в виде неупорядоченного списка с двумя элементами списка. Попробуйте оба способа, посмотрите, можете ли вы это заставить работать.
|
<div id="main"> <div id="top_bar"> <div class="container"> <p id="login">Welcome, Guest <a href="#">Login</a> <a href="#">Sign Up</a></p> <p id="subscribe"> Stay Updated: <a href="#">Subscribe via RSS</a> <a href="#">Email Updates</a></p> </div><!-- end bar container --> </div><!-- end top bar --> <div id="header"> </div><!-- end header --> <div id="content"> </div><!-- end content --> </div><!-- end main --> |
Шаг 5 – Заголовок
Мы сталкиваемся с той же самой проблемой и здесь, как мы делали в предыдущем шаге, фоновое изображение должно растянуться очень сильно. Чтобы содержать информационное наполнение, мы должны поместить его в другой div. Так как заголовок также будет находиться по цетнру в пределах нашей 900px страницы, мы можем многократно использовать класс“container”. Заголовок блога будет обернут в тег <h1>, и описание будет тегом <p> с уникальным id.
|
<div id="header"> <div id="branding" class="container"> <h1>My Blog</h1> <p id="desc">Description of My Blog</p> </div><!-- end branding --> </div><!-- end header --> |
Навигация
Кроме того, в заголовке находится меню навигации, которое будет обернуто в неупорядоченный список с id “menu”, которые будут находиться в другом Div с id “navigation”.
Поскольку мы хотим, чтобы навигационное меню было по центру, мы можем добавить наш класс “container” также к ul.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
<div id="header"> <div id="branding" class="container"> <h1>My Blog</h1> <p class="desc">Description of My Blog</p> </div><!-- end branding --> <div id="navigation"> <ul id="menu" class="container"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div><!-- end navigation --> </div><!-- end header --> |
Здесь мы пишем навигационные ссылки в нижнем регистре, но в нашем файле CSS мы преобразуем их к верхнему регистру. Их можно написать здесь в заглавных буквах, но моя клавиша Caps Lock сломана, и этот делается для более чистой разметки.
Шаг 6 – Информационное наполнение
У области информационного наполнения нет фонового изображения или цвета, поэтому нам не нужно включать его в дополнительный div. Чтобы выровнять по центру, мы можем присвоить блоку информационного наполнения также класс “container”. Внутри него у нас есть еще два div-а, один для сообщений в блоге, и один для боковой панели.
Проектируя блог, мы должны принять во внимание тот факт, что информационное наполнение может измениться, и может содержать любое количество элементов, включая списки, изображения, цитаты, заголовки и подчеркнутый текст. Чтобы быть готовыми к этому, мы должны разработать каждый возможный элемент, который мог бы появиться, таким образом наше типовое информационное наполнение должно включать все. Это иногда называют “методом Песочницы.” Чтобы получить фиктивное информационное наполнение, я предлагаю посетить HTML Ipsum.
Мы собираемся разделить наше информационное наполнение на пару различных постов, с заголовками, обернутыми в <h2> тэги. У каждого поста также будет стандартная информация о дате, авторе, и т.д, содержащейся в рамках <small> тэга.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
|
<div id="content" class="container"> <div id="posts"> <h2>Don't Cancel Chuck!</h2> <small>on July 01 in <a href="#">General</a> tagged <a href="#">petitions</a> by <a href="#">admin</a></small> <p>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. </p><blockquote><p>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.</p></blockquote> <p>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. <a href="#">Read More</a></p> <h2>Alien Spacecraft found in New Mexico</h2> <small>on July 01 in <a href="#">General</a> tagged <a href="#">petitions</a> by <a href="#">admin</a></small> <p>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.</p> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> <p>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.</p> <h2>Ghostly Goo in your Kitchen Sink?</h2> <small>on July 01 in <a href="#">General</a> tagged <a href="#">petitions</a> by <a href="#">admin</a></small> <p><strong>Pellentesque habitant morbi tristique</strong> 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. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> <h4>Header Level 4</h4> <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ol> <blockquote><p>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.</p></blockquote> <h3>Header Level 3</h3> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ul> <ol> <li>Lorem ipsum dolor sit amet</li> <li>Consectature vestiblum</li> </ol> </div><!-- end posts --> </div><!-- end content --> |
Шаг 7 – Боковая панель
В обычном блоге, на боковой панели содержатся различные виджеты, которые отображают ссылки на другие страницы или статьи, и каждый виджет, как правило, это неупорядочнный список тегов ссылки (<a>). Здесь у нас будут “categories”, “recent posts” и “archives” виджетов. Таким образом, наши блок боковой панели будет содержать три списка, каждый с названием, обернутым в <h3> теги.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
|
<div id="sidebar"> <h3>Categories</h3> <ul> <li><a href="#">General</a></li> <li><a href="#">Ghost Sightings</a></li> <li><a href="#">UFO Crashes</a></li> <li><a href="#">Government Coverups</a></li> <li><a href="#">International Conspiracies</a></li> </ul> <h3>Recent Posts</h3> <ul> <li><a href="#">Ghost Sighting in Mansion</a></li> <li><a href="#">UFO picked up by satelites</a></li> <li><a href="#">Mutants amoung us?</a></li> <li><a href="#">Bigfoot: Fact or Fiction?</a></li> </ul> <h3>Archives</h3> <ul> <li><a href="">June 2008</a></li> <li><a href="">May 2008</a></li> <li><a href="">April 2008</a></li> <li><a href="">March 2008</a></li> </ul> </div><!-- end sidebar --> </div><!-- end content --> </div><!-- end main --> |
Шаг 8 – Колонтитул
Нижний колонтитул будет работать также, как верхняя панель, заголовок и навигация, работающая с внешним div, чтобы провести повторяющийся фон, а внутренний div центрирует информационное наполнение и держит его в пределах 900px нашей страницы. Чтобы сделать это, мы только должны добавить класс “container” к нашему div-у “footer content”.
У нашего нижнего колонтитула будет три столбца: авторского права, ссылки и подписные опции. Каждый должен будет находится в пределах своего собственного div.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
|
<div id="footer"> <div id="footer_content" class="container"> <div id="copyright"> <p>Copyright © 2009.<br /> All Rights Reserved.</p> </div> <div id="links"> <h4>Links</h4> <ul> <li><a href="#">PSDtuts - Photosohp tutorials</a></li> <li><a href="#">NetTtuts - Web development and design tutorials</a></li> <li><a href="#">VectorTuts - Illustrator and vector tutorials</a></li> <li><a href="#">FlashTuts - Adobe Flash tutorials</a></li> </ul> </div> <div id="feeds"> <h4>Follow our updates</h4> <ul> <li><a href="#">Subscribe to RSS Feed</a></li> <li><a href="#">What is RSS?</a></li> <li><a href="#">Email Updates</a></li> </ul> </div> </div><!-- end footer content --> </div><!-- end footer --> |
Отлично, мы сделали нашу разметку! Давайте взглянем в браузере (я использую Safari 4, который, кстати, удивительный).
Кажется, что маловато всего, но зато есть все наше информационное наполнение, расположенное логически и хорошо читаемо. Важно, что нестилизованная web-страница содержит всю информацию, необходимую для читателя, чтобы он мог понять и управлять страницей. Это гарантирует, что любой пользователь, у которого отключена поддержка CSS( заблокирована или он используюет специализированный браузер (например, программы чтения с экрана для людей с ослабленным зрением), по-прежнему будет доступно и понятно содержание. Имея это в виду, можно также обеспечить логическую разметку, которую будет легче изменить позже.
Шаг 9 – CSS
Теперь самое интересное: добавление стилей к странице. Приготовьтесь – чтобы достичь разметки, которую мы хотим, мы будем вынуждены сталкиваться с некоторыми проблемами CSS. Я собираюсь попытаться объяснить основные понятия, которые приводят к этим проблемам, так, чтобы Вы не только узнали, как решить их, но также и получили бы лучшее понимание того, как CSS работает и как бороться с любыми проблемами, на которые Вы могли бы натолкнуться. Давайте начнем!
Создайте новый документ “style.css” и свяжитесь с ним в заголовке Вашего документа html:
|
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>My Blog</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> |
Шаг 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.2em.
|
#top_bar p {font-size: 1.2em; color: #ebf0e8;} #top_bar a {font-size: 1.2em; 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.8em; padding-top: 25px; } p.desc { font-family: "Myriad Pro", arial, sans-serif; color: #fff; font-size: 2.4em; } |
Хорошо, теперь мы должны вывести наше описание около нашего Лого. Это может быть достигнуто с помощью 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.4em; 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.8em; 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 это головная боль, поэтому я обычно пропускаю это. Чтобы получить стили для моих постов, я прохожу метод проб и ошибок. Я обычно начинаю с параметров настройки, подобных заданным по умолчанию стилям браузера, которые Вы можете найти по ссылке, и настроить их как вам угодно. Я не собираюсь проходить весь процесс шаг за шагом, но это то, что я придумал в конце:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
|
#posts h2 {margin: 7px 0 4px 0; font-size: 2.4em; } #posts h2, h3, h4, h5, h6 {color: #3c3f40; } #posts p {line-height: 1.3em; padding: 7px 0; font-size: 1.2em; } #posts small {font-size: 1.1em; } #posts a {color: #327800; font-weight: bold; text-decoration: none; } #posts blockquote {margin: 0.7em 3em; border-left: 2px solid #327800; padding-left: 10px; } #posts ol, ul, dl {font-size: 1.2em; 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.2em; } #posts h3 {font-size: 1.8em;} #posts h4 {font-size: 1.4em; } |
Это должно выглядеть примерно так:
Теперь есть 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.6em; color: #3c3f40; margin-top: 10px } #sidebar ul {list-style: none; margin-left: 20px; } #sidebar ul li {font-size: 1.2em; } #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%.
Примечание: это еще одно сокращенное значение, это означает, что верхний и нижний отступы по 25px, а слева и справа 3%.
Наша боковая панель теперь 33+6 % шириной, таким образом это все еще слишком широко, но все, что мы должны сделать, теперь, вычитают 6 % из оригинальных 33 %.
Я думал, что боковая панель выглядела немного широкой в этом пункте, таким образом, я уменьшал её до 25 %.
Главное помнить, что все padding, margin, и даже border значения добавляют ширину элемента, поэтому Вы должны корректировать свойство ширины, чтобы компенсировать ширину каждый раз, когда Вы добавляете padding, margins или borders.
Мы идем вперед, независимо от того насколько большой Вы делаете текст, наша боковая панель остсается в стороне, и отношение между областью постов и боковой панелью остается тем же самым. Это чрезмерно простая боковая панель, но я не собираюсь разрабатывать ее больше, только потому что не важно для этой обучающей статьи.
Шаг 17 –Нижний колонтитул
Во-первых, давайте немного увеличим шрифт и добавим некоторые стили:
|
#footer p {color: #a5bf8d;} #footer h4 {color: #a5bf8d; font-size: 1.4em; padding-top: 0; } #footer ul {list-style: none; margin-left: 0; } #footer ul li a {text-decoration: none; color: #fff; } |
Далее, мы можем добавить в наше фоновое изображение:
|
#footer {font-size: 1.2em; 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.2em; 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 – Проверка доступности
Я проверял свою страницу в Сафари 4. Так как Сафари 4 является вероятно самым стандартным и современным браузером, он отображает web-страницы наиболее предсказуемо. Если только все пользовались послушным стандартным браузером … К сожалению, есть еще люди, использующие устаревшие браузеры, и мы должны подготовиться к этому.
Давайте начнем с самого проблематичного браузера: Internet Explorer 6. Я использую mac, и мне предстоит найти эффективный (бесплатный) способ проверки моих web-страницы в Internet Explorer. Если любой, читая это знает о своего рода волшебной методике, пожалуйста, сообщите мне. В любом случае время для перевозки из ol’ семейства Dell. Для установки нескольких версий Internet Explorer, гуглим «Multiple IE» и загружаем ZIP-файл.
Удивительно всё работает просто отлично в IE6! IE7 тоже нормально. Текст изменяет размер! Я также проверил эту страницу в Firefox Opera и Camino. У меня была проблема, с установкой Google Chrome на PC, поэтому я не могу сказать Вам, работает ли там, но я думаю, что должно, потому что простая размета и стили.
Заключение
Вот и всё! Мы надеемся, Вы изучили несколько вещей о верстке гибких веб-сайтов. Проверьте сайт в любом браузере, сделайте текст больше, сделайте его меньшим, и наша разметка адаптируется отлично. Отключите CSS, и она все еще имеет смысл! Я надеюсь, что Вы видите, как просто сделать так, чтобы в Ваших вебсайтах было меньше ошибок! Эта страница была очень простая, без сложных проблем. Когда Ваши разметки станут более сложными, будет немного труднее поддерживать гибкость.
Скачать исходники zip архивом
Просмотр Demo
Автор: Tessa Thornton
Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Источник: //net.tutsplus.com
E-mail: contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Комментарии (12)