Основы ВЕБ-конструирования

В редакторе FrontPage для оформления документов разработаны шаблоны – Темы.

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

С помощью меню Файл → Создать в появившемся окне Шаблоны веб-узлов выберем Одностраничный веб-узел  (рис. 3.7).

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

С помощью меню Формат → Тема в появившемся диалоговом окне выберем, например, тему Горизонт и укажем  Применить как тему по умолчанию.

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



1.      Для чего предназначен редактор FrontPage?

2.      Назовите основные элементы интерфейса редактора FrontPage.
Каково их назначение?

3.      Для чего используется Тема при оформлении веб-страницы?

3.4. Форматирование текста и вставка изображений в редакторе FrontPage

3.4.1. Форматирование текста

Форматирования текста в редакторе FrontPage осуществляется с помощью панели инструментов Форматирование, а также окон Формат (рис. 3.8) и Абзац (Рис. 3.9).

Выделив текст в редакторе FrontPage (выполняется аналогичноWord)  в окне Шрифт можно выбрать его имя, начертание и указать размер, а в окне Абзац указать выравнивание, отступы и межстрочный интервал. Примеры форматированного текста представлены на рисунках 3.8 и 3.9. Важно помнить, что отображение веб-страницы на экране зависит от разрешения монитора и настройки браузера. Поэтому размер шрифта принято задавать в условных единицах от 1 до 7. Если размер шрифта не указан, то по умолчанию он принимается равным 3, что при установке в браузере Размер шрифта  средний  соответствует 12 пунктам.

Для привлечения внимания к информации создается бегущая строка с помощью цепочки действий: Вставка → Веб-компонент → Бегущая строка. В окне Cвойства бегущей строки (Рис 3.10) вводится текст, задается направление и скорость движения, время задержки и другие параметры.

Рис. 3.10

3.4.2. Вставка изображений

Размещение изображений на веб-странице производится аналогично тому, как это выполнялось в редакторе Word (команда меню ВставкаРисунок.)

Задавать параметры изображения на странице можно в окне Положение, которое активизируется с помощью меню Формат  Положение (Рис. 3.11).  Можно задать размер изображения (в пикселях или процентах), выравнивание, толщину границы, обтекание текстом и другие параметры.

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

Рис. 3.11

В зависимости от обтекания текстом вставляемые изображения могут располагаться различными способами (Рис. 3.12).

Рис. 3.12

Регулирование позиции изображения относительно других элементов веб-страницы, например текста, осуществляется в диалоговом окне, которое активизируется с помощью меню Формат  Положение.

В редакторе FrontPage предусмотрена возможность простейшей обработки изображений (коррекция яркости и контрастности, повороты, обрезка  и т.д.). Для этого используется панель Рисунки аналогичная текстовому редактору Word.



1.      Какие возможности по форматированию текста имеет FrontPage?

2.      Как задается размер шрифта на веб-страницах?

3.      Как создать бегущую строку?

4.      Как выполняется размещение изображения на веб-странице?

5.      Каким образом выполняется настройка изображения?

Упражнения

1. Наберите и оформите в редакторе FrontPage текст следующего диалога:

Давайте улыбнемся!

              На работу пришла новая Мышь. Вечером она решила расспросить Клавиатуру о работниках.

                  Слушай, Клав, а кто у Вас главный?

                  А сама как думаешь?

                  Ну, Сервер, наверное…

                  Нет, судя по зарплате, он не является главным.

                  Тогда Принтер… Цветной, лазерный световой…

                  Нет, Мышь, опять мимо. Вот видишь, на столе маленький с красными глазками? Ладно, скажу - Модем. Он является самым главным, так как связывает нас со всем миром.

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

3.5. Вставка таблицы в редакторе FrontPage

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

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

Для вставки таблицы можно воспользоваться стандартной панелью инструментов, однако наиболее полно команды работы с таблицами представлены в меню Таблица. В диалоговом окне Вставка таблицы можно указать не только количество строк и столбцов таблицы, но и способ выравнивания, цвет фона ячеек, цвет и толщину границ, интервал между ячейками и другие параметры  (рис. 3.13).

Рис. 3.13 



1.      Для чего используются таблицы на веб-страницах?

2.      Как  вставить таблицу в редакторе FrontPage?

Упражнение

Создайте в редакторе FrontPage фрагмент сайта «Беларускія пісьменнікі» из четырех веб-стран:

а) главная веб-страница – «Беларускія пісьменнікі» (файл index.htm), как показано на рисунке 3.3;

б) веб-страница - «Якуб Колас» (файл Kolas.htm), как показано на рисунке 3.6;

в) веб-страница «Янка Купала» (файл Kupala.htm), как показано на рисунке 3.14;

Рис. 3.14.

г)  веб-страница «Максім Багдановіч» (файл Bagdanovich.htm), как показано на рисунке 3.15.

Рис. 3.15

3.6. Создание гиперссылок в редакторе FrontPage

Для создания гиперссылки требуется  выделить ее  в документе (определить элемент привязки) и задать адрес перехода по данной ссылке. В качестве элементов привязки могут выступать слова, группы слов, изображения.

Текстовые ссылки обычно отмечаются цветом и подчеркиваются, а графические ‑ иногда обводятся рамкой. Благодаря этому они отличаются от обычного текста и других элементов страницы.

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

Перед созданием внутристраничных ссылок нужно сначала расставить закладки. Для этого курсор устанавливается на нужное место веб-страницы. С помощью меню Вставка→Закладка вызывается диалоговое окно Закладка, в котором вводится имя закладки, например Вниз (рис. 3.16).

Для организации гиперссылки необходимо выделить элемент привязки (текст или рисунок), с помощью кнопки на Стандартной панели инструментов или меню Вставка →Гиперссылка вызвать диалоговое окно, в котором указать адрес перехода (адрес веб-страницы или электронной почты, имя файла или документа, а в случае внутренней ссылки имя закладки) (рис. 3.16).

Рис. 3.16

По умолчанию новый документ открывается в текущем окне браузера, однако из окна Добавление гиперссылки можно щелкнуть по кнопке Выбор рамки и в открывшемся окне Конечная рамка задать открытие нового документа в новом окне (Рис. 3.17).

Рис. 3.17

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



1.      Какие элементы могут выступать в качестве гиперссылки?

2.      На что может указывать гиперссылка?

3.      В чем различие внутренней, внешней и внутристраничной гиперссылок?

Упражнение

Создайте в редакторе FrontPage текстовые и графические гиперссылки между страницами веб-сайта «Беларускія пісьменнікі», как показано на рисунке 3.18

Рис.3.18

3.8. Публикация сайта

Публикацией сайта называют его размещение на сервере или локальном компьютере с возможностью вызова из сети (глобальной или локальной).

Некоторые серверы бесплатно предоставляют дисковое пространство под сайт, например, www.narod.ru. Процесс публикации сайта заключается в переносе файлов вашего сайта на этот сервер. Адрес перенесенного сайта может иметь вид, например, www.belpisateli.narod.ru.

Для публикации сайта, подготовленного в редакторе FrontPage, необходимо с помощью меню Файл  Опубликовать узел вызвать диалоговое окно Свойства удаленного веб-узла (рис. 3.19).

Для размещения созданного сайта на сервере narod.ru в строке Расположение удаленного веб-узла следует указать адрес ftp-узла сервиса narod.ru, который для всех пользователей является одинаковым: ftp://ftp.narod.ru (рис. 3.19).

Рис. 3.19.

В дальнейшем  пользователю необходимо ввести имя и пароль в окне Требуется имя и пароль (рис. 3.20).

Рис. 3.20

В открывшемся новом окне слева будут размещены файлы и папки созданного локального веб-узла, а справа файлы и папки удаленного веб-узла,  например странички сайта «Беларускія пісьменнікі» (рис. 3.21).

Рис. 3.21

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

Когда копирование всех файлов завершится,  пользователь может просмотреть размещенный в сети сайт. Для этого в строке браузера вводится адрес, например www.belpisateli.narod.ru



1.      Что понимают под публикацией сайта?

2.      Как опубликовать сайт?

Упражнение

Опубликуйте сайт «Беларускія пісьменнікі» на локальном компьютере или доступном бесплатном сервере, который укажет  учитель.