Гіпермаркет Знань>>Інформатика>>Інформатика 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, на которой напечатайте полный текст заметки, указав Ваше имя, фамилию, класс, школу. Вставьте все необходимые гиперссылки.

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