голосование
PHP
Javascript
BASH
HTML
Firebird
Программы
Хостинг
Майнинг
Ресурсы
GIT
SEO
Oracle
Python
Проголосуйте за категорию!
счётчик
Яндекс.Метрика

Как сделать каркас сайта HTML5

Как сделать каркас сайта? Хочу вам показать немного устаревший, но надёжный способ верстки каркаса. Тут будем активно использовать нейтральный элемент div. Обратите внимание на то, что здесь нет новых тегов article, меню.

верстка макета страницы при помощи тега div

Предлагаю вам готовый пример. Сделайте файл index.php и папку css файлом style.css.

style.css - файл


<style>
body {font-family: verdana;}
h1, h2 {text-align: center; color: #000;}
#header {background: #FFAB61;}
#sidebar {float: left; width: 20&#37; background-color: #FF8761;}
.post {float: right; width: 79&#37; background-color: #FFE061; margin-bottom: 10px;}
#footer {clear: both; background-color: #FFAB61;}
</style>

index.php - файл


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset=utf-8>
<title>страница1</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
   <h1>Моя страница</h1>
</div>
<div id="sidebar">
   <h2>Меню</h2>
  <ul>
     <li><a href="cat1.html">первая категория</li>
     <li><a href="cat2.html">вторая категория</li>
  </ul>
</div>
<div class="post">
   <h2>Первый блок с контентом</h2>
   <p>Тут текст для первого блока</p>
</div>
<div class="post">
   <h2>Второй блок с контентом</h2>
   <p>Тут текст для второго блока</p>
</div>
<div id="footer">
   <h2>Футер</h2>
   <p>Тут текст для футера</p>
</div>
</body>
</html>

Теперь немного переделаем тот же самый шаблон. Добавим в него новые теги HTML5. Смотрите на картинку.

схема верстки макета HTML5

В файле style.css нужно у всех новых тегов сделать свойство display: block. Если вы этого не сделаете, то верстка будет не правильно отображаться.

style.css


<style>
header, nav, footer, article {display: block;}
body {font-family: verdana;}
header {background: #FFAB61;}
nav {float: left; width: 20&#37; background-color: #FF8761;}
h1, h2 {text-align: center; color: #000;}
article {float: right; width: 79&#37; background-color: #FFE061; margin-bottom: 10px;}
footer {clear: both; background-color: #FFAB61;}
</style>

index.php


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset=utf-8>
<title>страница1</title>
<link href="css/style2.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
</head>
<body>
<header>
   <h1>Моя страница</h1>
</header>
<nav>
   <h2>Меню</h2>
  <ul>
     <li><a href="cat1.html">первая категория</li>
     <li><a href="cat2.html">вторая категория</li>
  </ul>
</nav>
<article>
   <h2>Первый блок с контентом</h2>
   <p>Тут текст для первого блока</p>
</article>
<article>
   <h2>Второй блок с контентом</h2>
   <p>Тут текст для второго блока</p>
</article>
<footer>
   <h2>Футер</h2>
   <p>Тут текст для футера</p>
</footer>
</body>
</html>

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

готовая верстка

В результате у нас есть два способа верстки. Второй способ верстки макета страницы с применением тегов HTML5 лучше. Но есть одна проблема. Такая верстка не отобразиться в эксплорере. Может быть, в самых новых версиях верстка с тегами HTML5 нормально будет отображаться? Можно обмануть эксплорер! Для этого надо подсунуть ему яваскрипт файл, который налету изменит стили. Вы легко найдёте этот файл js в интернете.

просмотры: 2453, уровень: лёгкий уровень, рейтинг: 5, дата: 2016-12-18 14:34:39
проголосовать:

Комментарии:






поиск
сайты друзей
банеры
Мы предлагаем в аренду VPS серверы с выделенным IP-адресом, которые полностью эмулируют физический сервер.
http://trainingweb.ru/redirect/well_web_vps_kvm Аренда VPS KVM в Европе Мы предлагаем в аренду VPS серверы с выделенным IP-адресом, которые полностью эмулируют физический сервер.
http://www.2domains.ru домен RU домен RU всего за 99 рублей
http://ping-admin.ru/index_5659.html мониторинг сайтов сервис мониторинга работы сайта, мониторим HTTP, HTTPS, FTP, MYSQL, PostgreSQL, POP3, SMTP, IMAP