ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ
ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ
ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ
“КАБАРДИНО-БАЛКАРСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
ИМ. Х.М. БЕРБЕКОВА”
КОЛЛЕДЖ ДИЗАЙНА
ПРЕДМЕТНО-ЦИКЛОВАЯ КОМИССИЯ «ГРАФИЧЕСКИЙ ДИЗАЙН»
УТВЕРЖДЕН
СОГЛАСОВАНО
на заседании ПЦК
«____» ________________ 200__ г.
«____» _________________ 200__ г.
Протокол № ________
Директор колледжа
_______________ Кожуховская С.М.
Председатель ПЦК
______________________Тураев Р.А.
УЧЕБНО-МЕТОДИЧЕСКИЙ КОМПЛЕКС
ПО ДИСЦИПЛИНЕ
СД.08 ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ В ПРОФЕССИОНАЛЬНОЙ
ДЕЯТЕЛЬНОСТИ
для специальности 070602.51-Дизайн (по отраслям)
Нальчик 2008 г.
Автор-составитель:
Соловьева Вера Викторовна, к.п.н., зав. ИИЦ Колледжа дизайна КБГУ
Учебно-методический комплекс по дисциплине «Информационные
технологии в профессиональной деятельности» составлен в соответствии с
требованиями Государственного образовательного стандарта среднего профессионального образования по специальности 070602.51-Дизайн (по отраслям)
Дисциплина входит в федеральный компонент цикла специальных дисциплин и является обязательной для изучения.
Содержание
Аннотация
Выписка из основной образовательной программы
Рабочая учебная программа
Методические рекомендации для преподавателя
Методические указания для студентов
Глоссарий по дисциплине
Таблица по самостоятельной работе
Формы и содержание текущего, промежуточного
и итогового контроля
Карта обеспеченности литературой по специальности
Перечень используемых компьютерных программ
Иллюстративный материал в электронной форме
Интернет-ресурсы по дисциплине
Протокол согласования РУПД с другими дисциплинами
специальности
АННОТАЦИЯ
УМК по дисциплине «Информационные технологии в профессиональной деятельности» является совокупностью методических материалов, способствующих эффективному освоению учебной дисциплины.
УМК по дисциплине в учебном процессе подготовки дизайнера решает следующие задачи:
- ознакомиться с информационными ресурсами глобальных сетей;
- изучить технологии поиска информации, использующейся в профессиональной деятельности;
- освоить прикладное программное обеспечение профессиональной деятельности;
- научиться подбирать аппаратное и программное обеспечение для создания автоматизированных рабочих мест.
Материал учебной дисциплины рационально распределен по темам,
обозначены виды учебных занятий, запланирована и организуется самостоятельная работа студентов, определено учебно-методическое обеспечение
дисциплины, разработана система контроля. Для совершенствования образовательного процесса наряду с традиционными печатными материалами используются презентационные и справочные материалы в электронной форме,
ресурсы сети Интернет, специализированное программное обеспечение.
УМК по дисциплине «Информационные технологии в профессиональной деятельности» разработан на основе Государственного образовательного
стандарта по специальности 070602.51-Дизайн (по отраслям) с учетом особенностей специализации «Веб-дизайн», отражает учебно-методическую работу по дисциплине, и является необходимым отчетным документом по
учебно-методической работе.В состав УМК включены учебно-методические
материалы, обеспечивающие все виды занятий и формы контроля, предусмотренные учебным планом образовательной программы подготовки дизайнеров по специальности 070602.51-Дизайн (по отраслям).
ВЫПИСКА ИЗ ГОСУДАРСТВЕННОГО ОБРАЗОВАТЕЛЬНОГО
СТАНДАРТА
По окончании изучения дисциплины «Информационные технологии в
профессиональной деятельности» студент должен знать:
- основные принципы, методы и свойства информационных и коммуникационных технологий, их эффективность;
- автоматизированные рабочие места, их локальные и отраслевые сети;
- прикладное программное обеспечение и информационные ресурсы
профессиональной деятельности;
- информационные ресурсы Интернета и других сетей.
Уметь использовать Интернет и другие сети в профессиональной деятельности.
КОЛЛЕДЖ ДИЗАЙНА КАБАРДИНО-БАЛКАРСКОГО
ГОСУДАРСТВЕННОГО УНИВЕРСИТЕТА
"Утверждаю"
директор колледжа дизайна
______________ С.М.Кожуховская
РАБОЧАЯ ПРОГРАММА
ДИСЦИПЛИНЫ «ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ В
ПРОФЕССИОНАЛЬНОЙ ДЕЯТЕЛЬНОСТИ»
ДЛЯ СПЕЦИАЛЬНОСТИ
070602.51 - ДИЗАЙН (ПО ОТРАСЛЯМ)
СПЕЦИАЛИЗАЦИЯ: ВЕБ-ДИЗАЙН
НАЛЬЧИК
2008
Одобрена
Цикловой комиссией
"Графический дизайн"
Председатель __________ Р.А.Тураев
Составлена в соответствии
с Государственными
требованиями к минимуму
содержания и уровню
подготовки выпускника по
специальности
070602.51-Дизайн (по отраслям)
Зам. директора по учебнометодической работе ____________ А.М.Канлоев
Автор: Соловьева В.В., к.п.н., зав. ИИЦ Колледжа дизайна КБГУ
Рецензенты:
Пшукова М.М., к.п.н.,
доцент кафедры ЕМО ИПК и ПРО КБГУ
Черенков П.С. начальник отдела
дизайна "АйТиВи Групп"
ПОЯСНИТЕЛЬНАЯ ЗАПИСКА
Курс «Информационные технологии в профессиональной деятельности» изучается в течение двух семестров. Основная задача курса – познакомить студентов с возможностями современных информационных технологий
применительно к их профессиональной деятельности. В процессе изучения
дисциплины студенты знакомятся с информационными ресурсами глобальных сетей, изучают технологии поиска информации, использующейся в профессиональной деятельности, осваивают прикладное программное обеспечение профессиональной деятельности, учатся подбирать аппаратное и программное обеспечение для создания автоматизированных рабочих мест.
Курс предусматривает лекционные и практические занятия. Самостоятельная работа студента (14 часов) предполагает завершение работы над заданиями, начатыми в ходе аудиторных занятий. Самостоятельная работа организуется в лабораториях учебного заведения во внеурочное время. Программа предусматривает промежуточную аттестацию в форме зачета и итоговую в форме экзамена.
По окончании курса студент должен:
- знать структуру и основные принципы работы компьютерных сетей,
- иметь представление о языке гипертекстовой разметки и каскадных
таблицах стилей;
- свободно владеть технологиями поиска профессионально значимой
информации.
Уметь:
- использовать основные сервисы Интернета в профессиональной деятельности.
- использовать современные технологии для поиска информации;
- использовать компьютерные технологии при решении проектных задач;
- выполнять подбор аппаратуры и программного обеспечения для создания автоматизированных рабочих мест.
РАСПРЕДЕЛЕНИЕ ЧАСОВ ПО СЕМЕСТРАМ
Семестр обучения
ВСЕГО
Макс. Кол-во аудиторных часов при Самосучеб.
очной форме обучения
тоятельнагр.
ная
Всего Лаборат.
Практ.
студенработа
работы,
занятия
та
студента
семинары
7
46
32
32
8
36
36
36
82
68
68
14
14
ТЕМАТИЧЕСКИЙ ПЛАН УЧЕБНОЙ ДИСЦИПЛИНЫ
Наименование разделов и
тем
Макс. Кол-во аудиторных часов Самосучеб. при очной форме обуче- тоятельнагр.
ния
ная
стуработа
Всего Лаборат. Практ.
денстудента
работы, занятия
та
семинары
5
6
32
32
14
2
2
2
Тема 1.2. Методы поиска
информации в сетях.
10
6
6
4
Тема 1.3. Интернет-ресурсы
для веб-дизайнеров.
10
6
6
4
Тема 1.4. Интернет-техно логии в информационном обмене.
8
6
6
2
Тема 1.5. Интернеттехнологии в предпроектном
анализе
10
6
6
4
Практическое задание 1.
6
6
6
Раздел 2. Введение в язык
гипертекстовой разметки
36
36
36
Тема 2.1. Структура документа.
4
4
4
Тема 2.2. Текст.
4
4
4
Тема 2.3. Графика и мультимедиа.
4
4
4
Тема 2.4. Таблицы.
2
2
2
1
2
3
Раздел 1. Сетевые
технологии
46
Тема 1.1. Локальные и глобальные информационные
сети.
4
1
4
5
2
3
Тема 2.5. Фреймы.
2
2
2
Тема 2.6. Ссылки
2
2
2
Тема 2.7. Формы.
6
6
6
Тема 2.8. Таблицы стилей
6
6
6
Практическое задание 2
6
6
6
ВСЕГО
82
68
68
6
14
СОДЕРЖАНИЕ УЧЕБНОЙ ДИСЦИПЛИНЫ
РАЗДЕЛ 1. СЕТЕВЫЕ ТЕХНОЛОГИИ
По окончании изучения раздела студент должен: знать структуру и основные принципы работы компьютерных сетей, уметь использовать основные сервисы Интернета и применять коммуникационные технологии в профессиональной деятельности.
Тема 1.1. Локальные и глобальные информационные сети
Понятие компьютерной сети. Локальные и глобальные сети: структура
и принципы работы. Интернет. Сервисы Интернета. Применение локальных
сетей и Интернет в профессиональной деятельности дизайнера.
Тема 1.2. Методы поиска информации в сетях
Возможности компьютерных сетей в поиске профессионально значимой информации. Тематический и контекстный поиск. Информационнопоисковые системы. Информационные порталы. Тематические интеренетсайты. Электронные библиотеки. Профессиональные форумы. Виртуальные
галереи. Сохранение найденной информации.
Самостоятельная работа. Поиск сетевых ресурсов, специализирующихися в области искусства, дизайна, веб-дизайна.
Тема 1.3. Интернет-ресурсы для веб-дизайнеров.
Обзор интернет-ресурсов, адресованных веб-дизайнерам. Тематические
порталы и разделы. Профессиональные форумы. Библиотеки бесплатного
программного обеспечения. Конструкторы сайтов.
Самостоятельная работа. Изучение возможностей конструктора сайтов.
Тема 1.4. Интернет-технологии в информационном обмене.
Сервисы глобальной сети, обеспечивающие информационный обмен.
Электронная почта. ICQ. Форумы и телеконференции. Файловый обмен. Организация удаленной работы с помощью сети Интернет.
Самостоятельная работа. Регистрация в почтовой системе и ICQ. Регистрация на специализированном форуме.
Тема 1.5. Интернет-технологии в предпроектном анализе.
Проектирование веб-сайтов. Поиск сайтов-аналогов разрабатываемого.
Методика проведения анализа аналогичных сайтов. Анализ контента, оформления и функций. Построение сравнительных таблиц. Тестирование сайтов.
Опрос фокус-группы.
Самостоятельная работа. Проведение анализа интернет-сайта принадлежащего дизайнеру или дизайн-студии.
Задание 1. Поиск и анализ сайтов аналогичных разрабатываемому.
Задания могут выдаваться индивидуально или на группу. Тематика
определяется преподавателем или по желанию студента. В процессе выполнения задания необходимо найти сайты, соответствующие заданной тематике, проанализировать их и провести сравнительную оценку. Результаты
оформляются в виде таблицы, а также в виде аналитической записки (см. методические материалы для студентов). Проанализировать следует 3-5 сайтов.
РАЗДЕЛ 2. ВВЕДЕНИЕ В ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ
По окончании изучения раздела студент должен иметь представление о
языке гипертекстовой разметки и каскадных таблицах стилей. Уметь читать и
корректировать HTML-код, генерируемый программами-конструкторами
веб-сайтов.
Тема 2.1. Структура документа.
Принципы создания веб-страниц. Основные правила синтаксиса.
Структура html-документа. Информация о версии. Элемент HTML. Элемент
HEAD. Элемент TITLE. Элемент META. Элемент BODY. Элементы DIV и
SPAN. Элементы H1, H2, H3, H4, H5, H6. Элемент ADDRESS.
Тема 2.2. Текст.
Создание текстовых блоков. Параграфы и списки. Элементы P, BR, OL,
UL, LI, DL, DT, DD. Структурирование текста. Элементы EM, STRONG,
DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM. Элементы
BLOCKQUOTE и Q. Элементы SUB и SUP. Элемент PRE. Шрифты. Элементы TT, B, I, BIG, SMALL, FONT, BASEFONT.
Тема 2.3. Графика и мультимедиа.
Использование на страницах графических, мультимедийных и внедренных объектов. Элементы IMG, AREA, MAP, OBJECT, PARAM, APPLET,
EMBED.
Тема 2.4. Таблицы.
Использование таблиц для разметки страницы. Элемент TABLE. Элемент CAPTION. Элементы THEAD, TFOOT, TBODY. Элементы COL,
COLGROUP. Элемент TR. Элементы TH и TD.
Тема 2.5. Фреймы.
Понятие фрейма. Особенности фреймсодержащих документов. Элемент FRAMESET. Элемент FRAME. Элемент NOFRAMES. Элемент
IFRAME.
Тема 2.6. Ссылки.
Ссылки как основа гипертекста. Структура ссылки. Абсолютные и относительные ссылки. Элементы A, LINK, BASE.
Тема 2.7. Формы.
Назначение формы. Элементы формы. Элементы FORM, INPUT,
BUTTON, SELECT, OPTION, OPTGROUP, TEXTAREA, LABEL, FIELDSET,
LEGEND.
Тема 2.8. Таблицы стилей.
Функции таблиц стилей. Встраивание таблиц стилей. Элемент STYLE.
Директива @import. Псевдоклассы и псевдоэлементы. Определение классов
и идентификаторов.
Задание 2. Поиск профессионально значимой информации.
Задания могут выдаваться индивидуально или на группу. Перед студентами ставится задача, решение которой не рассматривалось на лекциях.
Задачи подбираются из области технологий веб-дизайна. Необходимо используя поисковые системы и тематические сайты собрать нужную информацию и найти решение. Найденные решения должны быть практически реализованы.
КОНТРОЛЬНЫЕ ЗАДАНИЯ
Задание к зачету (7 семестр обучения).
Поиск в сети Интернет аналогов проектов по заданной тематике
На зачет студент должен представить в печатной форме аналитический
материал по личным страницам и некоммерческим сайтам. Для составления
аналитической записки необходимо провести поиск в сети Интернет аналогов вышеуказанных сайтов.
Задание к экзамену (8 семестр обучения). Информационное обеспечение
дипломного проекта
Экзамен проводится в форме защиты доклада. Студент должен представить выполненную работу и ответить на вопросы членов комиссии. Содержание экзаменационной работы включает:
- анализ основных параметров веб-сайтов, аналогичных разрабатываемому в дипломной работе (рассмотреть следует не менее трех сайтов);
- перечень информационно-справочных материалов к дипломному проекту, найденных в сети Интернет;
- готовые программные модули, обеспечивающие функционирование
веб-сайта (при условии, что существует необходимость их использования).
Программные модули могут быть взяты из традиционных печатных источников или из сети Интернет.
ЛИТЕРАТУРА
1. Богданов-Катьков Н.В., Орлов А.А. Интернет. новейший справочник.
-М.-СПб., 2003.
2. Вайскопф Дж. Microsoft FrontPage 2000. Учебный курс. -СПб., 2000.
2. Грибов Д.Е. Flash 4. Интерактивная Web-анимация. -М., 2000.
3. Коржинский С.Н. Настольная книга web-мастера. -М., 2000.
4. Кирсанов Д. Веб-дизайн. -СПб., 1999.
5. Нильсен Я. Веб-дизайн. -СПб., 2001.
6. Тарин-Тауэрс Дж. Macromedia Dreamviewer MX для Windows и
Macintosh. -М., 2003.
7. Питтс Н. XML за рекордное время. -М., 2000.
8. Хольцшлаг М. Языки HTML и CSS для создания web-сайтов. -М.,
2007.
9. www.w3schools.com
10. www.alpet.spb.ru
11. www.diogenes.ru
12. www.ico.brush.ru
13. www.finarti.ru
14. www.webmascon.ru
15. www.indexvisual.ru
16. www.pseudology.org
СРЕДСТВА ОБУЧЕНИЯ
Компьютерный класс на базе системы не ниже Intel Pentium-III, ОЗУ –
190 Мб, Жесткий диск 40 Гб, 64Мб видеопамяти, CD-ROM, мышь
и
ходом в Интернет.
Программные средства:
1. Windows 2000/XP.
2. Средства разработки веб-сайтов (Dreamweaver, Front Page и т.п.)
3. Текстовый редактор (Write, Word, WordPad и т.п.)
4. Интернет-браузеры: InternetExplorer, Mozila FireFox, Opera и т.п..
вы-
МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ ДЛЯ ПРЕПОДАВАТЕЛЯ
Дисциплины специализаций для направления веб-дизайн «Технологии
веб-дизайна», «Менеджмент веб-сайтов», «Визуальные коммуникации» тесно интегрированы между собой, а также с дисциплинами специального блока
«Мультимедийные технологии», «Информационные технологии профессиональной деятельности», «Дизайн проектирование». Только такой комплексный подход может обеспечить подготовку специалиста отвечающего современным требованиям, способного эффективно решать задачи, возникающие в
реальной практической деятельности как самостоятельно, так и в составе
творческой группы.
Подготовка специалиста в области веб-дизайна строится на основе
проектной методики. В процессе освоения вышеуказанных дисциплин студенты должны реализовать четыре проекта, по числу основных типов Интернет-сайтов: личная страница, корпоративный (коммерческий) сайт, сайт некоммерческой организации (проекта), портал. Каждая дисциплина, обеспечивающая специальную подготовку, ориентирована на освоение определенной
группы технологий, подходов, методик, которые в комплексе позволяют получить полноценный продукт. Таким образом, для того чтобы реализовать
проект студентам необходимо задействовать знания и умения, полученные в
процессе освоения всех дисциплин. Предлагаемый подход очень эффективен,
но требует от преподавателей большой предварительной подготовки. Наиболее важные моменты следующие.
1. Обучение максимально индивидуализировано, для каждого студента
формируется свой набор проектов. При этом должны учитываться подготовка, способности, склонности и интересы студента. Студенты могут участвовать в определении конкретной тематики проектов. Например, определяется
общая тема – «Разработка корпоративного сайта», а каждый студент для себя
определяет частную тему – «Сайт торговой фирмы», «Сайт промышленного
предприятия» и т.п. Благодаря индивидуализации обучения мы сможем
наиболее полно раскрыть способности каждого студента, обеспечить формирование профессиональных компетенций путем выстраивания индивидуальной образовательной траектории.
2. Работа студентов должна быть организована так, чтобы каждая
учебная дисциплина обеспечивала реализацию определенного компонента
проекта, и к концу заданного заранее периода из отдельных частей складывался готовый продукт. Такой подход позволит студентам понять значимость
каждой учебной дисциплины и ее роль в процессе подготовки к самостоятельной проектной деятельности.
3. При определении учебных проектных заданий целесообразно привлекать потенциальных заказчиков и работодателей. При этом нами могут
быть решены несколько задач. Взаимодействие с работодателем вносит
определенный вклад в формирование коммуникативных компетенций будущего специалиста. Выполнение реальных заказов будет способствовать формированию профессиональной ответственности и позволит уже в процессе
обучения познакомиться со спецификой выбранной специальности. Привлечение работодателей может помочь студентам с трудоустройством.
4. Один и тот же проект может быть предложен для реализации всем
студентам группы. По окончании работы организуется защита и коллективное обсуждение работ. Так мы обеспечим студентам атмосферу творческой
конкуренции, позволим им научиться оценивать свои и чужие работы, аргументировано критиковать и отвечать на критические замечания.
5. Следует давать студентам возможность самостоятельного поиска
решения некоторых проблем, возникающих в процессе разработки Интернетсайтов. Это могут быть вопросы, связанные с поиском эстетического решения, а также технологические проблемы, для решения которых необходимо
привлечение дополнительных источников информации. Отметим, что следует активно привлекать не только русскоязычные источники, но и информационные ресурсы на иностранных языках. Хорошее владение профессио-
нальной иноязычной лексикой способствует росту технологических возможностей специалиста в области веб-дизайна.
Приведенные рекомендации следует считать общими для всего цикла
специальных дисциплин и дисциплин специализации направления «вебдизайн». Применительно к дисциплине «Информационные технологии в
профессиональной деятельности» можно также сформулировать несколько
важных методических рекомендаций.
1. В процессе занятий необходимо развивать у студентов способность
искать и анализировать информацию, формировать отношение к современным информационным сетям, как к необходимому инструменту профессиональной деятельности. Следует обратить внимание, как на освоение технологии контекстного поиска, так и на поиск по тематическим каталогам.
2. Примеры задач по поиску профессионально-значимой информации:
- создание работающих форм для поиска информации;
- создание сайтов со звуковым сопровождением;
- создание нестандартных курсоров;
- создание работающих форм обратной связи.
Задачи лучше подбирать индивидуально, в зависимости от уровня подготовки студента.
3. Владение языком гипертекстовой разметки не является обязательным для веб-дизайнера, но зачастую повышает эффективность его работы и
его конкурентоспособность на рынке труда. Раздел 2 учебной программы
призван сформировать у студентов общее представление об HTML.
МЕТОДИЧЕСКИЕ УКАЗАНИЯ ДЛЯ СТУДЕНТОВ
УКАЗАНИЯ
ПО ВЫПОЛНЕНИЮ ПОИСКОВОЙ И АНАЛИТИЧЕСКОЙ РАБОТЫ
Для выполнения поиска и анализа сайтов-аналогов следует использовать контекстный поиск, с помощью поисковых систем, Можно также задействовать тематические каталоги универсальных порталов.
Анализ сайтов выполняется в соответствии со следующим планом.
1. Тип сайта, его назначение и функции.
2. Состав и структура сайта.
3. Структура размещения основных информационных блоков на страницах.
4. Структура навигации.
5. Графическое и шрифтовое оформление сайта.
6. Информационное наполнение.
Информация излагается в свободной форме, но в соответствии с приведенным выше планом. Также в аналитической записке необходимо дать
оценку основных параметров сайта. Оценка дается в соответствии с планом.
Например, в разделе «Состав и структура сайта» необходимо рассмотреть
насколько структура сайта соответствует его назначению и функциям. Оценка должна быть обоснована. Оценку можно давать как в словесной форме,
так и в баллах. Давая оценку в баллах удобно воспользоваться сравнительной
таблицей.
СРАВНИТЕЛЬНАЯ ТАБЛИЦА
Параметр оценки
Дизайн сайта (1-10)
Навигация (1-10)
Информационное наполнение (1-10)
Скорость загрузки (1-10)
сайт 1
сайт 2
сайт 3
СПРАВОЧНЫЙ МАТЕРИАЛ ПО ЯЗЫКУ ГИПЕРТЕКСТОВОЙ
РАЗМЕТКИ
Любой гипертекстовый документ представляет собой обычный текстовый файл в формате ANSI ASCII, содержащий текст, специальные теги для
его разметки, ссылки на другие подобные документы, графику и прочие файлы. Когда браузер загружает подобный файл, все теги обрабатываются и содержимое файла форматируется для отображения. Теги задаются в файле и
обрабатываются в соответствии с правилами языка гипертекстовой разметки
– HTML (Hyper Text Markup Language).
Язык гипертекстовой разметки не является языком программирования.
С помощью HTML можно оформлять документы и создавать ссылки. Писать
программы с помощью языка разметки нельзя. Все спецэффекты, которые
можно увидеть на веб-страницах, также создаются с помощью других
средств, например, с помощью программ на языке JavaScript или Flashскриптов.
Любой браузер позволяет нам посмотреть, исходный текст любой вебстраницы (HTML-документа). Так в Internet Explorer, для просмотра HTMLкода можно воспользоваться командой Вид — Просмотр HTML-кода.
HTML-код может быть написан вручную разработчиком, а может быть
сгенерирован автоматически программой. Если в заголовке страницы присутствует название программы, можно однозначно утверждать, что страница
была сгенерирована автоматически.
Структура HTML-документа
Пример разметки простого документа.
<!DOCTYPE HTML PUBLIC “-/ /W3C/ /DTD HTML 4.0 Transitional/
/ EN”>
<HTML>
<HEAD>
<TITLE> ПРИМЕР HTML-ДОКУМЕНТА </TITLE>
</HEAD>
<BODY> ЭТО САМЫЙ ПРОСТОЙ ДОКУМЕНТ </BODY>
</HTML>
Текст, расположенный между тегами <TITLE> мы видим в заголовке
окна, а текст, расположенный между тегами <BODY> в самом окне. Сохраним документ под именем first.html.
Гиперссылки
Гиперссылки – это ссылки на отдельные части документа или на другие документы. В языке HTML существует элемент A, при помощи которого
создаются гиперссылки. Пример документа с гиперссылкой.
<!DOCTYPE HTML PUBLIC “-/ /W3C/ /DTD HTML 4.0 Transitional/
/ EN”>
<HTML>
<HEAD>
<TITLE> ДОМАШНЯЯ СТРАНИЦА </TITLE>
</HEAD>
<BODY>
ВОТ ПРИМЕР <A HREF=first.html>ГИПЕРССЫЛКИ </A>.
</BODY>
</HTML>
Сохраним документ под именем second.html. Если файлы first.html и
second.html были сохранены в одной папке, то ссылка будет работать. Слово
ГИПЕРССЫЛКИ будет выделено подчеркиванием и цветом, и при щелчке
мышью по этому слову появится документ, сохраненный под именем
first.html.
Если файл, на который ссылается гиперссылка, расположен в другой
папке, то необходимо полностью указать путь доступа к этому файлу. Ссылки можно делать не только на HTML документы, но и на файлы изображений
и т.п.
Ссылку можно создать на часть, самого документа. Для этого используется следующая конструкция:
...
<A HREF=#ANCHOR1>Ссылка-1</A>
...
Часть документа
...
<A NAME=ANCHOR1>
Текст, на который ссылается ссылка-1.
...
Значок # указывает браузеру, что объект ссылки расположен внутри
текущего файла. Параметр NAME задает имя метки. Метки называют якорями (ANCHORS), и могут состоять из произвольной комбинации латинских
букв и (или) цифр.
Основы форматирования документов
Форматирование определяет структуру файла. Для форматирования
удобно использовать каскадные таблицы стилей (CSS).
К элементам структурной разбивки относятся абзацы и заголовки. Для
обознаяения абзаца используется элемент P, а для заголовков – H1, H2, H3,
H4, H5 и H6. Также существуют элементы уровня блока, предназначенные
для форматирования части, или блока страницы, например, группы абзацев.
Пример:
<!DOCTYPE HTML PUBLIC “-/ /W3C/ /DTD HTML 4.0 Transitional/
/ EN”>
<HTML>
<HEAD>
<TITLE> ДОМАШНЯЯ СТРАНИЦА </TITLE>
</HEAD>
<BODY>
<H1> ЭТО ЗАГОЛОВОК ПЕРВОГО УРОВНЯ
<H2> ЭТО ЗАГОЛОВОК ВТОРОГО УРОВНЯ
<P>
ВОТ ПРИМЕР <A HREF=first.html>ГИПЕРССЫЛКИ </A>
<P>
КОНЕЦ
</BODY>
</HTML>
Таблицы стилей
Попробуем выровнять в предыдущем примере заголовки по центру.
Для этого можно для каждого из них указать выравнивание, либо поместить
их в единый блок.
В первом случае:
<!DOCTYPE HTML PUBLIC “-/ /W3C/ /DTD HTML 4.0 Transitional/
/ EN”>
<HTML>
<HEAD>
<STYLE TYPE=”text/css”>
H1,H2 {text-align: center;}
</STYLE>
<TITLE> ДОМАШНЯЯ СТРАНИЦА </TITLE>
</HEAD>
<BODY>
<H1> ЭТО ЗАГОЛОВОК ПЕРВОГО УРОВНЯ
<H2> ЭТО ЗАГОЛОВОК ВТОРОГО УРОВНЯ
<P>
ВОТ ПРИМЕР <A HREF=first.html>ГИПЕРССЫЛКИ </A>
<P>
КОНЕЦ
</BODY>
</HTML>
Во втором случае определим выравнивание с помощью элемента DIV.
<!DOCTYPE HTML PUBLIC “-/ /W3C/ /DTD HTML 4.0 Transitional/
/ EN”>
<HTML>
<HEAD>
<TITLE> ДОМАШНЯЯ СТРАНИЦА </TITLE>
<STYLE> DIV {text-align: center; color: red;} </STYLE>
</HEAD>
<BODY>
<DIV>
<H1> ЭТО ЗАГОЛОВОК ПЕРВОГО УРОВНЯ
<H2> ЭТО ЗАГОЛОВОК ВТОРОГО УРОВНЯ
</DIV>
<P>
ВОТ ПРИМЕР <A HREF=first.html>ГИПЕРССЫЛКИ </A>
<P>
КОНЕЦ
</BODY>
</HTML>
Помимо применения общего для всех одноименных тегов определения стиля,
можно создавать классы элементов. Пример:
<STYLE TYPE=text/css>
P.Center {text-align: center;}
P.Right {text-align: right;}
</STYLE>
...
<P CLASS=Center> . . . текст, который будет центрироваться</P>
<P CLASS=Right> . . . текст, который будет выравниваться по правому
краю</P>
Кроме задания классов элементов, можно ссылаться на элемент, заданный
уникальным идентификатором – ID. Пример:
#prostostil {color: red}
...
<P ID=prostostil> этот текст красного цвета </P>
СТРУКТУРА ДОКУМЕНТА: ЗАГОЛОВОК И ТЕЛО
Любой документ HTML состоит из трех частей:
1. Строки, содержащей информацию о версии HTML.
2. Блока заголовка документа.
3. Тела документа, содержащего либо непосредственно отображаемую
информацию, либо определяющего набор фреймов.
Вторая и третья части документа должны быть вложены в контейнер
HTML. При этом указывать явно контейнеры для документа, его заголовка и
тела нет необходимости. Если они отсутствуют, подразумевается, что браузер сам определит, где что находится. Для всех остальных элементов HTML
открывающий тег обязателен.
Информация о версии – !DOCTYPE
Любой документ HTML должен содержать информацию о версии языка HTML, используемого в документе. Существуют три типа документов:
1. HTML 4.0 Strict – такой документ не должен содержать отмененных
элементов и атрибутов, и не должен быть контейнером для фреймов.
<!DOCTYPE HTML PUBLIC “-/ /W3C/ /DTD HTML 4.0 Strict/ /EN”>
2. HTML 4.0 Transitional – может содержать все то, что и предыдущий,
а также отмененные элементы и атрибуты.
<!DOCTYPE HTML PUBLIC “-/ /W3C/ /DTD HTML 4.0 Transitional/
/ EN”>
3. HTML 4.0 Frameset – указывает на то, что данный документ является
контейнером для набора фреймов.
<!DOCTYPE HTML PUBLIC “-/ /W3C/ /DTD HTML 4.0 Frameset/ /
EN”>
Элемент HTML
После строки с информацией о версии, весь остальной документ должен быть заключен в контейнер HTML. Текст помещенный вне этого элемента может игнорироваться браузером. <HTML> . . . </HTML>
Элемент HEAD
Этот элемент содержит информацию о текущем документе, такую как
заголовок, ключевые слова и прочую информацию, которая не должна отображаться в документе. Браузеры не отображают информацию, помещенную в
контейнер HEAD, но используют ее для каких-либо целей. <HEAD> . . .
</HEAD>.
Элемент TITLE
Каждый документ HTML должен иметь элемент TITLE в части HEAD.
Этот элемент используется для определения содержания документа. Большинство браузеров отображают строку, размещенную внутри элемента
TITLE в качестве заголовка окна. Строго заданных ограничений на длину
текста нет. <TITLE> . . . </TITLE>.
Закрывающийся тег обязателен.
Элемент META
Элемент META используется для включения различной информации о
документе, а также предоставляет возможность сообщать дополнительные
инструкции, как браузеру, так и серверу. Элемент META используется в
форме «свойство – значение». Например, для указания ключевых слов, можно использовать следующую конструкцию:
<META NAME=Keywords CONTENT=компьютеры, программы>
Можно определять любые свойства и присваивать им любые значения.
Есть также общепринятые свойства:
Author – автор документа
Copyright – информация об авторском праве
Description – описание документа (для поисковых машин)
Generator – название программы, с помощью которой создавался документ
Keywords – ключевые слова (для поисковых машин)
Закрывающийся тег не нужен. Имеются собственные атрибуты:
NAME – определяет имя свойства
CONTENT – определяет значение для свойств
SCHEME – определяет схему для обработки CONTENT браузером
HTTP-EQUIV – может быть использован вместо NAME для указания
инструкций серверу:
<META
HTTP-EQUIV=Content-Type
CONTENT=text/html;
Char-
set=Windows-1251>
Приведенная выше строка указывает, что в документе содержится
текст в формате HTML и указывается кодовая страница. Атрибут HTTPEQUIV имеет несколько общепринятых свойств:
Refresh – заставляет браузер перегружать документ по истечении интервала времени, указанного в секундах.
Expires – указывает дату, после которой документ становится устаревшим и заставляет браузер явно загрузить документ из сети, а не из кэша.
Content-type – указывает на тип файла
Content-style-type – указывает на тип применяемых таблиц стилей.
Примеры:
<META HTTP-EQUIV=”Refresh” CONTENT=”60”>
Документ будет перезагружаться каждую минуту.
<META
HTTP-EQUIV=”Refresh”
CONTENT=”5;URL=http://www.site.ru/abc.htm”>
Через пять секунд после загрузки текущего документа будет загружен
другой, расположенный по указанному адресу URL.
Элемент BODY
Контейнер BODY охватывает все содержимое документа, которое
должно быть представлено пользователю. Если документ является контейнером для фреймов, то он не должен содержать элемента BODY. Если использовался открывающий тег, должен использоваться и закрывающий. Продолжают использовать атрибуты, которые были отменены:
BACKGROUND – указывает ссылку на графический объект, используемый как фон.
BGCOLOR – указывает цвет фона.
TEXT – указывает цвет текста.
LINK – указывает цвет ссылок.
ALINK – указывает цвет ссылок в момент щелчка по ним мышкой.
VLINK – указывает цвет посещенных ссылок.
Пример:
<BODY BGCOLOR=”FFFFC4” TEXT=”#000000” LINK=”#FF0000”
VLINK=”#800000” ALINK=”#00FF00”> … </BODY>
То же самое можно сделать без отмененных атрибутов, с помощью
таблицы стилей.
<STYLE TYPE = “text/css”>
BODY {background: #FFFFC4; color: #000000;}
A:link {color: #FF0000;}
A:visited {color: #800000;}
A:active {color: #00FF00;}
</STYLE>
ГРУППИРУЮЩИЕ ЭЛЕМЕНТЫ DIV И SPAN
Элементы, располагающиеся внутри BODY, подразделяются на элементы уровня блока и встроенные элементы (элементы уровня текста). Их
различие сводится к следующему. Элементы уровня блока могут содержать
внутри себя как встроенные элементы, так и другие элементы уровня блока.
То есть элементы уровня блока образуют более крупную структуру, нежели
встроенные. Элемент DIV относится к элементам уровня блока, а SPAN – к
встроенным. Оба они применяются для формирования соответствующей части документа с использованием таблиц стилей. На практике DIV часто используют для объединения нескольких абзацев в одну группу. Требуется закрывающий тег.
Пример:
<HTML>
<HEAD>
<TITLE> Заголовок </TITLE>
<STYLE TYPE = text/css>
DIV.Main {text-align: center; background: green;}
SPAN.Light {background: white} </STYLE>
</HEAD>
<BODY>
<DIV CLASS=Main>
<P> Абзац блока <SPAN CLASS=Light> текст на белом фоне </SPAN>
продолжение текста абзаца.
<P> Другой абзац
</DIV>
</BODY>
</HTML>
ЭЛЕМЕНТЫ-ЗАГОЛОВКИ H1, H2, H3, H4, H5, H6
Элементы заголовка служат для выделения названия разделов документов. Существует шесть уровней заголовка. Чем меньше номер заголовка,
тем более значимым он является. Перед заголовком и после него браузер разрывает текст аналогично абзацу. Для этого элемента требуется закрывающийся тег.
ЭЛЕМЕНТ ADDRESS
Элемент ADDRESS используется, как правило, для предоставления
контактной информации об авторе. Закрывающий тег необходим.
Пример:
<ADDRESS>
Джон Смит <BR>
E-mail:
<A
HREF=”jons@yahoo.com”>
jons@yahoo.com</A>
</ADDRESS>
ЭЛЕМЕНТ FRAMESET
Элемент FRAMESET определяет набор создаваемых фреймов и их расположение в окне браузера. Пример:
<FRAMESET COLS=”40%,*”>
…определение элементов FRAME… </FRAMESET>
В этом примере определяется набор из двух фреймов, на первый из которых отводится столбец шириной в 40 процентов окна, а на второй – все
оставшееся место (в данном случае – 60%). Закрывающийся тег требуется.
Атрибуты:
COLS – задает расположение фреймов по горизонтали. Принимает значения в пикселях, процентах, относительных указателях. Значения перечисляются через запятую.
ROWS – задает расположение фреймов по вертикали. Принимает значения в пикселях, процентах, относительных указателях. Значения перечисляются через запятую.
Пример:
<FRAMESET COLS=”50%”,*” ROWS=”50%,*”>
… определение элементов FRAME …
</FRAMESET>
ЭЛЕМЕНТ FRAME
Элемент FRAME определяет содержимое каждого конкретного фрейма. Этот элемент всегда вкладывается в контейнер FRAMESET. Закрывающего тега нет. Пример:
<FRAMESET>
<FRAME SCR=”file1.html”>
…
</FRAMESET>
Пример описывает, что в первый фрейм из набора фреймов, заданного
FRAMESET, должен быть загружен файл file1.html.
Атрибуты:
NAME – задает имя фрейма, которое используется для создания ссылок между фреймами. Имя может также использоваться в сценариях JavaScript.
Например, пусть окно браузера будет разбито на два фрейма. Первый
назовем “zagolovok”, второй “tekst”. Файл-контейнер для фреймов будет выглядеть так:
<FRAMESET>
<FRAME NAME=”zagolovok” SCR=”zagolovok.html”>
<FRAME NAME=”tekst” SCR=”str1.html”>
</FRAMESET>
Файл zagolovok.html будет иметь вид:
...
<A HREF=”str2.html” TARGET=”tekst”> Страница 2 </A> . . .
При щелчке по ссылке в документе, загруженном во фрейм zagolovok,
новый документ будет загружаться во фрейм tekst.
SRC – содержит URI загружаемого во фрейм документа. Атрибут является обязательным.
LONGDESC – содержит URI документа с описанием того, что должно
загрузиться при помощи атрибута SCR. Например, если SCR ссылается на
рисунок, а браузер не поддерживает графику, то вместо рисунка будет загружен файл, указанный в этом атрибуте.
NORESIZE – указывает браузеру, что пользователь не может изменять
размеры фрейма. Если атрибут не указан, то пользователь может изменять
размер фрейма.
SCROLLING – указывает браузеру, можно или нет создавать полосу
прокрутки. Атрибут может принимать следующие значения:
- Auto (принято по умолчанию). Полоса прокрутки появляется только в
том случае, если документ целиком не помещается во фрейме.
- Yes. Полоса прокрутки будет в любом случае.
- No. Полоса прокрутки всегда отсутствует.
FRAMEBORDER – указывает, выводить или нет рамку данного фрейма. Если указано 1 или YES, то рамка рисуется (эти значения приняты по
умолчанию). Если указаны 0 или NO, то рамка отсутствует.
MARGINWIDTH – указывает ширину отступа слева и справа в пикселях между границей фрейма и его содержимым.
MARGINHEIGHT – указывает высоту отступа сверху и снизу в пикселях между границей фрейма и его содержимым.
BORDERCOLOR – указывает цвет рамки отдельного фрейма. Поддерживается не всеми браузерами.
ЭЛЕМЕНТ NOFRAMES
Если браузер не поддерживает фреймы, можно предусмотреть альтернативное содержание документа-контейнера фреймов. Для этого после определения набора фреймов в документе вставляется элемент NOFRAMES,
внутри которого размещают либо альтернативное содержание, либо пояснительный текст. Требуется закрывающий тег.
ЭЛЕМЕНТ IFRAME
Этот элемент позволяет встроить один документ в другой наподобие
матрешки. Такие фреймы называют также плавающими. Пример:
<IFRAME WIDTH=200 HEIGHT=200 SCR=file1.html NAME=iframe1>
Если браузер не поддерживает IFRAME, вы видите этот текст
</IFRAME>
В примере показано, как создается плавающий фрейм размером 200 на
200 пикселей, в который будет загружен файл file1.html.
Атрибуты элемента IFRAME, такие же как у элемента FRAME.
ЭЛЕМЕНТ A
Элемент A, называемый часто якорем, служит для создания ссылок. В
зависимости от атрибута, с которым он используется, он будет являться либо
источником либо местом назначения:
Если указан атрибут HREF, то элемент А является источником, или самой ссылкой.
Если указан атрибут NAME, то элемент А является назначением для
произвольного числа ссылок.
Примеры:
<A HREF=http://www.firma.net> FIRMA </A>
<A HREF=”mailto:jons@yahoo.com”> Щелкните здесь, чтобы отправить
письмо </A>
Закрывающий тег требуется.
Некоторые атрибуты:
NAME – присваивает уникальное имя ссылке и указывает, что данный
элемент А является пунктом назначения для других ссылок.
HREF – задает URI ресурса, на который должен перейти пользователь,
активизировав данный элемент А. Этот атрибут может указывать как на
внешний документ, так и на какой-либо пункт назначения внутри данного
документа, заданного при помощи NAME.
HREFLANG – указывает язык, на котором составлен документназначение. Может использоваться только вместе с HREF.
TYPE – указывает на тип содержимого документа-назначения, например, text/html.
REL – указывает отношение текущего документа, к документу, на который ссылается атрибут HREF.
ЭЛЕМЕНТ P
Элемент Р определяет параграф. Он не может содержать в себе другие
элементы уровня блока. Браузеры, как правило, создают отступ высотой приблизительно в одну строку между параграфами. Элемент Р не может быть
пустым, так как браузеры игнорируют пустые параграфы. Закрывающийся
тег может отсутствовать. Часто используется применительно к параграфам
атрибут ALIGN. Этот атрибут отменен. Он может принимать следующие
значения: Center, Left, Right, Justify.
ЭЛЕМЕНТ BR
Элемент BR используется для определения новой строки. Закрывающий тег не нужен. Элемент BR всегда бывает пустым. Несколько подряд
идущих тегов BR не принимаются за один. Иногда применяется отмененный
атрибут CLEAR. Этот атрибут указывает, с какой позиции должна начинаться следующая строка, для случая когда текст обтекает встроенный объект.
Атрибут CLEAR принимает следующие значения:
- None. Принят по умолчанию. Следующая строка начинается как
обычно.
- Left. Следующая строка начинается с первой пустой строки с левого
края от объекта.
- Right. Следующая строка начинается с первой пустой строки с правого края от объекта.
- All. Следующая строка начинается с первой пустой строки после объекта.
ЭЛЕМЕНТЫ СПИСКОВ: OL, UL, LI
Элементы OL и UL служат для создания двух классических видов
списков: нумерованных и ненумерованных соответственно.
ГЛОССАРИЙ ПО ДИСЦИПЛИНЕ
Браузер (от английского browser – обозреватель) – программное обеспечение, позволяющее просматривать веб-страницы. Большинство браузеров
распространяются бесплатно или в составе другого приложения. Наиболее
распространенные браузеры: Internet Explorer, Firefox, Safari, Opera, Flock,
Maxthon.
Веб-конструктор – совокупность программных средств, шаблонов,
форм и готовых сценариев, позволяющая пользователям без специальной
подготовки и больших затрат создать собственный сайт, разместить его в сети и администрировать. Как правило, веб-конструкторы располагаются на
сайтах компаний, предоставляющих услуги хостинга. Пользователь не устанавливает на свой компьютер какого-либо программного обеспечения. Достаточно просто выйти на сайт, где располагается соответствующий конструктор, зарегистрироваться и можно приступать к созданию сайта.
Веб-редактор – программа позволяющая создавать веб-страницы, создавая и редактируя как HTML-код, так и внешний вид страницы аналогично
тому как происходит работа с текстовыми документами в современных редакторах типа Microsoft Word. Веб-редакторы располагают множеством
функций и достаточно легки в использовании. Примеры веб-редакторов:
Adobe Dreamweaver, Microsoft FrontPage.
Веб-сервер – это сервер, принимающий HTTP-запросы от клиентов,
обычно веб-браузеров, и выдающий им HTTP-ответы, обычно вместе с
HTML-страницей, изображением, файлом, медиа-потоком или другими данными. Веб-серверы – основа Всемирной паутины.
Веб-сервером называют как программное обеспечение, выполняющее
функции веб-сервера, так и компьютер, на котором это программное обеспечение работает. Клиенты получают доступ к веб-серверу по URL адресу
нужной им веб-страницы или другого ресурса.
Визуальная коммуникация – способ общения с помощью предметов,
оттенков цвета, вариантов фактуры и пропорции, который позволяет передать (сообщить) окружающим какие-либо идеи о себе.
Всемирная паутина – (англ. World Wide Web) — глобальное информационное пространство, основанное на физической инфраструктуре Интернета
и протоколе передачи данных HTTP; подмножество сети Интернет. Всемирная паутина вызвала настоящую революцию в информационных технологиях
и бум в развитии Интернета. Часто, говоря об Интернете, имеют в виду
именно Всемирную паутину. Для обозначения Всемирной паутины также используют слово веб (англ. web) и «WWW».
Гиперссылка – указатель, ведущий с одной страницы на другую, с одной части страницы на другую, с одного файла на другой.
Гипертекст – текст, содержащий ссылки на другие тексты. Пример гипертекста – веб-страницы, содержащие ссылки на другие веб-страницы.
Глобальная сеть – см. Интернет.
Гостевая книга – веб-страница, на которой любой посетитель сайта
может оставить свое сообщение.
Графический интерфейс пользователя – система подсказок, способствующих более удобной ориентации пользователя на сайте.
Интерне́т – (англ. Internet, от Interconnected Networks — объединённые
сети) – глобальная телекоммуникационная сеть информационных и вычислительных ресурсов. Служит физической основой для Всемирной паутины. Часто упоминается как Всемирная сеть, Глобальная сеть, либо просто Сеть. В
обиходе под термином Интернет имеется в виду Всемирная паутина и доступная в ней информация, а не сама физическая сеть.
Информационные технологии – (ИТ, от англ. information technology,
IT) — широкий класс дисциплин и областей деятельности, относящихся к
технологиям управления и обработки данных, в том числе, с применением
вычислительной техники.
Карта сайта – отдельная страница сайта с минимальным оформлением, содержащая список всех доступных пользователям страниц сайта.
Каскадная таблица стилей или CSS ( англ. Cascading Style Sheets) –
технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в
формате HTML и XHTML.
Контент – содержимое сайта.
Корпоративный сайт – сайт компании (коммерческой организации),
разновидность классификации типа сайта по функциональному назначению.
Обычно на корпоративных сайтах размещают подробную информацию о
компании: описание услуг, сервисов, продуктов, открытых вакансий. Внешнее оформление (дизайн) корпоративного сайта соответствует фирменному
стилю компании.
Личная страница – сайт принадлежащий частному лицу, разновидность классификации типа сайта по функциональному назначению. Самый
массовый тип сайтов, существующих в глобальной сети. Личная страница –
это своего рода визитная карточка, представляющая своего владельца с разных сторон. Иногда личная страница выполняет те же функции, что и корпоративный сайт. Например, личная страница дизайнера, адвоката или врача.
Лока́льная вычисли́тельная сеть (ЛВС, локальная сеть; (англ. Local
Area Network, LAN) – компьютерная сеть, покрывающая обычно относительно небольшую территорию или небольшую группу зданий (дом, офис, фирму, институт). Также существуют локальные сети, узлы которых разнесены
географически на расстояние более 12 500 км (космические станции и орбитальные центры). Несмотря на такое расстояние, подобные сети относят к
локальным.
Меню – элемент пользовательского интерфейса.
Навигация – 1. Процесс перемещения по Интернет-сайту. 2. См. навигационная панель.
Навигационная панель – совокупность средств, с помощью которых
можно перемещаться по сайту. Навигационная панель может быть текстовой
или графической.
Некоммерческий сайт – сайт некоммерческой организации или проекта, основная задача которого состоит в привлечении внимания пользователей сети к определенной проблеме или популяризация каких-либо идей или
информации.
Интернет-портал – (от англ. portal «главный вход; ворота») – веб-сайт,
предоставляющий пользователю различные интерактивные сервисы, работающие в рамках одного сайта, такие как почта, поиск, погода, новости, форумы, обсуждения, голосования и пр. Порталы бывают нескольких типов. Горизонтальными (универсальными) принято называть порталы, охватывающие
много тем, например Google или Яндекс. Часто портал возникает вокруг поисковой системы. Вертикальными (тематическими) называются специализированные на определенной теме порталы. Принято также подразделять
порталы на интернациональные и региональные. Google – интернациональный, а Яндекс – региональный.
Существует деление порталов на публичные и корпоративные. Публичные порталы — ориентированы на всех Web-пользователей, каждый может
войти и работать со всей представленной информацией. Корпоративный
портал отличается ориентацией на специфичный тип пользователей сотрудники компании, партнёры. Корпоративные порталы нередко имеют внешний
интерфейс для публичного использования, но он отличается по предоставляемым возможностям от внутреннего.
Интерфейс – (англ. interface – поверхность раздела, перегородка) – совокупность средств и методов взаимодействия между элементами системы
(см. графический интерфейс, пользовательский интерфейс).
Поиск контекстный – поиск информации по подстроке, вводимой в
специальное поле поисковой системы.
Поиск тематический – поиск информации с помощью тематического
каталога.
Поисковая система – веб-сайт, предоставляющий возможность поиска
информации в Интернете.
Пользовательский интерфейс – (UI – англ. user interface) – совокупность средств, при помощи которых пользователь общается с различными
устройствами, программами, Интернет-сайтами.
Сайт (Веб-сайт) – (англ. Website, от web – паутина и site – «место») – в
компьютерной сети объединённая под одним адресом совокупность документов.
Селектор – переопределяемый HTML-тэг. При переопределении тэга
он приобретает новые свойства, сохраняя первоначальные.
Сервер – (от англ. server, обслуживающий) 1. Логический или физический узел сети, обслуживающий запросы к одному адресу и/или доменному
имени (смежным доменным именам), состоящий из одного или системы аппаратных серверов, на котором выполняются один или система серверных
программ. 2. Программное обеспечение принимающее запросы от клиентов.
3. Компьютер (или специальное компьютерное оборудование) выделенный
и/или специализированный для выполнения определенных сервисных функций.
Система управления содержимым сайта – (англ. Content management
system, CMS) – компьютерная программа, используемая для управления содержимым Интернет-сайта. Подобные CMS позволяют управлять текстовым
и графическим наполнением веб-сайта, предоставляя пользователю удобные
инструменты хранения и публикации информации.
Скрипт или Скри́птовый язы́к (англ. scripting language, в русскоязычной литературе принято название язык сценариев) – язык программирования, разработанный для записи «сценариев», последовательностей операций, которые пользователь может выполнять на компьютере.
Слой – контейнер HTML-содержимого, который можно разместить на
любом месте страницы.
Сплэш-страница –страница, располагающаяся перед главной страницей веб-сайта и, как правило, не содержащая ничего кроме логотипа или визуала и ссылки на первую главную страницу сайта. Отсутствие информационного наполнения позволяет размещать на сплэш-странице большой объем
статичной или анимированной графики. Иногда на сплэш-странице размещаются меню выбора языка или кодировки.
Ссылка – см. гиперссылка.
Стиль – группа атрибутов (свойств) какого-либо объекта с общим
именем.
Таблица разметки – таблица, используемая для размещения контента
на сайте.
Телеконференция – виртуальное вместилище сообщений.
Тэг (тег) – элемент языка разметки гипертекста. Тэги представляют собой директивы браузеру, определяющие как нужно отображать веб-страницу
Фокус-группа – один из методов сбора и анализа информации в процессе социальных исследований. Он заключается в приглашении небольшой
группы людей (чьё мнение по обсуждаемому вопросу интересно), отобранных по специальным критериям, на встречу, во время которой ведущим проводится дискуссия (обсуждение) по заранее созданному сценарию фокусгруппы. В ходе дискуссии ведущий (называемый также «модератором») «фокусирует» участников на вопросах, интересующих исследователей, с целью
получения от них глубинной информации на заданные темы.
Форма – конструкция, состоящая из поименованных элементов особых
типов: полей ввода текста, кнопок, переключателей, выпадающих меню,
квадратов выбора.
Форум – сайт (или соответствующее программное обеспечение) для
Интернет-общения.
Фрейм – (англ. frame – кадр, рамка) – структура, содержащая некоторую информацию. В языке HTML, веб-дизайне фреймом называют область
окна браузера для представления отдельной веб-страницы.
Хост – (от англ. host – хозяин, принимающий гостей) – любой компьютер, сервер, подключенный к локальной или глобальной сети.
Хостинг – (англ. hosting) – услуга по предоставлению дискового пространства для физического размещения информации на сервере, постоянно
находящемся в сети Интернет. Обычно под понятием услуги хостинга подразумевают как минимум услугу размещения файлов сайта на сервере, на котором запущено программное обеспечение, необходимое для обработки запросов к этим файлам (веб-сервер). Как правило, в услугу хостинга уже входит
предоставление места для почтовой корреспонденции, баз данных, DNS,
файлового хранилища и т. п., а также поддержка функционирования соответствующих сервисов.
Целевая аудитория – группа людей, объединенных общими признаками, или определенная ради какой-либо цели или задачи, например, пользователи Интернета, которым может быть интересен определенный сайт.
Электронная почта – (англ. email, e-mail, от англ. electronic mail) —
технология и предоставляемые ею услуги по пересылке и получению электронных сообщений (называемых «письма» или «электронные письма») по
распределённой (в том числе глобальной) компьютерной сети.
Язык гипертекстовой разметки – см. HTML.
CMS – см. Система управление содержимым сайта
FTP-клиент – программа для доступа к серверу. Веб-разработчик посредствам FTP-клиента выкладывает на сервер обновления сайта.
HTML – (от англ. HyperText Markup Language – «язык разметки гипертекста») – стандартный язык разметки документов во Всемирной паутине.
Веб-страницы создаются при помощи языка HTML (или XHTML). Язык
HTML интерпретируется браузером и отображается в виде документа, в
удобной для человека форме. HTML является приложением SGML – стандартного обобщённого языка разметки и соответствует международному
стандарту ISO 8879.
ICQ – 1. Интернет-сервис компании AOL для обмена мгновенными сообщениями (IM). 2. Программа для обмена мгновенными сообщениями в
ICQ.
URL – (англ. Uniform Resource Locator) – единообразный локатор
(определитель местонахождения) ресурса. Ранее назывался Universal Resource Locator – универсальный локатор ресурса. URL – это стандартизированный способ записи адреса ресурса в сети Интернет.
ТАБЛИЦА ПО САМОСТОЯТЕЛЬНОЙ РАБОТЕ
Самостоятельная работа по дисциплине «Информационные технологии в
профессиональной деятельности». Всего на самостоятельную работу студентов по
программе отводится 19 часов.
Наименование
разделов, тем
Тема 1.2. Методы
Виды, содержание самостоятельной
работы
Поиск сетевых ресурсов, специализиру-
поиска информации
ющимися в области искусства, дизайна,
в сетях.
веб-дизайна.
Тема 1.3. Интернет-
Изучение возможностей конструктора
ресурсы для веб-
сайтов.
Кол-во
часов
4
4
дизайнеров.
Тема 1.4. Интернет-
Регистрация в почтовой системе и ICQ.
техно логии в инфор-
Регистрация на специализированном фо-
мационном обмене.
руме.
Тема 1.5. Интернет-
Проведение анализа интернет-сайта при-
технологии в пред-
надлежащего дизайнеру или дизайн-
проектном анализе.
студии.
2
4
КАРТА ОБЕСПЕЧЕННОСТИ ЛИТЕРАТУРОЙ ПО ДИСЦИПЛИНЕ
«ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ В ПРОФЕССИОНАЛЬНОЙ
ДЕЯТЕЛЬНОСТИ»
Количество
Автор, название, место издания.
Обеспеченэкземпляров в Издательство, год издания учебность на однобиблиотеке
ной литературы, вид и характери- го обучающеКБГУ
стика иных информационных регося
сурсов
1
Богданов-Катьков Н.В., Орлов А.А.
1/12
Интернет. новейший справочник. М.-СПб., 2003.
1
Вайскопф Дж. Microsoft FrontPage
1/12
2000. Учебный курс. -СПб., 2000.
1+электронная Грибов Д.Е. Flash 4. Интерактивная
версия
Web-анимация. -М., 2000.
1
1+электронная Кирсанов Д.
версия
1999.
-СПб.,
1
1+электронная Коржинский С.Н. Настольная книга
версия
web-мастера. -М., 2000.
1
1+электронная Нильсен Я. Веб-дизайн. -СПб., 2001.
версия
1+электронная Тарин-Тауэрс
Дж.
Macromedia
версия
Dreamviewer MX для Windows и
1
Веб-дизайн.
1
Macintosh. -М., 2003.
1+электронная Питтс Н. XML за рекордное время. версия
М., 2000.
1
1+электронная Хольцшлаг М. Языки HTML и CSS
версия
для создания web-сайтов. -М., 2007.
1
ПЕРЕЧЕНЬ ИСПОЛЬЗУЕМЫХ КОМПЬЮТЕРНЫХ ПРОГРАММ
1. Windows 2000/XP.
2. Средства разработки веб-сайтов (Dreamweaver, Front Page и т.п.)
3. Системы анимации (Flash и т.п.)
4. Графический пакет Adobe PhotoShop.
5. Средства разработки пиктограмм (PixelToolbox, IcoFX, IconArt)
6. Интернет-браузеры: InternetExplorer, Mozila FireFox, Opera и т.п.
7. Текстовый редактор (Write, Word, Word Pad).
ИЛЮСТРАТИВНЫЙ И СПРАВОЧНЫЙ МАТЕРИАЛ
В ЭЛЕКТРОННОЙ ФОРМЕ
1. Образцы сайтов-личных страниц.
2. Образцы корпоративных сайтов.
3. Образцы некоммерческих сайтов.
4. Образцы Интернет-порталов.
5. Шаблоны Интернет-сайтов.
6. Библиотека апплетов.
ИНТЕРНЕТ-РЕСУРСЫ ПО ДИСЦИПЛИНЕ
1. www.w3schools.com
2. www.alpet.spb.ru
3. www.diogenes.ru
4. www.ico.brush.ru
5. www.finarti.ru
6. www.webmascon.ru
7. www.indexvisual.ru
8. www.pseudology.org
ПРОТОКОЛ СОГЛАСОВАНИЯ РАБОЧЕЙ ПРОГРАММЫ
С ДРУГИМИ ДИСЦИПЛИНАМИ СПЕЦИАЛЬНОСТИ
Наименование
Предложения об
Принятое
дисциплин, изу-
изменении в про-
ПЦК\кафедрой
порциях материа-
решение об
опирается на
ла, порядке изло-
одобрении дан-
данную дисци-
жения и содержа-
ной программы
плину
ния занятий
(проток №, дата)
3
4
чение которых
1
Кафедра/ПЦК
2
Визуальные ком-
ПЦК Графиче- Предложений нет
Одобрена на за-
муникации
ский дизайн
седании ПЦК
«Графический
дизайн» Протокол №
Дизайн-
ПЦК Графиче- Предложений нет
Одобрена на за-
проектирование
ский дизайн
седании ПЦК
«Графический
дизайн» Протокол №
Технологии веб-
ПЦК Графиче- Предложений нет
Одобрена на за-
дизайна
ский дизайн
седании ПЦК
«Графический
дизайн» Протокол №