В последней статье , как и было обещано, мы начали практическую работу по планированию и созданию макета. Теперь мы сконцентрировались на том, как создать каркас персонального проекта, думая ответственно и, следовательно, как адаптивный дизайн может адаптироваться к трем целевым макетам: По умолчанию (рабочий стол ПК), Портретный планшет и Смартфон.
Мы увидели, как упорядочить элементы типичного веб-сайта по категориям трех основных устройств, создав шаблон, представляющий общие элементы содержимого. В этой третьей части этой серии я сконцентрируюсь на написании HTML-кода и работе над структурой домашней страницы, а в следующей части я буду устанавливать первые правила стилевого оформления CSS для создания первоначального дизайна нашего проекта. ,
Первый шаг: HTML-код
Давайте начнем строить структуру нашего сайта с использованием HTML-кода. Чтобы избежать путаницы и пропустить некоторые шаги, мы продолжим, разделив макет на три части, как мы это делали на этапе проектирования макета. Время от времени мы будем останавливаться на частях кода, которые присущи только этой единственной части. Первая часть, с которой мы столкнемся, будет, конечно, заголовком, то есть частью, которая в нашем макете состоит из следующих элементов: баннер, поле для рассылки новостей и строка главного меню. Теперь, что мы должны сделать в качестве нашей первой задачи, это объявить документ типа, который для HTML5 указан следующим образом:
<!DOCTYPE html> Далее мы должны добавить раздел, необходимый для того, чтобы помочь веб-браузеру интерпретировать содержимое в следующем разделе тела. Этот раздел содержит специальные теги, таблицы стилей CSS и другие элементы, которые остаются скрытыми и не отображаются в браузере. Эти элементы обычно называют метаинформацией (в основном «информация об информации»), потому что их функция состоит в том, чтобы описать, какая информация находится на странице.
Первый метатег, который нуждается в спецификации, — это «meta charset»; он определяет, какая кодировка символов используется на странице. В нашем случае мы устанавливаем его в UTF-8, который является форматом Unicode переменной ширины, совместимым с ASCII или простым текстом для основных буквенно-цифровых символов. Используя «верхнюю половину» 8-битных кодов набора и расширения ASCII, он может обрабатывать более миллиона уникальных символов.
Требуется, чтобы любая веб-страница определяла форматирование страницы в информации заголовка, чтобы все браузеры точно знали, как читать и интерпретировать содержимое. В противном случае они будут показывать персонажей, используя их «предположение», что не всегда точно. Догадка может быть неправильной, и это приведет к отображению неправильных символов для пользователей.
Следующий пункт, на который мы должны обратить внимание, это свойство области просмотра . Установка области просмотра сообщает браузеру, как контент должен уместиться на экране устройства, и сообщает браузеру, что сайт оптимизирован для мобильных устройств. Например…
<meta name="viewport" content="width=device-width, initial-scale=1.0">
… Сообщает браузеру установить область просмотра в ширину устройства с начальным масштабом 1. После этого мы вставляем в тег заголовка имя, которое мы выбрали для нашего веб-сайта. Наконец, мы должны связать нашу HTML-страницу с таблицами стилей CSS, которые мы будем использовать для определения стиля нашей домашней страницы; HTML-элемент «link» определяет отношения между текущим документом и другими документами. С этой строкой кода …
<link rel="stylesheet" href="css/common.css" type="text/css" />
… Мы связываем документ с общей таблицей стилей (то есть с документом, который содержит все общие правила CSS, которые будут использоваться тремя версиями проекта), а эта…
<link rel="stylesheet" href="css/responsive.css" type="text/css" />
… Вызывает файл, в котором содержатся спецификации конкретных правил, которые будут применяться только к указанному устройству. Обратите внимание, что поскольку мы используем HTML5, вам не нужно указывать type="text/css" .
Закройте метку головы и перейдите к разделу тела . На этом этапе нам нужно создать два отдельных элемента div: один для баннера и один для окна новостной рассылки .
Во-первых, в дополнение к идентификатору, хорошей практикой для доступности является использование роли WAI-ARIA; обычно роли описывают виджеты и структуру. Структурные роли добавляются в разметку как атрибуты элементов, что делает ее идеальной для наших целей.
WAI-ARIA ( Инициатива веб-доступности — Accessible Rich Internet Applications ) — это техническая спецификация, опубликованная консорциумом World Wide Web, в которой указано, как повысить доступность веб-страниц. Он позволяет веб-страницам (или частям страниц) объявлять себя приложениями, а не статическими документами, добавляя информацию о роли, свойствах и состоянии в динамические веб-приложения, чтобы сделать элементы управления и обновления контента доступными для пользователей с ограниченными возможностями. Вот почему все эти виды спецификаций так важны.
Давайте продолжим наш проект, построив форму подписки на рассылку . Прежде всего, добавьте форму с тегами <form>. Открывающий тег должен включать имя формы, метод, который может быть «запросом» или «публикацией», и место назначения или «действие», куда форма должна отправлять ввод (я поставил знак #, чтобы указать, что он не зафиксирован) ,
Теперь добавьте текстовое поле с меткой для сбора адреса электронной почты и назначьте идентификатор и класс для следующих изменений стиля, которые вы можете применить к своей форме. Наконец, добавьте кнопку отправки в форму. Информация, введенная в поля формы, будет отправлена на получающую страницу для обработки, когда посетитель нажмет кнопку отправки. Вставьте слово «Отправить» для полей ввода, имени и значения, чтобы создать кнопку отправки, и закройте теги формы и div.
Итак, на данный момент у вас должен быть следующий код:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Website name</title> <link rel="stylesheet" href="css/common.css" type="text/css" /> <link rel="stylesheet" href="css/responsive.css" type="text/css" /> </head> <body> <header> <div id="banner" role="banner"></div> <div id="newsletter-box"> <form name="newsletter-form" action="#" method="post"> <label for="newsletter-email">Newsletter:</label> <input type="email" id="newsletter-email" class="newsletter-email" name="email" required="required" placeholder="Your email" /> <input type="submit" name="submit" value="Submit" /> </form> </div> </header>
Давайте перейдем к центральной части нашего макета, а именно к той, которая используется для разных типов контента.
Прежде всего, давайте создадим классическое меню , состоящее из пяти вариантов, которые будут основными категориями всего сайта: домашняя страница, новости, графика, мобильные устройства и веб-дизайн. В этом случае наиболее подходящим для нашей цели элементом является элемент nav , который является семантическим элементом, используемым для объявления навигационного раздела веб-сайта (т. Е. Раздела страницы, который ссылается на другие страницы или части внутри страницы). ).
В теге nav добавим неупорядоченный список (которому мы назначим класс с именем «menu-item»). Для раздела контента давайте создадим основной div с идентификатором «content», div-обертку и поместим в него статью. Элемент статьи является специализированным видом раздела; оно имеет более конкретный смысловой смысл как самостоятельная, автономная часть страницы. В нашем примере он будет содержать описание цели нашего сайта.
Что касается div обертки, он будет содержать еще три элемента: div, который содержит всю информацию об авторе (и фотографию, если хотите), сторону, в которой автор может добавлять свои скринкасты, и еще один элемент, предназначенный для его Последние твиты. Две точки на дополнительном элементе: он используется для тангенциально связанного контента. Однако в интерпретации этого нового элемента лежит некоторая путаница относительно того, как его следует использовать; помните, что только потому, что какой-то контент отображается слева или справа от основного контента, недостаточно оснований для использования элемента aside. Лучший способ решить, следует ли вам использовать стороннюю информацию или нет, заключается в том, чтобы спросить себя, можно ли удалить контент внутри сторонней страницы, не уменьшая смысла основного контента или действительно ли основной контент зависит от стороннего контента. Цитаты, глоссарии или даже связанные ссылки являются некоторыми примерами тангенциально связанного контента, которые подходят для сторон.
Код для этой второй части следующий:
<nav class="menu"> <ul class="menu-list"> <li class="menu-item"> <a class="menu-item-link" href="./homepage" title="Homepage">Homepage</a> </li> <li class="menu-item"> <a class="menu-item-link" href="./news" title="News">News</a> </li> <li class="menu-item"> <a class="menu-item-link" href="./graphics" title="Graphics">Graphics</a> </li> <li class="menu-item"> <a class="menu-item-link" href="./mobile" title="Mobile">Mobile</a> </li> <li class="menu-item"> <a class="menu-item-link" href="./webdesign" title="Web Design">Web Design</a> </li> </ul> </nav> <div id="content"> <article id="description-box"> <h3>Title</h3> <p> Your content here </p> </article> <div id="wrapper"> <div id="author-info-box"> <p> Information about the author <br /> </p> </div> <aside id="video-box"> <video> <source src="movie.mp4" type='video/mp4;' /> <source src="movie.webm" type='video/webm;' /> </video> </aside> <aside id="twitter-box"> <p> <img class="twitter-bird" src="./images/twitter-bird.png" alt="Twitter Bird" /> Follow me on Twitter! <br /> We're in (number of follower) </p> </aside> <br class="clear-both" /> </div> </div>в<nav class="menu"> <ul class="menu-list"> <li class="menu-item"> <a class="menu-item-link" href="./homepage" title="Homepage">Homepage</a> </li> <li class="menu-item"> <a class="menu-item-link" href="./news" title="News">News</a> </li> <li class="menu-item"> <a class="menu-item-link" href="./graphics" title="Graphics">Graphics</a> </li> <li class="menu-item"> <a class="menu-item-link" href="./mobile" title="Mobile">Mobile</a> </li> <li class="menu-item"> <a class="menu-item-link" href="./webdesign" title="Web Design">Web Design</a> </li> </ul> </nav> <div id="content"> <article id="description-box"> <h3>Title</h3> <p> Your content here </p> </article> <div id="wrapper"> <div id="author-info-box"> <p> Information about the author <br /> </p> </div> <aside id="video-box"> <video> <source src="movie.mp4" type='video/mp4;' /> <source src="movie.webm" type='video/webm;' /> </video> </aside> <aside id="twitter-box"> <p> <img class="twitter-bird" src="./images/twitter-bird.png" alt="Twitter Bird" /> Follow me on Twitter! <br /> We're in (number of follower) </p> </aside> <br class="clear-both" /> </div> </div>в<nav class="menu"> <ul class="menu-list"> <li class="menu-item"> <a class="menu-item-link" href="./homepage" title="Homepage">Homepage</a> </li> <li class="menu-item"> <a class="menu-item-link" href="./news" title="News">News</a> </li> <li class="menu-item"> <a class="menu-item-link" href="./graphics" title="Graphics">Graphics</a> </li> <li class="menu-item"> <a class="menu-item-link" href="./mobile" title="Mobile">Mobile</a> </li> <li class="menu-item"> <a class="menu-item-link" href="./webdesign" title="Web Design">Web Design</a> </li> </ul> </nav> <div id="content"> <article id="description-box"> <h3>Title</h3> <p> Your content here </p> </article> <div id="wrapper"> <div id="author-info-box"> <p> Information about the author <br /> </p> </div> <aside id="video-box"> <video> <source src="movie.mp4" type='video/mp4;' /> <source src="movie.webm" type='video/webm;' /> </video> </aside> <aside id="twitter-box"> <p> <img class="twitter-bird" src="./images/twitter-bird.png" alt="Twitter Bird" /> Follow me on Twitter! <br /> We're in (number of follower) </p> </aside> <br class="clear-both" /> </div> </div>
Последней оставшейся частью является раздел под названием « Нижний колонтитул» , который обычно содержит информацию о его разделах, авторе, ссылки на соответствующие документы, данные об авторских правах и т. Д. В некоторых случаях вы также можете найти ссылки на профили или персональные страницы вездесущих социальных сетей, таких как Facebook, Twitter, Google+ и LinkedIn. Итак, мы помещаем основную информацию в абзац, вставленный в новый тег HTML5 <footer>, а ссылки, направленные на упомянутые выше профили социальных сетей, в элемент div, основной класс которого называется «social-bar».
Вот код этой последней части:
<footer id="main-footer"> <p> Author's name. All rights reserved. Copyright © 2012 - 2013. </p> <div class="social-bar"> <a href="./facebook" title="Facebook"> <img src="./images/icons/facebook.png" alt="Facebook icon" /> </a> <a href="./twitter" title="Twitter"> <img src="./images/icons/twitter.png" alt="Twitter icon" /> </a> <a href="./googleplus" title="Google+"> <img src="./images/icons/google.png" alt="Google+ icon" /> </a> <a href="./linkedin" title="LinkedIn"> <img src="./images/icons/linkedin.png" alt="Linkedin icon" /> </a> </div> </footer> </body> </html>
Вывод
В этой статье мы увидели, как начать создание веб-сайта с нуля, уделяя особое внимание коду HTML и его основным элементам. В следующей статье я представлю первые правила CSS, чтобы иметь общее представление о графическом стиле, который будет отображать домашняя страница нашего сайта. Пройдя этот шаг, мы сконцентрируемся на аспектах и процедурах, которые необходимо выполнить, чтобы преобразовать нашу статическую домашнюю страницу в адаптивную домашнюю страницу, которая будет правильно просматриваться на различных устройствах.