2. Остальные фреймы создайте согласно рисунку, самостоятельно.
7. Сохранить файл как lab7.txt в блокноте и как lab7.html для просмотра в браузере.
Практическая работа № 8
«Фреймы. Гиперссылки и активные рисунки»
Технология работы:
§ Создать документ согласно рисунку, в котором в заголовке окна браузера должна быть надпись "Введение в HTML". Для этого необходимо создать 4 файла соответствующего содержания.
§ Прописать все гиперссылки на фрейм окна "menu",набрать для них текст, соответствующего содержания.
§ Создать бегущую строку «Краткое руководство по HTML»
Теоретическая часть:
Пример задания многооконного документа:
<HTML>
<FRAMESET ROWS="10%, *">
<FRAME SRC="head.html">
<HTML>
<FRAMESET ROWS="10%, *">
<FRAME SRC="head.html">
<FRAMESET COLS="20%,*">
<FRAME SRC="menu.htm" NAME="menu">
<FRAMESET ROWS="40%,*">
<FRAME SRC="index.html" NAME="index">
<FRAME SRC="main.html" NAME="main">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
Более сложные многооконные документы, наподобие данного руководства, создаются при помощи комбинации соответствующих команд FRAMESET. Например, мы хотим создать многооконный документ, наподобие того, каким является данное пособие, содержащий вверху не меняемый заголовок (его лучше всего задать картинкой), далее слева навигационное меню и справа два содержательных окна.
<HTML>
<FRAMESET ROWS="10%, *">
<FRAME SRC="head.html">
<HTML>
<FRAMESET ROWS="10%, *">
<FRAME SRC="head.html">
<FRAMESET COLS="20%,*">
<FRAME SRC="menu.htm" NAME="menu">
<FRAMESET ROWS="40%,*">
<FRAME SRC="index.html" NAME="index">
<FRAME SRC="main.html" NAME="main">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
Пример для подключения к файлу menu.htm гиперссылки слова «СОДЕРЖАНИЕ»
<HTML>
<HEAD>
<TITLE>Пример 12</TITLE>
</HEAD>
<BODY TEXT="#FF00" BGCOLOR="FFF0FF">
<CENTER>
<H1>меню </H1>
<p align="left">
<BR>
<BR>
<A HREF="coder.html" aligen=left height=300 alt="Тематический раздел по Веб-дизайну" border="0 ">СОДЕРЖАНИЕ</A>
<BR>
<BR>
КОМАНДЫ
<BR>
<BR> РАЗМЕТКА
<BR>
<BR> ШРИФТЫ
<BR>
<BR> СПИСКИ
<BR>
<BR>ГРАФИКА
</p>
<TEXTAREAA NAME="ИМЯ" ROWS="25" COLS="40">
</BODY>
Пример для бегущей строки:
<marquee height="10" loop="4" bgcolor="#99CCFF"><H1>Краткое руководство по HTML </H1> </marquee>
Пример для раскрытия ссылки в окне name="window-1">:
<frame src="content.html" name="window-1">
<a href="tururumki.html" target="window-1">Турурумки</a>
Direction - задает направление движения бегущей строки - direction="left" (right, up, down) - движение влево (вправо, вверх, вниз).
Behavior - поведение строки - behavior="scroll" (slide, alternate). Scroll - обычная прокрутка (по умолчанию). Slide - прокрутка с остановкой, строка пробегает до края и останавливается. Если одновременно с behavor="slide" употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края. Alternate - строка будет двигаться от края к краю.
Scrollamount - скорость движения строки, scrollamount="1". Может принимать значения от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое.
9. Сохранить файл как lab8.txt в блокноте и как lab8.html для просмотра в браузере.
Практическая работа № 9
«CSS – Каскадные таблицы стилей»
Технология работы:
· Создайте стиль следующего образца:
Для команды скопируйте текст из практической работы №4 (файл lab4.html)
· Пустое поле сверху и снизу во всем документе
· Пустое поле слева - 5; пустое поле справа-2
· Цвет фона - светло-серый, цвет текста - черный.
· Установите в данном тексте цвет непосещаемых гиперссылок – коричневый, посещаемых –зеленый, стиль шрифта – черный.
· Абзацы: на белом фоне. У первого абзаца – вертикальная одинарная красная черта слева; у второго абзаца – вертикальная двойная синяя черта справа; у третьего абзаца никаких линий нет
· Текст абзацев идет с отступом от края белого фона, с увеличенным интервалом между строками и с заданием «красной строки»
· В первом заголовке получите объемный эффект. Для этого:
o с помощью свойств margin-top и margin-left сделайте наложение двух строк текста
o с помощью свойства font-size установите большой размер строк
o с помощью свойства color - сделайте, чтобы вторая строка выглядела тенью
o шрифт заголовка - Arial.
В первом абзаце слова "информационной Вселенной" идут жирным курсивом и с разрядкой.
Второй заголовок: желтого цвета на зеленом фоне, причем фон лишь немного шире заголовка, но уже основного текста. Буквы заголовка подчеркнуты и надчеркнуты.
Во втором абзаце, в первом предложении часть слов расположена выше основного текста, а часть слов - ниже. Это должно быть сделано средствами CSS.