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

Увлекательное вебстроительство: как сделать красиво?

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

  Январь 2001   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
27.01.2001
01:35:57
05:54:55
28
29
30
31
Автор Гость

Статистика

7.104 подписчиков
за неделю
←   Все выпуски   →

Увлекательное вебстроительство: как сделать красиво?


Служба Рассылок Subscribe.Ru проекта Citycat.Ru
Увлекательное вебстроительство: выпуск четвертый
Увлекательное вебстроительство: как сделать красиво?
выпуск # 4

Содержание выпуска

Руководство по Macromedia Dreamweaver для начинающих. Настройки редактора.

Руководство по правильному HTML

Полезные советы

Свои вопросы, предложения и пожелания по содержанию рассылки присылайте по адресу: mila_b@chat.ru. Я обязательно всем отвечу, а самые интересные вопросы будут опубликованы в рассылке.

Руководство по Macromedia Dreamweaver для начинающих

Настройки редактора (продолжение, начало см. в выпусках ## 2, 3)

File Types / Editors - типы файлов и сопоставление им редакторов

Так же, как и в предыдущих разделах, настройки описаны по порядку - сверху вниз.

Настройки записи кода в текстовый файл
  1. Открывать в режиме просмотра кода (Open in Code View). Здесь перечислены типы файлов, для которых требуется работа только с кодом - без визуального представления. Т.к. в третьем Dreamweaver'e не было возможности открывать код страницы непосредственно в главном окне редактора, в нем эта опция отсутствовала.
  2. Внешний редактор кода (External Code Editor). Насколько я знаю, встроенный текстовый редактор Dreamweaver'a мало кого полностью устраивает. Большинство пользуется внешними редакторами для окончательной "доводки" кода, например, HomeSite фирмы Allaire. Это окошечко предназначено как раз для того, чтобы вы могли прописать путь к своему любимому внешнему редактору. Если вы правильно заполните это поле, то в дальнейшем для переключения в другой редактор вам достаточно будет в меню Edit выбрать команду Edit with External Editor.
  3. Обновление измененных файлов (Reload Modified Files). Если вы изменили файл с помощью внешнего редактора, Dreamweaver может обновить его автоматически. В выпадающем списке доступны три значения для этой настройки: Always (всегда), Never (никогда) и Prompt (спрашивать). Естественно, вам сразу же захочется изменить значение по умолчанию (Prompt) на Always. Но! Опытные пользователи Dreamweaver'a знают, что этого делать не следует. Один из самых распространенных "глюков" этого редактора - внезапное объявление о том, что файл изменен во внешнем редакторе, после просмотра результата в браузере. Особенно часто это случается при редактировании файлов, содержащих "виртуальные" вставки на стороне сервера, т.к. во вставках, как правило, отсутствуют тэги <head> и <body>. Если такой файл просматривать в браузере отдельно от "родительского", то любой современный браузер "надстроит" ему эти тэги виртуально. А Dreamweaver, обнаружив новые тэги, решит, что файл изменен. Правда, иногда этот "глюк" возникает и при работе с обычными файлами, особенно при предпросмотре в Netscape Navigator. Это связано с особенностями интерпретации сложного кода различными браузерами, а также с особенностями работы "виртуальной памяти" в Windows. Поэтому этот параметр лучше не трогать, и в качестве значения по умолчанию оставить Prompt. Если вы точно знаете, что не изменяли файл во внешнем редакторе, вы всегда сможете ответить отрицательно на запрос Dreamweaver'a об обновлении файла.
  4. Сохранение файла перед загрузкой во внешний редактор. Здесь также стоит оставить значение Prompt, особенно тем, кто хорошо знает html, но недостаточно еще разобрался с функциями Dreamweaver'a. Если вы вдруг запутались в своих действиях в Dreamweaver'e и получили не совсем тот код, который хотелось, вы сможете отказаться от сохранения файла перед его загрузкой во внешний редактор. Тогда во внешнем редакторе вы увидите неизмененный код последней сохраненной версии. Кстати, HomeSite от Allaire также имеет специальную кнопку для переключения в Dreamweaver, если у вас установлены оба редактора. Эти две программы словно специально созданы для совместной работы, и подтверждением тому может служить недавнее сообщение об объединении Macromedia и Allaire.
  5. Редакторы для различных типов файлов (Extensions & Editors). Здесь Вы можете настроить редакторы для работы с изображениями, звуком, видео и т.п. Тогда вы сможете с помощью двойного щелчка по компоненту страницы запускать внешний редактор, чтобы отредактировать его. Если вы используете связку Dreamweaver - Fireworks, то редактором изображений .gif и .jpg по умолчанию является Fireworks. Я обычно меняю на Photoshop, оставляя Fireworks редактором по умолчанию только для .png.
    Странно, что в списке расширений изначально отсутствуют файлы .swf. Но добавить новые расширения и редакторы совсем несложно - для этого надо нажать на кнопку "+" над соответствующим полем. Соответственно, чтобы удалить какое-либо расширение или редактор, нужно выделить его и нажать на кнопку "-". Для одного типа файлов может быть одновременно назначено несколько редакторов, но один из них обязательно будет редактором "по умолчанию" (Primary). Этот редактор будет открываться по двойному щелчку на объекте. Чтобы отредактировать изображение с помощью "второстепенного" редактора, нужно щелкнуть по нему правой кнопкой мыши, из контекстного меню выбрать пункт Edit With, далее из появившегося списка выбрать нужный редактор. Чтобы сменить редактор по умолчанию, надо из списка редакторов выбрать нужный и нажать кнопку Make Primary.

Fonts / Encoding (настройка шрифтов и кодировки)

По этому разделу настроек чаще всего возникают вопросы у начинающих. Если кодировка настроена неверно, то Dreamweaver автоматически перекодирует кириллицу в символы Unicode, из-за чего появляются проблемы с редактированием html-кода в текстовом режиме. Отнеситесь внимательно к этим настройкам, однако учтите, что здесь настраивается лишь кодировка "по умолчанию", которая будет автоматически применяться ко всем новым страницам. Однако это не помешает вам в дальнейшем редактировать страницы в других кодировках, и даже использовать внутри одного сайта разные виды кодировок.

Настройка автоматического исправления ошибок и записи символов
  1. Кодировка по умолчанию (Default Encoding). Здесь вы выбираете кодировку, которую будете наиболее часто использовать при создании страниц. Если правилом на вашем сервере является размещение страниц в KOI-8r, то следует выбрать эту кодировку. Если же со стороны сервера нет никаких ограничений, то лучше пользоваться кодировкой Windows-1251 - по статистике, примерно у 70% пользователей сети браузеры по умолчанию используют именно ее.
  2. Настройки шрифта (Font Settings). В новых шрифтах Unicode заложены одновременно несколько наборов символов - к примеру, западноевропейский и кириллический. Данная установка сообщает Dreamweaver'у, какой набор символов следует использовать для отображения ваших страниц.
  3. Выдавать предупреждение при удалении или исправлении тэгов. Этот флажок должен быть обязательно установлен у начинающих, которые хотят как следует разобраться в HTML и научиться писать код руками. Ведь если Dreamweaver будет "молча" исправлять ваши ошибки, вы никогда о них не узнаете и будете продолжать ошибаться.
  4. Все последующие настройки этого раздела всего лишь указывают Dreamweaver'у, какие шрифты будут отображаться в окнах "Design View" и "Code View" в качестве шрифтов по умолчанию. Proportional Font - шрифт, который предположительно установлен в браузере в качестве шрифта "по умаолчанию" у посетителей вашей страницы. Fixed Font - моноширинный шрифт, которым отображаются блоки преформатированного текста, листинги кода и т.п. Code Inspector - какой шрифт вы предпочитаете для набора кода в текстовом режиме. Эти установки никак не скажутся в дальнейшем на внешнем виде вашей страницы. Вы можете установить вид и размер шрифта для перечисленных разделов.

Highlighting - подсветка цветом

Вносить изменения в данный раздел настроек вам потребуется лишь в том случае, если вы пользуетесь встроенной библиотекой и шаблонами Dreamweaver'a. Вы можете настроить требуемый цвет для подсвечивания границ редактируемых и нередактируемых частей шаблона, библиотечных элементов и т.н. "пользовательских тэгов".

Invisible Elements - Отображение значков невидимых элементов

Меня частенько спрашивают: "Нарисовал слои от руки в Dreamweaver'e, а при просмотре в браузере они все съехали вверх. В чем дело?" Дело в том, что Dreamweaver для облегчения редактирования слоев добавляет над слоем значок так называемой "якорной точки" слоя - точки, которая соответствует верхнему левому углу слоя (значения top и left соответствуют координатам именно этой точки). Естественно, из-за "якорного значка" слой "съезжает" вниз в визуальном режиме. Но эта погрешность была свойственна только третьему Dreamweaver'у, который позиционировал значок, а не слой. При этом в браузере позиционируется слой, из-за чего появляются визуальные отличия. Четвертый DW позиционирует слой точно в визуальном окне, а значок располагает по возможности над ним. Естественно, слой с координатами 0, 0 будет все равно смещен вниз, если вы не отключили отображение "якорных точек".

Помимо "якорных точек" слоев, Dreamweaver может отображать в виде значков многие другие элементы. Какие из них отключить, а какие оставить видимыми, - решать вам.

  • Named Anchors - тэги <a name="name"> (тэги якорей);
  • Scripts - тэги <script></script> в теле страницы (тэги сценариев, выполняемых в процессе загрузки страницы);
  • Comments - комментарии;
  • Line Breaks - тэги <br>;
  • Client-Side Image Maps - множественные ссылки внутри одного рисунка;
  • Embedded Styles - внедренные стили;
  • Hidden Form Fields - скрытые поля форм;
  • Form Delimiter - границы форм (границы будут не видны, если изменить вложенность тэгов, как это советовалось в прошлом выпуске);
  • Anchor Points for Layers - "якорные точки" (верхний левый угол) слоев;
  • Anchor Points for Aligned Elements - "якорные точки" выровненных элементов (это относится к элементам, поддерживающим атрибут "align" - таблицам, изображениям и т.п.). Если, к примеру, рисунок выровнен вправо относительно текста, то его "якорная" точка будет все равно отображаться в том месте абзаца, где он фактически вставлен (в начале абзаца, перед абзацем или в середине абзаца).
  • Server Markup Tags (ASP, CFML, ...) - тэги серверных меток. К ним также относятся тэги SSI.

Учтите, что если вы включили отображение невидимых элементов в виде символов, то выравнивание в визуальном режиме может отличаться от выравнивания в браузере, т.е. в этом случае уже не стоит особо доверять линейкам Dreamweaver'a.

(продолжение - в следующем выпуске)

Руководство по правильному HTML

Результаты голосования слегка поразили меня. Рассылка изначально задумывалась как руководство по эффективному использованию Dreamweaver'a, дополненное советами по верстке в неоднозначных ситуациях и по достижению полной совместимости с различными браузерами. Однако из голосования следует, что довольно большой процент читателей хотел бы видеть здесь и руководства по HTML, CSS и Java Script. Что же, идя навстречу вашим пожеланиям, начинаю публиковать эту рубрику.

Введение

Прежде всего давайте разберемся, что же такое HTML. Эта аббревиатура расшифровывается как Hyper Text Markup Language - язык разметки гипертекста. Подробно об изобретении гипертекста и его применении можно почитать в параграфах "Руководства" Артемия Лебедева. А мы сейчас поговорим о разметке.

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

[начало заголовка 1-го уровня]
Как я провел лето
[конец заголовка 1-го уровня]
[начало заголовка 2-го уровня]
сочинение
[конец заголовка 2-го уровня]
[фотография меня на даче, обтекаемая текстом справа]
[начало абзаца]
Лето я провел на даче у бабушки.
Там было весело.
[конец абзаца]

Ну, а в HTML тот же самый фрагмент текста выглядит так:

<h1>Как я провел лето</h1>
<h2>Сочинение</h2>
<img src="photo.gif" align="left">
<p>Лето я провел на даче у бабушки. Там было весело.</p>

То есть тэги HTML - это и есть разметка текста, которая позволяет выделять заголовки, вставлять изображения, формировать таблицы, хотя вся информация при этом хранится в обычном текстовом файле, скорость передачи которого по сети довольно высока. А интерпретацию этих меток-тэгов и форматирование готового документа осуществляет браузер, который "знает", каким именно образом выделить заголовки и с помощью каких протоколов загрузить на страницу изображения.

Язык HTML постоянно развивается - добавляются новые тэги, некоторые тэги устаревают и отменяются, и т.д. За "стандартизацию" языка разметки отвечает интернет-консорциум W3C, который выпускает новую спецификацию HTML каждый раз, когда накопится достаточное количество изменений. На сегодняшний день действует спецификация HTML 4.01, и именно в соответствии с ней рекомендуется создавать новые HTML-страницы. Основным отличием спецификаций HTML 4.0 и HTML 4.01 от всех ранее действовавших спецификаций является требование максимально отделять структуру документа от его визуального представления, для чего рекомендуется использовать каскадные таблицы стилей (CSS). Поэтому изучение HTML мы с вами будем осуществлять параллельно с изучением CSS.

Правильный HTML*

Что же такое правильный HTML с точки зрения спецификации HTML 4.0 консорциума W3C? Прежде всего, это - HTML логичный, то есть такой, где тэгами заголовков выделены действительно заголовки, таблицы используются для представления табличной информации, а не в качестве каркаса страницы, и так далее. Такой HTML в части форматирования документа довольно близок к языку разметки будущего - к XML. Каскадные таблицы стилей позволяют настроить отображение любых элементов в соответствии с желаниями создателя страницы, в связи с чем полностью отпадает необходимость в использовании тэгов заголовков для визуального выделения отдельных элементов страницы, таблиц - для создания каркаса, а тэга <blockquote> - для увеличения отступа текста от края страницы. Также полностью отпала надобность в использовании так называемых тэгов физического форматирования - <b>, <i>, <u> - вместо них рекомендуется использовать тэги логического выделения <em>, <strong>, а внешний вид содержимого этих тэгов можно очень гибко настроить с помощью CSS. При использовании правильного HTML повышается логичность страниц, и если наконец страницы, созданные в соответствии со спецификациями W3C, возобладают в сети над страницами с физическим форматированием, то качество поиска нужной информации резко возрастет. Мы с вами, изучая HTML, постараемся следовать спецификациям, однако и устаревшие тэги тоже придется изучить - во-первых, для того, чтобы иметь возможность прочесть и отредактировать чужой код, а во-вторых, из-за того, что иногда приходится применять и устаревшие тэги, т.к. браузеры Netscape четвертых версий реализуют спецификацию 4.0 очень плохо.

Что такое действительный документ HTML

К сожалению, если проанализировать страницы, выложенные в сеть, выясняется, что огромная часть документов HTML не может считаться действительными. Действительный документ HTML должен обязательно содержать следующие части:

  • Тэг-контейнер <html></html>, являющийся внешним по отношению к остальным тэгам документа
  • Тэг-контейнер <head></head>, внутри которого, как минимум, должен обязательно присутствовать хотя бы один тэг, а именно:
  • Тэг-контейнер <title></title>, содержащий название документа.

Именно по содержимому тэга <title> в идеале должна производиться первоначальная индексация документов поисковыми системами. Но, к сожалению, у огромной части страниц этот тэг, необходимый для признания HTML-документа действительным, отстутствует. И, как ни странно, происходит это обычно по вине опытных (или считающих себя опытными) вебмастеров, которые верстают страницы руками, в блокноте или других текстовых редакторах. Потому что начинающие, делающие странички в визуальных редакторах, даже если и забудут про этот тэг - за них это сделает редактор. Правда, название документа будет в этом случае неприглядным, вида <title>Untitled Document</title>, но оно будет! Следовательно, и документ HTML будет считаться действительным, в отличие от документа "профессионала", который забыл про этот тэг.

Многие могут поинтересоваться: а как же тэг <body>? Почему он не включен в список обязательных тэгов? Дело в том, что на страницах, определяющих набор фреймов, вместо тэга <body> используется <frameset>. Эти страницы, при условии соблюдения перечисленных выше условий, также являются действительными документами HTML.

Итак, вот примеры минимальных действительных документов:

<html>
<head>
<title>Название документа</title>
</head>
<body>
Содержимое документа
</body>
</html>
 
<html>
<head>
<title>Название документа</title>
</head>
<frameset cols="80,*">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
</html>

(продолжение в следующем выпуске)

* Подробнее об отличиях между логическим и физическим форматированием см. мою статью в журнале "Мир Интернет" #1 за 2001 год - "Flash vs. XML".

Полезные советы

  • Очень часто встречается такая ситуация: вы задаете точные размеры ячеек таблицы в пикселах, но ячейки, содержащие текст, в браузере все равно расползаются "по-своему". Если у вашей таблицы нет видимых границ, то избавиться от этого поможет вставка дополнительной невидимой строки высотой в 1 пиксел, ячейки которой должны содержать прозрачные gif'ы нужной длины. Таким образом, с помощью gif-ов-распорок вы жестко фиксируете размеры ячеек. Пример кода: 
    <table width="400" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td width="100" height="1">
     <img src="spacer.gif" width="100" height="1">
    </td>
    <td width="220" height="1">
     <img src="spacer.gif" width="220" height="1">
    </td>
    <td width="80" height="1">
     <img src="spacer.gif" width="80" height="1">
    </td>
  </tr>
  <tr>
    <td>Текст ячейки 1</td>
    <td>Текст ячейки 2</td>
    <td>Текст ячейки 3</td>
  </tr>
</table>
    Здесь spacer.gif - это однопиксельный (1х1) прозрачный gif-распорка, масштабируемый вами произвольно. Если вы не забыли вставить его во все ячейки дополнительной строки и везде правильно указали его размеры, то строка высотой в один пиксел будет абсолютно незаметна, зато текстовые ячейки будут иметь строго заданную ширину.
  • Еще один способ применения прозрачных gif-ов. Наверное, все сталкивались с абсолютной неспособностью Netscape Navigator'a использовать фон-подложку для таблицы. Стоит только указать атрибут background тэга table, как тем же рисунком заливается и каждая ячейка <td> в отдельности. Если в качестве "подложки" используется крупный сложный неповторяющийся рисунок, то результат выглядит отвратительно. Чтобы избежать этого, нужно прописать в качестве background'a всем ячейкам все тот же spacer.gif (название может быть любое, имеется в виду прозрачный gif размерами 1х1). И все - проблема решена, таблица выглядит как надо.

Разделы рассылки

Какие разделы вы хотели бы видеть в рассылке?

Руководство по Dreamweaver

Руководства по другим редакторам HTML

Советы по HTML

Советы по CSS

Советы по JavaScript

Советы по DHTML

Руководство по HTML

Руководство по CSS

Вопросы читателей

Другие разделы

Результаты голосования

Бандурина Людмила, 26.01.2001. Архив рассылки находится здесь.

Перекодирование из HTML в текст осуществляется службой рассылок Subscribe.RU.
о3он
http://subscribe.ru/
E-mail: ask@subscribe.ru
Поиск
В избранное