Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Другие методич. материалы / Методические рекомендации по созданию сайта с помощью визуального редактора сайтов Web Page Maker
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 24 мая.

Подать заявку на курс
  • Информатика

Методические рекомендации по созданию сайта с помощью визуального редактора сайтов Web Page Maker

библиотека
материалов

Методические рекомендации по созданию сайта с помощью визуального

редактора сайтов Web Page Maker


Цель: Научиться работать в визуальном редакторе создания сайтов, научиться создавать тематические HTML сайты из нескольких страниц.


Web Page Maker это простой визуальный инструмент для создания веб – страниц. С его помощью вы сможете создать свой сайт не обладая никакими знаниями HTML. Просто перетаскивайте мышкой на рабочее пространство программы изображения, текст, музыку и видео. Во время работы с лёгкостью можно передвигать объекты по всей странице.


Для создания сайта необходимо : придумать тему и цель будущего сайта, продумать структуру сайта, определить количество страниц, продумать разметку страницы и общие для каждой страницы элементы (заголовок, панель навигации, фреймы), сделать макет страницы, подобрать материал для наполнения страниц

(hello_html_70d1c102.pngЗаранее создайте папку с необходимыми для сайта рисунками, музыкой, видео, текстом и т. д )

Рассмотрим пример:

Тема, цель – Мой личный сайт для размещения

информации о себе и общения с

ровесниками .

Сhello_html_m8de550a.gifтруктура сайта – это организация его страниц

Количество страниц – 9

hello_html_m782e984e.png



Мhello_html_3b8a6ff7.gifакет страницы



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

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


hello_html_m5cd9013d.pngВАРИАНТЫ :

А) Выберем Файл-Новый сайт из шаблона

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


hello_html_m5534c65f.gifБ) Выберем Файл – Новый сайт, в результате получим пустую страницу, дизайн придумываем сами, оформляем по своему вкусу и здесь очень пригодится умение работать

в графическом редакторе, например Photoshop.



Рассмотрим создание страницы из шаблона , пункт А)

Вhello_html_m53acff5.jpgНИМАНИЕ ! Первая страница всегда называется index

2hello_html_194b1e0d.png. Действия со страницами Страницы можно: Добавлять

hello_html_52db064f.pngКлонировать

hello_html_m64f3e9b0.jpgУдалять

hello_html_24693c3b.pngИмпортировать html страницу

Передвигать

Добавьте (клонируйте) нужное количество страниц, переименуйте их по-своему.

3. Изменение объекта на странице

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

1hello_html_68b6bf3c.png) При изменении текста, появляется текстовый редактор (Меняем текст и нажимаем ОК)









2) При изменении рисунка, появляется окно выбора рисунка.(Выбираем рисунок из своей папки)

hello_html_m2cda349e.png









4. Добавление новых объектов

Для добавления новых объектов на страницу служит меню Вставка

hello_html_5f1f8524.pnghello_html_m4ea215ae.png









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


В меню ФОРМАТ можно задать СВОЙСТВА СТРАНИЦЫ ( заголовок, цвет фона, ключевые слова и т.д.)

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

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

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

  • Описание
    Здесь могут быть заданы краткое описание содержания документа для поисковых машин интернета.

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

Задайте свойства страницы

6hello_html_4bbac86a.png. Создание второй страницы

Есть несколько путей создания второй странички:

А)

1hello_html_d8fb71a.png. Нажмите кнопку  Добавить новую страницу в панели

 Содержание сайта с правой стороны экрана. (Чтобы скрыть

или отобразить панель, нажмите F8.)

2. Появится новый пустой файл. По умолчанию

Web Page Maker назовёт его "page2".


Б)

  1. Нажмите кнопку Клонировать страницу в панели 

Содержание сайта с правой стороны экрана.

2.Появится копия этого файла. По умолчанию Web Page Maker назовёт его "page2". 


Удалите содержимое, которое не должно находиться на этой странице и добавьте новое.

7hello_html_4081423e.png. Переименование веб-страницы:

1. Выберите страницу, которую вы хотите переименовать

в панели Содержание сайта .

2. Кликните правой на имени файла и нажмите

Переименовать страницу.

3. Введите новое имя страницы.

8. Ссылка на другую страницу вашего сайта

Теперь на вашем сайте уже есть не менее двух страниц, и вам следует создать между ними гиперссылки

Для создания ссылки на другую страницу вашего сайта:


1. Выделите текст или изображение на "первой" странице.

  • Для выделения изображения - кликните по нему один раз.

  • Для выделения текста, кликните дважды по текстовому полю,

и с помощью курсора выберите необходимый вам диапазон текста в Текстовом редакторе.


hello_html_m342a3352.png2.Нажмите кнопку "Задать гиперссылку" на панели инструментов. Появится диалог "Гиперссылка ".

hello_html_m118f352e.png

3. Выберите "Страница на моём сайте "

из выпадающего меню Тип.  


hello_html_3b76afbd.png

4.Для создания гиперссылки на другой

сайт выберите Тип – Другой сайт и

запишите URL адрес другого сайта.

Примечание1: В рабочем окне программы ссылки не функционируют, они работают только в браузере. 

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

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

9. Просмотр страниц в браузере 

"Просмотр в браузере" покажет вам, как будет выглядеть веб -страница после опубликования её в интернете

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


1hello_html_6bd53fd0.png. Нажмите кнопку  Просмотр (F5) в панели инструментов.


  1. По окончанию просмотра просто закройте страницу в браузере.


Примечание3: при просмотре ваших страниц в виде HTML вы можете проверить работоспособность всех локальных ссылок на своём сайте, просто пройдитесь по ссылкам и удостоверьтесь в том, что все они работают

10. Сохранение документа 

Чтобы сохранить ваш сайт :

1. Выберите"Сохранить как" из меню Файл .

2. Появится диалоговое окно "Сохранить как ". Введите имя вашего сайта в соответствующее окно (без расширения).

3. Нажмите кнопку  Сохранить . Расширение (.wss) будет добавлено автоматически.

Примечание4: эта команда сохраняет текущий сайт в файл .wss. Это значит, что все странички вашего сайта сохранены в один единый файл.

11. Публикация сайта

 Чтобы получить формат Html, выберите меню Файл-Опубликовать. Программа автоматически преобразует ваши страницы в формат .html. и поместит их в выбранную вами папку или на вашем компьютере или на веб - сервере.

Краткое описание документа:

В данной работе опубликованы методические рекомендации построения сайта с помощью визуального редактора сайтов. Рассматривается структура сайта . Подробная технология позволяет студенту самостоятельно создавать, как отдельные веб- страницы, так и полноценный сайт из нескольких страниц. .Материал можно применить, как практическое руководство на уроках информационных технологий, а так же, для самостоятельного освоения. Особое внимание уделяется возможности проектирования сайта из уже готовых шаблонов.
Автор
Дата добавления 23.03.2014
Раздел Информатика
Подраздел Другие методич. материалы
Просмотров628
Номер материала 36380032313
Получить свидетельство о публикации

Выберите специальность, которую Вы хотите получить:

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

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Похожие материалы

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