Просмотр — Гипермаркет знаний

KNOWLEDGE HYPERMARKET
Мастер-класс: Основы создания web-сайтa
У вас нет разрешения на действие «исправление этой страницы» по следующей причине:
Запрошенное действие могут выполнять только участники из группы giper.
Вы можете просмотреть и скопировать исходный текст этой страницы:
<metakeywords>Гіпермаркет Знань - перший в світі!, Гіпермаркет Знань, Інформатика 8 клас, клас, урок, на Тему,  Етапи створення веб-сайтів, Методичні рекомендації</metakeywords> 

'''[[Гіпермаркет Знань - перший в світі!|Гіпермаркет Знань]]&gt;&gt;[[Інформатика|Інформатика]]&gt;&gt;[[Інформатика 8 клас|Інформатика 8 клас]]&gt;&gt; Інформатика: Етапи створення веб-сайтів''' 

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

Тема '''«[[Етапи створення веб-сайтів|Мастер-класс: Основы создания web-сайтa]]»'''. 

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



'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Мастер-класс: Основы создания web-сайтa'''<br><br>'''Слайд № 1.'''

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

<br>'''Слайд № 2.'''

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

'''<br>Слайд № 3.'''

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

<br>'''Слайд № 4.'''

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

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

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

<br>'''Слайд № 5.'''

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

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

'''<br>Слайд № 6.'''

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



карт

<br>'''Слайд № 7.'''

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

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



карт<br>'''&nbsp;<br>Слайд № 8.'''

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

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



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

карт <br><br>'''Слайд № 9.'''

4. В верхнюю ячейку нашей таблицы добавляем созданное в Фотошопе logo нашего сайта. Для этого выделяем верхнюю ячейку нашего макета, вызываем контекстное меню, щелкнув правой кнопкой мыши, выбираем Свойства ячейки, ставим галочку Использовать фоновый рисунок и выбираем из нашей папки images файл logo.jpg. <br>&nbsp;<br>карт<br><br>5. Закрасим цветом Hex={40,00,40} левую, правую и нижнюю ячейки макетной таблицы. Для этого выделяем ячейку, щелкаем правой кнопкой мыши, вызываем контекстное меню, открываем пункт Свойства ячейки. Нажимаем цвет. В раскрывшемся окошке выбираем Дополнительные цвета. Вводим значение цвета - Hex={40,00,40}. ОК. 



карт<br>'''&nbsp;<br>Слайд № 10.'''<br><br>6. Задаем ширину нашей таблицы. Для этого в меню выбираем пункт Таблица → Свойства таблицы →Таблица. 

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



карт<br>'''&nbsp;<br>Слайд № 11.'''

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

карт<br>'''<br>Слайд&nbsp; № 12.'''

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

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

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



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

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

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

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

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



карт<br><br>'''Слайд № 15.'''

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

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

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

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

карт <br>'''<br>Слайд № 17.'''

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

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

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

<br>'''Слайд № 18.'''

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

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

'''<br>Слайд № 19.'''<br>&nbsp;

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

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

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

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

[[Category:Етапи_створення_веб-сайтів._Методичні_рекомендації]]
Возврат к странице Мастер-класс: Основы создания web-сайтa.
Источник — «http://edufuture.biz/index.php?title=%D0%9C%D0%B0%D1%81%D1%82%D0%B5%D1%80-%D0%BA%D0%BB%D0%B0%D1%81%D1%81:_%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F_web-%D1%81%D0%B0%D0%B9%D1%82a»
При использовании материалов ресурса
ссылка на edufuture.biz обязательна (для интернет ресурсов - гиперссылка).
edufuture.biz 2008-© Все права защищены.
Сайт edufuture.biz является порталом, в котором не предусмотрены темы политики, наркомании, алкоголизма, курения и других "взрослых" тем.
Разработка - Гипермаркет знаний 2008-
Ждем Ваши замечания и предложения на email:
По вопросам рекламы и спонсорства пишите на email: