Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Использование таблиц в дизайне страницы

↑

⇐ ПредыдущаяСтр 3 из 10Следующая ⇒

Приятное свойство таблиц состоит в том, что если вы захотите, то можете сделать их границы невидимыми. Это позволяет с помощью тага <ТАВLЕ> красиво размещать на странице текст и графику. До сих пор таг <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически такой же свободой использования <пустого пространства>, что и создатели печатных страниц. Таблицы в большей мере, чем что-либо другое, помогают отойти от иерархического размещения текста на Web-страницах.

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

Пример 1.20

<HTML>
<BODY>
<CENTER>
<TABLE CELLPADDING=10 CELLSPACING=0 BORDER=16>
<TR>
<TD ALIGN=CENTER>
<H1>ПЕРФОРАТОР</H1>
<H3>Только сегодня!</H3>
<TABLE BORDER WIDTH=100%>
<TR><TD ALIGN=CENTER><I>Почти бесплатно!</I></TD>
</TR>
</TABLE>
</TD>
</TR >
</TABLE>
</CENTER
> </BODY>
</HTML>

Рис. 1.21. Создание выпуклых элементов

Создание разноцветных таблиц

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

Цветные границы в Netscape Navigator

Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в таге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш таг <ВОDY> будет выглядеть примерно так:

Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ли ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF не слишком сложно устроен, время загрузки страницы лишь немного возрастет. На приведенном ниже примере показано какие, широкие возможности дает использование цвета в HTML и в частности в таблицах.

Пример 1.21

<HTML>
<BODY BACKGROUND="BGR.GIF" BGCOLOR="YELLOW" >
<CENTER>
<TABLE BORDER=3 CELLPADDING=20>
<CAPTION ALIGN=TOP><H2>Как просверлить бетонную стену</H2></CAPTION>
<TR>
<TD BGCOLOR=GRAY>
<TABLE CELLPADDING=10 CELLSPACING=0 BORDER=16>
<TD BGCOLOR=RED ALIGN=CENTER>
<H1>ПЕРФОРАТОР</H1>
<H3>Только сегодня!</H3>
<TABLE BORDER WIDTH=100%>
<TR>
<TD BGCOLOR=AQUA ALIGN=CENTER><I>Почти бесплатно!</I></TD>
</TR>
</TABLE>
</TABLE>
<TD WIDTH=50% BGCOLOR=BROWN ALIGN=CENTER>
<IMG SRC="PERFOR1.GIF" WIDTH=200 HEIGHT=150>
</TD>
</TR>
<TR>
<TD
BGCOLOR=PINK>
<FONT SIZE=6 COLOR=BLUE>От 6 до 20 мм</FONT>
</TD>
<TD BGCOLOR=BLUE>
<FONT SIZE=6 COLOR=PINK>Просверлим все</FONT>
</TD>
</TR>
</TABLE>
</CENTER >
</BODY>
</HTML>

Рис. 1.22. Пример разноцветной таблицы

Фреймы

Что такое фрейм?

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

Для чего можно использовать фреймы

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

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

Как работают фреймы

На первый взгляд, фреймы - это нечто сложное, но их легче понять, если провести аналогию с ячейками таблицы. Расположение фреймов на экране задается почти так же, как ячеек в таблице: таги и атрибуты работают так же, как их табличные родственники. Однако, хотя аналогия между единичным фреймом на странице и ячейкой таблицы полезна, нужно помнить, что есть и отличия. Содержимое ячейки задано в коде HTML-страницы с таблицей. Текст или графика, составляющие содержимое таблицы, фактически вводятся на той же самой странице HTML, что и таг или атрибут, описывающие таблицу. Напротив, экран с фреймами описывается в НТМL-странице, называемой (frameset). Содержимое же фрейма - это отдельная HTML-страница, которая может находиться где угодно - в другом каталоге, на локальном сервере или на удаленном узле где-то в сети. Фреймовая структура определяет только способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL, описывающие местонахождение их данных. Как правило, на странице с фреймовой структурой нет содержимого фреймов. Такая страница обычно невелика - она описывает только кадровую структуру экрана. Когда документ загружается в фрейм, вы можете щелкать мышкой на ссылке в этом документе, что вызовет появление связанных документов в других кадрах, заданных в фреймовой структуре.

Создание простой страницы с фреймами

Создадим, для лучшего понимания, пару простых страничек с фреймами, чтобы стало понятно, каково строение НТМL страницы с фреймами и для чего нужны основные таги и атрибуты.

Построим страницу с двумя фреймами. Зададим слева фрейм оглавления с заголовками статей, а справа поместим страницу с самими статьями. Сделаем так, что когда пользователь щелкает мышкой на ссылке в той части экрана, где находится оглавление, сама статья появляется в правом фрейме. Это основной, наиболее распространенный способ использования фреймов.

Задание фреймовой структуры

Для начала мы должны представить себе общий вид страницы - где и какого размера будут фреймы. Затем можно подумать об их содержании. Ниже приводится код простой фреймовой структуры с использованием тага <FRAMESET>. Обратите внимание: страница с фреймовой структурой не содержит тага <ВОDY>.

Пример 1.22

<HTML>
<HEAD>
<TITLE>Пример фреймов</TITLE>
</HEAD>
<FRAMESET COLS="25%, 75%" <FRAME SRC="A.HTMl">
<FRAME SRC="B.HTMl" NAME="main">
</FRAMESET>
<NOFRAMES>Вы видите эту страницу броузером не поддерживающим фреймы.</NOFRAMES>
</HTML>

Вот и весь код, необходимый для задания фреймовой структуры. Обратите внимание на таг <NOFRAMES>. Через несколько минут мы к нему вернемся. В результате мы получили экран, разделенный на два окна. Левое окно занимает 25 процентов экрана и содержит страницу с названием A.HTML. Окно справа займет 75 процентов и вначале покажет файл B.HTMl. Пока у нас их нет, так что вы увидите страницу с двумя пустыми фреймами. Прежде чем она появится, нам придется пару раз щелкнуть мышкой в ответ на сообщения об ошибках, потому что броузер будет пытаться найти несуществующие страницы. Заметьте, что правую страницу мы назвали <main > (<главная>) с помощью строки:

Это означает, что фрейм под именем MAIN будет содержать страницу B.HTML. Заметим, что поскольку мы не собираемся показывать в левом фрейме никаких страниц, кроме MENU.HTMl, нам не нужно его называть.

Подготовка содержимого фрейма

Теперь давайте загрузим фреймы с содержимым. Зададим страницу MENU.HTML в левом фрейме, где мы собираемся щелкать мышью, переключаясь между двумя страницами в правом фрейме. Файл MENU.HTMl - это обычная НТМL-страница, построенная как оглавление. На самом деле мы можем взять готовую страницу с оглавлением и использовать ее. Имейте в виду, что этот фрейм узкий и высокий, так что страница, которая будет в него загружаться, должна быть соответствующим образом спроектирована. Теперь мы должны определить, где будут появляться другие страницы при щелчке мышкой на ссылке. Поскольку мы хотим, чтобы они отображались в правом фрейме, добавим атрибут ТАRGET= (TARGЕТ="main") в таг ссылки. Это означает, что когда пользователь щелкает на ссылке, вызываемая страница появляется в фрейме main. Мы отображаем все страницы в фрейме main, поэтому давайте добавим атрибут ТАRGЕТ="main" во все таги ссылок в оглавлении. Если мы не определим атрибут ТАRGЕТ, то страница появится там, где мы щелкнули мышкой, - в левом фрейме, что нас не устраивает, хотя в какой-нибудь другой ситуации подобное поведение было бы очень кстати. Например, вы можете добавить ссылку <Другие пункты оглавления>, которая будет просто выводить следующие ссылки. Имеет смысл сделать оглавление подлиннее, чтобы читатели видели как можно больше ссылок. Но сейчас давайте ограничимся простым примером. Ниже приведен код для левого фрейма MENU.HTMl.

Пример 1.23

<HTML>
<HEAD>
<TITLE> Меню</TITLE>
</HEAD>
<BODY>
<H3 ALIGN=CENTER>Компания.</H3>
<HR>
<UL><font color="#400040" size="4">
<LI><a href="HTML-PR2-4.HTMl" ТАRGЕТ="main">Главная</a>
<LI><a href="NEWS.HTMl" ТАRGЕТ="main">Новости</a>
<LI><a href="PRODUCTS.HTMl" ТАRGЕТ="main">Товары</a>
<LI><a href="SERVIS.HTMl" ТАRGЕТ="main">Услуги</a>
<LI><a href="CONTACT.HTMl" ТАRGЕТ="main">Контакты</a>
<LI><a href="SEARCH.HTM" ТАRGЕТ="main">Поиск</a>
</UL>
</font>
</BODY>
</HTML>

Заметим, что здесь ничего не говорится о фреймах. О них все сказано в фреймовой структуре. Единственное, о чем нужно позаботиться на каждой НТМL странице, появляющейся в фрейме, так это о том, где поместить ссылки, активирующие те или иные действия. В нашем примере, в левом фрейме, где находится оглавление, будет располагаться только одна страница. Мы хотим, чтобы при щелчке мышкой в левой странице ссылочный документ появлялся бы в правом фрейме main.

Подготовка фрейма main

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

Пример 1.24

<HTML>
<HEAD>
<TITLE> Главная страница</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Компания.</H1>
<HR>
<H3 ALIGN=LEFT><I>Открытое акционерное общество Компания основанная в 1996 году,
является одним из ведущих поставщиков бытовой электроники в России.</I></H3>
<HR>
<H3>Основными направлениями деятельности Компании являются:
<OL>
<LI>реализация бытовой электроники ведущих фирм мира через сеть магазинов;
<LI>создание сервисных центров по обслуживанию бытовой электроники.</H3>
</OL>
<HR>
<H3><U><FONT COLOR=RED>
Компания ищет агентов по сбыту бытовой электроники.</FONT></U></H3>
<H5 ALIGN=CENTER>Контактная информация</H5>
<UL>
<LI>Telephone (123) 12-34-56
<LI>FAX (123) 12-34-56
<LI>Почтовый адрес 123456 г. Город, ул Лесная, 106
<UL TIPE=CIRCLE>Электронная почта<BR>
<LI>Общая информация: abc@abc.su <LI>Продажи: abc@abc.abc.su
</UL>
</UL>
<BR><BLINK>Copyright</BLINK> © 1997 Компания
</BODY>
</HTML>

Обратите внимание: на приведенных страницах нигде тайно не запрограммирован фрейм. Это значит, что можно без особых проблем конвертировать все документы вашего Web-сервера для использования в фреймовой структуре.

Использование тага <NOFRAMES>

У многих ваших посетителей еще остались броузеры, не умеющие обращаться с фреймами. По этим причинам разумно предоставить доступ к версии ваших основных страниц без фреймов. Если читатель с устаревшим броузером окажется на вашей странице с фреймовой структурой, все, что находится на ней между тагами < NOFRAMES > и </ NOFRAMES >, будет выглядеть отлично - броузер просто проигнорирует фреймы. Вот почему обязательно нужно использовать таги <ВODY></ВОDY>. Возможно, вам придется иначе организовать экран без фреймов.

Можно поместить на страницу с фреймами кнопку No Frames (Без фреймов). Ее назначение очевидно. Такой вариант достаточно разумен и легко осуществим.

На тот случай, если вы неуверенно чувствуете себя при использовании < NOFRAMES >, ниже приведен пример страницы с фреймовой структурой с добавленным в конце разделом < NOFRAMES >.

Пример 1.25

<HTML>
<HEAD>
<TITLE> Пример фрейма</TITLE>
</HEAD>
<FRAMESET COLS="25%, 75%"
<FRAME SRC="HTML-PR5-2.HTMl">
<FRAME SRC="HTML-PR2-3.HTMl" NAME="main">
</FRAMESET>
<NOFRAMES> Вы видите эту страницу броузером не поддерживающим фреймы.
Броузер поддерживающий фреймы не видит этот текст. </NOFRAMES>
</HTML>

Имейте в виду, что поддерживающий фреймы броузер проигнорирует все, что находится между тагами < NOFRAMES > и </ NOFRAMES >. И наоборот, не поддерживающий фреймы броузер проигнорирует все, что находится между тегами <FRAMESET> и </FRAMESET>. Код без фреймов можно поместить и в начало, и в конец страницы.

⇐ Предыдущая 1 234 5 6 7 8 9 10 Следующая ⇒

Познавательные статьи:

Формы дистанционного обучения

Передача мяча двумя руками снизу

Значение правильной осанки для жизнедеятельности человека

Основные ошибки при выполнении передач мяча на месте

Последнее изменение этой страницы: 2016-08-01; просмотров: 211; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.227.72.24 (0.007 с.)