В. Г. Яснецкая
Электронные издания
Учебно-методическое пособие
Москва Институт международного права и экономики имени А.С. Грибоедова
2003
1
УТВЕРЖДЕНО кафедрой прикладной информатики
Яснецкая В.Г.
Электронные издания: Учеб.-метод. пособие. – М.: ИМПЭ им. А.С. Грибоедова, 2003. – 64 с.
В пособии рассмотрены виды электронных изданий, основы языка создания гипертекстовых документов, свойства основных тегов HTML (ссылок, изображений, списков, таблиц, форм). Практические задания выполняются с использованием двух основных редакторов HTML, HomeSite и FrontPage, что позволяет студентам рассмотреть работу как редактора кода HTML, так и визуального редактора. Все это позволяет создавать полноценные электронные издания.
Предназначено для студентов факультета журналистики. Пособие может быть полезно всем, кто хочет получить представление о веб-страницах и способах их создания.
Подготовлено на кафедре прикладной информатики.
© Яснецкая В.Г., 2003
2
СОДЕРЖАНИЕ |
|
ВИДЫ ЭЛЕКТРОННЫХ ИЗДАНИЙ ............................................................................................................................... |
5 |
ГАЗЕТА, ЭЛЕКТРОННЫЙ ВАРИАНТ ....................................................................................................................................... |
5 |
ЖУРНАЛ, ЭЛЕКТРОННЫЙ ВАРИАНТ ..................................................................................................................................... |
6 |
КНИГИ, ЭЛЕКТРОННЫЙ ВАРИАНТ ........................................................................................................................................ |
7 |
ИНФОРМАЦИОННЫЕ АГЕНТСТВА......................................................................................................................................... |
7 |
ОСНОВЫ HTML .................................................................................................................................................................. |
8 |
СТРУКТУРА ПРОСТЕЙШЕЙ ВЕБ-СТРАНИЦЫ:......................................................................................................................... |
8 |
АТРИБУТЫ............................................................................................................................................................................ |
9 |
ОСНОВНЫЕ ТЕГИ:............................................................................................................................................................... |
10 |
ПРАВИЛА НАПИСАНИЯ HTML-КОДА. ............................................................................................................................... |
11 |
СПОСОБЫ ЗАДАНИЯ ЦВЕТА.................................................................................................................................................. |
0 |
СПЕЦИАЛЬНЫЕ СИМВОЛЫ. .................................................................................................................................................. |
1 |
АБЗАЦ <P>…</P> ............................................................................................................................................................... |
2 |
ТЕГ <FONT> ....................................................................................................................................................................... |
2 |
ТЕГ <BODY>....................................................................................................................................................................... |
2 |
ЛИНЕЙКА. ............................................................................................................................................................................ |
3 |
ПРАКТИЧЕСКОЕ ЗАДАНИЕ 1. ................................................................................................................................................ |
5 |
ГИПЕРССЫЛКА.................................................................................................................................................................. |
6 |
СПОСОБЫ СОЗДАНИЯ И ВИДЫ ГИПЕРССЫЛОК ..................................................................................................................... |
6 |
ПРОТОКОЛ MAILTO .............................................................................................................................................................. |
7 |
АТРИБУТЫ ТЕГА <А>…</A>: ............................................................................................................................................. |
7 |
ПРАКТИЧЕСКОЕ ЗАДАНИЕ 2. ................................................................................................................................................ |
8 |
ДОБАВЛЕНИЕ ИЗОБРАЖЕНИЙ НА ВЕБ-СТРАНИЦУ ............................................................................................ |
9 |
АТРИБУТЫ ТЕГА <IMG>...................................................................................................................................................... |
9 |
ПРАКТИЧЕСКОЕ ЗАДАНИЕ 3. .............................................................................................................................................. |
11 |
СОЗДАНИЕ СПИСКОВ.................................................................................................................................................... |
12 |
ПРАКТИЧЕСКОЕ ЗАДАНИЕ 4. .............................................................................................................................................. |
15 |
ТЕГ <HEAD>…</HEAD> .................................................................................................................................................. |
17 |
ПРАКТИЧЕСКОЕ ЗАДАНИЕ 5. .............................................................................................................................................. |
17 |
ТАБЛИЦЫ........................................................................................................................................................................... |
17 |
СОЗДАНИЕ ПРОСТОЙ ТАБЛИЦЫ.......................................................................................................................................... |
17 |
АТРИБУТЫ ТЕГА <TABLE>:.............................................................................................................................................. |
19 |
АТРИБУТЫ ТЕГОВ <TR>, <TH> И <TD>........................................................................................................................... |
21 |
ПРАКТИЧЕСКОЕ ЗАДАНИЕ 6. .............................................................................................................................................. |
23 |
ФРЕЙМЫ............................................................................................................................................................................. |
25 |
АТРИБУТЫ <FRAMESET> И <FRAME> ......................................................................................................................... |
26 |
ПРАКТИЧЕСКОЕ ЗАДАНИЕ 7. .............................................................................................................................................. |
27 |
ФОРМЫ ............................................................................................................................................................................... |
29 |
ЭЛЕМЕНТЫ ФОРМ............................................................................................................................................................... |
30 |
TEXTAREA.................................................................................................................................................................... |
30 |
SELECT......................................................................................................................................................................... |
30 |
TEXT ............................................................................................................................................................................. |
31 |
PASSWORD .................................................................................................................................................................. |
32 |
CHECKBOX.................................................................................................................................................................. |
32 |
RADIO........................................................................................................................................................................... |
33 |
RESET ........................................................................................................................................................................... |
33 |
SUBMIT ........................................................................................................................................................................ |
34 |
ПРАКТИЧЕСКОЕ ЗАДАНИЕ 8. .............................................................................................................................................. |
34 |
HTML-РЕДАКТОРЫ......................................................................................................................................................... |
35 |
ALLAIRE HOMESITE ....................................................................................................................................................... |
36 |
ИНТЕРФЕЙС ПРОГРАММЫ .................................................................................................................................................. |
36 |
СОЗДАНИЕ ПРОСТОЙ ВЕБ-СТРАНИЦЫ ................................................................................................................................ |
37 |
СОЗДАНИЕ ССЫЛОК ........................................................................................................................................................... |
38 |
ВСТАВКА ИЗОБРАЖЕНИЙ ................................................................................................................................................... |
39 |
ФОРМАТИРОВАНИЕ ШРИФТА............................................................................................................................................. |
40 |
ТАБЛИЦЫ ........................................................................................................................................................................... |
41 |
MICROSOFT FRONTPAGE.............................................................................................................................................. |
42 |
ПРОВОДНИК FRONTPAGE................................................................................................................................................... |
42 |
РЕДАКТОР FRONTPAGE ...................................................................................................................................................... |
45 |
Работа с ссылками и закладками.............................................................................................................................. |
47 |
Графика во FrontPage................................................................................................................................................. |
48 |
Таблицы........................................................................................................................................................................ |
49 |
Фреймы. ....................................................................................................................................................................... |
51 |
3
СПИСОК ЛИТЕРАТУРЫ................................................................................................................................................. |
55 |
4
Виды электронных изданий
Электронное периодическое издание – информация в электронном виде, периодически дополняемая и обновляемая. Она может быть размещена в локальной сети организации, в интернете. Все зависит от цели опубликования информации. Первый вариант используется, если нужно информировать сотрудников внутри фирмы, надежно скрыв данные от посторонних. Это может быть новостная рассылка, объявления на внутреннем сайте организации, общедоступное хранилище данных. Второй вариант, размещение в интернете, – для широкого круга читателей. Созданию подобного электронного издания посвящено данное пособие. Результатом будет выпуск электронной газеты на сайте вуза.
Интернет – глобальная компьютерная сеть, объединяющая десятки миллионов людей по всему миру. Она стала неотъемлемой частью нашей повседневной жизни. Благодаря ей можно моментально передавать и получать информацию, независимо от местонахождения отправителя и адресата. Интернет позволяет публиковать любую информацию, делая её доступной миллионам людей по всему земному шару.
Интернет предоставляет различные возможности: просмотр веб-страниц, проверка и отправка электронной почты, обмен файлами большого объема.
За обмен файлами большого объема отвечает протокол FTP. При помощи FTP-клиентов можно перебрасывать любые файлы, доступ к которым открыт. Пример FTP-клиента – программа CuteFTP.
Электронная корреспонденция хранится на почтовых серверах. Доступ к ним осуществляется через веб-интерфейс (сайт почтового сервера) или с помощью почтового клиента (например, Outlook Express).
Веб-страница, html-документ или гипертекстовый документ представляет собой текст с гиперссылками. Гиперссылка – текст или картинка в окне броузера, при наезде мышкой на которую курсор принимает вид руки. При нажатии на неё осуществляется переход на другую веб-страницу. Сайт – один или несколько гипертекстовых документов, объединенных одной темой. Чтобы просмотреть ка- кой-либо гипертекстовый документ в интернете, мы должны загрузить програм-
му-броузер (например, Internet Explorer или Netscape Navigator).
Электронные интернет-издания можно разделить на электронный вариант печатных изданий (газеты, журналы, книги) и информационные агентства. Рассмотрим более подробно каждый из вариантов.
Газета, электронный вариант
Это прежде всего копия печатного издания. Она должна быть узнаваема, что, безусловно, существенно ограничивает дизайнера интернет-варианта. У человека, впервые попавшего на сайт, не должно быть сомнений, что перед ним любимая газета в электронном виде. С другой стороны, многие посетители не знакомы с печатным оригиналом. Наша задача – привлечь их внимание и заставить
5
снова вернуться на сайт. Как этого можно добиться? Горячими новостями, яркими событиями, ссылки на которые есть на первой странице. Горячие новости означают частую обновляемость издания и быструю загрузку. Скорость загрузки в первую очередь зависит от количества графической информации. Чем меньше рисунков содержит веб-страница, тем быстрее посетитель её увидит. Совсем избежать графики не удастся: сплошной текст на экране выглядит не очень привлекательно. Но как бы ни был интересно оформлен и информационно наполнен сайт, всё впечатление могут испортить орфографические и грамматические ошибки. Исправлению их стоит уделить особое внимание.
Выделим основные характеристики электронной газеты:
•она должна быть похожа на печатный вариант, узнаваема (ограничения в дизайне)
•акцент на новости и яркие события
•минимум цветов. Оптимально – два, контрастные: черный текст на белом фоне или белый текст на черном фоне
•минимум графики
•«Нет ошибкам!»
•частая обновляемость
•быстрая загружаемость
Журнал, электронный вариант
В отличие от газеты структура данного издания более спокойная. Реже обновляется. Дизайн электронного и печатного вариантов может различаться. Но журнал, опять же, должен быть узнаваем в обоих вариантах. Обычно сохраняют цветовую схему и стиль печатного издания, но уменьшают рисунки. Фотографию на первой веб-странице сайта, которая грузится пять минут, мало кто дождётся. Несомненно, многие захотят посмотреть её в дальнейшем. В таком случае можно отдельные html-документы целиком посвятить рисункам или фотографиям, заранее предупреждая посетителей о размере загружаемых файлов. Оформляется предупреждение в виде надписи рядом с миниатюрой изображения.
Большое внимание по-прежнему уделяется тексту. Привлечь посетителей можно оригинальным стилем шрифта, небольшим количеством анимации.
Основные характеристики журнала:
•больше внимание оформлению (интересный дизайн, оригинальный шрифт)
•наличие сходства с печатным изданием
•быстрая загружаемость начальной веб-страницы электронного варианта
•графика в отдельном разделе, миниатюры снабжены предупреждением о времени загрузки оригиналов
•читабельность текста
•«Нет ошибкам!»
6
Книги, электронный вариант
Это электронная библиотека. В газетах и журналах нужно обеспечить быстрый доступ к интересующей посетителя информации. Дальше человек будет смотреть, что ещё здесь интересного и полезного для него. На сайт-книгу пользователь заходит с вполне определённой целью. Он может подождать загрузки первой страницы. Но дальше наша задача – обеспечить быстрый путь к достижению цели его визита. Организация сайта должна быть похожа на систематический каталог. К одному и тому же документу, одной и той же странице пользователь должен иметь возможность добраться разными путями: вводя название книги; осуществляя поиск по фамилии автора, по тематике. Другими словами, необходимо предоставить посетителю несколько вариантов поиска.
Таким образом, главные характеристики электронной книги:
•четкое разделение по темам
•поиск автора по алфавиту
•поиск по теме
•поиск по ключевым словам
•возможность скачать заархивированный вариант
•минимум графики. Исключение – требования содержания книги
•неяркая цветовая гамма (лучше ограничиться черным текстом на белом фоне). Исключение – оформление первой страницы и меню.
•красивый шрифт заголовков
•особое внимание выбору стиля. Он должен соответствовать содержанию книги
Информационные агентства
Данный вариант равносилен сайту компании. Его посетители могут иметь цель, а могут иметь расплывчатое представление о ней. Здесь все средства хороши. Особое внимание – к организации и дизайну первой страницы. Она должна быть сформирована так, чтобы, во-первых, посетитель мог быстро найти нужный раздел и углубиться в его изучение; во-вторых, необходимо заманить блуждающего пользователя и определить для него цель, то есть заинтересовать его содержимым.
Характеристики:
•большой объём информации
•ветвистая структура
•новости сайта на первой веб-странице
•поиск по сайту
•оригинальный дизайн
•структуре сайта – отдельную веб-страницу
•быстрая загружаемость
7