HTML дизайн: применение на практике

или возможно ли использовать один лишь HTML для дизайна

Глава содержит пример применения HTML дизайна в сайтостроении.

В меню слева вы найдете современные и очень подробные уроки по Гипертекстовой разметке.

Они позволят вам создать свой сайт с чистого листа, а пока смотрим немного ниже.

Основное содержание главы о дизайне

HTML дизайн и его применение на практике: верстка
Познакомимся с современными способами создания сайта, а затем с HTML дизайном
HTML дизайн и стилевые описания: пример страницы
HTML дизайн и CSS стили в отдаленном файле или как все сделать правильно

Прежде, чем приступить к HTML дизайну, предлагаю ознакомиться с некоторой информацией.

Это может быть интересно.

Современные способы создания сайта

Несколько основных вещей необходимы для создания сайта: а) компьютер с доступом к сети интернет; б) учебный материал, который бы подробно описывал все шаги в процессе создания сайт (смело можете использовать мой самоучитель); в) необходимо воспользоваться услугами хостинга. Что это такое? Хостинг – это услуга, которая предоставляет физическим лицам и организациям сохранение веб-страниц и других файлов (данные, текстовые файлы, изображения, видео и подобное содержание) в сети интернет. Выражаясь другими словами, за определенную месячную плату ваш сайт разместят на отдаленном сервере, который имеет связь с интернетом. Естественно, пароль доступа к сайту будет известен только вам. Сегодня существует несколько способов самостоятельного создания сайтов: а) создание сайта с помощью HTML и б) создание сайтов с помощью систем управления содержанием, например, WordPress или Joomla, предоставляющих возможность использования шаблонов с готовым дизайном.

HTML дизайн сайта и стилевые описания

Применение дизайна к файлу index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

          <html>

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

          <title>Пример ХТМЛ дизайна</title>

          <link rel="stylesheet" href="file.css" type="text/css" />

          </head>

          <body>

          <div class="werty">

          <div id="header">

          <h2 align="center">Моя первая страница!</h2>

          </div>

          <div id="spisok">

          <ul class="nav">

          <li><a href="#">llllllll</a></li>

          <li><a href="#">oooooooo</a></li>

          <li><a href="#">mmmmmmmm</a></li>

          <li><a href="#">kkkkkkkk</a></li>

          <li><a href="#">eeeeeeee</a></li>

          </ul>

          </div>

          <div id="l">

          <h3 style="text-align:center">wwwwwwwwwwww</h3>

          <p>wwwww www wwww wwww www www wwwww wwww wwwwww wwwww wwwwww wwwww wwwwww wwwww wwwwww www www wwwwwwwwww wwwwwwwww www ww www ww wwwwww wwww wwwwww wwww www www www wwww ww wwwwww wwwwwwwwww ww wwww wwwwwww ww ww wwwwwwww wwwww wwwww wwwwwwwwww ww wwwwwww www www www wwww wwwww ww wwwwww ww ww wwwww wwwww ww www www wwww wwww wwwwww www wwwwwww www wwwwwww wwwww wwww wwwwwww wwww ww wwwwwwwww wwwwww wwww wwww wwwwwwww wwww www wwww ww wwww wwww wwwwwww www wwwwww www www wwwwww wwww www ww wwwww wwwww wwwww wwww www wwwwwww www wwwww www www wwwwww www wwww www wwww wwww wwww www wwwwwww www wwwwwww www wwwwwwww ww wwwww wwww</p>

          <p style="text-align:center"><a href="#">wwwwwwwwwww</a></p>

          </div>

          <div id="r">

          <h3 style="text-align:center">mmmmmmmmmmmm</h3>

          <p>mmmmm mmmmmmm mm m mmmm mm mmmm mmmm mm mm mmm mmmmmm mmmmm mmmmmm mm mmmm mmmmm mm mmmm mmmm mmm mmm mmmm mmm mmm mmmmmm mmm mmm mmmmm mm mmm mmmm mm mmmm mmmmm mm mmmm mmmm mm mmmm mmmmmm mmmm mm mmmmm mmm mmmmm mm mmmmm mmmm mm mmmm mmmm mmm mmmmm mm mmm mmmm mm mmmmmm mmmm mmmm mmm mm mmm mmmm mm mmm mmm mmm mmmm mm mm mmm mm mmm mmm mmmm mmm mmm mmm mmmm mmm mmmm mm mmmm mmmm mmm mmmmm mmm mmm mm mmmm mmmmmmmm mm mm mmm mmmmmm mm mmm mmm mmmmm mmmmm mm mm mmmmmmm mmmmm m mmmm mm mmmm mmm mm mmmm mmm mmmmm mmmm mm mmmm mmmmm mmmmm mm mmm mmmm mm mmm mmm mm mm mm</p>

          <p style="text-align:center"><a href="#">mmmmmmmmm mmmm</a></p>

          </div>

          <img src="images/fon.jpg" alt="" hspace="36" />

          <p id="bottom">eeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeeee eeeeeeeeeee eeeeeeeeee eeeeeeeeeee eeeeee eeeeeee eeeeeeee eeeeeeee eeeeeeeeee eeeeeeeee</p>

          </div>

          </body>

          </html>

HTML дизайн сайта в отдельном файле

Исходный код file.css:

body {font-family: Verdana, sans-serif}

          div.werty {margin: 0 auto; width: 800px; background-color: #ff66cc}

          #l, #r {width: 340px; margin-top: 30px; float: left}

          #l {padding: 30px 20px 30px 40px; text-align: right}

          #r {padding: 30px 40px 30px 20px}

          #bottom {

          width: 740px;

          background-color: #cc66ff;

          margin: 35px 0 0 0;

          border-top: 1px solid #ff3366;

          padding: 20px 30px 20px 30px;

          line-height: 180%;

          text-align: center;

          font-size: 10px

          }

          #header {

          height: 130px;

          width: 800px;

          margin: 0;

          padding: 0;

          background: #cc66ff;

          border-bottom: 1px solid #ff3366

          }

          #header h2 {padding-top:47px}

          ul.nav {

          display: block;

          margin: 0;

          padding: 0 0 0 91px;

          list-style-type: none

          }

          ul.nav li {background-color: #660033; display: inline; padding: 0}

          ul.nav li a:link, ul.nav li a:visited, ul.nav li a:active {

          background-color: #660033;

          padding: 5px 15px 1px 15px;

          color: #cccccc;

          text-decoration: none;

          border-bottom: 2px solid #660033

          }

          ul.nav li a:hover {

          background-color: #ffffff;

          padding: 5px 15px 1px 15px;

          color: #cc0000;

          text-decoration: none;

          border-bottom: 2px solid #660033

          }

          #spisok {margin-left: 30px}

          a:link {color: #cccccc}

          a:visited {color: #ffffff}

Результат: HTML + CSS дизайн

Мы имеем 2 файла: index.html и file.css.

<link rel="stylesheet" href="file.css" type="text/css" /> в секции <head> </head> файла index.html не что иное, как ссылка на отдаленный документ file.css. Атрибуты style="" со значениями – прямое включение Каскадных таблиц стилей в HTML документ, что не является оптимальным вариантом внедрения стилевых описаний – семантически правильным есть способ ввода атрибутов class="" и id="" в теги документа и последующее описание их значений (значений атрибутов class="" и id="") во внешнем файле с расширением .css — такой способ не засоряет код страницы, что очень важно для поисковых роботов.

В этом демонстрационном уроке был представлен тип жесткой верстки, реализованной с помощью блоков <div> </div>. Верстка называется жесткая, потому что размеры блоков установлены в пикселях. Другой вариант – табличная верстка рассматривается в cледующем уроке.

Так выглядит дизайн index.html без использования стилей: HTML дизайн

Конечно же, самый элементарный дизайн можно обеспечить только лишь с помощью одного HTML, но в нашем самоучителе не был описан такой метод, так как это нерационально и не способствует движению вперед.

1 3 4 5 6 7 8 9 10 11 12

Автор проекта - Вася Митин | Дата публикации: Июль 2011 | Обновление: Ноябрь 2018

CSS дизайн или верстка сайта Применение HTML дизайна