|
Сайтостроение по стандартамЗаметка 6. Проектируем сайт по стандартам (общий макет)В последних заметках приводятся конкретные рекомендации, руководствуясь которыми можно средствами HTML (последней версии 4.01, вариант Transitional) и CSS создать сайт согласно стандартам W3C, отделяя дизайн от содержания. Сайт, построенный в этих заметках, можно смотреть по адресу http://www.botik.ru/~robot/webst. Запаковку сайта (120 Кб) можно скопировать с адреса ftp.botik.ru/rented/robot/univer/webst.zip. В этой заметке будет построен общий макет страницы на двух плавающих блоках фиксированной ширины. Постановка задачи Построить сайт, макет которого изображен на рис. 1.
Рис. 1. Макет двухколоночного сайта с колонками фиксированной ширины Страница сайта должна отображаться в прямоугольнике шириной 670 пикселей и содержать две колонки. Колонка слева (left) шириной 220 пикселей?— вспомогательная. Основное содержимое будет выводиться во вторую колонку (content) шириной 450 пикселей. По горизонтали страница должна выравниваться по центру окна браузера. Логотип и заголовок сайта (title) должны располагаться на самом верху страницы. Горизонтальное меню (menu) повторяется на странице дважды: сверху, ниже заголовка сайта, и внизу, выше колонтитула (bottom). Почему на страницу полезно выводить два экземпляра меню? Меню в начале страницы удобно, когда сайт просматривают. Обычно пользователи так и поступают: листают сайт, пока не встретят интересную страницу, которую читают. Если страница прочитана до конца, удобно продолжить движение по сайту с помощью меню, расположенного в конце страницы. Шаг 1: пишем HTML-код Запишем HTML-код страницы, руководствуясь схемой рис. 2.
Рис. 2. Структура содержимого страницы сайта Содержание страницы погрузим в блок-контейнер (container), который будем выравнивать горизонтально по центру, согласно техническому заданию. Листинг 1. HTML-код макета страницы <BODY> <!-- Контейнер --> <DIV class=container> <!-- Заголовок и логотип --> <DIV class=title> Заголовок и логотип </DIV> <!-- Меню сайта --> <DIV class=menu> Меню сайта </DIV> <!-- Левая колонка --> <DIV class=left> Левая колонка. Левая колонка. Левая колонка. Левая колонка. </DIV> <!-- Основная колонка --> <DIV class=content> Основная колонка <P> Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. <P> Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. Рыбное филе. </DIV> <!-- Меню сайта --> <DIV class=menu> Меню сайта </DIV> <DIV class=bottom> Подвал </DIV> </DIV> </BODY> В браузере наша заготовка отображается так, как показано на рис. 3.
Рис. 3. Страница макета в браузере Примерно так и будет отображаться страница в браузере, который не поддерживает CSS. Неплохо. Вся информация располагается на странице в правильном порядке и будет доступна пользователю даже в текстовом браузере. Прежде чем заняться построением CSS-кода для нашего макета, обсудим важный вопрос, связанный с блочной моделью документа. Особенности блочной моделиВ стандарте CSS1, который был принят в 1996 году, W3C предложила все объекты на web-странице считать заключенными в виртуальную рамку (Box Model). Свойства этой рамки можно задавать при помощи стилевых свойств. Не важно при этом, является ли элемент абзацем, списком, заголовком, картинкой или элементом DIV. Содержимое каждого блока имеет границу (задается свойством border), внутренний отступ (задается свойством padding) и внешний отступ (задается свойством margin). Блок условно изображен на рис. 4.
Рис. 4. Четыре области блочной модели: содержимое, внутренний отступ, граница, внешний отступ Пусть, например, блок задан при помощи кода: <DIV class=area> Содержимое блока </DIV> Используя CSS, можно записать такое определение (см. листинг 2): Листинг 2. Стилевое определение для блока area .area { width: 400px; height: 200px; padding: 10px; margin: 20px; border: 5px solid black; } В этом определении заданы:
Кроме того, заданы:
Возникает вопрос: к какому объекту относятся эти 400 и 200 пикселей? По стандарту W3C эти размеры относятся к содержимому блока. Браузеры, построенные на движке Gecko (например, Mozilla Firefox), и браузер Opera точно следуют в этом вопросе стандарту W3C. А вот браузеры Internet Explorer версий 5 и 6 трактуют ширину и высоту блока по-другому. Они считают, что заданные в определении листинга 2 ширина и высота относятся ко всему блоку в целом, исключая внешние отступы. Таким образом, в IE?5 и IE?6 ширина и высота содержимого блока соответственно будут равны:
Эта разница приводит к краху блочной разметки в устаревших (но еще популярных) версиях IE, если разработчик следовал стандартам. Указанная особенность полностью относится к IE пятых версий и к версии IE6, если в декларации DOCTYPE указан стандарт Transitional (или Frameset). Модель Strict браузер IE6 обрабатывает уже по стандарту W3C. Решение проблемы описано Тантеком Целиком (Tantek Celik)?— сотрудником компании Microsoft?— в статье “Box Model Hack”. С русским переводом этой статьи можно ознакомиться на сайте Webmascon (страница http://www.webmascon.com/topics/coding/38a.asp). Тантек Целик предлагает следующий трюк:
В строке 5 задается ширина блока для IE5 и IE6. Затем в строках 6 и 7 старые браузеры сбиваются с толку правилами CSS2, которые они не понимают. “Умные” браузеры продолжают чтение правил и доходят до строки 8, в которой указан размер по стандарту. Объясним подробнее, что происходит. IE5 и IE6 не понимают свойства voice-family, поэтому игнорируют его. Но когда они натыкаются на закрывающую фигурную скобку в строке 6, то воспринимают ее, как конец всего определения area (это известный баг этих браузеров). То есть IE5 и IE6 не смогут прочитать строку 8, в которой указано значение ширины по стандарту. Браузеры, которые понимают свойство voice-family, видят, что ему назначено неизвестное значение и полностью (вместе с “}”) игнорируют его. Чтобы люди, которые сайты не читают, а слушают, могли услышать и этот блок, в строке 7 задается свойство voice-family:inherit: оно указывает, что параметр голоса наследуется от родительского элемента. Возможно, трюк показался вам сложным, тогда просто запомните инструкцию, не вникая в ее подробности:
С браузером Opera 7 возникает дополнительная проблема. Этот браузер обрабатывает размер блока по стандарту, понимает CSS2, но имеет тот же баг, связанный с разбором выражения “\”}\“”, что и IE6, это не позволяет ему прочитать правильный размер в 8-й строке. Для преодоления этой сложности Тантек Целик предложил использовать дополнительное определение (специально для Opera 7): html>body .area /* Реверанс для Opera 7 */ { width: 400px; /* размер содержимого по стандарту */ } Селектор “ >” является селектором CSS2 (задает дочернюю зависимость). Этот селектор браузеры IE5 и IE6 не понимают, а Opera поддерживает с версии 5. Шаг 2: создаем таблицу стилейОпишем стилевые правила для подготовленного на шаге 1 HTML-кода (см. листинг 1). Листинг 3. Содержимое стилевого файла main.css BODY { margin:0; padding:0; color: black; background: #F6F2E4; } /* Контейнер, содержащий все области страницы */ .container { width: 670px; /* Общая ширина контейнера */ margin: 10px auto; /* Выравнивание по центру */ background: white; } /* Заголовок и логотип */ .title { background: #06DFE1; } /* Меню */ .menu { clear:left; /* Прерывание обтекания */ background: #A7FBC0; } /* Левая колонка */ .left { float: left; /* Плавающий блок */ padding: 10px; padding-left:0; background: white; /* Общая ширина: 220 = 210 + 10 */ width: 220px; /* Подделка для IE5 и IE6 Transitional */ voice-family: "\"}\""; voice-family:inherit; width: 210px; /* Размер содержимого по стандарту */ } HTML>BODY .left /* Реверанс для Opera 7 */ { width: 210px; /* Размер содержимого по стандарту */ } /* Основная колонка */ .content { float: left; /* Плавающий блок */ padding: 10px; padding-right: 0; background: #FFF2A6; /* Общая ширина: 450 = 10 + 440 */ width: 450px; /* подделка для IE5 и IE6 Transitional */ voice-family: "\"}\""; voice-family: inherit; width: 440px; /* Размер содержимого по стандарту */ } HTML>BODY .content /* Реверанс для Opera 7 */ { width: 440px; /* Размер содержимого по стандарту */ } /* Подвал */ .bottom { background: #E5E5E5; } На рис. 5 показано, как страница со стилями, заданными в листинге 3, выглядит на экране браузера.
Рис. 5. Вид страницы в браузере Этот вид полностью соответствует техническому заданию (см. рис. 1). Поясним отдельные фрагменты CSS-кода. Правило margin: 10px auto, заданное для контейнера, задает внешние отступы для блока container в 10 пикселей сверху и снизу. Для внешних отступов слева и справа указано значение auto, — оно и обеспечивает выравнивание блока по центру окна в горизонтальном направлении. Левая и основная колонки представляют собой два плавающих блока (правило float: left). Первый блок “прилипает” слева к границе родительского блока container, второй?— к левой границе первого блока. Остальные элементы должны их “обтекать” справа, но в блоке menu, который в HTML-коде идет следом за основной колонкой, записано правило clear: left, прерывающее обтекание. Заметим, что web-разработчики активно используют плавающие блоки при проектировании дизайна, и приведенный подход не является оригинальным. Значения width для блоков left и content заданы в полном соответствии с описанным выше “обманом” IE и “реверансом” для Opera. Этот макет должен одинаково отображаться во всех браузерах с поддержкой CSS, а в браузерах, которые CSS не поддерживают, страница будет иметь вид, показанный на рис. 3, то есть будет доступна для чтения. В следующей заметке мы начнем наполнять макет осмысленным содержимым. Заметка 7. Проектируем сайт по стандартам (наполняем макет содержимым)Наполним макет, построенный в заметке?6, осмысленным содержимым. Окончательный вид сайта можно смотреть по адресу http://www.botik.ru/~robot/webst. Запаковку сайта (120 Кб) можно скопировать с адреса ftp.botik.ru/rented/robot/univer/webst.zip. Шаг 3: Заголовок, меню, левая колонка и подвалПолучим результат, показанный на рис. 1. Измененный HTML-код (с пропуском основной колонки) представлен в листинге 1. Листинг 1. Измененные фрагменты HTML-кода <!-- Заголовок и логотип --> <DIV class=title> <IMG src="./pic/title.gif" width=343 height=70 border=0 alt="Web по стандартам" title="Web по стандартам"> </DIV> <!-- Меню сайта --> <DIV class=menu> Меню сайта </DIV> <!-- Левая колонка --> <DIV class=left> <IMG src="./pic/index.jpg" width=210 height=158 border=0 alt="Web по стандартам" title="Web по стандартам"> <BLOCKQUOTE> Многие web-дизайнеры настолько привыкли делать свою работу старыми методами, что они просто не заметили, как браузеры изменились. <DIV> Джеффри Зельдман «Web-дизайн по стандартам» </DIV> </BLOCKQUOTE> </DIV> … <!-- Меню сайта --> <DIV class=menu> Меню сайта </DIV> <!-- Подвал --> <DIV class=bottom> © Иван Сидоров <A href="mailto:kurs@robotland.pereslavl.ru" >kurs@robotland.pereslavl.ru</A> </DIV> Отредактированный CSS-код показан в листинге 2. Листинг 2. Отредактированная таблица стилей BODY { margin:0; padding:0; color: black; background: white; } .container { width: 670px; /* Общая ширина контейнера */ margin: 10px auto; /* Выравнивание по центру */ } /* Заголовок и логотип */ .title { padding-bottom: 2px; } /* Меню */ .menu { clear:left; /* Прерывание обтекания для плавающих блоков */ font-family: sans-serif; font-size: 10pt; background: #FFF2A6; padding: 4px; border-bottom: black solid 1px; border-right: black solid 1px; } /* Левая колонка */ .left { float: left; /* Плавающий блок */ padding: 10px; padding-left:0; /* Общая ширина: 220 = 210 + 10 */ width: 220px; /* Подделка для IE5 и IE6 Transitional */ voice-family: "\"}\""; voice-family: inherit; width: 210px; /* Размер содержимого по стандарту */ } HTML>BODY .left /* Реверанс для Opera 7 */ { width: 210px; /* Размер содержимого по стандарту */ } .left BLOCKQUOTE { margin: 0px; padding: 0px; font-size: 0.8em; text-align: right; } .left BLOCKQUOTE DIV { margin-top: 0.5em; font-style: italic; } /* Основная колонка */ .content { float: left; /* Плавающий блок */ padding: 10px; padding-right: 0; /* Общая ширина: 450 = 10 + 440 */ width: 450px; /* Подделка для IE5 и IE6 Transitional */ voice-family: "\"}\""; voice-family: inherit; width: 440px; /* Размер содержимого по стандарту */ } HTML>BODY .content /* Реверанс для Opera 7 */ { width: 440px; /* Размер содержимого по стандарту */ } /* Подвал */ .bottom { font-size: 0.7em; font-family: sans-serif; white-space: nowrap; padding-top: 5px; } Заметьте, для цитаты BLOCKQUOTE в левой колонке мы отказались от традиционных для этого элемента отступов, ввели пониженный размер шрифта и выравнивание по правому краю. Для авторской подписи под цитатой создали небольшой отступ сверху и назначили курсивное начертание. Для шрифта в меню назначен рубленый шрифт фиксированного размера в 10 пунктов. Шаг 4: МенюОформим меню в виде маркированного списка: <!-- Меню сайта --> <DIV class=menu> <UL> <LI>Начало <LI><A href="01.htm">Причины</A> <LI><A href="02.htm">История</A> <LI><A href="03.htm">Плохой код</A> <LI><A href="04.htm">XHTML</A> <LI><A href="05.htm">CSS</A> <LI><A href="06.htm">От автора</A> <LI><A href="07.htm">Ссылки</A> </UL> </DIV> Этот список выводится на страницу, как и положено, в столбик, с отступами и маркерами (см. рис. 2).
Рис. 2. Отображение меню на экране без стилевых указателей Изменим визуальное представление списка при помощи стилевых правил: .menu UL { list-style: none; /* Убираем маркеры */ padding: 0; /* Убираем отступы */ margin: 0; white-space: nowrap; /* Запрещаем перенос строки */ } .menu UL LI { display: inline; /* Последовательный элемент */ padding-right: 10px; /* Отступ справа */ } Контекстный селектор .menu UL относится к элементам UL, которые находятся внутри блока menu, а селектор .menu UL LI относится ко всем элементам LI, для которых родителем является элемент UL, расположенный внутри блока menu. Контекстные определения
Теперь меню записывается в строчку, как и предполагалось (см. рис. 3 на с. 31). Уберем со ссылок подчеркивание и изменим их цвет при помощи следующих определений: A {text-decoration:none;} /* Убираем подчеркивание */ A:link {color:#cc3300;} /* Цвет неотработанной ссылки */ A:active {color:red;} /* Цвет активной ссылки */ A:visited {color: purple;} /* Цвет отработанной ссылки */ A:hover /* Подчеркивание под курсором */ 
Рис. 3. Стилевые указатели
превратили список в строку
{ color:red; text-decoration:underline; } Дизайн ссылок на CSS
Шаг 5: Скрипты для заголовка, меню и подвалаМы неоднократно говорили, зачем дизайнерам нужно отделять визуальное представление web-страниц от их содержания. В первую очередь это нужно для того, чтобы при редизайне не редактировать сотни страниц HTML-кода, а все правки выполнять в одном CSS-файле. Отличная идея, и мы воплощаем ее в процессе построения сайта “Web по стандартам”. Не прикасаясь к HTML-коду, мы можем легко изменить облик сайта. Например, левую колонку расположить справа, изменить размеры областей или вовсе вывести их последовательно друг за другом. Мы можем задать другие цвета для фона, текста, ссылок, а также изменить размер и тип шрифта. Мы можем очень многое! Но вот что подумалось. На каждой странице присутствует электронный адрес автора сайта. Что если он изменится? А если мы захотим добавить еще один пункт в меню или изменить названия и порядок следования старых пунктов? А если, наконец, мы захотим изменить заголовочную картинку сайта, разбив ее на две: отдельно логотип, отдельно заголовок? В каждом из этих случаев придется редактировать все страницы сайта с HTML-кодом. Неприятно. Новая идея: давайте постоянные элементы страниц держать в отдельном файле! Если это получится, то все будет, как и с таблицами стилей: при необходимости нужно будет редактировать только этот файл, а не сотни страниц сайта. Отлично! Идея хорошая, но как ее воплотить? Решение лежит на поверхности — использовать средства JavaScript. Давайте постоянные коды страниц вынесем в виде JavaScript-функций в отдельный JS-файл, а в HTML запишем вызовы этих функций. Итак, за дело! Начнем с самого простого?— с подвала. Перепишем код: <DIV class=bottom> © Иван Сидоров >kurs@robotland.pereslavl.ru</A> </DIV> в виде: <DIV class=bottom> <SCRIPT language=JavaScript> <!-- putBottom(); //--> </SCRIPT> </DIV> То есть вместо Ивана Сидорова и его электронного адреса мы записали обращение к функции putBottom(), а саму функцию опишем в отдельном файле main.js так: // Подвал // ------ function putBottom() { var str = '© Иван Сидоров <A '+ 'href="mailto:kurs@robotland.pereslavl.ru"'+ '>kurs@robotland.pereslavl.ru</A>'; document.write(str); } Строки HTML-кода записываются в переменную str (становятся ее значением), затем содержимое переменной отображается на страницу при помощи функции write объекта document. Для связи страниц с файлом main.js в головной части HTML-кода нужно поместить элемент SCRIPT следующего содержания: <SCRIPT language="JavaScript" src="main.js"> </SCRIPT> Теперь займемся заголовочной частью сайта. Есть маленькая проблема: на всех страницах, кроме главной, логотип должен быть ссылкой на главную — это общепринятое интерфейсное правило. Придется ввести функцию с параметром, то есть вместо кода <DIV class=title> <IMG src="./pic/title.gif" width=343 height=70 border=0 alt="Web по стандартам" title="Web по стандартам"> </DIV> будем использовать код с функцией на JavaScript: <DIV class=title> <SCRIPT language=JavaScript> <!-- putTitle(false); //--> </SCRIPT> </DIV> Параметр функции будет принимать одно из двух логических значений: true, если картинку нужно сделать ссылкой, и false в противном случае. Выше показан код для главной страницы, на всех остальных будем записывать putTitle(true). Функцию putTitle опишем в файле main.js так: // Заголовок сайта // --------------- // Входные параметры: // link=true, если заголовок ссылка function putTitle(link) { var str = '<IMG src="./pic/title.gif" width=343 height=70 border=0'+ ' alt="Web по стандартам"'+ ' title="Web по стандартам">'; if (link) str = '<A href="index.htm"> ' + str + '</A>'; document.write(str); } Наконец, прежний код меню: <DIV class=menu> <UL> <LI>Начало <LI><A href="01.htm">Причины</A> <LI><A href="02.htm">История</A> <LI><A href="03.htm">Плохой код</A> <LI><A href="04.htm">XHTML</A> <LI><A href="05.htm">CSS</A> <LI><A href="06.htm">От автора</A> <LI><A href="07.htm">Ссылки</A> </UL> </DIV> заменим вызовом функции putMenu: <DIV class=menu> <SCRIPT language=JavaScript> <!-- putMenu(0); //--> </SCRIPT> </DIV> У функции putMenu тоже придется вводить параметр. Он будет указывать номер позиции (счет с нуля), которая соответствует текущей странице. Этот пункт не должен быть ссылкой (зачем ссылка на себя?). Построим код для функции так. Сначала зададим позиции меню со ссылками в виде двумерного массива, удобного для редактирования: // Пункты меню (название, ссылка) var itemMenu = new Array ( new Array ( "Начало", "index.htm"), new Array ( "Причины", "01.htm"), new Array ( "История", "02.htm"), new Array ( "Плохой код", "03.htm"), new Array ( "XHTML", "04.htm"), new Array ( "CSS", "05.htm"), new Array ( "От автора", "06.htm"), new Array ( "Ссылки", "07.htm") ); А теперь запишем саму функцию: // Построение меню // Входные параметры: // NotA -- номер позиции, которая не ссылка function putMenu(NotA) { var str = "<UL>"; for (var i = 0; i<itemMenu.length; i++) { str += '<LI>'; if (i != NotA) str += '<A href="' + itemMenu[i][1] + '">'; str += itemMenu[i][0]; if (i != NotA) str += '</A>'; } str += "</UL>"; document.write(str);} Мы выполнили поставленную задачу! Но есть один неприятный момент. Система безопасности (Windows XP SP2 и Vista) выдаст предупреждение о наличии активного содержимого при запуске сайта в Internet Explorer (не будем обсуждать бессмысленность такой защиты). Чтобы разрешить выполнение скрипта, пользователь должен щелкнуть по разрешающей кнопке в окне сообщения или установить разрешение навсегда (что и надо сделать) в настройках браузера (снять галочку “Блокировать активное содержимое” на вкладке Сервис / Свойства обозревателя / Дополнительно). Конечно, неопытный (или напуганный) пользователь может этого и не сделать. Тогда он не увидит на сайте заголовок, меню и подвал. Но такой пользователь много чего не увидит и на других сайтах, ибо большинство из них использовали, используют и будут использовать скриптовые программы. Как же их не использовать? Мы их применили во имя выделения инварианта страниц в отдельный код. Другие сайты используют скрипты ради “оживления” страниц и активной интерактивности. В конце концов либо пользователь научится работать с такими страницами, либо Microsoft научится отделять безопасное от опасного. Шаг 6: Наполнение страниц сайтаВся подготовительная работа выполнена. Осталось заменить “рыбное филе” осмысленным содержимым. Строить страницы очень легко: копируем HTML-макет в новый файл и наполняем содержимым. Например, код файла 01.htm будет иметь вид: <!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"> <META name="description" content="Проектирование сайта по стандартам"> <META name="keywords" content="Web по стандартам, сайтостроение"> <META http-equiv="author" content="Иван Сидоров"> <LINK rel="stylesheet" type="text/css" href="main.css"> <SCRIPT language="JavaScript" src="main.js"></SCRIPT> <TITLE>Причины</TITLE> </HEAD> <BODY> <!-- Контейнер --> <DIV class=container> <!-- Заголовок и логотип --> <DIV class=title> <SCRIPT language=JavaScript> <!-- putTitle(true); //--> </SCRIPT> </DIV> <!-- Меню сайта --> <DIV class=menu> <SCRIPT language=JavaScript> <!-- putMenu(1); //--> </SCRIPT> </DIV> <!-- Левая колонка --> <DIV class=left> <IMG src="./pic/01.jpg" width=210 height=132 border=0 alt="Причины" title="Причины"> <BLOCKQUOTE> В Сети распространяется недуг, не щадящий ни безобидные персональные … <DIV> Джеффри Зельдман «Web-дизайн </DIV> </BLOCKQUOTE> </DIV> <!-- Основная колонка --> <DIV class=content> <H1>Причины</H1> <P> В конце прошлого века и самом начале нынешнего сайтостроители … </DIV> <!-- Меню сайта --> <DIV class=menu> <SCRIPT language=JavaScript> <!-- putMenu(1); //--> </SCRIPT> </DIV> <!-- Подвал --> <DIV class=bottom> <SCRIPT language=JavaScript> <!-- putBottom(); //--> </SCRIPT> </DIV> </DIV> </BODY> </HTML> А вот как эта страница отображается на экране (рис. 4). А так она выглядит в браузере Netscape 4, который не поддерживает CSS (рис. 5). Вид очень достойный, меню работает, текст на странице читается в правильном порядке. Визуальная верстка страниц, выполненная на этом сайте, конечно, не единственно возможная. Ссылки на шаблоны страниц, построенные по стандартам (и на другие полезные источники), приводятся на странице “Ссылки” построенного сайта. Надеюсь, что читатели не забудут загрузить запаковку этого сайта и потрогать руками написанные коды.
Рис. 4. Вид страницы "Причины" в современном браузере
Рис. 5. Вид страницы "Причины" в браузере, который не поддерживает CSS Что дальше? Не пора ли заняться редизайном этого сайта? На меня он уже наводит скуку и изрядно надоел, пока я кропал про него все эти строки. А редизайн — это здорово! Можно кардинально изменить облик всех страниц, не прикасаясь к HTML-коду.
А.. А.. Дуванов,
|
|
|
