Модуль. Задание СВ114_removed. Самостоятельная работа по теме Создание сайта Контрольный тест по курсу Основы создания Web страниц
 Скачать 0.54 Mb.
|
2. Какие виды списков вы знаете? 3. Как можно создать нумерованный список? 4. Как можно создать многоуровневый список? Домашнее задание: 1. Выучите конспект. Практическая работа № 4 по теме: «Создание таблиц» Цель: научиться создавать различные виды таблиц, оформлять их. HTML-таблицы Назначение Формат Значение аргументов (вместо звездочки *) Задание таблицы width="" height="" ширина и высота таблицы в пикселах или в % от ширины и высоты окна, соответственно; border="" ширина рамки. Если значение - ноль, то рамка не требуется; align="" задает положение данных в ячейках таблицы по горизонтали: left — данные прижать к левому краю яче- ек, center — данные расположить по центру ячеек, right — данные прижать к правому краю ячеек. Заголовок таблицы align="" задает место заголовка: top — заголовок над таблицей, bottom — заголовок под таблицей. Тег строки таблицы. Если тег пуст - стро- ка пустая. Заданные атрибуты строки по- давляют атрибуты таблицы. bgcolor="" задает цвет фона ячеек строки; bordercolor="" задает цвет рамки к ячей- кам строки; valign="" задает положение данных в ячейке по вертикали. baseline — данные располагать в ячейках по базовой линии строки, bottom — данные прижимать к нижнему краю ячеек строки, middle — данные располагать по центру ячеек в строке, top — данные прижимать к верхнему краю ячеек строки. Тег ячейки «Заголо- вок»: заголовок столбца или строки. По умолчанию текст в этой ячейке пока- зывается жирным шрифтом по центру. текст | align="" задает положение данных в ячейке "Заголовок" по горизонтали. left — заголовок прижать к левому краю ячейки, center — заголовок расположить по центру ячейки, right — заголовок прижать к правому краю ячейки; valign="" задает положение данных в ячейке "Заголовок" по вертикали. bottom — заголовок прижать к нижнему краю ячейки, middle — заголовок расположить по цен- тру ячейки, top — заголовок прижать к верхнему краю ячейки; colspan="" задает число ячеек, объеди- няемых в одну на строке; rowspan="" задает число ячеек, объеди- няемых в одну в столбце. Тег столбца таблицы. Если тег пуст или содержит значение — ячейка пустая. текст | width="" height="" ширина и высота ячейки в пикселах или в % от ширины и высоты окна, соответственно; align="" задает положение данных в ячейке по горизонтали. left - данные прижать к левому краю ячей- ки, center - данные располагать по центру ячейки, right- данные прижать к правому краю ячейки; valign="" задает положение данных в ячейке по вертикали. baseline — данные расположить в ячейке по базовой линии, bottom — данные прижать к нижнему краю ячейки, middle — данные расположить по центру ячейки, top — данные прижать к верхнему краю ячейки; bgcolor="" задает цвет фона ячейки; bordercolor="" задает цвет рамки к ячейке; colspan="" задает число ячеек, объеди- няемых в одну на строке; rowspan="" задает число ячеек, объеди- няемых в одну в столбце; nowrap отмена переноса слов на другую строку внутри ячейки. Горизонтальная табличная строка задается тегами текст | , число пар этих тегов в строке таблицы соответствует числу столбцов. Задание 2. Создание таблиц. 1. Откройте текстовый редактор Блокнот 2. Создайте в нем следующий документ:
Домашнее задание: 1. Выучите конспект. Практическая работа № 5 по теме: «Создание гиперссылок» Цель: научиться создавать и оформлять гиперссылки. Ссылки в HTML-программах Гипертекстовым документом называется документ, содержащий ссылки на другие до- кументы, позволяющие при помощи нажатия кнопки мыши быстро переходить от одного до- кумента к другому, не задумываясь, где находится этот документ. В качестве ссылки могут быть слова, рисунки, кнопки и др. На указателе нужно щелкнуть мышью, чтобы сделать переход по ссылке. Назначение Формат Значения атрибутов Цвет ссылки См. значения цветов в практической ра- боте № 2 Цвет пройденной ссылки Цвет активной ссылки Ссылка на другую страни- цу href="" задает URL-адрес. указатель ссылки Адрес относительный: . . . # . . . - имя файла в пределах данного компьютера плюс имя метки в пределах данного файла; Абсолютный адрес: http: // www. ( . . . ) . ( . . . )/ - на WEB- страницу, mailto: ( . . . ) @ ( . . . ) - на электронную почту — E-mail , news: ( . . . ) . ( . . . ) - на Newsgroup — группу новостей системы телеконфе- ренций UseNet, ftp: // ftp. ( . . . ) . ( . . . ) - на FTP-сайты системы хранения и передачи файлов, где хранятся новые программные про- дукты, гостевые файлы (FAQ) и т.д., goppher: // goppher. ( . . . ) . ( . . . )/ — на сайты системы Gopher, wais: // wais. ( . . . ) . ( . . . )/ — на WAIS- систему больших (распределенных) баз данных, telnet: // bbs.( . . . ) . ( . . . )/ — на Telnet- систему удаленных компьютеров; file: //( ... ):\( . . . ) . ( . . . ) — файл с диска данного компьютера; . . . ? . . . — URL-адрес плюс строка по- иска. Ссылка на закладку в дру- гом документе указатель ссылки Ссылка на закладку в том же документе HREF=”#*”> указатель ссылки Определение закладки метки внутри текущей HTML-программы. Этим оператором метят место, куда предполагается де- лать переходы. Текст тега в этом случае выводится на WEB-странице в место закладки. name="" — задает имя метки из симво- лов латинского алфавита. Ссылки могут передаваться на файлы разных форматов: простой текст .txt файл PostScript .ps документ HTML .html или .htm звуковой файл AIFF .aiff рисунок GIF .gif звуковой файл AU .au рисунок TIFF .tiff звуковой файл WAV .wav рисунок X Bitmap .xbm анимация QuickTime .mov рисунок JPEG .jpg (.jpeg) фильм MPEG .mpeg (.mpg) Задание 1. Создание гиперссылок. 1. Создайте предложенный HTML-документ в виде многофайлового документа (где Файл1 — основной документ, Файл2 — вспомогательный файл, для картинки создана гиперссылка) Файл 1 Файл 2 2. Сохраните изменения и просмотрите их с помощью браузера Internet Explorer . Задание 2. Создание гиперссылок. 1. Создайте HTML-документ следующего содержания: В лесу родилась елочка. В лесу она росла. Зимой и летом стройная, Зеленая была. 2. Добавьте гиперссылку, при нажатии на слово «елочка» можно перейти на следующий фрагмент: И вот она нарядная На праздник к нам пришла, И много-много радости Детишкам принесла! 3. Отформатируйте по своему усмотрению цвета ссылок: пройденной и активной. 4. Сохраните изменения и просмотрите их с помощью браузера Internet Explorer . Задание 3. Самостоятельная творческая работа над своим сайтом. Подведение итогов Сделайте в тетради конспект теоретического материала. Ответьте на следующие вопросы: 1. Что такое гиперссылка? 2. Какие виды гиперссылок вы знаете? Домашнее задание: 1. Выучите конспект. Практическая работа № 6 по теме: «Создание фреймов» Цель: научиться разделять экран на несколько областей согласно сценарию (с помощью фреймов). С помощью фреймов экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы и даже Web-узла. Хочешь узнать точное время? Жми сюда!!! Здесь должна быть картинка часов К сожалению, точного времени я тоже не знаю. Часы остановились. Второстепенные документы вставляются в базовый с помощью тегов: Примеры простейших фреймов: Горизонтальное деление экрана производится при помощи атрибута rows, а верти- кальное при помощи атрибута cols. Значения атрибутов могут быть выражены в пикселах, процентах или * для обозначения оставшейся части экрана. cols = 50%, 50%; Деление области просмотра на равные правую и левую части. cols = 20%, 80%; Деление области просмотра на неравные правую и левую части. rows = 100, 20%,* Деление области просмотра на три части: первой отведено 100 пикселей, второй — 20% доступного пространства, а третьей — все остальное cols = *, 3* Деление области просмотра на неравные правую и левую части. Правая часть в три раза шире левой. cols=25%,75% Деление области просмотра аналогично предыдущему примеру. Задание 1. Создание макета страницы с фреймами. 1. Создайте HTML-документ следующего содержания: 2. Сохраните изменения и просмотрите их с помощью браузера Internet Explorer . Задание 2. Самостоятельная творческая работа над своим сайтом. Подведение итогов Сделайте в тетради конспект теоретического материала. Ответьте на следующие вопросы: 1. Что такое фреймы? Для чего они используются? Домашнее задание: 1. Выучите конспект. Практическая работа № 7 по теме: «Создание форм» Цель: научиться создавать различные элементы форм. Формы представляют собой интерактивные элементы HTML, позволяющие разработ- чикам страниц взаимодействовать с посетителями. С их помощью пользователь может воз- вращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них, заполняя её. Форма создается при помощи различных тэгов и атрибутов, заключенных в пару . атрибут Method определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются про- токолом POST, который позволяет передавать большие объемы данных. атрибут Action определяет путь к сценарию CGI или адрес электронной почты. атрибут Еnctype определяет способ кодирования содержимого формы. Другими сло- вами, он сообщает браузеру о способе кодирования информации перед отсылкой сер- веру. По умолчанию используется значение x-www-form-encoded. Формы для сценария: Формы для почты: При помощи элемента 2. Сохраните изменения и просмотрите их с помощью браузера Internet Explorer . Элемент применяется для логической группировки элементов внутри тэга имеет атрибут label. Элемент является базо- вым для всех элементов формы. Он используется для внедрения в форму кнопок, графиче- ских изображений, флажков, переключателей, паролей и текстовых полей. Несмотря на внешние отличия форм все они пересылают сценарию CGI данные в виде пар имя:значение. Элемент может иметь восемь атрибутов обозначаемые как type: TEXT текстовое поле, используется для ввода информации. Сюда вводятся имена, адреса, должности, телефоны, хобби, и данные практически любого типа. Элемент может иметь атрибуты: o maxlength. Задаёт максимально допустимую длину вписываемого значения в символах. o size. Задаёт максимально допустимую длину поля в символах. o value. Задаёт значение по умолчанию, которое можно менять. PASSWORD поле, в котором вместо вводимых символов отображаются звездочки. Элемент может иметь атрибуты: o maxlength. Задаёт максимально допустимую длину вписываемого значения в символах. o size. Задаёт максимально допустимую длину поля в символах. o value. Задаёт значение по умолчанию, которое можно менять. CHECKBOX Флажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички. Элемент может иметь атрибуты: o checked. Задаёт начальный статус флажка по умолчанию. o value. Задаёт значение по умолчанию, которое можно менять. RADIO Переключатели во многом напоминают флажки, отличаясь лишь более широ- кими функциональными возможностями выбора. В группе переключателей может быть выбран лишь один. Для каждого переключателя указывается отдельный элемент INPUT Visa Mastercard American Express SUBMIT Щелчок на этой кнопке приводит к пересылке содержимого формы сцена- рию, который был задан атрибутом action в элементе . C помощью кнопок можно вычислять сумму, загружать страницы, пересылать данные, сбрасывать значе- ния. RESET Кнопка используется для восстановления значений, заданных по умолчанию. Если значение по умолчанию не предусмотрено, то оно просто обнулится. Ширина кнопки может меняться в зависимости от других элементов. Имеет так же атрибут value. IMAGE Во многом похож на кнопку SUBMIT, только в качестве кнопки использует- ся изображение. Одним из преимуществ является возможность передачи координат щелчка пользователя, что позволяет организовать карту изображений. Элемент может иметь атрибуты: o src. Задаёт URL файла с изображением. o align. Задаёт выравнивание изображения относительно текста при помощи значений TOP, MIDDLE и BOTTOM. o name. Задаёт имя карты, которое так же пересылается сценарию вместе с коор- динатами. Элемент Пример: http://www.название.домен/?слово1+слово2+слово3 Если поисковая программа сервера поддерживает стандартный синтаксис запроса с использованием знаков ? и +,поиск будет осуществлен. Элемент применяется для альтернативного задания информации для управляю- щих полей формы. Поддерживает атрибут for, который связывает элемент с дру- гим элементом формы, а значение атрибута for должно совпадать со значением атрибута id связанного управляющего элемента. Задание 3. Создание управляющих полей. 1. Добавьте в созданный вами HTML-документ следующий фрагмент: 2. Сохраните изменения и просмотрите их с помощью браузера Internet Explorer . Задание 4. Самостоятельная творческая работа над своим сайтом. Подведение итогов Сделайте в тетради конспект теоретического материала. Ответьте на следующие вопросы: 1. Что такое формы? Для чего они используются? 2. Какие элементы форм вы знаете? Как их создать? 3. Какие элементы форм чаще всего встречаются на сайтах (и на каких)? Домашнее задание: 1. Выучите конспект. Самостоятельная работа по теме: «Создание сайта» Задание 1: прочитайте текст «Достопримечательности России», приведенный в прило- жении. Подберите к этому тексту соответствующие иллюстрации (можно воспользоваться Интернетом для поиска картинок) и подходящую текстуру для фона сайта. Задание 2: используя подобранный материал и язык разметки гипертекста HTML, соз- дайте сайт «Достопримечательности России», отвечающий следующим требованиям: 1. Главная страница должна состоять из трех областей (фреймов): Название сайта (1) Главное меню (2) Содержимое активной страницы (3) 2. В верхней области (1) должна обязательно быть бегущая строка. Желательно здесь также расположить соответствующую эмблему. 3. Главное меню (2) должно быть оформлено в виде маркированного списка и состоять из гиперссылок, содержимое которых открывается в третьей области. 4. Содержимое активной страницы (3) обязательно должно содержать ссылку на глав- ную страницу. 5. В качестве фона должна быть использована одна текстура. 6. Каждую подчиненную страницу желательно оформить соответствующей иллюстра- цией. 7. На главной странице обязательно должны быть интерактивные элементы (формы). 8. После того, как вы создадите свой шедевр, оцените его, используя критерии оценки сайтов. Если все идеально, то продемонстрируйте работу учителю (покажите, что ра- ботают все гиперссылки, форма заполняется и очищается и т.д.). Задание 3: Представьте свою работу и защитите ее перед своей группой. Контрольный тест по курсу «Основы создания Web страниц» 1) Программа просмотра гипертекстовых страниц WWW - а) Браузер; б) Outlook Express; в) Блокнот; г) Провайдер. 2) Отдельным документом в WWW называется: а) Web-страница; б) Web-узел; в) Сайт; г) Рабочая станция. 3) Группа тематически связанных Web-страниц, расположенных на одном компьюте- ре, называется: а) Web-страница; б) Web-узел; в) Браузер; г) Сервер. 4) Элемент Web-страницы, используемый для быстрого перехода к другому докумен- ту: а) Гипертекстовая ссылка; б) Гипертекст; в) Протокол. 5) Как называются слова в угловых скобках < > в языке HTML: а) Операторы; б) Теги; в) Дескрипторы; г) Не имеют названия. 6) Какие парные теги языка HTML начинают и заканчивают гипертексты? а) ; б) …; в) … а) Блокнот; б) Microsoft Word; в) Front Page; г) Internet Explorer. Приложение 1 Этапы работы над сайтом Этап Содержание работы Определение вида сайта Решить какого вида сайт вы будете создавать: Личный сайт, Сайт фирмы, учебного учреждения, учебной группы и т.д., Электронные журналы, энциклопедии. Отбор содержания Определить, какой из имеющегося материала следует разместить на сайте. Выбор формы представления материала Представить отобранный материал в наиболее наглядном виде (таблицы, списки, фотографии и т.д.). Определение количества вспо- могательных файлов и их со- держание В общем виде определяется количество вспомогательных файлов, их содержание. Выбор дизайна В зависимости от темы сайта и вида продумать его оформление: фон, цветовую гамму, иллюстрации. Написание сценария сайта Сценарий — эскиз презентации, выполненный на бума- ге, отражающий представление информации в том виде, в каком ее видит разработчик. Необходимо продумать и указать в сценарии: Эскиз главной страницы сайта (размещение материа- ла на сайте), Оформление сайта (вид и цвет фона, шрифтовое оформление), Навигация. Создание сайта с помощью ком- пьютерных технологий Создание сайта проходит в три этапа: 1. Создание главной страницы с помощью языка раз- метки гипертекста HTML (разделение ее на зоны, напол- нение каждой зоны текстовым и иллюстративным мате- риалом). 2. Создание вспомогательных файлов, их оформление. 3. Создание и настройка навигации. Тестирование Запуск сайта на исполнение. Устранение ошибок в текстовом и иллюстративном материалах. Проверка гиперссылок, реализующих навигацион- ную схему. Эксплуатация Размещение своего сайта в Интернет. Приложение 2 Оформление сайта Главная страница или Стиль Соблюдайте единый стиль оформления. Избегайте стилей, которые будут отвлекать от содержания сайта. Вспомогательная информация (управляющие кнопки) не должны преобладать над ос- новной информацией (текст, рисунки). Для фона выбирайте более холодные тона (синий или зеленый). На одной странице рекомендуется использовать не более трех цветов: один для фона, один для заголовков, один для текста. Цвет фона и цвет шрифта должны хорошо сочетаться и не раздражать глаза. Для фона и текста используйте контрастные цвета (например, белый и синий). Обратите особое внимание на цвет гиперссылок (до и после использования). Шрифты, абзацы Для заголовков размер шрифта не менее 24 пт. Для информации — не менее 18 пт. Шрифты без засечек легче читать с большого расстояния. Нельзя смешивать разные типы шрифтов в одном сайте. Для выделения информации следует использовать жирный шрифт, курсив или подчер- кивание. Нельзя злоупотреблять прописными буквами (они читаются хуже строчных). Название Web-страницы Эмблема или фо- то Форма ответа на вопросы для посетителей Карт а са й т а (м е- ню) Рабочее поле Название Web-страницы Эмблема или фото Форма ответа на вопросы для посетителей Карта сайта (меню) Рабочее поле Текст должен быть выровнен по ширине. Содержание, расположение информации на странице Предпочтительно горизонтальное расположение информации. Наиболее важная информация должна располагаться в центре экрана. Требования к навигации сайта На всех страницах должен иметься выход на главную страницу, отображаться главное меню сайта. На страницах могут быть гиперссылки на текстовые документы и т.п. На сайте должны присутствовать интерактивные элементы HTML, позволяющие разра- ботчикам страниц взаимодействовать с посетителями. |