Отправляет email-рассылки с помощью сервиса Sendsay

Веб-дизайн. От А до Я.

  Все выпуски  

Веб-дизайн. От А до Я. # 22


Служба Рассылок Subscribe.Ru

Веб - Дизайн. От А до Я.
# 22
13 ноября 2001г.
Проект сайта "AGS Design" Dweb.ru & DwebHost.ru
кол-во подписчиков - 10000

    В этом выпуске:

  Ссылки Вебмастеру:

* Web-дизайн, архив рассылок
* Анимация и графика
* Иконки и кнопки
* Фоновые изображения
* Flash
* Баннеры
* Все скрипты
* Фото
* 3D анимация

Доброе время суток!


Хостинг от Dweb.ru


DwebHost.ru - недорогой (от $7,61/100Мб в мес.) качественный хостинг. Отсутсвие многих ограничений, в том числе на траффик. Т.е. вы можете позволять посетителям скачивать файлы с вашего сайта, можете размещать много графики - без боязни, что хостер оштрафует вас за превышение лимита. Преимущества:
Ежедневное резервное копирование Ваших файлов
24-часовая отзывчивая служба поддержки по телефону, email. Помощь в установке и настройке скриптов - бесплатно!
Мощная платформа серверов и каналов связи.
Предустановленное программное обеспечение: Форум, поисковая система, рассылка, гостевая и т.д... 15 ящиков (+ web-интерфейс), 6 поддоменов, web-панель, 100 мегабайт на диске, полностью Ваши;) Свои страницы ошибок (404, 500 и т.п..) SSI, PERL, PHP3/4, C++, MySQL, Crontab, FTP, WAP, .htaccess и т.д.
Каждому клиенту - бесплатно 50,000 баннерных показов +..., партнёрская программа (33%!). http://dwebhost.ru - Сходите, есть на что посмотреть.

Есть вопросы? Пишите.


Оглавление/Вверх


Веб-мастеринг экстерном


О чем эта статья
Тема веб-дизайна в последнее время очень актуальна практически во всех сферах жизнедеятельности, связанных с Интернет-технологиями. Об этом пишут многочисленные сетевые журналы, этому вопросу отводят специальные рубрики традиционные оффлайновые издания, на своих серверах размещают полезные статьи различные веб-студии, наконец, огромное количество людей, в той или иной степени разбирающихся в тонкостях дизайна для 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 


Оглавление/Вверх


Ссылки "На Досуге"


* Супер Чат - Такого Вы ещё просто не видели.
* Веб-Дизайн - Обучающие материалы по HTML, PhotoShop, Corel Draw, JavaScript, CGI, различным графическим редакторам. Есть спецкурс создания суперграфики.
* Big Design Studio Гайкалова Ивана - надежная и недорогая дизайн-студия, предоставляет все сферы услуг относящихся к созданию сайта.
* Удвойте скорость своего Интернета - Ускоритель Интернет. Уникальный сервис, позволяющий до двух раз увеличить скорость загрузки интернет страниц. Самые продвинутые технологии кеширования и сжатия.
* BIG-WEB - все для вебмастера: Анимированные GIF, Бакграунды, баннеры, Java Script, Applet, CGI, PHP, HTML, CSS. Советы, статьи, эфективная раскрутка.

Попасть в рубрику, правила.


Рассылки Вебмастера


Вас интересуют вопросы web-дизайна, скриптов, графики, и т.п.? Тогда у Вас есть возможность подписаться на рассылку "Веб-Дизайн, азы" (более 26000 подп.)

У Вас есть вопросы по софту вебмастера, скриптам, графике и т.п.? Эти вопросы Вы можете задать в рассылке "Веб-Дизайн. Вопросы и Ответы" и в следующем номере получить отеты на свои вопросы.

На эти рассылки Вы можете на сайте http://dweb.ru/



Баннерообменные сети.


TBE (Tranzit Banner Exchange) http://dweb.ru/go/ - уникальная сеть обмена, позволяющая увеличить посещаемость Вашего сайта. Поддерживаются типоразмеры баннеров 120х60, 100х100 и Текстовые блоки. Комиссия 7-10%. Высокий CTR. Выкуп показов. Каждому новому участнику 20000-50000 БЕСПЛАТНЫХ показов + Ваша кнопка на главной странице http://dweb.ru/! Узнать подробности и зарегистрироваться можно на сайте http://dweb.ru

XBN (Xmen Banner Network) http://dweb.ru/go/ - уникальная сеть обмена, позволяющая увеличить посещаемость Вашего сайта. Поддерживаются баннеры 468х60. Комиссия 7-10%. Высокий CTR. Выкуп показов. Каждому новому участнику 20000-50000 БЕСПЛАТНЫХ показов + Ваша кнопка на главной странице http://dweb.ru/! Узнать подробности и зарегистрироваться можно на сайте http://dweb.ru




Оглавление/Вверх


ICQ - Клуб


Адрес Клуба http://dweb.ru/1/icq.htm

Если у Вас возник вопрос по дизайну, графике, скриптам и т.п. То Вы в любой момент можете его задать на странице Клуба любому консультанту находящегося в on-лайне.

Для тех, кто может, а главное хочет поделиться своими знаниями, Вы можете вступить в наш Клуб, для этого присылайте # ICQ, Имя, E-mail, Город, и темы по которым возможна консультация.


Оглавление/Вверх

Авторам

Вы хотите, чтобы ваши статьи были опубликованы в этой рассылке? Если вы считаете, что можете написать о дизайне, скриптам, графике и т.п., если Вам есть что сказать и о чем рассказать, я буду рад сотрудничеству с Вами. Присылайте свои предложения и статьи.
Давайте вместе делать общее дело! Присылайте свои соображения, мысли, истории... поделитесь своим опытом.
В качестве гонорара Вы получите показы сети RLE (от 1000 до 10000) плюс N-кол-во читателей, которые посетят Ваш сайт.
Буду рад сотрудничеству.

Ведущий рассылки Дмитрий Давыденко


http://subscribe.ru/
E-mail: ask@subscribe.ru
Отписаться
Убрать рекламу

В избранное