Доброе время суток!
О чем эта статья
Тема веб-дизайна в последнее время очень актуальна практически во всех сферах жизнедеятельности, связанных с Интернет-технологиями. Об этом пишут многочисленные сетевые журналы, этому вопросу отводят специальные рубрики традиционные оффлайновые издания, на своих серверах размещают полезные статьи различные веб-студии, наконец, огромное количество людей, в той или иной степени разбирающихся в тонкостях дизайна для Web, создают ресурсы, посвященные этому ремеслу, стремясь донести до начинающего веб-мастера азы этого кропотливого дела. Ваш покорный слуга относится к последней категории, посему решил поделиться с читателями своим скромным практическим опытом. Надеюсь, это кому-то пригодится.
Начало начал
Начнем мы с того момента, когда все вопросы, связанные с разработкой концепции будущего сайта, решены, схематические наброски общего вида сделаны, названия и содержание разделов определены - то есть, с момента, когда остается только сесть и начать творить.
Работать мы, разумеется, будем в каком-нибудь текстовом редакторе (например, в том же Блокноте) или, как вариант, в HTML-редакторе (HomeSite и др.), забыв о таком инструменте, как визульный веб-редактор (Netscape Composer и др.). И начнем с одного из самых важных и актуальных вопросов, к которому необходимо подойти со всей ответственностью, а именно - теги. Причем не какие-нибудь, а в своем роде основные, наличие или отсутствие которых в преобладающем количестве случаев никак не повлияет на визуальное представление сайта.
Некоторые веб-мастера считают необязательным обособление содержательного и программного кодов внутри документа тегами <HTML> и </HTML>, полагаясь на догадливость самих браузеров, которые, увидев, какое расширение у документа, должны правильно отобразить содержимое файла на экран. Действительно, MS Internet Explorer последних версий так и сделает, ибо он всегда отличался особой "сообразительностью". Чего нельзя сказать о его сопернике на рынке браузеров Netscape Navigator'е, особенно его ранние версии. Вообще, следует сказать, что последний браузер (а также замыкающий тройку браузеров-лидеров по популярности во всем мире обозреватель Opera) - весьма капризен, поэтому, создавая сайт, всегда приходится под него подстраиваться.
Далее идет тег-контейнер <HEAD>, внутри которого могут быть такие интересные элементы, как теги мета-данных, таблиц стилей и скриптов. Остановимся подробнее на каждом из них.
Мета-теги
Мета-теги по сути имеют два основных атрибута - HTTP-EQUIV и NAME. Первый можно отождествить с HTTP-заголовками, и мета-теги с этим атрибутом на ряде серверов могут быть автоматически преобразованы в HTTP-заголовки. Вид мета-тега с этим атрибутом выглядит так:
<META HTTP-EQUIV="имя" CONTENT="содержание">. Ниже перечислены основные случаи использования этого тега:
- META HTTP-EQUIV="expires"
Возможность запрета кэширования веб-страниц за счет указания даты устаревания документа (актуальна для ресурсов с динамически изменяющимся контентом); Значение атрибута CONTENT описывается в следующей последовательности: день недели (Mon, Tue, Wed и т.д.), число (01, 02, 03 и т.д.), месяц (Jan, Feb, Mar и т.д.), год, время (часы, минуты, секунды) и часовой пояс (GMT);
- META HTTP-EQUIV="refresh"
Автоматическое перенаправление на другой адрес (редирект). Причин для использования такой конструкции может быть несколько: ваш ресурс переехал на другой сервер и др. Дополнительные атрибуты - CONTENT (ставится число, определяющее количество секунд, через которые редирект будет осуществлен) и URL (полный адрес, на который перейдет браузер);
- META HTTP-EQUIV="Content-Type"
Определение типа документа; Атрибут CONTENT выводится в следующем виде:
"text/html; charset=кодировка документа". Наиболее используемыми значениями кодировки являются Windows-1251 и KOI8-r. На некоторых серверах возможно автоматическое перекодирование документов, в связи с чем использование этой конструкции не допускается. Также необходимо проследить, чтобы кодировка текста документа совпадала с кодировкой, обозначенной в значении charset.
- META HTTP-EQUIV="Content-language"
Указание языка документа.
Из редко используемых конструкций можно упомянуть такие, как PICS-Label (Platform-Independant Content rating Scheme: определяет так называемый рейтинг содержания документов для взрослых), Window-target (определяет окно текущего документа; используется в основном на ресурсах с фреймовой структурой) и другие.
Основные конструкции с применением атрибута NAME:
- META NAME="Robots"
Используется для индексации документа поисковыми роботами. Возможные значения для атрибута CONTENT:
- ALL (разрешение индексации документа со всеми присутствующими в нем гиперсвязями);
     - NONE (запрет индексации документа со всеми присутствующими в нем гиперсвязями);
- INDEX (разрешение индексации документа);
- NOINDEX (запрет индексации документа);
- FOLLOW (разрешение индексации присутствующих гиперсвязей);
- NOFOLLOW (запрет индексации присутствующих гиперсвязей);
Если такая конструкция (META NAME="Robots") не указывается, то робот индексирует документ со всеми гиперссылками (равнозначно значению ALL или INDEX, FOLLOW);
- META NAME="Description"
Краткое описание документа, предназначенное для поисковых систем (до 100 символов);
- META NAME="Keywords"
Ключевые слова документа (предназначены для индексации поисковыми системами; указываются через запятую, не более 1000 символов);
- META NAME="Author"
Указание имени автора документа.
- META NAME="Generator"
Автоматически вставляется многими веб-редакторами, с помощью которого создавался документ.
- META NAME="Copyright"
Информация об авторских правах на документ.
- META NAME="URL"
Определение частоты индексации документа (использование данной конструкции полезно в случае отсутствия необходимости индексировать документы-дубликаты ("зеркальные копии") или автоматически генерируемые страницы, чего можно избежать за счет указания атрибуту CONTENT значения абсолютного адреса - "absolute_url");
Из редко используемых конструкций можно упомянуть такие, как Document-state (возможность повторной индексации), Distribution (масштаб распространения документа), Resource-type (определение состояния документа) и другие.
В целом, необходимо помнить, что использование всех мета-тегов абсолютно не нужно. В зависимости от типа документа, его содержания и пр., следует выбрать только самые необходимые теги мета-данных. Наиболее важными являются данные для поисковых систем и указание кодировки документа.
Таблицы стилей
Каскадные таблицы стилей (Cascading Style Sheets - CSS) представляют собой специальные шаблоны отображения тех или иных элементов документа. Назначить такой стилевой шаблон можно тремя способами:
- Связывание
(задание свойств документа внутри специального файла с расширением .css);
- Внедрение
(задание стилевых свойств для одного документа в его начале);
- Описание
(задание свойств отдельных элементов внутри документа);
Далее кратко рассмотрим правила описания стилевых свойств по каждому из способов.
Связывание:
Способ связывания предполагает создание специального файла таблиц стилей и его вызов из самого документа по указанному адресу на сервере. Пример:
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">
Создать такой файл можно на любом текстовом редакторе, сохранив с расширением CSS, или при помощи специальных программ, позволяющих посредством выбора пунктов соответствующих рабочих меню определить набор стилевых правил и автоматически сгенерировать исходный файл. Одной такой, весьма удобной программой является TopStyle компании Bradsoft.
Описание свойств отдельных элементов, а также псевдоклассов, классов и идентификаторов производится примерно в следующем виде:
BODY, TD
{
font-family : Arial, sans-serif;
font-size: 11px;
color: #6A5206;
}
A:Hover
{
text-decoration: underline;
color: #87690B;
}
.block
{
color: #0B6698;
font-family: Helvetica;
font-size: 12 px;
font-weight: 800;
}
Способ связывания данных о стилевых свойствах в один файл-шаблон чаще всего используется в случае нежелания веб-мастера описывать стили каждого отдельного элемента (например, по причине большого количества описываемых элементов и слишком длинного списка стилевых правил, что увеличивает размер документа) или соответствия одного шаблона всем документам веб-узла. Однако, следует помнить о том, что нельзя делать файл стилевого шаблона слишком большим по размеру: при плохом соединении с сервером браузер пользователя может и не обнаружить такой шаблон. То же может произойти в случае какой-либо ошибки на сервере при выполнении определенной команды. И главное, о чем нельзя забывать: тег указания пути размещения файла CSS не используется вместе с тегами форматирования, т.к. при просмотре в том месте, где дана информация для браузера о стилевом шаблоне, отображаться ничего не будет.
Внедрение:
Способ внедрения подразумевает описание стилевых свойств в начале самого документа. Делается это с помощью тега-контейнера (парного тега) <STYLE></STYLE>:
<STYLE TYPE="text/css">
<!--
...здесь идет описание свойств, по виду аналогичное при методе связывания данных CSS...
-->
</STYLE>
В этом случае браузер, считывая HTML-код и определяя свойства элементов документа в разделе <HEAD>, получает информацию об отображении объектов до загрузки раздела <BODY>, т.е непосредственного содержания документа (текста, графики, таблиц и пр.).
Описание:
Способ описания реализует CSS в документе за счет определения стилевых свойств конкретного элемента. Например, следующий код указывает браузеру, что данный блок должен отображаться красным цветом:
<P STYLE="color:red;">
...текст...
</P>
А этот код позволяет браузеру при наведении на кнопку отображать курсор в виде указательного пальца:
<INPUT TYPE="button" VALUE="Кнопка" STYLE="cursor:hand;">
Данное определение стилевых свойств может также быть реализовано за счет приведения отдельного форматируемого элемента к соответствующему классу, информация о котором хранится в файле-шаблоне на сервере или указана в начале документа между тегами <STYLE> и </STYLE>. Например, в документе есть два типа заголовков: один должен отображаться синим цветом и использовать гарнитуру Helvetica, другой - быть жирным курсивом. Соответственно, создается два класса заголовков, например, heading1 и heading2. В этом случае описание свойств для них будет выглядеть следующим образом:
.heading1
{
color: blue;
font-family: Helvetica;
}
.heading2
{
font-weight: bold;
font-style: italic;
}
Теперь надо указать внутри самого HTML-документа, какой класс соответствует какому из заголовков:
<H3 CLASS="heading1">...текст...</H3>
<H3 CLASS="heading2">...текст...</H3>
Алексей Петюшкин
Не вдаваясь в технологию создания WEB-страниц,
основанных на фреймах, перечислю достоинства и недостатки использования
этих фреймов.
Достоинства:
- не требуется писать один и тот же код меню для разных страниц
сайта;
- более быстрая загрузка (не требуется перегружать всю область просмотра);
- можно получить удобный интерфейс.
Недостатки:
- не все роботы правильно читают фреймы (проблемы с индексацией
сайта);
- большая вероятность того, что пользователь перейдет из поисковой
системы не на страницу, разбитую на фреймы, а на один из фреймов;
- не все браузеры (в том числе off-line) правильно читают фреймы;
- значительное уменьшение рабочей площади на экране;
- при неудачном формировании - возможны сбои и ухудшение качества
интерфейса;
- большинство пользователей нелюбит фреймы, особенно горизонтальные
- на больших разрешениях или наоборот на малых (640x480) у пользователя
на экран может быть на полэкрана или превратиться в полоску.
Короче: большинство передовых студий WEB-дизайна напрочь отказались
от использования фрэймов.
Бурусов Д.В. (с) 2001
Что нужно настоящему веб-матеру для полноценной
работы? Совсем не много. В этой статье я опишу весь
soft который нужен для нормальной работы web-мастеров.
1) Правильный выбор HTML-редактора.
В наше время существует огромный выбор
HTML-редакторов и причём а любой вкус. Начиная с Front Page 2000 и
Macromedia Dreamweaver и завершая Allaire Home Site и 1st Page 2000.
Некоторые веб-мастера считают, что если их "коллега" работает в
таком редакторе как Front Page или Dreamweaver, то он бездарный
"чайник". Ну а если ты работаешь в Home site или подобных ей, то ты
"профи". Но такого мнения не все мастера, но всё-таки есть
такие. Я, например, сам очень уважаю редактор Front Page, на
нём легко работать и конструировать сайт (Между прочим эту статью
пишу в нём). Согласитесь, что если вы только начинающий веб-мастер,
то вы сразу не начнёте работать в Allaire Home Site, а легко начать
с DreamWeaver и уже потом переходить на более сложные
редакторы. Но в чем различие между этими редакторами?
Во-первых Front Page и DreamWeaver очень громоздкие и их нельзя
скачать с Интернета. Front Page 2000 можно приобрести вместе с
Office 2000 Professional или на компакт-дисках. Так же на
"компашках" можно приобрести DreamWeaver. Ну а Home site и 1st Page
можно скачать с любого сайта с софтом.
2) Теперь нужен графический редактор.
Конечно же в этой категории лидирует Photoshop. Он уже
дошёл до шестой версии. Он очень удобен в работе и имеет всё, что
нужно для создания качественной графики. Не имеет смысла много
рассказывать о нём. Но есть и другие редакторы. такие как Macromedia
FireWorks и Macromedia Flash. Но Flash подходит для разработки
Flash-презентаций, а FireWorks отличный редактор растровой графики.
Но тут не я должен объяснять, что кому выбирать. Каждому своё.
3) Браузер (Browser)
У нас в Инете пользуются популярностью только два
браузера - это Microsoft Internet Explorer и Netscape Navigator. Так
как эти браузеры абсолютно разные, то при построении сайта вам
придётся насчитывать на, то что к вам на сайт будут приходить и
пользователи Explorer'а и пользователи Netscape'а и строить сайт
так, чтобы в этих двух браузерах выглядел одинаково. Но теперь
мастерам стало на много легче строить свой сайт, т.к. компания
Netscape не выдержила конкуренции с компанией Microsoft и прекратила
своё существование. Но всё-таки наши пользователи не перестают
пользоваться, сохранившимися на старых CD дисках, копиями этой
программы.
4) GIF Animator'ы
Вы не раз, заходя на различные сайты, видели
красивые анимационные картинки и баннеры. Для создания таких
картинок существуют различные программы, называющиеся GIF
Animator'ами. У нас пользуются популярностью две такие проги: 1)
Ulead GIF animator и 2) Microsoft GIF Animator. Их задание
заключается в том, чтобы через определённый лимит времени
прокручивать различные картинки. Теперь кратко рассмотрим каждую из
этих двух программ. Начнём с Ulead GIF animator'a : чем он хорош,
это конечно куча "прибамбасов" к программе. Это и и различные
эффекты и большой объём функций. Но она и "весит" побольше,чем
продукт компании Microsoft. Но я отдаю предпочтение Microsoft GIF
Animator'у. В нём содержится всё, что необходимо для хорошей
анимации. Да и он "весит" всего 1 mb. Его можно скачать отсюда: http://www.wmaster.ru/soft.htm.
Качайте и пользуйтесь.
5) FTP-клиенты.
Последняя стадия при создании сайта, это закачка
всей созданной информации на сервер. При этом нужно использовать
FTP-клиенты. Имеет смысл привести в пример только два. Это Far
менеджер и CuteFTP. Очень удобным в использовании я считаю CuteFTP
(сам им пользуюсь). В нём предложено самое необходимое. Для создания
нового соединения достаточно нажать F4 и тут же будет выведено новое
окно, в котором нужно будет ввести необходимые данные для входа
через FTP. Ну а FAR менеджер считается ветераном среди FTP-клиентов.
Но единственный минус - неудобно вводить данные для соединения и
можно легко спутаться при подключении через FTP (особенно новичкам).
Но несмотря на это FAR очень популярен среди "сайтостроителей". Ещё
имеет смысл выделить такие FTP-клиенты как Web FTP и Arisoft Direct
FTP. Желаю приятного пользования.
Вообще, все приведённые выше программы вы можете заказать
на компакт-дисках на сайтах www.cdboom.com и www.alexsoft.ru.
Автор: Бочкарёв
Антон Источник: www.wmaster.ru
Ведущий рассылки Дмитрий Давыденко
|