Создание Веб-страницы на примере сказки В. Чаплиной «Рычик и Ласка» Автор: Хохлов Владислав Михайлович, учитель информатики МКОУ «Кормиловский лицей» • Хохлов Владислав Михайлович, учитель информатики МКОУ «Кормиловский лицей», 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/--страниц