Известные редакторы визуального конструирования. Общее представление о веб-конструировании. Попадание в десяточку

ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ

§ 1. Представление о веб-конструировании

1.1 Инструменты и методы разработки веб-сайтов

Коротко о главном:

Выделяют две основные группы методов и соответствующих инструментов разработки веб-сайтов: визуальные и ручные . Ручные (программные) методы веб-конструирования требуют знания языка разметки HTML. Визуальные же методы позволяют производить все работы по созданию веб-страниц с высокой степенью автоматизации и не требуют знания языка разметки HTML.Они уменьшают трудоёмкость и сроки разработки сайта.

При создании веб-сайтов могут использоваться специальные инструменты – редакторы визуального конструирования. Например: Microsoft FrontPage, Adobe (Macromedia) Dreamweaver, NamoWebEditor и др. С помощью таких редакторов веб-страницы создаются в интерактивном режиме, при этом автоматически генерируется соответствующий HTML-код , который представляет собой набор команд языка разметки HTML.

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

1.2 Проектирование сайта

Выделяют следующие основные этапы разработки веб-сайтов:

• определение тематики сайта, его целей и задач;

  проектирование структуры сайта, определение разделов и связей между страницами;

  разработка дизайна сайта, т.е. стиля оформления страниц;

  подготовка материалов (текстов и графики) для размещения на веб-страницах;

  конструирование страниц сайта (создание HTML-кода);

  размещение в сети (публикация) и тестирование сайта.

Под стилем оформления веб-страницы понимают сочетание свойств элементов веб-страницы: стиля текста (совокупности параметров формата символов и абзацев) и стиля графических элементов (совокупности параметров формы).

Упражнение

Разработайте проект веб-сайта по одной из тем: Моя семья. Моя школа. Мои друзья. Мои любимые занятия. Моя Родина – Беларусь. Природа родного края. Интересные профессии.

Технология разработки:

При разработке проекта веб-сайта будем придерживаться этапов разработки веб-сайта.

Возьмём первую из предложенных тем: Моя семья.

Цель: рассказать о своей семье.

Задачи: рассказать о каждом члене семьи (имя, возраст, род занятий, предпочтения).

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

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

рис. 1.2.2

Спроектируем дизайн сайта. Основные структурные элементы оформления страницы (текстовые блоки) и графические объекты (рисунки-логотипы для главной страницы, фотографии членов семьи, «обои» (фоновые рисунки), текстовые гиперссылки). Для размещения элементов в заданных местах страницы будем использовать таблицы (рис. 1.1 и рис. 1.2).

Разработка проектов веб-сайтов по другим темам может производиться по схеме, указанной выше.

§ 2. Использование офисных приложений для создания веб-страниц

2.1 Создание веб-страниц в редакторе MS Word

Коротко о главном:

Упражнение

Создайте фрагмент сайта по одной из тем: Моя Родина – Беларусь. Моя школа. Мои друзья. Мои любимые занятия. Моя семья (пример главной страницы представлен на образце). В качестве гиперссылок используйте картинки из коллекции клипов.

образец

1. выполнить команду Файл – Создать;

   выбрать пункт Веб-страница;

   выполнить команду Формат – Тема;

   выбрать для оформления тему Пласты .

Внести текст и изображения как показано на рис. 2.1.1:

рис. 2.1.1

для вставки рисунков из коллекции клипов воспользоваться командой Вставка – Рисунок – Картинки ;

форматировать размер рисунка командой Формат – Рисунок… - вкладка Размер (рис. 2.1.2).

рис. 2.1.2

Создать веб-страницы второго уровня mama.mht, papa.mht, iam.mht:

1. выполнить команду Файл – Создать;

   выбрать пункт Веб-страница;

   выполнить команду Формат – Тема;

   выбрать для оформления тему Кипарис .

   заполнить веб-страницу информацией (пример: рис. 2.1.3);

рис. 2.1.3

аналогично пп. 4а)-4f) создать веб-страницы papa.mht и iam.mht.

На главной веб-странице файла family.mht сделать гиперссылки на соответствующие веб-страницы:

1. выделить рисунок (текст) – Вставка – Гиперссылка …;

   в поле Папка выбрать соответствующий файл (mama.mht);

   при необходимости изменить текст подсказки или ввести текст;

   повторить действия, опираясь на пп.5а)-5d), для остальных гиперссылок.

Презентации по темам, указанным в упражнении, выполнить аналогично пп. 1-6.

2.2 Сохранение презентаций PowerPoint в виде веб-страниц

Коротко о главном:

Презентацию PowerPoint можно сохранить в виде веб-страницы выполнив следующие действия: выбрать меню Файл – выбрать пункт Сохранить как веб-страницу – в окне Сохранение документа Веб-страница (*. htm , *. html ) – ввести имя файла – нажать кнопку Сохранить .

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

Упражнение

Создайте фрагмент сайта на основе готовой презентации:

а) «Электрический ток»;

б) «Пространственные фигуры»;

в) «Животные родного края»;

г) «Оптические приборы».

Технология создания:

Открыть предложенный учителем файл с презентацией по одной из указанных тем.

Сохранить презентацию в виде веб-страницы: Файл - выбрать пункт Сохранить как веб-страницу – в окне Сохранение документа выбрать тип сохраняемого файла Веб-страница (*. htm , *. html ) – ввести имя файла (или оставить прежнее) – нажать кнопку Сохранить .

Изменить настройки и параметры веб-документа во время сохранения презентации: нажать кнопку Опубликовать (рис. 2.2.1)

рис. 2.2.1

Настроить цветовые эффекты: в окне Публикация веб-страницы нажать кнопку Веб-параметры (рис 2.2.2)– вкладка Общие – выбрать цветовую схему Цвета презентации (рис. 2.2.3) – если а презентации есть гиперссылки, то снять флажок Добавить панель смены слайдов – Ок - Опубликовать .

рис. 2.2.2

рис 2.2.3

Просмотреть сохранённый фрагмент веб-сайта в браузере.

§ 3.Основы языка разметки HTML.

3.1 Создание HTML-документа в редакторе Блокнот

Коротко о главном:

Абзац задаётся тегом

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

Полужирное начертание символов задаётся тегом , курсивное начертание символов задаётся тегом i.

Цвет фона всей страницы задаётся атрибутом bgcolor, цвет текста – атрибутом text.

Для задания шрифта, цвета и размера символов используется тег. Шрифт задаётся арибутом face, значением которого является название шрифта, например Arial. Размер символов задаётся атрибутом size и может выражаться в условных единицах, которые могут принимать значения от 1 до 6. Цвет символов задаётся атрибутом color.

Упражнение

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

образец 1

Технология оформления:

Открыть предложенный учителем текстовый документ в редакторе Блокнот (рис. 3.1.1).

рис. 3.1.1

Добавить в документ (рис. 3.1.2):

1. теги для открытия и закрытия HTML-документа (-);

   теги для размещения неотображаемой на странице служебной информации (-);

   теги с текстом для информации, отображаемой в заголовке окна браузера (Образец 1);

   теги для размещения информации, отображаемой в браузере (-

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Подобные документы

Язык программирования HTML: его мультимедийные и графические возможности. Требования к оформлению и созданию Web-сайтов. Методические разработки по изучению "Web конструирования" в школьном курсе информатики и информационно–коммуникационных технологий.

курсовая работа , добавлен 12.09.2012


Анализ учебно-методической документации. Методы проектирования системы уроков по теме. Характеристика конструирования средств тематического контроля. Структурно-логический анализ учебного материала. Разработка плана для уроков теоретического обучения.

курсовая работа , добавлен 21.05.2015


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

курсовая работа , добавлен 24.06.2011


Особенности обучения учащихся с нарушением слуха. Специфика обучения школьников технологиям создания гипертекста. Разработка программы для обучения школьников 11-х классов с нарушением слуха технологиям создания Web–страниц с помощью языка HTML.

дипломная работа , добавлен 25.04.2011


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

контрольная работа , добавлен 25.03.2010


Интерактивная доска как средство мультимедиа, ее использование при преподавании технических дисциплин в колледже. Методическая разработка занятий по дисциплине "Конструирование и производство автотракторной техники". Технология разработки занятия.

дипломная работа , добавлен 13.06.2011


Изучение истории возникновения искусства оригами. Ознакомление с учебно-методическими рекомендациями по выполнению изделий в технике оригами в начальной школе. Рассмотрение и анализ процесса моделирования и конструирования из бумаги на начальном этапе.

дипломная работа , добавлен 24.09.2017


контрольная работа , добавлен 16.11.2013

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

Попадание в десяточку

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

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

(https://notepad-plus-plus.org/)

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

PSPad (http://www.pspad.com/)

Также как и предыдущая программа, PSPad – это инструмент общего назначения, который подсвечивает css и html текст, автоматически сохраняет изменения после завершения программы, проверяет правильность написанного кода, позволяет включить режим предпросмотра разрабатываемых страниц в . Данный визуальный редактор содержит в себе больше полезных функций, чем Notepad++, однако он все еще относится к простым средствам разработки.

KompoZer (http://www.kompozer.net/)

Программный продукт относится к WYSIWYG-редакторам, что означает «что ты видишь, то ты и получишь». KompoZer входит в список лидеров среди визуальных редакторов и неспроста. Он позволяет разработчикам и дизайнерам работать вместе, так как наделен 3-мя режимами работы. Начнем с моего любимого – режима кода.

Несмотря на отсутствие автозавершения парных элементов языков разметки, режим позволяет править код как в текстовых редакторах. В WYSIWYG-режиме дизайнерам удобно оформлять внешний вид веб-ресурсов. Совместный же режим предоставляет возможность детального ознакомления с разметкой конкретных объектов.

Komodo Edit (http://www.activestate.com/komodo_edit/)

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

Ко всему этому хочу добавить, что возможности программы можно значительно расширить при помощи специальных утилит!

jEdit (http://www.jedit.org/)

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

Однако лично для меня камнем преткновения на пути к этому редактору стал его неаккуратный и неудобный интерфейс.

Aptana Studio (http://www.aptana.com/)

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

Fraise (https://www.assembla.com/home)

Это текстовый редактор, который подходит для создания веб-ресурсов, к сожалению, только под платформу Mac OS X 10.6. Программа поддерживает цветную подсветку текста различных языков, обеспечивает предпросмотр созданных страниц, оснащена специальными командами для ускорения набора кода и проверки синтаксиса, позволяет пользоваться регулярными выражениями, а также автоматически дописывает вводимые свойства.

Gedit (http://projects.gnome.org/gedit/)

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

• Автозавершение парных элементов;
• Генерация временного текста;
• Проверка синтаксиса кода;
• Предпросмотр в любом браузере.

Vim (http://www.vim.org/)

Тяжелый в освоении консольный редактор, обладающий множеством плюсов для программистов. Оснащен 3-мя режимами работы.

ICEcoder (https://icecoder.net/downloads)

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

Что касается меня, то я часто меняю WYSIWYG-программы, пробуя новые версии и продукты разных компаний.

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

С уважением, Роман Чуешов

Розгляд теми: Ідентифікація ПК в мережі. Принцип адресації.

ГЛАВА 3. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ

3.1. Общее представление о веб-конструировании

Всемирная информационная паутина (WWW – World Wide Web) является в настоящее время популярной и удобной службой сети Интернет.
Веб-страницы и веб-сайты широко применяются во Всемирной паутине.

Для создания веб-сайтов используется язык разметки гипертекстовых документом HTML (HyperText Markup Language).
Методы конструирования веб-сайтов и инструменты, с помощью которых выполняется конструирование, очень разнообразны, их можно классифицировать по различным признакам. Важнейшими из них являются степень автоматизации конструирования сайта и методика процесса разработки.

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

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

Главным принципом визуального метода является принцип «Что вижу, то и получаю» - WYSIWYG (от англ. предложения “What you see is what you get”). При создании сайтов с использованием визуального метода необходимо выбрать инструменты – редакторы визуального конструирования.

Наиболее известными такими редакторами являются: Microsoft FrontPage, DreamWeaver (Macromedia), NamoWEbEditor, Adobe GoLive и др. Во время создания веб-сайта эти редакторы обеспечивают пользователю возможность работать без непосредственного подключения к сети Интернет. В дальнейшем созданный веб-сайт можно разместить в сети Интернет.

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

Для конструирования веб-сайтов могут использоваться системы управления содержанием CMS (Content Management System), которые предоставляются некоторыми специальными платными или бесплатными сервисными службами. Системы CMS представляют собой своего рода конструкторы, позволяющие создавать сайт и сопровождать его в дальнейшем. При создании структуры и навигации по сайту в системе CMS обычно не требуется глубоких знаний языка HTML. Примеры систем CMS можно найти на сайтах Narod.ru и Boom.ru.

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

Для непосредственной работы с HTML-кодом могут использоваться специальные инструменты разработки, например программы Hotdog, HomeSite и др. Эти программы облегчают разработчику веб-сайта ввод и редактирование основных конструкций языка HTML.

Вводить основные конструкции языка HTML можно в программе Блокнот. Об этом способе работы мы поговорим позже.

Кроме языка разметки гипертекстовых документов HTML для создания веб-сайтов используются другие языки программирования, например Java Script и PHP.

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

Методика веб-конструирования предполагает выполнение проектирования сайта за несколько основных этапов:

1. Разработка тематики сайта, его целей и задач.
2. Логическое проектирование, которое включает в себя: формирование структуры сайта (линейный, иерархический), название разделов, связь между ними, подготовка информации, размещаемой на каждой веб-странице сайта.
3. Непосредственное создание сайта, которое включает в себя определение методов проектирования и выбор инструментов для него.
Методы и инструменты конструирования веб-сайтов очень разнообразны, например можно создавать сайты динамические и статические.

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

Статический сайт не обновляется в режиме реального времени.

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

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

?
1. Какие два основных метода веб-конструирования вам известны?
2. Какие инструменты могут использоваться при создании веб-сайтов?
3. В чем разница между визуальным и программируемым методами веб-конструирования?
4. Для чего используются скрипты?
5. Какие этапы следует выполнять при проектировании веб-сайта?

3.2. Основные понятия HTML. Представление о структуре HTML-документа

3.2.1. Структура HTML-документа

Документ HTML представляет собой обычный текстовый файл, который содержит конструкции языка HTML. Поэтому этот документ можно создавать в обычных текстовых редакторах, например программе Блокнот, а затем сохранять созданные файлы с расширением.htm или.html.

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

Большинство тегов парные, т.е. имеют открывающий элемент <> и закрывающий элемент .

Между ними и находятся коды, которые распознает браузер.

HTML-документ всегда должен начинаться отрывающим тегом и заканчиваться закрывающим .

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

В блоке заголовка размещается тег . Текст, указанный в этом теге отображается в заголовке окна браузера.
В HTML-документе можно разместить комментарии, которые браузером не отображаются: .

Пример 1. Создать простой HTML-документ в Блокноте. Сохранить созданный файл prim1.htm. Открыть созданный документ в браузере.
Структура такого документа представляется следующим образом:

Текст первой странички

Результат отображения HTML-документа в браузере представлен на рис. 3.1.

3.2.2. Оформление HTML-документа

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

<тег атрибут1=значение атрибут2=значение …>

Тег определяет внешний вид всей веб-станицы, в то время как отдельные ее элементы, например заголовки, таблицы могут иметь свое особенное оформление.
Выбор цвета страницы, фонового рисунка и цвета текста на ней является весьма важным, так как от этого зависит визуальное восприятие всего сайта.
Цвет страницы задается атрибутом bgcolor, а цвет текста - text. Значением атрибутов является цвет, который задается своим названием на английском языке или его шестнадцатеричным кодом.

Пример 5. В этом примере задан синий цвет страницы двумя способами:

или

Результат отображения HTML-документа в браузере представлен на рис. 3.2.

?
1. С помощью чего создается HTML-документ?
2. Для чего предназначены теги и атрибуты в языке HTML?

Упражнения

1. Просмотрите текст HTML-документа:

а) Какой цвет фона и текста будет на веб-странице?
б) При выводе заголовков на веб-странице размер их уменьшается или увеличивается?

3.3. Работа с редактором визуального конструирования FrontPage

3.3.1. Основные элементы интерфейса FrontPage

Редактор Microsoft FrontPage относится к редакторам визуального веб-конструирования. При работе с веб-редактором FrontPage можно обойтись без знания языка разметки гипертекстовых документов HTML. Веб-страница просто конструируется на экране и сохраняется в формате.html. Выполняемые при этом действия напоминают работу в текстовом редакторе Word.

Интерфейс редактора FrontPage достаточно прост, чтобы пользователь смог быстро освоить основные приемы работы. После запуска FrontPage открывается окно, основные элементы которого представлены на рис. 3.3.

Панели Стандартная, Форматирование и Рисование по своим возможностям напоминают аналогичные панели текстового редактора Word.

Вид Рабочей области зависит от выбранного режима работы. В режиме Конструктор веб-страница конструируется из текстовых блоков и графических объектов. При этом автоматически генерируется ее HTML-код, который можно просматривать и редактировать в режиме Код. Режим
С разделением (рис. 3.4) является комбинацией этих двух режимов. Режим Просмотр позволяет просматривать созданные страницы.

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

3.3.2. Создание веб-сайта в редакторе FrontPage

Рассмотрим этапы и приемы работы в редакторе FrontPage на примере разработки веб-сайта «Беларускія пісьменнікі» (см. Рис. 3.3).
Для создания этого веб-сайта необходимо уяснить его структуру, и предполагаемое содержание, т.е. подготовить проект сайта. Фрагмент структуры сайта для наглядности изобразим в виде двухуровневой схемы (рис. 3.5).

Рис. 3.5.
На первой странице (верхний уровень) размещается заголовок сайта «Беларускія пісьменнікі», текстовые гиперссылки и гиперссылки с изображением писателей и поэтов, позволяющие открыть страницы второго уровня.

На втором уровне разместим три страницы одинаковой структуры, содержащие следующую информацию, как показано на рисунке 3.6.

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

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

Файлы всех веб-страниц сайта размещаются в отдельной папке. Это в дальнейшем поможет упростить размещение сайта в сети Интернет. Файлу главной веб-страницы принято давать имя index или main с расширением.htm, хотя это требование не является обязательным.

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

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

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

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

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

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

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

?
1. Для чего предназначен редактор FrontPage?
2. Назовите основные элементы интерфейса редактора FrontPage. Каково их назначение?
3. Для чего используется Тема при оформлении веб-страницы?

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

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

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

Рис. 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).