Версия 18:05, 15 февраля 2012

Гіпермаркет Знань>>Інформатика>>Інформатика 8 клас>> Інформатика: Етапи створення веб-сайтів

Методичні рекомендації до предмету Інформатика 8 клас.

Тема «Мастер-класс: Основы создания web-сайтa».

Розгляд теми: Етапи створення веб-сайтів

                                                             Мастер-класс: Основы создания web-сайтa

Слайд № 1.

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

Слайд № 2.

WWW (World Wide Web, «Всемирная паутина») представляет собой единую среду, наполненную гипертекстовыми документами.
ЯЗЫК HTML – это универсальный язык,  который понимают все компьютеры во всем мире  (HYPER TEXT Markup Language),  это язык гипертекста, который используется для создания любого сайта.
HTML (файл) - документ, созданный  на основе  языка HTML.
Информация в Интернете организована в виде системы свя¬занных Web-страниц.
Web-страничка – документ,  основа которого HTML файл.
Страницы объединяются в сайты.
Web-cайт — это совокупность информационных единиц — страниц, объединенных общей целью.
Web-браузер –это программа, которая  общается с Web-сервером,  передает ему запросы, получает  HTML документы и показывает их пользователю.

Слайд № 3.

Для обращения к  ресурсам сети Интернет используются адреса URL
http: / / gumnaziya.narod.ru/html/nov.htm

Слайд № 4.

Для создания Web-сайта разработано много программ - Microsoft Office FrontPage 2003, Macromedia Dreamweawer и др.

Процесс создания и редактирования страницы сайта в Microsoft Office FrontPage 2003 очень нагляден, т.к. производится в режиме - «Что видишь, то и получаешь». Для создания простейшей  Web-странички можно воспользоваться и текстовым редактором «Блокнот».

Так как мастер-класс проводится в рамках фестиваля ЮНПРЕСС, то сегодня мы с Вами будем создавать сайт юного журналиста.

Слайд № 5.

Итак, основными этапами создания сайта являются:

1.    Зарождение идеи (с нашем случае - это фестиваль ЮНПРЕСС), обличение идеи в проект (мы будем создавать сайт «Азбука юного журналиста»).
2.    Разработка веб-дизайна.
3.    Верстка web-страничек.
4.    Размещение сайта в сети Интернет.
5.    Раскрутка и продвижение сайта.

Слайд № 6.

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

Слайд № 7.

Основные требования:

-   правильная компоновка информации на странице;
-   удобство   и   наглядность   представления   элементов управления и кнопок навигации;
-   соответствие определенному стилю и самобытность;
-   быстрая загрузка страницы;   
-   комфортное сочетание цветовой гаммы;     
-   учет интересов целевой аудитории.

 
Слайд № 8.

1. Создаем на локальном диске C в папке «Мастер класс» папку с именем press. В данной папке создаем еще две папки с именами images и html. В именах папок используем только английские строчные буквы. В папку images из папки Материалы для сайта копируем все файлы с расширением jpg.

2. Открываем  Microsoft Office FrontPage 2003: Пуск→Программы→ Microsoft Office→ Microsoft Office FrontPage 2003→Файл→Создать→ Пустая страница.

 
3. В меню Таблица выбираем пункт Макетные таблицы и ячейки. Выбираем макет таблицы, содержащий верхний колонтитул, нижний колонтитул, столбец слева, столбец справа, четыре строки:

Слайд № 9.

4. В верхнюю ячейку нашей таблицы добавляем созданное в Фотошопе logo нашего сайта. Для этого выделяем верхнюю ячейку нашего макета, вызываем контекстное меню, щелкнув правой кнопкой мыши, выбираем Свойства ячейки, ставим галочку Использовать фоновый рисунок и выбираем из нашей папки images файл logo.jpg.
 


5. Закрасим цветом Hex={40,00,40} левую, правую и нижнюю ячейки макетной таблицы. Для этого выделяем ячейку, щелкаем правой кнопкой мыши, вызываем контекстное меню, открываем пункт Свойства ячейки. Нажимаем цвет. В раскрывшемся окошке выбираем Дополнительные цвета. Вводим значение цвета - Hex={40,00,40}. ОК.

 
Слайд № 10.

6. Задаем ширину нашей таблицы. Для этого в меню выбираем пункт Таблица → Свойства таблицы →Таблица.

 
В открывшимся окне ставим галочку Задать ширину в точках и вводим число 1100, ставим Выравнивание по центру:

 
Слайд № 11.

Выделяем левую ячейку и задаем ей ширину в точках 150, устанавливаем выравнивание по центру. Ту же ширину и выравнивание устанавливаем и для правой ячейки.
 


7. Заполняем фоном fon.jpg из нашей папки images четыре ячейки по центру. Для этого выделяем их вместе. Потом щелкаем правой кнопкой мыши и в открывшемся контекстном меню выбираем Свойства ячейки. Ставим галочку Использовать фоновый рисунок и нажав Обзор указываем файл, из папки images fon.jpg, ставим галочку Задать ширину ячеек в точках 500.
 

Слайд  № 12.

8. Выделяем верхнюю ячейку таблицы и в Формате ячейки справа указываем границу по ширине 10, цвет выбираем розовый, применить к -нижней границе.

 
Делаем тоже само, для нижней макетной ячейки но по верхней границе.

9. В ячейке слева печатаем пункты нашего меню: Главная, Уроки, Об авторе (тип шрифта по вашему усмотрению, размер 18 пт.).

 
10. В нижней ячейке сайта печатаем название организации, которой принадлежит сайт, например МОУ «Борисоглебская гимназия № 1».
11. Наш шаблон сайта готов! Теперь сохраняем данную страницу под именем index.html в нашу папку press. Файл→Сохранить как→press/index.html
12.Делаем копии страницы, т.е. сохраняем текущую страницу под именем uroki.html в папке html нашего сайта: Файл→Сохранить как→press/html/uroki.html, затем под именами stat1.html, stat2.html, avt. html:
 

 
Слайд № 13.

13. Открываем все созданные нами страницы:

14. В главную страницу нашего сайта index.html вставим с вами фрагменты статей юных журналистов. При этом полные статьи будут открываться у нас в новом окне. Для этого: откроем файл со статьёй из папки Материалы для сайта Тяжела и неказиста жизнь начинающего журналиста.doc, выделим первые два абзаца текста, скопируем их в буфер обмена и вставим в центральную ячейку нашей главной страницы index.html. После текста напечатаем Читать далее>>
 


Слайд № 14.

15. А весть текст полностью вставим на страницу stat1.html, объединив 3 центральные ячейки в одну.

карт
 
16. Делаем то же самое и со статьей Как мы делаем газету.doc, первый абзац статьи вставляем в главную страницу сайта index.html, а полный текст статьи – в страницу stat2.html.
17. На страничку uroki.html вставляем текст из файла Уроки.doc.
18. На страничке avt.html печатаем: Над проектом работали: Ф.И.О. и т.д.
19. На главной страничке сайта index.html в ячейку справа вставим три фотографии. Фотографии заранее обработаны в Фотошопе. Вставляем миниатюры 1m.jpg, 2m.jpg и 3m.jpg в левую ячейку: Файл→Вставка→Рисунок →Из файла →По центру→Inter…
 
 карт

карт

Слайд № 15.

20. Вставим гиперссылки на миниатюры фотографий. Для этого щелкаем левой кнопкой мыши по первой фотографии с рябиной и вызываем контекстное меню, щелкнув правой кнопкой мыши. Нажимаем пункт Гиперссылка.

карт

Выбираем файл 1.jpg из нашей папки images, который будет открываться при нажатии на 1 миниатюру. Нажимаем пункт Выбор рамки… и указываем Новое окно, нажимаем ОК. Гиперссылка поставлена! Делаем аналогично для миниатюры 2 (2.jpg) и 3 (3.jpg). На страничку Об авторе вставляем 4 миниатюру (4m.jpg) и добавляем гиперссылку на большую фотографию (4.jpg).
 
карт

Слайд № 16.

21. На главной странице index.html  делаем 5 гиперссылок. Выделяем текст слова Главная, вызываем контекстное меню → Гиперссылка → выбираем файл index.html и нажимаем ОК. Цвет нашего пункта меню Главная стал синий, а вид подчеркнутый. Возвращаем белый цвет, подчеркивание убираем. Аналогичным образом ставим гиперссылки на пункты меню Уроки и Об авторе,  также на слова Читать далее>>. Так же делаем гиперссылки и на четырех других страницах нашего сайта. Сохраняем все наши страницы, нажимая на изображение дискетки. Сворачиваем Microsoft Office FrontPage 2003, нажав на черточку  вверху окна.

карт
 
22. Заходим в папку press открываем файл  index.html и проверяем работу каждой гиперссылки нашего сайта. Если все ссылки работают, фотографии открываются в новом окне - НАШ САЙТ ГОТОВ!

карт

Слайд № 17.

Перед опубликованием сайта в Интернете необходимо:

1)    Просмотреть страницы сайта в различных браузерах;
2)    Проверить:

-   Нормально ли читается текст на выбранном фоне;
-   Правильно ли расположены рисунки;
-   Правильно ли работают гиперссылки.

Слайд № 18.

В качестве основных ошибок при создании Web-страниц можно отметить:

•      неудачное цветовое решение;
•      неработающие ссылки;
•      слабое информационное наполнение;
•      плохая навигация, неудобное перемещение по сайту;
•      неработающие разделы;
•      отсутствие контактной информации;
•      только контактная информация.

Слайд № 19.
 

карт

23. Самостоятельно на главной странице сайта index.html в третьей центральной  ячейке напишите фрагмент заметки «Моё мнение о мастер-классе «Основы создания web-сайта».
Создайте новую страничку сайта под именем zametka.html, на которой напечатайте полный текст заметки, указав Ваше имя, фамилию, класс, школу. Вставьте все необходимые гиперссылки.

карт

Использованные Интернет-источники:

1.    http:/ /jgk.ucoz.ru /load/15-1-0-94
2.    http:/ /jgk.ucoz.ru
3.    МедиаШкола ЮНПРЕСС (школа юного журналиста):
http:/ /www.mediashkola.ru/bukv.html
4.    Букварь начинающего журналиста
http:/ /allday.ru/2008/10/10/klipart-special-backgrounds.html

Надіслано учителем інформатики Міжнародного ліцею "Гранд" Чебаном Л.І.