Лабораторное занятие № 34.

Лабораторное занятие № 34.

Тема: Методы и средства создания и сопровождения сайта (Создание web-сайта с помощью редактора сайтов DreamWeaver).

Цель работы: освоение приемов создания web-страниц и web-сайтов c помощью редактора сайтов.DreamWeaver

Краткие теоретические сведения.

DreamWeaver - профессиональный редактор HTML для визуального создания и управления сайтами различной сложности и страницами сети Internet. Нравится ли вам вручную писать код HTML или вы предпочитаете работать в визуальной среде, Dreamweaver облегчает эту работу и обеспечивает полезными инструментами и средствами, чтобы сделать свои собственные проекты непревзойденными.

DreamWeaver относится к категории WYSIWYG-редакторов (т.е.What You See Is What You Get), и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и заключается преимущество технологии WYSIWYG - что вижу, то и получаю).

Dreamweaver включает в себя много инструментов и средств для редактирования и создания профессионального сайта: HTML, CSS, JavaScript, редакторы кода (просмотр кода и инспектор кода), что позволяет вам, редактировать различные текстовые документы, которые поддерживаются в Dreamweaver. Также вы можете настроить Dreamweaver, чтобы он наводил порядок и переформатировал HTML, как вы этого хотите.

Возможность визуального редактирования в Dreamweaver также позволяет быстро создавать или менять дизайн проекта без написания кода. Dreamweaver относится к так называемым "визуальным" редакторам, т.е. вы сразу можете видеть на экране (хотя бы приблизительно) результат своей работы. При этом он предоставляет полный доступ к источнику кода и не вставляет в него ничего лишнего, как это делает, например, FrontPage.

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

Рабочая область Dream Weaver настраивается под различные стили работы и уровни знаний. Вот некоторые наиболее используемые компоненты:

окно документа отображает текущий документ, который вы создаете и редактируете.

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

панель инструментов (toolbar) содержит кнопки и всплывающие меню, которые позволяют просматривать окно Document различными способами, устанавливать опции вида, и обращаться к некоторым операциям, например, просмотр в браузере.

контекстное меню позволяет быстро обращаться к полезным командам, имеющим отношение к текущему выбору или области. Чтобы отобразить контекстное меню, необходимо щелкнуть правой кнопкой мыши на элементе в окне.

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

инспектор свойств отображает свойства для выбранного объекта или текста, и позволяет изменять эти свойства. (Некоторые свойства появляются в инспекторе, в зависимости от объекта или выбранного текста.)

DreamWeaver обеспечивает использование многих других инспекторов, панелей и окон.

При этом в DreamWeaver различают два вида окон: окно сайта и окно документа.

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

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

Основные объекты, которые можно вставить на собственную Web-страницу представлены на Панели объектов.

Задание

Задание 1. Создайте сайт с помощью конструктора сайтов на тему (по выбору студента):

«Жизнь без сигарет»;

«Подросток и алкоголь»;

«Мой колледж»;

«Мой город (деревня)»;

«Моя будущая профессия».

Перед созданием сайта найти соответствующие вашей теме фотографии (скачать с Интернета, отсканировать или сфотографировать).

Первая страница должна содержать заголовок и графические миниатюры ваших изображений (их уменьшенные копии). Размеры графических файлов на должны превышать 100 Кбайт и иметь формат .jpeg. Каждая графическая миниатюра должна являться гиперссылкой на соответствующую страницу сайта (обязательно наличие всплывающих подсказок).

Требования к сайту:

Сайт должен состоять не менее чем из 10 страниц;

обязательно использовать текстуру (фоновый рисунок) на каждой странице;

обязателен текст (минимум 7 абзацев из трех полных строк) на каждой странице;

обязательны заголовки на всех страницах;

обязательны заголовки окон;

для заголовков и основного текста использовать различные шрифты.

Задание 2. Протестируйте работоспособность сайта в браузере (по возможность в двух различных). Протестируйте работоспособность сайта при выключенной графике.

Задание 3. Измените в настройках браузера шрифт по умолчанию на Courier New, размер 14 и убедиться, что это не повлияло на внешний вид страниц сайта.

Задание 4. Разместите созданный сайт на любом бесплатном хостинге. Проверьте работоспособность.

Контрольные вопросы

Укажите назначение программы DreamWeaver.

Что такое html?

Виды окон в DreamWeaver.

Для чего нужна Панель объектов в DreamWeaver?

Укажите этапы создания web-сайта в DreamWeaver?