В. Г. Яснецкая

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

Москва Институт международного права и экономики имени А.С. Грибоедова 2003 1

УТВЕРЖДЕНО кафедрой прикладной информатики

Яснецкая В.Г. Электронные издания: им. А.С. Грибоедова, 2003. – 64 с.

Учеб.-метод.

пособие.

–

М.:

ИМПЭ

В пособии рассмотрены виды электронных изданий, основы языка создания гипертекстовых документов, свойства основных тегов HTML (ссылок, изображений, списков, таблиц, форм). Практические задания выполняются с использованием двух основных редакторов HTML, HomeSite и FrontPage, что позволяет студентам рассмотреть работу как редактора кода HTML, так и визуального редактора. Все это позволяет создавать полноценные электронные издания. Предназначено для студентов факультета журналистики. Пособие может быть полезно всем, кто хочет получить представление о веб-страницах и способах их создания. Подготовлено на кафедре прикладной информатики.

© Яснецкая В.Г., 2003 2

СОДЕРЖАНИЕ ВИДЫ ЭЛЕКТРОННЫХ ИЗДАНИЙ ...............................................................................................................................5 ГАЗЕТА, ЭЛЕКТРОННЫЙ ВАРИАНТ .......................................................................................................................................5 ЖУРНАЛ, ЭЛЕКТРОННЫЙ ВАРИАНТ .....................................................................................................................................6 КНИГИ, ЭЛЕКТРОННЫЙ ВАРИАНТ ........................................................................................................................................7 ИНФОРМАЦИОННЫЕ АГЕНТСТВА .........................................................................................................................................7 ОСНОВЫ HTML ..................................................................................................................................................................8 СТРУКТУРА ПРОСТЕЙШЕЙ ВЕБ-СТРАНИЦЫ:.........................................................................................................................8 АТРИБУТЫ............................................................................................................................................................................9 ОСНОВНЫЕ ТЕГИ:...............................................................................................................................................................10 ПРАВИЛА НАПИСАНИЯ HTML-КОДА. ...............................................................................................................................11 СПОСОБЫ ЗАДАНИЯ ЦВЕТА ..................................................................................................................................................0 СПЕЦИАЛЬНЫЕ СИМВОЛЫ. ..................................................................................................................................................1 АБЗАЦ

…

...............................................................................................................................................................2 ТЕГ .......................................................................................................................................................................2 ТЕГ .......................................................................................................................................................................2 ЛИНЕЙКА. ............................................................................................................................................................................3 ПРАКТИЧЕСКОЕ ЗАДАНИЕ 1. ................................................................................................................................................5 ГИПЕРССЫЛКА..................................................................................................................................................................6 СПОСОБЫ СОЗДАНИЯ И ВИДЫ ГИПЕРССЫЛОК .....................................................................................................................6 ПРОТОКОЛ MAILTO ..............................................................................................................................................................7 АТРИБУТЫ ТЕГА <А>…: .............................................................................................................................................7 ПРАКТИЧЕСКОЕ ЗАДАНИЕ 2. ................................................................................................................................................8 ДОБАВЛЕНИЕ ИЗОБРАЖЕНИЙ НА ВЕБ-СТРАНИЦУ ............................................................................................9 АТРИБУТЫ ТЕГА ......................................................................................................................................................9 ПРАКТИЧЕСКОЕ ЗАДАНИЕ 3. ..............................................................................................................................................11 СОЗДАНИЕ СПИСКОВ. ...................................................................................................................................................12 ПРАКТИЧЕСКОЕ ЗАДАНИЕ 4. ..............................................................................................................................................15 ТЕГ … ..................................................................................................................................................17 ПРАКТИЧЕСКОЕ ЗАДАНИЕ 5. ..............................................................................................................................................17 ТАБЛИЦЫ...........................................................................................................................................................................17 СОЗДАНИЕ ПРОСТОЙ ТАБЛИЦЫ..........................................................................................................................................17 АТРИБУТЫ ТЕГА :..............................................................................................................................................19 АТРИБУТЫ ТЕГОВ , , : атрибут

значение

описание

ALIGN

left, right, center, justify

Горизонтальное выравнивание

VALIGN

top, middle, bottom

Вертикальное выравнивание

плюс атрибуты

И	...........................................................................................................................21 ПРАКТИЧЕСКОЕ ЗАДАНИЕ 6. ..............................................................................................................................................23 ФРЕЙМЫ.............................................................................................................................................................................25 АТРИБУТЫ И .........................................................................................................................26 ПРАКТИЧЕСКОЕ ЗАДАНИЕ 7. ..............................................................................................................................................27 ФОРМЫ ...............................................................................................................................................................................29 ЭЛЕМЕНТЫ ФОРМ...............................................................................................................................................................30 TEXTAREA....................................................................................................................................................................30 SELECT.........................................................................................................................................................................30 TEXT .............................................................................................................................................................................31 PASSWORD ..................................................................................................................................................................32 CHECKBOX..................................................................................................................................................................32 RADIO...........................................................................................................................................................................33 RESET ...........................................................................................................................................................................33 SUBMIT ........................................................................................................................................................................34 ПРАКТИЧЕСКОЕ ЗАДАНИЕ 8. ..............................................................................................................................................34 HTML-РЕДАКТОРЫ .........................................................................................................................................................35 ALLAIRE HOMESITE .......................................................................................................................................................36 ИНТЕРФЕЙС ПРОГРАММЫ ..................................................................................................................................................36 СОЗДАНИЕ ПРОСТОЙ ВЕБ-СТРАНИЦЫ ................................................................................................................................37 СОЗДАНИЕ ССЫЛОК ...........................................................................................................................................................38 ВСТАВКА ИЗОБРАЖЕНИЙ ...................................................................................................................................................39 ФОРМАТИРОВАНИЕ ШРИФТА .............................................................................................................................................40 ТАБЛИЦЫ ...........................................................................................................................................................................41 MICROSOFT FRONTPAGE..............................................................................................................................................42 ПРОВОДНИК FRONTPAGE ...................................................................................................................................................42 РЕДАКТОР FRONTPAGE ......................................................................................................................................................45 Работа с ссылками и закладками..............................................................................................................................47 Графика во FrontPage.................................................................................................................................................48 Таблицы........................................................................................................................................................................49 Фреймы. .......................................................................................................................................................................51 3 СПИСОК ЛИТЕРАТУРЫ.................................................................................................................................................55 4 Виды электронных изданий Электронное периодическое издание – информация в электронном виде, периодически дополняемая и обновляемая. Она может быть размещена в локальной сети организации, в интернете. Все зависит от цели опубликования информации. Первый вариант используется, если нужно информировать сотрудников внутри фирмы, надежно скрыв данные от посторонних. Это может быть новостная рассылка, объявления на внутреннем сайте организации, общедоступное хранилище данных. Второй вариант, размещение в интернете, – для широкого круга читателей. Созданию подобного электронного издания посвящено данное пособие. Результатом будет выпуск электронной газеты на сайте вуза. Интернет – глобальная компьютерная сеть, объединяющая десятки миллионов людей по всему миру. Она стала неотъемлемой частью нашей повседневной жизни. Благодаря ей можно моментально передавать и получать информацию, независимо от местонахождения отправителя и адресата. Интернет позволяет публиковать любую информацию, делая её доступной миллионам людей по всему земному шару. Интернет предоставляет различные возможности: просмотр веб-страниц, проверка и отправка электронной почты, обмен файлами большого объема. За обмен файлами большого объема отвечает протокол FTP. При помощи FTP-клиентов можно перебрасывать любые файлы, доступ к которым открыт. Пример FTP-клиента – программа CuteFTP. Электронная корреспонденция хранится на почтовых серверах. Доступ к ним осуществляется через веб-интерфейс (сайт почтового сервера) или с помощью почтового клиента (например, Outlook Express). Веб-страница, html-документ или гипертекстовый документ представляет собой текст с гиперссылками. Гиперссылка – текст или картинка в окне броузера, при наезде мышкой на которую курсор принимает вид руки. При нажатии на неё осуществляется переход на другую веб-страницу. Сайт – один или несколько гипертекстовых документов, объединенных одной темой. Чтобы просмотреть какой-либо гипертекстовый документ в интернете, мы должны загрузить программу-броузер (например, Internet Explorer или Netscape Navigator). Электронные интернет-издания можно разделить на электронный вариант печатных изданий (газеты, журналы, книги) и информационные агентства. Рассмотрим более подробно каждый из вариантов. Газета, электронный вариант Это прежде всего копия печатного издания. Она должна быть узнаваема, что, безусловно, существенно ограничивает дизайнера интернет-варианта. У человека, впервые попавшего на сайт, не должно быть сомнений, что перед ним любимая газета в электронном виде. С другой стороны, многие посетители не знакомы с печатным оригиналом. Наша задача – привлечь их внимание и заставить 5 снова вернуться на сайт. Как этого можно добиться? Горячими новостями, яркими событиями, ссылки на которые есть на первой странице. Горячие новости означают частую обновляемость издания и быструю загрузку. Скорость загрузки в первую очередь зависит от количества графической информации. Чем меньше рисунков содержит веб-страница, тем быстрее посетитель её увидит. Совсем избежать графики не удастся: сплошной текст на экране выглядит не очень привлекательно. Но как бы ни был интересно оформлен и информационно наполнен сайт, всё впечатление могут испортить орфографические и грамматические ошибки. Исправлению их стоит уделить особое внимание. Выделим основные характеристики электронной газеты: • она должна быть похожа на печатный вариант, узнаваема (ограничения в дизайне) • акцент на новости и яркие события • минимум цветов. Оптимально – два, контрастные: черный текст на белом фоне или белый текст на черном фоне • минимум графики • «Нет ошибкам!» • частая обновляемость • быстрая загружаемость Журнал, электронный вариант В отличие от газеты структура данного издания более спокойная. Реже обновляется. Дизайн электронного и печатного вариантов может различаться. Но журнал, опять же, должен быть узнаваем в обоих вариантах. Обычно сохраняют цветовую схему и стиль печатного издания, но уменьшают рисунки. Фотографию на первой веб-странице сайта, которая грузится пять минут, мало кто дождётся. Несомненно, многие захотят посмотреть её в дальнейшем. В таком случае можно отдельные html-документы целиком посвятить рисункам или фотографиям, заранее предупреждая посетителей о размере загружаемых файлов. Оформляется предупреждение в виде надписи рядом с миниатюрой изображения. Большое внимание по-прежнему уделяется тексту. Привлечь посетителей можно оригинальным стилем шрифта, небольшим количеством анимации. • • • • • • 6 Основные характеристики журнала: больше внимание оформлению (интересный дизайн, оригинальный шрифт) наличие сходства с печатным изданием быстрая загружаемость начальной веб-страницы электронного варианта графика в отдельном разделе, миниатюры снабжены предупреждением о времени загрузки оригиналов читабельность текста «Нет ошибкам!» Книги, электронный вариант Это электронная библиотека. В газетах и журналах нужно обеспечить быстрый доступ к интересующей посетителя информации. Дальше человек будет смотреть, что ещё здесь интересного и полезного для него. На сайт-книгу пользователь заходит с вполне определённой целью. Он может подождать загрузки первой страницы. Но дальше наша задача – обеспечить быстрый путь к достижению цели его визита. Организация сайта должна быть похожа на систематический каталог. К одному и тому же документу, одной и той же странице пользователь должен иметь возможность добраться разными путями: вводя название книги; осуществляя поиск по фамилии автора, по тематике. Другими словами, необходимо предоставить посетителю несколько вариантов поиска. Таким образом, главные характеристики электронной книги: • • • • • • • четкое разделение по темам поиск автора по алфавиту поиск по теме поиск по ключевым словам возможность скачать заархивированный вариант минимум графики. Исключение – требования содержания книги неяркая цветовая гамма (лучше ограничиться черным текстом на белом фоне). Исключение – оформление первой страницы и меню. • красивый шрифт заголовков • особое внимание выбору стиля. Он должен соответствовать содержанию книги Информационные агентства Данный вариант равносилен сайту компании. Его посетители могут иметь цель, а могут иметь расплывчатое представление о ней. Здесь все средства хороши. Особое внимание – к организации и дизайну первой страницы. Она должна быть сформирована так, чтобы, во-первых, посетитель мог быстро найти нужный раздел и углубиться в его изучение; во-вторых, необходимо заманить блуждающего пользователя и определить для него цель, то есть заинтересовать его содержимым. • • • • • • • Характеристики: большой объём информации ветвистая структура новости сайта на первой веб-странице поиск по сайту оригинальный дизайн структуре сайта – отдельную веб-страницу быстрая загружаемость 7 Основы HTML С этой главы мы начинаем непосредственную разработку веб-страниц. Они создаются с помощью HTML – языка разметки гипертекста (Hyper Text Make up Language). Представьте себе следующую ситуацию. Преподаватель объясняет студентам, как нужно оформлять диплом: оглавление, название первой главы, основной текст главы, и т.д. Аналогично с помощью языка HTML, мы сообщаем броузеру, как он должен выводить веб-страницу на экран, задаем разметку. Как мы “размечаем” гипертекст? С помощью специальных элементов разметки – тегов. Теги, применённые к тексту, сообщают броузеру о структуре документа и о том, как документ должен выглядеть. Например, если нужно какую-то часть текста вывести жирным шрифтом, то её нужно окружить тегами выделения: Жирный текст. Тогда в окне броузера мы увидим: Жирный текст Существуют парные теги (состоящие из открывающего и закрывающего) и одиночные. Открывающий и закрывающий теги образуют контейнер, между ними располагается содержимое контейнера. Пример – …. Одиночные теги это так называемые пустые элементы, например , . Теги подразделяются по видам форматирования на теги структурного форматирования и теги физического форматирования. Первые задают структуру страницы, вторые – только оформление. Структура простейшей веб-страницы: <TITLE>Заголовок веб-страницы Текст моей первой веб-страницы Самый большой контейнер …. Он вмещает в себя всё содержимое html-файла, которое в свою очередь состоит из головы и тела. Голова … содержит дополнительную информацию о документе (заголовок <TITLE>…, мета-информацию). Мета-информация – это информация об информации. В случае веб-страницы это информация о самой веб- 8 странице. В теле … располагается то, что мы выводим на экран. Атрибуты. Практически у любого тега существуют атрибуты, т.е. свойства, изменяющие действие этого тега. В свою очередь, почти каждый атрибут может принимать различные значения. Синтаксис: <Имя тега Имя атрибута=“Значение атрибута”> Пример: Выравнивание по центру Атрибутов может быть несколько. Они отделяются один от другого и от имени тега пробелами. Пример. … У некоторых тегов не существует атрибутов. Например, тег начала новой строки . Некоторые атрибуты не имеют значений. Например, вывод на экран линии без тени: 9 Основные теги: Теги структурного (логического) форматирования: … … … … … … … … … … … … Абзац Центрирование Цитата Заголовки разных уровней. Н1 – самый большой, Н6 – самый маленький Переход на новую строку Выравнивание Преформатированный текст1 Горизонтальная линейка Подпись автора или адрес организации Комментарии2 Теги физического форматирования: … … … <STRIKE>…, <S>… <SUB>… <SUP>… … … <SMALL>… … Жирный Курсив Подчёркнутый Перечёркнутый Нижний индекс Верхний индекс Печатная машинка (моноширинный текст) Увеличенный шрифт (на один пункт больше) Уменьшенный шрифт (на один пункт меньше) Тег, задающий размер, цвет и начертание шрифта Преформатированный текст – текст, в котором сохранены все отступы, созданные с помощью клавиш “пробел” и “Enter” 2 Данный тег позволяет скрыть любой кусок текста или html-кода 1 10 Правила написания HTML-кода. 1. имена тегов и имена атрибутов регистронезависимы3 Пример. html-код: Жирный текст Жирный текст Жирный текст Вид в окне броузера: Жирный текст Жирный текст Жирный текст Рекомендуется имена тегов и атрибутов писать в верхнем регистре. Для удобства их отличия от остального текста. 3 11 2. значения атрибутов могут быть регистрозависимы Пример. Создание ссылки. photo.html и PHOTO.html – разные файлы! 3. между именем тега и именем атрибута, а также между атрибутами должен быть пробел 4. в именах тегов и атрибутов не должно быть пробелов 5. значения атрибутов нужно помещать в парные кавычки “…” 6. несколько пробелов подряд сжимаются в один 7. игнорируется ENTER для перевода строки 8. любой кусок HTML-кода или обычного текста может быть закомментирован. Закомментированную часть броузер игнорирует. 9. теги вкладываются друг в друга по принципу русских матрёшек. Сначала закрывается внутренний тег, потом внешний 10. броузеры игнорируют незнакомые теги и атрибуты. Способы задания цвета Число существующих цветов, вообще говоря, безгранично. Одни устройства способны воспринимать цвета (глаз человека), другие – воспроизводить (монитор, фотоснимок). Делают они это по-разному. Человеческий глаз воспринимает гораздо больше цветов, чем может передать экран или фотография. Другими словами, их цветовой охват – диапазон цветов, которые могут быть воспроизведены, – меньше, чем цветовой охват человеческого глаза. Из-за разницы в цветовых охватах различных устройств было создано несколько цветовых моделей. Например, RGB, CMYK, Lab. Ни одна из них не идеальна. Цветовые модели используются для взаимосвязи между устройствами с различными цветовыми охватами. Модель RGB предназначена для описания излучаемых цветов. Устройства, излучающие цвета: монитор, телевизор, проектор. Базовые компоненты этой модели основаны на трех цветах: красном (Red), зеленом (Green) и синем (Blue), так как человеческое восприятие цвета основано именно на них. Вся остальная палитра создается путём смешения трёх основных цветов в различных соотношениях. Чтобы задать цвет на веб-странице, необходимо соответствующему атрибуту присвоить буквенное названия цвета или шестнадцатеричный код цвета. Буквенное название: red, blue, white, black. Пример. Белый текст на черном фоне: Таким образом можно задать лишь небольшой набор базовых цветов. Основной способ – в виде кода. Шестнадцатеричный код в рамках модели RGB образуется следующим образом: #RRGGBB, где RR – две позиции, отведенные под красный цвет, GG – две позиции, отведенные под зелёный, BB – две позиции, отведенные под синий. Шестнадцатеричность: 0123456789ABCDEF min max #000000 соответствует черному цвету (все цвета выключены), #FFFFFF – белому (все цвета включены). Тогда красный цвет – #FF0000 (все цвета, кроме красного, выключены). Базовые цвета: #000000 – Black (чёрный) #C0C0C0 – Silver (серебристый) #808080 – Gray (серый) #FFFFFF – White (белый) #800000 – Maroon (коричневый) #FF0000 – Red (красный) #800080 – Purple (пурпурный) #FF00FF – Fuchsia (фуксия) #008000 – Green (зелёный) #00FF00 – Lime (салатовый) #808000 – Olive (оливковый) #FFFF00 – Yellow (жёлтый) #000080 – Navy (тёмно-синий) #0000FF – Blue (синий) #008080 – Teal (тёмный циан) #00FFFF – Aqua (циан) Специальные символы. Не все символы, набранные с клавиатуры, однозначно интерпретируются броузером. Чтобы вывести на экран такие символы, как “”, &, <, >, используемые при написании тегов, нужно использовать специальные коды. Синтаксис: &код; Числ. значение Букв. значение Символ Описание " " “ Кавычка & & & Амперсант < < < Знак “меньше” > > > Знак “больше”  Торговая марка ™     Неразрывный пробел © ©  Знак Copyright ® ®  Знак зарегистрированной товарной марки Абзац … Тег … используется для разметки абзацев. С помощью атрибута ALIGN задается горизонтальное выранивание текста. Варианты: left, center, right. Между абзацами расстояние несколько больше, чем между двумя строками одного абзаца. Тег Данный тег позволяет задать тип шрифта, его цвет и размер на части вебстраницы. Пример: Шрифт Arial Атрибут Значение Описание COLOR Yellow, ##FFFF00 Цвет текста FACE Arial Тип шрифта SIZE 5, +2 Размер кегля. Задается: целым числом от 1 до7, относительным размером с указанием знака + или - (происходит увеличение или уменьшение размера шрифта на заданное число пунктов). Тег То, что прописано в теге , влияет на всю веб-страницу целиком. Атрибуты этого тега задают цвет фона веб-страницы, фоновое изображение, цвет текста и ссылок, и т.п. Атрибут BGCOLOR Значение yellow Описание Цвет фона BACKGROUND Images/fon.gif Фоновое изображение TEXT black Цвет текста LINK blue Цвет не посещённой ссылки (по ней не щелкали мышкой) ALINK red Цвет активной ссылки VLINK navy Цвет посещённой ссылки LEFTMARGIN 15 Отступ от левого и правого краёв броузера до содержимого страницы, в пикселах TOPMARGIN 20 BGPROPERTIES fixed Отступ от верхнего и нижнего краёв броузера до содержимого страницы, в пикселах Имеет одно значение, fixed; заставляет фон-изображение не прокручиваться. Цвет текста части веб-страницы можно переопределить с помощью тега … и его атрибута COLOR. Пример. Вывести в центре крупным шрифтом “Моя первая вебстраница!”, отступив пять строк от верхнего края. Текст – розового цвета, фон – бордового. HTML-код: <TITLE>Выравниваем текст BGCOLOR=“maroon” TEXT=“pink”> Моя первая веб-страница! Линейка – тег, создающий горизонтальную линию. Это одиночный тег, у него нет закрывающего. Пример. Вывести линию толщиной 5 пикселей, занимающую половину экрана и выровненную по правому краю: HTML-код: Атрибут Значение Описание SIZE 5, 150% Размер, толщина линии WIDTH 100, 70% Длина линии ALIGN left, right, center, justify Выравнивание линии NOSHADE Убирает тень у линии. Не имеет значения. Практическое задание 1. Создаём первую веб-страницу будущего сайта. Добро пожаловать к Василию Васильевичу Васильеву – профессионалу своего дела! ВАСЯ ВАСЯ ВАСЯ © Пишите мне: [email protected] Для написания имени можно использовать заголовки разных уровней, разный цвет шрифта. Линии отличаются друг от друга по толщине и цвету. Самая нижняя строчка – курсивом. Файл сохраняем под именем index.html. Гиперссылка Способы создания и виды гиперссылок Гиперссылка (или просто ссылка) создаётся с помощью тега <А>…, так называемого якоря. HTML позволяет создать ссылку на веб-страницу, расположенную в любой точке мира. Таким образом все веб-страницы объединяются в одно глобальное пространство под названием WEB. Использование ссылок возможно потому, что любая веб-страница в WEB имеет свой уникальный адрес, который называется унифицированный указатель ресурса (uniform resource locator – URL). URL-адрес веб-страницы в якоре задаёт атрибут HREF. Текст, находящийся внутри контейнера <А>…, превращается в ссылку. Пример: Создание ссылки на сайт ИМПЭ им. А.С. Грибоедова HREF=“http://www.iile.ru”>ИМПЭ Если веб-страница, на которую нужно сделать ссылку, расположена на том же сервере, можно использовать абсолютный или относительный адрес. Абсолютный HREF=“C://3kurs/Ivanova/index.html”>Первая страница Относительный Если файл, на который создаём ссылку, расположен в той же папке (на том же уровне): HREF=“index.html”>Первая страница Если файл, на который создаём ссылку, расположен в другой папке. Например, на один уровень ниже в папке Images: HREF=“Images/photo.jpg”>Я в детстве Если файл, на который создаём ссылку, расположен в другой папке, на один уровень выше в папке 3kurs: Пробная страница Веб-страница, на которую переходим по ссылке, может открываться в том же окне, может создавать новое окно. При использовании фреймов, когда в окне броузера открываются одновременно несколько веб-страниц, можно перейти в любой из фреймов или загрузить страницу поверх всех фреймов. Более подробно о фреймах будет рассказано ниже (глава “Фреймы”). За направление перехода по ссылке отвечает атрибут TARGET. Если нужно сделать ссылку внутри одной веб-страницы, то необходимо сначала создать закладку в том месте, куда будет осуществляться переход. Пример. Создание ссылки внутри одной веб-страницы. … Первая закладка … а потом саму ссылку в любом месте веб-страницы: … HREF=“#metka1”>Переход к первой закладке … Протокол mailto Протокол mailto открывает окно почтового клиента, в котором можно создать и отправить почтовое сообщение по указанному адресу, если почтовый клиент настроен: HREF=“mailto:[email protected]”>Пишите мне письма Атрибуты тега <А>…: атрибут значение описание HREF www.iile.ru index.html #metka Задает адрес перехода по ссылке NAME metka Создает на странице закладку – место, к которому можно перейти по ссылке _self Открыть в том же окне или фрейме _top Открыть в том же окне поверх всех фреймов _blank Создать новое окно и открыть в нем _parent Открыть в родительском фрейме TARGET имя фрейма Открыть во фрейме “имя фрейма” (см. главу “Фреймы”) TITLE текст Текст-подсказка, виден при наезде мышкой. Практическое задание 2. Добавим на нашу страницу ссылки. Добро пожаловать к Василию Васильевичу Васильеву – профессионалу своего дела! ВАСЯ ВАСЯ ВАСЯ © резюме портфолио фото юмор Пишите мне: [email protected] Создадим также заготовки следующих веб-страниц: portfolio.html – “работа”; resume.html – “резюме”; photo.html – “фото”; humor.html – “юмор”. Каждая из новых страниц пока пустая, одна от другой отличаются лишь цветом фона. На первой странице свяжем ссылки с соответствующими файлами. Добавим протокол mailto к ссылке [email protected] Добавление изображений на веб-страницу На веб-странице можно размещать фотографии, простые и анимированные рисунки. В интернете используют в основном два формата для вывода на экран графической информации: JPG и GIF. Формат JPG применяют для вставки фотографий в веб-страницу. При малом объеме файла сохраняется качество фотоснимка с минимальными потерями. Формат GIF – для рисунков, поддерживает анимацию и прозрачность. Вставить изображение в текст веб-страницы можно с помощью тега , в котором атрибуту SRC присваивается URL-адрес картинки (аналогично HREF в якорях). – одиночный, у него нет закрывающего тега. Изображения лучше хранить в отдельной папке, чтобы отличать графическую информацию от текстовой. Пример: SRC=“images/photo.jpg”> Атрибуты тега атрибут SRC значение описание photo.jpg задает URL картинки ALT фото Всплывающая подсказка, появляющийся при наезде мышкой. Текст виден, когда отключен показ рисунков в броузере. ALIGN Left, right, Выравнивание center WIDTH 100, 50% Ширина изображения. Без её указания картинка выводится в натуральную величину. HEIGHT 100, 50% Высота изображения. Без её указания картинка выводится в натуральную величину. BORDER 5 Рамка вокруг рисунка HSPACE 0 Свободное пространство слева и справа от изображения VSPACE 10 Свободное пространство сверху и снизу от изображения Рисунки можно использовать в роли кнопок. Для этого тег изображения нужно поместить внутри контейнера – ссылки. Пример. HREF=“photo.html“> SRC=“images/button.gif”> Рисунок может быть фоном веб-страницы. Для этого к тегу добавляется атрибут BACKGROUD=”images/fon.jpg”. Пример. Практическое задание 3. Для дальнейшей работы нужно: • создать папку “images” на одном уровне с веб-страницами нашего сайта • взять из интернета 3-4 рисунка или фотографии • поместить всё найденное в папку “images” • Добавим на нашу первую страницу фотографию или рисунок. Можно также подобрать картинку для фонового изображения. Теперь первая страница выглядит следующим образом: Добро пожаловать к Василию Васильевичу Васильеву – профессионалу своего дела! ВАСЯ ВАСЯ ВАСЯ © портфолио резюме фото юмор Пишите мне: [email protected] Теперь займемся страницей photo.html. Вставляем рисунки на страницу, задаем им размер 50Х50. У нас получились так называемые иконки – миниатюры больших изображений. Иконки обычно располагаются в самом верху страницы в одной строке. Следующий шаг – добавление на страницу оригиналов один под другим. Можно добавить описание фотографии под ней. Теперь каждую из иконок мы превращаем в ссылку на большой вариант этого же изображения, расположенный на той же веб-странице ниже (см. пример создания ссылки внутри одного html-документа в предыдущей главе). Создание списков. С помощью HTML можно создать 3 вида списков: нумерованные, маркированные и списки определений. 1) нумерованные HTML-код: Вид в окне броузера: b) текст текст c) текст текст . . атрибут значение описание COMPACT - Вывод списка в боле компактном виде (часто игнорируется броузерами) START 3 Значение (число), с которого начинается нумерация TYPE А, а, I, i, 1 Задаёт тип номера VALUE всегда число Переопределяет номер одного элемента списка 2) маркированные HTML-код: Вид в окне броузера: ○ текст текст ■ текст текст ● текст текст . . атрибут значение описание TYPE circle square disc ○ ■ ● Задаёт тип маркера 3) списки определений HTML-код: Вид в окне броузера: термин 1 термин 1 определение термина 1 термин 2 определение термина 2 . . Списки могут вкладываться один в другой. Пример. Создать список следующего вида: 1. Положительные черты: ● коммуникабельность ● оптимизм ● высокая обучаемость 2. Отрицательные черты: ● легковерность ● ненадежность ● быстро устаю HTML-код: Положительные черты: коммуникабельность оптимизм высокая обучаемость Отрицательные черты: определение термина 1 термин 2 определение термина 2 легковерность ненадежность быстро устаю Практическое задание 4. 1. Оформляем резюме. За основу берем шаблон Word “Изысканное резюме“. Повторить форму возможно при использовании вложения маркированного списка в список определений. resume.html: СЕРГЕЙ АЛЕКСЕЕВ ЦЕЛЬ Менеджер, руководитель подразделения фирмы. ОПЫТ РАБОТЫ ■ ■ ■ 1990–1994, Предприятие “Башмачок“ Москва Руководитель планового отдела Введена новая система планирования. Увеличены объемы продаж на 13%. Уменьшены издержки производства на 23%. 1985–1990 Предприятие “Башмачок“ Москва Заместитель руководителя планового отдела Увеличены объемы продаж на 7%. Организована единая компьютерная сеть. Введены в строй 4 филиала предприятия. 1980–1984, Трикотажная фабрика № 3 Старший экономист Введена новая система расчетов с торговлей. Улучшена связь с поставщиками. Стажировка на головном предприятии. Москва ОБРАЗОВАНИЕ 1971–1975, Институт легкой промышленности Факультет: Экономика легкой промышленности. Специальность: Экономист. Москва УВЛЕЧЕНИЯ Компьютеры, автомобили, чтение. 2. Оформляем страницу юмора. Пять анекдотов или коротких смешных рассказов расположить один под другим и отделить один от другого горизонтальной линией, занимающей 70% экрана. У каждого анекдота или рассказа должен быть свой цвет текста. humor.html: Коврик для мыши выполнил недопустимую операцию и будет свернут. Деньги не пахнут, но улетучиваются. Больше всего жертв требует военное искусство. Ты, работа, нас не бойся, мы тебя не тронем. Тег … Тег-контейнер содержит техническую информацию о вебстранице. С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для посетителей веб-страницы, но просто незаменимая для правильной индексации страницы роботами поисковых серверов. Описание происходит при помощи тегов TITLE, BASE, STYLE, LINK, META. <TITLE> присваивает веб-странице заголовок, по которому её распознаёт броузер и поисковые роботы. Отображается в строке заголовка окна броузера. Пример. <TITLE>Моя персональная страница С помощью тега <META> определятся информация, описывающая вебстраницу и используемая поисковыми системами. <META NAME=“description” CONTENT=”Описание веб-страницы”> <META NAME=“keywords” CONTENT=”ключевые слова поиска”> Практическое задание 5. Добавить описание и ключевые слова на первую страницу нашего сайта. HTML-код: <META NAME=“description” журналиста”> CONTENT=”Cтраница <META NAME=“keywords” CONTENT=”Васильев журналистика”> начинающего В.В., веб- дизайн, <TITLE>Добро пожаловать к Васильеву В.В.! Таблицы. Таблицы HTML используются для вывода на экран табличных данных, а также для компоновки и дизайна всего содержимого страницы. Создание простой таблицы Пример. Вывод на экран табличных данных. Нужно создать таблицу 2X3 следующего вида: Заголовок таблицы 1-ый столбец 2-ой столбец ААА ВВВ ААА ВВВ HTML-код этой таблицы: Заголовок таблицы 1-ый столбец 2-ой столбец ААА ВВВ ААА ВВВ Рассмотрим второй вариант использования таблиц HTML. Различают два типа компоновки данных на странице – “жесткий” и “резиновый” дизайн. В первом случае размеры таблицы задаются в пикселях. Во втором – в процентах. При использовании “резинового” дизайна ширина и высота веб-страницы как бы подстраивается под размер и разрешение экрана посетителя. Полезная площадь экрана используется на максимум, а горизонтальная полоса прокрутки появится лишь в случае оконного режима просмотра. Вертикальную полосу прокрутки нельзя избежать при большом объеме информации. Но использование “резинового” дизайна хорошо лишь для текста. Растянутые или сжатые картинки выглядят не очень привлекательно. Пример. Расположить букву А в центре страницы. Вид таблицы в окне броузера: А HTML-код таблицы: А WIDTH=“100%” и HEIGHT=“100%” – соответственно ширина и высота полезной площади окна броузера. Атрибут VALIGN отвечает за выравнивание по вертикали. Более подробно все атрибуты описаны ниже. Независимо от размеров монитора и разрешения экрана посетителя этой страницы, буква А всегда будет в центре. Атрибуты тега : атрибут значение описание BORDER 2 (пикселы) Толщина рамки таблицы ROWS 3 (шт) Кол-во строк таблицы COLS 2 (шт) Кол-во столбцов таблицы WIDTH 80, 20% (пикселы или %) Ширина таблицы HEIGHT 80, 20% (пикселы или %) Высота таблицы BGCOLOR Red, #ff0000 Цвет фона таблицы BACKGROUND images/fon.gif Фоновая картинка BORDERCOLOR Red, #ff0000 Цвет рамки таблицы ALIGN center, right, left, justify Выравнивание FRAME см. ниже Рамка вокруг таблицы RULES см. ниже Линии в сетке между ячейками CELLPADDING 1 Расстояние между границей ячейки и данными в ней CELLSPACING 5 Свободное пространство внутри таблицы между ячейками Атрибут FRAME задаёт рамку, окружающую таблицу. Может принимать следующие значения: значение действие ABOVE Вывести верхнюю линию рамки BELOW Вывести нижнюю линию рамки BORDER Вывести все линии рамки BOX Вывести все линии рамки HSIDES Вывести верхнюю и нижнюю линии рамки LHS Вывести левую линию рамки RHS Вывести правую линию рамки VOID Не выводить рамку вообще VSIDES Вывести левую и правую линии рамки Атрибут RULES определяет вывод линий в сетке между ячейками. Его значения и их описание представлены в таблице ниже. значение действие ALL Вывести линии во всех рядах и столбцах GROUPS Вывести горизонтальные линии между всеми группами таблицы, определёнными в тегах , , COLS Вывести вертикальные линии между столбцами таблицы NONE Не выводить никаких линий внутри таблицы (по умолчанию) ROWS Вывести горизонтальные линии между всеми рядами таблицы Пример. Вывести на экран таблицу вида: Первая строка Вторая строка Третья строка HTML-код этой таблицы: RULES=“rows” FRAME=“void” CELLSPACING=“0”> BGCOLOR=“gray”> Вторая строка Первая строка Третья строка Атрибуты тегов
и	Атрибуты

Атрибуты

и	: атрибут значение описание ALIGN left, right, center, justify Горизонтальное выравнивание VALIGN top, middle, bottom Вертикальное выравнивание COLSPAN 2 (шт) объединение ячеек по горизонтали ROWSPAN 3 (шт) объединение ячеек по вертикали плюс атрибуты Пример. Объединение ячеек. 1) Объединение ячеек по горизонтали: А B C Описание в html-виде: COLSPAN=“2” ALIGN=“cente”r>А В C 2) Объединение ячеек по вертикали: В А С D Описание в html-виде: BORDER=“1” >
А	В
C
D

Внимание! Не нужно указывать соответсвующие размеры в объеденённых ячейках! В случае объединения по вертикали можно задать только ширину, при объединении по горизонтали – только высоту. По умолчанию данные в ячейках таблицы выравниваются по горизонтали (ALIGN) по левому краю (left) и по вертикали (VALIGN) – по середине (middle). Таблицы могут вкладываться одна в другую. Но не стоит увлекаться. Используйте не более 3-х уровней вложения. Более сложную конструкцию труднее обновлять, находить и исправлять в ней ошибки.

Пример. Вложенные таблицы.

A

B C

D

Описание в html-виде:


BORDER=“1”>

A

В

C

D

Практическое задание 6. 1. Пришло время окончательно оформить первую страницу нашего сайта. Добавляем ссылки: “как меня найти”, “партнеры”. Три ссылки располагаем слева от фотографии, три - справа. Для этого создаем таблицу 100%Х100% из пяти строк и трех столбцов. В нее помещаем все содержимое веб-страницы. Ячейке с фотографией задаем жесткие размеры - в пикселах, соответственно размерам фотографии. На меню слева отводим 50% и на меню справа - 50%. В объединенных ячейках соответствующие размеры не задаем! Обновленная страница index.html:

Добро пожаловать к Василию Васильевичу Васильеву – профессионалу своего дела!

резюме

фото

партнеры

юмор

как меня найти

портфолио

Пишите мне: [email protected]

2. Оформляем раздел “партнеры”, файл partners.html. Необходимо разместить фотографию и минимальные данные о каждом из партнеров (9 человек). Располагаем фотографии и текст в шахматном порядке:

3. Страница “фото” нуждается в доработке. Иконки вверху страницы следует поместить в таблицу из одной строки и выровнять по центру. Большие фотографии, расположенные ниже, также помещаем в таблицу, состоящую из одного столбца.

Фреймы. При использовании фреймов окно броузера делится на несколько частей, в каждой их которых отображается отдельная веб-страница. Часть окна броузера, в которой отображается одна веб-страница, и есть фрейм. Таким образом можно просматривать несколько веб-страниц одновременно. Из одного фрейма можно управлять другими. Для вывода на экран двух страниц нужно создать 3 файла: 2 – вебстраницы, которые будут отображаться во фреймах, + 1 – описание фреймовой структуры. Файл с фреймовой структурой отличается от обычной веб-страницы отсутствием тега …. Его заменяет контейнер …, описывающий количество, размеры и расположение фреймов. Тег отвечает за конкретный фрейм. В нем указывается адрес загружаемой в этот фрейм веб-страницы, имя фрейма. Сколько фреймов задано во , столько будет тегов внутри контейнера …. Пример. Вывести на экран в две колонки веб-страницы first.htm и second.htm. Ширину левой колонки сделать равной 200 пикселей. Файл с фреймовой структурой – frames.html. Вид окна броузера:

HTML-код frames.html: <TITLE>использование фреймов


SRC=“second.htm” NAME=“right”>

Данная страница содержит фреймы. Переход на безфреймовый вариант <A HREF=“noframe.htm” rel="nofollow">здесь.</A> HTML-код first.htm: <TITLE>левый фрейм

левый
фрейм

HTML-код second.htm: <TITLE>правый фрейм

правый фрейм

Тег-контейнер … рекомендуется включать, так как не все версии броузеров поддерживают фреймы. Атрибуты и Атрибуты :

Атрибут

Значение

Описание

COLS

100,*

Количество и размеры колонок

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

ROWS

50,*

Количество и размеры строк

BORDER

5

Ширина рамки

BORDERCOLOR

Red, #ff0000

Цвет рамки таблицы

FRAMEBORDER

No, yes

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

FRAMESPASING

0

Расстояние между фреймами

Атрибуты тега : Атрибут

Значение

Описание

SRC

One.html

Адрес загружаемого во фрейм файла

NAME

first

Имя фрейма

NORESIZE

-

Обозначает, что границы фрейма нельзя переместить

SCROLLING

Yes, no, auto

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

FRAMEBORDER

Yes, no

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

MARGINHEIGHT 0

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

MARGINWIDTH

Отступ от верхней и нижней границ фрейма до его содержимого

0

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

страницу обновляется только нижняя часть экрана, а меню остается на месте. Исключение составляет первая страница, на которой все ссылки уже есть и необходимость во фреймовой структуре отпадает. Можно было бы добавить ссылки на все страницы и не использовать фреймы вообще. Но тогда при прокрутке страниц большого объема (например, photo.html) меню уйдет из поля видимости, что осложнит переход по ссылкам. Алгоритм действий: 1. Создаем menu.html – файл со ссылками на все страницы сайта. Обязательна ссылка на главную страницу! Удобнее всего оформить его в виде таблицы без, состоящей из одной строки и семи столбцов. 2. Создаем файл с фреймовой структурой resume_fr.html, который разбивает окно броузера на два горизонтальных фрейма. Размер верхнего, NAME=“up”, 70 пикселей. На нижний, NAME=“down”, отводим оставшуюся часть. В верхний фрейм загружаем menu.html, в нижний - resume.html. 3. При щелчке по ссылке в меню запрашиваемая веб-страница должна открываться в нижнем фрейме. Для этого ко всем ссылкам в menu.html, кроме ссылки на первую страницу сайта, необходимо добавить атрибут TARGET, значение которого равно имени нижнего фрейма, TARGET=“down”. Таким образом, верхний фрейм управляет нижним. В случае ссылки на первую страницу TARGET=“_top”. 4. В index.html в ссылке “резюме” изменяем значение атрибута HREF: резюме 5. Аналогично (см. пункт 2) создаем следующие файлы: hpoto_fr.html humor_fr.html partners_fr.html portfolio_fr.html find_fr.html 6. Изменяем значение атрибута HREF у соответствующих ссылок в index.html (см. пункт 4)

Формы Форма может содержать в себе несколько полей ввода, информация из которых будет по команде пользователя пересылаться на сервер. У формы может быть имя, позволяющее обращаться к ней и к любым элементам, входящим в неё, из внешних программ. Для формы может быть назначен обработчик формы – программа, выполняемая на сервере. Форма в веб-странице размещается в контейнере

…

. Внутри самой формы может располагаться обычный текст, таблицы, картинки, ссылки, а также элементы форм, такие как раскрывающиеся меню, текстовые поля, кнопки. Существует 3 типа элементов: - определяет текстовое поле любого размера; <SELECT> - предоставляет возможность выбора значений из списка; <INPUT> - другие типы ввода информации: отдельные строки текста, переключатели, флажки, кнопки передачи запроса и отказа от ввода. Все элементы формы должны иметь имя. Элементы формы изменяются пользователем и определяют содержание формы. Содержимое заполненной формы подаётся на обработку: передаётся удалённой программе, которая обрабатывает полученные данные, или отправляется пользователю по почте, чтобы он проверил данные. Чтобы форма заработала, необходимо указать: • адрес программы-обработчика (ACTION); • метод передачи данных (METHOD); • способ шифрования данных формы (ENCTYPE). Форма для отправки данных на e-mail выглядит так: METOD=”POST” <FORM ACTION=mailto:admin@iile.ru ENCTYPE=”text/plain”> …здесь располагаются элементы формы… </FORM> METHOD Существует два метода отправки данных из формы, то есть два значения у атрибута METOD. При использовании метода POST данные из формы помещаются прямо в URL. При использовании метода GET данные из формы помещаются сразу же после URL. Второй метод подразумевает два обращения к веб-серверу; этот метод удобен для передачи больших объёмов информации. ENCTYPE Как правило, данные из формы кодируются по тем же принципам, что и URL: пробелы заменяются на “+”, нестандартные символы на “%КодСимвола”. С помощью атрибута ENCTYPE можно изменить метод кодирования. Например, при использовании метода кодирования text/plain, удобного для протокола mailto, каждое поле формы записывается в отдельную стоку.<br /> <br /> Элементы форм TEXTAREA <TEXTAREA> - текстовое поле любого размера. По умолчанию формируется чистое поле, состоящее из 4-х строк по 40 символов в каждой. Можно указать некоторый текст по умолчанию, поместив его внутрь контейнера <TEXTAREA> … . Атрибуты : атрибут<br /> <br /> значение<br /> <br /> описание<br /> <br /> ROWS<br /> <br /> 5<br /> <br /> Число строк в поле.<br /> <br /> COLS<br /> <br /> 50<br /> <br /> Кол-во символов в строке.<br /> <br /> NAME<br /> <br /> Komment<br /> <br /> Имя поля. Обязательный атрибут.<br /> <br /> Пример. Вид в окне броузера:<br /> <br /> html-код: Укажите доп. сведения о себе:<br> <TEXTAREA ROWS=“5” cols=“30“> Я хороший! SELECT <SELECT> - список значений выпадающего меню или списка. Эти значения перечислены внутри контейнера <SELECT>… с помощью тегов . Можно указать некоторый текст по умолчанию, поместив его внутрь контейнера … . Атрибуты <SELECT>: атрибут SIZE

значение

описание

5

Число выводимых на экран пунктов.

MULTIPLE -

Режим выбора нескольких значений.

NAME

Имя поля. Обязательный атрибут.

Komment

Пример. Раскрывающийся список. Вид в окне броузера:

html-код:

Образование:
<SELECT NAME =”Menu”>
VALUE=”1”>среднее

незаконченное высшее высшее Атрибуты : атрибут VALUE

значение

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

любое

SELECTED -

Делает данный элемент списка выбранным.

TEXT - однострочное текстовое поле. Атрибуты: атрибут

значение

описание

SIZE

40

Длина поля (в символах)

MAXLENGTH

70

Максимальное кол-во символов, которое можно записать в поле

VALUE

Введите Ваше имя

Текст по умолчанию

TYPE

Text password checkbox radio

текстовое поле поле для ввода пароля флажок переключатель

NAME

Klient

Имя элемента формы.

Пример. Вид в окне броузера:

html-код: Введите Ваше имя:


PASSWORD - поле для ввода пароля. Атрибуты те же, что и у простого текстового поля. Отсутствует лишь VALUE. Пример. Вид в окне броузера:

html-код: Введите пароль:

TYPE=“password”

CHECKBOX
NAME=“Klient_ID”

SIZE=“30”>

NAME=“flag1”> - флажок, который можно

Атрибуты: атрибут

значение

описание

CHECKED

-

Установка флажка по умолчанию

NAME

flag1

Имя элемента формы.

VALUE

любое

Отсылается серверу

Пример. Вид в окне броузера:

html-код: Какими иностранными языками владеете?

TYPE=“checkbox”

NAME=“flag1”>английский



TYPE=“checkbox”

NAME=“flag2”>немецкий



TYPE=“checkbox”

NAME=“flag3”>французский



TYPE=“checkbox”

NAME=“flag4”>итальянский



TYPE=“checkbox”

NAME=“flag5”>испанский

RADIO зелёный жёлтый красный - группа переключателей. Предлагается выбор только одного из родственных элементов. Объединяются в одну группу с помощью одинакового значения атрибута NAME. Атрибуты: атрибут

значение

CHECKED

описание Установка флажка по умолчанию

NAME

flag1

Имя элемента формы.

VALUE

любое

Отсылается серверу

Пример. Вид в окне броузера:

html-код: Уровень знаний ПК:
нет
пользователь
нутый пользователь
граммист


продвипро-

RESET - кнопка, с помощью которой можно отменить всю введённую в форму информацию, восстановив первоначальные значения. По умолчанию на кнопке устанавливается надпись ”reset” (в русских версиях броузерах - “сброс”), её можно изменить с помощью атрибута VALUE.

Пример. Вид в окне броузера:

html-код: SUBMIT - кнопка, с помощью которой можно отправить на сервер данные, введённые в форму. По умолчанию на кнопке устанавливается надпись ”submit” (в русских версиях броузерах - “подача запроса”), её можно изменить с помощью атрибута VALUE. Пример. Вид в окне броузера: html-код: Практическое задание 8. Создать форму для добавления анекдотов на страницу юмора следущего вида:

Данные из формы должны отправляться на электронный почтовый ящик автора сайта.

HTML-редакторы Инструменты разметки гипертекста на языке HTML, позволяющие создавать веб-странички, называются HTML-редакторами. Для написания кода HTML можно использовать текстовый редактор, например Notepad (Блокнот), поставляемый вместе с Windows, любой специализированный, а также средства публикации и конвертирования различных файлов в гипертекст. HTML-редакторы делятся на две категории: визуальные и редакторы кода. Различия – в методах представления веб-страницы. Визуальные редакторы представляют страницу такой, какой она будет в окне броузера. Код HTML встроен в страницу, но скрыт от автора, который не работает с ним напрямую. Вы вводите текст, а редактор сам встраивает необходимые теги. Визуальные редакторы обеспечивают более или менее точное соблюдение принципа WYSIWYG (What You See Is What You Get – что вы видите, то вы и получаете). Редакторы кода выводят на экран в качестве основного представления страницы исходный HTML-текст, предоставляя при этом в распоряжение автора мощные средства добавления и редактирования тегов HTML, избавляющие от необходимости писать HTML-код вручную. Чтобы оценить сделанные изменения, необходимо загрузить веб-старницу в броузер и просмотреть её там. В обоих типах редакторов используются похожие средства создания и редактирования страниц. Кнопки инструментальной панели дают возможность быстрого добавления на страницу изображений, списков и ссылок, или тегов, служащих для размещения этих элементов на странице. Как правило, они вызывают диалоговые окна, которые помогают на всех этапах проектирования. Многие редакторы содержат "мастеров", которые автоматизируют процесс создания страниц и способны помочь при построении форм, навигационных карт и более сложных элементов. Несомненно, пользоваться редакторами WYSIWYG легче, поскольку они изолируют автора от непростого синтаксиса HTML. Недостаток визуальных инструментов в том, что веб-старница далеко не всегда одинаково выглядит в редакторе и в броузере. При этом они сильно «загрязняют» HTML-код комментариями и пустыми тегами. Дело в том, что при удалении какого-либо элемента с веб-старницы в визуальном редакторе удаляется только содержимое (например, текст из заголовка), а сама конструкция остается (тег заголовка). Редакторы кода предоставляют более мощные и гибкие средства. Они заставляют уделять большее внимание тексту программы, который стоит за документом. Однако в этом случае необходимо владеть языком HTML. Рассмотрим два типа редакторов на примере Allaire HomeSite и Microsoft FrontPage.

Allaire HomeSite Интерфейс программы Allaire HomeSite – один из самых популярных редакторов кода. Он позволяет изменять html-код существующих веб-страниц, создавать новые гипертекстовые документы, поддерживать целые сайты. При запуске программы открывается окно, внешний вид которого представлен на рисунке: Панель редактирования

Панель вставки тегов

Главная панель инструментов Выбор диска Папки выбранного диска

Список файлов выбранной папки

Рабочее пространство

Закладки открытых веб-страниц

Многие кнопки Главной панели инструментов и некоторые пункты меню редактора аналогичны другим приложениям Windows. Например, чтобы открыть какой-либо файл (веб-страницу) для редактирования, необходимо нажать соответствующую кнопку панели инструментов или выбрать пункт меню File и в нем команду Open. Htmlкод открытой веб-старницы отобразится в рабочем пространстве окна программы. Организация файловой системы во многом похожа на Проводник Windows. Выбираем диск (см. на рисунке “Выбор диска”), выбираем папку в соответвующем окне, двойным щелчком открываем нужный файл в списке файлов. Любой файл из списка можно переименовать, скопировать, переместить, удалить или создать новый. Для этого необходимо щелкнуть правой кнопкой мы-

ши на имени файла и выбрать из открывшегося контекстно-зависимого меню: File/Rename, File/Copy to…, File/Move to…, File/Delete, File/Create here. Для создания новой веб-страницы нужно щелкнуть по кнопке “New” Главной панели инструментов или выбрать пункт меню File и в нём команду New. В новую веб-страницу автоматически вставляются основные теги: , , <TITLE>, . Если в веб-страницу вносились изменения, и она не была сохранена, её имя на закладке открытых веб-документов будет выделено синим цветом и помечено значком “X”. Есть два варианта сохранения изменений: сохранить только видимую веб-страницу (“Save”) и сохранить все открытые веб-страницы (“Save All”). Для просмотра веб-страницы, её необходимо сохранить. Далее выбираем кнопку “View External Browser List” на панели инструментов. Автоматически запустится Internet Explorer, в окне которого отобразится просматриваемая веб-страница. Если на компьютере установлено более одного броузера, откроется диалоговое окно выбора броузера. Создание простой веб-страницы Редактировать html-код в редакторе HomeSite легко и просто. Алгоритм вставки тегов: 1. установить курсор в то место, куда будем вносить изменения 2. выбрать соответсвующую закладку на Панели вставки тегов (Common, Fonts, Tables и т.д.) 3. щелкнуть по кнопке нужного тега. Пример. Создать на странице заголовок “Иванов Иван” и расположить его посередине. Текст розового цвета на бардовом фоне. Действия: 4. Создаем новую страницу 5. Устанавливаем курсор внутри контейнера … 6. Выбираем на Панели вставки тегов закладку Common, на ней кнопку 7. Выбираем на Панели вставки тегов закладку Fonts, на ней кнопку 8. Набираем тескт “Иванов Иван” 9. Сохраняем веб-страницу 10. Просматриваем результат. Заголовок расположен посередине. 11. Возвращаемся в окно редактора. Осталось задать цвет фона и текста. Замечание. Задать цвет в HomeSite можно с помощью кнопки

“Palette” Главной панели инструментов. 12. Ставим курсор в тег перед закрывающей скобкой и нажимаем пробел. Появляется подсказка:

Это набор атрибутов, которые можно использовать в данном теге. 13. Выбираем атрибут bgcolor и присваиваем ему значение maroon. Ещё один пробел после bgcolor, выбираем другой атрибут text. У него будет значение pink. 14. Снова сохраняем документ и просматриваем в броузере. Готово! Существует ещё один способ изменения внешнего вида всей страницы – через окно свойств тега . Для вызова окна свойств нужно щелкнуть правой кнопкой мыши на имени тега и выбрать Edit Tag… . В открывшемся окне можно сразу задать цвет фона или фоновый рисунок, цвет текста и ссылок, заголовок документа:

Создание ссылок Для создания ссылки нужно: 1. Выделить текст, который будет ссылкой. 2. Щелкнуть кнопку “Якорь” на панели вставки тегов (закладка Common). Введенный текст отобразится в поле Description. 3. В поле HREF ввести URL-адрес перехода по ссылке (например, http://www.iile.ru)

4. Щелкнуть по кнопке ОК.

• Вставка изображений Для вставки изображения нужно: • Установить курсор в место будущего расположения картинки, • Щелкнуть кнопку “Image” на панели вставки тегов (закладка Common),

• В поле Source через обзор (кнопка • В поле Alt задать текст-подсказку • Щелкнуть по кнопке ОК.

) выбрать файл изображения,

Форматирование шрифта Редактор Homesite предоставляет широкие возможности для оформления текста. Можно задать цвет, тип шрифта, размер кегля, написание верхним и нижним индексом как на всей веб-странице, так и на любой её части. Для начала работы необходимо выбрать на Панели вставки тегов закладку Fonts (Шрифт). Она содержит следующие компоненты:

1

2

3

4

5

6

7

8

9

10

1 – вставка тега 2 – увеличение/уменьшение размера кегля на один пункт 3 и 5– жирный шрифт 4 и 6 – курсив 7 – создание преформатированного текста (сохранение всех отступов, набранных с клавиатуры) 8 – создание заголовков разных уровней (H1 – самый крупный, H6 – самый маленький) 9 – нижний индекс 10 –верхний индекс Тег позволяет применить несколько видов форматирования сразу: изменить цвет, размер, начертание шрифта. Изменить его можно следующим образом: щелкнуть правой кнопкой мыши на имени тега и выбрать “Edit Tag...” из раскрывшегося списка:

Чтобы изменения вступили в силу нужно нажать кнопку “Apply” (“Применить”). Таблицы Создание и изменение таблиц HTML в HomeSite удобно производить, используя закладку “Tables” Панели вставки тегов.

1

2

3

4

5

6

7

8

9

10 11

1 – создание таблицы при помощи мастера 2 – вызов диалогового окна свойств таблицы 3 – вызов диалогового окна свойств строки 4 – вызов диалогового окна свойств заголовка столбца 5 – вызов диалогового окна свойств таблицы 6 – вставка тега 7 – вставка тега 8 – вставка тега

11 – быстрое создание таблицы

Microsoft FrontPage MicrosoftFrontPage - многофункциональный инструмент WYSIWYG, позволяющий быстро и легко создавать, размещать и управлять сложными информационными узлами Web. Программа содержит шаблоны и "мастера", которые помогают начать работу. Персональный Web-сервер дает возможность разработать и на месте протестировать Web-узел, скопировать целиком всю информацию узла на сервер и просматривать и обновлять узел по мере необходимости. MicrosoftFrontPage позволяет встраивать формы, таблицы, навигационные карты, кадры и системы поиска в страницы, а также легко создавать обычные ссылки, изображения и текст. Средства редактирования, имеющиеся в программе Microsoft FrontPage, представлены двумя компонентами: Explorer (Проводник), который служит для создания и управления полными узлами Web, и Editor (Редактор) - для редактирования страниц. Проводник FrontPage Проводник FrontPage дает возможность представить вид сайта различными способами и манипулировать им, как единым целым. При любой модификации сайта Проводник FrontPage сам внесет необходимые изменения во все схемы и не придется исправлять их вручную каждую по отдельности. В Проводнике можно проверять ссылки и производить прочие манипуляции сразу по всему сайту.

Список недавно открывавшихся сайтов

Дополнительный список сайтов в диалоге Open FrontPage Web.

Всегда открывать последний сайт

При запуске Проводника появляется диалоговое окно Getting Started (Начинаем). Далее есть два варианта действий: • Open an Existing FrontPage Web (Открыть существующий сайт FrontPage); • Create a New FrontPage Web (Создать новый сайт FrontPage).

Типы сайтов FrontPage, которые можно создать: • One Page Web (Одностраничный сайт); • Import an Existing Web (Импортировать существующий сайт); • From Wizard or Template (С помощью мастера или по шаблону); Можно дать сайту другое название (по умолчанию – My New Web) или изменить его местоположение. После открытия или создания сайта открывается окно Проводника FrontPage, который предоставляет несколько режимов простотра сайта. Рассмотрим их.

Выбор типа сайта

Список шаблонов и мастеров

Название сайта

Добавить к текущему сайту

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

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

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

Структура папок (Folders View) Для переключения в режим просмотра структуры папок необходимо щелкнуть на значке Folders (Папки) на панели Views или выбрать в меню View (Вид) пункт Folders. В режиме обзора папок экран справа от панели

Views разделен по вертикали на два окна. В левом окне отображается структура папок сайта. В правой части окна располагается список содержимого папки, выбранной (подсвеченной) в левой части. Список файлов (All Files View) Для перехода в режим списка файлов необходимо щелкнуть на панели Views по значку All Files или выбрать в меню View пункт All Files. В этом режиме все составляющие сайт файлы сведены в единый линейный список. Работа в этих двух режимах очень похожа на работу программы Проводник Windows. Карта навигации (Navigation View) Возможность визуального проектирования структуры сайта. Чтобы рассмотреть сайт с точки зрения навигации, необходимо выбрать значок Navigation на панели Views или пункт Navigation в меню View. В этом режиме каждая страница представляется в виде прямоугольника. Для изменения структуры сайта нужно мышью перетащить любую страницу из одного места в другое, при этом проводник FrontPage отображает линию связи. Можно, например, практически любую страницу “оторвать“ от одной страницы и “прикрепить“ к другой, или удалить страницу из структуры. Если страницы нет на карте навигации, то ее можно добавить, перетащив значок страницы из списка файлов на карту навигации. Чтобы произведенные в структуре сайта изменения вошли в силу, необходимо щелкнуть на верхней панели карты правой кнопкой мыши и выбрать из контекстного меню Apply Changes (Применить изменения). Схема гиперссылок (Hyperlinks View) На схеме гиперссылок (Hyperlinks View) FrontPage демонстрирует графическое представление ссылок между частями Web-сайта. Для перехода в этот режим выберите в меню View пункт Hyperlinks (Гиперссылки). Другой способ — щелкнуть на значке Hyperlinks на панели Views. Протокол состояния гиперссылок (Hyperlink Status View) Чтобы перейти в этот режим, нужно выбрать опцию Hyperlinks Status в меню View или просто щелкнуть на значке Hyperlinks Status на панели View. Проверка ссылок – важный этап тестирования сайта. Разорванные ссылки портят впечатление от сайта. Однако тестирование ссылок даже небольшого сайта может занять много времени. Список декораций (Themes View) Чтобы увидеть список декораций нужно выбрать Themes в меню View или значок Themes на панели View. Авторы FrontPage разрабатывали декорации, имея в виду, прежде всего новичков. На основе этих декораций можно придать своему сайту высокохудожественный облик, украсив его эффектами, выдержанными в едином стиле. Декорации, выбранные в этом разделе применяются ко всем страницам открытого сайта. Однако существует возможность применить декорации к отдельно взятым страницам. Для того, чтобы изменить установки сайта необходимо воспользоваться командой Web

Settings из менюTools. Диалоговое окно FrontPage Web Settings также можно открыть из любого окна, кроме списка декораций, щелкнув правой кнопкой на поле окна и выбрав в контекстном меню Web Settings. Публикация сайта Для того, чтобы перенести сайт на сервер, с установленными серверными расширениями FrontPage необходимо открыть в Проводнике сайт, который будет перенесен на сервер, и нажать кнопку Publish на панели инструментов Проводника. Если на сервере не установлены серверные расширения FrontPage, то запустится Мастер Web-публикаций, который опубликует сайт по протоколу FTP. Редактор FrontPage Редактор FrontPage позволяет создавать страницы профессионального качества, не требуя знания HTML. Однако можно прямо в Редакторе писать код HTML и, не запуская броузер, видеть результаты своей деятельности. Запустить редактор можно несколькими способами: • Дважды щелкнув на странице в структуре папок, списке файлов, карте навигации или схеме гиперссылок Проводника. Или щелкнув правой кнопкой на странице и выбрав опцию Open; • Непосредственно, нажав на панели инструментов кнопку Show FrontPage Editor. В этом случае Редактор откроется с пустым экраном. При запуске Редактор откроет окно, вид которого показан на рисунке:

Переход в Проводник FrontPage

Выбор цвета текста

Добавление на страницу компонентов FrontPage

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

Вкладки Normal (Обычный вид), HTML (Код HTML) и Preview (Предварительный просмотр) позволяют увидеть редактируемую страницу с различных точек зрения.

Вставка таблицы

Вставка изображения

Панели инструментов Редактора FrontPage аналогичны другим приложениям Microsoft Office. Например, кнопка точно также, как в Microsoft Word.

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

Чтобы поместить на страницу текст, нужно просто ввести его с клавиатуры. По умолчанию текст начинается с левого края текущей строки, но можно изменить практически все параметры: сделать отступ, выровнять по правому краю или по центру. Можно изменить шрифт для текста, сделать его заголовком. Чтобы начать новый абзац, достаточно нажать клавишу <Enter>. FrontPage способен органично усваивать материал из файлов Microsoft Office. На этом можно сэкономить массу времени, т.е. если информация, которую необходимо поместить на страницу сайта FrontPage, находится в файлах Word или Excel, то не придется вводить ее в Редакторе FrontPage заново. Для переноса используется буфер обмена. Для того, чтобы разместить на странице ссылку на файл MS Office необходимо мышью перетащить значок этого файла в то место страницы, где необходимо разместить ссылку из Проводника FrontPage. Также можно перетаскивать файлы из любого места Windows прямо на страницу. При этом содержимое файла вставляется в страницу. Команда Open позволяет открывать страницы сайта, загруженного в Проводнике, сохраненные в виде файлов на диске вашего компьютера или в локальной сети и даже страницы прямо из Internet. Можно открывать не только страницы, созданные во FrontPage, но и файлы нескольких типов (HTM, HTML, HTX, ASP, RTF, ТХТ)

Список файлов текущего сайта

Открыть файл с диска компьютера URL-адрес открываемой страницы

Открыть файл из Интернет

Редактор предлагает три возможности сохранения: • Save (Сохранить). Сохраняет активную страницу в формате HTML либо в Web-сайт, либо в файл; • Save As (Сохранить как). Копирует и записывает активную страницу в новую страницу в текущем сайте или в новый файл; • Save All (Сохранить все). Записывает все открытые в Редакторе страницы.

Если текущая страница ранее не существовала, то появится окно Save As с несколькими опциями сохранения файла. Чтобы сохранить файл в другом месте или под другим именем, можно также воспользоваться командой Save As. В диалоговом окне Save As можно заказать сохранение файла в качестве шаблона. Работа с ссылками и закладками Для создания ссылки необходимо выделить участок текста или изображение, с которого будет осуществляться переход, и нажать кнопку Create Hyperlink (Создание гиперссылки) на панели инструментов или выполнить такую же команду из меню Edit. Можно также использовать сочетание клавиш +. Некоторые последовательности символов, которыми принято обозначать популярные протоколы Internet, автоматически распознаются FrontPage как части адресов, и на такие последовательности символов, набранные в тексте, ссылки будут проставлены без вашего участия.

Список файлов открытого сайта

Ссылки на новую страницу Ссылки на почтовые адреса Ссылки на локальные файлы Ссылки на URL

Для вставки гиперссылки на страницы сайтов в Выбор целевого фрейма Выбор закладки Internet достаточно щёлкнуть любую ссылку в окне броузера и, не отпуская кнопки мыши, перенести ее на страницу Редактора. FrontPage автоматически создаст ссылку на эту страницу. Чтобы изменить существующую ссылку, нужно ее выделить и выбрать в меню Edit пункт Hyperlink или Hyperlink Properties. Чтобы удалить ссылку, необходимо ее выделить и выбрать в меню Edit пункт Unlink (Отсоединить). Ссылка будет удалена, причем это никак не повлияет на тот текст или изображение, с которого она была проставлена. Чтобы создать ссылку внутри страницы, нужно сначала поставить закладку. Закладка (bookmark или anchor) – это участок текста (или просто один или несколько символов), являющийся точкой перехода по гиперссылке. Закладки видны в Редакторе как текст, подчеркнутый пунктиром.

Для создания закладки необходимо:

Удаляет закладку

• В той точке текста, куда должен осуществляться переход выделить один или несколько символов; • Выбрать Bookmark (Закладка) из меню Edit (Редактирование). Появится Осуществляет переход к диалоговое окно Bookmark; тексту помеченному выделенной закладкой • Ввести название закладки в строке Bookmark Name; • Щёлкнуть по кнопке ОК. Теперь в редакторе отмеченный текст подчеркнут пунктиром – закладка установлена Далее при создании ссылки на эту закладку нужно выбрать имя последней в раскрывающемся списке Bookmark. Графика во FrontPage Для вставки изображения необходимо выполнить следующие действия: • Поместить курсор в то место, где разместится изображение; • В меню Insert выбрать Image или нажать кнопку на панели инструментов. Если при этом запущен Проводник, появится диалоговое окно Image; • Выбрав необходимое изображение, нажать кнопку OK. Если для добавления рисунков к сайту использовался Проводник, то FrontPage не станет задавать вопросы относительно сохранения изображений и будет записывать их по тому пути, откуда они были взяты и с тем же именем. Если Проводник не использовался, то при очередном сохранении страницы будет предложено записать файлы изображений. Для этого используется диалоговое окно Save Embedded Files:

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

Переименовать

Сменить папку

Изменить способ сохранения

Предварительный просмотр

Можно менять многие характеристики изображения. Для этого необходимо:

• Выбрать изображение в Редакторе, щелкнув на нем мышью; • Выбрать в меню Edit пункт Image Properties. Появится диалоговое окно Image Properties, состоящее из трех вкладок: General (Общие), Video (Видео) и Appearance (Оформление); • Внести необходимые изменения. По окончании настройки параметров нажать кнопку ОК. На вкладке General указываются: источник изображения, тип изображения, альтернативные представления, ссылка по умолчанию. Вкладка Video позволяет помещать на страницу файлы типа AVI (аудиои видеофайлы). Изображение, заданное на вкладке General, используется в качестве заставки на время загрузки файла AVI. На вкладке Video указываются источник видеоданных, повтор, момент запуска ролика. Вкладка Appearance содержит параметры оформления изображения. На этой вкладке определяются положение изображения на странице и размер. Варианты выравнивания изображения: • Bottom: выравнивание текста по нижней границе изображения таким образом, что текст начинается внизу изображения; • Middle: выравнивание текста по середине изображения; • Тор: выравнивание текста по верхней границе изображения; • Absbottom: выравнивание изображения по нижней границе текущей строки; • Absmiddle: выравнивание изображения по середине текущей строки; • Texttop: выравнивание верхней границы изображения по верху самого высокого текста в строке; • Baseline: выравнивание изображения по опорной линии текущей строки; • Left: изображение размещается по левому краю страницы, последующий текст обтекает его по правой стороне; • Right: изображение размещается по правому краю страницы, последующий текст обтекает его по левой стороне. Управлять расположением изображения на странице можно также при помощи кнопок выравнивания на панели инструментов Редактора. Можно менять размер изображения, цепляя его за стороны или углы и вытягивая в нужном направлении. Это влияет только на видимый размер изображения, но не на размер файла. Таблицы Построить таблицу в Редакторе FrontPage можно двумя способами: либо непосредственно нарисовать ее на странице, пользуясь инструментами панели таблиц (Table Toolbar), либо вставить с помощью меню Table. Все кнопки панели таблиц дублируются командами меню.

Для вставки таблицы необходимо выполнить следующие действия: • Установить курсор, выбрать в меню Table команду Insert Table. Откроется окно Insert Table; • Ввести предполагаемое число строк и столбцов; • Выбрать вариант выравнивания таблицы в целом; • Ввести ширину рамки таблицы (Border Size) в пикселах. Если рамка не нужна, установить это значение равным нулю; • Ввести значение Cell Padding (Отступ от границы ячейки) в пикселах. Это число устанавливает минимальное расстояние между рамками таблицы и ее содержимым; • Ввести значение Cell Spacing (Интервал между ячейками) в пикселах. Этот параметр задает расстояние между ячейками таблицы и в виде рамки вокруг каждой ячейки (в том числе вокруг ячеек, находящихся у краев таблицы); • Ввести значение ширины таблицы (Specify Width). Ширину можно задавать как в пикселах, так и в процентах от ширины страницы; • Нажать кнопку ОК. Редактор создаст таблицу и покажет ее на экране. Выбранные настройки применяются либо к выделенным ячейкам, либо к той ячейке, в которой находился курсор перед изменением параметров. Основные команды пункта меню Table: • • • • • • • • • • • • •

Draw Table – рисование таблицы от руки Insert Table – вставка новой таблицы или добавление вложенной Insert Rows or Columns – вставка новой строки или колонки в таблицу Insert Cell. - добавление в таблицу новой ячейки Insert Captions – добавление заголовка таблицы Delete Cells - удаление ячейки или выделенных ячеек Merge Cells – объединение выделенных ячеек Split Cells - разбиение ячеек. Возможны варианты: Split into Columns разбить по столбцам и Split into Rows - разбить по строкам Select Cell – выделяет ячейку, в которой находится курсор; Select Row – выделяет строку, в которой находится курсор; Select Column – выделяет столбец, в которой находится курсор; Select Table – выделяет таблицу, в которой находится курсор; Caption, Cell, Table Properties – вызывает диалоговые окна свойств заголовка, ячейки и всей таблицы.

Можно присвоить таблице фоновый рисунок или задать цвет ее фона. Для этого необходимо установить флажок Use Background Image (Использовать фоновое изображение). Если таблица имеет рамку, то в секции Custom Colors (Заказные цвета) окна диалога Table Properties можно подобрать для нее цвета. Для установки однородного цвета его следует выбирать в списке Border; также можно выбирать по отдельности цвет освещённой и теневой части рамки (Light Border и Dark Border). Параметры ячеек, которые можно изменить: • • • • • • • • •

Horizontal Alignment – выравнивание по горизонтали; Vertical Alignment – выравнивание по вертикали; Header Cell – определяет титульные ячейки; No Wrap – содержимое не может быть перенесено на следующую строку; Width – установка ширины ячейки (в пикселях или процентах); Height – установка высоты ячейки (в пикселях или процентах); Cell Span – сколько строк или столбцов должна перекрывать ячейка, Custom Background – выбор фона ячейки (цвет, изображение); Custom Colors – изменение цвета границ ячеек.

Фреймы. Фреймсет (Frameset) является отдельной страницей, содержащей информацию о составляющих страницы фреймов. Эта информация отправляется серверу для загрузки в броузер соответствующих файлов. Редактор FrontPage выводит все части фреймсета на одной странице так, как они будут отображаться в броузере. В начале создания страницы фреймов в Редакторе, составляющие ее страницы еще не определены. Для начала работы предстоит сделать выбор: • Set Initial Page (Задать начальную страницу). Эта страница будет видна при открытии фрейма. Нажав эту кнопку, открывается окно Create Hyperlink (Создать гиперссылку). Далее можно создать новую страницу и установить ссылку на нее или, если уже запущен Проводник FrontPage, можно назначить в качестве начальной любую страницу сайта. • New Page (Новая страница). Если нажать эту кнопку, то во фрейм будет загружена новая чистая страница. Это обычная страница, созданная по шаблону Normal. Для того чтобы любая страница фрейма стала активной, нужно щёлкнуть в любой части этой страницы. Активная страница отличается от прочих цветной рамкой. По щелчку на внешней рамке фреймсета выделяется весь фреймсет.

Чтобы отредактировать свойства фреймсета, необходимо его отметить и выбрать в меню Frame опцию Frames Page Properties. Здесь можно установить: • Frame Spacing (Расстояние между фреймами). В этом окне устанавливается интервал между фреймами в пикселах; • Show Borders (Показывать рамки). Установив или сняв этот флажок, можно сделать рамки фреймов видимыми или невидимыми соответственно. Для изменения свойств фрейма необходимо выбрать фрейм и в меню Frame дать команду Frame Properties или щелкнуть правой кнопкой мыши на странице и выбрать Frame Properties из контекстного меню. Все изменения, которые будут производиться далее, будут касаться только отдельно взятой страницы: • Name – имя фрейма; • Initial Page – выбор страницы для фрейма; • Resizable in Browser – указывает, будет ли возможно изменить размер фрейма в броузере; • Show Scrollbars – выбор варианта отображения полос прокрутки; • Width – устанавливает ширину фрейма (в пикселах, процентах или долях); • Row Height – устанавливает высоту фрейма (в пикселах, процентах или долях); • Margins Width – устанавливает размер полей справа и слева; • Margins Height – устанавливает размер полей сверху и снизу. Чтобы отредактировать свойства страницы, необходимо щелкнуть на странице правой кнопкой мыши и выбрать в контекстном меню пункт Page Properties. Первое сохранение фреймов и фреймсета происходит в основном так же, как и в случае первого сохранения обычных страниц, но с одним отличием. При первом сохранении фреймсета в диалоговом окне Save As появляется миниатюрное изображение фреймсета, в котором цветом выделена текущая сохраняемая страница. Благодаря этому видно, какая страница в данный момент будет сохранена, и ее имя. После сохранения одной страницы на миниатюре будет подсвечена следующая страница и т.д. Когда будут сохранены все фреймы, дойдет очередь и до сохранения страницы фреймсета. Команды пункта меню Frame:

New Frames Page – создание новой фреймовой структуры Set Initial Page – задание начальной страницы фрейма Delete Frame – удаление фрейма Open Page in New Window – открытие страницы в новом окне Split Frame – разбиение фрейма на несколько фреймов Frames Page Properties – свойства страницы, отображаемой во фрейме Frame Properties – свойства фрейма Чтобы страница могла быть загружена во фрейм, на эту страницу следует создать ссылку и связать ее с фреймом. Все эти манипуляции производятся в диалоговых окнах Create Hyperlink или Edit Hyperlink. Например, необходимо загружать в основной фрейм страницу, ссылка на которую находится во фрейме с оглавлением. Вот, что для этого следует сделать: • Открыть в Редакторе Фреймсет; • На странице с оглавлением щелкнуть правой кнопкой на ссылке, и выбрать в контекстном меню опцию Hyperlink Properties. Откроется диалоговое окно Edit Hyperlink; • В строке URL ввести URL нужной страницы или выбрать его из раскрывающегося списка последних использовавшихся; • Нажать кнопку справа от текстового поля Target Frame (Целевой фрейм); в открывшемся диалоговом окне Target Frame ввести имя фрейма, в котором должна будет появляться необходимая страница. Проще всего сделать это, щелкнув по соответствующему фрейму на миниатюре вашего фреймсета. Если все ссылки с данной страницы должны открываться в одном и том же фрейме, то для упрощения работы необходимо задать целевой фрейм по умолчанию. Для этого необходимо • Щелкнуть правой кнопкой мыши на любом месте открытой в Редакторе страницы и выбрать в контекстном меню Page Properties; • В диалоговом окне Page Properties перейти на вкладку General (Общие), нажать кнопку справа от текстового окна Default Target Frame. На экране появится диалоговое окно Target Frame. Указать в нем фрейм, который нужно установить по умолчанию, и нажать кнопку ОК. При редактировании фреймсета в нижней части окна появляются дополнительные закладки: • Normal (Обычный вид). Эта вкладка открывается по умолчанию – основной рабочий режим во FrontPage; • No Frames (Без фреймов). Здесь отображается экран в том виде, как он будет выглядеть в броузере, неподдерживающем фреймы; • HTML (Код HTML). Здесь код HTML всех фреймов текущего фреймсета.

• Frames Page HTML (Код HTML страницы фреймов). В этом окне можно просматривать и редактировать код HTML фреймсета; • Preview (Предварительный просмотр). Просмотр результата прямо в редакторе.

Список литературы Глушаков С.В., Кнабе Г.А. Компьютерная графика. – М.: АСТ, 2001. Кирсанов Д. Веб-дизайн. – М.: Символ-Плюс, 1999. Нильсен Я. Веб-дизайн. – М.: Символ-Плюс, 2000. Нильсен Я., Тахир М. Дизайн Web-страниц. – СПб.: Вильямс, 2002. Омельченко Л., Федоров А. Самоучитель Microsoft FrontPage 2000. – СПб.: BHV, 1999. Панкратова Т. PhotoShop7.0: Учебн. курс. – СПб.: Питер, 2002. Паттерсон Л. Использование HTML 4.0. Ясно, кратко, надежно. – М.: Диалектика, 1999. Пауль М. Саммит, Мери Д. Саммит Создание Web-публикаций в FrontPage. – М.: Лори, 1998. Рандалл Н. Использование MS Frontpage 2002. Специальное издание. – СПб.: Вильямс, 2002. Сакс Т., Мак-Клейн Г. Дизайн и архитектура современного Web-сайта. – СПб.: Вильямс, 2002.

Recommend Documents

No documents

×

Report "Электронные издания"

Your name

Email

Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint

Description

Close Send

×

Sign In

Email

Password

Remember me Forgot password?

Sign In

---

Login with Facebook

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

9 – вставка тега	10 – вставка тега