Глава 7. Лабораторные работы Лабораторная работа 1 (4 часа). Инструменты и средства создания простых сайтов

1. Выяснить, какими браузерами преимущественно пользуются для просмотра сайтов в домене by. Есть ли отличия в предпочтениях пользователей при просмотре сайтов России, Польши? (Зайдите на сайт http://www.liveinternet.ru/. Затем: рейтинг сайтов/ страна Беларусь / статистика группы/ браузеры).

2. Найти в Интернете, скачать и установить на компьютере последние версии браузеров:

1. Mozilla (http://www.mozilla.com/ru/firefox/),

2. Opera (http://ru.opera.com/download/),

3. Google Chrome (http://www.google.com/chrome?hl=ru),

4. MS IE (http://www.microsoft.com/rus/windows/internet-explorer/).

3. Для браузера Mozilla установить специальное дополнение Live HTTP Header, позволяющее просматривать протоколы обмена между браузером и сервером (https://addons.mozilla.org/en-US/firefox/addon/live-http-headers/).

Настроить приложение таким образом, чтобы информация о HTTP заголовках отображалась в новой вкладке.Инструменты ‑> просмотр HTTP заголовков ‑> на вкладке настройка ‑>включить флажок Открывать LiveHTTPHeaders в новой вкладке.

Набрать в адресной строке браузера http://bsu.by/. Проследить, какие запросы передавал браузер серверу, и проанализировать ответы сервера. Затем очистить поле вывода запросов и аналогично проследить, диалог между сервером и браузером при загрузке адреса http://google.com/. При анализе запросов браузера и ответов сервера следует ответить на вопросы:

• Каким протоколом пользуется браузер?

• Определите метод запроса (GET, POST, HEAD, PUT, DELETE, TRACE, CONNECT, OPTIONS, PATCH, LINK или UNLINK).

• какой версией протокола пользуется сервер?

• К какой страничке (папке) обращался браузер?

• Какой тип файлов поддерживает браузер (Accept)?

• Имеет ли браузер настройку на русский язык (Accept-Language)?

• С какого адреса перешел браузер при обращении к серверу (Referer)?

• Какой тип браузера (User-Agent)?

• В какой кодировке запрашиваются данные браузером (Accept-Charset)?

• Расшифруйте значения статуса в ответах сервера, была ли проведена переадресация?

• Определить тип сервера (Server).

• В каком формате и в какой кодировке будут переданы данные (Content-Type)?

• Каков размер передаваемого текста (Content-Length)?

• Когда были внесены последние изменения в передаваемые данные (Last-Modified)?

• Используется ли браузером кэширование и будет ли проводиться кеширование сервером (Cache-Control)?

4. Установить программное средство для разработки Веб-приложений Adobe Dreamweaver.

5. Создать аккаунт и электронную почту на gmail.com.

6. Установить Skype (http://www.skype.com/intl/ru/get-skype/on-your-computer/windows/).

7. Найдите в Интернете и просмотрите блоги: Ректора БГУ Абламейко С.В. и блог http://blog.kremlin.ru/ Д.А.Медведева из России.

8. Пользуясь встроенными конструкторами создать блоги на любом из ресурсов, например, LiveJournal.com, LiveInternet.com или tut.by.

Последовательность действий следующая.Чтобы создать блог на tut.by нужно зарегистрироваться на сайте http://tut.by/, зайти в свой аккаунт на этом сайте. После авторизации зайти на http://blog.tut.by/ и в левом верхнем углу выбрать "Зарегистрировать новый блог". После принятия соглашения откроется окно где будет написан адрес блога и поле для ввода названия блога. Далее следует выбрать "Создать блог". Появится новое окно с пунктами "Администрировать блог" и "Перейти на блог".

Чтобы создать новый блог на LiveInternet.ru нужно зарегистрироваться на этом сайте. Набрать справа вверху "Завести дневник". Далее зарегистрироваться и войти в дневник.

Чтобы создать новый блог на LiveJournal.ru необходимо набрать "Создать журнал", затем зарегистрироваться на сайте. После этого следовать указаниям мастера.

9. Войдите в свой блог как администратор и добавьте статьи с подробной инструкцией о том, как установить Skype, и результатами выполнения пункта 3 этой лабораторной работы. Затем выйдите из администрирования сайта и просмотрите свой блог в интернете. Как гость оставьте комментарий к новости в блоге.

10. Создать микроблог на Twitter.

11. Разработать проект своего сайта на заданную тематику. Провести концептуальное проектирование и логическое проектирование.

12. Создать веб-сайты на одном из бесплатных хостингов на основе конструктора или шаблона, предлагаемого как сервис хостинга. Например, google.com (http://sites.google.com/site/poleznyesovety/) . Можно воспользоваться любым другим известным ресурсом. Создать на своем сайте страничку посвященную использованию поисковиков в Беларуси. Данные о популярности поисковиков можно взять со статистики сайта http://www.liveinternet.ru/.

13. Попытайтесь зарегистрировать сайт вручную на самых популярных поисковиках, используемых в Беларуси (информацию, получить пункте 12). Популярные поисковики могут препятствовать изменению мета-информации, что необходимо

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

14. Оценку коммерческой стоимости любого сайта можно получить на www.mysitecost.ru

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

NAROD.RU (http://www.narod.yandex.ru) . При регистрации пользователь получает домен вида http://www.***.narod.ru. Затем можно быстро создать сайт при помощи готовых шаблонов. При этом создаются также гостевая книга, форум и чат. Можно установить переводчик, колонку новостей, поиск по сайту средствами Яндекса, поставить счетчик посещений, установить опрос. Пользователь получает два почтовых ящика: ***@yandex.ru и ***@narod.ru. Созданный сайт в Яндексе можно не регистрировать, на NAROD.RU действует версия поискового робота «Яндекс».

NM.RU (http://www.nm.ru). На сервере NM нет баннеров и высокая скорость загрузки страниц. При регистрации пользователь получает домен вида: www.***.nm.ru или подобный, почтовый ящик ***@домен.ru и место под сайт.

BOOM.RU – бесплатный хостинг от портала MAIL.RU. Зарегистрировавшись, пользователь получает доменное имя вида ***.boom.ru, административную страничку и готовые шаблоны. Хостинг автоматически вставляет в страницы большое количество рекламных баннеров.

UCOZ.RU- это Saas платформа, включающая в себя хостинг и систему управления сайтом. В рамках модели Saas заказчики платят не за владение программным обеспечением, а за его аренду через веб-интерфейс. Работая с веб-платформой не нужно покупать и устанавливать ПО, беспокоится о нагрузках, обновлениях и администрировании. UCoz работает по принципам Web 2.0 и позволяет просто и быстро создавать сложнейшие проекты.

Бесплатные конструкторы и хостинги предлагают также сайты setup.ru, fo.ru, Google.com, 000webhost.com, hotbox.ru, chat.ru, by.ru, okis.ru и др.

Лабораторная работа 2 (4 часа). Работа с гипертекстовыми документами

Создать дизайн главной страницы на основе выбранной в предыдущей главе темы. Использовать блочную верстку. На одной из внутренних страниц реализовать следующие элементы:

1. Составить в Microsoft Word файл - резюме с фотографией, датой рождения, этапами жизненного пути, портфолио, списком публикаций. Можно поместить фотографии детей, друзей или фотографии домашних растений и животных. Приветствуются любимые спортивные или музыкальные команды. В тексте желательно использовать списки, таблицы.

2. Сохранить файл в формате "веб-страница (*.htm, *.html)". Открыть затем файл в браузере и посмотреть, сохранились ли элементы форматирования текста, верно ли отобразились таблицы и списки. Открыть тот же файл в Adobe Dreamweaver и просмотреть код документа. Изучить настройки оптимизации и провести "чистку" html-кода, используя Команды ‑> Исправить HTML-код Word . Сравнить полученный код и код до проведения оптимизации.

3. Вновь откройте исходный файл Microsoft Word и сохраните файл в формате "веб-страница с фильтром (*.htm, *.html)". Откройте файл в браузере и посмотрите полученный результат. Обратите внимание, изменился ли результат при различных способах конвертации. Затем откройте тот же файл в Adobe Dreamweaver и просмотрите код документа. Проведите "чистку" html-кода и сравните полученный оптимизированный код и оптимизированный код, полученный в п.2.

4. Создать .pdf документ.

5. В Adobe Dreamweaver создать простой html – документ. Включить в него .doc и pdf - файлы

6. Конвертируйте в html-файл документ Microsoft Excel "Учет.xls". Просмотрите его в браузере и его код в Adobe Dreamweaver. Сделайте вывод о возможности и эффективности конвертации документов.

7. Создать персональный сайт при помощи Adobe Dreamweaver в виде главной и одной или нескольких внутренних страниц.

   1. Дизайн главной страницы оформить в виде блоков. Для формирования макета страницы использовать возможности семантической верстки HTML5.

Логотип	Заголовок
Меню	Основной контент
Авторские права и контактная информация

2. Зарегистрировать сайт в Adobe Dreamweaver. Веб-сайт ‑> Новый сайт. В категории Веб-сайт введите имя сайта и укажите расположение папки сайта. В категории Дополнительные настройки ‑> Локальная информация укажите сервер, к которому будет обращаться сайт. Поскольку работа идет локально, то URL-адрес: http://localhost.

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

4. В коде страниц укажите, что при разборе документа браузер должен сверяться с файлом версии HTML 5:

<!DOCTYPE HTML>

5. Каждой html-странице дайте заголовок (тег <title>).

6. Внесите на страницы служебную информацию (тег <meta>):

об имени автора документа; о фирме, создавшей сайт и ее авторских правах;

о дате создания документа; краткое описание сайта, используемое поисковым сервером для индексирования; список ключевых слов, используемых поисковым роботом и язык на котором указаны ключевые слова; не допускающую индексирование документа поисковым роботом; запрещающую кэширование; предписывающую перезагрузагружать документ через каждые 30 с; определяющую кодировку символов, используемую на компьютере пользователя при просмотре HTML-документа.

7. На одной из страниц сайта задайте фоновый рисунок (формат gif).

8. Задайте цвет фона одной из web-страниц синий, а цвет текста – белый (тег <body>, стили color и text).

9. Переопределите цвет ссылок, цвет посещенных ссылок, цвет активных ссылок в момент их выбора (тег <a>, стили …).

10. Установите величину отступа по горизонтали от края окна браузера до контента 100 px, а по вертикали 50 px (тег <body>, стили …..).

11. Используя тег предварительного форматирования (<pre>), выведите информацию (любимое стихотворение о зиме) в удобном виде.

12. Для оформления заголовков на страницах используйте теги <h1>-<h6>.

13. Используя атрибут align тега <div>, продемонстрируйте различные варианты выравнивания текста.

14. Продемонстрируйте при оформлении контента, увеличения и уменьшения размера шрифта относительно базового на единицу (теги <big> и <small>).

Наберите формулы (теги <sub> и <sup>) и формулы:

15. При оформлении страниц, использовать теги физического форматирования <b>, <i>.

16. При оформлении страниц, использовать теги логического форматирования <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var>.

17. На одну из страниц поместить эпиграф. (Теги <cite>, <q>, <blockquote>).

18. Создать нумерованный список экзаменов в сессию. В качестве нумерации используйте прописные латинские буквы.

19. Создайте ненумерованный список для оформления расписания дел на сегодня. В качестве маркера установите квадрат.

20. Создать простую таблицу, выровненую по центру и занимающую 90% ширины окна. Цвет фона – желтый. Расстояние между ячейками 7, от границы ячейки до текста – 5.

21. Включите на страницу список определений, например, для пояснения содержания предметов, которые Вы изучаете (теги <dl>, <dt>, <dd>).

22. Используя горизонтальную линию, получите следующий результат.

23. При оформлении ссылок (тег <a>) продемонстрируйте следующие эффекты:

• создайте ссылку, при переходе на которую, документ будет загружаться в новое окно (атрибут target);

• создайте ссылку, при переходе на которую, документ будет загружаться с применением кодировки символов utf-8 (атрибут charset);

• создайте ссылку, которая содержит код языка сетевого ресурса, на который указывает ссылка (атрибут hreflang).

• Создайте ссылку, доступ к которой может быть получен при наборе на клавиатуре Alt+клавиша символа, где клавиша символа ‑ горячая клавиша для перехода к ссылке (атрибут accesskey).

• Задайте цвет непосещенных ссылок зеленый, посещенных – синий, цвет ссылок в момент выбора – красный.

• Используя якоря, создайте оглавление документа, предусмотрите переход на начало страницы. Пример:

<A name="glava1">Глава 1</A>

<A href="#glava1">Глава 1</A>

• Создайте ссылку на электронную почту. Пример,

<A href="mailto:IvanovIvan@bsu.by">

24. Поместите рядом со ссылкой картинку. Продублируйте ссылку, чтобы переход по ссылке мог быть осуществлен по щелчку на ссылке и щелчку на картинке.

25. Вставьте на страничку изображение (тег <img> атрибуты scr, alt, align, width, height, border, hspace, vspace). Не отображайте вокруг нее рамку. Установите для картинки текстовое описание, которое отображается в браузере, пока картинка грузится, или когда в браузере отключен режим автоматической загрузки отображений. Контент странички расположите слева от картинки, ширину картинки установите 50 px, а высоту измените пропорционально, чтобы правильно масштабировать картинку, размер чистого поля внизу и вверху картинки 30 px, слева и справа – по 100px.

26. Рядом с какой-либо ссылкой поместите пиктограмму или небольшую картинку. Продублируйте ссылку, чтобы переход по ссылке мог быть осуществлен по щелчку на ссылке и щелчку на картинке. Например:

<A href="02 Использование тега img в ссылкаx.html">

<IMG src="AG00222_.gif" alt="На главную страницу" height="50" align="middle" border="0">На главную страницу </A>

27. Поместите на главную страницу форму.

28. Поместите на страницу видеофайлы через http://www.youtube.com. Сначала регистрируемся и входим на сайт (можно входить с логином gmail). Размещаем свое видео на http://www.youtube.com или выбираем любое видео с сайта. Адрес справки по вставке http://support.google.com/youtube/bin/answer.py?hl=ru&answer=171780. Затем нажимаем кнопку "отправить" под видео и "встроить". Копируем html-код на сайт и просматриваем. Для вставки медиа можно воспользоваться также услугами сайта http://uppod.ru.

29. Поместите на страницу .avi, .mp3 или .mpeg файл. Вставка ‑> Мультимедиа ‑> ActiveX.

Параметры окна "Атрибуты специальных возможностей тегов объектов" заполняете по желанию. Затем внизу на панели "свойства" устанавливаете высоту и ширину плеера, а в поле "Код ClassID" вводим код самого элемента CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95, в данном случае это Проигрыватель Windows Media. Затем нажимаем на кнопку параметры и в открывшемся окне "Параметры" в столбце "Параметр" вводим src, а в столбце "Значение" имя файла (путь относительно страницы, на которую происходит вставка). Смотреть в IE!

30. Включить проигривание audio/video файлов средствами HTML5