Разработка информационного WEB-сайта

Поскольку изображения Web существуют только на экране дисплея, будет технически правильно измерять их разрешение в пикселах на дюйм (ppi – pixels per inch). Другая единица измерения разрешения – количество точек на дюйм (dpi – dots per inch) относится к разрешению печатных изображений и зависит от разрешения печатающего устройства.

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

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

Например, многие пользователи по-прежнему используют 14-дюймо-вые дисплеи с разрешением 640x480 пикселов. Чтобы гарантировать заполнение графической заставкой всего пространства экрана, лучше сделать его шириной не более 600 пикселов (учитывая, что часть пикселов справа и слева будет использована для окна и для полосы прокрутки). Размер остальных кнопок и изображений на странице следует измерять в пикселах относительно банеpa, имеющего ширину 600 пикселов.

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

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

 

Глава II. Разработка информационного WEB-сайта.

2.1 Описание языка HTML для создания сайта.

HTML (Hyper Text Markup Language — язык гипертекстовой разметки) представляет собой компьютерный  язык программирования, предназначенный  для разработки Web-страниц, или,  другими словами, документов HTML. Язык HTML – это коллекция управляющих символов – дескрипторов, с помощью которых можно добавлять и форматировать элементы документа. Для настройки внешнего вида и функционирования элемента страницы устанавливаются его атрибуты.

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

Вопросами стандартизации языка HTML занимается организация World Wide Web Consortium (W3C). Несмотря на необходимость  обеспечить полную программную и  аппаратную независимость Web-страниц, в полной мере реализовать эти  принципы довольно сложно. Одна из проблем состоит в том, что работа над языком продолжается. Появляются новые версии HTML, предоставляющие дополнительные возможности для разработчиков Web-страниц.

Существует  множество специализированных HTML-редакторов, которые можно условно разделить на два типа:

• Визуальные редакторы HTML, то есть редакторы типа WYSIWIG (например, Microsoft FrontPage, Macromedia Dreamveawer, Netscape Navigator Gold и др.). При работе в этих программах пользователь имеет дело с графическими образами элементов HTML, а не с кодом документа. Кстати, существуют конверторы текстовых документов, подготовленных в Word и Word Perfect, в формат HTML-файлов;
• Редакторы собственно HTML-текстов, позволяющие автоматизировать набор и редактирование кода (например, HomeSite, HotDog, Ken Nesbitt Web Editor и многие другие). Эти программы дают возможность пользователю быстро и легко вставлять в документы элементы HTML, проверять синтаксис команд, выполнять запуск и отладку страницы, не покидая окна редактора. Вообще работа в таких редакторах напоминает работу в интерактивной среде программирования типа Delphi или Visual Basic.

Кроме перечисленных  двух категории, существуют программы, объединяющие в себе черты текстовых  и визуальных HTML-редакторов к таким программам относится HotMetal разработки компании SoftQuad Sofware.

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

Символы заключенные  в угловые скобки являются HTML командами, по которым «браузер» распознает, как следует преобразовать части текста, заключенные между этими командами.

Документ  в целом должен быть отмечен как  документ в формате HTML. Для этого он должен начинаться командой и заканчиваться командой.

Документ состоит из 2 частей:

• Заголовка (Head).
• Собственно документа (Body).

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

При написании  команд HTML не имеет значение, какими буквами – строчными или прописными Вы пишете команды.

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

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

Содержимое скобок никогда  не выводится в окне браузера. Имя  тега, как правило, представляет собой  аббревиатуру его функции, что облегчает  его запоминание. Атрибуты являются свойствами, которые расширяют или  уточняют функцию тега. Как правило, имя и атрибуты внутри тега не чувствительны к регистру. Тег <BODY BGCOLOR=white> будет работать так же, как <body bgcolor=white>. Однако значения определенных атрибутов могут быть чувствительны к регистру. Это относится, в частности, к именам файлов и URL.

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

Моя <I>первая</I> Web-страница

Результат: Моя первая Web-страница.

Конечный тег имеет  то же имя, что и начальный, но перед  ним стоит слэш (/). Его можно  рассматривать как "выключатель" тега. Конечный тег никогда не содержит атрибутов.

Приступая к рассмотрению структуры HTML-документа прежде всего надо указать на то, что данный документ описывает web-страницу на языке HTML. Для этого текст начинается с тега <HTML>. Для него требуется закрывающий тег </HTML>, обозначающий конец документа. Следующими по уровню вложенности являются теги заголовка документа и его содержания. Внутри тега заголовка записывается информация о документе (его название, описание, таблица кодировки и т. д.). Сам тег заголовка записывается как <HEAD>. Для него требуется закрывающий тег </HEAD>. Тег содержания документа определяет информационную часть описания страницы. В ней располагается текст, рисунки и другие элементы. Тег описания (тела страницы) выглядит следующим образом: <BOOY>...</BODY>.

Запишем пример простейшего  документа:

<HTML>

<HEAD> <ТIТLЕ>Пример HTML-страницы </TITLE>

</НЕАD>

<ВОDY>Это простая  страница, иллюстрирующая структуру  описания на языке HTML.

</BODY>

</HTML>

Тег <TITLE>, расположенный  в заголовке страницы, указывает  название страницы, которое большинство  браузеров отображают в заголовке окна. Определив название страницы, вы упростите работу с сайтом (пользователь поймет, куда он попал, еще до окончания загрузки документа). Кроме того, поисковые системы могут ориентироваться на заголовки документов при анализе соответствия содержимого сайта введенному пользователем запросу. На рис. изображена описанная выше страница, открытая в браузере Internet Explorer. Обратите внимание: в нижней части окна отображается индикатор окончания загрузки страницы, а в заголовке окна – название, заданное нами в тексте примера.

Элемент BODY должен встречаться  в документе не более одного раза.

Атрибуты:

MARGINHEIGHT – определяет  ширину (в пикселах) верхнего и  нижнего полей документа. Работает  только в браузерах Netscape.

TOPMARGIN – определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer.

MARGINWIDTH – определяет  ширину (в пикселах) левого и правого  полей документа. Работает только  в браузерах Netscape.

LEFTMARGIN – определяет  ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer.

BACKGROUND – определяет  изображение для "заливки"  фона. Значение задается в виде  полного URL или имени файла  с картинкой в формате GIF или  JPG.

BGCOLOR – определяет  цвет фона документа.

TEXT – определяет цвет  текста в документе.

LINK – определяет цвет  гиперссылок в документе.

ALINK – определяет цвет  подсветки гиперссылок в момент  нажатия.

VLINK – определяет цвет  гиперссылок на документы, которые  вы уже просмотрели. 

Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов. Пример:

<HTML>

<BODY BACKGROUND="images/bricks.jpg" BGCOLOR="#202020" TEXT="#FFFFFF" LINK="#FF0000" VLINK="#505050" MARGINHEIGHT="30" TOPMARGIN="30" LEFTMARGIN="40" MARGINWIDTH="40">

...

Текст документа.

...

</BODY>

</HTML>

 

 

 

 

 

 

Основные области WEB-страниц заняты, как правило, текстом. Текстовые блоки состоят из отдельных строк, объединенных в абзацы. Абзацы начинаются с новой строки, а группы абзацев отделяются друг от друга заголовками.

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

Для создания абзаца в  языке HTML предусмотрены несколько возможностей. Простейшая из них – это использование тегов <p> и <p>, между которыми помещается текст абзаца.

Код страницы содержащей абзацы, может иметь вид:

<HTML>

      <HEAD>

           <TITLE> Разбиение на абзацы </TITLE>

     </HEAD>

     <BODY>

     <p>Ричард Бах</p>

     <p>Единственная</p>

           <p>Мы прошли долгий путь, правда?</p>

           <p>Впервые мы встретились двадцать  пять лет тому назад. Тогда  я был летчиком, очарованным полетом,  и пытался найти смысл жизни  в показаниях приборов. Двадцать  лет назад нше путешесвие привело  нас в новый необычный мир, распахнутый для нас крыльями Чайки.</p>

    </BODY>

</HTML>

Глава II. Язык сценариев JavaScript.

2.1. Введение в JavaScript.

Язык программирования JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющих как на стороне клиента, так и на стороне сервера. Многие люди считают, что JavaScript - это то же самое, что и Java, лишь потому, что эти языки имеют схожие названия. На самом деле это не так. Клиентские приложения выполняются браузером просмотра Web-документов на машине пользователя, серверные приложения выполняются на сервере.

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

Клиентские приложения непосредственно встраиваются в HTML-страницы и интерпретируются браузером по мере отображения частей

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

Основные области использования  языка JavaScript при создании интерактивных HTML-страниц: