|  |
Web-дизайн |  | |
| Основы Web-технологий | Введение в Web-дизайн | Первая Web-страница | Графика web-дизайне | Специальные возможности HTML | Каскадные таблицы стилей | Полезные приемы в Web-дизайне | Обслуживание Web-сайта | Программирование на JavaScript и VBScript | Раскрутка сайта | Деньги и интернет | Партнерские программы | Web-софт | Поисковая оптимизация | Хостинг |
Представление таблиц, элементы которых занимают несколько строк или столбцов Иногда в html-документе необходимо представить
таблицу, некоторые ячейки которой занимают несколько строк или столбцов по вертикали или горизонтали. Для этого используются атрибуты COLSPAN и ROWSPAN, варьируя параметрами которых можно добиться желаемого
результата. В качестве примера применения такой таблицы предлагаю рассмотреть код HTML, представляющий на экране правила спряжения английского глагола to be в настоящем времени:
-
<TABLE BORDER="1" ALIGN="CENTER" CELLPADDING-"3" WIDTH="252"> -
<САРТION>Спряжение
глагола <EM>to be:</EM></CAPTION> -
<TR> -
<TH WIDTH="34"> </TH>
-
<TH иттн="198">3начение <EM>to be:</EM></TH> -
</TR> -
<TR> -
<TH WIDTH="34">I</TH> -
<TD ALIGN="CENTER"
WIDTH="198">am</TD> -
</TR> -
<TR> -
<TH WIDTH="34">You</TH> -
<TD ALIGN="CENTER" WIDTH="198" ROWSPAN="3">are</TD></TR><TR>
-
<TH WIDTH="34">We</TH> -
</TR> -
<TR> -
<TH WIDTH="34">They</TH> -
</TR> -
<TR> -
<TH WIDTH="34">He</TH> -
<TD ALIGN="CENTER"
WIDTH="198" ROWSPAN="3">is</TD> -
</TR> -
<TR> -
<TH WIDTH="34">She</TH> -
</TR> -
<TR>
-
<TH WIDTH="34">It</TH> -
</TR> -
</TABLE> -
Команды, управляющие
созданием и отображением таблиц, допускают вложение одного тега <TABLE> внутрь другого. Эта особенность языка HTML используется для представления на web-странице так называемых вложенных таблиц,пример
описания которых вы можете видеть ниже: -
<TABLE BORDER="1" CELLPADDING="6" WIOTH="600"> -
<САРТION>Спряжение стандартного глагола <EM>to invite:</EM></CAPTION> -
<TR> -
<TH МЮТН="300">Перевод</ТН> -
<TH WIDTH="300">Future</TH> -
<TH WIDTH="300">Future-in-the-Past</TH> -
</TR> -
<TR>
-
<TD COLSPAN="3" WIDTH="527"> -
<TABLE BORDER="1" CELLPADDING="0"
CELLSPACING="0" WIDTH="588"> -
<TR> -
<TD WIDTH="194">Я
(мы) приглашу(-сим)</ТD> -
<TD WIDTH="194">I (we) shall invite</TD> -
<TD
WIOTH="194">I (we) should invite</TD> -
</TR> -
<TR> -
<TD WIDTH="194">OH (вы. они) пригласит (-ите. -ят)</ТD> -
<TD WIDTH="194">He (you. they)
will invite</TD> -
<TD WIDTH="194">He (you. they) would invite</TD> -
</TR>
-
</TABLE> -
</TD> -
</TR> -
</TABLE> Из приведенного отрывка кода HTML ясно, что для создания отображаемой на экране пользователя таблицы спряжения
английского глагола to invite использованы две таблицы, вложенные одна в другую. Первая задает форматирование ячеек для заголовков таблицы, а вторая — столбцы со значениями спрягаемого глагола.
В приведенном примере для разметки внешней таблицы использован атрибутCELLPADDING со значением 6, прежде всего, для того, чтобы вам было легче визуально отличить внешнюю таблицу от внутренней. Если для
обеих таблиц установить нулевое значение отступов и толщины рамок, таблицы слипаются в окне броузера, что позволяет создать невидимую пользователю конструкцию спроизвольным разбиением. Этот прием часто
используется для создания прозрачных таблиц, играющих роль верстальной сетки для размещения элементов web-страницы. Фреймы Директивы создания фреймов не входят
в официальную спецификацию HTML 3.2,поскольку их активное использование началось с появлением языка разметки гипертекста версии 4.0. Однако здесь я сделаю краткий экскурс в теорию использования фреймов,
так как полагаю, что данный раздел может заинтересовать ряд начинающих web-дизайнеров, уже сталкивавшихся с этим способом представления web-страниц. Фреймы — способ организации структуры сайта,
при котором web-страницадробится на ряд отдельных составляющих и собирается в главном окне броузера из нескольких независимых или вложенных окон. При таком представлении каждый компонент страницы является
самостоятельным документом HTML и встраивается в ту область экрана, которая задается директивой<FRAMESET>. Данный способ применяется в основном для дробления web-страницы на логические разделы: например,
в верхнем фрейме выводится рекламный баннер, в левом — элементы навигации, в правом — основной текст страницы, в нижнем — сообщение об авторских правах и адрес электронной почты разработчика ресурса. При
этом нажатие на любую из навигационных кнопок приводит к изменению содержимого лишь одного окна, все остальные фреймы остаются без изменений. Если содержимое фрейма не умещается в видимые границы окна,
броузер отображает полосы прокрутки. В случае применения фреймов индексный html-файл (index.html) несколько отличается от обычного. Как известно, стандартный документ HTML имеет два логических
раздела: раздел заголовков <HEAD> и раздел <BODY>, определяющий тело документа. При использовании фреймов раздел <BOOY> заменяется на раздел <FRAMESET>. Все остальные документы,
отображаемые в отдельных фреймах,имеют стандартное представление. -
В общем виде синтаксис записи директивы <FRAMESET> выглядит следующим образом:
-
<FRAMESET ROWS="значение" COLS="значение" FRAMEBORDER="значение" -
FRAMESPACING="значение">
-
<FRAME МАМЕ="имя" TARGET="значение" SCROLLING="yes. no или auto" SRC="URL" -
FRAMEBORDER="значение" NORESIZE> -
<NOFRAMES> -
<BODY> -
Текст, отображаемый в броузерах, не поддерживающих фреймы. -
</BODY> -
</NOFRAMES> -
</FRAMESET> Очевидно, что общая структура представления фреймов во многом
схожа с представлением таблиц: тег <FRAMESET>, задающий параметры отображения всех фреймов в документе, содержит необходимое количество тегов <FRAME>, описывающих каждый отдельный фрейм. Причем
некоторые атрибуты, применяемые совместно с командой <FRAME>, могут отменять параметры, заданные в атрибутах команды <FRAMESET>. Как и в случае с <ТАВ1Е>, директива описания фреймов допускает
вложение одного элемента <FRAMESET> в другой. Атрибут тега <FRAMESET> FRAMEBORDER определяет, надо ли отображать на экране пользователя границы фреймов. Параметр этого атрибута может
принимать одно из двух значений: 1, если разделители нужны (используется по умолчанию), или 0, если программист желает сделать их невидимыми. Атрибут FRAMESPACING указывает на толщину разделителей в пикселах.
Атрибуты ROWS и COLS определяют соответственно количество горизонтальных и вертикальных отрезков во фреймовом наборе. Параметры атрибутов ROWS и COLS можно задавать различными способами: в пикселах,
процентах и в относительных длинах. Если атрибут ROWS в теге<FRAMESET> не указан, каждый столбец будет занимать всю длину страницы, если не указан атрибут COLS, каждая строка растянется на
всю видимую ширину экрана. Параметры фреймов задаются слева направо для горизонтальных элементов и сверху вниз для вертикальных. Например, запись <FRAMESET COLS="50*.50Х"> разделит страницу
вертикально на две равные части, запись <FRAMESETROWS="250. 10%. *"> задаст горизонтальное разделение страницы на три участка: первый — с фиксированной высотой 250 пикселов, второй — высотой
в 10 % от оставшегося пространства, третий же займет все пространство, которое останется свободным после создания первых двух окон. В этом примере при задании параметров атрибута ROWS были использованы
все три варианта определения отрезков фреймового набора: в пикселах (250 точек), процентах (10 %) и в относительных длинах (включение символа *). Разделения web-страницы на сетку 2x3 ячейки можно добиться,
например, применением следующих значений атрибутов директивы <FRAMESET>: <FRAMESET ROWS="40%. 60%" COLS="33%. 34%. *">. Команда <FRAME> может включать
следующие атрибуты: NAME, в котором задается уникальное имя для данного конкретного фрейма, набранное с использованием символов латинского алфавита, TARGET, содержащий информацию о целевом фрейме (рекомендуется
использовать значение по умолчанию — "contents"), SCROLLING, определяющий наличие ("yes"), отсутствие ("по") или отображение по мере необходимости ("auto") полос
прокрутки в текущем фрейме, SRC, в котором указывается адрес открываемой в данном фрейме страницы, FRAMEBORDER, правила записи и назначение которого аналогичны таковым в составе тега <FRAMESET>, и,
наконец, атрибут NORESIZE, наличие которого устанавливает запрет на изменение пользователем размеров окна фрейма. Тег <FRAME> может также содержать ряд других необязательных атрибутов, таких как MARGINWIDTH,
определяющий размер в пикселах пустого пространства, оставляемого во фрейме в качестве правого и левого полей, и MARGIN-HEIGHT, задающий верхний и нижний отступы. Директива <NOFRAMES>, включающая
вложенные теги <BODY> и </BODY>, позволяет записать произвольное количество html-кода, который будет динамически преобразован в самостоятельную web-страницу в случае, если клиентский броузер
не поддерживает фреймы. Представление гиперссылок для страниц, использующих фреймы, также требует определенной модификации, а именно — обязательного использования атрибута TARGET:
<А HREF="URL" ТАР6ЕТ="_значение">Текст или элемент IMG</A> Допустимые значения атрибута TARGET для применения тега <А> во фреймовых наборах следующие:
_self — документ, с которым установлена гиперсвязь, открывается в текущем фрейме; _parent — отображение осуществляется в родительском окне фреймов, независимо от того, какие параметры указаны в
директиве <FRAMESET>; _top — при активизации гиперссылки фреймы перестают отображаться, а содержимое целевого документа выводится в отдельном окне. Если вместо значения атрибута TARGET
подставить имя фрейма, заданное вами ранее в качестве параметра атрибута NAME тега <FRAME>, при активизации ссылки целевой документ загружается в окне с указанным именем. Ярким примером использования
директивы <FRAMESET> может служить приведенный ниже листинг индексного документа HTML, использующего фреймы: -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4:0 Transitional//EN"> -
<HTML> -
<HEAD> -
<TITLE>FRAMESET EXAMPLE PAGE</TITLE> -
</HEAD> -
<FRAMESET FRAMESPACING="0"
rows="64.*.64" FRAMEBORDER="0"> -
<FRAME NAME="top" SCROLLING="no" TARGET="contents" SRC="page_l.htm">
-
<FRAMESET COLS="150.*"> -
<FRAME NAME="contents" SRC="page_2.htm"
SCROLLING="auto"> -
<FRAME NAME="main" SRC="page_3.htm" SCROLLING="auto"> -
</FRAMESET> -
<FRAME NAME="bottom" SCROLLING="no" NORESIZE SRO"page_4.htm"> -
<NOFRAMES> -
<BODY> -
<P ALIGN="CENTER">Этa
страница содержит фреймы, но ваш броузер не поддерживает их отображение.</Р> -
</BODY> -
</NOFRAME> -
</FRAMESET> -
</HTML>
Обратите внимание на то, что определитель DOCTYPE в данном случае содержит указание на версию языка HTML 4.O. Это необходимо, поскольку ссылка на HTML 3.2, не позволяющий использовать фреймы, может
вызвать в некоторых броузерах ошибку при трансляции кода. На первый взгляд фреймы кажутся весьма привлекательными с точки зрения удобства обслуживания сайта: например, для того чтобы изменить состав
навигационных элементов, нет необходимости вносить изменения во все страницы вашего ресурса, достаточно лишь подправить документ, отображающийся в соответствующем фрейме. Однако на практике оказывается,
что объективных недостатков у данной формы представления web-страниц значительно больше, чем достоинств. Во-первых, фреймы весьма сложны в разработке и настройке: достаточно трудно оптимизировать
такую страницу для корректного отображения в разных версиях броузеров со всеми допустимыми экранными разрешениями. В некоторых фреймах возможно периодическое появление полос прокрутки, затрудняющих просмотр
документа, а жесткий запрет на отображение средств скроллинга может повлечь за собой исчезновение части отображаемых во фреймах страниц заграницей видимой области экрана. Во-вторых, фреймы распознаются
далеко не всеми броузерами, в полной мере их поддерживают лишь современные версии Microsoft Internet Explorer и Netscape Navigator. Излишне говорить, что во Всемирной сети достаточно много пользователей,
на компьютерах которых установлены старые броузеры. В-третьих, применение фреймов существенно затрудняет управление навигацией сайта при помощи встроенных в броузер кнопок Вперед и Назад, поскольку они
рассчитаны, в первую очередь, на работу с документами размером в целый экран, но никак не с отдельными окнами, в которые загружено множество документов. Нажатие на одну из этих кнопок иногда может привести
к совершенно непредсказуемым последствиям. И последним, самым существенным недостатком фреймов является то, что использующие их страницы не всегда корректно индексируются поисковыми серверами. Проблема
заключается в том, что большинство поисковых машин индексирует не страницу, а текст. Предположим, посетитель поискового сервера ищет ресурсы, в тексте которых встречается словосочетание web-дизайн. Такая
фраза действительно содержится в одном из документов вашего сайта, загружающемся, допустим, в правом окне фреймового набора. Ссылка, которую включит в свой файл отчета поисковый сервер, приведет пользователя
именно на эту страницу, но не на индексный документ, обеспечивающий разбиение сайта на фреймы. Таким образом, страница, обычно появляющаяся в собственном окне, отобразится на экране клиентской машины во
весь экран, при этом элементы навигации, сообщение об авторских правах и заголовок ресурса будут недоступны. Из всего сказанного напрашивается простой и вполне очевидный вывод: использовать фреймы
лучше всего только тогда, когда это действительно необходимо, например, при создании web-чата или интерактивной доски объявлений. Во всех остальных случаях от их применения лучше отказаться.
Элемент <МАР> В четвертом уроке я уже упоминал о том, что язык разметки гипертекста позволяет создавать графические элементы, выполняющие роль карт,
определенные участки которых могут реагировать на нажатие кнопок мыши и отправлять пользователя к соответствующим документам или файловым объектам сайта потому же принципу, что и гиперссылки. Рассмотрим
правила создания графических карт при помощи команды <МАР>. Элементы <МАР> динамически связаны с изображениями, вызываемыми директивой <IMG>, и в общем виде описываются следующим
образом: <МАР МАМЕ="имя карты"> <AREA HREF="URL" SНАРЕ="параметр" COORDS="x1. y1. x2. y2" АLТ="альтернативный текст">
</МАР> Атрибут NAME тега <МАР> определяет уникальное имя карты, записываемое латинскими символами. Следует учитывать, что при задании имени карты важно соблюдение регистра,
поскольку интерпретатор броузера различает в данной команде строчное и заглавное написание. Тег <AREA> определяет непосредственно активную область изображения. Атрибут HREF, как и при использовании
его совместно с тегом <А>, указывает на адрес документа, вызываемого при нажатии кнопки мыши над данным участком изображения. Атрибут ALT определяет альтернативный текст, который выводится на экран
в специальномвсплывающем прямоугольнике в случае, если пользователь подержит курсор мыши над активным участком карты несколько секунд. Атрибут SHAPE управляет формой активной области и может принимать одно
из трех значений: RECT — прямоугольник, CIRCLE — круг или POLY — многоугольник. И наконец, атрибут COORDS позволяет определить относительные координаты вершин активной области. Возможные значения данного
атрибута приведены в табл. 6.1. Таблица 6.1. Значения атрибута COORDS | Значение SHAPE | Форма активной
области | Синтаксис записи COORDS | Значения параметров COORDS | | SHAPE=RECT
SHAPE=CIRCLE SHAPE=POLY | Прямоугольник Круг Многоугольник | COORDS="xl,yl,х2,у2"
COORDS="X,Y,R" COORDS="x1, y1, x2, y2, x3, y3, ... xN, yN" | x1 и y1 задают координаты левого
верхнего угла фигуры, х2и у2 — правого нижнего X и Y — координаты центра окружности, R — ее радиус в пикселах x1, y1 ... xN, yN -координаты вершин
многоугольника | Значения координат активной области отсчитываются в пикселах по длине и ширине картинки от левого верхнего угла изображения, принимаемого за точку с координатами
0,0. Иными словами, значение х возрастает справа налево, а значение у — сверху вниз. Координаты х и у могут быть также заданы в процентах от реального размера изображения, например: SHAPE="RECT"
COORDS="0.0.50Я.50Ж". Необходимо помнить, что если несколько активных областей одного изображения перекрывают друг друга, область, описанная тегом <AREA>первой, имеет приоритет.
При составлении графической карты можно использовать также необязательный атрибут NOHREF, определяющий неактивные участки карты. На практике он используется довольно редко и, как правило, для того, чтобы
вырезать в активном участке изображения неактивную дыру. Вот несколько простых примеров создания активных областей: SHAPE=RECT COORDS="0, 0, 20, 20" — создает прямоугольник размером
20x20 пикселов в левом верхнем углу изображения; SHAPE=CIRCLE COORDS="30, 30, 10" создает круг с центром, расположенном в точке (30, 30) и радиусом 10 пикселов; SHAPE=POLY COORDS="10,
60, 15, 30, 30, 60" создает треугольник с координатами вершин (10, 60), (15, 30) и (30, 60). Теперь, когда графическая карта описана вами при помощи тега <МАР>, можно интегрировать ее
в web-страницу, подготовив соответствующее изображение влюбом графическом редакторе и вызвав его уже знакомой вам командой <IMG> с атрибутом USEMAP: <IMG SRC="URL" WIDTH="ширина"
HEIGHT-''высота" BORDER="0" USЕМАР="#имя_карты"> Обратите внимание на то, что имя карты, заданное атрибутом NAME тега <МАР>,предваряется в атрибуте USEMAP тега
<IMG> символом #. Все остальные атрибуты данной директивы записываются так,же, как обычно. Наглядным примером реализации простой графической карты может служить следующий отрывок html-кода:
<IMG SRC="/images/bar.gif" BORDER=0 USEMAP="#ny_map"> <MAP NAME="my_map"> <AREA HREF="help.html" АLT="Полный список разделов
сайта" SHAPE=RECT COORDS="0. 0. 118. 28"> <AREA HREF="about.html" ALT="0 нашей компании" SHAPE=RECT COORDS="184. 0. 276. 28">
<AREA HREF="address.html" АLТ="06ратная связь" SHAPE=RECT COORDS="118. 0, 184. 28"> <AREA HREF="guestbook.htmT' ALT="Haшa гостевая
книга" SHAPE=RECT COORDS="276, 0. 373. 28"> </MAP> Что же, теперь можно смело сказать, что вы владеете основным запасом команд HTML, необходимым для создания
собственного web-проекта средней степени сложности. Описание и правила применения других тегов языка разметки гипертекста приведены в приложении 2, которым вы можете воспользоваться по мере необходимости.
Практикум Для того чтобы придать вашей страничке более или менее профессиональный внешний вид, давайте создадим невидимую для пользователя таблицу,
в которой разместим декоративные графические элементы, выполняющие роль как заголовка документа, так и, например, навигационных кнопок. В первую очередь необходимо представить себе общий дизайн и взаимное
расположение будущих графических объектов. Вооружившись карандашом, линейкой и бумагой, набросайте эскиз вашего сайта, визуально примерив к нему еще не созданную вами таблицу. Теперь, руководствуясь
уже готовым эскизом, прорисуйте в редакторе векторной графики, например в Corel Draw, основные графические элементы: заголовок странички, внешний вид навигационных кнопок, разделительные линии и кнопку,
которая станет впоследствии ссылкой на адрес электронной почты. Импортируйте получившуюся картинку в редактор растровой графики, например Adobe Photoshop, разрежьте ее на семь частей (заголовок с
баннером, разделительная линия, четыре навигационные кнопки и изображение с надписью E-mail) с помощью встроенной функции редактора Изображение > Создать копию и от кадрируйте рисунок с помощью инструмента
Рамка. Теперь сохраните все получившиеся файлы в формате GIF89a в директории C:\MySite\Images,задав для белого фона ваших изображений свойство прозрачности, и оптимизируйте их по объему с применением специального
программного обеспечения, которое вы изучили в пятом уроке, либо с использованием встроенного оптимизатора Adobe Photoshop. Настало время внести соответствующие изменения в html-документы, составляющие
ваш сайт. Откройте Блокнот и создайте пустой текстовый файл с названием shablon.html —он станет вашим шаблоном, в который вы впоследствии сможете помещать любое информационное содержимое. Перенесите
туда основной код созданного вами ранее файла index.html, удалив из него все информационное наполнение: -
<! DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 3.2//EN"><HTML> -
<HEAD> -
<TITLE>Moя домашняя страничка</TITLE>
-
</HEAD> -
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF"
VLINK="#800080" -
ALINK="#FF0000" BACKGROUND="Images\background.gi f"> -
</BODY>
-
</HTML> -
Теперь запишите между тегами <BODY> и </BODY> код первичной таблицы, в
которой вы затем разместите все необходимые элементы: -
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="640">
-
<TR> -
<!-Сюда вставляется заголовок странички --> -
<TD COLSPAN="2" WIDTH="400"> -
</TD> -
</TR> -
<TR> -
<!-Пустая строка для разделительной линии --> -
<TD
COLSPAN="2" WIDTH="400"> -
</TD> -
</TD> -
<TR> -
<!-Здесь размещается навигация --> -
<TD WIDTH="82"
VALIGN="TOP" ALIGN="CENTER"> -
</TD> -
<!-Основное поле для текста -->
-
<TD WIDTH="318" BGCOLOR="#FFFFFF" VALIGN="TOP"> -
<P ALIGN="JUSTIFY">
-
</P> -
</TD> -
</TR> -
<TR> -
<!-Еще одна пустая строка для разделительной линии --> -
<TD COLSPAN="2" WIDTH="400"> -
</TD> -
</TR> -
<TR> -
<!-E-mail --> -
<TD WIDTH="82"></TD>
-
<!-Copyright --> -
<TD WIDTH="318"></TD> -
</TR> -
</TABLE> Обратите внимание на то, что для ячейки, определяющей
текстовое поле, при помощи атрибута BGCOLOR задан белый фоновый цвет. Поскольку параметр BORDER данной таблицы установлен нулевым, вы не увидите ее в окне броузера, однако ее общий вид выглядел бы на экране
компьютера В ячейку таблицы, предназначенную для размещения кнопок навигации, вставьте другую прозрачную таблицу с одним-единственным столбцом шириной чуть меньше ширины данной ячейки и с количеством
строк, большим количества имеющихся у вас кнопок в два раза: -
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="80">
-
<TR> -
<TD></TD> -
</TR>
-
<TR> -
<TD HEIGHT="20"></TD> -
</TR> -
<TR> -
<TD></TD> -
</TR> -
<TR> -
<TD HEIGHT="20"></TD> -
</TR> -
<TR> -
<TD></TD> -
</TR> -
<TR> -
<TD HEIGHT="20"></TD> -
</TR> -
<TR> -
<TD></TD> -
</TR> -
<TR> -
<TD HEIGHT="20"></TD>
-
</TR> -
</TABLE> Кнопки навигации
будем размещать в таблице через строку. Пустые ячейки между картинками, высота которых принята равной двадцати пикселам, будут играть роль своеобразных разделителей, предназначенных для того, чтобы кнопки
не сливались друг с другом по вертикали. Теперь запустите программу PictureDiser и разрежьте ваш заголовок в соответствии с эскизом таким образом, чтобы рекламный баннер отображался в отдельной
ячейке таблицы — туда вы чуть позже включите код динамической загрузки рекламных изображений из баннерообменной сети. Назначьте в качестве директории, в которую будут помещены фрагменты разрезанного заголовка,папку
C:\MySite\Images, затем откройте автоматически сгенерированный программой Picture Diser html-документ в текстовом редакторе и скопируйте код созданной им невидимой таблицы в соответствующую ячейку таблицы
файла shablon.html. Подправьте пути к фрагментам заголовка, если это необходимо. Осталось только разместить в соответствующих ячейках подготовленной вами таблицы ссылки на все недостающие графические элементы,
связать кнопки навигации гиперссылками с соответствующими документами сайта, назначить изображению конверта гиперсвязь с вашим адресом электронной почты и сохранить файл на диске. В ячейке таблицы,
помеченной вами как основное поле для текста, разместите информационное содержимое вашего документа подобно тому, как мы это делали в предыдущих уроках. Теперь можно повторно сохранить получившийся файл
на диске, но уже под именем index.html. Страничка готова. Другие документы сайта модифицируются из файла shablon.html по аналогичной схеме -
Обсудить
в форуме...>>>> | |  | |  |
| |
