Проектирование и разработка сайта средствами Web Page Maker

Чтобы вынести  на самый задний слой нужно:

• Кликнуть на объекте;
• Выбрать Отправить назад в меню Оформление.

2.2.5 Блокирование элементов страницы

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

Для блокирования объекта нужно:

• Кликнуть на объекте;
• Выбрать команду Блокировать из меню Правка;
• Навести мышку на объект, он обозначен значком блокировки;

Для разблокирования  объекта:

• Кликнуть на заблокированном объекте;
• Выбрать команду Разблокировать из меню Правка.

Можно воспользоваться  командой Блокировать все/Разблокировать все, которая применяется ко всем объектам на странице.

2.3 Создание web-страниц

С помощью Web Page Maker можно создать веб-сайт, содержащий любое количество web-страниц. Web Page Maker всегда называет первую страницу index . Это очень важно, т.к. первая страница web-сайта, домашняя страница, должна называться  index.

2.3.1 Свойства страницы

Можно задать большое количество свойств для страницы, включая её заголовок, цвет фона и т.д. Для этого дважды кликнуть левой кнопкой  мыши на любом пустом месте web-страницы для открытия диалога Свойств страницы. В этом диалоговом окне имеются пять вкладок: Общие, Фон, Внешний вид,  Дополнительно и Заголовок.

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

Заголовок

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

Автор.

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

Ключевые слова.

Можно вводить  слова, разделяя их запятой. Эти слова  используются поисковыми машинами (напр. Google, Yandex и т.п.), которые идентифицируют документ, как относящийся к той  или иной категории либо согласно запросу пользователя.

Описание.

Здесь могут быть заданы краткое описание содержания документа или его назначение. Эта информация также используется поисковыми машинами интернета.

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

Чтобы добавить фоновый рисунок нужно:

• Выбрать изображение на локальном диске или добавить изображение из папки Фонов Web Page Maker;
• Нажать OK.

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

Чтобы добавить звук необходимо:

• Выбрать звуковой файл на локальном диске;
• Отметить флажок Зацикливать, чтобы музыка постоянно звучала при просмотре вашей страницы;
• Нажмите OK.

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

Для русскоязычных  пользователей рекомендуется выставлять кодировку Windows-1251.

2.3.2 Создание второй страницы

Для создания пустой странички нужно:

• Нажать кнопку  Добавить новую страницу в панели Содержание сайта с правой стороны экрана. (Чтобы скрыть или отобразить панель, нажать F8.);
• Появится новый пустой файл. По умолчанию Web Page Maker назовёт его "page2".

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

Для создания копии  первой страницы (index):

• Нажать кнопку Клонировать страницу в панели Содержание сайта с правой стороны экрана. (Чтобы скрыть или отобразить панель, нажать F8.);
• Появится копия этого файла. По умолчанию Web Page Maker назовёт его "page2".  Удалить содержимое, которое не должно находиться на этой странице и добавьте новое.

Для переименования веб-страницы:

• Выбрать страницу, которую нужно переименовать в панели Содержание сайта;
• Кликнуть правой клавишей на имени файла и нажать Переименовать страницу;
• Ввести новое имя страницы.

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

2.4 Гиперссылки

Гиперссылка - это  один из элементов веб-страницы (обычно это слово, кнопка, или изображение), который "указывает" на другую веб-страницу. Когда посетитель нажимает на ссылку в браузере, происходит переход на эту страницу, которая может располагаться как на том же сайте, так и на любом другом сайте в интернете.

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

Абсолютные пути представляют собой полные ссылки на указанный документ, включая используемый протокол. Например, http://www.webpage-maker.com/index.html - это абсолютный путь.

Относительная ссылка указывает на документ, как на некий ярлык, основанный на расположении целевого документа относительно к тому, который содержит ссылку. Пример относительной ссылки -  "index.html".

Стартовая (домашняя) страничка должна называться index

Домашняя страничка - это первая страница, которую видит посетитель при заходе на ваш сайт. Почти во всех сайтах она носит имя "index.html ". Некоторые сайты используют другие названия, однако большинство сайтов позволят использовать любое из названий по умолчанию.

2.4.1 Редактор ссылок

С помощью Web Page Maker очень легко добавлять ссылки на веб-странички. Редактор ссылок используется для всех операций со ссылками, напр. ссылка на др. страницу сайта, ссылка на страницу другого сайта, ссылка на файл или ссылка на email. В Редакторе ссылок существует 5 разделов: Тип (ссылки), URL, Закладка, Цель и Заголовок.

Рисунок 2 – Ссылка

Необходимо  выбрать тип ссылки из выпадающего списка.

Страница на моём сайте: ссылка на страницу на сайте.

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

Другой сайт: ссылка на другой веб-сайт.

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

Адрес Email: ссылка на почтовый адрес.

При выборе этого типа ссылки, наберите в текстовом поле после mailto: соответствуюший адрес. В этом случае будет запущена почтовая программа на компьютере посетителя вашего сайта.

Адрес FTP: передача файлов может быть вызвана FTP-ссылкой. Это специально согласованный метод передачи файлов между компьютерами в интернете. Адрес FTP начинается с "ftp://", в отличие от веб-адресов, которые начинаются с "http:// ".

Закладка обычно используется для создания локальной  ссылки на определённый участок веб-страницы. Типичный пример закладки - это использование ссылки "Наверх ", которая перенесёт посетителя с нижней части страницы к её началу, в случае нажатия на эту ссылку.

2.5 Предпросмотр и публикации

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

Для просмотра  веб-страниц в браузере необходимо:

• Нажать кнопку Просмотр (F5) в панели инструментов;
• По окончанию тестирования просто закрыть страницу в браузере.

При просмотре страниц в виде HTML можно проверить работоспособность всех локальных ссылок на сайте.

 

3 Пример создания сайта средствами

web page maker

Начинаем с  создания пустой страницы. Добавим на страницу текст. Для этого нажмём кнопку Текст в панели инструментов. После двойного клика появится текстовое поле и затем окно Текстового редактора. Наберём нужный текст.

Для копирования  текста из другой программы в Web Page Maker:  скопирем текст в другой программе путём его выделения и нажатием Ctrl+C на клавиатуре, переключимся на Web Page Maker, вставим текстовое поле; дважды кликним по появившемуся текстовому полю и вставим в него текст нажатием  Ctrl+V на клавиатуре. Web Page Maker не сохраняет форматирование, которое использовалось в других приложениях.

Для выбора шрифта и его размера:

• Дважды кликнем по текстовому полю;
• В текстовом редакторе выделим текст, который хотим изменить;
• Выберем желаемый шрифт и его размер на панели инструментов текстового редактора.

Затем добавим  на страницу изображение. Для этого нажмём кнопку  Рисунок на панели инструментов или нажмём на стрелочку рядом с кнопкой Рисунок и выберем из библиотеки, выберем изображение на жёстком диске или в библиотеке программы, нажмём OK. Также можно перетаскивать изображения на веб-страницу при помощи мышки:

• Выберем папку с изображениями;
• Перетащим выбранный рисунок на рабочее окно Web Page Maker;
• Рисунок появится на странице.

Добавим прокручивающийся текст. Для этого необходимо выбрать Вставить → Бегущая строка, дважды кликнуть по диалоговому окну marquee , появится окно Редактора текста . Теперь просто ввести текст, который должен прокручиваться на страничке, задать тип и размер шрифта, цвет текста, кликнуть правой по окошку marquee, выбрать Свойства, на вкладке Бегущая строка задать соответствующие параметры бегущей строки.

Рисунок 3 – Свойства бегущей строки

Для того, чтобы  связать ссылками созданные страницы необходимо:

• Выделить текст или изображение на первой странице;
• Нажать кнопку "Задать гиперссылку" на панели инструментов. Появится диалог Гиперссылка;
• Выбрать "Страница на моём сайте " из выпадающего меню Тип.

Чтобы добавить таблицу стилей:

• В меню Формат нажмём Стили гиперссылок;
• Нажмём Добавить в диалоговом окне Стили гиперссылок. Появится диалог Добавить стиль;

 

Рисунок 4 – Стили гиперссылок

• Выберем стиль ссылки и нажмём "OK";

 

 

Рисунок 5 – Добавить стиль

• Дважды кликнем по текстовому полю на страничке. Выберем курсором нужный текст. Воспользуемся кнопкой Задать гиперссылку в панели инструментов Текстового редактора. Появится диалог Гиперссылка;
• Выберем созданный стиль из выпадающего меню в нижней части диалогового окна Гиперссылка

 

 

Рисунок 6 – Гиперссылка

 

 

Рисунок 7 – Первая страница сайта

 

 

ЗАКЛЮЧЕНИЕ

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