Лабораторная работа 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 в виде главной и одной или нескольких внутренних страниц.

7.1. Дизайн главной страницы оформить в виде блоков

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

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



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

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

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

7.6. Внесите на страницы служебную информацию (тег )

об имени автора документа;

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

о дате создания документа;

содержащую краткое описание сайта, используемое поисковым сервером для индексирования;

содержащую список ключевых слов, используемые поисковым роботом и язык на котором указаны ключевые слова;

не допускающую индексирование документа поисковым роботом;

запрещающую кэширование;

предписывающую перезагрузагружать html-документ через каждые 30 с;

Определяющую кодировку символов, которая должна быть использована на компьютере пользователя при просмотре HTML-документа.

7.7.Хотя бы на одной из страниц сайта задайте фоновый рисунок (формат gif).

7.8. Задайте цвет фона одной из web-страниц синий, а цвет текста – белый (тег , атрибуты bgcolor и text).

7.9. Переопределите цвет ссылок, цвет посещенных ссылок, цвет активных ссылок в момент их выбора (тег , атрибуты link, vlink, alink).

7.10. Установите величину отступа по горизонтали от края окна браузера до контента 100 px, а по вертикали 50 px (тег , атрибуты bottommargin, leftmargin).



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

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

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

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

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

7.15. При оформлении страниц, использовать теги физического форматирования , .

7.16. При оформлении страниц, использовать теги логического форматирования , , , , , , .

7.17. На одну из страниц поместить эпиграф. (Теги , , ).

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

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

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

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

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

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

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

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

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

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

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

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

Глава 1

Глава 1

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

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

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

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

На главную страницу

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

7.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.

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

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

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


0877281803236992.html
0877349022225673.html

0877281803236992.html
0877349022225673.html
    PR.RU™