|
||||||||||||
Меню сайта
Реклама на сайте:
|
Верстаем на html5Статья № 5. Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.В этом разделе мы:
Готовим каркас страницы и делим его на секцииЧтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Первая строка — пишем тип документа. Вторая строка — открываем главный тег всего документа html и указываем параметр lang, записав там базовый язык страницы — русский. Переходим к заголовку. Указываем — кодировку символов документа. Затем заголовок, для окна браузера. Подключаем файл стиля. В конце, добавим пустой контейнер тела документа. Листинг 1. Базовая структура документа HTML5 <<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Верстаем в HTML5</title> <link rel="stylesheet" href="styles.css" /> </head> <body> </body> </html> Каркас готов, далее — семантические элементы страницы. Делаем разметку контентаРазместим блоки в контейнере <body></body>. Будем придерживаться следующей последовательности этих элементов:
В начале у нас будет блок который отвечает за заголовок страницы. Затем семантический блок для меню. Ссылки в меню сделаем фиктивными. После этого начинается статья, обозначенная соответствующим семантическим блоком. В ней блок заголовка для записи названия статьи и даты публикации. Далее идёт содержимое статьи, к которой добавлены собственные выводы автора, написавшего новость. Это добавка оформляется в виде секции, также сопровождается блоком заголовка и контентом. В заключении страницы идёт блок footer, в котором мы разместим дополнительную информацию о контенте наших страниц.
Листинг 2. Размещение семантических блоков HTML5 Здесь не приводим полный код страницы, а только то, что должно быть между тегами <body> бла…бла…бла </body>. <header class="mainH"> <hgroup> <h1>Вёрстка страницы в HTML5</h1> <h2>Урок номер 5 Вёрстка</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">Рубрики</a></li> <li><a href="#">Уроки HTML</a></li> <li><a href="#">Обучение CSS3</a></li> <li><a href="#">Обратная связь</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">О нас</a></li> </ul> </nav> <article> <header> <time datetime="2020-08-26" pubdate> <span>ИЮНЬ</span> 26 </time> <h1> <a href="#" title="Ссылка на новость" rel="bookmark"> Верстка на HTML5 — разработка быстрее, а код гибче </a> </h1> </header> <p>В элементе head мы сначала определяем набор символов и добавляем заглавие. Весьма стандартно, без кавычек. Двигаясь дальше, вставляем условный комментарий, внутрь которого загружаем файл JavaScript, который поможет нам работать с Internet Explorer (IE) 8 и более ранними его версиями</p> <p>Условный комментарий – это вид HTML-комментария, который Microsoft использует в IE, по сути, для реализации отдельных (или всех) версий своего браузера. </p> <p>Используемый нами здесь комментарий проверяет, является ли браузер, открывающий страницу, Internet Explorer’ом с номером версии менее 9. Другой комментарий, который мы бы использовали, это: < !-- [if lte IE 8] -- >; он проверил бы, является ли открывающий страницу браузер IE версией ниже или равной 8. По существу, между этими двумя комментариями нет разницы; они оба направлены на один ряд версий IE, так что можете взять любой. <figure><img src="/menu/images/big5.jpg" width="300" alt="HTML5" title="html5"></figure> <section> <header> <h1>Заключение:</h1> </header> <p>Итак, вот и подошла к завершению первая часть нашей статьи посвящённой верстке сайта на HTML5 и CSS3. Я старался сделать ее настолько короткой, насколько можно, и не тратить слишком много времени на неопределенности в спецификации HTML5, потому что она еще не закончена. Тем временем нам придется полагаться на сообщество и труд «лекарей» HTML5, что станут нашими проводниками по внедрению новых элементов в сайты. Спасибо за прочтение и не пропустите вторую часть статьи, где мы обсудим свойства CSS3, используемые для декорирования разметки.</p> </section> </article> <footer> <p>© Powered by Soven 2006-2020</p> </footer> Подключаем файл стилей сssВ файле стилей styles.css первое что надо сделать это определиться со шрифтом для всего документа. Лучший шрифт который воспринимается с экрана монитора, это тот у которого нет засечек. Такие шрифты называют sans-serif — (без засечек). К ним относятся, например: Arial, Helvetica, Verdana. Далее мы добавили такие параметры как: box-shadow-Данный параметр указывается для блочного элемента страницы, и создаёт тень вокруг него. text-shadow-Этот параметр по своим настройкам похож на предыдущий, отличие только в отсутствии разброса тени и внутренней тени. border-radius (-moz-border-radius, -webkit-border-radius)-Радиус скругления у блоков. Углов у блока может быть четыре, соответственно и элементов у этого параметра может быть столько же. Перечисляются по часовой стрелки начиная от верхнего левого угла. Этот код, вам нужно поместить в файл styles.css. Листинг 3. CSS для новых семантических элементов HTML5 * { font-family: Lucida Sans, Arial, Helvetica, sans-serif; } body { width: 960px; margin: 0px auto; } header.mainH { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 5px 0 #0026FF; -moz-box-shadow: 0 3px 5px 0 #0026FF; box-shadow: 0 3px 5px 0 #0026FF; padding: 5px; text-align: center; } header h1 { font-size: 36px; margin: 0px; } header h2 { font-size: 18px; margin: 0px; color: #888; font-style: italic; } nav ul { list-style: none; padding: 0px; display: block; clear: right; background-color: #0094FF; padding-left: 4px; height: 24px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } nav ul li { display: inline; padding: 0px 20px 5px 10px; height: 24px; border-right: 1px solid #ccc; } nav ul li a { color: #000000; text-decoration: none; font-size: 13px; font-weight: bold; } nav ul li a:hover { color: #fff; } article > header time { font-size: 18px; display: block; width: 36px; padding: 2px; text-align: center; background-color: #303030; color: #fff; font-weight: bold; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; float: left; margin-bottom: 10px; } article > header time span { font-size: 10px; font-weight: normal; text-transform: uppercase; } article > header h1 { font-size: 20px; float: left; margin-left: 14px; text-shadow: 2px 2px 1px #FFFFFF, 2px 2px 5px #888; } article > header h1 a { color: #303030; text-decoration: none; } article > section header h1 { font-size: 16px; } article p { clear: both; } footer p { text-align: center; font-size: 12px; color: #888; margin-top: 24px; } article > section { -moz-border-radius: 6px 0 0 0; -webkit-border-radius:6px 0 0 0; border-radius: 6px 0 0 0; box-shadow: 3px 3px 3px 0 #0026FF inset; padding: 5px; color: #801938; margin-top: 40px; } Посмотреть пример работы страницы можно ЗДЕСЬ.
Читайте также:
|