Microsoft FrontPage – программа представляет собой редактор, позволяющий использовать верстку на языке HTML. ПО работает по принципу "Что делаете, то и получаете". В основе движка утилиты включена технология, используемая также в известном браузере IE. Разработчик отмечает, что в случае работы с обозревателями, в которых применяются сторонние движки, отображение будет выглядеть иначе.
Программа способна в автоматическом режиме внедрять изменения, которые вносятся разработчиками в реальном времени.
Редактор рекомендован к использованию для новичков, желающих освоить элементарные операции по созданию веб-страниц. В отличие от более сложных и комплексных аналогов с большим числом возможностей, данную программу можно назвать тривиальной. Однако базовый функционал позволит быстро узнать основы сайтотроения.
Скачать бесплатно полную русскую версию Microsoft FrontPage с официального сайта без регистрации и смс.
Системные требования
- Поддерживаемые ОС: Windows 7, 10, 8, 8.1, Vista, XP
- Разрядность: 32 bit, 64 bit, x86
Тема 3.3: Прикладные программы для создания Веб-сайтов
Тема 3.4: Применение Интернет в экономике и защита информации
Программы для создания сайтов
3.3. Прикладные программы для создания Веб - сайтов
3.3.2. Знакомство с программой FrontPage
Web–страницы основаны на языке описания гипертекстовых документов HTML (Hypertext Markup Language). В HTML для определения содержания и формата гипертекстовых документов используются команды, которые называются тегами (tags). HTML – страницы представляет собой документы в обычном текстовом формате, содержащие специальные команды форматирования (теги HTML).
Для того чтобы создать сайт при помощи FrontPage, нет необходимости учить HTML. FrontPage позволяет довольно просто набрать текст, который можно поместить на Web - страницу, расположить в нужных местах рисунки. Используя FrontPage, можно создавать эффекты, для которых обычно требуются скрипты или программы DHTML.
Сайт или Web-узел – это набор связанных между собой близких по смыслу Web-страниц и файлов. В программе FrontPage существуют мастера, которые позволяют создавать сайт, и шаблоны или набор предварительно разработанных текстовых и графических форматов, на основе которых могут создаваться новые веб - страницы. Мастера и шаблоны FrontPage позволяют создавать сайты различных типов.
На каждом сайте существует одна Web-страница, которая называется главной или домашней. Домашняя страница – первая Web-страница, на которую попадает посетитель сайта. Используя навигацию или гиперссылки, пользователи смогут попасть и на другие страницы сайта.
Обычно сайт размещается на Web-сервере – компьютере, который предоставляет доступ к Web-страницам посетителям сайта. FrontPage позволяет создавать сайт непосредственно в файловой системе компьютера пользователя, а затем, когда он будет готов, опубликовать его на Web-сервере.
После запуска программы FrontPage (Пуск – программы – FrontPage) на экране появится окно программы, в котором отображается новая страница (нов_стр_1.htm). В области задач отображается панель Приступая к работе.
Рис. 1.
Окно прикладной программы FrontPage состоит: из строки заголовка, строки меню, панелей инструментов редактирования и форматирования, кнопок быстрого выбора тега (для редактирования и ввода тегов), ярлычков вкладок выбора страниц (для перехода между страницами), рабочего окна, в котором отображается новая страница, панели рисования, кнопок режимов просмотра, индикатора ожидаемого времени загрузки страниц при скорости 56 кбит/с, индикатора размера страниц, области задач.
В программе FrontPage можно пользоваться одним из четырех режимов просмотра: "Конструктор", "Код", "С разделением" и "Просмотр". В режиме "Конструктора" как в любом текстовом редакторе можно в визуальном режиме создавать, редактировать и форматировать страницу, т.е. вводить текст, добавлять рисунки, таблицы. При этом теги языка HTML автоматически добавляются в фоновом режиме, но кодировка HTML на экране не отображается.
В режиме "Код" на экране будет отображаться вся кодировка и можно напрямую редактировать код HTML, а также вводить новые коды. На рисунке представлен HTML – код новой пустой страницы в редакторе FrontPage .
Рис. 2.
В режиме "С разделением" - на экране отображается Web-страница одновременно в режиме Код и в режиме Конструктор. В режиме просмотра Web–страница имеет вид аналогичный ее отображению в Web–браузере.
Команды, которые предназначены для работы с Web–страницами и Web–узлами, расположены в меню Вид программы FrontPage:
- Страница – это режим просмотра и разработки страницы.
- Папки – отображается структура папок текущего сайта.
- Удаленный узел – узел, который находится на сервере сети Интернет.
- Отчеты – предоставляется сводка об Web – узле.
- Переходы – отображается структура переходов между страницами сайта.
- Гиперссылки – открывает список ссылок текущей страницы.
- Задачи – открывает список задач для текущего сайта
Рис. 3.
Создание Web-страниц в прикладной программе FrontPage
Создание новой пустой Web-страницы
Если при открытии окна программы FrontPage в нем отображается пустая страница, то разработку веб - страницы можно осуществлять на базе этой страницы. Если при открытии редактора FrontPage, отображается пустое главное окно, то для создания новой пустой страницы необходимо выполнить команду Файл/Создать и выбрать в области задач Пустая страница. В окне приложения появится пустая страница. Далее необходимо осуществить разработку страницы, т.е. выполнить разметку (структуру) страницы, ввести текст, рисунки и т.д.
Рис. 4.
Создание веб–страницы на основе шаблонов FrontPage
Создать новую страницу можно также на базе одного из шаблонов. Для этого необходимо выбрать команду «Другие шаблоны страниц» в области задач. На экране будет отображаться окно диалога Шаблоны страниц, в котором представлены различные шаблоны страниц по категориям.
Рис. 5.
Создание веб–страницы на основе имеющихся Web-страниц в ПК
Создать веб–страницу можно и на базе имеющихся, на компьютере веб–страниц. Для этого необходимо в области задач выбрать команду «Из имеющейся страницы» и в появившемся окне диалога выбрать требуемую страницу. Далее можно произвести необходимые изменения на странице и сохранить ее под другим именем.
Создание сайта в прикладной программе FrontPage
Создание нового пустого сайта или создание веб-узла без содержимого
Для создания нового пустого сайта надо выполнить команду Файл/Создать и выбрать в области задач команду «Другие шаблоны веб–узлов». Откроется окно диалога Шаблоны веб–узлов, в котором необходимо выделить Пустой веб–узел и щелкнуть ОК. В окне приложения FrontPage будет отображаться веб - узел, который представлен на рисунке.
Рис. 6.
Для создания пустой домашней страницы в новом веб-узле необходимо перейти в режим Переходы и щелкнуть на кнопке Новая страница на панели Переходы, в рабочем поле появится домашняя страница (для создания домашней страницы можно также использовать контекстное меню).
Рис. 7.
Дважды щелкните на домашней странице левой кнопкой мыши, и она откроется в режиме конструктора для редактирования (страница - index.htm).
Рис. 8.
Далее можно осуществить разработку домашней страницы (создать разметку или структуру страницы, ввести текст, рисунки и т.д.), а затем к домашней странице можно добавить страницы в режиме Переходы. Для этого в режиме Переходы выделите домашнюю страницу и щелкните на кнопке Новая страница на панели Переходы или примените контекстное меню.
Будет добавлена Новая страница 1, которая представлена на рисунке. Далее добавьте столько страниц, сколько необходимо для сайта, затем страницы можно переименовать и изменить порядок их следования. Далее на каждую страницу нужно ввести содержание или контент (текст, таблицы, картинки и т.д.), в результате получим сайт.
Рис. 9.
Создание сайта на основе шаблона редактора FrontPage
Для создания сайта на основе шаблона выполните Файл/Создать и в области задач щелкните команду Веб – пакеты, откроется окно диалога Шаблоны веб–узлов.
Рис. 10.
Выберите требуемый шаблон или мастера для создания нового сайта.
Созданный сайт имеет разметку и дизайн, но в нем отсутствует контент. Далее в страницы этого сайта необходимо ввести соответствующий текст, рисунки, скрипты, счетчики и другие элементы сайта.
Программа, при помощи которой достаточно просто можно понять базовые принципы конструирования интернет страниц, обладающая широким выбором дополнительных инструментов для создания сложных интернет сайтов, порталов.
Коротко о программе Microsoft FrontPage
Это простой в освоении и удобный Web-редактор для проектирования, подготовки и публикации Web-сайтов. Благодаря интеграции с семейством продуктов MS Office, привычному интерфейсу и обилию шаблонов программа позволяет быстро освоить работу даже начинающим пользователям, знакомым с основами работы в MS Word. При этом FrontPage нельзя назвать решением для «чайников»: программа предоставляет широкие функциональные возможности и разнообразные средства оптимизации интернет страниц.
Следует отметить, что название Microsoft FrontPage существовало до 2003 года, а далее дополнялась новыми функциями и менялось само название программного обеспечения. В 2007 программа FrontPage была переименована на Microsoft Expression Web, а в 2010 в Microsoft Office SharePoint Designer. Фактический в новые версии были добавлены некоторые дополнения, но основной вид программы сохранялся.
Основные инструменты программы
Общий вид программы Microsoft FrontPage
Программа Microsoft FrontPage имеет много общего с инструментами MS Word, поэтому многие кнопки и вкладки меню также интуитивно понятны и это облегчает процесс создания страницы. Многие уже знают, как набирать и форматировать простой текст, создавать таблицы в Microsoft Word, по такому же принципу редактируется страница и в FrontPage.
Справа на рисунке показан общий вид программы со стандартным набором инструментов, при помощи которых можно сделать шаблон страницы с текстом, ссылками и картинками. Зайдите во вкладку "Вид" далее "Панель инструментов" и убедитесь, что включены "Cтандартная ", "Форматирование " и "Таблицы ", этих инструментов будет достаточно для создания просто страницы. Снизу обратите внимание на вкладки "Конструктор", "Код" и "Просмотр" - это три разных режима в которых можно всё время просматривать, как выгляди создаваемая страница.
- В Конструкторе вводятся все правки, набирается и форматируется текст, вставляются картинки, создаются ссылки, меняются цвета фона и шрифта таким же образом, как и в Microsoft Word.
- Во вкладке "Код" можно просмотреть, так называемый, HTML -код. HTML - это стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML. В этой вкладке тоже можно осуществлять редактирование страницы, но нужно знать этот язык разметки. Однако все изменения начинающим следует делать в конструкторе и все изменения в HTML будут происходить автоматический.
- Во вкладке "Просмотр" можно увидеть, как выглядит страничка непосредственно в браузере (в таком, как Internet Explorer)
Подробное описание других меню, кнопок и функций Microsoft FrontPage представлены в справке программы. Для этого нужно нажать клавишу "F1".
Создаём шаблон для страниц в FrontPage
Вставляем основную таблицу в редакторе
И так для того, чтобы создать несложный шаблон необходимо вставить таблицу с тремя блоками. Три блока - это простой стандарт: верхний блок предназначен для названия сайта, второй блок для ссылок навигации по сайту, третий блок для текста, картинок и другой информации на странице. Можно вставить больше блоков таблиц для удобства, но это уже дело вкуса, как, сколько и какими размерами делать эти блоки. Существуют и другой способ создания блоков не через создание таблиц, а вставкой в страниц, так называемых, "div" элементов и назначения им определённых стилей, но этот способ не для новеньких веб-мастеров, и об этом можно написать отдельную статью.
- Чтобы вставить таблицу заходим во вкладку "Таблица" > "Вставить" > "Таблица" и заполняем поля, как это показано на рисунке справа. Фактический можно ввести свои параметры, но данная таблица имеет фиксированную ширину и вытянута на 100% площади экрана. Таким образом таблица компактно будет отображаться в браузере.
- Затем необходимо настроить все три ячейки, так как они после вставки имеют одинаковую высоту. Нажимаем правой кнопкой мышки на самой верхней ячейки и заходим в "Свойства ячейки" в поле высота вписываем условно "150" и ставим галочку "в точках", т.е. размер ячейки составит 150 пикселей. В этом же меню мы можем выбрать цвет фона ячейки, а нажав в меню "стиль..." можно внести другие настройки ячейки, например выбрать цвет и размер границы ячейки, с этим можете поэкспериментировать и посмотреть результат. В самой ячейке можно вписать название сайта.
- Далее редактируем вторую ячейку, которая предназначена для ссылок навигации по сайту. Ширину делаем около 40 пикселей, этого будет достаточно, ну и другие настройки, как цвет фона и полей настраиваем на свой вкус. Далее пишем названия самих ссылок разделяя знаками вертикальной линии или другим знаком (просмотреть можете ниже скачав полностью шаблон). Выделяем тест и жмём кнопку выравнивания по центру, также как и в MSWord. Таким же образом можно менять шрифт, размер шрифта и другие настройки текста.
- Также настраиваем последнюю ячейку. Она предназначена для основного текста, где можно внести текст приветствия.
- Напоследок можно зайти во вкладку "Файл" > "Свойства", где можно внести название сайта и изменить общий фон страницы и другие общие настройки
Теперь шаблон готов. Он является каркасом для всех последующих страниц сайта. Вот как сайт выглядит в HTML коде:
Такой получаем шаблон для сайта
< html > < head > < meta http-equiv = "Content-Language" content = "ru" > < meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251" > < title > Название сайта < body bgcolor = "#F8F3FE" > < div align = "center" > < table border = "0" width = "800" cellspacing = "4" cellpadding = "0" height = "100%" > < tr > < td height = "150" bgcolor = "#4A4A4A" style = "border: 1px solid #000000" > < p align = "center" >< font face = "Verdana" size = "6" color = "#FFFFFF" > Название сайта < tr > < td height = "40" bordercolor = "#4A4A4A" style = "border: 1px solid #4A4A4A" bgcolor = "#FBFBFB" > < p align = "center" >< font face = "Verdana" size = "2" > < b > Главная | < b > Страница 2 | < b > Страница 3 | < b > Страница 4 | < b > Страница 5 | < b > Контакты < tr > < td valign = "top" style = "border: 1px solid #4A4A4A" bgcolor = "#FFFFFF" >< div style = "padding: 6px;" > < font face = "Verdana" size = "2" > Текст главной страницы. Здесь можно вставить текст приветствия и коротко написать чему посвящён сайт.
Этот HTML код можно сразу вставить в редактор во вкладке "Код" и сразу увидите готовый шаблон. Его можно менять и редактировать под собственные нужды. Здесь стоит пояснить, что там, где вставляется основной текст и чтобы он не располагался вплотную к полям он был обрамлен в тэг "div", c настройкой отступа, как это показано в примере.
Дополнительные шаблоны
- Нужно также знать, что в программе FrontPage, да и других подобных программах существуют стандартные шаблоны, по которые можно использовать для создания страниц, они легко редактируются и можно подогнать любой шаблон под свои нужды. Для того, чтобы выбрать стандартный шаблон перейдите во вкладку "Файл" > "Создать..." в открывшимся окне выбрать "Другие шаблоны страниц", где можно выбрать любой понравившейся шаблон.
- Есть второй вариант - скачать полностью шаблон из интернета. Сайтов предоставляющих такой сервис очень много. шаблоны могут быть как платными, так и бесплатными. Скачав тот или иной шаблон, его можно редактировать в программе, заполнять нужным содержанием и менять стиль того или иного элемента.
Использование стандартных макетов таблиц и тем
Microsoft FrontPage даёт хорошие инстурменты готовых макетов таблиц и тем оформления для сайтостроительства
Нужно знать, что в Microsoft FrontPage есть стандартный набор макетов таблиц и тем, при помощи которых можно неплохо научится искусством создания обычных страниц или сайтов визиток. И так справа вверху есть выпадающее меню (смотрите картинку справа, где также отображён результат использования матектов таблиц и темы оформления), нажав появится меню, в котором нужно выбрать "Макетные таблицы и ячейки" и далее ниже появится много различных макетов таблиц, можно выбрать любой по своему усмотрению и вкусу. Таким образом это освобождает создавать самому таблицу вручную.
И так набрав или вставив свой текст, логотип, ссылки в ячейки таблицы, зайдя в то же меню можно выбрать меню "Тема", где можно выбрать различные темы для оформления страницы, ссылок, фона страницы и многое другое. Такая возможность хороша для тех, кто только учиться создавать интернет страницы и вполне наглядно отражает сам процесс создания сайта. Другими словами, в Microsoft FrontPage можно экспериментировать с различными настройками и видеть наглядно, как преображается та или иная страница. Тут можно дать один совет, изучайте все функции программы и не бойтесь наживать на то или иной меню, так как у каждого инструмента есть своё свойство и предназначение для формирования полноценной страницы
Вставляем картинку и создаём ссылки на страницы
Важно начинающим веб-мастерам знать, как вставлять картинки в страничку и делать ссылки на другие страницы. Например вместо текста названия сайта можно вставить рисунок логотипа сайта. Для этого сначала нажмите в поле, куда необходимо вставить изображение, затем в самом верху нажмите на вкладку "Вставка" > "Рисунок" > "Из файла", выберите нужный рисунок и нажмите "Вставить", после чего рисунок появится на странице. Нажав по рисунку правой кнопкой мышки можно выйти в меню с дополнительными настройками изображения. Важно, чтобы все картинки находились в одной строго определённой папке для всех изображений.
Для перехода на другие страницы сайта необходимо создать ссылки, по которым пользователи смогут посетить все страницы сайта. Для это нужно выделить нужный текст для ссылки и перейти во вкладку "Вставка" > "Гиперссылка", в открывшемся меню нужно указать страницу, на которую создаётся ссылка, и нажать "ок". В этом же окне есть другие настройки для ссылок такие, как открывать ссылку в новом окне или нет. В принципе это можно изучить самостоятельно.
Заключение
В своей основе подобные редакторы между собой схожи, имеют схожие функции и меню. Освоив базовые настройки, с лёгкостью можно будет создавать сайты и в других редакторах. Освоив эти принципы, можно перейти к более сложному методу оформления сайтов - при помощи, так называемого, CSS. О том, что это такое и как редактировать дизайн сайта можно прочитать в статье про CSS .
Недостатком данного "шаблонного" метода заключается в том, что каждую страницу приходится создавать отдельно на базе созданного шаблона. Когда как при создании сайтов при помощи, так называемых, движков , не требуется отдельное формирование страниц, они формируются автоматический по мере добавления контента
Если у Вас возникли какие-либо вопросы по статье, использованию подобных программ для создания сайтов, то их можно задать в теме обсуждения нашего форума .
Статьи по схожей тематике
FrontPage – это редактор, который предназначен для создания страниц с гипертекстовым кодом. Эта программа обеспечивает создание HTML - тегов, списков, тем оформления и необычных стилей для веб-сайтов.
FrontPage считается софтом старого поколения и его практически не используют. Сейчас есть более продвинутая программа для создания гипертекста - Adobe Dreamweaver.
Многие веб - дизайнеры также используют SharePoint Designer , который сменил «старый» FrontPage. В FrontPage можно создавать веб-страницы с неактуальными на сегодняшний день стандартами гипертекста. Программа оснащена «древовидной структурой» и отображает подсказки при вводе тегов.
Функционал
Этот HTML – редактор пригодится начинающим веб-дизайнерам, которые только учатся создавать сайты начального уровня. В софте есть большое количество инструментов, которые обеспечивают создание страниц с гипертекстом. Используя FrontPage, вы оформите их графическое оформление и соответствующие теги сайта, которые указал заказчик.Плюс этого редактора – контроль ошибок, которые допускает пользователь при вводе тегов и команд. Программа найдёт все теги, которые введены не верно, и покажет варианты для исправления.
FrontPage оснащён интегрированным набором шаблонов. Не важно, новичок вы или профессионал, воспользуйтесь шаблоном и создайте страницы, сэкономив время. Программа работает, как менеджер и обеспечивает быструю публикацию созданной страницы. Если у вас возникнут сложные вопросы по работе с софтом – откройте справку, войдя в Google.
Режимы работы
В редакторе гипертекста есть режимы работы, которые отличаются возможностями. Режим конструктора показывает окно редактора и код с дополнительными опциями. Войдя в режим «кода», вы работает только с гипертекстом.В «просмотре результатов» вы посмотрите заготовку созданного сайта. Используя «комбинированный» режим, вы увидите основную область для создания кода и просмотр «заготовки».
Работая в «конструкторе», вы увидите все ошибки. В этом режиме можно работать с картинками и добавлять их в разные места. Вы можете добавлять все ссылки, рамки и прочие элементы. Режим кода подходит для просмотра гипертекста, но не для его редактирования.
Ключевые особенности
- обработка и создание веб-страниц с последующим оформлением;
- просмотр готового гипертекста, используя режим конструктора;
- встроенная база с заготовками, которая упрощает работу с проектом;
- менеджер с удобным режимом публикации;
- в программе есть встроенная справка;
- поиск данных и коррекция ошибок;
- графическое оформление редактора локализировано на русский язык.
Программа для создания сайтов ФронтПейдж - это настоящий помощник не только для новичков. Все страницы сайта выглядят в виде кода html . Этот код состоит из множества цифр, букв и символов. Чтобы создать сайт необходимо взять и написать этот код.
Для этого необходимо досконально разбираться, что обозначает каждый символ. Обычному человеку сделать это практически нереально. Вот, как выглядит эта страница сайта в виде кода html:
Программа для создания сайтов Фронт Пейдж
Существует специальная программа, которая позволяет создавать сайты без знания кода html . Это программа бесплатная и называется Microsoft Office FrontPage . По сути, это визуальный редактор и вы видите все, что создаете в онлайн.
| Сайтам, которые созданы в программе FrontPage не страшны вирусы и хакерские атаки. Копия сайта хранится у вас на компьютере. В любой момент, чтобы не случилось, вы сможете выложить его в Интернет без всяких проблем. |
Скачать программу Microsoft Frontpage - Уроки для новичков
Это очень простая в использовании программа. С ней справиться любой новичок. Она на русском языке и очень похожа на Microsoft Word (Ворд) .
Скачать программу Microsoft Frontpage - бесплатно
Вот, как она выглядит после установки на компьютер:
Скачайте программу Microsoft Frontpage и установите. Если у вас есть навыки работы в программе Ворд, то у вас не составит никакого труда создавать сайты в программе Фронт Пейдж. Она автоматически будет переводить все, что вы пишите, в код html .
Я уверяю, что работать в программе одно удовольствие. Все уроки на этом сайте ориентированы на новичков. Поэтому и сайт мы будем учиться делать в программе, которая очень легкая в понимании.
Сейчас Вы вкратце познакомились с предназначением программы. В последующих уроках Вы с успехом овладеете ее основными функциями и возможностями.
Вы убедитесь, что в этой программе сделать сайт - проще простого. Не забудьте скачать программу Microsoft Frontpage , мы будем создавать сайт именно в ней.
Первый вводный урок для новичков Вы прошли успешно. Теперь давайте двигаться дальше и начнем создавать сайт. Для этого перейдите к следующему уроку . В нем Вы узнаете из каких частей состоит страница сайта.
