Справочник по DreamWeaver MX

Справочник по DreamWeaver MX v0.3
(Ц) ФуксЪ
http://Rupor.Net/DW
* Этот справочник распространяется бесплатно благодаря sovhoz.ru
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal


1.1. Создаем новый файл

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление

дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.1. Создаем новый файл:
меню Файл/Создать (Горячие кнопки - Ctrl+N):

Рассмотрим выскочившее окно диалога:

Вторая вкладка содержит банк шаблонов пользователя, привязанный к конкретному сайту. У вас там скорее всего ничего не будет, ибо там прежде требуется создать шаблон.

Нижние два окошка:
Справа:
Basic Page (Основные виды страничек) -
HTML - то самое что нам и нужно на первом этапе;
HTML - Template - сделать шаблон;
Lybrary Item - библиотека значков;
CSS - Создание внешней таблицы CSS;
JavaScript - внешний Джава-Скрипт;
XML - а это делает документы в особом формате, старым программам непонятном, но очень удобном и перспективным. Но на начальном этапе он Вам тоже не потребуется.

Выбирая тип создаваемого документа в левой половинке окна, в правой мы можем увидеть как меняется предлагаемый ассортимент. Вообще, выбор заготовок впечатляет - на все вкусы и все виды. Впрочем, на первых порах нам это все не понадобится. Посему я ограничусь кратким перечислением что для чего нужно:
Слева:
Basic Page - Основное (перечислено выше)
Dynamicic Page - Динамическая страница. Как правило, написана на языке типа PHP, ASP, Perl и т.п.
это станет Вашим вторым шагом в изучении сайтостроения;
Template Page - здесь подборка шаблонов;
Other - вперемежку такие вещи как страничка скрипта, Фреймы;
CSS - Таблица каскадных стилей. В меню справа появится выбор, что имеется в заготовках;
Frame - управление фреймами. Фрейм - тяжело, громоздко, неудобно и после появления SSI стало отмирать, поэтому про них мы тоже распространяться не станем;
Page Designs - дизайны странички;
Page Designs (Acessible) - аналогично. Есть множество заготовок совершенно разных расцветок и форм.

Ну вот. Едем дальше: кнопка Help (Справка) - открывает файл помощи.
Настройки - (это к сохранению файлов не относится) в них можно переназначить горячие кнопки, названия пунктов меню и т.п. Очень гибкий инструмент.

Get More Content - ссылка на дополнительные примочки, которые зарегистрированные пользователи, войдя в интернет, могут скачать с сайта Макромедии. Ну и правая часть оконца, где, [image] собственно, можно наблюдать, что мы собираемся открыть. Внизу, под окном просмотра есть краткий комментарий.

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

дальше >>


1.2. Открыть во фрейме

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.2. Меню Файл/Открыть во фрейме:

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

На данный момент я лишь объясню что такое фрейм, не вдаваясь в детали. Тем кто не сталкивался и не знает что это такое:

Фрейм - устаревшая технология HTML. Предназначалась она для облегчения обновлений и редизайна сайта. Выглядит как разделение странички дополнительной полосой прокрутки - Scrollbar. Наблюдать его можно практически во всех простеньких чатах - это пожалуй одно из немногих редких мест, где фрейм оправдан и, более того, практически незаменим. Во всех остальных намного более удобно использование SSI (Server Said Includes, так называемые "Вставки на стороне сервера").

Открываем содержащую фрейм страничку. Щелкаем курсором в один из фреймов. После чего жмем "Открыть во фрейме" (см. картинку выше). Обращу особое внимание, что, как правило, во Фрейме располагается меню, чтобы видно его было с любой страницы сайта. Меняешь меню в одном файле, а при открытии сайта оно меняется на всех страницах сразу. То же самое делает и SSI, только без Scrollbar, и присущих фреймам сложностей и недостатков.

Итак, чтобы открыть в определенном фрейме сайта какой-либо лист, нужно ткнуть курсором в тот фрейм, в котором будете его открывать (делается это в окне визуального редактирования, то есть там, где видно изображение, а не код!) и перейти к опции "открыть во фрейме", выбрав заранее приготовленный файл, который и будет играть роль фрейма.

Данный файл отобразится в выбраном Вами месте. Исправив один этот файл вы получите изменения сразу на всех страницах, где он подгружается как фрейм. Довольно удобно, если ваш хостер не позволяет SSI. Впрочем, сейчас эта технология доступна даже на бесплатных, всем известных хостингах типа by.ru. Так что с фреймам, если вы не мечтаете сделать оффлайн-журнал или чат, возиться, пожалуй, не стоит.


1.3. Закрыть файл

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.3. Файл/Закрыть (Горячие кнопки - Ctrl+W и/или Ctrl+F4 ):

Закрывает текущую вкладку. Обратите внимание, не весь DreamWeaver, как это происходило бы по нажатии Ctrl+Q, а исключительно текущее окно редактирования. Если документ не сохранялся, перед закрытием выскочит меню с запросом на подтверждение необходимости сохранить редактируемый файл. При закрытии всего DreamWeaver`a с пачкой открытых документов он будет выдавать запросы на сохранение каждого поочередно, по мере закрытия.


1.4. Сохранить файл

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.4. Сохранить.

Сохранение текущего документа в DreamWeaver'е выполняется по нажатию горячих кнопок Ctrl+S, ничем от аналогичной команды в сотнях других программ не отличается. Посему расписывать ее не стану, а вот на "Сохранить как" остановимся подробнее.

1.4.1.Сохранить как...

Эта команда позволяет сохранить сделанные изменения в другой файл - или уже имеющийся, или вновь созданный (для чего в сооответствующем окне достаточно набрать желаемое название файла под которым и будут сохранены изменения). Эта функция очень удобна, к примеру, для клонирования почти одинаковых документов. Берется один из документов, например, имя1, сохраняется как имя2, вносятся изменения. Все сохраняется под имя3, опять вносятся изменения и т.п. Аналогичная функция присутствует абсолютно во всех работающих с документами программах.


1.5. Сохранить как шаблон

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.5. Сохранить шаблоном.

Что такое шаблон? Это страничка, в которой в ключевых местах (например, вместо меню) хранится некая метка, воспринимаемая DreamWeawer`ом для замены (сразу во всех ее содержащих файлах) этой метки на задаваемый код. Впрочем, эта функция Вам не пригодится. Ведь есть SSI и PHP (обе технологии позволяют заменить устаревшие фреймы и соответственно делают шаблоны ненужными)

Хранимые DreamWeawer`ом шаблоны можно каталогизировать к каждому конкретному сайту, если у вас их несколько.


1.6. Сохранить как шаблон

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.6. Сохранить шаблоном.

Позволяет сохранить сразу все открытые документы.
Отличить несохраненные документы в DreamWeaver'е можно по добавляемой в название измененных, но не сохранненных документов, звездочке:

А вот как оно выглядит вверху и внизу, во вкладках панели открытых файлов (она видна только если открыть более одного документа):


1.7. Отменить все

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.7. Отменить все.

Иногда полезная возможность, но сказать про нее особо нечего. Просто дает откат всех открытых документов к тому состоянию, в котором они пребывали на момент последнего сохранения. Обращу ваше внимание, - ПОСЛЕДНЕГО СОХРАНЕНИЯ, а не к моменту первого открытия вообще. То есть, если вы сохранили изменения после открытия, то к последнему сохранению и вернетесь.


1.8. Печать кода

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.8. Печать кода.

Когда вам совсем нечего делать или на монитор смотреть уже не хочется, свое творчество можно сбросить на красивую бумагу в трех-четырех экземплярах (конечно, не на свою, а казенную), и почитать на ночь, например или дать посмеяться знакомому гуру :)


1.9. Импорт. Импортирование из...

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.9. Импорт. Импортирование из...

Как Вы видите в субменю, импортировать DreamWeawer умеет из XML, Word или из файла с табличными данными. Про XML Вам еще рано. Импортирование из Word заключается в распознавании того, что Билл Гейтс считает HTML-кодом, вычищения 90% мути и вывешивания только чистого HTML.
Об импортировании из табличных данных мы поговорим подробнее.

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

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

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

"Делимитер" - есть не что иное, как выбор разделяющего данные символа или набора символов. То есть, пишем мы, например, "бла-бла-бла! бла-бла-бла!" и т.п. и ставим "!" как разделитель. Тогда первое у нас ляжет в первую ячейку, второе во вторую и т.п. В общем, суть, как полагаю, понятна.

В качества разделителей предлагается на выбор Таб, Комма (вот такая палка |) и Колон-СемиКолон - это точка с запятой и просто запятая. В общем, советую просто ставить "other", а в окне рядом с этим меню ставить символ, которым Вы разделяете свои колонки.
А это позволяет задавать таблице, которую сформирует DreamWeawer из импортируемого, - обрезать ли ячейки по ширине данных, либо втиснуть в заданную ширину (меньше, чем написано одной неразрывной строкой - самое длинное слово - они все равно, конечно, не станут).

А вот здесь дозволено выбрать каким шрифтом будет оформлена таблица. Вернее, тип шрифта. Толстый, наклонный или простой.


1.10. Экспортирование из.

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.10. Экспортирование из.

Как Вы видите из субменю, экспортировать DreamWeawer умеет:
- шаблоны XML (если они открыты в данный момент);
- стили CSS (вынесение в отдельный филей, если они вписаны в заголовок странички);
- и в таблицы.
Ну, первое вам на раннем этапе не потребуется, второе - и так все очевидно. В случае неясности рекомендую почитать про CSS. А вот об экспортировании из табличных данных мы поговорим подробнее:

В появившемся окне предложено выбрать разделитель:

В строке Line-Break надо выбрать перевод строки. Это нужно для хостинга, для сервера, который будет отображать вам информацию. Если он на Linux, то выбираем сообразно Linux, если на Windows - то Windows. Ну и, конечно же, Mac - Macintosh:


1.11. Преобразовать до совместимости с InternetExplorer 3.0.

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.11. Преобразовать до совместимости с InternetExplorer 3.0.

Собственно, эта функция Вам уже не нужна. Ибо не стоит равняться на задние ряды. Ныне на IE 3.0 могут сидеть только ...граждане совершенной, сферической формы.

Современные версии, на которые стоит равняться, - 5.0 и выше. Хотя не стоит забывать и про 4.0 (таковых примерно треть).

Лирическое отступление: версии броузеров, совместимых с IE после 4.0, содержат все основные фичи и примочки, действующие на сей момент как "стандарты".


1.12. Преобразовать в XHTML

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.12. Преобразовать в XHTML.

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

Был создан определенный формат, приемлемый для всех, кто так или иначе работает с документами. Это тоже формат разметки, в очень многом похожий на обычный HTML. Распознается практически всеми современными версиями программ, которые выдают результаты своей работы в виде таблиц, диаграмм, просто текстовых документов и списков. Формат удобен для переноса массива текстовой информации с одной программы в другую, для автоматического переконвертирования списков с, например, MS Excell прямо в сайт и т.п. Тема эта слишком объемна, посему оставим ее для других книг.


1.13. Предосмотр в броузере.

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.13. Предосмотр в броузере.

Просмотр броузером, на мой лично взгляд, здесь реализован из рук вон плохо, что для Macromedia, в общем-то, не характерно. Просматривать результаты плодов все же проще, как тот файл, что редактируем, а не тот файл, который создается, как копия редактируемого и потом пересоздается после каждого изменения. В общем, нелогично организовано.

В субменю видим два броузера - IE там по умолчанию, Mozilla добавлена мною. Добавить можно так же и всякие там Opera, NetscapeNavigator и прочие "шедевры" творчества альтернативщиков.

Изменить список:

Настройки в DreamWeawer'е объединены в единый блок с множеством разделов. То, что в левой части этого окна, и есть эти самые разделы. А вот справа - непосредственно интересующие нас настройки. Изначально, у Вас в них будет присутствовать как минимум IE. Но при помощи кнопки с плюсом можно добавить какой-нибудь дополнительный броузер. Для этого достаточно указать его пусковой файл в появившемся окне:

Не забудьте также указать каким приоритетом будет обладать данный броузер - основным или альтернативным. Лично у меня, основным давно стала Мозилла FireFox. Чего и Вам советую.


1.14. Отладка в броузере.

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.14. Отладка в броузере.

К сожалению, Мозиллу сюда добавить у меня не получилось, но для IE оно работает вполне успешно. Суть процесса отличается от предыдущего пункта меню тем, что находит и отображает строки с тем местом, которое, по мнению броузера, содержит "ошибки". Хотя это вовсе не обязательно реальная ошибка.

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

Колонки слева направо: имя файла, в котором ищем ошибки, строка, тип ошибки, описание ошибки.

Ниже вынесено, к сожалению, непереведенное подробное описание ошибки с советом "что делать?".

При нажатии в этом окне на имеющуюся строку, в окне самого DreamWeawer'а выделится привлекшее внимание отладчика место:

Обратите внимание на номера строк. Выделяется именно та строка, где предполагается наличие ошибки.


1.15. Проверить страницу/Проверить Ссылки

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.15. Проверить страницу/Проверить Ссылки (Shift+F8):

Проверка правильности ссылок внутри и вне - сайта это мощная система выявления ошибок. Никакой блокнот не предоставит такой возможности. DreamWeawer кэширует все ссылки внутри сайта в специальную базу, сверяясь с которой, моментально определит есть ли документ на другом конце ссылки с текущего документа или нет.

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

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

После составления кэша:

Окно "Результаты" в одной из вкладок демонстрирует раздел работы со ссылками. Рассмотрим детали окна:

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

Стрелка курсора указывает на название файла, в котором проведена проверка. На нижнем бордюре расположена статистика поиска:

сколько всего ссылок, сколько правильных, сколько ошибочных и, наконец, сколько ведущих на внешние ресурсы.

Очень удобно реализован вывод неправильных или сомнительных ссылок. Они выстраиваются столбиком: слева название и адрес файла, справа - сама ссылка (причем, ее можно прямо тут же и поправить-отредактировать, просто нажав на нее курсором). Кстати, здесь можно и радикально быстро убедиться ведет ли с вашего сайта ссылка на соответствующий ресурс.

Для ленивых можно и просто выбрать подходящий файл в IE. Зеленый треугольник на левом бордюре окна позволяет выбрать "территорию" поиска:

>

проверить ссылки только в текущем документе;
проверить ссылки по всему сайту;
проверить ссылки в выделенных папках (то что открыто);
под треугольником есть значок с крестиком - остановка процесса, если вам уже надоело;
и, наконец, самой нижней является дискета, которая, как и везде, является стандартным символом сохранения. Сохранить можно список обнаруженных файлов. Например, если не успели все проверить сразу и решили отложить на потом.


1.16. Проверить страницу: проверить на совместимость.

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.16. Проверить страницу: проверить на совместимость.

DreamWeawer позволяет проверить и совместимость с тем или иным броузером. Собственно, осуществляется оно поиском распознаваемых броузером тегов.

После запуска появится запрос на подтверждение, что перед проверкой, "пациент" будет сохранен (ну, для тех, кто еще не решил, стоит ли сохранять сделанные изменения):

Здесь можно выбрать по нескольку версий самых популярных броузеров. Рекомендую равняться от IE 5.0 и выше. Остальное, в принципе, несущественно. А Mozilla смотрит все то же, что и IE, разве иногда с мелкими несостыковками границ, если сайт слеплен с ошибками.

А это результаты поисков: файл такой-то, строка-такая-то и диагноз найденному месту "этот атрибут не поддерживается или нерекомендован в IE 4.0".

Диагноз нередко выпадает за пределы одной строки своими размерами и его можно посмотреть полноформатно, нажав специальную кнопку:

(на кнопку, вызывающую появление такого окна, указывает курсор)

За сим, в общем-то, все. Да, любителям перестраховки не стоит надеяться, что Ваш сайт будет пригож всем броузерам. К сожалению, и по сей день большинство их создателей руководствуется не удобством конечного пользователя, а войной на рынке, нередко с нечестными методами конкуренции, которые как всегда сказываются на нас с Вами. Увы, у большинства по этим причинам все тот же унылый IE.

Самый простой способ сделать сайт красивым и универсальным - минимализм. Чем меньше скриптов и кодов тем больше вероятность, что его правильно "поймут" все броузеры.


1.17. Проверить страницу: проверить разметку HTML.

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.17. Проверить страницу: проверить разметку HTML.

В принципе, эта функция работает очень глючно. Не знаю уж почему, но мне выдает ошибку на КАЖДОЙ строке. Видать, что-то не то с кодировками, а может оно только на латиницу ориентировано..

Но для общего развития все же поясню очевидное:

Все то же самое как и в предыдущем уроке. Название файла, номер строки и описание предполагаемой ошибки на английском.


1.18. Проверить страницу: проверить разметку ХML.

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.18. Проверить страницу: проверить разметку XML.

Все то же самое как и в проверке правильности, и в проверке разметки. Применяется для документов XML, которые пока еще не получили повсеместного, достаточно широкого распространения, чтобы простые смертные на них равнялись. Так что просто запоминаем, но не используем.


1.19. Заметки

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.19. Заметки:

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

Итак, смотрим ниже:

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

Ставим галочку, чтобы показывало.

Ну а тут, во второй вкладке того же окна, можно настроить Ваши "пояснительные записки" для совсем неугомонных поясняльщиков.


1.20. Список файлов, открывавшихся последними

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.20. Список файлов, открывавшихся последними:

Некоторое количество открывавшихся последними документов, как и в большинстве серьезных программ, будет видно в нижней части меню.

Удобен тем, что не требует бродить по разным директориям, выискивая каждый раз часто используемые файлы.


1.21. Выход (Ctrl+Q)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

1.21. Выход (Ctrl+Q):

Понимать бувально. При нажатии свернет все окна внутри DreamWeawer'а, спросив сохранять ли (если есть несохраненные изменения) и закроет DreamWeawer. Остановить операцию можно, нажав в окне вопроса "отмена".


10.1. Меню "Помощь":

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

10.1. Меню "Помощь":

Собственно, стандартный набор пунктов, повествующих о программе, списке изменений в последней версии и т.п., много-много справочных материалов. Жаль, что их не перевели.

Большинство пукнтов ведут в разные разделы справочного файла, исключая, пожалуй, DreamWeaver Exchange, который приводит к запуску броузера и попытке подключения к сайту Macromedia, к разделу с расширениями (plugin`s).

Скачанные расширения можно установить / удалить при помощи Менеджера расширений, который следует как раз за вышеописанным пунктом. Но поскольку большинство из них вроде как платные, лучше скачивать их с ююдругих сайтов :)

Продвинутые программисты могут сами создать такие расширения, если им для работы требуется нечто специфическое. Там же можно и передать Macromedia свои достижения, чтобы другие пользователи могли скачать эти творения себе.

Ниже идут Форум Macromedia (все на английском, а жаль. У нас в настоящее время открыт форум по DreamWeaver`у - забегайте.


11.1. Создание сайта: С чего начать?

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

11.1. Создание сайта: С чего начать?

Начнем, как водится, с начала. Прежде всего, следует выбрать что именно мы делаем. Пусть для начала это будет домашняя страничка имени Васи Пупкина.

Качаем нужные программы:

1. DreamWeaver MX (DW)
2. Русификатор к DreamWeaver`у
3. TotalCommander - файл-менеджер (если у вас есть Far, DiscoCommander, NC или DOSNavigator можно не качать)
4. Small http Server - встроенный в DreamWeawer сервер не очень удобен, поэтому я рекомендую пользоваться внешним. Оптимально - Apach, но для новичков он слишком наворочен и 98% его возможностей как правило невостребованы. Поэтому ограничимся в нашем рассмотрении Small HTTP Server`ом - намного более простой в обращении программой, написанной Максом Феоктистовым, для граждан ПостСовковии разрешившим бесплатную регистрацию -

"На территории СНГ и Прибалтийских государств версия 3.0391 может свободно распространяться и использоваться в некоммерческих целях. Имя регистрации: "Гражданин бывшего СНГ"
Код, например, 31."

Тем не менее, если оценив старания и бескорыстие автора вы ценой непереносимых моральных страданий решите вознаградить его труд лишней парой баксов и тем сподвигнуть человека на новые трудовые подвиги - на его домашней странице можно найти координаты счета.

..А пока все это качается, подумаем о том, что полагается выкладывать на домашних страничках и зачем они вообще?

Ну, хотя бы для того, чтобы разместить на них ответы на многие стандартные вопросы, которые, при достаточно быстром расширении круга знакомств, порой становятся слишком частыми и навязчивыми. Или для того, чтобы, к примеру, уехавший в другой город школьный / университетский товарищ мог легко отыскать Вас.

Домашняя страничка - это своего рода визитка. Место, где вы "точно есть". Поэтому желательно под нее покупать свой домен и нормальный хостинг. Стоить это будет примерно 1-3 $ в месяц - место под страничку и сам домен - от 7 до 25 $ загод-два. Место под домашнюю страничку вы можете приобрести и у нас - на SovHoz.ru

Впрочем, конечно же, для начала, пока вы еще не освоились - можно обойтись и одним из многочисленных бесплатных хостингов. Например, относительно неплох by.ru, где предоставляют возможность работать с SSI, дают неограниченное место под страничку (правда, чтобы размер файла был не более 1 мегабайта!) и т.п. Единственный недостаток, что если на страничке появится что-то непонравившееся владельцам by.ru, они, не долго думая, удалят страничку. В этом главный недостаток любых бесплатных хостингов.

Итак, наметим разделы:

а) вход, главная страничка - первое, что видит пользователь;

б) резюме (что умеем);

в) портфолио (галерея выполненных работ);

г) раздел "биография" (основные события в жизни);

д) раздел фотогалерея (домашний фотоальбом);

е) контактная информация (e-mail, UIN ICQ, как связаться)

ж) форум или гостевую книгу (если очень хочется, чтобы и на вашем сайте залетные хакеры могли получить удовольствие взломав хоть что-нибудь :)).


11.2. Создание сайта: Основа странички

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

11.2. Создание сайта: Основа странички

Открываем DreamWeaver > меню Файл > новый (или просто Ctrl+N).

В появившемся окне оставляем все без изменений. По умолчанию там будет стоять самое простое - страничка формата HTML. На самом деле их много, но для начала нам потребуется лишь этот.

После создания файла его нужно сохранить: при помощи Файл > Сохранить как.. (Ctrl+Shift+S) - сохраняем его под именем index.shtml

Почему .shtml? Потому что мы будем использовать вместо фреймов - SSI, что намного удобнее. Если же вы решили обойтись предельно простыми методами, то обычного .htm или .html будет вполне достаточно.

Так вот, чтобы программа-сервер нашего хостинга корректно распознавала SSI-вставки (далее "инклюды" от анг. include - "включение, вставка"), нам нужно назвать файлы особым образом.

Теперь мы помечаем директорию, в которой создали файл, как директорию сайта:

Сайт > Файлы сайта (или просто F8)

В появившемся окне указываем название сайта (можно по-русски), затем директорию, куда положили наш файл:

Закрываем открывшуюся боковую панель обратно. Пока что она нам больше не потребуется:

Временно убираем окно отображения кода, так как на первых порах оно нам не понадобится. Для этого нажимаем кнопку смены вида:

Теперь вводим заголовок нашей странички:

"Вася Пупкин, домашняя страничка"

*Почему именно так, а не, к примеру, "Хомепага Васи Пупкина"?

Потому что если кто-то вдруг захочет отыскать Вас в бескрайних просторах интернета, то он наберет в поисковиках "Вася Пупкин" и будет просеивать выпавшее. Ваша страничка, в первом случае, выпадет в первое место или хотя бы в первый десяток, если имя и фамилия ваши достаточно распространены в Сети.

А во втором варианте, с более фривольным названием, страничка найдется где-то во второй-третьей десятке, а то и сотне результатов. И докопаться до нее разыскивающему Вас человеку будет трудно.

Набрав в поле Title название странички, жмем Enter и видим, что наше название отобразилось в заголовке окна в квадратных скобках (а в круглых отобразилась директория сайта и название файла).

Это означает, что изменения приняты. Но в конце названия странички есть звездочка, обозначающая, что документ не сохранен.

Сохраняем документ нажатием Ctrl+S и не забываем делать это время от времени. Не то, если погаснет свет или зависнет Windows, мы рискуем потерять все то время, что прошло с последнего сохранения.

Разметка страницы:

Делаем Главную Таблицу, в которой будут располагаться наши элементы дизайна:
меню Вставка > Таблица (Ctrl+Alt+T)

или нажатие быстрой кнопки вставки таблицы, что совершенно одно и то же:

Задаем параметры нашей таблице:

Rows: количество строк в нашей таблице.

Columns: количество столбцов в таблице.

Width: ширина, в процентах. 100% означает, что таблица растянется от края до края доступного пространства.

Border: бордюр нам не потребуется, посему ставим его размер равным нулю.

Cell Padding и Cell Spacing - расстояние внутри ячеек и между ними. Применим это потом.

Введя данные, жмем ОК и видим, что в окне общего вида появилась наша таблица:

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

Теперь переводим мигающий курсор внутрь верхней левой ячейки и указываем внизу экрана, в панели свойств, ширину колонки в 160 px, а высоту в 100 px:

Теперь аккуратно пишем текст меню в левой нижней ячейке:

Меню:
Главная
Резюме
Портфолио
Биография
Фотоальбом
Контакты
Гостевая
Здесь пишет что-то вроде:

или?

Это кодировка. По-умолчанию там естественно стоит родная кодировка разработчиков, латиница.

Жмем "Изменение > Правка страницы"

(или Ctrl+J). В нижней части открывшегося окна видим выпадающее меню со списком доступных кодировок.

Выбираем из них нашу кириллицу (win-1251) вместо стоящей по умолчанию (Western Latin-1). Жмем "применить".

Если теперь на мгновение переключить главный вид на отображение кода, мы увидим что-то вроде

Теперь выделяем текст в нижней половине окна (где у нас "визуальное отображение"- то, что будет в броузере видно) и смотрим какой участок кода выделится в верхней части, где он, код, отображается.

Выделения в обоих видах одинаковы. Если вы выделите строку в окне дизайна, то в окне кода отобразится все, что относится к выделенной строке. Включая те символы и теги, которые не видны в окне дизайна. Впрочем, для облегчения восприятия, в окне дизайна следует включить дополнительно и отображение символов переноса строки (тег <br>), которым заканчивается каждая строка нашего меню:

Делается это в настройках (меню Правка, последняя строчка или Ctrl+U):

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

Теперь вставляем заменитель баннера - временную распорку, вместо которой мы потом вставим код.

Итак, жмем пиктограмму на панели быстрой вставки (или Ctrl+Alt+T):

Задаем параметры будущей таблицы:

Обратите внимание, уже не в процентах, а в пикселах!

Также здесь можно добавить бордюр толщиной в 1 пиксель.

Теперь, в панели "Свойства" добавляем вертикальную высоту нашему баннерозаменителю, повторяя формат обычных баннеров (468 на 80).

И предпоследний штрих. Сделаем его отличающимся от фона. Выделяем получившееся, для чего переводим курсор справа от таблицы и, нажав левую кнопку мыши, тянем выделение влево, в сторону таблицы. Выделение таблицы проявится в появлении вокруг нее операционной рамки с кубиками по краям. Теперь переходим в поле Bg (BackGround), где, нажав на рамку перед полем ввода, можно выбрать один из цветов на палитре. После чего, в форме ввода появится нечто вроде:

Теперь последний штрих - выравнивание.

Выделяем таблицу снова и смотрим в панели свойств в правом верхнем углу выпадающее меню Align, где надо выбрать Center:

Теперь вставим логотип (заранее приготовьте картинку).

Создайте внутри сайта дополнительную директорию, к примеру, n.

* Считается хорошим тоном аккуратно раскладывать все элементы оформления в отдельную директорию. Потм будет самим же удобнее. Кладем в эту директорию нашу картинку / фотографию.

Возвращаемся в DreamWeaver.

Жмем кнопку быстрой вставки картинки на вспомогательной панели:

(или Alt+Ctrl+I), после чего видим окно, где необходимо выбрать путь до картинки.
Заходим в нашу директорию, выбираем файл с нашей картинкой:

В нижней части окна следует обратить внимание на режим указания пути. Должно значиться SiteRoot, то есть путь, относительный корневой директории. Это является самым удобным способом адресации, хотя и требует для просмотра программу-сервер.

Наведя курсор на картинку, в правой части окна можно увидеть ее предосмотровую уменьшенную копию, а также размеры и вес.

После, добавим нашей картинке в панели Свойств рамку.

Теперь наведем выравнивание по всей таблице. Для этого нужно выделить все ее ячейки. Не саму рамку таблицы, а только внутренние ячейки!

Пробуем выделить их, поместив курсор внутрь одной из них, нажав левую кнопку мыши и переместив курсор по диагонали к противоположному краю.

Если пытаться выделять с верхней левой ячейки, ничего не получится. Так как картинка перехватит выделение на себя. Зато с любой другой ячейки это пройдет без проблем.

Теперь убираем выделение с одной ячейки, содержащей наш "баннер".

Делается это при помощи нажатия на нее курсора при удерживаемой кнопке Ctrl. Одно нажатие - убрать, второе - вернуть выделение. Но нам нужно убрать, так как баннер как раз и должен быть выравнен посередине.

После выделения указываем в панели свойств выпадающего меню выравнивание по верху (Top):

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

Заполняем главную страницу текстом. Обычно это краткое приветствие и несколько новостей из жизни.

Теперь задумываемся как бы украсить нашу страничку. Желательно не переусердствовать. Но и в минимализм, конечно, впадать не стоит. Но я, для простоты восприятия, я опишу именно минималистское украшение.

Итак, надо бы добавить разделительную полосу. А можно даже две.

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

Получаем таблицу 3х3. Но пустые ячейки добавились в ней по краям - снизу и справа. А пригодятся они нам как раз посередине. Выделяем вертикаль в пустых ячейках справа, нажимаем копировать (Ctrl+Ins) и, переведя курсор во второй столбец, вставляем скопированное (Shift+Ins). Получаем таблицу 4х3. Но, так как справа дополнительные ячейки нам не нужны, мы их просто удаляем, возвращая таблицу к исходной формуле 3х3.

При копировании следует помнить, что копировать нужно весь ряд, а не несколько ячеек.

Иначе, при вставке они просто заменят соответствующие им ячейки на месте вставки, а не раздвинут их.

Такую же операцию повторяем с нижней пустой строкой, копируя ее выше.

В конечном счете у нас должно получиться нечто вроде крестообразного пространства между первоначальными ячейками.

Это-то пространство мы и используем для внесения украшательств. Поскольку у нас все же учебник DreamWeaver`a, а не PhotoShop 7.0, мы не будем использовать графические элементы, а заменим их средствами HTML. В дальнейшем же, освоив общие принципы работы с DW, вы без труда сможете располагать на страницах и сложные графические оформления.

Для упрощения картины выделяем горизонталь второй строки (где пусто), и нажимаем в панели "Свойств" кнопку слияния ячеек:

Теперь вся вторая строка представляет собой одну вытянутую ячейку.
Назначим ей темно-серый фон и высоту в один пиксель

Но, почему-то в окне дизайна эта горизонтальная ячейка не истончилась до 1 пикселя. Почему же?
Смотрим код!

Видите 19-ю строку? Эта строка выделится если мы щелкнем курсором в непослушную ячейку при нажатом Ctrl. Что это там за &nbsp; такое? А это всего лишь символ неразрывного пробела. Знак-невидимка. Он вставляется для того, чтобы таблицы, у которых не указан размер ячеек не сливались сразу в конструкцию 3х3 пикселя, развернуть которую обратно будет уже довольно проблематично.

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

Удаляем этот символ в окне кода и получаем утончившуюся полоску под логотипом и баннером, делящую страницу пополам.

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

Таким образом, мы получили рассеченную на четыре ячейки страничку. Именно так она будет выглядеть в броузере.

Теперь пришло время отделить текст от разделительных линий. Ведь прилипающий вплотную текст выглядит некрасиво.

Как же сделать отступы?

Самый простой способ. Делаем таблицу, состоящую из одной ячейки, в которой указываем отступ от границ 7-10 пикселов:

После чего, переносим в эти таблицы меню и среднюю часть. Теперь, каким бы ни было форматирование, между текстом и границами всегда будет расстояние в 7-10 пикселей. Для чего нужны отдельные таблицы? Чтобы внутри наших ячеек толщиной 1 пиксель не образовалось ненужных там пробелов с десяток пикселов высотой.

Обработав таким образом страничку, можно считать ее на 50% готовой. Хотя, конечно, это у нас более чем скромная страничка. Но я повторюсь. Описываю лишь в самых общих чертах принцип написания сайта. Про технические ухищрения, нюансы дизайна и стиля будет уже в другой книге.

Пока же вернемся к нашему творению.

Настало время произвести "нарезку".

Вынесем баннер в отдельный файл, из которого он будет вызываться во все остальные файлы при помощи SSI.

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

Теперь создаем новый простой файл HTML (жмем Ctrl+N)

Скопируем (Shift+Ins) в его окно отображения кода вместо всего того, что там уже написано.

Итак, у нас пустой, лишенный привычных "предисловий" с указанием кодировок и т.п. файл. Сохраним его в папку n под именем banner.htm и закроем. Он больше не понадобится.

А в основном файле мы пропишем его вызов. Делается это прописыванием в соответствующем месте (где был вырезанный нами код) вот этого текста:

<!--#include virtual="/n/banner.htm" -->

Хотя писать все это вручную вовсе не обязательно. Все автоматизируется кнопкой "вставить SSI" во вкладке "Script":

После нажатия достаточно лишь выбрать файл, который мы хотим вызывать в указанное место (туда, где перед нажатием этой кнопки стоял курсор).

Ту же операцию проводим и над таблицей, содержащей меню. Только не забываем перед кодом меню поставить строку, указывающую кодировку (скопировав ее, к примеру, из первых строк основной страницы).

Теперь остается только расклонировать полученную страницу, меняя вставки только в середине. Заполнить соответственно портфолио, написать биографию и контакты ну и т.п. Но, для начала, последний штрих - это CSS.

Таблица стилей.

Итак, "Текст > Стили CSS > новый стиль".

Даем нашему стилю имя (например, .txt)

и выбираем какими шрифтами будет отображаться наша страничка. Советую Verdana.

Затем переходим в раздел настроек блока (Block), где указываем в строке Align (выравнивание) параметр Justify.

Эта настройка позволит страничке стать более симпатичной за счет выравнивания текста по обоим краям. Элементарная функция. Но, увы, почему-то многие ею пренебрегают. Посмотрите:

Так текст выглядит в обычном режиме. А вот так после применения этого параметра:

Сохранив настроенную таблицу стилей (потребуется дать ей имя (например, пусть будет style.css)), переходим к нашей страничке и применяем настроенный стиль к тексту в главной ячейке. Поместив в нее курсор, переходим к расположенной над панелью Свойств цепочке тегов, нажимаем на самом последнем (как вы понимаете, это и будет эквивалент нашей ячейке) правой кнопкой мыши и выбираем имеющийся в подменю Set Class наш стиль:

Точно также создаем еще один стиль для меню. Там делаем буквы поменьше, а выравнивание ставим не Justify, а Right.
применяем стиль (я назвал его .menu).

Теперь, в начале кода главной страницы (да и всех прочих, которые мы потом отклонируем) будет присутствовать вот такая строка:

<link href="/n/style.css" rel="stylesheet" type="text/css"> - где "/n/style.css" - это путь и название файла, а все остальное всегда остается неизменным.

Внутри самого файла стиля DreamWeaver написал следующее:

.txt {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: justify;

}
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: right;
}

Показанное здесь, еще раз напомню, всего лишь самый скромный и простой пример использования CSS. И полные его возможности можно описать только еще одной книгой. Так что, следите за "прилавками" :).

Теперь же остается только расклонировать полученный главный файл, меняя только его сердцевину. Затем открыть файл menu.htm из директории n и прописать под каждый раздел меню свою гиперссылку, ведущую к каждому из созданных файлов.

Все изменения, произведенные в файлах menu.htm и banner.htm, отобразятся во всех созданных по образу index.shtml файлах. Главное, чтобы окончание у них было именно .shtml

При попытке посмотреть что же у нас вышло в броузере вы не увидите там где написан наш код SSI ничего - ведь бродилки не использую сервер. Для нормального отображения нашего сайта нужна специальная программа-сервер, подобная той. что стоит на каждом компьютере, предоставляющем хостинг.

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

Ну а для того чтобы страничку можно было выложить в Сеть - достаточно найти бесплатный хостинг (тот же by.ru или pisem.net, настроить TotalCommander на подключение к нему (это не сложно, потому как там, у хостеров все подробно расписано) и перелить наш сайт на полученное место.

Естественно перелить нужно строго соблюдая расположение файлов в папках, чтобы относительные пути не пришлось переписывать.

После чего, зайдя на "Ваше название.by.ru", вы получите возможность лицезреть свое творение и похвастаться им перед товарищами.

На этом собственно все, ждите продолжений :)


2.1. Меню Правка: "Отменить действие"

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.1. Меню Правка: "Отменить действие" (Ctrl+Z):

Как и большинство других программ DreamWeaver хранит историю событий, перемещаться по которой можно при помощи одной из стандартных для большинства, опять же, программ комбинаций клавиш - Ctrl+Z. Ну, или для тех, кому лень запоминать кнопки - искать эту же команду в меню "Правка". Всего действий запоминается, если не ошибаюсь, около 40, но количество их можно существенно увеличить.


2.2. Меню Правка: Вернуть / Повторить действие

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.2. Меню "Правка": Вернуть / Повторить действие (Ctrl+Y):

А этот пункт меню дает возможность повторять какое-либо действие сколько угодно раз.

Например, вставку буквы, пробела или объекта. Просто жмем Ctrl+Y и наше последнее действие будет воспроизведено.

Может пригодиться в случае, если вы поторопились нажать "откат", позволив вернуть все как было "вперед". При многократном нажатии, дойдя до конца списка "истории событий", начнет просто дублировать последнее действие.


2.3. Меню Правка: работа с буфером

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.3. Меню "Правка": работа с буфером (Ctrl+C):

Работа с буфером в DreamWeaver`e точно такая же как и в основных программах. Двойной стандарт: и CTRL+(X, C и V). И те же классические CTRL+Ins и Shift+Ins. Ну а не снабженный горячими кнопками пункт "Очистить" - это банальное удаление содержимого буфера (включая и выделенный объект, если есть выделения).


2.4. Меню Правка: копировать-вставить как HTML (Ctrl+Shift+C)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.4. Меню "Правка": копировать-вставить как HTML (Ctrl+Shift+C):

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

Нюанс: функция "Вставить как HTML" почему-то лично у меня ни в какую не работает. Позволяет только копировать. Так что вы уж сами вставляйте прямо в код. Благо DreamWeaver в этом плане очень удобен, позволяя совмещать код и внешний вид в одном окне.


2.5. Меню Правка: копировать-вставить как HTML (Ctrl+Shift+C)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.5. Меню "Правка": выделить родительский тег (CTRL+[):

В DreamWeaver'е есть очень удобное визуальное представление о вложенности тегов: "контейнеры" отображаются в виде линейки, в которой отсчет "глубины" вложения идет слева направо (Для тех, кто в танке: слева "родительский, он же основной, он же ПЕРВЫЙ тег, правее - все, что в него "вложено"). Вложенные контейнеры, подобно матрешкам "в разрезе" представлены вашему взору в нижнем бордюре главного окна "вид дизайнера":

Это элемент управления DreamWeaver'а, на фрагменте которого видна выделенная область (рамочка в правом верхнем углу изображения), а в центральной части - тег, ответственный за эту самую область в коде (на него указывает курсор).

Выделение области может осуществляться:

а) при нажатии CTRL + A (Для тех, кто в танке: буква английская!), что выделит окружающий текущее местоположение курсора тег (Для тех, кто в танке: если курсор в центре какой-либо ячейки, то выделится как раз именно она);

б) нажатием на какой-либо участок этого тега в окне кода;

в) нажатием на линейку "вложенности", которая одновременно позволяет легко и просто выбирать определенные теги, не роясь в коде и не "нащупывая" зачастую сложно уловимые курсором части оформления в окне общего вида.

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

Вот тогда-то просто ставим курсор в центр требуемой таблицы, и, соответственно, в конец линейки вложенности - последний тег - это то самое место, где расположится Ваш курсор. Если требуется как раз выделить таблицу, в которую вложено место, на которое наведен курсор, то последовательно ставим в каждый представленный в линейке вложенности тег (справа налево). И так - пока в окне главного вида наше выделение не оконтурит нужную деталь дизайна.

Помимо вышеперечисленного, линейка вложенности предоставляет еще пучок весьма удобных возможностей:

Параграф, (тег <p>) на картинке выделен сначала нажатием левой кнопки мыши, а затем из него "выдавлено" субменю.

Из этой части интерфейса можно проделать следующие операции:
1. Удалить тег. Этот тег будет убран из кода. Рекомендую сначала хорошо представлять, что вы будете удалять, и убедиться что удалилась именно та часть интерфейса, которую и было задумано удалить. Причем удалится как тег <p> так и закрывающее его </p>.

Начинающим: если у вас "ничего не изменилось", проверьте, как теперь Ваш сайт будет выглядеть в броузере. Даже если ничего не изменилось в самом DreamWeaver`e, то после сохранения для бороузеров могут произойти такие изменения, что сайт станет неудобочитаемым.

Посему не забываем о возможности "отката" последних трех-четырех десятков действий.

2. Изменить тег. Чтобы не лазать в коде вручную, рекомендую использовать это. А чтобы знать ЧТО там писать и ЧТО понимать, собственно, что там за тег такой - тем кто не глядел, рекомендую изучить HTML.
Выглядеть это будет так:

Появившееся окно ручного ввода тега позволяет сразу набрать главный параметр с клавиатуры, не удаляя имевшийся тег. Ибо он уже выделен и будет удален автоматически при наборе с клавиатуры.

Установить класс.

Оперативно выбираем класс (оно же CSS, о котором можно почитать опять-таки в соответствующем учебнике).

На картинке вы видите настройки CSS, у Вас они могут быть совсем другими, если вообще будет использовано CSS, и лишь один пункт будет обязательно. Это пункт "нет", что означает отсутствие класса для этого элемента дизайна.

Эта возможность доступна и при нажатии по любому выделенному элементу в окне "общего вида". Очень удобно. Рекомендую освоить в совершенстве.

Установить ID. Оперативно выбираем ID тега, набора тегов. Чем отличается от классов, можно узнать в соответствующем разделе учебника СSS.

ID ни в коем разе не следует путать с классами!

Но вернемся к остальным опциям линейки вложений. Это CTRL+] или [.

Нажмите эту комбинацию несколько раз и увидите изменения рамки выделения в окне дизайна. Сообразно продвижению выделения в окне, выделение будет двигаться снизу вверх и по линейке вложенности, позволяя более наглядно отслеживать степень вложенности выделяемого объекта.


2.6. Меню Правка: Найти и заменить (CTRL+F)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.6. Меню "Правка": Найти и заменить (CTRL+F):

Рано или поздно вы захотите поправить что-то, улучшить и т.п., для чего потребуется перекроить каждую страницу сайта. И ладно бы если это примитивная домашняя страничка с 3-4 листами. А если это уже достаточно крупный сайт? Если таких замен надо делать ежедневно по сто раз? Вот на этот случай и выручит весьма приятная функция "Найти и заменить". Более того, при помощи извратного использования ее можно даже уменьшить размеры (в смысле "вес") странички!

Окно поиска и замены:

Выпадающее меню "поиск в" позволяет выбрать категорию страничек, в которых будет проходить поиск и замена.

А именно:

1. Current Document - только в этом, активном документе;

2. Entire Current Local Site - во всем сайте внутри его локальной папки;

3. Selected Files on Site - внутри выбранных файлов сайта;

4. Folder.. - ввыбранной папке. В этом случае справа появится еще и строка с адресом до той самой папки, который можно ввести как в ручную, так и посредством стандартного способа указания пути при помощи IE, нажав на частично скрытую кнопкой "Искать дальше" иконку папки.

Source Code - правим код. То есть, непосредственно то, что отражается в окне "Код".

Text - правим только то, что будет видно в броузере. Кода эти изменения не коснутся.

Text (advanced)- это возможность также и задания оформления заключенному в определенный тег тексту. Например, править только в заголовках. Или, наоборот, заголовки не править.

Specific Tag - означает режим правки одного конкретно выбранного тега.

Далее, копируем в соответствующее окно ЧТО собственно ищем и меняем, а в самое нижнее - на что меняем.

Содержание нижнего окна можно копировать, сохранять или загружать уже готовое, если часто приходится менять одно и тоже.

Ну а теперь поясню для большей наглядности как это использовать. Вот, например, взглянем на код, как его отображает DreamWeaver?! Красиво расставленные теги, иконочки там всякие, выделения вложенности отступом и т.п. Оно все, конечно, удобно, но только сколько ж в них пробелов?! И озарила меня мысль на этих пробелах поэкономить. И получилось у меня, что банальной оптимизацией кода можно "наэкономить" до 30-40% веса странички!!!

Для тех, кто в танке - файл, занимающий 400 Кб, при "ужимании" похудеет до 250-280 Кб! Следовательно, и загрузится такая страничка быстрее, да и место поэкономим. Представьте, что у Вас сайт на 150 Мб, и одних левых и совершенно ненужных пробелов в нем как минимум четверть.

Теперь к делу: пишем в поиске что на что менять - "> <" (тем, кто в танке - кавычки не нужны!). Обратите внимание, между уголками присутствует ПРОБЕЛ!

А во второе окно вставляем на что, собственно, меняем. На "><" те же две скобки, только без пробела. Вот это и есть ужатие кустарным методом. В заданной папке при нажатии "заменить все" будет уплотнена пачка файлов, которые потом можно выложить на хостинг, сэкономив до 20-30% места и, соответственно, увеличив скорость загрузки.

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

Радикалам-экстремалам можно пробежаться взглядом по коду и обнаружить где-либо пару пробелов. Например, частенько бывает такое как = " (равно, пробел, открывание кавычек) или два пробела меду > и <.

Таких лишних пробелов, конечно, хватает тоже. Но они вам не очень заметно сэкономят. И будьте крайне осторожны с заменами слэшей (/). Если что-то пойдет не так, замучаетесь восстанавливать. Ведь пакетно заменяемые файлы не создают "истории событий" и парой нажатий кнопок тут в случае чего назад не отмотать. Посему, внимательность и еще раз внимательность! Подумайте, к чему может привести замена каких-либо символов в тех местах, где они тоже есть, но менять их там по идее нельзя! Спасти в этих случаях может понимание того, что чем больше область заменяемого, тем меньше вероятности, что вы поменяете что-то не то. Ну и разумеется "резервное копирование" :) Не забывайте перед массовыми заменами копировать оригинал сайта в другую папку. Так, на всякий случай.

И еще нюансик. Чем больше вы захватываете в кусок, который меняем, тем выше безопасность этой замены.

Например, надо мне поменять в ссылке обращение к картинке, называющейся 150.gif на 151.gif. Я, конечно, могу написать и просто 150 менять на 151. НО, если где-то у меня будет таблица с размером одной из сторон в 150 пикселов, она тоже потерпит изменения. И ладно если на один пиксел. А ели менять например 150 на 400? Перекосит весь дизайн. Посему, рекомендую прихватывать немного по сторонам от заменяемого места. Еще раз поглядите на картинку, как там у меня указано что на что менять.

Еще пример:

в этом тексте меняем "нам" на "нас", что получим? Изуродованное слово "НАМеренно" (станет "НАСеренно"), "стороНАМ, и "ЗамеНАМи" тоже изувечится. Итак, как избежать ошибки? Ищем слово "нам". Что видим? Встречается оно у нас парой строк выше и только. Зато встречается оно в кавычках! Мысль понятна? На автозамену ставим поменять "нам" на "нас" - прямо с кавычками. В словах "намерено" и "сторонами, заменами" таких кавычек нет. Следовательно, наша замена пройдет безболезненно для целостности текста. Таким же манером можно захватить и два пробела по краям - тогда внутри слов "нас" как объект замены восприниматься не будет.

Внимание! С особой тщательностью следите, что меняете в пакетном режиме замены во всех файлах указанной папки.

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

Не забываем также время от времени сохранять сайт в другую директорию целиком. Это позволит избежать потерь сил и времени. Если вернуться к сохраненному вчера, то будет проще, чем исправить все ошибки совершенные сегодня. По крайней мере, Вы не угробите все и сразу. И, опять-таки, если все же угробили, помните, что есть еще что-то выложенное в интернет. Если Вы, конечно, выкладывали ;)


2.7. Меню Правка: перейти к строке (CTRL+G)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.7. Меню "Правка": перейти к строке (CTRL+G):

Переход к строке осуществляется указанием номера строки. Доступна эта возможность только если курсор находится в окне отображения кода.

Собственно, само окно ввода номера строки.


2.8. Меню Правка: показать всплывающий список тегов (CTRL+Пробел

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.8. Меню "Правка": показать всплывающий список тегов (CTRL+Пробел):

наводим курсор в окне "код" на какой-нибудь тег между < и >. Жмем Ctrl+пробел. Созерцаем выпадающее меню с перечнем тегов (если забыли как пишется или просто лень думать и вспоминать)


2.9. Меню Правка: Абзацы (Ctrl+Shift+> , Ctrl+Shift+<)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.9. Меню "Правка": Абзацы (Ctrl+Shift+> , Ctrl+Shift+<)

управляет сей пункт меню форматированием кода. То есть, для удобства мы можем выделить в окне отображения кода несколько строк и сделать их абзацем: Ctrl+Shift+> сдвигает выделение немного вправо, Ctrl+Shift+< сдвигает немного влево. Используйте это для большей наглядности форматирования кода - ведь искать определенные места в коде будет намного проще.


2.10. Меню Правка: Симметрировать скобки (Ctrl+`)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.10. Меню "Правка": Симметрировать скобки (Ctrl+`)

По идее, эта функция должна добавлять подразумевающиеся скобки тегов, если таковые почему-либо отсутствовали. Но у меня почему-то не срабатывало.


2.11. Меню Правка: Контрольная точка (Ctrl+Alt+B)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.11. Меню "Правка": Контрольная точка (Ctrl+Alt+B)

При помощи этой команды вы можете установить на одной из строк документа пометку, к которой потом будет легко вернуться.

Вот такая "шишечка" в нумерации строк и есть контрольная точка.

В контекстном меню, выпадающем по нажатии правой кнопки, в окне с кодом мы можем или назначить очередную точку, или же убрать их все разом.


2.12. Меню Правка: Повторяющиеся элементы

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.12. Меню "Правка": Повторяющиеся элементы

Установить что же это за функция мне так и не удалось. Видимо, неточности перевода.


2.13. Меню Правка: Править в External Editor

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.13. Меню "Правка": Править в External Editor

Править во внешнем редакторе. На случай если нужно открыть код в какой-то другой программе.

Для того, чтобы иметь возможность править что-либо во внешнем редакторе, нужно сначала указать путь до этого редактора в соответствующем месте настроек DreamWeaver`а.

Каждому расширению файлов можно назначить собственный внешний редактор:

Режимы сохранения изменений в выпадающем меню переводятся как "всегда, никогда, спрашивать":


2.14. Меню Правка: Библиотека тегов

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.14. Меню "Правка": Библиотека тегов

Эти настройки позволяют (ну, или как минимум сильно облегчают) изучить HTML методом научного тыка без всяких учебников.

В окне, куда мы попадем после вызова библиотеки, представлено полное собрание когда-либо использовавшихся в ХТМЛостроении тегов. В верхнем внутреннем окне древовидное представление тегов по видам, разделам и типам. Ниже - пояснение где оное задействовано.

Плюс и минус в самом верху окна позволяют добавить собственную библиотеку (сомневаюсь, что оно кому-то может понадобиться), добавить новый тег, атрибут и т.п. В общем, полностью гибкий и мощный инструмент.

Честно говоря, вносить тут какие-либо изменения я вам очень не советую и урок этот больше для общего развития и понимания где можно посмотреть правильное написание того или иного тега и какие они вообще бывают.

Выбираем какой-нибудь конкретный тег и смотрим что изменилось в окне: под окном отображения тегов у Вас появится настройка - делать ли после этого тега перевод строки (по умолчанию - нет), содержимое тега - как его располагать, регистр (тег может быть написан обычными буквами, а может быть написан ТАКИМИ, каким пишут криволапые упертые "блокнотники")

"По умолчанию" - настройки, соответствующие тегу изначально.

В самом же низу, в окошке отображения лексического написания тега, будет отбражено его правильное построение.

Более подробно о переводе строки. Допустимость перевода строки в следующих вариантах:

- линия обрывается;

- до и ПОСЛЕ тега;

- до, в нём и после него;

- только после тега.

Более подробно о настройках строки "содержимое":
- не форматируется;
- форматируется, но отступ не делается;
- форматируется и делается отступ.

Регистр (размерность написания):
- по умолчанию;
- мелким текстом;
- КРУПНЫМ ТЕКСТОМ;
- смешанное написание.

Здесь можно задать настройку всех регистров отображения HTML большим или маленьким по умолчанию. И все открытые и сохраняемые позже HTMLки будут переделываться под этот выбранный Dами стандарт.

Выбор настроек подкласса тега. Назначение атрибута можно поменять, но лучше не стоит.


2.15. Меню Правка: Сочетания клавиш

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.15. Меню "Правка": Сочетания клавиш:

Эта опция позволяет задать сочетания горячих кнопок практически на все действия, возможные в DreamWeaver MX.

Рассмотрим окно настройки:

Первое меню - это оперативный перебор предустановленных схем, в перечень которых можно добавить и свои персональные настройки.
Либо же выбрать привычные стандарты альтернативной программы:
Слева-направо:

1. Дублировать имеющуюся систему горячих кнопок с выбранной в новую. При этом будет предложено указать ее название (см. картинку выше).

2. Переименовать текущую схему горячих клавиш.

3. Экспортировать систему горячих клавиш в HTML (см. картинку ниже).

4. Удалить текущую схему горячих клавиш. (Трогать не рекомендуется. А то может статься, что придется все вручную назначать снова или переставлять DreamWeaver)

Вот так примерно выглядит подсказка горячих кнопок, сгенерированная DreamWeaver'ом. Ее можно распечатать и пользоваться как, своего рода, шпаргалкой. Правда, по умолчанию функций в ней немного. Но можно поназначать много-много действий самостоятельно.

Поскольку запоминание такого объема сочетаний дело индивидуальное, Макромедия предлагает каждому выработать свои стандарты. Хотя, можно покумекать и попытаться состряпать наиболее логичную систему горячих клавиш, и потом раздавать ее с сайта всем желающим. Известно, что подстроиться под готовое всегда проще, чем сначала придумать самому, а потом пытаться это запомнить.

Второе меню предлагает выбрать к какому типу будет относиться Ваше новое сочетание клавиш.

Это может быть:

а) команда меню (текстового);

б) управление панелями окна;

в) редактирование кода;

г) редактирование документа в режиме дизайна;

д) управление сайтом.

Затем, пользуясь нижеприведенным деревом команд, находите рубрику Вас интересующую, а в ней - или подраздел, или сразу перечень действий.

Наведя на нужную команду курсор, смотрите нижнюю часть окна, где "+" и "-". Это добавить или удалить команду. Можно на одну команду привесить несколько разных сочетаний.
назначить комбинацию горячих кнопок:

Наведите курсор в строку "Press key", жмите комбинацию. При этом, если кнопка уже занята, внизу окна появится уведомление, что не так. Это будет либо пожелание другой комбинации, если нажать шифт-буква (то есть то, что нажимается в стандартном наборе текста, либо указание, что такая комбинация есть и принадлежит команде такой-то):

На изображении примера была нажата кнопка "Del", что уже зарезервировано под функцию "удалить".

Находите свободную комбинацию, жмете "Change", занося ее в область повыше, где нажав "-" можете в любой момент ее удалить, а нажав "+" и новую комбинацию - присвоить команде дополнительное сочетание горячих кнопок.


2.16. Меню Правка: Системные настройки (CTRL + U)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.16. Меню "Правка": Системные настройки (CTRL + U):

Настройки самого DreamWeaver'а. Открываем. В левой части окна будет перечень подлежащих настройке разделов. Их я буду упоминать только текстом, для экономии полезной площади.
Первоначально Вам предложат выбрать шрифты:

Их достаточно много, но не рекомендую особо изощряться. Те, которые уже установлены, - оптимальные. Имеет смысл править только их размер. Помельче для тех, кто хорошо видит и покрупнее для подслеповатых владельцев экранного разрешения 640х800.

Каждой части DreamWeaver'а можно назначить свои опции шрифта:

Окну отображения кода - один, окну инспектора кода - другой и т.п.

Теперь двинемся сверху вниз:
"Главное": Опции документа: первый чекбокс - показывать при старте только окно сайта. Не могу представить кому это было бы удобно, поэтому советую не трогать. Впрочем, оно и само по умолчанию не помечено.

Открывать файлы в новом окне - открытие нового документа будет происходить в новом окне, а не вместо старого.

Предупреждать, если файл только для чтения - предупредить, что сохранить файл под старым именем не получится.

Изменять ссылки при перемещении файлов. Если вы решите что какому-то набору файлов не место в определенной директории вашего сайта и решите их переместить в окне сайта, то все ссылки, ведущие из них и на них будут автоматически исправлены. Правда, только в том случае, если перед созданием странички вы озаботились настроить "виртуальный сайт". Причем, выпадающим меню можно выбрать режим замены - это всегда, никогда и спрашивать (названо в порядке сверху вниз).

Освежим в памяти окно главных настроек:

Далее в нем идет "Сменить дизайн программы", где можно выбрать тип интерфейса, имитирующий на выбор несколько программ:

Слева - стандартная рабочая среда продуктов Макромедиа серии МХ. Справа - как было в 4-м и предыдущих - набор разрозненных плавающих окон. Если помните, при первом запуске после установки, DreamWeaverMX спросит какой тип интерморды вы предпочитаете - старый или новый. Про преимущества нового я уже писал в самом начале этого учебника, посему не будем повторяться. Впрочем, тут же, для утонченных мазохистов, доступен и вариант закоса и под HomeSite, он там внизу так скромно под чекбоксом спрятан:

Теперь рассмотрим нижнюю часть окна:

Показывать диалог при вставке объектов - рекомендую оставить "да" - это означает, что перед вставкой, например, таблицы DreamWeaver спросит количество ячеек, ширину, высоту и другие параметры.

Быстрое изменение таблиц (медленное обновление) рассмотрим подробнее. Суть эффекта в следующем. Таблицы имеют свойство растягиваться если их распирает текст.

Если чекбокс быстрого изменения помечен, то, убрав из растянутой таблицы текст, мы будем до первого обновления структуры таблиц на странице лицезреть ее в растянутом виде. Зачем это надо?

В основном для дизайнеров, когда работать приходится с такими величинами как 1-5 пикселя.

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

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

Разрешить двухбайтовый ввод - с этим я, увы, не разобрался. Видимо, накладка переводчика.

Переключаться на обычный текст после заголовка - не трогаем, пусть остается включено. Это позволит сэкономить время.

Разрешить множественные пробелы - рекомендую этим не пользоваться. Когда-то я сам очень нервничал, когда HTMLный редактор не давал мне возможности поставить не один пробел, а больше. Но потом постепенно понял, что так правильнее.

Все возможности тонко и изящно настроить вид текста в нем присутствуют. Надо только их изучить. И вовсе ни к чему загромождать и утяжелять код пустопорожними пробелами в огромных количествах.

Использовать <srong> вместо <b> - непрактично и ненужно. Это давно устаревший стандарт.

К тому же он:

а) занимает больше места;

б) его просто труднее заметить в коде.

Максимальное количество шагов в истории - указываем количество действий, на какое можно пошагово "отмотать назад".

Помните, история восстановима, только если документ не был закрыт или переименован ("сохранен как"). Рекомендую ставить 70-80 средним компьютерам, и 140-150 мощным.

Панель объектов:

Выбираем, что по вкусу, легко запоминаемые значки-иконки, значки с текстом или один текст.

Выбор зависит от индивидуальной предрасположенности. Кто-то проще воспринимает и запоминает текст, кто-то образы. Мне лично проще работать с неподписанными иконками. Там все очень быстро запоминается, да и при наведении на символ появляется всплывающая подсказка с пояснением что он делает.

Вот так будет выглядеть режим "символ и текст". Громоздко и неудобно.

Для перелистывания панели на неуместившиеся команды придется пользоваться вот этой маленькой стрелочкой, которая "проматывает" панель построчно.

Орфографический словарь - ну, на русском это не заработает, а на английском нам не надо. Так что не трогаем.
Теперь рассмотрим "Быстрый редактор тегов".
Что это такое? Это такая всплывающая панель, подсказывающая код, если вы хотите поправить что-то вручную. Выглядит она так:

А настроить можно, собственно, лишь внесение изменений, которое будет или отражающимся сразу в окне дизайна, или же только после окончания редактирования. В общем-то, удобнее последний вариант.

Автоподстановка тегов, означает, что если вы начнете набирать какой-то тег, DreamWeaver предложит его автоматически продолжить наиболее (по его соображениям) вероятным окончанием. Как правило, это совпадает, но практической ценности для мало мальски продвинутого пользователя не представляет.

Впрочем, тем, кто еще только изучает теги, это дело может оказать некоторую помощь. Настройка временной шкалы ниже - это время появления подсказки с предполагаемым окончанием от 0,5 до 2,5 секунд.

Теперь, "опции проверки":

Ошибки - показывать все ошибки.

Предупреждения - выдаст предупреждения о, например, возможной несовместимости кода со старыми версиями броузеров.

Стандартные сообщения - отобразит возможные комментарии броузеров. К примеру: "вы переходите в зону защищенного соединения" и т.п.

Вложеные ошибки - видимо, подразумевались ошибочные пути к инклюдам (это из области PHP и SSI)

Проверять на наличие ASCII символы, которые могут спровоцировать нежелательные эффекты.

Проверять правильность расстановки кавычек.

Проверять содержащую кавычки строку.

Правильность размещения объектов (например флэш-роликов) в тексте.

Просмотр в броузере:

Здесь можно назначить броузеры, установленные на просмотр Ваших шедевров. Ведь сам DreamWeaver отображает материал по-своему. А каждый броузер будет видеть его по-своему.

Поэтому добавляем к IE как минимум Mozilla.

Делается это так:
щелкаем по кнопке "+", получаем диалоговое окно, в котором в первой строке - произвольное название Вашего броузера (то есть, как в голову взбредет). В строке "программа" при помощи кнопки "просмотр" выбираем .exe-шник нашего броузера в его каталоге (обычно где-то в c:/Program Files/имя броузера/). Указываем, будет ли он у нас главным или вторичным в просмотре.

Обратите внимание на чекбокс "опции".

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

В выключенном же состоянии той опции, DreamWeaver дает броузерам посмотреть реально редактируемую страничку. Поэтому можно запросто, внеся изменения, обновить страничку в вызванном броузере, и тотчас увидеть что же, собственно, изменилось.


2.17. Меню Правка: Системные настройки (CTRL + U), часть 2

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.17. Меню "Правка": Системные настройки (CTRL + U), часть 2:

Режим разметки:

Для ограничения таблиц, если надо сделать, например, маленькую ячейку пиксела 3-5 в ширину, чтобы быть уверенным, что ее все броузеры отобразят правильно, в старину приходилось пользоваться картинками-распорками. Ныне же, вполне достаточно приемов, о которых пойдет речь несколько позже.

В этом разделе предлагается указать для какого сайта какой файл-распорка будет.

Сайт выбираем в вышерасположенном выпадающем меню, файл рисунка, соответственно, пониже.

Также поддается настройке сетка, видимая только в окне "отображение дизайна" DreamWeaver'а. Сделано такое разноцветие для удобства. Ведь иногда таблицы настолько "слипаются", что отличить где какая довольно сложно.

Настройки Сайта:

Здесь выбирается отображать ли окну управления сайтом файлы локальные (на Вашем компьютере) или же удаленные, то есть лежащие на FTP.

Затем, там же задается FTP, настройки соединения и адрес брандмауэра (Firewall), если такой есть.

А в самом низу можно настроить собственно сам сайт. Вернее, ту директорию на Вашем компьютере, которую DreamWeaver приравняет к нему.

Стандартный набор - создать/изменить/дублировать.

Редактируем сайт:

Задаем название, директорию где лежит, ставим галочку в "автоматически обновлять локальный список файлов". Если нужно, указываем папку рисунков. Но рекомендую все же хранить их в одной с HTMLками папке. Если, конечно, это не элементы оформления, которые ОБЯЗАТЕЛЬНО нужно хранить отдельно. Там же можно указать и адрес, который будет предустанавливаться в ссылках при необходимости. (Для тех, кто в танке: ваше доменное имя вида http://vasya-pupkin.ru/)

Удаленный сайт. Настраивать его, в принципе, не нужно. Проще обходиться средствами более простыми. Но, кто хочет "полной интеграции", может назначить здесь FTP и заливать сайты DreamWeaver'ом. Хотя, лично я бы порекомендовал TotalComander или ДискоКомандер.

Тестовый сервер.

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

(Для тех, кто в танке: Апач - это программа, обеспечивающая работу сайтов, устанавливается хостером, то есть фирмой, предоставляющей компьютерные ресурсы под размещение сайтов.) Для работы в домашних условиях над сайтами, содержащими SSI, PHP и прочее подобное потребуется установить Апач у себя на компе - т.е. сделать примерное подобие тех настроек, что сделаны на сервере у хостера.

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

Модель сервера:

Здесь можно выбрать, что, собственно, тестируем. Видимо, все сразу не работает. Так что внешняя программа все же удобнее.

Доступ может быть как по FTP, так и по внутренней сети. Или вообще не быть. None - означает, что тестовый сервер будет работать локально.

При массовых операциях над сайтом (например, поиск и замена по всему сайту) здесь можно "спрятать" от процесса какие-либо группы файлов.

Любителям давать ЦУ (Ценные Указания) посвящается. Вы можете оставить записку подчиненному, коллеге или самому себе (что более вероятно на начальном этапе освоения программы.

Эти заметки будут расположены в отдельной директории внутри локального сайта или же их можно закачать на удаленный, если, например, вы работаете командно. Хотя, на мой взгляд, простое письмо куда удобнее.

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

А это - настройки того, что будет отображаться в карте сайта:
названия файлов, записки к ним, размер, тип и когда последний раз изменен был.

А наверху настроек сайта есть две закладки. Правую, открывающуюся первой, мы рассмотрели ранее. Левая - нечто вроде итогов работы в правой: показывает основные настройки тестового сервера.


2.18. Меню Правка: Системные настройки (CTRL + U), часть 3

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

2.18. Меню "Правка": Системные настройки (CTRL + U), часть 3

Слои:

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

Тег, которым назначается слой - это DIV либо SPAN. И тому и другому тегу можно назначить свой стиль. Рекомендую использовать DIV. Его большее количество броузеров понимает.

Видимость - это опциональ слоя, означающая, что он может быть по умолчанию невидимым, видимым и inherit (при вставке слоя, он обретет те качества, которые вы придали последнему вставленному слою).

Здесь же задаются начальные размеры появляющегося слоя. Естественно, позже их можно поменять для каждого слоя индивидуально. Также, слою можно присвоить цвет фона, чтобы легче было его увидеть в переплетении обозначений. Хотя, большинство слоев, как показала практика, или содержат фоновую КАРТИНКУ, или же прозрачны.

В слои можно инклюдить (для тех, кто в танке: вставлять) вложения. Но об этой процедуре позже, по порядку.
В самой последней строке - дополнение для дедушки NetscapeNavigator'а. Оставьте включенным, пусть убогие порадуются. Хотя, в большинстве случаев, это особой роли не играет. Уж слишком специфично мировосприятие создателей NetscapeNavigator'а.

CSS:

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

Подробнее о CSS можно прочесть в соответствующей главе "HTML для тех, кто в танке":

Строка состояния:

Ее можно найти в правом нижнем углу окна дизайна. Предназанчены эти данные, для представления какого размера экран надо иметь и сколько это будет грузиться.

Скорость здесь измеряется в секундах и вычисляется от заданной пользователем скорости соединения. Например, при канале в 15 Кб/с сама сердцевина страницы будет грузиться 4 секунды и 7 секунд - "оформление". Таким образом - 11 секунд. Если, конечно, у Вас не тормозит канал.

* Примечание чайникам: никогда не делайте страницы с загрузкой дольше минуты-двух на канале 33,6. Даже минута - это долго, но еще терпимо, если там есть на что посмотреть - галлерея например.

А это, собственно, то, что называется строкой состояния.

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

Редакторы:

Внешние редакторы могут быть закреплены за любым типом файлов. Это позволяет оперативно изменять всевозможные вставки, будь то картинка, звук или видео. Просто жмете кнопку "править" и у Вас загружается нужный редактор. Как правило, DreamWeaver MX сам в состоянии сообразить какой программой редактировать ту или иную вставку. Но иногда приходится нелишне и ручное вмешательство и замена одной программы на другую.

Измененные файлы могут быть как перевставлены автоматом, так и только при запуске (выбирается двумя выпадающими меню).

В нижних окнах списки расширений, совмещенные с редактором. Например, картинки я обрабатываю с помощью ACDSee 32, что быстрее чем Photoshop, который используется в единичных случаях, когда ACDSee бессильна.
Формат кода:

Удобство восприятия кода - это экономия времени, которое, как известно, - деньги. Итак, приучаем себя к определенному виду кодовых строк, назначая его здесь. Во-первых, отступы - они облегчают нахождение границ того или иного тега. Рекомендую не трогать.

Во-вторых, табуляция (собсвенно, отступ и есть, только тот, что происходит по команде пользователя) может осуществляться как тегами табуляции, так и пробелами. Рекомендую пробелы, они удобнее. Автоматический перенос после 76-го символа исключительно для удобства пользователя, чтобы не пришлось листать страницу черте куда.

Символ переноса:

Это уже не так остро проблематично, как ранее. Но лучше ставить Линуксовый LF, так как 90% хостеров сидят под Linux. Это облегчит им обработку Ваших опусов.

Регистр тегов. Это размер обозначения тегов - ЗАГЛАВНЫЙ или простой.

Регистр атрибутов (значений). Это настройка: будет ли задаваемый тегу параметр БОЛЬШИМИ или маленькими буквами. Рекомендую выделять параметры.

Теги видно и по отступам, а параметры искать легче.

Центрирование.

Это при нажатии кнопки равнения по центру:
по умолчанию создается слой, в котором текст стоит по центру. То есть в теге <DIV>, что может иногда нарушать дизайн. Во избежание этого, можно поставить простое центрирование при помощи тега <CENTER>.

Но самое оптимальное - пользоваться выравниванием в теге ячейки или таблицы, что назначается вот здесь:

Такое выравнивание куда более удобно и правильно, не искажает дизайн и более точно отображается всеми броузерами.

Цветовая гамма кода:

Назначить расцветку подсветки тегов и шрифты отображения можно как для любого типа скриптов и тегов, так и для всех одновременно. Например, сами теги будут бледно-серыми, а вот значения их - ярким черным. Или, наоборот. Это очень облегчает и ускоряет работу с кодом.

Здесь же можно назначить расцветку фона. По умолчанию она белая, но я бы порекомендовал какой-нибудь ненавязчивый бледно-бежевый цвет, чтобы не напрягать глаза без надобности.

Шрифты отображения:

Ну, здесь комментировать излишне. Подбирайте, экспериментируйте. Но я бы порекомендовал оставить так, как есть. Макромедиа предлагает наиболее приятные схемы шрифтов. Все уже продумано не на один раз, не одним десятком людей работающих над этой программой не один год :0)


3.1. Меню "Вид": Отображение

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

3.1. Меню "Вид": Отображение:

В DreamWeaver MX очень удобно организовано отображение кода параллельно с видом дизайна. Также можно развернуть одно из этих окон на полную, если Вам, например, нужно сосредоточиться на дизайне или достаточно только на самом тексте в HTML.

Вид можно переключать из этого меню или, что гораздо удобнее, вынесенными на панель инструментов кнопками:

На картинке Вы видите не только кнопки, но и, собственно, окно с кодом (закрашенный фон) и окно с дизайном.

Работать при этом можно и в том, и в другом. Только в окне дизайна все управление визуализировано, а в коде приходится писать вручную.

Но не думайте, что код как таковой Вам не нужен и бесполезен. Многого в окне дизайна Вы никогда не увидите и, следовательно, не поймете как оно работает, если не заглянете в код.

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

Также, обратим внимание на кнопку, расположенную рядом, но отделенную значком молнии.

Это проверка странички на тестовом сервере. Также этой кнопке присвоено сочетание клавиш CTRL+SHIFT+R.

Поскольку многочисленные эксперименты показали, что встроенный сервер, увы, то ли слишком сложен для уразумения простыми смертными, то ли чересчур ограничен, чтобы работать, я не стану пространно останавливаться на его настройках, памятуя, что одна программа никогда не объединяет в себе несколько. Для тестирования полученного сайта локально лучше всего взять Апач или Small HHTP Server, который тоже бесплатен, при даже большем удобстве для начинающих, чем всем известный Апач.

Для тех, кто часто работает и с кодом и визуализировано: чтобы не ворочать каждый раз мышь для перевода курсора из одного окна в другое, достаточно нажать CTRL + ~.

Окно дизайна, если вдруг есть сомнения, что что-то должно обновиться можно обновить принудительно при помощи классического F5. А для любителей нестандартных решений предусмотрена даже смена мест окна дизайна и кода:

При выборе этого пункта меню вы получите код в нижнем окне, а дизайн - в верхнем. В общем-то, удобно, если привыкнуть. Но пригодно только для кодеров, которым сам дизайн не интересен, а основные силы сосредоточены на работе с кодом.


3.2. Меню "Вид": Содержимое тега Head

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

3.2. Меню "Вид": Содержимое тега Head:

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

При выборе вышеописанного пункта между окнами кода и дизайна появится линейка, в которой будет представлено в виде значков все, что содержится в теге Head. Таким образом, достаточно нажать на значок, чтобы выделить тег в окне кода и, заодно, получить внизу в "свойствах" все его данные, разнесенные по окнам. Редактировать в коде можно как вручную, так и через "свойства".

Выбор же пункта "NOSCRIPT" всего лишь прячет-показывает то, что срыто от броузера в теге "не скрипт" и метатеги:


3.3. Меню "Вид": Отображение таблиц

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

3.3. Меню "Вид": Отображение таблиц:

Эта часть меню заведует переключениями способов отображения таблиц. По умолчанию они у нас выглядят вот так:

Но когда нужно работать только с таблицами как таковыми, можно воспользоваться еще одним режимом.

В режим входим при помощи Ctrl+F6, возвращаемся к обычному по Ctrl+Shift+F6:

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

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

В этом варианте есть и свои преимущества. Например, сложно очищать значения ширины или высоты всех ячеек:

(первая и вторая кнопки соответственно).
Кнопка под курсором позволяет сливать ячейки вложенной таблицы с "вышестоящей":

Выделяете ячейку с вложенной таблицей и нажимаете на появившуюся в нижней панели свойств кнопку (см. предыдущий рис.):

Таблицы стали единым целым. В некоторых случаях, это очень удобная фича, но в большинстве рутинных операций, в общем-то, не нужная.

Рассмотрим различия в настройках таблиц:

Здесь добавляются возможности добавить распорку (распорка - это, как правило, пустая картинка, невидимая посетителю, но не дающая таблице сузить пустые ячейки если окно броузера уже, чем ширина самой таблицы).

Авторастяжение столбца - не что иное, как заданные ему 100% ширины.

Очистить высоту ячеек - позволяет, если у вас сохранились какие-то параметры размеров, все это разом обнулить и выровнять таким образом таблицу.

Если выделить несколько ячеек, то пунктом "согласовать ширину ячеек" можно легко придать им равное значение. DreamWeaver MX сам разделит имеющуюся ширину на количество ячеек и назначит каждой из них равные размеры.

Если вы пользовались распорками (чего не стоит делать без особой нужды!), то их можно удалить разом и все, а не выискивать по одной.

Ну и последний пункт этого меню. "Удалить вложение" - это эквивалент нажатия той кнопки из предыдущего примера, на которую наведен курсор.

Рассмотрим теперь нижнее меню свойств, обрезанное до минимума:

Многое здесь осталось без изменений, но много и добавилось: радиокнопки "фикс"(-сированная) и "переменная" - ни что иное, как определение в процентах ли ширина таблицы или же в пикселях.

Дальше, в общем-то, все как обычно и знакомые кнопки.


3.4. Меню "Вид": Вспомогательные элементы (Ctrl+Shift+I)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

3.4. Меню "Вид": Вспомогательные элементы (Ctrl+Shift+I):

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

Ниже можно настроить более детально какие элементы вам нужны, а какие нет:

- показывать ли рамки таблиц;

- показывать ли рамки слоев;

- показывать ли рамки фреймов;

- выделять ли рисунки и невидимые элементы (значки тегов, вставок-инклюдов и т.п.).


3.5. Меню "Вид": Опции просмотра кода

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

3.5. Меню "Вид": Опции просмотра кода:

- Разрешить или запретить перенос слов (определяет, будет ли строка кода непрерывной, или весь код втрамбовать в столбик не шире странички);

- Нумерация строк. Очень удобная возможность, позволяющая более точно находить конкретные места;

- Подсветка неправильного HTML. Если где-то допущена опечатка, пропущен тег или кавычки (скобки), это место приобретет выделенную окраску и позволит быстрее найти и устранить проблему;

- Подсветка синтаксиса. Иногда очень удобно, но в большинстве случаев лично мне не нужно. Уж очень пестрым становится код. Хотя, это на любителя. Большинству должно нравиться;

- Автоотступ. Позволяет строить код "лесенкой", что облегчает определение подчиненности (вложенности) тегов. С другой стороны, в свете наличия программ, "прессующих" код (без пробелов, которые тоже занимают место!), эту опцию можно и отключить. После того как код слеплен, дальнейшие изменения носят чисто текстовый характер.


3.6. Меню "Вид": Линейки (Ctrl+Alt+R)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

3.6. Меню "Вид": Линейки (Ctrl+Alt+R):

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

А вот контекстное меню, выскакивающее при нажатии правой кнопкой на линейке:

В нем можно выбрать единицы измерения, сбросить точку отсчета, если таковая была установлена, а также спрятать линейки.


3.7. Меню "Вид": Сетка (Ctrl+Alt+G)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

3.7. Меню "Вид": Сетка (Ctrl+Alt+G):

Показывает сетку, упрощающую определение симметризирована ли ваша страничка, все ли на ней ровно и т.п.

Вот как выглядит сетка:

А вот тут можно задать цвет ее линий, эффект "прилипания" и шаговое расстояние между линиями (размер ячеек), а также задать сам внешний вид линеек точками или сплошными линями


3.8. Меню "Вид": Трассирующий рисунок:

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

3.8. Меню "Вид": Трассирующий рисунок:

Применяется для "подкладывания" под создаваемый дизайн сайта, что, по идее, должно облегчить "нарезку" тем ламерАм, что сначала рисуют дизайн сайта в фотошопе а потом долго и нудно кромсают его на кусочки. Этот анекдотический процесс напоминает попытку высечь горшок из куска глины, вместо того чтобы просто слепить его сразу. Впрочем, такой метод отчасти оправдан нежеланием отдавать заказчику готовый дизайн до оплаты, но в то же время необходимостью показать "хоть что-то". Собственно "что-то" можно показать и так - нарисовав полноценный дизайн, и "сфотографировав" его тем же HyperSnap`ом.

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


3.9. Меню "Вид": Плугины (Ctrl+Alt+Shift+P)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

3.9. Меню "Вид": Плугины (Ctrl+Alt+Shift+P):

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

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


3.10. Меню "Вид": Плугины (Ctrl+Alt+Shift+P)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

3.10. Меню "Вид": Убрать панель (F4):

Убрать панели бывает полезно, когда идет работа с наполнением странички, обработка или проверка текста. В общем, когда не нужны никакие опционали, не нужны никакие элементы. Нажимаем F4 - все лишнее убралось. Нажимаем снова - все опять вернулось. Удобно.


3.11. Меню "Вид": Панель инструментов

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

3.11. Меню "Вид": Панель инструментов:
Выбираем здесь оба пункта (по умолчанию второй отключен):

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


4.1. Меню "Вставка": Библиотека тегов

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.1. Меню "Вставка": Библиотека тегов:

Здесь можно найти исчерпывающую информацию по любому мыслимому тегу. Полные списки, сортированные по принадлежности тега к той или иной группе:

При нажатии на "taginfo" получим нечто вроде учебника. Жаль только на английском, но вероятно в версии DreamWeaver 2004 года мы это исправим ;)


4.2. Меню "Вставка": Рисунок

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.2. Меню "Вставка": Рисунок:

Выбираем файл с рисунком:

В этом окне следует обратить внимание на выпадающее меню с настройками пути картинки. Рекомендую всем ставить root,
поскольку при выкладке на сайт Вам уже не придется ничего менять. Главное, чтобы этот самый site root прописывался
правильно, для чего надо настроить в DreamWeaver MX "сайт" (см. главу далее).

Еще следует заметить, что есть альтернатива ввода картинки из файла, возможность указания координат картинки внутри базы данных (например, MySQL). Но для этого надо настроить взаимодействие DreamWeaver`а с этой самой базой данных (БД), для чего настроить встроенный локальный сервер. О нем тоже позже, по порядку.


4.3. Меню "Вставка": Заготовка картинки

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.3. Меню "Вставка": Заготовка картинки:

Диалоговое окно просит задать параметры будущей картинки:

Сама будущая картинка, как она выглядит:

Впоследствии, на нее можно подставить нормальное изображение.


4.4. Меню "Вставка": Интерактивные рисунки

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.4. Меню "Вставка": Интерактивные рисунки:

Интерактивные - это значит "реагирующие на изменение ситуации".
собственно, в этом пункте меню присутствует целый букет возможностей:

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

Изменения при наведении мыши:
нажимаем, смотрим окно настройки:

В первой строке - имя картинки (в принципе, можно писать что угодно, главное, чтобы по-английски и не повторялось).
original image - основная картинка (например, кнопка, как она вглядит, если ее не трогать).
rollower image - вторая картинка, которая заменит первую при наведении на ту курсором.

Под строками с прописанным путем присутствует чекбокс. Оптимально, его пометить. Это включит предварительную загрузку вторичной картинки. Без этой опции вторая картинка будет подгружаться только с того момента, как посетитель наведет курсор.
При небольшой скорости и более или менее крупной картинке в этом раскладе будет ощутимая задержка. А это, естественно, нежелательно. Но есть нюанс. Если меняющихся от наведения курсором картинок у Вас больше десятка, такая подгрузка существенно замедлит загрузку странички. При том, что, скорее всего, большая часть этих картинок будет ненажатой. Возможно, логичнее не применять предварительную загрузку.

Ну, и в самом низу можно указать ссылку, по которой будет осуществляться переход при щелчке по картинке.

Код, используемый DreamWeaver`ом для осуществления этой интерактивности вы сможете увидеть затем в окне отладки кода:

<a href="http://куда надо.ру/" onmouseout="mm_swapimgrestore()"

Эта строка ответственна за восстановление картинки в случае соскальзывания курсора мыши.

onmouseover="mm_swapimage('image3','','картинка2.gif',1)">

А эта строка ответственна за смену картинки альтернативной при наведении на ссылку. в этом месте указана ссылка на
заменяющую картинку.

<img src="картинка.gif" alt="заменяющий текст" name="image3" width="16" height="16" border="0"></a>

Здесь, собственно, размещена основная, изначальная картинка со всеми параметрами и атрибутами, включая заменяющий текст.

Панель нафигации.

По сути, это чуть более усложненная система вышеописанных заменяющихся картинок, только увязанных в некое подобие брикета. И, должен заметить, что скрипт, формируемый DreamWeaver`ом, мягко говоря, громоздковат и неудобен.

Существует много более простых средств и способов, поэтому я бы не советовал использовать эту функцию. Но для общего
развития все же опишу процесс вкратце.

Вот как выглядит верхняя часть открывающегося окна. Здесь у Вас указаны пункты меню, намеченные в Вашей панели навигации.

Плюс - добавить пункт, минус - соответственно, убрать. Стрелки вверх-вниз (правый верхний угол картинки) позволяют при необходимости переместить пункты меню вверх и вниз.

Ниже располагается несколько строк, указывающих путь до картинок, которые будут показываться в соответствующий момент:

первоначальная картинка, картинка при наведении, картинка при нажатии и картинка после нажатия.

alternate text: сюда предлагается вписать текст, который заменит картинки в броузерах, где отключена графика.

Ну и, собственно, ссылка, по которой осуществляется переход из пункта меню в нужное место. Также как и в первом случае можно задать предварительную загрузку изображений, что, опять-таки, не рекомендую делать если у Вас чересчур крупное меню с большими картинками.

Preload Images - предварительная загрузка картинок. При включении того параметра картинки, которы должны заменить оригиналы при наведении на них курсора загрузятся еще до того как они потребуются. Это нужно для того, чтобы избежать "пауз" при смене одного изображения другим.

show "down image" initially показать нажатую картинку".

В правой нижней части диалогового окна есть меню, в котором, видимо, предполагалась возможность задать способ
перехода по ссылке в новое окно или в том же.

Но вариант всего один, что, в принципе, логично. Из меню можно переходить
только внутри текущего окна.

А вот более полезное меню в самом низу. Оно задает расположение самого меню горизонтально или вертикально.

А этот чекбокс допускает размещение пунктов меню по ячейкам таблицы. Советую включать. Это упростит некоторую часть настроек. В общем-то, информация про меню исчерпана.

Флэш - кнопка.

Первое, что хотел бы заметить, что не стоит пытаться смотреть на звезды в микроскоп и на бактерий в телескоп. Каждый
инструмент "заточен" под свой набор возможностей. И, если им "в принципе" можно сделать что-то, это вовсе не означает, что это "что-то" получится хорошим и качественным. Во всяком случае, произведенные DreamWeaver MX кнопки более похожи на халтуру, сделанную чтобы отвязаться. Но, в общем-то, по здравому размышлению, при неимении под рукой полноценного Macromedia Flash, эта возможность может выручить. Итак, флэшные кнопки. Открываем диалоговое окно:

В нем видим образец кнопки, под ним - стили кнопки. Их немного, но есть и довольно приличные. Вот такие, к примеру:

Выбирайте что по вкусу и смотрите ниже.
button text - в этой строке задается надпись, которую Вы хотели бы видеть на кнопке. Советую делать это английскими буквами, так как кириллицу (русские шрифты) этот инструмент не поддерживает (еще один довод в пользу использования полноценного флэша).

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

А вот, что у Вас примерно получится:

Флэш - текст:

Все здешние настройки Вам уже должны быть понятны и известны. Посему не буду повторять описание не раз встречавшихся элементов. Лично я сторонник мнения, что весь текст должен быть текстом, а во флэше - это уже излишество. Или делать во флэше весь сайт.

Fireworks html:

Этот пункт меню позволяет вставлять объекты fireworks - другого программного шедевра macromedia. Но об этом уже отдельная книга позже. В данном пункте меню лишь указывается путь до объекта:


4.5. Меню "Вставка": медиа

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.5. Меню "Вставка": медиа.

Этот раздел меню позволяет вставить другие объекты, требующие более сложных тегов, чем обычные картинки и т.п. элементы.
Флэш: Ctrl+Alt+f - вставить флэш-ролик;
Shokwave: Ctrl+Alt+d - вставить шоквэйв объект;
Апплет, Плагин и ActiveX - это редко используемые элементы и горячих кнопок к ним не назначено. Использовать все эти устаревшие технологии соответственно не рекомендуется, в особенности Апплет. ActiveX к устаревшим не относится, но на страничках он малоприменим и, в большинстве случаев, является излишеством.


4.6. Меню "Вставка": таблицы (Ctrl+Alt+t)

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.6. Меню "Вставка": таблицы (Ctrl+Alt+t):

Вставляем таблицу:

Rows - количество строк.

Columns - столбики.

Cell padding - отступ внутри ячеек

Cell spacing - пространство между ячейками

Width - ширина таблицы. Может быть указана в процентах относительно доступной ширины в пределах "вышестоящего" тега или жестко фиксированной величиной.

Border - толщина бордюра.

Подробнее о таблицах вы можете прочитать здесь


4.7. Меню "Вставка": табличные объекты

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.7. Меню "Вставка": табличные объекты:

Для чего может применяться этот самый импорт? Ну, например, для быстрого изготовления html странички с адресами, UIN`ами и тому подобными данными, хранящимися в текстовом файле.

Эта часть меню используется при непосредственной работе с кодом. Это означает, что данные пункты меню будут попросту недоступны в режиме дизайна. Чтобы все заработало, нужно поместить курсор в окно просмотра кода. Это позволит добавлять в нужные места теги строк, ячеек, заглавных строк и просто заголовки. Большинство этих возможностей доступны через несколько нажатий по кнопкам в нижней части экрана. Исключение составляет лишь "импорт табличных данных". Вот о нем мы и поговорим подробнее.

А это вид текста, импортируемого в ячейки: жирный, наклонный, наклонный жирный.

Вот, собственно, и все премудрости.

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

Берем, например, текстовый файл, в котором все слова разделены запятыми: текст, текст, текст, текст...

Указываем DreamWeaver`у чем были разделены слова в поле Delimiter.

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

А этими настройками выбираем особенности выравнивания ширины ячеек - fit to data - обрезка ширины по данным в ячейке.

Это означает, что каждая ячейка будет такого размера, как наиболее широкое слово в колонке. Set - назначение размеров самостоятельно. Доступные единицы - это проценты или пикселы:

А это вид текста, импортируемого в ячейки - жирный, наклонный либо наклонный жирный.


4.8. Меню "Вставка": слои

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.8. Меню "Вставка": слои:

Прежде всего, если Вы не знакомы со слоями, рекомендую предварительно изучить соответсвующий параграф трактата о HTML.

Ну а те, кто уже ознакомился с этой технологией HTML, читают дальше.

При нажатии на этот пункт меню не появится никаких диалоговых окон, никаких предварительных запросов.

Просто посередине странички появится рамка, внешне напоминающая таблицу:

Слева видно то, что появится первоначально, а справа то, как это будет выглядеть если его выделить нажатием мыши по самой кромке.

В это же время, при выделенном слое, изменится и опциональ его настроек:

ID слоя - персональное наименование слоя. Имя должно быть уникальным. Благодаря таким идентификаторам можно управлять конктертными слоями при помощи скриптов. Скрипт - это тег, при помощи которого будет назначаться слой.

Возможные варианты:

Span и Div. Общепринят и более удобен тег Div, корректно распознаваем большинством броузеров и более "настраиваем". Тег Span (не путать со спамом! :0) лучше всего подходит для локальных выделений в тексте и придания выделенному каких-либо выпадающих из общего стиля параметров. Назначая такой выделенный блок в тексте, следует помнить, что сам по себе тег слоя без дополнительных параметров (вида <div> содержимое </div>) близок по свойствам с тегом параграфа <p> и не содержит присущих слоям свойств.

Вот тег слоя в коде:
<div id="имя слоя латиницей" style="position:absolute; width:200px; height:115px; z-index:1; left:
732px; top: 537px;"></div>

Стиль задает позицию слоя относительно остальной странички:

Absolute - абсолютный отсчет, четко заданные параметры и расстояния, что не предусматривает подстройку под изменения размеров окна.

Width и Height Вам уже наверняка знакомы еще с раздела про таблицы - это шириниа и высота соответственно.

Z-index задает уровень слоя - первый уровень начальный, чем больше число, тем "выше" слой (ближе к зрителю). Два слоя могут иметь в параметрах одинаковый "уровень". Но один из них (тот, что создан позже) все равно будет выше второго.

Цифра в этом параметре может быть любая и не обязательно последовательно 1,2,3,4 и т.п. Также и 1, 5, 10, 230... Но рекомендуется, все же, именно последовательность.

Задание размеров слоя производится указанием координат левого верхнего угла от левого края броузера (на картинке это 723 px) и от его верхней кромки (на картинке в этой ячейке 944 px).

Далее, когда слой уже позиционировался, задаем ширину и высоту как обычной таблице.

Переполн. - этот параметр определеяет что происходит с объектом, который не уместился в размерах слоя.

Варианты:

Visible - виден за границами слоя;

Hidden - выходящее за пределы становится невидимым;

Scroll - прокручивается при помощи линеек, как будто у Вас над текстом основной странички плавает миниатюрное окно с другой страничкой.

Auto - скролит (проматывает) текст.

На первый взгляд все очень напоминает предыдущие параметры, но это не так. Здесь задается видимость всего слоя первоначально. Впоследствии, этот параметр может изменяться скриптом. За счет этого эффекта реализованы многие меню, "нависающие" или появляющиеся над текстом при наведении на пункт меню. В общем-то, удобно. Но жутко муторно в реализации. И, к тому же, может иметь место некорректное отображение страниц некоторыми глючными броузерами типа Оперы и прочих увечных.
Клип.

Этим параметром можно задать внутри слоя некую область, в пределах которой будет видно его содержимое. Создать этакий отступ поля.

Для чего это надо?

Ну хотя бы для того, чтобы скрипт, определяющий над каким слоем находится курсор мыши, не убирал слой, появляющийся при наведении на кнопку и прячущийся при сползании курсора с нее. Это позволяет сделать меню в некотором отдалении от кнопки, а не касающимся ее непосредственно. Можно творить интересные эффекты с картинками, например, добавляя фрагмент изображения при помощи слоя и получая как бы изменившееся изображение.


4.10. Меню "Вставка": шаблоны

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.10. Меню "Вставка": шаблоны:

Шаблоны функция в общем-то удобная, но ориентированная на тех, кто имея достаточно крупный сайт, не умеет прикрутить к нему движок для автоматиации процессов. Поскольку это уже явнапя клиника, подробно останавливаться на этом мы не будем, дабы не развращать читателя. Как известно - ламер идет п опути наименьшего сопротивления, предпочитая сделать много тупой работы, вместо того, чтобы сделать много сложной, требующей шевельнуть извилиной разок-другой и наслаждаться полученным результатом. Поэтому - используйте движки!


4.9. Меню "Вставка": Фреймы

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.9. Меню "Вставка": Фреймы:

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

Помимо ухудшения находимости сайта в поисковиках и создания кучи гемоорроя при построении фреймовых сайтов вы себе ничего не заработаете.

Но все же, для общего развития так сказать:

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

Нижняя же часть приведенного в самом начале главы меню доступна только в режиме просмотра кода (курсором щелкнуть в код):

приведенные на картинке ниже пункты позволяют вставлять в код чистые теги фреймов, которые потом вручную можно дополнить параметрами.

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

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


4.11. Меню "Вставка": форма

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.11. Меню "Вставка": форма:

Форма - это особым образом выделенная область, с которой может работать скрипт.

Формы содержат поля, заполняемые какими-либо данными вывода или (что куда чаще) - ввода. Вы наверняка встречали их не один раз. Это многочисленные формы подписки на рассылки, поля, куда нужно было ввести свое имя, пол, рост, вес и т.п., если Вы заполняли какие-либо анкеты на сайтах.

Форма в DreamWeaver MX выглядит как очерченная пунктиром область, как правило, тянущаяся от стенки до стенки доступного пространства и высотой в одну строку. Пользователю через броузер сама форма не видна. Это просто область с определенными свойствами и метками. Видны бывают только содержащиеся в ней объекты. В окне работы с кодом форма выглядит так:

<form name="имя формы" method="post" action="тип действия "> содержимое формы </form>

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

Задаем действие (как правило, скрипт или обращение к БД).
Метод - Post и Get - это способы осуществления действия

а) передать данные,

б) перейти.

Эти две трактовки очень приблизительные, и многие скрипты зачастую сложно подогнать под эти определения. Но в общих чертах смысл такой.

Тип сожержимого - это может быть переход по гиперссылке или обращение в БД, второе - исключительно данные, которые передаются в определенный скрипт или БД.

Ну вот, собственно, и все в общих чертах. Более детально возможности форм Вы изучите в следующей главе.


4.12. Меню "Вставка": Объекты формы

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.12. Меню "Вставка": объекты формы:

Объекты формы - это набор элементов, которые придают сайту интерактивность, несут свойства группы в пределах своей формы и облегчают работу скриптов.

4.12.1. Текстовое поле:

Выглядит оно, как правило, вот такой рамкой, "прорезанной" в страничке.

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

И если первый вид строки ввода применим для таких процессов, как ввод логина-пароля, то второй более удобен для ввода большого объема текста. Например - постинга в форум.

Опциональ: внизу, в панели свойств, в режиме многострочного поля ввода можно выбрать настройку переноса: запретить перенос, переносить разделяя слова и переносить не разделяя слова. В правой части меню Вы видите радиокнопки переключения режима. Это "однострочный" или "многострочный" режимы. Там же есть и третий режим - ввод пароля:

В данном режиме все вводимое в форму будет отображаться звездочками (символ *), что, по логике, призвано защитить Ваш пароль от посторонних глаз.

Код:

<form name="имя формы" method="post" action=""> - сама форма,
<input type="text" name="имя области ввода текста"> - код текстового поля, (однострочный ввод)
</form> - конец формы.

Код многострочного ввода отличается он вышеприведенного только в средней строке -

<textarea name="имя"></textarea>

Код для поля ввода пароля: опять-таки, все различия в середине:

<input type="password" name="имя">

В теги этих форм можно прописать предварительное значение. Например, это может быть подсказка, которая сменится, едва пользователь начнет вводить свои данные:

Во втором поле, естественно, указано слово "пароль". Но, так как поле в режиме "маскировки", он виден нам как шесть звездочек.

4.12.2. Текстовая область - то же, что и вышеописанное. Но здесь сразу вставляется форма многострочного ввода.

4.12.3. Кнопка - обычная такая кнопка, выполняющая определенное действие :

Код кнопки:

<input type="submit" name="имя кнопки (нигде не отображается, писать только латиницей!)"
value="надпись на кнопке">

Опциональ кнопки:

Сама по себе такая кнопка не вписывается в модные нынче дизайны. Она может быть легко изменена внешне при помощи заданных в стиле параметров по принципу, аналогичному табличному оформлению в CSS.

4.12.4. Флажок ("чекбокс", Checkbox):

Чаще всего используется при выборе каких-либо опций ("доступно/недоступно" или "есть/нет"), подтверждений и т.п. Обычно, он располагается в одной форме в нескольких экземплярах. Для "срабатывания" этому элементу нужна кнопка, которая, обобщив указанную во включенных чекбоксах информацию, отправит ее скрипту.

Код чекбокса:

<input type="checkbox" name="имя" value="значение">

Если требуется включить чекбокс "по умолчанию" (то есть чтобы галочка там стояла изначально), применяется добавление в конец тега слова "checked"

<input name="checkbox" type="checkbox" value="checkbox" checked>

Опциональ чекбокса проста:

Он или включен, или выключен. Ну и пара строк под ввод имени элемента и его значения (тех данных, что будут переданы скрипту).

4.12.5. Радиокнопка ("переключатель").
Отличается она от чекбоксов тем, что если в тех можно включать сразу несколько пунктов, то радиокнопка позволяет выбрать только какой-то один пункт из предложенного (в пределах одной формы):

Код переключателя:

<input type="radio" name="имя" value="значение">

Для передачи результатов в скрипт требуется кнопка. Опциональ свойств в точности повторяет свойства чекбоксов, то есть ограничивается всего двумя параметрами - "включен-выключен".

4.12.6. Список выпадающее меню.
Наиболее простое и удобное меню, не требующее особых изощрений:

Код элемента:

<select name="имя" size="1">
<option selected>1 пункт</option>
<option>2 пункт</option>
<option>3 пункт</option>
<option>4 пункт</option>
</select>

Обратите внимание. То, что стоит в меню "по умолчанию", должно помещаться в тег <option selected>, а не просто в <option>!

Количество пунктов, в принципе, не ограничено. Передача данных может осуществляться как только будет выбран какой-либо пункт.

Панель свойств:

Меню/Список: выбираем режим.

Высота (значение в строках): если указать больше чем 1 строку, меню станет не выпадающим, а прокручивающимся.

Чекбокс "выборка" позволит выбирать несколько пунктов. Как правило, эта возможность не используется.

Первоначально выбран: в этом окне отображены все имеющиеся пункты, из которых можно выбрать тот, что будет установлен в изначальное значение.

И, наконец, самое главное - список пунктов:

Похожее диалоговое меню Вам наверняка уже не раз попадалось. "+/-" - это "добавить/убрать" пункт.

В колонке Item label Вы можете назначить имя, которое будет видно в самом меню, а в колонке Value - значение, которое будет передано в скрипт. Стрелки-треугольники в правом верхнем углу служат для быстрой смены очередности того или иного пункта (поднимают или опускают на 1 строку выбранный пункт).

В случае выбора многострочного режима меню приобретет вид ленты прокрутки:

4.12.7. Файловое поле ввода пути:

Нажимаем кнопку "Browse". Находим требуемый файл и кликаем на него. Путь до файла передается в скрипт который либо сразу начинает закачку/преобразование файла, либо ждет нажатие подтверждающей кнопки.
Свойства файлового поля:

Имя поля, ширина (в символах!), максимально допустимое количество символов (если не указано четкого числа, то 256 символов по умолчанию)

Код файлового поля:
<input type="file" name="имя">

4.12.8. Графическое поле - банальная картинка, помещенная в форму. Облегчает некоторым скриптам работу, но практически не используется.

4.12.9. Скрытое поле - как правило, содержит "промежуточную" информацию, или обобщает информацию нескольких вложенных форм/элементов. Из броузера невидимо.

4.12.10. Группа радиокнопок:

Автоматизированное построение чего-то вроде блока голосования. Это меню, снабженое радиокнопками и объединенное в одну форму. Все полностью стандартно, исключая два режима внизу: строить нашу группу кнопок просто столбиком (при помощи тега <br>), или же разместить каждую кнопку в своей ячейке таблицы. В остальном все свойства типичны.

4.12.11. Меню быстрого перехода:

Собственно, отличается от ранее рассмотренного лишь тем, что предназначено играть роль навигации. Таким образом, при выборе того или иного пункта осуществляется переход по соответствующему ему адресу.

Диалоговое окно:

Menu item - список отображаемых пунктов. По причине не совсем верной русификации, при попытке писать там русскими буквами, кириллица отображается некорректно. Но, исправив в коде эти самые закорючки, получим полноценное работающее меню.

Text: здесь набираем имя пункта меню, жмем "+" наверху и набираем следующее имя. При необходимости удалите один из пунктов: выделите его курсором и нажимайте на "-". Если необходимо переместить выше-ниже, то используйте стрелки вверх-вниз в правом верхнем углу.

Gotourl - куда идти (указать ссылку перехода, соответствующей выделенному пункту)

Openurlis - не играет роли, поскольку других режимов назначить не дает, осуществляя переход по URL только в текущем окне.

Options:

Insert go button after menu - вставить рядом с меню кнопку, без нажатия которой переход по выбранному пункту осуществляться не будет

Select first item after url change - осуществляет переход только после отпускания пункта.

4.12.12. Группа объектов: задает поле, в котором можно расставить элементы (кнопки и формы ввода, например, переход по которым будет осуществляться в указанном порядке при помощи кнопки Tab):

Эти кнопки не простые. Они имеют свои "горячие сочетания" вызова и проставлены в обратной последовательности.

Переключитесь в английскую раскладку (для тех, кто в танке: в углу, на панели задач, возле часов должно стоять "En" на фоне синего квадратика) и нажмите Alt+D, затем Alt+B.

Поглядите на кнопки. При нажатии комбинации кнопок выделение перемещается с одной кнопки на другую. Теперь обновим страничку и нажмем Tab. Выделение опять перепрыгнет и будет прыгать в последовательности с правой кнопки на левую, а не наоборот, как обычно. И уже только после этого отправится путешествовать по всем остальным ссылкам, с которых бы и начало прыгать, не содержись в коде кнопок несколько строчек с хитрушкой.

Код кнопок:

1-я кнопка:

<input name="имя кнопки" type="button" class="класс" style="произвольный стиль css" accesskey="b" tabindex="2" title="заголовок1" value="кнопка1, быстрая кнопка - b">

Код 2-й кнопки:

<input name="имя кнопки" type="button" class="класс" id="уникальное имя" style="стиль - произвольный css" accesskey="c" tabindex="1" title="заголовок области" value="кнопка1, быстрая кнопка - с">

Расшифровка:

Class - это используется скриптами и апплетами. На начальном уровне Вам не понадобится.

Style - стиль, произвольный стиль, которым можно украсить кнопки.

Accesskey - кнопка доступа. Назначенная буква (латинская или русская), при удерживании Alt`а, при ее нажатии выделит кнопку. Останется только нажать клавишу Enter.

Tabindex - порядковый номер перехода. От меньшего числа к большему. Желательно начать с единицы и увеличивать на +1.

Title - наименование кнопки (это играет роль для поисковиков). Отобразит во всплывающей подсказке текст, написанный в кавычках.

Value - то, что будет написано на самой кнопке.

4.12.13. Метка:

ставит тег <label> - что он делает, я так и не разобрался - опций настройкам не придает.
Таким образом, по этому разделу все.


4.13. Меню "Вставка": ссылка на е-mail

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.13. Меню "Вставка": ссылка на е-mail:

Вставляет в текст ссылку ("линк") с адресной гиперссылкой. При нажатии на него открывается почтовый клиент (Outlook Express, The Bat и т.п.). Выглядит этот тег как обычная гиперссылка.

Код:

<a href="mailto:foox@rupor.net">название ссылки</a>

При попытке ввести название такой ссылки через меню

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

Делается это так: выделяем набранный обычный текст, жмем курсором в поле "ссылка", набираем наш линк. Обычно, это http:// что-то там. Но, в случае с e-mail, нужно вводить mailto:имя@домен. Тогда все отобразится правильно и корректно.

Примочки: иногда бывает полезно несколько извратов такого рода, когда человек кликает на ссылку, то у него открывается e-mail с заполненным полем темы и даже в самом теле письма чего-нибудь уже написано.

Как это сделать? Да очень просто. Добавьте в ссылку на e-mail пару параметров:

mailto:foox@rupor.net?subject=то, что будет в поле тема&body=то, что будет в теле самой странички.
Причем этот код надо не просто вставлять в сам код странички, а предварительно пропустить через поле "ссылка" опционаля свойств. Это превратит кириллические буквы в универсально отображаемые символы вида
"%f4%ee%1%ed%f3%eb%f1%ff". В таком виде Ваш текст гарантировано поймет большинство почтовых клиентов.


4.14. Меню "Вставка": гиперссылка:

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.14. Меню "Вставка": гиперссылка:

Гиперссылка - это, как Вы уже наверняка знаете, <a href="http://rupor.net/">название ссылки</a>.

Конечно же, в DreamWeaver`е нет никакой необходимости писать непосредственно код. Все автоматизировано:

Просто набираем название ссылки (поле text), собственно путь, по которому переходить при нажатии линка (link), режим открытия (в новом окне или в текущем). Параметр Title Вам тоже должен быть знаком еще с учебника по HTML. Остановимся подробнее на таких не очень известных, но весьма полезных тегах, как очередность перехода и "горячая кнопка".

Tab Index отвечает за переход от одной помеченной ссылки к другой. Если без использования этого тега при нажатии клавиши Tab выделение обегает все ссылки в сооответствии с порядком расположения их в коде, то при наличии помеченных цифрой тегов переход будет строго от меньшей цифры к большей.
Выглядит это как tabindex="цифра". Помечаем таким образом меню и теперь можем ходить по страничке, не используя мышь, посредством клавиатуры (если, конечно, меню не слишком обширно) - что намного быстрее. Особенно учитывая то, что выделение в большинстве броузеров может двигаться и от нажатий обычных курсорных стрелок.
Второй параметр - accesskey="кнопка-буква" - позволит назначить каждой ссылке свою "горячую клавишу". Тоже, в некоторых случаях, облегчает работу.
Title - при наведении на ссылку курсора выведет всплывающую подсказку с тем текстом, который Вы поместите в этот тег. К слову сказать, этот тег может применяться и практически к любому объекту, внутри которого можно разместить текст.


4.15. Меню "Вставка": метка-якорь

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.15. Меню "Вставка": метка-якорь:

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

Иными словами, это та же гиперссылка (линк), которая ведет не просто на конкретную страницу, а на конкретное место в этой странице.

При этом следует помнить, что якорь состоит из двух частей. Первая, собственно, сама ссылка, а вторая - это, собственно, якорь (метка).

Итак, прячем внутри кода на странице вот такую зацепку:

<a name="имя метки"></a>

Уточняю, имя метки должно быть:

а) по-английски, то есть латиницей (для тех, кто в танке: можно и транслитом, главное чтобы буквы были не русские),

б) не должно повторяться (если встретится два одинаковых имени, то обе метки не сработают)

Теперь, имея такую метку в тексте, Вы можете поставить на нее ссылку с любой страницы сайта.

Ссылка должна иметь вид:

<a href="http://сайт.ру/путь/файл.html#имя метки">название линка</a>

Пример:

<a href="http://rupor.net/path/file.html#metka1">название линка</a>

При нажатии на такую ссылку броузер откроет страничку, выровняв строку с меткой по верхней кромке экрана.

В больших документах считается хорошим тоном периодически вставлять такие ссылки как "переход
к следующей главе", "переход к началу, к верхней строке" и т.п.


4.16. Меню "Вставка": дата

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.16. Меню "Вставка": дата:

Жмем на меню, изучаем диалоговое окно:

Первая строка - выбор формата написания дня. Варианты:

Выбрав понравившееся, указав желаемый вид написания даты, выбираем формат времени:

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

Вот как это выглядит визуально:

пнд, 05/19/2003,

4:05 pm май 19, 2003

А вот так эти надписи выглядят в коде:

<!-- #begindate format:acam3a -->&#1042;&#1090;&#1088;, 05/13/2003 5:39 pm<!-- #enddate -->
<!-- #begindate format:am1 -->&#1052;&#1072;&#1081; 19, 2003<!-- #enddate -->


4.17. Меню "Вставка": горизонтальный разделитель

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.17. Меню "Вставка": горизонтальный разделитель:

В коде разделительная линия обозначена простым <hr> (тег не требует закрытия! то есть </hr> не пишем!)
Выглядит она вот так:

Код: <hr align="left" width="60%">

Этот разделитель будет всегда занимать не более 60% от доступной ширины.

Но, вообще, последнее время им редко кто пользуется. Прошла мода, да и не настолько он гибок как с успехом заменяющая его лишняя ячейка в таблице толщиной в один пиксель.


4.18. Меню "Вставка": текстовые объекты

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.18. Меню "Вставка": текстовые объекты:

Большинство из представленных здесь команд создается более удобными путями. Но для тех, кто еще не освоил все горячие кнопки DreamWeaver`a, или недостаточно уверено применяет неочевидные элементы интерфейса, собранные здесь текстовые опции будут незаменимы.

4.18.1. Шрифт.

В левой части окна Вам предложат выбрать желаемые настройки шрифта. Основные настройки, стилевые и языковые.

Рассмотрим их по порядку:

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

* последовательность - это набор шрифтов, которые от первого к последнему компьютер пользователя переберет один за другим, если таковых на нем не установлено.

Затем следует размер, цвет и т.п. В общем, все эти настройки Вы можете без труда редактировать прямо в окне дизайна куда более простыми средствами. А главное, более наглядно.

Второй раздел, посвященный настройке стилей:

Здесь указываются класс текста, его ID или индивидуальный стиль, а также, возможно уже знакомым нам, тегом Title указывается и всплывающий комментарий-пояснение.

В третьей строке настроек выбирается способ написания (слева-направо, как обычно, или же справа-налево, то есть обратным письмом). Также там зачем-то указывается аббревиатура языка, на котором написан текст. Это в обычных страницах невостребовано, поэтому в подробности углубляться не будем.

4.18.2. Вариации шрифта.

Это классический "жирный", "наклонный". Тоже самое что и усиление" и "выделение".

Параграф и отступ - элементы тоже общеизвестные. Подробнее про них можно прочесть в учебнике HTML.

А вот на параметре "форматированный текст" мы остановимся чуть подробнее.

Суть идеи такова, что html не позволяет ставить больше одного пробела подряд. Если очень хочется, приходится или настраивать CSS, либо же ставить принудительные "неразрывные пробелы" (&nbsp;).

Но, в принципе, писать просто текстом, без оглядки на разметку в html тоже можно (хоть и считается это вопиющим ламерством и дурным тоном).

Осуществяется свободное написание текста внутри тега <pre> </pre>. Там можно ставить сколь угодно много пробелов.

Но следует помнить, что такой текст негибок. Он не подстроится под другой экран, другой броузер и другую операционную систему, которая может, подчас, сильно отличаться от Ваших. Таким образом, Ваш, казалось бы, настроенный и выверенный текст может предстать перед кем-то нагромождением бессмысленных огромных пробелов, переносов и т.п.

Очень рекомендую обходиться без этого тега!

h1, h2, h3 - теги заголовков. На самом деле их 6 - но обычно применяются максимум первые три.

Оптимально помечать все заголовки именно этим тегом, а не делая их просто большими и яркими - именно эти теги добавят Вашей страничке находимости поисковиками. Подробнее про то, как их использовать правильно, читайте, опять-таки, в учебнике HTML. И про все нижеследующие опции разметки - там же.

А вот про "комментарии" расскажу чуть подробнее.

Прежде всего, следует уяснить, что комментарии нужны исключительно для удобства распознавания того или иного участка скрипта, разметки и т.п. То есть, внешне их никому видно не будет, поисковик их не учитывает. И никакой иной роли, кроме как простой подсказки для кодера, они не играют.

В коде комментарии выглядят примерно так:

<!-- это меню 1 --> - текст, разумеется, произвольный, на любом Вам удобном языке. Но лучше, конечно, латиницей.

При выборе этого пункта в рассматриваемом меню перед Вами появится диалоговое окно, в которое можно вписать произвольный текст. Обрамление тега добавит сам DreamWeaver.


4.19. Меню "Вставка": скрипты

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.19. Меню "Вставка": скрипты:

Собственно, в этом разделе речь пойдет не о скриптах как таковых, а всего лишь о способах работы с ними посредством DreamWeaver`a:

Выбираем тип скрипта (советую ставить javascript 1.2) и пишем в соответствующие поля сам скрипт. Сохраняем и смотрим, что мы получили в коде:

<script language="javascript" type="text/javascript">
сам скрипт
</script>
</b>
<noscript>
не скрипт (поисковиками не индексируется)

</noscript>

Вот, собственно, и все.

Пункт меню "при невозможности выполнить скрипт" позволяет задать команду вывода оповещения, автоматический реадрес и т.п. Помимо прочего к этому тегу также применимы настройки стилей и классов.


4.20. Меню "Вставка": Вложение, выполняемое на стороне сервера

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.20. Меню "Вставка": Вложение, выполняемое на стороне сервера:

После нажатия на этот пункт меню Вам предложат выбрать файл, после выбора которого DreamWeaver автоматически расположит его как вложение. То есть в коде появится вот такое:

<?php require_once('/teach/dreamweaver/insert/data.htm'); ?> - путь, естественно, произвольный. Остальное не меняем.

На этом месте, при просмотре данного листа броузером, появится вложенный файл, как если бы все его содержимое было вписано между скобками тега вставки. Произойдет это, конечно, только в том случае, если хостинг позволяет клиентам работать с PHP.

Функция эта очень полезна для больших сайтов, можно сказать, даже незаменима. Она почти вытеснила из употребления фреймы, представляя все те же и плюс много других возможностей. По сути,
внешне это выглядит как SSI (см. учебник HTML), хотя имеет намного больше возможностей и удобства.


4.21. Меню "Вставка": настройки тега head

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.21. Меню "Вставка": настройки тега head:

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

Метатеги - специфическая информация для поисковиков.
В коде они выглядят примерно так:
<meta http-equiv="тип тега" content="содержимое">

Ключевые слова - слова, по которым Ваша страница должна находиться поисковиками. Должны передавать смысл странички.
<meta name="keywords" content="слово1, слово 2, слово 3">

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

Описание - то, что пользователь сможет прочесть в результатах поиска более подробно. Затем решить, стоит ли переходить по предложенной ссылке или искать что-то более соответствующее запросу.

В коде выглядит так:
<meta name="description" content="описание сайта">

Обновление (оно же refresh) - применяется для автоматического перенаправления пользователя через какой-то промежуток времени в другое место. Или для перезагрузки страницы. Или для нечестной накрутки баннеров.

В коде выглядит так:

<meta http-equiv="refresh" content="15;url=http://rupor.net/"> - Читается так: через 15 секунд проследовать по ссылке.
Или так, если документ достаточно просто обновить:

<meta http-equiv="refresh" content="10">

*цифра обозначает количество секунд на срабатывание.

База - предназначена для жесткого задания начала всех относительных путей. Подставляет начальную часть гиперссылок (http://сайт.ру/). А все остальные тогда пишутся просто как /путь/файл.html.

*примечание: в The Bat такие фичи не срабатывают и письмо с этими опциями будет как бы без ссылок, пока его не откроют в броузере.

В коде это выглядит так:
<base href="http://сайт.ру/" target="_blank">

Ссылка действует по принципу метки-якоря.

<link rel="next" href="/глава8я.htm" title="глава 7я">

Обратите внимание на тег rel. Он позволяет задать следующую страницу, либо же предыдущую:

<link rel="next" href="/глава6я.htm" title="глава 7я">

Для чего это нужно? Ну, это может быть использовано в скриптах. Либо для того, чтобы выстроить для броузера или поискового робота логическую цепочку - с первого по последний документ в строгой иерархии. Редко бывает востребовано вебоделами, но все же нет-нет да и попадается на просторах сети.


4.22. Меню "Вставка": спецсимволы

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.22. Меню "Вставка": спецсимволы:

Символ принудительного переноса (<br>) и неразрывный пробел (&nbsp;), полагаю, Вам уже знакомы. Остальные - все, так часто встречающиеся на бумаге символы -  ј ¬ ґ © ® "! ’ и многие другие.


4.23. Меню "Вставка": объекты

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.23. Меню "Вставка": объекты:

Объекты приложения, объекты ASP, ASP.NET, ColdFusion и т.п. - это, скорее, по части углубленного программинга, чем DreamWeaver`a как такового. Для их использования требуется поставить и настроить сервер, встроенный в сам DreamWeaver. Но, поскольку сей сервер довольно сложен в настройке и управлении, чем гораздо более распространенные апач и присные, этот раздел пока пропустим до тех пор, как придем к собственно работе с сервером.


4.24. Меню "Вставка": объекты РНР

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

4.24. Меню "Вставка": объекты PHP:

Также, внизу списка есть ссылка на сайт производителя, где можно закачать
"пополнение" к "библиотеке объектов", ежели что-то новое выйдет с момента написания программы.


5.1. Меню "Изменение": Свойства страницы

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

5.1. Меню "Изменение": Свойства страницы:

В этом пункте задаются все параметры страницы

Заголовок - здесь задаем ту надпись, которую посетитель увидит в синей полоске окна, в самом верху.

Фоновый рисунок - рисунок, который может располагаться на заднем плане Вашей странички. Все остальные элементы будут позади него. Советую не лепить что-нибудь яркое или темное.

Фон - это фоновый цвет (подробнее читайте в разделе "элементы интерфейса").

Текст - выбираем цвет текста.

Ссылки - выбираем цвет ссылок. Если не выбрать, то они будут иметь ярко-синий, режущий глаз, цвет.

Просмотренные ссылки, Активные ссылки - здесь можно задать цвет отображения ссылок. Просмотренные, то есть по которым Вы уже нажимали, будут иметь один цвет, а активные, то есть выделенные наведением курсора, - другой цвет. Советую настраивать эти параметры посредством CSS, это гораздо проще и практичнее.

Здесь задается отступ от краев броузера.

Обычно, если не указывать здесь никаких цифр, этот отступ составляет 5-15 px в зависимости от вида броузера. Если же указать везде отступ равный нулю, то Ваша страница приобретет куда более симпатичный вид. И пустого неконтролируемого пространства не останется.

Ниже имеется возможность назначить трассирующий рисунок. В броузере он отображаться не будет, а будет виден исключительно вебмастеру в DreamWeaver'e. Придумано это для тех, кто предпочитает сначала нарисовать сайт в виде картинки, а только потом нарезать его.

Прозрачность рисунка - настроить яркость и контрастность Вашего изображения. Грубо говоря, весь процесс будет напоминать копирование через наложенный лист . Вот прозрачность этого листа Вы и регулируете.

Внизу настроечного окна Вы видите путь, указывающий где лежит открытый документ, еще ниже - лишь папка сайта.


5.2. Меню "Изменение": Свойства выделенного объекта

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

5.2. Меню "Изменение": Свойства выделенного объекта:

Собственно, эта опция лишь определяет наличие внизу интерфейса панели свойств:

Убрать эту панель можно. Но, как правило, не нужно, так как 99% времени в процессе работы с DreamWeaver`ом она очень облегчает доступ ко всем необходимым настройкам.


5.3. Меню "Изменение": Изменить тег

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

5.3. Меню "Изменение": Изменить тег:

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

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

Свидетельствует о том, что содержи эта строка какие-либо настройки, они гарантировано подойдут к IE версии 3.0 и выше, к NetscapeNavigator`у от 4-й и выше версии и, наконец, к Opera, тоже 4-й и выше версии.

Вот, например, на таблице видно, что далеко не все размеры и параметры цвета элементов отразятся во всех броузерах. Настройки бордюров и цветов, к примеру (нижних две строки), отразятся только в IE, и ни в чем больше.

Переходя от одного пункта меню в левой части окна настроек к другому, можно последовательно осмотреть все доступные варианты настроек.

Единственно, что для полноценной работы Вам все равно потребуется знать хотя бы азы HTML


5.4. Меню "Изменение": Быстрый редактор тегов

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

5.4. Меню "Изменение": Быстрый редактор тегов (Ctrl+T):

Для уже достаточно хорошо пишущих код вручную может пригодиться возможность редактировать этот самый код не переключаясь в сплит-скрин (экран из двух половинок) дизайнерской части с частью кода.

Он позволяет видеть в отображении дизайнерского вида большее пространство, не отвлекаясь на окно с кодом.


5.5. Меню "Изменение": Работа со ссылками

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

5.5. Меню "Изменение": Работа со ссылками (Ctrl+L):

При нажатии автоматом получаем диалоговое окно выбора файла. Закономерности прописывания путей до файла внутри сайта Вы можете найти в одной из первых глав, пункт "гиперссылки". Нажимать горячие кнопки надо тогда, когда уже выделен кусок текста, который Вы собираетесь сделать ссылкой. Убрать ссылку можно также при помощи сочетания клавиш Ctrl+Shift+L.

Открыть ссылку - срабатывает, когда курсор наведен на содержащий ссылку элемент. Осуществляет открытие в DreamWeaver'e того элемента, на который ведет ссылка.

Открыть ссылку в... - задает таргетинг (Target) ссылки. То есть открыть ли ее в новом окне, в этом окне или как-либо еще. Но это неудобно, поскольку гораздо проще воспользоваться элементом, находящимся в пределах прямой видимости практически все время. Это особое поле Панели свойств:


5.6. Меню "Изменение": Работа с таблицами

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

5.6. Меню "Изменение": Работа с таблицами (Ctrl+L):

Рассмотрим по пунктам:

Выделить таблицу - (Ctrl+A) - выделяет таблицу, в ячейке которой находится на текущий момент курсор.

Объединить ячейки - (Ctrl+Alt+M) - сливает выделенные ячейки, если выделено больше одной.

Вставить строку - (Ctrl+M) - вставляет строку в самый верх таблицы, в которой курсор.

Удалить строку - (Ctrl+Shift+M) - удаляет текущую строку.

Вставить столбец - (Ctrl+Shift+A) - вставляет столбец в таблицу, внутри которой находится курсор.

Удалить столбец - (Ctrl+Shift+ - ) - удаляет столбец в таблице, внутри которой находится курсор.

Увеличить параметр rowspan - сливает нижнюю ячейку с той, в которой расположен курсор.

Уменьшить параметр rowspan - добавляет ячейку снизу.

Увеличить параметр colspan (Ctrl+Shift+ ] ) - сливает правую ячейку с той, в которой расположен курсор

Уменьшить параметр colspan (Ctrl+Shift+ [) - добавляет ячейку.

Очистить высоту ячеек,

Очистить ширину ячеек - убирает параметр размера.

Указать ширину в пикселях,

Указать ширину в процентах,

Указать высоту в пикселях,

Указать высоту в процентах - эти опции назначаются автоматом. И обретают те параметры, которым соответствует таблица на момент просмотра. Например, расширив окно на полную, можно получить ширину таблицы где-то за 960 px.

Естественно, эти пункты практически не имеют никакого применения.


5.7. Меню "Изменение": Структура фреймов

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

5.7. Меню "Изменение": Структура фреймов:

Меняет фреймы местами. Тот, в котором на момент применения команды располагался курсор, меняется местами с выбранным в меню. Остальные команды - соответственно.


5.8. Меню "Изменение": Управление слоями

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

5.8. Меню "Изменение": Управление слоями:

Переместить вперед - перемещает выбранный слой на передний план.

Переместить назад - перемещает выбранный слой на уровень ниже.

Запретить наложение слоев - эта опция имеет два режима. В режиме "помечено" все перекрывающиеся слои разъедутся так, чтобы не пересекаться. Наложить один слой поверх другого станет невозможно. Это удобно для слоевого дизайна, но применяется все же реже.


5.9. Меню "Изменение": Выравнивание

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

5.9. Меню "Изменение": Выравнивание:

Выравнивание чего-то относительно другого.У меня ни в каких режимах не заработало.


5.10. Меню "Изменение": Преобразование

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

5.10. Меню "Изменение": Преобразование:

Преобразование таблиц в слои:

и слоев в таблицы:

Несмотря на обилие настроек, для чего это нужно и когда может быть использовано мне в голову не пришло. Массовое конвертирование таблиц в слои? Так все равно не получится точь-в-точь. Я пробовал. И, по логике вещей, на такие автоконверторы надеяться не стоит. Если уж возникло желание перевести табличный дизайн на слои, то лучше делать это с чистого листа, с нуля. А не то рискуете потом все опять переделывать из-за какой-нибудь мелкой ошибки, которую найти тяжелее, чем сверстать все по новой.


5.11. Меню "Изменение": Библиотека

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

5.11. Меню "Изменение": Библиотека:

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

Впрочем, с библиотекой можно работать посредством имеющейся во вспомогательной панели вкладки:


5.12. Меню "Изменение": Шаблоны

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

5.12. Меню "Изменение": Шаблоны:

Шаблоны - это, опять-таки, лишние дебри. Во время наших прогрессивных технологий - бессмысленная возня. Их, насколько я понял, с лихвой заменяют PHP или SSI инклюды. А специфические функции, которые можно использовать при создании сайта, в 99% случаев невостребованы.


5.13. Меню "Изменение": Временная диаграмма

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

5.13. Меню "Изменение": Временная диаграмма:

Эту возможность можно было бы применить для придания сайту интерактивности. Она позволяет задать последовательность событий (смещения, открытия или закрытия слоев, картинок и т.п.), управляемых при помощи временной шкалы. Что-то отдаленно напоминающее Flash, но более упрощенно.

И все же, для создания сложных интерактивных сцен и "роликов" оно малопригодно. Конечно, PhotoShop`ом можно делать вебстранички-галереи. Но, все же, сделанные более приспособленной для них программой, они смотрятся куда лучше.

Поэтому шибко распространяться по этой теме я не стану, как по бесперспективной и даже вредной. Есть скрипты, как готовые, так и те, что можно написать вручную. Это будет заведомо на порядок удобнее и проще. Не говоря уж о том, что код станет куда более компактным. А, следовательно, уменьшится время загрузки страницы. Хотя, лично я бы порекомендовал вообще воздержаться от излишеств, до которых столь падки начинающие вебоделы.


6.1. Меню "Текст": Отступы

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

6.1. Меню "Текст": Отступы (Ctrl+Alt+]):

Отступ (тег </blockquote>) в текущем абзаце текста (там, где стоял курсор в момент нажатия). Чем больше нажатий, тем больше отступ. Теги </blockquote> громоздятся один за другим. Сообразно, нарастает и левое поле.

В принципе, аналогичную операцию делает пара кнопок, расположенных на панели свойств, что не в пример более удобно!


6.2. Меню "Текст": Абзац

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

6.2. Меню "Текст": Абзац (Ctrl+Alt+]):

Форматирование абзаца - это ни что иное, как растановка обозначений важности (упрощенно говоря, "громкости").

Делается это при помощи тегов <H1> - <H6>.

Подробнее про них можно почитать в соответствующем разделе учебника о HTML. Здесь же вкратце скажу, что они влияют не только на внешний вид странички, но и на ее находимость поисковиками. Причем, если внешний вид они, будучи примененными в чистом виде, безнадежно портят (но это легко поправимо при помощи CSS!), то находимость они таки повышают. Чем меньше цифра в этом теге, тем большее значение для поисковика приобретет содержащееся меж <H1> и </H1>. Но не стоит засовывать в них весь сайт. Это ни к чему хорошему не приведет.

Советую ограничиться названиями статей, заголовками новостей и т.п. Можно, в принципе, и названия разделов, пункты меню и т.п. Но для большинства поисковиков ценность H1 уменьшается при увеличении содержащихся в нем слов и чересчур частом его использовании.


6.3. Меню "Текст": Выравнивание

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

6.3. Меню "Текст": Выравнивание:

На этом изображении Вы видите горячие кнопки к каждому типу имеющихся выравниваний:

Про выравнивания Вы можете почитать в соответствующем разделе HTML учебника ("разметка текста").

Вкратце, эта функция равняет все содержимое тега, внутри которого расположен курсор на момент применения.

Особо стоит отметить выравнивание по ширине - (Ctrl+Alt+Shift+J) - искренне не пойму почему его не применяют вроде бы грамотные, знающие HTML люди, делающие серьезные страницы, онлайн-СМИ и т.п. Ведь этот тег очень улучшает читабельность! Очень советую не пренебрегать его использованием!


6.4. Меню "Текст": Список

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

6.4. Меню "Текст": Список:

Про списки Вы, опять-таки, можете подробно прочитать в учебнике HTML. Здешние его возможности ничем не отличаются от классических, уже ранее описанных. Остановимся подробнее только на особенностях его использования в самом Dreamweaver`e.

Вот результат действия опции "список с пояснениями":

слово,
слово,
описание,
описание,
слово,
слово,
описание
описание

А вот здесь - свойства списка:

когда список уже сформирован, можно поиграться с его настройками в пункте "свойства", который до формирования списка недоступен. Вот его диалоговое окно. Настроек не ахти. Через CSS делается намного больше и разнообразнее.

Впрочем, со списками куда проще работать посредством все той же панели свойств выделенного объекта:


6.5. Меню "Текст": Шрифт

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

6.5. Меню "Текст": Шрифт:

Этот пункт меню дублирует выпадающее меню со списком приоритетности шрифтов из панели свойств:

Последовательность шрифтов, выбранная дизайнером, предусматривает, что в случае отсутствия первого шрифта, компьютер посетителя подставит следующий в этом списке. Если нет и того, то третий, а если нет и его, то тот, который сочтет наиболее пригодным. Старайтесь обходиться стандартными, всем известными шрифтами. Они гарантировано есть у всех.

Впрочем, если приспичит, то при помощи пункта "изменить список" можно составить собственный ряд предпочтений:


6.6. Меню "Текст": Стиль

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

6.6. Меню "Текст": Стиль:

Обычные теги, "азы", это Жирный, Курсив, Подчеркнутый. Все остальное, перечисленное в меню, тоже дает определенные изменения, но считается устаревшими тегами и почти не используется.

Образцы применения этих тегов Вы могли наблюдать в учебнике HTML.


6.7. Меню "Текст": Стиль HTML

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

6.7. Меню "Текст": Стиль HTML:

Это позволяет быстро очистить от стилевого оформления некоторое количество текста разом. Очистить можно как весь текст внутри тега, так и конкретный параграф. А можно и создать стиль HTML:

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


6.8. Меню "Текст": Стиль CSS

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

6.8. Меню "Текст": Стиль CSS:

Здесь представлен довольно-таки мощный редактор CSS, хоть и несколько запутаный, на мой взгляд, но, на удивление, мощный. Итак, делаем стиль: Назначаем ему имя (действует внутри кода).

Затем определим, что мы собственно делаем. Это может быть пользовательский CSS, переопределение какого-либо отдельно взятого HTML-элемента. Или селектор CSS (небольшой стиль группы элементов, имеющих имя-идентификатор).

Рассмотрим пользовательский стиль, как наиболее всеобъемлющий.

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

При выборе вынесенного файла (очень рекомендую именно этот вариант, как самый гибкий!) в начале Вашего файла в коде появится нечто вроде "<link href="/teach/dreamweaver/text/style.css" rel="stylesheet" type="text/css">"

После выбора этого метода Вам будет предложено указать куда сохранить и как назвать этот самый внешний файл CSS:

Теперь, пошагово строим свой персональный СSS. Изучим открывающееся диалоговое окно:

В левой его части представлено что-то вроде меню. Это последовательные "шаги-разделы" Вашего CSS. А в правой, соответственно, сами настройки того или иного раздела.

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

Толщина букв варьируется от обычной, толстой (bold), полужирной (bolder) и тонкой (lighter) до конкретных значений от 100 до 900.

Вариации - это возможность писать прописными (заглавными) буквами, уменьшеными до размеров строчных (малых).

Capitalize, uppercase, lowercase - это, соответственно, Большой жирный шрифт, шрифт написанный ВЕРХНИМ РЕГИСТРОМ и текст написанный нижним, обычным регистром.

Честно сказать, я так и не понял, на что влияет этот параметр. Предположительно, задает некую линию, по которой можно впоследствии выравнять картинки, таблицы и т.п.

Поглядите на изображение. Выделение на "value" говорит о том, что сюда нужно ввести свое число (обычно 1-2 знака). Если попытаться перейти к другому пункту "меню", Dreamweaver выдаст предупредительный "алерт" с просьбой заполнить поле цифрой.

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

Работа с фоном: Общепонятные цвет фона и назначение фонового рисунка я пропускаю. А вот про остальные опции расскажу подробнее:

Повторение фонового рисунка может иметь несколько режимов:
no-repeat - не повторяться (фоновую картинку не "размазывает" по всей страничке),
repeat - повторяться (обычный режим)
repeat-x - повторяться только по оси x (горизонтально)
repeat-y - повторяться только по оси y (вертикально)

Можно также задать позиции относительно краев. Это как выравнивание, только здесь дополнительно можно назначить отступ в пикселах или процентах.

Закрепление фона - это когда у Вас фоном висит картинка по центру (либо как еще из стандартных выравниваний), но при проматывании страницы в любую сторону не меняет своего положения, как приклеенная к центру экрана.

Блок - это понятие условное, обозначающее некие не совсем очевидные свойства текста. Про расстояние между словами и буквами, полагаю, можно не объяснять (понимать буквально).

Вертикальное выравнивание:

Все это многообразие практически не применяется за бессмысленностью.

Настройка пробелов:

normal - обычный HTML режим, когда любое количество пробелов приравнивается броузером к одному.

pre - форматированный, когда все пробелы учитываются полностью (очень не рекомендую использовать при всем кажущемся удобстве).

nowrap - неразрывная строка. Все пробелы приравниваются к одному, но при этом строка не разрывается и на другую не переносится. В некоторых случаях очень удобно.
Коробка - это условное пространство-отступ, в которое можно поместить практически любой элемент, будь то кусок текста, картинка или же таблица.

Здесь можно задать отступы от края до текста, объектов и т.п. Причем даже с одной конкретной стороны!
Рамка:

Здесь настраиваем рамки таблиц. В первой колонке у нас стили (подробности в учебнике HTML). Стили могут быть различными для разных сторон таблиц, толщина рамок для разных сторон тоже может быть разной!

Настройки списков:

Диски, окружности, квадратики и т.п. - все, чем можно метить начало списковой строчки.

Можно даже загрузить какую-либо картинку, которая будет служить маркером.

Позиция метки может быть "вне списка" и "внутри абзаца".
Позиционирование слоя:

Здесь можно всесторонне настроить слои. Все параметры подробно разъяснены в учебнике HTML, и всем его читавшим должны быть понятны.
Дополнения:

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

Богатый выбор стандартных курсоров позволит придавать наводимому на снабженный стилем объект определенный вид Вашему курсору.

Богатая система фильтров впечатляет. Единственно, что фильтры эти применимы только к IE. Поэтому, как неуниверсальные примочки, рассматриваться не будут. Если делать страничку, то так, чтобы предпочитающие более приличные броузеры люди могли их нормально видеть.


6.9. Меню "Текст": Размер

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

6.9. Меню "Текст": Размер:

Указываем размер шрифта от 1 до 7. Очень советую осуществлять это через CSS. Размер также можно задать при помощи соответствующего элемента панели свойств.


6.10. Меню "Текст": Изменить размер

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

6.10. Меню "Текст": Изменить размер:

Этими параметрами мы можем назначить относительный размер символов. Многие современные броузеры позволяют пользователю масштабировать размер текста. Так вот, эти "+1" к масштабному увеличению добавляют (или отнимают, если "-1") пиксель. Таким образом, каким бы размером ни стал основной текст, в нем всегда можно сохранить выделенные размером участки, не нарушая пропорций к основному тексту. Эти возможности также представлены в элементе управления на панели свойств выделенного объекта в нижней части интерфейса.


6.11. Меню "Текст": Цвет

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

6.11. Меню "Текст": Цвет:

Этот пункт меню выводит полноформатную палитру, позволяющую окрасить содержащийся в выделении текст (если ничего не выделено, то ничего не произойдет).

Впрочем, для удобства можно пользоваться элементом управления на все той же панели свойств:

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

Однако, можно перейти и в режим тонких оттенков - достаточно ткнуть курсором в изображение пирамидки оттенков:


6.12. Меню "Текст": Проверка правописания

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

6.12. Меню "Текст": Проверка правописания:

Никакой полезной нагрузки этот пункт меню для русскоязычного населения не несет. Ибо работает только с английским проверочным словарем.


7.1. Меню "Команды": Начать запись

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

7.1. Меню "Команды": Начать запись:

Здесь можно записать некую последовательность действий, которую можно затем, до известной степени, автоматизировать и воспроизводить впоследствии неоднократно. Вроде как, предполагалось, что это сильно облегчит жизнь при длительной монотонной деятельности. Но, увы, с выделением запись не работает. Следовательно, все ее функцЫи сводятся к банальному копи-паст. Впрочем, вроде бы предусмотрены какие-то скрипты и заготовки. Но загружать их придется с сайта производителя и их просто так не отдадут.

Изменить список команд - позволит редактировать список команд (как бы позволит. У меня там при всем старании ничего не появлялось).

Больше команд... - переход на страницу производителя

Определить дополнения - какой-то менеджер заготовок. Толком в его назначении разобраться не удалось.


7.2. Меню "Команды": Форматировать код

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

7.2. Меню "Команды": Форматировать код:

После некоторых оптимизаторов страничек код HTML выглядит сплошным монолитным месивом:

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


7.3. Меню "Команды": Очистка HTML кода

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

7.3. Меню "Команды": Очистка HTML кода:

Это автоматизированное удаление порой остающихся лишних и бессмысленных тегов. Таких как, например, <b> </b> - между ними нет ничего. Следовательно, визуально они никак не видны и ни на что не влияют. Поэтому их можно смело удалить, уменьшив, тем самым, размеры странички. Порой, эта операция просто необходима. В особенности, когда над страничкой долго и упорно трудились, внося бесчисленное множество изменений.
Собственно, что удалится перечисленно в диалоговом окне:

Пустые теги, какие-то еще левые теги (перевода Redundant я не нашел), все не HTML теги, такие, как любит оставлять MS Word, например, и т.п.

Можно также удалить и спец-метки, если Вы их оставляли в коде.

Можно удалить и какие-то конкретные теги, если DreamWeaver их почему-то просмотрел. Для этого их надо внести в строчку после надписи Specific Tag(s).

Options - содержит тонкие настройки, позволяющие провести логическое слияние некоторых тегов.

Например, таких как <font face="Comic Sans MS"><font size="5">текст</font></font> Dreamweaver может преобразовать в
<font face="Comic Sans MS" size="1">текст</font> , что воспринимается куда легче и проще.

Ну и, конечно, можно проследить за сделанными изменениями. Если пометить самый последний чекбокс, то в конце Вы увидите перечень внесенных изменений (лог).

Сюда же относится и вычисление чисто MS Word`овских заморочек.


7.4. Меню "Команды": Коррекция

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

7.4. Меню "Команды": Коррекция:

Что это такое, DreamWeaver пояснит при попытке применить этот пункт меню:

В коде это выглядит так:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();}
MM_reloadPage(true);
//-->
</script>


7.5. Меню "Команды": Создать галерею изображений

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

7.5. Меню "Команды": Создать галерею изображений:

Эта опция требует дополняющей программы FirеWorks, которую нужно еще доустановить. Да и вообще, автоматом сделанные галереи - это не есть гут. Настоятельно рекомендую использовать только скрипты. При этом, по возможности достаточно сложные и гибко настраиваемые.


7.6. Меню "Команды": Установить цветовую схему

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

7.6. Меню "Команды": Установить цветовую схему:

Для самых ленивых предусмотрены даже заготовки цветовых схем: фон, цвета ссылок и т.п.

Вообще-то, как и все "заготовки", здесь пригодно только для ленивых новичков, так что смотрите сами. Рекомендация по-прежнему одна - использовать СSS на все 200%.


7.7. Меню "Команды": Форматирование таблиц

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

7.7. Меню "Команды": Форматирование таблиц:

Куча заготовок, которые вдобавок можно изменить под себя, настраивая отдельные элементы:

Настраивается все:

RowColors First - основные строки, Second - вторичные строки,
Alternate - способ распределения строк:

через строчку, две верхних строки, три верхних строки и четыре верхних строки другого цвета от основного (First).
TopRow - верхняя строка, строка с заголовками.
Также в этой группе настраивается выравнивание (Align), стиль текста (жирный или наклонный).
Группа Left Col - настраивает выравнивание и стиль теста для левой колонки.
Table Border - толщина бордюра.


7.8. Меню "Команды": Сортировка таблиц

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

7.8. Меню "Команды": Сортировка таблиц:

Этот пункт меню позволяет сортировать содержимое таблиц по каким-либо признакам:

Выбираем сортируемый столбик (На картинке Column1), выбираем по какому признаку будем проводить сортировку (на изображении - по алфавиту, а можно и по цифрам), назначаем, если нужно, дополнительные опции в чекбоксах (какие подвергать сортировке) и жмем Apply (на изображении оставлено за кадром).


8.1. Меню "сайт": файлы сайта

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

8.1. Меню "сайт": файлы сайта (F8):

Окно работы с сайтом располагается на выдвижной панели, как правило, расположенной у правой кромки экрана:

Множество существующих там вкладок будет рассмотрено отдельно. Пока же, нас интересует только раздел управления сайтом:

Прежде всего, напомню еще раз, что хоть "дополнительных" возможностей у DreamWeaver`a и много, но эта программа ориентирована на работу с html.

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

Так и в работе с файлами, лично я всегда предпочитал использовать какой-нибудь
двухоконный менеджер файлов наподобие Total Commander'a 5.5.

Тем не менее проведу краткий экскурс по возможностям этого окна:

Как и в обычном файловом менеджере существуют возможности создать папку, открыть файл, переименовать и т.п. Все отличие, пожалуй, только в возможности проверки правильности ссылок и просмотра в броузере (хотя здесь, опять-таки, очень рекомендую запускать просматриваемый файл в самостоятельном, вручную открытом, окне броузера).

Функция "заметки" может быть востребована при групповой разработке корпоративного сайта, но для простых смертных фактически бессмысленна.

Пункт меню "правка":

Помимо стандартных возможностей, здесь присутствуют присущие только DreamWeaver`у. Это "выделить новые локальные" (подсветятся лежащие на Вашем компьютере файлы, которые Вы еще не сливали на хостинг) и "выделить новые удаленные". Последнее позволит обнаружить что изменилось на сайте, каких файлов у Вас на компьютере нет (например, напарник положил на сайт свои файлы, которых у Вас нет). Сразу сообщу, что такие фичи сработают только если Вы настроите все бесчисленные параметры встроенного сервера, на что терпения хватит не каждому.

Последние же два пункта "найти в локальном сайте" и "найти в удаленном" - некорректный перевод. На самом деле, это лишь два способа отображения Вашего сайта.

С позиции того, какую структуру он примет на хостинге и с позиции как оно расположено у Вас на винчестере.
меню вид.


8.2. Меню "сайт": Карта сайта

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

8.2. Меню "сайт": Карта сайта (alt+F8):

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

Карта сайта позволяет оперативно работать со взаимодействием с самими файлами. Причем,
визуализирует большинство связей (кроме ссылок путем проставления переменных!).
Вот так, например, можно задать ссылку, ведущую на документ простым перетягиванием "прицела"

В субменю (появляющемся при нажатии правой кнопкой на ссылке) мы видим остальные возможные, применительно к карте сайта, команды:

В сущности, все это уже попадалось нам ранее в других пунктах меню и собрано здесь только для удобства пользователя.

Лог работы с FTP. Конечно DreamWeaver MX позволяет и считывать сайт с интернета и загружать его обратно.

Но это удобно только там, где каналы шире, чем у наших провайдеров и связь сама по себе не отрывается.

Посему я, все же, настоятельно рекомендую использовать для этого нормальный, полнофункциональный ftp-клиент. Ибо он все равно Вам понадобится, так как DreamWeaver не дает очень многих просто необходимых для среднепродвинутого сайта функций. Оптимальное решение - использовать ftp-клиент, встроенный в какой-либо файловый менеджер.

Например, это может быть Total Commander или Far.

Колонки для файлов. Настройка отображения файлов в окне работы с удаленным сайтом.

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


8.3. Меню "сайт": меню сайт

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

8.3. Меню "сайт": меню сайт.

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

Скрытие - можно спрятать файлы с каким-либо расширением, например, все картинки .gif;

remove connection script - оборвать соединение с удаленным сервером;

export-import - это xml-документ с перечнем настроек сайта. Используется, например, при переустановке системы. Если все у Вас осталось в соответствующих директориях как и было, достаточно импортировать файл .ste (если, конечно, Вы его предварительно создали).

Файл этот будет содержать все настройки локального сервера, отображения сайта и т.п.

Очень удобно.

8.3.1 Меню "сайт": контекстное меню

Это меню откроется если нажать правой кнопкой на содержащихся в окне работы с сайтом файлах. Создать новый файл, папку и открыть - все это в комментариях не нуждается, а вот остальное рассмотрим подробнее:

Get - получить этот файл (при условии, что настроен локальный сервер).

Put - передать (опять же, если настроен локальный сервер).

Контроль, регистрация и отменить контроль - все это опции, относящиеся к работе с удаленным сайтом.

Скрытие - это уже разъяснялось ранее.

Выключить только чтение - позволит править файлы прямо на сайте.

Размещение в удаленном сайте - позволит открыть окно работы с удаленным сайтом и следить за перекачкой информации.

Установить как домашнюю страницу - укажет адрес этого файла в качестве первого открываемого броузером документа.

Просмотр в броузере - делает темповый файл, который открывается одним из имеющихся броузеров

Check links - проверка ссылок,

Синхронизировать - залить на сайт свежеизмененные и новые файлы.

Далее, стандартное "вырезать-копировать-вставить, удалить и переименовать".

Ну, и уже знакомые по предыдущим главам заметки по дизайну с очепяткой в русификаторе :).

8.3.2 Меню "сайт": иконки в панели настроек.

Все это относится к работе с сайтом посредством встроенного тестового сервера. Довольно удобно для самых маленьких.

Но для сколь-нибудь сложных сайтов это похоже на попытку протолкнуть сквозь игольное ушко целого верблюда. А, учитывая то, что перед каждым запуском локального сервера для достаточно крупного сайта Вам придется ждать по 10-15 минут пока все не проиндексируется, малейшее желание пользоваться такой "автоматизацией" у всякого разумного человека пропадает.


9.1. Меню "окно": Панель объектов

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

9.1. Меню "окно", Панель объектов (Ctrl+F2)
Здесь можно убрать / вернуть панель с кнопками быстрой вставки. Она довольно удобна и новичкам и профессионалам, так что советую оставить и пользоваться.

Панель объектов:

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

Первая вкладка содержит предметы первой необходимости:

Вставку гиперссылок, [image] выводящую форму ввода всех возможных атрибутов (в то время как ссылка, вводимая посредством панели свойств, располагающейся в нижней части экрана дает довольно урезанные возможности):

Вставка ссылки на электронную почту, ничем по сути от вышеописанной функции не отличающейся и вставка ссылки-якоря

Про все эти функции уже заходила речь ранее, так что повторять их наначение здесь я не буду.

Вставка таблицы и вставка слоя - тоже достаточно заурядные процедуры ничем не отличабщиеся от тех, что доступны в соответствующем раздле текстового меню.

Вставка картинки и вставка заготовки картинки (она же "распортка")

- тег такой псевдо-картинки, не ведет на конкретное изображение, но при этом обладает всеми свойствами картинки. Это своего рода "заглушка").
Вставка объекта FireWorks. Вам это еще нескоро и вообще врядли пригодится, поэтому не будем о нем. Скажу лишь что FireWorks - другая программа Макромедии, дополняющая пакет разработки сайтов, но не снискавшая широкой популярности.

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

Тыкаем на кнопку, пиолучаем окно запроса данных:

В нем вводим имя картинки (произвольно, но не должно повторяться), ниже - изображение которое будет видно по-умолчанию, еще ниже - Rolover Image - то изображение, которое будет заменять первоначальное при обрабатываемом скриптом событии. Чексбокс Preload Rollover Image означает указание загрузить кратинку в кэш броузера еще до того как к ней обратится скрипт. Зачем это нужно ? Чтобы при наведении на нашу кнопку, изображение на ней появлялось мгновенно, а не начинало мееедленно и неторопливо грузиться с сайта, демонстрируя некрасивую "дыруку" на месте кнопки и разражая посетителя.

Панель нафигации.
Настоятельно не рекомендую ее использовать как неудобную систему. Лучше такие вещи делать ручками. Оно и красивее будет и практичнее и удобнее.

Горизонтальный раделитель.
 Ну, про это речь уже была, так что подробности ищите в первых главах.

Вставка даты.
 - " -

Табличные данные.
 - " -
Комментарий.
 - " -
Библиотека тегов.
 - " -

Здесь можно поизучать все возможные теги рассортированные по типам и видам. При этом в левой половинке окна будет древовидная структура-сортировщик, а справа соответственно сами теги. Выбирая нужный в правом окне можно почитать про него во всех подробностях в нижней части окна. Жаль что только по английски, но возможно в 2004 версии я это исправлю собственнолично :0)

Вкладка "Слои":

Содержит помимо возможности вставки таблиц и слоев еще и переключатель видов отображения кромок слоев. Про это я уже писал ранее, поэтому повторяться также не стану.

Вкладка "Текст":

Ничего нового она также не содержит, все эти функции доступные здесь в виде кнопок вы уже изучили в предыдущих главах

Вкладка "Таблицы":

Содержит минимум возможеностей, в текстовом и контекстном меню их нааамного больше.

Вкладка "Фреймы":

Про них тоже уже было

Вкладка "Фреймы":

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

Вкладка "Шаблоны":

Тоже довольно удобная панель, но шаблоны как я уже опять же писал ранее "не наш метод" - поэтому не будем тратить времени.

Вкладка "Символы":

Символы - набор наиболее часто используемых спец-символов.

Вкладка "Медиа":

Здесь располагаются вставки разного рода "фенечек", как то флэш-ролики, флэш-кнопки, Java-апплеты и другое

Вкладка "Заголовки":

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

Вкладка "Заголовки":
 Скриптовые объекты тоже ранее обсуждались, но наличие этой панельки и ее содержание плотно зависит от типа страницы с которой вы работаете (Дример определяет ее тип по расширению, которое вы ей присвоите). В данном случае у нас была обыкновенная .htm страница и доступны были только вставка скрипта, вставка тега <noscript> и SSI.

Вкладка "работа с PHP":

Доступной эта вкладка становится только в случае если вы сохранили страницу над которой работаете назвав ее расширением .php

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

Вкладка "работа с БД":

Подобно вкладке PHP, эта вкладка становится видна, только если формат файла подразумевает наличие обращений к MySQL. Вам это учить еще рано :)


9.2. Меню "окно": Панель свойств

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

9.2. Меню "окно", Панель свойств (Ctrl+F3):

Ее вы узнаете сразу - это наиболее частоиспользуемая рабочая область в DreamWеaver`е - без копания в ней не обходится практически ни одна мало мальски заметнаяоперация - будь то вставка картинки или настройка таблицы.

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

Формат -это выбор формата текста - размер заголовков от 1 до 6 или вообще не форматированный текст. Далее, справа от этой выпадающей менюшки доступен выбор шрифтовых групп, далее их размер, далее окно указания цветокода фона с возможностью выбрать понравившийся оттенок на палитре. Далее стандартное выделение жирным, наклон текста и виды выравниваний. Второй строкой можно ввести ссылку, которая может быть привязана к сайту только тогда, когда в тексте выделен какой-то определенный фрагмет. Вот этому то фрагменту и будет присвоена ссылка если ее ввести в то окно.

Далее виден "пррицел", позволяющий если у вас открыто несколько файлов путем перетаскивания его назначать объектам ссылки на те места, куда он был наведен. Функция забавная - чем-то напоминаетдетский конструктор, но в реальной работе малополезная.

Еще дальше идет окошко "Цель:", где указывается в каком окне открывать ссылку - в текущем, новом или как еще. Окно становится доступным только если навести курсор на ссылку. Ну и последними идут кнопки формирования списков и отступов.


9.3. Меню "окно": Ответы/Помощь

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

9.3. Меню "окно", Ответы/Помощь (Alt+F3):
Этот пункт меню выводит окно справки-подсказки. Пользоваться им не шибко удобно - ведь подсказка то и не переведена, так что рассматриваем его чисто для общего развития. Хотя те кто читает по-английски найдут там много полезного - ведь по сути это целый учебник, написанный известным на этом поприще писателем мануалов О`Рейли.


9.4. Меню "окно": Стили CSS

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

9.4. Меню "окно", Стили CSS (Shift+F11):

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


9.5. Меню "окно": Стили CSS

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

9.5. Меню "окно", Интерактивность (Shift+F3):

Этот пункт меню позволяет встроить в сайт некоторое количество разного рода интерактивных полезняшек - скриптов, определящих разрешение экрана и перенаправляющих пользователя в зависимости от результата на оптимизированную под него страничку, определяющих тип и версию броузера и многое другое.

Тут же можно запрограммировать и автоматический переход по ссылке через какое-то время или после какого-то действия, включение музыки и т.п. функции.
Проверка броузера:
По сути это далеко не универсальный инструмент, ограниченный распознаванием версий уже вышедших броузеров самых известных брендов. Однако те времена, когда броузеры демонстративно работали по каким-то своим стандартам давно минули - сейчас разве что Опера принципиально не желает отображать сайты в нормальном виде, а все остальные - ИЕ, Мозилла и т.п. если не делать грубых ошибок отображают сайты одинаково.

Тем не менее, для общего представления о работе этого дела рассмотрим изображенное слева:

НетскейпНафигатор версии от 4 и старше - первая выпадающая менюшка - куда посылать его владельца, в случае неудовлетворения условий - другой урл перехода.

То же самое предусмотрено и для Плорера от 4 и выше версии.

Все другие "неопознанные" броузеры, скрипт, формируемый этим оконцем может направить на второй URL.

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

Проверка наличия плугинса - список того на наличие чего мы можем проверять этим скриптом представлен на скриншоте. Пожалуй ориентироваться из всего этого изобилия имеет свмысл только на Flash - да МедиаПлаер с КвикТаймом. Первое вы и так наверняка знаете, а второе и третье - видеопроигрыватели, применять которые на своем сайте я вам очень не советую - не те у нас еще скорости, чтобы превращать сайт в скопление видеороликов.

Выпадающее меню:

Выпадающее меню бывает двух типов - срабатывающшее как только пользователь откроет его и закроет на одном из пунктов, либо позволяющее сколь угодно долго теребить пункты и не реагирующее на это пока не будет нажата кнопка. Перед вами первое - а сразу под ним (JumpMenuGo) - второе.
Выпадающее меню:
А этот пункт меню позволяет сформировать всплывающее окно произвольной конфигурации - вы такие наверняка видели и тоже от них раздражались.. Учитывая что 70% прогрессивного человечества давно обзавелось давилками таких назойливых окон рассматривать эту особенность подробнее не вижу смысла. Ну ладно, пять таки для общего развития.. рассмотрим :)

Указываем URL, по которому находится файл, который будем грузить в наше окошко, указываем размеры окна - ширину и высоту, помечаем чекбоксы какие панели и тулбары нам нужны в новом окне. Если не помечено ничего, будет банальный поп-ап.

Поясню в деталях:

Navigation Toolbar - панель нафигаци - там, где кнопки "взад-вперед" и т.п.

Location Toolbar - строка с адресом,

Menu Bar - текстовое меню,

ScrollBars - появятся ли половсы прокрутки если содержимое окна будет превышать его текущие размеры.

ResizeHandles - разрешить вручную изменять размеры окна.

Windows Name - имя окна, то, что будет отражаться в его синей полоске в самом верху.

Текст:

Здесь разным элементам окна можно назначить текст. В частности разместить в его к примеру в статусной строке (нижняя кромка окна)


9.6. Меню "окно": Стили CSS

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

9.6. Меню "окно", Инспектор тегов (F9):

Инспектор тегов - автоматическая проверялка синтаксических ошибок в коде. Например если вы не там поставили запятаю и мучительно часами ее ищете - с помощью этой примочки вы найдете свои ошибки значительно быстрее. Кроме того Инспектор тегов проверит нет ли в них лишних пробелов, скобок и правильно ли написаны теги.

Умеет Инспектор тегов и наглядно показывать древовидную структуру, позволяющуюлегче отследить к какому каскаду относится тот или иной блок кода. Внижней части окна можно видеть набор основных параметров присущих тому тегу, который выделен в верхней части. Набор этих параметров легко изменяем -

К примеру - наводим курсор на поле справа от alink - что позволит нам задать цвет ссылок - как готовым шестнадцатиричным значением, так и выбрав их из предложеной цветовой палитры заготовок.

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

Кроме того, это окно удобно использовать для поиска нужного места в HTML коде.

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

При этом - при наведении на соответствующий кусок кода, даже если он не сформирован "ступеньками" мы можем видеть в "дереве вложенности" где конкретно находится интерсуюшщий нас кусок кода.

Поскольку особенности интерфейса DreamWeaver обеспечивают как минимум два, а то и три разных способа добраться до нужной команды, то под древовидной структурой, демонстрирующей вложенность тегов мы можем оперативно подправить и CSS. Если конечно он какой-никакой, а уже там сформирован:
Внизу окна быстрой коррекции CSS мы можем найти и библиотеку тегов, она доступна во вкладке Assets, в которой отборажается файловая структура вашего сайта и присутствует окно предосмотра картинок.
Здесь можно найти абсолютно все - от тегов звуков, видео, обратного начертания текста и многого друго. В общем-то 80% тегов имеющихся в HTML никогда не используется, но они все же есть. На все случаи жизни.
Правка тега. Эта кнопка открывает окно со всеми параметрами и настройками выделенного в верхней части окна тега. Хотя, все эти параметры куда проще задавать в панели свойств, чем здесь, но на первых порах новичкам это может облегчить освоение HTML.


9.7. Меню "окно": сноски

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

9.7. Меню "окно", Сноски, они же "Рекомендации" (Shift+F1):

Эти ни что иное как своего рода мини-учбеник, встроенный внутрь DreamWeaver`а и довольно подробно объясняющий применение того или иного тега, той или иной структуры и т.п.


9.8. Меню "окно": Сайт

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

9.8. Меню "окно", Сайт (F8):

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


9.9. Меню "окно": Активы

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

9.9. Меню "окно", Активы (F11):

Этот пункт открывает все ту же боковую панель, демонстрируя удобный для корректорских работ набор инструментов:

вот так оно примерно и выглядит, если открыть пошире :) как видите тут можно:

- видеть, что содержится внутри файла (верхняя часть окна отобразит картинку или управление проигрывателем звуков) -

- размер файла,

- путь к файлу внутри сайта.

При наведении курсора на какой либо объект этого окна выскакивает оптимально подобранное для корректорских задач контекстное меню:
Отсюда можно как клонировать сайт и на его основе строить новый, так и внести существенные изменения в текущий - например переместить картинки из одной директории в другую и все ссылки внутри сайта автоматически изменятся в соотсветствии с перемещением какой либо директории.

Собственно, единственно полезное там, это возможность переноса какого-либо файла в структуру другого сайта, да возможность перейти к тому месту где хранится выбранный файл - в сложных и массивных сайтах это очень облегчает поиск и исправление.

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


9.10. Меню "окно": Результаты

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

9.10. Меню "окно", Результаты:

Под этим пунктом затаились разнообразнейшие отчеты и проверки, большинство из которых способно серьезно облегчить жизнь начинающему вебмастеру. С большинством из них вы уже и так знакомы - с поиском и заменой, с проверкой орфографии и тестом на совместимость с броузерами разных типов. Про все это писалось еще в первом разделе.


9.11. Меню "окно": Другое

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

9.11. Меню "окно", Другое:

здесь собраны пункты, открывающие окна различных вспомогательных сервисов.

Таких, как уже в трех разделах ранее упоминавшийся Инспектор кода, вспомогательные опционали по фреймам и слоям. В особенности следует обратить внимание на управление слоями, которые, если их много, могут создать значительные трудности с их размещением и настройками. Здесь же их можно достаточно легко обнаружить, разместить по "этажам" (какой слой выше - какой ниже), задать такие параметры как видимость и прозрачность и др..


9.12. Меню "окно": Убрать панели

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

9.12. Меню "окно", Убрать панели (F4):

Убирает все опциональные панели и панели вспомогательных кнопок. Остается только общий вид и (или) окно кода. Приятная возможность, когда работа переходит в стадию написания содержимого странички.


9.13. Меню "окно": Расстановка окон

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

9.13. Меню "окно", Расстановка окон:

Если у Вас открыто сразу несколько документов, то вы можете разом разложить их в одном из уже ставшими стандартом видов. Впрочем - эта же функция уже так наверняка попадалась Вам в Windows.


9.14. Меню "окно": Переход по открытым документам

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление
дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

9.14. Меню "окно", Переход по открытым документам:

переход от документа к документу, если их открыто более одного - достаточно ткнуть по нужному наименованию документа. Впрочем, куда удобнее пользоваться вкладками в нижней части окна, переключаемых также комбинацией кнопок Ctrl+Tab на манер всем пользователям Windows знакомой "Alt+Tab":


Об авторах и участниках

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление

дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

Автор: | ФуксЪ™
Корректор: | Татьяна Ромащенко (по совместительству - жОна Фукса)

Чем этот справочник отличается от аналогов, изданных на бумаге?

В свое время, бездарно угробив значительное время на потуги выцедить крупицы смысла из витиеватого словоблудия обычных учебников, я раз и на всегда махнул рукой на это малополезное занятие. Понять, что имел ввиду автор зачастую намного труднее, чем усвоить, собственно, предмет обучения методом научного тыка.

Такое положение дел неудивительно - им же платят за количество знакомест, а не за легкость усвоения :)

Впрочем, не отличающиеся словоблудием авторы, нередко впадают в другую крайность - слишком неполную подачу информации, тяжело воспринимаемую новичками, вынужденными слагать свои знания из разносортных клочков. Эта книга - попытка нащупать золотую середину. Я не получаю деньги за количество символов в этой книге, я не пишу обрывками, пропуская "и так понятные моменты", додумываться до которых новичкам ой как не просто. Опять же, вместивший 506 картинок бумажный учебник будет стоить сами понимаете во сколько раз дороже.

Надеюсь, этот учебник вам понравится легкостью изложения и удобством усвоения :)

Почему он распространяется бесплатно?

Ну, во-первых я не платил за лицензию DreamWeaver. Поэтому хотеть денег как-то не логично. Вместо этого, я бы хотел попросить тебя, читатель, не полениться ответить на, возможно, рано или поздно в будущем задаваемые вам вопросы, по этой, или любой другой тебе знакомой теме, какими бы ламерскими эти вопросы не показались. Вспомнив, что многим вещам учатся только на вопросах, задаваемым уже разобравшимся в этом, вспомнив, что кто-то когда-то проявил достаточно терпения и помог тебе изучить что-то новое - просто ответь. Можешь считать это своего рода ответной услугой миру :) Если каждый кинет по лопате - глядишь мы и сумеем общими услиями дать русскоязычным обитателям Совка и ближнего Присовковья те знания, которые рано или поздно вынесут наш поредевший на мозги народец на качественно лучший уровень.

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

Для любопытных.

На изучение DreamWeaver`а в достаточной степени, чтобы писать учебник по нему, у меня ушло примерно год. Хотя пользуюсь я им еще с момента выхода 3.0 версии года 4 тому назад.

Учебник начат еще прошлогодней весной, но из-за значительных бытовых трудностей, не располагающих к усидчивости, открытия сайта и многих других дел дописать его получилось только сейчас. Суммарно на его написание ушло порядка 165 часов. Это примерно 15-16 рабочих дней угробленного времени + куча терпения :0) В Киеве за это время я смог бы заработать в реале порядка 150-200 баксов, в Маааськве - порядка 500-700 :0)

Немного "Если":

Если же кому-нибудь придет в голову перевести это дело на америкосовый язык - самому мне просто лениво, я настоятельно прошу вас не брать за копию меньше 10 долларов - у них это стоит гораздо дороже. Можете даже со мной поделиться - помогу широко прорекламировать и распространить это дело. :)

Если вы хотите разместить учебник на своем сайте в виде одного файла - я, опять же, не возражаю. Единственное условие - сохранение его в неизменном виде. И, если можно, постарайтесь подсчитать количество скачиваний + дайте мне ссылку на то место, где он выложен. Это нужно для сбора статистики :)

Если вы имеете прилично написанный достаточно подробный учебник по какой-либо программе - я могу помочь вам распространить его на примерно таких же условиях как распространяется этот.

Появившиеся после прочтения вопросы можно задать на форуме нашего сайта в соответствующем разделе (DreamWeaver MX).

Пы.Сы.: Сайт сделан и поддерживается:

Comv | программирование ядра
Inferno | программирование сервисов и "примочек"
VoSi | программирование сервисов и правка ошибок вышеперечисленных товарищей
Dialer | программирование информеров и прочих примочек
SAiNT | Редактор раздела софта
Smash | Редактор раздела "уроки"
Stalker | Суровый админ :)
Булочка | Новости + корректировка самых вопиющих моих ачипяток :Ъ
ФуксЪ | Организатор всего этого безобразия
 | + все те кто так или иначе время от времени помогают сделать Рупор лучше :)

За что им огромадное спасибо :)

Подробнее о команде можно прочитать тут


Что такое DreamWeaver MX

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление

дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

DreamWeaver - это программа для облегчения написания HTML кода ("веб-страничек"). Как и многие другие программы визуального написания HTML, он изобилует мощными (и занимающими довольно много ресурсов на компьютере) средствами.

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

И, главное, вам не нужно от и до знать код или уметь писать его руками (хотя очень советую перед освоением DreamWeaver`a изучить и HTML).

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

DreamWeaver - это, на мой взгляд, лучшая программа для создания HTML, хотя, конечно, есть масса других программ, которые в чем-то подобны ей, но, как правило, очень сильно уступают по удобству, наглядности и простоте в освоении. Хотя бы потому, что Macromedia, разработавшая Дример, занимается его совершенствованием не один год. А большинство "альтернативных программ" - либо глючные скороспелки, либо надругательства над здравым смыслом, подобные MS FrontPage :)

Уже много лет содатели HTML делятся на два вида, это - "блокнотники" и "прогрессивные".

Кроме моего личного, по сему вопросу есть два основных мнения (и оба - неправильные):

- Настоящий "гуру" пишет только блокнотом!

Полнейшая чушь. Какой бы ни был профессионал, скоростью и качеством создаваемого он в 5-7 раз уступит чайнику, довольно посредственно знающему DreamWeaver или тот же HomeSite. Конечно, это не означает, что едва научившись тыкать пару кнопок, вы можете считать себя априори круче любого параноика-"блокнотника". Вовсе нет. Учиться DreamWeaver'у придется достаточно долго и кропотливо, особенно учитывая то, что без знания "тонкостей" верстки ваши сайты будут выходить громоздкими и медленными, будут криво отображаться в разных броузерах и т.п.

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

Много чего, достигаемого в DreamWeawer`e без малейших усилий, при попытке воспользоваться блокнотом растянется с минут на часы. Эту простую истину знать следует всем.

- DreamWeaver'ом можно сделать что угодно и как угодно, даже не зная HTML!
Тоже чушь. Да, многое в программе визуализировано и автоматизировано. Если скачать русификатор, все на русском и с кучей очевидных, интуитивно понятных моментов. Но HTML в чистом виде знать и понимать все равно надо. Причем знать если не профессионально, то хотя бы уметь понять какой кусок за что отвечает, понимать хотя бы приблизительно на что вы смотрите - на таблицу, выпадающее меню или JavaScript.

Правильная мысль:

Чем большими инструментами вы владеете, тем проще вам будет осваивать новые, причем вне зависимости от того, для чего эти программы предназначены. Тем проще точно, для себя персонально установить все нюансы и преимущества, что дает та или иная программа. Тем проще научиться использовать свое время наиболее эффективно. Не стоит ограничивать свое развитие блокнотом, или DreamWeaver'ом. Не стоит упираться рогом в очевидные при мало-мальски здравом размышлении факты.

Речь в нашем учебнике пойдет о DreamWeaverMX (так называемой 6-й версии). Почему не DW 2004? Потому что хоть эта версия и доступна уже почти полгода, но под нее до сих пор не выпущен путевый русификатор, а на английском языке изучать - себя не уважать :)

Да, при установке, для простоты понимания, на предложение выбрать вид (интерфейс DreamWeaver'а) нужно выбрать MX-ное оформление - вот такое:

На первый взгляд для тех, кто уже освоил или только осваивает DreamWeaver 4 или более ранние его версии, это довольно непривычно и даже вроде бы неудобно. Но если научиться использовать все преимущества этого интерфейса, то, при ближайшем рассмотрении, намного более удобнее прошлых решений.


Благодарности

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление

дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

Хочу выразить благодарность всем, кто помог распространить этот учебник:

nnm.ru

protoplex.ru

warnet.ru

vip-soft.ru

termit.org

icqnet.ru

erased.info

bat-yam1.dyndns.biz

П.С. Если вы написали про этот учебник - отправьте мне мыло (на foox@rupor.net) с указанием ссылки на то место, где это сделано и ваш домен будет тоже тут упомянут. А также и в других учебниках, готовящихся к выходу с персональным уведомлением вас по е-майл, когда они только будут выложены.

Просьба не давать прямой ссылки на этот учебник - это все равно не сработает.

Просьба, если вы скачали и разместили учебник на своем сервере - дать мне уведомление об этом и по возможности подсчитать количество скачиваний. Любопытно мне подсчитать сколько человек у нас в Рунете интересуются сайтостроением :)


Владельцам сайтов

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление

дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

Есть одна маааленькая просьбочка:

Не надо давать прямой линк на этот учебник - это все равно не сработает, давайте ссылку на ту страницу, с которой начинается скачивание учебника:

http://rupor.net/dw/

Для совсем ленивых вот готовый текст анонса:

<p>Учебник по <b><a href="http://rupor.net/dw/" target="_blank" title="Учебник DreamWeaver">DreamWeaver
MX</a> - </b>самый подробный на сегодня из написаных на русском
языке. Написанный простым, не перегруженным спец-терминами языком.
Он является продолжением цикла учебников, первым из которого
был &quot;<a href="http://rupor.net/html/" target="_blank" title="Учебник HTML"><b>HTML
для тех, кто в танке</b></a>&quot;. Распространяется совершенно
бесплатно :) Весит - 2 Мб <a href="http://rupor.net/dw/" title="Учебник DreamWeaver"><b>Скачать
&gt;&gt;</b></a></p></p>

Можно вносить произвольные коррективы на свое усмотрение - только ссылки не попутайте :)

Если вы хотите разместить учебник на своем сайте в виде одного файла - я, опять же, не возражаю, единственное условие - сохранение его в неизменном виде. И, если можно, постарайтесь подсчитать количество скачиваний + дайте мне ссылку на то место, где он выложен. Это нужно для сбора статистики :)

Если вы имеете прилично написанный достаточно подробный учебник по какой-либо программе - я могу помочь вам распространить его на примерно таких же условиях как распространяется этот.


Русификатор

* Этот справочник распространяется бесплатно благодаря sovhoz.ru

^ оглавление

дальше >>
Web-дизайн: Уроки HTML
DreamWeaver
Flash
GifAnimator
ImageReady
Есть нюанс!

2D-графика:
PhotoShop
CorelDraw
FreeHand
Ручки

3D-графика:
3D Studio Max
Maya
Есть Нюанс!

Хостинг:
cPanel
WHM
Движки(CMS)
Есть Нюанс!

Общение:
 ICQ
О чатах
LiveJournal

Этот учебник написан по русифицированной версии программы, и, во избежание разночтений, рекомендую использовать такой же русификатор - во всяком случае, на тот период, когда этот учебник был начат, это был наименее косячный перевод, хоть и не 100%, но близко к тому. Ну а для нищих финансами, но сильных ухом :))) впрочем что я.. вы про ЭТО и так знаете