Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Воспроизведение видео в Internet Explorer↑ ⇐ ПредыдущаяСтр 2 из 2 Содержание книги
Поиск на нашем сайте
Файлы видео встраивают в Web-страницы при помощи атрибута DYNSRC=… тега <IMG>. Тег загружает некоторое встроенное в операционную систему программное обеспечение, предназначенное для воспроизведения видеоклипов. Обычно это OuickTime. Атрибут START=… определяет каким образом задается начало воспроизведения. Значение openfile обеспечивает запуск видео автоматически при загрузке файла. Значение mouseover инициирует воспроизведение видео при наведении курсора на изображении-ссылке. Атрибут LOOP=… задает количество повторов видеоклипов. Если нужно задать количество повторений бесконечным, надо ввести ключевое слово infinite. Примеры 1. <IMG DYNSRC=”file.avi” START= "mouseover” LOOP= “infinite”> 2. <A href="pr1_21.htm"> <img dynsrc="pr1_21.mpg" alt="pr1_21.mpg" width=”215” height=”160” align=”left” hspace=”10” vspace=”5” start=”mouseover”> Рис.1.1 (анимационный) </a> Здесь анимационный файл используется в качестве графической ссылки для демонстрации файла pr1_21.htm, содержащего ту же анимационную сцену, на полном экране. При наведении курсора мыши на ссылку она начинает анимироваться. Бегущая строка Ниже представлен пример встраивания бегущей строки в Web-страницы при помощи тега <marquee…>. <marquee height=”25” width=”50%” hspace=”5” vspace=”5” bgcolor=”#ffffcc” direction=”left” loop=”infinite” scrollamount=”3” behavior=”alternate”> Ниже приводится краткая инструкця для начинающих пользователей персональногокомпьютера. Прочтите ее "на всякий случай"! </marquee> Атрибуты: – Height, Width – высота и ширина окна; – Hspace, Vspace – ширина и высота пустых полей вокруг окна; – Bgcolor – цвет фона окна; – Direction – направление движения бегущей строки: Left, Right, Up, Down; – Loop – количество циклов повторения (значение infinite – непрерывный цикл); – Scrollamount – длина в пикселах, на которую текст перемещается за один такт процессора (скорость движения); – Behavior – задает характер движения бегущей строки: Alternate – переменное направление перемещения; Slide – строка вытягивается из одного края и останавливается у другого. Организация возвратов Для организаци возвратов (обратных переходов) по связанным документам HTML удобно использовать встроенную функцию JavaScript: history.back. Пример <А href="javascript:history.back(1)"> назад </a> Задание к лабораторной работе №4 1. Привести примеры упорядоченных и неупорядоченных списков. Каждая группа форматированного текста должна содержать не менее 10 элементов и 3-х уровней вложенности. На каждом уровне необходимо применить свой маркер или тип индексации. 2. Разработать таблицу данных с использованием тега предварительного форматирования <PRE>. Таблица должна содержать заголовок, названия столбцов и 5 строк данных. 3. Включить в документ HTML примеры форматирования текста на основе тега выделения цитат <BLOCKQUOTE>. 4. Включить в программу примеры воспроизведения цифрового видео (атрибут DYNSRC=… тега <IMG>). 5. Разработать бегущую строку текста. 6. Создать возвратные гиперссылки между документами на основе встроенной функции JavaScript: history.back.
Лабораторная работа №5 Разработка таблиц 1.5.1. Методические рекомендации Таблицы используются для представления информации в виде горизонтальных рядов и вертикальных колонок или для форматирования текста и графики. Каждая клетка таблицы называется ячейкой. Ячейки могут содержать в себе текст, графику, или другую таблицу. Текст и графика внутри ячейки могут представлять собой внешние или внутренние ссылки. Начинается каждая новая таблица тегом <TABLE>, а заканчивается парным ему тегом </table>. Тег <TABLE> задает базовые характеристики таблицы – расстояния между ячейками, ширину таблицы относительно экрана и т. п. Например, следующая пара тегов <TABLE ALIGN=”center” BORDER=”2” WIDTH=”50%”> ……………………………………………………………… </ table > описывает таблицу, выровненную по центру экрана, занимающую 50 процентов ширины экрана (атрибут WIDTH=…) и имеющую рамку размером в 2 пикселя (атрибут BORDER=…). Если атрибут BORDER не задан или равен 0, рамка не отображается. Ширину таблицы можно задавать в абсолютных значениях (в пикселах) или в процентах от ширины окна браузера. Если ширина не задана, размер таблицы по ширине определяется программно и зависит от размеров и особенностей форматирования текста (или графики) внутри ячеек. Высота всей таблицы и, соответственно, отдельных ее ячеек может быть определена атрибутом HEIGHT=… тега <TABLE>. Если этот атрибут не задан, высота программно устанавливается в зависимости от размера шрифта и особенностей форматирования текста внутри ячеек. Каждый ряд таблицы описывается парой тегов <TR> и </tr>. Колонки внутри каждого ряда описываются тегами <TD> и </td>. Содержимое каждой ячейки (это может быть текст, графическое изображение, новая таблица, ссылка и т.п.) помещается между тегами <TD> и </ td >. Тег <CAPTION> внутри тега <TABLE> описывает заголовок таблицы. При помощи атрибута Align заголовок может быть размещен сверху (значение top) или внизу таблицы (значение bottom). Теги <TH> и </th> внутри тега <TABLE> задают названия столбцов. Рассмотрим пример простой таблицы. Пример 1 <table width=”350” height=”200” border=”2” frame=”box” rules=”all” align=”left” bgcolor=”#ccccff” background=”name.jpg”> <caption align=”top”> <H3> Пример простой таблицы </caption></h3> <TR align=”center bgcolor=”#ffff00”> <TH> Колонка 1 </th><TH> Колонка 2 </th> <TH> Колонка 3 </th> </tr> <TR> <TD> Ячейка 1-1 </td><TD> Ячейка 1-2 </td><TD> Ячейка 1-3 </td> </tr> <TR> <TD> Ячейка 2-1 </td><TD> Ячей ка 2-2 </td><TD> Ячейка 2-3 </td> </tr> <TR> <TD> Ячейка 3-1 </td><TD> Ячей ка 3-2 </td><TD> Ячейка 3-3 </td> </tr> </table> Определение структуры и цветовое оформление таблиц Атрибут BGCOLOR=… тега <TABLE> задает цвет фона всей таблицы, а атрибут BGCOLOR=… тега <TR> определяет цвет фона текущей строки таблицы. Аналогично в теге <TD> можно задать цвет фона отдельной ячейки таблицы. Атрибут bordercolor=… задает цвет всей рамки. Атрибут bordercolorlight=… задает цвет светлой стороны рамки. Атрибут bordercolordark=… задает цвет темной стороны рамки. Атрибут cellspacing=… задает расстояние между ячейками таблицы. Атрибут cellpadding=… задает расстояние между рамкой таблицы и ее содержимым. Атрибут frame=… определяет форму внешней рамки таблицы: – vsides – отображаются только вертикальные линии; – hsides – отображаются только горизонтальные линии; – box –отображается вся рамка. Атрибут rules=… определяет форму рамок внутри таблицы: – all –отображаются все части рамки внутри таблицы; – rows – отображаются горизонтальные части рамки; – сols – отображаются вертикальные части рамки.
Рассмотрим пример таблицы, содержащей графику. Пример 2 <table height=”200” border=”2” align=”right” bgcolor=”#ccccff” cellspacing=”10” cellpadding=”5”> <caption align=”top”><h3> Таблица c графикой и ссылками ></h3> </caption> <TR bgcolor=”#ffff00”> <TH> Колонка 1 </th> <TH> Колонка 2 </th> <TH> Колонка 3 </th> </tr> <TR> <td> Ячейка 1-1 </td> <TD> Ячейка 1- 2 </td> <TD> <IMGSRC="images/car.jpg"> </td> </tr> <TR> <TD> Ячейка 2-1 </td> <TD> Ячейка2-2 </td> <TD> Ячейка 2-3 </td> </tr> <TR> <TD> <A HREF="test-2.htm"> <IMG SRC="images/cat.jpg"> </a> </td> <TD> Ячейка 3-2 </td> <TD> Ячейка 3-3 </td> </tr> </table> Выравнивание в таблицах Если выравнивание не задавать, то название таблицы и заголовки столбцов центрируются, а содержимое прочих ячеек по горизонтали выравнивается по левому краю, а по вертикали по средней линии ячейки. Атрибут Align и Valign в теге <TR> обеспечивает горизонтальное и вертикальное выравнивание содержимого всего ряда. Если нужно сделать горизонтальное и вертикальное выравнивание в отдельных ячейках, это делают с помощью атрибута Align в тегах <TH> и <TD>. Тег <COLGROUP> распространяет действие выравнивания (атрибут Align=…) в одной ячейке на весь столбец. Атрибут объединения Span=… распространяет действие тега <COLGROUP> на несколько столбцов. Пример 3 <table align=”left” width=”350” height=”300” border=”6” frame=”box” rules=”all” bgcolor=”#ccccff” cellspacing=”8’ bordercolorlight=”#ffffff“ bordercolordark=”#666666”> <colgroup align=”center” span=”2”> <colgroup align=”right”> <caption align=”left”> <H3> Пример простой таблицы </caption></h3> <TR bgcolor=”#ffff00”> <TH> Колонка 1 </th> <TH> Колонка 2 </th> <TH align=”center” > Колонка 3 </th> </tr> <TR align=”center”> <TD align=”top” > Ячейка 1-1 </td><TD> Ячейка 1-2 </td> <TD> Ячейка 1-3 </td> </tr> <TR> <TD> Ячейка 2-1 </td> <TD> Ячейка 2-2 </td> <TD> Ячейка 2-3 </td> </tr> <TR> <TD> Ячейка 3-1 </td> <TD> Ячейка 3-2 </td> <TD> Ячейка 3-3 </td> </tr> </table> Составные ячейки Несколько ячеек можно объединять в одну как по горизонтали, так и по вертикали. Атрибут COLSPAN=… объединяет несколько ячеек в ряду в одну широкую ячейку. Атрибут ROWSPAN=… объединяет несколько ячеек по высоте в одну высокую ячейку. Пример 4 <table align=”center” width=”400” border=”2” bgcolor =”#ccccff”> <caption><font size=”4” color=”#aa0000”> Пример составной таблицы! </caption> <TR bgcolor =”#ffee00”> <TH width=”35%” > Заголовок 1 </th> <TH colspan=”2” > Заголовок 2 </th> </tr> <TR> <TD> Ячейка 1-1 </td> <TD> Ячейка 1-2 </td> <TD> Ячейка 1-3 </td> </tr> <TR> <TD> Ячейка 2-1 </td> <TD colspan=”2” > Ячейка 2-2 </td> </tr> <TR> <TD> Ячейка 3-1 </td> <TD rowspan=”2” align=” center” bgcolor=”#ffee33” > Ячейка 3-2 </td> <TD> Ячейка 3-3 </td> </tr> <TR> <TD> Ячейка 4-2 </td> <TD> Ячейка 4-3 </td> </tr> <TR> <TD> Ячейка 5-1 </td> <TD> Ячейка 5-2 </td> <TD> Ячейка 5-3 </td> </tr> <TR> <TD colspan=”3” align=”center” bgcolor=”#ffee00” > Конец составной таблицы! </td> </tr> </table> Задание к лабораторной работе №5 1. Создать простую таблицу, содержащую заголовки столбцов, 4 столбца и 5 строк. Привести примеры оформления рамок таблицы и ячеек. 2. Создать таблицу, содержащую ячейки с текстом и графическими изображениями. 3. Разработать составную таблицу. Включить в нее текстовые и графические ссылки на следующие страницы связанного HTML-документа.
Лабораторная работа №6
|
||||
Последнее изменение этой страницы: 2016-04-18; просмотров: 242; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.147.46.174 (0.006 с.) |