This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
…
...............................................................................................................................................................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 АТРИБУТЫ ТЕГАИ | ...........................................................................................................................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>Выравниваем текст Моя первая веб-страница! Линейка – тег, создающий горизонтальную линию. Это одиночный тег, у него нет закрывающего. Пример. Вывести линию толщиной 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. Текст, находящийся внутри контейнера …, превращается в ссылку. Пример: Создание ссылки на сайт ИМПЭ им. А.С. Грибоедова ИМПЭ Если веб-страница, на которую нужно сделать ссылку, расположена на том же сервере, можно использовать абсолютный или относительный адрес. Абсолютный Первая страница Относительный Если файл, на который создаём ссылку, расположен в той же папке (на том же уровне): Первая страница Если файл, на который создаём ссылку, расположен в другой папке. Например, на один уровень ниже в папке Images: Я в детстве Если файл, на который создаём ссылку, расположен в другой папке, на один уровень выше в папке 3kurs: Пробная страница Веб-страница, на которую переходим по ссылке, может открываться в том же окне, может создавать новое окно. При использовании фреймов, когда в окне броузера открываются одновременно несколько веб-страниц, можно перейти в любой из фреймов или загрузить страницу поверх всех фреймов. Более подробно о фреймах будет рассказано ниже (глава “Фреймы”). За направление перехода по ссылке отвечает атрибут TARGET. Если нужно сделать ссылку внутри одной веб-страницы, то необходимо сначала создать закладку в том месте, куда будет осуществляться переход. Пример. Создание ссылки внутри одной веб-страницы. … Первая закладка … а потом саму ссылку в любом месте веб-страницы: … Переход к первой закладке … Протокол mailto Протокол mailto открывает окно почтового клиента, в котором можно создать и отправить почтовое сообщение по указанному адресу, если почтовый клиент настроен: Пишите мне письма Атрибуты тега …: атрибут значение описание 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 значение описание photo.jpg задает URL картинки ALT фото Всплывающая подсказка, появляющийся при наезде мышкой. Текст виден, когда отключен показ рисунков в броузере. ALIGN Left, right, Выравнивание center WIDTH 100, 50% Ширина изображения. Без её указания картинка выводится в натуральную величину. HEIGHT 100, 50% Высота изображения. Без её указания картинка выводится в натуральную величину. BORDER 5 Рамка вокруг рисунка HSPACE 0 Свободное пространство слева и справа от изображения VSPACE 10 Свободное пространство сверху и снизу от изображения Рисунки можно использовать в роли кнопок. Для этого тег изображения нужно поместить внутри контейнера – ссылки. Пример. Рисунок может быть фоном веб-страницы. Для этого к тегу добавляется атрибут 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-код этой таблицы:
А HTML-код таблицы:
Атрибуты тегов и | Атрибуты | значение описание ALIGN left, right, center, justify Горизонтальное выравнивание VALIGN top, middle, bottom Вертикальное выравнивание плюс атрибуты
Пример. Вложенные таблицы. A B C D Описание в html-виде: |
|
|
---|
9 – вставка тега | 10 – вставка тега 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
Sign In
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
|
---|