Создание Web-страниц в прикладной программе FrontPage - Создание сайта

Создание новой пустой Web-страницы

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

Создание веб-страницы на основе шаблонов FrontPage

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

Создание веб-страницы на основе имеющихся Web-страниц в ПК

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

Обучение созданию Web - страниц

Создание новой пустой Web - страницы

Если при открытии окна приложения FrontPage в нем отображается новая пустая страница, то разработку веб - страницы можно осуществлять на базе этой страницы. Если при открытии редактора, отображается пустое главное окно, то для создания новой пустой страницы необходимо выполнить команду Файл/Создать и выбрать в области задач "Пустая Страница".

Попытаемся создать Главную страницу нашегоWeb - сайта!

В окне приложения появится новая пустая страница. Сохраняем страницу, но перед тем, как сохранить страницу в окне "Сохранить" создаем папку serverЛичные папкиФамилия ИмяСайт "Динас", в которой создаем вложенную папку Рисунки для рисунков, а затем сохраняем страницу в папке Сайт "Динас". Имя страницы назначаем - index, что означает домашняя или главная страница. Редактор сохраняет страницу с расширением. htm. Таким образом, в папке Сайт "Динас", будет находиться вложенная папка Рисунки и файл index. htm.

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

Рисунки для веб - страницы должны быть заранее подготовлены и вставлены в папку Рисунки. Скопируем в папку Рисунки рисунок Офис ООО Динас для создания веб - страницы, посвященной ООО "Динас".

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

Выберите команду Файл Свойства. Откроется диалог Свойства страницы.

На вкладке Язык в выпадающем меню Пометить Текущий Документ, Указав: группы настроек Язык страницы выберите пункт Русский. В выпадающем меню Сохранить Документ, Используя группы настроек Набор Знаков выберите пункт Кириллица. Ок!

Фон страницы

Чтобы станица выглядела более красочно попробуем добавить к нашей странице Фон,. Сделать это можно двумя способами:

1. Зайти в меню Формат Фон и в окне Свойства страницы выбрать через кнопку Обзор необходимый рисунок.

В итоге наша страница примет следующий вид:

Попробуйте выполнить это, но по окончании Отмените это действие!

2. В качестве Фона нашей страницы можно использовать уже готовые Темы. Зайдите в меню Формат Тема. Выберите двойным щелчком Тему Волны.

Таблица в качестве каркаса Web - страницы

Далее необходимо осуществить разработку страницы. Разработка страницы начинается с ее разметки. Для разметки страницы используются таблицы. Можно применить Макеты Страницы, которые расположены на панели задач "Макеты Таблицы И Ячейки" в области задач. Для этого необходимо зайти в меню Таблицы Макетные Таблицы И Ячейки. Таким образом, у нас появилась прекрасная возможность выбрать готовые макеты таблиц, но ведь может так получиться, что данные макеты не удовлетворяют нашим требования. Поэтому мы подробно рассмотрим использование Таблиц в качестве каркаса нашей страницы.

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

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

Џ В группе элементов управления Положение находятся элементы управления расположением таблицы на странице и положение содержимого ячеек внутри таблицы.

Џ В открывающемся списке Выравнивание можно выбирать способ выравнивания содержимого ячеек. Впоследствии для каждой конкретной ячейки можно отдельно настроить параметры выравнивания ее содержимого.

Џ Список Обтекание задает способ обтекания таблицы текстом и другими элементами страницы.

Џ Поле ввода со счетчиком Поля Ячеек определяет расстояние между границами ячеек и их содержимым.

Џ В поле ввода со счетчиком Интервал Ячеек задает расстояние между соседними ячейками таблицы.

Џ Установив флажок Задать Ширину, Вы сможете это сделать в поле, находящемся чуть ниже.

Џ Поле Задать Высоту аналогично предыдущему.

В группе элементов управления Границы располагаются настройки, связанные с отображением границ таблицы.

Џ Поле ввода со счетчиком Размер задает толщину границы таблицы в точках.

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

Џ Если установить флажок Свернуть Границу Таблицы, то граница будет отображаться в виде одиночной линии, иначе она будет принимать псевдо-объемный вид.

В группе Фон собраны элементы, управляющие фоновым изображением таблицы.

Џ Список Цвет позволяет выбрать цвет фона таблицы.

Џ Если установлен флажок Использовать Фоновый Рисунок, то вы сможете задать таблице в качестве фона изображение.

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

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

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

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

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

Имеется также дополнительные возможности: Добавить И Удалить Столбцы, Разбить И Объединить Ячейки. Все эти команды можно найти тоже в контекстном меню при выделении ячеек. Аналогичные команды вы уже встречали в программах Word и Eхcel, поэтому описывать их нет смысла.

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

Должно получиться нечто подобное!

Настало время написать на нашем сайте название фирмы, которой он принадлежит. Но делать мы это будем не в виде обычного текста, а при помощи объекта WordArt (Мы надеемся, что вы знаете, как это сделать!) Таким же образом вставьте слово Акция в третью ячейку нижней таблицы и Вакансия в первую ячейку.. А теперь отделите название фирмы Горизонтальной Линией: Вставка Горизонтальная линия.

Текстовое оформление сайта

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

Поскольку вы решили заняться изучением такого непростого продукта, как создание Web - сайтов, то мы просто уверены в том, что вы знаете, как форматируется текст ну, например, в такой программе, как Microsoft Word. Так вот редактирование текстов в программе FrontPage аналогично этому, поэтому, естественно на этом останавливаться мы тоже не будем.

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

Самостоятельно введите весь текст, который вы видите на рисунке15.При его редактировании можете немного пофантазировать. НО Не Переусердствуйте!!!

Вставка иллюстраций

Невозможно представить себе HTML - страницу без элементов графики, рисунков и т. д. Умело подобранная графика привлечет внимание посетителей на страницу, акцентирует их внимание на тех или иных моментах нашей страницы. Поможет выделить логические подразделы и придаст нашей странице особую неповторимость, но при этом при подборе изображений следует учесть следующие моменты. Во-первых, не надо использовать в качестве фона изображение, которое затрудняет чтение текста документа. Например, слишком пестрые, яркие и т. д. Не надо использовать большие изображения, которые затянут до бесконечности время загрузки. Если все - - таки надо вставить изображение на страницу, то лучше создать его маленькую копию, и после этого назначить ссылку на страницу с исходным большим изображением, чтобы пользователь мог сам решить, если он очень хочет загрузить изображение в исходном виде. А так размер одного файла изображения не должен превышать 20-25 кб. На Web - страницах обычно помещают изображения двух форматов GIF и JPG. Такие изображения корректно отображаются во всех браузерах, поддерживающих показ графики. Конечно, можно вставить и файлы с другими форматами, например BMP, TIF, но при этом надо учесть, что при записи на диск FrontPage их автоматически превратит в один из двух базовых форматов.

Рассмотрим преимущества и недостатки этих форматов. GIF - это стандартный формат для небольших графических изображений, таких, как кнопки, пиктограммы. Он не поддерживает теней и полутонов и в его основе лежит палитра из 256 цветов. JPG по сравнению с GIF, поддерживает гораздо больше цветов - более 16 млн., что делает его наиболее выгодным для отображения графических изображений с плавными переходами полутонов. Кроме того, размер JPG файла можно уменьшать с различной степенью сжатия, но надо помнить, что в отличии от файлов GIF, сжатие файлов JPG производится с потерей их качества. Чем больше сжатие, тем больше потеря, но надо принять во внимание, что JPG это достаточно хороший формат: он дает высокую степень сжатия при довольно маленьких потерях, практически не видных на глаз.

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

Давайте попробуем вставить в страницу фото Каталог из папки рисунки.

Подготовка графики с помощью Adobe PhotoShop и Adobe ImageReady

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

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

Adobe PhotoShop и Adobe ImageReady хорошо дополняют друг друга. В Adobe PhotoShop обрабатываются фотографии, создаются графические кнопки, баннеры и другие изображения для Web-сайта. А в ImageReady полученные изображения оптимизируются, разрезаются на фрагменты и т. д.

Похожие статьи




Создание Web-страниц в прикладной программе FrontPage - Создание сайта

Предыдущая | Следующая