Лекция№17

Заказать работу

Списки и рамки в HTML

. Списки

Иногда при создании веб-страниц бывает полезно как-то упорядочить представленную на них информацию. Традиционно для этого применяют списки. В качестве первого примера давайте рассмотрим веб-страницу гипотетической фирмы «Лентяй». Допустим, мы сначала хотим перечислить предоставляемые услуги, а затем указать последовательность действий, необходимых для их заказа.

Маркированные и нумерованные списки

Перечисление услуг хорошо смотрится в виде маркированного списка. Для его организации применяется тег (Unorerer List). Все, что находится между ним и его закрывающим тегом (), считается маркированным списком. Каждый элемент списка должен быть при этом обозначен тегом . Этот тег можно употреблять без закрывающего (хотя можно и с ним). То есть, можно написать:

Вкручивание электрических лампочек

ИЛИ

Вкручивание электрических лампочек

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

Что касается перечисления порядка действий для заказа, то его целесообразно организовать в виде нумерованного списка. Для этого служит тег ,(Orderer List) а элементы списка также обозначаются тегом . И нумерованные, и маркированные списки в большинстве броузеров выделяются небольшим отступом.

Итак, давайте посмотрим, как может выглядеть эта страничка. (Элемент выравнивания DIV – парный, SMALL – уменьшает шрифт)

Фирма "ЛЕНТЯЙ"

Фирма «ЛЕНТЯЙ»

Наша фирма предоставляет следующие услуги

Вкручивание электрических лампочек

Подметание пола

Вынесение мусора из квартиры

Мытье посуды

Дефрагментация жестких дисков

Чтобы воспользоваться нашими услугами,следует:

Зарегистрироваться (здесь)

Заполнить форму заказа (здесь)

Получив письмо с паролем, послать пустой ответ

Заполнить форму-подтверждение заказа

(Здесь)

Приготовить деньги для оплаты услуг

См. файл:spiski1.html

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

Другой вопрос, что будет, если код написан некорректно: например, указаны теги без тега списка или , или в списке есть элементы без тега ?

Вообще говоря, такого допускать не следует, так как некоторые «строгие» броузеры в этом случае не будут отображать практически ничего. Большинство популярных броузеров, правда, попытаются угодить даже автору странички, написавшему такой код. Например, Internet Explorer 5, если встретит теги без тега начала списка, интерпретирует их как маркированный список, хотя и не будет выделять его отступом, а не помеченные тегом элементы списка оставит без маркера. Однако, повторяю, это из ряда вон выходящие случаи.

Благодаря тому, что списки отображаются с отступом, легко можно организовывать вложенные списки с помощью тех же тегов. Для этого надо просто начать новый список внутри уже начатого. Схема расположения тегов списка при этом получится примерно такая:

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

Далее, при вложении нескольких маркированных списков хочется каждый из них обозначить своим типом маркера. Некоторые броузеры так и делают по умолчанию. Например, Internet Explorer элементы первого списка из серии вложенных обозначает закрашенным кружком, элементы вто­рого — незакрашенным кружком, а элементы всех следующих — квадратиком. Однако, во-первых, так поступают не все броузеры, а во-вторых, нам может захотеться изменить порядок маркеров. Для явного определения типа маркера в теге следует установить атрибут TYPE=. У него могут быть три значения: "disc", "square" и "circle", что означает, соответственно, закрашенный кружок, квадратик и незакрашенный кружок.

В теге нумерованного списка можно установить атрибут TYPE= для определения типа нумерации. Если не указано ничего или установлено значение TYPE=”1”, то нумерация происходит обычными цифрами. Если установить TYPE="I" или "i", то получится нумерация римскими цифрами (соответственно, с использованием прописных или строчных букв).

И, наконец, для буквенных обозначений элементов списка устанавливают атрибут TYPE="A" или "а". Кроме того, иногда может потребоваться начать нумерацию не с единицы, а с какого-нибудь иного числа. Для этого существует атрибут START=. Например, запись вызовет нумерацию элементов списка, начиная с числа 43. Далее пойдут элементы с номерами 44, 45 и т. д.

Может возникнуть естественный вопрос: а как использовать другие типы маркеров списков — разнообразные галочки, цветные кружки и прочие, которые мы так часто видим в WWW! Действительно, такая возможность есть, однако мы рассмотрим ее несколько позже, а пока приведем пример веб-странички фирмы «Лентяй» с использованием вложенных списков:

Фирма"ЛЕНТЯЙ"

Фирма «ЛЕНТЯЙ»

Haшa фирма предоставляет следующие услуги:

Бытовые услуги

Вкручивание электрических лампочек

Услуги по наведению чистоты

Подметание пола

Bынeceниe мусора из квартиры

посуды

Приготовление пищи

Koмпьютepныe услуги

Дeфpaгмeнтaция жестких дисков

Переустановка Windows

Для того, чтобы воспользоваться нашими услугами, следует:

Зарегистрироваться (Здесь)

Заполнить форму заказа ( Здесь )

Подтвердить заказ:

Получив письмо с паролем подтверждения, послать пустой ответ, нажав "Reply"

Заполнить форму-подтверждение заказа

(здесь)

Приготовить деньги для оплаты услуг

(См. Файл spiski2.html)

Графические маркеры

Итак, выше мы упомянули о возможности создания графических маркеров списков. Она настолько привлекла создателей веб-страниц, что для их удобства были созданы специальные средства. Действительно, одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое — когда каждый сам имеет возможность создать маркер! Маркером может быть все что угодно — от просто цветных и немного выпуклых кружков и квадратов до изощренных миниатюрных художественных работ. Однако обратите внимание на то, что именно миниатюрных: маркеры списков должны по размеру как-то соответствовать высоте текстовой строки, и забота об этом ложится на автора еще на этапе создания изображения. Старайтесь создавать подоб­ные изображения сразу в «натуральную величину». Если создавать сна­чала крупные рисунки, а потом просто уменьшать их, то при уменьшении они могут стать неузнаваемыми! Все дело в том, что компьютер «не зна­ет» , какие детали рисунка важны для нашего восприятия. Если при уменьшении исчезнут важные детали, результат будет ужасным. Если исчезнут второстепенные детали, качество восприятия ухудшится, но общее впе-; чатление останется.

Чтобы проиллюстрировать возможность вставки в список графических маркеров, воспользуемся одним из примеров — веб-страницей фирмы «Лентяй». Если помните, там мы создали два списка:

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

Сначала надо создать такой треугольник в любой программе, предназначенной для работы с изображениями. В нашем примере мы тоже создали такой треугольник, даже отбрасывающий небольшую тень, и назвали этот файл marker1.jpg. Теперь вспомним, как мы задавали тип маркера списка:

Чтобы пойти дальше, заменим атрибут TYPE= на атрибут STYLE= (как, кстати, и положено делать в соответствии со спецификацией HTML 4.0):

Tenepь, чтобы заменить кружок на графический маркер, заменим свойство list-style-type на свойство list-style-image и определим местоположение нашего файла-рисунка:

Вот и все! Можно наслаждаться списком с графическими маркерами. Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значение атрибута STYLE= заключено в двойные кавычки. Поэтому если бы мы ошибочно написали

то кавычка перед словом Images была бы воспринята как закрывающая, то есть атрибуту STYLE= было бы присвоено значение "list-style-image: url(", a все, что следует за этим, стало бы еще одним, нераспознанным атрибутом тега .

Рамки

Рамки (или фреймы — Frame) — мощный механизм представления информации на Web-страницах. С помощью рамок экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы и даже Web-узла.

Создание рамок

Для создания рамок (областей страницы) иcпользуют флаг и парный ему флаг , а для их описания — флаги < FRAME >. Начнем с простого примера.

Создайте в текстовом редакторе два маленьких Web-документа и сохраните их как файлы a.htm и b.htm. Эти страницы будут отличаться только названиями.

Файл a.htm:

Рамки. Страничка A

страничка А

Файл b.htm:

Рамки. Страничка B

страничка В

Создайте базовую страницу, на которой будут отображаться рамки, и сохраните baza.htm:

Paмки

Откройте страницу baza.htm в программе просмотра, и Вы увидите, что она состоит из двух областей:

Приведем небольшой комментарий к использованию флага . В нем указывается, что экран подразделяется на две колонки (параметр COLS), каждая из которых занимает ровно половину экрана (COLS="50°/o, 50%").

Флаг < FRAME SET> представляет собой флаг-контейнер, то есть флаг, который может включать в себя другие флаги. Флаг - контейнер заканчивается парным ему флагом . Флаг не является флагом - контейнером и не требует парного закрывающего флага.

Как разделить страницу на большее число областей?

Создайте четыре HTML-файла: a.htm, b.htm, c.htm, d.htm. Кроме того, измените цвет фона каждой страницы, для чего используйте атрибут BGCOLOR флага BODY: на странице А укажите цвет FFOOFF, на странице В — OOFFOO, на странице С — FFFFOO и на странице D —FFFFFF.

Файл a.htm:

Рамки. Страничка A

Фрейм А розового цвета

Файл b.htm:

Рамки. Страничка B

Фрейм В зеленого цвета •

Файл c.htm:

Рамки. Страничка C

фрейм С желтого цвета

Файл d.htm:

Рамки. Страничка D

фрейм D белого цвета

|Базовая страница demo.htm: (в нашем случае – это и есть index.html)

Демонстрация фреймов

FRAMESET COLS="25%, 25%, 25%, 25%">

Откройте файл demo.htm в программе просмотра. На экране компьютера Вы увидите, как выглядят созданные Вами рамки

Можно ли сделать рамки разного размера? Да вайте попробуем!

Отредактируйте Ваш файл demo.htm и сохранитe его как demo2.htm:

Демонстрация фреймов 2

Обратите внимание, что размер четвертой ;cамой правой рамки указан не числовым значением, символом «*». Это означает, что данная рамка должна занимать всю оставшуюся площадь главной стра-ицы. ; Просмотрите файл на экране:

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

Демонстрация фреймов 3

< FRAME SRC="b.htm">

< FRAME SRC="d.htin">

На экране Вы увидите стрелочки, появившиеся внизу левой рамки

Введя атрибут SCROLLING в соответствующий флаг < FRAME >, можно управлять появлением на экране полос прокрутки. Возможные значения атрибута SCROLLING

SCROLLING = YES — у рамки всегда будут полосы прокрутки, независимо от того, нужны ли они или нет.

SCROLLING=NO—у рамки не будет полос прокрутки, независимо от того, нужны ли они или нет.

SCROLLING = AUTO — у рамки будут полосы прокрутки только в случае необходимости.

Проведем эксперимент с полосами прокрутки

Создадим файл demo9.htm

neMOHCTpauuH фреймов 9

|

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

Давайте посмотрим, как выровнять графическое изображение по левой границе рамки. Как видно из предыдущего рисунка, графическое изображение не-много смещено вправо от границы рамки. Выровнять его можно с помощью атрибутов MARGINWIDTH и MARGINHEIGHT. Эти атрибуты управляют отступом изображения внутри рамки Создайте файл demolO.htm. и установите минимальные значения каждого атрибута:

демонстрация фреймов 10

На экране Вы увидите, что графическое изображение выровнялось:

Связь между рамками

Вернемся к часто используемому нами примеру с двумя рамками (baza.htm). Измените содержимое файла a.htm, добавив ссылку на другой файл (c.htm):

Демонстрация фреймов (ссылка)

A link to c.htm

Если Вы загрузите базовый пример с двумя рамками и активизируете ссылку, то получите содержимое страницы С, отображенное внутри рамки А. А как отобразить содержимое страницы С внутри рамки В? Внимательно изучите пример:

Демонстрация фреймов

Добавление имени не отражается на его внешнем виде — это лишь внутреннее изменение. Но Вы можете использовать это имя в качестве параметра атрибута target флага :

;Демонстрация фреймов

c.htm

Посмотрев на этот пример в программе просмо тра, Вы обнаружите, что содержимое страницы С отображается теперь внутри фрейма

Другие материалы

  • Методика підготовки та проведення лекційних занять у вищій школі
  • ... ії залежить не лише від підготовчої, але й від подальшої роботи лектора над прочитаною лекцією [ 14, 300 ]. РОЗДІЛ 4 МЕТОДИКА ПРОВЕДЕННЯ ЛЕКЦІЙНИХ ЗАНЯТЬ У ВИЩІЙ ШКОЛІ Про те, як слід читати лекцію, накопичилось чи мало порад і рекомендацій, викладених в методичній літературі. Важлива ...

  • Лекция как один из методов обучения на третьей ступени общего среднего образования, методика её подготовки и чтения
  • ... это можно применить в своих знаниях, в практике, в дальнейшей жизни?…), дискуссионный методы («Порассуждаем?»). Дидактические требования к лекции, методика её подготовки и чтения. Безусловно, помимо таких составляющих, как личность учителя, знание им предмета, эрудиция, на результат, итоговый выход ...

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

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

  • Лекция – важнейшая форма преподавания философии: содержание, структура и стиль лекции
  • ... целями, индивидуальным стилем преподавателя. Чтобы получить обратную связь, понять, что думают, чувствуют студенты, преподавателю следует искать способ активизации аудитории, мотивирования студентов к дальнейшему обучению. Выводы Лекция – это важнейшая форма обучения, характеризуемая ...

  • Педагогические функции урока (лекции)
  • ... ценностей перед профессиональными (4). Очевидно, что данное деление условно, но оно удобно для классификации. Заключение Лекции присущи три основные педагогические функции, которые определяют ее возможности в учебном процессе: познавательная, развивающая и организующая. Познавательная ...

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

  • Методика підготовки і проведення лекції на тему: "Особливості обліку інших зовнішньоекономічних операцій"
  • ... педагогічного процесу, і останній завжди буде йому підпорядкованим і ним керованим. 3. Методика підготовки лекційного заняття по темі “Особливості обліку інших зовнішньоекономічних операцій” Питання про те, як готуватися до лекцій, включає в себе ряд вимог, про які корисно постійно нагадувати ...

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

  • Психологический анализ лекций по психологии
  • ... особенности аудитории, закономерности функционирования познавательных процессов (восприятия, внимания, памяти, мышления), эмоциональных и волевых процессов обучаемых. [1] 2.2 Психологический анализ лекций   После проведения лекции, если это требуется, лектором может проводится ...

  • Методика використання лекційно-семінарської системи в аграрних технікумах і коледжах при вивченні дисциплін економічного профілю
  • ... і навчання з дисципліни має тенденцію до зростання з кожним семестром. Працюючи за модульною системою викладачі і студенти упевнились, що підвищується взаємна вимогливість між студентами і викладачем, відповідальність за якість знань. Висновок Отже, використовуючи лекційно - семінарське ...

  • Техника Безопасности (лекции)
  • ... выбывших по болезни, а также в снижении потерь рабочего времени и времени работы оборудования, вызванных временной нетрудоспособностью работников. Лекция 20 ТЕХНИКА БЕЗОПАСНОСТИ ПРИ ВЕДЕНИИ ПРОМЫСЛА. Все промысловые операции и расстановка для их выполнения членов экипажа должна производиться в ...

  • Конспект лекций по FOREX
  • ... (в порядке значимости): форма волны, соотношение волн и время. Лучшие результаты волновой анализ демонстрирует на массовых рынках, на рынке золота, FOREX. Прогноз дневных диапазонов колебания цен Условия: 1. Сегодняшняя цена закрытия < сегодняшней цены открытия. 2. Сегодняшняя цена закрытия > ...

  • Курс лекции по компьютерным сетям
  • ... метод множественного доступа с разделением частоты. Какие существуют варианты использования множественного доступа с разделением во времени? Лекция 5.ЛВС и компоненты ЛВС Компьютерная сеть состоит из трех основных аппаратных компонент и двух программных, которые должны работать согласованно. Для ...

Каталог учебных материалов

Свежие работы в разделе

Наша кнопка

Разместить ссылку на наш сайт можно воспользовавшись следующим кодом:

Контакты

Если у вас возникли какие либо вопросы, обращайтесь на email администратора: admin@kazreferat.info