Поделиться
Практическая работа 24.doc
«Орловский технический колледж»
ИНСТРУКЦИОННО – ТЕХНОЛОГИЧЕСКАЯ КАРТА № 24
на выполнение работы по дисциплине
«Информатика и ИКТ»
Наименование работы: «Средства создания и сопровождение сайта. Создание web-сайта с помощью редактора сайтов DreamWeaver»
Цель работы: освоение приемов создания web-страниц и web-сайтов c помощью редактора сайтов.
Приобретаемые умения и навыки: уметь создавать web-страницы и web-сайты c помощью редактора сайтов.
Оборудование, приборы, аппаратура, материалы: персональный компьютер, редактор сайтов DreamWeaver, интернет-браузер.
Норма времени: 4 ч
Раздаточный материал: карточки для индивидуальной работы
Содержание учебного материала
Средства создания и сопровождения сайта.
(Создание web-сайта с помощью редактора сайтов 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. Создайте сайт с помощью конструктора сайтов на тему (по выбору студента):
1. «Жизнь без сигарет»;
2. «Подросток и алкоголь»;
3. «Мой колледж»;
4. «Мой город (деревня)»;
5. «Моя будущая профессия».
Перед созданием сайта найти соответствующие вашей теме фотографии (скачать с Интернета, отсканировать или сфотографировать).
Первая страница должна содержать заголовок и графические миниатюры ваших изображений (их уменьшенные копии). Размеры графических файлов на должны превышать 100 Кбайт и иметь формат .jpeg. Каждая графическая миниатюра должна являться гиперссылкой на соответствующую страницу сайта (обязательно наличие всплывающих подсказок).
Требования к сайту:
· Сайт должен состоять не менее чем из 10 страниц;
· обязательно использовать текстуру (фоновый рисунок) на каждой странице;
· обязателен текст (минимум 7 абзацев из трех полных строк) на каждой странице;
· обязательны заголовки на всех страницах;
· обязательны заголовки окон;
· для заголовков и основного текста использовать различные шрифты.
Задание 2. Протестируйте работоспособность сайта в браузере (по возможность в двух различных). Протестируйте работоспособность сайта при выключенной графике.
Задание 3. Измените в настройках браузера шрифт по умолчанию на Courier New, размер 14 и убедиться, что это не повлияло на внешний вид страниц сайта.
Задание 4. Разместите созданный сайт на любом бесплатном хостинге. Проверьте работоспособность.
Содержание отчета
Отчет должен содержать:
1. Название работы.
2. Цель работы.
3. Порядок создания сайта с помощью конструктора сайтов.
4. Вывод по работе.
Контрольные вопросы
1. Укажите назначение программы DreamWeaver.
2. Что такое html?
3. Виды окон в DreamWeaver.
4. Для чего нужна Панель объектов в DreamWeaver?
5. Укажите этапы создания web-сайта в DreamWeaver?
Литература
1. Информатика и ИКТ: учебник, 10,11 кл. Угринович Н.Д., М, Бином, 2011 г.
2. Информатика и ИКТ: учебник для начального и среднего профессионального образования. Цветкова Н.С., Великович Л.С. – Академия, 2011 г.
3. Информатика и ИКТ. Практикум для профессий и специальностей технического и социально-экономического профилей. Н. Е. Астафьева, С. А. Гаврилова, под ред. М.С. Цветковой, Академия, 2012г.
4. Информатика и ИКТ. Базовый уровень: учебник для 10-11 кл. / И.Г.Семакин, Е.К.Хеннер. – 4 изд., испр. – М. – Бином. Лаборатория знаний, 2008г. – 246 с.: ил.
5. Информатика и ИКТ. Базовый уровень: практикум для 10-11 кл. / И.Г.Семакин, Е.К.Хеннер. – 4 изд., испр. – М. – Бином. Лаборатория знаний, 2008г.
6. Информатика и ИКТ. 10 кл. Базовый уровень под ред. Н.В.Макаровой – Спб – Лидер, 2010г.
7. Информатика и ИКТ. 11 кл. Базовый уровень под ред. Н.В.Макаровой – Спб – Лидер, 2010г.
8. Энциклопедия школьной информатики / под ред. И.Г.Семакина. – М.: Бином. Лаборатория знаний, 2011г.
9. http//www.informatika.ru;
10. http//www.student.informatika.ru;
11. http://mirgeo.ucoz.ru/.
Скачано с www.znanio.ru
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
