Создание сайта
advertisement
Разработка тематического проекта Web-сайта различными инструментами Урок – обобщение с проектной деятельностью учащихся 1 1 Создание Web-сайта Цель урока - закрепить навыки по созданию webстраниц, сайтов различными инструментами (на языке HTML, MacroMedia Dreamweaver ) и дать сравнительный анализ этих способов. Создание сайта – это сложный как с технической, так и с организационной стороны процесс. Мы повторим методику создания страниц и способы автоматизации разработки web-сайтов, и выполним проекты по выбранным темам: персональный сайт школьный сайт тематический сайт 2 2 Вопросы на повторение Какие функции выполняют сервисные службы WWW? Назначение языка HTML Теги HTML Функциональные разделы документа Форматирование HTML документа Ссылки на другие документы и файлы Списки Инструментальные средства создания Web- страниц 3 3 Теперь вспомним как создается сайт с помощью HTML (прил. 2) 4 Создание сайта с помощью HTML Запустить текстовый редактор Блокнот [Пуск - Программы - Стандартные - Блокнот]. ввести HTML-код, задающий структуру Webстраницы: <HTML> <HEAD> <TITLE> Первое знакомство с тэгами HTML</TITLE> </HEAD> <BODY> </BODY> </HTML> Ввести команду [Файл - Сохранить]. Файлу Web-страницы присвоить имя page1-1.htm. Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высвечивается Первое знакомство с тэгами HTML. Основная часть окна браузера - пуста. 5 5 Форматирование шрифта. Разделительная линия: <HR> Форматирование шрифта: <B>Жирный</B> <I>Курсив</I> <U>Подчеркнутый</U> <B><I><U>Жирный подчеркнутый курсив </B></I></U> <TT>Равноширинный</TT> Выделение: <EM>Выделение</EM> <STRONG>Усиленное выделение</STRONG> 6 <HR> 6 Списки Нумерованный список: <OL> <LI>Первый элемент списка</LI> <LI>Второй элемент списка</LI> <LI>Третий элемент списка</LI> </OL> Ненумерованный список: <UL> <LI>Первый элемент списка</LI> <LI>Второй элемент списка</LI> <LI>Третий элемент списка</LI> </UL> Список определений: <DL> <DT>ТЕРМИН 1</DT> <DD>Пояснение к термину 1</DD> <DT>ТЕРМИН 2</DT> <DD>Пояснение к термину 2</DD> <DT>ТЕРМИН 3</DT> <DD>Пояснение к термину 3</DD> </DL> 7 7 Внесение изменений и дополнений в Web-страницу Активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл – Сохранить]. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница. 8 8 Инструментальные средства разработки Web-страниц и Web-сайтов В настоящее время имеется большое количество различных инструментальных средств разработки Webстраниц и Web-сайтов, от простейших HTML-редакторов до систем с использованием технологии WYSIWYG ("What You See Is What You Get" - "Что видишь, то и получишь"). программа Macromedia Dreamweawer 9 9 Macromedia Dreamweaver Dreamweaver является профессиональным редактором Web-сайтов, отличается простотой создания как отдельных Web-страниц, так и многостраничных Web-сайтов. В нем поддерживаются основные современные направления Webдизайна (использование каскадных стилей, динамический HTML, язык XML т.п.). Редактор позволяет быстро и наглядно (в режиме Drag&Drop) изменять структуру сайта. 10 10 Интерфейс программы Macromedia Dreamweawer (прилож. 3) 11 11 Создание сайта с помощью Macromedia Dreamweaver 12 12 Выбрать «Создать новый» 13 Создание Web-страниц (прил. 4) 14 Темы задания: «Мой город», «Моя семья», «Мои интересы», «Моя малая родина», «Моя школа», «Мой класс». (Название темы может модифицироваться самими учащимися, но с обязательной аргументацией) 15 15 Оценка учащегося за работу на уроке Карточка рефлексии Фамилия ___________________________ класс ________________ Оцените свою работу в группе: Оцените работу группы № ____ Оцените работу группы № ____ Оцените работу группы № ____ ___________________________ ___________________________ ___________________________ ___________________________ 2. Что было для тебя трудного при изучении темы «Создание Webсайта»?_________________________________________________ 3. Оцени по пятибалльной шкале понятность изложения темы «Создание Webсайта»____________________________________ 16 16
