|
Практические по созданию сайтов. Создание вебсайтов Практические работы Текстовая вебстраница
И 30.11.2021 нформатика, 11 класс К.Ю. Поляков, Е.А. Еремин
Практические работы Текстовая веб-страница П ерейдите в каталог RUSKEALA. Загрузите документ ruskeala.html – заготовку для новой веб-страницы. Оформите страницу так, как на образце справа.
Уровень А.
Добавьте тэги, которые должны быть в правильном HTML-документе (, ,
div>body>html>На этой странице подключается стилевой файл europe.css и в теле документа размещен блок с идентификатором data, в который мы будем загружать данные из XML-файла. Скопируйте в каталог JS файл loadxml.js, в котором записаны функции для динамической загрузки XML-документа и стилевой XSL-таблицы4. Подключите этот файл к веб-странице с помощью тэга script. Удалите из файла europe2.xml строку, в которой подключается стилевой файл europe2.xsl. Удалите из файла europe2.xsl строки, содержащие HTML-тэги (теперь они находятся в теле HTML-страницы), а также команды для сортировки и поиска. Добавьте в тело веб-страницы скрипт с функцией init, которая загружает XML-документ europe2.xml и таблицу стилей europe2.xsl в блок с идентификатором data:
function init() {source = loadXMLDoc("europe2.xml");loadStyle("europe2.xsl", "data");return true;}script>и вызовите функцию init в обработчике события onLoad (он срабатывает сразу после загрузки страницы): <body onLoad="init();">Откройте веб-страницу europe.htm в браузере и убедитесь, что выводятся данные по всем странам. Теперь осталось организовать сортировку. Заголовки столбцов таблицы находятся в стилевом файле europe2.xsl, их нужно сделать гиперссылками, так чтобы при щелчке по ним вызывались функции, выполняющие сортировку (подгружающие другую таблицу стилей). Например, вместо строки
Страна | нужно записать
>Странаa>
th>
Вызов функции loadStyle в обработчике события onClick (при щелчке мышью) загружает таблицу стилей europe2n.xsl, которая должна выполнить сортировку по названию страны.
Тем же способом превратите все заголовки столбцов таблицы в гиперссылки. Конечно, имена таблиц стилей должны быть разными. Например, последняя буква названия XSL-файла может обозначать порядок сортировки: n (от англ. name) – по названию страны; c (от англ. capital) – по названию столицы; p (от англ. people) – по числу жителей; a (от англ. area) – по площади.
Скопируйте основную таблицу стилей europe2.xsl четыре раза, получив файлы с теми именами, которые указаны в гиперссылках. В каждый из них добавьте нужный вариант сортировки. Откройте веб-страницу europe.htm в браузере и убедитесь, что все варианты сортировки работают правильно. Особое внимание обратите на сортировку по числовым данным (количеству жителей и площади).
Динамический HTML Скопируйте на свой компьютер каталог SCRIPT. Откройте в редакторе файл valaam.htm и посмотрите, как он выглядит в браузере.
Ваша задача – оформить документ так, как показано на следующей странице. В нем будет один скрытый блок. Для оформления используйте рисунки из каталога images.
Добавьте тэги, необходимые для правильного HTML-документа. Добавьте заголовок страницы (TITLE), укажите название документа и фамилию автора, например:
Валаам: работа Василия Пупкина.
Выделите заголовок документа стилем H1. Справа от заголовка добавьте рисунок valaam_gray.gif, который будет ссылкой на сайт valaam.ru. При наведении мыши рисунок должен меняться на valaam.gif. Выделите абзацы в тексте с помощью тэга P. Создайте стилевой файл valaam.css и файл для скриптов valaam.js, подключите эти файлы к документу. Все оформление должно быть сделано с помощью CSS, все скрипты «убраны» в файл valaam.js. Замените верхние кавычки на «ёлочки». Замените везде, где нужно, обычные пробелы на неразрывные, и знаки «минус» – на тире; сделайте так, чтобы тире не отрывались от предыдущих слов. Сделайте плавающий блок, содержащий фотографию Валаама и подпись «Фото А. Колыбалова (www.rg.ru) ». Адрес сайта должен быть ссылкой на этот сайт. Подпись должна быть набрана шрифтом без засечек (sans-serif), курсивом, размер 80% от размера шрифта основного текста, внешних отступов (margin) нет. Оформите скрытый блок, включающий ту часть текста, которой нет на экране в краткой версии (см. оборот). Присвойте этому блоку имя (id), установите следующее оформление: цвет фона #EEEEFF; рамка синяя, сплошная, толщиной 1 пиксель; отступы по бокам 10 пикселей. В нижнюю часть скрытого блока добавьте внутренний плавающий блок, содержащий фотографию резьбы по дереву с подписью ‘К. Гоголев. «На пристани» (резьба по дереву)’. Оформление подписи должно быть такое же, как и для первого плавающего блока. Сделайте так, чтобы скрытый блок показывался при щелчке по словам «гениев творчества и науки». В конце скрытого блока должна быть ссылка с текстом «Свернуть», при щелчке по которой блок скрывается. В конце документа добавьте форму с вопросом «Назовите ближайший город, из которого можно приехать на о. Валаам» (правильный ответ – Сортавала). Выделите вопрос с помощью тэга STRONG. Сделайте так, чтобы после щелчка по кнопке Ответить на экран выдавалось сообщение «Правильно» или «Неправильно».
Полная версия (развернутый вид):
Услуги хостинга Сравните 3-4 бесплатных хостинга сайтов по следующим критериям:
место, выделяемое под сайт ограничение трафика операционная система наличие систем управления содержанием (CMS) возможность использования PHP возможность использования СУБД MySQL доступ по FTP количество почтовых ящиков наличие рекламы
Результаты оформите в виде таблицы.
Для сравнения можно использовать сайты из Яндекс-каталога
http://yaca.yandex.ru/yca/cat/Computers/Internet/Hosting/Free_hostings/
или приведенного ниже списка
http://ucoz.ru
http://webservis.ru/
http://www.hostinger.ru/
http://www.holm.ru/
http://www.hut.ru/
http://wallst.ru/
http://www.fatal.ru/
http://www.radyx.ru/
http://freehost.int.ru/
Если вы владеете английским языком, добавьте к сравнению англоязычные бесплатные хостинги, например:
http://www.000webhost.com/
http://0fees.net/
http://byethost.com/
http://vlexofree.com/
Сделайте выводы:
Ответ:
Сравните по тем же критериям 3-4 минимальных тарифа на платных хостингах сайтов. Для сравнения можно использовать сайты из Яндекс-каталога
http://yaca.yandex.ru/yca/cat/Computers/Internet/Hosting/Paid_hostings/
или приведенного ниже списка
https://www.nic.ru/
http://www.hc.ru/ru/
http://www.mchost.ru/
http://masterhost.ru/
http://sprinthost.ru/
http://dehost.biz/
Сделайте выводы:
Ответ:
1 Для того, чтобы выполнить работу в GoogleChrome, нужно запустить его с ключом --allow-file-access-from-files.
2 Дополнительное задание для любознательных.
3 Дополнительное задание для любознательных.
4 Изучая этот файл, вы заметите, что для браузера Internet Explorer предусмотрен особый вариант действий, потому что он не поддерживает команды, работающие в остальных браузерах.
http://kpolyakov.spb.ru
| |
|
|