Тема: Оформление сайта
Урок
2
Разделить Web-страницу на несколько
независимых окон можно с помощью фреймов. Любой сайт, содержащий страницы с
фреймами, начинается с создания странички-контейнера.
Страничка-контейнер содержит теги <frameset>…</frameset>. Страничку-контейнер
сохраняют под именем index.html. Файл, который будет располагаться в верхнем фрейме, имеет имя up.html,
в нижнем левом – left.html, в нижнем правом – right.html.
Основные
команды создания фреймов
|
Контейнер
|
Тег
|
|
Количество и размеры фреймов
|
<frameset></frameset>
|
|
Ширина горизонтального разбиения страницы, %,
пиксели и * (все пространство)
|
rows=” %,* “
|
|
Ширина вертикального разбиения страницы, %,
пиксели и * (все пространство)
|
cols=” %,* “
|
|
Отображать рамку/нет
|
frameborder=yes (no)
|
|
Ширина n рамки между фреймами, пиксель
|
border=n
|
|
Цвет рамки, которая разделяет фреймы
|
bordercolor=”#RRGGBB”
|
|
Задает URL страницы, помещенной во фрейм
|
src
|
|
Задание фрейму уникального имени
|
name
|
|
Полоса прокрутки есть/нет/по умолчанию
|
scrolling=yes(no,auto)
|
|
Нельзя изменять размер фрейма мышью. Если
установить хоть у одного, то у остальных тоже нельзя будет изменить
|
noresize
|
Наберите следующий код и сохраните как index.html. Задайте
атрибутам свои параметры:
<html>
<head>
<title>Титульный</title>
</head>
<frameset rows="20%,*">
<frame src="up.html"
name="logo" scrolling= no noresize>
<frameset cols=" ">
<frame src="left.html" name="menu"
scrolling= >
<frame src="right.html" name="content"
noresize>
<frameborder= >
<border= >
<bordercolor=" "
</frameset>
</frameset>
</html>
Откройте файл и убедитесь, что перед вами
трехфреймовая страница. В нижнем правом фрейме должен отображаться файл,
созданный на прошлом уроке.
Создайте файл About.html, в котором раскройте основные понятия по вашей теме.
Создайте файл My dream, в котором опишите интересующую тему.
В Web используют следующие шрифты:
Times New Roman, Arial, Courier New, Tahoma, Verdana.
Основные команды оформления сайта
|
Контейнер
|
Тег
|
|
Использование
стилей для элементов, располагающихся в пределах странички
|
<style type="text/css"></style>
|
|
Залить весь фрейм
(файл)
|
body {background-color:
# RRGGBB;}
|
|
Бегущая строка, направление, цвет, ширина,
высота, время задержки между движениями в миллисекундах, число повторов
(бесконечное)
|
<marquee behavior="scroll"
direction="left" bgcolor="#FFCC99" width="1260"
height="20" scrolldelay="50"
loop="infinite">…</marquee>
|
|
Выделение текста курсивом
|
<em>
|
|
Ссылка на файл
|
<a rel="nofollow ugc" target="_blank" href="имя файла" target ="content"> Текст ссылки
</a>
|
|
Список и отдельный элемент списка
|
<ul>
<li> Первый пункт
</ul>
|
|
Знак «копирайт»
|
©
|
|
Вставка изображения из этой же папки
|
<IMG SRC =”имя.формат” (.gif, .jpeg, .png)>
|
|
Толщина рамки вокруг изображения
|
border="0"
|
|
Текст на картинке, появляющийся при наведении
указателя мыши
|
alt="Щелкни, чтобы перейти на…"
|
|
Ссылка на сайт
|
<a href="http://www.yurg6.ru" target=" "> Вставка изображения Текст при
наведении указателя мыши Ширина Высота картинки Толщина рамки ></a>
|
|
Картинка является фоном
|
<body background="имя.формат">
|
В файле up.html создайте бегущую строку, в которой укажите: 1)
название созданной страницы: «Всё о компьютере»; 2) выполнил: ФИО, школа и
класс; 3) проверил: учитель, ФИО.
Создайте стиль, в котором используйте заливку всего
фрейма. Используйте этот стиль для элементов, расположенных на странице.
Для вывода надписей используйте разное форматирование.
В файле left.html создайте Структуру сайта, в которой с каждой
новой строки используйте ссылки: 1) на файл «Всё о …», 2) на файл «About»,
3) на файл «My dream» .
Перечень сведений о себе оформите в виде списка.
Например:
1. Всё о компьютере:
·
1.1 Мои представления о
компьютере
·
1.2 Компьютер моей мечты
Добавьте картинку, с которой осуществляется переход на
сайт школы.
Добавьте 4 пустые строки и вставьте значок авторского
права «Копирайт»
Создайте стиль, в котором используйте заливку всего
фрейма. Используйте этот стиль для элементов, расположенных на странице.
Название созданной страницы «Меню».
Для текста «Структура сайта» примените шрифт Verdana,
размер и цвет задайте самостоятельно.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.