Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Другие методич. материалы / Урок по информатике "Оформление сайта"

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



57 вебинаров для учителей на разные темы
ПЕРЕЙТИ к бесплатному просмотру
(заказ свидетельства о просмотре - только до 11 декабря)


  • Информатика

Поделитесь материалом с коллегами:

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


Урок 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;}

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

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

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

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

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

<ul>

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

ul>

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

©

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

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

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

border="0"

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

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

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

<a href="http://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



57 вебинаров для учителей на разные темы
ПЕРЕЙТИ к бесплатному просмотру
(заказ свидетельства о просмотре - только до 11 декабря)


Автор
Дата добавления 11.09.2016
Раздел Информатика
Подраздел Другие методич. материалы
Просмотров13
Номер материала ДБ-188198
Получить свидетельство о публикации
Похожие материалы

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.
Специальное предложение
Вверх