Заголовок 1 - Автоматизированная информационная система ГУ

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РЕСПУБЛИКИ КАЗАХСТАН
ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ имени ШАКАРИМА г. СЕМЕЙ
Документ СМК 3 уровня
УМКД
УМКД 042-39. 1.ХХ/032013
УМКД
Редакция №____от_____
Учебно-методические
материалы по дисциплине
«WEB-дизайн»
УЧЕБНО-МЕТОДИЧЕСКИИ КОМПЛЕКС
ДИСЦИПЛИНЫ
«WEB-дизайн»
для специальности 5В011100 – «Информатика »
УЧЕБНО-МЕТОДИЧЕСКИЕ МАТЕРИАЛЫ
Семей
2013
СОДЕРЖАНИЕ
1
2
3
4
Глоссарий
Лекции
Практические и лабораторные занятия
Самостоятельная работа студента
1. ГЛОССАРИИ
AJAX (Асинхронный JavaScript и XML) простым языком говоря,
способ отображения и обновления данных на странице веб-сайта без
перезагрузки самой страницы.
CMS (ContentManagementSystem или дословный перевод Система
Управления Содержимым) - это программный продукт, позволяющий
владельцу web сайта самостоятельно управлять текстовой и графической
информацией (контентом) на своем сайте, т.е. вносить изменения и
дополнения в информационное наполнение сайта.
FAQ, Аббревиатура FrequentlyAskedQuestions (Часто задаваемые
вопросы и ответы) - это документ, в котором приведены типичные, часто
задаваемые пользователями вопросы и ответы на них.
FTP (FileTransferProtocol) - это протокол передачи файлов между
сервером и клиентом (пользователем) посредством, например, сети
Интернет. Благодаря этому протоколу возможно работать с файлами и
каталогами на сервере так, как если бы эти файлы и каталоги располагались
на вашем локальном компьютере. Ранее этот протокол использовался как
основное средство изменения информации на своем сайте. Сейчас для этого
используют CMS системы.
HTML (HyperTextMark-upLanguage или язык разметки гипертекста) это специальный язык, предназначенный для оформления графической и
текстовой информации страниц веб-сайта. HTML не является языком
программирования, а является языком разметки документа.
HTTP (HyperTextTransferProtocol - протокол передачи гипертекста) попросту говоря, это специальный протокол передачи страниц веб-сайта с
сервера посетителю сайта. Такие страницы пользователь просматривает в
своем браузере. Этот протокол разработан в большей мере для сети
Интернет.
IP-адрес - это адрес, присвоенный компьютерам, подключенным к
сети, использующей протокол TCP/IP при поддержании связи. Протокол
TCP/IP наиболее распространенный протокол передачи данных в сети
Интернет. IP адрес может иметь вид, например 192.168.0.123. Фактический
это «личный адрес» комп'ютера в сети.
Язык JavaScript - это, упрощенно говоря, язык, являющийся
дополнением к HTML и позволяющий делать HTML страницы сайта более
«умными». То есть JavaScript наделяет статичные HTML страницы
определенной логикой, заставляет их выполнять определенные действия
(например, разворачивающееся меню и т.п.). Этот язык выполняется
непосредственно в браузере посетителя веб-сайта. Многие люди считают, что
JavaScript - это то же самое, что и Java, лишь потому, что эти языки имеют
схожие названия. На самом деле эти языки схожи не более, чем морская
свинка со свиньей.
MySql - это специальный программный продукт, предоставляющий
возможности работы с базами данных. На сегодняшний день современные
управляемые сайты, использующие CMS, обычно хранят информацию в базе
данных.
Язык PHP был создан РасмусомЛердорфом (RasmusLerdorf) в 1994
году. Аббревиатура PHP расшифровывалась как PersonalHomePage. На
сегодняшний день язык PHP представляет собой удобный инструмент для
создания динамических HTML-страниц. Значение аббревиатуры притерпело
изменения и теперь PHP расшифровывается как HypertextPreprocessor (PHP гипертекстовый препроцессор). PHP - это интерпретируемый на стороне
сервера. После выполнения сценария сервером браузеру передаются
результаты его работы, например, в виде HTML-страницы.
SEO (SearchEnginesOptimization) - это изменение текстов сайта, HTML
кода сайта, структуры сайта; размещение ссылок с ключевыми фразами для
обеспечения более высоких позиций сайта по той или иной фразе в
результатах поисковых систем.
URL (UniversalResourceLocater или универсальный указатель на
ресурс). Это страшное название означает то, что мы привыкли называть вебссылками или ссылками на страницы сайта. Примером URL служит ссылка
http://www.seotop.com.uaЮзабилити - это мера качества пользовательского
опыта, приобретенного при взаимодействии с продуктом или системой,
например, веб-сайтом, программным приложением и т.п.
Usability (Юзабилити сайта) - это мера того, насколько посетителям
удобен и понятен Ваш сайт.
Web - в переводе означает «паутина» или «сеть». Чаще всего это слово
употребляют имея ввиду сеть Интернет.
WWW (WorldWideWeb или всемирная Сеть) - см. web.
Верстка сайта - это производственный процесс, используемый при
создании сайта, направленный на преобразования графического дизайн
макета сайта в HTML код сайта с учетом оптимизации занимаемого кодом
размера, оформления, требований браузеров и экранных разрешений.
"Движок сайта"— см. CMS.
Дизайн макета сайта - это графический образ представления
будущего сайта. Макет сайта - это далеко не сам сайт, это только лишь
приблизительная картинка, наиболее близко представляющая внешний
станиц будущего сайта.
Домен или доменное имя сайта - простым языком это имя,
идентифицирующее конкретный веб-сайт, или еще проще говоря - адрес
сайта. Например www.seotop.com.ua
Контент сайта (содержимое) - это любая текстовая либо графическая
информация, расположенная на сайте.
Контент-менеджер - это система управления сайтом. Реже контентменеджером называют человека, который наполняет сайты.
Портал - это сайт, на котором объединен достаточно большой объем
информации. Точного определения в природе не существует. Иногда под
порталом почему-то подразумевают внутренний корпоративный сайт.
Сервер (server от англ. toserve - служить, обслуживать) наиболее часто
употребляется для обозначения компьютера, предназначенного для
обслуживания каких-либо сервисов, например электронной почты, баз
данных, хранения файлов, сайтов и т.п. Обычно под сервером понимают
компьютер
с
более
высокими
вычислительными
мощностями
расположенного в Дата Центре.
Хостинг - комплекс услуг по аренде дискового пространства для
размещения своего web сайта на сервере.Для того, чтобы сайт был доступен в
сети Интернет, нужно его разместить на специальном сервере хостингпровайдера, постоянно подключенного к сети Интернет.
Браузер (Web browser) или веб-обозреватель — программа для
просмотра веб-страниц. Броузер позволяет запрашивать веб-страницы из
Интернета, для их обработки, вывода, и перехода от одной страницы к
другой. Самые популярные броузеры: Internet Explorer (как часть Windows),
Mozilla Firefox (свободное ПО), Opera (бесплатно, начиная с версии 8.50).
Веб-дизайн (web design) — визуальное оформление веб-страниц. Вебдизайном так же называют разработку полноценного сайта: его структуры,
навигации, дизайна и т.п. удобного для пользователя.
Веб-страница (англ. Web page) — гипертекстовый ресурс в Интернет.
Веб-страницы могут содержать в себе текст со ссылками для быстрого
перехода на другие страницы, изображения, как статические, так и
динамические, медиа файлы, например звуковые файлы и видео, апплеты, а
так же скрипты (JavaScript, VBScript), позволяющие делать содержание
страницы динамическим.
Веб-сайт, сайт (website, от web — паутина, «веб» и site — «место») —
это совокупность веб-страниц, объединенных общим корневым адресом, а
также темой, логической структурой, оформлением.
Веб-сервер — сервер, или, грубо говоря, удаленный компьютер, на
котором выделяют место под хостинг.
Всемирная паутина (World Wide Web или WWW) — глобальное
информационное пространство. Говоря об Интернете, часто имеют ввиду
именно Всемирную паутину, однако это не совсем так, если вдаваться в
подробности, то World Wide Web - это один из протоколов передачи данных,
основанный на HTTP. Для обозначения Всемирной паутины также
используют абреввиатуру «WWW».
Гипертекст в компьютерной терминологии —размеченный текст,
содержащий в себе ссылки на внешние ресурсы. Обобщенно, под термином
гипертекст понимают любые пересылки в тексте к другим текстам, в том
числе и в книгах.
Гиперссылка - это выделенный фрагмент текста, с помощью которого
осуществляется переход от одного документа к другому. Обычно
гиперссылки выделяют цветом и подчеркиванием.
Тэг – это система условных обозначений, которые вносятся в WWW
документ и информируют о том, как данный документ должен выглядеть и
как он должен быть связан с другими документами.
Движок (engine — мотор, двигатель) — программный код для
реализации прикладной задачи. Например, гостевая книга, форум и т.п.
работают на движках. Создавая сайт, веб-дизайнер, может брать готовый
движок или писать движок с нуля. Веб-дизайнер выбирает движок в
зависимости от целей создания сайта .
Домен, DNS (Domain Name System — система доменных имён) — это
система, позволяющая преобразовывать символьные имена доменов в IPадреса (и наоборот) в сетях TCP/IP. Домен сайта, записанный в виде букв,
гораздо красноречивее и удобнее для людей, чем цифры IP-адреса.
Интернет (Internet) — всемирная система добровольно объединённых
компьютерных сетей. Интернет образует глобальное информационное
пространство. Служит физической основой для Всемирной паутины и
множества систем передачи данных.
Компьютерная сеть — система связи между двумя или более
компьютерами.
Поисковая система — веб-сайт, предоставляющий возможность
поиска информации в Интернете. Комплекс программ, которые
обеспечивают функциональность поисковой системы, называют поисковый
движок или поисковая машина. Основными критериями качества работы
поисковой машины являются релевантность, полнота базы, учёт морфологии
языка. Индексация информации осуществляется специальными поисковыми
роботами.
Ссылка — это запись, связывающая между собой части документа.
Язык разметки (текста) в компьютерной терминологии —
компьютерный язык: набор символов или последовательностей, вставляемых
в текст для передачи информации о его выводе или строении. Текстовый
документ, написанный с использованием языка разметки, содержит
дополнительную информацию о различных его участках — например,
указание на заголовки, выделения, списки и т.п.
Web-сайт - это информационный ресурс, состоящий из связанных
между собой гипертекстовых документов (Web-страниц), размещенный на
Web-сервере и имеющий индивидуальный адрес.
Web-страница – это текстовый файл с расширением *.htm, который
содержит текстовую информацию и специальные команды - HTML-коды,
определяющие в каком виде эта информация будет отображаться в окне
браузера.
2. ЛЕКЦИИ
Лекция № 1
Тема:Введение. Цель, предмет и задачи курса. Основные термины и
определения.
Цель: Дать определение основным понятиям и определениям.
Познакомить с целями и задачами курса.
Основные вопросы:
1. Введение
2. Цель курса.
3. Развитие Internet
4. Инструментарий создания Web-сайта.
Влияние глобальной компьютерной сети Internet на современный мир
не имеет исторических аналогов. Это основа новой философии и новой
деловой стратегии. Internet и WWW прочно вошли в нашу жизнь, и нам уже
трудно представить свою деятельность без них. WWW – это огромный набор
гипертекстовых документов, которые благодаря Internet доступны в любой
точке мира. Создание Web-сайтов является одной из важнейших технологий
разработки ресурсов Internet. Хороший сайт предоставляет полезную
информацию пользователям, является визитной карточкой коммерческой
фирмы и образовательного учреждения. Сайт работает в любое время суток.
В настоящее время во всемирной паутине размещено несколько миллионов
Web-сайтов и их число постоянно растет. Каждый пользователь может не
только просмотреть любой из них и извлечь полезную для себя информацию,
но и принимать самое активное участие в их создании. Существует
множество средств для создания Web-сайтов, но лишь некоторые из них
способны предоставить разработчикам инструменты для решения
подавляющего большинства стоящих перед ним задач.
Internet развивается довольно стремительно. Быстро растет количество
изданий, посвященных Сети, что предвещает широкое ее распространение
даже в далеких от техники областях. Internet превращается из большой
игрушки для интеллектуалов в полноценный источник разнообразной
полезной информации для любой категории пользователей.
По прогнозам специалистов очень скоро около 50 процентов семей
(безусловно, пока лишь в развитых странах) будут использовать его
ежедневно. Телевидение и радиоприемники не будут заменены
компьютерами, но будут иметь мощный процессор, большую память и
фактически сами станут в некотором отношении компьютерами.
Через какое-то время системы искусственного интеллекта –
параллельный машинный перевод, а также идентификация и распознавание
голоса сломают последние национальные и языковые барьеры и сделают
возможным свободный транснациональный обмен информацией.
Каждый из нас уже сейчас может сделать свой вклад в развитие
Internet. Для этого достаточно создать свой веб-сайт и разместить его в Сети.
Для этого необходимо решить следующие частные задачи:
– ознакомиться с современными Интернет-технологиями и
использовать их в своей разработке;
– изучить программный инструментарий, применяемый для разработки
и создания Web-сайтов;
– выявить и учесть методы и способы представления на Web-страницах
различных видов информации, не препятствующие их доступности;
– ознакомиться с основными правилами и рекомендациями по
разработке и созданию Web-сайтов и неукоснительно следовать им в своей
практике;
– определиться со структурой Web-страниц;
– выбрать стратегию разработки и создания Web-сайта.
В
результате
проведенных
работ
был
создан
прототип
современногоWeb-сайта.
К числу его основных отличительных особенностей можно отнести
следующее:
 маленький размер файлов с кодами Web-страниц (их листинг
приведен в приложении), что обеспечивает их быструю загрузку из Сети на
клиентской машине;
 векторный формат используемой графики, сжатые форматы
растровых и звуковых файлов, что так же положительно влияет на
уменьшение размера Web-страниц и времени их скачивания по каналам
Сети;
 отсутствие проблем совместимости с различными браузерами,
например такими широко распространенными, как InternetExplorer и
NetscapeNavigator;
 автоматическая поддержка anti-aliasing (сглаживание контуров с
помощью смешения соседних цветов), что значительно улучшает
эстетическое восприятие использованной графики;
 гибкость, открытость и модифицируемость при помощи простых
средств.
К числу имеющихся недостатков можно отнести следующее:
 необходимость овладения идеологией и средствами MacromediaFlash
– современным профессиональным инструментарием создания Web-страниц;
 вынужденность использования для существующих версий браузеров
подключаемого модуля-проигрывателя (FlashJavaPlayer) для адекватного
просмотра Flash-страниц.
Лекция № 2
Тема:Обзор программных продуктов для создания Web-страниц и
подготовки графики. Сравнительная характеристика, достоинства и
недостатки.
Цель: Познакомить с основными программными продуктами,
раскрыть достоинства и недостатки.
Основные вопросы:
1.
Обзор программных продуктов
2.
Особенности графики для Web
3.
Понятие растровой и векторной графики
Чтобы начать заниматься графикой, достаточно иметь компьютер,
весьма скромный по своим техническим характеристикам. Минимальные
требования к компьютеру, при которых работа с графическими пакетами
возможна и вполне сносна, такие:
Процессор Pentium, 200 МГц или аналогичный
Оперативная память 16 Мбайт
Видеопамять 8 Мбайт
Монитор 15 дюймов по диагонали, разрешение 800x600, не менее 256
цветов
Сканер (не обязателен, но желателен; лучше — планшетный)
Часто при работе с графикой необходимо держать открытыми
несколько программ (Photoshop, Flash, FrontPage, FineReader, Word и т. п.) и
несколько (иногда десятки) графических файлов. Для этого требуется больше
оперативной и видеопамяти. При работе с графикой приходится несколько
часов проводить перед монитором. Поэтому хороший монитор — очень
важная деталь вашего аппаратного оснащения. Лучше иметь монитор с
диагональю 17—19 дюймов, разрешением от 1024x768, глубиной цвета
TrueColor (24 бит или 16 млн цветов) и видеокартой с памятью от 32 Мбайт .
Однако мы себя чувствовали более-менее комфортно при работе с
компьютером IntelPentium II, 450 МГц с оперативной памятью 64 Мбайт и
видеопамятью 16 Мбайт. Монитор у нас был 15 дюймов по диагонали с
установленным разрешением 800x600 и глубиной цвета 24 бит.
Особенности графики для Web
Графика широко используется в Web. Известно, что одна небольшая
картинка может заменить целую страницу текста. Web-дизайнеры без устали
совершенствуются и даже соревнуются в оформлении сайтов, а в
информационном содержании Web-страниц графическая информация
занимает все более весомое место.
Главной особенностью графики в Web-дизайне является то, что обычно
она соседствует с текстовой информацией и элементами интерфейса
(кнопками, переключателями и т. п.), и это соседство приходится учитывать
при создании изображений. Основное назначение графики в том, чтобы
привлечь внимание к Web-странице в целом или к отдельным ее фрагментам,
а также представить информацию, которую словами не опишешь. Иначе
говоря, графика используется и для оформления страницы, и для
представления информации (иллюстраций). Она может как существенно
помочь посетителю понять информацию, так и наоборот, сбить его с толку,
сделать тексты трудночитаемыми. Графический дизайн Web-сайта — дело
тонкое, требующее вкуса и чувства меры. Плохое графическое оформление
сайта может просто отпугнуть посетителей. В то же время нужно помнить,
что посетители возвращаются к сайту снова и снова благодаря, прежде всего,
его информативности, а не красоте. Таким образом, разработчик
графического дизайна сайта не просто свободный художник. Ближе всего он
к архитектору.
Другая немаловажная особенность графики для Web заключается в
довольно жестких ограничениях, накладываемых на объем файлов. И это
связано не столько с экономией дискового пространства компьютера,
сколько с пропускной способностью каналов связи. В настоящее время
подавляющее большинство посетителей Интернета используют подключение
к серверу через модем. Сегодня наиболее производительные модемы
обеспечивают скорость передачи данных 57 600 бит/с (около 6 Кбайт/с).
Многие используют модемы производительностью 33 600 бит/с и ниже. Если
Web-страница загружается в браузер дольше 10 с. это раздражает
посетителей, которые могут уйти по другому адресу, так и не дождавшись
окончания загрузки. Отсюда следует, что надо стремиться к тому, чтобы
Web-страница не превышала по объему 50—60 Кбайт. Для графических
изображений это довольно серьезное ограничение, требующее от дизайнеров
особых знаний и умения. В частности, нужно хорошо разбираться в
форматах файлов и способах монтирования изображений в Web-страницу.
Третья особенность графики состоит в том, что в мире встречаются
компьютеры, построенные, как говорится, на различных платформах. Так,
существуют компьютеры на платформе PC и на платформе Macintosh.
Мониторы этих компьютеров имеют различную яркость. Если этого не
учитывать, то одна и та же картинка, великолепно выглядящая на одном
мониторе, может потерять свою выразительность на другом. Поэтому
художник, занимающийся Web-дизайном или просто публикующий свои
произведения и Интернете, должен учитывать это обстоятельство и уметь
настраивать свой монитор.
Понятие растровой и векторной графики
Чтобы изображение можно было хранить, просматривать и
обрабатывать на компьютере, оно должно быть представлено в так
называемом цифровом виде. Такое представление или, другими словами,
описание изображения можно выполнить различными способами. Самый
простой (по крайней мере, для понимания) способ состоит в том, чтобы
каждый элемент изображения (точку или, как принято говорить, пиксел)
описать отдельно. Описание точки это описание ее цвета. Все изображения,
представленные таким способом, называют растровыми. Фотографии,
произведения живописи, картинки с плавными переходами цветов обычно
представляются в компьютере как растровые изображения. Для
редактирования растровых изображений существуют специальные
программные средства — графические растровые редакторы. Многие из них
предназначены только для просмотра изображений и, возможно, некоторой
коррекцией (яркости, контрастности, цветового баланса). Другие же
являются мощными средствами не только для коррекции, но и для
комбинирования фрагментов различных изображений (создания коллажей), а
также для собственно рисования. Лидером среди редакторов растровых
изображений является AdobePhotoshop. Однако следует заметить, что
рисование «от нуля» в редакторах растровой графики, хотя это и возможно,
является довольно сложным делом. Для этой цели лучше подходят
редакторы так называемой векторной графики.
Векторные изображения описываются математическими формулами. В
них элементами являются не пикселы, а объекты (линии, фигуры и т. п.).
Например, чтобы описать такой объект, как отрезок прямой линии, требуется
указать координаты его начала и конца, толщину и цвет линии. При
растровом описании линии нам пришлось бы описывать каждую ее точку,
причем чем толще линия, тем больше точек она содержит и тем объемнее ее
общее описание. Рисовать картинки от руки в редакторах векторной графики
существенно удобнее, чем в растровых. В частности, схемы и чертежи, а
также рисунки типа плакатов (т. е. без плавных переходов цветов),
несомненно, надо делать с помощью векторных редакторов. Однако они
являются не очень хорошими помощниками присозданию изображений с
качеством фотографий или произведений живописи. Лидер среди векторных
редакторов — CorelDRAW, хотя есть множество других векторных
графических программ, например, MacromediaFreeHand и MacromediaFlash.
Растровые
изображения
плохо
переносят
масштабирование.
Увеличение размеров картинки обычно приводит к ухудшению ее качества
(проявляется зернистость). Если же требуется сохранить качество при
увеличении размеров изображения, за что платят увеличением объема
занимаемого места на диске. Качество векторного изображения практически
не зависит от масштаба его представления и, следовательно, изменение
масштаба не сказывается на объеме занимаемого места на диске. Это — одно
из главных достоинств векторной графики.
Тенденция развития графических программ состоит в завоевании тех
областей, для работы с которыми они изначально не предназначались. Таким
образом, растровые и векторные редакторы стремятся сблизиться друг с
другом по широте охвата и мощности своих средств. Photoshop сейчас не
является чисто растровым редактором, a CorelDRAW имеет довольно
развитые средства работы с растровой графикой. В настоящее время
документ, создаваемый в мощном графическом редакторе, обычно является
комбинированным, состоящим из множества объектов, различающихся
способами описания (например, растровые и векторные изображения,
текстовые поля). Документ может содержать информацию о слоях,
прозрачности областей изображения и другую информацию. Таким образом,
графический документ может иметь сложную объектную структуру.
Большинство начинающих заниматься компьютерной графикой
обычно плохо разбирается, в каких случаях следует использовать тот или
иной редактор. Часто бывает и так, что они пытаются в векторных
редакторах применить технологии, естественные для растровых редакторов,
и наоборот. Опытный специалист по компьютерной графике легко выберет
наиболее подходящий редактор в зависимости от стоящей перед ним задачи.
У него всегда под рукой и растровый, и векторный редактор.
Итак основные различия между растровой и векторной графикой ясны.
Вместе с тем обычно векторные редакторы могут импортировать растровые
изображения в векторную графическую композицию и, наоборот,
экспортируют векторные изображения в растровые. Например, Flash
позволяет это делать.
Лекция № 3
Тема:Визуальные средства Web-верстки. Сравнительная
характеристика, достоинства и недостатки. Необходимость использования
визуальных средств при разработке дизайна сайта.
Цель: Познакомить с визуальными средствами Web-верстки, дать
характеристику.
Основные вопросы:
1. Классификация web-сайтов
2. Обзор инструментальных средств
3. Этапы разработки web-сайта
 Реализация
 Тестирование
 Публикация
 Рекламирование сайта
 Сопровождение сайта
Информация, доступная пользователям Internet, располагается на
компьютерах (Web-серверах), на которых установлено специальное
программное обеспечение. Значительная часть этой информации
организована в виде Web-сайтов.
Web-сайт – это информация, представленная в определенном виде,
которая располагается на Web-сервере и имеет свое имя (адрес).
Для просмотра Web-сайтов на компьютере пользователя используются
специальные программы, которые называются браузерами. Наиболее
распространенные браузеры: Opera, MozillaFirefox, Flock, InternetExplorer,
Maxthon.
В зависимости от того, какое имя (адрес) сайта мы зададим в строке
"Адрес", браузер будет загружать в свое окно соответствующую
информацию.
Web-сайт состоит из связанных между собой Web-страниц. Webстраница представляет собой текстовый файл с расширением *.htm, который
содержит текстовую информацию и специальные команды – HTML-коды,
определяющие в каком виде эта информация будет отображаться в окне
браузера.
Вся графическая, аудио- и видео-информация непосредственно в Webстраницу не входит и представляет собой отдельные файлы с расширениями
*.gif, *.jpg (графика), *.mid, *.mp3 (звук), *.avi (видео). В HTML-коде
страницы содержатся только указания на такие файлы.
Каждая страница Web-сайта также имеет свой Internet адрес, который
состоит из адреса сайта и имени файла, соответствующего данной странице.
Таким образом, Web-сайт – это информационный ресурс, состоящий из
связанных между собой гипертекстовых документов (Web-страниц),
размещенный на Web-сервере и имеющий индивидуальный адрес.
КЛАССИФИКАЦИЯ WEB-САЙТОВ
В настоящее время во всемирной паутине размещено несколько
миллионов Web-сайтов и их число постоянно растет.
Личные страницы, содержащие информацию об авторе, его интересах.
Их создают для того, чтобы обрести друзей по интересам, расширить свой
кругозор, свой мир.
Информационные сайты. К ним относятся сайты учебных заведений,
сообществ по интересам, фирм и др.
Сайты дистанционного обучения и консультирования. На этих сайтах
размещены обучающие программы и тесты, доступные в режиме on-line для
студентов и школьников.
Электронная коммерция. В Web встречаются виртуальные магазины,
которые позволяют делать покупки, сидя за мониторами своих компьютеров.
Информационно-развлекательные сайты
ОБЗОР ИНСТРУМЕНТАЛЬНЫХ СРЕДСТВ
Кроме Web-браузеров, необходимо иметь программы для
редактирования HTML-документов.
Сейчас на рынке программного обеспечения представлено большое
количество продуктов для создания Web-страниц или HTML-документов: от
мощнейших профессиональных пакетов типа FrontPage и Dreamweaver до
таких популярных программ семейства текстовых процессоров, как
MicrosoftWordPad, MicrosoftWord и CorelWordPerfect.
Достаточно востребованным для создания Web-сайтов является ряд
визуальных
приложений,
называемых
WYSIWYG-редакторами
(WhatYouSeeIsWhatYouGet — что видишь, то и получишь). Эти программы
ускоряют создание Web-документов и избавляют от необходимости вручную
набирать основной программный HTML-код. Все необходимые операции
выполняются автоматически.
Так же Web-страницы можно создавать вручную с помощью языка
HTML (HyperTextMark-upLanguage – язык разметки гипертекста), при этом
ввод HTML-кода выполняется в любом текстовом редакторе или с помощью
HTML-редакторов.
Для создания элементов страниц используются следующие
инструментальные средства: графические редакторы (AdobePhotoshop,
Fireworks, PaintShopPro, Painter и др.) для создания графических файлов,
текстовые редакторы для создания текстов, звуковые редакторы для создания
звуковых файлов.
Обычно новичок думает следующим образом: «Все свои привычные
документы я создаю посредством программ WYSIWYG (<что вижу, то и
получаю>) - тексты я создаю в MS Word, презентации - в MS PowerPoint, так
возьму-ка я и для создания web-странички подобную программу - MS
FrontPage...» Приняв такое решение, вы дважды обкрадываете себя.
Первый раз - в смысле рационального использования webпространства. Дело в том, что все визуальные редакторы web-страниц, к
которым относится и упомянутый MS FrontPage, вставляют в создаваемые
страницы отсебятину - множество лишних ненужных тегов. Исключением,
пожалуй, является MacromediaDreamweaver (за что он снискал себе
заслуженную популярность как среди новичков, так и среди
профессионалов). Но даже он в этом плане не идеален - любит засорять
исходный текст кавычками (в большинстве случаев совершенно
ненужными), а также вставлять символы неразрывного пробела в самых
неподходящих для этого местах.
Справедливости ради стоит отметить, что все визуальные редакторы
предоставляют пользователю возможность работать с исходным кодом
создаваемой страницы, но столь любимый многими FrontPage вновь
переделает все по-своему, стоит вам только переключиться снова в
визуальный режим.
Этапы разработки Web-сайта
Выделяют следующие этапы разработки Web-сайта:
планирование, реализация, публикация, продвижение, поддержка.
На стадии планирования определяется следующее:
• цели создания Web-сайта (Зачем?Какие задачи он должен выполнять
и на какую аудиторию он рассчитан?);
• характер содержимого;
• структура (Юзабилити – удобство пользования);
• особенности оформления (определяется структура каждой страницы и
разрабатывается графика).
Любую страницу можно оценить по трем параметрам: контенту,
внешнему виду и навигации.
Если сайт рассчитан на долгое вдумчивое чтение, то он должен иметь
хорошуючитабельностб, меньше отвлекающих динамических эффектов, не
утомляющее цветовое сочетание фона и текста.
И наоборот: сократите текстовые блоки до минимума, если Вы создаете
сайт, дающий посетителю, прежде всего визуальную и другую
мультимедийную информацию.
При создании достаточно больших документов надо помнить о том, что
не все из посетителей имеют высокоскоростной доступ в Internet.
Реализация
Это и есть работа по созданию сайта. На этом этапе проводится
подготовка текстового и графического материала (печать, сканирование).
Материал разбивается по файлам в соответствии со структурой.
Организуются ссылки между файлами сайта.
Рекомендуется создать шаблон-заготовку страницы с основными
структурными областями и стилевым оформлением и использовать ее для
создания всех страниц узла. Меняйте в каждой новой странице только
содержимое и адресацию ссылок, такая организация работы сократит время,
потраченное на каждую из них.
Тестирование
Завершив работу по размещению страниц на Web-сайте, необходимо
выполнить тестирование. Оно состоит из двух этапов: тестирование на
работоспособность и тестирование на удобство пользования интерфейсом.
На этапе тестирования на работоспособность проверяют, как
функционирует Web-сайт, используя те же условия, при которых с ним будет
работать пользователь. Поработайте с Web-сайтом в различных браузерах и
посмотрите, как выглядит Ваш сайт в каждом из них. Постарайтесь оценить
время загрузки страниц, что очень важно.
Публикация
Готовый Web-сайт необходимо опубликовать на Web-сервере, чтобы
он был доступен через Internet. Если ваш сайт создан посредством редактора
FrontPage, то на сервере должны быть инсталлированы серверные
расширения FrontPage, что обеспечит полную поддержку доступных в
FrontPage компонентов, которые были помещены на странице в процессе
создания сайта.
Если у вас нет собственного сервера, то в Сети можно найти огромное
количество ссылок на freewebpages, где некоторые провайдеры
предоставляют своим клиентам бесплатное место под страницу.
Например, http://narod.ru
Однако для того чтобы окончательно выбрать сервер для размещения
своего сайта необходимо обратить внимание на следующее:
• отсутствие дискриминации по контенту. Некоторые сервера ставят
условия, касающиеся содержимого Вашего сайта;
• надежность Web-сервера. Посетите их Web-узел в пиковые часы и
убедитесь, что проблем с доступом не возникает;
• отсутствие скрытых завуалированных видов оплаты места в виде
всевозможных доплат за различные услуги и рекламы;
• техническая поддержка. Предоставят ли Вам возможность общения с
администратором сервера, есть ли возможность доступа по протоколу FTP
(FileTransferProtocol ) и т.д.;
• объем выделяемого Вам пространства. Обычно это 5 – 10 мегабайт;
• дополнительные возможности. Не будет лишним, если сервер
предложит Вам: бесплатную почту,
счетчик посещений, гостевую книгу, чат, различные CGI-скрипты и
т.д.;
• какое программное обеспечение установлено на сервере. Например,
UNIX-сервера чувствительны к регистру букв в названиях файлов, т.е. если у
Вас в исходном коде будет стоять ссылка на файл background.gif, а файл
будет назван background.Gif или Background.gif, то он не будет
визуализирован. Однако у таких серверов более высокая степень
защищенности от взломов;
• есть ли на сервере автоматическая перекодировка содержимого
страниц, в соответствии с пользовательскими настройками браузера. Если
таковой нет, то у Вас могут возникнуть проблемы с отображением русских
кодировок.
Рекламирование сайта
Существует множество приемов рекламирования сайта: размещение
информации о нем на поисковом Web-сайте, организация взаимных ссылок с
другими сайтами и т.д.
Как привлечь пользователя? Красиво оформленные страницы Webсайта – это только половина дела. В первую очередь страницы должны быть
содержательными. Основное требование к содержимому Web-сайта –
полнота и достоверность. Информация должна быть представлена таким
образом, чтобы пользователь, однажды посетивший Web-сайт, еще ни раз
обратился к нему.
Сопровождение сайта
Содержимое Web-сайта может подвергаться неоднократным
изменениям. Важно, чтобы предоставляемая на Web-сайте информация
всегда была актуальной, поэтому как можно чаще обновляйте информацию
на своем Web-сайте, по возможности расширяйте материал, улучшайте
дизайн.
Обязательное правило. Web-сайт должен обновляться не реже одного
раза в месяц. В противном случае вы потеряете не только потенциальных, но
и уже состоявшихся посетителей. Рекомендуется создать на своем
компьютере копию Web-сайта, вносить в нее изменения и новую версию
передавать для размещения на сервере в завершенном виде.
Лекция № 4
Тема:Язык разметки гипертекста и структура html-документа
Цель: Познакомить с языком разметки гипертекста и со структурой
html-документа
Основные вопросы:
1.
Язык разметки гипертекстовых страниц
2.
Основные элементы HTML
3.
Структура документа HTML
Язык
разметки
гипертекстовых
страниц
(HTML
–
HypertextMarkupLanguage) представляет собой язык, разработанный
специально для создания Web-документов. Он определяет синтаксис и
размещение специальных инструкций (тегов), которые не выводятся на
экран, но указывают браузеру, как отображать содержимое документа. Он
также используется для создания ссылок на другие документы, локальные
или сетевые, например, находящиеся в сети Интернет.
Стандарт HTML и другие стандарты для Web разработаны под
руководством консорциума W3C (WorldWideWebConsortium). В настоящее
время действует спецификация HTML 4.0, поддержка которой со стороны
основных браузеров постоянно растет.
На практике на стандарт HTML большое влияние оказывает наличие
тегов, предложенных и поддерживаемых наиболее известными браузерами,
такими как MicrosoftInternetExplorer и NetscapeNavigator. Эти теги в данный
момент могут как входить, так и не входить в состав действующей
спецификации HTML.
HTML-страница является документом, созданным на основе языка
HTML. Это по сути и есть Internet-страничка при условии, что ее файл будет
размещен в Internet
Значки “<” и “>”. Эти элементы в угловых скобках называются HTMLдескрипторами или HTML-тегами.
Именно дескрипторы сообщают Web-браузеру информацию о
структуре и особенностях форматирования Web-страницы. Большинство
дескрипторов являются парными, т.е. состоят из открывающей и
закрывающей частей и воздействуют на текст, помещенный между ними.
Обратите внимание, что признак закрывающего дескриптора — обратная
косая черта ” / “.
Следующий важный термин, относящийся к основным понятиям языка
HTML,— элемент. Элемент— конструкция языка HTML. Он состоит из
открывающего дескриптора, содержания и закрывающего дескриптора.
Содержанием называется все, что находится между открывающим и
закрывающим дескрипторами.
Атрибуты — дополнительные к дескрипторам параметры или свойства
элементов (например, цвет или размер шрифта для одного абзаца, где абзац
является элементом).
Структура документа HTML
Согласно спецификациям HTML, разработанным W3C, для всех
документов HTML обязательны следующие условия.
В документе должна присутствовать директива (или пролог, как его
иногда называют) DOCTYPE (DocumentTypeDeclaration). Пролог содержит
объявление, информирующее отом, какая именно версия HTML
использовалась при составлении Web-cтраницы, и указывает Web-браузеру,
каким образом обрабатывать данный документ. Пролог представляет собой
одиночный дескриптор специального вида. Данный дескриптор всегда
вставляется в самом начале HTML-документа перед открывающим
дескриптором <html>. (Нарис. 2.6 —<I DOCTYPE HTML PUBLIC
“//W3C//DTD HTML 3.2 Final//EN”>.)
Запомните, что <! doctype — единственный дескриптор, который
пишется прописными буквами Все остальные дескрипторы нужно набирать
только строчными буквами!
HTML-документ
всегда
должен
начинаться
открывающим
дескриптором <html> и заканчиваться закрывающим дескриптором </html>
Далее следуют два дескриптора заголовка <head> и </head>. Между
этими дескрипторами обычно находится пара дескрипторов <title> и </title>,
определяющих название страницы. Обратите внимание: именно это название
отображается в заголовке окна Web-браузера.
Далее следует пара дескрипторов содержимого документа <body> и
</body>. Между этими дескрипторами и размещают всю информацию,
которая планируется быть представленной на Web-странице.
Добавление комментариев
Комментарии — это определенное текстовое сообщение, которое автор
вставляет в Web-страницу, чтобы отметить для себя нужные детали.
Например, как частный случай — сделать для себя пометку о необходимости
добавления рисунков в данный раздел либо глобально — добавить
информацию, помогающую впоследствии разобраться в отдельных вехах
создания сайта или управлять им.
Комментарии не отображаются Web-браузерами на экране, но нужно
помнить, что любой пользователь может прочесть данные комментарии.
Для добавления комментариев используют специальные парные
дескрипторы — открывающий <!— и закрывающий —>.
Чтобы внести в HTML-код Web-страницы текстовую конструкцию
комментариев, выполните такие действия.
1. Введите дескриптор <!— в месте начала текста комментария.
Наберите собственно требуемый текст комментария. Завершите блок
комментария закрывающим дескриптором —>, например
<!— А в это место Web-страницы нужно вставить
красивые
картинки или фотографии. Не забыть!—>
2. Как обычно, сохраните текст, вернитесь в окно Web-браузера и
обновите изображение открытойWeb-страницы. Обратите внимание, что на
Web-странице текст комментариев не отображается.
Текст комментариев можно отделять дополнительными пробелами от
разделительных дескрипторов, чтобы HTML-код было проще читать.
Лекция № 5
Тема:Инструментальные средства для ввода и редактирования htmlдокументов
Цель: Рассмотреть инструментарий редактирования HTML.
Основные вопросы:
1. Инструментарий редактирования HTML.
2. Авторский инструментарий WYSIWYG.
3. Информация, игнорируемая браузерами.
Инструментарий редактирования HTML. Документы HTML
являются обычными текстовыми ASCII-файлами. Это означает, что для их
создания можно использовать любой текстовый редактор, даже с
минимальными возможностями. Существуют средства редактирования,
разработанные специально для написания HTML. Они позволяют экономить
время, так как содержат клавиши быстрого доступа для выполнения
повторяющихся операций, например, задания начальных установок
документов, таблиц или просто применения стилей к тексту. Редакторы
HTML
отличаются
от
авторского
WYSIWYG-инструментария
(рассматриваемого далее) тем, что требуют знания правил составления
HTML вручную, редакторы лишь упрощают и ускоряют этот процесс.
HomeSite - мощный и недорогой редактор HTML компании
AllaireCorporation. В нем имеются средства для выделения цветами
синтаксических конструкций HTML, функция FTP, контроль синтаксиса и
правописания, многофайловый поиск и замещение. Кроме того, он содержит
специальные команды и шаблоны для создания более сложных элементов
(фреймов, сценариев JavaScript и DHTML).
При работе на компьютерах Macintosh обращают внимание на BBEdit,
коммерческий HTML-редактор компании BareBonesSoftware, Inc. Он
популярен среди Web-разработчиков для компьютеров Macintosh. В его
состав входят удобные и быстрые HTML-инструменты, многофайловый
поиск и замена, встроенная FTP-функция, поддержка 13 языков
программирования, построитель таблиц, контроль синтаксиса HTML и еще
множество функций.
Авторский
инструментарий
WYSIWYG.
Последние
годы
характеризуются резким ростом рынка авторских инструментов. HTMLредакторы класса WYSIWYG (WhatYouSeeIsWhatYouGet – что видишь, то и
получишь) имеют графические интерфейсы, которые делают написание
HTML больше похожим на программу редактирования текстов или разметки
страницы. Первоначальной целью этих программ было освобождение
пользователей от тегов HTML, наподобие того, как программы разметки
страниц защищают разработчика от набора команд языка PostScript. Сегодня
их значимость возросла, так как они повышают эффективность и уровень
автоматизации производства документов, обеспечивая в то же время доступ к
исходному тексту HTML.
Наиболее популярными в настоящее время WYSIWYG-редакторами
являются: MacromediaDreamweaver, GoliveCyberStudio (только для
компьютеров Macintosh), MicrosoftFrontPage, FileMakerClaris, HomePage,
AdobePageMill.
Информация, игнорируемая браузерами. Ниже приводится
информация, содержащаяся в документе HTML, включая определенные теги,
которая будет игнорироваться при просмотре браузерами. В ее состав входят:
– разрывы строк. Символы конца строк в документе HTML
игнорируются. Текст и элементы будут переноситься до тех пор, пока в
потоке текста документа не встретится тег <р> или <br>. Разрывы строк
выводятся, если текст обозначен как текст с заданным форматом (<рrе>);
– символы табуляции и множественные пробелы. Когда браузер
встречает в документе HTML символ табуляции и несколько
последовательных символов пробела, он выводит только один пробел. Таким
образом, если документ содержит: "far, faraway", браузер выведет "far,
faraway". Дополнительные пробелы можно добавить в текстовый поток,
используя символ неразрывного пробела (Snbsp;). Кроме того, все пробелы
выводятся, если текст является форматированным (находится в тегах <рrе>);
– множественные <р>-теги. Последовательность тегов <р>, не
прерываемых текстом, всеми браузерами интерпретируется как избыточная.
Содержимое будет выводиться так, как если бы был только один тег <р>.
Большинство браузеров выведет несколько тегов <Br> в виде нескольких
переходов на новую строку;
– нераспознаваемые теги. Если браузер не понимает тег или тот был
неверно задан, то браузер его просто игнорирует. В зависимости от тега и
браузера это может привести к различным результатам. Либо браузер ничего
не выведет, или он может отобразить содержимое тега как обычный текст;
– текст в комментариях. Браузеры не выводят текст между
специальными элементами <! и ->, которые используются для обозначения
комментариев. После символов начала комментария и перед символами
окончания обязательно должен находиться пробел. В сам комментарий
можно помещать практически все. Комментарии нельзя вкладывать. В
MicrosoftInternetExplorer
имеется
фирменный
тег,
обозначающий
комментарии <com-ment>...</comment>. Однако, он не поддерживается
другими браузерами.
Лекция № 6
Тема:Создание web-проекта с помощью мастера web страниц и msword
Цель: рассмотреть особенности создания web-проекта с помощью
мастера web.
Основные вопросы:
1. Мастер веб-страниц
2. Структуру веб-узла.
HTML-документы можно создавать с помощью любого текстового
редактора, например с помощью встроенного в операционную систему
Windows редактора БЛОКНОТ, но при этом необходимы знание и умение
использовать все возможные дескрипторы HTML. В этом редакторе нет средств,
помогающих пользователю, поэтому использовать его для создания HTMLдокументов достаточно сложно и неэффективно. Для этой цели разработан ряд
специальных инструментальных средств, предназначенных для создания HTMLдокументов. Среди них специальное инструментальное средство для создания
веб-страниц, встроенное в пакет MSOffice. С помощью «Мастер веб-страниц»
можно создавать веб-страницы без интерактивных элементов, практически не
зная и не используя язык HTML. Мастер помогает создать настоящий веб-узел
или многостраничный индексированный сайт, предлагает различные
варианты дизайна и расположения рамок со ссылками.
Предлагается разработать простой учебный веб-узел, содержащийвебпроект по теме «Основы веб-проектирования» с помощью инструмента «Мастер
веб-страниц».Определим статьи проекта и их содержание. Пусть на страницах
веб-проекта в соответствии с выбранной темой раскрываются следующие
вопросы:
 Основные понятия веб.
 Технология создания узла с помощью Мастера веб-страниц.
 Технология применения активных элементов и применение редактора
MSVBScriptEditor.
Таким образом, веб-документ должен содержать три страницы (статьи):
главную, содержащую информацию об основных понятиях веб, и две
страницы, отражающие содержание второго и третьего вопроса.
Далее необходимо выбрать структуру веб-узла. Рассмотрим некоторые
из них.
Линейная структура. Это самая простая структура сайта. Вебстраницы идут одна за другой, и пользователь должен просматривать их как
слайд-шоу. Все страницы на таких сайтах равноправны. Несмотря на
простоту реализации линейной структуры, недостатков у нее гораздо больше,
нежели достоинств. А поэтому область ее применения четко ограничена. Она
может использоваться на имиджевых сайтах-презентациях и в онлайновых
учебных пособиях.
Самый простой вариант такого веб-узла – набор HTML-страниц, с
каждой из которых есть ссылка на последующую предыдущую (естественно,
исключение составляют крайние страницы). На каждой странице обязательно
должно быть какое-то заглавие и ссылка на первую страницу. Иначе
посетители, попавшие в середину сайта, например, с поисковой системы,
ничего не поймут и почти наверняка покинут
Линейная структура с ответвлениями. Это тоже контролируемая
структура, которая напоминает дорогу с ответвляющимися от нее время от
времени тупиковыми тропинками. То есть посетитель последовательно
переходит с одной страницы на другую. Если информация, размещенная на
какой-то из них его заинтересовала, и он хочет узнать подробности, то может
перейти на ответвление, а потом вернуться обратно на основную «дорожку».
Главным преимуществом рассматриваемой структуры является то, что
к ней легко перейти с обычного линейного размещения веб-страниц. Такое
часто бывает, когда созданный однажды веб-сайт перестает удовлетворять
возросшим требованиям, а глобальная переделка по тем или иным причинам
невозможна. В этом случае веб-мастер может быстро и без всяких проблем
расширить проект.
Древовидная структура. Это – самый универсальный способ
размещения веб-страниц. Она подходит для создания практически любых
типов сайтов. Ее принцип, наверное, понятен всем. Пользователь при заходе
на заглавную страницу оказывается перед выбором, куда идти дальше. После
перехода в нужный раздел, он подбирает необходимый подраздел и т. п.
В древовидной структуре очень сложно соблюдать баланс между
глубиной и шириной. Если «дерево» вашего сайта или веб-узла будет расти
только вглубь, то пользователям, чтобы дойти до какой-то информации,
придется загрузить и просмотреть слишком много страниц. Естественно, это
будет раздражать. Ну а если вы создадите очень широкую древовидную
структуру, то посетители будут вынуждены каждый раз тратить очень много
времени для выбора нужной им ветки.
Решетчатая структура. Эта структура уже на порядок сложнее всех
других. В ней все страницы также размещаются в различных ветках. Но у
пользователя есть возможность перемещаться по ним не только вертикально
(вверх-вниз) но и горизонтально (то есть между ветками на разных уровнях).
Используется решетка в основном только в каталогах. При этом
перемещение между ветками на глубинных уровнях осуществляется с
помощью отсылок на рубрики в других разделах. Использование решетчатой
структуры в других проектах нецелесообразно.
Лекция № 7
Тема:Общие сведения о структуре HTML документа. Понятие тега.
Спецификации HTML. Поддержка тегов разными браузерами.
Цель: Повторить структуру HTML документа.. Ввести понятие тега.
Основные вопросы:
1. Теги HTML
2. Контейнеры.
3. Автономные теги.
4. Атрибуты.
Теги HTML. Документ HTML содержит текст (содержимое страницы)
и встроенные теги – инструкциями о структуре, внешнем виде и функции
содержимого. Документ HTML разделяется на две основные части: заголовок
– head и тело – body. Заголовок содержит такие сведения о документе, как его
название и методическая информация, описывающая содержимое. В теле
находится само содержимое документа (то, что выводится в окне браузера).
Каждый тег состоит из имени, за которым может следовать список
необязательных атрибутов, все они находятся внутри угловых скобок <>.
Содержимое скобок никогда не выводится в окне браузера. Имя тега, как
правило, представляет собой аббревиатуру его функции, что облегчает его
запоминание. Атрибуты являются свойствами, которые расширяют или
уточняют функцию тега. Как правило, имя и атрибуты внутри тега не
чувствительны к регистру. Тег <BODY BGCOLOR=white> будет работать так
же, как <bodybgcolor=white>. Однако значения определенных атрибутов
могут быть чувствительны к регистру. Это относится, в частности, к именам
файлов и URL.
Контейнеры. Большинство тегов являются контейнерами. Это
означает, что у них имеется начальный (открывающий или стартовый) и
конечный (закрывающий) теги. Текст, находящийся между тегами, будет
выполнять содержащиеся в них инструкции. Например:
The weather is <I>gorgeous</I>today.
Результат: The weather is gorgeous today.
Конечный тег имеет то же имя, что и начальный, но перед ним стоит
слэш (/). Его можно рассматривать как "выключатель" тега. Конечный тег
никогда не содержит атрибутов.
В некоторых случаях конечный тег не обязателен, и браузер определяет
конец тега из контекста. Чаще всего опускают конечный тег <р> (абзац).
Браузеры раньше поддерживали этот тег без соответствующего завершения,
поэтому многие авторы Web привыкли использовать краткую форму. Это
разрешено не всем тегам, и не все браузеры прощают их отсутствие.
Поэтому, если есть сомнения, включите в текст закрывающий тег. Это
особенно важно, когда в документе вы используете каскадные таблицы
стилей.
Автономные теги. Некоторые теги не имеют завершающих тегов,
потому что они используются для размещения отдельных (автономных)
элементов на странице. Одним из них является тег изображения <img>, он
просто помещает графику в поток страницы. Другие автономные теги – это
разрыв строки (<br>), горизонтальная линия (<hr>) и теги, содержащие
информацию о документе и не влияющие на содержимое, выводимое на
экран, такие как <meta> и <base>.
Атрибуты. Атрибуты добавляются втег для расширения или
модификации его действий. К одному тегу можно добавить несколько
атрибутов. Если атрибуты тега следуют после имени тега, они разделяются
одним или несколькими пробелами. Порядок следования не важен.
Большинство атрибутов имеют значения, которые следуют за знаком
равенства (=), находящимся после имени атрибута. Длина значений
ограничена 1024 символами. Значения могут быть чувствительны к регистру.
Иногда значения должны находиться в кавычках (двойных или одинарных).
Правила записи значения следующие:
– если значение представляет собой одно слово или число и состоит
только из букв (a-z), цифр (0-9) и специальных символов (точка <.> или
дефис<->), то можно поместить его после знака равенства без кавычек;
– если значение содержит несколько слов, разделенных запятыми или
пробелами, или содержит специальные символы, отличные от точки или
дефиса, тогда его необходимо поместить в кавычки. Например, URL требуют
кавычек, потому что они содержат символы "://". Также кавычки необходимы
при задании значений цветов с использованием формата "#rrggbb".
Если вы не уверены, стоит ли использовать кавычки, используйте их
всегда для всех значений.
В теги HTML могут помещаться другие HTML-теги для осуществления
воздействия нескольких тегов на один элемент. Это называется вложением,
и, чтобы правильно его осуществить, начальный и конечный теги
вложенного тега должны обязательно находиться между начальным и
конечным тегами внешнего тега, например:
The Weather is <B><I>gorgeous</I></B> today.
Результат: The weather is gorgeous today.
Часто встречающейся ошибкой является перекрытие тегов. Хотя часть
браузеров отображают содержимое, отмеченное таким образом, многие не
разрешают нарушать правило, поэтому важно размешать теги правильно.
Следующий пример показывает неверное вложение тегов (заметьте, что
тег<В> закрывается перед закрытием <I>):
Theweatheris<B><I>gorgeous</B></I>today – данная информация,
игнорируемая браузерами.
Лекция № 8
Тема:Использование графики в HTML документе. Способы хранения
изображений. Используемые графические форматы. Создание
анимированных GIF-файлов
Цель: познакомить с основными графическими форматами,
используемых на Web-странице.
Основные вопросы:
1.
Форматы графических изображений
2.
Подбор и оптимизация графического изображения
3.
Создание фона для Web-страниц
4.
Создание графических надписей
5.
Создание элементов управления (кнопок)
Графические изображения – важный компонент любой Web-страницы.
При подготовке графических документов для Web следует иметь в виду, что
чем меньше объем файла, тем быстрее загружается изображение. Вместе с
тем важно и качество. Поэтому основная сложность заключается в
поддержании баланса между качеством графического изображения и
минимальным размером файла.
В Web используются в основном два формата графических
изображений – GIF и JPEG. Изображения в этих форматах воспроизводятся
самими браузерами без использования встраиваемых модулей. Реже
используют специально созданный формат PNG (PortableNetworkGraphics) –
переносимая сетевая графика.
GIF (GraphicInterchangeFormat) разработан фирмой ComputerServe с
целью уменьшения объема графических файлов.GIF – это первый
графический формат, широко поддерживаемый Web-браузерами.GIF- файлы
– это файлы растровых изображений, в которых используется не более 256
так называемых индексированных цветов (indexedcolor). Графическая
информация, сохраняемая в GIF-файле, сжимается при помощи специальных
алгоритмов сжатия с минимальными потерями информации.
Рекомендуется использовать для Web-графики разрешение 72 пикселя
на дюйм, т.к. именно эта величина разрешения используется при
преобразовании в формат GIF.
JPEG (JointPhotographicExpertsGroup) представляет собой растровое
изображение, в котором может быть использовано до 16,7 млн. цветов (24битовый цвет). Сжатие JPEG-изображений, как правило, сопровождается
потерями информации, т.к. основано на отбрасывании мелких деталей. Для
этого формата также рекомендуется создавать рисунки с разрешением 72
пикселя на дюйм.
Каждый формат имеет свои преимущества и недостатки. Выбор
формата для графического изображения, размещаемого на Web-странице,
зависит от стоящих перед разработчиком целей.
GIF-формат больше подходит для изображений, содержащих меньше
256 цветов.JPEG-файлы используются для хранения 16- и 24-битовых
фотографических изображений, содержащих более 256 цветов.
GIF-формат рекомендуется применять для создания простых
анимационных эффектов, которые можно создавать при помощи других
технологий, например Java. Для воспроизведения анимированных GIFфайлов, достаточно встроенных средств, предлагаемых браузерами.
Если ваш сайт содержит много графических изображений (например,
галерею картин), то разместить их все на странице практически невозможно,
т.к. она будет очень долго загружаться. В этом случае, используя
уменьшенные копии рисунков в качестве ссылок, можно загрузить основные
рисунки. Миниатюрные копии позволяют познакомиться с идеей рисунка, и
посетитель не будет загружать те изображения, которые его не интересуют.
Щелкнув на миниатюрной копии, он познакомится только с необходимыми
изображениями.
Подбор и оптимизация графического изображения
Рисунки для Web-сайта вы можете позаимствовать в специальной
библиотеке рисунков (ClipArt), создать с помощью графической программы,
отсканировать какие-либо готовые изображения или воспользоваться
цифровой камерой.
Библиотека рисунков содержит уже готовые к использованию
изображения. Загрузить ее можно через Internet, например, с сервера Yahoo
или c компакт-диска. Однако библиотеки рисунков обладают одним
существенным недостатком – не вы одни имеете возможность ими
пользоваться.
Если вы решили создать изображение сами, то сделать это можно с
помощью специальных графических редакторов, которые бывают растровые,
векторные и комбинированные.
В векторном графическом редакторе объекты, составляющие
изображения, описываются посредством математических формул и всегда
являются редактируемыми, т.е. на любом этапе вы можете изменить шрифт,
цвет и другие параметры текстового объекта.
В программе растровой графики после выхода из режима создания
текста, текст превращаемся в набор пикселей и уже не подлежит
редактированию. При увеличении растрового изображения станут видны
отдельные его пиксели. В случае с векторным изображением этого не
происходит.
На завершающем этапе подготовки рисунка для Web лучше
использовать программы растровой графики типа AdobePhotoshop, поскольку
форматы GIF и JPEG являются растровыми. По этой причине для создания
объектов изображения (например, текста) используют программы векторной
графики, а затем экспортируют рисунок в программу растровой графики.
Оптимизацию графических файлов для Web можно осуществлять в
графическом редакторе AdobePhotoshop.
Простейшим
способом
оптимизации
изображения
является
уменьшение его размера. Для этого выберем команду Изображение→Размер
изображения и заполним диалоговое окно (рис. 1): в блоке размеры в
пикселах изменим поля Ширина, Высота. Уменьшение размера приводит к
значительному уменьшению объема файла.
Рисунок 1. Размер изображения.
Другой способ оптимизации заключается в уменьшении количества
цветов в изображении. Это достигается подбором параметров при
сохранении графических файлов в форматах GIF и JPEG.
Для того чтобы сохранить графический файл в формате GIF (JPG)
нужно: выбрать команду Файл → Сохранить копию; в появившемся окне
выбрать место на диске Папка, ввести Имя файла, в выпадающем меню
Формат выбрать тип файла GIF (JPG); и Сохранить. В результате
появляется диалоговое окно (рис.2а, б), в котором можно изменить
параметры изображения и, если включен Просмотр, то увидеть, как
изменилось изображение.
а)
б)
Рисунок 2. Параметры изображения
Начиная с AdobePhotoshop 5.5 предусмотрен специальный пункт меню
предназначенный для сохранения графики для Web - Файл → Сохранить
для Web. При его выборе открывается диалоговое окно (рис.3), в котором
можно просматривать до 4 вариантов изображения одновременно, изменять
параметры каждого варианта и сохранить наиболее оптимальный вариант.
Рисунок 3. Просмотр вариантов изображения.
Создание фона для Web-страниц
При создании Web-страницы используются следующие графические
изображения: фоны, элементы управления (кнопки), надписи.
Для создания любого из этих элементов в первую очередь необходимо
создать новый графический файл. Для этого нужно выбрать команду Файл
→ Создать и заполнить диалоговое окно (рис.4): ввести размер - Ширина и
Высота, выбрать режим - RGB, OK.
Рисунок 4. Создание нового графического файла.
После завершения работы над графическим изображением необходимо
сохранить полученный файл в формате GIF (JPG). При необходимости
можно сделать копию созданного изображения с помощью команды
Изображение → Дублировать → OK.
Фоновое изображение повторяется в горизонтальном и вертикальном
направлении до полного заполнения окна браузера. Для его создания
необходимо создать графический файл небольшого размера и заполнить его
каким-либо узором без резких границ по краям. Рисунок фона не должен
быть слишком сложным и ярким, так как в этом случае возникнут трудности
с восприятием текста.
Создание графических надписей
Графические надписи создаются в AdobePhotoshop с помощью
элемента панели инструментов Текст (горизонтальный и вертикальный). При
активизации одного из этих элементов курсор превращается в метку вставки.
Теперь для ввода текста нужно нажать левой кнопкой мыши в окне
изображения и заполнить диалоговое окно (рис.5) (ввести текст, выбрать
шрифт, размер, напечатать текст).
Рисунок 5. Вставка текста.
При создании, текст располагается в специальном текстовом слое,
который можно перемещать, копировать, редактировать (нажатием левой
кнопки мыши на текст), изменять эффектами слоя. В том случае, если
необходимо применить элементы рисования или фильтры, то текстовый слой
нужно преобразовать в обычный Слой → Растрировать → Текст, но при
этом теряется возможность редактирования. Файлы форматов GIF и JPEG не
поддерживают текстовый слой, поэтому после сохранения графической
надписи в этих форматах изменение атрибутов текста невозможно.
Создание элементов управления (кнопок)
Для создания кнопок в AdobePhotoshop используют такие эффекты как
"тень", "объем", "свечение". Для того, чтобы эти эффекты можно было
применить необходимо работать со слоями.
Файлы форматов GIF и JPEG не поддерживают слои, поэтому после
сохранения в этих форматах отредактировать эффекты невозможно.
Кнопки, которые создаются для организации пунктов меню, должны
быть одинаковыми. Для этого графическое изображение готовой кнопки
копируется нужное число раз и в каждую копию вносятся необходимые
изменения.
Лекция № 9
Тема:Использование таблиц для структурирования данных в HTML
документе.
Возможности форматирования таблиц.
Цель: Познакомить с тэгами для формирования таблиц.
Основные вопросы:
1. Определение таблицы
2. Структура таблицы
3. Вложенные таблицы
Довольно часто на Web-страницах встречаются таблицы. Простейший
пример табличной организации данных — прайс-лист. Однако таблицы
можно использовать просто как способ форматирования текста, поскольку
таблица в HTML-документе может не содержать всех или некоторых
разграничительных линий (сетки). В большинстве случаев элементы текста
позиционируются как табличные.
Идея использования таблиц в качестве средства позиционирования
проста. Вы мысленно разбиваете окно на ячейки (клетки) и решаете, какой
элемент страницы в какую клетку поместить, — это хороший способ обойти
«естественное» расположение элементов друг за другом, которое
осуществляет браузер по умолчанию. На практике, как правило, для
позиционирования элементов вполне достаточно использовать простую
схему таблицы.
Таблица представляет собой особую часть документа HTML. Данные в
ней организованы в виде прямоугольной сетки, которая состоит из
вертикальных столбцов (колонок) и горизонтальных строк (рядов). Каждая
клетка таблицы называется ячейкой. Ячейки могут содержать текст, графику
и даже другую таблицу.
Таблицы состоят из трех основных частей: названия таблицы,
заголовков столбцов и ячеек. Таблица заполняется слева направо, ячейка за
ячейкой, начиная с левого верхнего угла и заканчивая правым нижним углом.
Каждая ячейка должна быть заполнена (для создания пустых ячеек
используются пробелы).
Описание таблицы в документе HTML начинается с тэга <TABLE> и
заканчивается тэгом </TABLE>. Если вы хотите, чтобы таблица имела
видимую рамку (границы), используйте атрибут BORDER, например:
<TABLE BORDER>
Атрибут BORDER может принимать аргумент (число), определяющий
ширину рамки, например:
<TABLE BORDER=10>
Для задания названия таблицы используется тэг <CAPTION> с
атрибутом выравнивания ALIGN, который может принимать значения ТОР
или BOTTOM (расположение названия вверху или внизу таблицы
соответственно), например:
<CAPTION ALIGN=TOP>Моятаблица</CAPTION>
Каждый ряд ячеек начинается с тэга <TR> и заканчивается тэгом
</TR>. Если ряд должен содержать заголовки столбцов таблицы, то
используются тэги <ТН> и </ТН>. Если в ячейках должны размещаться
данные, то используются тэги <TD> и </TD>.
Тэги заголовков и данных должны располагаться между тэгами рядов
<TR> и </TR>. Проще говоря, вы сначала определяете таблицу (тэг
<TABLE>), а затем внутри этого определения задаете строки (тэг <TR>) и
содержимое ячеек (тэг <TD> — для данных, тэг <ТН> — для названий
заголовков столбцов).
Приведем пример описания простой таблицы, встроенной в некоторый
текст. Обратите внимание на порядок заполнения ячеек таблицы. Сначала
определяется строка заголовков столбцов таблицы, затем аналогичным
образом создаются строки данных путем указания того, какие данные
должны располагаться в ячейках таблицы. Строка заголовков столбцов
задается так же, как и строка данных. Отличие состоит лишь в том, что при
создании строки заголовков внутри тэга <TR> используется тэг <ТН>, а при
создании строки данных — тэг <TD>.
<HTML>
<НЕАD><ТIТLЕ>Таблицы</Т1ТLЕ></НЕАD>
<BODY>
<Н2>Основные элементы таблиц</Н2>
<P>
Ниже приведен пример простой таблицы
<P>
<TABLE BORDER>
<CAPTION ALIGN=TOP>Cпиcoксотрудников</САРТION>
<TR>
<ТН>Имя</ТН><ТН>Должность</ТН><ТН>Оклад</ТН>
</TR>
<TR>
<ТD>Иван</ТD><ТD>Директор</ТD><ТD>1000</ТD></TR><TR>
<ТD>Петр</ТD><ТD>Бухгалтер</ТD><ТD>800</ТD></TR><TR>
<ТD>Федор</ТD><ТD>Рабочий</ТD><ТD>50</ТD>
</TR>
</TABLE>
</BODY>
</HTML>
Несколько ячеек могут быть объединены в одну как по горизонтали,
так и по вертикали. Объединение по столбцам применяют тогда, когда надо,
чтобы соседние столбцы имели общий заголовок. Объединение по строкам
делается в том случае, когда содержимое нескольких ячеек подряд
одинаково. Для объединения ячеек используются тэги COLSPAN и
ROWSPAN (по столбцам и по строкам соответственно). Аргументами этих
атрибутов являются количества объединяемых столбцов или строк.
Как шириной всей таблицы, так и шириной каждой отдельной ячейки
можно управлять. Ширину всей таблицы можно задать как в пикселах, так и
в процентах от ширины окна. Ширину ячеек можно задать также двумя
способами: в пикселах и в процентах от ширины таблицы. Следует иметь в
виду, что ячейки в одном столбце имеют одинаковую ширину, а ячейки
одной строки — разную ширину. Ширина таблицы задается атрибутом
WIDTH в тэге <TABLE>, ширина ячейки указывается тем же атрибутом в
тэге <ТН> или <TD>.
Текст и графику внутри ячеек таблиц можно выравнивать.
Горизонтальное и вертикальное выравнивание содержимого рядов задается с
помощью атрибута ALIGN в тэге <TR>. Выравнивание в отдельных ячейках
выполняет атрибут ALIGN в тэгах <ТН> и <TD>. Атрибут ALIGN может
принимать аргументы LEFT (по левому краю), RIGHT (по правому краю) и
CENTER (по центру).
Для определения дизайна рамок таблицы в браузере InternetExplorer
можно использовать атрибут FRAME тэга <TABLE>.
Разделительные линии между столбцами и рядами таблицы
описывается атрибутом RULES в тэге <TABLE>. Атрибут RULES может
принимать следующие значения, задающие способ изображения
разделительных линий:
ALL — все вертикальные и горизонтальные линии;
ROWS — только горизонтальные линии между рядами;
COLS — только вертикальные линии между столбцами;
NONE — не изображать разделительные линии.
Цветовое оформление таблиц производится с помощью атрибута
BGCOLOR, который принимает в качестве аргумента цвет в виде имени или
шестнадцатеричного числа. Если нужно установить цвет для всей таблицы,
то атрибут BGCOLOR вставляется в тэг <TABLE>. Для изменения цвета
только одного ряда этот атрибут вставляется в тэг <TR>. Задание цвета
отдельной ячейки обеспечивается атрибутом BGCOLOR внутри тэга <TD>.
Если в таблице имеются рамки, то можно указать и их цвет с помощью
атрибутов:
BORDERCOLOR — цвет всей рамки;
BORDERCOLORLIGHT — цвет светлой части рамки;
BORDERCOLORDARK — цвет темной части рамки.
Лекция № 10
Тема:Понятие фрейма. Области применения фреймов. Плавающие
фреймы. Недостатки использования фреймовой структуры.
Цель: дать определение фрейма, познакомить с атрибутами фремов.
Основные вопросы:
1.
Определение фрейма.
2.
Директива <FRAMESET>
3.
Недостатки использование фреймов
Фреймы — способ организации структуры сайта, при котором webстраница дробится на ряд отдельных составляющих и «собирается» в
главном окне браузера из нескольких независимых или вложенных окон. При
таком
представлении
каждый
компонент
страницы
является
самостоятельным документом HTML и встраивается в ту область экрана,
которая задается директивой<FRAMESET>. Данный способ применяется в
основном для дробления web-страницы на логические разделы: например, в
верхнем фрейме выводится рекламный баннер, в левом — элементы
навигации, в правом — основной текст страницы, в нижнем — сообщение об
авторских правах и адрес электронной почты разработчика ресурса. При этом
нажатие на любую из навигационных кнопок приводит к изменению
содержимого лишь одного окна, все остальные фреймы остаются без
изменений. Если содержимое фрейма не умещается в видимые границы окна,
браузер отображает полосы прокрутки.
В случае применения фреймов индексныйhtml-файл (index.html)
несколько отличается от обычного. Как известно, стандартный документ
HTML имеет два логических раздела: раздел заголовков <HEAD> и раздел
<BODY>, определяющий тело документа. При использовании фреймов
раздел <BOOY>заменяется на раздел<FRAMESET>. Все остальные
документы, отображаемые в отдельных фреймах, имеют стандартное
представление.
В общем виде синтаксис записи директивы <FRAMESET> выглядит
следующим образом:
<FRAMESET ROWS="значение" COLS="значение"
FRAMEBORDER="значение"
FRAMESPACING="значение">
<FRAME МАМЕ="имя" TARGET="значение" SCROLLING="yes. no
или auto" SRC="URL"
FRAMEBORDER="значение" NORESIZE>
<NOFRAMES>
<BODY>
Текст, отображаемый в браузерах, не поддерживающих фреймы.
</BODY>
</NOFRAMES>
</FRAMESET>
Очевидно, что общая структура представления фреймов во многом
схожа с представлением таблиц: тег <FRAMESET>, задающий параметры
отображения всех фреймов в документе, содержит необходимое количество
тегов <FRAME>, описывающих каждый отдельный фрейм. Причем
некоторые атрибуты, применяемые совместно с командой <FRAME>, могут
отменять параметры, заданные в атрибутах команды <FRAMESET>. Как и в
случае с <ТАВ1Е>, директива описания фреймов допускает вложение одного
элемента <FRAMESET> в другой.
Атрибут тега <FRAMESET> FRAMEBORDER определяет, надо ли
отображать на экране пользователя границы фреймов. Параметр этого
атрибута может принимать одно из двух значений: 1, если разделители
нужны (используется по умолчанию), или 0, если программист желает
сделать их невидимыми. Атрибут FRAMESPACING указывает на толщину
разделителей в пикселах. Атрибуты ROWS и COLS определяют
соответственно количество горизонтальных и вертикальных отрезков во
фреймовом наборе.
Параметры атрибутов ROWS и COLS можно задавать различными
способами: в пикселах, процентах и в относительных длинах. Если атрибут
ROWS в теге<FRAMESET> не указан, каждый столбец будет занимать всю
длину страницы, если не указан атрибут COLS, каждая строка растянется на
всю видимую ширину экрана. Параметры фреймов задаются слева направо
для горизонтальных элементов и сверху вниз для вертикальных. Например,
запись <FRAMESET COLS="50*.50Х"> разделит страницу вертикально на
две равные части, запись <FRAMESETROWS="250. 10%. *"> задаст
горизонтальное разделение страницы на три участка: первый — с
фиксированной высотой 250 пикселов, второй — высотой в 10 % от
оставшегося пространства, третий же займет все пространство, которое
останется свободным после создания первых двух окон. В этом примере при
задании параметров атрибута ROWS были использованы все три варианта
определения отрезков фреймового набора: в пикселах (250 точек), процентах
(10 %) и в относительных длинах (включение символа *). Разделения webстраницы на сетку 2x3 ячейки можно добиться, например, применением
следующих значений атрибутов директивы <FRAMESET>: <FRAMESET
ROWS="40%. 60%" COLS="33%. 34%. *">.
Команда <FRAME> может включать следующие атрибуты: NAME, в
котором задается уникальное имя для данного конкретного фрейма,
набранное с использованием символов латинского алфавита, TARGET,
содержащий информацию о целевом фрейме (рекомендуется использовать
значение по умолчанию — "contents"), SCROLLING, определяющий наличие
("yes"), отсутствие ("по") или отображение по мере необходимости ("auto")
полос прокрутки в текущем фрейме, SRC, в котором указывается адрес
открываемой в данном фрейме страницы, FRAMEBORDER, правила записи и
назначение которого аналогичны таковым в составе тега <FRAMESET>, и,
наконец, атрибут NORESIZE, наличие которого устанавливает запрет на
изменение пользователем размеров окна фрейма. Тег <FRAME> может также
содержать
ряд
других
необязательных
атрибутов,
таких
как
MARGINWIDTH, определяющий размер в пикселах пустого пространства,
оставляемого во фрейме в качестве правого и левого полей, и MARGINHEIGHT, задающий верхний и нижний отступы.
Директива <NOFRAMES>, включающая вложенные теги <BODY> и
</BODY>, позволяет записать произвольное количество html-кода, который
будет динамически преобразован в самостоятельнуюweb-страницу в случае,
если клиентский браузер не поддерживает фреймы.
Представление гиперссылок для страниц, использующих фреймы,
также требует определенной модификации, а именно — обязательного
использования атрибута TARGET:
<А HREF="URL" ТАР6ЕТ="_значение">Текст или элемент IMG</A>
Допустимые значения атрибута TARGET для применения тега<А> во
фреймовых наборах следующие:
_self — документ, с которым установлена гиперсвязь, открывается в
текущем фрейме;
_parent — отображение осуществляется в родительском окне фреймов,
независимо от того, какие параметры указаны в директиве <FRAMESET>;
_top — при активизации гиперссылки фреймы перестают
отображаться, а содержимое целевого документа выводится в отдельном
окне.
Если вместо значения атрибута TARGET подставить имя фрейма,
заданное вами ранее в качестве параметра атрибута NAME тега <FRAME>,
при активизации ссылки целевой документ загружается в окне с указанным
именем.
Ярким примером использования директивы <FRAMESET> может
служить приведенный ниже листинг индексного документа HTML,
использующего фреймы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4:0
Transitional//EN">
<HTML>
<HEAD>
<TITLE>FRAMESET EXAMPLE PAGE</TITLE>
</HEAD>
<FRAMESET
FRAMESPACING="0"
rows="64.*.64"
FRAMEBORDER="0">
<FRAME NAME="top" SCROLLING="no" TARGET="contents"
SRC="page_l.htm">
<FRAMESET COLS="150.*">
<FRAME
NAME="contents"
SRC="page_2.htm"
SCROLLING="auto">
<FRAME NAME="main" SRC="page_3.htm" SCROLLING="auto">
</FRAMESET>
<FRAME
NAME="bottom"
SCROLLING="no"
NORESIZE
SRO"page_4.htm">
<NOFRAMES>
<BODY>
<P ALIGN="CENTER">Этa страница содержит фреймы, но ваш
броузер не поддерживает их отображение.</Р>
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
На первый взгляд фреймы кажутся весьма привлекательными с точки
зрения удобства обслуживания сайта: например, для того чтобы изменить
состав навигационных элементов, нет необходимости вносить изменения во
все страницы вашего ресурса, достаточно лишь подправить документ,
отображающийся в соответствующем фрейме. Однако на практике
оказывается, что объективных недостатков у данной формы представления
web-страниц значительно больше, чем достоинств.
Во-первых, фреймы весьма сложны в разработке и настройке:
достаточно трудно оптимизировать такую страницу для корректного
отображения в разных версиях браузеров со всеми допустимыми экранными
разрешениями. В некоторых фреймах возможно периодическое появление
полос прокрутки, затрудняющих просмотр документа, а жесткий запрет на
отображение средств скроллинга может повлечь за собой исчезновение части
отображаемых во фреймах страниц заграницей видимой области экрана. Вовторых, фреймы распознаются далеко не всеми браузерами, в полной мере их
поддерживают лишь современные версии MicrosoftInternetExplorer и
NetscapeNavigator. Излишне говорить, что во Всемирной сети достаточно
много пользователей, на компьютерах которых установлены старые
браузеры. В-третьих, применение фреймов существенно затрудняет
управление навигацией сайта при помощи встроенных в браузер кнопок
«Вперед» и «Назад», поскольку они рассчитаны, в первую очередь, на работу
с документами размером в целый экран, но никак не с отдельными окнами, в
которые загружено множество документов. Нажатие на одну из этих кнопок
иногда может привести к совершенно непредсказуемым последствиям.
И последним, самым существенным недостатком фреймов является то,
что использующие их страницы не всегда корректно индексируются
поисковыми серверами. Проблема заключается в том, что большинство
поисковых машин индексирует не страницу, а текст. Предположим,
посетитель поискового сервера ищет ресурсы, в тексте которых встречается
словосочетание «web-дизайн». Такая фраза действительно содержится в
одном из документов вашего сайта, загружающемся, допустим, в правом
окне фреймового набора. Ссылка, которую включит в свой файл отчета
поисковый сервер, приведет пользователя именно на эту страницу, но не на
индексный документ, обеспечивающий разбиение сайта на фреймы. Таким
образом, страница, обычно появляющаяся в собственном окне, отобразится
на экране клиентской машины во весь экран, при этом элементы навигации,
сообщение об авторских правах и заголовок ресурса будут недоступны.
Из всего сказанного напрашивается простой и вполне очевидный
вывод: использовать фреймы лучше всего только тогда, когда это
действительно необходимо, например, при создании web-чата или
интерактивной доски объявлений. Во всех остальных случаях от их
применения лучше отказаться.
Лекция № 11
Тема:Каскадные таблицы стилей. Модель форматирования.
Применение таблиц стилей
Цель: Рассмотреть технологию каскадных таблиц стилей.
Основные вопросы:
1.
Язык HTML и каскадные таблицы стилей CSS.
2.
Введение в таблицы стилей CSS.
Для представления информации в глобальной сети WWW был
разработан
и
постоянно
совершенствуется
язык
HTML
(HyperTextMarkupLanguage - язык разметки гипертекста). Гипертекстовые
документы для WWW представляют собой текстовые файлы, размеченные в
соответствии со стандартом языка HTML. С 1994 года по настоящее время
разработка проводится под эгидой надгосударственной организации
WorldWideWebConsortium
(W3C).
Информацию
о
стандартах,
рекомендациях и перспективах развития не только языка HTML, но и целого
ряда других web-технологий, можно найти в Интернете по адресу
http://www.w3.org .
Технология каскадных таблиц стилей (CascadingStyleSheets) CSS
предложена W3C Консорциумом как средство задания параметров
оформления элементов HTML документов. В 1996 году была опубликована
Спецификация CSS1 (Каскадные таблицы стилей первого уровня). По
существу, применение CSS позволяет переопределить стилевые таблицы
браузера, применяемые по умолчанию, и задать свои параметры отображения
для любого элемента документа. К сожалению, большинство браузеров не
поддерживает CSS в полной мере, зачастую возникает проблема
совместимости с разными браузерами.
Таким образом, логическая структура документа определяется
элементами HTML-разметки, в то время как форма представления каждого из
этих элементов задается CSS-описателем элемента.
Для создания динамичных, интерактивных страниц, включающих в
себя массу нестандартных возможностей, необходимо знать современные
технологий web-программирования. Все технологии web-программирования
можно разделить на две основные группы: программирование на стороне
клиента и на стороне сервера. Программный код, обеспечивающий
интерактивность web-страниц, называется сценарием. Сценарии на стороне
клиента выполняются под управлением браузера. Сценарии на стороне
сервера выполняются под управлением Web-сервера. Преимущество
сценариев на стороне клиента состоит в том, что они могут проверять
корректность информации, введенной пользователями, и обрабатывать ее, не
обращаясь к серверу. Чаще всего сценарии, предназначенные для
выполнения на стороне клиента, создаются на языках JavaScript и VBScript.
Сценарии, предназначенные для выполнения на стороне сервера,
располагаются на сервере. Принимая запрос пользователя, в котором указана
программа, сервер запускает эту программу на выполнение. В результате
выполнения программы выходные данные передаются web-серверу, а затем
клиенту. Для написания сценариев, работающих на стороне сервера, обычно
используются такие технологии, как Perl , ASP , ColdFusion , PHP , JSP и SSI.
Введение в таблицы стилей CSS.
Существует несколько различных способов применения стилей к
объектам документа.
1) В большинстве html-тэгов, может быть использован атрибут style,
значением которого является набор правил в синтаксисе CSS. Эти правила
будут применены только к тому элементу, в котором объявлены. Например:
Html-код <p>Новыйабзац
<p style="color:#FF0000; fontsize:24px">Новыйабзац
Просмотр Новый абзац текста Новый абзац текста
2) В разделе <head>…</head> в контейнере style может быть описан
набор правил стиля в соответствии с синтаксисом CSS . Эти правила будут
применены к элементам данного документа. Элемент style позволяет
определить стиль отображения для стандартных тэгов html-разметки, и для
произвольных классов (селектор class). Определенный в CSS класс
связывается с любым html-тэгом при помощи атрибута class.
Например:
Html-код
Просмотр
<html>
Новый абзац текста.
<head>
Еще один.
<title>CSS</title>
Заголовок 1
<style>
p
{ color:#FF0000;
font-size:24px }
.blue-20 {color:#0000FF; fontsize:20px; font-family:Arial}
</style>
</head>
<body>
<p>Новыйабзацтекста.
<p class=blue-20>Ещеодин.
<h1 class=blue-20>Заголовок
1</h1>
</body></html>
3) Наиболее рационально с точки зрения разработки сайта и его
сопровождения сохранять стилевые описания, актуальные для ряда
документов в отдельных файлах. При необходимости можно будет внести
нужные изменения в файлы описаний, и внешний вид документов сайта
соответственно будет изменен при отображении браузером. В разделе
<head>…</head> внешние таблицы стилей присоединяются с помощью
элемента <link>…</link>. Например:
Html-код
файла Html-код файла css.htm
Просмотр
css.css
p { color:#FF0000;
<html><head>
Новый абзац
font-size:24px
<title>CSS</title>
текста.
}
<link
type="text/css" Еще один.
.blue-20 {
rel="stylesheet" href="css.css"
Заголовок 1
</head>
color:#0000FF;
<body>
font<p>Новыйабзацтекста.<p
size:20px;
class=blue-20>Ещеодин.
font-family:Arial
<h1 class=blue-20>Заголовок
}
1</h1>
</body></html>
При описании стилей стандартных тэгов html-разметки возможны
следующие конструкции.

через запятую перечисляет селекторы-элементы, которые
отображаются одинаково;

запись через пробел определяет стиль второго селектора, в случае
его вложения в первый тэг.
Например:
Html-код файла css.css
b, i {color:#008000;
font-style:normal;
font-weight:normal
}
Html-код файла css.htm
<html>
<head>
<title>CSS</title>
<link type="text/css" rel="stylesheet"
href="css.css">
</head><body>
<b>Жирныйтекст</b><br>
<i>Текст курсивом</i><br>
<b><i>Жирный + курсив</i></b>
</body></html>
Просмотр
Жирный
текст
Текст
курсивом
Жирный +
курсив
b i {color:#008000;
Жирный
font-style:normal;
текст
font-weight:normal
Текст
}
курсивом
Жирный +
курсив
Существуют псевдоклассы и псевдоэлементы, которые позволяют
задать особые стили, связанные с элементами <a> и <p>. От названия
элемента они отделяются двоеточием.
Псевдоклассы.
a:link { … }- для непосещенных.
a:visited { … }- дляпосещенных ссылок.
a:hover { … } - для ссылок на которые наведен курсор мыши.
a:active { … } - для активизированных ссылок.
a:focus { … } - для ссылок получивших фокус.
Псевдоэлементы.
P:first-line { … } – для первой буквы абзаца.
P:first-letter { …} – для первой строки абзаца.
Общее описание стиля элемента выглядит следующим образом.
Имя тэга или.имя класса { объявление свойства; …; объявление
свойства }.
Объявление свойства состоит: название свойства: значение или список
через пробел.
Лекция № 12
Тема:Применение html для описания веб-документа
Цель: рассмотреть специальные мета-тэги для описания свойств вебдокумента.
Основные вопросы:
1. Мета-тэги
2. Предназначение мета-тэгов
Помимо основных тегов HTML, предназначенных для разметки вебстраницы, существуют и специальные, мета-теги, которые предназначены
для описания свойств данного веб- документа. Некоторые из них
рекомендуется использовать обязательно, а некоторые могут быть внесены в
страницу по вашему желанию. Вообще же, их очень большое количество. Но
не все из разработанных мета-тегов в настоящее время применяются. То есть,
они зарезервированы на использование в будущем.
Остановимся на основных и наиболее употребляемых мета- тегах.
Мета-теги в HTML- коде расположены внутри тега HEAD. Они делятся на
два основных вида, которые в свою очередь несут разную смысловую
нагрузку в своём применении. Закрывающий тег для них не применяется.
Первый вид NAME. Мета-теги вида NAME предназначены для описания
конкретной страницы, и несут информацию о её создателе, его адресе, сайте
и так далее.
Также они несут информацию для поисковиков в виде краткого
описания страницы, основных ключевых слов и рекомендаций для
возможных действий поисковых роботов. Например: Author, Copyright,
Description, Generator, Keywords, Resource-type, Robots, Revisit, Subject, URL
идругие.Ко второму виду мета- тегов HTTP -EQUIV относятся те, которые
непосредственно участвуют в создании и формировании заголовка вебстраницы, а также те, которые несут информацию о режиме обработке этой
страницы.
Например: Content-Language, Content-Style-Type, Content- Type, Expires,
Pragma, Refresh, Set-Cookie, Window-Target идругие.Например, страница
(HEAD) можетвыглядетьпримерновоттак: <head>..... <meta name="author"
lang="ru"
content="kasatkinigor"><meta
name="copyright"
content="www.oqbo.ru"><meta
name="description"
content="Краткоеописаниестраницы"><meta
name="keywords"
content="оптимизация, мета-теги, теги"><meta name="url" content="
http://www.oqbo.ru/read.php?b lock=14 ">..... <meta http- equiv="content- type"
content="text/html; charset=windows-1251">..... </head> C точки зрения
оптимизации сайта для поисковиков остановимся внимание на метатегахDescription и Keywords, так остальные не играют особой роли и
поисковыми системами учитываются мало.
Хотя с ростом поискового спама, применяемого разными
нечистоплотными веб- мастерами, и эти мета-теги уже учитываются слабо.
Особенно это касается тега Keywords. Но всё же пока не все отказываются от
них. Итак, тег Description. Это краткое описание конкретной веб- страницы.
Очень частая ошибка веб-мастера в том, что он делает на всех или почти всех
страницах своего сайта одинаковый Description.
Это в корне неправильно. Для каждой страницы сайта необходимо
делать свой уникальный Description, который несёт смысловую нагрузку
текущей страницы. Это описание обычно принимается во внимание всеми
поисковыми системами и отображается в их поисковой выдаче. Длина этого
тега может быть различной, но поисковиками воспринимается не вся
информация, так как существует ограничение по количеству знаков. При
оптимизации сайта этому мета-тегу следует уделить самое большое
внимание по сравнению с другими.
Тег Keywords менее значимый по сравнению с Description, но
желательно его тоже прописать в коде. В Keywords указываются самые
употребляемые ключевые слова, под которые заточена данная страница.
Причём нужно вписывать слова, которые реально присутствуют на странице.
А то иногда веб-мастера заносят туда слова, абсолютно не имеющие
отношение к странице, но довольно-таки популярные в Интернете. Это, вопервых, не даёт никакого эффекта в увеличении веса и популярности
страницы, а, во- вторых, может быть расценено как поисковый спам со
стороны поисковых систем. Поэтому при написании мета- тега Keywords не
нужно лишней фантазии.
Лекция № 13
Тема:Правила и основные этапы разработки сайта.Последовательность
разработки сайта.
Цель: Рассмотреть основные этапы разработки сайта.
Основные вопросы:
1. Содержание и структура Web-сайт
2. Этапы разработки web-сайта:
Web-сайт - это информация (представленная в определенном виде),
которая располагается на web-сервере и имеет свое уникальное имя (адрес).
Web-сайт представляет собой некоторый набор текстовой и графической
информации, организованный в виде определенного количества web-страниц,
связанных между собой гипертекстовыми ссылками.
Содержание, структура и дизайн web-сайта.
При создании web-сайта основное внимание должно быть уделено
таким его составляющим как содержание (контент), структура (навигация) и
дизайн (оформление).
Содержаниеweb-сайта, должно соответствовать целям его создания,
учитывать особенности целевого сегмента посетителей сайта, быть в
определенной степени уникальной и актуальной, чтобы привлечь внимание
посетителей. В соответствии со своим содержанием web-сайты можно
разбить на несколько групп.

Личные (персональные), содержащие информацию, которую
создатель сайта хочет довести до посетителей Интернета, поделиться своими
знаниями, предложить на коммерческой основе услуги и т.д.

Информационные (корпоративные) создаются фирмой или
коммерческой организацией, функциональным назначением сайта является
создание имиджа фирмы, рекламирование и оказание услуг, осуществление
торговли с помощью Интернета и др.

Образовательные - представляют собой сайты учебных
заведений, библиотек, дистанционного образования, информационное
наполнение которых посвящено образовательным ресурсам.

Развлекательные, т.е. содержащие информацию развлекательного
характера – игры, картинки, гороскопы и т.п.
К разработке содержимого следует подходить по мере увеличения
детализации - необходимо начинать с общих сведений, потом переходить к
более конкретным, и только потом - к еще более конкретным.
Структура (навигационная схема) создаваемого web-сайта зависит от
того, как связаны между собой его страницы. Различают следующие
варианты структуры.

Линейная, при которой осуществляется последовательный
переход от одной web-страницы к другой.

Иерархическая, при которой осуществляются переходы по ветвям
древовидной структуры, в соответствии с логикой.

“Каждая к каждой” при которой с любой web-страницы можно
перейти на любую другую. Приобретает в Интернет все большую
популярность.

Смешанная, при которой в различных разделах web-сайта
используются разные навигационные схемы.
Выбор структуры web-сайта зависит от его функционального
назначения, числа страниц и того, насколько легко пользователи могут
получить нужную информацию. За счет рационального выбора схемы
навигации можно исключить ситуации, при которых посетитель сайта
“запутывается” в его страницах.
Дизайн играет важную роль в привлечении внимания пользователей
сети Интернет к web-сайту, однако универсального решения в этой области
не существует. Дизайн web-страниц предполагает разработку следующих
элементов: цвет, шрифт, графика. При этом сеть Интернет налагает
некоторые ограничения на возможности оформления web-страниц - время
загрузки web-страниц, пропускная способность канала передачи данных,
размер графических файлов, совместимость браузеров, передача цветовой
палитры и др.
В WWW используются три формата графических
изображений.
GIF (GraphicInterchangeFormat) – форматграфическогообмена. GIFфайлы – это файлы растровых изображений. При сохранении изображения в
этом формате количество используемых цветов не должно превышать 256
(иначе говоря, глубина цвета до 8 бит на пиксель ). Графическая информация
при сохранении GIF-файла сжимается при помощи специальных алгоритмов
сжатия с минимальными потерями информации. Этот формат может
содержать несколько изображений в одном файле и используется для
создания прозрачной и анимированной графики. Обычно этот формат
используют для небольших изображений, содержащих области однородной
окраски с четкими границами.
JPEG (JointPhotographicExpertsGroup) – объединенная группа экспертов
в фотографии. JPEG – файлы представляют собой растровые изображения, в
которых может быть использовано до 16.7 млн. цветов. При сохранении
JPEG-файла происходит сжатие информации, которое сопровождается
потерями информации. Т.е. при каждом сохранении такого файла качество
изображения ухудшается. Обычно используется для сохранения фотографий,
карт и других изображений с тонкими цветовыми переходами.
PNG (PortableNetworkGraphics) – переносимая сетевая графика. PNG
(произносится «Пинг») – растровый формат, предназначенный для хранения
и передачи растровых изображений: черно-белых и альфа данных – до 16
бит, а цветных – до 48 бит (truecolor). Он использует прогрессивный метод
сжатия без потерь, позволяет сохранять в файле палитру, текстовую
информацию и обеспечивает возможность задания степени прозрачности от
нулевой до 100% для каждой точки изображения. Формат PNG не
поддерживается устаревшими браузерами ( InternetExplorer версии ниже 4.0,
NetscapeNavigator версии ниже 4.04, Opera версии ниже 3.51).
Выбор оптимального формата для графического изображения,
размещаемого на Web-странице, осуществляется с учетом таких критериев
как объем и качество. Т.е. подбирается такой формат, который бы
обеспечивал приемлемое качество при минимальном объеме. Оптимальный
для конкретного изображения формат зачастую можно выбрать только
экспериментальным путем.
При разработке web-сайта рекомендуется.

На первой (титульной) странице размещать заголовок сайта,
ссылки на страницы с основной информацией и некоторые общие сведения
(н-р: имя автора, счетчик посетителей, адрес электронной почты).

Ограничивать длину страниц 3-4 экранами, первая страница - 1
экран.

При необходимости со страниц содержащих основную
информацию организовывать ссылки на страницы с более подробной
информацией.

На всех страницах сайта иметь ссылку на титульную страницу.

Оформлять все страницы в едином стиле (если сайт очень
большой, то придерживаться одного стиля в каждом разделе).

Не загружать страницы графикой. При размещении на сайте
графического файла большого объема, организовывать на него гиперссылку с
указанием размера.
Выделяют следующие этапы разработки web-сайта:
Планирование. На этом этапе должны быть получены ответы на
следующие вопросы: цель создания web-сайта, аудитория, на которую он
рассчитан,
какая информация будет
размещена.
Целесообразно
познакомиться с сайтами, тематика которых близка к
тематике
создаваемогоweb-сайта, с тем, чтобы избежать ошибок или поучиться на
положительных примерах. Определяются категории, подразделы сайта,
количество страниц в каждом разделе, подразделе. Разрабатывается
структурная (навигационная) схема сайта.
Реализация. На этом этапе проводится подготовка текстового и
графического материала (печать, сканирование, оптимизация). Материал
разбивается по файлам в соответствии со структурой. Организовываются
ссылки между web-страницами сайта. Разрабатывается дизайн. На этом этапе
определяются: фон, на котором будет расположена информация, цвет текста,
цвет гипертекстовых ссылок, знаки навигации, выделение разделов графикой
или текстовыми ссылками, представление фотографического материала.
Тестирование. После того как web-сайт создан, необходимо проверить
правильность переходов со страницы на страницу. В связи с тем, что
браузеры разных фирм иногда по-разному интерпретируют встречающиеся в
HTML-документе команды разметки, а браузеры устаревших версий "не
понимают" описаний, соответствующих новым стандартам, желательно
просмотреть web-сайт в браузерах разных производителей и разных версий,
при разных разрешениях экрана, добиваясь приемлемого результата.
Публикация. Размещение сайта в Internet. Для этого необходимо
разместить все файлы web-сайта на web-сервере, предоставляющем такие
услуги.
Рекламирование. На этом этапе предполагается взаимный обмен
ссылками с другими сайтами, схожими по тематике, включение адреса
сайта в письма, визитные карточки, брошюры, буклеты и т.д., регистрация
сайта в популярных поисковых серверах;
Сопровождение. После создания web-сайта нужно не забывать
обновлять информацию, расширять материал, улучшать дизайн, в противном
случае велика вероятность того, что потенциальные посетители web-сайта не
будут к нему возвращаться.
Лекция № 14
Тема:Создание интерактивных html-документов
Цель: знакомство с языком JavaScript, возможности
Основные вопросы:
1. Введение в язык JavaScript.
2. Элементы языка
JavaScript - язык программирования предназначенный для создания
интерактивных HTML-документов с использованием сценариев. С помощью
сценариев поддерживается диалог с пользователем, обеспечивается
привлекательный вид web-страниц, осуществляется навигация по страницам
сайта, поиск элементов на странице и многое другое. Основой языка является
понятие объекта (каждый элемент с которым работает JavaScript
представляет собой объект). JavaScriptвнедрен в HTML (т.е. работает только
совместно с HTML), обеспечивает работу в среде, поддерживаемой
браузерами. Язык JavaScript позволяет обрабатывать исходные данные,
представленные с помощью различных элементов управления, создавать
тестирующие программы, осуществлять контроль вводимых данных и
многое другое.
Программа (сценарий) на языке JavaScript представляет собой
последовательность операторов, которые обрабатываются встроенным в
браузер интерпретатором. Надо стремиться к тому, чтобы написанные
сценарии корректно выполнялись в любом браузере.
Сценарии, написанные на языке JavaScript, могут располагаться
непосредственно в HTML-документе между тегами <script> и </ script>. Эти
тэги означают, что в документ помещен сценарий JavaScript.Одним из
параметров тега <script> является параметр language, он определяет
используемый язык сценариев. Для языка JavaScript значение параметра
равно "JavaScript". Если используется язык сценариев VBScript, то значение
параметра должно быть равным "VBScript". В случае использования языка
JavaScript параметр language можно опускать, так как этот язык используется
браузером по умолчанию.
Обычно браузеры, не поддерживающие какие-либо тега HTML, их
просто игнорируют. Попытка браузера проанализировать содержимое
неподдержанных тегов может привести к неверному отображению страницы.
Чтобы избежать такой ситуации, рекомендуется помещать операторы языка
JavaScript в теги комментария<!--...->. Дли правильной работы
интерпретатора перед закрывающим тегом комментария -> следует
поставить символы //. Итак, для размещения сценария в HTML-документе
следует написать следующее:
<script language= "JavaScript">
<! операторыязыка JavaScript.
//->
</script>
Документ может содержать несколько тегов <script>. Все они
последовательно обрабатываются интерпретатором JavaScript. Тег <noscript>
определяет HTML-код, отображаемый на экране в случае, если JavaScript не
поддерживается браузером или поддержка отключена. Этот тег следует после
кода, заключенного в теги <script> и </script>. Если поддержка включена, то
тег <noscript> игнорируется. В дальнейших примерах будем считать, что
поддержка JavaScript включена. В программах на JavaScript можно
использовать комментарии. Для того чтобы задать комментарий,
располагающийся на одной строке, достаточно перед текстом комментария
поставить две косые черты. Если же поясняющий текст занимает несколько
строк, то его следует заключать между символами /* и */. В JavaScript
строчные и прописные буквы алфавита считаются разными символами.
Пример 1. Этот сценарий познакомит вас с самыми основами создания и
размещения JavaScript на веб-странице:
<SCRIPT LANGUAGE="javascript">
document.write("<FONT COLOR='RED'>Этокрасныйтекст</FONT>")
</SCRIPT>
Наш первый сценарий помещает текст на веб-страницу. В данном случае
текст будет красного цвета.
Функции
Основным элементом языка JavaScript является функция. Описание
функции имеет вид: function F (V) {S}, где F - идентификатор функции,
задающий имя, по которому можно обращаться к функции, V - список
параметров функции, разделяемых запятыми, S - тело функции, в нем
задаются действия, которые нужно выполнить, чтобы получить результат.
Необязательный параметр returnе определяет возвращаемое функцией
значение. Описание функции не может быть вложено в описание другой
функции. Параметры функции внутри ее тела играют ту же роль, что и
обычные переменные, но начальные значения этим параметрам задаются при
обращении к функции. Если описание функции имеет вид function F <v1,v2, .
. . ,vn {S}, то вызов функции должен иметь вид: F (e1,e2,. .. ,еn), где е1,е2,. . .
,еn -выражения, задающие фактические значения параметров. Параметры
v1,v2,. . . ,vn, указанные в описании функции, называются формальными
параметрами, чтобы подчеркнуть тот факт, что они получают смысл только
после задания в вызове функции фактических параметров е1, е2,. . ., еn, с
которыми функция затем и работает. Бели в функции параметры
отсутствуют, то есть описание функции имеет вид function F {S}, то наличие
скобок в операторе вызова функции обязательно, то есть вызов функции в
этом случае должен иметь вид: F().
Обычно все определения и функции задаются в разделе <HEAD> документа.
Это обеспечивает интерпретацию и сохранение в памяти всех функций при
загрузке документа в браузер.
Пример 2.
Этот
сценарий показывает пример использования
функций:<HTML>
<HEAD>
<TITLE>Пример использования функций</TITLE>
<SCRIPT LANGUAGE="javascript">
<!-functiondateinbar() // описываемфункциювыводадаты
{
var d = newDate(); // получаем системную дату
var y = d.getFullYear(); // выделяем год из даты
varda = d.getDate(); // выделяем число из даты
var m = d.getMonth() + 1; // выделяем месяц из даты
var t = da + '/' + m + '/' + y; // формируем информацию для вывода
defaultStatus = "Вы прибыли на страницу " + t + "."; // выводим готовую дату
}
// -->
</SCRIPT>
</HEAD>
<BODY
BGCOLOR="white"
onLoad="dateinbar()">
//
вызываемфункциювыводадаты
<p> Дата вашего прихода на страницу </p>
</BODY>
</HTML>
В результате действия сценария в строке состояния отображается дата
открытия пользователем Web-страницы.
Литералы
Простейшие данные, с которыми может оперировать программа,
называются литералами. Литералы не могут изменяться. Литералы целого
типа могут быть заданы в десятичном (но основанию 10),
шестнадцатеричном (по основанию 16) или восьмеричном (по основанию 8)
представлении. Литерал целого типа в десятичном представлении
записывается как последовательность десятичных цифр со знаком или без
него, например, 15, 123, -156, +3567.
Кроме целых и вещественных значений, в языке JavaScript могут встречаться
так называемые логические значения. Существуют только два логических
значения: истина и ложь. Первое представляется Литералом true, второе false. В некоторых реализациях JavaScript может быть использована единица
в качестве true и ноль в качестве false.
Строковый литерал представляется последовательностью символов,
заключенной в одинарные или двойные кавычки. Примером строкового
литерала может быть строка "результат" или 'результат'.
Переменные
Переменные используются для хранения данных. Переменные в
сценарии представляются с помощью идентификаторов. Идентификатор
должен начинаться с буквы латинского алфавита, либо с символа
подчеркивания. Далее может следовать последовательность, содержащая
буквы латинского алфавита, цифры или знак подчеркивания, например, d, y,
testl, _my_test, test_l. Тип переменных зависит от хранимых в них данных.
При изменении типа данных меняется тип переменной. Определить
переменную можно с помощью оператора var, например, vartestl. Тип
переменной tesl1 не определен. Тип переменной станет известен только
после присвоения неременной некоторого значения. Значение переменной
изменяется в результате выполнения оператора присваивания. Оператор
присваивания может быть использован в любом месте программы. Он может
изменить не только значение, но и тип переменной. Оператор присваивания
выглядит так а=b, где а - переменная, которой мы хотим задать некоторое
значение, b - выражение, которое определяет новое значение переменной.
Переменные, описанные в сценарии как в части <HEAD>, так и в части
<BODY>, имеют одну и ту же область действия, доступны любому сценарию
текущего документа. Такие переменные называются глобальными, в отличие
от локальных переменных, определенных в теле функции.
Выражения
Выражения строятся из литералов, переменных, знаков операций,
скобок. В результате вычисления выражения получается единственное
значение, которое может быть либо числом (целым или вещественным),
строкой, либо логическим значением. Используемые в выражении
переменные должны быть инициализированы. Если при вычислении
выражения встречается неопределенная или неинициализированная
переменная, то фиксируется ошибка. В JavaScript определен литерал null для
обозначения неопределенного значения. Если переменной присвоено
значение null, то она считается инициализированной.
Обработчики событий
Интерактивные документы создаются с помощью форм. Действие
пользователя (например, щелчок кнопкой мыши) вызывает событие, которое
производится, в основном, с элементами форм HTML. Обычно перехват и
обработка события задается в параметрах элементов форм. Имя параметра
обработки события начинается с приставки on, за которой следует имя
самого события. Например, параметр обработки события Click будет
выглядеть onClick. Значением параметра обработки события могут быть
операторы языка JavaScript оператор присваивания.
Лекция № 15
Тема:Виды сайтов. Требования, предъявляемые к сайту в зависимости
от его направленности. Стандартные элементы навигации. Представления о
композиции сайта.
Цель: познакомить с классификацией, с элементами навигации и
композицией сайтов.
Основные вопросы:
1. Классификация сайтов
2. Требования к сайтам.
3. Система навигации
4. Композиция сайта.
В зависимости от целей, сайты условно можно разделить на несколько
категорий: электронная визитка, корпоративный сайт, интернет-магазин,
персональный, промо-сайт, информационный портал.
Электронная визитка
Небольшой сайт объемом 1-5 страниц. Дизайн сайта выполнен с учетом
фирменного стиля. Обычно состоит из следующих разделов: о компании,
услуги, цены, контакты, форма обратной связи.
Корпоративный сайт
Корпоративные
сайты
это
классика
Интернета.
Полнофункциональный web-сайт. Обладает большим объемом и
разветвленной структурой представления данных, позволяющей разместить
всю интересующую Вашего потенциального клиента информацию.
Интернет-магазин
Может включать в себя различные интерактивные формы (гостевая
книга, форум, задай вопрос), но обязательно каталог товаров и корзину
заказов. Часто на главную страницу выносятся новинки товаров, "хиты
продаж", специальные предложения. Эксклюзивный дизайн нацелен на
увеличение числа продаж, носит специфический характер.
Персональный сайт
Сайт предназначен для ознакомления широкой аудитории с
биографией и жизненным кредо известных людей. Обязательно
присутствуют интерактивные формы, предоставляющие возможность
общения - от "Задайте вопрос" и "Книги отзывов" до "Форума" и "Чата".
В зависимости от рода деятельности известной личности, разделы у
персональных сайтов могут быть очень разными, так же как и эксклюзивный
дизайн.
Промо-сайт
Сайты, посвященные разовым событиям и акциям. Выставка или
конференция, праздник или концерт. Освещение таких мероприятий через
специальные веб-ресурсы, называемые "промо-сайтами", является хорошим
тоном и показателем высокого уровня их организации и проведения.
Информационный портал
Сайт, содержащий большое количество информации определенной
тематики и возможность быстрого поиска необходимых материалов.
Содержит различные интерактивные формы: форум, чат, обсуждения,
анкеты, опросники, голосования и др.
Требования к сайту:
Страницы сайта должны иметь статичные адреса, например:
http://www.ingate.ru/index.htm
Навигация и другие ссылки не должны быть организованы через
Javascript или другие скрипты
Заголовки страниц (<TITLE>) должны быть изменяемы. При большом
числе страниц процесс изменения должен быть автоматизированным
META данные (DESCRIPTION, KEYWORDS) должны быть изменяемы
Текстовые заголовки (<H1> … <H3>) должны быть изменяемы
Все тексты на страницах сайта и их оформление (добавление тегов
<B>, <I>, <H1>…<H3>, атрибут ALT у картинок) должны быть изменяемы
В текст страниц сайта можно добавлять другие теги
Не обязательна, но крайне желательна возможность установки
собственной системы сбора статистики компании Ingate
Должна быть возможность установки собственныхphp/asp-скриптов
Система навигации сайта - система программных и визуальных
средств, с помощью которых Посетитель может перемещаться по данному
сайту и находить нужную ему информацию. Поскольку веб-сайт
представляет собой, упрощенно говоря, набор документов, связанных
гиперссылками, то под термином «навигация» мы понимаем в основном то,
как организована на страницах сайта работа с гиперссылками.
К элементам навигации относятся:
1. Непосредственно сами ссылки, размещенные на страницах сайта:
текстовые ссылки (ссылки с определенных слов, фраз);
графические (ссылки с элементов дизайна, фотографий, пиктограмм,
баннеров и т.п.)
ссылки для перемещения внутри конкретной страницы (так
называемые «якоря») – что бывает важно, если страница содержит большой
объем текстовой информации.
2. Навигационные меню:
текстовые
графические
выпадающие и т.п.
3. Различные формы поиска по сайту:
простые (по ключевым словам)
сложные (по набору критериев, например в каталоге товаров – по
географическому расположению магазина, по дате публикации информации,
по цене и т.п.)
4. Так называемая «карта сайта»
5. Система адресации, существующая на сайте, также относится к
системе навигации, поскольку один из способов, которым Посетитель может
попасть на страницу сайта – это вручную набрать адрес страницы в адресной
строке броузера
6. Кроме того, можно говорить и о так называемой «визуальной»
навигации, упрощающей Посетителю поиск информации на конкретной
странице сайта – например, главной. Этим задачам могут служить различные
графические и текстовые элементы – заголовки, «айстопперы»,
пиктограммы, рамки, правильно организованная верстка сайта и т.п.
Визуальная навигация особенно важна для крупных порталов, где в рамках
одной страницы может находиться большое количество информационных
блоков – новостных, рекламных и т.п.
К задачам навигации на сайте можно отнести:
обеспечение юзабилити, упрощение поиска информации для
Посетителя – сделать этот процесс интуитивно понятным и быстрым;
удержание Посетителей на сайте (чтобы посетитель не покинул сразу
сайт, а совершил полезную для себя «экскурсию» по сайту; в идеале –
вернулся на сайт повторно);
увеличение вероятности посещения Посетителем страниц, нужных
владельцам сайта, и в итоге – совершения Посетителем определенных
действий (заполнения формы заказа; совершения звонка и т.п.)
улучшение индексации сайта поисковыми системами и т.п.
Ниже приведены правила композиции, которые помогут вам, при
создании вашего сайта.
Целостность - в правильной композиции ни один из элементов нельзя
изъять, добавить или передвинуть без ущерба для целого. Для нахождения
целостной композиции обычно рассматривают будущее изображение как
набор пятен - силуэтов отдельных элементов, которые компонуют на
плоскости до достижения необходимого эффекта. Все элементы композиции
должны быть связаны чем-либо воедино - стилем рисунка, выравниванием,
цветами, размерами и т.д. Применительно к вебдизайну - не может быть
целостной композиция, где дизайн страницы никак не перекликается с
логотипом.
Выразительность
неформализуемое
качество
композиции,
проявляется в том, что изображение быстро захватывает внимание зрителя,
ясно показывает процессы, которые дизайнер хотел отобразить. Фактически это соответствие вашей идеи и формы, найденной для ее выражения. Когда
зрители не понимают вашу идею - скорее всего, хромает композиция, а не
восприятие зрителя :-)
Выразительность проявляется в умелом использовании контрастов по
цветам, светлоте, размерам. Например, эффектно смотрятся объемные
фигуры (контраст бликов и тени предмета). Контраст тем выразительней, чем
больше он соответствует идее изображения (например контраст заголовка и
текста по размеру соответствует идее большей важности заголовка).
Выявление центра - подчеркивание той части, которая выражает
главную идею. Как правило, центр находится где-то чуть выше середины
экрана, но он может быть смещен каким-либо "активным" элементом
композиции - ярким, большим предметом, другим контрастным объектом.
Примером смещения композиции является картина Репина "Не ждали", где
зритель сначала теряется в догадках взирая на пустой центр и затем видя
направления взглядов всех участников композиции смотрит на двоечника центр композиции :-)
На практике часто используют метод выделения центра путем
вписывания композиции в простую геометрическую фигуру - квадрат, ромб,
треугольник (4,5,6 >), круг, овал. Типичный пример - использование линий,
соединяющих логотип и кнопки либо очерчивающих весь экран и
захватывающих кнопки.
Вместе с тем, необходимо лишь примерное следование геометрии со
смещениями, более ярко выделяющими центр.
Неоднородность плоскости изображения - различие в восприятии
объектов в зависимости от их положения в поле изображения изучалась
учеными экспериментально. В результате доказано:
1. Наклонные отрезки воспринимаются уходящими в глубину в
сторону конца отрезка, дальнего от края экрана.
2. Если один конец наклонного отрезка примыкает к краю экрана, то
"эффект объема" пропадает и отрезок воспринимается лежащим на той же
плоскости, что и плоскость края экрана.
3. Предмет дальше от края экрана воспринимается лежащим в глубине,
ближе - на поверхности.
4. Низ композиции воспринимается более тяжелым, устойчивым,
поэтому дисгармоничны композиции, где тяжелый верх (напр. большие
объемные буквы) и легкий низ (обычный текст).
3. ПРАКТИЧЕСКИЕ И ЛАБОРАТОРНЫЕ ЗАНЯТИЯ
Лабораторная работа № 1
Тема:
Выработка контента (содержимого) Web-сайта.
Цель:
датьпонятиеконтента.
Краткие теоретические сведения по теме
Конте́нт (англ. content — содержимое) — любое информационно
значимое наполнение информационного ресурса (например, веб-сайта) — вся
информация, которую пользователь может скопировать (загрузить) на диск
компьютера с соблюдением соответствующих законностей, как правило,
только для личного пользования:
тексты
графика: картинки, фото, чертежи, элементы интерфейса
мультимедиа: аудио-, видео- файлы
файлы в формате: Adobe, Excel, Word, PowerPoint, exe, rar и т. д.
Весь web-контент (англ. webcontent) охраняется законом об авторском
праве, так как контент является продуктом интеллектуального труда и имеет
своих авторов и владельцев. Помимо качества контента одним из важных
критериев контента является его доступность.
Объем контента выражается в единицах измерения количества
информации (КБ, МБ, ГБ).
Особую важность для пользователя имеет актуальность контента, его
значимость в настоящее время и достоверность предоставленных данных, а
также соответствие контента поставленным целям по его поиску.
Уникальный контент — контент не имеющий аналогов (эксклюзивный
контент) на ресурсах схожей тематики или размещенный на веб-сайте с
разрешения правообладателя, являющийся результатом интеллектуального
труда и охраняющийся законом об авторском праве. Чаще всего этот термин
применим к текстовому наполнению сайтов (текстовый контент).
Уникальные статьи, написанные для конкретного ресурса, размещаются на
нем и являются первоисточником, любая перепечатка допустима только с
разрешения законного владельца и на его условиях.
ЗАДАНИЕ: создать контент для разработки веб-страницы на тему:
«Любимый город – Семипалатинск»
Вопросы для самоконтроля
1. Что обозначает слово «контент»
2. В чем выражается объем контента?
3. Что значит уникальный контент?
Тема:
Цель:
Лабораторная работа № 2
Разработка структуры Web-сайта.
Рассмотретьразработкуструктурывеб-сайтов.
Краткие теоретические сведения по теме
Структура веб сайта - способ компоновки, расположения, а значит, и
подачи информации, который, благодаря использованию специальных
инструментов, упрощающих её восприятие, позволяет за короткий
промежуток времени максимально подробно рассказать о предоставляемых
Вашей организацией услугах.
Грамотно выполненная структура, с сочетанием заголовков, контента и
д.р. информации, поможет сайту динамично развиваться в Интернете,
правильно индексироваться поисковыми системами (такие сайты, как
правило, легко поддаются раскрутке), а значит, привлекать новых клиентов.
Эффективная базовая структура сайта
Эффективная базовая структура, разработанная на первом этапе, легко
поддается корректировке, и поэтому её последующая переработка - создание
новых разделов, изменение навигации - не повлечет больших финансовых
инвестиций.
Структура сайта на первый взгляд не имеет отношения к веб дизайну и
выстраивается логически, в зависимости от ценности информации. На самом
деле, первое, что должен нести дизайн сайта пользователю - это удобная
навигация.
1. Все важные элементы меню должны находиться в поле видимости
без прокрутки.
2. Меню должно зрительно выделяться на фоне текста.
3. Стиль отображения ссылок в меню должен однозначно
информировать пользователя, на какой странице он находится.
4. Порядок и отображение ссылок должны говорить о ценности
скрывающейся за ними информации
ЗАДАНИЕ: Разработайте проект структуры сайта для одной из
перечисленных ниже фирм:
Рекламное агентство.
Магазин канцтоваров.
Мебельная фабрика.
Консалтинговое агентство.
Издательский дом.
Туристическое агентство.
Гостиничный комплекс.
Строительная компания.
Web-сайт должен состоять не более чем из шести страниц и
представлять следующую информацию: название фирмы, общую краткую
информацию о фирме, перечень продуктов/услуг, краткие отзывы о вашей
деятельности, список крупнейших клиентов со ссылками наихWeb-сайты.
Проект Web-сайта должен отвечать следующим требованиям: четкость
формулировок, структурированность материалов, единство стиля, иметь
собственное лицо. Отчет о выполненном задании содержать графический
материал, отражающий структуру сайта, а также текстовые комментарии.
Пример структура Web-сайта, реализующего информационную
поддержку в сети в сети Интернет, представлена на рис.
Рисунок 1. Структура Web-сайта информационного агентства
Вопросы для самоконтроля
1. Что представляет собой структура сайта.
2. Что значит эффективная базовая структура
Лабораторная работа № 3
Тема:
Создание Web-сайта с использованием редактора Publisher.
Цель:
ознакомиться с возможностями программы по созданию
публикаций.
ПОСЛЕДОВАТЕЛЬНОСТЬ ВЫПОЛНЕНИЯ РАБОТЫ:
1. Продумать название, область (сферу) деятельности будущей организации,
предлагающей услуги, сайт которой будет разрабатываться.
2. Подобрать вид и описание услуг, рисунки (фото) – не менее четырех.
3. Запустить программу MicrosoftPublisher
4. Выбрать создание веб-узла «Услуги» согласно рисунка ниже (макет выбрать на
свой вкус).
5. В появившемся окне ввести начальные данные об организации, адресах,
телефонах, дополнительные сведения или девиз, выбрать цветовую схему:
6. Сохранить публикацию в личной папке студента в папке Лаб4под именем
Мой веб-сайт Услуги (файл получит автоматически расширение pub). В
последующем не забывать сохранять изменения!
7. Просмотреть шаблон будущего сайта в программе-браузере, выбрав на
панели Параметры: Веб-узел, гиперссылку
(или
выполните команду Файл/Предварительный просмотр веб-станицы).
8. Просмотреть содержимое страниц, работу гиперссылок. Ознакомиться со
списком услуг, дополнительными сведениями об услугах, списком проектов.
9. Закрыть интернет-браузер.
10.В левой части окна MicrosoftPublisherознакомиться с содержимым панели
Параметры: веб-узел, при желании изменить Панель навигации,
ознакомиться с содержимым страниц сайта, используя переход по
гиперссылкам (щелчок с Ctrl) или щелчок по ярлыку нужной страницы снизу
экрана – см. рисунок ниже. Ярлык активной страницы отличается цветом
11.Ознакомиться
поочередно
с
содержимым
различных задач из левой панели окна, внести
изменения по своему вкусу, например, изменить
фон, макет, цветовые, шрифтовые схемы
Ярлыки страниц сайта
«Услуги»
12.Внести на все страницы собственные изменения согласно тематике
выбранной организации: заполнить текстовые поля, изменить рисунки,
указатьназвания
услуг
на
странице
4,
на
страницах
5-8
датьподробноеописание услуг, на странице 9 заполнить список проектов,
проследить за корректностьюгиперссылок.
13.Добавить страницу Список сотрудников и заполнить ее.
ЗАМЕЧАНИЕ: выбрать в левой панели Добавить страницу и в
появившемся окне выбрать тип страницы Список сотрудников, нажать ОК,
кнопкуДалее… не нажимать.
14.Новая страница получила, например, номер 10.
Гиперссылка «Список сотрудников» в панели
навигации (меню) сайта расположена соответственно последней.
Переместить гиперссылку «Список сотрудников» так, чтобы она
располагалась за гиперссылкой «О нас». Для этого: активизировать меню
сайта на любой странице,
щелкнув по нему, внизу панели
навигации появится кнопка (см.
рисунок справа), щелкнуть по
кнопке
для
изменения
параметров панели навигации.
Слева отобразится Панель
навигации, выберите Управление ссылками (см. рис. ниже), в окне
«Свойства панели навигации» переместите с помощью кнопкиВверх
переместите Список сотрудников в нужную позицию.
15.Сохраните изменения и просмотрите созданную публикацию в программебраузере.
16.Сохраните созданную публикацию в формате html, выбрав в меню Файл
пункт
. В появившемсяокне
оставить
без
изменения
поля
ЗАМЕЧАНИЕ: установить папку Лаб4при сохранении.
17.Просмотреть созданный сайт в браузере, запустив файл index.html
Лабораторная работа № 4
Тема:
Создание Web-сайта с использованием редактора FrontPage.
1. Цель:
Изучение и редактирование ранее созданного
учебного веб-узла, создание нового личного веб-узла с помощью одного
из шаблонов FrontPage.
Краткие теоретические сведения по теме
Веб-редактор MicrosoftFrontPage обеспечивает выполнение всех
основных функций создания Web-документов в визуальном режиме.
Построение web-узла. Web-узел – это набор файлов в формате HTML,
расположенных в определенной папке и связанных друг с другом
гиперссылками. Один из файлов web-узла назначается главным, он
представляет собой домашнюю страницу и открывается в браузере
пользователя при подключении к web-узлу. Остальные web-страницы
выводятся в окно браузера по мере перехода к ним по гиперссылкам. Кроме
файлов HTML в состав узла входит набор графических объектов формата
GIF или JPG, предназначенных для оформления страниц.
Шаблоны и мастера. Шаблон, как несложно догадаться, представляет
собой каркас, который вы можете использовать как основу при создании
нового документа. Мастер же представляет собой программный модуль,
состоящий из одного или нескольких экранов, который, задавая ряд
вопросов, выясняет ваши потребности, и в результате генерирует
удовлетворяющий им документ.
Команды и панели инструментов FrontPage. Доступ к командам
FrontPage 2003 осуществляется из 11 отдельных меню. Команды меню,
которые используются вами наиболее часто, перемещаются вверх каждого
меню, что упрощает доступ к этим командам. Команды меню, которые вы не
используете, удалены из текущего вида меню, но для доступа к таким
командам достаточно щелкнуть на двойной угловой скобке внизу меню.
Команды меню, рядом с которыми находится стрелка; содержат подменю.
Команды меню, после которых следует многоточие (...), открывают
диалоговые окна, где вам нужно задать информацию, необходимую для
выполнения данной команды.
Команды меню и панелей инструментов недоступны, если
соответствующее средство нельзя применить к среде, в которой вы
работаете, или конкретному выделенному объекту. Доступные команды
меню представлены черным цветом; недоступные команды затенены или
представлены серым шрифтом. При первом открытии FrontPage вы увидите в
окне просмотра и редактирования страниц файл новой страницы с именем
«нов_cтp_l.htm».
ЗАДАНИЕ 1.Используяваш личный учебный веб-узел разработайте вебстраничку. ЗАДАНИЕ 2. С помощью шаблонов два различных типа узлов:
простой одностраничный узел и личный узел.
Вопросы для самоконтроля
1. Что представляет собой FrontPage.
2. Дайте определение личного узла
3. Интерфейс FrontPage.
Лабораторная работа № 5
Тема:
Создание WEB-сайта с использованием редактора NVU.
2. Цель:
создание нового личного веб-узла используя
возможности редактора NVU
Краткие теоретические сведения по теме
NVU это OpenSource проект Linspire по созданию визуального
(WYSIWYG) HTML редактора. Как и для Firefox и Thunderbird основой для
создания NVU послужила часть кода выделенного из браузера Mozilla - код
MozillaComposer. К созданию NVU был привлечен главный архитектор
MozillaComposer - ДэниелГлазман.
Программа Nvu 1.0 представляет собой визуальный (WYSIWYG)
редактор, это означает, что в процессе создания сразу можно видеть как
будет выглядеть web-страница в браузере для пользователей Интернет. На
сегодняшний день визуальный web-редактор Nvu 1.0 имеет уже достаточно
возможностей для создания и редактирования web-сайтов. Это Менеджер
сайтов, позволяющий работать с web-сайтом в целом, встроенный Редактор
CSS, с предварительным просмотром стилей, цветная подсветка синтаксиса в
режиме редактирования кода, проверка орфографии, инструменты для
работы с таблицами, графическими изображениями, гиперссылками,
возможность создания шаблонов web-страниц и многое другое.
При создании локального web-сайта в web-редакторе Nvu 1.0
необходимо сначала создать на диске корневую папку web-сайта и
организовать внутри нее начальную структуру папок, а так же перенести
графические изображения, которые планируется использовать в работе в
одну из папок сайта (программа Мой компьютер, Проводник).
При запуске программы открывается новая web-страница – вкладка
без_имени.
1
2
3
4
5
Рисунок – Сохранение web-страницы
Если web-страница нуждается в сохранении, то перед именем вкладки
появляется специальный красный значок (рис. 1).
Для сохранения web-страницы необходимо выполнить команду
Файл→Сохранить. В том случае если не было задано название web-
страницы, появится окно Заголовок страницы, в котором можно ввести
необходимую информацию или оставить пустым и нажать кнопку OK. Далее
откроется стандартное диалоговое окно сохранения документаСохранить
страницу как (рис.4.2 - 2), в котором необходимо выбрать одну из папок
web-сайта (3), ввести имя файла состоящее только из латинских букв, цифр,
разрешенных символов (4) и нажать кнопку Сохранить (5). Расширение
полученных файлов будет html.
Создание web-страницы осуществляется с помощью команды
Файл→Создать. В этом случае открывается диалоговое окно Новый
документ, в котором можно указать параметры новой страницы: тип
создаваемого документа, где будет открываться документ (в новой вкладке
или в новом окне программы Nvu 1.0). КнопкаСоздать на панели
компоновки создает новую web-страницу в новой вкладке.
Закрыть текущей документ можно командой Файл→Закрыть или
кнопкой “красный крестик” в правой части панели вкладок. Для того
чтобы закрыть любую вкладку необходимо нажать на нее правой кнопкой
мыши и выбрать пунктЗакрыть вкладку.
Для того чтобы открыть web-страницу локального web-сайта
необходимо выполнить команду Файл→Открыть файл и выбрать нужный
документ. Редактор Nvu 1.0 позволяет редактировать одновременно
несколько документов открытых в разных вкладках.
Для удобства работы с конкретным web-сайтом удобно
2
воспользоваться Менеджером сайта (рис.2), который открывается командой
Вид→Показать/скрыть→Менеджер сайта.
8
17
1 1
9 11 2
0
2
3
4
5
6
Рисунок 2 – Работа с Менеджером сайта
Для
описания
локального
web-сайта
нужно
выполнить
командуРедактировать сайты (1). В результате откроется диалоговое окно
Параметры публикации (2), в котором нужно указать: Имя сайта (3),
корневую папку на диске (4) с помощью кнопкиВыбрать директорию (5).
После нажатия на кнопку OK (6) папка web-сайта будет отображаться в окне








Менеджера сайта (7).
При работе с Менеджером сайта можно:
открывать любую web-страницу сайта в отдельной вкладке для
редактирования двойным щелчком мыши;
используя выпадающее меню Просмотр (8) отображать только нужные типы
файлов.
используя кнопкуРедактировать сайты (1) выбирать (описывать) web-сайты
для работы;
используя кнопки-команды выполнять следующие действия:
Обновить (9) – обновлять структуру папок web-сайта, рекомендуется
выполнять в том случае, если в корневую папку были добавлены папки и
файлы вне редактора Nvu 1.0 с использованием программ Мой компьютер
или Проводник.
Новая папка (10) – создавать папки в структуре web-сайта (созданные папки
появляются и на жестком диске).
Переименовать файл или папку(11) – изменять имена выделенным файлам и
папкам.
Удалить (12) – удалить выделенный файл или папку.
Для работы с web-страницами предусмотрено несколько режимов их
отображения.
Обычный – визуальный редактор, основы работы с которым будут
рассмотрены ниже.
HTML-тэги – редактор с отображением тегов. В этом режиме для
каждого объекта появляются вкладки тэгов. Двойной щелчок левой кнопки
мыши на вкладку тэга открывает диалоговое окно Редактор
дополнительных свойств, в котором можно настроить как свойства, так и
стилевое оформление или связать с выбранным элементом событие
JavaScript.
Код – редактор HTML-кода web-страницы с подсветкой синтаксиса.
Предварительный просмотр – отображает web-страницу так, как она
будет выглядеть в браузере.
Переключение между режимами производится с помощью кнопок
внизу окна. При переключении между вариантами просмотра курсор остается
на одном и том же месте, поэтому удобно, выделив элемент в окне
визуального редактора, посмотреть его код в редакторе кодов.
Редактирование web-страницы можно начать с определения ее
заголовка и основных свойств с помощью команды Формат→Заголовок и
свойства страницы.
1
2
3
4
6
5
7
9
8
Рисунок 3 – Окно Свойства страницы







В результате открывается диалоговое окно Свойства страницы (рис.3)
в котором можно задать следующие параметры.
Поле Заголовок: (1) - название web-страницы, которое будет отображаться в
строке заголовка браузера.
Поле Автор: (2) – указать автора.
Поле Описание: (3) – задать краткое описание содержимого.
Флажок Шаблон (4) – преобразует web-страницу в шаблон.
Поле Язык: (5) – указать язык с помощью кнопкиВыбрать язык (6).
Выпадающее меню Направление письма: (7) – определить направление
текста.
Поле Кодировка: (8) – определить кодировку web-страницы с помощью
кнопкиВыбрать кодировку (9).
Лабораторная работа № 6
Тема:
Создание html-страниц средствами javascript
Цель:
научиться создавать простейшие HTML-страницы с JavaScriptкодом.
Ознакомиться
с
основами
языка JavaScript.Изучить
способывнедренияобъектовJavaScript в HTML-документы.
JavaScript - это относительно простой объектно-ориентированный язык,
предназначенный для создания небольших клиентских и серверных
приложений для Internet. Программы, написанные на языке JavaScript,
включаются в состав HTML-документов и распространяются вместе с ними.
Программы просмотра (браузеры - от англ. browser) типа NetscapeNavigator и
MicrosoftInternetExplorer распознают встроенные в текст документа
программы-вставки (script-коды) и выполняют их. Таким образом, JavaScript-
интерпретируемый язык программирования. Примерами программ на
JavaScript
могут
служить
программы,
проверяющие
введенные
пользователем данные или выполняющие какие-то действия при открытии
или закрытии документа. Такие программы могут реагировать на действия
пользователя - нажатие кнопок "мыши", ввод данных в экранной форме или
перемещение "мыши" по странице. Более того, JavaScript-программы могут
управлять самим браузером и атрибутами документа.
Язык JavaScript, будучи схожим по синтаксису с языком Java, за
исключением объектной модели, в то же время не обладает такими
свойствами, как статические типы данных и строгой типизацией. В
JavaScript, в отличие от Java, понятие классов не является основой
синтаксических конструкций языка. Такой основой является небольшой
набор предопределенных типов данных, поддерживаемых исполняемой
системой: числовые, булевские и строковые; функции, которые могут быть
как самостоятельными, так и методами объектов (метод в терминологии
JavaScript - не что иное, как функция/подпрограмма); объектная модель с
большим набором предопределенных объектов со своими свойствами и
методами, а также правилами задания в программе пользователя новых
объектов.
Для создания программ на JavaScript не требуется никаких дополнительных
средств- необходим лишь браузер, поддерживающий язык JavaScript
соответствующей версии и текстовый редактор, позволяющий создавать
HTML-документы. Так как программа на JavaScript встраивается
непосредственно в текст HTML-документа, вы можете немедленно увидеть
результаты своей работы во время просмотра документа браузером и при
необходимости внести изменения.
Практическая часть
1. Создать html-файл lab18_1.htm который будет выводит текст в тело
документа. Обратите внимание на то как включен JavaScript в документ и на
то, как осуществляется вывод в тело документа:
2. Дополните скрипт циклом так, что бы сообщение выводилось 15 раз:
3. Создайте файл test.js содержащий следующий код:
4. Что делает это фрагмент кода?
5. Создайте новый файл test.html:
6. Добавьте на страничку кнопку и сделайте так, что бы скрипт
срабатывал при нажатии именно на эту кнопку.
7. Создайте файл red.html и проверьте его работоспособность. Скрипт
записываем в body:
8. Дополните скрип функцией выводящей ошибку в том случае, если
хотя бы одно из полей не заполнено.
9. Если необходимо что бы форм после проверки JavaScript
обрабатывалась с помощью PHP необходимо поместить поля ввода втегform
и добавить в функцию doit операцию отправки формы на сервер в том
случае, если все поля заполнены (this.form.submit();).
10.
Измените задание 6, чтобы сообщение возникало при наведении
курсора мыши.
11.
* Найдите в интернете и подключите к любой страничке
скрипт визуального редактора TinyMCI или FCKEditor.
12.
Напишите скрипт, который сначала выводит на экран диалоговое
окно, а затем, после нажатия кнопки "ОК", в окне браузера пишет фразу
"Hello, world!".
13.
Напишите скрипт, который запрашивает у пользователя
информацию, а затем выводит ее в диалоговом окне.
14.
Составьте документ так, чтобы диалоговое окно для ввода
информации предлагалось только после наведения курсора мыши на ссылку,
и введенная пользователем текстовая строка выводилась бы в виде
диалогового окна, или в окно браузера.
15.
Написать скрипт, реализующий сложение двух чисел по щелчку
на кнопке.
Лабораторная работа № 7
Тема:
Создания
интерактивных
анимационных
роликовЦель: научиться создаватьинтерактивные ролики
flash-
Создание интерактивных фильмов
Интерактивность Flash-фильма обеспечивается за счет включения в
него так называемых сценариев, которые представляют собой набор
инструкций на языкеActionScript. Каждая инструкция инициируется при
наступлении определенного связанного с ней события. Объекты могут
содержать данные или их графическое представление в виде символа
определенного типа.
Общие сведения об ActionScript
ActionScript позволяет создавать сценарий для клипа, кнопки или
кадра. Каждый такой сценарий жестко связан с соответствующим элементом
фильма. При публикации фильма текст сценария экспортируется в SWFфайл. Тем не менее, при желании можно сохранить его в отдельном файле с
расширением .as, чтобы впоследствии использовать в каком-либо другом
фильме. Из сценария можно обратиться к любому другому объекту фильма
(из числа кнопок, клипов и кадров) и даже к другому фильму или какомулибо внешнему сетевому ресурсу.
Контекст выполнения сценария. Контекст выполнения сценария
определяет доступность и относительные адреса объектов и других
программных величин (переменных), используемых в сценарии.
Необходимость учитывать контекст появляется в том случае, если в сценарии
используется несколько объектов или переменных с одинаковыми именами.
С каждой временной диаграммой связан специальный параметр уровень диаграммы (он обозначается с помощью ключевого слова
_ level), который определяет ее положение относительно других временных
диаграмм, загруженных в Flash-плеер. По умолчанию временная диаграмма
основного фильма имеет нулевой уровень.
Область действия переменных в Flash-фильме распространяется сверху
вниз: имя переменной, созданной в сценарии временной диаграммы
основного фильма, «видно» в сценарии следующего уровня, если в нем нет
своей переменной с таким же именем.
Кроме того, внутри программного блока сценария, ограниченного
фигурными скобками, могут объявляться локальные переменные, которые
«видны» только в пределах этого блока.
Для
управления
областью
видимости
переменных
в ActionScript используется понятие «путь назначения» - target path. Путь
назначения позволяет указать принадлежность объекта или переменной
конкретной временной диаграмме, загруженной в Flash-плеер.
Чтобы правильно записать путь назначения, необходимо учитывать
объектную модель ActionScript и взаимное положение временных диаграмм.
Возможны два варианта указания пути назначения: абсолютный и
относительный.
Абсолютный путь вычисляется, как правило, на основе уровня
временной диаграммы (как в приведенном выше примере). Указав в качестве
отправной точки уровень диаграммы, вы можете быть уверены, что Flashплеер правильно отыщет адресата, даже после того, как вы переместите
фрагмент сценария, из которого выполнено обращение.
Относительный путь вычисляется с учетом положения той
диаграммы, из которой выполняется обращение.
Итак, при создании сценариев на ActionScript возможно использование
трех типов переменных, различающихся областью видимости:
·
глобальные (Global variables), которые доступны в сценарии
любой временной диаграммы;
·
переменные временной диаграммы (Timeline variables), которые
доступны из любой временной диаграммы при условии, что для обращения к
ним используется путь назначения (target path);
·
локальные (Local variables), которые «видны» только в пределах
того программного блока, в котором они объявлены.
Создание сценария для кнопки
Кнопка является наиболее удобным и простым средством
взаимодействия пользователя с Flash-фильмом. Кнопке может быть
назначено любое из действий, входящих в раздел Actions. Кроме того,
назначив кнопке несколько управляющих событий и сопоставив каждому из
них определенное действие (или сценарий), можно превратить одну кнопку в
целый пульт управления фильмом.
Управление воспроизведением фильма. Простейшими командами
управления фильмом являются запуск и прерывание его воспроизведения.
Эти
команды
реализуются
с
помощью
предопределенных
действий Play и Stop. В качестве кнопок используем экземпляры символов
общей библиотеки Buttons.
Создание сценария для кадра
Связав сценарий с некоторым ключевым кадром фильма, можно
обеспечить автоматическую инициализацию тех или иных действий при
достижении считывающей головкой этого кадра. Для этого необходимо:
1. Щелкнуть правой кнопкой мыши в ячейке кадра и в контекстном
меню выбрать команду Actions (если выбранный кадр не является ключевым,
то действие будет назначено предшествующему ключевому кадру).
2. В списке Actions Toolbox открыть раздел Actions, а в нем требуемый подраздел.
3. Дважды щелкнуть мышкой на действии, которое требуется
назначить кадру. При этом в окно сценария будет помещена
соответствующая конструкция на языкеActionScript.
Создание сценария для клипа
Клип, как и кнопка, может «реагировать» на те или иные события.
Поэтому в большинстве случаев основу сценария для клипа составляет
перечень обработчиков, описывающих реакцию клипа на те или иные
события.
Чтобы связать с клипом сценарий, необходимо:
1. Щелкнуть правой кнопкой на клипе, которому вы хотите назначить
действие.
2. В контекстном меню выбрать команду Actions.
3. В разделе Actions выбрать требуемое действие и перенести его в
окно сценария.
4. В поле параметров ввести требуемые значения.
5. В
окне
сценария
щелкнуть
на
строке
с
обработчиком onClipEvent. При этом в поле параметров появится перечень
допустимых типов событий, которые могут инициализировать действие.
- Выберите тип события, при наступлении которого введенные
данные должны быть переданы на сервер.
Озвучивание фильма не связано непосредственно с обеспечением его
интерактивности, однако чаще всего звуковое сопровождение делают
управляемым со стороны посетителя сайта.
Flash поддерживает несколько способов подключения звукового
сопровождения. Можно использовать либо непрерывное звуковое
сопровождение, не зависящее от временной диаграммы фильма, либо
синхронизировать анимацию и звуковую дорожку. Разрешается назначать
звуки кнопкам, кадрам и клипам. Добавленные в фильм звуки помещаются в
библиотеку фильма наряду с растровыми изображениями и другими
символами.
Flash не располагает средствами создания звуков, но позволяет
импортировать звуковые файлы в различных форматах (в том числе WAV и
МРЗ) и затем корректировать параметры звука в соответствии с
требованиями фильма.
Задание:Создатьинтерактивныйанимационныйflash-ролик и расположить его
в раннее созданые веб-страницы
Лабораторная работа № 7
Тема:
Создание персонального WEB-сайта.
1.
2.
3.
4.
5.
6.
7.
Цель: создание студентом своего сайта на бесплатном хостинге
Задание 1. Выбор темы
Выберите тему своего веб-сайта из предложенных или предложите свою:
Персональный сайт
Моё хобби
Сайт группы Э-31
Сайт какого-то другого объединения людей
Сайт организации (любой, лишь бы была информация)
Тематический сайт (на какую-то тему)
Сайт о какой-то дисциплине, преподаваемой в Политехнике (напр.,
Бухгалтерский учет в Политехнике, Физкультура в Политехнике)
После выбора темы сообщите ее преподавателю. Желательно, чтобы темы
сайтов не совпадали.
В Word’е или на листочке сделайте структуру сайта
Примеры структур:
http://moy_site.ucoz.ru
Основная страница
Обо мне
Интересы (Хобби)
Фотоальбом
Раздел 1 Мои аватарки
Гостевая книга
Раздел 2
Мои фото
Как я провел лето 2009
1.
2.
3.
4.
5.
или:
Сайт организации:
Основная страница
Новости
Контактная информация
Область деятельности
Рекламный лист
Новый 2009 год
6. Фотоальбом: 6.1. Производимые товары, 6.2. Вид здания снаружи, 6.3. Офис
7. Ссылки
8. Гостевая книга
Задание 2. Отбор информации по теме сайта
Создайте в своей папке папку Мой сайт и сохраняйте туда собранную
информацию
2.1. Персональный сайт
В Word сделать документ, содержащий информацию о Вас: биография (год
рождения, школа, награды, участие в мероприятиях и т.д.), интересы (или
Хобби) – чем Вы увлекаетесь, еще что-то
В папке Мой сайт сделайте папку Фотоальбом и скопируйте туда свои
фотографии, которые хотите выложить.
2.2. Сайт организации, предприятия
Информацию по фирмам и предприятиям (йошкар-олинским) можно взять
здесь:
Каталоги:
http://www.marimedia.ru/company_catalogue - выбрать, где достаточно много
информации
(например,
хорошее
предприятие
Винтажhttp://www.marimedia.ru/company/13717/?directory_cat_id=2 )
Информация о Республике Марий Эл – каталог в Контакте
Статья оЙошкар-Оле в Википедии
Отобранные предприятия:
Балетная студия "РЕВЕРАНС" - http://vkontakte.ru/club8974927
2.3. Тематический сайт:
Гостиничный бизнес в Йошкар-Оле
Транспорт Йошкар-Олы
Жилищно-коммунальное хозяйство Йошкар-Олы
Кино и видео в Йошкар-Оле
Задание 3. Создание сайта
Зайдите на сайт http://www.ucoz.ru и зарегистрируйтесь там (кнопка
Регистрация вверху сайта). Запишите на бумажку свой e-mail и пароль.
На сайте http://www.ucoz.ru введите e-mail и пароль в соответствующие
текстовые поля в правом верхнем углу страницы. Вы попали в так
называемый Вебтоп – оболочку для создания и работы с Вашими сайтами.
Нажмите кнопку Создать сайт (Createawebsite).
Введите адрес своего сайта и нажмите ОК.
Сделайте описание сайта – нажмите на строку с описанием и введите свое.
Перейдите к редактированию сайта.
Задание 4. Работа с сайтом
Выберите дизайн сайта.
Отключите функцию Человеко-понятный URL.
Добавьте сайт в каталог Ucoz’а.
Персональный сайт
В качестве образца можете взять мой сайт http://abolshakov.ucoz.ru, или
любой другой персональный сайт (расположены в каталоге Ucoz’а по адресу
Создайте следующие страницы:
 Обо мне (биография: год рождения, школа, награды, участие в мероприятиях
и т.д.)
 Интересы (или Хобби) – чем Вы увлекаетесь
Можете добавить еще страницы, по усмотрению.
Создайте фотоальбом, разделы и категории
4. САМОСТОЯТЕЛЬНАЯ РАБОТА СТУДЕНТА
СРСП № 1
Тема:
Использование графики в HTML документе. Способы хранения
изображений. Используемые графические форматы. Создание
анимированных GIF-файлов.
Цель:Рассмотреть графические форматы и их использование
Содержание задания: Рассмотреть графические форматы, используемые в
веб-документах, создать анимированный GIF-файлов.
СРСП № 2
Тема:
Использование таблиц для структурирования данных в HTML
документе. Возможности форматирования таблиц. Вложенные таблицы.
Цель:Рассмотреть теги для создания таблиц
Содержание задания: Рассмотреть возможности форматирования таблиц,
создать вложенные таблицы.
СРСП № 3
Тема:
Понятие фрейма. Области применения фреймов. Плавающие
фреймы. Недостатки
использования фреймовой структуры.
Цель:Рассмотреть теги для создания фреймов
Содержание задания: Рассмотреть недостатки и особенности фреймовой
структуры
СРСП № 4
Тема:
Каскадные таблицы стилей. Модель форматирования.
Применение таблиц стилей.
Цель:Уметь использовать каскадные таблицы стилей.
Содержание задания: использовать каскадные таблицы стилей при создании
веб-документа
СРСП № 5
Тема:
Создание интерактивных Web-документов. Язык сценариев
JavaScript.
Цель:Уметь применять язык сценариев.
Содержание задания: составить сценарий для персональной веб-страницы
СРСП № 6
Тема:
Обзор программных продуктов для создания Web-страниц и
подготовки графики.
Сравнительная характеристика, достоинства и недостатки.
Цель:Знать программные продукты для создания Web-страниц и
подготовки графики..
Содержание задания: Сделать краткий обзор ПП для создания Web-страниц
СРС № 1
Тема: Создание Web-страниц при помощи пакета MicrosoftOffice.
Цель: Рассмотреть возможности пакета MicrosoftOffice для
создания Web-страниц
Содержание реферата: Составить опорный план
СРС № 2
Тема: Возможности и преимущества программы FrontPage
Цель: Рассмотреть возможности и преимущества программы
FrontPageдля создания Web-страниц
Содержание реферата: раскрыть особенности программы
СРС № 3
Тема: Возможности языка JavaScript.
Цель: Рассмотреть возможности языка сценариев JavaScript.
Содержание реферата: Использование сценариев при создании страниц
СРС № 4
Тема: Обзор программ для работы с Web-графикой.
Цель: Рассмотреть отличия расровой и векторной графики при
создании вебөдокументов.
Содержание реферата: Рассмотреть виды компьютерной графики:
растровая, векторная.
Примерные вопросы:
1. Для чего используется «блокнот»?
2. Что находится в элементе HEAD
3. Что включает элемент BODY
4. Какие существуют тэги для создания различных видов списков?
5. Назовите парные тэги для создания таблиц.
6. Назовите атрибуты для таблиц
7. Для чего используется тэг IMG
8. Назовите атрибуты данного тэга.
9. Что можно задать с помощью «каскадных таблиц стилей»
10.Какие виды таблиц стилей знаете?
11.Что обозначает слово «контент»
12.В чем выражается объем контента?
13.Что значит уникальный контент?
14.Что представляет собой структура сайта.
15.Что значит эффективная базовая структура
16.Перечислите и объясните этапы создания Web-сайта.
17.Что такое HTML?
18.Что такое гипертекст?
19.Что такое гиперссылка?
20.Что такое элемент HTML-кода?
21.Что такое тег?
22.Из каких частей состоит HTML-код любой Web- публикации?
23.Какими тегами ограничен контейнер, в который помещается HTML-код
любой Web- публикации?
24.Какой тег и с какими параметрами используется для шрифтового
форматирования?
25.Какие теги используются для создания заголовков различного уровня?
26.Как отобразится текст в окне браузера, заключенный между следующими
тегами <u> и </u>?
27.Как отобразится текс в окне браузера, заключенный между тегами <u> и
</u>?
28.Какие параметры могут применятся с тегом <hr> ?
29.Как организовать нумерованный список ?
30.Какие теги используются для абзацного форматирования ?
31.Какие значения может принимать параметр align тега <p> ?
32.Какой тег и с какими параметрами позволяет организовать гиперссылку?
33.Для чего и с какими параметрами используется тег <img>?
34.Как можно организовать фоновый цвет страницы в HTML-коде??
35.Для чего используется и какие значения может принимать параметр
background тега <body>?
36.Для чего предназначены и из каких частей состоят таблицы на Webстраницах?
37.Какая конструкция тегов позволяет создать таблицу на Web-странице?
38.Какие параметры используются с тегами, организовывающими таблицу на
Web-странице?
39.Как организовать фон таблицы, строк, ячеек?
40.Что представляет собой FrontPage.
41.Дайте определение личного узла
42.Интерфейс FrontPage.