Учебное пособие Тамбов 2002 г. Авторы составители: Кузьмина Н. В, Инькова Н. А., Зайцева Е. А., Толстых С. Г. Основы работы в Интернет: Учебное пособие. Ч тамбов: Изд-во тгту, 2002. с. 40
Скачать 0.55 Mb.
|
Широкая неглубокая иерархия (рис. 1.4)     Рисунок 1.4Ни первый, ни второй способ организации информации не является оптимальным. Лучше, когда иерархическая структура состоит из 3-4 уровней. Нелинейная структура (рис. 1.5)       Рисунок 1.5 Смешанная структураСуществуют ситуации, когда представить информацию одним из описанных выше методов не представляется возможным. В этом случае применяют несколько схем одновременно. Однако такой подход имеет недостаток – он требует от пользователя концентрации внимания и дополнительных усилий. Чтобы помочь пользователю составляют карту Web-сайта (site-map). На данной карте схематически представляют структуру размещения информации на Web-сайте. Задание 1.1 Нарисуйте на бумаге схему Вашего сайта, обозначьте стрелками связи по ссылкам между страницами и подумайте о том - легко ли будет ориентироваться посетителю во всех этих переходах, не заблудится ли он в Вашем лабиринте. Замечено, что ориентироваться в дереве разветвлений с глубиной проникновения более чем на три уровня становится очень сложно, ведь пользователь заходя на Ваш сайт, ориентируется в его структуре как если бы, например, он действительно бродил по огромному зданию, с его этажами, коридорами и комнатами. Важно помнить, что навигация должна быть удобной и доступной из любой части каждой Вашей страницы, и должна быть налажена как между отдельными страницами сайта, так и между отдельными частями внутри одной страницы. При организации Web-сайта отдельные его страницы, связанные ссылками, могут физически находиться на совершенно удаленных друг от друга серверах, и все будет нормально функционировать незаметно для пользователя, хотя если один из серверов окажется, вдруг недоступен по какой-либо из причин, то соответственно часть Вашего Web-сайта посетители не увидят. 1.5 Обзор инструментальных средств Web-страницы можно создавать вручную с помощью языка HTML (HyperText Mark-up Language - язык разметки гипертекста), при этом ввод HTML-кода выполняется в любом текстовом редакторе или с помощью HTML-редакторов. Наиболее известные редакторы Web-страниц DreameWeaver, Netscape Composer, HotDog, Word97 и последующие версии, а также Microsoft FrontPage, который мы и будем изучать. Для создания элементов страниц используются следующие инструментальные средства: графические редакторы (Adobe Photoshop, Fireworks, Paint Shop Pro, Painter и др.) для создания графических файлов, текстовые редакторы для создания текстов, звуковые редакторы для создания звуковых файлов. 2 Подготовка изображений для размещения в WWW 2.1 Форматы графических изображений Графические изображения – важный компонент любой Web-страницы. При подготовке графических документов для Web следует иметь в виду, что чем меньше объем файла, тем быстрее загружается изображение. Вместе с тем важно и качество. Поэтому основная сложность заключается в поддержании баланса между качеством графического изображения и минимальным размером файла. В Web используются в основном два формата графических изображений – GIF и JPEG. Изображения в этих форматах воспроизводятся самими браузерами без использования встраиваемых модулей. Реже используют специально созданный формат PNG (Portable Network Graphics) – переносимая сетевая графика. GIF (Graphic Interchange Format) разработан фирмой ComputerServe с целью уменьшения объема графических файлов. GIF – это первый графический формат, широко поддерживаемый Web-браузерами. GIF- файлы – это файлы растровых изображений, в которых используется не более 256 так называемых индексированных цветов (indexed color). Графическая информация, сохраняемая в GIF-файле, сжимается при помощи специальных алгоритмов сжатия с минимальными потерями информации. Рекомендуется использовать для Web-графики разрешение 72 пикселя на дюйм, т.к. именно эта величина разрешения используется при преобразовании в формат GIF. JPEG (Joint Photographic Experts Group) представляет собой растровое изображение, в котором может быть использовано до 16,7 млн. цветов (24-битовый цвет). Сжатие JPEG-изображений, как правило, сопровождается потерями информации, т.к. основано на отбрасывании мелких деталей. Для этого формата также рекомендуется создавать рисунки с разрешением 72 пикселя на дюйм. Каждый формат имеет свои преимущества и недостатки. Выбор формата для графического изображения, размещаемого на Web-странице, зависит от стоящих перед разработчиком целей. GIF-формат больше подходит для изображений, содержащих меньше 256 цветов. JPEG-файлы используются для хранения 16- и 24-битовых фотографических изображений, содержащих более 256 цветов. GIF-формат рекомендуется применять для создания простых анимационных эффектов, которые можно создавать при помощи других технологий, например Java. Для воспроизведения анимированных GIF-файлов, достаточно встроенных средств, предлагаемых браузерами. Примечание. Если ваш сайт содержит много графических изображений (например, галерею картин), то разместить их все на странице практически невозможно, т.к. она будет очень долго загружаться. В этом случае, используя уменьшенные копии рисунков в качестве ссылок, можно загрузить основные рисунки. Миниатюрные копии позволяют познакомиться с идеей рисунка, и посетитель не будет загружать те изображения, которые его не интересуют. Щелкнув на миниатюрной копии, он познакомится только с необходимыми изображениями. 2.2 Подбор и оптимизация графического изображения Рисунки для Web-сайта вы можете позаимствовать в специальной библиотеке рисунков (Clip Art), создать с помощью графической программы, отсканировать какие-либо готовые изображения или воспользоваться цифровой камерой. Библиотека рисунков содержит уже готовые к использованию изображения. Загрузить ее можно через Internet, например, с сервера Yahoo или c компакт-диска. Однако библиотеки рисунков обладают одним существенным недостатком – не вы одни имеете возможность ими пользоваться. Примечание: перед тем как помещать какое-либо изображение или фотографию на свой Web-сайт, убедитесь, что вы имеете право это делать. Если вы решили создать изображение сами, то сделать это можно с помощью специальных графических редакторов, которые бывают растровые, векторные и комбинированные. В векторном графическом редакторе объекты, составляющие изображения, описываются посредством математических формул и всегда являются редактируемыми, т.е. на любом этапе вы можете изменить шрифт, цвет и другие параметры текстового объекта. В программе растровой графики после выхода из режима создания текста, текст превращаемся в набор пикселей и уже не подлежит редактированию. При увеличении растрового изображения станут видны отдельные его пиксели. В случае с векторным изображением этого не происходит. На завершающем этапе подготовки рисунка для Web лучше использовать программы растровой графики типа Adobe Photoshop, поскольку форматы GIF и JPEG являются растровыми. По этой причине для создания объектов изображения (например, текста) используют программы векторной графики, а затем экспортируют рисунок в программу растровой графики. Оптимизацию графических файлов для Web можно осуществлять в графическом редакторе Adobe Photoshop. Простейшим способом оптимизации изображения является уменьшение его размера. Для этого выберем команду Изображение→Размер изображения и заполним диалоговое окно (рис. 2.1): в блоке размеры в пикселах изменим поля Ширина, Высота. Уменьшение размера приводит к значительному уменьшению объема файла.  Рисунок 2.1 Другой способ оптимизации заключается в уменьшении количества цветов в изображении. Это достигается подбором параметров при сохранении графических файлов в форматах GIF и JPEG. Для того чтобы сохранить графический файл в формате GIF (JPG) нужно: выбрать команду Файл → Сохранить копию; в появившемся окне выбрать место на диске Папка, ввести Имя файла, в выпадающем меню Формат выбрать тип файла GIF (JPG); и Сохранить. В результате появляется диалоговое окно (рис.2.2 а, б), в котором можно изменить параметры изображения и, если включен Просмотр, то увидеть, как изменилось изображение.   а) б) Рисунок 2.2 Начиная с Adobe Photoshop 5.5 предусмотрен специальный пункт меню предназначенный для сохранения графики для Web - Файл → Сохранить для Web. При его выборе открывается диалоговое окно (рис.2.3), в котором можно просматривать до 4 вариантов изображения одновременно, изменять параметры каждого варианта и сохранить наиболее оптимальный вариант.  Рисунок 2.3 2.3 Создание фона для Web-страниц При создании Web-страницы используются следующие графические изображения: фоны, элементы управления (кнопки), надписи. Для создания любого из этих элементов в первую очередь необходимо создать новый графический файл. Для этого нужно выбрать команду Файл → Создать и заполнить диалоговое окно (рис.2.4): ввести размер - Ширина и Высота, выбрать режим - RGB, OK.  Рисунок 2.4 После завершения работы над графическим изображением необходимо сохранить полученный файл в формате GIF (JPG). При необходимости можно сделать копию созданного изображения с помощью команды Изображение → Дублировать → OK. Фоновое изображение повторяется в горизонтальном и вертикальном направлении до полного заполнения окна браузера. Для его создания необходимо создать графический файл небольшого размера и заполнить его каким-либо узором без резких границ по краям. Рисунок фона не должен быть слишком сложным и ярким, так как в этом случае возникнут трудности с восприятием текста. Пример 2.1 Создание текстурного фона:
Пример 2.2. Создание градиентного фона:
Задание 2.1 Создайте фон для Вашего Web-сайта. 2.4 Создание графических надписей Графические надписи создаются в Adobe Photoshop с помощью элемента панели инструментов Текст (горизонтальный и вертикальный). При активизации одного из этих элементов курсор превращается в метку вставки. Теперь для ввода текста нужно нажать левой кнопкой мыши в окне изображения и заполнить диалоговое окно (рис.2.5) (ввести текст, выбрать шрифт, размер, напечатать текст).  Рисунок 2.5 При создании, текст располагается в специальном текстовом слое, который можно перемещать, копировать, редактировать (нажатием левой кнопки мыши на текст), изменять эффектами слоя. В том случае, если необходимо применить элементы рисования или фильтры, то текстовый слой нужно преобразовать в обычный Слой → Растрировать → Текст, но при этом теряется возможность редактирования. Файлы форматов GIF и JPEG не поддерживают текстовый слой, поэтому после сохранения графической надписи в этих форматах изменение атрибутов текста невозможно. Пример 2.3 Создание текста:
Задание 2.2 Создайте графическую надпись для Вашего Web-сайта. 2.5 Создание элементов управления (кнопок) Для создания кнопок в Adobe Photoshop используют такие эффекты как "тень", "объем", "свечение". Для того, чтобы эти эффекты можно было применить необходимо работать со слоями. Пример 2.4 Создание прямоугольной (овальной) кнопки:
Файлы форматов GIF и JPEG не поддерживают слои, поэтому после сохранения в этих форматах отредактировать эффекты невозможно. Кнопки, которые создаются для организации пунктов меню, должны быть одинаковыми. Для этого графическое изображение готовой кнопки копируется нужное число раз и в каждую копию вносятся необходимые изменения. Задание 2.3 Создайте кнопки управления для Вашего Web-сайта. 3 Разработка Web-представлений средствами Microsoft FrontPage 3.1 Введение в Microsoft FrontPage MS FrontPage предоставляет стандартные возможности по созданию и редактированию Web-страниц. Кроме того, он позволяет просматривать Web-сайт в различных режимах и изменять его структуру, создавать новый Web-сайт с помощью мастеров и шаблонов, публиковать Web-сайт на сервере, устанавливать права доступа для отдельных пользователей либо группы пользователей. Запуск программы MS FrontPage: Пуск Программы Microsoft FrontPage или двойное нажатие левой клавиши мыши на ярлык Microsoft FrontPage на рабочем столе. Задание 3.1 Запустите MS FrontPage. 3.2 Мастера и шаблоны Для быстрого и удобного создания Web-сайта в FrontPage существуют мастера и шаблоны, которые позволяют автоматически создавать новые страницы с расширенными возможностями. В случае использования шаблонов новые сформатированные страницы образуются без вашего непосредственного участия. Создание же страницы с помощью мастера происходит в диалоговом режиме: мастер задает вопросы о создаваемой странице и строит ее на основании ваших ответов. Мастера и шаблоны находятся в главном меню ФайлНовыйСайт. При открытии данного меню появляется следующий список (рис. 3.1):  Рисунок 3.1 Сайт из одной страницы (одностраничный Web-сайт) - содержит только домашнюю страницу. Высший корпоративный мастер - предоставляет информацию о компании (роль деятельности, вид выпускаемой продукции, предоставляемые услуги), а также сведения о том, как связаться с ней и как наладить обратную связь. Личный сайт - содержит страницы с личной, профессиональной и контактной информацией. Мастер импорта сайта - создается новый Web-сайт с содержимым, которое импортируется с другого сайта. Мастер обсуждений в Веб - электронная доска объявлений, на которой одни пользователи оставляют вопросы, а другие — ответы на них. Пустой сайт - Web-сайт без страниц (вы можете импортировать их с другого Web-сайта. Сайт поддержки заказчика - содержит страницы и формы для поддержания полномасштабного диалога с клиентами. Сайт проекта - предоставляет сведения о проекте: график выполнения, информация о тех, кто работает над проектом, время завершения и т.д. Мастера и шаблоны очень удобны, но их использование приводит к созданию очень похожих друг на друга сайтов. 3.3 С чего начать создание сайта Создание нового сайта начнем с одностраничного Web-сайта. Для этого выберите Сайт из одной страницы. В поле Указать место нового сайта введите URL-адрес Web-узла в виде http://имя_cepвepa/Web, если Вы хотите разместить сайт на сервере или, как в нашем случае, в виде C:/имя директории/Web и щелкните на кнопке ОК. Задание 3.2 Создайте одностраничный Web-сайт в директории Web на диске с в папке, название которой совпадает с вашей фамилией.
В режиме просмотра Гиперссылки можно проверить правильность созданных вами ссылок, или, другими словами, их целостность. Задания (режим просмотра задач) предназначен для управления задачами Web-сайта (добавления, удаления, выполнения, установления приоритета выполнения, а также отслеживания состояния задач). Обратите внимание, что в левой панели (Список файлов), показывается наш Web-сайт с уже созданными файлом index.htm (домашняя страничка – она всегда загружается первой), папками image (где будут храниться картинки) и private (она не доступна для просмотра в броузере и в нее можно поместить файлы, которые не должны быть доступны клиентам Вашего сайта). Если нет списка папок и файлов, то выполнить команду ОбзорСписок папок. 3.5 Создание структуры Web-сайта Структура Web-сайта создается в режиме Навигация. Щелкните правой кнопкой на пиктограмме домашней страницы и в контекстном меню выберите команду Новая страница, чтобы создать новую пустую страницу. Пиктограмма новой страницы разместится под пиктограммой домашней страницы и между ними установлена связь (они соединены вертикальной линией). Это означает, что новая страница является дочерней по отношению к домашней странице. Теперь давайте создадим ту структуру сайта, которую спроектировали ранее. Если мы хотим создать страничку более низкого уровня, то необходимо щелкнуть правой кнопкой на страничку выше, выбрать в контекстном меню Новая страница (рис. 3.3). Как только создается новая страница, ее следует тут же переименовать. Щелкните дважды на пиктограмме страницы (промежуток между щелчками должен быть таким, чтобы система не интерпретировала эти два нажатия как двойной щелчок) или в контекстном меню выберите пункт Переименовать. Имя должно быть набрано только латиницей и только маленькими буквами.  Рисунок 3.3 Так же можно изменять связи между страницами. Для этого выберете любую страницу самого нижнего уровня и, удерживая кнопку мыши, перетяните ее на одну ступеньку выше. Вы увидите, что связи изменятся. Верните страницу на прежнее место. Внимание! Все это делается только в режиме просмотра Навигация. Если у вас есть страницы третьего уровня и ниже, то лучше всего эти страницы поместить в отдельные папки, у которых имена будут такие же, как у файлов, с которых будут организованы ссылки на данные страницы. В нашем случае создадим папку PROBA. Для этого перейдем в режим просмотра Папки. На левой панели Список файлов в любом месте нужно щелкнуть правой кнопкой мыши и в появившемся контекстном меню выбрать опцию Новая папка. Созданную папку переименовываем в PROBA. Затем перейдем обратно в режим просмотра Навигация и перенесем файлы нижних уровней одной из страниц в созданную папку. Затем переименуем папку. Присвоим ей имя родительской страницы. Родительской называется страница, которая связана с другой страницей и расположена выше. На этом создание структуры Web-сайта закончено. Задание 3.3 Создайте структуру вашего Web-сайта и дайте названия файлам страниц. 3.6 Общие области Создавайте страницы сайта на основе одного макета. Макет всего сайта создается с помощью общих областей. Их размещают на верхнем, нижнем, левом и (реже) правом краях страницы. Они называются общими, потому что по умолчанию отображаются на всех страницах Web-сайта.Общие области часто включают навигационные панели. Обычно:
Примечание. Общие области редко размещают в правой части страницы Web-сайта, поскольку в этом случае пользователи могут их не увидеть. Создание общих областей. Активизируйте команду Общие границы меню Формат. Откроется окно Совместные границы (рис. 3.4). Установим в нем нужные опции. Также можно вызвать это окно с помощью контекстного меню Общие границы.  Рисунок 3.4 |
Похожие:
 | Учебное пособие С 59 Общая теория социальной коммуникации: Учебное пособие. — Спб.: Изд-во Михайлова В. А., 2002 г. — 461 с | | Учебное пособие для преподавателей Заповедное дело: Пособие для преподавателей общеобразовательной школы -тамбов; ООО «Издательство Юлис», 2011. 00с |
| Учебно-методическое пособие Тамбов 2002 г. I. Ббк 32. 81 II. Ав ... | | Маленкова Л. И. М18 Теория и методика воспитания. Учебное пособие М18 Теория и методика воспитания. Учебное пособие. — М.: Педагогическое общество России, 2002. — 480 с. Isbn 5-93134-169-2 |
| 1. Проблема «к-гия» Антропология: Хрестоматия. Учебное пособие / Авторы-составители: канд. Биол наук, доц. Л. Б. Рыбалов, канд. Биол наук, доц. Т. Е.... | | Прикладная математика Загузов И. С.,Головинский В. Н., Федечев А. Ф. и др. Введение в специальность (Механика). Часть II. Механика деформируемого твердого... |
| Литература для подготовки к коллоквиуму Антропология: Хрестоматия. Учебное пособие / Авторы-составители: канд. Биол наук, доц. Л. Б. Рыбалов, канд. Биол наук, доц. Т. Е.... | | Бреус Е. В. Основы теории и практики перевода с русского языка на... Основы теории и практики перевода с русского языка на английский: Учебное пособие. 2-е изд., испр и доп. — М.: Изд-во урао, 2000.... |
| Основы педагогического мастерства Учебное пособие Учебное пособие к п н. Якушевой С. Д. предназначено для преподавателей и студентов (обучающихся по педагогическим специальностям... | | Учебное пособие для студентов высших учебных заведений, обучающихся... Г46 Гигиена труда : учебное пособие / авт сост. Л. В. Козачук. — Балашов : Изд-во «Николаев», 2005. — 60 с |
| Учебное пособие Издательство ТулГУ Бродовская, Е. В. Переговоры: стратегии, тактики, техники: Учебное пособие [Текст] / Е. В. Бродовская, А. А. Лаврикова. – Тула: Изд-во... | | Международный опыт социальной работы нижний новгород 2002 М петрова И. Э., Сизова И. Л. Международный опыт социальной работы: Учебное пособие / Нижний Новгород, 2002. – 211 с |
 | Учебное пособие по дисциплине ен. 01 Математика составлено в соответствии... Учебное пособие предназначено студентам очной формы обучения. Данное пособие методические указания по выполнению самостоятельной... | | Горелов А. А. Концепции современного естествознания: Учебное пособие для вузов / А. А. Концепции современного естествознания: Учебное пособие для вузов / А. А. Горелов. – М.: Владос, 2002. – 511 с.: ил |
| Психология Учебное пособие Учебное пособие предназначено для студентов заочного отделения и обучающихся в сокращенные сроки | | Учебное пособие М.: Руссобит-М, 2001. 1 Cd-rom математика. 5 класс.... |
