Заблудившийся в тагах, или Страшная Сказка про Macromedia Dreamweaver 3.0.

"... Во время написания этой статьи один придурок вырубил свет во всем доме. Отдельное спасибо тебе, придурок, после этого накрылся даже мой телефон. Еще спасибо фирме Macromedia, которая продукт сделала, и ребятам, которые его сперли. И еще большое спасибо антизависатору, который дружно повисал вместе с этим продуктом. ...."

Ты чуть-чуть понимаешь HTML? Не понимаешь вовсе? Ну и не надо. Дримувер будет писать код за тебя. По уровню его интерфейс походит на издательскую систему, но простому пользователю разобраться вполне реально. Если ты решил профессионально заняться WEB-дизайном, то Dreamweaver 3.0 не для тебя, профессионалы пишут вручную. И не надо на меня орать, что Дримувер сильно время экономит. Неправда! Я руками напишу быстрее и лучше.

Про базовую настройку паги

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

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

Про таблички

И пришел дед к золотой рыбке, и повяли уши его от рыбьего мата... Объекты на любой хорошо сделанной странице привязаны к таблице. Разные браузеры могут показать один и тот же документ десятью способами. Чтобы форматирование документа не сильно изменялось при смене браузера, используют таблицы.

Если HTML-редактор хорошо работает с таблицами, то, вероятно, его можно терпеть. Давай проверим Dreamweaver моим любимым тестом на спиральки. Нет, не на противозачаточные. На обычные. Чтобы построить табличку в виде спирали, мне понадобилось 10 минут, вручную я бы писал такую минут 20. Кстати, если ты считаешь себя крутым HTML-программистом, попробуй запрограммировать такую таблицу вручную. :)

Все очень просто и понятно. В правом меню Дримувера стандартные объекты, такие как таблицы, рисунки и пр. А в нижнем меню множество настроек выбранного объекта. Особенно мне нравится палитра. Ты можешь выбрать цвет из палитры, можешь взять цвет пипеткой с любого места рабочего стола. А если ни один не подходит, то можешь намешать любой цвет в RGB.

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

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

Про применение таблиц и про совместимость

После того, как дедка применил бабку, от него ушла даже Жучка... Старайся задавать все размеры в пикселях, а не в процентах, поскольку браузеры понимают проценты по-разному. Лучше задавать ширину таблицы жестко, а высоту не задавать вообще. Таблица, габариты которой не заданы, будет резиновой. Т.е. объекты будут растягивать ее границы. Если ты помещаешь рисунок в жесткую таблицу, то его габариты должны соответствовать габаритам ячейки. Иначе некоторые браузеры такой рисунок просто не будут выводить.

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

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

Про стандартные объекты чуть подробнее

По ГОСТу (Государственному Стандарту) расстояние между яичками не должно превышать две внучкины косички... С помощью вкладки "обычные" правого меню ты можешь быстро вставить стандартные объекты (хе-хе, Бивис, он сказал "вставить" - прим. Холода). После того как вставил картинку, можно использовать карту. Т.е. на разные области одной картинки, которые ты выделишь, можно сделать разные ссылки. Это еще один способ сделать графическую навигацию. И не надо мучиться с составными рисунками. Только имей в виду: карты не поддерживаются ранними версиями браузеров. Здесь же есть ссылка на почтовый ящик. Кроме картинок есть возможность внедрения в документ Java аплеттов, музыки и видео из внешних файлов.

Ну и, конечно, не обошлось без всевозможных анкет, кнопок и форм. Чтобы работали эти таги, нужно снабдить их джава скриптами. А вот с этим сложности. У Дримувера есть несколько стандартных, но чтобы они нормально заработали, придется все равно их править вручную. Ну и пусть! В моем браузере поддержка Java Script вообще отключена в целях безопасности.

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

Про примочки

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

После того как твой сайт создан, его нужно загрузить на сервер. Для этого подойдет примочка "Site" - удобный менеджер файлов, совмещенный с клиентом FTP. Например, ты можешь обновлять содержимое сайта на сервере. Это значит, что Дримувер заменит только обновленные файлы вместо того, чтобы заливать весь сервак заново. А главное, эта примочка умеет проверять правильность ссылок, которыми увязаны твои документы.

Не было забот - купила баба порося!

Dreamweaver разработан специально для тех, кто любит удобные программы с массой настроек. Для тех, у кого есть башка, но нет времени на познание тонкостей HTML программирования. А если совмещать его с другими программами типа HomeSite, то некоторые его функции помогут и профессионалу. Вот тебе, перец, краткий словарик английских терминов, чтобы помочь тебе быстро сориентироваться.

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

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

Background - фоновый рисунок размножается на весь экран. Собственный фоновый рисунок может иметь каждая ячейка таблицы.

Border - бордюр.

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

Cell - клетка таблицы.

Column - колонка.

Frame - фрэйм, рамка.

Horizontal rule - горизонтальная линия заданной толщины, которой отделяют смысловые части страницы.

Image - рисунок в формате GIF или JPG, который может выводить браузер. Есть возможность изменять его размеры, но лучше выводить в натуральную величину.

Line Break - принудительный переход строки.

Link - ссылка на другой сайт или документ.

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

Merge - разделить, отделитель, граница.

Table - таблица.

Tag - команда, которая характеризует объект HTML и его свойства.

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

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

Space - пространство, например, между ячейками.

Split - слить, соединить. Обычно применяется к ячейкам.

Weight - ширина; если этот параметр не задан, то таблица ведет себя как резиновая. Задавать этот параметр лучше в пикселях, а не в процентах.

И возлюбил дед внучку на худой конец!

Ну, вот, пельмень, тебе и Юрьев день. Такая программулина от Макромедиа очень сильно должна облегчить тебе жизнь. Поставь, попробуй - тебе наверняка понравится!