- •Фгбоу впо «Башкирский государственный педагогический университет
- •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. Массивы
5.1.1 Размещение элементов навигации
Расположение элементов навигации это не только вопрос вкуса. Данная проблема также порождает множество разногласий относительно удобства использования. На экране в действительности существует только пять основных областей для размещения на Web-странице элементов навигации: вверху, внизу, справа, слева и в центре. Каждое из этих местоположений имеет свои достоинства и недостатки.
Навигация сверху
Многие сайты размещают возможные варианты перехода в верхней части экрана. Это имеет смысл, когда необходимо, чтобы все возможные варианты выбора выводились на экран немедленно. Также традиционно в графических интерфейсах пользователя верх экрана является местом размещения для основных меню программ, так почему бы не использовать это в Web? Наиболее распространенный метод просмотра обычной Web-страницы слева направо или сверху вниз, это еще один аргумент в пользу верхнего расположения элементов навигации.
Очевидная проблема, связанная с навигацией, заключается в том, что пользователи могут прокручивать навигационные элементы, вытесняя их с экрана, когда они спускаются вниз по странице. Когда пользователи достигают нижней части страницы, они могут быть готовы к тому, чтобы идти дальше; но если навигация предполагается лишь вверху страницы, то, чтобы продолжить, им приходится совершать обратную прокрутку вверх. Пытаясь устранить эту проблему, многие сайты принимают одно или несколько из следующих решений.
Некоторые сайты используют ссылку Обратно вверх, которая переносит пользователя обратно в верхнюю часть страницы, где расположена панель навигации. Недостатком этого можно считать дополнительный щелчок кнопкой мыши, который пользователю необходимо сделать, прежде чем он сможет воспользоваться навигацией, чтобы уйти со страницы. Положительный эффект от такой ссылки заключается в том, что пользователь может воспользоваться ею, когда просто хочет переместиться вверх. Этот тип ссылки позволяет избежать утомительного прокручивания содержимого окна. Ссылки, переносящие пользователя в противоположном направлении, вниз страницы, встречаются редко, т. к. пользователь не имеет представления о том, что там внизу, и поэтому, зачем ему хотеть перейти туда? В случае ссылки на верх страницы пользователь либо уже был там, либо знает о том, что элементы навигации должны быть размещены именно вверху, поэтому для него есть смысл выбрать ссылку. Еще один момент, связанный с использованием ссылки, ведущей вверх, заключается в том, что некоторые пользователи могут быть удивлены тем, что ссылка прокручивает страницу вверх. Использование более определенных обозначений ссылки, подобных Вернуться вверх страницы (Return to top of page) или просто Вверх страницы (Top of page), является более предпочтительным по сравнению с более кратким Вверх (Тор). Некоторые дизайнеры предпочитают использовать указатели в форме направленных вверх стрелок. В таком случае следует убедиться, что по крайней мере текст alt или title отражает назначение ссылки.
При размещении навигации сверху будьте осторожны, чтобы навигационные элементы не заслонили собой обозначение страницы и информацию, идентифицирующую сайт.
Навигация снизу
В большинстве случаев размещение навигации снизу не кажется разумным выбором, т. к., скорее всего, она вызовет необходимость в осуществлении прокрутки содержимого окна. Это станет причиной того, что элементы навигации, вероятно, не появятся на первом экране, за исключением случаев, когда содержимое страницы ограничено или пользователь имеет очень большой по вертикали экран. Конечно, с помощью фреймов или других приемов можно зафиксировать нижнюю навигацию таким образом, чтобы она все время оставалась на экране. Тем не менее, даже без фреймов положительный эффект от размещения навигации внизу экрана заключается в том, что верхняя часть страницы остается свободной для обозначения страницы и корпоративного логотипа.
Избегайте помещения первичной навигации в нижней части экрана; лучше приберегите эту область для вторичной, или подкрепляющей навигации.
Левая часть страницы очень часто используется для размещения элементов навигации. Так как люди, читающие на английском и других западных языках, просматривают информацию слева направо, то навигация, размещенная таким образом, оказывается прямо на пути следования глаз читающего. Также левая часть экрана является обычным местом для размещения навигации во многих программах и становится чем-то вроде соглашения в Web-дизайне. Даже в печатном дизайне левосторонняя навигация — обычное дело; к примеру, в большинстве оглавлений описание содержимого помещается слева, а страницы — справа.
Несмотря на свои потенциальные преимущества, размещение навигации справа имеет несколько серьезных недостатков. Для начала обсудим простой вопрос. Где именно находится право? В зависимости от размеров монитора пользователя и окна браузера расстояние от левого края экрана до правого может значительно варьироваться. На очень больших мониторах навигация может находиться очень далеко от левого края экрана, и расстояние между элементами навигации и любимой кнопкой пользователя Назад (Back), которое должен будет пройти указатель мыши, может быть чрезмерным. Также дизайн экрана должен учитывать возможность перемещения правой границы. По этой причине некоторые дизайнеры предпочитают создавать искусственную правую границу для сфокусированной справа навигации. Обычно они стремятся сделать эту границу где-то между 600 и 700 пикселами с тем, чтобы крайняя грань страницы находилась в районе 800 пикселов по ширине, что приблизительно эквивалентно ширине стандартного листа почтовой бумаги в большинстве мониторов. Это может быть приемлемо, но в действительности не позволяет достигнуть на всех мониторах второго преимущества правой навигации: близкого расположения к полосам прокрутки. Несомненно, это расстояние меньше, чем при размещении навигации слева, но на огромном мониторе оно все еще может быть достаточно большим
Вероятно, самая большая причина, по которой не следует размещать навигацию справа, это просто соглашение. Графический интерфейс пользователя не приветствует правую навигацию, и большинство Web-сайтов также. Несмотря на то, что левосторонний стиль навигации с точки зрения некоторых может быть не оптимален, размещение навигации справа, безусловно, не является стандартом. Обдумайте это, прежде чем поменять местоположение навигационных элементов. Означает ли это, что никогда не следует использовать правую навигацию?
Избегайте размещения основной навигации в крайней правой части экрана.
Навигация в центре
Последним вариантом размещения навигационных элементов в окне является центр. Обычно тяжелые навигационные элементы, такие как графические кнопки или изображения карт сайта, размещаются в центре исключительно только на домашней странице сайта. Дизайн с навигацией в центре имеет тенденцию быть "тяжелым" и не оставляет достаточно места для содержимого страницы, т. к. навигация находится в области основного внимания пользователя. Тем не менее, для домашних страниц это может и не являться проблемой. Учитывая, что основная цель домашней страницы состоит в том, чтобы помочь пользователю решить, куда ему пойти, размещение исходной навигации сайта в середине представляется разумным. Такой дизайн также позволяет домашней странице визуально отличаться от остальных страниц, что дает возможность использовать ее в качестве страницы-ориентира.
Домашние страницы или другие страницы-ориентиры следует формировать с использованием навигации, сосредоточенной в центре, что позволит им отличаться от остальных страниц сайта
Подчиненные страницы должны оставаться в стороне от размещения навигации в центральных областях страницы, за исключением простых текстовых ссылок.