- •Использование гиперссылок
- •Задание цвета для отдельных ссылок.
- •Переход внутри одного документа.
- •Возможности сети интернет.
- •Электронная почта.
- •Система телеконференций Usenet (от Users Network).
- •Системы информационного поиска сети Интернет.
- •Программа пересылки файлов Ftp.
- •Программа удалённого доступа Telnet.
- •Виды подключений.
- •Классификация видов подключения.
- •Структура глобальной сети интернет.
- •Тематические каталоги.
- •Устройство каталога
- •Популярные каталоги
- •Метапоиск.
- •Коллекция ссылок.
- •Рейтинги
- •Индексы
- •Простой поиск.
- •Расширенный поиск
- •Условия на слова из фразы поиска
- •Условия на найденные документы
- •Поиск файлов
- •Поиск программ
4 курс
28.10.2011
Создание веб страницы.
Например создадим веб страницу 7 чудес света.
Эта работа предполагает создание 8 отдельных файлов.
Причем каждый файл представляет собой текст с картинками и ссылки на другие страницы.
Начнем с главной страницы index.htm.
С помощью программы блокнот наберем текст вместе с тегами html и сохраним набранный текст в файле index.htm, и просмотрим полученный документ с помощью программы IE.
Редактирование веб страницы
Используя библиотеку рисунков можно изменить цвет фона на фоновый рисунок. В теге body вместо атрибута bgcolor используют атрибут background.
<body background =”fonl.jpg” text=”red”>
Цвета в html можно задавать их англ. названиями, а также 16-тиричными кодами. Так как каждый цвет задается сочетанием 3-х основных цветов (красный red , зеленый green, синий blue) то 16-тиричный код любого цвета записывается как RR, GG, BB.
Например
Для красного (red) - FF0000
Для зеленого (green) - 00FF00
Для синего (blue) - 0000FF
Для розового (pink) - FFC0CB
<body background =”fonl.jpg” text=”#FF0000”>
<body bgcolor =”#FFC0CB” text=”#FF0000”>
Использование графических элементов.
Атрибут src=имя файла.
Для включения графических изображений в документ используется тег <img>. Атрибут src используется для задания имени файла.
<img src=”piramida.gif”>
Для размешщения на странице картинки, которая находится на другом компьютере нужно указать URL адрес:
<img src=”www.homepage.ru/one/piramida.gif”>
Если графический файл находится на вашем компьюетре, но на другом его диске, необходимо указать полный путь к нему:
<img src=”d:/one/two/piramida.gif”>
По умолчанию картинка выравнивается по нижней границе абзаца.
Атрибут Align = этот атрибут позволяет определять положение иллюстрации по отношению к соседним элементам документа.
Можно использовать следующие значенияи атрибута:
Align=top – вертикальное выравнивание по верху
Align=middle – вертикальное выравнивание по центру.
Align=bottom – вертикальное выравнивание по нижнему краю.
Align=left – горизонтальное выравнивании по левому краю.
Align=right – горизонтальное выравнивании по правому краю.
<img align=top src=”piramida.gif”>
<P>ТЕКСТ
<img src=”sova.jpg” align=left width=141 height=114 alt=””>
ТЕКСТ
Alt=“текст надписи” – описание.
Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись которая задана атрибутом alt
<img src=”monstr.jpg” alt=”Страшный зверь”>
Атрибут alt рекомендуется использовать всегда. Даже если картинка найдена браузером задание надписи не будет лишним: стоит пользователю остановить курсор на картинке, как надпись появится в окошке и сообщит дополнительную информацию.
Атрибуты width=n и height=n
Эти атрибуты задают ширину и высоту (в пикселях прямоугольника) в который выводится картинка
<img src=”zevs.gif” height=200 width=200>
Когда размеры прямоугольника не совпадают с размерами картинки, браузер производит масштабирование картинки, подгоняя ее под указанные величины. Если размеры указываются неверно то картинка выводится браузером с искажением
<img src=”zevs.gif” height=20% width=20%>
Атрибуты hspace и vspace позволяет задать размеры пустого пространства (по горизонтали и по вертикали), которое будет оставлено между изображением и другими элементами документа (поля)
<img src=”zevs.gif” hspace=”10” vspace=”20”>
Атрибут border=n
Атрибут позволяет задать рамку вокруг иллюстрации толщиной в n пикселей. При отсутствии атрибута или при значении n=0 рамка не рисуется.
Использование гиперссылок
Гиперссылки на странице html документа.
Гиперссылка – это фрагмент текста или рисунок, который является указателем на другой файл или объект. В частности на другую веб страницу или сайт. Гиперссылки нужны, чтобы обеспечить переход от одного веб документа к другому. Она выделяется в тексте спец. цветом и активизируется мышью. Для указания на ссылку используется команда
<a href=” ” >Название ссылки</a>
Ссылки на странице могут указывать:
На фрагменты документа
На другой текстовый файл
На графические объекты
На ресурсы WWW
На адрес электронной почты
Задание цвета для всех ссылок на странице:
Цвета всех ссылок на странице задаются в качестве параметров тега body. Эти параметры являются не обязательными, если они не указаны, то используются значения по умолчанию.
Link – определяет цвет еще не посещенных (по умолчанию синий).
Alink - определяет цвет активной ссылки (в момент нажатия на ней кнопки мыши, по умолчанию красный).
Vlink - определяет цвет посещенной ссылки (по умолчанию фиолетовый).
Пример:
<body link=#FFCC00 vlink=#008000 alink=#800000 bgcolor=yellow>
</body>
Получаем активную ссылку малинового цвета, после посещения она изменит цвет на зеленый и все это на желтом фоне страницы.
Задание цвета для отдельных ссылок.
Иногда возникает необходимость использовать одновременно разные цвета ссылок. Например, светлый для темных областей веб – страницы, а темные – для светлых. Для этого используется тег <font>. Вся ссылка (вместе с тегами <а> </а> помещается в контейнер <font></font>).
<body link=#FFCC00 vlink=#008000 alink=#800000 bgcolor=yellow>
<font color=#000000><a href=content.html>Содержание сайта</a></font>
</body>
Здесь оранжевый цвет ссылки заданный в теге <body> заменяется на черный с помощью тега <font>.
Переход внутри одного документа.
Для задания гипертекстового перехода внутри одного документа используют две команды. Первая команда с атрибутом href является источником перехода. Вторая с атрибутом name – приемником.
…
<a href = # метка >текст </a> Задание перехода по метке. На экране выводится ссылка: текст
…
<a name = метка> </a> Метка. Сюда браузер приходит по ссылке. На экране ничего не отображается.
…
Якорь – некоторая точка веб – страницы (закладка), которой присвоено уникальное имя. Что бы отличать имя якоря от имен файлов, в нем используется символ «#»(диез). Имя якоря должно быть коротким и не содержать пробелов. В том случае когда имя содержит пробелы или ключевые символы html имя обязательно заключать в кавычки. Или например для документа с оглавлением.
Переход к другому документу (файлу).
Для того чтобы браузер загрузил в свое окно новый html документ нужно записать в программе ссылку при помощи команды <a> с атрибутом href=имя файла.
<a href = имя файла>текст</a> Выполнить файл «имя файла»
На экран выводится текст.
При щелчке пользователя на ссылке браузер строит на экране документ по программе, заданной в файле «имя файла»
Картинка как гиперссылка.
Что бы заставить работать картинку как гиперссылку нужно вложить команду IMG dyenm команды <a>.
<a href= переход …><IMG src=файл …></a>
Картинка ведет себя так же как текст. Курсор при попадании на картинку ссылку меняет свою форму. Отличие в том, что картинка ссылка не подчеркивается как текст и не выделяется цветом, а обрамляется в рамочку.
Гиперссылки на ресурсы WWW.
Что бы создать ссылку на ресурсы удаленных компьютеров используется URL адрес удаленного документа. Гиперссылка содержащая URL адрес имеет вид:
<a href=”ya.ru”></a>
Гиперссылки на адрес электронной почты
Среди URL существует специальный адрес для отправки электронной почты:
<a href =mailto:почтовый адрес >Пишите письма </a>
Изображения – карты.
Решение вопросов дизайна.
Дизайн (design) – план, проект, рисунок – термин, обозначающий художественное конструирование предметного мира; разработка образцов рационального построения предметной среды. Ключевые фразы в этом определении это:
Художественное конструирование.
Рациональное построение.
т.е. дизайн продукта в нашем случае сайта оценивается по внешнему виду и удобству использования.
Как получить сайт с хорошими пользовательскими навыками.
Постоянные элементы сайта.
Каждая страница сайта должна иметь постоянные элементы это:
Логотип – расположен, как правило, в левом верхнем углу страницы. На внутренних страницах логотип является ссылкой на главную страницу.
Заголовок сайта – расположен в самом верху страницы.
Главное меню – состоит из прямых потомков начальной страницы. Начальная страница традиционно также включается в состав главного меню. Главное меню расположено горизонтально под заголовком и (или) слева, образуя вертикальный ряд.
Заголовок страницы и окна.
Заголовок страницы должен располагаться ниже заголовка сайта или ниже горизонтального меню, если оно имеется под заголовком сайта.
Это удобно когда окно с сайтом свернуто в кнопку на панели задач. На этой кнопке пользователь видит заголовок текущей страницы.
В любом случае заголовок окна дополнительная подсказка пользователю о его текущем положении на сайте.
Заголовка окна должен буквально повторять заголовок страницы.
Главное меню.
Количество, названия пунктов, их порядок в главном меню не должны меняться при листании страниц.
В меню обязательно должен присутствовать пункт, указывающий на текущую страницу. Этот пункт в отличие от остальных не должен быть ссылкой.
Названия пунктов должны быть краткими.
Главное меню полезно повторять на концах страниц.
Меню вначале страницы удобно, когда сайт просматривают.
Навигация.
Навигационная система сайта является важным элементом дизайна, напрямую влияющая на удобство его использования. Навигация является удобной, если на любой странице легко ответить на три вопрос:
Где я?
Куда я могу пойти?
Где меню?
Где я?
На этот вопрос помогают ответить следующие элементы сайта:
Логотип и заголовок – они называют сайт
Заголовок страницы, заголовок окна и позиция меню, которая не является ссылкой, - отмечают текущую страницу сайта.
Меню «хлебные крошки» показывают путь от главной страницы к текущей.
Куда я могу пойти?
В примере показанном на рисунке пользователь находится на странице «раздел 2.2». он может перейти к сестрам этой страницы («раздел 2.1», «раздел 2.3», «раздел 2.4»), к ее предку «раздел 2» и сестрам предка («раздел 1», «раздел 3», «раздел 4») или переместиться на начальную страницу сайта.
Где меню?
Пользователь не должен испытывать проблемы с доступом к навигационным элементам.
Меню обязано быть вначале страницы, чтобы пользователю было удобно пролистывать сайт, и в конце, чтобы продолжить движение по сайту после прочтения страницы.
На длинных страницах полезна ссылка вверх после каждого раздела.
Пример глубокой иерархии.
Если сайт имеет третьи, четвертые и более глубокие иерархические уровни, то на каждой странице должны присутствовать следующие элементы:
Главное меню сайта (корень начало и список прямых потомков) – в этом меню предок текущей страницы (это ссылка) должен быть как – то дополнительно выделен, например:
Начало | университет | продукты история кук ссылки карта
Меню текущей страницы – в это меню записывают страницы – сестры текущей страницы, т.е. страницы, имеющие общего прямого предка с текущей,
Набор
Оплата
Курсы
Кураторы
Методы
Учебники
Книги
Сидоров
Мнения
Статьи
История
Меню «хлебные крошки». Пункты этого меню отделяют друг от друга каким – либо направленным знаком.
Начало университет кураторы
Авторская подпись
На каждой странице должны быть авторская подпись с адресом электронной почты, записанном в явном виде. Эта запись может располагаться в начале страницы или в ее конце.
Причины по которым необходима авторская подпись:
Авторство всегда интересует пользователя.
Адрес электронной почты позволит пользователю написать письмо автору сайта.
Внешние ссылки.
На сайте обязательно должны быть внешние ссылки, иначе сайт тупик.
Внешние ссылки полезно собирать на отдельной странице (с названием «ссылки») и дополнительно распределять по страницам, исходя из контекста.
В каждом случае внешние ссылки желательно прописывать в явном виде (чтобы пользователь не путал их со ссылками на страницы текущего сайта и мог скопировать через буфер обмена).
Внешние ссылки должны быть прокомментированы.
Полезно размещать на главную страницу сайта: идею сайта, анонсы материалов и новости.
Текст на сайте
Тексты нужно разбивать на небольшие абзацы, так как большие абзацы читать с экрана трудно. Абзацы должны отделяться друг от друга пустыми строками. Красные строки лучше не использовать.
На «шершавом» фоне текст лучше записывать в одноцветной области.
Не нужно фиксировать размер шрифта.
Не записывайте основной текст увеличенным размером шрифта и тем более жирным или курсивом.
Используйте шрифт по умолчанию.
12 января 2012 г.