Применение современного программного обеспеченияпри разработке web-сайтов

Методические рекомендации

Е.А. Зайцева

В методических рекомендациях представлены общие сведения о

www-сервисе Интернет и основных принципах сайтостроения,

теоретические сведения о языке HTML, каскадных таблицах стилей CSS,

практико-ориентированные материалы по изучению невизуальных и

визуальных web-редакторов, подробный алгоритм разработки web-сайта

в визуальном редакторе Microsoft Office FrontPage 2003. Материал

содержит 92 графических иллюстраций и 15 видеофрагментов,

поясняющих работу с описываемыми приложениями.

Основными целями данной разработки являются знакомство

учителей-предметников с теоретическими основами сайтостроения и

обучение их основным навыкам работы по созданию web-сайтов с

помощью современного программного обеспечения.

Содержание

Введение ………………………………………………………………………………………. - 4

Раздел 1. Общие сведения о WWW-сервисе Интернет …………………………….. - 5

1.1. Основные понятия ……………………………………………………………………. - 5

1.2. История создания World Wide Web ………………………………………………... - 8

Раздел 2. Основы сайтостроения . - 11

2.1. Содержание, структура и дизайн web-сайта …………………………………….. - 11

2.2. Язык HTML и каскадные таблицы стилей CSS ………………………………….. - 14

2.2.1. Краткая история языка HTML ………………………………………………… - 15

2.2.2. Введение в язык HTML ………………………………………………………… - 18

2.2.3. Введение в таблицы стилей CSS ……………………………………………. - 21

2.3. Инструментальные средства разработки web-сайта …………………………... - 23

Раздел 3. HTML-редактор Smart Web Builder 1.4 ……………………………………….. - 26

3.1. Создание нового web-сайта ………………………………………………………… - 27

3.2. Редактирование web-страницы ……………………………………………………. - 28

3.2.1. Добавление и форматирование текста ……………………………………… - 29

3.2.2. Создание и редактирование таблиц …………………………………………. - 30

3.2.3. Вставка графического изображения …………………………………………. - 31

3.2.4. Создание гиперссылок …………………………………………………………. - 32

3.2.5. Вставка форм ……………………………………………………………………. - 33

3.2.6. Вставка эффектов ………………………………………………………………. - 34

3.3. Дополнительные возможности …………………………………………………….. - 35

Раздел 4. Визуальный редактор Nvu 1.0 ………………………………………………. - 36

4.1. Создание и редактирование web-сайта ………………………...………………… - 37

4.2. Редактирование и оформление web-страниц …………………………………… - 39

4.2.1. Работа с текстом ………………………………………………………………… - 41

4.2.2. Вставка и редактирование таблиц …………………………………………… - 43

4.2.3. Вставка графического изображения …………………………………………. - 45

4.2.4. Организация гиперссылок …………………………..…………………………. - 47

4.2.5. Вставка форм ……………………………………………………………………. - 48

4.2.6. Шаблоны и редактируемые области ………………………………………… - 50

4.3. Редактор стилей CSS ………………………………………………………………... - 52

2

Раздел 5. Приложение Microsoft Office FrontPage 2003 - 55

5.1. Создание и редактирование web-сайта в среде приложения………………… - 57

5.1.1. Создание нового web-сайта и режимы представления …...……………... - 58

5.1.2. Организация структуры web-сайта ………………………………………….. - 61

5.1.3. Редактирование web-страницы ……………………………………………… - 64

5.1.4. Добавление и форматирование текста …………………………………….. - 66

5.1.5. Организация основных цветов web-страницы …………………………….. - 69

5.1.6. Создание и редактирование таблиц, макетные таблицы ……………….. - 69

5.2. Графические изображения как объекты приложения …………………………. - 76

5.2.1. Вставка графического и звукового фона на web-страницу ……………… - 77

5.2.2. Вставка рисунка на web-страницу …………………………………………… - 79

5.2.3. Свойства изображения ………………………………………………………… - 80

5.2.4. Редактирование изображения ………………………………………………... - 83

5.2.5. Рисованные объекты …………………………………………………………… - 84

5.3. Гиперссылка в составе Web-сайта ………………………………………………... - 86

5.3.1. Создание гиперссылок и закладок на web-страницах ……………………. - 86

5.3.2. Создание горячих точек графического изображения …………………….. - 89

5.3.3. Контроль гиперссылок средствами FrontPage 2003 ……………………… - 90

5.3.4. Общие границы …………………………………………………………………. - 91

5.4. Каскадные таблицы стилей (CSS) ………………………………………………… - 92

5.4.1. Внутренние стили ………………………………………………………………. - 93

5.4.2. Внедренные стили ……………………………………………………………… - 93

5.4.3. Внешние таблицы стилей …………………………………………………….. - 95

5.5. Фреймы (кадры) в приложении FrontPage 2003 ………………………………… - 97

5.6. Формы в приложении FrontPage 2003 ……………………………………………. - 100

5.7. Компоненты приложения и их краткая характеристика ………………………. - 104

5.8. Дополнительные возможности FrontPage 2003 ………………………………… - 111

5.8.1. Использование обтекания и позиционирования …………………………. - 111

5.8.2. Эффекты с использованием Dynamic HTML и JavaScript ……………….. - 113

5.8.3. Оформление с использованием темы .……………………………………… - 116

5.8.4. Динамические web-шаблоны .………………………………………………… - 117

Источники ..……………………………………………………………………………………. - 120

Приложение 1. Основные тэги языка HTML ……………..……………………………… - 121

Приложение 2. Описание некоторых свойств CSS …………………………………….. - 134

3

Введение.

Одним из важных аспектов модернизации образования в России является

использование информационно-коммуникационных технологий для создания учебных,

учебно-методических, научно-методических, текстовых и иллюстративных материалов по

различным предметным областям. Важное место в этом процессе занимают web-

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

информационного образовательного пространства.

Современный учитель должен уметь использовать web-сайты в своей

профессиональной деятельности и в самообразовании. Под использованием здесь

понимается не просто поиск, анализ и включение в учебный процесс как средства

обучения, но и умение создавать web-сайты, предназначенные для решения учебных

дидактических и методических задач.

Существует множество программных средств для создания и редактирования web-

сайтов, изучению которых посвящено данное учебно-методическое пособие.

Учебно-методическое пособие состоит из 5 взаимосвязанных разделов.

Раздел 1 “Общие сведения о www-сервисе Интернет” посвящен изучению основных

понятий www-сервиса, его служб и протоколов, истории развития.

Раздел 2 “Основы сайтостроения” знакомит с основными этапами разработке web-

сайта, дает общие представление о создании web-страниц с помощью языка разметки

HTML и каскадных таблицах стилей CSS, представляет обзор существующих web-

редакторов.

Раздел 3 “HTML-редактор Smart Web Builder 1.4” содержит общие сведения о

применение бесплатного невизуального html-редактора для создания web-сайта.

Раздел 4 “Визуальный редактор Nvu 1.0” знакомит с основами разработки web-

сайта с помощью бесплатного визуального web-редактора.

Раздел 5 “Приложение Microsoft Office FrontPage 2003” содержит подробный

алгоритм разработки web-сайта средствами MS FrontPage 2003.

4

Раздел 1. Общие сведения о www-сервисе Интернет.

Интернет - всемирная система объединённых компьютерных сетей, построенная

на использовании семейства протоколов ТCP/IP и маршрутизации пакетов данных. В

общем случае под протоколом понимается набор инструкций, регламентирующих работу

взаимосвязанных систем или объектов в сети. Интернет образует глобальное

информационное пространство, не имеет единого центра и единой администрации.

Общую координацию его деятельности осуществляют международные организации,

членами которых являются наиболее авторитетные эксперты из разных стран.

Некоторые считают, что историю Интернет следует начинать с 1962 или даже с

1958 года, другие называют датой его основания 1969, третьи полагают, что Интернет

появился только в 1983 году. В данном случае верно одно - именно в эти годы и

произошли важнейшие события в истории Интернет.

Настоящий расцвет Интернета начался в 1992 году, когда была изобретена новая

служба, получившая название "Всемирная паутина" (World Wide Web, или WWW, или

просто WEB). WWW позволял любому пользователю Интернета публиковать свои

текстовые и графические материалы в привлекательной форме, связывая их с

публикациями других авторов и предоставляя удобную систему навигации. Интернет стал

превращаться из средства переписки и обмена файлами в гигантское хранилище

информации.

1.1. Основные понятия.Все компьютеры, подключенные к сети Интернет, имеют свой уникальный IP-адрес.

Для удобства крупным узлам сети присваивают собственные (доменные) имена (служба

DNS). Ресурсы, доступные пользователям Интернет, располагаются на компьютерах

серверах, на которых установлено специальное программное обеспечение,

обеспечивающее передачу информации. Для работы с ресурсами Интернет, на

пользовательских компьютерах устанавливаются программы-клиенты.

Пара клиент-сервер, обеспечивающая совместный доступ к определенному типу

информационных ресурсов называется службой или сервисом (WWW, FTP, E-mail, IRC).

Каждая из них использует свой протокол передачи данных из семейства TCP/IP. Т.е.

работа пользователя с Интернет может осуществляться разными способами,

отличающимися по форме представления ресурсов и средствам (протоколом) доступа к

ним. Некоторые из них (наиболее ранние) отмирают, другие находятся в процессе

активного развития.

5

В основе каждого сервиса лежит свой сетевой протокол семейства TCP/IP-

совокупность четко определенных правил: как запрашивать, оформлять и высылать по

Сети данную разновидность информации.

Наиболее популярным в настоящее время является сервис World Wide Web (Всемирная паутина). Он не только удобен в использовании, но и обеспечивает доступ к

другим службам Интернет. World Wide Web (уорлд вайд вэб) — это гипертекстовая, гипермедийная, распределенная, интегрирующая, глобальная информационно-поисковая

система в Интернет.

Передача данных во Всемирной паутине осуществляется благодаря протоколу

передачи гипертекста - HTTP (HyperText Transmission Protocol). HTTP – протокол

прикладного уровня, разработанный для обмена гипертекстовой информацией в сети

Интернет. Протокол используется в сети WWW с 1990 года.

WWW работает по принципу клиент-сервер: существует множество web-серверов,

которые по запросу клиента (программа-браузер) возвращают ему гипермедийный

документ - документ, состоящий из частей с разнообразным представлением

информации (текст, графика, аудио, видео), в котором каждый элемент может являться

ссылкой на другой документ или его часть. Каждый информационный web-ресурс в

глобальной сети Интернет однозначно адресуется, и документ, способен ссылаться как

на другие документы на этом же сервере, так и на документы, расположенные на других

web-серверах Интернет. Причем пользователь не замечает этого, и работает со всем

информационным пространством Интернет как с единым целым. Ссылки WWW

указывают не только на документы, специфичные для самой WWW, но и на прочие

сервисы и информационные ресурсы Интернет. Более того, большинство программ-

клиентов WWW не просто понимают такие ссылки, но и являются программами-

клиентами соответствующих сервисов: ftp, gopher, сетевых новостей Usenet, электронной

почты и т.д. Таким образом, программные средства WWW являются универсальными для

различных сервисов Интернет, а сама информационная система WWW играет

интегрирующую роль.

За годы развития WWW-сервиса был создан целый ряд программ-браузеров,

первым из которых был Mosaic. В российской практике название "браузер" закрепилось

достаточно прочно, хотя в некоторых случаях употребляется и прямой перевод на

русский язык - "программа-просмотрщик". Также браузер иногда называют обозревателем

или навигатором. Сегодня в мире существует не менее десятка различных браузеров. К

наиболее распространенным относятся Internet Explorer (компания Microsoft), Netscape

Navigator (компания Netscape/AOL), Opera (компания Opera Software) и Mozilla. Все

браузеры имеют свои достоинства и недостатки, которые складываются из скорости

6

работы, способности отрывать те или иные приложения, соответствие требованиям

безопасности при работе в Сети. Естественно на популярность браузеров накладывает

отпечаток и распространенность в мире тех или иных операционных систем. На

сегодняшний день наиболее распространенными версиями являются Internet Explorer (IE)

версии 6.0 или 7.0. Их дистрибутивы, а также самые последние версии программы могут

быть получены с сайта Microsoft Corporation по адресу

http://www.microsoft.com/rus/download. Кроме IE довольно популярны браузеры нового

поколения Opera и Mozilla Firefox. Оба эти продукты бесплатны и свободны от рекламы.

Последние версии могут быть скачены с сайтов http://www.opera.com/ и

http://www.mozilla.ru/.

Сервис WWW использует URL (Uniform Resource Locator, Универсальный локатор

ресурсов) для адресации документов, расположенных на информационных web-серверах

Интернет. URL-адрес включает в себя название протокола (обычно http), по которому

осуществляется доступ к ресурсу, адреса сервера (например: www.tstu.ru), полный путь

(например: /win/kultur/museum/chiherin/) и имя (например: 0.htm) хранящегося там файла

(получаем url-адрес: http://www.tstu.ru/win/kultur/museum/chiherin/0.htm).

В основе Всемирной паутины лежит технология гипертекста. Изобретенный в

начале 1990 годов язык разметки гипертекста - HTML (HyperText Markup Language)

позволяет легко включать в WWW-документы, из которых в основном и состоит WWW,

самые разные типы объектов и делать ссылки на другие файлы, вне зависимости от того,

где они находятся.

Документы WWW называются web-страницами и включают в себя различные

информационные элементы (текст, графика, звук, видео), а также гиперссылки на другие

ресурсы Интернет. Несколько страниц, объединенных по смыслу, содержанию и

оформлению - называются web-сайтом.

Web-страница представляет собой текстовый файл с расширением htm или html,

который содержит текстовую информацию и специальные команды - HTML-тэги,

определяющие в каком виде эта информация будет отображаться в окне браузера. Вся

графическая, аудио- и видео информация непосредственно в web-страницу не входит и

представляет собой отдельные файлы с расширениями *.gif, *.jpg (графика), *.mid, *.mp3

(звук), *.avi (видео). В HTML-коде страницы содержатся только указания на такие файлы.

Переход между страницами web-сайта в браузере осуществляется с помощью

гиперссылок. Гиперссылка представляет собой выделенный фрагмент текста или

изображения, при наведении на который указатель мыши принимает форму кисти руки с

вытянутым пальцем. При нажатии на гиперссылку левой кнопкой мыши осуществляется

переход на другой электронный документ, который может находиться как на этом web-

7

сервере, так и на другом. Для организации гиперссылки в содержимое web-страницы

вставляется специальный HTML-код, содержащий url-адрес этого электронного

документа. Для организации гиперссылки необходимо знать местоположение

информационного ресурса, которое в WWW-сервисе может быть определено в

абсолютной и относительной форме.

Адресация в абсолютной форме - универсальный адрес, определяющий

местонахождение информационного ресурса, носит название URL (Uniform Resource

Locator - унифицированный адрес ресурса). URL состоит из двух частей, разделенных

двоеточием. Первая часть указывает на тип сетевого протокола, который зависит от типа

ресурса (например, если ресурс располагается на WWW-сервере, это протокол http).

Вторая часть включает в себя имя web-сервера в доменной системе имен (например,

www.tstu.ru) и, если требуется, путевое имя файла (например,

win/kultur/nauka/vernad/vertitul.htm). При записи путевого имени названия каталогов

разделяются прямой косой чертой (символ / ); в именах файлов и каталогов различаются

прописные и строчные буквы.

Вот пример URL: http://www.tstu.ru/win/kultur/nauka/vernad/vertitul.htm.

В случае использования адресации в относительной форме при записи пути к

файлу названия каталогов разделяются прямой косой чертой (/); переход по каталогам

компьютера на один уровень вверх обозначается двумя точками (..).

Если гиперссылка ссылается на документ не являющийся web-страницей, то

возможны два варианта его отображения. Если браузер имеет встроенные модули для

обработки такого документа, то его содержимое будет отображаться в окне браузера. В

противном случае, браузер запустит необходимое внешнее приложение (в Windows,

например, они прописаны в реестре), и документ будет отображаться уже не в окне

браузера.

1.2. История создания World Wide Web.В марте 1989 года Тим Бернерс-Ли (Tim Berners-Lee) из CERN (Европейский центр

ядерных исследований) предложил руководству этого международного европейского

научного центра концепцию новой распределенной информационной системы, которую

назвал Word Wide Web. Свои соображения он изложил в проекте «Гипертекст для

ЦЕРН». В 1990 году эти предложения были приняты и проект стартовал. Так началось

развитие одной из наиболее популярных современных информационных технологий

Интернет.

8

С начала 1995 года практически все компьютерные издания не обошли своим

вниманием Word Wide Web. Главную мысль всех этих публикаций можно

сформулировать следующим образом – «наконец-то появился удобный интерфейс для

работы в сети Интернет». Безусловно, программы типа Mosaic, Netscape, Arena, Internet

Explorer и т.п. являются удобными многопротокольными современными интерфейсами

пользователя, но это только часть того, что называют Word Wide Web или WWW.

Что же предлагал Тим Бернерс-Ли в 1989 году и что из этого получилось? В «Word

Wide Web: Proposal for HyperText Project», направленных руководству CERN, он считал,

что информационная система, построенная на принципах гипертекста, должна

объединить все множество информационных ресурсов CERN, которое состояло из базы

данных отчетов, компьютерной документации, списков почтовых адресов,

информационной реферативной системы, наборов данных результатов экспериментов и

т.п. Гипертекстовая технология должна была позволить легко «перепрыгивать» из одного

документа в другой.

Проект делился на две фазы, или, как у нас принято говорить очереди. Первая

очередь (продолжительностью в три месяца) должна была показать жизнеспособность

идеи проекта. В течение этого этапа работ предполагалось разработать программы-

интерфейсы для работы в алфавитно-цифровом режиме и программу-интерфейс для ОС

Macintosh и ОС NeXT, работающую в графическом режиме, сервер для доступа к

ресурсам Usenet, сервер для доступа к информационно-поисковой системе CERN,

гипертекстовый сервер и программу-шлюз между Интернет и DECnet.

В последующие три месяца (вторая очередь) предполагалось разработать

средства подготовки гипертекстовых документов, полноэкранную программу просмотра

для VM/XA, X-Window интерфейс и программу автоматической нотификации

просматриваемых материалов.

Кроме программного обеспечения предполагалось разработать общий протокол

обмена информацией в сети, метод отображения текста на экране компьютера, создать

набор базовых документов, иллюстрирующих работу системы, который мог бы

пополняться за счет документов пользователей, обеспечить поиск по ключевым словам в

этом наборе документов.

На всю эту полугодовую работу автор просил 4 разработчиков (software designers) и

одного программиста, и для каждого из них отдельное рабочее место (компьютер того

типа, для которого разработчик будет писать программное обеспечение). Кроме того,

требовалось приобрести коммерческое программное обеспечение, которое было бы

полезно при разработке системы (Guide, KMS, FrameMaker).

9

Как видно, запросы были невелики, и в октябре 1990 года проект стартовал. Уже в

ноябре был реализован прототип системы для NeXT, к Рождеству «задышал» line mode

browser, разработке которого придавалось особое значение, так как он открывал доступ к

системе через telnet, а в марте его уже можно было демонстрировать. Через год в

Интернет был установлен анонимный telnet для входа в систему. Первое сообщение об

WWW было послано в телеконференции Usenet: alt.gipertext, com.sys.next, comp.text.sgml

и comp.mail.multi-media в августе 1991 года.

По современным меркам результаты, которых достигли разработчики в 1991 году,

выглядят довольно скромно, если не вдаваться в суть работы и ограничиться только

внешним ее проявлением. Сообщество Интернет получило еще одну программу,

работающую в режиме командной строки. Прошло еще целых полтора года до того

момента, когда Mosaic, разработанная Марком Андресеном (Mark Andressen) из

Национального Центра Суперкомпьютерных Приложений (NCSA) и построенная на

принципах WWW, обеспечила бурный рост популярности «паутины» в Интернет. NCSA

начала проект по разработке разработке интерфейса в Word Wide Web месяц спустя

после объявления CERN. Одна из задач NCSA – это разработка доступных

некоммерческих программ, с другой стороны NCSA изучает новые технологии на предмет

их коммерческого применения в будущем. Word Wide Web безусловно подходила под эти

два параметра. Кроме того, спецификации WWW производили впечатление добротно

выполненной академической работы с обзором литературы по данному вопросу, обилием

ссылок и обоснованностью принятых решений. Мультипротокольный переносимый

интерфейс в WWW, создание которого начала Группа Разработки Программного

Обеспечения NCSA, был назван Mosaic. Пробная версия программы была закончена в

первой половине 1993 года, а в августе 1993 года была анонсирована альфа-версия для

Интернет.

Следует отметить, что сам проект Mosaic внес огромный вклад в развитие

спецификаций WWW, существенно обогатив различные компоненты системы.

Разработчики Mosaic ввели в стандарты WWW большое количество новшеств.

Агрессивная политика команды NCSA привела к тому, что многие программы-

интерфейсы, разработанные в рамках ранних стандартов, постепенно стали отмирать, не

выдержав конкуренции. Для самого NCSA это закончилось тем, что лидер команды, Марк

Андресен, покинул в марте 1994 года NCSA ради работы в коммерческой корпорации

Netscape Communication.

10

Раздел 2. Основы сайтостроения.

Web-сайт - это информация (представленная в определенном виде), которая

располагается на web-сервере и имеет свое уникальное имя (адрес). Web-сайт

представляет собой некоторый набор текстовой и графической информации,

организованный в виде определенного количества web-страниц, связанных между собой

гипертекстовыми ссылками.

2.1. Содержание, структура и дизайн web-сайта.При создании web-сайта основное внимание должно быть уделено таким его

составляющим как содержание (контент), структура (навигация) и дизайн (оформление).

Содержание web-сайта, должно соответствовать целям его создания, учитывать

особенности целевого сегмента посетителей сайта, быть в определенной степени

уникальной и актуальной, чтобы привлечь внимание посетителей. В соответствии со

своим содержанием web-сайты можно разбить на несколько групп.

Личные (персональные), содержащие информацию, которую создатель сайта хочет

довести до посетителей Интернета, поделиться своими знаниями, предложить на

коммерческой основе услуги и т.д.

Информационные (корпоративные) создаются фирмой или коммерческой

организацией, функциональным назначением сайта является создание имиджа

фирмы, рекламирование и оказание услуг, осуществление торговли с помощью

Интернета и др.

Образовательные - представляют собой сайты учебных заведений, библиотек,

дистанционного образования, информационное наполнение которых посвящено

образовательным ресурсам.

Развлекательные, т.е. содержащие информацию развлекательного характера – игры,

картинки, гороскопы и т.п.

К разработке содержимого следует подходить по мере увеличения детализации -

необходимо начинать с общих сведений, потом переходить к более конкретным, и только

потом - к еще более конкретным.

Структура (навигационная схема) создаваемого web-сайта зависит от того, как

связаны между собой его страницы. Различают следующие варианты структуры.

Линейная, при которой осуществляется последовательный переход от одной web-

страницы к другой.

11

Иерархическая, при которой осуществляются переходы по ветвям древовидной

структуры, в соответствии с логикой.

“Каждая к каждой” при которой с любой web-страницы можно перейти на любую

другую. Приобретает в Интернет все большую популярность.

Смешанная, при которой в различных разделах web-сайта используются разные

навигационные схемы.

Выбор структуры web-сайта зависит от его функционального назначения, числа

страниц и того, насколько легко пользователи могут получить нужную информацию. За

счет рационального выбора схемы навигации можно исключить ситуации, при которых

посетитель сайта “запутывается” в его страницах.

Дизайн играет важную роль в привлечении внимания пользователей сети Интернет

к web-сайту, однако универсального решения в этой области не существует. Дизайн web-

страниц предполагает разработку следующих элементов: цвет, шрифт, графика. При

этом сеть Интернет налагает некоторые ограничения на возможности оформления web-

страниц - время загрузки web-страниц, пропускная способность канала передачи данных,

размер графических файлов, совместимость браузеров, передача цветовой палитры и

др. В WWW используются три формата графических изображений.

GIF (Graphic Interchange Format) – формат графического обмена. GIF-файлы – это

файлы растровых изображений. При сохранении изображения в этом формате

количество используемых цветов не должно превышать 256 (иначе говоря, глубина цвета

до 8 бит на пиксель ). Графическая информация при сохранении GIF-файла сжимается

при помощи специальных алгоритмов сжатия с минимальными потерями информации.

Этот формат может содержать несколько изображений в одном файле и используется

для создания прозрачной и анимированной графики. Обычно этот формат используют

для небольших изображений, содержащих области однородной окраски с четкими

границами.

JPEG (Joint Photographic Experts Group) – объединенная группа экспертов в

фотографии. JPEG – файлы представляют собой растровые изображения, в которых

может быть использовано до 16.7 млн. цветов. При сохранении JPEG-файла происходит

сжатие информации, которое сопровождается потерями информации. Т.е. при каждом

сохранении такого файла качество изображения ухудшается. Обычно используется для

сохранения фотографий, карт и других изображений с тонкими цветовыми переходами.

PNG (Portable Network Graphics) – переносимая сетевая графика. PNG

(произносится «Пинг») – растровый формат, предназначенный для хранения и передачи

растровых изображений: черно-белых и альфа данных – до 16 бит, а цветных – до 48 бит

12

(truecolor). Он использует прогрессивный метод сжатия без потерь, позволяет сохранять в

файле палитру, текстовую информацию и обеспечивает возможность задания степени

прозрачности от нулевой до 100% для каждой точки изображения. Формат PNG не

поддерживается устаревшими браузерами ( Internet Explorer версии ниже 4.0, Netscape

Navigator версии ниже 4.04, Opera версии ниже 3.51).

Выбор оптимального формата для графического изображения, размещаемого на

Web-странице, осуществляется с учетом таких критериев как объем и качество. Т.е.

подбирается такой формат, который бы обеспечивал приемлемое качество при

минимальном объеме. Оптимальный для конкретного изображения формат зачастую

можно выбрать только экспериментальным путем.

При разработке web-сайта рекомендуется.

На первой (титульной) странице размещать заголовок сайта, ссылки на страницы с

основной информацией и некоторые общие сведения (н-р: имя автора, счетчик

посетителей, адрес электронной почты).

Ограничивать длину страниц 3-4 экранами, первая страница - 1 экран.

При необходимости со страниц содержащих основную информацию организовывать

ссылки на страницы с более подробной информацией.

На всех страницах сайта иметь ссылку на титульную страницу.

Оформлять все страницы в едином стиле (если сайт очень большой, то

придерживаться одного стиля в каждом разделе).

Не загружать страницы графикой. При размещении на сайте графического файла

большого объема, организовывать на него гиперссылку с указанием размера.

Выделяют следующие этапы разработки web-сайта:

Планирование. На этом этапе должны быть получены ответы на следующие

вопросы: цель создания web-сайта, аудитория, на которую он рассчитан, какая

информация будет размещена. Целесообразно познакомиться с сайтами, тематика

которых близка к тематике создаваемого web-сайта, с тем, чтобы избежать ошибок или

поучиться на положительных примерах. Определяются категории, подразделы сайта,

количество страниц в каждом разделе, подразделе. Разрабатывается структурная

(навигационная) схема сайта.

Реализация. На этом этапе проводится подготовка текстового и графического

материала (печать, сканирование, оптимизация). Материал разбивается по файлам в

соответствии со структурой. Организовываются ссылки между web-страницами сайта.

Разрабатывается дизайн. На этом этапе определяются: фон, на котором будет

расположена информация, цвет текста, цвет гипертекстовых ссылок, знаки навигации,

13

выделение разделов графикой или текстовыми ссылками, представление

фотографического материала.

Тестирование. После того как web-сайт создан, необходимо проверить

правильность переходов со страницы на страницу. В связи с тем, что браузеры разных

фирм иногда по-разному интерпретируют встречающиеся в HTML-документе команды

разметки, а браузеры устаревших версий "не понимают" описаний, соответствующих

новым стандартам, желательно просмотреть web-сайт в браузерах разных

производителей и разных версий, при разных разрешениях экрана, добиваясь

приемлемого результата.

Публикация. Размещение сайта в Internet. Для этого необходимо разместить все

файлы web-сайта на web-сервере, предоставляющем такие услуги.

Рекламирование. На этом этапе предполагается взаимный обмен ссылками с

другими сайтами, схожими по тематике, включение адреса сайта в письма, визитные

карточки, брошюры, буклеты и т.д., регистрация сайта в популярных поисковых серверах;

Сопровождение. После создания web-сайта нужно не забывать обновлять

информацию, расширять материал, улучшать дизайн, в противном случае велика

вероятность того, что потенциальные посетители web-сайта не будут к нему

возвращаться.

2.2. Язык HTML и каскадные таблицы стилей CSS.Для представления информации в глобальной сети WWW был разработан и

постоянно совершенствуется язык HTML (HyperText Markup Language - язык разметки

гипертекста). Гипертекстовые документы для WWW представляют собой текстовые

файлы, размеченные в соответствии со стандартом языка HTML. С 1994 года по

настоящее время разработка проводится под эгидой надгосударственной организации

World Wide Web Consortium (W3C). Информацию о стандартах, рекомендациях и

перспективах развития не только языка HTML, но и целого ряда других web-технологий,

можно найти в Интернете по адресу http://www.w3.org .

Технология каскадных таблиц стилей (Cascading Style Sheets) CSS предложена

W3C Консорциумом как средство задания параметров оформления элементов HTML

документов. В 1996 году была опубликована Спецификация CSS1 (Каскадные таблицы

стилей первого уровня). По существу, применение CSS позволяет переопределить

стилевые таблицы браузера, применяемые по умолчанию, и задать свои параметры

отображения для любого элемента документа. К сожалению, большинство браузеров не

14

поддерживает CSS в полной мере, зачастую возникает проблема совместимости с

разными браузерами.

Таким образом, логическая структура документа определяется элементами HTML-

разметки, в то время как форма представления каждого из этих элементов задается CSS-

описателем элемента.

Для создания динамичных, интерактивных страниц, включающих в себя массу

нестандартных возможностей, необходимо знать современные технологий web-

программирования. Все технологии web-программирования можно разделить на две

основные группы: программирование на стороне клиента и на стороне сервера.

Программный код, обеспечивающий интерактивность web-страниц, называется

сценарием. Сценарии на стороне клиента выполняются под управлением браузера.

Сценарии на стороне сервера выполняются под управлением Web-сервера.

Преимущество сценариев на стороне клиента состоит в том, что они могут проверять

корректность информации, введенной пользователями, и обрабатывать ее, не обращаясь

к серверу. Чаще всего сценарии, предназначенные для выполнения на стороне клиента,

создаются на языках JavaScript и VBScript. Сценарии, предназначенные для выполнения

на стороне сервера, располагаются на сервере. Принимая запрос пользователя, в

котором указана программа, сервер запускает эту программу на выполнение. В

результате выполнения программы выходные данные передаются web-серверу, а затем

клиенту. Для написания сценариев, работающих на стороне сервера, обычно

используются такие технологии, как Perl , ASP , ColdFusion , PHP , JSP и SSI.

2.2.1. Краткая история языка HTML.Начало истории HTML следует отнести к 1986 г., когда Международная

организация по стандартизации (ISO) приняла стандарт ISO-8879, озаглавленный

"Standard Generalized Markup Language (SGML)" . Стандарт этот посвящен описанию

SGML - обобщенного метаязыка, позволяющего строить системы логической, структурной

разметки любых разновидностей текстов. Слово "структурная" означает, что

управляющие коды, вносимые в текст при такой разметке, не несут никакой информации

о внешнем виде документа, а лишь указывают границы и соподчинение его составных

частей, т.е. задают его логическую структуру.

Создатели SGML стремились максимально абстрагироваться от проблем

представления электронного текста в разных программах, на разных компьютерных

платформах и устройствах вывода. Так, если с помощью SGML размечается документ,

содержащий заголовки, идеология языка запрещает указывать, что такой-то заголовок

15

должен набираться, скажем, шрифтом Times полужирного начертания кегля 12 пунктов.

SGML в таком случае требует ограничиться указанием на уровень заголовка и его место в

иерархической структуре документа.

Благодаря таким ограничениям размеченный текст сможет без труда

интерпретировать любая программа, работающая с любым устройством вывода. К

примеру, при работе в графическом интерфейсе заголовок может действительно

выводиться полужирным шрифтом повышенного кегля; программа, использующая

текстовый интерфейс, выделит его пустой строкой сверху и снизу и, возможно,

повышенной яркостью символов; синтезатор речи, читающий документ вслух, сможет

отметить заголовок паузой и изменением интонации. Однако абстрактность SGML этим

не исчерпывается. SGML представляет собой не готовую систему разметки текста, а

лишь удобный метаязык, позволяющий строить такие системы для конкретных

обстоятельств. Стандарт SGML определяет лишь синтаксис записи элементов разметки -

тегов - и их атрибутов, а также правила определения новых тегов и указания структурных

отношений между ними. Для практической же разметки документов нужно приложение

SGML - набор определенных в соответствии со стандартом тегов, представляющий

собой, по сути, формальное описание структуры документа.

Для интерпретации текста, размеченного SGML, необходим специальный DTD-

файл (Document Type Definition), в котором описаны все элементы разметки языка (в

дальнейшем будем называть их тегами). Однако, существование DTD позволяет автору

документа создавать свои уникальные теги. Браузеру необходимо только указывать путь

к DTD-файлу, и он становится способен адекватно отображать SGML-документ.

Принципы, на которых строится этот язык, значительны и интересны; несомненно,

идеология SGML оказала влияние на многие компьютерные разработки. Однако сам по

себе SGML не получил сколько-нибудь заметного распространения - до тех пор, пока

сотрудники Европейского института физики частиц (CERN), занятые созданием системы

передачи гипертекстовой информации через Интернет, не выбрали SGML в качестве

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

Бернесом-Ли, был разработан DTD, который был "вмонтирован" в браузер, содержал

небольшое количество тегов и предназначался для разметки технической документации.

Так появился на свет HTML (Hyper Text Markup Language, язык разметки гипертекста).

Таким образом, HTML, является одной из реализаций SGML (или SGML-приложением).

Изначально HTML, как и положено SGML-приложению, разделял все особенности

идеологии SGML. Из сорока с небольшим тегов HTML версии 1.2 (датированной июнем

1993 г.) всего три, да к тому же и не рекомендованных к использованию, тега

16

осмеливались намекать на физические параметры представления документа. Вся

разметка была чисто логической, и лишь в описательной части стандарта,

сопровождающей формальное определение тегов, можно было прочесть что-нибудь

вроде "в графических браузерах действие этого тега может передаваться курсивным

начертанием".

В апреле 1994 г. началась подготовка спецификации следующей версии языка -

2.0. Этим занимался образованный в том же году Консорциум W3 (W3 Consortium,

сокращенно W3C), унаследовавший от CERN верховную власть и авторитет в мире

WWW. Окончательный вариант HTML 2.0, единственным серьезным

усовершенствованием в котором был механизм бланков (форм) для отсылки информации

с компьютера пользователя на сервер, был окончательно утвержден лишь в сентябре

1995 г

Работа над HTML 3.0 началась в марте 1995 г., и первоначальный вариант

стандарта включал в себя много интересных нововведений - теги для создания таблиц,

разметки математических формул, вставки обтекаемых текстом рисунков, примечаний и

др. Авторы версии 3 ввели в ней поддержку нового средства - так называемых

иерархических стилевых спецификаций (Cascading Style Sheets, CSS). Система CSS

формально независима от HTML , имеет совершенно иной синтаксис (более того, HTML 3

можно стыковать с разными реализациями CSS , обладающими разным синтаксисом и

возможностями), не наследует никаких идеологических ограничений и позволяет, уже в

совершенно иных терминах, задавать параметры визуального представления для любого

тега HTML . С помощью CSS автор может указать, каким шрифтом какого кегля набирать

заголовки такого-то уровня. И, что самое важное, достигнуто это было не введением

новых тегов, а разработкой механизма, позволяющего влиять на интерпретацию уже

существующих тегов логической разметки, причем с учетом контекста его употребления.

Браузеры с текстовым интерфейсом или с синтезатором речи смогут с легкостью

проигнорировать эту дополнительную информацию и использовать для оформления свои

обычные средства. Слово cascading в названии системы CSS служит напоминанием о

том, что в действительности на вывод каждого тега в документе могут оказывать влияние

сразу несколько стилевых спецификаций, образующих иерархическую систему: например,

поверх спецификаций, относящихся к конкретному документу, может действовать

стилевой файл, общий для всех документов на сервере. Кроме того, пользователь

браузера, поддерживающего CSS , может указать свои собственные параметры вывода

для тех или иных тегов. Конфликты, которые при этом возникают, разрешаются в пользу

более частных, узких спецификаций: то, что указано для конкретного документа, берет

17

верх над спецификациями для всего сервера, а параметры вывода тега в данном

контексте имеют преимущество перед параметрами для того же тега "вообще", без учета

контекста. В случае же конфликта спецификаций, заданных пользователем, с

установками автора страницы побеждают последние, хотя пользователь может при

желании изменить эту ситуацию на обратную.

В настоящее время применяется стандарт языка HTML 4.0., теги которого

одинаково восприниматься любыми браузерами. Однако фирмы, разрабатывающие

браузеры, включают в них свои собственные тэги, не согласуя между собой введение

этих новшеств. Поэтому Web-страницы могут по-разному отображаться браузерами

различных фирм.

2.2.2. Введение в язык HTML.Для создания web-страниц используется язык разметки HTML. Он представляет

собой набор команд определяющих, в каком виде информация будет отображаться в

окне браузера. Команды состоят из заключённых в угловые скобки (<>) тэгов (дескрипторы) и их атрибутов. Почти все дескрипторы языка HTML парные и состоят

из открывающего (<>) и закрывающего (</>) тэгов, между которыми располагается

содержимое тэга. Тэги подразделяются на структурные, которые организуют текст и на

форматирующие, которые задают его стиль. Конструкцию тэга можно представить таким

образом: <tag atribut="value">Другие теги и (или) текст внутри этого тега</tag>, где:

< - символ начала описания;

tag - название тега из определенного списка воспринимаемых браузером тэгов. Если

браузеру не известно название тега, то он проигнорирует его и на разметку станицы

он не повлияет. Название тега может состоять только из одного слова, так как после

пробела начинается область атрибутов;

atribut= - атрибут определяющий дополнительные условия. Совсем необязательно,

что он есть в каждом описании. В некоторых его нет вообще, а в некоторых их

несколько, разделенных пробелами;

value - значение параметра. Если оно состоит из одного слова или символа, то

кавычки ставить необязательно. Кавычки могут быть заменены прямым апострофом ';

> - символ конца описания

/tag - конец тега с соответствующим названием.

Контейнер – состоит из открывающего и закрывающего дескрипторов.

Контейнеры предназначены для хранения некоторой информации, например текста или

других HTML-дескрипторов. Элемент HTML-документа – это контейнер вместе с его

18

содержимым. Язык HTML не чувствителен к регистру букв, поэтому все дескрипторы

можно задавать как прописными, так и строчными буквами.

Технология HTML состоит в том, что в обычный текстовый документ вставляются

управляющие символы (тэги), сохраняют его с расширением htm или html и в результате

получается web-страница. Браузер при загрузке Web-страницы представляет её на

экране в том виде, который задаётся тэгами. Основными достоинствами HTML-

документов являются малый информационный объем и возможность просмотра на

компьютерах, оснащенных различными операционными системами.

При форматировании текста с помощью языка HTML выделяется два аспекта.

Формирование структуры (особенно актуально для достаточного объемного текста). К

структурным элементам относятся заголовки, абзацы, разделы и т.д.

Задание отдельным структурным блокам текста (и даже отдельным объектам)

параметров внешнего отображения: различное горизонтальное выравнивание

абзацев, вывод фрагментов текста шрифтом особой гарнитуры, цвета, размера и т.д.

Отображение HTML-документа браузером имеет ряд особенностей. Текст

выводится в окно браузера слово за словом; при достижении правой границы окна

очередное слово переносится на новую строку. Таким образом, по умолчанию (если не

использованы специальные элементы форматирования), горизонтальной полосы

прокрутки не появляется. Вертикальная полоса прокрутки появляется, как обычно, если

содержимое документа не умещается в видимой части окна. Все последовательно

идущие пробелы, символы табуляции, символы перевода строки отображаются

браузером как один пробел. Т.е. без применения форматирования текст будет выведен

единым блоком, в котором слова отделены друг от друга одним пробелом.

Так как web-страница должна быть одинаково интерпретирован браузерами

различных компьютерных платформ, то стандартом оформления имени файла будет

набор самых жестких правил всех платформ. Поэтому желательно, что бы имена файлов

web-страниц соответствовали следующим требованиям.

В имени файла разрешено использовать следующий набор символов: a-z, A-Z, _, ,-, 0-9.

Длинна имени файла должна быть не более 8 символов.

Расширение файла "htm".

HTML-документы могут иметь различную кодировку.

Кодировка представляет собой таблицу символов, где каждой букве алфавита (а

также цифрам и специальным знакам) присвоен свой уникальный номер - код символа,

занимающий 1 байт. Стандартизирована только половина таблицы ascii-код - от 0 до кода

127 все символьные таблицы одинаковы (в них знаки препинания и латинский алфавит,

19

область от 128 до 255 отведена под национальные алфавиты), а кириллица в разных

кодовых таблицах имеет разное положение. В Интернете существуют 6 основных типа

кодовых таблиц для русской кириллицы.

KOI (koi8-r) - специальная кодовая таблица, разработанная для Интернета. Она

используется довольно широко, но работать с ней в Windows можно только в HTML-

редакторах, умеющих работать с различными кодировками. Эту кодировку

разработали когда адаптировали к русскому языку систему unix. Это было ещё в 70-х

годах - до появления персональных компьютеров. И до сих пор в unix она считается

основной кодировкой.

DOS - использует кодовую таблицу DOS ASCII. В настоящее время почти не

используется, как и сама DOS в чистом виде. Была разработана Microsoft для IBM-

совместимых персональных компьютеров.

Windows (win-cp1251) - использует кодовую таблицу Windows ANSI. В настоящее

время наиболее распространена в Интернете. Появилась вместе с первой успешной

версией Windows 3.0-3.11.

Mac (Macintosh) – кодировка для macintosh-компьютеров.

ISO - многоязыковая кодовая таблица. Широкого распространения в России не

получила. Появилась в связи с попыткой стандартизации кодировок на мировом

уровне.

UNICODE – кодировка, в которой на каждый символ отведено 2 байта.

При создании html-документа в любом редакторе его кодировка будет такая же,

какую и использует этот редактор. В последствии готовые документы можно

преобразовать в любой формат при помощи специальных программ-перекодировщиков.

При работе в Интернете с html-документами для нормального отображения

символов той или иной кодировки, и web-сервер, и браузер должны обменяться

соответствующей служебной информацией. Для этого протокол HTTP, при помощи поля

Accept-Charset, позволяет браузеру послать сообщение на сервер о том, какие кодировки

в нем доступны и в каком порядке очередности. При этом сервер может выбрать из

вариантов документ, исполненный в требуемой кодировке, сообщить браузеру

информацию о том, в какой кодировке будет прислана страница, или автоматически

перекодировать ее и переслать браузеру. Если всё сделано корректно, то проблем не

возникает, в противном случае пользователь может увидеть не читаемый текст.

Перекодировать web-страницу при просмотре можно, используя возможности

браузера. В программе Internet Explorer это команда Вид→Кодировка.

20

Имеется способ указать кодировку web-страницы не на сервере, а непосредственно

в html-коде. Для этого используется специальная версия meta-тега с параметром charset,

задающим нужную кодировку. При этом необходимо помнить, что данный тэг имеет

приоритет и над установками браузера и над установками, присылаемыми web-сервером.

Данные кодировки не содержат все символы из набора символов документа. Для

того, что вставить такой символ в web-страницу необходимо использовать ссылки на

символы SGML. Такие ссылки на символы могут быть числовыми и принимать две

формы:

синтаксис &#D;, где D - десятичное число, указывает символ Unicode с десятичным

номером D;

синтаксис &#xH; или &#XH;, где H - шестнадцатеричное число, указывает на символ

Unicode с шестнадцатеричным номером H.

Некоторые из таких символов имеют символические имена, и ссылка на них имеет

синтаксис "&name; , где name – символическое имя. При таких ссылках на символы

учитывается регистр.

Примеры некоторых ссылок на символы.

&#x6C34; - шестнадцатеричная числовая ссылка на символ 水.

&#169; - десятичная числовая ссылка на символ ©.

&Aring; - символическая ссылка на символ Å.

&aring; - символическая ссылка на символ å.

&nbsp; - пробел.

Основные тэги языка HTML представлены в приложении 1.

2.2.3. Введение в таблицы стилей CSS.Существует несколько различных способов применения стилей к объектам

документа.

1) В большинстве html-тэгов, может быть использован атрибут style, значением

которого является набор правил в синтаксисе CSS. Эти правила будут применены только

к тому элементу, в котором объявлены. Например:

Html-код <p>Новый абзац <p style="color:#FF0000; font-size:24px">Новый абзац

Просмот

р

Новый абзац текстаНовый абзац текста

2) В разделе <head>…</head> в контейнере style может быть описан набор правил

стиля в соответствии с синтаксисом CSS . Эти правила будут применены к элементам

21

данного документа. Элемент style позволяет определить стиль отображения для

стандартных тэгов html-разметки, и для произвольных классов (селектор class).

Определенный в CSS класс связывается с любым html-тэгом при помощи атрибута class.

Например:

Html-код Просмотр

<html><head> <title>CSS</title> <style> p { color:#FF0000; font-size:24px }.blue-20 {color:#0000FF; font-size:20px; font-family:Arial} </style></head><body><p>Новый абзац текста.<p class=blue-20>Еще один.<h1 class=blue-20>Заголовок 1</h1></body></html>

Новый абзац

текста.

Еще один.

Заголовок 1

3) Наиболее рационально с точки зрения разработки сайта и его сопровождения

сохранять стилевые описания, актуальные для ряда документов в отдельных файлах.

При необходимости можно будет внести нужные изменения в файлы описаний, и

внешний вид документов сайта соответственно будет изменен при отображении

браузером. В разделе <head>…</head> внешние таблицы стилей присоединяются с

помощью элемента <link>…</link>. Например:

Html-код файла css.css Html-код файла css.htm Просмотр

p { color:#FF0000; font-size:24px }.blue-20 { color:#0000FF; font-size:20px; font-family:Arial }

<html><head> <title>CSS</title><link type="text/css" rel="stylesheet" href="css.css"></head><body><p>Новый абзац текста.<p class=blue-20>Еще один.<h1 class=blue-20>Заголовок 1</h1></body></html>

Новый абзац текста.

Еще один.

Заголовок 1При описании стилей стандартных тэгов html-разметки возможны

следующие конструкции. через запятую перечисляет селекторы-элементы, которые отображаются одинаково;

запись через пробел определяет стиль второго селектора, в случае его вложения в

первый тэг.

Например:

Html-код файла css.css Html-код файла css.htm Просмотр

b, i {color:#008000; font-style:normal; font-weight:normal

<html><head> <title>CSS</title>

Жирный текст

Текст курсивом

22

} <link type="text/css" rel="stylesheet" href="css.css"></head><body><b>Жирный текст</b><br><i>Текст курсивом</i><br><b><i>Жирный + курсив</i></b></body></html>

Жирный + курсив

b i {color:#008000; font-style:normal; font-weight:normal }

Жирный текстТекст курсивом

Жирный + курсив

Существуют псевдоклассы и псевдоэлементы, которые позволяют задать особые

стили, связанные с элементами <a> и <p>. От названия элемента они отделяются

двоеточием.

Псевдоклассы.

a:link { … }- для непосещенных.

a:visited { … }- дляпосещенных ссылок.

a:hover { … } - для ссылок на которые наведен курсор мыши.

a:active { … } - для активизированных ссылок.

a:focus { … } - для ссылок получивших фокус.

Псевдоэлементы.

P:first-line { … } – для первой буквы абзаца.

P:first-letter { …} – для первой строки абзаца.

Общее описание стиля элемента выглядит следующим образом.

Имя тэга или .имя класса { объявление свойства; …; объявление свойства }.

Объявление свойства состоит: название свойства: значение или список через пробел.

Описание некоторых свойств CSS представлено в приложении 2.

2.3. Инструментальные средства разработки web-сайта.Для разработки web-страниц сайта можно использовать следующие

инструментальные средства.

1) Текстовые редакторы для работы с “чистым” HTML-кодом. Поскольку HTML-

документ представляет собой текстовый файл, его можно подготовить в простейшем

текстовом редакторе, например, в блокноте (notepad), но при этом все команды разметки

придется вводить вручную.

2) Программные средства, которые имеют специальные встроенные компоненты

для конвертирования данных, созданных в этих продуктах, в HTML формат. Например,

программы широко используемого пакета MS Office, начиная с версии 97, позволяет

сохранить документ в формате HTML. При этом сохраняются, насколько это возможно,

особенности форматирования символов и абзацев, изображения, таблицы, списки и так

далее. Многие современные графические редакторы предоставляют возможность

сохранить коллекцию картинок в виде HTML-документа. Надо отметить, что при таком

23

конвертировании исходный текст HTML-документа получается крайне избыточным и

нуждается в коррекции.

3) Специализированные программные средства - web-редакторы,

предназначенные специально для разработки web-сайтов. Современные требования,

предъявляемые к web-редакторам, включают в себя:

Поддержку каскадных таблиц стилей.

Использование современных скриптовых языков, таких как JavaScript и т.д.

Генерацию Dynamic HTML для различных браузеров.

Средства наглядного дизайна: вставка изображений, таблиц и фреймов.

Динамическое отображение создаваемой страницы в браузере.

Шаблоны WWW-страниц или специальные программы - "мастера" по их созданию.

Средства по управлению web-сайтом (создание файловой структуры сайта,

отслеживание связей и проверка ссылок между страницами, публикация сайта в

Интернет).

Существуют две разновидности web-редакторов: визуальные и невизуальные.

Невизуальные редакторы работают с "чистым" HTML-кодом. Они предоставляют

возможность быстрого ввода тэгов HTML с использованием инструментальных панелей,

вставки изображений и таблиц с помощью специальных диалоговых окон, работы с

файловым менеджером для выбора папок и файлов, подсветки синтаксиса, проверки

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

атрибутам. Невизуальные web-редакторы часто называют HTML-редакторами. Они

прекрасно подходят как для опытных web-дизайнеров, знающих HTML и прекрасно

представляющих, как должна выглядеть web-страница в результате тех или иных

изменений в ее коде, так и для тех, кто только начинает осваивать процесс создания

сайта.

Визуальные редакторы позволяют работать с самой web-страницей "как она

есть", в режиме WYSIWYG (What You See Is What You Get - То, что ты видишь, то и

получаешь). Редактирование и форматирование текстов, вставка рисунков, таблиц,

гиперссылок и других элементов происходит как в обычном текстовом редакторе, а сама

программа формирует (генерирует) соответствующий HTML-код. Кроме средств

визуального редактирования эти web-редакторы одновременно предоставляют доступ к

получившемуся HTML-коду. Визуальные редакторы — отличная стартовая площадка для

начинающих web-дизайнеров, плохо знакомых с HTML. Но и опытные дизайнеры часто

пользуются визуальными редакторами, чтобы быстро "сверстать" web-страничку, а потом

довести ее до ума вручную.

24

Выбор редактора, который будет использоваться для создания HTML-документов,

зависит исключительно от понятия удобства и личных пристрастий каждого автора. На

сегодняшний день разработано большое число web-редакторов, которые можно разбить

на три группы.

1) Свободно распространяемые (бесплатные). В основном это невизуальные html-

редакторы, разработанные небольшой группой авторов. Визуальные редакторы этой

группы имеют ограниченный набор средств визуального редактирования.

Характеризуются небольшим объемом занимаемой памяти, а некоторые из них даже не

требуют специальной установки.

2) Условно-бесплатные. Web-редакторы этой группы характеризуются невысокой

ценой – от 300 рублей.

3) Платные. В эту группу входят невизуальные и визуальные редакторы,

разработанные крупными фирмами. Отвечают всем требованиям, предъявляемым к

современным web-редакторам. Накладывают определенные ограничения на ресурсы

компьютера. Обычно имеются демо-версии продукта, которые можно установит

бесплатно и работать с ними ограниченное время (30 дней).

В Интернет существуют специальные каталоги программных средств

(http://soft.mail.ru/subcat_list.php?cat=22, http://www.softlinks.ru/files/s23p1.php), с помощью

которых можно ознакомится с имеющимися в настоящее время web-редакторами и

выбрать нужный. Далее в методических рекомендациях будут рассмотрены

невизуальные и визуальные web-редакторы из бесплатной и платной групп.

25

Раздел 3. HTML-редактор Smart Web Builder 1.4.

Smart Web Builder 1.4 - многофункциональный бесплатный html-редактор для

эффективного и качественного создания web-сайтов. Он подходит как начинающим

пользователям, имеющим лишь начальные знания html, так и профессионалам, позволяя

сочетать простоту, гибкость и качество разработки. Программа постоянно обновляется,

последняя версия разработана в 2007 году.

Сайт программы - http://www.swbsite.com/.

Системы: Windows XP, Windows NT, Windows 98, Windows ME, Windows 2000,

Windows 2000 Server.

Размер установочного файла - 1545 Кб.

Программа устанавливается по умолчанию в папку C:\Program Files\SWB, размер

которой составляет приблизительно 9 Мбайт.

Окно программы Smart Web Builder 1.4, представлено на рисунке 3.1.

1 – строка заголовка

2 – строка меню

3 – стандартная панель инструментов

4 – панель тэгов (вкладки)

5 – панель тэгов (тэги)

6 – панель закладок открытых файлов

7 – панель просмотра

8 – рабочее окно

9 – строки кода

10 – режимы просмотра

11 – строка состояния

HTML-редактор предоставляет пользователю:

простой, гибкий и интуитивно понятный интерфейс с возможностью гибкой

индивидуальной настройки, который позволяет с удобством вести разработку.

мощные сервисные средства и инструменты вставки HTML-кода, делающие процесс

создания web-страниц быстрым, качественным и функциональным. Далее будут

26

Рисунок 3.1 – Окно программы Smart Web Builder 1.4

12

34

5

6

7

8

9

11

10

рассматриваться именно эти возможности редактора.

внушительное количество готовых к использованию скриптов и шаблонов страниц

уменьшающих ресурсоёмксть разработки.

менеджер сайтов, который позволяет создать проект и с удобством управлять им.

Благодаря высокой скорости загрузки может быть обеспечена работа с большими

проектами, от 1000 файлов и более.

удобную справочную систему. Команда Справка→Справка вызывает окно Справка, в

котором в разделе Главное меню представлена информация о работе каждого пункта

меню. Команда Справка→Справочники вызывает диалоговое окно Справочники, в

котором представлена информация о большинстве тэгов языка HTML, их назначении,

атрибутах и событиях, которые могут происходить с объектом, заключенным в

конкретный тэг.

3.1. Создание нового web-сайта.Приступая к созданию web-сайта в программе Smart Web Builder 1.4, необходимо

создать корневую папку сайта, подготовить внутри нее начальную структуру папок,

которая соответствовала бы содержанию сайта, используя программу Проводник или

Мой компьютер. Все графические изображения, которые должны использоваться на web-

страницах, так же должны быть перенесены в одну из папок структуры.

После запуска html-редактора открывается пустое окно с именем NoName1.

Для создания новой web-страницы с начальной структурой тэгов необходимо

выполнить команду Файл→Создать новый документ и в открывшемся окне Создать новый… сделать двойной щелчок на элементе Web-докум… . В результате в документ

NoName1 будет вставлен минимальный набор html-тэгов, будет включена подсветка

синтаксиса html, а внизу рядом с вкладкой Код, появится вкладка Просмотр. Режим

Просмотр позволяет увидеть, как web-страница будет выглядеть в браузере. Кнопка

Режим код+Просмотр на панели просмотра делит рабочую область на две части: в

верхней отображается html-код, в нижней – режим просмотра. Для просмотра web-

страницы в браузере установленном по умолчанию необходимо выполнить команду

Просмотр→Просмотр в браузере.

Каждая новая web-страница создается в отдельной закладке. Звездочка рядом с

названием означает, что в документе есть не сохраненные изменения. При создании

нового документа кроме web-страниц можно создавать документы других типов, а так же

воспользоваться готовыми шаблонами (вкладка Шаблоны окна Создать новый…).

При первом сохранении web-страницы одной из команд Файл→Сохранить или

27

Файл→Сохранить как или Файл→Сохранить все необходимо в диалоговом окне

сохранения файла выбрать место на диске внутри корневой папке сайта и задать имя

файла используя только латинские буквы, цифры и разрешенные символы.

Для того чтобы закрыть web-страницу необходимо нажать правой кнопкой мыши на

соответствующую закладку и выбрать пункт Закрыть. Для того чтобы открыть web-

страницу для редактирования необходимо выполнить команду Файл→Открыть, в

диалоговом окне выделить нужный файл и нажать кнопку Открыть.

3.2. Редактирование web-страницы.Процесс редактирования web-страницы может быть организован двумя способами.

1) Используя команды первой группы меню HTML-теги, вставляются необходимые

для организации содержимого html-тэги и при необходимости вручную дописываются

недостающие атрибуты. 2) Используя команды второй группы меню HTML-теги, открываются диалоговые окна для указания параметров форматирования, а затем

кнопкой Вставить код генерируются необходимые html-тэги и их атрибуты. Этот способ

позволяет формировать web-страницы практически без знания языка HTML. Все команды

меню HTML-теги дублируются на панели тэгов.

Работу с web-страницей можно начать с задания параметров мета-тэгов командой

Инструменты→HTML→Генератор meta-тегов, выделив тэги <head>…</head>. В

диалоговом окне Генератор meta-тегов по очереди становятся доступными три вкладки,

на которых можно задать заголовок, автора, описание документа, ключевые слова,

кодировку и статус документа, автоматическую перезагрузку и т.д.

Для задания цветовой схемы web-страницы, графического фона, отступов, наличия

полос прокрутки используется команда HTML-теги→Body (перед выполнением выделить

имеющиеся тэги <body>…</body>). Если планируется использовать графический фон, то

рисунок должен быть заранее перенесен в одну из папок сайта. При генерации кода

содержащего ссылку на фоновое изображение будет выведено сообщение о

преобразовании абсолютной адресации в относительную. Рекомендуется отвечать Да,

т.к. в этом случае при переносе корневой папки сайта в другое место диска, публикации в

Интернет ссылка на фон останется рабочей.

3.2.1. Добавление и форматирование текста.Текст можно печатать в самом html-редакторе или вставлять на web-страницу

через буфер обмена. Для того чтобы поместить какой-либо текст между парными тегами,

нужно выделить его и выбрать соответствующую пару тегов. Например.

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

28

команду HTML-теги→Текст→<p></p>.

Для вставки новой строки необходимо установить курсор в нужном месте и

выполнить команду HTML-теги→Текст→<br>.

Для задания возможных

вариантов форматирования

необходимо выделить текст и

выполнить команду HTML-теги→Теги текста. В

открывшемся диалоговом окне

(рис.3.2) выбрать параметры и

нажать кнопку Вставить код.

Для определения таких

параметров текста как

межстрочный интервал, рамка, фон и т.п. необходимо вручную описывать стили.

Для организации нумерованных и маркированных списков можно использовать

команду HTML-теги→Теги текста→вкладка Списки (курсор должен быть установлен в

то место, куда вставляется список). В открывшемся диалоговом окне необходимо

выбрать тип списка, вид нумерации, добавить необходимое число элементов и нажать

кнопку Вставить код. Вложенный список может быть организован путем его вставки

после какого-либо элемента имеющегося списка.

Вставка горизонтальной черты осуществляется командой HTML-теги→Текст→<hr>.

Команда Вставка→Символ html открывает диалоговое окно Вставить символ, в

котором можно выбрать нестандартный символ для вставки на web-страницу из разных

групп выпадающего меню.

Для того что бы вставить комментарий необходимо установить курсор в нужном

месте или выделить текст комментария и выполнить команду Закомментировать на

панели тэгов вкладка Стандарт.

Команда &nbsp; на панели тэгов вкладка Стандарт вставляет код обязательного

пробела в место указанное курсором.

3.2.2. Создание и редактирование таблиц.

29

Рисунок 3.2 – Диалоговое окно Теги текста

Для оформления web-страниц могут быть использованы таблицы, вставка которых

выполняется командой HTML-теги→Таблица→Вставить новую таблицу (курсор

должен быть установлен в то место, куда вставляется таблица). В результате

открывается диалоговое окно

Вставить новую таблицу (рис.3.3), в которой задаются

следующие параметры.

Группа Размеры –

количество строк и

столбцов, ширина и высота

таблицы в пикселях или

процентах.

Группа Свойства –

отступы между ячейками и

между границами ячеек и

текстом, толщина границ в

пикселях, выравнивание таблицы относительно окна браузера, заголовок таблицы и

его выравнивание.

Группа Фон – фоновое изображение, которое необходимо выбирать из папок сайта и

цвет фона таблицы.

Группа Границы – цветовое оформление границ таблицы, имеет смысл определять,

если толщина границ не 0.

Нажатие на кнопку Вставить код генерирует html-код таблицы. Если было выбрано

фоновое изображение, то будет выведено сообщение о преобразовании абсолютной

адресации в относительную. Рекомендуется отвечать Да, т.к. в этом случае при переносе

корневой папки сайта в другое место диска, публикации в Интернет ссылка на фон

останется рабочей.

Тэги, описывающие строки (<tr></tr>) и ячейки (<td></td>) таблицы задаются без

атрибутов. В том случае если их оформление требует дополнительных параметров, то

соответствующие атрибуты вписываются вручную или используются дополнительные

команды.

В том случае если нужно изменить описание строки таблицы необходимо выделить

описывающие ее тэги, выполнить команду HTML-теги→Таблица→Вставить строку и в

открывшемся диалоговом окне задать требуемые параметры.

Группа Ячейки – количество ячеек в строке.

30

Рисунок 3.3 – Диалоговое окно Вставить новую таблицу

Группа Выравнивание – горизонтальное и вертикальное выравнивание содержимого.

Группа Цвет фона – фоновый цвет строки.

Группа Границы – цветовое оформление границы строки.

Нажатие на кнопку Вставить код генерирует html-код строки таблицы. Этой же

командой можно вставить новую строку таблицы в указанное курсором место.

В том случае если нужно изменить описание ячейки таблицы необходимо выделить

описывающие ее тэги, выполнить команду HTML-теги→Таблица→Вставить ячейку и в

открывшемся диалоговом окне задать требуемые параметры.

Группа Атрибуты – ширина и высота ячейки в пикселях, количество объединенных

строк и столбцов, перенос текста внутри ячейки.

Группа Выравнивание – выравнивание содержимого по ширине и высоте.

Группа Фон - фоновое изображение, которое необходимо выбирать из папок сайта и

цвет фона ячейки.

Группа Границы – цветовое оформление границ ячейки.

Нажатие на кнопку Вставить код генерирует html-код ячейки таблицы. Этой же

командой можно вставить новую ячейку таблицы в указанное курсором место. Если было

выбрано фоновое изображение, то будет выведено сообщение о преобразовании

абсолютной адресации в относительную. Рекомендуется отвечать Да, т.к. в этом случае

при переносе корневой папки сайта в другое место диска, публикации в Интернет ссылка

на фон останется рабочей.

При изменении описания строк и ячеек таблицы необходимо внимательно следить

за общим количеством ячеек в строке, которое должно быть одинаковым во всех строках

таблицы с учетом объединений.

3.2.3. Вставка графического изображения.Для вставки графического изображения на web-страницу необходимо выполнить

следующие действия.

Обязательно переместить графический файл в одну из папок сайта, используя

программу Мой компьютер или Проводник.

Установить курсор в нужное место страницы и выполнить команду HTML-теги→Изображение.

В открывшемся диалоговом окне Вставить изображение (рис.3.4) указать:

Путь – нужный графический файл из папок сайта

Альтер.текст – текст, который будет выводиться в том случае если в браузере

отключен режим показа картинок.

31

Имя – имя элемента.

Границы – толщина рамки в пикселях.

Выравнивание – выравнивание изображения

относительно остальных объектов web-

страницы. Выбор left или right задают

обтекание.

Группа Размеры – ширина и высота

изображения, в случае изменения

параметров нарушаются пропорции; вертикальный и горизонтальный отступ до других

объектов.

Нажать на кнопку Вставить код для генерации html-кода. Будет выведено

сообщение о преобразовании абсолютной адресации в относительную. Рекомендуется

отвечать Да, т.к. в этом случае при переносе корневой папки сайта в другое место диска,

публикации в Интернет ссылка на графический файл останется рабочей.

3.2.4. Создание гиперссылок.Для того чтобы связать страницы web-сайта друг с другом, необходимо создать

гиперссылки, которые могут быть организованы по тексту или графическому

изображению.

Для организации гиперссылки необходимо или выделить тот объект по которому

будет организовываться гиперссылка или установить курсор в том месте где должна быть

гиперссылка. Во втором случае между тэгами гиперссылки <a href=…></a> необходимо

будет вставить текст или изображение. Далее нужно выполнить команду HTML-теги→Ссылка и указать в открывшемся диалоговом окне Вставить ссылку (рис.3.5)

следующие параметры.

Текст – текст и (или) html-код по которому

организуется гиперссылка.

Адрес – указать протокол доступа к документу,

на которой организуется гиперссылка (например:

http:// - любой www-документ, ftp:// - файл с ftp-

сервера, mailto: - ссылка на адрес электронной

почты).

Поле выбора – документа из папок сайта.

Имя – имя гиперссылки

Target – значение аргумента target (например: _blank – ссылка будет открываться в

32

Рисунок 3.4 – Вставка изображения

Рисунок 3.5 – Диалоговое окноВставить ссылку

новом окне браузера).

Нажать на кнопку Вставить код для генерации html-кода гиперссылки. Если ссылка

была организована на один из документов Вашего сайта, то будет выведено сообщение о

преобразовании абсолютной адресации в относительную. Рекомендуется отвечать Да,

т.к. в этом случае при переносе корневой папки сайта в другое место диска, публикации в

Интернет гиперссылка останется рабочей.

3.2.5. Вставка форм.Вставка полей формы может быть выполнена с помощью различных команд.

Для организации самой формы и некоторых полей можно использовать команду

HTML-теги→Тэги формы (курсор должен быть установлен в нужно место web-страницы).

В результате выполнения команды

открывается диалоговое окно Теги формы вкладка Новая форма (рис.3.6). Здесь

необходимо задать параметры формы:

обработчик формы, имя формы, способ

передачи данных, тип кодировки. После

нажатия кнопки Вставить код, в указанном

месте web-страницы вставляется сгенерированный html-код формы. Для вставки других

полей необходимо в нужной последовательности переходить по вкладкам окна Теги формы (поле ввода текста, текстовое поле, флажок, кнопка выбора, кнопка, кнопка с

изображением, поле ввода файла), задавать требуемые параметры и нажимать кнопку

Вставить код. Генерируемый html-код вставляется последовательно на web-страницу

между тэгами формы <form …></form>. В дальнейшем его нужно будет отредактировать

вставив комментарии, новые абзацы и т.д.

Дополнительно на панели тэгов вкладка Формы можно использовать команды

для вставки таких полей как: Поле ввода пароля, Скрытое поле, Кнопка сброса, Кнопка

отправки данных, FieldSet – метка группы. При этом соответствующий html-код

вставляется в указанное курсором место. Все атрибуты поля необходимо дописывать

вручную.

Поле Выпадающий список удобно вставлять командой HTML-теги→Выпадающий список, которая открывает диалоговое окно Выпадающий список.

В этом окне задаются необходимые параметры списка: имя списка, количество строк по

высоте, разрешен или нет множественный выбор, элементы списка (кнопка Добавить).

Кнопка Вставить код генерирует html-код и вставляет его в указанное курсором место.

33

Рисунок 3.6 – Вставка формы

3.2.6. Вставка эффектов.Бегущая строка. Для вставки бегущей строки на web-страницу необходимо

поставить курсор в нужное место и выполнить команду HTML-теги→Бегущая строка. В

результате открывается диалоговое окно Бегущая строка (рис.3.7), в котором

необходимо указать следующие

параметры.

Поле Текст – ввести текст бегущей

строки.

Группа Поведение – определить

способ движения строки (Scroll – по

кругу, Slide – останавливается у края

окна, Altrenate – от одного края до

другого).

Группа Направление – определяется

направление движения строки.

Группа Настройка – определяет шаг

движения строки в пикселях

(Прокрутка), время каждого шага

(Задержка), количество повторов и

цвет фона.

Группа Размеры – определяет ширину и высоту бегущей строки в пикселях или

процентах от окна браузера, отступы текста от границ.

Кнопка Вставить код – генерирует html-код бегущей строки.

Java-скрипт. Html-редактор Smart Web Builder 1.4 позволяет вставить на web-

страницу 30 готовых

скриптов командой

Вставка→Скрипт. В

результате открывается

окно Вставить скрипт (рис.3.8), которое позволяет

сконфигурировать один из

шаблонных скриптов. В

левой части окна находится

раскрывающееся

древовидно меню в

34

Рисунок 3.7 – Диалоговое окно Бегущая строка

Рисунок 3.8 – Диалоговое окно Вставить скрипт

котором необходимо выбрать скрипт. В правой части находится рабочее поле

редактирования выбранного скрипта, состоящее из трех вкладок.

Вкладка Настройки – отображает переменные, доступные для редактирования.

Вкладка Редактирование кода – отображает исходный код выбранного скрипта.

Вкладка Просмотр - обеспечивает быстрый просмотр редактируемого скрипта во

встроенном браузере.

Кнопка Вставить код вставляет код выбранного скрипта на web-страницу в место

указанное курсором. Кнопка Закрыть закрывает диалоговое окно Вставить скрипт.

3.3. Дополнительные возможности.Оптимизация html-кода. Команда Инструменты→HTML→Оптимизация html

открывает диалоговое окно, состоящее из 6 вкладок для задания параметров

оптимизации html-кода. После установки всех настроек необходимо нажать кнопку

Начать. В результате оптимизированная web-страница будет открыта в новой вкладке (в

начало имени файла будут добавлены символы tidy_), а в нижней части окна программы

появится окно с комментариями относительно кода оптимизированной web-страницы.

Менеджер сайтов. Команда Инструменты→Менеджер сайтов открывает окно

Менеджер сайтов, с помощью которого можно объединить файлы web-сайта в единую

структуру (проект) для более удобного редактирования и просмотра.

Меню Проект содержит команды для работы с проектами. При создание проекта в

диалоговом окне выбираются папки и файлы, которые будут входить в его состав. Файл

проекта с расширением .swb сохраняется в папку C:\Program Files\SWB\bin\projects.

Меню Файлы содержит команды для работы с файлами и папками проекта. В

случаи создания нового файла (папки) с использованием Менеджера сайта, файл (папка)

появляется не только в проекте, но и на жестком диске.

Меню Функции содержит команду для настройки прозрачности окна Менеджера

сайтов.

35

Раздел 4. Визуальный редактор Nvu 1.0.

NVU это Open Source проект Linspire по созданию визуального (WYSIWYG) HTML

редактора. Как и для Firefox и Thunderbird основой для создания NVU послужила часть

кода выделенного из браузера Mozilla - код Mozilla Composer. К созданию NVU был

привлечен главный архитектор Mozilla Composer - Дэниел Глазман.

Программа Nvu 1.0 представляет собой визуальный (WYSIWYG) редактор, это

означает, что в процессе создания сразу можно видеть как будет выглядеть web-страница

в браузере для пользователей Интернет. На сегодняшний день визуальный web-редактор

Nvu 1.0 имеет уже достаточно возможностей для создания и редактирования web-сайтов.

Это Менеджер сайтов, позволяющий работать с web-сайтом в целом, встроенный

Редактор CSS, с предварительным просмотром стилей, цветная подсветка синтаксиса в

режиме редактирования кода, проверка орфографии, инструменты для работы с

таблицами, графическими изображениями, гиперссылками, возможность создания

шаблонов web-страниц и многое другое. Последняя версия программы разработана в

2005 году.

Сайт программы - http://nvu.mozilla-russia.org/.

На сайте можно скачать установочный файл программы для различных

операционных систем (Windows, Linux, MacOS).

Размер установочного файла для Windows – 7,0 Мбайт.

Программа устанавливается по умолчанию в папку C:\Program Files\Nvu, размер

которой составляет приблизительно 24 Мбайта.

Окно программы Nvu 1.0, представлено на рисунке 4.1.

1 – окно Полезные советы Nvu, появляется при первом запуске web-редактора, для

отмены появление этого окна необходимо снять флажок Показывать при старте (2).

3 – строка заголовка.

4 – строка меню.

5 – панель компоновки, которая содержит кнопки

наиболее часто используемых операций.

6 – панель форматирования. 9 – панель режимов редактирования показывает, в

каком режиме просматривается текущий документ.7 – панель вкладок открытых файлов.

8 – шкала размера окна. 10 – строка состояния показывает позицию

курсора относительно иерархии тэга <html>.

Окно со справочной информацией открывается командой Справка→Содержание и

содержит подробную информацию об интерфейсе программы, разработке web-страниц,

командах пунктов меню; словарь терминов; список тем в алфавитном порядке; раздел

поиска.

36

4.1. Создание и редактирование web-сайта.При создании локального web-сайта в web-редакторе Nvu 1.0 необходимо сначала

создать на диске корневую папку web-сайта и организовать внутри нее начальную

структуру папок, а так же перенести графические изображения, которые планируется

использовать в работе в одну из папок сайта (программа Мой компьютер, Проводник).

При запуске программы

открывается новая web-

страница – вкладка без_имени.

Если web-страница

нуждается в сохранении, то

перед именем вкладки

появляется специальный

красный значок (рис.4.2 - 1).

Для сохранения web-

страницы необходимо

выполнить команду

Файл→Сохранить. В том

37

Рисунок 4.1 – Окно программы Nvu 1.0

1

2

345

6

7

910

8

Рисунок 4.2 – Сохранение web-страницы

1 2

3

4 5

случае если не было задано название web-страницы, появится окно Заголовок страницы, в котором можно ввести необходимую информацию или оставить пустым и

нажать кнопку OK. Далее откроется стандартное диалоговое окно сохранения документа

Сохранить страницу как (рис.4.2 - 2), в котором необходимо выбрать одну из папок web-

сайта (3), ввести имя файла состоящее только из латинских букв, цифр, разрешенных символов (4) и нажать кнопку Сохранить (5). Расширение полученных файлов будет

html.Создание web-страницы осуществляется с помощью команды Файл→Создать. В

этом случае открывается диалоговое окно Новый документ, в котором можно указать

параметры новой страницы: тип создаваемого документа, где будет открываться

документ (в новой вкладке или в новом окне программы Nvu 1.0). Кнопка Создать на

панели компоновки создает новую web-страницу в новой вкладке.

Закрыть текущей документ можно командой Файл→Закрыть или кнопкой

“красный крестик” в правой части панели вкладок. Для того чтобы закрыть любую

вкладку необходимо нажать на нее правой кнопкой мыши и выбрать пункт Закрыть вкладку.

Для того чтобы открыть web-страницу локального web-сайта необходимо

выполнить команду Файл→Открыть файл и выбрать нужный документ. Редактор Nvu

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

вкладках.

Для удобства

работы с конкретным

web-сайтом удобно

воспользоваться

Менеджером сайта (рис.4.3), который

открывается командой

Вид→Показать/скрыть→Менеджер сайта.

Для описания локального web-сайта нужно выполнить команду Редактировать

38

2

Рисунок 4.3 – Работа с Менеджером сайта

1

2

3

4 5

6

7

1211

109

8

сайты (1). В результате откроется диалоговое окно Параметры публикации (2), в

котором нужно указать: Имя сайта (3), корневую папку на диске (4) с помощью кнопки

Выбрать директорию (5). После нажатия на кнопку OK (6) папка web-сайта будет

отображаться в окне Менеджера сайта (7).

При работе с Менеджером сайта можно:

открывать любую web-страницу сайта в отдельной вкладке для редактирования

двойным щелчком мыши;

используя выпадающее меню Просмотр (8) отображать только нужные типы файлов.

используя кнопку Редактировать сайты (1) выбирать (описывать) web-сайты для

работы;

используя кнопки-команды выполнять следующие действия:

Обновить (9) – обновлять структуру папок web-сайта, рекомендуется выполнять в

том случае, если в корневую папку были добавлены папки и файлы вне редактора

Nvu 1.0 с использованием программ Мой компьютер или Проводник.

Новая папка (10) – создавать папки в структуре web-сайта (созданные папки

появляются и на жестком диске).

Переименовать файл или папку (11) – изменять имена выделенным файлам и

папкам.

Удалить (12) – удалить выделенный файл или папку.

4.2. Редактирование и оформление web-страниц.Для работы с web-страницами предусмотрено несколько режимов их отображения.

Обычный – визуальный редактор, основы работы с которым будут рассмотрены

ниже.

HTML-тэги – редактор с отображением тегов. В этом режиме для каждого объекта

появляются вкладки тэгов. Двойной щелчок левой кнопки мыши на вкладку тэга

открывает диалоговое окно Редактор дополнительных свойств, в котором можно

настроить как свойства, так и стилевое оформление или связать с выбранным элементом

событие JavaScript.

Код – редактор HTML-кода web-страницы с подсветкой синтаксиса.

Предварительный просмотр – отображает web-страницу так, как она будет

выглядеть в браузере.

Переключение между режимами производится с помощью кнопок внизу окна. При

переключении между вариантами просмотра курсор остается на одном и том же месте,

поэтому удобно, выделив элемент в окне визуального редактора, посмотреть его код в

39

редакторе кодов.

Редактирование web-страницы можно начать с определения ее заголовка и

основных свойств с помощью команды Формат→Заголовок и свойства страницы. В

результате открывается диалоговое окно Свойства страницы (рис.4.4) в котором можно

задать следующие параметры.

Поле Заголовок: (1) - название

web-страницы, которое будет

отображаться в строке

заголовка браузера.

Поле Автор: (2) – указать

автора.

Поле Описание: (3) – задать

краткое описание содержимого.

Флажок Шаблон (4) –

преобразует web-страницу в

шаблон.

Поле Язык: (5) – указать язык с

помощью кнопки Выбрать язык (6).

Выпадающее меню Направление письма: (7) – определить направление текста.

Поле Кодировка: (8) – определить кодировку web-страницы с помощью кнопки

Выбрать кодировку (9).

Цветовое оформление web-страницы задается командой Формат→Цвета и фон страницы… (рис.4.5.). Установив

переключатель 1, можно выбрать

цвета для текста, гиперссылок и

фона. Кнопка Выбрать файл… (2)

открывает диалоговое окно

Выберите файл изображения, в

котором выбирается графическое

фоновое изображение для web-

страницы. Для того чтобы web-сайт

можно было переносить на другой

компьютер или web-сервер

выбранный графический файл

должен лежать в одной из папок

40

Рисунок 4.4 – Окно Свойства страницы

123

4

5 6

7 9

8

Рисунок 4.5 – Цветовое оформление web-страницы

1

2

3

сайта, а флажок 3 должен быть включен. Кнопка Дополнительно… открывает окно

Редактора дополнительных свойств.

4.2.1. Работа с текстом.Заполнение редактируемой web-страницы текстом может быть осуществлено как

набором текста на клавиатуре непосредственно в редакторе NVU 1.0, так и вставкой

текста через буфер обмена. Во втором случае большая часть форматирования текста

сохраняется и записывается с помощью html и css команд.

Для изменения текста необходимо воспользоваться командами меню Формат.

Команда Шрифт позволяет выбрать шрифт из раскрывающегося подменю.

Команда Размер используется, чтобы в раскрывающемся подменю указать

относительный размер шрифта или увеличить (уменьшить) размер шрифта для текста

по сравнению с окружающим.

Команда Стиль текста позволяет выбрать из раскрывающегося подменю начертание

шрифта (полужирный, курсив, подчеркнутый и т.п.) или один из типов форматирования,

предопределенных стандартом языка HTML.

Команда Цвет текста открывает диалоговое окно Цвет текста, в котором можно

выбрать цвет для текста.

Используя команду Выбор цвета подсветки текста на панели Форматирования можно с помощью диалогового окна Цвет подсветки выбрать фоновый цвет под

буквами.

Для того, чтобы отменить форматирования текста необходимо выполнить команду

Формат→Прервать стили текста.

Форматирование абзацев выполняется с помощью следующих команд.

Команда Формат→Абзац позволяет выбрать из раскрывающегося подменю

следующие типы форматирования для текста.

Обычный текст. Фрагмент текста не отделяется интервалами от предшествующего и

последующего текста (если эти наличие этих интервалов не следует из

форматирования предшествующего или последующего абзацев). Нажатие клавиши

Enter вставляет тэг <br> - с новой строки.

Абзац. Создает новый абзац, который отделяется интервалами от предшествующего и

последующего текста. Нажатие клавиши Enter вставляет тэг <p> - новый абзац.

Заголовок 1 - Заголовок 6. Текст будет отформатирован как заголовок. "Заголовок 1" -

самый высокий уровень заголовков, а "Заголовок 6" - самый низкий. Тэги h1-h6.

Адрес. Используется для "подписи" web-страницы - указания ее автора, даты создания

или контактной информации лица, с которым можно связаться для получения

41

дальнейшей информации. Как правило, размещается в нижней части страницы и

отделяется от остального текста линией-разделителем. Тэг <address>…</address>.

Заданный формат. Этот тип форматирования (тег <pre>…</pre>) пробелы, символы

табуляции и разрыва строки, включенные в исходный текст web-страницы, при

отображении браузером оставляет без изменений.

Генерируемое содержимое (div). Определяет фрагмент текста как отдельный блок.

Команда Формат→Увеличить (Уменьшить) отступ – увеличивает (уменьшает)

отступ всего текстового фрагмента от левого края.

Команда Формат→Выравнивание – позволяет выбрать горизонтальное

выравнивание текста относительно окна.

Команда Формат→Список - позволяет выбрать из раскрывающегося подменю тип

списка (Ничего, Маркированный, Нумерованный, Термин или Определение). Выбор

пункта Свойства списка… открывает диалоговое окно Свойства списка, где вручную

редактируются свойства списка (выбор типа маркера или нумерации). Для организации

вложенного списка, необходимо выделить строки, которые являются пунктами

следующего уровня, и нажать клавишу Tab. Обратное действие выполняется с помощью

клавиш Shift+Tab.

Используя команды меню Вставка можно вставить на web-страницу следующие

текстовые элементы.

Команда Разделитель – вставляет горизонтальную линию в место указанное

курсором. Для изменения свойств линии необходимо сделать на ней двойной щелчок

левой кнопкой мыши и в открывшемся диалоговом окне Свойства горизонтального разделителя задать необходимые параметры.

Команда HTML… – открывает диалоговое окно для вставки html-кода вручную в

место указанное курсором.

Команда Буквы и символы… – открывает диалоговое окно Вставка символа для

вставки дополнительных символов из перечисленных категорий на место указанное

курсором. Кнопка Вставка – вставляет символ, кнопка Закрыть – закрывает данное окно.

Команда Комментарий – открывает диалоговое окно Редактировать комментарий, в котором указывается текстовый комментарий для места указанного

курсором. При просмотре в браузере комментарии не отображаются. В режиме

редактирования на месте комментария появляется специальный значок - маленький

желтый прямоугольник с восклицательным знаком внутри. Двойной щелчок левой кнопки

мыши по значку открывает окно для редактирования данного комментария.

Команда PHP-код – открывает диалоговое окно Редактировать PHP код для

42

вставки программируемого кода на web-страницу.

4.2.2. Вставка и редактирование таблиц.Таблицы используются для организации текста и изображений относительно друг

друга. Чтобы вставить таблицу необходимо установить курсор в нужное место web-

страницы, выполнить команду Таблица→Вставить→Таблица…, и в открывшемся

диалоговом окне Вставка таблицы (рис.4.6) задать необходимые параметры.

На вкладке Ячейка (рис.4.6 а)

определяются выравнивания внутри

ячеек таблицы, тип размещения

текста внутри ячеек, отступы между

ячейками и между содержимым и

границами.

На вкладке Точная (рис.4.6 б)

задается количество строк и столбцов

таблицы, ее ширина в процентах от

ширины окна или пикселях и размер

рамки таблицы. Для таблицы с

границей нулевой ширины редактор

Nvu 1.0 показывает условную границу

красной пунктирной линией. Эта

линия не отображается при

просмотре таблицы в браузере.

На вкладке Простая (рис.4.6 в)

можно определить размер таблицы

щелчком на нужную ячейку. В

результате данное окно закрывается.

Кнопка Дополнительно… открывает диалоговое окно

редактора дополнительных свойств, где можно задать дополнительные атрибуты таблицы или связать с ней

сценарии JavaScript. Кнопка OK подтверждает заданные параметры и показывает

таблицу в окне визуального редактора.

Редактирование полученной таблицы может быть выполнено одним из способов.

43

Рисунок 4.6 – Диалоговое окно Вставка таблицы

а)

б)

в)

1) Изменение таблицы в окне редактора. Выделить таблицу щелчком левой кнопки

мыши на нее. В результате таблица окажется выделенной (рис.4.7). Перемещение меток

выделения (1) нажатой левой кнопкой мыши изменит размер границ. Выделенная ячейка

таблицы содержит команды для удаления столбца

(2) или строки (3), которые ее содержат и команды

для добавления столбца слева (4) или справа (5) и

для добавления строки сверху (6) или снизу (7).

2) Использование диалогового окна

Свойства таблицы, которое можно открыть командой Таблица→Свойства таблицы или двойным щелчком

левой кнопкой мыши по

таблице. На вкладке

Ячейки (рис.4.8 а)

можно задать

следующие параметры.

Группа Выделение предназначена для

выбора из

выпадающего меню 1 диапазона, к которому

будут применены

параметры, кнопки

Предыдущая (2) ,

Следующая (3)

используются для

перехода по таблицы.

Группа Размер (4)

предназначена для

указания высоты и

ширины в пикселях

или процентах от

размера окна.

Группа

Выравнивание

44

Рисунок 4.7 – Выделенная таблица

12

3

546

7 1

а)

б)Рисунок 4.8 – Диалоговое окно Свойства таблицы

1

32

4 5

76

8

9

10

11 12

13

содержимого (5) предназначена для выравнивания содержимого по горизонтали и

вертикали.

Выпадающее меню Стиль ячейки: (6) позволяет определить ячейку как ячейку

заголовка.

Выпадающее меню Разбивка текста на строки (7) определяет способ задания текста.

Кнопка Цвет фона (8) открывает диалоговое окно Фоновый цвет ячейки для выбора

цвета заливки.

На вкладке Таблица (рис.4.8 б) можно задать следующие параметры.

Группа Размер (9) позволяет изменить количество строк и столбцов таблицы и ее

общий размер.

Группа Обрамление и поля (10) позволяет установить толщину границ таблицы (поле

Рамка) и отступы между ячейками и их содержимым.

Выпадающее меню Выравнивание таблицы (11) определяет положение таблицы

относительно окна.

Выпадающее меню Заголовок (12) определяет положение заголовка таблицы.

Кнопка Цвет фона (13) открывает диалоговое окно Цвет фона таблицы для выбора

цвета заливки.

Кнопка Применить устанавливает выбранные параметры не закрывая данного

окна. Кнопка ОК применяет параметры и закрывает текущее окно.

3) Использование команд пункта Таблица, с помощью которых можно добавлять,

выделять, удалять столбцы, строки, ячейки и выбирать фон для выделенных ячеек или

таблицы в целом, а так же объединять выделенные ячейки пункт Объединить выбранные ячейки и разбивать их обратно пункт Разбить ячейки. Команда Создать таблицу из выделения предназначена для преобразования выделенного текста в

таблицу. В результате ее выполнения открывается диалоговое окно Преобразование в таблицу, в котором нужно выбрать символ-разделитель для разделения каждой строки

на отдельные ячейки. Установка флажка Удалить символ разделителя заставляет

редактор Nvu 1.0 удалить эти символы. Форматирование текста будет удалено после его

преобразования в таблицу.

4.2.3. Вставка графического изображения.Для вставки графического изображения необходимо установить курсор в нужное

место web-страницы и выполнить команду Вставка→Изображение… . В результате

открывается диалоговое окно Свойства изображения (рис.4.9) в котором указываются

параметры рисунка.

45

На вкладке Адрес с помощью кнопки Выбрать файл… (1) указывается

относительный адрес (2) графического изображения, которое обязательно должно

лежать в одной из папок web-сайта. Только в этом случае перенос всего web-сайта на

другой компьютер или web-сервер пройдет корректно. В поле Всплывающая подсказка: (3) указывается текст, который будет

появляться при наведении указателя

мыши на рисунок в браузере. Поле

Альтернативный текст: (4) позволяет

задать надпись которая будет

появляться в том случае, если отменен

показ картинок в браузере.

Кнопка Дополнительно (5)

открывает диалоговое окно редактора

дополнительных свойств, в котором

можно задать дополнительные атрибуты

рисунка или связать с ним сценарии

JavaScript.

Вкладка Размеры позволяет изменить следующие параметры рисунка.

Исходный размер: - видимый размер изображения на странице будет

соответствовать размеру, заданному в исходном файле.

Задать размер: - задается ширина и высота изображения, а также единицы измерения

(пиксели или проценты от размера окна). Эти параметры никак не влияют на исходный

файл изображения, определяя лишь видимый размер изображения на странице.

Соблюдать пропорции: - при установке данного флажка при изменении ширины или

высоты второй параметр изменяется автоматически.

Вкладка Внешний вид позволяет изменить следующие параметры рисунка

Группа Поля: - задаются расстояния, отделяющее изображение от других элементов

страницы, окружающих его, а также размер рамки вокруг изображения в пикселях.

Группа Расположение текста по отношению к изображению: - выбирается нужный

вариант расположения из раскрывающегося списка.

Группа Карта изображения: - кнопка Убрать удаляет информацию о карте

изображения.

Вкладка Ссылка позволяет организовать гиперссылку по рисунку. При этом

возможны следующие варианты. С помощью кнопки Обзор необходимо выбрать один из

файлов из структуры папок web-сайта и установить флажок Относительный URL. Или

46

Рисунок 4.9 – Диалоговое окноСвойства изображения

1234

5

установить флажок Адрес электронной почты и ввести e-mail вручную. Или в

соответствующем поле указать полный адрес какого-либо ресурса в Интернет. Или из

выпадающего списка выбрать нужный якорь (место на той же web-странице). При

установки флажка Показывать рамку… вокруг изображения появится рамка.

Вставленное графическое изображение можно выделить щелчком левой кнопки

мыши и изменить его размер перемещением метки выделения нажатой левой кнопкой

мыши. Перемещение рисунка выполняется перемещением нажатой на него левой кнопки

мыши. Для изменения свойств графического изображения необходимо выполнить

двойной щелчок левой кнопкой мыши на нем. Если было выбрано обтекание картинки

текстом, то для того чтобы прервать обтекание необходимо установить курсор в нужное

место web-страницы и выполнить команду Вставка→Разрыв под изображениями.

4.2.4. Организация гиперссылок.Для организации гипертекстовых связей между web-страницами необходимо

создать гиперссылки согласно структуре web-сайта.

Гиперссылки по графическому изображению организуются с помощью вкладки

Ссылка диалогового окна Свойства изображения, которое было рассмотрено в

предыдущем подразделе.

Для организации гиперссылки по тексту

необходимо его выделить и выполнить

команду Вставка→Ссылка…. В результате

открывается диалоговое окно Свойства ссылки (рис.4.10), в котором необходимо

указать следующие параметры.

Группа Текст ссылки – здесь либо

приводится выделенный при создании ссылки

текст (1), либо появляется текстовое поле, в

которое нужно ввести текст гиперссылки.

Группа Адрес объекта ссылки служит

для определения конечного объекта ссылки.

Используя кнопку Выбрать файл… (2) можно

выбрать любой документ из папок web-сайта. Используя выпадающее меню (3) можно

выбрать якорь (метку) или один из заголовков (h1-h6) текущей web-страницы. Установив

флажок Адрес электронной почты (4) ввести в текстовое поле e-mail. Или ввести в

текстовое поле (5) адрес Интерент ресурса. Флажок Относительный URL (6) будет

47

Рисунок 4.10 – Диалоговое окноСвойства ссылки

1

2

3

46

5

7

8 9

10

активен в том случае, если web-страница не была сохранена и его необходимо

установить.

Кнопка Расширенные (Основные) свойства (7) позволяет получить (закрыть)

доступ к дополнительным параметрам гиперссылки.

Установленный флажок Открытие ссылок (8) позволяет выбрать из выпадающего

меню (9) место, где будет открыт новый документ.

Кнопка Дополнительно (10) открывает диалоговое окно редактора

дополнительных свойств, в котором можно задать дополнительные атрибуты ссылки или

связать с ней сценарии JavaScript.

Для изменения параметров созданной гиперссылки необходимо выделить ее и

выполнить ту же команду Вставка→Ссылка….

Для удаления гиперссылки необходимо выделить объект текст или графическое

изображение и выполнить команду Формат→Убрать ссылки.

Для того чтобы иметь возможность организовывать гиперссылки внутри одной web-

страницы необходимо или выделить соответствующие надписи как заголовки (h1-h6), или

в нужных местах этой страницы расставить якоря (метки) командой Вставка→Якорь с именем…. В результате выполнения команды откроется диалоговое окно Свойство якоря с именем, в котором нужно ввести имя якоря в текстовое поле Имя якоря:.

Процесс создания оглавления внутри одной web-страницы можно

автоматизировать следующим образом.

Используя команды Формат→Абзац→Заголовок 1 - Заголовок 6 обозначить

заголовки разделов и подразделов документа.

Выполнить команду Вставка→Оглавление→Вставить, в открывшемся диалоговом

окне нажать на кнопку ОК. По умолчанию, каждый пункт сгенерированного оглавления

пронумерован и является ссылкой на соответствующий раздел. Сняв флажок

Пронумеровать все элементы в оглавлении можно получить оглавление в виде

маркированного списка. Активизировав флажок Создать оглавление только для чтения, получить оглавление как простой текст, без ссылок.

Если после формирования оглавления в документе были созданы новые разделы

или подразделы, то следует обновить оглавление для добавления в него новых пунктов

командой Вставка→Оглавление→Обновить. Чтобы полностью удалить оглавление

необходимо выполнить команду Вставка→Оглавление→Удалить.

4.2.5. Вставка форм.

48

Редактор Nvu 1.0 позволяет вставлять и редактировать формы с помощью команд

меню Вставка→Форма. Для того чтобы организовать форму необходимо установить

курсор в нужное место web-страницы и выполнить команду

Вставка→Форма→Определить форму. В результате откроется диалоговое окно

Свойства формы (рис.4.11), в котором нужно задать следующие параметры.

Поле Имя формы: (1) задается имя для

создаваемой формы.

Поле URL обработчика: (2) задается имя

скрипта обрабатывающего данные формы

или адрес электронной почты, на которой

будут отправлены данные из формы.

Выпадающее меню Метод: (3) определяет

способ передачи данных (GET способ

передачи данных через адресную строку,

POST – способ передачи данных в теле HTTP

запроса).

Кнопка Расширенные (Основные) свойства (4) открывает (закрывает) доступ к еще

двум параметрам.

Выпадающее меню Тип содержимого: (5) позволяет выбрать тип кодировки данных

формы при отправке на web-сервер. (application/x-www-form-urlencoded - данные

формы кодируются как пары имени и значения, используется по умолчанию;

multipart/form-data - данные формы кодируются как сообщение с отдельными частями

для каждого элемента управления на странице, используется для отправки форм,

содержащих файлы; text/plain – данные формы кодируются как открытый текст, без

управляющих и форматирующих символов, используется для отправки данных на

адрес электронной почты).

Выпадающее меню Целевой фрейм: (6) позволяет выбрать окно, в которое будет

загружаться результат отправки формы.

Кнопка OK (7) вставляет на web-страницу html-код пустой формы, которая в режиме

просмотра отображается пунктирной рамкой бирюзового цвета.

Для изменения параметров созданной формы необходимо установить курсор

внутри рамки формы и выполнить ту же команду Вставка→Форма→Определить форму и в диалоговом окне Свойства формы внести необходимые изменения. Дополнительно

появляется кнопка Удалить форму с помощью которой можно удалить форму с web-

страницы.

49

Рисунок 4.11 – Диалоговое окно Свойства формы

1

2

3

4 5

6

7

Вставка полей формы внутри рамки осуществляется с помощью следующих команд

меню Вставка→Форма.

Команда Поле формы… - открывает диалоговое окно Свойства поля формы, в

котором (выпадающее меню Тип поля) задаются свойства для различных типов полей

(часть из них дублируется последующими командами):

Текстовое – определяет однострочное текстовое поле.

Пароль – определяет текстовое поле для ввода пароля (информация отображается

звездочками).

Флажок – определяет переключатель, который может принимать два значения

включено/невключено.

Опция – определяет кнопки выбора одного из вариантов.

Файл – определяет текстовое поле и кнопку Обзор для выбора файла для отправки.

Скрытое – определяет поле, которое не отображается в браузере и используется для

передачи данных обрабатывающему форму скрипту.

Группа Параметры поля позволяет определить имя поля и начальное значения

(для определенных типов полей).

Кнопка Расширенные (Основные) свойства открывает (закрывает) доступ к таким

параметрам поля как: последовательность перехода, клавиша доступа, размер поля,

максимальная длина, допустимые типы содержимого, которые доступны для

определенных типов полей.

Команда Изображение формы позволяет вставить в форму картинку.

Команда Текстовое поле позволяет вставить многострочное текстовое поле.

Команда Список выбора позволяет создать выпадающий или прокручивающий

список для выбора одного или нескольких элементов.

Команда Определить кнопку позволяет вставить кнопку ввода данных или очистки

формы.

Команда Определить метку служит для создания надписи связанной с каким-либо

полем формы.

Команда Определить набор полей позволяет организовать внутри формы рамку с

именем для группировки других полей.

При выполнении любой из этих команд открывается диалоговое окно Свойства …,

в котором задаются имя поля, начальные значения и т.д. Это же окно открывается при

двойном щелчке левой кнопки мыши на уже существующее поле.

4.2.6. Шаблоны и редактируемые области.

50

Шаблоны удобно использовать, когда нужно создать несколько web-страниц,

которые имеют одинаковые области. В редакторе Nvu 1.0 можно создавать собственные

шаблоны и использовать их как основу для web-страниц.

Шаблон может быть создан двумя способами.

1) Создание пустого шаблона командой Файл→Создать→Пустой шаблон→Создать. В результате открывается пустая страница, на которую нужно

добавить и отформатировать содержимое, которое будет оставаться неизменным

обычным для web-страниц способом. Далее добавить области которые можно будет

изменять командой Вставка→Шаблоны→Вставить редактируемую область. В

результате откроется диалоговое окно Вставка редактируемой области (рис. 4.12), в котором

необходимо указать следующие параметры.

Имя области (1), которое отобразится в редакторе

и на вкладке с именем и как содержимое области.

Тип области (2) – поток текста или блок, который

начинается с новой строки.

Параметры (3) – определяющие варианты

редактирования. Дополнительная область –

область, которую можно редактировать или

удалить (закрыть). Повторяющаяся область –

область, которую можно продублировать нужное число раз. Перемещаемая область –

область, которую можно просто редактировать.

2) Преобразование одной из web-страниц в шаблон установкой флажка Эта страница - шаблон в диалоговом окне Свойства страницы (команда

Формат→Заголовок и свойства страницы…). Далее в нужных местах добавляются

редактируемые области, командой описанной выше.

Полученный документ необходимо сохранить в одну из папок сайта как шаблон с

расширением *.mzt.

Чтобы использовать шаблон для создания новой web-страницы необходимо

выполнить команду Файл→Создать→Новый документ из шаблона, выбрать шаблон,

нажав кнопку Выбрать файл и нажать кнопку Создать. В полученном документе можно

будет изменять только редактируемые области, которые будут обведены бирюзовой

рамкой, по центру верхней стороны которой будет вкладка с ее именем и значок с

вариантом редактирования. После внесения изменений файл необходимо сохранить как

web-страницу, не забыв изменить ее название командой Формат→Заголовок и

51

Рисунок 4.12 – Диалоговое окноВставка редактируемой области

1

2

3

свойства страницы….

В том случае если на web-страницу созданную с помощью шаблона требуется

внести дополнительные изменения, то необходимо выполнить команду

Правка→Отделить от шаблона, чтобы отделить документ от шаблона.

4.3. Редактор стилей CSS.Каскадные таблицы стилей CSS предназначены для определения шрифта,

параметров форматирования текста, фоновых цветов и т.д. Применение CSS состоит из

двух этапов: определения стиля (селектора) и применения его к объекту. Наиболее

распространенными селекторами являются селекторы тэгов, названия которых

совпадают с названиями html-тегов и автоматически изменяют облик их содержимого и

селекторы классов, которые нужно прописывать вручную.

Существует три метода добавления таблиц стилей на web-страницу.

1) Использование внутренних стилей для определения стилей непосредственно в том

или ином элементе. В редакторе Nvu 1.0 большая часть форматирования описывается

именно с помощью внутренних стилей.

2) Использование внедренных таблиц стилей для определения стилей в начале web-

страницы. При этом правила будут применяться только к элементам данного

документа.

3) Использование внешних таблиц стилей для определения стилей отдельно в другом

документе. Правила будут применяться к тем документам к которым будет

подключена внешняя таблица.

Для формирования внутренней или внешней таблицы стилей редактор Nvu 1.0

содержит встроенный редактор стилей, который называется CaScadeS, вызывается

командой Инструменты→Редактор CSS и имеет два режима работы.

Режим новичка: этот режим позволяет создавать правила, связанные с именем класса

или с элементом указанного типа.

Режим эксперта: этот режим позволяет создавать и редактировать внешние таблицы

стилей.

Используя встроенный редактор CaScadeS можно создавать внутренние или

внешние таблицы стилей.

Создание внутренней таблицы стилей для текущей страницы.

В окне редактора CaScadeS (рис.4.13) отменить Режим эксперта (1) и нажать на

кнопку Новое правило. В правой части окна редактора выбрать тип создаваемого стиля

(3): Именованный стиль – будет создаваться селектор класса (4), Стиль,

52

применяемый ко всем элементам этого типа – будет создаваться селектор тэга (5).

Далее нажать на кнопку Создать правило стиля (6) и переходя по стилевым вкладкам

(Текст, Фон, Обрамление, Бокс, Звук) (7) задать его описание. Вкладка Основное показывает полное описание правила. При создании самого первого правила в левой

части окна появится внутренняя таблица стилей (8) с вложенными описаниями стилей.

Кнопками Вверх, Вниз можно менять последовательность стилей. Кнопкой Удалить –

удалять выделенный стиль. Кнопка Закрыть – завершает работу с редактором стилей.

Селекторы тэгов будут применяться на web-странице автоматически, для того чтобы

применить селектор класса необходимо выделить элемент и выбрать нужный стиль из

выпадающего меню Применить класс к выделению на панели форматирования.

Создание внешней таблицы стилей. Необходимо сохранить web-страницу к

которой будет прикрепляться внешняя таблица стилей. Открыть CSS редактор (4.14) и в

режиме эксперта (1) нажать на кнопку Новая ссылка (2). В правой части окна (3)

заполнить требуемые поля. В поле URL: (4) - задать имя файла внешней таблицы стилей

используя латинские буквы, цифры и разрешенные символы и расширение .css. Нажать

на кнопку Создать таблицу стилей (5), выделить в левом окне Таблицы стилей и правила получившуюся таблицу и нажать кнопку Обновить (6).

53

Рисунок 4.13 – Создание нового правила редактором CaScadeS

12

34

5

8

6

7

Рисунок 4.14 – Работа с внешней таблицей стилей

1

2

3

4

5

67

8

После создания одной или нескольких таблиц стилей создаются правила для

каждой. Чтобы использовать определенную таблицу стилей для создания или изменения

правил выделите таблицу стилей (7) в левой панели. В правой панели на вкладке

Основное отображается информация о таблице стилей. Создание новых правил

выполняется, так же как и для внутренней таблицы стилей (кнопка Новое правило).

После выхода из редактора (кнопка Закрыть) необходимо сохранить текущую web-

страницу.

Для того чтобы прикрепить внешнюю таблицу стилей к сохраненной web-странице

необходимо выполнить следующие действия. Открыть редактор CSS (рис.4.14) в режиме

эксперта (1), нажать на кнопку Новая ссылка (2) и с помощью кнопки Выбрать файл (8)

выбрать нужную внешнюю таблицу стилей. Далее нажать на кнопки Создать новую таблицу стилей (5) и Обновить (6). После выхода из редактора (кнопка Закрыть)

необходимо сохранить текущую web-страницу. Затем нужно в режиме Код изменить в

тэге <link rel="stylesheet" href=file:///C:/WWW/web-nvu/style.css type="text/css"> абсолютную

ссылку на относительную, для того чтобы можно было переносить web-сайт на другой

компьютер или web-сервер.

Изменять стили объектов можно с помощью строки состояния, в которой

отображаются тэги конкретного места web-страницы. Щелчок правой кнопки мыши на

любой из тэгов открывает контекстное меню со списком команд (рис.4.15).

Команда Inline стили откроет

дополнительное меню с

подпунктами:

Свойства текста;

Свойства обрамления;

Свойства фона;

Свойства бокса;

Свойства звука;

Извлечь и создать основной стиль.

Выбор любой секции, кроме последней, откроет соответствующую вкладку в

Редакторе CSS, на которой можно определить стиль элемента. Пункт Извлечь и создать основной стиль позволяет извлекать информацию о стиле в стилевое правило и

сохранять его во внешней или внутренней таблице стилей.

54

Рисунок 4.15 – Работа с тэгами с помощью строки состояния

Раздел 5. Приложение Microsoft Office FrontPage 2003.

Microsoft Office FrontPage 2003 является приложением, предназначенным для

создания и сопровождения web-сайтов (web-узлов), используя стандартный интерфейс

WYSIWYG (“что видишь, то и получаешь”).

MS FrontPage2003 доступен в качестве отдельного приложения. Размер

установочной папки – 155 Мб. Требования к аппаратным средствам.

Компьютер и процессор. ПК с процессором Pentium 133 МГц или более мощным,

рекомендуется Pentium III.

Память. 64 МБ ОЗУ (рекомендуется 128 МБ) для операционной системы,

дополнительно 8 МБ ОЗУ для каждого из приложений, работающих одновременно.

Жесткий диск. 245 МБ свободного места на жестком диске и 115 МБ на жестком диске,

на котором установлена операционная система (требования к наличию свободного

места на жестком диске зависят от конфигурации, а также от компонентов,

выбираемых в процессе установки).

Операционные системы Microsoft Windows® 2000 с пакетом обновления 3 (SP3),

Microsoft Windows XP или более поздние версии.

Справочная информация по программе на сайте –

http://office.microsoft.com/ru-ru/frontpage/FX100647001049.aspx?

CTT=96&Origin=CL100570711049.

MS Office FrontPage 2003 предоставляет новую среду разработки: макеты, линейки,

линии сетки, изображения-образцы, слои, шаблоны, улучшенные темы – все это

предназначено для того, чтобы облегчить процесс реализации проекта web-сайта

разработчику, который может даже не обладать знаниями языка HTML. Web-редактор

имеет удобные инструменты для работы с таблицами, встроенные средства для

обработки изображений, позволяет легко размещать на страницах различные

мультимедиа-объекты: рисунки, видеофильмы, анимацию, звуковые фрагменты. Тесная

интеграция с пакетом MS Office позволяет отображать на страницах документы MS Word,

таблицы и графики MS Excel, динамически получать данные из MS Access, использовать

язык VBA, средства проверки орфографии и около 60 готовых тем для оформления

страниц сайта. В MS FrontPage 2003 реализована поддержка современных Web-

технологий, таких, как каскадные таблицы стилей (CSS), динамические эффекты

(DHTML), фреймы, активные страницы (ASP), элементы ActiveX и Java-аплеты.

Программа FrontPage является не только редактором Web-страниц, но и содержит

средства управления сайтом, такие, как схема навигации по страницам, анализ сайта с

55

помощью различных отчетов, коллективная разработка, настройка на определенные

браузеры, загрузка сайта на Web-сервер по протоколам HTTP и FTP. С помощью данной

программы можно не просто создавать и редактировать web-страницы, но и вставлять на

них различные сложные элементы (счетчики, панели ссылок, строки поиска,

динамические эффекты, бегущие строки и т.д.) без написания дополнительных скриптов.

Однако большая часть таких компонентов будет работать только в том случаи, если web-

сайт будет опубликован на web-сервере, на котором установлены серверные расширения

FrontPage (Microsoft), службы SharePoint™ Team Services 1.0 (Microsoft) или службы

Microsoft Windows® SharePoint Services. Работа некоторых компонентов зависит от типа

используемого браузера. Это накладывает определенные ограничения на использование

возможностей приложения при создании web-страниц.

К недостаткам web-редактора MS FrontPage можно отнести его преимущественную

ориентацию на браузер Internet Explorer, поэтому следует проверять работу готового

сайта в других браузерах. А также некоторую избыточность готового кода HTML. Редактор

отслеживает изменения в коде страниц и восстанавливает тэги, удаленные

пользователем.

В основном, MS FrontPage 2003 выглядит как большая часть приложений MS Office

56

Рисунок 5.1 – Окно программы MS Office FrontPage 2003

1

9

23456

7

8

10

11

12

2003 (рис.5.1).

1 – строка заголовка

2 – строка меню

3 – стандартная панель инструментов

4 – панель инструментов “форматирование”

5 – панель представления

6 – информационная область текущего

представления

7 – рабочая область

8 – панель кнопок представления

9 – панель инструментов “рисование”

10 – строка состояния

11 – панель области задач

12 - справка

Для получения справки по программе необходимо выполнить команду

Справка→Microsoft Office FrontPage и на панели Справка FrontPage перейти по

ссылки Оглавление. Если компьютер подключен к Интернет, то к оглавлению справки

добавляются документы, расположенные на сайте http://office.microsoft.com. В противном

случае оглавление состоит только из документов установленных вместе с приложением.

5.1. Создание и редактирование web-сайта в среде приложения.

Приступая к созданию web-сайта, необходимо определится с его тематикой,

количеством подразделов сайта и страниц в каждом из них, т.е. разработать подробную

структурную схему, а так же подготовить текстовый и графический материал для каждой

из web-страниц. Процесс разработки web-сайта непосредственно в программе MS Office

FrontPage 2003 может быть осуществлен по следующему алгоритму.

1) Создать новый web-сайт или открыть уже созданный.

2) Организовать (отредактировать) структуру web-сайт.

3) Отредактировать страницы web-сайта в любом порядке:

3.1) перейти в режим редактирования конкретной страницы;

3.2) установить свойства web-страницы;

3.3) ввести с клавиатуры или вставить через буфер обмена текст и отформатировать его;

3.4) вставить фон, звуковое сопровождение, таблицы, графические изображения,

гиперссылки, общие области, формы;

3.5) добавить динамические эффекты и компоненты MS Office FrontPage 2003;

3.6) сохранить web-страницу и просмотреть ее в браузере Internet Explorer;

3.7) продолжить редактирование или перейти к редактированию другой web-страницы.

4) При необходимости вернуться к п.2 и добавить новые web-страницы.

5) Закрыть FrontPage 2003, открыть web-сайт в браузере и протестировать его

(просмотреть web-сайт при разных расширениях монитора в разных браузерах).

57

5.1.1. Создание нового web-сайта и режимы представления.Для создания нового web-сайта необходимо выполнить следующие действия.

1) Выполнить команду Файл→Создать.

2) На панели Создание (1 рис.5.2) области задач перейти по гиперссылки

Одностраничный веб-узел (2 рис.5.2).

3) В открывшемся окне Шаблоны веб-узлов (3 рис.5.2) на вкладке Общие выбрать шаблон Одностраничный веб-узел (4 рис.5.2). Описание шаблона (5 рис.5.2)

появится в правой нижней части диалогового окна. (При выборе какого-либо другого

шаблона, новый web-сайт уже будет содержать некоторое количество web-страниц с

определенным оформлением, в некоторых случаях будет запущен специальный мастер

настройки, с помощью которого можно задавать структуру web-сайта.)

4) Заполнить поле Укажите расположение нового веб-узла: (6 рис.5.2) вручную

(ввести полный путь) или с помощью кнопки Обзор (7 рис.5.2) (определить место на

диске для сохранения нового web-сайта, открыть (создать) папку, нажать кнопку

Открыть).

5) Нажать кнопку OK.

После того как web-сайт создан (рис.5.3), на панели представления появляется

вкладка веб-узел (1), на информационной панели представления служебная

информация (2) и кнопки команд (3) доступных в этом представлении, а в рабочем окне

содержимое (4) текущего представления.

Панель кнопок представления (5 рис.5.3) содержит шесть кнопок, с помощью

58

Рисунок 5.2 – Создание нового web-сайта

1

2

3

4

5

67

которых можно переключаться в различные режимы представления web-сайта.

Представление Папки – демонстрирует список папок и страниц web-сайта. В этом

режиме удобно создавать новые папки, используя кнопку Создать папку в правой части

информационной области данного представления.

Представление Удаленный веб-узел – используется для просмотра Вашего web-

сайта на удаленном web-сервере.

Представление Отчеты – содержит список вариантов отчетов о web-сайте. Каждый

итоговый отчет имеет свое имя, количество пунктов, общий размер файлов и описание.

Данный режим, например, может быть использован для выявления ошибок

гипертекстовых переходов.

Представление Переходы – демонстрирует графическое изображение структуры

web-сайта.

Представление Гиперссылки – показывает гипертекстовые связи между web-

страницами.

Представление Задачи – используется для организации заданий по созданию web-

сайта (обычно используется, если в работе над web-сайтом участвуют несколько

человек).

Все эти представления доступны из меню Вид.

Web-сайт созданный с помощью FrontPage 2003 может содержать web-страницы,

рисунки, файлы мультимедиа, т.е. практически все возможные виды файлов, а так же

скрытые папки и файлы (не отображаемые в приложении), поддерживающие особые

функциональные возможности приложения. К скрытым папкам относятся _vti_cnf и

_vti_pvt. Их можно увидеть, если открыть папку web-узла, например, в программе Мой

59

Рисунок 5.3 – Представление web-узла Папки

1 2 34

5

компьютер. Папка _vti_cnf содержит сведения о каждом файле, например сведения о

содержащихся в нем ссылках или об авторе и времени внесенных в файл изменений. В

папке _vti_pvt хранятся все сведения о конфигурации узла, например сведения о

дочерних узлах и о конфигурации разрешений для web-узла.

По умолчанию, при создании Одностраничного веб-узла, создаются папки

_private и images и файл index.htm – первая (домашняя) страница web-сайта.

Для просмотра web-страницы index.htm необходимо сделать двойной щелчок левой

кнопкой мыши на имени файла. В результате на панели представления правее вкладки

веб-узел, появится вкладка index.htm (1 рис.5.4) и кнопка Закрыть (2 рис.5.4), на панели информационной области представления кнопка Быстрый выбор тэга (3 рис.5.4), а в

рабочей области отобразится пустой документ. На панели кнопок представления (4

рис.5.4) появятся кнопки, с помощью которых можно переключаться в различные режимы

редактирования web-страницы.

Представление Конструктор – отображает web-страницу как расширенный

текстовый процессор в режиме WYSIWYG..

Представление С разделением – отображает одну и туже web-страницу как в

режиме расширенного текстового процессора, так и в редакторе HTML-кода web-

страницы. Изменения, внесенные в одном из режимов, сразу же отображаются во втором.

Представление Код – позволяет редактировать непосредственно HTML-кода web-

страницы.

Представление Просмотр – показывает, как данная страница будет выглядеть в

браузере.

Для доступа к этим представлениям используется команда Вид→Страница.

Для того, чтобы в представлении Страница видеть список файлов и папок web-

сайта, необходимо выполнить команду Вид→Список папок или нажать кнопку

Переключить панель на стандартной панели инструментов или одновременно нажать

на клавиатуре ALT и F1.

В результате рабочая область оказывается разбита на две части (рис.5.4). В левой

– представления web-сайта Список папок (5) или Переходы, в правой – любое

представление из меню Вид.

Такая организация представления web-сайта для редактирования в программе

FrontPage 2003 представляется наиболее удобной.

Для увеличения рабочего пространства редактируемой web-страницы можно

закрыть панель области задач. Для того, что бы эта панель не появлялась при

последующих запусках приложения FrontPage 2003 нужно выполнить команду

60

Сервис→Параметры и на вкладке Общие снять флажок открывать область задач.

Для того, что бы завершить работу с web-сайтом необходимо выполнить команду

Файл→Закрыть узел.

Для открытия web-сайта в программе FrontPage 2003 необходимо выполнить

следующие действия.

Выполнить команду Файл→Открыть узел.

В открывшемся диалоговом окне Открытие веб-узла, открыть папку, которая является

web-сайтом.

Нажать кнопку Открыть.

5.1.2. Организация структуры web-сайта.После того как web-сайт

создан, необходимо создать его

первоначальную структуру, т.е.

добавить необходимое число

новых web-страниц. Добавление

новых web-страниц в структуру

сайта может быть организованно

различными способами.

I. Рассмотрим процесс

создания web-страниц в режиме

представления web-сайта

61

Рисунок 5.5 – Информационная панель Переходы1 – создание новой web-страницы2 – добавление существующей web-страницы3 – создание панели ссылок4 – включение (исключение) в панель ссылок5 – просмотр поддерева6 – горизонтальное или вертикальное размещение7 – выбор масштаба отображения структуры

1 2 3 4 5 6 7

8

Рисунок 5.4 – Окно программы FrontPage 2003,после выполнения команды Вид→Список папок

Переходы. В этом режиме (рис.5.5) web-страницы отображаются в виде графической

схемы (8), а информационная панель содержит команды (1-7), позволяющие работать со

структурой web-сайта. Для того чтобы создать новые web-страницы, необходимо

выполнить следующие действия.

1) Нажать кнопку 1 на информационной панели. Если в этот момент ни одна из

web-страниц структуры не была выделена, то появится web-страница с заголовком

Верхняя страница 1. В том случае если какая-либо из имеющихся web-страниц

структуры была выделена, то появится web-страница с заголовком Новая страница 1,

соединенная тонкой линией (8) с выделенной страницей. Такого же эффекта как в

последнем случае можно добиться если нажать правой кнопкой мыши на любую из

имеющихся web-страниц и в выпадающем меню выполнить команду

Создать→Страница. Все последующие страницы будут отличаться от предыдущих

только номером.

2) Затем чтобы созданные web-страницы отобразились в окне Список папок необходимо выполнить команду Обновить либо на стандартной панели инструментов

либо из меню Вид.

3) В окне Список папок web-страницы с заголовками Верхняя страница Х соответствуют файлам toppageХ.htm, web-страницы с заголовком Новая страница Х,

соответствуют файлам нов_стр_Х.htm, где Х – номер. Файлы с именами

нов_стр_Х.htm необходимо переименовать таким образом, чтобы их имена состояли

только из латинских букв, цифр и разрешенных символов. Для этого нужно нажать

правой кнопкой мыши на соответствующий файл, выбрать команду Переименовать и

заменить имя файла на требуемое.

4) При изменении структуры web-сайта имеющиеся страницы можно удалять

(нажать правой кнопкой мыши на нужную, выбрать команду Удалить, включить нижний

флажок и нажать кнопку OK) и перемещать по схеме (нажатой левой кнопкой мыши

переместить страницу в нужное место). Если удаляемая или перемещаемая web-

страница имеет страницы более низкого уровня, то они так же будут удалены или

перемещены.

5) Все создаваемые web-страницы

размещаются в корневой папке web-сайта. Если

страниц много, то логично разместить их по разным

папкам, в соответствии со структурой. Для этого в

окне Список папок (рис.5.6) необходимо создать

новые папки (команда Создать папку на

62

Рисунок 5.6 – Окно Список папок1 - создать web-страницу2 – создать папку3 – закрыть окно

1 2 3

информационной панели Список папок) и нажатой левой кнопкой мыши переместить

файлы в нужные папки.

II. Рассмотрим процесс создания web-страниц с использованием окна Список папок (рис.5.6). В этом окне отображаются папки и файлы web-сайта в алфавитном

порядке с указанием их вложенности. Для того чтобы создать новые web-страницы,

необходимо выполнить следующие действия.

1) Используя кнопку 2 создать необходимое число папок с определенной

структурой вложенности, изменив имена Новая папкаХ на требуемые.

2) Выделить ту папку, в которой планируется создать web-страницу.

3) Нажать кнопку 1 и заменить имя нового файла с нов_стр_Х.htm на требуемое

(только латинские буквы, цифры и разрешенные символы) не меняя расширения

файла .htm.

4) При необходимости можно перетаскивать файлы из папки в папку нажатой левой

кнопкой мыши.

5) Для удобства и наглядности работы с полученной структурой web-сайта можно

оформить ее и в графическом виде. Для этого выбрать режим представления web-сайта

Переходы и нажатой левой кнопкой мыши перенести созданные web-страницы в

графическую структурную схему. При необходимости можно изменить названия

графических элементов схемы нажав правой кнопкой мыши на нужный и выбрав команду

Переименовать.

63

1

3

Рисунок 5.7 – Сохранение новой web-страницы сайта

2

4

5

III. Рассмотрим процесс создания web-страниц с использованием команды

Файл→Создать. Эта команда открывает панель Создание в области задач (рис.5.7). Для

создания web-страниц нужно выполнить следующие действия.

1) Выполнить команду Пустая Страница (1). В результате выполнения этой

команды новая web-страница открывается в одном из режимов представления web-

страниц и на панели представления справа от вкладки web-узел появляется вкладка с

именем открытой web-страницы (2).

2) Сохранить созданную web-страницу командой Файл→Сохранить.

3) В открывшемся диалоговом окне Сохранить как (3) выбрать из списка папок

web-узла нужную или с помощью кнопки Создать папку (4) создать новую папку web-

узла, в строке Имя файла: (5) задать новое имя файла web-страницы состоящее только из латинских букв, цифр и разрешенных символов.

4) Для получения структурной схемы web-сайта необходимо перейти в режим

представления web-сайта Переходы и нажатой левой кнопкой мыши перенести

созданные web-страницы в графическую схему. При необходимости можно изменить

названия графических элементов схемы нажав правой кнопкой мыши на нужный и выбрав

команду Переименовать.

При создании структуры web-сайта и ее дальнейшем редактировании можно

использовать любой из методов. Главное на что нужно обращать внимание при работе с

web-сайтом со сложной структурой:

имена всех файлов и папок в окне Список папок должны соответствовать требованиям

web-сервера, т.е. состоять из латинских букв, цифр и специальных символов.

все файл с расширением .htm в окне Список папок должны занимать строго

определенные места в графической структурной схеме (если она была создана).

5.1.3. Редактирование web-страницы.Когда некоторая начальная структура

web-сайта создана, необходимо переходить к

работе над отдельными web-страницами.

Двойной щелчок левой кнопкой мыши на

любой web-странице в окне Список папок или в режиме представления web-сайта

Переходы открывает ее для редактирования в одном из режимов представления

Страница (Конструктор, С разделением, Код, Просмотр). В этом режиме на панели представления (рис.5.8) справа от вкладки web-узел (1) появляется вкладка с именем

файла открытой web-страницы (2,3), которую так же можно использовать для перехода к

64

1 2 3 4

Рисунок 5.8 – Панель представления с двумя открытыми страницами

редактированию данного файла. Если на вкладке справа от имени файла находится

символ *, то это означает, что данная web-страница имеет несохраненные изменения.

Команда Файл→Сохранить сохраняет текущую web-страницу, а кнопка 4 закрывает ее.

Ниже панели представления может находиться информационная панель Быстрый выбор тэга, которая включается (выключается) командой Вид→Быстрый выбор тэга.

На этой панели отображается список вложенных тэгов, который соответствует месту web-

страницы, куда установлен курсор. При щелчке левой кнопки мыши на метку

выпадающего меню, появляется выпадающее меню, команды которого позволяют

выделить, изменить, удалить тэг, определить его свойства (стиль).

FrontPage 2003 предлагает три варианта редактирования web-страницы:

Конструктор, С разделением и Код, которые были описаны выше. Далее будет

рассматриваться редактирование web-страниц в режиме Конструктор, т.е.

формирование web-страницы без работы с HTML-кодом.

Режим Код может быть использован для добавления и редактирования HTML-

тэгов. Если установить курсор в заданное место web-страницы или выделит ее фрагмент

в режиме Конструктор, то при переключении в режим Код курсор будет находиться в том

же месте web-страницы или выделенным окажется тот же фрагмент. При работе с HTML-

кодом можно пользоваться большей частью команд меню и панелей инструментов, при

этом в текст web-страницы будут вставляться соответствующие тэги. Можно изменять

свойства форматирования через атрибуты тэга. Для этого нужно выделить нужный тэг,

нажать на него правой кнопкой мыши и выбрать команду Свойство тэга…. В

открывшемся диалоговом окне выбрать необходимые параметры и они будут добавлены

как атрибуты тэга. Форматирование HTML-кода может быть настроено с помощью

команды Сервис→Параметры страницы на вкладках Форматирование кода и

Цветовое выделение синтаксиса.

Редактирование страницы в режиме Конструктор необходимо начинать с задания

свойств web-страницы командой Файл→Свойства….

В открывшемся диалоговом окне (рис.5.9):

на вкладке Общие необходимо изменить поле Название – ввести заголовок web-

страницы, который будет отображаться в строке заголовка окна браузера. Остальные

поля этой вкладки заполняются по необходимости.

на вкладке Дополнительно можно изменить отступы от границ документа.

на вкладке Язык необходимо установить параметры: русский, кириллица,

автоматическая кодировка.

Кнопка ОК применяет выбранные параметры.

65

По окончанию редактирования web-страницы, ее необходимо просмотреть в

браузере с помощью команды Файл→Просмотреть в обозревателе или команды

Просмотр в текущем браузере на Стандартной панели инструментов.

5.1.4. Добавление и форматирование текстаРабота с текстом в программе FrontPage 2003 в режиме Конструктор аналогична

работе с текстом в программе Microsoft Office Word. Заполнить web-страницу текстом

можно несколькими способами.

1) Печать текста с клавиатуры начинается с того места, где установлен курсор, при

достижении правой границы web-страницы текст будет автоматически переходить на

другую строку. Для начала нового абзаца необходимо нажать клавишу <Enter>.

2) Копирование и вставка текста осуществляется стандартными методами через

буфер обмена командами Правка→Копировать, Правка→Вставить. Копируемый

фрагмент текста может быть взят из любого другого приложения. Команда

Правка→Специальная вставка… позволяет преобразовать текст из буфера обмена в

соответствии с выбранным условием.

3) Команда Вставка→Файл…, позволяет в диалоговом окне выбрать документ,

который будет полностью перенесен на web-страницу.

Во всех случаях любое форматирование текста выполняется с помощью тэгов

языка HTML, которые автоматически генерируются программой, их можно увидеть в

режиме Код или С разделением. Этим объясняется искажения в форматировании текста

66

Рисунок 5.9 – Диалоговое окно Свойства Страницы

при переносе его из других приложений.

Для редактирования текстового фрагмента необходимо его выделить с помощью

мыши или клавишей Shift вместе с клавишами со стрелками и воспользоваться

командами панели инструментов Форматирование и меню Формат.

Стандартная панель форматирования (рис.5.10) содержит следующие команды

для форматирования.

Стиль (1), Шрифт (2), Размер (3) – позволяют выбрать из выпадающего меню

соответственно стиль, шрифт и размер выделенного текста.

Полужирный (4), Курсив (5), Подчеркнутый (6) – определяют начертание

выделенного текста.

По левому краю (7), По центру (8), По правому краю (9), По ширине (10) – задают

выравнивание выделенных абзацев текста, или абзаца на котором установлен курсор.

Увеличить (11), Уменьшить размер шрифта (12) – изменяет размер шрифта

относительно текущего на 1.

Нумерация (13), Маркеры (14) – позволяют преобразовать выделенные абзацы в

нумерованный или маркированный список, или организовать список в том месте, где

установлен курсор.

Уменьшить (15), Увеличить отступ (16) – изменяет отступ от левой и правой границы

web-страницы.

Границы (17) – позволяет выбрать из выпадающего меню рамку вокруг выделенного

текста.

Выделить (18), Цвет текста (19) – позволяют выбрать из выпадающего меню цвет

фона под текстом, цвет текста выделенного текста.

Команды меню Формат для форматирования текста.

Шрифт… – открывает диалоговое окно для изменения шрифта, начертания, размера,

цвета, видоизменения (вкладка Шрифт) и интервала между символами, положения по

вертикали (вкладка Межзнаковый интервал).

Абзац… – открывает диалоговое окно для установки выравнивания, отступов,

интервалов между абзацами, интервалов между строками в абзаце.

67

Рисунок 5.10 – Стандартная панель форматирования1 2 3 4 5 6 7 8 9 10 11 12 13 1415 16 17 18 19

Список… – открывает диалоговое окно

(рис. 5.11) для более детальной настройки

списков. Вкладка Графические маркеры (1) позволяет выбрать изображения

маркера щелчком на кнопке Обзор (4) и

переходом к файлу изображения. Вкладка

Обычные маркеры (2) позволяет выбрать

тип маркера, вкладка Нумерация (3)

позволяет определить тип нумерации и

начальный номер в списке. Для организации

вложенных списков, необходимо выделить

те абзацы, которые будут представлять собой нижний уровень и два раза выполнить

команду Увеличить отступ. Для вложенных списков переключатель Включить свертываемые структуры (5) организует список таким образом, что щелчок левой

кнопки мыши на элемент верхнего уровня раскрывает или сворачивает список

элементов нижнего уровня. Переключатель Изначально свернуть (6) организует

начальное отображение списка в свернутом виде в окне браузера.

Границы и тени… - открывает диалоговое окно для определения рамки, ее стиля,

цвета, границ, отступов (вкладка Граница) и выбор цвета текста и фона внутри рамки

(вкладка Заливка).

Команды меню Вставка служат для добавления элементов на web-страницу в

место указанное курсором.

Символ… - открывает диалоговое окно для ввода символов, которых нет на

клавиатуре.

Разрыв… - открывает диалоговое окно для вставки новой строки без создания нового

абзаца. Опция Обычный разрыв строки – добавляет разрыв строк без сдвига текста,

опция Очистить левое (правое) поле - добавляет разрыв строк таким образом, что

если с левого (правого) края страницы располагается изображение, то строка после

разрыва начнется ниже изображения (рис. 5.12), опция Очистить оба поля - добавляет

разрыв строк таким образом, что строка после разрыва начнется там, где поле

страницы свободно.

68

Рисунок 5.11 – Диалоговое окно Список

1 2 3

4

6

5

Горизонтальная линия – вставляет горизонтальную черту, свойства которой (размер,

выравнивание и цвет) можно менять в диалоговом окне Свойства горизонтальной линии, которое появляется при выделении линии и выполнении команды

Формат→Свойства.

5.1.5. Организация основных цветов web-страницы.При оформлении

web-страницы можно

указать основные

цветовые параметры,

используя команду

Формат→Фон…. В

результате выполнение

этой команды

открывается диалоговое

окно Свойства страницы вкладка

Форматирование (рис.5.13). В секции Цвета можно выбрать из выпадающих меню цвет фона web-страницы

(1), текста по умолчанию (2), не просмотренной гиперссылки (3), просмотренной

гиперссылки (4) и активной гиперссылки (5). Кнопка ОК применяет выбранные параметры.

5.1.6. Создание и редактирование таблиц, макетные таблицы.Таблица – мощное средство структурирования web-страниц. HTML-таблицы

69

Рисунок 5.12 – Вставка новой строки (команда Вставка→Разрыв…)Расположение текста, обтекающего картинку при выборе опции:

а) Очистить правое поле б) Очистить левое поле

Рисунок 5.13 – Диалоговое окно Свойства страницы

1

2

3

45

используются не только для представления табличных данных, но и являются широко

используемым инструментом дизайна, представляя собой каркас, определяющий место

каждого графического и текстового фрагмента на web-странице. Можно встраивать одну

таблицу в другую и использовать различные средства форматирования для изменения

размеров и прочих визуальных аспектов таблицы.

Для вставки таблицы на web-страницу, необходимо установит курсор в нужное

место, а затем воспользоваться одним из способов ее создания.

1) Создание таблицы с помощью команды Добавить таблицу (1 рис.5.14) на Стандартной панели инструментов. В

этом случае необходимо выбрать данную команду, в результате

появится сетка таблицы (2). Далее возможно два варианта:

Перемещая указатель мыши, выделить нужное число строк и

столбцов таблицы, а затем щелкнуть левой кнопки мыши на

соответствующей ячейки;

Нажатой левой кнопкой мыши выделить нужное число строк и

столбцов и отпустить кнопку мыши. В этом случае размеры предлагаемой сетки

таблицы могут быть увеличены.

Параметры полученной таблицы будут установлены по умолчанию.

2) Создание таблицы с помощью команды Нарисовать таблицу. Данная команда

доступна из меню

Таблица (1 рис.5.15) или с

панели инструментов

Таблицы. После

выполнения этой команды

указатель мыши примет

форму карандаша. Далее

нажатой левой кнопкой

мыши рисуется общая

прямоугольная форма (2)

таблицы, а затем рисуются линии столбцов и строк (3).

3) Создание таблицы с помощью команды Таблица→Вставить→Таблица. В

результате выполнения этой команды открывается диалоговое окно Вставка таблицы (рис. 5.16), в котором можно установить различные опции настройки таблицы.

Рассмотрим некоторые из них.

Секция Параметры макета – установить переключатель Выключить параметры

70

Рисунок 5.14 – Создание таблицы

с помощью команды Добавить таблицу

1

2

Рисунок 5.15 – Создание таблицы с помощью команды Нарисовать таблицу

1

23

макета.

Секция Размер – в полях Строк:, Столбцов: задается количество строк и столбцов

таблицы.

Секция Положение – позволяет

задать следующие опции:

Выравнивание: - задается

выравнивание таблицы

относительно web-страницы;

Обтекание: - задается возможность

обтекания таблицы другими

объектами; Поля ячеек: - задается

отступ от границ ячеек до их

содержимого; Интервал ячеек: -

определяет отступы между

ячейками. Опция Задать ширину позволяет задать ширину таблицы

тремя способами: первый – ширина

не задана (ширина таблицы

определяется шириной ячеек с

содержимым наибольшей ширины);

второй – ширина задана в точках (ширина таблицы задается в

пикселях и не меняется при изменении размеров окна браузера, в том случае если

ширина таблицы больше размеров окна браузера появляется горизонтальная полоса

прокрутки); третий – в процентах (ширина таблицы определяется как процент от

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

либо размер ячейки, в которую вложена таблица). Аналогична устанавливается опция

Задать высоту.

Секция Границы – устанавливает размер и цветовое оформление рамки таблицы.

Секция Фон – позволяет установить фон таблицы либо как однотонный (вкладка Цвет:), либо с использованием графического файла (кнопка Обзор). Если заданны оба

варианта фона, то приоритет имеет графический фон и только в том случае если в

настройках браузера отменен показ рисунков будет виден однотонный фон.

Секция По умолчанию - позволяет запомнить заданные опции для новых таблиц.

Кнопка ОК применяет выбранные параметры.

71

Рисунок 5.16 – Создание таблицы с помощью команды Таблица→Вставить→Таблица

4) Создание таблицы с помощью команды Таблица→Преобразовать→Текст в таблицу… (рис.5.17). Выполнение этой команды преобразует выделенный текст (1) в

таблицу (3) согласно выбранному разделителю (2) в окне Текст в таблицу.

Для форматирования свойств уже созданной таблицы используются диалоговые

окна Свойства таблицы, Свойства ячейки, которые можно открыть, установив курсор в

любом месте таблицы (ячейки) и выполнив команду или из контекстного меню Свойства таблицы… (Свойства ячейки…) или Таблица→Свойства таблицы→Таблица (Ячейка).

Диалоговое окно Свойства таблицы полностью совпадает с диалоговым окном

Вставка таблицы.

Диалоговое окно Свойства ячейки (рис.5.18) позволяет

установить следующие опции.

Выровнять по горизонтали:, Выровнять по вертикали: -

определяет выравнивание

содержимого ячейки.

Объединение строк:, Объединение столбцов: –

определяет число объединенных

строк, столбцов.

Задать ширину:, Задать высоту: - устанавливают размеры ячейки

аналогично размерам таблицы.

Ячейка заголовка – включение флажка преобразует ячейку в ячейку заголовка.

Не переносить слова – включение флажка запрещает перенос текста по строкам.

72

Рисунок 5.17 – Преобразование выделенного текста в таблицу

1 2 3

Рисунок 5.18 – Диалоговое окно Свойства ячейки

Секции Границы и Фон – позволяют задать визуальные параметры границ ячейки и

фона.

Для задания одинаковых параметров нескольким ячейкам их нужно выделить.

Выделение таблицы или ее части осуществляется нажатой левой кнопкой мыши или с

помощью команды Таблица→Выделить.

Преобразование таблицы может быть осуществлено с помощью команд меню

Таблица и панели инструментов Таблицы, которые частично дублируют друг друга.

Вставить→Сроки или столбцы, Ячейка, Подпись - вставка элементов таблицы.

Удалить столбцы – удаление столбцов таблицы.

Объединить ячейки – объединение выделенных ячеек в одну.

Разбить ячейки – деление ячейки на столбцы и строки.

Автоформат… - выбор оформления таблицы из предложенных вариантов.

Выровнять высоту строк, Выровнять ширину столбцов – выделенные строки,

столбцы будут одной высоты, ширины.

Автободбор по содержимому – ширина ячеек определяется их содержимым.

Преобразовать→Таблицу в текст – табличные данные преобразуются в обычный

текст.

Изменение размеров таблицы и ее ячеек может быть выполнено путем

перетаскивания их границ нажатой левой кнопкой мыши.

Используя возможности объединения и разбиения ячеек, создания вложенных

таблиц можно организовывать макеты web-страниц любой сложности.

FrontPage 2003 предоставляет новую возможность при работе с таблицами –

макетные таблицы. Они используются при проектировании web-страниц со сложной

структурой оформления.

Макетная таблица - особый вид HTML-таблиц, у которых наверху и внизу

каждого столбца и по сторонам таблицы имеются ярлыки с информацией о ширине и

высоте в пикселях.

Макетная таблица (рис.5.19) состоит из следующих компонентов.

Макетная таблица (1), которая представляет основу для разработки макета. Будучи

выделена в режиме конструктора, она выделяется зеленой рамкой.

Макетные ячейки (2), которые представляют собой области макетной таблицы, в

которых размещается содержимое страницы, включая текст, рисунки и другие элементы

и при выборе выделяются синей рамкой.

Ячейки-заполнители (например, 3), которые не содержат данных и существуют для

того, чтобы дополнять сумму ширин столбцов таблицы до общей ширины таблицы и

73

выделяются однотонным фоном (только в режиме Конструктор).

Обычно перед созданием макета страницы с помощью макетных таблиц, web-

страницу подготавливают следующим образом (рис.5.19).

Устанавливают 0 (нулевые) поля web-страницы. Команда

Файл→Свойства→диалоговое окно Свойства страницы вкладка Дополнительно.

Отображают линейку (4), с помощью которой можно измерять в пикселях ширину и

высоту макета. Команда Вид→Линейка и сетка→Показать линейку.

Отображают сетку (5). Команда Вид→Линейка и сетка→Показать сетку.

При необходимости вставляют изображение-образец (6), представляющий собой

графическую модель web-страницы с большим процентом прозрачности, который

вставляется как фон и может использоваться как визуальный ориентир для разработки

макета web-страницы. Команда Вид→Изображение образец→Настроить…. В

открывшемся диалоговом окне Изображение-образец с помощью кнопки Обзор выбирается графический файл, определяется его смещение относительно верхнего

левого угла окна и прозрачность.

Вставка и редактирование макетных таблиц осуществляется с помощью панели

Макетные таблицы и ячейки области задач (рис.5.19), которою можно открыть командой

Таблица→Макетные таблицы и ячейки. Работая с этой панелью можно выполнять

следующие действия.

74

Рисунок 5.19 – Проектирование макетной таблицы

1

2

22

3

4

5

6 7

8

9

9

10

11

12

13

1415

16

17

1) Создать макетную таблицу.

Команда Вставить макетную таблицу (7) – вставляет на web-страницу макетную

таблицу фиксированного размера.

Команда Нарисовать макетную таблицу (8) – позволяет нарисовать макетную таблицу

нажатой левой кнопкой мыши.

Выбор в окне Макет таблицы (10) – вставляет на web-страницу макетную таблицу

выбранного типа.

Команда Вставить макетную ячейку… (11) - открывает диалоговое окно, в котором

задаются параметры ячейки. В результате создается таблица, содержащая макетную

ячейку.

Макетная таблица имеет информационные ярлыки на сторонах (9), щелчок левой

кнопкой мыши на ярлыке открывает диалоговое окно с командами позволяющими

изменить размер, установить авторастягивание (ширина или высота задаются в

процентах от размера окна), установить изображение-распорку столбца, для того, что бы

ширина столбца была не меньше определенной ширины. Размеры таблицы можно

менять нажатой левой кнопкой мыши на метки выделения.

2) Изменить свойства макетной таблицы.

Поля (12) Ширина:, Высота: служат для изменения размеров.

Кнопки (13) Выравнивание: определяют размещение макетной таблицы на странице.

3) Создать макетные ячейки внутри выделенной макетной таблицы.

Команда Нарисовать макетную ячейку (14) позволяет нарисовать ячейку в нужном

месте.

Выделенная ячейка имеет один ярлык (15) с указанием ее размеров. Изменение

размеров ячейки осуществляется нажатой левой кнопкой мыши за метки выбора.

Перемещение выделенной ячейки осуществляется либо клавишами направления (одно

нажатие – 1 пиксель) либо нажатой левой кнопкой мыши (для отмены скачкообразного

перемещения в 10 пикселей необходимо держать нажатой клавишу ALT).

При выделение макетной таблицы с нарисованными ячейками появляются

информационные ярлыки для каждой ячейки.

4) Форматировать выделенную макетную ячейку.

Команда Формат ячейки (16) открывает панель Формат ячейки в области задач, состоящей из трех разделов

(рис.5.20).

Свойства и границы ячейки (рис.5.21 a) – позволяет

определить: ширину и высоту ячейки; отступ содержимого от

75

Рисунок 5.20 – Панель Формат ячейки

границ (Поля:); выравнивание содержимого по вертикали; фоновый цвет; толщину, цвет

и формат границ; отступы сверху, снизу, справа, слева от других ячеек.

а) б) в)Рисунок 5.21 – Разделы форматирования макетной ячейки

Колонтитулы ячейки (рис.5.21 б) – позволяет задать параметры верхнего и нижнего

колонтитулов (высота, поля, фоновый цвет, ширина и цвет границы).

Углы и заливка ячейки (рис.5.21 в) – позволяет задать вид углов ячейки (стандартный

или рисунок, размеры, цвета фона и границ) и параметры тени отбрасываемой от нее

(размер, размытие, направление).

Заполнение отредактированной макетной таблице ни чем не отличается от

заполнения обычной таблицы. При этом могут быть использованы диалоговые окна

Свойства таблицы, Свойства ячейки. Кнопка Показать параметры макета (17

рис.5.19) на панели Макетные таблицы позволяет перевести макетную таблицу в

обычный режим и наоборот простую таблицу сделать макетной.

5.2. Графические изображения как объекты приложения.

Все графические изображения, внедряемые на web-страницу, должны быть

представлены в одном из трех форматов (gif, jpg, png), поддерживаемых всеми

браузерами.

FrontPage 2003 позволяет внедрять картинки из стандартной коллекции Microsoft

(Clip Art), графические файлы находящиеся на дисках компьютера, изображения из

других приложений через буфер обмена. Во всех этих случаях (за исключением, когда

76

изображение уже находится внутри корневой папки web-узла) при сохранении web-

страницы (команда Файл→Сохранить) со вставленной картинкой будет открываться

диалоговое окно Сохранение внедренных файлов (рис.5.22), которое служит для

выполнения следующих функций.

Создание копии

графического

изображения и

перемещения его в любую

папку (1) web-узла по

выбору пользователя

(кнопка (2) Сменить папку…). Это необходимо

для того, чтобы при

переносе всего web-узла

(копирование на CD-ROM

или другой компьютер, публикацию в Интернет) ссылка на внедренное изображение

оставалась рабочей. Данное действие можно отменить (кнопка (6) Действие…)

Изменение при необходимости формат файла изображения (кнопка (3) Тип графических файлов… ) и его имени (кнопка (4) Переименовать).

Если внедренных графических объектов несколько, то при сохранении их список (5)

отображается в окне Сохранение внедренных файлов, и вышеуказанные действия

проводятся либо сразу со всеми выделенными файлами, либо по очереди с каждым из

них. После выбора всех параметров нажимается кнопка OK.

После сохранения web-страницы с внедренными в нее графическими

изображениями, в окне Список папок данные графические файлы отображаются в той

папке, которая была выбрана на этапе сохранения. При необходимости их можно

переместить в любую другую папку web-узла.

5.2.1. Вставка графического и звукового фона на web-страницу.Графическое изображение может быть использовано в качестве фона для web-

страницы. Такое изображение повторяется в вертикальном и горизонтальном

направлении, заполняя все фоновое пространство.

Вставка графического фона осуществляется с помощью секции Фон вкладки

Форматирование диалогового окна Свойства страницы (рис.5.23), которое открывается

командой Формат→Фон.

77

Рисунок 5.22 – Диалоговое окноСохранение внедренных файлов

1

2 34

5

6

Флажок Фоновый рисунок (1) позволяет

указать графическое

изображение,

используемое в

качестве фона.

Флажок Сделать подложкой (3)

оставляет фоновое

изображение на экране

браузера неподвижным

при вертикальной и

горизонтальной прокрутке web-страницы.

Кнопка Свойства (4) позволяет изменить графический файл, который был выбран в

качестве фона. Нажатие на эту кнопку открывает диалоговое окно Свойства рисунка с

активными кнопками Тип графических файлов (изменение формата) и Изменить… (изменение параметров: яркость и контрастность, цветовой баланс, поворот и

отражение, удаление эффекта красных глаз, изменение размеров, сжатие с помощью

приложения Microsoft Office Picture Manager). Кнопка Обзор (2) позволяет найти фоновое изображение на дисках компьютера.

Нажатие этой кнопки открывает диалоговое окно Выбрать фоновый рисунок (рис.5.24), в котором необходимо найти и выделить нужный графический файл и нажать

на кнопку Открыть. Для упрощения поиска нужного файла в папке содержащей

большое количество графических изображений нужно выбрать из выпадающего меню

Представления команду Эскизы.

78

1

2

Рисунок 5.23 – Диалоговое окно Свойства страницы

34

Рисунок 5.24 – Диалоговое окно Выбрать фоновый рисунок

Представления

Кнопка ОК применяет выбранные параметры.

Графический фон имеет приоритет над однотонным фоном, заданным в секции

Цвет и только в том случае если в настройках браузера отменен показ рисунков будет

виден однотонный фон вместо графического.

Аналогичным образом можно задать фоновый звук, который будет

воспроизводиться при открытии web-страницы в браузере. FrontPage 2003 позволяет

внедрять звуковые файлы,

записанные в

форматах .mid, .wav, .ram, .r

a, .aif, .au, .snd, с помощью

вкладки Общие (рис.5.25)

диалогового окна Свойства страницы, которое

открывается или командой

Файл→Свойства… или

командой Формат→Фон. Кнопка Обзор (1) в секции

Фоновый звук позволяет

найти фоновое изображение на жестком диске компьютера

(диалоговое окно Фоновый звук).

Флажок Непрерывно (2) заставляет фоновый звук, повторятся

все время, пока открыта страница.

Окно счетчика Число повторов (3) служит для указания того,

сколько раз будет проигрываться звуковой файл.

Кнопка ОК применяет выбранные параметры.

5.2.2. Вставка рисунка на web-страницу.Для вставки графического изображения на web-страницу,

необходимо установит курсор в нужное место, а затем выполнить

одну из двух команд меню Вставка→Рисунок.

1) Команда Вставка→Рисунок→Картинки… открывает

панель Коллекция клипов (рис.5.26) в Области задач, с

помощью которой можно найти картинку из библиотеки рисунков

Office.

Выпадающие списки Просматривать (3) и Искать объекты (4)

79

Рисунок 5.25 – Вкладка Общие окна Свойства страницы

1

3 2

Рисунок 5.26 – Коллекция клипов

1 2

3

4

5

позволяют указать коллекции и типы файлов для поиска.

Поле Искать (1) служит для указания ключевых слов поиска (можно оставить пустым).

Кнопка Начать (2), нажатие который приводит к выполнению поиска указанных объектов

и отображения их на панели задач в области просмотра (5).

Для вставки выбранной картинки необходимо щелкнуть на нее левой кнопкой

мыши.

2) Команда Вставка→Рисунок→Из файла… открывает диалоговое окно Рисунок (рис.5.27), в котором необходимо найти на жестких дисках компьютера и выделить

нужный графический файл и нажать на кнопку Вставить. Для упрощения поиска нужного

файла в папке содержащей большое количество графических изображений нужно

выбрать из выпадающего меню Представления команду Эскизы.

Графическое изображение вставляется на место указанное курсором, и если не

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

параметрами абзаца (отступы, выравнивание и т.д.), которому оно принадлежит.

Для того чтобы редактировать изображение его необходимо выделить щелчком

левой кнопки мыши на него. Вокруг выделенного объекта появятся метки выбора,

представляющие собой 8 квадратиков.

5.2.3. Свойства графического изображения.Для того чтобы изменить свойства выделенного изображения нужно выполнить

команду Формат→Свойства или команду Свойства рисунка… из контекстного меню. В

результате откроется диалоговое окно Свойства рисунка.

80

Рисунок 5.27 – Диалоговое окно Рисунок

Представления

На вкладке Вид (рис.5.28)

можно изменять следующие

настройки изображения.

Секция Обтекание – отвечает за

выравнивание текста

относительно окружающих

объектов. Выбор параметра

слева (1) или справа (2)

размещает другие объекты web-

страницы вокруг графического

изображения. Маленькая

стрелка слева от абзаца

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

картинки, которая может быть

перемещена с помощью перетаскивания этой стрелки нажатой левой кнопкой мыши.

Обтекание выделенного изображения может быть задано без использования данного

диалогового окна, с помощью команд По левому краю, По правому краю панели

инструментов Форматирование. Для того чтобы прервать обтекание необходимо

выполнить команду Вставка→Разрыв→переключатель Очистить оба поля→OK. При

оформлении обтекания картинки текстом нужно помнить, что количество строк текста

вокруг картинки будет зависеть от ширины окна браузера.

Секция Положение. Выпадающее меню Выравнивание: (3) позволяет контролировать

расположение изображения по отношению к строкам текста, и используются для

картинок, высота которых меньше текстовой строки. Поле Толщина границ (4)

позволяет задать рамку определенной толщины вокруг изображения черного цвета.

Поля Интервал по горизонтали (5), Интервал по вертикали (6) указывают величину

свободного пространства между изображением и другими объектами в пикселях.

Секция Размер. Флажок Задать размер (7) разрешает изменение ширины (поле

Ширина: (8)) и высоты (поле Высота: (9)) графического изображения в пикселях

(переключатель в точках (10)) или процентах (переключатель в процентах (11))

относительно окна браузера. Флажок Сохранять пропорции (12) поддерживает

соотношение между высотой и шириной.

Изменение размеров выделенного изображения может быть задано без

использования данного диалогового окна, с помощью перемещения нажатой левой

кнопкой мыши меток выбора. Перемещение угловых меток выбора изменяет размеры

81

1 2

3

4

5

67 8 9

12 1011

Рисунок 5.28 – Вкладка Вид окна Свойства рисунка

изображения пропорционально, а перемещение меток выбора на сторонах будет менять

высоту или ширину картинки без сохранения пропорций.

При изменении размеров изображения

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

Действия с рисунками (1 рис.5.29). Щелкнув на

него можно: изменить параметры размера без

изменения самого файла изображения

(переключатель Изменить только атрибуты размера), или изменить сам графический файл

в соответствии с новыми размерами

(переключатель Изменить рисунок в соответствии с размером). При выборе второго варианта при сохранении web-страницы

графических файл будет перезаписан с помощью окна Сохранение внедренных файлов.

На вкладке Общие диалогового окна Свойства рисунка (рис.5.30) можно изменять

следующие настройки изображения.

Кнопка Обзор… (1) позволяет заменить выделенное изображение другим.

Кнопка Изменить… (2) запускает приложение Microsoft Office Picture Manager в

режиме Изменение выбранных рисунков для настройки выделенного изображения

(яркость и контрастность, цветовой баланс, поворот и отражение, удаление эффекта

красных глаз, изменение размеров, сжатие).

Кнопка Тип графических файлов (3) позволяет изменить формат выделенного

графического изображения.

Поле Низкое разрешение: (4) позволяет

с помощью кнопки Обзор выбрать

низкокачественный вариант

изображения малого объема, который

будет отображаться браузером до

полной загрузки web-страницы.

Поле Текст (5) позволяет задать

текстовое описание картинки, которое

будет появляться в браузере при

наведении на изображение указателя

мыши или будет появляться вместо

картинки, если браузер настроен на

82

Рисунок 5.29 – ЯрлыкДействия с рисунками

1

Рисунок 5.30 – Вкладка Общие окна Свойства рисунка

1 2

34

5

67

отображение web-страниц без показа графики.

Поле Длинное описание: (6) позволяет с помощью кнопки Обзор выбрать файл,

который будет содержать подробное описание изображения. Этот файл должен быть

импортирован в одну из папок web-сайта.

Секция Гиперссылка по умолчанию (7) позволяет настроить гиперссылку по

изображению.

5.2.4. Редактирование изображения.FrontPage 2003 позволяет редактировать выделенное изображение с помощью

панели инструментов Рисунки (рис.5.31). Данную панель можно увидеть щелкнув правой

кнопкой мыши на рисунок и выбрав команду Показать панель инструментов рисунков или выполнив команду Вид→Панели инструментов→Рисунки.

Команды этой панели позволяют производить следующие действия.

1 - Команда Добавить рисунок из файла. Открывает диалоговое окно Рисунок для

вставки нового изображения.

2 - Команда Текст. Создает текстовое окно на выделенном изображении, в которое

можете ввести текст и отформатировать его обычным образом. Размер текстового

окна и его расположение можно менять нажатой левой кнопкой мыши. Если формат

файла был не .gif, то перед созданием надписи будет выведено соответствующее

предупреждение.

3 - Команда Автоэскизы. Генерирует уменьшенную версию выделенного изображения,

которая будет использоваться в качестве ссылки на большое изображение. В

результате сохранения web-страницы данное изображение будет представлено

двумя файлами разных размеров.

4 - Команда Абсолютное. Фиксирует размещение изображения в любом месте вашей

страницы с помощью абсолютных координат относительно верхнего левого угла

окна браузера. В этом режиме можно перемещать картинку нажатой левой кнопкой

мыши на рамку позиционирования. При таком размещение, web-страницы будут по

разному выглядеть при разных размерах окна браузера или при разных разрешениях

экрана монитора.

5 - Команды Переместить вперед, Переместить назад. Размещают выделенное

83

1 2 3 45

86

Рисунок 5.31 – Панель инструментов Рисунки

79 1

011 1

213

14

15

17

16

изображение впереди или сзади других объектов. При этом позиционирование

картинки становится абсолютным.

6 - Команды Повернуть влево на 90о, Повернуть вправо на 90о, Отразить слева направо, Отразить сверху вниз вращают выделенное графическое изображение.

7 - Команды Увеличить контрастность, Уменьшить контрастность, Увеличить яркость, Уменьшить яркость – изменяют контрастность и яркость выделенного

изображения.

8 - Команда Обрезка - обрезает изображение на основании сделанных отметок. Выбор

команды создает метки обреза на изображении, которые можно перетаскивать

нажатой левой кнопкой мыши. Обрезка картинки выполняется повторным нажатием

на команду.

9 - Команда Тип линии. Устанавливает линию вокруг рисунка. Активна для рисованных

объектов.

10 - Команда Формат рисунка. Открывает диалоговое окно настройки параметров.

Активна для рисованных объектов.

11 - Команда Установить прозрачный цвет. Позволяет удалить один цвет из

изображения щелчком на него левой кнопкой мыши. Изображение при этом

преобразуется в формат .gif.

12 - Команда Цвет. Позволяет выбрать цветовую схему графического изображения.

13 - Команда Багетная рамка. Добавляет объемную рамку вокруг изображения.

14 - Команда Сокращение цветов. Уменьшает количество цветов в изображении.

15 - Команда Выбрать. Отменяет выбор инструментов, требующих дополнительных

параметров.

16 - Команды Гиперпрямоугольник, Гиперкруг, Гипермногоугольник и Выделить гиперобъекты позволяют создать карту изображения. Т.е. организовать

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

17 - Команда Восстановить. Отменяет несохраненные изменения, внесенные при

редактировании.

После применения большей части команд при сохранении web-страницы

графический файл будет перезаписан.

Для анимированных изображений большая часть команд недоступна.

5.2.5. Рисованные объекты.FrontPage 2003 позволяет рисовать простые изображения используя панель

инструментов Рисование. Открыть эту панель можно выполнив команду Вид→Панели

84

инструментов→Рисование или нажав кнопку Рисование на Стандартной панели инструментов.

Рисунки, созданные с помощью команд этой панели, сохраняются в скрытых

папках web-узла и в окне Список папок не отображаются. Возможно, что не все браузеры

будут корректно воспроизводить эти рисунки.

Панель инструментов Рисование (рис.5.32) имеет стандартный для Microsoft Office

вид и содержит следующие инструменты.

Меню Действия (1) содержит команды для группирования и размещения объектов.

Команда Выбор объектов (2) позволяет выбрать объекты для редактирования либо

щелчком на них левой кнопки мыши с нажатой клавишей Shift, либо обведя объекты

нажатой левой кнопкой мыши.

Меню Автофигуры (3) включает в себя набор готовых геометрических форм (Линии,

Основные фигуры, Фигурные стрелки, Блок-схемы, Звезды и ленты, Выноски, Другие

автофигуры… из коллекции Clip Art) для рисования нажатой левой кнопкой мыши.

Команды Линия (4), Стрелка (5), Прямоугольник (6), Овал (7), Надпись (8) позволяют

нарисовать соответствующие объекты нажатой левой кнопкой мыши.

Команда Добавить объект WordArt (10) позволяет c помощью диалоговых окон

Коллекция WordArt и Изменение текста WordArt создавать цветные объемные

надписи, формат которых можно менять с помощью панели инструментов WordArt (Вид→Панели инструментов→WordArt).

Команды Добавить картинку (10), Добавить рисунок из файла (11) позволяют

вставить картинку из коллекции Clip Art или графический файл с дисков компьютера.

Выпадающее меню Цвет заливки (12) предназначено для выбора вариантов заливки

(однотонная, градиентная, узорная, графическая) выделенных рисованных объектов.

Выпадающее меню Цвет линии (13) предназначено для выбора цвета и узора линий

выделенных рисованных объектов.

Команда Цвет текста (14) позволяет выбрать цвет текста.

Команды Тип линии (15), Тип штриха (16), Тип стрелки (17) позволяют

редактировать параметры (цвет, тип, толщина, узор) соответствующих форм.

Команды Стиль тени (18), Объем (19) позволяют задавать параметры тени (сдвиги,

цвет) и объема (поворот, глубина, направление, освещенность, поверхность, цвет)

выделенных рисованных объектов.

85

Рисунок 5.32 – Панель инструментов Рисование1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1718 19

Все рисованные объекты по умолчанию имеют абсолютное позиционирование и их

можно перемещать по странице нажатой левой кнопкой мыши. Для того чтобы

расположение таких рисунков не зависело от размера окна браузера и от разрешения

экрана монитора нужно отменить абсолютное позиционирование кнопкой Абсолютное панели инструментов Рисунки.

5.3. Гиперссылка в составе Web-сайта.

Гиперссылка предназначена для организации связи между web-страницами и их

фрагментами. Гиперссылка представляет собой выделенный фрагмент текста или

изображения, при наведение на который указатель мыши принимает форму кисти руки с

вытянутым пальцем.

При щелчке левой кнопкой мыши по гиперссылки происходит переход к тому

объекту, на который указывала гиперссылка. Гиперссылка может указывать на:

конкретное место текущей web-страницы;

другую web-страницу текущего сайта;

конкретное место web-страницы текущего сайта;

документ не являющейся web-страницей, который был импортирован в web-сайт;

любой Интернет-ресурс;

адрес электронной почты.

5.3.1. Создание гиперссылок и закладок на web-страницах.Для создания гиперссылки необходимо выполнить следующие действия.

1) Выделить объект, по которому будет организовываться гиперссылка. В качестве

объекта можно использовать текст в пределах одного абзаца или графическое

изображение.

2) Выполнить или команду Вставка→Гиперссылка… или команду Добавление гиперссылки на Стандартной панели инструментов.

В результате откроется диалоговое окно Добавление гиперссылки (рис.5.33), в

котором выбирается конечное назначение гиперссылки.

В поле Текст: (1) отображается либо тот текст, по которому организуется

гиперссылка, либо слова <<выделенный фрагмент документа>>, если гиперссылка

организуется по графическому изображению.

Кнопка Подсказка (2) позволяет в отдельном окне Подсказка для гиперссылки ввести тот текст, который будет появляться в браузере при наведении указателя мыши на

86

объект связанный гиперссылкой.

Кнопка Выбор рамки… (3) (диалоговое окно Конечная рамка) позволяет указать,

куда будет загружаться новый объект, на который указывала гиперссылка. По умолчанию

загрузка происходит в текущее окно браузера. Используется обычно при создании

гиперссылок внутри фреймовой (кадровой структуры). Для гиперссылок вне фреймовой

структуры можно выбрать опцию Новое окно, для того чтобы загрузка нового объекта

происходила в новом окне браузера.

Секция Папка предназначена для просмотра и выбора файлов и папок.

Представление текущая папка (4) отображает файлы и папки текущей папки.

Выпадающее меню 5 позволяет сменить текущую папку. Кнопка На один уровень вверх (6) – позволяет перейти к папке верхнего уровня. Кнопка Интернет (7) – открывает

браузер для просмотра web-сайтов, при возвращении в FrontPage 2003 (не закрывая

браузер) адрес последнего сайта автоматически заносится в строку Адрес (8). Кнопка

Поиск файла (9) – в отдельном окне показывает все файлы выделенной в поле 10 папки.

Представление просмотренные страницы (11) отображает в поле 10 список url-

адресов просмотренных за последнее время.

Представление последние файлы (12) отображает в поле 10 список файлов,

просмотренных за последнее время.

3) Определить конечное назначение гиперссылки. Для этого используется секция

Связать с:.

Возможны следующие режимы организации гиперссылки в FrontPage 2003.

а) Опция файлом, web-страницей (13). Гиперссылка организуется на web-страницу

87

Рисунок 5.33 – Диалоговое окно Добавление гиперссылки

5 6 7 910

8

1

2

3

4

11

12

1314

15

16

17

текущего web-узла или на любой другой документ лежащей в одной из его папок,

которые выбираются из списка в поле 10. Такие гиперссылки называются

внутренними. В том случае если нужно перейти на конкретное место выбранной web-

страницы необходимо воспользоваться кнопкой Закладка… (14) и в открывшемся

окне Выбор места в документе выбрать нужную закладку.

Не рекомендуется выбирать файлы для гиперссылки лежащие вне корневой папки

web-узла, т.к. в результате будет организовываться внешняя гиперссылка, которая

будет работать только в данной локальной структуре папок.

Для того чтобы документ был включен в структуру web-сайта необходимо до создания

гиперссылки выполнить команду Файл→Импорт и в открывшемся диалоговом окне с

помощью кнопок Добавить папку…, Добавить файл… сформировать список

импортируемых в web-сайт документов и нажать кнопку OK.

В этом же режиме организуются гиперссылки на другие сайты в Интернете. Для этого

нужно в строке Адрес: (8) указать url Интернет-ресурса.

б) Опция местом в документе (15). Гиперссылка организуется в конкретное место

текущей web-страницы. В поле 10 появляется список закладок имеющихся в

документе, из которых необходимо выбрать нужную. Процесс организации закладок

будет рассмотрен ниже.

в) Опция новым документом (16). Гиперссылка создается на новый документ, имя

которого указывается в поле Имя нового документа:. Вносить правку в новый

документ можно сразу же после организации гиперссылки (флажок сейчас) или же

можно остаться в режиме редактирования текущей web-страницы (флажок позже).

г) Опция электронной почтой (17). Гиперссылка создается на адрес электронной почты,

который указывается в поле Адрес эл. почты:. Как только в это поле начинается ввод

адреса перед ним появляются символы mailto:. В поле Тема: можно указать тему

электронного письма. Переход по такой гиперссылки в браузере, откроет почтовую

программу (например: Outlook Express), установленную на компьютере пользователя

для отправки электронных сообщений.

4) Нажать кнопку OK, после выбора конечного

назначения гиперссылки.

Для удаления существующей гиперссылки

необходимо выделить объект с гиперссылкой,

выполнить команду Вставка→Гиперссылка и

нажать кнопку Удалить ссылку.

Для того чтобы создать внутри web-страницы

88

Рисунок 5.34 – Диалоговое окно Закладка

1

2

43

закладку необходимо выполнить следующие действия.

1) Установить курсор в то место где должна быть закладка или выделить тот

объект, который должен быть закладкой.

2) Выполнить команду Вставка→Закладка и в открывшемся диалоговом окне

Закладка (рис.5.34), ввести в поле Имя закладки: (1) имя закладки.

3) Нажать кнопку OK.

Если закладка создавалась на пустом месте, то в режиме Конструктор на этом

месте будет отображаться маленькая картинка (синий флажок на сером поле)

подчеркнутая пунктиром. Если закладка создавалась по тексту, то он в режиме

Конструктора будет подчеркнут пунктиром. При просмотре web-страницы в браузере этих

элементов (флажок, пунктир) видно не будет.

Для удаления закладки нужно выделить объект содержащий закладку, выполнить

команду Вставка→Закладка и в диалоговом окне Закладка нажать кнопку Очистить (2).

Если выделить одну из закладок из списка 3, то кнопка Перейти (4), делает данную

закладку активной.

5.3.2. Создание горячих точек графического изображения.В том случае если отдельные части графического изображения должны

представлять собой гиперссылки на разные целевые документы используются команды

(16) Гиперпрямоугольник, Гиперкруг, Гипермногоугольник и Выделить гиперобъекты панели инструментов Рисунки (рис.5.31).

Для создания таких гиперссылок необходимо выполнить следующие действия.

1) Выделить графическое изображение.

2) Выбрать на панели инструментов Рисунки одну из команд

Гиперпрямоугольник, Гиперкруг, Гипермногоугольник.

3) Навести указатель мыши на графическое изображения, и нарисовать на нем

область (рис.5.35), которая будет являться горячей точкой.

Если выбрана команда Гиперпрямоугольник, то

прямоугольная область (1) рисуется нажатой левой кнопкой

мыши от одного угла прямоугольника к противоположному.

Если выбрана команда Гиперкруг, то область круга (2)

рисуется нажатой левой кнопкой мыши от центра.

Если выбрана команда Гипермногоугольник, то

многоугольная область (3) рисуется поэтапно. Щелчком левой

кнопки мыши фиксируется первый угол, перемещается

89

Рисунок 5.35 – Области гиперссылок

1

2

3

указатель мыши, фиксируется второй угол и т.д. Двойной щелчок левой кнопкой мыши по

первой точки завершает рисование многоугольника.

4) Завершить рисование области, в открывшемся диалоговом окне Добавление гиперссылки, выбрать конечный объект для гиперссылки и нажать кнопку ОК.

5) При необходимости отредактировать область гиперссылки, выделив границы

области можно нажатой левой кнопкой мыши перемещать ее или менять положение

угловых точек.

Команда Выделить гиперобъекты на панели инструментов Рисунки позволяет

увидеть области горячих точек на белом фоне, для удобства их редактирования.

5.3.3. Контроль гиперссылок средствами FrontPage 2003.

FrontPage 2003 позволяет отслеживать гиперссылки по всем страницам web-сайта.

Для того чтобы воспользоваться этой возможностью необходимо сохранить все

web-страницы, выполнить команду Сервис→Пересчитать гиперссылки и в окне

Обновление гиперссылок нажать на Да.

После выполнения этой команды необходимо перейти к представлению web-узел на панели представлений. Существуют следующие возможности для проверки

гиперссылок.

В режиме Гиперссылки (рис.5.36)

можно увидеть схему гиперссылок для

выделенной на панели Список папок web-

страницы. Все рабочие гиперссылки

представлены стрелками (1), если

гиперссылка не рабочая она представлена

разорванной (2) стрелкой.

В режиме Отчеты на информационной панели представления необходимо выбрать

команду Сводка веб-узла. В списке

имеющихся

отчетов можно

выбрать один из

отчетов

относящихся к

гиперссылкам.

Для каждой

90

Рисунок 5.36 – Режим Гиперссылки

1

12

Рисунок 5.37 – Отчет Гиперссылки

1 2

гиперссылки представленной в отчете (рис.5.37) даны ее характеристики, по которым

можно увидеть наличие ошибок. Исправление ошибок может быть произведено

непосредственно со страницы отчетов с помощью команд информационной панели

представления Изменить гиперссылку (1) и Проверка гиперссылок текущего web-узла (2).

5.3.4. Общие границы.Часто гиперссылки на основные разделы сайта располагают на каждой web-

страницы. Для того чтобы не редактировать список гиперссылок отдельно на каждой web-

страницы, FrontPage 2003 позволяет создавать общие области для всего web-сайта,

редактирование которых выполняется один раз на любой из страниц. В общей области

могут быть размещены не только гиперссылки, но и любая информация, которая

повторяется из страницы в страницу. Чтобы создать общие области необходимо

выполнить следующие действия.

1) На любой web-странице выполнить команду Формат→Общие границы….

2) В открывшемся диалоговом окне Общие границы (1 рис.5.38) установить

параметры общей области.

Применить установки ко всем web-страницам (переключатель ко всем страницам).

Установить флажки Сверху, Слева, Справа, Снизу в зависимости от того в какой части

web-страницы нужны общие

области.

Используя кнопку Свойства границы… в диалоговом окне

Свойства страницы (2 рис.

5.38) установить фон для

каждой общей области

(выпадающее меню Граница:) либо однотонный (флажок

Цвет:) либо из графического

файла (флажок Рисунок: кнопка Обзор).

3) Нажать кнопку OK.

Для редактирования

содержимого общей области нужно (на любой странице) нажать на нее левой кнопкой

мыши, внести необходимые изменения и нажать левой кнопкой мыши за ее пределами.

91

12

Рисунок 5.38 – Создание общих областей

При первом сохранении web-страницы с общей областью на панели Список файлов появляется новая папка _borders, в которой находится вся информация,

связанная с общими областями. Для удаления общей области с отдельной web-

страницы нужно: открыть ее для редактирования, выполнить команду Формат→Общие границы…, установить переключатель к выбранным страницам, убрать флажок

ненужной общей границы и нажать кнопку OK.

5.4. Каскадные таблицы стилей (CSS).

Каскадные таблицы стилей CSS (Cascading Style Sheets) предназначены для

определения внешнего вида web-страниц и предоставляют возможность воздействовать

на выбор шрифта, параметры форматирования текста, установку фонового цвета,

ширину полей и т.д. Т.е. CSS представляет собой средство разделения логической

структуры документа и формы его представления. Логическая структура документа

определяется элементами HTML-разметки, в то время как форма представления каждого

из этих элементов задается CSS-описателем элемента.

Применение CSS состоит из двух этапов.

1) Определение стиля. Стиль – это набор каких-либо свойств. Например, к таким

свойствам может относиться: выбранный шрифт, цвет, размер и т.д. В CSS стиль

называется селектором.

2) Применение стиля к объектам. В зависимости от выбранного подхода стиль может

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

вручную. В CSS выражение, которое применяется к одному или нескольким стилям,

называют правилами CSS.

Наиболее распространенными селекторами являются:

Селекторы тегов. Названия селекторов тегов совпадают с названиями тегов html: p –

для абзацев, H1 – для заголовков 1-го уровня, a – для ссылок и т.д. Применение правил

к данным селекторам приводит к тому, что автоматически изменяется облик тех

элементов страницы, которые зависят от соответствующих тегов.

Селекторы классов. В случае применения селектора данного типа необходимо вручную

указать объекты, к которым будет применен данный селектор.

Существует три метода добавления таблиц стилей на web-страницу.

4) Использование внутренних стилей для определения стилей непосредственно в том

или ином элементе.

5) Использование внедренных таблиц стилей для определения стилей в начале web-

92

страницы. При этом правила будут применяться только к элементам данного

документа.

6) Использование внешних таблиц стилей для определения стилей отдельно в другом

документе. Является наиболее рациональным способом с точки зрения разработки

web-сайта и его сопровождения. При необходимости можно вносить нужные

изменения в файлы описаний, и внешний вид документов web-сайта соответственно

будет изменяться при отображении браузером.

5.4.1. Внутренние стили.Внутренние стили CSS применяются в приложении FrontPage 2003 автоматически

при использовании кнопок

Стиль…→Формат в

различных диалоговых

окнах (например: Свойства рисунка, Свойства таблицы, Свойства ячейки, Список, Разрыв (рис.5.39), Свойства горизонтальной линии)

или при работе с

некоторыми полями

некоторых диалоговых окон

(такими как: Шрифт вкладка

Межзнаковый интервал,

Границы и заливка). Т.е. каждый объект настраивается индивидуально.

5.4.2. Внедренные стили.Для определения стилей в начале web-страницы используется команда

Формат→Стиль….

В появившемся диалоговом окне Стиль (рис.5.40) можно создать описание для

селекторов тэгов и селекторов классов. В списке Стили: (1) отображается список или

тэгов html или селекторов созданных пользователем, в зависимости от выбора в

выпадающем меню Список: (2). При выборе любого из селекторов в окнах Абзац (3) и

Знаки (4) отображается, как будет выглядеть объект, к которому будет применен стиль, а

в окне Описание (5) выводится текстовое описание атрибутов данного стиля.

93

Рисунок 5.39 – Настройка внутренних стилей

Рисунок N.40 – Диалоговое окно Стиль

Кнопка Удалить… (6)

позволяет удалить

выделенный селектор из

списка Пользовательские стили. Нажатие на кнопку

Создать... (7) открывает

диалоговое окно Создание стиля, в котором создаются

новые селекторы. Нажатие

на кнопку Изменить… (8)

открывает диалоговое окно

Изменение стиля, которое

полностью совпадает с окном Создание стиля и служит для изменения описания

выделенного селектора. В случае изменения стиля для тэга из списка Тэги HTML, этот

селектор тэга переносится в список Пользовательские стили.

При работе с диалоговым окном

Изменение (Создание) стиля (рис.5.41)

используются следующие поля и кнопки.

В поле Имя (для выбора) (1): вводится

имя селектора (имя селектора тега

должно совпадать с именем самого тега; имя

селектора класса начинается с точки (.).

Кнопка Формат (2) позволяет получить

доступ к выпадающему списку, в котором

можно выбрать следующие пункты:

Шрифт… – открывает диалоговое

окно Шрифт, позволяющее сделать

стилевые настройки шрифта.

Абзац… – открывает диалоговое окно Абзац, которое позволяет установить

абзацные отступы (слева и справа) от окна браузера, отступ для первой строки,

настроить интервалы между строками и абзацами, настроить интервалы между

словами в абзацах;

Граница… – открывает диалоговое окно Границы и заливка, с помощью которого

можно установить границу для выделенного абзаца, залить абзац каким-либо

94

Рисунок 5.41 – Окно Изменение стиля

1

2

3

4

5

1 3

4

5

27 68

Рисунок 5.40 – Диалоговое окно Стиль

цветом;

Нумерация… – открывает диалоговое окно Список, с помощью которого можно

создать нумерованные, маркированные и другие списки;

Положение… – открывает диалоговое окно Положение, с помощью которого

можно точно разместить различные элементы на странице.

Поле Образец (3) показывает, как будет выглядеть объект, к которому будет применен

созданный стиль.

В поле Описание (4) выводится текстовое описание атрибутов данного стиля.

Выпадающее меню Тип стиля (5) активно в случае создания селектора класса. При

выборе типа Знак, в начало имени селектора добавляется слово span.

К выделенным объектам селекторы применяются по-разному:

селекторы тегов применяются автоматически после выбора

соответствующих команд;

селекторы классов применяются:

путем выбора их из числа прочих стилей в выпадающем

списке Стиль (рис.5.42) на панели инструментов

Форматирование;

путем выбора из выпадающего окна Класс: диалогового

окна Изменение стиля (рис.5.43), которое открывается

кнопкой Стиль… из различных

диалоговых окнах (например:

Свойства рисунка, Свойства таблицы, Свойства ячейки,

Список, Разрыв, Свойства горизонтальной линии).

При использовании

внедренных таблиц стилей их

необходимо настраивать для каждой

web-страницы.

5.4.3. Внешние таблицы стилей.

В этом случае для определения стилей CSS отводится отдельный файл, на

который будут ссылаться web-страницы. Такой подход:

обеспечивается централизованное управление стилями CSS на всех web-страницах

95

Рисунок 5.42 – Список стилей

Рисунок 5.43 – Окно Изменение стиля

(внесенные изменения будут автоматически применяться сразу на всех web-страницах,

которые ссылаются на файл, содержащий CSS);

уменьшается суммарный размер web-сайта;

увеличивается скорость загрузки web-страниц.

Для создания внешнего файла, содержащего каскадные таблицы стилей

необходимо выполнить следующие действия (рис.5.44).

Выполнить команду Файл→Создать и выбрать команду Другие шаблоны страниц… (1) из области задач Создание.

В открывшемся диалоговом окне Шаблоны страниц, выбрать вкладку Таблицы стилей (2), на которой показаны шаблоны таблиц стилей, входящие в состав FrontPage

2003.

Для самостоятельного создания таблицы стилей выбрать шаблон Обычная таблица стилей (3) и щелкнуть по кнопке OK.

Полученную страницу с расширением .css необходимо сохранить (команда

Файл→Сохранить) в одну из папок web-сайта с именем заданным обязательно

латинскими буквами и расширением .css.

Создать описание для селекторов тэгов и селекторов классов, используя команду

Формат→Стиль…, которая открывает диалоговое окно Стиль (рис.5.40), описанное в

предыдущем разделе.

Созданную таблицу стилей нужно связать со страницами web-сайта. Для этого

необходимо.

Выполнить команду Формат→Связи с таблицами стилей… .

96

Рисунок 5.44 – Создание внешнего файла стилей

1

2

3

В открывшемся диалоговом окне Связать с таблицей стилей (рис. 5.45) можно установить

следующие параметры:

переключатель все страницы (1) применяет

стили ко всем выделенным страницам web-сайта;

переключатель выделенные страницы (2)

применяет стили к текущей странице или к web-

страницам, выделенным на панели Список папок;

кнопка Добавить… (3) служит для добавления

файла, содержащего каскадные таблицы стилей;

кнопка Удалить (4) служит для удаления файла,

содержащего каскадные таблицы стилей, из списка используемых таблиц стилей;

кнопки Вниз (5), Вверх (6) позволяют регулировать порядок присоединения файлов

с таблицами каскадных стилей к web-страницам (если используется несколько

таблиц каскадных стилей);

кнопка Изменить (7) открывает выделенный в окне Адрес URL: (8) css-файл для

редактирования.

Нажать кнопку OK.

К выделенным объектам селекторы применяются по-разному:

селекторы тегов применяются автоматически после выбора соответствующих команд;

селекторы классов применяются:

путем выбора их из числа прочих стилей в выпадающем списке Стиль (рис.5.42) на

панели инструментов Форматирование:

путем выбора из выпадающего окна Класс: диалогового окна Изменение стиля (рис.5.43), которое открывается кнопкой Стиль… из различных диалоговых окнах

(например: Свойства рисунка, Свойства таблицы, Свойства ячейки, Список,

Разрыв, Свойства горизонтальной линии).

5.5. Фреймы (кадры) в приложении FrontPage 2003.

Фреймы - средство для разделения окна браузера на несколько областей

(фреймов), в каждой из которых отображается содержимое отдельной web-страницы.

Каждая область может иметь свои полосы прокрутки и ее просмотр с помощью них, не

влияет на остальные области. С помощью программы FrontPage 2003 можно создавать

различные фреймовые структуры, вставлять встроенные фреймы и в зависимости от

97

Рисунок 5.45 – Диалоговое окно Связать с таблицей стилей

21 3

4

5

6

7

8

характера представляемой информации организовывать соответствующие гиперссылки.

Все команды связанные с фреймовой структурой переведены со словом рамки.

Для организации фреймовой структуры необходимо (рис.5.46).

Выполнить команду Файл→Создать и выбрать команду Другие шаблоны страниц… (1) из области задач Создание.

В открывшемся диалоговом окне Шаблоны страниц, выбрать вкладку Страница рамок (2), на которой показаны шаблоны (3) web-страниц c фреймовой структурой,

входящие в состав MS FrontPage 2003.

Выделить наиболее подходящий шаблон и нажать кнопку "OK".

Окно новой web-страницы фреймов (рис.5.47) будет разбито на части в соответствии с

выбранной структурой. Эту страницу необходимо сохранить (Файл→Сохранить) в одну

из папок web-узла с именем (1) заданным обязательно латинскими буквами.

98

Рисунок 5.46 – Создание страницы фреймов

1

2

3

Рисунок 5.47 – Новая web-страница фреймов

1

2 3

4

Далее необходимо определиться с начальными страницами фреймовой структуры,

т.е. с теми которые будут видны при открытии страницы фреймов. Это можно сделать

двумя способами.

1) Кнопка Задать начальную страницу… (2) позволяет выбрать уже готовую web-

страницу сайта в окне Добавление гиперссылки.

2) Кнопка Создать страницу (3) загружает во фрейм новую пустую web-страницу,

редактирование которой может быть выполнено обычным образом.

Если часть фреймов заполняется с помощью кнопки Создать страницу, то при

сохранении страницы фреймов (Файл→Сохранить) отдельно сохраняется каждая новая

web-страница (имена задаются обязательно латинскими буквами).

При работе со страницей фреймов на панели кнопок представления появляется

еще одна кнопка Без рамок (4). В этом режиме редактируется содержимое, которое

будет отображаться в браузере, если он не поддерживает показ фреймов.

Работа над web-страницами входящими во фреймовую структуру возможна как по

отдельности, так и через страницу фреймов

Для выбора одного из фреймов нужно нажать на него левой кнопкой мыши.

Активный фрейм отличается от прочих цветной рамкой (5). Если нажать левой кнопкой

мыши на внешнюю рамку страницы фреймов, то выделенной окажется вся фреймовая

структура. Границы фреймов можно перемещать нажатой левой кнопкой мыши.

Для работы с выделенным фреймом можно воспользоваться командами меню

Рамки.

Команда Разделить рамку позволяет разбить фрейм на две части по вертикали или

горизонтали.

Команда Удалить рамку удаляет фрейм из страницы фреймов. При этом если web-

страница загружаемая в этот фрейм была сохранена ранее, она остается в структуре

web-сайта.

Команда Открыть страницу в новом окне открывает web-страницу фрейма для

редактирования отдельно от фреймовой структуры.

Команды Сохранить страницу, Сохранить страницу как… позволяют сохранить данную web-страницу

отдельно от остальных страниц фреймов.

Команда Свойство рамки… открывает диалоговое окно

Свойства рамки, в котором можно задать различные

параметры фрейма: имя, описание, размеры, ширина и

отображение границ, свойства полос прокрутки, отступы.

99

Рисунок 5.48 – Встроенный фрейм

Еще один вариант использования фреймов – вставка в обычную web-страницу

встроенного фрейма (рамки) (рис.5.48) командой Вставка→Встроенная рамка. В

результате в том месте, где был установлен курсор, вставляется рамка, которую можно

заполнить двумя способами: Задать начальную страницу… или Создать страницу.

Щелчок левой кнопкой мыши на границу рамки, выделяет фрейм для изменения его

размеров. Двойной щелчок левой кнопкой мыши на границу рамки открывает диалоговое

окно Свойства встроенной рамки, в котором можно задавать различные параметры

фрейма: имя фрейма, название, размеры, отступы, выравнивание, замещающий текст.

При организации

гиперссылок между web-

страницами фреймовой

структуры необходимо с

помощью кнопки Выбор рамки… (1) в окне

Добавление гиперссылки открыть диалоговое окно

Конечная рамка (рис.5.49)

и указать, куда будет

загружаться новый объект.

Поле Текущая страница рамок (2) позволяет щелчком левой кнопки мыши выбрать фрейм для загрузки нового

объекта. В списке Общие объекты (3) возможен выбор следующих вариантов: Страница по умолчанию (загрузка в тот фрейм, который определен по умолчанию), Та же рамка (загрузка в тот же фрейм, откуда организовывалась гиперссылка), Страница целиком (загрузка в то же окно с удалением фреймовой структуры), Новое окно (загрузка в новое

окно браузера), Родительская рамка (загрузка в старший родительский фрейм), Имена встроенных фреймов (I1) (загрузка во встроенную рамку).

5.6. Формы в приложении FrontPage 2003.

Формы позволяют организовать на web-страницы текстовые поля, переключатели,

флажки, кнопки и многие другие элементы управления. При отправке пользователем

заполненной формы в браузере значения всех полей формы, отправляются обработчику

формы. Обработчик формы - программа на web-сервере, которая выполняется при

отправке формы посетителем узла.

100

Рисунок 5.49 – Диалоговое окно Конечная рамка

1

2

В приложении FrontPage 2003 поддерживаются различные обработчики форм,

располагаемые на web-серверах, работающих под управлением FrontPage Server

Extensions (серверные расширения Microsoft FrontPage - набор программ и сценариев,

поддерживающих создание страниц в Microsoft FrontPage и расширяющих

функциональные возможности веб-сервера), SharePoint Team Services версия 1.0

(Microsoft) или Microsoft Windows SharePoint Services 2.0. Эти обработчики принимают

результаты форм и производят над ними различные действия. В приложении FrontPage

поддерживаются также сценарии, например ISAPI, NSAPI, CGI и ASP.

Если web-сайт будет опубликован на каком-либо другом web-сервере, то

обработчики форм необходимо разрабатывать самостоятельно с использованием языков

программирования.

Существуют три способа создания формы в MS FrontPage 2003.

1) Добавление пустой формы с кнопками Отправить и Сброс, командой

Вставка→Форма→Форма.

2) Вставка первого поля формы командой Вставка→Форма→Поле формы. Область

формы с кнопками Отправить и Сброс добавляется автоматически.

3) Выбор и использование доступного шаблона формы или мастера страницы форм с

помощью следующих действий.

В области задач Создание страницы (команда Файл→Создать) нужно выбрать

команду Другие шаблоны страниц… и вкладку Общие.

Выбор одного из шаблонов Гостевая книга, Регистрационная форма, Страница поиска, Форма обратной связи позволяет создать новую web-страницу с типовой

формой.

Выбор шаблона Мастер страницы формы запускает мастер страницы формы для

определения количества, типа, содержания элементов формы.

Область формы отображается в пунктирной рамке, которая видна только в режиме

Конструктор.

Для задания свойств формы нужно установит курсор внутри формы, и выполнить

команду Вставка→Форма→Свойства формы… или щелкнуть правой кнопкой мыши в

область формы и выбрать команду контекстного меню Свойства формы…. В результате

открывается диалоговое окно Свойства формы (1 рис.5.50), в котором устанавливаются

различные параметры формы.

Секция Сохранение результатов (2) определяет конечный сценарий обработки данных

формы. В случае использования собственных сценариев необходимо установить

переключатель в другом месте (3) и из списка выбрать Настраиваемый сценарий….

101

Поле Имя формы: (4) служит

для указания имени формы.

Кнопка Конечная рамка открывает диалоговое окно

Конечная рамка, в котором

можно выбрать окно, из

которого будет делаться

запрос.

Кнопка Параметры… (6)

открывает диалоговое окно

Параметры обработчика форм (7). В поле Действие: (8) указывается имя скрипта для обработки формы или mailto:e-mail для отправки

данных формы на адрес электронной почты e-mail. В поле Метод: (9) выбирается

способ передачи данных (GET способ передачи данных через адресную строку, POST –

способ передачи данных в теле HTTP запроса). В поле Тип кодировки: (10)

указывается тип кодировки данных формы при отправке на web-сервер. Возможные

типы кодировок: application/x-www-form-urlencoded - данные формы кодируются как

пары имени и значения, используется по умолчанию; multipart/form-data - данные формы

кодируются как сообщение с отдельными частями для каждого элемента управления на

странице, используется для отправки форм, содержащих файлы; text/plain – данные

формы кодируются как открытый текст, без управляющих и форматирующих символов,

используется для отправки данных на адрес электронной почты.

Кнопка Дополнительно… (11) открывает окно Дополнительные свойства формы для редактирования скрытых полей формы (кнопки Добавить…, Изменить…,

Удалить).

Чтобы добавить в форму поле формы, нужно выполнить команду Вставка→Форма и выбрать нужное поле формы из списка. Для изменения размера поля необходимо

выделить его и потянуть нажатой левой кнопкой мыши за одну из сторон. Параметры любого поля формы устанавливаются в диалоговом окне, которое можно открыть

двойным щелчком левой кнопки мыши на поле. Поле Последовательность перехода определяет последовательность заполнения полей формы в браузере. Кнопку

Проверить… в этом окне можно использовать только в том случае если используется

стандартный обработчики форм FrontPage 2003. Кнопка Стиль… этого окна позволяет

изменить шрифт и цветовое оформление поля. Можно вставить следующие поля формы

102

Рисунок 5.50 – Настройка параметров формы

1

2

3

45

6

78

9

10

11

(рис.5.51).

Поле (1) – однострочное

текстовое поле, которое

применяется для ввода короткого

сообщения, например имен и

фамилий или адресов

электронной почты. Параметры

поля (имя, начальное значение,

ширина в знаках)

устанавливаются в диалоговом

окне Свойства текстового поля.

Текстовое поле (2) -

используются для ввода одной или нескольких строк текста, например комментария.

Это поле прокручивается, что позволяет вводить в него тексты разного объема.

Параметры поля (имя, начальное значение, ширина в знаках, число строк)

устанавливаются в диалоговом окне Свойства текстового поля.

Поле отправки файла (3) – служит для отправки файла на web-сервер в указанную

папку web-сайта, состоит из поля для ввода имени файла и кнопки обзор, которая

позволяет открыть диалоговое окно Выбор файла. Параметры поля (имя, ширина в

знаках) устанавливаются в диалоговом окне Свойства поля отправки файла.

Флажок (4) – служит для организации выбора элемента, пользователь может

установить или снять флажок по своему усмотрению. Параметры поля (имя, значение,

начальное состояние) устанавливаются в диалоговом окне Свойства флажка.

Переключатель (5) – служит для организации выбора из списка, в котором можно

выбрать только одно значения (несколько полей переключатель с одним и тем же

именем группы). Параметры поля (имя, значение, начальное состояние)

устанавливаются в диалоговом окне Свойства переключателя.

Раскрывающийся список (6) – служит для организации выбора из раскрывающегося

списка одного или нескольких вариантов. Заполнение поля (кнопки Добавить…,

Изменить…, Удалить, Вверх, Вниз) и его параметры (имя, высота в строках,

разрешение выбора нескольких элементов) устанавливаются в диалоговом окне

Свойства раскрывающегося списка. При заполнение поля (кнопки Добавить…,

Изменить…) открывается дополнительное диалоговое окно Добавление или

Изменение варианта. В этом окне задается название варианта (поле Вариант:), значение, которое будет передано при отправке формы в случае выбора этого варианта

103

Рисунок 5.51 – Поля формы

1 2

3 4

5 6

7 89 10

11

(поле Значение:), начальное состояние.

Кнопка (7) – позволяет вставить кнопку для отправки данных формы (тип Submit) или

для удаления данных из полей формы (тип Reset). Параметры кнопки (имя, подпись,

тип) устанавливаются в диалоговом окне Свойства кнопки.

Расширенная кнопка (8) – позволяет вставить кнопку аналогичную обычной (Кнопка).

Отличие состоит в том, что размер кнопки и надпись на ней можно изменять, не

пользуясь диалоговым окном Свойства расширенной кнопки.

Рисунок… (9) – служит для выбора рисунка, который будет иметь те же свойства что и

кнопка Отправить.

Надпись (10) – служит для создания надписи связанной с каким-либо полем формы.

Для организации такой надписи необходимо выделить поле формы и текст, далее

выполнить команду для вставки надписи. В результате будет установлена связь между

полем формы и текстовой надписью, которая будет обведена серой штриховой линией.

Группа (11) – служит для создания видимой рамки с подписью, которую можно

использовать для группировки полей формы по разделам. Параметры группы (надпись,

выравнивание) устанавливаются в диалоговом окне Свойства группы.

Внутри формы кроме полей формы можно вставлять любые объекты (текст,

таблицы, рисунки) для улучшения внешнего вида web-страницы.

5.7. Компоненты приложения FrontPage 2003 и их краткая характеристика.

Компоненты FrontPage 2003 представляют собой различные готовые скрипты

(программы), расширяющие функциональные возможности web-сайта. Для корректной

работы большинства компонентов на web-сервере, где будет размещаться web-сайт,

должны быть установлены серверные расширения Microsoft FrontPage.

Для вставки любого компонента FrontPage 2003 необходимо выполнить следующие

действия.

Установить курсор на том месте web-страницы, где должен быть вставлен компонент.

Выполнить команду Вставка→Веб-компонент….

В открывшемся диалоговом окне выбрать тип компонента в списке Тип компонента: и

сам компонент или вариант компонента в правом окне Выберите …:. Нажать кнопку Готово и далее ввести специфическую информацию для каждого

компонента в соответствующих диалоговых окнах.

Далее более подробно будут рассмотрены только те компоненты, работа которых

не зависит от серверных расширений Microsoft FrontPage.

104

1) Динамические эффекты. Основаны на небольших Html- и Java-программах,

которые создаются непосредственно в папках web-сайта. Для их работы серверные

расширения FrontPage не требуются. Включают в свой состав бегущую строку и

интерактивную кнопку.

Бегущая строка. В диалоговом

окне Свойства бегущей строки (рис.5.52) задаются параметры текста,

который будет определенным образом

автоматически прокручиваться в

горизонтальном направлении. В поле

Текст: задается текст бегущей строки,

секция Направление определяет

направление прокрутки, секция

Скорость – скорость прокрутки, секция

Поведение – способ прокрутки

(прокрутка – непрерывная круговая

прокрутка, сдвиг – перемещение и остановка у края, попеременно – перемещение от

одной стороны к другой), секция Размер – размеры бегущей строки, секция Повторы –

количество прокруток, выпадающее меню Цвет фона: – определение фона бегущей

строки. Параметры бегущего текста задаются с помощью кнопки Стиль…. Для изменения

свойств бегущей строки необходимо сделать двойной щелчок левой кнопкой мыши на

область бегущей строки. Для того чтобы уже имеющеюся текстовую строку сделать

бегущей, ее нужно выделить и выполнить команду для вставки данного компонента.

Интерактивная кнопка. В диалоговом окне Меняющиеся кнопки выбирается

кнопка (из предложенного списка), которая будет меняться при наведении на нее

указателя мыши. Вкладка Кнопка определяет вид кнопки, текст на ней и параметры

гиперссылки, вкладка Шрифт определяет параметры надписи, вкладка Рисунок определяет размеры, количество и форматы изображений кнопки. Для изменения свойств

кнопки необходимо сделать двойной щелчок левой кнопкой мыши на нее.

2) Поиск в Интернет. Создает форму для поиска информации по текущему веб-

узлу. Для работы требуются серверные расширения Front Page.

3) Электронные таблицы и диаграммы. Позволяет включать на web-страницы

Электронные таблицы Office, Диаграммы Office и Сводные таблицы Office, которые

можно редактировать непосредственно в приложении. Для их работы требуются

серверные расширения FrontPage, и версия браузера Internet Explorer начиная с 5.01. При

105

Рисунок 5.52 – Диалоговое окноСвойства бегущей строки

наличии соответствующей версии браузера возможно

частичное отображение таблиц и диаграмм.

Электронные таблицы Office. Вставляется

электронная таблица (рис.5.53), в которой можно

осуществлять расчеты по формулам в окне браузера.

Двойной щелчок левой кнопкой мыши на границе

таблицы открывает диалоговое окно Свойства: Элемент ActiveX, в котором задаются различные параметры компонента.

Диаграмма Office. В диалоговом окне Команды и параметры выбирается источник

и диапазон данных, по которым будет строиться диаграмма (рис.5.54). В качестве

источника может выступать созданная ранее электронная таблица или лист данных,

который редактируется непосредственно при работе с диаграммой. В первом случае при

просмотре web-страницы в браузере при изменении данных в таблице будет изменяться

и диаграмма. Двойной щелчок левой кнопкой мыши на границе диаграммы открывает

диалоговое окно Свойства: Элемент ActiveX, в котором задаются различные параметры

(границы, заливка, настройка заголовка, легенды и т.д.).

4) Счетчик посещений. Показывает, сколько раз данная страница посещалась

пользователями. Можно использовать разнообразные стили и свойства при размещении

счетчика. Для функционирования счетчика необходимы серверные расширения

FrontPage.

5) Коллекция фотографий. Генерирует элемент JavaScript, который

располагается в отдельной папке web-сайта и позволяет демонстрировать графические

изображения, организованные в табличном порядке. После выбора в правом окне типа

фотогалереи, появляется диалоговое окно Свойства коллекции фотографий (рис.5.54),

в котором указываются изображения (1) входящие в галерею и их параметры. На вкладке

Рисунки кнопка Добавить (2) позволяет добавить изображение в коллекцию, секция

Размер эскиза: (3) определяет размер уменьшенных изображений, кнопки Вверх, Вниз

106

Рисунок 5.54 – Построение диаграммы Office

Рисунок 5.53 – Электронная таблица Office

(4) позволяют менять порядок

изображений, нижняя секция (5)

используется для добавления и

редактирования подписей и

описаний картинок. Вкладка Макет (6) позволяет выбрать тип

фотогалереи. Для изменения

свойств коллекции фотографий

необходимо сделать двойной

щелчок левой кнопкой мыши на нее.

6) Включенное содержимое.

Является инструментом

автоматического управления

содержанием web-страниц сайта и

включает в свой состав пять

способов добавления материалов.

Для изменения свойств

включенного содержимого необходимо сделать двойной щелчок левой кнопкой мыши на

нем.

Подстановка. Позволяет вставить на web-страницу автоматическое отображение

имени автора, url-адреса, которые выбираются в диалоговом окне Свойства подстановки.

Страница. Позволяет вставлять на web-страницу содержимое из другой web-

страницы, которая выбирается в диалоговом окне Свойства включенной страницы (кнопка Обзор).

Страница с расписанием. Позволяет вставлять на web-страницу содержимое из

другой web-страницы по расписанию, которое задается в диалоговом окне Свойства включенной страницы с расписанием.

Рисунок с расписанием. Позволяет вставлять на web-страницу графическое

изображение по расписанию, которое задается в диалоговом окне Свойства рисунка с расписанием.

Заголовок страницы. Позволяет вставить на web-страницу заголовок.

7) Панели ссылок. Обеспечивают генерирование гиперссылок на странице тремя

способами. Для изменения свойств панели необходимо сделать двойной щелчок левой

кнопкой мыши на ней.

107

Рисунок 5.55 – Диалоговое окноСвойства коллекции фотографий

1

2

3

4

5

6

Панель с пользовательскими ссылками. В диалоговом окне Свойства панели ссылок на вкладке Общие создается панель ссылок (кнопка Создать…) и определяются

web-страницы, на которые будут организованы гиперссылки (секция Ссылки:); на вкладке

Стиль выбирается внешний вид панели. В качестве гиперссылок выступают имена

файлов web-страниц.

Панель со ссылками назад и вперед. Указывает на последовательность страниц

внутри сайта, согласно структуре, созданной в режиме Переходы. В качестве

гиперссылок выступают слова Назад и Далее.

Панель, основанная на

структуре переходов. В

диалоговом окне Свойства панели ссылок (рис.5.56),

выбирается тип создаваемых

гиперссылок, относительно

размещения текущей страницы в

структуре web-сайта, созданного в

режиме Переходы представления

веб-узел. В качестве гиперссылок

выступают названия web-страниц.

8) Оглавление. Позволяет

создать автоматически обновляемое оглавление на основании содержания всего web-

сайта или только нескольких выбранных web-страниц. Для изменения свойств оглавления

необходимо сделать двойной щелчок левой кнопкой мыши на нем.

Для данного веб-узла. В диалоговом окне Свойства оглавления задаются

параметры оглавления web-сайта (url-адрес начальной страницы, размер шрифта

заголовка, условия создания).

На основе категории страницы. В диалоговом окне Свойства категорий выбираются категории web-страниц, из которых будет составлено оглавление и

параметры отображения. Для определения категорий для web-страницы необходимо

воспользоваться диалоговым окном Свойства страницы вкладкой Рабочая группа.

9) Лучшая десятка. Работает, если на web-сервере установлен SharePoint или

серверные расширения FrontPage версии 2002 или более поздней. В результате работы

генерируются списки посещенных страниц, доменов или адресов url, из которых

производилось обращение, строк поиска, посетителей или операционных систем или

обозревателей, используемых для просмотра web-сайта.

108

Рисунок 5.56 – Панель, основаннаяна структуре переходов

10, 11) Представление списка, Представление библиотеки документов.

Являются интерактивными способами для пользователей загружать документы и

участвовать в on-line конференциях и дискуссиях. Для работы этих компонентов web-сайт

должен быть опубликован на сервере, оснащенном SharePoint-расширениями.

12) Дополнительные компоненты. Используются для размещения

коммерческой (рекламной) информации Microsoft.

13) Дополнительные элементы. Позволяет вставлять на web-страницу элементы,

разработанные вне программы FrontPage 2003 (html-код, приложение Java, элемент

ActiveX, фильм в формате Flash и т.д.). Для изменения свойств элемента необходимо

сделать двойной щелчок левой кнопкой мыши на нем.

HTML. Обеспечивает вставку на web-страницу HTML-кода с помощью диалогового

окна Разметка HTML, который нельзя изменить в режиме Конструктор. В том случае

если включен режим Отобразить все знаки на стандартной панели инструментов, на

месте вставляемого элемента HTML будет отображен вопросительный знак в угловых

скобках на желтом фоне - .

Приложение Java. Обеспечивает вставку на web-страницу приложения Java с

помощью диалогового окна Свойства приложения Java (рис. 5.57), в

котором задаются следующие

параметры.

Поле Источник приложения: (1) –

имя исходного файла Java-апплета

(небольшая программа, написанная

на языке Java).

Поле Базовый URL-адрес приложения: (2) – url папки,

содержащей исходный файл Java-

апплета.

Поле Сообщение для обозревателей, не поддерживающих Java: (3) –

текстовое сообщение, которое

отобразить браузер не поддерживающий Java. Может содержать тэги языка HTML.

Секция Параметры приложения: (4) – с помощью кнопок Добавить…, Изменить…,

Удалить задаются имена и значения параметров Java-апплета.

109

Рисунок 5.57 – Диалоговое окноСвойства приложения Java

1

2

3

4

5

6

Секция Положение – (5) определяет отступы Java-апплета от остальных объектов web-

страницы (Интервал по горизонтали:, Интервал по вертикали:) и его выравнивание

(Выравнивание:). Секция Размер: (6) – определяет ширину (Ширина:) и высоту (Высота:) Java-апплета.

Работу Java-апплета можно посмотреть только в браузере (рис.5.58 в), в

приложении FrontPage 2003 можно увидеть только его рамку (рис.5.58 а,б).

Элемент ActiveX. Обеспечивает вставку на web-страницу элементов управления

ActiveX из списка установленных на компьютере элементов, которые представляют собой

программные компоненты, служащие для расширения функциональных возможностей

web-страниц. Например, для отображения документов, отличных от поддерживаемых

данным браузером. Пример элемента управления ActiveX представлен на рисунке 5.59.

Фильм в формате Flash. Обеспечивает вставку на web-страницу flash-ролика с

помощью диалогового окна Вставка файла. Фильм можно просматривать в режиме

Просмотр. В диалоговом окне Свойства фильма в формате Flash можно менять

различные параметры объекта (качество, масштаб, цвет фона, выравнивание, отступы,

границы, размеры).

В меню Вставка находятся три команды, которые так же можно отнести к web-

компонентам.

110

Рисунок 5.59 – Элемент управления ActiveX Календарь 11.0 (1) и диалоговое окно Свойства: Элемент ActiveX (2)

1

2

Рисунок 5.58 – Отображение Java-апплета в: а) режиме Конструктор б) режиме Просмотр в) браузере Internet Explorer

1) Дата и время…. Вставляет на web-страницу дату и время в формате,

указанном в диалоговом окне Дата и время.

2) Примечание…. Вставляет на web-страницу комментарий (диалоговое окно

Примечание), которое не отображается в браузере.

3) Меняющаяся кнопка…. Вставляет на web-страницу кнопку из предложенной

коллекции, которая будет меняться при наведении на нее указателя мыши.

5.8. Дополнительные возможности FrontPage 2003.

5.8.1. Использование обтекания и позиционирования.

При размещении объектов относительно друг друга FrontPage 2003 предоставляет

возможность устанавливать свойства обтекания и позиционирования для выделенных

объектов.

Для выделенного рисунка обтекание задается в окне Свойства рисунка вкладка

Вид (команды 1, 2 рисунок 5.28), абсолютное позиционирование задается командами

панели Рисунки (команды 4, 5 рисунок 5.31).

В общем случае, для того чтобы задать обтекание или позиционирование

выделенного объекта необходимо выполнить команду Формат→Положение, в

результате которой открывается диалоговое окно Положение (рис.5.60). В этом окне

можно выбрать следующие параметры.

Секция Обтекание (1) позволяет выбрать

варианты обтекания объекта. При выборе одного

из вариантов обтекания в секции Смещение и размер (2) можно установит только ширину и

высоту блока, который содержит текущий

объект.

Секция Положение (3) позволяет выбрать один

из вариантов позиционирования. При

абсолютном позиционировании объект

размещается относительно начальной точки

координат, которая соответствует верхнему

левому углу окна. При относительном позиционировании объект размещается

относительно текущей точки привязки в документе. При выборе варианта

позиционирования все поля секции Смещение и размер (2) становятся активными.

111

Рисунок 5.60 – Диалоговое окноПоложение

4

Секция Смещение и размер (2) позволяет установить смещение объекта относительно

начальной точки, его ширину и высоту, глубину по оси Z (По оси Z: - 4). Последний

параметр определяет порядок расположения объектов относительно друг друга. Чем

больше глубина, тем выше находится объект. Т.е. объект с глубиной 1 будет находиться

сверху объекта с глубиной 0.

Для того чтобы прервать обтекание объекта другими объектами необходимо

выполнить команду Вставка→Разрыв→переключатель Очистить оба поля→OK.

Объекты с заданным абсолютным и относительным позиционированием можно

перемещать по web-странице нажатой левой кнопкой мыши.

В случае использование обтекания и позиционирования объектов следует помнить,

что внешний вид web-страницы в этом случае будет зависеть от размера окна браузера и

от разрешения экрана монитора.

Для работы с объектами, у которых задано абсолютное

или относительное позиционирование предназначена

команда Формат→Слои. Данная команда открывает панель

Слои в области Задач (рис.5.61). Используя данную панель

можно выполнять следующие действия.

Вставить слой (1) – добавит еще один слой на web-

страницу. Это действие можно выполнить с помощью

команды Вставка→Слой. Если при создании нового слоя,

один из имеющихся слоев будет выделен, то новый слой будет вложенным.

Нарисовать слой (2) – позволяет создать слой рисованием его нажатой левой кнопки

мыши в нужном месте web-страницы.

Изменить видимость слоя (3) – щелчок мыши в первом столбце конкретного слоя

изменяет его видимость. Возможны три варианта: по умолчанию, включена, выключена.

Изменение глубины или идентификатора – двойной щелчок мыши во втором или

третьем столбце позволяет изменить текущие параметры.

Изменение вложенности слоя – нажатой левой кнопкой мыши можно переместить

слой внутрь другого или наоборот убрать вложенность.

Используя команды Границы и заливка… и Положение… изменить параметры

выделенного слоя в окнах Границы и заливка и Положение.

Щелчок правой кнопкой мыши по слою в списке открывает контекстное меню, с

помощью которого так же можно менять параметры слоя.

112

Рисунок 5.61 – Панель Слои

1 2

3

5.8.2. Эффекты с использованием Dynamic HTML и JavaScript.Для web-страницы и отдельных объектов на ней могут быть определены

динамические эффекты, выполняемые только при определенных событиях. Выбор

эффектов может быть осуществлен с помощью следующих команд.

1) Команда Формат→Смена страниц позволяет задать динамический эффект для

web-страницы при ее загрузки или переходе с нее на другую страницу. В результате

выполнения команды открывается диалоговое окно Смена страниц (рис.5.62), в котором

нужно выбрать следующие параметры.

Событие: (1) - из выпадающего списка

выбирается одно из возможных

событий.

Длительность (с): (2) - задается

длительность события в секундах

(можно не задавать).

Эффект: (3) - из списка выбирается

эффект для конкретного события.

2) Динамические эффекты для выделенных объектов на web-странице (абзац

текста, слой, абзац с картинкой) задаются с помощью панели инструментов Эффекты DHTML (рис.5.63) (Вид→Панели инструментов→Эффекты DHTML), на которой

последовательно задаются параметры анимации.

Выпадающее меню Вкл (1) – служит для выбора события, при котором будет

происходить эффект.

Выпадающее меню 2 из секции Применить – служит для выбора эффекта, который

может быть выполнен при определенном ранее событии.

Выпадающее меню 3 из секции Применить – служит для выбора параметров эффекта

(если они есть).

Кнопка Удалить эффект (4) – удаляет динамический эффект заданный выделенному

объекту.

Кнопка Выделить эффекты DHTML (5) – выделяет все объекты на web-странице, к

которым был применен какой-либо динамический эффект (объект выделяется в рамку с

однотонным фоном).

113

Рисунок 5.63 – Панель инструментов Эффекты DHTML

1 2 3 4 5

Рисунок 5.62 – Диалоговое окноСмена страниц

1

2

3

3) Команда Формат→Поведение… позволяет задать

динамический эффект для выделенного объекта (абзаца

или слоя) или всей web-страницы в целом. В результате

выполнения команды открывается панель Поведение в

области задач (рис.5.64).

Кнопка Вставить (1) служит для выбора из

выпадающего списка действия, которое будет связанно с

выделенным объектом. Например.

Воспроизведение звука – воспроизводиться музыкальный файл.

Вывод сообщения – выводится текстовое сообщение в специальном окне вывода

браузера.

Вызов сценария – выполняется сценарий написанный вручную.

Замена изображения – изображение меняется на другой графический файл.

Восстановление замененных изображений – восстанавливается изображение, которое

загружалось при загрузке web-страницы.

Изменение свойств – изменяются свойства объекта (шрифт, границы, положение,

видимость).

Восстановление измененных свойств – восстанавливаются свойства объекта, которые

были при загрузке web-страницы.

Открытие окна обозревателя – открывается новое окно браузера с заданными

параметрами.

Переход по URL – в окно браузера загружается другой документ.

При выборе любого действия открывается диалоговое окно, в котором задаются

его параметры.

Действия, прикрепленные к выделенному объекту, отображаются ниже кнопки

Вставить в виде таблицы (2). Выделенное действие можно удалить с помощью кнопки

Удалить (3). Столбец Действия содержит названия действий, двойной щелчок по

названию открывает диалоговое окно для редактирования параметров действия. В

столбце События показаны события, при которых происходят действия. Событие можно

изменить, нажав на него левой кнопкой мыши и выбрав из выпадающего списка другое.

События, связанные с мышью и порядок их выполнения (могут использоваться с

большинством элементов):

onmouseover - событие происходит при перемещении указателя мыши на элемент.

onmousemove - событие происходит при перемещении указателя мыши, когда он

находится на элементе.

114

Рисунок 5.64 – Панель Поведение

1

2

3

onmousedown – событие происходит когда кнопка мыши нажата.

onmouseup – событие происходит когда кнопка мыши отпущена.

onclick - событие происходит при однократном щелчке кнопки указателя мыши на элементе.

ondblclick - событие происходит при двойном щелчке кнопки указателя мыши на

элементе.

onmouseout - событие происходит при перемещении указателя мыши за пределы

элемента.

События, связанные с клавиатурой (могут использоваться с большинством

элементов):

onkeydown - событие происходит при нажатии клавиши на элементе.

onkeyup - событие происходит при отпускании клавиши на элементе.

onkeypress - событие происходит при нажатии и отпускании клавиши на элементе.

onhelp – событие происходит при нажатии клавиши F1.

События, связанные с выбором элементов и редактированием форм:

onfocus - событие происходит при получении элементом фокуса с помощью указателя

мыши или последовательности перехода. Может использоваться со следующими

элементами: LABEL, INPUT, SELECT, TEXTAREA и BUTTON.

onblur - событие происходит при переходе фокуса с элемента с помощью указателя

мыши или последовательности перехода. Может использоваться с теми же

элементами, что и onfocus.

onchange - событие происходит при потере указателем мыши фокуса ввода, если его

значение было изменено с момента получения фокуса. Используется со следующими

элементами: INPUT, SELECT и TEXTAREA.

onselect - событие происходит при выделении пользователем некоторого текста в

текстовом поле. Может использоваться с элементами INPUT и TEXTAREA.

onsubmit - событие происходит при отправке формы. Используется только в элементе

FORM.

onreset - событие происходит при сбросе формы. Используется только в элементе

FORM.

События, связанные с web-страницей (могут использоваться в элементах BODY и

FRAMESET):

onload - событие происходит, когда браузер заканчивает загружать окно или все

фреймы элемента

onunload - событие происходит, когда браузер удаляет документ из окна или фрейма.

5.8.3. Оформление с использованием темы.

115

Для оформления страниц web-сайта могут быть использованы темы. Тема – это

коллекция окантовок, цветов и стилей, которая управляет элементами дизайна web-

страницы, начиная с разметки, строк ссылок и шрифтов и заканчивая цветом фона и

фоновыми изображениями.

Для того чтобы применить тему к web-страницам сайта необходимо выполнить

следующие действия.

Выполнить команду Формат→Тема. Появится панель

Тема (рис.5.65) в области задач.

Навести указатель мыши на нужную тему в списке

тем Выбрать тему (появится меню-стрелка - 1).

Щелкнуть на выбранную тему левой кнопкой мыши, в

результате чего тема будет применена к текущей

web-странице или к выделенным на панели Список папок.

Щелкнуть на меню стрелку и выбрать одну из

предложенных команд: Применить как тему по умолчанию (2) - тема применяется для всех страниц

web-сайта (не изменяются только те web-страницы, к

которым уже была применена какая-либо тема); Применить к выделенным страницам (3) – аналогична щелчку мыши по теме; Настройка… (4)- открывается

диалоговое окно Настройка темы для редактирования темы; Удалить (5) – удаление

созданных и модифицированных тем.

В результате применения темы, становятся недоступны команды диалогового окна

Свойства страницы вкладка Форматирование.

Для оформления web-сайта можно создавать собственные темы, которые

настраиваются в окне Настройка темы. Данное окно может быть открыто командой

Настройка… (3) из выпадающего меню темы, в этом случае новая тема получается

путем модификации существующей и сохранением командой Сохранить как…. Команда

Создать новую тему… (5) открывает такое же окно, в котором тема настраивается на

основе базового шаблона и сохраняется командой Сохранить.

Окно Настройка темы (рис.5.66) включает в себя опции для изменения цвета,

графики и текста.

Опция Цвета… (1) позволяет выбрать цветовую схему, т.е. цвета всех текстовых

элементов и фона web-страницы. Выбор может быть осуществлен тремя способами.

Вкладка Цветовые схемы – позволяет выбрать одну из стандартных цветовых схем.

116

Рисунок 5.65 – Панель Тема

1

1234

5

Вкладка Цветовой круг – позволяет подобрать сочетание цветов, перемещая точку на

цветовом круге и меняя положение бегунка Яркость:. Вкладка Другой – позволяет для каждого элемента выбрать свой цвет.

Во всех случаях присутствует выбор насыщенности палитры (Обычные цвета,

Яркие цвета), а в окне Просмотр… - можно увидеть результаты внесенных изменений.

Опция Графика… (2) позволяет определить (кнопка Обзор) для каждого

графического элемента дизайна графические файлы (вкладка Рисунки) и при

необходимости шрифт надписи (вкладка Шрифт). Переключатель Активные рисунки указывает на то, что для графических элементов, являющихся гиперссылками нужно

выбирать три рисунка (для каждого состояния).

Опция Текст… (3) позволяет выбрать для каждого текстового элемента шрифт из

списка, и, используя кнопку Другие стили текста: создать стили, которые будут доступны

при форматировании web-страниц с данной темой.

Сохраненная тема появляется в списке тем и может быть использована в

дальнейшем при оформлении web-страниц сайта.

5.8.4. Динамические web-шаблоны.

При помощи динамических web-шаблонов можно создавать web-страницы,

имеющие общий макет. Помимо этого, можно сделать некоторые области шаблона

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

динамических web-шаблонов (формат файла .dwt) для web-сайта неограниченно, а

каждый из них можно связать с любым числом страниц.

117

Рисунок 5.66 – Диалоговое окно Настройка темы

1 2 3

В отличие от общих границ, web-страницы, связанные с одним и тем же

динамическим web-шаблоном, имеют неограниченное число общих областей, которые

недоступны для редактирования внутри страницы.

Динамический web-шаблон можно создать следующим образом.

Создать web-страницу (Файл→Создать→Пустая страница) и сохранить ее командой

Файл→Сохранить. Или открыть имеющуюся web-страницу и выполнить команду

Файл→Сохранить как….

В открывшемся диалоговом окне Сохранить как необходимо выбрать или создать

папку для сохранения, задать имя, используя только латинские буква, цифры и

разрешенные символы, в выпадающем списке Тип файла: выбрать Динамический веб-шаблон (*.dwt) и нажать кнопку Сохранить.

Отредактировать содержимое общего макета.

Определить изменяемые области. Для этого выделить

область, которую можно будет изменять при

редактировании web-страниц и выполнить команду

Формат→Динамический веб-шаблон→Управление изменяемыми областями…. В открывшемся

диалоговом окне Изменяемые области (рис.5.67)

задать имя данной области (1) и кнопкой Добавить (2) внести ее в список изменяемых областей. Закрыть

данное окно. Изменяемая область будет обведена в рамку, к левому верхнему углу

которой прикреплен ярлык (3) с ее именем.

Когда все необходимые области будут добавлены в список изменяемых областей,

необходимо сохранить динамический web-шаблон (Файл→Сохранить). Для

присоединения динамического web-

шаблона к web-страницам

необходимо выполнить следующие

действия.

Открыть web-страницу или выделить

необходимые web-страницы на панели

Список папок.

Выполнить команду

Формат→Динамический веб-шаблон→Присоединить динамический веб-шаблон…, в

118

Рисунок 5.67 – Определение изменяемой области

1

2

3

Рисунок 5.68 – Диалоговое окно Выбор изменяемых областей для содержимого

12

3

открывшемся диалоговом окне выбрать нужный шаблон и нажать кнопку Открыть.

Если в теле выбранной web-страницы присутствует содержимое, то появится

диалоговое окно Выбор изменяемых областей для содержимого (рис.5.68).

Чтобы переместить все содержимое тела web-страницы в определенную изменяемую

область, нужно выбрать текст (Основной текст - 1), а затем нажать кнопку Изменить (2). В списке Новая область выбрать изменяемую область, в которую требуется

переместить содержимое, если выбрать вариант (нет), содержимое будет удалено.

Чтобы сохранить содержимое и структуру web-страницы, нужно нажать кнопку

Пропустить текущую страницу (3).

На web-страницах с присоединенным динамическим web-шаблоном редактировать

можно только изменяемые области (1

рис.5.69). Установить курсор в какое-

либо другое место web-страницы

невозможно (2).

Изменить динамический web-шаблона можно следующим образом.

Открыть страницу динамического web-шаблона.

Отредактировать общие неизменяемые области.

Изменить изменяемые области с помощью диалогового окна Изменяемые области (команда Формат→Динамический веб-шаблон→Управление изменяемыми областями…). Выбрать область из списка областей двойным щелчком левой кнопки

мыши. Используя кнопку Удалить, можно удалить изменяемую область (содержимое не

удаляется). Изменив имя области в поле Имя области: и нажав кнопку

Переименовать, можно изменить название области.

Сохранить измененный динамический web-шаблон (команда Файл→Сохранить). При

наличии web-страниц, присоединенных к динамическому web-шаблону, появляется

окно, в котором предлагает обновить эти файлы.

Для того чтобы отсоединить динамический web-шаблон от одной или нескольких

web-страницы нужно выполнить следующие действия.

Открыть web-страницу или выделить необходимые web-страницы на панели Список папок.

Выполнить команду Формат→Динамический веб-шаблон→Отсоединить от динамического web-шаблона. При этом удаляется только форматирование,

осуществляемое в этом шаблоне; автоматическое удаление содержимого этих страниц

не производится.

119

Рисунок 5.69 – Фрагмент web-страницы с присоединенным динамическим web-шаблоном

1 2

Источники

Литература.1. Microsoft Office 2003: пер. с англ./ Лаури Энн Ульрих; пер. с англ. Ю.А.Мишукова. -

М.:АСТ: Астрель, 2005. - XX, 442, [2] c.: ил. - (Все о работе с ...)

2. Microsoft Office 2003. Полное руководство. Серия "Справочник профессионала" /

Дж.А.Кеттелл, Г.Харт-Дэвис, К.Симмонс; Пер. с англ. - М.: Издательство "ЭКОМ",

2006. - 832 с.: ил.

3. Создание Web-сайтов. Учебное пособие. Авторы составители: Кузьмина Н.В,

Инькова Н.А., Зайцева Е.А., Толстых С.Г. Тамбов: Издательство ТГТУ, 2002. 88 с.

Internet сайты.1. Сайтостроительство - http://alice.pnzgu.ru/~dvn/uproc/books/site_tarasov/index.html .

2. Сайт Валентины Захаркиной (учебные материалы) - http://vvz.nw.ru/ .

3. Каскадные таблицы стилей - http://webclass.polyn.kiae.su/classes/css12/first.htm .

4. Для тех, кто делает сайты - http://htmlbook.ru/ .

5. Курсы по FrontPage - http://office.microsoft.com/ru-ru/training/CR061832701049.aspx .

6. MS Front Page 2000 - http://study.krr.ru/

7. Учебник по работе с Front Page 2003 - http://www.dmitrij.ru/uchebka/BOOK/CONT.htm.

8. Современные средства создания Web-страниц -

http://www.csa.ru/old/webmaster/web-mod.htmr .

9. Web-технологии в школе - http://design.gossoudarev.com/ .

120

Приложение 1.

Основные тэги языка HTML

Формально, первым в html-документе должен указываться элемент doctype,

сообщающий браузеру об использованной версии HTML. В элементе doctype указывается

также адрес, с которого браузер может загрузить определение типа документа - Dtd

(Document Type Definition). Эта строка помогает браузеру определить, как правильно

интерпретировать данный документ: <!doctype HTML public"-//W3C//Dtd HTML 4.0 Frameset //

EN" "http://www.w3.org/tr/REC-html40/frameset.dtd">. На практике же этот элемент зачастую

опускают без ущерба для отображения документа.

Далее обозначается начало и конец. Это делается с помощью тэга-контейнера <HTML> … </HTML>. Между этими тэгами размещается заголовок и тело документа.

<head> …

</head>

- контейнер заголовка содержит управляющую информацию о документе

(тип его кодировки; рабочее название документа; описание документа;

описание стилей, используемых в документе), используемую при

отображении документа, но не отображающуюся непосредственно в окне

браузера.

<body> …

</body>

или

<frameset> …

</frameset>

- контейнер тела документа содержит текст, предназначенный для

отображения браузером, и элементы, указывающие на способ

форматирования текста, определяющие графическое оформление

документа, задающие параметры гиперссылок и так далее или описание

фреймовой структуры.

Далее приведены некоторые тэги, которые используются внутри контейнера заголовка (при создании html-документа этот контейнер может быть пропущен).

<head>

<title>Заголовок html-документа</title> - будет отображаться в строке заголовка окна

браузера.

Для определения свойств документа предназначен тег <meta>…</meta>. Используя тег

meta, можно задать документу любое свойство (атрибут name или http-equiv), указать

используемый язык (атрибут lang) и указать значение данного свойства (атрибут content).

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"></meta>-

пример указания на windows-кодировку исходного документа

<meta http-equiv="refresh" content="5; url=http://… "></meta>- пример загрузки нового

документа с адресом http://…через 5 секунд после загрузки данного

<meta name="Discription" lang="ru" content="Описание, до 100 символов"></meta>

121

<meta name="Keywords" content="Ключевые слова через ‘,’, до 1000 символов"></meta>

<meta name="Autor" lang="ru" content="Ф.И.О."></meta>

<style type='text/css'> описываются стили на языке CSS, используемые в документе

</style>

<link rel="stylesheet" href="style.css" type="text/css"></link> - пример указания на связанный

документ, который является таблицей стилей написанных на языке CSS.

<script Language=" " type="text/javascript"> код на языке JavaScript</script>

</head>

Контейнер тела документа (<body> … </body>) формируется исходя из того,

что именно должно отображается на web-странице: текст, картинки, таблицы. Начальный

тег может иметь несколько атрибутов (ни один из них не является обязательным).

<body

background="URL/file-name" - задает графическое изображение (в формате gif, jpg или

png), которое будет фоном создаваемой страницы.

bgproperties=fixed - фон не прокручивается вместе с текстом, а стоит на месте.

bgcolor=”#kod”или bgcolor=”name” - задает цвет фона документа *.

text=”#kod”или text=”name” - задает используемый по умолчанию цвет текста.

link=”#kod”или link=”name” - задает цвет непосещенной гиперссылки.

alink=”#kod”или alink=”name” - задает цвет гиперссылки в момент щелчка по ней мышью.

vlink=”#kod”или vlink=”name” - задает цвет посещенной гиперссылки.

topmargin=”число” - задает отступ в пикселях от верхнего края окна браузера.

По умолчанию 10 пикселей.

marginheight=”число” - тоже самое, но для браузера Netscape.

leftmargin=”число” - задает отступ в пикселях от левого края окна браузера.

По умолчанию 10 пикселей.

marginwidth=”число” - тоже самое, но для браузера Netscape.

bottommargin=”число” - задает отступ в пикселях от нижнего края окна браузера.

rightmargin=”число” - задает отступ в пикселях от правого края окна браузера.

scroll -устанавливает наличие или отсутствие полосы прокрутки (только для браузера

Internet Explorer).

>

* В HTML цвета определяются цифрами в шестнадцатеричном коде или словами их

заменяющими. Цветовая система базируется на трех основных цветах: красном, зеленом

и синем (система RGB). Для каждого цвета задается шестнадцатеричное значение в

пределах от 00 до FF, затем все три числа объединяются в одно, перед которыми

122

ставится символ #. В итоге, получаются значения цветовых атрибутов. Например, код

#FF0000 определяет красный цвет. Некоторые цвета имеют символические имена.

Например: Blue="#0000FF" определяет синий цвет.

Основные тэги структурного форматирования.<br> - разрывает текстовый поток и вставляет новую строку. Закрывающего тега нет.

<nobr>…</nobr> - размещение элементов html-документа без переноса на другую строку.

<h1>…</h1>, <h2>…</h2>, <h3>…</h3>, <h4>…</h4>, <h5>…</h5>, <h6>…</h6> -

заголовки разных уровней, которые выводятся браузером с новой строки и

отделяются от прочего текста двойным межстрочным интервалом.

Заголовкам можно задавать атрибуты.

<hn align=[left][right][center][justify]> …</hn> - выравнивание соответственно по левому

краю, правому краю, центру или по всей ширине окна браузера.

<p align=[left][right][center][justify]> …</p> - задает абзацы, которые отделяются друг от

друга двойным межстрочным интервалом.

<div align=[left][right][center][justify]> …</div> - задает раздел, который может содержать

другие разделы, любое количество абзацев, списки, таблицы и другие

HTML-элементы. Браузеры выводят содержимое раздела с новой строки,

отделяя от остального текста одинарным межстрочным интервалом.

<span>…</span> - задает блок текста с определенными характеристиками.

<blockquote> … </blockquote> - блок цитирования, который выводится браузерами

отдельным абзацем с заметным сдвигом справа и слева.

<pre>…</pre> - позволяет сохранить исходное форматирование, текст отображается так,

как он был отформатирован предварительно, со всеми пробелами и

переносами строк.

<ol type=[1][A][a][I][i] start=номер> - нумерованный список, с различными вариантами

<li> …</li> нумерации (аргумент type) и определенным начальным номером

<li> …</li> (аргумент start), который задается арабскими цифрами.

</ol> - завершает нумерованный список

<ul type=[disc][circle][square]> - маркированный список, с различными вариантами маркеров.

<li> …</li> - элемент списка.

<li

type=… - определяет тип маркера или номера.

value=…- задается порядковый номер элемента списка.

> …</li>

</ul> - завершает маркированный список

123

<dl> - список определений

<dt>…</dt> - для задания термина.

<dd>…</dd> - для задания определения, сдвигается на некоторое количество позиций

вправо относительно остального текста, демонстрируя подчиненность.

</dl> - завершает список определений.

Понятия многоуровневого списка в HTML нет; при необходимости такой список

можно создать, используя вложенные нумерованные или маркированные списки.

<comment> … </comment> или <! – … -- > - используется для добавления комментариев,

которые не показываются в браузере.

<center>…</center> - расположение элементов html-документа по центру окна браузера.

<hr - горизонтальная черта, у который можно задать следующие параметры:

width=[число][%] - ширина в пикселях или процентах от ширины окна браузера,

color="[#kod][name]" - цвет,

height=число - высота в пикселях,

align=[left][center][right] - выравнивание относительно окна браузера.

>

Использование шрифтов в HTML-документах.Тэги форматирования шрифта подразделяют на две группы:

логического форматирования (идиоматические элементы), которые служат

структурной разметке текста;

физического форматирования (типографские элементы), которые определяют

конкретное внешнее отображение текстового фрагмента.

Некоторые тэги первой группы.

<strong>…</strong> - сильное выделение. В браузерах отображается полужирным

начертанием. В голосовых браузерах текстовый фрагмент должен

быть сильно выделен голосом.

<em>…</em> - выделение. В браузерах отображается наклонным начертанием. В

голосовых браузерах текстовый фрагмент должен быть выделен голосом.

_… - верхний индекс.

^… - нижний индекс.

Наклонным начертанием выводятся элементы.

<dfn>…</dfn> - определение.

<cite>…</cite> -цитата.

<var>…</var> - переменная.

Моноширинным шрифтом выводятся элементы.

124

<code>…</code> - программный код.

<samp>…</samp>- примеры программ, сценариев.

<kbd>…</kbd> - примеры текста, который должен ввести пользователь.

Эти элементы, являются чисто логическими, никак внешне не выделяются.

<abbr>…</abbr> - аббревиатура (сокращение).

<acronym>…</acronym> - акроним (слово, сформированное из первых букв

словосочетания, которое оно заменяет).

Некоторые тэги второй группы.

<b>…</b> - жирный текст.

<i>…</i> - курсив.

<u>…</u> - текст с подчеркиванием.

<s>…</s> - перечеркнутый текст.

<tt>…</tt> - моноширинный шрифт.

<font - определяет вид шрифта, с помощью атрибутов

size =значение - размер шрифта; задается либо в форме абсолютного значения (число

от 1 до 7), либо относительно размера основного шрифта (в форме +n

или -n). Значение по умолчанию: size =3.

color="[#kod][name]" - цвет шрифта.

face=список гарнитур шрифта - перечисляется через запятую в порядке убывания

предпочтения (Arial, Verdana). Список может заканчиваться одним из

родовых имен: serif (с засечками, "антиква"), sans-serif (без засечек,

"рубленый", "журнальный"), cursive (курсив), fantasy (аллегорический),

monospace (моноширинный).

>…</font>

В том случае, если на клиентском компьютере нет заданного шрифта, то

недостающий шрифт будет подменен ближайшим подходящим по умолчанию. Поэтому

со шрифтами следует работать осторожно, стараясь использовать только стандартные

шрифты.

Организация гиперссылок.Гиперссылка – это элемент, который организует связь между web-страницами и их

фрагментами. В качестве объекта, по которому организуется гиперссылка, может

выступать любой объект html-документа (текст или графическое изображение).

Гиперссылка в html-документе организуется с помощью парных тэгов <a>…</a> (от

английского anchor - якорь). Данные тэги могут употребляться в трех форматах.

1) Создание якоря (метки) фрагмента.

125

<a name=”метка”> …</a> - служит для того, чтобы была возможность ссылаться не на

весь документ целиком, а на его фрагмент.

2) Создание гиперссылки на html-документ, или его фрагмент.

<a href=”адрес”>…</a> - гиперссылка на html-документ;

<a href=”адрес#метка”>…</a> - гиперссылка на фрагмент документа, с созданным

якорем, где адрес – адрес документа в абсолютной или относительной форме.

3) Создание гиперссылки на электронную почту.

<a href=”mailto:e-mail”>…</a>, где e-mail – адрес электронной почты.

Текст или изображения, размещенные между тегами <a>…</a>, становятся

активной зоной документа, чувствительной к щелчку мыши, который вызывает загрузку

документа, на который организовывалась гиперссылка.

Дополнительно можно использовать следующие атрибуты.

target=_blank - документ будет загружаться в новое окно браузера.

title=“строка” - “строка” будет всплывать при наведении на гиперссылку указателя мыши.

Создание таблиц и их применение для форматирования документов.Таблицы в HTML-документах служат для задания структуры данных и

упорядочивания их в строки и столбцы ячеек. Однако таблицы большей частью

применяются не столько для того, чтобы располагать данные в обрамленных ячейках,

сколько с целью позиционирования фрагментов текста и изображений друг относительно

друга. Помещая изображения и фрагменты текстов в ячейки таблицы с невидимой

границей, можно добиться эффекта обтекания изображения текстом, расположить текст

как многоколоночный, "склеить" ряд фрагментов в одно изображение и так далее.

Основные тэги, используемые для описания таблиц: table, tr, td, th. Все табличные

данные (рис.1) заключаются в теги <table> ... </table>; описание каждого горизонтального

ряда ячеек заключается в теги <tr> ... </tr>; содержимое каждой ячейки заключается в теги

<td> ... </td>.

Ячейки таблицы могут содержать практически любые HTML-элементы, в частности,

форматированный текст, изображения, гиперссылки; допустимы вложенные таблицы. Не

следует оставлять ячейки таблицы незаполненными; необходимо поместите в нее хотя

бы неразрывный пробел &nbsp. Помещаемый в ячейки таблицы текст по умолчанию

автоматически размещается браузером (если не задан атрибут ячейки nowrap); текст

выводится слово за словом; при достижении правой границы ячейки очередное слово

переносится на новую строку. Ячейки таблицы могут охватывать несколько строк или

столбцов; при описании таких ячеек используется атрибуты rowspan и colspan. Элементы,

описывающие таблицы, имеют много атрибутов; все они необязательны. Значения

126

атрибутов по умолчанию могут зависеть от настроек браузера, поэтому желательно

указывать их явным образом.

<table>

<tr> <td> ...</td> <td> ...</td> . . . <td> ...</td> </tr>

<tr> <td> ...</td> <td> ...</td> . . . <td> ...</td> </tr>

. . . . . . . . . . . . . . . . . .

<tr> <td> ...</td> <td> ...</td> . . . <td> ...</td> </tr>

</table> Рисунок 1 – Структура таблицы

Рассмотрим основные атрибуты тэгов, используемых для создания таблицы.

<table

width=[число][%] - ширина задается либо в пикселях, либо в % от текущей ширины окна;

align=[left][center][right] - размещение таблицы на странице относительно окна браузера,

при этом таблица будет обтекаться внешним текстовым потоком;

border=число - толщина рамки таблицы;

cellpadding=число - расстояние между содержимым ячейки и ее границей в пикселях;

cellspacing=число - расстояние между ячейками в пикселях;

background = “url” – фоновое изображение для всей таблицы;

bgcolor="[#kod][name]" - фоновый цвет для всей таблицы;

hspace=число - свободное пространство слева и справа от таблицы в пикселях;

vspace=число - свободное пространство сверху и снизу от таблицы в пикселях;

rules=значение - определяет линии между ячейками:

none - нет линий, значение используется по умолчанию,

rows - линии отображаются только между строками,

cols - линии отображаются только между столбцами,

all - линии отображаются между строками и столбцами.

frame=значение – определяет какие стороны рамки, окружающей таблицу, будут видимы:

void - сторон нет,

above - только верхняя часть,

below - только нижняя часть,

hsides - только верхняя и нижняя часть,

vsides - только левая и правая части,

lhs - только левая часть,

rhs - только права часть.

box или border - все четыре части. >

127

<tr - начало строки таблицы, задают параметры горизонтального ряда (строки) ячеек;

background = “url” - фоновое изображение;

bgcolor="[#kod][name]" - фоновый цвет;

align=[left][center][right] - горизонтальное размещение содержимого ячеек ряда.

valign=[top][ middle][ bottom] - вертикальное выравнивание содержимого ячеек ряда

(верх, середина, низ).

>

<td

width=[число][%] - ширина ячейки;

height=[число][%] - высота ячейки;

bgcolor="[#kod][name]" - цвет фона ячейки;

background = “url" - фоновое изображение;

align=[left][center][right] - размещение содержимого ячейки по горизонтали;

valign=[top][middle][bottom] - размещение содержимого ячейки по вертикали;

colspan=число - объединение ячеек по строке;

rowspan=число - объединение ячеек по столбцу;

>

содержимое ячейки

</td> - завершение описания ячейки;

</tr> - завершение описания строки таблицы;

</table> - завершение описания таблицы.

Тэг <th> так же описывает ячейку, но в отличие от тэга <td> содержимое тэга <th>

по умолчанию выравнивается по центру ячейки и текст выводится полужирным

начертанием.

При работе с таблицами следует учитывать, что из-за разного толкования

браузерами смысла некоторых атрибутов и из-за разных значений по умолчанию таблица

может по-разному выглядеть в разных браузерах. Кроме того, заданные пропорции в

точности выдерживаются далеко не всегда, т.к. браузер старается отобразить таблицу

как можно лучше в его понимании.

Вставка графического изображения в html-документ.Для вставки графического изображения в html-документ используется тэг <img>,

который имеет следующий формат.

<img

src=”url” – обязательный атрибут, определяющий адрес графического файла.

border=число – толщина обрамляющей рамки в пикселях.

128

height= число – высота изображения в пикселях или в % от высоты окна браузера.

width= число – ширина изображения в пикселях или в % от ширины окна браузера.

hspace= число – отступы слева и справа от изображения в пикселях.

vspace= число – отступы снизу и сверху от изображения в пикселях.

alt=текст – задается альтернативный текст, который «всплывает» при наведении

курсора мыши на изображение; выводится в пустой рамке режиме браузера

без загрузки графики.

align=значение - значения left либо right, выравнивают изображение соответствующим

образом по горизонтали; задание этих значений обеспечивает обтекание

изображения текстом. Значения texttop, abscenter, center, bottom, absbottom

обеспечивают различные варианты вертикального выравнивания

относительно текстовой строки; при применении этих значений вставленное

изображение разрывает текстовый поток.

>

Для того чтобы завершить обтекание графического изображения текстом

необходимо вставить тэг <br clear=all>.

Использование графики для организации гиперссылок.Очень часто графические изображения применяются для организации навигации

по сайту. Небольшие анимационные рисунки или кнопки, с соответствующими надписями

используются как гиперссылки на соответствующие страницы. В этом случае html-код

выглядит следующим образом:

<a href=”url-документа” title=”ссылка”><img src=”url-рисунка” alt=”кнопка”></a>.

В некоторых случаях в HTML-документ необходимо поместить графическое

изображение, отдельные части которого должны представлять собой гиперссылки на

разные целевые документы. Это может быть организовано двумя способами.

В первом случае графическое изображение с помощью какого-либо графического

редактора разрезается на прямоугольные части. В html-документе формируется

соответствующая таблица, каждая ячейка которой содержит часть графического

изображения с организованной по ней гиперссылкой.

Во втором случае используется тэг <map> и вложенные в него тэги <area>,

задающие навигационную карту, основанную на изображении. В тэг <img> вставляется

дополнительный атрибут usemap=#name_map, который привязывает данное графическое

изображение к карте. В этом случае html-код выглядит следующим образом.

<img src=”url-рисунка” border=0 usemap=”#name_map”> - вставка изображения и привязка

его к карте с именем name_map.

129

<map name=#name_map> - описание навигационной карты.

<area - описание отдельной области с гиперссылкой, с помощью атрибутов:

href=”url-документа” - определяет адрес целевого документа;

shape= - определяет вид области:

rect - прямоугольная,

circle - окружность,

poly - многоугольник,

default - вся область;

coords="координаты" - координаты (в пикселях), задающие соответствующую область

(точка с координатой (0;0) – левый верхний угол изображения):

left-x, top-y, right-x, bottom-y (т.е. левый верхний и правый нижний углы прямоугольника),

center-x, center-y, radius (координаты центра и радиус окружности),

x1, y1, x2, y2, …, xN, yN (координаты углов многоугольника);

alt =”текст” - всплывающая подсказка;

nohref - зона без гиперссылки.

>

</map> - завершение описания навигационной карты.

Организация фреймовой структуры html-документа.

Фреймы - средство для разделения окна браузера на несколько областей

(фреймов), в каждой из которых отображается содержимое отдельной web-страницы.

Каждая область может иметь свои полосы прокрутки и ее просмотр с помощью них, не

влияет на остальные области.

Любая из страниц web-сайта (не обязательно титульная) может быть оформлена с

использованием фреймов. В этом случае контейнер <body>…</body>, меняется на

контейнер <frameset>…</frameset>, который может содержать только такие же структуры

и тэг <frame>.

<frameset – тэг задает относительный или абсолютный размер фреймов, на которые

будет поделено окно браузера, и имеет следующие атрибуты.

rows="[число,число,…,число]/[%,%,…,%]" - задает количество и размер строк в

создаваемом наборе кадров в пикселях, процентах или * -

пропорционально другим кадрам.

cols="[число,число,…,число]/[%,%,…,%]" - задает количество и размер колонок в

создаваемом наборе кадров в пикселях, процентах или * -

пропорционально другим кадрам.

130

frameborder=1/0 - задает наличие или отсутствие обрамления у фреймов (1

соответствует наличию, а 0- отсутствию обрамления).

border=число - задает толщину обрамления в пикселях для всех производных фреймов.

> - полученные кадры описываются, начиная с верхнего левого, слева направо и сверху

вниз и для каждого должен быть свой тэг <frame>.

<frame - тэг описывает внешний вид и поведение кадра, имеет следующие атрибуты.

name="name-frame" - имя кадра.

marginwidth=число - горизонтальный отступ между содержимым кадра и его границами.

marginheight=число - вертикальный отступ между содержимым кадра и его границами.

scrolling=[yes][no][auto] – описание полосы прокрутки .

noresize – фиксирование границ кадра.

src="name.htm"> - имя файла, загружаемого в кадр.

</frameset>

<noframes> - тэг для описания страницы без фреймов.

<body>

тело страницы для браузеров, не поддерживающих кадровую структуру.

</body>

</noframes>

При организации гиперссылок внутри кадровой структуры в тег <a href=… >

необходимо добавить атрибут target=

“name-frame” - страница будет загружаться в окно заданного кадра.

“_blank” - страница будет загружаться в новое окно.

“_self” - страница будет загружаться в тот же кадр, где была активизировано

ссылка.

“_top”  - страница будет загружаться в то же окно, но поверх всех кадров, занимая

полностью пространство окна;

“_parent”  - если документ с гиперссылкой находится во вложенном наборе кадров, то

страница будет загружаться в родительское окно или набор кадров;

Другой вариант использования фреймов, заключается в том, что в тело документа

(<body>…<body>) c помощью контейнера <iframe>…</iframe> вставляется окно, в которое

можно загружать другие HTML-документы или изображения. Не все браузеры их

поддерживают. Например, Netscape 4.06 их не понимает. Но зато самый

распространенный браузер InternetExplorer четвертой и более поздней версии умеет с

ними работать. Данный тэг описывается следующим образом.

<iframe

131

src=”name-1.htm” - адрес документа, первоначально загружаемого в кадр.

name=”name-frame” – имя кадра. Используя в основном документе тэг <a href=”name-

2.htm” target=name-frame> - можно изменить содержимое кадра.

height=значение - высота кадра в пикселях или процентах от высоты окна браузера.

width=значение - ширина изображения в пикселях или в % от ширины окна браузера.

scrolling=yes/no/auto - задается стиль вывода полос прокрутки, соответственно

выводятся в кадре всегда, не выводятся, выводятся при необходимости.

frameborder=значение - включение / выключение показа "псевдотрехмерного"

обрамления кадра. (1/0 или yes/no).

marginwidth=значение - величина горизонтальных полей (в пикселях), отделяющих

содержимое кадра от его границ.

marginheight=значение - величина вертикальных полей (в пикселях), отделяющих

содержимое кадра от его границ

align=значение - выравнивание кадра по горизонтали или вертикали аналогично

изображению.

>

Браузер не поддерживает встроенных фреймов.

</iframe>

Фреймы были популярны в 90-х годах (обычно их использовали для организации

навигации по сайту). Сейчас в Интернете на сайтах организаций фреймовую структуру не

встретишь, ее можно увидеть лишь на любительских web-страницах.

Создание HTML-форм.Формы представляют собой интерактивные элементы HTML, позволяющие

разработчикам web-страниц интерактивно взаимодействовать с посетителями. С их

помощью пользователь может возвращать комментарии по поводу посещения

определенного узла, пересылать запросы или регистрироваться. Разработчик задает

вопросы, создавая форму, а пользователь отвечает на них, заполняя её. Содержимое

формы либо передаётся обрабатывающему ее скрипту, написанному на одном из языков

программирования, либо по электронной почте посылается получателю. Сам процесс

создания формы состоит из двух этапов. Первый заключается в создании самой формы,

а второй заключает в себе создание на web-сервере скрипта для ее обработки.

Форма создается при помощи различных тэгов и атрибутов, заключенных в

контейнер <form>…</form>.

Рассмотрим синтаксис формы для отправки почтового сообщения.

<form method="POST" action="mailto:e-mail" ENCTYPE="text/plain"> - описание формы

132

<input type="text" – однострочное текстовое поле

name="Имя поля1" – имя поля.

size="число" – максимальная длина поля в символах.

maxlength="число" – максимальное число вводимых символов.

value="значение по умолчанию" – задается при необходимости.

>

<input type="checkbox" - флажок выбора выглядит обычно в виде крестика или птички.

name="Имя поля2"

value="Значение"

checked – включение по умолчанию

>

<input type="radio" value="Значение1" name="Имя поля3" checked> - выбор

<input type="radio" value="Значение2" name="Имя поля3"> одного из

<input type="radio" value="Значение3" name="Имя поля3"> вариантов

<select name="Имя поля4" - выбор из выпадающего меню.

size="2" – высота поля в строках.

multiple - возможность одновременного выбора нескольких значений.

>

<option value="вариант1">Вариант1</option> - описание вариантов выбора

<option value="вариант2" selected>Вариант2</option>

<option value="вариант3">Вариант3</option>

</select>

<textarea name="Имя поля5" rows="число строк" cols="число колонок">

многострочное текстовое поле </textarea>

<input type="submit" value="Название кнопки1" name="имя формы"> - кнопка отправки

формы

<input type="reset" value="Название кнопки2" name="имя"> - кнопка сброса значений

</form>

133

Приложение 2.

Описание некоторых свойств CSS

Не все элементы CSS поддерживаются браузерами разных производителей и

разных версий. Об этом необходимо помнить при создании своего web-сайта.

Приведенные далее примеры оптимизированы под браузер Internet Explorer 6.0.

Описание цвета шрифта и фона.color: - цвет текста. Цвет можно задавать ключевым словом или шестнадцатеричным кодом.

background-color: - цвет фона. По умолчанию – transparent (прозрачный).

background-image: url(…) - фоновое изображение. В скобках задается путь к изображению.

background-position: - начальное положение фонового изображения. Задается либо в

пикселях или процентах (два значения через пробел), указывающих

отступы по горизонтали и вертикали от левого верхнего угла окна, либо

одним из значений left, top, center, right, bottom.

background-repeat: - заполнения элемента фоновым изображением. Значения: repeat –

повторяется, no-repeat - не повторяется, repeat-x - повторяется по оси x,

repeat-y - повторяется по оси y.

background-attachment: определяет каким будет фоновое изображение фоновое

изображение: стационарным (fixed) или прокручиваемым (scroll).

Пример.

Html-код файла css.css Тело файла css.htm Просмотр

.pr1 { color:#000080; background-color:#ddddff }.pr2 { color:#000080; background-image:url(fA45.gif); background-position=20 20;background-repeat:repeat-x; background-attachment:fixed }

<p class=pr1>Просто абзац текста<p><b class=pr1>Жирный текст</b><p class=pr2>Просто<br>абзац<br> текста<p><b class=pr2>Жирный<br>текст</b>

Просто абзац текста

Жирный текст

Описание шрифта.

font-family: - гарнитура шрифта. Задается списком шрифтов через запятую в порядке

убывания предпочтения; список может заканчиваться одним из родовых имен:

serif (с засечками, "антиква"), sans-serif (без засечек), cursive (курсив), fantasy

(аллегорический), monospace (моноширинный).

font-size: - размер шрифта. Указывается либо в пикселях (px), пунктах (pt), дюймах (in),

134

сантиметрах (cm), миллиметрах (mm), пиках (pc) или процентах (%) от текущего

размера, либо специальным словом xx-small,x-small, small, medium, large, x-

large, xx-large, larger, smaller.

font-style: вид шрифта: normal (обычный), italic (курсив), oblique (наклонный).

font-weight: насыщенность шрифта, задается числом от 100 до 900 (кратное 100) или

специальным словом: normal, bold, bolder, lighter.

font-variant:small-caps - вывод капителью (есть не во всяком шрифте).

Пример.

Html-код файла css.css Тело файла css.htm Просмотр

.pr3 { font-family:cursive;font-size:x-small;font-style:italic;font-variant:small-caps; } .pr4 { font-family:symbol; font-size:20px; font-weight:900; }

<p class=pr3>Просто абзац текста<p><b class=pr3>Жирный текст</b><p class=pr4>z_a+q_b

ПРОСТО АБЗАЦ ТЕКСТА

ЖИРНЫЙ ТЕКСТ

Описание текста.

text-indent: - отступ первой строки текста в блоке. Задается либо размер, либо проценты

относительно ширины блока.

text-align: - выравнивание текста по ширине задается как left, right, center, justify

text-decoration: - задает различные виды декорирование текста: none (нет), underline

(подчеркнутый), overline (надчеркнутый), line-through (перечеркнутый),

blink (мерцающий).

letter-spacing: - размер межсимвольного расстояния.

word-spacing: - размер расстояние между словами.

text-transform: - преобразования текста задаются специальными словами: none(нет),

capitalize (первая буква каждого слова заглавная), uppercase (все буквы

заглавные), lowercase (все буквы строчные).

line-height: - межстрочный интервал. Задается либо размер, либо % от текущего, либо normal.

white-space: - способы обработки символов пустого пространства внутри блока normal (по

умолчанию), nowrap (не разрывать строку).

Пример.

Html-код файла css.css Тело файла css.htm Просмотр

.pr5 { text-indent:100px;text-align:center;text-decoration:overline;letter-spacing:5px; word-spacing:10px;text-transform:capitalize; line-height:7mm; }

<p class=pr5>Длинныйтекстовый фрагмент,состоящий изнескольких строк.

Свойства блока.

135

width: - ширина

height: - высота

Ширина, высота блока задаются либо значением, либо в

процентах относительно родительского контейнера.

margin-top: - сверху

margin-right: - справа

margin-bottom: - снизу

margin-left: - слева

Размеры зоны полей вокруг блока, задаются либо

значением, либо в процентах относительно ширины

контейнера.

padding-top: - сверху

padding-right: - справа

padding-bottom: -

снизу

padding-left: - слева

Размеры зоны отступов внутри блока, задаются либо

значением, либо в процентах относительно ширины

контейнера.

border-top-style: - сверху

border-right-style: - справа

border-bottom-style: - снизу

border-left-style: - слева

Стиль линии границы. Может принимать следующие

значения: none (нет), dotted (пунктир), dashed (штрих-

пунктир), solid (сплошная), double двойная сплошная),

groove (вдавленная граница), ridge (выпуклая граница),

inset (вдавленный блок), outset (выпуклый блок)

Если стили линий границы не заданы, то все прочие свойства границы не повлияют на

отображение блока.

border-top-width: - сверху

border-right-width: - справа

border-bottom-width: - снизу

border-left-width: - слева

Размер зоны границы блока, задается либо значением,

либо специальным словом: thin, medium, thick medium.

border-top-color: - сверху

border-right-color: - справа

border-bottom-color: - снизу

border-left-color: - слева

Цвет границы, задается либо значением цвета, либо

transparent.

Пример.

Html-код файла css.css:

.pr6 { background-color:#87CEFA; width:250px; height:200px; border-top-style:dotted; border-right-style:double; border-bottom-style:solid; border-left-style:dashed; border-top-width:5px; border-right-width:5px; border-bottom-width:5px; border-left-width:5px; border-top-color:#ff0000; border-right-color:00ff00; border-bottom-color:0000ff; border-left-color:#57a292 }.pr7 { background-color:#B0C4DE; width:75%; height:50%; margin-top:5px; margin-left:10px; padding-right:10px; padding-left:10px; padding-top:10px; border-top-style:groove; border-right-style:ridge; border-bottom-style:inset; border-left-style:outset; border-top-width:thin; border-right-width:medium;

136

border-bottom-width:thick medium; border-left-width:7px; border-top-color:#aaaa00; border-right-color:#aa00aa; border-bottom-color:#00aaaa; border-left-color:#2a2975 }Тело файла css.htm Просмотр

<div class=pr6>Длинный текстовый блок, состоящий из нескольких строк размером 250 на 200 пиксель.<div class=pr7>Текстовый блок, вложенный в первый</div></div>

float: - определяет плавающий блок текста, принимает значения left (блок прижат к левой

границе охватывающего блок элемента), rigth (блок прижат к правой границе

охватывающего блок элемента), both (текст может обтекать блок с обеих сторон).

clear: - запрещает наличие плавающих блоков около блока текста, может принимать

значения: right, left, none, both.

Примеры.

Html-код файла css.css:

.pr8 {background-color:#87CEFA; width:100px; height:50px; border-top-style:dotted; border-right- style:dotted; border-bottom-style:dotted; border-left-style:dotted; float:left}.pr9 {background-color:#FACE87; width:100px; height:50px; border-top-style:dashed; border-right-style:dashed; border-bottom-style:dashed; border-left-style:dashed; float:right}.pr10 {background-color:#B0C4DE; width:250px; height:100px; border-top-style:groove; border-right-style:groove; border-bottom-style:ridge; border-left-style:ridge; }Тело файла css.htm Просмотр

<div class=pr8>Текстовый блок, обтекание left</div><div class=pr9>Текстовый блок, обтекание right</div><div class=pr10>Длинный текстовый блок, состоящий из нескольких строк размером 250 на 200 пиксель.</div>

Если в класс .pr10 добавить свойство clear:left, то при просмотре того же html-кода

обтекания будут иметь следующий вид:

137

Свойства позиционирования.position: задает алгоритм позиционирования. Может принимать значения: static -

обычный блок, заданные свойства top и left игнорируются, relative - свойства top

и left смещают блок относительно его нормального положения в общем потоке

данных; absolute - блок изымается из потока данных и позиционируется в

соответствии со свойствами top, left, right или bottom относительно ближайшего

по вложенности вмещающего его позиционированного контейнера; fixed - блок

позиционируется как и в случае значения absolute, а потом фиксируется

относительно некоторого объекта.

top: - вертикальное смещение блока относительно верха контейнера (значение или

процент относительно высоты контейнера).

right: - горизонтальное смещение блока относительно правой границы контейнера

(значение или процент относительно ширины контейнера).

bottom: - вертикальное смещение блока относительно низа контейнера (значение или

процент относительно высоты контейнера).

left: - горизонтальное смещение блока относительно левой границы контейнера (значение

или процент относительно ширины контейнера).

z-index: - позиционный уровень блока; блок с большим свойством z-index располагается

над блоком с меньшим свойством z-index, auto - свойство z-index присваивается

в порядке описания элементов в исходном коде.

Пример.

Html-код файла css.css Тело файла css.htm Просмотр

.pr11 { background-color:#ddffdd; width:150px; height:150px; position:absolute; top:50px; left:50px;}.pr12 { background-color:#ddffff; width:100px; position:relative; top:0px; left:0px; z-index:2 }.pr13 { background-color:#ffffdd; width:100px; position:relative; top:-25px; left:-25px; z-index:1 }

<div class=pr11>1. Абсолютное позицирование <div class=pr12>2a. Относительное позиционирование</div> <div class=pr13>2б. Относительное позиционирование</div></div>

Свойства отображения.overflow: - определяет тип усечения содержимого блока с заданной шириной и высотой.

Возможные значения visible (все равно видно), hidden (усечено по размерам),

scroll (усечено, но есть возможность прокрутки).

Пример:

138

Html-код файла css.css Тело файла css.htm Просмотр

.pr14 { background-color:#ddffff; width:150px; height:50px; verflow:hidden }.pr15 { background-color:#ffffdd; width:150px; height:50px; overflow:scroll }

<div class=pr14>Блок длинного текста с параметрами overflow:hidden</div><p><div class=pr15>Блок длинного текста с параметрами overflow:scroll</div>

clip: - определяет какая часть элемента видна. Работает если указано позиционирование.

Возможные значения: auto (показывать все), rect(<top> <right> <bottom> <left>) –

описание координат видимой прямоугольной области.

visibility: – определяет видимость блока. Возможные значения: visible (видимый блок),

hidden (блок не отображается, но остается пустое место, которое бы он занял).

Свойства списков.list-style-type: - тип списка. Возможные значения: square - в виде маркера используем

квадрат, disk – диск, circle – круг, lower-roman – строчные римские буквы,

upper-roman – заглавные римские буквы, lower-alpha – строчные латинские

буквы, upper-alpha – заглавные латинские буквы.

list-style-image:url(адрес изображения) – вместо маркеров будет изображение.

Фильтры (только для Internet Explorer)

Фильтры могут применяться для текстовых блоков и для графических изображений.

Синтаксис записи фильтра - filter:название

фильтра(атрибут=значение,атрибут=значение,… ).

alpha(opacity=…, finishOpacity=…,style=…) – прозрачность, где opacity и finishOpacity

степень прозрачности в начале и конце градиента, style – тип градиента: 0 –

равномерный, 1 – линейный, 2 – радиальный, 3 – прямоугольный.

chroma(color=…) - абсолютная прозрачность для одного заданного цвета.

dropshadow(color=…, offx=…,offy=…, positive=…) - эффект тени, где color – цвет тени или

маски, offx и offy – численное значение смещения тени по горизонтали и

вертикали, positive – применение атрибута color: 0-как цвет маски, 1-как цвет

тени.

flipv - зеркальное отображение по вертикали.

fliph - зеркальное отображение по горизонтали.

glow(color=…, strength=…) – ореол, где color – цвет, strength – интенсивность (от1 до 100).

gray - преобразование цветов объекта в оттенки серого.

invert - инверсия цветов объекта.

139

mask(color=…) - выделяет фон текстового объекта указанным цветом, цвет шрифта

становится белым.

shadow(color=…, direction=…) - тень, где color – цвет, direction - угол поворота (от 0 до

360).

wave(add=…, freq=…, phase=…, lightstrength=…, strength=…) - волнообразное искажение,

где атрибут add – 1 или 0, а остальные определяют частоту волны, фазу волны,

освещенность, интенсивность волны и задаются числом.

xray - негативное изображение.

Пример.

Html-код файла css.css Просмотр

.pr16 { color:#000080; background-color:#ffffdd; width:150px }

.pr17 { color:#000080; width:150px }

Тело файла css.htm

<div class=pr16 style="filter:alpha(opacity=20,finishOpacity=100,style=1)">Блок текста с фильтром alpha</div><p><div class=pr16 style="filter:chroma(color=#000080)">Блок текста с фильтром chroma</div><p><div class=pr17 style="filter:dropshadow(color=#ffaaaa, offx=5, offy=3, positive=1)">Блок текста с фильтром dropshadow</div><p><div class=pr16 style="filter:flipv">Блок текста с фильтром flipv</div><p><div class=pr16 style="filter:fliph">Блок текста с фильтром fliph</div><p><div class=pr17 style="filter:glow(color=#ffaaaa, strength=7)">Блок текста с фильтром glow</div><p><div class=pr16 style="filter:gray">Блок текста с фильтром gray</div><p><div class=pr16 style="filter:invert">Блок текста с фильтром invert</div><p><div class=pr17 style="filter:mask(color=#ffaaaa)">Блок текста с фильтром mask</div><p><div class=pr17 style="filter:shadow(color=#ffaaaa, direction=30)">Блок текста с фильтром shadow</div><p><div class=pr16 style="filter:wave(add=0, freq=5, phase=2, lightstrength=4, strength=3)">Блок текста с фильтром wave</div><p><div class=pr16 style="filter:xray">Блок текста с фильтром xray</div>

140

141