|
|
|
Построение многостраничных сайтовПредставляю Вашему вниманию седьмой выпуск рассылки "Уроки веб-дизайна в примерах". Содержание выпуска: Обычно проблем с написанием одностраничного сайта не возникает. Когда же страниц становится больше, то возникает вопрос, как вносить измерения сразу на несколько страниц сайта. Речь идет не об изменении стиля оформления, а об изменении структуры самого сайта. Рассмотрим это на примере многостраничного сайта зоомагазина. Структура сайта имеет следующий вид: вверху идет логотип фирмы, ниже три колонки (меню, содержательная часть, новости), внизу счетчики и соглашение об использовании информации. Сразу отметим, что фреймы использоваться не будут по причинам, рассмотренным в прошлом выпуске рассылки. Запишем упрощенный HTML код для первой страницы этого сайта:
01 <html>
02 <head> 03 <title>Зоомагазин "Пушистик"</title> 04 </head> 05 <body> 06 <table width=770 align=center> 07 <tr><td> 08 <font size=+2>"Пушистик"</font> 09 </td></tr> 10 </table> 11 <table width=770 align=center border=1> 12 <tr> 13 <td width=150> 14 <a href=index.html>О магазине</a><br> 15 <a href=animals.html>Зверушки</a><br> 16 <a href=contacts.html>Связь</a> 17 </td> 18 <td> 19 <p>Наш магазин занимается продажей пушистых зверушек.</p> 20 </td> 21 <td width=200> 22 <p>Новости:</p> 23 <p>Сегодня в продажу поступили крокодилы всех расцветок.</p> 24 </td> 25 </tr> 25 </table> 26 <table width=770 align=center> 27 <tr><td> 28 <(c) Все права защищены, зоомагазин "Пушистик"</font> 29 </td></tr> 30 </table> 31 <body> 32 <html> Как видно из примера, сайт состоит из трех страниц: index.html, animals.html, contacts.html. Все страницы имеют ту же структуру, за исключением контентной части (строка 19). Как добавить новую страницу? Для этого нужно исправить меню в трех существующих файлах, и добавить четвертый файл с новым меню и контентной частью. Для изменения логотипа или новостей также нужно исправить все файлы. Для трехстраничного сайта это можно сделать руками, но только фирма выросла, ассортимент товаров увеличился и сайт разросся до 1000 страниц. Как быть в этом случае? Как сделать изменения на всех страницах сайта наименьшими затратами? Предлагаю вашему вниманию простой и эффективный способ. Смысловые части сайта расположим в разных файлах: Заголовок и логотип в файле head (строки 01-10), Начало основной таблицы и меню в файле menu (строки 11-17) Смысловую часть главной табицы в файле main1, а смысловую часть остальных разделов в файлах main2, main3, и т.д. (строки 18-20) Новости и конец основной таблицы в файле news (строки 21-25) Оставшийся код запишем в файл bottom (строки 25-32) Создадим файл make.bat (расширение обязательно) с следующим содержанием:
copy /b head+menu+main1+news+bottom index.html
copy /b head+menu+main2+news+bottom animals.html copy /b head+menu+main3+news+bottom contacts.html Теперь запускаем файл make.bat двойным щелчком мыши и получаем... три файла index.html, animals.html, contacts.html. Файл с расширением .bat в MS Windows - пакетный командный файл, или просто скрипт. Команда copy собирает из различных файлов один файл. Теперь, для того, чтобы изменить, например, новости, достаточно исправить файл news и запустить скрипт make.bat - все изменения автоматически произойдут во всех файлах. Чтобы добавить новый рездел, достаточно добавить строчку в menu, написать контентную часть в новый файл main4 и добавить строчку в скрипт make.bat (copy /b head+menu+main4+news+bottom novyi_fail.html). После запуска скрипта у вас будут уже четыре файла со всеми изменениями. Отметим, что данный способ подходит для создания сайта с любым количеством страниц! Теперь вы можете вносить изменения на свой сайт практически одним кликом! Конечно же, скрипт можно модифицировать по своему усмотрению, а в файлы-заготовки вносить смысловые блоки исходя из структуры вашего сайта. Теперь вы умеете вносить изменения в содержательную часть своего сайта с помощью пакетного командного файла, в следующем выпуске мы рассмотрим как изменять стиль оформления всего сайта (конечно же одним кликом). На сайте добавлен новый раздел DHTML и изменен графический стиль оформления. Новый дизайн был навеян приближением зимы и зимних праздников. Хорошего вам настроения!
P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет"). |
|
Ваши руки выполнили недопустимую операцию и будут ампутированы