ТОР 5 статей:
Методические подходы к анализу финансового состояния предприятия
Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века
Характеристика шлифовальных кругов и ее маркировка
Служебные части речи. Предлог. Союз. Частицы
КАТЕГОРИИ:
- Археология
- Архитектура
- Астрономия
- Аудит
- Биология
- Ботаника
- Бухгалтерский учёт
- Войное дело
- Генетика
- География
- Геология
- Дизайн
- Искусство
- История
- Кино
- Кулинария
- Культура
- Литература
- Математика
- Медицина
- Металлургия
- Мифология
- Музыка
- Психология
- Религия
- Спорт
- Строительство
- Техника
- Транспорт
- Туризм
- Усадьба
- Физика
- Фотография
- Химия
- Экология
- Электричество
- Электроника
- Энергетика
Тема: Основы WEB-дизайна.
Лабораторная работа 7
Цель: Приобретение практических навыков по созданию структуры документов, абсолютных и относительных гиперссылок, гиперссылок с заданием цвета посещенных ссылок, цвета активных ссылок. Научиться форматировать и производить разметку WEB-страницы с использованием иллюстраций, фотограций и др.
Ход выполнения работы:
Задание 1. Создайте структуру документа.
Указания:
1. Откройте текстовый редактор "Блокнот".
2. Наберите в нем структуру HTML-документа:
3. Сохраните файл в своей папке, присвоив ему имя page1.htm
4. Зайдите в свою папку и откройте созданный файл. Вы увидите, как выглядит созданный вами файл в окне броузера.
5. Закройте броузер.
6. Вернитесь к сохраненному файлу в "Блокноте".
7. Внесите в него следующие изменения: пусть это будет ваша первая страничка. Укажите в ней ваши фамилию, имя, институт, группу, увлечения. Используйте для этого форматирование заголовков и абзацев.
8. В строке <TITLE> укажите: "Домашняя страничка (ваше имя и фамилия).
9. Сохраните файл как page2.htm.
10. Просмотрите результат в браузере, при необходимости отредактируйте файл при помощи "Блокнота".
Задание 2. Создайте гиперссылку на файл текущей папки.
Указания:
1. Используя шаблон:
Произвольный текст <A href="адрес ссылки">Текст для щелчка </a>
создайте гиперссылку в тексте файла page2.htm:
Если вы хотите вернуться к файлу page1.htm, то вам <A href="page1.htm">сюда.</a>
2. создайте гиперссылку в тексте файла page1.htm:
Если вы хотите вернуться к файлу page2.htm, то вам <A href="page2.htm">сюда.</a>
Задание 3. Создайте гиперссылку, видимая часть которой представляет собой рисунок.
Указания:
1. Создайте или скопируйте в свою папку файл с рисунком кнопки с именем knopka.gif.
2. Используя шаблон:
<A href="Адрес ссылки"> <IMG src="Ссылка на рисунок"> </a>
создайте гиперссылку в виде рисунка кнопки.
Если вы хотите вернуться к файлу page1.htm, то нажмите на кнопку <A href="links.htm"><IMG src="knopka.gif" width="112" height="50"></a>
3. Измените размеры кнопки.
Задание 4. Создайте гиперссылку с заданием цвета посещенных ссылок, цвета активных ссылок (цвет появляется при нажатии мыши).
Указания: используя шаблон <BODY link="ХХХХХХ" vlink="ХХХХХХ" alink="ХХХХХХ">
атрибуты link, vlink, alink тега <BODY> установите цвет ссылок на всей Web-странице, цвет посещенных ссылок и цвет активных ссылок.
Задание 5. Создание относительных гиперссылок.
Указания:
1. Скопируйте папку Папка с рисунками на Рабочий стол.
2. Используя шаблоны: href="./Папка/файл.тип и href="../Папка/файл.тип создайте гиперссынки на файлы с рисунками:
1) в файле page1.htm на рисунки: arizona_bob_waving_mg_wht.gif и images[8].jpg;
2) в файле page2.htm на рисунки: images[9] и Hardhat2.gif.
Задание 6. Создайте таблицу.
Указания:
1. Составьте таблицу для расписания ваших занятий. Пусть эта таблица состоит из семи столбцов и девяти строк. Ширина таблицы - 100%.
2. В первом столбце укажите время начала и конца ваших занятий. Выравнивание данных в ячейках по левому краю.
3. В остальных стобцах предметы по дням недели.
4. Выравнивание дней недели - по центру ячейки и жирным шрифтом.
5. Выравнивание названий предметов - по левому краю.
6. У всех стоблцов фон сделайте разным цветом.
7. Перед таблицей поместите заголовок "РАСПИСАНИЕ ЗАНЯТИЙ", выделив его тегами <H1> и </h1>. Цвет заголовка - красный.
8. Между заголовком и таблицей поместите рисунок.
Конец формы
Задание 7. Выполните разметку WEB-страницы с использованием таблицы шириной на весь экран.
Указания: Создать таблицу, состоящую из двух строк и двух столбцов. Верхнюю строку отвести под заголовок странички, левый столбец отвести под меню Web-сайта.
Задание 9. Выполните разметку WEB-страницы с использованием таблицы шириной 760 пикселей.
Указания: создать таблицу, состоящую из трех строк и одного столбца. Верхняя строка отведена под заголовок странички, вторая строка отведена под меню Web-сайта, а третья строка отведена непосредственно под содержание сайта.
Задание 9. Выполните разметку WEB-страницы с использованием иллюстраций, фотограций при помощи вложенных таблиц.
Указания: во вторую ячейку второй строки вставить таблицу, состоящую из двух строк и трех столбцов. В первую и в третью ячейки первой строки вставить рисунки, а во вторую ячейку первой строки - название страницы. Во все ячейки второй строки введите текст странички.
Вопросы для самоподготовки и контроля
1. Абзацы разметки HTML.
2. Авторский стиль редактирования разметки HTML.
3. Адреса разметки HTML.
4. Вложенные списки разметки HTML.
5. Внутренние рисунки разметки HTML.
6. Гипертекст. Гипертекстовая технология, браузеры разметки HTML.
7. Гипертекстовые редакторы.
8. Графические редакторы разметки HTML.
9. Соединение с другими документами, гипертекстовые ссылки.
10. Соединение с разделами текущего документа разметки HTML.
11. Заголовки документов разметки HTML.
12. Заголовки разделов документов разметки HTML.
13. Внешние рисунки, звуки и мультипликация разметки HTML
14. Инструменты WEB-дизайна.
15. Логические стили разметки HTML.
16. Язык HTML - Hyper Text Markup Language.
17. Язык гипертекстовой разметки HTML.
18. Ненумерованные списки разметки HTML.
19. Нумерованные списки разметки HTML
20. Основные элементы языка HTML, теги.
21. Основные понятия WEB-дизайна.
22. Прерывание сроки разметки HTML.
23. Различные стили внутри гиперссылка разметки HTML.
24. Специальные символы разметки HTML.
25. Списки определений разметки HTML.
26. Списки разметки HTML.
27. Создание WEB-документов на языке гипертекстовой разметки HTML.
28. Создание ВЕБ-документов на языке HTML
29. Стили: логические, физические стиле разметки HTML.
30. Структурные элементы WEB-документа.
31. Текстовые блоки разметки HTML.
32. Технологии и инструменты ВЕБ-дизайна
33. Физические стили разметки HTML.
34. Формы разметки HTML.
35. Цитаты разметки HTML.
36. Что такое URL (Uniform Resource Locator)?
37. HTML документы: запись, создание, редактирование и хранение.
38. WEB-узел (WEB-сайт).
39. Web-документ.
| <== предыдущая лекция | | | следующая лекция ==> |
| Рули и элероны (рули крена). | | |
Не нашли, что искали? Воспользуйтесь поиском: