- Преподавателю
- Информатика
- Практическая работа Подбор материала для создания своего сайта
Практическая работа Подбор материала для создания своего сайта
Раздел | Информатика |
Класс | - |
Тип | Другие методич. материалы |
Автор | Кушнирук В.В. |
Дата | 14.01.2016 |
Формат | docx |
Изображения | Нет |
УССУРИЙСКИЙ АГРОПРОМЫШЛЕННЫЙ КОЛЛЕДЖ
ХАНКАЙСКИЙ ФИЛИАЛ
Инструкционно-технологическая карта на выполнение практической работы №1,2
по предмету: информатика и ИКТ
Тема. Подбор материала для создания своего сайта. Разработка модели навигации для своего сайта.
Цель: подобрать материал для создания сайта, разработать модель навигации для своего сайта.
Приобретаемые ОК:
ОК 1. Понимать сущность и социальную значимость будущей профессии, проявлять к ней устойчивый интерес.
ОК 2. Организовывать собственную деятельность, исходя из цели и способов ее достижения, определенных руководителем.
ОК 3. Анализировать рабочую ситуацию, осуществлять текущий и итоговый контроль, оценку и коррекцию собственной деятельности, нести ответственность за результаты своей работы.
ОК 4. Осуществлять поиск информации, необходимой для эффективного выполнения профессиональных задач.
ОК 5. Использовать информационно-коммуникационные технологии в профессиональной деятельности.
ОК 6. Работать в команде, эффективно общаться с коллегами, руководством, клиентами.
ОК 7. Исполнять воинскую обязанность, в том числе с применением полученных профессиональных знаний (для юношей)
Учебно-методическое оснащение рабочего места: инструкционно-технологическая карта.
Основные правила ТБ: требование безопасности во время занятия.
Литература: Михеева, Е.В. Информатика; Цветкова М.С. Информатика и ИКТ.
Ход работы.
Методические указания по выполнению практической работы.
Карта сайта - это карта переходов между страницами сайта. В простейшем случае это список разделов и подразделов сайта. Если вы решили не делать никаких других переходов на вашем сайте, то этот пункт считается невыполненным, и положительные бонусы за него не начисляются.
Навигация - это перемещение по сайту. Система навигации сайта - одна из важнейших составляющих понятия "дизайн сайта". Список элементов навигации см. в лекционном материале.
Дизайн-макет (или просто макет) - это рисунок, представляющий предполагаемый будущий внешний вид страниц сайта. Макеты бывают с фиксированной шириной, или с плавающей шириной.
Вёрстка в сайтостроительстве - процесс формирования HTML- страниц сайта путём компоновки текстовых и графических элементов. Перед тем, как выбрать способ вёрстки, рекомендуется ознакомиться с языком разметки HTML. Существует четыре основных подхода к вёрстке сайтов:
• Самый простой способ верстки - текстовый. Этот способ не подразумевает дизайн, только само содержимое. Сайт при таком способе вёрстки выглядит как простой текстовый документ.
• Один из распространенных - реализация макета в виде вложенных таблиц. Однако этот способ вёрстки уходит в прошлое по следующим причинам
• Наиболее перспективный способ вёрстки - реализация макета с помощью элементов div или блочная вёрстка.
• Последний подход считается устаревшим, но в некоторых случаях может быть приемлемым. Это реализация сайта с помощью фреймов.
Перед тем, как приступить к реализации каркаса сайта, следует ознакомиться с языком HTML.
Базовые понятия языка HTML: HTML = HyperText Markup Language (Язык разметки гипертекста) Hypertext (гипертекст) - способ организации набора текстовых документов. Отдельные документы связаны переходами - гиперссылками. Гипертекст - основной способ организации информации в Markup (разметка) - стилистические инструкции внутри текста (гипертекста), определяющие способ отображения текста. Language (язык) - совокупность правил (грамматика) и специальных ключевых слов (лексикон). Язык HTML служит для описания структуры; внешнего вида; взаимосвязей гипертекстовых документов (web-страниц), составляющих всемирную паутину Гиперссылка - объект интерпретируемого документа служащий указателем на другой элемент, документ или файл. Благодаря гиперссылкам документ на языке HTML может включать следующие компоненты: стилизованный и форматированный текст, команды включения графических и звуковых файлов, гиперсвязи с различными ресурсами Internet, скрипты на языке JavaScript и VBScript, различные объекты, например Flash-анимацию. Документы HTML являются обычными текстовыми файлами, содержащими специальные теги (или управляющие элементы) разметки. Теги разметки указывают браузеру Web (программе пользователя для отображения web-страниц, например, Internet Explorer, Mozilla, Chrome или Opera), как надо вывести страницу. Файлы HTML обычно имеют расширения htm или html. Их можно создавать при помощи любого текстового редактора. Элемент - основная конструкция языка HTML, предписывающая способ интерпретации помещенных внутри нее данных. Любая web-страница представляет собой набор элементов. Элементы могут вкладываться один в другой подобно матрешкам. Тег - единица разметки, стартовый или конечный маркер элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. Каждый тег имеет имя - сочетание латинских букв и цифр. В тексте web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой. Теги могут быть как парными, так и непарными. Парные теги обязательно имеют стартовый и завершающий тег. Непарные теги могут не иметь закрывающего тега. Язык HTML состоит из около 100 тегов. Теги могут иметь атрибуты. Атрибут - это некоторый параметр или свойство элемента. Все атрибуты перечисляются в стартовом теге. В общем виде атрибут записывается так: имя Атрибута="значение". Рекомендуется всегда ставить кавычки. Если значение атрибута содержит пробелы или спецсимволы, кавычки обязательны. Некоторые атрибуты являются свойствами, например, атрибут selected. У таких атрибутов может вообще не указываться значение. Таким образом, общий вид элемента выглядит следующим образом:
<тег имяАтрибута1="значение1" имяАтрибута2="значение2"> Текст тег>
Атрибуты внутри стартового тега разделяются пробелами. В записи имен атрибутов и тегов можно использовать как прописные, так и строчные буквы. Иногда имена стартовых тегов пишутся прописными буквами, а конечных тегов - строчными. Желательно придерживаться единообразия. Значение атрибутов могут зависеть от регистра.
Структура HTML-документа
Документ HTML 4 состоит из трёх частей:
1. строка, содержащая информацию о версии HTML,
2. объявляющий раздел header/"шапка" (ограниченный элементом HEAD),
3. тело, содержащее собственно сам документ. Тело может выполняться в
элементах BODY или FRAMESET.
Шаблон документа:
Название документа 18
... Здесь указывается дополнительная информация ...
... Здесь находится размеченный текст ...
Порядок выполнения:
-
Выбрать дополнительные (технические) разделы для сайта (например, новости, каталог ссылок и т. д.)
-
Разработать карту сайта (карта переходов между интернет-страницами на сайте и за его пределы).
-
Определить необходимые элементы навигации сайта.
-
Выбрать тип макета (фиксированный, резиновый)
-
Определиться, какие функциональные блоки будут размещены на главной странице сайта.
-
Схематически нарисовать главную страницу сайта (макет).
-
Определиться, какие функциональные блоки будут размещены на других страницах сайта. Схематически нарисовать вид страницы сайта (макет).
-
Определиться, какая модель разметки (таблицы, фреймы, блоки) будет использоваться.
-
Реализовать каркас сайта (до уровня работающей навигации).
-
Наполнить сайт контентом.
КОНТРОЛЬНЫЕ ВОПРОСЫ:
1) Что такое HTML - документ? Какое расширение имеет HTML - документ?
2) Что такое тэг? Каких видов бывают тэги? Назначение атрибутов? Формат записи тэгов?
3) С помощью каких тэгов можно вставить рисунок и рамку в HTML - документ?
4) Атрибутом какого тэга является цвет фона страницы?
5) Что такое фрейм?