Воскресенье, 2024-05-19, 12:23 PM
Всё ИГиМУ здесь...
24 часа в сутки 7 дней в неделю

Приветствую Вас Гость | RSS
Меню сайта
Разделы новостей
Прикладная математика [3]
История Отечества [1]
Демография [1]
Система интернет [5]
Риторика [1]
Поиск
Наши друзья
Статистика
Rambler's Top100 Получить свой бесплатный сайт в UcoZ
Стань нашим другом

Поставьте нашу кнопку к себе на сайт и станьте нам другом!

Главная » Статьи » 2 КУРС » Система интернет

№3(лаба по системе инет)



Занятие 3



Графические карты ссылок. Таблицы.



  • Карты ссылок. Клиентские и серверные карты ссылок.
  • Таблицы. Теги таблицы. Параметры таблицы.
  • Внешний вид и отображение рамок.
  • Ячейки, слияние ячеек.
  • Размер таблицы и выравнивание.
  • Цвета и фоновые изображения в таблице.
  • 100% табличный дизайн.
  • Задание
    Вернуться в оглавление

    Карты ссылок. Клиентские и серверные карты ссылок.



    Идея создания карты ссылок заключается в том, что одному изображению-ссылке ставится в соответствие несколько ссылок, каждая из которых привязана к некоторой области этого изображения. Такие области называют горячими или активными, а сам технологический прием - графической картой ссылок. Горячие области могут быть прямоугольной, многоугольной и круглой формы. Обычно такие карты используются для создания красочных меню.



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



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


    Графическая карта в клиентском варианте задается с помощью контейнера , с атрибутом NAME для указания имени карты, и вложенных в него тегов (не контейнеров!) для задания горячих областей.


    Атрибуты тега :

    HREF - строка, определяющая адрес ссылки;

    SHAPE - определяет форму области, возможные значения RECT (прямоугольник), POLY (многоугольник) и CIRCLE (окружность).

    COORDS- координаты области. Задаются в пикселах. Это перечень чисел, разделенных запятыми. Весь перечень берется в кавычки. Количество чисел зависит от формы области - для прямоугольника их четыре (координаты правого верхнего и левого нижнего угла), для окружности - два (координаты центра и радиус), а для многоугольника задаются координаты всех вершин. Для каждой точки сначала задается сначала горизонтальная, а потом вертикальная координата.

    TITLE - текстовая строка всплывающей подсказки, появляющаяся после наведения указателя мыши на горячую область.

    TARGET - указывает окно браузера или фрейм, в котором следует открыть документ, заданный в адресной части ссылки.

    NOHREF - не имеет значений и указывает на отсутствие адреса перехода (взаимосключающий с HREF)



    После закрывающего тега следует указать, какое изображение будет служить картой. Это делается при помощи тега и его атрибута USEMAP="имя_карты", где в качестве имени карты приводиться значение атрибута NAME тега .


    Приведем пример графической клиентской карты ссылок.



    Подробно рассматривать серверный вариант не будем. Для применения его в HTML-документе, загружаемом в браузер клиента, используется тег , атрибут HREF которого содержит адрес конфигурационного файла карты ссылок, а внутри него располагается тег изображения, которое служит основой для карты.


    Пример:






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

    Теги таблицы. Параметры таблицы.



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



    - контейнер для всех других тегов таблицы. Атрибуты: ALIGN, BACKGROUND, BGCOLOR, BORDER, BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT, CELLPADDING, CELLSPACING, COLS, DATAPAGESIZE, DATASRC, FRAME, HEIGHT, RULES, WIDTH

    - контейнер для ячеек, составляющих одну строку таблицы. Атрибуты: ALIGN, BGCOLOR, BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT, VALIGN.

    контейнер для текста, являющегося заголовком таблицы и расположенном над ней. Атрибуты: ALIGN, BGCOLOR, VALIGN

    - контейнер для набора строк основной части таблицы. Атрибуты: ALIGN, BGCOLOR, VALIGN

    - контейнер для текста, располагающегося под таблицей (пояснения, примечания). Атрибуты: ALIGN, BGCOLOR, VALIGN

    - контейнер для задания параметров выравнивания столбцов.

    - контейнер для группы столбцов.



    Помимо обязательного контейнера

    - контейнер для данных, содержащихся в ячейке таблицы.Атрибуты: ALIGN, BACKGROUND, BGCOLOR, BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT, COLSPAN, NOWRAP, ROWSPAN, VALIGN,

    - контейнер для данных, содержащихся в ячейке, используемой как заголовок столбца. Атрибуты: ALIGN, BACKGROUND, BGCOLOR, BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT, COLSPAN, NOWRAP, VALIGN

    - контейнер для названия таблицы. Атрибуты: ALIGN, VALIGN

    , остальные теги используются по желанию разработчика. Обычно можно обойтись только контейнерами ячеек и строк ( и
    ).


    Пример простой таблицы можно посмотреть здесь.



    Для управления структурой и внешним видом таблицы, а также выравниванием в ней данных используются атрибуты, приведенные выше, и специальные теги. Пояснения по атрибутам и специальным тегам - в следующих разделах.


    Внешний вид и отображение рамок.



    Толщина рамки определяется атрибутом BORDER. Он принимает в качестве значения число, определяющее толщину внешней рамки таблицы в пикселах. Если он не указан или равен 0, то рамки не отображаются. Если не задать его значение, рамка будет иметь толщину 1. Каждая ячейка имеет свою рамку толщиной 1 (управлять ей нельзя) и отображается, если в теге указан атрибут BORDER с отличным от 0 значением.


    Цвет рамки определяется атрибутами:

    BORDERCOLOR - цвет всей рамки;

    BORDERCOLORDARK - цвет нижней и правой частей внешней рамки таблицы; цвет верхней и левой частей рамки ячейки.

    BORDERCOLORLIGHT - цвет верхней и левой частей внешней рамки таблицы; цвет нижней и правой частей рамки ячейки.

    Два последних атрибута служат для создания эффекта объемности рамки.



    Значения атрибутов цвета задаются шестнадцатеричным числом в соответствии с моделью RGB или именем цвета.



    Атрибут FRAME позволяет отображать внешнюю рамку по частям. Его допустимые значения: BOX (все 4 стороны), ABOVE (только верхнюю часть рамки), BELOW (только нижнюю часть рамки), HSIDES (горизонтальные части), VSIDES (вертикальные части), LHS (левую часть), RHS (правую часть), VOID (не отображать рамку).


    Атрибут RULES позволяет определить отображение внутренних разделительных линий между строками и столбцами таблицы. Его допустимые значения: ALL (все вертикальные и горизонтальные линии), ROWS (только горизонтальные), COLS (только вертикальные), NONE (не отображать разделительные линии).

    Ячейки, слияние ячеек.



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

    CELLSPACING, который принимает целочисленные значения. Если он равен 0, то рамки смежных ячеек сольются в разделительные линии.


    Для задания полей внутри ячеек (сверху, снизу и с боков) используется атрибут тега

    CELLPADDING. Он принимает целочисленные значения, определяющие величину отступа в пикселах. По умолчанию ширина отступов равна 1.


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

    и COLSPAN и ROWSPAN служат для этой цели. Первый из них расширяет ячейки по горизонтали (по столбцам), второй - по вертикали (по строкам). Они принимают целочисленные значения, которые показывают, на сколько ячеек требуется расширить данную ячейку.


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

    Размер таблицы и выравнивание.



    Размеры таблицы регулируются с помощью атрибутов HEIGHT, WIDTH тега . Если эти атрибуты не заданы, браузер автоматически вычислит размер таблицы, отталкиваясь от размера шрифта, размера окна, размера изображений, помещенных в ячейки таблицы и от многих других параметров. Если же один или оба атрибута заданы, браузер воспримет их как рекомендуемые и попытается их выдержать, изменив, например, размеры ячеек или расположение в них текста.


    По спецификации HTML 4.0 атрибутами HEIGHT и WIDTH обладает только тег

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


    Атрибут COLS тега

    используется для указания числа столбцов таблицы. Однако реальное число столбцов определяется по количеству тегов ячеек, поэтому подобное объявление числа столбцов заранее может лишь проинформировать браузер о структуре таблицы прежде, чем он обработает все ее теги и, таким образом, ускорить процесс отображения таблицы.


    По умолчанию таблица выравнивается по левому краю окна браузера. Если требуется иное. можно использовать атрибут ALIGN тега

    . Он принимает значения left, right, center. Если не указывать этот атрибут, то все остальные элементы документа будут располагаться ниже таблицы. Для того. чтобы организовать обтекание таблицы текстом и даже изображениями, нужно использовать этот атрибут со значениями left или right.


    Атрибут ALIGN можно использовать и в других тегах для горизонтального выравнивания текста. Это удобно в случае, если требуется различное выравнивание в разных группах ячеек таблицы, например - заголовки столбцов выравниваются по центру, а все остальные ячейки - влево.


    Для вертикального выравнивания используется атрибут VALIGN, который может принимать значения baseline, bottom, middle, top - по базисной линии, по нижнему краю, по середине и по верхнему краю соответственно. Этот атрибут может быть применен к любым тегам, относящимся к таблицам, кроме непосредственно тега
    .


    Для задания параметров выравнивания группы столбцов используются контейнер

    и простой тег . Они записываются после тега
    и перед первым тегом . Они имеют следующие атрибуты:

    ALIGN - горизонтальное left, right, center;

    SPAN - количество смежных столбцов, имеющих одинаковые параметры выравнивания, значение по умолчанию равно 1;

    VALIGN - вертикальное вырвнивание содержимого ячеек, принимает значения baseline, bottom, middle, top;

    WIDTH - ширина столбца.


    Параметры таблицы, установленные с помощью

    и могут быть изменены с помощью атрибутов выравнивания в тегах ,
    , .

    Цвета и фоновые изображения в таблице.



    Для задания цвета фона всей таблицы или ее отдельных ячеек используют атрибут BGCOLOR. Его значение задается шестнадцатеричным числом (по системе RGB) или именем цвета. См. таблицу цветов и пример использования этого атрибута.



    Для того, чтобы сделать фоном таблицы или ячейки графическое изображение, используется атрибут BACKGROUND, принимающий в качестве значения URL-адрес графического изображения. Изображение, используемое в качестве фона, не масштабируется в соответствии с размерами таблицы (ячейки). Если изображение больше элемента (таблицы, ячейки), то будет видна лишь часть изображения, а если меньше - то изображение будет повторено несколько раз.


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



    Если в ячейке таблицы (в ее контейнерном теге) разместить изображение, использовав тег , то такое изображение будетпомещено в ячейке в единственном экземпляре и своем естественном размере )если не заданы значения соответствующих атрибутов для изменения размера). Размер ячейки при этом будет взят такой, чтобы изображение поместилось в нем целиком (размер таблицы при этом может существенно измениться).


    100% табличный дизайн.



    Табличным дизайном страницы называют такое форматирование, при котором вся информация, имеющаяся на данной странице размещается в ячейках таблицы. В этом случае теги контейнера располагаются сразу после (открывающий) и непосредственно перед (закрывающий) соответствующими тегами контейнера .


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



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



    Пример табличного дизайна приведен здесь. Обратите внимание на вложенную таблицу.


    Задание




    1. Создайте клиентскую карту ссылок, такую, чтобы с нее можно было попасть на главную страницу и все страницы разделов. Графическую ссылку на нее установите на главной странице на видном месте.
    2. Создайте новый документ, установив ссылки на него с каждой из 4-х страниц разделов. В самом документе предусмотрите обратные ссылки и ссылку на главную.
    3. Создайте на новой странице таблицу сложной формы (не менее 3-х групп слитых ячеек). У таблицы должен быть заголовок, текст над ней и примечания под ней.
    4. Задайте размер таблицы хотя бы по одному измерению. Задайте размер одной или нескольких ячеек. Посмотрите, как это влияет на таблицу в целом.
    5. Заполните таблицу графической и текстовой информацией по тематике вашей работы. Задайте рамки, состоящие из двух частей разных цветов для всей таблицы и явно задайте расстояние между ячейками и поля внутри ячеек.
    6. Для текстовой информации используйте все известные вам способы выравнивания. Заголовки столбцов обязательно выравнивайте по центру.
    7. Установите фоновый цвет для всей таблицы и два фоновых изображения для двух выбранных вами ячеек.
    8. Переформатируйте все четыре страницы разделов, взяв за основу табличную разметку. Добейтесь аккуратного и удобочитаемого расположения текста и элементов. Посмотрите, как ведет себя страница при изменении размера окна браузера.

    Вернуться в начало документа

    Категория: Система интернет | Добавил: Грейпс (2007-04-21) | Автор: Грр
    Просмотров: 853 | Рейтинг: 0.0/0

    Форма входа
    Время
    Опрос
    Как вам ваша группа???
    Всего ответов: 32
    Радио

    Нажми на картинкку, выбери и слушай!
    Погода

    Copyright ИГиМУ © 2024Используются технологии uCoz