- •Фгбоу впо «Башкирский государственный педагогический университет
- •2. Требования к уровню освоения содержания дисциплины «Технологии Internet (Web-мастерство)»
- •3. Объем дисциплины «Технологии Internet (Web-мастерство)» и виды учебной работы
- •4. Содержание дисциплины «Технологии Internet (Web-мастерство)»
- •4.1. Разделы дисциплины и виды занятий
- •4.2.Содержание разделов дисциплины «Технологии Internet (Web-мастерство)»
- •5. Учебно-методическое обеспечение дисциплины
- •6.5. Система подготовки материалов и методических разработок
- •7. Содержание итогового и промежуточного контроля
- •7.1. Перечень примерных контрольных вопросов и заданий для самостоятельной работы
- •7.2 Теоретические вопросы к зачету.
- •Практические задания
- •8. Методические рекомендации по организации изучения дисциплины
- •8.1. Методические рекомендации для преподавателей
- •9.Учебная практика по дисциплине «Технологии Internet (Web-мастерство)» не предусмотрена.
- •2.1. Конспекты лекций по дисциплине «Технологии Internet (Web-мастерство)»
- •2.1. Язык гипертекстовой разметки html.
- •2.1.1. Основные теги.
- •Комментарии
- •Общий вид html-документа
- •2.1.2. Обычный текст или абзац
- •Обычный текст или абзац в сеpедине стpоки
- •2.1.3. Ссылки
- •Ссылки на главы дpугих документов
- •2.1.4. Списки
- •Ненумеpованный список
- •Нумеpованный список
- •2.1.5. Физические стили
- •Наложение различных стилей
- •2.1.6. Рисунки
- •Составные картинки
- •Элемент map
- •2.1.7. Таблицы
- •2.1.8. Формы html
- •Атрибут checkbox
- •Атрибут image
- •Атрибут password
- •Атрибут radio
- •Атрибут reset
- •Атрибут select
- •Атрибут submit
- •Атрибут textarea
- •2.1.9. Фpеймы
- •3.1. Базовый синтаксис css
- •3.3. Применение свойства цвета.
- •Свойство 'background-color'
- •3.4. Фоновые изображения [background-image]
- •3.5. Семейство шрифта [font-family]
- •3.6. Боксовая модель
- •Боксовая модель в css
- •3.7.Принципы css-позиционирования
- •Абсолютное позиционирование
- •Относительное позиционирование
- •4.1. Цвет и форма.
- •4.2. Модульная сетка в дизайне.
- •4.3. Типы сайтов. Модели организации сайта.
- •4.3.1. Линейная организация
- •4.3.2. Решетка
- •4.3.3. Иерархия
- •4.3.4. Паутина
- •5.1. Теория навигации
- •5.1.1 Размещение элементов навигации
- •5.1.2. Правила навигации
- •5.1.3. Основные приемы создания ссылок
- •5.2. Программы для создания web-страниц
- •6.1. Изображения в Интернет: технологии gif, jpeg, png, Flash.
- •6.1.1. Форматы изображений
- •6.1.2. Формат gif
- •6.1.3. Формат jpeg
- •6.1.4. Формат png
- •6.1.6. Другие форматы изображений
- •6.2. Анимация
- •6.3. Звук
- •6.4 Видео
- •7.1. Технологии программирования
- •7.2. Программирование на стороне клиента
- •7.2. Синтаксис языка JavaScript и основы программирования на нем
- •8.1. Технологии, работающие на стороне сервера
- •8.2. Сценарии на стороне сервера
- •8.3. Технологии создания интерактивных страниц: asp, php, ssi
- •8.4. Серверные программные интерфейсы приложений
- •8.4. Сетевые и сопутствующие протоколы
- •8.4.3. Адресация: url/uri/urn/urc
- •9.4 Работа с формами
- •9.5. Рнр: выборочная загрузка
- •9.6 Рнр: гостевая книга
- •10.1. Базовая модель Web-процесса
- •10.2. Планирование сайта
- •I определение цели
- •2. Определение аудитории
- •3. Профилирование пользователей
- •4. Требования к сайту
- •II план сайта
- •III разработка дизайна
- •Логотип
- •Навигатор по сайту
- •IV создание пробного сайта
- •V тестирование
- •10.3 Публикация и продвижение сайта
- •Упражнение 2 – создание списка
- •Упражнение 3 - вставка рисунка
- •Упражнение 4 – гиперссылки
- •Лабораторная работа № 2 Создание home page средствами Notepad (папка web)
- •Последовательность выполнения работы
- •Лабораторная работа № 3
- •Сведения о пользователе
- •Лабораторная работа № 4 Создание домашней странички (папка web)
- •Лабораторная работа № 5 JavaScript
- •Лабораторная работа № 6 JavaScript Создание и обработка форм в электронных документах, их назначение.
- •Лабораторная работа № 7 Тема «Использование Flash-технологий для создания Web-сайтов»
- •Задания для самостоятельной работы
- •Упражнение 4 Создание анимационного ролика «Шарик летит по улице города»
- •Упражнение 6 Создание собственных кнопок
- •Задания для самостоятельной работы
- •Лабораторная работа № 8. Создание web-сайта средствами редактора Dreamweaver (папка web-6)
- •5 Проверить корректность работы файла стилей!
- •Лабораторная работа №9 по технологиям Internet.
- •Лабораторная работа 10. Введение в язык php
- •Лабораторная работа 11. Обработка данных форм
- •Лабораторная работа 12. Массивы
6.1.4. Формат png
PNG (Portable Network Graphics, переносимая сетевая графика) поддерживает все особенности формата GIF в дополнение к некоторым другим возможностям Во-первых, алгоритм сжатия для PNG не является патентованным, в отличие от формата GIF, который сжимается с помощью алгоритма LZW (принадлежащего Unisys) Некоторые дизайнеры выражали обеспокоенность потенциальными проблемами, возникавшими из-за патентных притязаний Unisys на сжатие LZW, но пока что до судебных разбирательств не доходило. Кроме того, алгоритм сжатия PNG немного лучше того, что применяется в GIF. Ко всему прочему, PNG обеспечивает слегка усовершенствованную чересстрочную развертку.
В изображениях PNG преодолевается 8-битный цветовой барьер, который обычно присутствует в GIF, но, принимая во внимание степень сжатия, доступную в PNG на сегодняшний день, во всех случаях отдавать предпоч-
6.1.5. Flash
Относительно распространенным в сети Internet становится векторный формат изображений Flash от компании Macromedia, обозначающийся расширением файла swf. Этот формат, в основном, известен возможностью создания анимации, но, помимо этого, он может применяться для проектирования статических, масштабируемых, неподвижных изображений (см. http:// www.webdesignref.com/examples/staticflash.htm). Его преимущество в том, что изображение можно с легкостью масштабировать, расширяя его на доступное экранное пространство, или, как показано на рис. 14.18, детализировать. Во многих случаях размер таких изображений столь же незначителен, как и размер GIF.
Большинство людей ставят знак равенства между анимацией и Flash. В некоторых отношениях Flash-анимация превосходит анимированные GIF-изображения. Во-первых, она содержит намного больше информации, чем GIF, и позволяет применять намного более изощренные и сложные эффекты. Во-вторых, Flash поддерживает составление комплексных сценариев, подобных JavaScript, под названием ActionScript. В-третьих, являясь векторным форматом, файлы этого формата обладают возможностью масштабирования, могут сокращаться и расширяться, заполняя относительную область монитора, становясь, таким образом, крупнее на больших мониторах и имея возможность уменьшения масштаба, чтобы без лишних проблем уместиться на небольших мониторах. Наконец, несмотря на все эти возможности, файлы Flash относительно компактны.
6.1.6. Другие форматы изображений
Существует множество других форматов изображений, которые могут воспроизводиться в браузерах, но обычно не подходят для разработки общедоступных Web-сайтов. Во-первых, это формат BMP. В то время как Internet Explorer поддерживает этот формат, в нем отсутствует даже самая малая степень сжатия, и он не отображается во многих других браузерах. Во-вторых, есть масса исторических форматов изображений наподобие ХВМ и ХРМ, которые были распространены в среде UNIX, но сегодня они являются лишь напоминанием о прошедших днях Internet. Наконец, некоторые сайты поддерживают ряд других форматов изображений, которые можно признать экзотическими: элементы управления ActiveX, апплеты или сменные модули Java. В этих форматах, которые, как правило, предусматривают какую-либо специальную возможность наподобие масштабирования или обеспечения очень крупных размеров файлов, применяется предельное сжатие.
Потенциально существенным форматом, заслуживающим хотя бы краткого упоминания, является JPEG 2000. Что касается браузеров, он до сих пор в работе (несмотря на этикетку "2000"), но все же подает разработчикам надежды на появление стандарта JPEG, который сильно усовершенствует воспроизведение фотографических изображений в сети Internet. Обычный JPEG использует схему сжатия DCT, которая сжимает визуальную информацию в блоки размером 8x8 пикселов, и при визуализации изображения эти блоки загружаются последовательно. В стандарте JPEG 2000 используется wavelet-сжатие (wavelet compression). Изображение преобразуется в wavelet-последовательности, что, в отличие от использования блоков пикселов, позволяет учитывать большее количество информации об изображении, чем это возможно в стандартном JPEG. В дополнение к улучшенному сжатию, дизайнеры смогут выбирать уровень разрешения для каждого изображения в формате JPEG 2000, а пользователи - определять, в каком разрешении их отображать. Кроме того, новый формат позволит отображать в Web CMYK.
SVG
SVG (Scalable Vector Graphics, масштабируемая векторная графика) - это язык XML для описания простых двухмерных изображений. Поскольку этот язык основан на XML, взаимодействие сценариев здесь простое, осуществляемое с помощью стандартного JavaScript вместе с моделью объекта документа. Хотя формат SVG является открытым стандартом, его принятие Internet-сообществом продвигается медленно, и в ближайшем будущем он вряд ли обгонит Flash.
VML
VML (Vector Markup Language, векторный язык разметки) - это еще один тип векторных изображений, применяемых на Web-страницах. Он остался сравнительно незамеченным большинством Web-разработчиков, несмотря на то, что внутренне поддерживается Microsoft Internet Explorer, начиная с версии 5.0. Он был в общих чертах представлен в W3C для стандартизации, однако почву из-под VML выбивает SVG, a Flash в настоящее время является популярным векторным форматом для масс. Тем не менее, связанные с Microsoft разработчики должны быть хорошо знакомы с этим форматом, поскольку он обнаруживается в страницах, экспортируемых из продуктов Microsoft.
Дополнительные форматы
Охарактеризованные форматы изображений являются основным стандартом для полностью поддерживаемых форматов изображений в сети Internet. Тем не менее, в некоторых браузерах поддерживаются другие изображения, и, в теории, тег <img> не подразумевает ограничений по поводу типа или изображений, помещенных на Web-странице. Наиболее важным из других форматов, вероятно, является BMP, который поддерживается Microsoft Internet Explorer. Вариант под названием Wireless BMP (WBMP, битовое изображение для беспроводных систем) также достоин внимания и поддерживается в нескольких беспроводных браузерах. Многие браузеры, особенно более старые или те, что сопровождают версию UNIX, поддерживают Xbitmap. С помощью сменных модулей или вспомогательных приложений в браузере можно просматривать все - от файлов PostScript до TIFF.