Веб конструирование в редакторе фронт пейдж реферат
Обновлено: 17.05.2024
Автор: Алексеева Наталья Александровна
Учитель информатики, Средняя школа №3, Каменск-Уральский
Описание: данная статья будет полезна учащимся 9-11 классов, а также учителям информатики при подготовке к уроку.
Цель: рассмотреть основные понятия веб-конструировния; различные методы создания сайтов.
При планировании работы мы задались вопросом, а как же в сети размещаются сайты? Что нам потребуется для размещения нашего сайта в сети интернет? На что, в первую очередь, нужно обратить внимание при размещении сайта в сети?
Найдите ответы на эти вопросы в сети интернет
Что такое хостинг?
Из публикаций в интернете мы узнали, что важным для владельца сайта является хостинг. Это услуга по предоставлению места для физического размещения информации на сервере, постоянно подключенном к Интернету. Хостинг делится на две категории: платный и бесплатный.
В чем их отличие?
Важным отличием платного хостинга от бесплатного, мы считаем, тот факт, что он разрешает использование собственного домена.
Что такое домен?
Домен — это адрес сайта или определенная зона, которая имеет свое имя, не похожее ни на одно другое в системе доменных имен. Они бывают разных уровней.
Рассмотрим другой способ создания сайтов – создание сайтов при помощи визуальных web-редакторов. Визуальные web-редакторы – хороший способ сэкономить время на изучении web-программирования и быстро сделать сайт, наполнив его всей необходимой информацией. Для создания web-проекта с помощью подобной программы не нужно иметь специальных знаний и быть программистом. Они дают простор для творчества и гарантируют, что сайт не будет выглядеть точно так же, как тысячи других.
Проанализировав данную информацию мы выделим плюсы создания сайта при помощи конструктора:
• Не нужны специальные технические знания.
• Быстрое создание сайта в несколько кликов.
• Огромное множество вариантов дизайна сайта.
• Легкое администрирование.
Небольшой недостаток данного способа создания сайтов – все ограничено возможностями конструктора.
Говоря о способах создания сайтов, нельзя обойти стороной готовые шаблоны.
Рассмотрим создание сайтов с использование готовых шаблонов, на примере самых распространенных систем. Wix – это один из самых авторитетных конструкторов сайтов в мире, который имеет локализации для большинства стран. По умолчанию на бесплатном тарифе пользователь получает доменное имя и постоянный хостинг.
Мы выделили следующие достоинства Wix: функциональный и красивый интерфейс; отличный набор встроенных шаблонов; большое количество виджетов и настроек; магазин приложений с большим ассортиментом; мощный визуальный редактор, позволяющий менять дизайн сайта до неузнаваемости; широкая специализация платформы; удобная настройка SEO-параметров; большое количество FAQ и подсказок в панели управления; возможность раздельного редактирования мобильного и десктопного шаблона. Можно также отметить наличие редких функций и инструментов.
Из недостатков можно сказать о перегрузке административной панели из-за наращивания функционала добавлением виджетов и ограничении пропускной способности.
Следующим в нашем списке на ознакомление будет uCoz. uCoz — система управления сайтом и хостинг для сайтов, созданных с её использованием. Система бесплатна для пользователя, но при этом он получает много рекламных баннеров и некоторые другие ограничения. После регистрации на uCoz пользователь может выбрать название и зону бесплатного поддомена из множества предложенных вариантов. Позже его можно сменить на любое доменное имя 2-го уровня.
Мы выделим следующие достоинства данного редактора: большое количество встроенных шаблонов; великолепный встроенный инструментарий для продвижения сайтов; отличные возможности по изменению стандартных дизайнов сайта.
Несмотря на достоинства, перечисленные выше, главным фактором выбора не в пользу uCoz стало наличие на сайтах, созданных в бесплатном аккаунте, большого количество рекламы.
- Для учеников 1-11 классов и дошкольников
- Бесплатные сертификаты учителям и участникам
Выберите документ из архива для просмотра:
Выбранный для просмотра документ Инструкция.doc
Работа в редакторе FrontPage . Урок 1.
Запустить редактор FrontPage . Откроется пустая страница.
Свернуть окно. Открыть файл озера. txt .
Отформатировать текст следующим образом:
Заголовок – Arial , размер 6 (24 пт.), цвет бирюзовый, начертание полужирный, по центру;
Весь текст – Times New Roman , размер 4 (14 пт.);
Первые строчки каждого раздела – цвет бирюзовый, графический маркер;
Названия озер – начертание полужирный.
С помощью команды Вставка – Горизонтальная линия поместим на страницу две горизонтальные разделительные линии.
Настроить параметры линии. Вызвать контекстное меню линии. Открыть окно Свойства горизонтальной линии и установим параметры в соответствии с рисунком.
Разместить на веб-странице изображения. Для этого установите курсор перед названием озера. С помощью команды Вставка – Рисунок – из файла , вставить нужный рисунок.
Настроить параметры рисунка. Вызвать контекстное меню рисунка. Открыть окно Свойства рисунка . Установить параметры: обтекание – справа, выравнивание – по правому краю.
Открывается окно Свойства бегущей строки . Настроим параметры в соответствии с рисунком
С помощью кнопки Стиль – Формат – Шрифт, выбрать размер, начертание и цвет текста бегущей строки.
По команде Файл – Сохранить как…, сохранить работу в своей папке своего класса.
Выбранный для просмотра документ Работа с веб-редактором FrontPage Урок 1.ppt
Описание презентации по отдельным слайдам:
Редактор Microsoft FrontPage относится к программным средствам визуального веб-конструирования. При работе с веб-редактором FrontPage можно обойтись без знания языка разметки гипертекстовых документов HTML. Веб-страница просто конструируется на экране и сохраняется в формате .html. Выполняемые при этом действия напоминают работу в текстовом редакторе Word.
Панели Стандартная, Форматирование и Рисование по своим возможностям напоминают аналогичные панели текстового редактора Word. Вид Рабочей области зависит от выбранного режима работы. В режиме Конструктор веб-страница конструируется из текстовых блоков и графических объектов. При этом автоматически генерируется ее HTML-код, который можно просматривать и редактировать в режиме Код. Режим С разделением является комбинацией этих двух режимов. Режим Просмотр позволяет просматривать созданные страницы. .
7. Разместить на веб-странице изображения. Для этого установить курсор перед названием озера и применить команду Вставка – Рисунок -… 8. Настроить параметры рисунка через окно Свойства рисунка контекстного меню.
ВОПРОСЫ Какие возможности по форматированию текста имеет FrontPage? Как задается размер шрифта на веб-страницах? Как создать бегущую строку? Как выполняется размещение изображения на веб-странице? Каким образом выполняется настройка изображения?
Выделяют две основные группы методов и соответствующих инструментов разработки веб-сайтов: визуальные и ручные. Ручные (программные) методы веб-конструирования требуют знания языка разметки HTML. Визуальные же методы позволяют производить все работы по созданию веб-страниц с высокой степенью автоматизации и не требуют знания языка разметки HTML.Они уменьшают трудоёмкость и сроки разработки сайта.
При создании веб-сайтов могут использоваться специальные инструменты – редакторы визуального конструирования. Например: Microsoft FrontPage, Adobe (Macromedia) Dreamweaver, NamoWebEditor и др. С помощью таких редакторов веб-страницы создаются в интерактивном режиме, при этом автоматически генерируется соответствующий HTML-код, который представляет собой набор команд языка разметки HTML.
Статические страницы отображаются браузером пользователя в том виде, в каком были созданы и размещены на веб-сервере. Динамические страницы генерируются по запросу пользователя – информация на них загружается серверными программами из баз данных.
1.2 Проектирование сайта
Выделяют следующие основные этапы разработки веб-сайтов:
определение тематики сайта, его целей и задач;
проектирование структуры сайта, определение разделов и связей между страницами;
разработка дизайна сайта, т.е. стиля оформления страниц;
подготовка материалов (текстов и графики) для размещения на веб-страницах;
конструирование страниц сайта (создание HTML-кода);
размещение в сети (публикация) и тестирование сайта.
Под стилем оформления веб-страницы понимают сочетание свойств элементов веб-страницы: стиля текста (совокупности параметров формата символов и абзацев) и стиля графических элементов (совокупности параметров формы).
Разработайте проект веб-сайта по одной из тем: Моя семья. Моя школа. Мои друзья. Мои любимые занятия. Моя Родина – Беларусь. Природа родного края. Интересные профессии.
При разработке проекта веб-сайта будем придерживаться этапов разработки веб-сайта.
Возьмём первую из предложенных тем: Моя семья.
Цель: рассказать о своей семье.
Задачи: рассказать о каждом члене семьи (имя, возраст, род занятий, предпочтения).
Структуру сайта для наглядности изобразим в виде двухуровневой схемы (рис. 1.2.1). На первом уровне поместим название веб-сайта, фото каждого члена семьи и гиперссылки.
рис. 1.2.1
На втором уровне схемы изобразим веб-страницы, посвящённые каждому члену семьи с информацией о каждом из них (рис. 1.2.2).
рис. 1.2.2
Разработка проектов веб-сайтов по другим темам может производиться по схеме, указанной выше.
§ 2. Использование офисных приложений для создания веб-страниц
2.1 Создание веб-страниц в редакторе MS Word
Коротко о главном:
Любой документ MS Office можно сохранить в виде веб-страницы. Для этого достаточно выполнить команду Файл – Сохранить как веб-страницу.
Для создания гиперссылки необходимо выполнить следующие действия:
выделить текст гиперссылки;
выполнить команду Встака – Гиперссылка, выбрать пункт Связать с файлом, веб-страницей, выделить имя файла, подтвердить выбор нажатием кнопки Ок.
Создайте фрагмент сайта по одной из тем: Моя Родина – Беларусь. Моя школа. Мои друзья. Мои любимые занятия. Моя семья (пример главной страницы представлен на образце). В качестве гиперссылок используйте картинки из коллекции клипов.
образец
Сохранить документ MS Office в виде веб-страницы:
выполнить команду Файл – Создать;
выбрать пункт Веб-страница;
выполнить команду Формат – Тема;
выбрать для оформления тему Пласты.
Внести текст и изображения как показано на рис. 2.1.1:
рис. 2.1.1
для вставки рисунков из коллекции клипов воспользоваться командой Вставка – Рисунок – Картинки;
форматировать размер рисунка командой Формат – Рисунок… - вкладка Размер (рис. 2.1.2).
рис. 2.1.2
Сохранить веб-страницу под именем family.mht.
Создать веб-страницы второго уровня mama.mht, papa.mht, iam.mht:
выполнить команду Файл – Создать;
выбрать пункт Веб-страница;
выполнить команду Формат – Тема;
выбрать для оформления тему Кипарис.
заполнить веб-страницу информацией (пример: рис. 2.1.3);
рис. 2.1.3
сохранить веб-страницу под именем mama.mht;
аналогично пп. 4а)-4f) создать веб-страницы papa.mht и iam.mht.
На главной веб-странице файла family.mht сделать гиперссылки на соответствующие веб-страницы:
выделить рисунок (текст) – Вставка – Гиперссылка …;
в поле Папка выбрать соответствующий файл (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):
теги для открытия и закрытия HTML-документа ( - );
теги для размещения неотображаемой на странице служебной информации ( - );
теги с текстом для информации, отображаемой в заголовке окна браузера ( Образец 1 );
теги для размещения информации, отображаемой в браузере ( -
-80%
ГОСТ
Web–страницы создаются на основе языка описания гипертекстовых документов HTML, в котором содержание и формат гипертекстовых документов определяются с использованием команд, называемых тегами. HTML–страницы представляют собой документы обычного текстового формата и содержат специальные команды форматирования (теги HTML).
Для создания сайта с помощью приложения FrontPage не обязательно знать сам HTML. Во FrontPage можно просто набрать текст, затем поместить его на Web-страницу, расположив где нужно рисунки. С помощью FrontPage создаются эффекты, для которых обычно используются скрипты или программы DHTML.
Сайт или Web-узел – представляет набор связанных между собой близких по смыслу Web-страниц и файлов. В программе FrontPage имеются мастера для создания сайта и шаблоны (наборы) предварительно разработанных текстовых и графических форматов, используя которые можно создавать новые веб-страницы. С помощью мастеров и шаблонов FrontPage создаются сайты различных типов.
Каждый сайт имеет одну Web-страницу, называемую главной или домашней. Это самая первая страница, встречающая посетителей сайта. С помощью навигации или гиперссылок, пользователь сможет перемещаться по сайту.
Как правило, сайт размещают на Web-сервере, представляющем собой компьютер, предоставляющий доступ к Web-страницам посетителям сайта. FrontPage дает возможность создания сайта в файловой системе компьютера пользователя, а затем публикации его готового на Web-сервере.
Окно приложения FrontPage
После запуска программы FrontPage (Пуск – программы – FrontPage) на экране появляется окно программы, в котором отображена новая страница (нов_стр_1.htm). В области задач отобразится панель Приступая к работе (рис.1).
Готовые работы на аналогичную тему
Окно программы FrontPage содержит: строку заголовка, строку меню, панели инструментов редактирования и форматирования, кнопки быстрого выбора тега (для редактирования и ввода тегов), ярлычки вкладок выбора страниц (для перехода между страницами), рабочее окно, в котором отображена новая страница, панель рисования, кнопки режимов просмотра, индикатор ожидаемого времени загрузки страниц при скорости 56 кбит/с, индикатор размера страниц, область задач.
В программе FrontPage можно просматривать документ в одном из четырех режимов: Конструктор, Код, С разделением и Просмотр. В режиме Конструктор можно визуально создать, отредактировать и отформатировать страницу, т.е. ввести текст, добавить рисунки, таблицы аналогично работе в текстовом редакторе. При этом теги языка HTML автоматически добавятся в фоновом режиме, однако кодировка HTML на экране не отобразится.
В режиме Код на экране отобразится вся кодировка и появится возможность прямого редактирования кода HTML, а также ввода новых кодов. На рисунке 2 изображен HTML–код новой пустой страницы в редакторе FrontPage .
В режиме С разделением - на экране отобразится Web-страница одновременно в двух режимах: Коде и Конструкторе. В режиме просмотра Web–страница приобретет вид аналогичный ее отображению в Web–браузере.
Команды, используемые для работы с Web–страницами и Web–узлами, располагаются в меню Вид программы FrontPage (рис.3):
Создание новой пустой Web-страницы
В случае отображения новой пустой страницы при открытии окна FrontPage разработка веб-страницы может осуществляться на базе пустой страницы. В случае отображения пустого главного овна при открытии редактора для создания новой пустой страницы нужно будет выбрать команду Файл - Создать и в области задач команду Пустая страница.
В окне программы появляется новая пустая страница. Сохраним ее, но прежде в окне Сохранить создадим папку с нужным именем (например, EN), в которой создадим вложенную папку images для рисунков, а потом сохраним страницу в папке EN. Имя странице назначим index, так обозначается домашняя или главная страница. Редактор сохранит страницу с расширением .htm. В результате, в папке EN будут находиться вложенная папка images и файл index.htm.
Изображения для веб-страниц нужно заранее подготовить и скопировать в папку images, причем имена изображений должны быть записаны буквами латинского алфавита.
Разработка веб-страницы
Теперь приступим к разработке страницы, которая начнется с ее разметки. Для разметки страницы будем использовать таблицы, можно воспользоваться командой Макеты страницы, расположенной на панели Макеты таблицы и ячейки в области задач. Устанавливаем в области задач Макетные таблицы и ячейки (рис.4).
Затем мышкой выбираем нужный макет таблицы, в результате получаем размеченную страницу, представленную на рисунке 5.
Читайте также: