ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 24.11.2024
Просмотров: 583
Скачиваний: 1
Рассмотрим основные направления, по которым проводится работа в процессе наполнения сайта информацией.
1.Характер информации. Основной вопрос, который обычно встает тут перед заказчиком и разработчиком: достаточно ли будет только текстового наполнения или есть необходимость дополнить его картинками, графиками и видеофайлами? Но на этом этапе также определяется формат текста и файлов. Здесь преследуется только одна цель-представление пользователю информации в наиболее привычном и удобном виде.
2. Структура информации. Самое первое мероприятие в этом отношении-определиться, какие разделы будут входить в состав сайта. Далее весь контент делится на множество мелких частей в соответствии со следующими критериями
-ориентация на ту целевую аудиторию, среди которой данная информация будет наиболее востребована;
-время поступления информации к пользователю: клиент должен получать сведения именно тогда, когда это наиболее оптимально в одном случае для него, а в другом-для администратора сайта;
-степень значимости информации для пользователя;
-тип информации;
-собственные критерии лица или компании, которым принадлежит сайт.
При структурировании информации следует учитывать общий объем контента, а также возможность его исправления в дальнейшем. Кроме копирайтера заказчик сайта может привлечь к этим задачам и других специалистов(журналистов, аналитиков и др.) Именно размер и способ раздробления контента диктует в дальнейшем организацию навигации сайта. С одной стороны, она должна позволять пользователю максимально быстро найти нужную информацию, а с другой-показать ему предварительно все доступные информационные ресурсы. В основном в навигации большинства сайтов используются следующие состовляющие:
-меню- представляет собой «оглавление» сайта с указанием его основных разделов; иногда каждый пункт меню содержит раскрывающиеся при наведении мышки подразделы;
-выпадающие списки - являются аналогами меню, но менее наглядны, так как разделы в них не видны пользователю сразу;
-карта сайта представляет собой схему всех разделов, она расположена на отдельной странице; является наиболее наглядным и удобным элементом навигации;
-кнопки по типу «назад» («back») и «вперед» («forward»), которые переводят пользователя на следущую и предыдущую страницу; удобны в тех случаях, когда каждая страница на сайте является продолжением другой;
-поисковая машина сервера-наиболее сложный элемент навигации представляет собой типичную поисковую программу и применяется на сайтах со сложной структурой или не имеющих структуры вовсе.
Форма передачи информации пользователю. После непродолжительного посещения главной страницы сайта пользователь, как правило, уже составляет мнение о том, что представляет собой сам сайт и какая полезная информация может быть на нем почерпнута. Поэтому именно на главной странице должна быть наиболее полная информация о сайте, включающая небольшой общий рассказ о проекте, рекламу, анонсы, новости и т.п. Причем все это должно преподноситься в удобной, легко воспринимаемой и ненавязчивой форме. Контент здесь должен постоянно обновляться - это вызывает у пользователя дополнительный интерес, а также свидетельствует о том, что сайт является динамичным и развивается. Постоянное обнаружение нового - эффективный стимул для повторного посещения. Для того чтобы клиенты легко воспринимали информацию, им сначала предоставляется основная информация, а затем поясняются подробности. Практика показывает, что большинство пользователей редко читают длинные статьи, останавливая свое внимание на коротких и ярких. Но если данная версия предназначена для вывода на принтер, то сокращать ее, напротив, крайне не рекомендуется. Зачастую клиент покидает страницу из-за ее слишком продолжительной загрузки. Поэтому рекомендуется размещать на сайте страницы, не превышающие по размерам 70 килобайт.
Особо следует упомянуть о таком виде управления контентом, как персонализация. Благодаря ей, пользователь может сам выбирать, в какой форме и в каком объеме он будет получать информацию. Это очень мощный механизм привлечения новых клиентов на сайт и удержания старых. Ну и, конечно же, на восприятие информации пользователем очень сильно влияет дизайн сайта.
Дополнение и изменение контента сайта. Сайт способен привлечь большое количество клиентов только в том случае, если его контент постоянно обновляется. Основными путями достижения этого являются:
-регулярная публикация новостей;
-создание новых разделов и дополнение существующих;
-наличие форумов и блогов.
Документ в окне с кодом HTML - это текстовый документ специального формата. Все файлы этого формата имеют расширение.html или .htm. В документе HTML обычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например<html>, <head>, <title>, </title>. Такие элементы разметки называются тэгами. Тэги бывают одиночными, открывающими и закрывающими и состоят из следующих друг за другом в определенном порядке элементов:
• левой угловой скобки <;
• необязательного символа слэш /, который означает, что тэг является конечным тэгом, закрывающим некоторую структуру, например, </title>. В этом смысле можно читать символ / как конец некоторого элемента разметки, например, строки или абзаца;
• имени тэга, например, html;
• необязательных атрибутов. Тэг может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например,align="center";
• правой угловой скобки >.
Таким образом, открывающий тэг <html>, стоящий вначале документа HTML и означающий его начало, состоит из имени html и двух угловых скобок < >, а тэг </html>, находящийся в конце Web-документа, кроме указанных элементов содержит также символ слэш /, означающий закрывающий тэг и указывающий на конец документа. Тэг <div align="center">, означающий разделение документа на части, содержит, кроме имени div, атрибут align со значением "center", означающий выравнивание по центру.
В тэгах могут использоваться только символы латинского алфавита, а в значениях атрибутов - любые символы. Если в качестве значений атрибута используются, например, символы кириллицы, то они должны быть заключены в кавычки, например name="Раздел 1".
Язык HTML не различает большие и малые буквы, так что тэги <HEAD>, <head> и <Head> эквивалентны. Далее мы будем использовать написание тэгов в нижнем регистре.
Большинство тэгов спарены: за открывающим тэгом следует соответствующий ему закрывающий тэг, а между ними содержится текст или другие тэги.
В таких случаях два тэга и часть документа, заключенная между ними, образует блок, называемый элементом HTML. Некоторые тэги, например <hr>, являются одиночными, и для них закрывающий тэг не применяется. Такие тэги сами по себе являются элементамиHTML.
Большинство тэгов могут иметь один или несколько атрибутов - параметров, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тэг. Однако атрибутов может и не быть вовсе. Атрибут тэга состоит из имени, например, align,знака равенства = и значения, которое задается строкой символов, например, "center":align="center". Значения атрибутов обычно заключаются в кавычки. Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить, например: align=center.
Каждый HTML-документ имеет определенную структуру, которая выглядит следующим образом:
<html>
<head>
…
</head>
<body>
…
</body>
</html>
Структура HTML-документа содержит следующие обязательные элементы:
• тэги <html> и </html>, которые отмечают начало и конец документа;
• заголовок, ограниченный тэгами <head> и </head>;
• тело, ограниченное тэгами <body>...</body>.
В заголовке, ограниченном тэгами <head> и </head>, с помощью тэгов <title>...</title> определяется название документа, которое должно описывать его содержимое и обычно содержит не более 5-6 слов. Это название отображается браузерами в строке заголовка рабочего окна программы, а роботы, составляющие индексы для поисковых систем, идентифицируют документ, используя его название.
Кроме элемента <title>...</title>, заголовок может содержать элементы <meta>...</meta>. Открывающий тэг <meta>включает пары имя=значение, описывающие свойства документа, например, авторство, список ключевых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов. Имея под рукой таблицу тэгов и таблицу цветов. Теперь вы можете смело наполнять страницы сайта любой информацией.
Таблица тэгов.
|
Основные теги |
|||||||||||||
|
<html></html> |
Указывает программе просмотра страниц что это HTML документ. |
||||||||||||
|
<head></head> |
Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. |
||||||||||||
|
<body></body> |
Определяет видимую часть документа |
||||||||||||
|
Теги оглавления |
|||||||||||||
|
<base href="www.?"> |
Указание браузеру от какого базового адреса все ссылки (кроме ссылок явно прописанных полностью) |
||||||||||||
|
<base target="?"> |
Указание браузеру от какого базового окна в котором открываются все ссылки (кроме ссылок с отдельным указанием данного параметра) |
||||||||||||
|
<meta name="allow-search" content="?"> |
Указание для поисковых роботов как следует сканировать данную страницу |
||||||||||||
|
<meta http-equiv="distribution" content="?"> |
Указание для поисковых роботов относится ли данная страница к мировым |
||||||||||||
|
<meta name="robots" content="?"> |
Указание для поисковых роботов как следует сканировать данную страницу |
||||||||||||
|
<meta name="author" content="?"> |
Указание автора странички |
||||||||||||
|
<meta name="keywords" content="?"> |
Описание содержащийся информации (для поисковых машин) |
||||||||||||
|
<meta http-eguiv="content-type" content="text/plain;churset="?"> |
Указание браузеру в какой кодировке следует подгружать страницу (Window-1251, KOI8-R, KOI8-U, ISO-8859-5, UTF-8, UTF-16 и д.р.) Некоторые хостинги (восновном иностранные) автоматически перекодируют страници получаемые сервером в определенную кодировку. Поэтому уточняйте передпостановкой этого тега у поставщиков хостинга этот вопрос. |
||||||||||||
|
<meta name="description" content="?"> |
Ключевые слова странички (для поисковых машин) |
||||||||||||
|
<title></title> |
Помещает название документа в оглавление программы просмотра страниц |
||||||||||||
|
Атрибуты тела документа |
|||||||||||||
|
<body bgcolor="?"> |
Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет. |
||||||||||||
|
<body text="?"> |
Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет. |
||||||||||||
|
<body link="?"> |
Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет. |
||||||||||||
|
<body vlink="?"> |
Устанавливает цвет гиперссылок, на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет. |
||||||||||||
|
<body alink="?"> |
Устанавливает цвет гиперссылок при нажатии. |
||||||||||||
|
Теги форматирования текста |
|||||||||||||
|
<pre></pre> |
Обрамляет предварительно отформатированный текст. |
||||||||||||
|
<h1></h1> |
Создает самый большой заголовок |
||||||||||||
|
<h2></h2>, <h3>, </h3><h4></h4>, <h5>, </h5> |
Создает заголовоки промежуточных размеров |
||||||||||||
|
<h6></h6> |
Создает самый маленький заголовок |
||||||||||||
|
<b></b> |
Создает жирый текст (нерекомендованный) |
||||||||||||
|
<i></i> |
Создает наклонный текст (нерекомендованный) |
||||||||||||
|
<tt></tt> |
Создает текст - имитирующий стиль печатной машинки. (нерекомендованный) |
||||||||||||
|
<kbd></kbd> |
Создает текст - имитирующий стиль печатной машинки. (рекомендованный) |
||||||||||||
|
<var></var> |
Название переменных отображается курсивом |
||||||||||||
|
<cite></cite> |
Выделение цитат курсивом |
||||||||||||
|
<address></address> |
Отображается курсивом в виде отдельного абзаца |
||||||||||||
|
<em></em> |
Наклонный текст (воспринимается посковыми роботами как выделение) |
||||||||||||
|
<strong></strong> |
Жирный текст (воспринимается посковыми роботами, как особо сильное выделение) |
||||||||||||
|
<font size="?"></font> |
Устанавливает размер текста в пределах от 1 до 7. |
||||||||||||
|
<font color="?"></font> |
Устанавливает цвет текста, используя значение цвета в виде RRGGBB. |
||||||||||||
|
Гиперссылки |
|||||||||||||
|
<a href="URL"></a> |
Создает гиперссылку на другие сайты. |
||||||||||||
|
<atarget="?"></a> |
Указывает в каком окне открывать гиперссылку.
|
||||||||||||
|
<a href="NAME"></a> |
Создает гиперссылку на другую страницу. |
||||||||||||
|
<a href="mailto:EMAIL"></a> |
Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу. |
||||||||||||
|
<a href="#name"></a> |
Создает гиперссылку на метку текущей страници. |
||||||||||||
|
<a name="name"></a> |
Отмечает часть текста, как метку для гипперссылок на странице. |
||||||||||||
|
<a href="NAME#name"></a> |
Создает гиперссылку на метку другой страници. |
||||||||||||
|
Форматирование |
|||||||||||||
|
<p></p> |
Создает новый параграф |
||||||||||||
|
<p align="?"></p> |
Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center |
||||||||||||
|
<nobr> |
Запрещает перевод строки. |
||||||||||||
|
<wbr> |
Указывает где разбивать строку для переноса при необходимости. |
||||||||||||
|
<br> |
Вставляет перевод строки. |
||||||||||||
|
<blockquote></blockquote> |
Создает отступы с обеих сторон текста. |
||||||||||||
|
<dl></dl> |
Создает список определений. |
||||||||||||
|
<dt> |
Определяет каждый из терминов списка |
||||||||||||
|
<dd> |
Описывает каждое определение |
||||||||||||
|
<ol></ol> |
Создает нумерованный список |
||||||||||||
|
<li> |
Определяет каждый элемент списка и присваивает номер |
||||||||||||
|
<ul></ul> |
Создает ненумерованный список |
||||||||||||
|
<li> |
Предваряет каждый элемент списка и добавляет кружок или квадратик. |
||||||||||||
|
<div align="?"></div> |
Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей |
||||||||||||
|
Графические элементы |
|||||||||||||
|
<img src="name"> |
Добавляет изображение в HTML документ |
||||||||||||
|
<img src="name" align="?"> |
Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle |
||||||||||||
|
<img src="name" border="?"> |
Устанавливает толщину рамки вокруг изображения |
||||||||||||
|
<img src="name" vspase="?"> |
Устанавливает поля сверху и снизу |
||||||||||||
|
<img src="name" hspase="?"> |
Устанавливает поля сбоков |
||||||||||||
|
<img src="name" alt="?"> |
Всплывающая подсказка при наведении на имедж |
||||||||||||
|
<hr> |
Добавляет в HTML документ горизонтальную линию. |
||||||||||||
|
<hr size="?"> |
Устанавливает высоту (толщину) линии |
||||||||||||
|
<hr width="?"> |
Устанавливает ширину линии, можно указать ширину в пикселах или процентах. |
||||||||||||
|
<hr noshade> |
Создает линию без тени. |
||||||||||||
|
<hr color="?"> |
Задает линии определенный цвет. Значение RRGGBB. |
||||||||||||
|
Таблицы |
|||||||||||||
|
<table></table> |
Создает таблицу. |
||||||||||||
|
<tr></tr> |
Определяет строку в таблице. |
||||||||||||
|
<td></td> |
Определяет отдельную ячейку в таблице. |
||||||||||||
|
<th></th> |
Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом) |
||||||||||||
|
<caption></caption> |
Определяет подпись таблицы |
||||||||||||
|
Атрибуты таблицы |
|||||||||||||
|
<table border="#"> |
Задает толщину рамки таблицы. |
||||||||||||
|
<table cellspacing="#"> |
Задает расстояние между ячейками таблицы. |
||||||||||||
|
<table cellpadding="#"> |
Задает расстояние между содержимым ячейки и ее рамкой. |
||||||||||||
|
<table width="#"> |
Устанавливает ширину таблицы в пикселах или процентах от ширины документа. |
||||||||||||
|
<table height="#"> |
Устанавливает высоту таблицы в пикселах или процентах от высоты документа. |
||||||||||||
|
<tr align="?"> или <td align="?"> |
Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right. |
||||||||||||
|
<tr valign="?"> или <td valign="?"> |
Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom. |
||||||||||||
|
<td colspan="#"> |
Указывает кол-во столбцев, которое объединено в одной ячейке. (по умолчанию=1) |
||||||||||||
|
<td rowspan="#"> |
Указывает кол-во строк, которое объединено в одной ячейке. (по умолчанию=1) |
||||||||||||
|
<td nowrap> |
Не позволяет программе просмотра делать перевод строки в ячейке таблицы. |
||||||||||||
|
<td width="#"> |
Устанавливает ширину ячейки в пикселах или процентах от ширины таблицы (ячейки одного столбца не могут иметь разную ширину). |
||||||||||||
|
<td height="#"> |
Устанавливает высоту ячейки в пикселах или процентах от высоты таблици (ячейки одной строки не могут иметь разную высоту). |
||||||||||||
|
Фреймы |
|||||||||||||
|
<frameset></frameset> |
Предваряет тег <body> в документе, содержащем фреймы; |
||||||||||||
|
<frameset rows="value,value"> |
Определяет строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы фреймов. |
||||||||||||
|
<frameset cols="value,value"> |
Определяет столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймов. |
||||||||||||
|
<frame> |
Определяет единичный фрейм или область в таблице фреймов. |
||||||||||||
|
<noframes></noframes> |
Определяет, что будет показано в окне браузера, если он не поддерживает фреймы. |
||||||||||||
|
Атрибуты фреймов |
|||||||||||||
|
<frame src="URL"> |
Определяет какой из HTML документов будет показан во фрейме. |
||||||||||||
|
<frame name="name"> |
Указывает Имя фрейма или области, что позволяет перенаправлять информацию в этот фрейм или область из других фреймов. |
||||||||||||
|
<frame marginwidth="#"> |
Определяет величину отступов по левому и правому краям в нутрь фрейма; должно быть равно или больше 1. |
||||||||||||
|
<frame marginheight="#"> |
Определяет величину отступов по верхнему и нижнему краям в нутрь фрейма; должно быть равно или больше 1. |
||||||||||||
|
<frame scrolling=VALUE> |
Указывает будет-ли выводится линейка прокрутки во фрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto. |
||||||||||||
|
<frame noresize> |
Препятствует изменению размеров фрейма пользователем. |
||||||||||||
|
Ифрейм и его атрибуты |
|||||||||||||
|
<iframe></iframe> |
Создает контейнер, который может содержать любые элементы. Остальные элементы обтекают этот контейнер. |
||||||||||||
|
<iframe src="URL"> |
Определяет какой из HTML документов будет показан в ифрейме. |
||||||||||||
|
<iframe name="name"> |
Указывает Имя ифрейма, что позволяет перенаправлять информацию в этот ифрейм . |
||||||||||||
|
<iframe vspase="?"> |
Устанавливает поля сверху и снизу с наружи от ифрейма |
||||||||||||
|
<iframe hspase="?"> |
Устанавливает поля сбоков с наружи от ифрейма |
||||||||||||
|
<iframe marginwidth="#"> |
Определяет величину отступов по левому и правому краям в нутрь ифрейма; должно быть равно или больше 1. |
||||||||||||
|
<iframe marginheight="#"> |
Определяет величину отступов по верхнему и нижнему краям в нутрь ифрейма; должно быть равно или больше 1. |
||||||||||||
|
<iframe scrolling=VALUE> |
Указывает будет-ли выводится линейка прокрутки в ифрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto. |
||||||||||||
|
<iframe width="#"> |
Определяет ширину ифрейма |
||||||||||||
|
<iframe height="#"> |
Определяет высоту ифрейма; |
||||||||||||
|
<iframe title="?"> |
Текст всплывающей подсказки |
||||||||||||
|
Формы |
|||||||||||||
|
<form></form> |
Создает формы |
||||||||||||
|
<select multiple name="NAME" size="?"></select> |
Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки. |
||||||||||||
|
<option> |
Указывает каждый отдельный элемент меню |
||||||||||||
|
<select name="NAME"></select> |
Создает ниспадающее меню |
||||||||||||
|
<option> |
Указывает каждый отдельный элемент меню |
||||||||||||
|
<textarea name="NAME" cols=40 rows=8></textarea> |
Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту. |
||||||||||||
|
<input type="checkbox" name="NAME"> |
Создает checkbox. |
||||||||||||
|
<input type="radio" name="NAME" value="x"> |
Создает radio кнопку. |
||||||||||||
|
<input type=text name="foo" size=20> |
Создает строку для ввода текста. Параметром Size указывается длина в символах. |
||||||||||||
|
<input type="submit" value="NAME"> |
Создает кнопку "Отправить" |
||||||||||||
|
<input type="image" border="0" name="NAME" src="name.gif"> |
Создает кнопку "Отправить" - для этого используется изображение |
||||||||||||
|
<input type="reset"> |
Создает кнопку "Очистить" |
||||||||||||
Таблица цветов.
|
000000 |
000020 |
000040 |
000060 |
000080 |
0000a0 |
0000c0 |
0000ff |
|
002000 |
002020 |
002040 |
002060 |
002080 |
0020a0 |
0020c0 |
0020ff |
|
004000 |
004020 |
004040 |
004060 |
004080 |
0040a0 |
0040c0 |
0040ff |
|
006000 |
006020 |
006040 |
006060 |
006080 |
0060a0 |
0060c0 |
0060ff |
|
008000 |
008020 |
008040 |
008060 |
008080 |
0080a0 |
0080c0 |
0080ff |
|
00a000 |
00a020 |
00a040 |
00a060 |
00a080 |
00a0a0 |
00a0c0 |
00a0ff |
|
00c000 |
00c020 |
00c040 |
00c060 |
00c080 |
00c0a0 |
00c0c0 |
00c0ff |
|
00ff00 |
00ff20 |
00ff40 |
00ff60 |
00ff80 |
00ffa0 |
00ffc0 |
00ffff |