|
Сегодня |
||
УНИВЕРСАЛЬНЫЙ УЧЕБНИК |
||
|
|
|
|
|
Язык гипертекстовой разметки (HTML — Hyper Text Markup Language) предназначен для форматирования документов и приведение их к виду, пригодному для просмотра с помощью программ клиентов. HTML — простой язык имеющий большие возможности. Основная идея — создать такой формат документов, который не зависел бы от типа компьютера, на котором эти документы будут просматриваться.
Документ HTML — это не что иное, как файл, содержащий ASCII-текст и имеющий в имени расширение .html. Поэтому HTML-документы можно создавать в любом текстовом редакторе.
Основу языка HTML составляют дескрипторы. Их легко узнать по угловым скобкам (< и >), в которые они заключены. Многие из них являются парными и отмечают начало и конец раздела текста. Если вы решили написать HTML-документ, но у вас нет доступа к серверу Web, просто наберите его в любом редакторе, затем сохраните документ в виде обычного текста с расширением .html ( в Windows с расширением .htm). Большинство Web-клиентов позволяют просматривать документы с помощью Open Local, Open File.
Дескрипторы определения
Документ HTML должен начинаться с дескриптора <HTML> и заканчиваться </HTML>.
<TITLE>Заголовок документа</TITLE>
<BODY>Текст связи ссылки изображения </BODY>
<body bgcolor=white text=black link=red vlink=maroon alink=fuschia>
bgcolor
Определяет цвет фона для тела документа. См. ниже синтаксис для кодировки таких цветов.
text
Определяет цвет, используемый при выводе на экран текста из данного документа. Обычно используется, когда Вы меняете фоновый цвет с помощью атрибутов BGCOLOR или BACKGROUND.
link
Определяет цвет, который будет использоваться при выводе на экран текста из еще не выбранных вами гипертекстовых связей.
vlink
Определяет цвет, который будет использоваться при выводе на экран текста из уже проверенных вами гипертекстовых связей.
alink
Задает цвет, которым будут выделяться в тексте гипертекстовые связки в тот момент, когда пользователь щелкает по ним клавишей мыши.
background
Определяет адрес URL, откуда будет браться изображение для подготовки фона к текущему документу.
Дескрипторы компоновки
Разбивают текст на абзацы. <P>.............</P>
<BR> Разрывает текущую строку.
Дескрипторы списка
<UL>.......</UL> начало и конец неупорядоченного списка
<OL>.......</OL> начало и конец упорядоченного списка
<LI> — отмечает начало нового элемента списка, задает начало новой строки, в которой размещается маркер или порядковый номер.
<DL>........</DL> начало и конец описательного списка
<DT> — заголовок внутри описательного списка
<DD> — определяет текст с отступом
Дескрипторы стиля
<Hn>.......</Hn> — создает заголовок размера n=1,..,6
<B>.........</B> — полужирный шрифт
<U>........</U> — курсив
<I>..........</I> — подчеркивание
<PRE>....</PRE> — заданный формат
Дескрипторы связи
<A></A> — якорь, имеет атрибуты HREF и NAME
HREF — образует гипер связь
<A HREF= " URL " > текст </A>
NAME — отмечает участок в данном документе
<A NAME= " строка " > текст </A>
Дескриптор графики
<IMG SRC= " URL " > — включает в документ графику
Комбинация дескрипторов
<A HREF= " ICE.HTML " ><IMG SRC= " PLAT.GIF " ></A>
PLAT.GIF будет окружено голубой рамкой и привязано к документу ICE.HTML
Создание бланков в HTML
Дескриптор FORM
<FROM METHOD=POST ACTION= " URL " >.....</FORM>
Существует два метода передачи GET и POST.
Ввод текста
<INPUT TYPE= " text " NAME= " username " SIZE=32 MAXLENGTH=128 VALUE= " John Doe " > — для ввода текста
<INPUT TYPE= " password" NAME= " password"> — для ввода скрытого текста
<TEXTEAREA NAME= " comments" > .......</TEXTAREA> —для ввод текста в несколь строк
Кнопки опций и переключений
<INPUT TYPE= " radio" NAME =" color" VALUE= "red "> — выбор один из списка
<INPUT TYPE= " checkbox " NAME= " flower " VALUE= "violet "> — выбор несколько из списка
Выбор из меню
<SELECT SIZE=3 NAME= "currancy ">
<OPTION> Канадский доллар
<OPTION> Японская йена
<OPTION> Доллар США
<OPTION> Немецкая марка
</SELECT>
Чтобы разрешить выбор нескольких <SELECT ..... MULTIPLE>
Кнопки запроса и сброса
<INPUT TYPE= " submit " VALUE = "LET’S GO "> — кнопка запроса
<INPUT TYPE= "reset " VALUE= "Reset "> — кнопка очистить форму
Скрытые элементы
<INPUT TYPE= "hidden " NAME= "name " VALUE= "John Doe ">
name
Используется при выборе названия для данного поля, которое впоследствии будет использоваться для его идентификации во время передачи сведений на сервер.
value
Используется при инициализации данного поля, либо задает текстовый заголовок для кнопок (передачи введенных данных на сервер, либо повторной инициализации формы).
checked
Данный атрибут первоначально используется для установки контрольных ящичков и радиокнопок в состояние "активировано".
size
Используется при выборе размера для создаваемых текстовых полей, единица измерения - средняя ширина символов. Например, size=20
maxlength
Задает максимальное количество символов, которые можно ввести в текстовом поле.
src
Задает URL-адрес картинки, используемой при создании графической кнопки, инициирующей передачу данных.
align
Указывает способ выравнивания для графических кнопок, инициирующих передачу данных.
Полностью аналогичен атрибуту align элемента IMG и может принимать одно из следующих значений:
top, middle, bottom, left или right, по умолчанию считается, что этот атрибут имеет значение bottom.
В элементах FONT и BODY некоторые конструкции HTML могут быть использованы, чтобы специфицировать цвета: например, цвет фона, цвет текста по умолчанию или цвет текста связи.
Так как все мониторы и программы могут отображать цвет, действительное отображение может быть черно-белым или с различными оттенками серого.
Для спецификации цвета, как значения атрибута, существуют два варианта:
Конечно, символические нотации много легче и более понятны. С другой стороны численные обозначения дают больше возможностей.
Чтобы пользоваться предварительно определенными цветовыми именами, необходимо знать их числовые эквиваленты, которые приводятся ниже:
Цветовые имена и sRGB значения
Black (Черный) = "#000000" Green (Зеленый) = "#008000"
Silver (Серебро)= "#C0C0C0" Lime (Известь) = "#00FF00"
Gray (Серый) = "#808080" Olive (Оливковый) = "#808000"
White (Белый) = "#FFFFFF" Yellow (Желтый)= "#FFFF00"
Maroon (Темно-бордовый) = "#800000" Navy (Темно-синий) = "#000080"
Red (Красный) = "#FF0000" Blue (Синий) = "#0000FF"
Purple (Фиолетовый) = "#800080" Teal (Чирок) = "#008080"
Fuchsia (Фуксия) = "#FF00FF" Aqua (Аква) = "#00FFFF"
Эти цвета были первоначально отобраны, как 16 цветный стандарт, поддерживаемый Windows VGA палитрой.
Поддержка изображений в HTML - путь в мир графики. Создание и манипулирование изображениями, графическими форматами и другим графическим материалом не является частью HTML. В частности, HTML спецификации не объявляют каких-либо требований или ограничений на графические форматы, поддерживаемые Web броузерами.
Допустим, что мы имеем некоторые графические изображения в некотором формате. Существуют два различных способа его использования в Web документе. Вы можете либо указать связь к нему, либо вставить его в Ваш документ. В первом случае Вы используете якорь (A-элемент); в другом случае элемент IMG. В первом случае, когда пользователь рассматривает Ваш документ, он видит символьную фразу, действующую, как связь, и активизация этой связи заставляет изображение появиться на экране, либо в том же самом окне, либо в другом, в зависимости от броузера и его установок. В другом случае, вставленное изображение является частью Вашего документа; когда пользователь обращается к Вашему документу, изображение загружается вместе с ним и выводится, как его часть.
В обоих случаях пользователь увидит изображение, если только броузер поддерживает специальный графический формат. Наиболее поддерживаемые форматы - GIF и JPEG. Зачастую - это единственные форматы, поддерживаемые для вставляемых изображений
Как вариант, возможно объединение связывания и вставки изображений: Вы можете создать документ, содержащий изображение, которое действует, как связь к другому изображению. То есть, например, вставленное изображение является малой, подобной штампику, версией изображения, на которое указывает связь.
Ссылка на графические объекты обычно допускается без специальных разрешений. Но при использовании авторских рисунков, фотографий и т.п. - автор должен упоминаться. Однако, некоторые изображения настолько просты, что копирайт просто не нужен. Кроме того, есть большое количество коллекций изображений и среди них - коллекции общего пользования.
Для иллюстрации связывания с изображением и внедрения изображений давайте рассмотрим GIF изображение, которое расположено по адресу - http://www.hut.fi/~lsarakon/sae.gif. Обратимся к нему следующим образом:
Пример sae.html:
<A HREF="http://www.hut.fi/~lsarakon/">Liisa Sarakontu</A> has drawn
<A HREF="http://www.hut.fi/~lsarakon/sae.gif">a picture of Siamese
algae eater</A>.
Для представления таблиц используются нескольких видов тегов HTML.
У элемента TABLE нет обязательных атрибутов. По умолчанию таблица печатается без рамки. Разметка таблицы в общем случае осуществляется автоматически в соответствии с объемом содержащейся в ней информации, однако у автора всегда имеется возможность самому выбрать ширину таблицы, воспользовавшись атрибутом WIDTH. Дополнительный контроль над процессом разметки (таблицы) достигается также через атрибуты BORDER, CELLSPACING и CELLPADDING. Заголовки таблицы (CAPTION) выравниваются по верхнему или нижнему краю таблицы в зависимости от атрибута ALIGN.
В таблице каждый ряд ячеек содержит открывающий тэг элемента TR, хотя соответствующий закрывающий тэг всегда может быть опущен. Отдельные клетки таблицы размечаются элементом TD, если это данные, и элементом TH, если это заголовки. Как и в случае с TR, эти элементы являются контейнерами и могут быть записаны без указания закрывающего тэга. Элементы TH и TD могут иметь несколько атрибутов: ALIGN и VALIGN для выравнивания содержимого ячейки, ROWSPAN и COLSPAN для нестандартных ячеек, простирающихся на несколько рядов или колонок. В отдельной ячейке таблицы можно размещать самые разнообразные элементы разметки как блочного, так и текстового уровня, включая поля заполняемых форм и даже целые новые таблицы.
Для элемента TABLE всегда необходимо указывать как начальный, так и конечный тэги. При этом разрешается использовать следующие атрибуты:
align
Данный атрибут принимает одно из следующих значений: LEFT, CENTER или RIGHT (используемый при этом регистр значения не имеет). Указывает для текущей таблицы, каким образом при разметке осуществляется ее горизонтальное выравнивание. По умолчанию выполняется выравнивание таблицы по левой границе листа, однако это правило можно переопределить посредством элементов DIV или CENTER.
width
В отсутствии данного атрибута ширина таблицы определяется автоматически в соответствии с объемом содержащегося в ней материала. Однако посредством атрибута WIDTH вы можете сами задать ширину таблицы либо в пикселях (например WIDTH=212), либо как процент от расстояния между левой и правой границами экрана (например WIDTH="80%" ).
border
Этот атрибут позволяет задавать для таблицы ширину внешней рамки - в пикселях ( например,BORDER=4). Данному атрибуту может быть также присвоено значение нуль, чтобы полностью отказаться от внешней рамки. Рамка таблицы не рисуется также, если атрибут border вообще отсутствует в разметке. Заметим, что некоторые из браузеров способны воспринимать также конструкцию <TABLE BORDER>, считая ее семантически эквивалентной атрибуту BORDER=1.
cellspacing
В традиционных настольных издательских системах смежные ячейки в таблице имеют общую границу. В языке HTML это не так. Каждая ячейка имеет собственную границу, отделенную промежутком от границ соседних ячеек. Ширину этого промежутка в писелах можно устанавливать посредством атрибута CELLSPACING, (например CELLSPACING=10). То же самое значение определяет расстояние между общей границей таблицы и границами крайних ячеек.
cellpadding
Данный атрибут устанавливает для каждой ячейки в таблице расстояние в пикселах между рамкой ячейки и содержащимся в ней материалом. Элемент CAPTION может иметь только один атрибут - ALIGN, который может принимать два значения:
ALIGN=TOP или ALIGN=BOTTOM. Посредством этого атрибута можно выбирать, помещать ли заголовок над таблицей или, соответственно, под ней. Большинство браузеров по умолчанию ставит заголовок над таблицей. Для элемента CAPTION необходимо всегда указывать начальный и конечный тэги. Содержание заголовка должно ограничиваться простым текстом и элементами текстового уровня, задаваемыми объектом %text. Использование блочных элементов в этом случае недопустимо.
Для TR - элемента, начинающего новый ряд таблицы - необходимо указывать начальный тэг, однако всегда можно опустить конечный тэг. Элемент TR выступает в роли контейнера для ячеек таблицы и может иметь два
атрибута:
align
Устанавливает стиль горизонтального выравнивания для содержимого ячейки, который будет использоваться по умолчанию. Атрибут может принимать одно из следующих значений (независимо от используемого регистра): LEFT, CENTER или RIGHT и выполняет ту же самую роль, что и атрибут ALIGN при разметке параграфов.
valign
Данный атрибут может использоваться при выборе правила, согласно которому - если нет других указаний - будет осуществляться вертикальное выравнивание во всех ячейках данной строки. Атрибут может принимать одно из следующих значений (независимо от используемого регистра): TOP, BOTTOM или MIDDLE. При этом содержимое ячейки будет, соответственно, выравниваться по ее верхнему или нижнему краю, либо посередине.
Для разметки таблицы на уровне ячеек предусмотрено уже два элемента: элемент TH используется для разметки заголовков, а TD - для ячеек с данными. Такое разграничение позволяет программам пользователей оформлять заголовок таблицы и данные разными шрифтами, а кроме того улучшает работу браузеров, использующих речевой интерфейс. Для элементов TH и TD всегда необходимо указывать начальные тэги, конечные же всегда могут быть опущены. При разметке ячеек таблицы могут использоваться следующие атрибуты:
nowrap
В присутствии этого атрибута блокируется автоматический перенос слов в пределах текущей ячейки (например в случае <TD NOWRAP>). Действие этого атрибута эквивалентно использованию в ячейке объектов , создающих не отменяемые пробелы.
rowspan
Данный атрибут имеет значением положительное целое число, определяющее количество рядов, на которые простирается данная ячейка. Этому атрибуту по умолчанию присваивается значение 1.
colspan
Данный атрибут имеет значением положительное целое число, определяющее количество колонок, на которые простирается данная ячейка. По умолчанию атрибуту присваивается значение 1.
align
Определяет выполняемое по умолчанию правило горизонтального выравнивания для содержимого текущей ячейки, тем самым отменяя действие атрибута ALIGN, задаваемого при общей разметке текущего ряда ячеек. При этом используются все те же самые значения: LEFT, CENTER и RIGHT. Если атрибут ALIGN для данной ячейки не был указан, то по умолчанию для элементов <td> выполняется выравнивание по левому краю, а для элементов <th> - центрирование. Напомним, что вы можете отменить это правило, задав требуемый атрибут ALIGN в элементе TR.
valign
Определяет способ вертикального выравнивания для содержимого текущей ячейки, отменяя тем самым действие атрибута VALIGN, заданного при общей разметке данного ряда таблицы. Использует при этом те же самые значения: TOP, MIDDLE и BOTTOM. Если для данной ячейки атрибуту VALIGN вы не присвоили какого-либо значения, то по умолчанию для нее осуществляется выравнивание по центру. Те не менее вы можете изменить такое правило, задав нужный атрибут VALIGN в элементе TR.
width
Задает ширину площадки, отводимой под содержимое данной ячейки, в пикселах и без учета ширины границ. Как правило, при разметке будет использоваться предложенное здесь значение за исключением тех случаев, когда оно начинает вступать в противоречие с минимальной шириной остальных ячеек в той же самой колонке.
height
Задает высоту площадки, отводимой под содержимое данной ячейки, в пикселах и без учета ширины границ. Как правило, при разметке будет использоваться предложенное здесь значение за исключением тех случаев, когда оно начинает вступать в противоречие с минимальной высотой других ячеек в той же самой колонке.
Таблицы обычно рисуются в виде некой рельефной поверхности, приподнимающейся над поверхностью листа и имеющей внешние скошенные края. Далее на этой поверхности размещаются уже отдельные ячейки таблицы. Границы вокруг конкретной ячейки рисуются только в том случае, если она имеет некое содержание. Пустые ячейки в разметке не участвуют за исключением случаев, когда в них используется объект .
Описанные алгоритмы, используемые для автоматического определения размеров таблиц, должны учитывать минимальные и максимальные требования к ширине со стороны каждой ячейки. Эти ограничения затем используются при определении минимальной и максимальной ширины каждой колонки и далее - для всей таблицы в целом.
Ячейки, охватывающие несколько колонок, вносят вклад в ширину каждой из них. При этом один из возможных алгоритмов состоит в том, чтобы равномерно распределить минимальную и максимальную ширину данной ячейки между этими колонками, другой заключается в распределении пропорционально вкладам в ширину колонок от остальных обычных одинарных ячеек.
В некоторых пользовательских программах бывает необходимо или может быть желательно делать перенос строки посреди слова. В подобных случаях должна ставиться видимая метка, уведомляющая о том, что это произошло.
Минимальная и максимальная ширина вложенных таблиц дает вклад в минимальную и максимальную ширину ячейки, куда они помещены. Как только ширина для таблицы верхнего уровня становится известной, в ней может быть произведен расчет колонок. Далее появляется возможность назначить ширину для вложенных таблиц и, следовательно, рассчитать ширину колонок и для них. Если это возможно, всем колонкам должна назначаться по крайней мере их минимальная ширина. При этом предлагается, что оставшееся после этой процедуры свободное место будет также распределено между колонками, но уже пропорционально разнице между максимальной и требуемой минимальной шириной каждой из них.
Заметим, что указываемые в пикселах ширина и высота относятся к изображению на экране и должны умножаться на определенный множитель при подготовке к печати на устройствах с очень высоким решением (таких как лазерные принтеры). Например, если программа пользователя выводит изображение на дисплей с разрешением 75 пикселов на дюйм и при этом печатает его же на лазерном принтере с разрешением 600 точек в дюйм, то в последнем случае значения в пикселах, заданные в атрибутах разметки HTML, должны быть умножены на 8.
Пример HTML документа
Этот код был взят по адресу http://www.vid.ru/
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<meta name="GENERATOR" content="Microsoft FrontPage 2.0">
<title>VID TV Company</title>
</head>
<body background="http://www.vid.ru/images/home_back.jpg" bgcolor="#16002F"
text="#C4C8D9" link="#C4C8D9" vlink="#C4C8D9">
<div align="center"><center>
<table border="0" width="580">
<tr>
<td><p align="center"><img src="http://www.vid.ru/images/head.jpg"
width="66" height="98"><br>
<img src="http://www.vid.ru/images/spaceit.gif" width="1" height="10"> <br> <img src="http://www.vid.ru/ani/logo_1.gif" width="231" height="37"> <br>
<img src="http://www.vid.ru/images/new_year.jpg" width=335 height=257> </p>
</td>
</tr>
<tr>
<td align="center"><img src="http://www.vid.ru/images/spaceit.gif"
width="1" height="15"> <a href="http://www.vid.ru/home.htm"><img
src="http://www.vid.ru/images/win.gif" alt="Win CP-1251" border="0"
width="26" height="14"></a><img src="http://www.vid.ru/images/spaceit.gif" width="100" height="1">
<a href="http://www.vid.ru/k8/home.htm">
<img src="http://www.vid.ru/images/koi8.gif" alt="Koi-8r" border="0" width="46" height="14"></a> </td>
</tr>
<tr>
<td align="center"><img src="http://www.vid.ru/images/spaceit.gif"
width="1" height="30">
<img src="http://www.vid.ru/cgibin/counter.exe?link=vid&style=vid&width=6"
alt="counter"> </td>
</tr>
<tr>
<td><p align="center"><img src="http://www.vid.ru/images/spaceit.gif"
width="1" height="35"><br>
<a href="http://www.weekend.ru/About_Us/" target="_blank">
<img src="http://www.vid.ru/images/gorod.gif" border="0" width="113" height="38"></a><br>
<font size="2">design, hosting <br>
& programming</font></p>
</td>
</tr>
</table>
</center></div>
</body>
Итак, мы рассмотрели наиболее общие аспекты глобальных сетей, их работы, структуры. Кратко рассмотрели работу в сети Интернет. Мы старались донести до читателя их возможности, применение, показать ту важную роль, которую они играют в жизни современного общества, в его развитии. Показали, что многие люди уже сейчас, на данном этапе развития цивилизации, являются потребителями информации, а поэтому потенциальными пользователями информационных сетей, причем с каждым днем становится все настойчивее требование времени стать реальными пользователями глобальной информационной системы. Именно для того, чтобы облегчить и ускорить этот необходимый переход к информационному обществу, к самому широкому распространению доступа к информационным сетям, ко всемерному и всеобщему их использованию, мы и рассказали о наиболее общих принципах и понятиях, положенных в основу технологии современных сетей передачи данных. Надеемся, мы смогли донести до вас эти начальные знания, которые призваны служить лишь отправной точкой на вашем пути к сияющим вершинам мира Знаний и Информации.
Пользуясь приведенными ниже рекомендациями, создайте новый сайт.
Рекомендации.
Итак, Вы желаете сделать полезный, красивый и удобный сайт. Что же для этого нужно? Какие факторы влияют на популярность web-сайта? С чего лучше всего начать создание собственного сайта? И какие ошибки могут подстерегать на этом пути?
Мы попробовали выделить основные причины, которые, по нашему мнению, влияют на популярность сайта:
Содержание - является одной из самых важных составляющих. Если на сайте нет полезной информации, способной заинтересовать определенный круг людей, то можно ставить вопрос о необходимости существования сайта как такового. Вспомните, как много полезных страничек Вы видели в последнее время по сравнению с общим количеством посещенных Вами мест?
Дизайн - вторая по важности составляющая хорошего сайта. От дизайна зависит, насколько привлекательны будут странички, т.е. в конечном счете, сколько людей дополнительно захотят прийти и посмотреть на Ваш сайт. Ведь если Вам очень понравился дизайн сайта, то Вы, наверняка, расскажете о нем своим друзьям. Не забывайте, что встречают-то по одежке.
Для того, чтобы сделать хороший сайт, не обязательно даже использовать графику. Есть полезные сайты с минимумом графики (или даже без оной) и масса бесполезных, забитых мегабайтными картинками. Для web-сайта, как впрочем, и для других дизайнерских проектов, очень важным является стиль сайта, придающий ему собственное лицо и узнаваемость.
Скорость загрузки Ваших страничек - НИ ОДИН НОРМАЛЬНЫЙ ЧЕЛОВЕК НЕ БУДЕТ ЖДАТЬ ЗАГРУЗКИ ВАШИХ СТРАНИЧЕК В ТЕЧЕНИЕ ЧАСА. Отсюда следует вывод - странички нужно оптимизировать для получения наименьшего их размера (разумеется, в пределах разумного). Давайте посчитаем максимально допустимый объем средней WEB-странички.
Принимая к рассмотрению тот факт, что подавляющее число людей (и небольших организаций) имеют доступ к Интернет через коммутируемую связь, т.е. по телефону и за повременную оплату, (средняя скорость доступа по модему в России составляет 14400 бит/c), можно посчитать время, затрачиваемое на перекачку одного килобайта (это без учета того факта, что большинство людей держат открытыми одновременно 2-3 или более копий броузера - в этом случае просто разделите среднюю скорость доступа на количество открытых броузеров).
Следовательно, средняя скорость перекачки равна 14400 бит/с / 8 =1800 байт/с - это в идеальном случае, на самом деле немного меньше из-за повторных передач ошибочно принятых блоков. Поэтому примем среднюю скорость равную 1200-1500 байт/с. Только не путайте данную скорость, которая является скоростью до провайдера, со скоростью перекачивания Вашей странички, она может оказаться намного меньше, так как информация, достигшая Вашего компьютера, проходит через несколько компьютеров (как правило, 10-15), и скорость определяется самым узким звеном в цепи.
Допустим, днем загруженность компьютеров, передающих информацию из одной сети в другую больше, чем ночью. Кроме этого, если Ваш сервер находится на компьютере, который соединен с провайдером по коммутируемой (или выделенной) линии на скорости 14400 бит/с, то человек, сидящей по другую сторону Интернет, ни за что не добьется скорости выше этой. Принимаем допустимым время загрузки одной странички не более 40 секунд, (эта величина взялась из личного опыта), отсюда - 40*1200= 48Кб - это и будет тот максимальный объем, который может иметь страничка вместе со всей графикой, находящейся на ней. Если Вам требуется разместить информацию большего размера, то предупредите об этом пользователя или распределите информацию по нескольким страничкам.
Раскрутка web-сайта - включает в себя не только регистрацию Вашего сервера во всех возможных Поисковых системах мира, но и такие средства, как размещение информации в средствах массовой информации (URL - в газете), а также упоминание о Вашем сайте на визитках, рекламках, в газетных и журнальных статьях и т.д. Кроме этого, на web-сайте обязательно должен быть упомянут E-mail для связи с Вами или, в случае его отсутствия, хотя бы номер телефона.
Ясная и логическая структура размещения информации на Вашем сервере - ничто так не утомляет при поиске нужной информации, как плохо структурированные сервера.
Отсутствие орфографических и грамматических ошибок - этот пункт мы включили сюда ввиду громадного количества ошибок на свежепоявляющихся web-сайтах. Ведь это просто - набивайте текст в редакторе с проверкой орфографии и перечитывайте то, что Вы написали перед выставлением Вашего сервера на всемирное обозрение.
Вот, пожалуй, и все основные принципы, соблюдение которых гарантирует успех Вашему WEB-сайту, а через него - и благополучие, и расширение известности Вас, Вашей фирмы, клуба, движения.
В качестве упражнения попробуйте пройтись в WEB и посчитать время на загрузку различных страничек, а также обоснованность их загрузки (исходя из содержания). Посмотрите, насколько понятна структура сервера и удобство пользования им.
Для изготовления профессиональных страничек Вам придется профессионально изучить несколько профессиональных программ.
Итак, какие же программы Вам понадобятся? Ниже приведены конкретные категории программ с пояснениями - для чего они нужны.
Программа обработки растровой графики одна из важнейших программ, которую Вам придется освоить. Она Вам поможет при сканировании фотографий и их коррекции. При помощи этой программы вы сможете создавать те невообразимые эффекты, которые Вы видите в Интернет, рекламах и т.д. По моему мнению, обязательными являются следующие умения для этого класса программ:
· Сканирование фотографий;
· Коррекция отсканированных и готовых фотографий, в том числе - тоновая и цветовая коррекция;
· Ретушь фотографий;
· Умение вырезать из сканированного изображения нужный фрагмент;
· Понимание различий в форматах графических файлов;
· Грамотное использование фильтров;
· Работа со слоями.
В качестве конкретных программ можно привести следующие:
· Adobe PhotoShop CS3 - данная программа является лидером в области графических программ такого рода, но она требует и соответствующих ресурсов от Вашего компьютера.
· Paint Shop Pro - по моему мнению, лучшая бесплатная программа, которая, к тому же, поддерживает фильтры от Adobe PhotoShop и очень быстро работает с объемными фотографиями. Может импортировать и экспортировать изображения в 40-50 разных форматов.
Некоторые работы Вам придется делать, используя разные редакторы. Идеальных редакторов нет, некоторые лучше делают одно, некоторые - другое.
Программа обработки векторной графики еще одна из важных для дизайнера программ. Позволяет создавать с нуля или с использованием библиотек с картинками различные логотипы, кнопки, эффектные надписи и т.п. Принципы векторных редакторов сильно отличаются от растровых, поэтому осваивать их придется отдельно; зато, освоив их, Вы заодно сможете изготавливать для себя фирменные визитки, бланки, брошюры (как побочный эффект). Вам потребуются следующие навыки:
· Умение работать с графическими объектами (группировка, наложение, получение нестандартных объектов);
· Умение работать с кривыми и узлами кривых;
· Умение работать с направляющими и сеткой;
· Умение разбираться в цветовых моделях (RGB, CMYK, HSB);
· Работа с текстом - умение разместить его на любой кривой;
· Грамотное использование градиентов и заливок (включая фрактальные);
· Грамотное использование эффектов.
Типичными представителями данного класса являются Corel DRAW и Adobe Illustrator - они обе являются лидерами в своих областях и, соответственно, располагают самыми последними достижениями в области векторной графики. В противовес этим тяжеловесам можно порекомендовать симпатичную и быструю программку Corel Xara!; пусть Вас не вводит в заблуждение слово Corel - данная программа разработана фирмой XARA, которая была куплена корпорацией, как один из конкурентов. Сейчас доступна уже ее вторая версия. Данная программа, в отличие от двух предыдущих, очень быстрая и маленькая, но некоторые эффекты и команды, доступные в других программах, в ней сделать или трудно, или вообще невозможно.
Программы просмотра web-страничек или броузеры - наиболее популярные веб-браузеры на данным момент - это Internet Explorer, Firefox, Opera, Safari, Chrome. Хорошая WEB-страничка должна одинаково выглядеть в любом из популярных броузеров. Вы должны позаботится о том, чтобы владельцы всех броузеров могли прочитать Вашу страничку.
Простой текстовый редактор понадобится для ручного исправления и добавления HTML-кода, т.к. существующие визуальные редакторы не могут полностью контролировать процесс создания web-странички (а если Вы делаете страничку со сложным дизайном, то, возможно, Вам придется весь код писать в редакторе). В качестве примера подойдет обычный "Блокнот" из стандартной поставки Windows или один HTML-редакторов, которые имеют встроенные команды на проверку правильности тэгов и структуры документов, например, HoTMetaL.
Визуальные редакторы позволяют быстро разрабатывать несложные web-странички и корректировать уже написанные, но с ними нужно быть осторожными, т.к., благодаря именно им, Ваша страничка может плохо глядеться в другом броузере. Наиболее известные кандидаты - это "Microsoft Front Page" и "Adobe Dreamveawer". Используйте из них тот, который Вам больше нравится. Иногда Вам придется вручную исправлять код, сгенерированный данными программами.
Текстовый процессор с возможностью проверки орфографии - очень полезен для набора текста и исправления ошибок в распознанных текстах. Как пример - обычный "Microsoft Word".
Программы распознавания текста могут Вам сэкономить массу времени, избавляя от ручного набора напечатанных текстов. Программ по распознаванию русского языка всего две - это CuneiForm и FineReader. Используйте по возможности последние версии.
Некоторые специальные программы эти программы позволят Вам выполнить некоторые эффекты и справиться с такими задачами, которые другими способами трудновыполнимы или не выполнимы вообще.
Ниже перечислены некоторые из этих программ:
Пожалуй, это более-менее полный список программ для создания WEB-страничек. Не все из них, конечно, нужно сразу же иметь, чтобы начать писать свои странички. Для начала достаточно какого-нибудь броузера и визуального редактора, а уже по мере накопления опыта Вы освоите и другие программы.
На какой круг людей рассчитан WEB-сайт?
Информация - вот, что в первую очередь привлекает посетителя на Ваш сайт. Все остальное лишь помогает сориентироваться в ней и облегчает доступ. И с этой точки зрения, самый первый вопрос, который можно предъявить WEB-сайту - для чего ты, собственно, нужен? Что ты можешь сказать мне такого, чего я не знаю? Чем ты лучше других?
Спросите себя об этом. На тинэйджеров или на профессоров-медиков? - от этого вопроса напрямую зависит и дизайн сайта, и та информация, которую следует размещать на сайте. Исходя из контингента предполагаемых посетителей попытайтесь встать на их точку зрения и расставьте пункты меню Вашего сайта в порядке привлекательности для посетителя - это может оказаться достаточно трудно, но можно уже после запуска сайта проверить статистику посещаемости разделов и, исходя из этого, скорректировать меню.
Что собой представляет информация?
On-line публикацию статьи или статистические данные, полемику по горячему вопросу или интервью со звездой?
Давайте начнем с публикации в Интернет книги. Книги рассчитаны на чтение от начала до конца (исключая справочники и словари) - мы к этому привыкли, поэтому и в Интернет мы должны поместить ее таким образом, чтобы ее можно было читать от начала и до конца. Гипертекст позволяет организовать оглавление в виде удобных гиперссылок и перейти сразу к нужному разделу; но если человек читает все подряд, то в конце каждого раздела мы должны сделать ссылку на следующий, не заставляя человека пробираться назад в поисках оглавления. Кроме этого, в отличие от обычной книги, в которой то и дело появляются сноски, в HTML-документе такую сноску можно и должно оформить как переход к глоссарию или отдельной страничке, на которой эта сноска объясняется.
В случае опубликования какой-нибудь научной статьи или горячего материала появляются, как правило, отклики и рецензии. Их нужно оформлять как отдельные документы, но в конце рецензируемого документа нужно сделать ссылку на рецензию - это позволит читателю ознакомиться со всеми "за и против".
Теперь рассмотрим случай, когда у нас статистические данные. Как представляется статистика? Правильно - в виде таблиц. А теперь вопрос: Вы любите длиннющие таблицы, в которых можно найти все что угодно через каких-нибудь полчаса после начала исследования? Скорее всего –нет. Поэтому надо позаботиться о пользователе и дать ему ту информацию, которая ему интересна (и не обязательно публиковать в Интернет всю базу данных). В случае, если информация не помещается в окне броузера и требует прокрутки по горизонтали, разделите одну большую таблицу на несколько маленьких и легко понятных, а затем свяжите их перекрестными ссылками. А если у Вас все же получается длинная таблица, то визуально отделяйте, допустим, каждую пятую строку при помощи изменения цвета ячейки.
И в случае, если Ваша статья или таблица занимает больше пяти экранов, разместите в начале краткий список подразделов и от них локальные ссылки в пределах статьи.
|
|
|
|
|