Главная / Информатика / Презентация по информатике "Создание Веб-страницы на примере сказки В. Чаплиной «Рычик и Ласка»

Презентация по информатике "Создание Веб-страницы на примере сказки В. Чаплиной «Рычик и Ласка»

Создание Веб-страницы на примере сказки В. Чаплиной «Рычик и Ласка» Автор: Хо...
Хохлов Владислав Михайлович, учитель информатики МБОУ «Кормиловский лицей», v...
Цель: Создание Веб-странички с использованием текстового редактора Блокнот и ...
Создавать HTML –странички можно в любом текстовом редакторе, кроме Word. Для ...
Создадим папку Веб страничка и сохраним в ней файл под именем index. htm или ...
Вместо блокнотовского значка появится Когда HTML –страничку нужно запустить н...
Структура HTML-документа   Веб-страничка   ……………
Откроем файл с помощью Блокнота и скопируем в него полностью все содержимое т...
Дважды щелкнем на левую кнопку мыши и запустим нашу веб-страницу, получим сл...
Сплошной текст читается плохо, поэтому разделим его на абзацы с помощью непар...
Дважды щелкнув на файле index.htm откроем веб-страницу и получим вид, показа...
У каждой веб-страницы должен быть заголовок. Заголовок вставляется при помощи...
В режиме веб-страницы это будет выглядеть так:
Для обработки рисунков мы воспользуемся стандартной программой Microsoft Offi...
Создадим в нашей папке Веб-страница хранилище для наших рисунков- папку Pic. ...
При работе в этой программе мы имеем возможность выполнить автоподстройку, об...
Сохраним рисунки в папке Pic под названиями 1.png, 2.png,…. ,9.png. Рисунки в...
Вставка первого рисунка осуществляется с помощью тэга:  Что означают параметр...
Откроем файл с помощью Блокнота:
В режиме веб-страницы это будет выглядеть так:
Можно ли избавиться от белой полосы справа от рисунка? Да, этого можно добить...
В браузере это будет выглядеть так:
Текст прилип к рисунку, можно ли избежать этого? Да, этого можно избежать, вк...
В браузере это будет выглядеть так:
Используя тэг   создадим заголовки 2-го уровня для каждого абзаца:
Что дальше? Убедимся, что при наведении курсора мыши на рисунок - появляется ...
В браузере это будет выглядеть так:
Как видим, вставка рисунков привела к нарушению разметки веб-страницы. Возник...
Вновь откроем Блокнот, вставим в него стилевое оформление для текста – указан...
Сохраним этот файл в этой же папке под именем main.css
В папке появился новый значок В головной части HTML-кода нужно записать элеме...
Вот как это будет выглядеть в Блокноте:
Вот так это будет выглядеть в браузере Пожалуй заголовок первого уровня бледн...
С помощью Блокнота откроем стилевой файл main.css и внесем необходимые измене...
В браузере это будет выглядеть так: Можно ли избежать «рваного» правого края?
Применим для первого абзаца стиль  , получим в браузере выравнивание по левом...
Чуть подправив стилевое оформление для первого абзаца  мы получим отступ перв...
Честно говоря, не хочется копировать это стилевое оформление на каждый абзац,...
Вот так это будет выглядеть в браузере:
Шаблон презентации «Цветочная поляна»   Автор: Федотова Виктория Александровн...
1 из 40

Описание презентации по отдельным слайдам:

№ слайда 1 Создание Веб-страницы на примере сказки В. Чаплиной «Рычик и Ласка» Автор: Хохло
Описание слайда:

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

№ слайда 2 Хохлов Владислав Михайлович, учитель информатики МБОУ «Кормиловский лицей», vlad
Описание слайда:

Хохлов Владислав Михайлович, учитель информатики МБОУ «Кормиловский лицей», vladislav-khkhlv@rambler.ru Сайт Кормиловского лицея http://oulic.kormil.obr55.ru/

№ слайда 3 Цель: Создание Веб-странички с использованием текстового редактора Блокнот и таб
Описание слайда:

Цель: Создание Веб-странички с использованием текстового редактора Блокнот и таблиц каскадного стиля CSS Исходные материалы: Отсканированная детская книга В. Чаплиной «Рычик и ласка»

№ слайда 4 Создавать HTML –странички можно в любом текстовом редакторе, кроме Word. Для это
Описание слайда:

Создавать HTML –странички можно в любом текстовом редакторе, кроме Word. Для этой цели годится даже Блокнот. Только когда сохраняешь документ, нужно в Блокноте в панели меню Файл выбрать опцию Сохранить как

№ слайда 5 Создадим папку Веб страничка и сохраним в ней файл под именем index. htm или ind
Описание слайда:

Создадим папку Веб страничка и сохраним в ней файл под именем index. htm или index. html

№ слайда 6 Вместо блокнотовского значка появится Когда HTML –страничку нужно запустить на в
Описание слайда:

Вместо блокнотовского значка появится Когда HTML –страничку нужно запустить на выполнение в Internet Explorer, на нее нужно дважды щелкнуть левой кнопкой мыши, когда ее нужно редактировать, нужно использовать правую кнопку мыши и опцию Открыть с помощью и выбрать программу Блокнот.

№ слайда 7 Структура HTML-документа   Веб-страничка   ……………
Описание слайда:

Структура HTML-документа <HTML> <HEAD> <TITLE>Веб-страничка</TITLE> </HEAD> <BODY> …………… </BODY> </HTML>

№ слайда 8 Откроем файл с помощью Блокнота и скопируем в него полностью все содержимое текс
Описание слайда:

Откроем файл с помощью Блокнота и скопируем в него полностью все содержимое текстового файла со сказкой в тело веб-страницы (скопируется естественно только текстовая часть файла) между тэгами <BODY> ….. </BODY>

№ слайда 9 Дважды щелкнем на левую кнопку мыши и запустим нашу веб-страницу, получим следу
Описание слайда:

Дважды щелкнем на левую кнопку мыши и запустим нашу веб-страницу, получим следующий вид:

№ слайда 10 Сплошной текст читается плохо, поэтому разделим его на абзацы с помощью непарног
Описание слайда:

Сплошной текст читается плохо, поэтому разделим его на абзацы с помощью непарного тэга <P>. Каждый абзац любой веб-страницы должен содержать не больше 5-6 строк

№ слайда 11 Дважды щелкнув на файле index.htm откроем веб-страницу и получим вид, показанны
Описание слайда:

Дважды щелкнув на файле index.htm откроем веб-страницу и получим вид, показанный внизу слайда. На самом деле абзацы получились по 2-3 строки, но мы должны помнить, что тексту придется потесниться, когда мы начнем вставлять рисунки.

№ слайда 12 У каждой веб-страницы должен быть заголовок. Заголовок вставляется при помощи тэ
Описание слайда:

У каждой веб-страницы должен быть заголовок. Заголовок вставляется при помощи тэга <Hn>, где n=1,2,…,6 Сделаем заголовок нашей Веб-страницы самого крупного размера <H1>: <H1>Рыча и Ласка </H1>

№ слайда 13 В режиме веб-страницы это будет выглядеть так:
Описание слайда:

В режиме веб-страницы это будет выглядеть так:

№ слайда 14 Для обработки рисунков мы воспользуемся стандартной программой Microsoft Office
Описание слайда:

Для обработки рисунков мы воспользуемся стандартной программой Microsoft Office Picture Manager

№ слайда 15 Создадим в нашей папке Веб-страница хранилище для наших рисунков- папку Pic. Поо
Описание слайда:

Создадим в нашей папке Веб-страница хранилище для наших рисунков- папку Pic. Поочередно выделяем в текстовом файле со сказкой все 9 рисунков, копируем их правой кнопкой мыши, открываем программу Picture Manager и поочередно вставляем их в эту программу.

№ слайда 16 При работе в этой программе мы имеем возможность выполнить автоподстройку, обрез
Описание слайда:

При работе в этой программе мы имеем возможность выполнить автоподстройку, обрезку рисунка, изменение его размеров, сжатие и другие действия. Изменим размеры рисунков таким образом, чтобы в «книжном» варианте рисунок был высотой 300 пикселей, а в «альбомном»-250

№ слайда 17 Сохраним рисунки в папке Pic под названиями 1.png, 2.png,…. ,9.png. Рисунки в эт
Описание слайда:

Сохраним рисунки в папке Pic под названиями 1.png, 2.png,…. ,9.png. Рисунки в этом формате тяжеловесны, но в этом графическом редакторе есть возможность сжатия, можно открыть эти рисунки с помощью обыкновенного Paint, и сохранить как в формате .jpg.

№ слайда 18 Вставка первого рисунка осуществляется с помощью тэга:  Что означают параметры э
Описание слайда:

Вставка первого рисунка осуществляется с помощью тэга: <IMG src="./pic/1.png" border="0" width="190" height="248" title="Рычик и Ласка" alt="Рычик и Ласка"> Что означают параметры этого тэга? border="0" -отсутствие границы рисунка width="190" ширина рисунка height="248" –высота рисунка title=“ “ -надпись, которая появляется при наведении мыши на рисунок веб-страницы alt=“ "-альтернативная надпись

№ слайда 19 Откроем файл с помощью Блокнота:
Описание слайда:

Откроем файл с помощью Блокнота:

№ слайда 20 В режиме веб-страницы это будет выглядеть так:
Описание слайда:

В режиме веб-страницы это будет выглядеть так:

№ слайда 21 Можно ли избавиться от белой полосы справа от рисунка? Да, этого можно добиться,
Описание слайда:

Можно ли избавиться от белой полосы справа от рисунка? Да, этого можно добиться, включив еще один параметр: align="left"- если мы хотим, чтобы рисунок находился слева, а текст «облегал» его справа, или align=“right"- если мы хотим, чтобы рисунок находился справа от текста. Тэг начинает выглядеть так: <IMG src="./pic/1.png" align="left" border="0" width="190" height="248" title="Рычик и Ласка" alt="Рычик и Ласка">

№ слайда 22 В браузере это будет выглядеть так:
Описание слайда:

В браузере это будет выглядеть так:

№ слайда 23 Текст прилип к рисунку, можно ли избежать этого? Да, этого можно избежать, включ
Описание слайда:

Текст прилип к рисунку, можно ли избежать этого? Да, этого можно избежать, включив в указанный тэг следующий параметр: hspace="10" vspace="10", устанавливающий для рисунка отступы от текста по вертикали и по горизонтали: <IMG src="./pic/1.png" align="left" border=0 width="190" height="248" hspace="10" vspace="10", title="Рычик и Ласка" alt="Рычик и Ласка">

№ слайда 24 В браузере это будет выглядеть так:
Описание слайда:

В браузере это будет выглядеть так:

№ слайда 25 Используя тэг   создадим заголовки 2-го уровня для каждого абзаца:
Описание слайда:

Используя тэг <H2> </H2> создадим заголовки 2-го уровня для каждого абзаца:

№ слайда 26 Что дальше? Убедимся, что при наведении курсора мыши на рисунок - появляется над
Описание слайда:

Что дальше? Убедимся, что при наведении курсора мыши на рисунок - появляется надпись, указанная в параметре title=“ “ Остальные рисунки вставляются аналогичным образом, меняются только названия рисунков, и атрибуты, указывающие размеры рисунка по горизонтали и вертикали, определить их можно в Свойствах рисунка при помощи правой кнопки мыши. Методом копирования можно очень быстро вставить все 9 рисунков.

№ слайда 27 В браузере это будет выглядеть так:
Описание слайда:

В браузере это будет выглядеть так:

№ слайда 28 Как видим, вставка рисунков привела к нарушению разметки веб-страницы. Возникла
Описание слайда:

Как видим, вставка рисунков привела к нарушению разметки веб-страницы. Возникла необходимость увеличения высоты текста. Хотелось бы и заголовки сделать цветными. Как этого добиться? По современным представлениям сайтостроения все визуальные настройки веб-страницы должны храниться в отдельном .css-файле –таблицах каскадных стилей.

№ слайда 29 Вновь откроем Блокнот, вставим в него стилевое оформление для текста – указание
Описание слайда:

Вновь откроем Блокнот, вставим в него стилевое оформление для текста – указание сделать его крупнее в 2 раза, заголовки 1-го уровня –синего цвета, заголовки 2-го уровня-красного BODY { font-size: 200%; } h1 { font-size: 30px; color: #336699; } h2 { font-size: 20px; color: red; }

№ слайда 30 Сохраним этот файл в этой же папке под именем main.css
Описание слайда:

Сохраним этот файл в этой же папке под именем main.css

№ слайда 31 В папке появился новый значок В головной части HTML-кода нужно записать элемент
Описание слайда:

В папке появился новый значок В головной части HTML-кода нужно записать элемент LINK, в котором указывается CSS-файл (в примере файл main.css), относящийся к данной гипертекстовой странице: <LINK rel="stylesheet" type="text/css" href=" main.css"> Теперь браузер будет руководствоваться указаниями стилевого файла main.css при построении элементов HTML на экране.

№ слайда 32 Вот как это будет выглядеть в Блокноте:
Описание слайда:

Вот как это будет выглядеть в Блокноте:

№ слайда 33 Вот так это будет выглядеть в браузере Пожалуй заголовок первого уровня бледнова
Описание слайда:

Вот так это будет выглядеть в браузере Пожалуй заголовок первого уровня бледноват, заголовки обоих уровней нужно сделать крупнее.

№ слайда 34 С помощью Блокнота откроем стилевой файл main.css и внесем необходимые изменения
Описание слайда:

С помощью Блокнота откроем стилевой файл main.css и внесем необходимые изменения: BODY { font-size: 200%; } h1 { font-size: 40px; color: #0000ff; } h2 { font-size: 30px; color: red; }

№ слайда 35 В браузере это будет выглядеть так: Можно ли избежать «рваного» правого края?
Описание слайда:

В браузере это будет выглядеть так: Можно ли избежать «рваного» правого края?

№ слайда 36 Применим для первого абзаца стиль  , получим в браузере выравнивание по левому и
Описание слайда:

Применим для первого абзаца стиль <P STYLE="text-align:justify;color:blue;"> , получим в браузере выравнивание по левому и правому краю, цвет текста тоже изменился на синий:

№ слайда 37 Чуть подправив стилевое оформление для первого абзаца  мы получим отступ первой
Описание слайда:

Чуть подправив стилевое оформление для первого абзаца <P STYLE="text-indent:30pt;text-align:justify;color:blue;"> мы получим отступ первой строки:

№ слайда 38 Честно говоря, не хочется копировать это стилевое оформление на каждый абзац, по
Описание слайда:

Честно говоря, не хочется копировать это стилевое оформление на каждый абзац, поэтому мы сделаем изменения в файле 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; }

№ слайда 39 Вот так это будет выглядеть в браузере:
Описание слайда:

Вот так это будет выглядеть в браузере:

№ слайда 40 Шаблон презентации «Цветочная поляна»   Автор: Федотова Виктория Александровна,
Описание слайда:

Шаблон презентации «Цветочная поляна»   Автор: Федотова Виктория Александровна, учитель начальных классов МОУ СОШ с. Лохово Черемховского р-на Иркутской обл . Для оформления шаблона использовались программа Adobe Photoshop CS2 И векторный клипарт http://artwork.in.ua/vector/149-vektornyjj-klipart-cvetochnaja-poljana.html  

Презентация по информатике "Создание Веб-страницы на примере сказки В. Чаплиной «Рычик и Ласка»
  • Информатика
Описание:

Цель: Создание Веб-странички с использованием текстового редактора Блокнот и таблиц каскадного стиля CSS

 

       Исходные материалы: Отсканированная детская книга  В. Чаплиной «Рычик и ласка»

Создавать HTML –странички можно в любом текстовом редакторе, кроме Word. Для этой цели годится даже Блокнот. Только когда сохраняешь документ, нужно в Блокноте в панели меню Файл выбрать опцию Сохранить как

 

Создадим папку Веб страничка и сохраним в ней файл под именем index. htm или index. html 

Когда HTML –страничку нужно запустить на выполнение в InternetExplorer, на нее нужно дважды щелкнуть левой кнопкой мыши, когда ее нужно редактировать, нужно использовать правую кнопку мыши и опцию Открыть с помощью и выбрать программу Блокнот

 

 

 

 

 
Автор Хохлов Владислав Михайлович
Дата добавления 03.01.2015
Раздел Информатика
Подраздел
Просмотров 368
Номер материала 21329
Скачать свидетельство о публикации

Оставьте свой комментарий:

Введите символы, которые изображены на картинке:

Получить новый код
* Обязательные для заполнения.


Комментарии:

↓ Показать еще коментарии ↓