Публикации с тегом "верстка"

Урок 4: Создание HTML-страниц 2

Во втором уроке мы уже пробовали сотворить HTML-страницу, однако без использования стилей она получилась, откровенно говоря, убогой. С помощью CSS-стилей можно создать гораздо более красивую и функциональную страницу, что мы и попытаемся сделать.

Создайте в корневом каталоге одного из ваших виртуальных доменов файлы index.html и style.css. В первый будем помещать HTML-код, а во второй — CSS-стили страницы. Набросайте в index.html следующий код:

<html>  
  <head> 
    <title>Главная страница</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <link rel="stylesheet" href="/style.css" type="text/css">
  </head>  
  <body> 
    <table class="content" border="1" width="100%" height="100%"> 
      <tr> 
        <td height="80px" colspan="3">Шапка</td> 
      </tr> 
      <tr> 
        <td height="30px" colspan="3">Меню</td> 
      </tr> 
      <tr> 
        <td width="200px">Левый контент</td> 
        <td>Основной контент</td> 
        <td width="200px">Правый контент</td> 
      </tr> 
      <tr> 
        <td height="60px" colspan="3">Подвал</td> 
      </tr> 
    </table>
  </body>  
</html>

в файл style.css:

* {font-family: verdana; font-size: 12px}
body {margin: 0; padding: 0}
 
.content {border-collapse: collapse}  
.content td {padding: 0}

На этом шаге мы создали каркас HTML-страницы, указали заголовок, кодировку. Подключили внешний файл стилей. В теле страницы создали каркасную таблицу довольно распространенной структуры: шапка, меню, подвал и область контента, представляющую собой три столбца: два узких по бокам и широкий по центру. В стилях задали общий шрифт страницы и убрали поля и отступы тела страницы, чтобы каркасная таблица плотно прилегала к краям браузера. В каркасной таблице убрали поля в ячейках, зазор между ячейками.

Далее, рисуем шапку страницы в графическом редакторе. Я сделал следующий набросок в редакторе Gimp (исходник):

Заготовка шапки страницы

Урок 3: Создание информационного блока с тенью (HTML + CSS)

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

Первый шаг при создании блока — его отрисовка в графическом редакторе. Рисуется он очень просто: прямоугольник средних размеров с примененным к нему эффектом тени. Я, например, нарисовал в редакторе Gimp (исходник):

Блок с тенью. Готовый вид

Далее необходимо сверстать этот блок. Для нас важна именно тень, сам блок мы не трогаем. Определяем (мысленно) в тени участки с однородной текстурой, растянутой по горизонтали и участки с однородной текстурой, растянутой по вертикали учитывая, что наш блок имеет динамические размеры:

Блок с тенью. Выделенные участки тени

Зеленый участок — вертикально-однородная тень, синий участок — горизонтально-однородная тень, красные участки — окончания/закругления тени, которые необходимо описывать отдельными изображениями. Тень должна быть полностью охвачена воображаемой синей и зеленой маской, допускается захват лишней белой полоски шириной 1-2 пикселя. Для моего изображения оказалось достаточной ширина в 10 пикселей. Красные участки, соответственно, оказались размером 10x10 пикселей.

Язык разметки гипертекста (HTML)

Основная часть контента сайта состоит из файлов. Уверен, каждый из вас когда-либо встречал файлы с расширением htm или html. Это текстовый файл, описывающий разметку страницы сайта, то есть расположение и форматирование текста, графики, ссылок и т.п. при помощи языка разметки HTML (HyperText Markup Language). Организовать полный курс по языку HTML я вряд ли смогу, так как тема очень обширная, поэтому в этой статье я расскажу о базовых понятиях, достаточных для понимания сути. Более полную информацию вам стоит искать в книгах или специализированных интернет-ресурсах по HTML, благо, таковых немало.

HTML-страница строится из кирпичиков — тегов, которые представляют собой текстовые сущности, заключенные в треугольные скобки ("<" и ">"), например:

<br>

Этот тег переводит текст на новую строку. Теги бывают парные и непарные. Приведенный выше тег является непарным, так как это одиночный самостоятельный тег. Парный тег состоит из открывающего и закрывающего тега:

<font>текст</font>