Logo GenDocs.ru

Поиск по сайту:  


Загрузка...

Ответы по информатике - файл 1.doc


Ответы по информатике
скачать (1803 kb.)

Доступные файлы (1):

1.doc1803kb.16.11.2011 09:26скачать

содержание
Загрузка...

1.doc

1   2   3   4   5   6   7   8
Реклама MarketGid:
Загрузка...
^

75. Мультимедиа технологии в Интернете


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

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

Мультимедиа (лат. ^ Multum + Medium) — одновременное использование различных форм представления информации и ее обработки в едином объекте-контейнере. Например, в одном объекте-контейнере (англ. container) может содержаться текстовая, аудиальная, графическая и видео информация, а также, возможно, способ интерактивного взаимодействия с ней. Термин мультимедиа также, зачастую, используется для обозначения носителей информации, позволяющих хранить значительные объемы данных и обеспечивать достаточно быстрый доступ к ним (первыми носителями такого типа были CD - compact disk). В таком случае термин мультимедиа означает, что компьютер может использовать такие носители и предоставлять информацию пользователю через все возможные виды данных, такие как аудио, видео, анимация, изображение и другие в дополнение к традиционным способам предоставления информации, таким как текст.

Мультимедиа может быть грубо классифицирована как линейная и нелинейная. Аналогом линейного способа представления может являться кино. Человек, просматривающий данный документ никаким образом не может повлиять на его вывод. Нелинейный способ представления информации позволяет человеку участвовать в выводе информации, взаимодействуя каким-либо образом со средством отображения мультимедийных данных. Участие человека в данном процессе также называется «интерактивностью». Такой способ взаимодействия человека и компьютера наиболее полным образом представлен в категориях компьютерных игр. Нелинейный способ представления мультимедийных данных иногда называется «гипермедиа».

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

^ Мультимедийные презентации могут быть проведены человеком на сцене, показаны через проектор или же на другом локальном устройстве воспроизведения. Широковещательная трансляция презентации может быть как «живой», так и предварительно записанной. Широковещательная трансляция или запись могут быть основаны на аналоговых или же электронных технологиях хранения и передачи информации. Стоит отметить, что мультимедиа в онлайне может быть либо скачана на компьютер пользователя и воспроизведена каким-либо образом, либо воспроизведена напрямую из интернета при помощи технологий потоковой передачи данных. Мультимедиа, воспроизводимая при помощи технологий потоковой передачи данных может быть как «живая», так и предоставляемая по требованию.

^ Мультимедийные игры — такие игры, в которых игрок взаимодействует с виртуальной средой, построенной компьютером. Состояние виртуальной среды передается игроку при помощи различных способов передачи информации (аудиальный, визуальный, тактильный). В настоящее время все игры на компьютере или игровой приставке относятся к мультимедийным играм. Стоит отметить, что в такой тип игр можно играть как в одиночу на локальном компьютере или приставке, так и с другими игроками через локальную или глобальную сети.

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

Лазерное шоу — «живое» мультимедиа представление

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

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

Теле-, видео- и большинство аудиоаппаратуры в отличие от компьютеров имеют дело с аналоговым сигналом. Поэтому возникли проблемы стыковки разнородной аппаратуры с компьютером и управления ими.

Были разработаны звуковые платы (Sound Blaster), платы мультимедиа, которые аппаратно реализуют алгоритм перевода аналогового сигнала в дискретный. К компакт-дискам было подсоединено постоянное запоминающее устройство (CD-ROM).

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

Многие операционные системы поддерживают технологию мультимедиа: Windows, начиная с версии 3.1, DOS 7.0, OS/2 и др. Операционная система Windows-95 включила аппаратные средства поддержки мультимедиа, что позволяет пользователям воспроизводить оцифрованное видео, аудио, анимационную графику, подключать различные музыкальные синтезаторы и инструменты. В Windows-95 разработана специальная версия файловой системы для поддержки высококачественного воспроизведения звука, видео и анимации. Файлы мультимедийной информацией хранятся на CD-ROM, жестком диске или на сетевом сервере. Оцифрованное видео обычно хранится в файлах с расширением AVI, аудиоинформация - в файлах с расширением WAV, аудио в форме интерфейса MIDI - в файлах с расширением MID. Для их поддержки разработана файловая подсистема, обеспечивающая передачу информации с CD-ROM с оптимальной скоростью, что существенно при воспроизведении аудио- и видеоинформации.

Даже из такого краткого перечисления возможностей технологии мультимедиа видно, что идет сближение рынка компьютеров, программного обеспечения, потребительских товаров и средств производства того и другого. Наблюдается тенденция развития мультимедиа-акселераторов. Мультимедиа-акселератор - программно-аппаратные средства, которые объединяют базовые возможности графических акселераторов с одной или несколькими мультимедийными функциями, требующими обычно установки в компьютер дополнительных устройств. К мультимедийным функциям относятся цифровая фильтрация и масштабирование видео, аппаратная цифровая сжатие-развертка видео, ускорение графических операций, связанных с трехмерной графикой (3D), поддержка «живого» видео на мониторе, наличие композитного видеовыхода, вывод ТV-сигнала (телевизионного) на монитор. Графический акселератор также представляет собой программно-аппаратные средства ускорения графических операций: перенос блока данных, закраска объекта, поддержка аппаратного курсора. Происходит развитие микросхемотехники с целью увеличения производительности электронных устройств и минимизации их геометрических размеров. Микросхемы, выполняющие функции компонентов звуковой платы, объединяются на одной микросхеме размером со спичечный коробок. И предела этому нет.

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


^ 76. Электронная коммерция в Интернете.

Электронная коммерция – это продажа услуг и товаров через Интернет. Сейчас, во время кризиса, многие предприниматели, которые занимались традиционным видом бизнеса, начинают переводить свой бизнес в Интернет.
Какие же преимущества открываются перед ними?
1. Рынок Интернета не имеет территориальных рамок, то есть увеличивается рынок сбыта.
2. Есть возможность заключения нескольких сделок в одно и тоже время.
3. Отпадает необходимость в содержании бизнес-офисов или магазинов. Достаточно небольшого складского помещения для хранения физического товара. Для цифрового товара необходимость даже в складском помещении отпадает.
4. Бизнес в Интернете работает круглосуточно и без выходных.
5. Бизнес в Интернете не требует большого количества сотрудников. Значит, можно сэкономить на оплате труда наемным сотрудникам.
6. Многое из вышеперечисленного снижает цену товара. Соответственно, можно больше продать по более низкой цене.
Какие же преимущества получает покупатель?
1.Экономия времени.
2. Огромный выбор.
3. Возможность найти цену и качество, которое соответствует вашим возможностям.
4. Возможность получить товар или услугу в цифровом виде за короткий промежуток времени.
5. Комфортные условия выбора товара или услуги.
Даже если остановится только на пункте экономии времени, то и это уже огромное преимущество. Сэкономленное время можно потратить на себя любимого.
Из-за того, что электронная коммерция во многом облегчает жизнь и предпринимателям, и покупателям, она просто переходит в ранг неизбежности. Электронную коммерцию лет через пять мы будем воспринимать так же обыденно, как теперь мобильную связь. Которая, как многие утверждали, у нас не приживется. А ведь прижилась…
Если у Вас есть хороший, качественный товар, то электронная коммерция – это то, что нужно. Быстрее создавайте свой магазин в Интернете, и товарооборот может удивить своим большим объемом. Конечно, без услуг специалистов по созданию интернет-магазина не обойтись, но зато один раз сделал – и он навеки принадлежит Вам.Для покупателей рекомендация. Сделайте вначале одну маленькую покупку, потом более существенную. А дальше уже начинаете привыкать и делаете регулярно и постоянно всевозможные покупки. И наслаждаетесь сэкономленным временем.

Определим виртуальную экономику как среду, особое экономическое пространство, в котором осуществляется электронная коммерция, электронный бизнес; это экономика, основанная на использовании интерактивных возможностей. Рассматриваемому пространству присущи специфические черты, отличающие виртуальную экономику от обычной, невиртуальной, оффлайновой экономики.
Структура виртуальной экономики формируется из отдельных сегментов, связанных между собой Сетью, поэтому иногда ее называют сетевой экономикой. Также ее называют новой экономикой, чтобы подчеркнуть отличие от «старой», традиционной экономики. Но прежде чем говорить о виртуальной экономике, необходимо уточнить что из себя представляют такие понятия, как «электронный бизнес» и «электронная коммерция».
Электронный бизнес – это деятельность компании, направленная на получение прибыли, которая основывается на цифровых технологиях и тех преимуществах, которые они предоставляют. Одной из первых этот термин в своей тематической рекламной компании применила компания IBM в 1997 году. В ее определении электронный бизнес – это «...безопасный, гибкий и комплексный подход к обеспечению потребителя дифференцированной потребительской ценностью посредством объединения систем и процессов, лежащих в основе важнейших функций бизнеса, с простотой и охватом, обеспечиваемыми интернет-технологиями». Что же тогда такое «электронная коммерция»? По своей сути электронная коммерция – это один из способов осуществления электронного бизнеса. Рассматривая проблемы электронной коммерции, следует обратить внимание на двоякое толкование самого термина. Иногда говоря об электронной коммерции имеют в виду исключительно коммерческую деятельность провайдеров интернет-услуг (ISP – Internet Service Providers), но гораздо чаше электронной коммерции дают более широкое толкование как совокупности всех возможных способов использования Сети в коммерческих целях, и мы будем далее использовать это общепринятое более широкое толкование понятия «электронной коммерции».
Чтобы оценить готовность страны к осуществлению электронной коммерции, выдвигается ряд критериев, сформированных на базе различных значимых показателей.
Так, например, аналитики из Economist Intelligence Unit и Pyramid Research (компании, входящие в группу британского журнала Economist) используют показатель e-readiness (показатель готовности к развитию электронной коммерции), сформированный с учетом более 70 индикаторов, среди которых:
– социальные факторы (степень развития законодательства, регулирующего электронные сделки, уровень образования населения);
– технологические факторы (количество пользователей интернета, количество телефонов на душу населения). Далее ранжируются страны по степени готовности включаться в информационные процессы (всего рассмотрено 60 стран).
Вывод, к которому приходят аналитики, заключается в том, что далеко не всегда на первые места выдвигаются самые крупные или самые богатые страны.
Рассмотрим определяющие показатели, воздействующие на развитие электронной коммерции в нашей стране. В Узбекистане ускоренные темпы данного направления. Принято множество регулирующих законов и подзаконных актов, которые имеют важное значение для развития отрасли в целом: законы «Об информатизации», «Об электронной цифровой подписи» (11 декабря 2003 года), «Об электронной коммерции» (29 апреля 2004 года), постановление Президента Республики Узбекистан от 30 мая 2002 года, «О мерах по дальнейшему развитию компьютеризации и внедрению информационно-коммуникационных технологий», а также много других законов и постановлений, в которых отмечены конкретные цели и задачи по ускоренному развитию электронной коммерции. Можно подчеркнуть, что в них отмечены совершенствование инфраструктуры телекоммуникаций, развитие национального сегмента Интернета и сети передачи данных, создание индустрии программных продуктов, совершенствование информационных ресурсов, подготовка кадров и постоянное повышение квалификации специалистов, развитие конкурентной среды в сфере ИКТ.
Второй важный фактор развития электронной коммерции – это технологическое и техническое вооружение для распространения, интеграции между участниками рынка. Так, например, крупнейший оператор телекоммуникаций Узбекистана – Акционерная компания «Узбектелеком» – за последние годы произвела кардинальную модернизацию телекоммуникационных сетей. Компании удалось внедрить новые услуги, а также коренным образом изменить подходы к формированию стратегических планов, сделав акцент на внедрении новых видов услуг по передаче данных, доступа к сети интернет и IP-телефонии.

^ 77. Web-сайты и Web страницы. Форматирование текста и размещение графики.

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

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

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

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

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

Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language – язык разметки гипертекста).

Гипертекст – это текст, в который встроены специальные коды, управляющие дополнительными элементами, такими как форматирование, иллюстрации, мультимедийные вставки и гиперссылки на другие документы.

Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу. Просмотр Web-страниц осуществляется с помощью программ, называемых Web-браузерами (от английского "browse" – осматривать, изучать). Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тэгами.

Основными достоинствами HTML-документов являются:

  • малый информационный объем;

  • возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.

Для создания Web-страниц используются как простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста, так и специальные редакторы Web-сайтов и Web-страниц, такие как Microsoft FrontPage, Netscape Composer, DreamWeaver, PSPAD и другие. В качестве текстового редактора в Windows можно использовать стандартное приложение Блокнот.

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

Пусть наш сайт кроме титульной страницы «Компьютер» будет содержать:

  • страницу «Программы», содержащую классификацию программного обеспечения;

  • страницу «Словарь», содержащую словарь компьютерных терминов;

  • страницу «Комплектующие» с ценами на устройства компьютера;

  • страницу «Анкета», содержащую анкету для посетителей сайта.

^ Создание структуры Web-страницы

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

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

HTML-код страницы помещается внутрь контейнера <HTML>…</HTML>. Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание.

Заголовок Web-страницы заключается в контейнер <HEAD>…</HEAD> и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения.

Название Web-страницы содержится в контейнере <TIТLE>…</TITLE> и отображается в строке заголовка браузера при просмотре страницы. Назовем нашу Web-страницу «Компьютер»:

  • <head>

  • <title>Компьютер</title>

  • </head>

Основное содержание страницы помещается в контейнер <BODY>…</BODY> и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и звуковые файлы и так далее. Поместим для начала на страницу текст «Все о компьютере»:

  • <body>

  • Все о компьютере

  • </body>

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

Все файлы Web-сайта сохраняйте в специальную папку.

Необходимо различать имя файла index.htm, то есть имя, под которым Web-страница хранится в файловой системе, и собственно имя Web-страницы «Компьютер», которая высвечивается в верхней строке окна браузера и в первую очередь анализируется поисковыми системами. Имя Web-страницы должно в максимальной степени соответствовать ее содержанию.

В окне приложения Блокнот ввести HTML-код Web-страницы. Сохранить файл под именем index.htm в папке сайта. Загрузить этот файл в окно браузера для просмотра.

  • <html>

  • <head>

  • <title>Компьютер</title>

  • </head>

  • <body>

  • Все о компьютере

  • </body>

  • </html>

Форматирование текста

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

Размер шрифта для имеющихся в тексте заголовков задается тэгами от <Н1> (самый крупный) до <Н6> (самый мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом:

  • <h1> Все о компьютере</h1>

Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. Так, заголовок по умолчанию выровнен по левому краю страницы, однако принято заголовок размещать по центру. Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN, которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN="right", а по центру – ALIGN="center":

  • <h1 align="center"> Bce о компьютере</h1>

С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE — размер шрифта (например, SIZE=4), атрибут COLOR — цвет шрифта (например, COLOR="blue").

Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и так далее), либо его шестнадцатеричным значением. Шестнадцатеричное представление цвета использует RGB-формат "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие — интенсивность зеленого (green) и две последние — интенсивность синего (blue) цветов. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная — FF. Легко догадаться, что синему цвету будет соответствовать значение "#0000FF".

Таким образом, задать синий цвет заголовка можно с помощью тэга FONT с атрибутом COLOR:

  • <font color="blue">

  • <h1 align="center">Bce о компьютере</h1>

  • </font>

Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга <HR>.

Разделение текста на абзацы производится с помощью контейнера <Р>…</Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания.

На титульной странице обычно размещается текст, кратко описывающий содержание сайта. Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:

  • <p align="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</p>

  • <p align="right">Tepминoлoгичecкий словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</p>

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

В окне приложения Блокнот в контейнер <BODY> вставить последовательность тэгов и просмотреть результат в браузере:

  • <font color="blue">

  • <h1 align="center">Bce о компьютере</h1>

  • </font>

  • <hr>

  • <p align="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</p>

  • <p align="right">Tepминoлoгичecкий словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</p>

^ Вставка изображений

На Web-страницы обычно помещают изображения, чтобы сделать их визуально более привлекательными. На Web-страницах могут размещаться графические файлы трех форматов — GIF, JPG и PNG. Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в один из вышеуказанных форматов с помощью графического редактора. Для этих целей можно использовать редактор Photo Editor, который входит в пакет Microsoft Office до версии 2000, Microsoft Office Picture Manager, Adobe PhotoShop и др.

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

Для вставки изображения используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла:

  • <img src="computer.gif">

Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла. Например:

  • <img src="c:\computer\computer.gif">

Если файл находится на удаленном сервере в Интернете, то должен быть указан URL-адрес этого файла. Например:

  • <img src="http: //www.server.ru/computer.gif ">

Храните рисунки в папке вашего Web-сайта.

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

Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:

  • <img src="computer.gif" alt="Компьютер">

Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга <IMG>, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).

Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:

  • <img src="computer.gif" alt="Компьютер" align="right">

В окне приложения Блокнот в контейнер <BODY> вставить перед абзацами текста тэг вставки изображения, просмотреть результат в браузере.

В тэге IMG с помощью атрибутов WIDTH (ширина) и HEIGHT (высота) можно указать размер выводимой картинки (в пикселях), с помощью тега BORDER указать рамку вокруг рисунка.

  • <img border="1" src="computer.gif" width="250" height="215" alt="Компьютер" align="right">

Для установки цвета фона страницы используется тэг BGCOLOR="цвет" (название или числовой шестиразрядный шестнадцатеричный код). Можно задать текстуру фона. Для этого создайте в программе Adobe Photoshop (или в другой) файл с текстурой, сохраните его в папке вашего Web-сайта и запишите HTML-код BACKGROUND="FILE_NAME". Используйте оба тэга для заполнения цвета фона. Рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывают цвет, совпадающий с основным тоном фонового рисунка.

  • <body background=”fon1.jpg” bgcolor=”#ffffcc”>

Цвет текста на Web-странице можно задать с помощью атрибута TEXT в тэге BODY:

  • <body background=”fon1.jpg” bgcolor=”#ffffcc” text=”#993300”>

^ 78. Гиперссылки и формы в Web-страницах. Инструментальные средства создания Web-страниц.

Гиперссылки на Web-страницах

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

Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимо, прежде всего, создать заготовки Web-страниц. Такие «пустые» страницы должны иметь заголовок, но могут пока не иметь содержания. Все создаваемые страницы необходимо сохранить в виде файлов в папке сайта.

Каждая страница будет содержать следующий HTML-код:

  • <html>

  • <head>

  • <title>Заголовок страницы</title>

  • </head>

  • <body>

  • <Текст страницы>

  • </body>

  • </html>

Создать пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохранить их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в каталоге сайта.

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

Адресная часть гиперссылки представляет собой URL-адрес документа, на который указывает ссылка. URL-адрес может быть абсолютным и относительным. Абсолютный URL-адрес документа полностью определяет компьютер, каталог и файл, в котором располагается документ.

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

С:/Web-сайт/filename.htm

Абсолютный адрес документа, находящегося на удаленном компьютере в Интернете, будет включать имя сервера Интернета, путь к файлу и имя файла, например:

http://www.host.ru/Web-сайт/filename.htm

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

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

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

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

Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами (&nbsp;):

  • <p align="center">

  • [Программы]&ndsp;[Словарь]&ndsp;

  • [Комплектующие]&ndsp;[Анкета]

  • </p>

Теперь для каждой гиперссылки определим адрес перехода. Для этого используется контейнер гиперссылки <A>…</A> с атрибутом HREF , значением которого является URL-адрес документа на локальном компьютере или в Интернете. Контейнер должен содержать указатель гиперссылки:

<a href="URL">Указатель гиперссылки</a>

Вставить в титульную страницу код, создающий панель навигации:

  • <p align="center">

  • [<a href="software.htm"> Программы</a>]&nbsp;

  • [<a href="glossary.htm">Словарь</a>]&nbsp;

  • [<a href="hardware.htm">Комплектующие</a>]&nbsp;

  • [<a href="anketa.htm">Анкета</a>]

  • </p>

Панель навигации на титульной странице создана, теперь активизация указателей гиперссылок будет приводить к переходу на другие страницы сайта.

Цветовые атрибуты ссылок задаются в тэге BODY: LINK="#RRGGBB" – цвет текста ссылки; ALINK="#RRGGBB" – цвет текста активной ссылки; VLINK="#RRGGBB" – цвет текста просмотренной ссылки.

<body background=”fon1.jpg” bgcolor=”#ffffcc” text=”#993300” link=”#00ff00” alink=”#ff0000” vlink=”#00ff00”>

Полезно на титульной странице сайта создать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить URL-адрес электронной почты и вставить ее в контейнер <ADDRESS>…</ADDRESS>, который задает стиль абзаца, принятый для указания адреса.

  • <address>

  • <a href=mailto:mailbox@provaider.ru> E-mail: mailbox@provaider.ru</a>

  • </address>

По щелчку мыши по ссылке на адрес электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке "Кому" будет указан заданный в ссылке адрес.

На всех страницах Web-сайта создайте гиперссылки для перехода на главную страницу сайта.

Списки на Web-страницах

Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:

  • нумерованные списки, когда элементы списка идентифицируются с помощью чисел;

  • маркированные списки (в HTML их принято называть ненумерованными), когда элементы списка идентифицируются с помощью специальных символов (маркеров);

  • списки определений позволяют перечни определений в так называемой словарной форме.

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

На странице "Программы" разместим информацию об основных типах программного обеспечения компьютера в форме вложенного списка.

Сначала создадим главный нумерованный список основных категорий программного обеспечения. Список располагается внутри контейнера <OL>…</OL>, а каждый элемент списка определяется тэгом <LI>..</LI<. С помощью атрибута TYPE тэга <OL> можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и др. Открыть в Блокноте файл software.htm, ввести заголовок «Программное обеспечение» и добавить следующий HTML-код, задающий список:

  • <ol>

  • <li>Системные программы</li>

  • <li>Прикладные программы</li>

  • <li>Системы программирования</li>

  • </ol>

Создадим теперь вложенный ненумерованный список для одного из элементов основного списка. Список располагается внутри контейнера <UL>…</UL>, а каждый элемент списка определяется также тэгом <LI>..</LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность).

Добавить HTML-код, задающий вложенный список для элемента <li>Прикладные программы:</li>

  • <ul type="square">

  • <li>текстовые редакторы;</li>

  • <li>графические редакторы;</li>

  • <li>электронные таблицы;</li>

  • <li>системы управления базами данных.</li>

  • </ul>

Страницу «Словарь» мы представим в виде словаря компьютерных терминов.

Для этого используем контейнер списка определений </DL>..</DL>. Внутри него текст оформляется в виде термина, который выделяется непарным тэгом <DT>, и определения, которое следует за тэгом <DD>.

Открыть в Блокноте файл glossary.htm, ввести заголовок «Компьютерные термины» и добавить следующий HTML-код, задающий список определений:

  • <dl>

  • <dt>Процессор

  • <dd>Центральное устройство компьютера, производящее обработку информации в двоичном коде.

  • <dt>Оперативная память

  • <dd>Устройство, в котором хранятся программы и данные.

  • </dl>

Формы на Web-страницах

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

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

Вся форма заключается в контейнер <FORM>…</FORM>. В первую очередь выясним имя посетителя нашего сайта и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта.

^ Текстовые поля. Для получения этих данных разместим на форме два однострочных текстовых поля для ввода информации. Текстовые поля создаются с помощью тэга <INPUT> со значением атрибута TYPE="text". Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах.

Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки <BR>.

Открыть в Блокноте файл anketa.htm и добавить HTML-код, создающий текстовые поля для ввода данных. Просмотреть страницу в браузере:

  • <form>

  • Пожалуйста, введите ваше имя:<br>

  • <input type="text" name="name" size="30"><br>

  • E-mail:<br>

  • <input type="text" name="e-mail" size="30"><br>

  • </form>

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

Для этого необходимо создать группу переключателей (радиокнопок). Создается такая группа с помощью тэга <INPUT> со значением атрибута TYPE="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".

Еще одним обязательным атрибутом является VALUE, которому присвоим значения "schoolboy", "student" и "teacher". Значение атрибута VALUE должно быть уникальным для каждой радиокнопки, так как при ее выборе именно они передаются серверу.

Атрибут CHECKED, который задает выбор кнопки по умолчанию, в данном случае не используется.

Добавить HTML-код, создающий группу переключателей для выбора одного варианта. Просмотреть страницу в браузере:

  • Укажите, к какой группе пользователей вы себя относите<br>

  • <input type="radio" name="group" value="schoolboy">учащийся<br>

  • <input type="radio" name="group" value="student">студент<br>

  • <input type="radio" name="group" value="teacher">учитель<br>

Флажки. Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками. Флажки создаются в тэге <INPUT> со значением атрибута TYPE="checkbox".

Флажки, объединенные в группу, могут иметь одинаковые значения атрибута NAME. Например, NAME="group".

Еще одним обязательным атрибутом является VALUE, которому присвоим значения "www", "e-mail" и "ftp". Значение атрибута VALUE должно быть уникальным для каждого флажка, так как при его выборе именно они передаются серверу.

Атрибут CHECKED, который задает выбор кнопки по умолчанию, в данном случае не используется.

Добавить HTML-код, создающий флажки для выбора нескольких вариантов. Просмотреть страницу в браузере:

  • Какие из сервисов Интернета Вы используете наиболее часто:<br>

  • <input type="checkbox" name="group" value="www">WWW<br>

  • <input type="checkbox" name="group" value="e-mail">e-mail<br>

  • <input type="checkbox" name="group" value="ftp">FTP<br>

Поля списков. Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант. Для реализации такого списка используется контейнер <SELECT>…</SELECT>, в котором каждый элемент списка определяется тэгом <OPTION>. Выбираемый по умолчанию элемент задается с помощью атрибута SELECTED.

Добавить HTML-код, создающий раскрывающийся список для выбора одного варианта. Просмотреть страницу в браузере:

  • <select name="browsers">

  • <option selected>Internet Explorer

  • Internet Explorer

  • <option>Netscape Navigator

  • <option>Opera

  • <option>Neo Planet

  • </select>

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

Создается такая область с помощью тэга <TEXTAREA> с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS – число столбцов области.

Добавить HTML-код, создающий текстовую область для ввода комментариев, просмотреть страницу в браузере:

  • <br>

  • <textarea name="resume" rows=4 cols=30></textarea>

  • <br>

Отправка данных из формы. Отправка введенной в форму информации или очистка полей от уже введенной информации осуществляется с помощью кнопок. Кнопки создаются с помощью тэга <INPUT> . Для создания кнопки, которая отправляет информацию, атрибуту TYPE необходимо присвоить значение "submit", а атрибуту VALUE, который задает надпись на кнопке, – значение "Отправить".

Для создания кнопки, которая производит очистку формы, атрибуту TYPE необходимо присвоить значение "reset", а атрибуту VALUE – значение "Очистить".

Добавить HTML-код, создающий кнопки, просмотреть страницу в браузере:

  • <input type="submit" value="отправить">

  • <input type="reset" value="Очистить">

Заполненная форма отправляется на сервер, где обрабатывается специальной программой – CGI-скриптом, или по электронной почте автору сайта, где он уже самостоятельно обрабатывает полученные данные.

Для того чтобы при щелчке по кнопке Отправить данные из формы передавались на сервер и там обрабатывались, необходимо указать, куда их отправить и какая программа будет их обрабатывать. Эти параметры задаются с помощью атрибута ACTION контейнера <FORM>.

<form action="URL"></form>

Атрибут ACTION определяет URL-адрес программы, расположенной на Web-сервере, которая обрабатывает полученные данные из формы. Пусть программой, которая заносит данные из формы в базу данных, будет программа bd.exe. Обычно такие программы хранятся в каталоге cgi-bin. Тогда атрибут ACTION будет выглядеть следующим образом:

action="http:/www.mycompany.ru/cgi-bin/bd.exe"

Создание таблиц

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

Вот эта группа тэгов:

  • <TABLE>…</TABLE> − охватывает всю таблицу целиком;

  • <TR>…</TR> − формирует отдельные строки таблицы;

  • <TH>…</TH>, <TD>…</TD> − формирует отдельные ячейки таблицы, причем первый целесообразно использовать для заголовков столбцов, а второй − во всех остальных случаях;

  • <CAPTION>…</CAPTION> − позволяет оформить заголовок таблицы.

В редакторе Блокнот создайте новую Web-страницу, введите заголовок страницы и наберите следующий текст:

  • <p>Цены на комплектующие:</p>

  • <center>

  • <table border="1" cellspacing="0" cellpadding="2">

  • <tr align="center"><th>№</th>

  • <th>Наименование</th></th>

  • <th>Цена</th></tr>

  • <tr align="center"><td>1.</td>

  • <td>Корпус Middle Tower ATX Espada 6018(P4),350W</td>

  • <td>1302.00</td></tr>

  • <tr align="center"><td>2.</td>

  • <td>MB GIGA-BYTE GA-6VA7+(VIA Apollo PRO,AT)</td><td>2023.00</td></tr>

  • <tr align="center"><td>3.</td>

  • <td>Процессор Celeron 1200 INTEL+Cooler</td><td>1670.00</td></tr>

  • <tr align="center"><td>4.</td>

  • <td>Колонки SP-G16</td><td>822.00</td></tr>

  • </table>

  • </center>

CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.

CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек.

Просмотрите результат в браузере.



Наименование

Цена

1.

Корпус Middle Tower ATX Espada 6018(P4),350W

1302.00

2.

MB GIGA-BYTE GA-6VA7+ (VIA Apollo PRO,AT)

2023.00

3.

Процессор Celeron 1200 INTEL+Cooler

1670.00

4.

Колонки SP-G16

822.00

Инструментальные средства создания Web-страниц

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

Существуют мощные инструментальные системы разработки сайтов, например Microsoft FrontPage или Macromedia DreamWeawer. Для разработки отдельных Web-страниц можно использовать свободно распространяемые редакторы FrontPage Express (входит в состав Microsoft Internet Explorer) и Netscape Composer (входит в состав Netscape Communicator). Процесс создания и редактирования страницы очень нагляден, так как производится в режиме WYSIWYG (What You See Is What You Get — «Что видишь, то и получишь»).

Netscape Composer. Рассмотрим в качестве примера использование Netscape Composer для создания и редактирования Web-страниц без программирования на HTML. Composer позволяет форматировать текст, создавать различного типа списки, помещать на страницу графические изображения и таблицы, вставлять гиперссылки и так далее.

Запустим Netscape Composer командой Программы-Netscape Communicator-Netscape Composer. Окно приложения представляет собой стандартное окно, в верхней части которого расположены строка меню и горизонтальные панели инструментов.

Создадим с помощью этого редактора Web-страницу «Комплектующие», содержащую таблицу с наименованиями комплектующих и их ценами.

Ввести команду ^ Файл-Создать-Пустую Страницу.

Сначала дадим странице название и сохраним ее в виде файла в папке сайта.

Ввести команду Формат-Цвета и Свойства Страницы. На появившейся диалоговой панели Параметры страницы в окне Заголовок: ввести текст «Комплектующие».

Ввести команду Файл-Сохранить как.... На диалоговой панели ^ Сохранить как... ввести имя файла hardware.htm и выбрать папку для сохранения.

Введем заголовок страницы «Цены на комплектующие», установим требуемые размер и цвет шрифта, а также тип выравнивания.

В окне приложения ввести текст. Задать команды: Формат-Заголовок-1, Формат-Выравнивание-По центру, Формат-Цвет...

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

Создадим таблицу как в предыдущем случае: разместим информацию о ценах на комплектующие компьютера в таблице, которая будет содержать три столбца («№», «Наименование» и «Цена») и четыре строки.

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

Ввести и отформатировать данные в таблице с помощью пункта меню ^ Формат. Ввести команду Формат-Свойства Таблицы.

На диалоговой панели Свойства Таблицы установить необходимую ширину столбцов и другие параметры.

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

Ввести команду ^ Формат-Цвета и Свойства Страницы. На диалоговой панели Параметры Страницы на вкладке Цвет и фон установить оптимальную цветовую схему для отображения текста, гиперссылок и фона.

1   2   3   4   5   6   7   8



Скачать файл (1803 kb.)

Поиск по сайту:  

© gendocs.ru
При копировании укажите ссылку.
обратиться к администрации
Рейтинг@Mail.ru