732171
столько раз учителя, ученики и родители
посетили сайт «Инфоурок»
за прошедшие 24 часа
Добавить материал и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015
ИнфоурокИнформатикаДругие методич. материалыМетодические рекомендации по созданию сайта с помощью визуального редактора сайтов Web Page Maker

Методические рекомендации по созданию сайта с помощью визуального редактора сайтов 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. и поместит их в выбранную вами папку или на вашем компьютере или на веб - сервере.

Курс профессиональной переподготовки
Учитель информатики
Enjoybook
Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:
также Вы можете выбрать тип материала:
Краткое описание документа:
В данной работе опубликованы методические рекомендации построения сайта с помощью визуального редактора сайтов. Рассматривается структура сайта . Подробная технология позволяет студенту самостоятельно создавать, как отдельные веб- страницы, так и полноценный сайт из нескольких страниц. .Материал можно применить, как практическое руководство на уроках информационных технологий, а так же, для самостоятельного освоения. Особое внимание уделяется возможности проектирования сайта из уже готовых шаблонов.
Общая информация
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону N273-ФЗ «Об образовании в Российской Федерации» педагогическая деятельность требует от педагога наличия системы специальных знаний в области обучения и воспитания детей с ОВЗ. Поэтому для всех педагогов является актуальным повышение квалификации по этому направлению!

Дистанционный курс «Обучающиеся с ОВЗ: Особенности организации учебной деятельности в соответствии с ФГОС» от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (72 часа).

Подать заявку на курс

Вам будут интересны эти курсы:

Курс повышения квалификации «Информационные технологии в деятельности учителя физики»
Курс повышения квалификации «Методика преподавания информатики в начальных классах»
Курс повышения квалификации «Внедрение системы компьютерной математики в процесс обучения математике в старших классах в рамках реализации ФГОС»
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
Курс профессиональной переподготовки «Информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Облачные технологии в образовании»
Курс повышения квалификации «Сетевые и дистанционные (электронные) формы обучения в условиях реализации ФГОС по ТОП-50»
Курс профессиональной переподготовки «Информационные технологии в профессиональной деятельности: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Использование компьютерных технологий в процессе обучения в условиях реализации ФГОС»
Курс повышения квалификации «Специфика преподавания информатики в начальных классах с учетом ФГОС НОО»
Курс повышения квалификации «Применение MS Word, Excel в финансовых расчетах»
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.
Enjoybook
Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.