Главная » Учебные материалы » Информатика » Лабораторные работы » 1 семестр » Технологии создания гипертекстовых документов
Для студентов по предмету ИнформатикаТехнологии создания гипертекстовых документовТехнологии создания гипертекстовых документов 2016-07-28СтудИзба

Лабораторная работа: Технологии создания гипертекстовых документов

Описание

Технологии создания гипертекстовых документов

Содержание

  • © 2005 maillink("e-teach","mail","ru","Прохоров Виктор Сергеевич"); Рис.6. Страница сайта, содержащая ссылку на электронный адрес. Рис.6. Форма для электронного письма, которая открывается, если щелкнуть ссылку на электронный адрес. 6. ПРОВЕРКА ПОЛЕЙ ФОРМЫ ТЕХНОЛОГИЯ: Java Script ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script. Часто на web-сайте размещают форму для отправки сообщений на e-mail: E-mail отправителя: Текст письма: Она состоит из полей ввода e-mail, текста и кнопки отправки данных серверному скрипту mail.php. Для формы и полей данных в атрибутах id и name указаны уникальные имена, которыми оперируют из JavaScript. С помощью события документа (action) onsubmit, возникающего при отправке формы, вызывают функцию JavaScript: function checkmailform() { if ( (document.forms.mailer.mailsender.value == null) || (document.forms.mailer.mailsender.value.length < 7) ) { alert("Заполните поле: E-mail отправителя"); document.forms.mailer.mailsender.focus(); return false; } if (! (/w+@w+.[a-z]{2,4}/.test(document.forms.mailer.mailsender.value)) ) { alert("Введите правильный e-mail адрес"); document.forms.mailer.mailsender.focus(); return false; } if ( (document.forms.mailer.mailtext.value == null) || (document.forms.mailer.mailtext.value.length < 10) ) { alert("Заполните поле: Текст письма"); document.forms.mailer.mailtext.focus(); return false; } return true; } Функция делает три проверки: ● введен ли текст в поле «E-mail» и не меньше ли он 7 символов; ● является ли адрес правильным e-mail-адресом; ● введен ли текст сообщения и не меньше ли он 10 символов. Если хотя бы одна из проверок не пройдена, пользователь получает сообщение об ошибке. Если проблем не обнаружено, скрипт не мешает отправке данных. Листинг 6_form_check - Проверка полей формы для отправки сообщений на e-mail. Форма отзыва // E-mail отправителя: Текст письма: Рис.7. Отображение формы для отправки сообщений на e-mail. Рис.8. Сообщение о неправильно введенном адресе электронной почты (пропущена собака). 7. ПОВЫШЕНИЕ УДОБСТВА РАБОТЫ С ФОРМАМИ ТЕХНОЛОГИЯ: Java Script ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script. Форма поискового запроса размещена на каждой странице современного сайта. Не всегда дизайнер может выделить для нее достаточно места, и тогда приходится разъяснять назначение формы текстом внутри нее. Это допустимое решение, но трудно осуществимое. Чтобы отправить поисковый запрос, пользователю приходится кликнуть внутри формы мышью, выделить объяснительный текст, удалить его уже с клавиатуры, вписать свой поисковый запрос и нажать кнопку поиска или «Enter». Простой код на JavaScript избавляет посетителя от этих многочисленных действий: Эта форма передает запрос серверному скрипту search.php. Форма состоит из текстового поля для ввода запроса и кнопки отправки данных на сервер. Фраза «Поиск», вписанная в текстовое поле, задана атрибутом value. С помощью события документа onfocus запускают код на JavaScript. Можно использовать событие onclick, срабатывающее при клике на элементе, но оно менее универсально. В любом случае событие запускает программный код. В этот раз код не вынесен в отдельную функцию, а записан в качестве значения this.value = "" и фактически означает «установить значение текущего (this) поля равным пустоте». События обеспечивают большой простор для деятельности, например, есть форма, мимо которой посетитель не должен пройти: Используя onmouseover='this.value = ""; this.focus();', можно поймать курсор мыши, очистить форму ввода и переместить в нее курсор. Событие onmouseover срабатывает при прохождении курсора мыши над объектом, a this.focus() активизирует текущий объект. Листинг 7_input_reset - Формы поискового запроса. Форма поиска Рис.9. Формы поискового запроса – выбирайте лучшую! 8. ВЫПАДАЮЩЕЕ МЕНЮ ТЕХНОЛОГИЯ: Java Script, CSS ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script и W3C DOM (IE5 и старше, Mozilla, Opera) Если на сайте много ссылок в меню, необходимо сделать его ниспадающим: Информация Новости Учебные планы Пчеловодство Об авторе Учебные дисциплины Схемотехника Теория информации Надежность, эргономика, качество АСОИУ Интернет-технологии Первый блок ссылок имеет уникальное имя navbodyl, второй — navbody2. Для каждого раздела при наведении мыши на элемент и уходе мыши с элемента вызывается функция JavaScript. CSS-оформление минимально: .navhead { font-weight: bold; background-color: #ccc; } #navbody1, #navbody2 { visibility: hidden; } Для navbodyl и navbody2 указано свойство visibility: hidden;. При этом JS получает номер блока и меняет его атрибут видимости: // При наведении мыши на блок активизируется функция menushow(menunum). Menunum — переменная, хранящая строку с номером меню. Функция выбирает элемент страницы, имя складывается из navbody и номера (menunum). Далее для элемента задается свойство visibility: visible. Функция menuhide() срабатывает, когда курсор мыши покидает область меню. Листинг 8_menu – Выпадающее меню. Выпадающее меню // .navhead { font-weight: bold; background-color: #ccc; } #navbody1, #navbody2 { visibility: hidden; } Информация Новости Учебные планы Пчеловодство Об авторе Учебные дисциплины Схемотехника Теория информации Надежность, эргономика, качество АСОИУ Интернет-технологии Рис.10. Выпадающее меню на экране монитора. ЗАДАНИЕ НА САМОСТОЯТЕЛЬНУЮ РАЗРАБОТКУ Используя решения, изложенные в приведенных примерах, разработать web-сайт, содержащий не менее трех страниц. Тематику сайта выбрать самостоятельно и согласовать с преподавателем. Тематика сайта может отражать Ваши научные интересы, хобби, направление деятельности компании, где Вы работаете и т.д. В процессе работы над web-сайтом у Вас возникнут интересные решения. Пополните ими эту коллекцию и используйте в своих последующих работах! ЛИТЕРАТУРА 1. Земсков Ю. Тайны гипертекста. CHIP SPECIAL 08.05. c. 26-31.

Характеристики лабораторной работы

Семестр
Просмотров
107
Качество
Идеальное компьютерное
Размер
2,08 Mb

Список файлов

Комментарии

Поделитесь ссылкой:
Бесплатно
Рейтинг ждёт первых оценок
0 из 5
Оставьте первую оценку и отзыв!
Поделитесь ссылкой:
Сопутствующие материалы
Вы можете использовать лабораторную работу для примера, а также можете ссылаться на неё в своей работе. Авторство принадлежит автору работы, поэтому запрещено копировать текст из этой работы для любой публикации, в том числе в свою лабораторную работу в учебном заведении, без правильно оформленной ссылки. Читайте как правильно публиковать ссылки в своей работе.
Свежие статьи
Популярно сейчас
Как Вы думаете, сколько людей до Вас делали точно такое же задание? 99% студентов выполняют точно такие же задания, как и их предшественники год назад. Найдите нужный учебный материал на СтудИзбе!
Ответы на популярные вопросы
Да! Наши авторы собирают и выкладывают те работы, которые сдаются в Вашем учебном заведении ежегодно и уже проверены преподавателями.
Да! У нас любой человек может выложить любую учебную работу и зарабатывать на её продажах! Но каждый учебный материал публикуется только после тщательной проверки администрацией.
Вернём деньги! А если быть более точными, то автору даётся немного времени на исправление, а если не исправит или выйдет время, то вернём деньги в полном объёме!
Да! На равне с готовыми студенческими работами у нас продаются услуги. Цены на услуги видны сразу, то есть Вам нужно только указать параметры и сразу можно оплачивать.
Отзывы студентов
Ставлю 10/10
Все нравится, очень удобный сайт, помогает в учебе. Кроме этого, можно заработать самому, выставляя готовые учебные материалы на продажу здесь. Рейтинги и отзывы на преподавателей очень помогают сориентироваться в начале нового семестра. Спасибо за такую функцию. Ставлю максимальную оценку.
Лучшая платформа для успешной сдачи сессии
Познакомился со СтудИзбой благодаря своему другу, очень нравится интерфейс, количество доступных файлов, цена, в общем, все прекрасно. Даже сам продаю какие-то свои работы.
Студизба ван лав ❤
Очень офигенный сайт для студентов. Много полезных учебных материалов. Пользуюсь студизбой с октября 2021 года. Серьёзных нареканий нет. Хотелось бы, что бы ввели подписочную модель и сделали материалы дешевле 300 рублей в рамках подписки бесплатными.
Отличный сайт
Лично меня всё устраивает - и покупка, и продажа; и цены, и возможность предпросмотра куска файла, и обилие бесплатных файлов (в подборках по авторам, читай, ВУЗам и факультетам). Есть определённые баги, но всё решаемо, да и администраторы реагируют в течение суток.
Маленький отзыв о большом помощнике!
Студизба спасает в те моменты, когда сроки горят, а работ накопилось достаточно. Довольно удобный сайт с простой навигацией и огромным количеством материалов.
Студ. Изба как крупнейший сборник работ для студентов
Тут дофига бывает всего полезного. Печально, что бывают предметы по которым даже одного бесплатного решения нет, но это скорее вопрос к студентам. В остальном всё здорово.
Спасательный островок
Если уже не успеваешь разобраться или застрял на каком-то задание поможет тебе быстро и недорого решить твою проблему.
Всё и так отлично
Всё очень удобно. Особенно круто, что есть система бонусов и можно выводить остатки денег. Очень много качественных бесплатных файлов.
Отзыв о системе "Студизба"
Отличная платформа для распространения работ, востребованных студентами. Хорошо налаженная и качественная работа сайта, огромная база заданий и аудитория.
Отличный помощник
Отличный сайт с кучей полезных файлов, позволяющий найти много методичек / учебников / отзывов о вузах и преподователях.
Отлично помогает студентам в любой момент для решения трудных и незамедлительных задач
Хотелось бы больше конкретной информации о преподавателях. А так в принципе хороший сайт, всегда им пользуюсь и ни разу не было желания прекратить. Хороший сайт для помощи студентам, удобный и приятный интерфейс. Из недостатков можно выделить только отсутствия небольшого количества файлов.
Спасибо за шикарный сайт
Великолепный сайт на котором студент за не большие деньги может найти помощь с дз, проектами курсовыми, лабораторными, а также узнать отзывы на преподавателей и бесплатно скачать пособия.
Популярные преподаватели
Добавляйте материалы
и зарабатывайте!
Продажи идут автоматически
6513
Авторов
на СтудИзбе
302
Средний доход
с одного платного файла
Обучение Подробнее