Урок по информатике Оформление сайта

Тема: Оформление сайта

Урок 2

Разделить Web-страницу на несколько независимых окон можно с помощью фреймов. Любой сайт, содержащий страницы с фреймами, начинается с создания странички-контейнера. Страничка-контейнер содержит теги <frameset>…frameset>. Страничку-контейнер сохраняют под именем index.html. Файл, который будет располагаться в верхнем фрейме, имеет имя up.html, в нижнем левом - left.html, в нижнем правом - right.html.

Основные команды создания фреймов

Наберите следующий код и сохраните как index.html. Задайте атрибутам свои параметры:

Титульный

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

Создайте файл About.html, в котором раскройте основные понятия по вашей теме.

Создайте файл My dream, в котором опишите интересующую тему.

В Web используют следующие шрифты: Times New Roman, Arial, Courier New, Tahoma, Verdana.

Основные команды оформления сайта

Залить весь фрейм (файл)

body {background-color: # RRGGBB;}

Бегущая строка, направление, цвет, ширина, высота, время задержки между движениями в миллисекундах, число повторов (бесконечное)

…

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

Ссылка на файл

имя</</span> файла" target ="content"> Текст ссылки

Список и отдельный элемент списка

<ul>

<li> Первый пункт

ul>

Знак «копирайт»

©

Вставка изображения из этой же папки

<IMG SRC ="имя.формат" (.gif, .jpeg, .png)>

Толщина рамки вокруг изображения

border="0"

Текст на картинке, появляющийся при наведении указателя мыши

alt="Щелкни, чтобы перейти на…"

Ссылка на сайт

<a href="www.yurg6.ru" target=" "> Вставка изображения Текст при наведении указателя мыши Ширина Высота картинки Толщина рамки >a>

Картинка является фоном

В файле up.html создайте бегущую строку, в которой укажите: 1) название созданной страницы: «Всё о компьютере»; 2) выполнил: ФИО, школа и класс; 3) проверил: учитель, ФИО.

Создайте стиль, в котором используйте заливку всего фрейма. Используйте этот стиль для элементов, расположенных на странице.

Для вывода надписей используйте разное форматирование.

В файле left.html создайте Структуру сайта, в которой с каждой новой строки используйте ссылки: 1) на файл «Всё о …», 2) на файл «About», 3) на файл «My dream» .

Перечень сведений о себе оформите в виде списка. Например:

1. Всё о компьютере:

• 1.1 Мои представления о компьютере

• 1.2 Компьютер моей мечты

Добавьте картинку, с которой осуществляется переход на сайт школы.

Добавьте 4 пустые строки и вставьте значок авторского права «Копирайт»

Создайте стиль, в котором используйте заливку всего фрейма. Используйте этот стиль для элементов, расположенных на странице.

Название созданной страницы «Меню».

Для текста «Структура сайта» примените шрифт Verdana, размер и цвет задайте самостоятельно.

2