Отправляет email-рассылки с помощью сервиса Sendsay

Сайтостроение (уроки по HTML, PHP, MySQL, веб-дизайну)

Рассылка закрыта

При закрытии подписчики были переданы в рассылку ""Свой сайт - это просто! Создание, продвижение, SEO"" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июнь 2002   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
tmorozova.ru

Статистика

17.902 подписчиков
-41 за неделю
←   Все выпуски   →

Сайтостроение (уроки по HTML, PHP, mySQL , WEB-дизайн)


Информационный Канал Subscribe.Ru

Сайтостроение. Основы HTML. Уроки с сайта http://progs.biz

Рассылка №11

Основы HTML. Урок 21. Фреймы.
Основы HTML. Урок 22. Псевдостили гиперссылок.
Полные версии уроков (с картинками) можно найти по адресам
Урок 21. Фреймы.
Урок 22. Псевдостили гиперссылок.

Основы HTML. Урок 21. Фреймы

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

Давайте сразу рассмотрим HTML-код для второго примера. Т. е. у нас будет три фрейма - один наверху старницы (по всей ширине), и два - пониже. Сначала рассмотим код для страницы с фреймами:

<html>
<head>
 <title>Страница Иванова Ивана</title>
</head>
<frameset rows="100, *">
<frame src="header.htm">
<frameset cols="120, *">
    <frame src="toc.htm">
    <frame src="main.htm">
</frameset>
</frameset>
</html>

Разберем эти строки. Во-первых, обратите внимание, что у нас на странице с фреймами нет тегов <body> и </body>. Вместо них мы пишем теги для фремов

...
<frameset rows="100, *">
 ...
</frameset>
 ...

Параметр у этого тега - это rows. Он определяет, на сколько частей по вертикали делится наш фрейм. Так как мы написали rows="100, *", то частей будет две. Если бы маы написали что-то вроде rows="100, 180, *", то частей было бы три. Делить можно не только по вертикали, но и по горизонтали, как в следующий строке:

...
<frameset cols="120, *">
 ...

Или вообще и по горизонтали, и по вертикали:

...
<frameset cols="120, *" rows="100, *">
 ...

В последнем примере у нас будет четыре фрейма (2 на 2).

Значения у параметров cols и rows следующие - просто число означает абсолютный размер в пикселах, значение со знаком процента - часть от общего размера (например cols="50%, 50%" будет означать деление по горизонтали на две равные половины), звездочка означает остаток от остальных частей (так, если вы напишете <frameset cols="120, 1*, 2*">, то получите три колонки - первая шириной 120 пикселов, и две другие делят оставшееся место в отношении 1 к 2).

Теперь возврашемся к нашей странице. Наше деление по горизонтали на две части мы ограгизуем так: верхняя часть представляет из себя вставленный файл header.htm:

...
<frame src="header.htm">
 ...

Как видите, тут используется тег <frame>, в котором в параметре src указывается имя вставляемого файла ("header.htm")

Нижняя же часть представляет из себя снова фрейм с делением по горизонтали:

...
<frameset cols="120, *">
    <frame src="toc.htm">
    <frame src="main.htm">
</frameset>
 ...

Внутри этого фрейма мы уже указываем конкретные файлы toc.htm и main.htm (но, если надо, то могли написать и следуюш\щие фремы).

Разумеется, файлы header.htm, toc.htm и main.htm должны существовать (в этой же папке).

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

Наверх

Основы HTML. Урок 22. Псевдостили гиперссылок

На уроке 15 и последующих мы изучали каскадные таблицы стилей. Применяли мы их к элементам, которые на WEB-странице не меняются - заголовкам и т. п. На этом урке мы посмотрим, как применять таблицы стилей к гиперссылкам. Одно из их отличий от элементов других типов - это изменяемость. Сначала гиперссылка имеет один вид (цвет). При наведении пользователем на нее кусора - другой. Посещенные ссылки имеют третий вид. Если же мы хотим, чтобы на нашей WEB-странице гиперссылки вели себя по-другому (скажем имели не стандартные цвета), то в файле со стилями (если мы пишем стили в отдельном файле *.css, разумеется) мы должны написать приблизительно следующее:

...
A:link {
 color: Olive;
}
A:visited {
 color: #FF9933;
}
A:active {
 color: #FF33CC;
}
A:hover {
 color: #CC0000;
}

Здесь мы задали свои цвета для четырех состояний гиперссылок на WEB-страице - для обычного (link), посещенного (visited), активного (active) и состояния с наведенным курсором (hover). Разумеется, задавать можно не только цвет, но и полужирность, подчеркнутость и т. п.

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

Наверх

Copyright Алексеев Игорь, 2002

Copyright сайт progs.biz, 2002

http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное