Лабораторная работа №2 Работа с документами .Doc, .Pdf, .Html (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 4.01 не поддерживающей устаревшие теги. строгий (Strict)- не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated), например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Или с файлом определений версии HTML 5:
<!DOCTYPE HTML>
7.5. Каждой html-странице дайте заголовок (тег <title>).
7.6. Внесите на страницы служебную информацию (тег <meta>)
a) об имени автора документа;
b) о фирме, создавшей сайт и ее авторских правах;
c) о дате создания документа;
d) содержащую краткое описание сайта, используемое поисковым сервером для индексирования;
e) содержащую список ключевых слов, используемые поисковым роботом и язык на котором указаны ключевые слова;
f) и не допускающую индексирование документа поисковым роботом;
g) запрещающую кэширование;
h) предписывающую перезагрузагружать html-документ через каждые 30 с;
i) Определяющую кодировку символов, которая должна быть использована на компьютере пользователя при просмотре данного HTML-документа.
Более подробная информация о теге <meta> можно найти в интернете или в файле "Дополнительная информация о meta-тегах.doc".
7.7.Хотя бы на одной из страниц сайта задайте фоновый рисунок (используйте формат gif).
7.8. Задайте цвет фона одной из web-страниц синий, а цвет текста – белый (тег <body>, атрибуты bgcolor и text).
7.9. Переопределите цвет ссылок, цвет посещенных ссылок, цвет активных ссылок в момент их выбора (тег <body>, атрибуты link, vlink, alink).
7.10. Установите величину отступа по горизонтали от края окна браузера до контента 100 px, а по вертикали 50 px (тег <body>, атрибуты bottommargin, leftmargin).
7.11. Используя тег предварительного форматирования (<pre>), выведите информацию (любимое стихотворение о зиме) в удобном виде.
7.12. Для оформления заголовков на страницах используйте теги <h1>-<h6>.
7.13. Используя атрибут align тега <div>, продемонстрируйте различные варианты выравнивания текста.
7.14. Продемонстрируйте при оформлении контента, увеличения и уменьшения размера шрифта относительно базового на единицу (теги <big> и <small>).
7.15. Наберите формулы (теги <sub> и <sup>).
7.16. При оформлении страниц, используя теги физического форматирования (теги <b>, <i>).
7.17. При оформлении страниц, используя теги логического форматирования (<em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var>).
7.18. На одну из страниц поместите эпиграф. (Теги для выделения цитат <cite>, <q>, <blockquote>).
7.19. Создайте нумерованный список экзаменов в эту сессию. В качестве нумерации используйте прописные латинские буквы.
7.20. Создайте ненумерованный список для оформления расписания дел на сегодня. В качестве маркера установите квадрат.
7.21. Создайте простейшую таблицу. Таблица должна быть выровнена по центру и занимать 90% ширины окна. Цвет фона – желтый. Расстояние между ячейками 7, от границы ячейки до текста – 5.
7.22. Включите на страницу список определений, например, для пояснения содержания предметов, которые Вы изучаете (теги <dl>, <dt>, <dd>).
7.23. Используя горизонтальную линию, получите следующий результат.
7.24. При оформлении ссылок (тег <a>) продемонстрируйте следующие эффекты:
· создайте ссылку, при переходе на которую, документ будет загружаться в новое окно (атрибут target);
· создайте ссылку, при переходе на которую, документ будет загружаться с применением кодировки символов utf-8 (атрибут charset);
· создайте ссылку, которая содержит код языка сетевого ресурса, на который указывает ссылка (атрибут hreflang).
· Создайте ссылку, доступ к которой может быть получен при наборе на клавиатуре Alt+клавиша символа, где клавиша символа ‑ горячая клавиша для перехода к ссылке (атрибут accesskey).
· Задайте цвет непосещенных ссылок зеленый, посещенных – синий, цвет ссылок в момент выбора – красный.
· Используя якоря, создайте оглавление документа, предусмотрите переход на начало страницы. Пример:
<A name="glava1">Глава 1</A>
<A href="#glava1">Глава 1</A>
· Создайте ссылку на электронную почту. Пример,
<A href="mailto:[email protected]">
7.25. Поместите рядом со ссылкой картинку. Продублируйте ссылку, чтобы переход по ссылке мог быть осуществлен по щелчку на ссылке и щелчку на картинке.
7.26. Вставьте на страничку изображение (тег <img> атрибуты scr, alt, align, width, height, border, hspace, vspace). Не отображайте вокруг нее рамку. Установите для картинки текстовое описание, которое отображается в браузере, пока картинка грузится, или когда в браузере отключен режим автоматической загрузки отображений. Контент странички расположите слева от картинки, ширину картинки установите 50 px, а высоту измените пропорционально, чтобы правильно масштабировать картинку, размер чистого поля внизу и вверху картинки 30 px, слева и справа – по 100px.
7.27. Рядом с какой-либо ссылкой поместите пиктограмму или небольшую картинку. Продублируйте ссылку, чтобы переход по ссылке мог быть осуществлен по щелчку на ссылке и щелчку на картинке. Например:
<A href="02 Использование тега img в ссылкаx.html">
<IMG src="AG00222_.gif" alt="На главную страницу" height="50" align="middle" border="0">На главную страницу
</A>
7.28. Поместите на главную страницу форму.
7.29. Поместите на страницу видеофайлы через 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.30. Поместите на страницу .avi, .mp3 или .mpeg файл. Вставка ‑> Мультимедиа ‑> ActiveX.
Параметры окна "Атрибуты специальных возможностей тегов объектов" заполняете по желанию. Затем внизу на панели "свойства" устанавливаете высоту и ширину плеера, а в поле "Код ClassID" вводим код самого элемента CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95, в данном случае это Проигрыватель Windows Media. Затем нажимаем на кнопку параметры и в открывшемся окне "Параметры" в столбце "Параметр" вводим src, а в столбце "Значение" имя файла (путь относительно страницы, на которую происходит вставка). Смотреть в IE!
ТАБЛИЦА ОСНОВНЫХ ТЕГОВ ЯЗЫКА HTML
<html></html> Указывает браузеру, что это HTML документ.
<head></head> Здесь располагается тег названия документа и теги для поисковых машин.
<body></body> Определяет видимую часть документа
<title></title> Помещает название документа
Атрибуты тела документа
<body bgcolor=?> Устанавливает цвет фона документа в виде RRGGBB.
<body text=?> Устанавливает цвет текста документа.
<body link=?> Устанавливает цвет гиперссылок, в виде RRGGBB - пример: 00FF00
<body vlink=?> Устанавливает цвет гиперссылок на которых побывали.
<body alink=?> Устанавливает цвет гиперссылок при нажатии.
Теги для форматирования текста
<pre></pre> предварительно отформатированный текст.
<h1></h1> Создает САМЫЙ БОЛЬШОЙ заголовок
<h6></h6> Создает самый маленький заголовок
<b></b> Создает жирный текст
<i></i> Создает наклонный текст
<cite></cite> Используется для цитат, обычно наклонный текст.
<em></em> Используется для выделения из текста слова
<strong></strong> Используется для выделения наиболее важных частей текста
Гиперссылки
<a href="URL"></a> Создает гиперссылку на другие документы или часть текущего документа.
<a href="mailto:EMAIL"></a> гиперссылка вызова почтовой программы для написания письма автору.
<a name="NAME"></a> Отмечает часть текста как цель для гипперссылок.
<a href="#NAME"></a> Создает гиперссылку на часть текущего документа.
Форматирование
<p> Создает новый параграф
<p align=?> Выравнивает параграф: left, right, или center
<br> Вставляет перевод строки.
<blockquote> </blockquote> Создает отступы с обеих сторон текста.
<dl></dl> Создает список определений.
<dt> Определяет каждый из терминов списка
<dd> Описывает каждое определение
<ol></ol> Создает нумерованный список
<li> Определяет каждый элемент списка и присваивает номер
<ul></ul> Создает ненумерованный список
<li> Предваряет каждый элемент списка и добавляет кружок или квадратик.
<div align=?> Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей
Графические элементы
<img src="name"> Добавляет изображение в HTML документ
<img src="name" align=?> Выравнивает изображение к одной из сторон документа: left, right, center; bottom, top, middle
<img src="name" border=?> Устанавливает толщину рамки вокруг изображения
<hr> Добавляет в HTML документ горизонтальную линию.
<hr size=?> Устанавливает высоту(толщину) линии
<hr width=?> Устанавливает ширину линии в пикселах или процентах.
<hr noshade> Создает линию без тени.
<hr color=?> Задает линии определенный цвет. Значение RRGGBB.
Таблицы
<table></table> Создает таблицу.
<tr></tr> Определяет строку в таблице.
<td></td> Определяет отдельную ячейку в таблице.
<th></th> Определяет заголовок таблицы
Атрибуты таблицы
<table border=#> Задает толщину рамки таблицы.
<table cellspacing=#> Задает расстояние между ячейками таблицы.
<table cellpadding=#> Задает расстояние между содержимым ячейки и ее рамкой.
<table width=#> Устанавливает ширину таблицы в пикселах или процентах от ширины документа.
<tr align=?> или <td align=?> Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.
<tr valign=?> или <td valign=?> Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
<td colspan=#> Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1)
<td rowspan=#> Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)
<td nowrap> Не позволяет программе просмотра делать перевод строки в ячейке таблицы.
Формы
<form></form> Создает формы
<select multiple name="NAME" size=?></select> Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.
<option> Указывает каждый отдельный элемент меню
<select name="NAME"></select> Создает ниспадающее меню
<option> Указывает каждый отдельный элемент меню
<textarea name="NAME" cols=40 rows=8></textarea> Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.
<input type="checkbox" name="NAME"> Создает checkbox. За тегом следует текст.
<input type="radio" name="NAME" value="x"> Создает radio кнопку. За тегом следует текст.
<input type=text name="foo" size=20> Создает строку для ввода текста. Параметром Size указывается длина в символах.
<input type="submit"value="NAME"> Создает кнопку "Принять"
<input type="image" border=0 name="NAME" src="name.gif"> Создает кнопку "Принять" - для этого используется изображение
<input type="reset"> Создает кнопку "Отмена"