Практическая работа Подбор материала для создания своего сайта

УССУРИЙСКИЙ АГРОПРОМЫШЛЕННЫЙ КОЛЛЕДЖ
ХАНКАЙСКИЙ ФИЛИАЛ
Инструкционно-технологическая карта на выполнение практической работы №1,2
по предмету: информатика и ИКТ
Тема. Подбор материала для создания своего сайта. Разработка модели навигации для своего сайта.
Цель: подобрать материал для создания сайта, разработать модель навигации для своего сайта.
Приобретаемые ОК:
ОК 1. Понимать сущность и социальную значимость будущей профессии, проявлять к ней устойчивый интерес.
ОК 2. Организовывать собственную деятельность, исходя из цели и способов ее достижения, определенных руководителем.
ОК 3. Анализировать рабочую ситуацию, осуществлять текущий и итоговый контроль, оценку и коррекцию собственной деятельности, нести ответственность за результаты своей работы.
ОК 4. Осуществлять поиск информации, необходимой для эффективного выполнения профессиональных задач.
ОК 5. Использовать информационно-коммуникационные технологии в профессиональной деятельности.
ОК 6. Работать в команде, эффективно общаться с коллегами, руководством, клиентами.
ОК 7. Исполнять воинскую обязанность, в том числе с применением полученных профессиональных знаний (для юношей)
Учебно-методическое оснащение рабочего места: инструкционно-технологическая карта.Основные правила ТБ: требование безопасности во время занятия.
Литература: Михеева, Е.В. Информатика; Цветкова М.С. Информатика и ИКТ.
Ход работы.
Методические указания по выполнению практической работы.
Карта сайта – это карта переходов между страницами сайта. В простейшем случае это список разделов и подразделов сайта. Если вы решили не делать никаких других переходов на вашем сайте, то этот пункт считается невыполненным, и положительные бонусы за него не начисляются.
Навигация – это перемещение по сайту. Система навигации сайта - одна из важнейших составляющих понятия "дизайн сайта". Список элементов навигации см. в лекционном материале.
Дизайн-макет (или просто макет) – это рисунок, представляющий предполагаемый будущий внешний вид страниц сайта. Макеты бывают с фиксированной шириной, или с плавающей шириной.
Вёрстка в сайтостроительстве — процесс формирования HTML- страниц сайта путём компоновки текстовых и графических элементов. Перед тем, как выбрать способ вёрстки, рекомендуется ознакомиться с языком разметки HTML. Существует четыре основных подхода к вёрстке сайтов:
• Самый простой способ верстки - текстовый. Этот способ не подразумевает дизайн, только само содержимое. Сайт при таком способе вёрстки выглядит как простой текстовый документ.
• Один из распространенных – реализация макета в виде вложенных таблиц. Однако этот способ вёрстки уходит в прошлое по следующим причинам
• Наиболее перспективный способ вёрстки – реализация макета с помощью элементов div или блочная вёрстка.
• Последний подход считается устаревшим, но в некоторых случаях может быть приемлемым. Это реализация сайта с помощью фреймов.
Перед тем, как приступить к реализации каркаса сайта, следует ознакомиться с языком HTML.
Базовые понятия языка HTML: HTML = HyperText Markup Language (Язык разметки гипертекста) Hypertext (гипертекст) – способ организации набора текстовых документов. Отдельные документы связаны переходами - гиперссылками. Гипертекст – основной способ организации информации в WWW. Markup (разметка) – стилистические инструкции внутри текста (гипертекста), определяющие способ отображения текста. Language (язык) – совокупность правил (грамматика) и специальных ключевых слов (лексикон). Язык HTML служит для описания структуры; внешнего вида; взаимосвязей гипертекстовых документов (web-страниц), составляющих всемирную паутину WWW. Гиперссылка - объект интерпретируемого документа служащий указателем на другой элемент, документ или файл. Благодаря гиперссылкам документ на языке 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.
Шаблон документа:
<!DOCTYPE HTML PUBLIC "html version">
<HTML>
<HEAD>
<TITLE>Название документа</TITLE> 18
... Здесь указывается дополнительная информация ...
</HEAD>
<BODY>
... Здесь находится размеченный текст ...
</BODY>
</HTML>
Порядок выполнения:
Выбрать дополнительные (технические) разделы для сайта (например, новости, каталог ссылок и т. д.)
Разработать карту сайта (карта переходов между интернет-страницами на сайте и за его пределы).
Определить необходимые элементы навигации сайта.
Выбрать тип макета (фиксированный, резиновый)
Определиться, какие функциональные блоки будут размещены на главной странице сайта.
Схематически нарисовать главную страницу сайта (макет).
Определиться, какие функциональные блоки будут размещены на других страницах сайта. Схематически нарисовать вид страницы сайта (макет).
Определиться, какая модель разметки (таблицы, фреймы, блоки) будет использоваться.
Реализовать каркас сайта (до уровня работающей навигации).
Наполнить сайт контентом.
КОНТРОЛЬНЫЕ ВОПРОСЫ:
1)Что такое HTML – документ? Какое расширение имеет HTML – документ?
2)Что такое тэг? Каких видов бывают тэги? Назначение атрибутов? Формат записи тэгов?
3)С помощью каких тэгов можно вставить рисунок и рамку в HTML – документ?
4)Атрибутом какого тэга является цвет фона страницы?
5)Что такое фрейм?