Уроки Joomla! 1.5

Скачать Denwer3 (версия p5.3.13_m5.5.25_pma3.5.1)

Скачать материалы к курсу – папка joomla_distrib.zip (40 Мб)

Авторы учебного курса:
Редькин Владимир Сергеевич,
студент гр. КТ-504 РГППУ, 2011,
Власова Наталья Сергеевна,
доцент кафедры информационных систем и технологий РГППУ

Урок 8. Верстка HTML-шаблона

Цели:

Научить верстать HTML-шаблон на основе блоков и таблиц.

Задачи:

Сформировать умения по HTML верстки с применением CSS-таблиц.
Сформировать умения по написанию HTML-страниц.

После того как PSD-шаблон был разрезан на отдельные графические файлы, в теме №7, можно приступать к верстке HTML-шаблона.

Создание HTML-файла и CSS-файла

1) Создайте файл с кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<link href="css/main.css" rel="stylesheet" type="text/css">
<title>Название web-страницы</title>
</head>
<body>

</body>
</html>

2) Сохраните созданный файл под именем index.html, рядом с папкой, где у Вас располагаются файлы изображений, таким образом, чтобы получилась следующая структура (Рис. 8.1):

Рисунок 8.1. Содержимое папки с шаблоном

В папке «images» должны располагаться файлы изображений созданных в предыдущей теме.

3) Создайте пустой CSS-файл.

4) Сохраните файл под именем main.css, расположив его в папке css рядом с файлом index.html (Рис. 8.2).

Рисунок 8.2. Расположение CSS-файла

Верстка шаблона

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

В первую очередь, необходимо посмотреть на то изображение шаблона, которое мы имеем.

5) Откройте файл PSD-шаблона, с которым вы работали в теме №7.

6) Включите отображение всех слоев (Рис. 8.3).

Рисунок 8.3. Файл PSD-шаблона

Определим из каких частей состоит шаблон:

фоновое изображение - его можно будет реализовать, применив к тегу <body> стиль, в котором будет фоновая картинка, выравненная по верхнему караю и середине, и монотонный цвет (этот цвет был определен на предыдущей теме);
сверху справа панель поиска - будет реализована за счет плавающего блока;
по середине верхнее меню - будет представлять себя в виде блока содержащего таблицу с тремя ячейками, каждая ячейка будет иметь свой фон, в виде нарезанных изображений;
центральная часть отведенная под контент - изобразим её в форме основного блока с прозрачным фоном, внутрь которого будет вставлена таблица с тремя ячейками: каждая ячейка будет содержать в себе блок с прозрачным фоном;
в нижнюю часть можно будет добавить так называемый футтер (footer) - это место где на сайте чаще всего располагаются авторские права, год создания и т.п..

7) Откройте для редактирования файлы index.html и main.css, если они были закрыты.

Сделав какие-либо изменения в файлах шаблона, можно просмотреть результат, открыв данный файл в браузере.

8) В файле main.css добавьте строчки задающие стиль всему телу страницы (к тегу <body>):

body {
margin: 0px;
padding: 0px;
background: url(../images/background.jpg) no-repeat top center;
background-color: #03345C;
}

9) Откройте файл index.html для просмотра в браузере, вид должен получиться как на рисунке 8.4.

Рисунок 8.4. Просмотр страницы index.html в браузере

Таким образом, был задан фон для HTML-шаблона.

10) Теперь необходимо добавить блок для панели поиска. Для этого в файле index.html добавьте между тегами <body> и </body> следующий код:

<body>

<div id="poisk">Тут будет располагаться Поиск</div>

</body>

Тем самым будет добавлен блок с идентификатором «poisk», который необходимо прописать в файле стилей main.css.

11) В файле main.css добавьте следующие строки, задающие стиль идентификатору «poisk»:

/*Поиск*/
#poisk {
display: block;
position: fixed;
top: 10px;
right:130px;
background: url(../images/bg1.png) repeat;
border: #021272 solid thin;
}

12) Откройте файл index.html для просмотра в браузере, вид должен получиться как на рисунке 8.5.

Рисунок 8.5. Просмотр страницы index.html в Internet Explorer 8.0

13) Теперь создадим блок для верхнего меню. Вставьте код следующий код в index.html после блока поиска:

<div id="topmenu" align="center">
Тут будет верхнее меню
</div>

14) В файле main.css добавьте следующие строки, задающие стиль идентификатору «topmenu»:

/*Верхнее меню*/
#topmenu{
display:block;
position: relative;
top:200px;
width:100%;
}

15) Далее создайте таблицу, на которой будет основано верхнее меню. Вставьте следующий код в index.html в блок с идентификатором «topmenu», вместо текста "Тут будет верхнее меню":

16) В файле main.css добавьте следующие строки, задающие стиль идентификаторам «toptable», «toptd1», «toptd2» и «toptd3»:

#toptable{
height: 52px;
margin: 0px;
padding: 0px;
}

#toptd1{
background: url(../images/top-menu-left.png) no-repeat top right;
width: 33px !important;
}

#toptd2{
background: url(../images/top-menu-center.png) repeat-x top;
text-align:center;
}

#toptd3{
background: url(../images/top-menu-right.png) no-repeat top left;
width: 33px !important;
}

17) Откройте файл index.html для просмотра в браузере, вид должен получиться как на рисунке 8.6.

Рисунок 8.6. Просмотр страницы index.html в Internet Explorer 8.0

18) Теперь создадим блок для таблицы контента и футтера. Вставьте следующий код в index.html после блока верхнего меню:

<div id="condiv" align="center">
Тут будет располагаться контент
</div>

19) В файле main.css добавьте следующие строки, задающие стиль идентификатору «condiv»:

/*Контент*/
#condiv {
display: block;
position: relative;
padding: 3px;
top: 200px;
width: 99%;
height: 62%;
}

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

20) Далее создайте таблицу, на которой будет основано содержание контента, а также левая и правая панели и вторую таблицу в которой будет располагаться футтер. Вставьте следующий код в index.html в блок с идентификатором «condiv», вместо текста "Тут будет располагаться контент":

Заметьте, что каждая ячейка таблицы contable содержит в себе блок имеющие также индентификатор.

21) В файле main.css добавьте следующие строки, задающие стиль идентификаторам «contable», «contd» и «foot»:

#contable {
width: 90%;
background: url(../images/bg1.png) repeat;
border: #021272 solid thin;
}

#contd{
display: block;
width: 100%;
height: 100%;
background: url(../images/bg2.png) repeat;
margin: 0px;
padding: 10px 0px;
}

/*Футтер*/
#foot{
color: #666;
font-size: 11px;
width: 90%;
margin: 5px 0px;
padding: 0px 0px;
background: url(../images/bg1.png) repeat;
border: #021272 solid thin;
}

22) Сохраните все изменения в файлах и сравните результат с рисунком 8.7.

Рисунок 8.7. Просмотр страницы index.html в Internet Explorer 8.0

Теперь HTML-шаблон готов, можно приступать к его конвертации для CMS Joomla! 1.5 и расстановки модулей.

Резюме

Чтобы указать стиль в CSS-файле используют идентификаторы и классы.
Методы верстки можно условно разделить на три вида: табличная, блочная и блочно-табличная.

Контрольное задание

Создайте HTML-шаблон по своему проекту с использованием CSS-стилей на основе изображений полученных и PSD-шаблона.

Вопросы для самоконтроля

Как подключить файл CSS стилей к HTML-файлу?
Какие методы верстки Вам известны?
Чем по вашему мнению достоинства верстки при помощи блоков и в чем недостатки?