Создание Веб-страницы на
примере сказки В. Чаплиной
«Рычик и Ласка»
Автор: Хохлов Владислав
Михайлович, учитель информатики
МКОУ «Кормиловский лицей»
• Хохлов Владислав
Михайлович, учитель
информатики МКОУ
«Кормиловский лицей»,
vladislav-khkhlv@rambler.ru
• Сайт Кормиловского лицея
http://www.licey.kormilovka.omskedu.ru/
Цель:
• Создание Веб-странички с использованием
текстового редактора Блокнот и таблиц каскадного
стиля CSS
Исходные материалы: Отсканированная детская
книга В. Чаплиной «Рычик и ласка»
• Создавать HTML –странички можно в
любом текстовом редакторе, кроме Word.
Для этой цели годится даже Блокнот. Только
когда сохраняешь документ, нужно в
Блокноте в панели меню Файл выбрать
опцию Сохранить как
• Создадим папку Веб страничка и сохраним
в ней файл под именем index. htm или
index. html
• Вместо блокнотовского значка
появится
• Когда HTML –страничку нужно запустить на
выполнение в Internet Explorer, на нее
нужно дважды щелкнуть левой кнопкой
мыши, когда ее нужно редактировать,
нужно использовать правую кнопку мыши и
опцию Открыть с помощью и выбрать
программу Блокнот.
Структура HTML-документа
<HTML>
<HEAD>
<TITLE>Веб-страничка</TITLE>
</HEAD>
<BODY>
……………
</BODY>
</HTML>
Откроем файл с помощью Блокнота и скопируем в него полностью все
содержимое текстового файла со сказкой в тело веб-страницы
(скопируется естественно только текстовая часть файла) между тэгами
<BODY>
…..
</BODY>
Дважды щелкнем на левую кнопку мыши и запустим нашу вебстраницу, получим следующий вид:
Сплошной текст читается плохо, поэтому разделим его на
абзацы с помощью непарного тэга <P>. Каждый абзац любой
веб-страницы должен содержать не больше 5-6 строк
Дважды щелкнув на файле index.htm откроем веб-страницу и
получим вид, показанный внизу слайда.
На самом деле абзацы получились по 2-3 строки, но мы
должны помнить, что тексту придется потесниться, когда мы начнем
вставлять рисунки.
У каждой веб-страницы должен
быть заголовок.
• Заголовок вставляется при помощи тэга
<Hn>, где n=1,2,…,6
• Сделаем заголовок нашей Веб-страницы
самого крупного размера <H1>:
• <H1>Рыча и Ласка </H1>
В режиме веб-страницы это будет
выглядеть так:
Для обработки рисунков мы воспользуемся стандартной
программой Microsoft Office Picture Manager
Создадим в нашей папке Веб-страница хранилище для наших рисунковпапку Pic. Поочередно выделяем в текстовом файле со сказкой все 9
рисунков, копируем их правой кнопкой мыши, открываем программу
Picture Manager и поочередно вставляем их в эту программу.
При работе в этой программе мы имеем возможность выполнить
автоподстройку, обрезку рисунка, изменение его размеров, сжатие и
другие действия.
• Изменим
размеры рисунков
таким образом,
чтобы в
«книжном»
варианте рисунок
был высотой 300
пикселей, а в
«альбомном»-250
• Сохраним рисунки в папке Pic под
названиями 1.png, 2.png,…. ,9.png.
• Рисунки в этом формате тяжеловесны, но в
этом графическом редакторе есть
возможность сжатия, можно открыть эти
рисунки с помощью обыкновенного Paint, и
сохранить как в формате .jpg.
Вставка первого рисунка
осуществляется с помощью тэга:
• <IMG src="./pic/1.png" border="0" width="190"
height="248" title="Рычик и Ласка" alt="Рычик и
Ласка">
• Что означают параметры этого тэга?
• border="0" -отсутствие границы рисунка
• width="190" ширина рисунка
• height="248" –высота рисунка
• title=“ “ -надпись, которая появляется при
наведении мыши на рисунок веб-страницы
• alt=“ "-альтернативная надпись
Откроем файл с помощью Блокнота:
В режиме веб-страницы это будет
выглядеть так:
Можно ли избавиться от белой
полосы справа от рисунка?
• Да, этого можно добиться, включив еще один
параметр:
• align="left"- если мы хотим, чтобы рисунок
находился слева, а текст «облегал» его справа,
• или align=“right"- если мы хотим, чтобы рисунок
находился справа от текста. Тэг начинает
выглядеть так:
• <IMG src="./pic/1.png" align="left" border="0"
width="190" height="248" title="Рычик и Ласка"
alt="Рычик и Ласка">
В браузере это будет выглядеть так:
Текст прилип к рисунку, можно ли
избежать этого?
• Да, этого можно избежать, включив в
указанный тэг следующий параметр:
hspace="10" vspace="10",
устанавливающий для рисунка отступы от
текста по вертикали и по горизонтали:
<IMG src="./pic/1.png" align="left" border=0
width="190" height="248" hspace="10"
vspace="10", title="Рычик и Ласка"
alt="Рычик и Ласка">
В браузере это будет выглядеть так:
Используя тэг <H2> </H2> создадим заголовки 2-го
уровня для каждого абзаца:
Что дальше?
• Убедимся, что при наведении курсора мыши на
рисунок - появляется надпись, указанная в
параметре title=“ “ Остальные рисунки
вставляются аналогичным образом, меняются
только названия рисунков, и атрибуты,
указывающие размеры рисунка по горизонтали и
вертикали, определить их можно в Свойствах
рисунка при помощи правой кнопки мыши.
Методом копирования можно очень быстро
вставить все 9 рисунков.
В браузере это будет выглядеть так:
• Как видим, вставка рисунков привела к
нарушению разметки веб-страницы.
Возникла необходимость увеличения
высоты текста. Хотелось бы и заголовки
сделать цветными. Как этого добиться? По
современным представлениям
сайтостроения все визуальные настройки
веб-страницы должны храниться в
отдельном .css-файле –таблицах каскадных
стилей.
Вновь откроем Блокнот, вставим в него стилевое оформление для текста
– указание сделать его крупнее в 2 раза, заголовки 1-го уровня –синего
цвета, заголовки 2-го уровня-красного
BODY
{
font-size: 200%;
}
h1 {
font-size: 30px;
color: #336699;
}
h2 {
font-size: 20px;
color: red;
}
Сохраним этот файл в этой же папке под именем main.css
• В папке появился новый значок
• В головной части HTML-кода нужно
записать элемент LINK, в котором
указывается CSS-файл (в примере файл
main.css), относящийся к данной
гипертекстовой странице:
• <LINK rel="stylesheet" type="text/css" href="
main.css">
• Теперь браузер будет руководствоваться
указаниями стилевого файла main.css при
построении элементов HTML на экране.
Вот как это будет выглядеть в Блокноте:
Вот так это будет выглядеть в браузере
Пожалуй заголовок первого уровня бледноват, заголовки
обоих уровней нужно сделать крупнее.
С помощью Блокнота откроем стилевой файл main.css и
внесем необходимые изменения:
BODY
{
font-size: 200%;
}
h1 {
font-size: 40px;
color: #0000ff;
}
h2 {
font-size: 30px;
color: red;
}
В браузере это будет выглядеть так:
Можно ли избежать «рваного» правого края?
Применим для первого абзаца стиль
<P STYLE="text-align:justify;color:blue;"> ,
получим в браузере выравнивание по левому и правому краю, цвет
текста тоже изменился на синий:
Чуть подправив стилевое оформление для первого абзаца
<P STYLE="text-indent:30pt;text-align:justify;color:blue;">
мы получим отступ первой строки:
Честно говоря, не хочется копировать это стилевое оформление на
каждый абзац, поэтому мы сделаем изменения в файле main.css, и оно
распространится на все абзацы:
BODY
{font-size: 200%;
}
h1
{
font-size: 40px;
color: #0000ff;
}
h2
{
font-size: 30px;
color: red;
}
p
{
text-indent:30pt;
text-align:justify;
color:blue;
}
Вот так это будет выглядеть в браузере:
•
•
•
•
•
•
•
Шаблон презентации «Цветочная поляна»
Автор: Федотова Виктория Александровна, учитель начальных классов МОУ СОШ с.
Лохово Черемховского р-на Иркутской обл
.
Для оформления шаблона использовались программа Adobe Photoshop CS2
И векторный клипарт http://artwork.in.ua/vector/149-vektornyjj-klipart-cvetochnajapoljana.html
Автор
1/--страниц