Учебное пособие Тамбов 2002 г. Авторы составители: Кузьмина Н. В, Инькова Н. А., Зайцева Е. А., Толстых С. Г. Основы работы в Интернет: Учебное пособие. Ч тамбов: Изд-во тгту, 2002. с. 40

Скачать 0.55 Mb.

Название	Учебное пособие Тамбов 2002 г. Авторы составители: Кузьмина Н. В, Инькова Н. А., Зайцева Е. А., Толстых С. Г. Основы работы в Интернет: Учебное пособие. Ч тамбов: Изд-во тгту, 2002. с. 40
страница	1/4
Дата публикации	17.12.2014
Размер	0.55 Mb.
Тип	Учебное пособие

100-bal.ru > Информатика > Учебное пособие

1 2 3 4

Тамбовский региональный
центр Федерации
Интернет-Образования

Создание Web-сайтов

Учебное пособие

Тамбов

2002 г.
Авторы составители: Кузьмина Н.В, Инькова Н.А., Зайцева Е.А., Толстых С.Г.

Основы работы в Интернет: Учебное пособие. Ч.5. Тамбов: Изд-во ТГТУ, 2002. с. 40

Учебное пособие «Создание Web-сайтов» предназначено для слушателей курсов повышения квалификации на базе Тамбовского РЦ ФИО по программе «Интернет-технологии для учителя предметника.

СОДЕРЖАНИЕ

Содержание ………………………………………………………………………..

Введение ……………………………………………………………………………

1 Введение в технологию создания Web-сайтов …….………………………...

1.1 Понятие Web-сайта ………………….………………………………………….

1.2 Классификация Web-сайтов ….………………………………………………..

1.3 Этапы разработки Web-сайта ….………………………………………………

1.4 Навигационная схема Web-сайта .……………………………………………..

1.5 Обзор инструментальных средств .……………………………………………
2 Подготовка изображений для размещения в WWW .………………………

2.1 Форматы графических изображений ………………….………………………

2.2 Подбор и оптимизация графического изображения ……….………….……..

2.3 Создание фона для Web-страниц …….………………………………………..

2.4 Создание графических надписей …….………………………………………..

2.5 Создание элементов управления (кнопок) …….……………………………...
3 Разработка Web-представлений средствами Microsoft FrontPage ….…….

3.1 Введение в Microsoft FrontPage ………….…………………………………….

3.2 Мастера и шаблоны ……………………………….……………………………

3.3 С чего начать создание сайта …….……………………………………………

3.4 Режимы просмотра ……………………….…………………………………….

3.5 Создание структуры Web-сайта ………….……………………………………

3.6. Общие области …………………………………………………………………

3.7 Свойства страницы …………………………….……………………………….

3.8 Проектирование и создание таблицы ……….………………………………...

3.9 Изображения на Web-странице …………….………………………………….

3.10 Размещение текста на Web-странице ……….……………………………….

3.11 Просмотр Web-страницы в браузере …….…………………………………..

3.12 Общие представления о языке HTML …….…………………………………

3.13 Java-аплеты ……….……………………………………………………………

3.14 Работа с гиперссылками ……………………………………………………....

3.15 Front Page – компоненты ……………………………………………………..

3.15.1 Навигационные кнопки …….……………………………………………….

3.15.2 Бегущая строка ……………….……………………………………………...

3.16 Создание эффектов перелистывания страниц ….…………………………...

3.17 Добавление анимационных эффектов с использованием Dynamic HTML ..

3.18 Вставка горизонтальной строки ……….……………………………………..

3.19 Назначение тем Web-сайтам и страницам ….……………………………….

3.20 Фреймы ……………….………………………………………………………..

Глоссарий …………………………………………………………………………..

Литература …………………………………………………………………………
Приложение ………………………………………………………………………..

3
4
5

5

5

6

10

12
13

13

13

16

17

18
19

19

19

20

20

21

22

23

24

28

30

31

31

32

32

34

34

35

35

36

36

36

37
38
39
40

Введение
Влияние глобальной компьютерной сети Интернет на современный мир не имеет исторических аналогов. Его сегодняшний день – это начало эпохи электронного проникновения во все сферы человеческой жизни, это нечто большее, чем просто маркетинговая кампания, это основа новой философии и новой деловой стратегии.

Интернет и WWW прочно вошли в нашу жизнь, и нам уже трудно представить свою деятельность без них. WWW – это огромный набор гипертекстовых документов, которые благодаря Интернет доступны в любой точке мира.

Создание Web- сайтов является одной из важнейших технологий разработки ресурсов Интернет. Хороший сайт, вбирая в себя всю полезную информацию, является лучшей визитной карточкой и коммерческой фирмы и образовательного учреждения, работая на них в любое время суток.

В настоящее время во всемирной паутине размещено несколько миллионов Web-сайтов и их число постоянно растет. Вы можете не только просмотреть любой из них и извлечь полезную для себя информацию, но и принять активное участие в их создании.

Существует множество средств для создания Web-сайтов, но лишь некоторые из них способны предоставить разработчикам инструменты для решения подавляющего большинства стоящих перед ним задач. К этим немногим средствам относится FrontPage, которому посвящено учебное пособие, предлагаемое вашему вниманию.

Учебное пособие «Создание Web-сайтов» состоит из трех взаимосвязанных разделов.

Раздел 1 «Введение в технологию создания Web-сайтов» знакомит с основными технологическими этапами проектирования и реализации сайтов, компоновкой элементов страниц, а также с инструментальными средствами, используемыми при этом.

Раздел 2 «Подготовка изображений для размещения в WWW» посвящен изучению методов сохранения растровых изображений для дальнейшей публикации на Web-сайте.

Раздел 3 «Разработка Web-представлений средствами Microsoft FrontPage» посвящен изучению основных методов и приемов создания Web-сайтов. Раздел знакомит слушателей с принципами разработки структуры Web-сайта, интерфейса навигации по сайту.

1 Введение в технологию создания Web-сайтов
1.1 Понятие Web-сайта

Информация, доступная пользователям Internet, располагается на компьютерах (Web-серверах), на которых установлено специальное программное обеспечение. Значительная часть этой информации организованна в виде Web-сайтов. Каждый из них имеет свое имя (адрес) в Internet. Web-сайт - это информация, представленная в определенном виде, которая располагается на Web-сервере и имеет свое имя (адрес). Для просмотра Web-сайтов на компьютере пользователя используются специальные программы, которые называются браузерами. Наиболее распространенными браузерами в настоящее время являются Internet Explorer и Netscape Navigator. В зависимости от того, какое имя (адрес) сайта мы зададим в строке "Адрес", браузер будет загружать в свое окно соответствующую информацию.

Web-сайт состоит из связанных между собой Web-страниц. Web-страница представляет собой текстовый файл с расширением *.htm, который содержит текстовую информацию и специальные команды - HTML-коды, определяющие в каком виде эта информация будет отображаться в окне браузера. Вся графическая, аудио- и видео информация непосредственно в Web-страницу не входит и представляет собой отдельные файлы с расширениями *.gif, *.jpg (графика), *.mid, *.mp3 (звук), *.avi (видео). В HTML-коде страницы содержатся только указания на такие файлы (рис. 1.1).

WEB-сайт

page1.htm page2.htm page3.htm

Текст + Текст + Текст +

HTML-код HTML-код . . . HTML-код

Графика Аудио Видео Графика Аудио Видео Графика Аудио Видео
Рисунок 1.1
Каждая страница Web-сайта также имеет свой Internet адрес, который состоит из адреса сайта и имени файла, соответствующего данной странице.

Таким образом, Web-сайт - это информационный ресурс, состоящий из связанных между собой гипертекстовых документов (Web-страниц), размещенный на Web-сервере и имеющий индивидуальный адрес.

Вопрос: Что нужно для того, чтобы посмотреть какой-либо Web-сайт?

Ответ: посмотреть Web-сайт может любой человек, имеющий компьютер, подключенный к Internet, Web-браузер и адрес сайта.
1.2 Классификация Web-сайтов

В настоящее время во всемирной паутине размещено несколько миллионов Web-сайтов и их число постоянно растет.

Это личные страницы, содержащие информацию об авторе, его интересах. Их создают для того, чтобы обрести друзей по интересам, расширить свой кругозор, свой мир.

Информационные сайты. К ним относятся сайты учебных заведений, сообществ по интересам, фирм и др.:

Сайты учебных заведений. К наиболее известным относится Web-сайт “Школьный сектор” (http://www.school-sector.relarn.ru), созданный в 1998 г. Его создание способствовало развитию активного сегмента информационной образовательной среды для учителей-предметников из разных городов. Здесь еженедельно размещаются результаты проектной учебной работы школьников (в том числе, web-странички разного типа, созданные ими), размышления учителей и координаторов сетевой работы по поводу сетевой деятельности в школе, интеграции ее к учебной программе, выступления специалистов об образовательной деятельности школ в Сети. Здесь же представлена информация о семинарах, конференциях, новых web-сайтах, педагогических изданиях и медиасредствах, которые могут помочь учителям-предметникам в их учебной деятельности и многое другое.

Сайт “Российское школьное образование” (http://www.school.ru) - рассказывает о возможностях школ по подключению к Сети и бесплатному размещению школьных web-страниц, о текущих сетевых учебных проектах, олимпиадах и конкурсах.

Нужным и полезным информационным ресурсом для каждого учебного заведения является официальный сайт Минобразования РФ (http://www.informika.ru), который содержит большое количество документов и справочных материалов, информацию о текущих и будущих образовательных проектах и др.

Сайты дистанционного обучения и консультирования. На этих сайтах размещены обучающие программы и тесты, доступные в режиме on-line для студентов и школьников.

Постепенно входит в нашу жизнь электронная коммерция. В Web встречаются виртуальные магазины, которые позволяют делать покупки, сидя за мониторами своих компьютеров.

Сейчас в Сети размещено также большое количество информационно-развлекательных сайтов.
1.3 Этапы разработки Web-сайта

Главными задачами при разработке любого Web-сайта являются четкая организация структуры сайта и определение его информационного наполнения. Другими словами, на первом этапе необходимо создать информационную модель Web-сайта.

Выделяют следующие этапы разработки Web-сайта: планирование, реализация, тестирование, публикация, рекламирование, сопровождение.

Планирование является первым и, вероятно, наиболее важным этапом создания хорошего Web-сайта. На стадии планирования определяется следующее:

цели создания Web-сайта (Зачем? Какие задачи он должен выполнять и на какую аудиторию он рассчитан?);
характер содержимого;
структура (От того, как организована подача материала на Web-сайте, зависит “путь”, который должен пройти пользователь в поисках нужной ему информации. Этих “путей” может быть несколько, но каждый из них должен быть логически обоснованным. Всегда должна быть возможность вернуться в исходную точку за один шаг, в частности, каждая страница должна иметь ссылку на домашнюю страницу Web-сайта).
особенности оформления (определяется структура каждой страницы и разрабатывается графика).

Любую страницу можно оценить по трем параметрам: контенту, внешнему виду и навигации. Одно должно дополнять другое, и ни в коем случае не подавлять. Если Вы публикуете свой труд, рассчитываемый на долгое вдумчивое чтение, тогда позаботьтесь о читабельности, постарайтесь исключить отвлекающие динамические эффекты, подберите правильное, не утомляющее цветовое сочетание фона и текста, постарайтесь задать стиль, соответственно содержанию. И наоборот: сократите текстовые блоки до минимума, если Вы создаете сайт, дающий посетителю, прежде всего визуальную и другую мультимедийную информацию, подключайте всю Вашу фантазию и доступные средства реализации.

Запомните. Только сайт, сочетающий в себе хороший дизайн, информационную насыщенность и четкую структуру, может претендовать на доверие пользователей.

При создании достаточно больших документов надо помнить о том, что не все из посетителей имеют высокоскоростной доступ в Internet. У большинства пользователей модемный коннект, где скорость передачи данных 2-3 kB в секунду не считается плохой. Сосчитайте суммарный "вес" Вашего документа и всех размещенных в нем изображений, а также подгружаемых звуков и оцените, как долго он будет грузиться. Большинство потенциальных посетителей прервут загрузку страницы из соображений экономии средств, если она будет грузиться дольше 30-40 секунд.

Как же добиться максимально полного размещения необходимой информации при минимальном времени загрузки страницы? Оптимальным решением в таком случае будет - разбить документ по разделам на отдельные страницы, исполнить их в одном и том же стиле, с применением одинакового шрифта, кнопок, цвета заголовков и организовать навигацию между ними при помощи ссылок. Это позволит Вам разместить гораздо больше графического материала, чем раньше и существенно облегчит посетителю поиск именно той информации, какая его интересует.

Реализация

Это и есть работа по созданию сайта. На этом этапе проводится подготовка текстового и графического материала (печать, сканирование). Материал разбивается по файлам в соответствии со структурой. Организуются ссылки между файлами сайта.

Рекомендуется создать шаблон-заготовку страницы с основными структурными областями и стилевым оформлением и использовать ее для создания всех страниц узла. Меняйте в каждой новой странице только содержимое и адресацию ссылок, такая организация работы сократит время, потраченное на каждую из них. Помните, что посетитель может попасть прямо из поисковой системы на любую из ваших страниц – и важно в этом случае показать ему, что она является частью целого сайта, дать ему возможность перейти по ссылке на главную страницу и просмотреть остальные разделы.

При создании Web-страниц необходимо учитывать, что разработанный Вами Web-сайт может выглядеть на компьютерах разных пользователей по-разному. Это зависит от многих параметров – типа браузера клиента, установок операционной системы, аппаратных ресурсов компьютера и т.п.

Тестирование

Завершив работу по размещению страниц на Web-сайте, необходимо выполнитьтестирование. Оно состоит из двух этапов: тестирование на работоспособность и тестирование на удобство пользования интерфейсом.

На этапе тестирования на работоспособность проверяют, как функционирует Web-сайт, используя те же условия, при которых с ним будет работать пользователь. Поработайте с Web-сайтом в различных браузерах и посмотрите, как выглядит Ваш сайт в каждом из них. Постарайтесь оценить время загрузки страниц, что очень важно.

Для тестирования на удобство пользования интерфейсом крупные компании приглашают специальные группы людей. Вам можно пригласить своих друзей и, не давая им никаких инструкций, посмотреть, как они будут пользоваться вашим Web-сайтом. Обратите внимание на то, как они перемещаются по Web-сайту. Где возникают паузы? Когда пользователи испытывают трудности? И при этом не подсказывайте им, не давайте никаких указаний! Такие наблюдения дадут вам много ценной информации. А если пользователи будут выполнять неправильные действия, то это уже недостаток вашей разработки и, значит, над Web-сайтом следует еще поработать. Выслушайте пользователей, может, они подскажут вам некоторые решения возникших проблем.

Публикация

Готовый Web-сайт необходимо опубликовать на Web-сервере, чтобы он был доступен через Internet. Если ваш сайт создан посредством редактора FrontPage, то на сервере должны быть инсталлированы серверные расширения FrontPage, что обеспечит полную поддержку доступных в FrontPage компонентов, которые были помещены на странице в процессе создания сайта.

Если у вас нет собственного сервера, то в Сети можно найти огромное количество ссылок на free web pages, где некоторые провайдеры предоставляют своим клиентам бесплатное место под страницу.

	http://narod.ru		http://www.az.ru
	http://chat.ru		http://www.halyava.ru
	http://www.newmail.ru		http://i-connect.ru
	http://www.agava.ru		http://www.lgg.ru
	http://www.fortunecity.com		http://www.netcity.ru
	http://www.freeserwers.com		http://www.hotmail.ru
	http://www.geocities.com		http://www.ussr.to
	http://www.spree.com		http://www.viaduk.net
	http://www.tripod.com		http://home.vibor.ru
	http://www.xoom.com		http://windoms.sitek.net
	http://www.bizland.com		http://www.intergrad.com
	http://www.fsn.net		http://hosting.agava.ru
	http://www.crosswinds.net		http://www.dp.ru
	http://www.virtualave.net		http://www.artnet.ru/generator
	http://www.az.ru		http://www.zk.ru
	http://www.tam.ru		http://www.sunday.ru
	http://www.shortway.to		http://home.c99.ru
	http://webservis.ru

На сервере http://www.44.ru/cgi-bin/start.pl вы получите возможность устанавливать свои собственные скрипты и доступ к ним по ftp.

Однако для того чтобы выбрать окончательно сервер для размещения своего сайта необходимо обратить внимание на следующее:

отсутствие дискриминации по контенту. Некоторые сервера ставят условия, касающиеся содержимого Вашего сайта;
надежность Web-сервера. Посетите их Web-узел в пиковые часы и убедитесь, что проблем с доступом не возникает;
отсутствие скрытых завуалированных видов оплаты места в виде всевозможных доплат за различные услуги и рекламы;
техническая поддержка. Предоставят ли Вам возможность общения с администратором сервера, есть ли возможность доступа по протоколу FTP ( File Transfer Protocol ) , и т.д.;
объем выделяемого Вам пространства. Обычно это 5-10 мегабайт;
дополнительные возможности. Не будет лишним, если сервер предложит Вам: бесплатную почту, счетчик посещений, гостевую книгу, чат, различные CGI-скрипты и т.д.;
какое программное обеспечение установлено на сервере. Например, UNIX-сервера чувствительны к регистру букв в названиях файлов, т.е. если у Вас в исходном коде будет стоять ссылка на файл background.gif, а файл будет назван background.Gif или Background.gif, то он не будет визуализирован. Однако у таких серверов более высокая степень защищенности от взломов.
есть ли на сервере автоматическая перекодировка содержимого страниц, в соответствии с пользовательскими настройками браузера. Если таковой нет, то у Вас могут возникнуть проблемы с отображением русских кодировок.

Рекламирование сайта. Существует множество приемов рекламирования сайта: размещение информации о нем на поисковом Web-сайте, организация взаимных ссылок с другими сайтами и т.д.

Как привлечь пользователя? Красиво оформленные страницы Web-сайта – это только половина дела. В первую очередь страницы должны быть содержательными.

Основное требование к содержимому Web-сайта – полнота и достоверность. Информация должна быть представлена таким образом, чтобы пользователь, однажды посетивший Web-сайт, еще ни раз обратился к нему.

Акцентируйте внимание пользователя на своей личности или организации, в которой вы работаете, например, создав отдельную страницу, посвященную этой теме. Разместите на домашней странице свою фотографию или логотип организации.

Сопровождение сайта

Содержимое Web-сайта может подвергаться неоднократным изменениям. Важно, чтобы предоставляемая на Web-сайте информация всегда была актуальной, поэтому как можно чаще обновляйте информацию на своем Web-сайте, по возможности расширяйте материал, улучшайте дизайн.

Обязательное правило. Web-сайт должен обновляться не реже одного раза в месяц. В противном случае вы потеряете не только потенциальных, но и уже состоявшихся посетителей.

Рекомендуется создать на своем компьютере копию Web-сайта, вносить в нее изменения и новую версию передавать для размещения на сервере в завершенном виде.
1.4 Навигационная схема Web-сайта

Web-сайт состоит из связанных между собой гипертекстовых документов.

Гипертекст – это способ хранения и манипулирования информации, позволяющий устанавливать связи между любыми “информационными единицами”. Связь между информационными единицами осуществляется по гиперссылкам. Гиперссылка - это выделенный фрагмент текста, с помощью которого осуществляется переход от одного документа к другому. Обычно гиперссылки выделяют синим цветом и подчеркиванием.

Навигационная схема Web-сайта зависит от его структуры и определяет то, как пользователь будет по нему перемещаться и получать доступ к информации, которую Вы представляете.

Запомните. Простота и удобство навигации является одним из важных факторов, определяющих посещаемость Web-сайта. Пользователи должны быстро и легко перейти на любую страницу Web-сайта, в том числе на начальную.

Существует несколько видов структурирования информационного материала на Web-сайте:

Линейная структура

Материал весь располагается последовательно (рис. 1.2).

Рисунок 1.2
Иерархическая структура

Чаще всего структура Web-сайта представляет собой иерархию. При этом сначала создают категории высшего уровня, а затем материал в логическом порядке размещают в категории, которые находятся ниже. Иерархические структуры бывают двух видов: узкая глубокая и широкая неглубокая.

Узкая глубокая иерархия (рис. 1.3) характеризуется тем, что на верхнем уровне она имеет мало категорий. Для получения нужной информации пользователь вынужден переходить на несколько уровней вниз.

Страница А

Страница N

Рисунок 1.3
Из приведенного примера видно, что для перехода к странице N пользователь должен произвести 4 щелчков мышью.