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

6. Использование графики может дополнительно привлечь пользователей. Но необходимо помнить о времени загрузки вашей страницы, которое определяется количеством и объемом графической информации. Красивая картинка не произведет никакого впечатления, ели для того, чтобы ее увидеть, придется долго ждать, пока она загрузится.

Тестирование

Перед тем как выставлять свои Web-страницы на сервер необходимо их протестировать. Созданные документы должны пройти «локальную проверку» в пределах вашего жесткого диска. При проверке используйте разные браузеры. Вы увидите различия, которые могут оказаться довольно существенными.

В рамках тестирования необходимо сделать следующее:

1. Проверить правописание. Выполните автоматизированную проверку правописания текста (для этого можно использовать Microsoft Word) или попросите кого-нибудь выполнить корректуру.

2. Проверит навигацию. Убедитесь, что на каждой странице присутствуют необходимые средства навигации, все ссылки работают правильно.

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

4. Проверить, допустимо ли время загрузки.

5. Осуществить проверку ваших Web-страниц посторонним лицом. Попросите кого-нибудь, кто не знаком с вашими документами, пройти их от начала до конца. Иногда при этом выясняются такие факты, каких вы сами ни за что бы не заметили.

Сделать отчет о выполненной работе. Отчет о практической работе должен содержать:

1. Тему работы 2. Цель

3. Оснащение

4. Результаты теоретической части работы.

5. Результаты практической части работы.

6. Вывод по работе.



Тема 1.12 Средства создания HTML - файлов (Web - редакторы) - 10 часов

Практическая работа № 126, 127. Создание Web-сайта с помощью Microsoft Word

Цель: освоение приемов создания Web-страниц и Web-сайтов с помощью текстового процессора Microsoft Word: оформление дизайна страницы; организация внутренних гиперссылок; организация внешних гиперссылок.

Теоретический материал

1. Что такое Web - сайт, Web - страница, гиперссылка?

Веб-сайт (Website) - это объединённая под одним адресом (доменным именем) совокупность документов частного лица или организации. По умолчанию подразумевается, что сайт располагается в сети Интернет, но он так же может публиковаться в локальной сети компании - в сети Интранет. Веб-сайты иначе называют Интернет-представительством человека или организации. Когда говорят "своя страничка в Интернет", то подразумевается целый веб-сайт или личная страница в составе чужого сайта.

Веб-страница - это логическая единица интернета, однозначно определяемая адресом (URL). Можно сказать, что веб состоит из сайтов, а сайты, в свою очередь - из страниц. Веб-страницы могут включать картинки, музыку, видео, скрипты и др.

Гиперссылка (hyperreference)-- часть гипертекстового документа, ссылающаяся на другой элемент (команда, текст, заголовок, примечание, изображение) в самом документе, на другой объект (файл, директория, приложение), расположенный на локальном компьютере или в компьютерной сети, либо на элементы этого объекта.

2. Как и какими средствами создаются Web - страницы?

Собрание страниц, объединенных некоторой общей тематикой и помещенных, как правило, на одном компьютере, называют Web-узлом или сайтом. Узлы Web подобны книгам, а Web-страницы - страницам этих книг. Компьютеры, на которых размещаются сайты, а также программы, обеспечивающие поддержку сайтов, называются серверами. На одном сервере может размещаться множество Web-узлов или сайтов.

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

HTML - HyperText Markup Language (Язык разметки гипертекста) представляет собой довольно простой набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части - заголовки, абзацы, таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране.

3. Какие существуют виды навигационной схемы Web - сайтов?

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

Существует много вариантов организации навигационной схемы. Рассмотрим два полярных подхода. Первый из них дает возможность пользователю перемещаться по иерархии страниц только вверх или вниз без возможности перехода между страницами одного иерархического уровня. При такой схеме навигации для перехода к странице, расположенной на другой ветви иерархии, необходимо вернуться назад, и лишь затем, перейдя на нужную ветвь, перемещаться по дереву вниз. Заблудиться на Web-узле с такой структурой тяжело, но и для перехода к нужной информации требуется много времени.

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

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

1. Примеры оформления Web - страниц.

Просматривая Web-узлы в Интернете, вы, вероятно, обращали внимание на то, что страницы содержат определенные элементы оформления. Это -- заголовки, фоновое изображение, информация для контактов, графические изображения, панели ссылок, таблицы.

2. Создание гиперссылок.

Гиперссылки предназначены для перемещения между страницами текущего Web-узла, а также на другие узлы в поисках нужной информации. Они могут указывать на текст, графические изображения, страницы других Web-узлов в сети Интернет, документы Microsoft Office, закладки, размещенные на этой же странице, на других страницах Web-узла или внутри документов, локальные файлы вашего компьютера, адреса электронной почты для доставки корреспонденции и т.д. При ссылке на файлы Microsoft Office автоматически запускается соответствующая программа и открывается файл, на который указывает ссылка. Если страница, на которой создается ссылка, является фреймом (т.е. разбита с помощью рамок на несколько областей), можно указать, в какую область фрейма загружать страницу, на которую указывает ссылка.

В качестве гиперссылки можно использовать не только текстовую информацию, но и графическое изображение или отдельные его части, называемые активными областями. Для создания на изображении активных областей используются кнопки панели инструментов Рисунки (Pictures).

Задание

В данной работе вы реализуете проект сайта, по подготовленной теме.

1.Открыть текстовый процессор Word.

2.Создать таблицу (образец) на весь лист

Роза
Букеты из роз
Виды роз
Видео о розе
Легенда о розах
Лечебные свойства розы

3. Придумать дизайн страницы.

Разметка страницы > Цвет страницы > Способы заливки

4.Сохранить файл.

5.Этот же файл нужно сохранить 6 раз изменяя только заголовки. У вас получится 6 файлов: Розы - главная страница, Букеты из роз, Виды роз, Видео о розе, Легенда о розах, Лечебные свойства розы - обычные страницы.

Файл > Сохранить как > Имя файла.

6.Теперь нужно сохранить все эти файлы как web-страницу.

Файл > Сохранить как > Тип файла: web-страница

7.После сохранения всех файлов, нужно создать гиперссылку для главной страницы. Для этого web-страницу нужно открыть с помощью Microsoft Word (Нажать на правую кнопку мыши > Открыть с помощью > Microsoft Word)

Выделить разделы и открыть пункт Вставка > Гиперссылка > Выбрать нужный файл > Ок. (Например, выделить раздел Лечебные свойства розы, выбрать пункт Вставка > Гиперссылка > Лечебные свойства розы > Ок). А для других файлов нужно внизу написать слово Назад и сделать гиперссылку на главную страницу.

Сделать отчет о выполненной работе. Отчет о практической работе должен содержать:

1. Тему работы

2. Цель

3. Оснащение

4. Результаты теоретической части работы.

5. Результаты практической части работы.

6. Вывод по работе

Практическая работа № 128 - 131 (4 часа). Тема: Создание web-сайтов

Цель работы: создание студентом своего сайта на бесплатном хостинге

Задание 1. Выбор темы

Выберите тему своего веб-сайта из предложенных или предложите свою:

1. Персональный сайт

2. Моё хобби

3. Сайт группы

4. Сайт какого-то другого объединения людей

5. Сайт организации (любой, лишь бы была информация)

6. Тематический сайт (на какую-то тему)

7. Сайт о какой-то дисциплине, преподаваемой в техникуме

После выбора темы сообщите ее преподавателю. Желательно, чтобы темы сайтов не совпадали.

В Word'е или на листочке сделайте структуру сайта

Примеры структур:

или:

Сайт организации:

1. Основная страница

2. Новости

3. Контактная информация

4. Область деятельности

5. Рекламный лист

6. Фотоальбом: 6.1. Производимые товары, 6.2. Вид здания снаружи, 6.3. Офис

7. Ссылки

8. Гостевая книга

Задание 2. Отбор информации по теме сайта

Создайте в своей папке папку Мой сайт и сохраняйте туда собранную информацию

2.1. Персональный сайт

В Word сделать документ, содержащий информацию о Вас: биография (год рождения, школа, награды, участие в мероприятиях и т.д.), интересы (или Хобби) - чем Вы увлекаетесь, еще что-то

В папке Мой сайт сделайте папку Фотоальбом и скопируйте туда свои фотографии, которые хотите выложить.

2.2. Сайт организации, предприятия

Информацию по фирмам и предприятиям (йошкар-олинским) можно взять здесь:

Каталоги:

http://www.marimedia.ru/company_catalogue - выбрать, где достаточно много информации (например, хорошее предприятие Винтаж http://www.marimedia.ru/company/13717/?directory_cat_id=2)

Информация о Республике Марий Эл - каталог в Контакте

Статья о Йошкар-Оле в Википедии

Отобранные предприятия:

Балетная студия "РЕВЕРАНС" - http://vkontakte.ru/club8974927

2.3. Тематический сайт:

Гостиничный бизнес в Йошкар-Оле

Транспорт Йошкар-Олы

Жилищно-коммунальное хозяйство Йошкар-Олы

Кино и видео в Йошкар-Оле

Задание 3. Создание сайта

Зайдите на сайт http://www.ucoz.ru и зарегистрируйтесь там (кнопка Регистрация вверху сайта). Запишите на бумажку свой e-mail и пароль.

На сайте http://www.ucoz.ru введите e-mail и пароль в соответствующие текстовые поля в правом верхнем углу страницы. Вы попали в так называемый Вебтоп - оболочку для создания и работы с Вашими сайтами.

Нажмите кнопку Создать сайт (Create a website).

Введите адрес своего сайта и нажмите ОК.

Сделайте описание сайта - нажмите на строку с описанием и введите свое.

Перейдите к редактированию сайта.

Задание 4. Работа с сайтом

Выберите дизайн сайта.

Отключите функцию Человеко-понятный URL.

Добавьте сайт в каталог Ucoz'а.

Персональный сайт

В качестве образца можете взять мой сайт http://abolshakov.ucoz.ru, или любой другой персональный сайт (расположены в каталоге Ucoz'а по адресу

Создайте следующие страницы:

· Обо мне (биография: год рождения, школа, награды, участие в мероприятиях и т.д.)

· Интересы (или Хобби) - чем Вы увлекаетесь

Можете добавить еще страницы, по усмотрению.

Создайте фотоальбом, разделы и категории

Сделать отчет о выполненной работе. Отчет о практической работе должен содержать:

1. Тему работы

2. Цель

3. Оснащение

4. Результаты теоретической части работы.

5. Результаты практической части работы.

6. Вывод по работе.



Практическая работа № 132- 135 (4 часа). Тема: Разработка и создание Web-узла

Цель: Изучить способы создания сайтов с использованием средств MS Word, MS Power Point, MS Front Page. Получить навык размещения страниц с использованием ftp-доступа.

1. Получение Интернет-аккаунта.

Чтобы разместить подготовленные страницы в Интернет необходимо получить «аккаунт» (account) - учетную запись, в которой хранится различная информация, относящаяся к пользователю.

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

Чтобы получить доступ к закрытому разделу или дополнительным возможностям сайта, нужно авторизоваться. Авторизация, как правило, означает введение в специальную форму своего логина и пароля.

Задание 1

Получить аккаунт на сервере home.novgorod.ru

1. Зайти на сервер home.novgorod.ru и пройти процедуру регистрации (ссылка Регистрация). При регистрации обязательно указать действующий e-mail. Логин, котрый вы указали, будет являться Интернет адресом вашего сайта.

Например, если вы зарегистрировались как filosof.home.nov.ru, то это и будет ваш логин, и адрес сайта - http:// filosof.home.nov.ru.

2. После прохождения регистрации и появления страницы с поздравлением необходимо подтвердить регистрацию (зайти на свою почту, получить письмо и щелкнуть по ссылке подтверждение регистрации). На следующие сутки Вам будет открыт ftp-доступ.

3. Для «выкладывания» страниц на WWW сервер необходимо использовать FTP клиента, поддерживающего выгрузку файлов на сервер. Это умеют делать, например, FAR, Total Commander и др.

4. Для выгрузки файлов вы можете зайти на FTP сервер как, ftp://вашсервер:вашпароль@home.novgorod.ru.

Например: ftp:// filosof.home.nov.ru:pdjfhrf@home.novgorod.ru

Задание 2. Создайте сайты на следующие тематики:

1. Наркотикам нет

2. Вред табакокурению

3. Наш техникум

Составьте отчет о проделанной работе. Отчет должен содержать:

1. Тему, цель работы.

2. Копии экрана страниц сайта.

3. Ответы на контрольные вопросы.

4. Подробное изложение хода работы.



Тема 1.13 Методика сопровождения сайта. Публикация проекта - 5 часов

Практическая работа № 136 -140 (5 часов). Тема: Публикация Web-узла (сайта)

Цель: ознакомиться с возможностями программы по созданию публикаций.

Последовательность выполнения работы:

1. Продумать название, область (сферу) деятельности будущей организации, предлагающей услуги, сайт которой будет разрабатываться.

2. Подобрать вид и описание услуг, рисунки (фото) - не менее четырех.

ЗАМЕЧАНИЕ: для предварительного ознакомления с содержимым подобных сайтов просмотреть примеры сайтов из папки L:\5 ПН\Lab_r4_Web-yzel_v_Publisher\Примеры сайтов\, запустив поочередно html-файлы главных страниц сайтов.

3. Запустить программу Microsoft Publisher

4. Выбрать создание веб-узла «Услуги» согласно рисунка ниже (макет выбрать на свой вкус).

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

Сохранить публикацию в личной папке студента в папке: Лаб4 под именем Мой веб-сайт Услуги (файл получит автоматически расширение pub). В последующем не забывать сохранять изменения!

6. Просмотреть шаблон будущего сайта в программе-браузере, выбрав на панели Параметры: Веб-узел, гиперссылку (или выполните команду Файл/Предварительный просмотр веб-станицы).

7. Просмотреть содержимое страниц, работу гиперссылок. Ознакомиться со списком услуг, дополнительными сведениями об услугах, списком проектов.

9. Закрыть интернет-браузер.

10. В левой части окна Microsoft Publisher ознакомиться с содержимым панели Параметры: веб-узел, при желании изменить Панель навигации, ознакомиться с содержимым страниц сайта, используя переход по гиперссылкам (щелчок с Ctrl) или щелчок по ярлыку нужной страницы снизу экрана - см. рисунок ниже. Ярлык активной страницы отличается цветом

11. Ознакомиться поочередно с содержимым различных задач из левой панели окна, внести изменения по своему вкусу, например, изменить фон, макет, цветовые, шрифтовые схемы

12. Внести на все страницы собственные изменения согласно тематике выбранной организации: заполнить текстовые поля, изменить рисунки, указать названия услуг на странице 4, на страницах 5-8 дать подробное описание услуг, на странице 9 заполнить список проектов, проследить за корректностью гиперссылок.

13. Добавить страницу Список сотрудников и заполнить ее.

ЗАМЕЧАНИЕ: выбрать в левой панели Добавить страницу и в появившемся окне выбрать тип страницы Список сотрудников, нажать ОК, кнопку Далее… не нажимать.

Новая страница получила, например, номер 10. Гиперссылка «Список сотрудников» в панели навигации (меню) сайта расположена соответственно последней. Переместить гиперссылку «Список сотрудников» так, чтобы она располагалась за гиперссылкой «О нас». Для этого: активизировать меню сайта на любой странице, щелкнув по нему, внизу панели навигации появится кнопка (см. рисунок справа), щелкнуть по кнопке для изменения параметров панели навигации. Слева отобразится Панель навигации, выберите Управление ссылками (см. рис. ниже), в окне «Свойства панели навигации» переместите с помощью кнопки Вверх переместите Список сотрудников в нужную позицию.

Сохраните изменения и просмотрите созданную публикацию в программе-браузере.

Сохраните созданную публикацию в формате html, выбрав в меню Файл пункт. В появившемся окне оставить без изменения поля

ЗАМЕЧАНИЕ: установить папку при сохранении.

Просмотреть созданный сайт в браузере, запустив файл index.html

Составьте отчет о проделанной работе. Отчет должен содержать:

5. Тему, цель работы.

6. Копии экрана страниц сайта.

7. Ответы на контрольные вопросы.

8. Подробное изложение хода работы.

Размещено на Allbest.ru

...