12 лет назад 10 марта 2007 в 2:20 73

С широко раскрытыми глазами

Автор: Наталья Сергеева

Вам скажут: “нужно нырнуть глубоко в html, чтобы создать свою страничку”. не верьте. вам даже легкого погружения в этот язык не потребуется. вам скажут: “делайте сайт обязательно в кодовом редакторе”. не верьте. пусть программеры долбят свои клавиши. вам скажут: “нужно прочесть манускрипт, чтоб использовать wysiwyg-редактор”. не верьте. просто раскройте пошире глаза в этой программе.

Идея создания странички подвалила ко мне в новогоднюю ночь. А почему бы и нет? Впереди 10 дней вынужденного безделья, не сидеть же на диване перед телевизором? Зачем мне эта страничка? А чтоб выкладывать всякую инфу, вроде фоторепортажей, а не рассылать ее на 20 адресов. Ну, и историю накапливать – потом детям и внукам покажу. Что за страничку буду создавать? Есть у меня классный виртуальный персонаж – Синяя Мымра, вот ей-то и сделаю веб-представительство.

Я точно знала, что не буду пользоваться конструкторами сайтов типа boom’овских. Не только потому, что сайты при этом получаются, как близнецы-братья, но и потому, что близнецы эти похожи на уродцев из кунсткамеры. То, что кодера из меня не получится, я тоже знала. Мои познания в HTML не пошли дальше форматирования текста, вставки объектов и рисования таблиц. Нет, ну скачать буржуйский сайт через Offline Explorer, засунуть его в HomeSite или Front Page и немного переделать – это мы запросто. А вот чтобы самой, да с нуля создать сайт – такого я еще не делала.

То, что редактор я возьму визуальный, не вызывало сомнения, но не Front Page – это точно. Даже простейшие поделки в этом редакторе получались в несколько раз тяжелее созданных в том же HomeSite. Чего только не вставлял в код странички Front Page – и фонты, и пробелы, и стили какие-то, а в результате даже текстовая страничка становилась неподъемной.

ПОЧЕМУ DREAMWEAVER?

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

Досталась мне восьмая, свежайшая версия Dreamweaver, да еще и русифицированная (спасибо умельцам!). Запустила я ее в режиме дизайнера – все отлично. И тут бы начать работать с программой, как обычно я делаю – пробовать что-то создать, при необходимости заглядывая в Help. Так нет же, обуяли меня сомнения в дизайнерской профпригодности, и пошла я искать туториалы к Dreamweaver. Нашлись такие, и даже толстая книжка по работе с Dreamweaver 8 подвернулась под руку. Вот ее я и стала читать.

У одного из издательств есть серия компьютерных пособий “Idiot’s Guide” – так там, по крайней мере, хоть надпись откровенная. А у меня создалось впечатление, что все прочитанные мною пособия по веб-дизайну относятся к этой серии – не учат работать с программами, а только засоряют мозги и зомбируют.

В упомянутой книжке про Dreamweaver 8 на первых полутора сотнях страниц меня грузили принципами работы интернета и понятиями www, основами HTML и первичной настройкой Dreamweaver, примерами создания текстовых страничек с форматированием и вставкой в них таблиц и картинок. В итоге аж на 160-й странице мануала я нарисовала простейшую страничку по типу “Привет! Это я, и тут вы найдете…”. Хорошее чтиво для новогодних каникул, получше любовных романов, знания освежает… Но только снилось оно мне? Все это я могла бы за несколько минут сделать в Word, потом сохранить в HTML.

С этого момента я перестала читать туториалы, просто запустила Dreamweaver, разула глаза. Открыла страничку наобум и поиздевалась над ней как смогла. Первое впечатление – да у этого редактора все под рукой! В буквальном смысле. И сделать здесь можно что угодно, если при этом представлять, ЧТО ты хочешь сделать, а как – дело техники.

Одно из подручных средств – “Редактор свойств” внизу экрана. В нем можно настроить параметры любого фрагмента страницы, активного в данный момент. Щелкнул, к примеру, по картинке – и меняй все, что к ней относится: размеры, ссылку, выравнивание, границы и т. д. Тут же легкое редактирование: обрезка, яркость, контраст. Для нормальной правки – кнопки оптимизации и передачи в FireWorks – графический редактор Macromedia. Этот редактор я еще не удосужилась установить, так что в качестве внешних программ использовала имеющиеся – PhotoImpact и Photoshop.

В этом же нижнем окне имеется кнопка для вызова еще одного редактора, который называется “Быстрый редактор тэгов” и тоже является контекстным. Кстати, текущие тэги выводятся в строке чуть выше “Редактора свойств”, и если щелкнуть по одному из них, выделяется область странички, относящаяся к этому тэгу. Щелкнул, например, по <Body> – все Body и подсветится. А по меню правой кнопки мыши для каждого тэга выводятся все доступные в данный момент команды, в том числе и вызов “Быстрого редактора тэгов”.

Я признавалась, что не особо в тэгах волоку, так что находкой и настоящим подарком к “свинскому” году для меня стало полное руководство по языку HTML от издательства O’Relly, обнаруженное в составе программы. Одно из лучших руководств, заметьте! Правда, на английском. Курсор, скажем, на фрейм, Shift+F1 – и полная справка с примерами по тэгу Frameset и его атрибутам!

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

Фреймовый дизайн

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

Процесс создания такой: в Dreamweaver создаем новую страничку, просто рисуем набор фреймов и сохраняем его как default.html. Каждый фрейм тоже сохраняем под своими именами. При открытии в браузере (default.html) все будет выглядеть как несколько страничек, загруженных в разные окна. По ссылкам из навигационного фрейма в главный фрейм будут подгружаться странички, которые мы, естественно, сделаем заранее. И подгружаться они будут быстро, раз содержимое всех остальных фреймов не изменяется. Еще один плюс – беспроблемное внесение изменений. Нужно добавить пункт в меню или изменить заголовок – просто меняем содержимое фреймов, и не нужно открывать для редактирования все страницы сайта (а если их будет сотня?).

Чем рисуем фреймы? В главной панели “Макеты” есть кнопка “Фреймы” с раскрывающимся списком вида фреймов (нижний, верхний, левый, правый и варианты с их так называемыми угнездениями). Это проще, чем на асфальте мелом рисовать, поскольку линии можно перемещать как угодно.

Потом заполняем все фреймы содержимым (пишем там всякую чушь, как у меня) и задаем настройки фреймам. Для выделения фреймов можно щелкать по их границам, но лучше пользоваться менеджером фреймов в правой части экрана – он так и называется “Фреймы”. Как вы все будете настраивать – какие стили задавать, какие цвета для рамок и т. д. – дело вкуса. И, кстати, рамки фреймов делать видимыми в браузере, говорят, тоже дурной вкус. Но я их вывела – без рамок некрасиво. А что касается видимости рамок в самом Dreamweaver, так ее включать придется каждый раз при открытии фреймовой страницы – не запоминает программа эту настройку, хоть убей.

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

Вот и все – осталось полюбоваться на свое фреймовое творение в браузере. В MSIE – по кнопке F12, другие – выбрать из списка, который, что не плохо, редактируется.

Табличный дизайн

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

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

А править, получается, придется мне каждую из этих страниц, если вдруг вздумается что-то изменить глобально – скажем, добавить новый пункт в навигации? Сейчас у меня страниц раз, два – и обчелся, а если их станет много? Потом я вспомнила о том, как медленно обрабатывает табличные сайты MSIE – значит, многочисленные наездники этого браузера будут сильно ругаться в ожидании полной загрузки моего табличного чуда. В топку этот дизайн!

Контейнерный дизайн

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

Переключилась в стандартный вид Макета, нажала кнопку “Вставить тэг DIV” – он и вставился. И так со всеми остальными. Потом в эти блоки-контейнеры загнала данные, как в фреймы, и привязала стили оформления.

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

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

Получился шедевр дизайнерского искусства – здесь и таблицы, и фреймы, и разного вида контейнеры, и слои, и стили CSS, и даже небольшие веб-сценарии. “Ага, все это хорошо, только вид у твоих страниц какой-то отстойный – ни кнопочек, ни прибамбасиков”, – сказали домашние. Как ведро холодной воды на голову! А ведь действительно, то, что я сделала – только скелет странички. Что теперь, брать уроки Photoshop и учиться создавать “одежку” для сайта?

COFFEECUP VISUAL SITE DESIGNER 5.5

А может, ну их, эти серьезные редакторы? Не собираюсь же я зарабатывать деньги на разработке веб-узлов, так к чему глубоко так въезжать в веб-дизайн? Может, взять что попроще, лишь бы красивые странички получались? Вон Visual Site Designer по описанию настолько прост, что даже престарелые бабки и детки могут творить в нем странички, понятия не имея о каких-то кодах и разметках.

Открыла я этот редактор – действительно просто. Лепишь на страницу разные объекты и картинки, вставляешь, где нужно, текстовые области. Потом тут же на все это цепляешь ссылки, надписи и стили – в общем, раскрашиваешь, и страничка готова. И никаких тебе упоминаний про всякие фреймы и контейнеры! Кстати, именно в контейнеры, причем в свободные, заключает Visual Site Designer все нашлепки на страницу – это я увидела, заглянув из любопытства в код странички. Через Блокнот заглянула – у этого дизайнера нет режима для кодера, кодеры тут не живут.

То, что у меня получилось в этом редакторе, я даже показывать не буду – пестро-наляпистое уродство без всякого вкуса. “Эту страничку я сделала за 30 минут в Visual Site Designer. Если понравилось, сделаю такую же и вам за 100 рублей” – можно смело вешать объявление в Сети.

Гораздо лучше у меня получилось с шаблонами, которых к редактору прилагается штук 50, и среди них есть классические, для бизнеса и персоналок. Вот из последнего раздела я и выбрала для своей странички нечто малиново-синее с претензией на фееричность. Создала Homepage на основе выбранного шаблона и очень обрадовалась, что шаблон этот содержит не одну единственную начальную страничку, из которой можно сделать все остальные, а целый сайт! Все странички уже сверстаны, остается их слегка изменить и добавить при необходимости другие. Делается это очень просто – в окошке-мастере Page window нужно изменить Page ID чем-то другим, что и будет именем новой странички.

Дальше дело техники и вкуса. Я заполнила странички на скорую руку, и то получилось довольно сносно – получше моей фреймовой странички. Потом как-нибудь я поиграюсь с фотками в графических редакторах, наложу на них всякие фильтры и маски, чтобы Мымра и впрямь была Синяя. Ну а пока и так сойдет – для почина.

ШАБЛОНЫ

После работы в CoffeeCup Visual Site Designer я окончательно поняла, что главное при создании сайта – красивый дизайн. То есть можно сколь угодно глубоко продвинуться в технологиях сайтостроения, а без хорошего шаблона с классной графикой, стильным оформлением и флэш-анимацией грош цена будет сайту. Хорошо тем, у кого есть фантазия – они могут сами рисовать себе сайты в графических редакторах. Остальным остается пользоваться чужими наработками.

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

Шаблон от Zymic – PSD Header File + HTML + Fonts

Беру для пробы один из шаблонов от Zymic (www.zymic.com). Имеется готовая страничка Index.html и к ней картинки в отдельной папке. Для изменения заголовка страницы прилагается PSD Photoshop Template – header.psd.

Подправить этот заголовок в Photoshop CS2 было совсем не трудно – просто ищешь нужный слой и меняешь там текст. Я даже скопировала слой с заголовком, развернула его и сделала вариант на русском – чтобы всем было понятно, что за сайт. Потом сохранила все в header.jpg и заменила им исходный файл.

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

Дальше я просто открыла шаблон в Dreamweaver и отредактировала его. Одно осталось на страничке неизмененным – copyright. Можно, в принципе, замазать эту надпись в Photoshop, если совесть позволит, или заплатить автору $5, чтобы он предоставил возможность редактирования. Моя совесть это сделать не позволила, а деньги – как я их переведу за бугор? Пусть себе светится design by zymic – это ведь его дизайн на самом деле.

При редактировании шаблона в Dreamweaver я столкнулась с единственной трудностью – как подгрузить в центральное окно страницу с другим именем, а не home.html? Я облазила весь редактор состояния и просмотрела код странички, но только с помощью быстрого редактора тэгов смогла это сделать. Нужно кликнуть правой кнопкой на тэге iframe и заменить одно имя страницы на другое.

“Круто! Сама это сляпала?” – отзыв домашних. Раз так, идем страничку вешать в интернет.

ХОСТИНГ

Сначала я хотела подойти серьезно к вопросу хостинга и даже нашла несколько руководств на эту тему. Потом подумала, а так ли важно это для меня? Ну, разрастется мой сайт, не будет устраивать хостинг – сменю, да и все. Так что я просмотрела таблицу-список серверов (internethosting.ru/hosting/personal), предоставляющих персональный бесплатный хостинг, выбрала русские, а из них те, что поменьше грузят рекламой, а сервисов дают побольше, и пошла регистрироваться. Моим виртуальным домом стал сервер www.HUT.ru, естественно, лучший бесплатный хостинг в Сети – все они по рекламе один круче другого.

Просто ответ на запрос пришел от этого хостера первым, и Мымра получила адрес mymra.hut2.ru. В инструкции мне рассказали, куда на сервере нужно складывать статичные файлы, а куда скрипты, и чем их можно туда загрузить. Вам это тоже расскажут, так что я этот момент пропускаю. Замечу только, что мне пригодился тут FlashFXP, но и Total Commander справлялся с загрузкой отменно.

Торжественный момент – все файлы на сервере, я набираю в адресной строке браузера mymra.hut2.ru – и вот он, сайт Синей Мымры! Но недолгой была моя радость – Firefox 2 напрочь отказался подгружать контент в центральное окно. Вот гад, локально это делал без проблем. Я бы подумала, что это проблемы бесплатного хостинга, если бы Opera 9 и MSIE 6 тоже творили подобное – нет, в этих браузерах все отображалось нормально. Как бы то ни было, а мне придется переделать сайт, чтобы не ругались “лисоводы” при виде пустого окна.

Шаблон от TemplatesBox – PSD + HTML + Fonts + Css

Я выбрала другой шаблон, порывшись на www.templatesbox.com. Шаблон не особо оригинальный, просто прикольный и по тематике подходит. К этому шаблону, в отличие от Zymic, прилагался PSD-файл всего сайта, а не только заголовка, и в дополнение таблица стилей.

Со знанием дела открываю шаблон PSD в Photoshop CS2, изменяю все, что должно быть на страничке картинками, и сохраняю для веба (Save for Web). Шаблон PSD уже нарезан автором (так было почти во всех шаблонах), и после сохранения я получаю страничку HTML + картинки к ней в отдельной папке.

Кстати, один из отобранных мною шаблонов оказался “недорезанным” PSD, так что у меня была возможность самой порезать его на кусочки. Я просто выбрала в ImageReady CS2 инструмент Slice Tool и с его помощью создала отдельные области-spacer.

Ну, а в шаблоне TemplatesBox я отредактировала английский текст, заменив его своим собственным, русским. Картинки же к нему заменила теми, что получились после моего преобразования PSD в HTML. Сделала я это в Microsoft Expression Web.

MICROSOFT EXPRESSION WEB

Я искала в Сети свежую версию FrontPage, но оказалось, что такой программы больше нет, а на замену ей пришел Expression Web. Говорят, этой новинкой Microsoft собралась переплюнуть Adobe с ее Dreamweaver. Меня это мало волновало, но взглянуть на новинку было интересно – удобно ли работать в редакторе простому смертному?

Удобно. Я сделала здесь то же самое, что и в Dreamweaver – те же фреймы, таблицы и контейнеры. Ушло на это времени намного меньше, поскольку я уже была “ученая”. Понравился мне набор панелей создания и редактирования стилей – как встроенных, так и внешних. Поиграла с динамическими шаблонами (Dynamic Web Templates). Отличнейшая вещь! Стоит один раз настроить свои стили, кнопки и графику, сохранить страницу с этими настройками как шаблон – и потом его можно применить к любой другой странице и даже к выбранной группе страниц. Изменения, сделанные в этом шаблоне, автоматом применяются ко всем таким страницам!

Есть в составе Expression Web и обычные шаблоны. Простенькие такие, непритязательные, впрочем, у Dreamweaver они тоже не блещут красотой. Но что хорошо, как и в CoffeeCup Visual Site Designer, шаблоны Expression Web содержат вложенные страницы. То есть это шаблоны целых сайтов.

Легко поддаются редактированию и “чужие” шаблоны, скачанные из Сети. И я последнюю свою Синюю Мымру верстала именно здесь. К сожалению, не было тут под рукой такого удобного средства, как “Редактор свойств” Dreamweaver, так что мне приходилось постоянно рыскать по меню и панелям в поисках нужного инструмента. Но было так, наверное, с непривычки. Зато в редакторе от Microsoft проверяется орфография, значит странички, сделанные здесь, не будут содержать ошибок. Правда, словарь для этой проверки подключился по умолчанию какой-то странный. Нормальные слова подсветились как ошибки, а для замены предлагались их украинские варианты: “були” вместо “были”, “iще” вместо “еще”. Меня это все позабавило, но до выяснения причин происходящего Spelling пришлось отключить.

Насчет избыточности кода, которым страдал предшественник Expression Web – FrontPage, и которая, как говорят, сохранилась, так я ее, признаться, не заметила. Возможно, вылезает это на больших порталах, а не на таких мини-сайтах, как мой. Еще, по отзывам профи, Expression Web лучше других редакторов подходит как средство быстрой разработки веб-серверов или офлайн-каталогов. Но пока это не для меня.

Если бы я только сейчас приступила к созданию сайта, я бы начала с поиска хорошего шаблона – чтобы там был не только дизайн в PSD, но и верстка HTML + картинки, а еще прилагались шрифты и таблица стилей. С таким набором любой нормальный человек создаст себе сайт, не углубляясь в премудрости веб-технологий. Но шаблон – есть шаблон, и, клянусь Синей Мымрой, я когда-то нарисую свой дизайн в Photoshop. Пусть он будет не настолько хорош, как у великих мастеров, зато единственный и неповторимый.

Где взять бесплатные шаблоны

– www.comteche.com/data/templates/free_html/show_html/index.asp?catg=html – полтысячи шаблонов стандартных тематик

– myfreetemplatehome.com/free_tools/template.php – много платных, но есть и бесплатные

– www.freewebsitetemplates.com – много шаблонов, и тематик предостаточно

– www.webtemplates.ws/download/pafiledb.php?action=category&id=1 – небольшая, но довольно популярная коллекция шаблонов

– www.steves-templates.com/templates.html – штук сорок незатейливых шаблонов

– www.interspire.com/templates – тоже простые шаблоны, в самый раз для начинающих

– www.zymic.com/show_templates.php?id=1 – а эти хоть и простые, но высочайшего качества

– www.zymic.com/show_templates.php?id=2 – вторая часть таких же шаблонов

– andreasviklund.com/templates – шаблонов немного, но они хорошо проработаны

– www.oswd.org/designs/statistics – еще две коллекции шаблонов, больше полутора тысяч!

Тексты стали картинками!

Когда я открыла в визуальном редакторе Index.html, полученный после сохранения для веб в Photoshop шаблона TemplatesBox, собираясь отредактировать там текстовые поля, то сильно удивилась – текстовых полей в странице не было! Все тексты стали картинками, вставленными в ячейки таблицы! Я была полностью уверена, что контент при конвертации должен был тоже сохраниться, и уверенности мне добавляло то, что в исходном HTML-шаблоне присутствовал текст, и ссылки, и даже надписи на кнопках. И все это было оформлено один к одному, как в шаблоне PSD. Значит, я делаю что-то не так?

Я перерыла интернет в поисках ответа на этот вопрос – что же мне нужно сделать, чтобы “как положено” сконвертировать PSD в HTML. Оказалось, не одна я такая, и другие горе-дизайнеры тоже озадачены этой проблемой. Однако на форумах в ответ на подобные вопросы или невнятно мычат, или отпускают шуточки по поводу ламерства. Так что я не рискнула подать свой голос на форумах, а пошла читать руководство к Photoshop, после чего поняла, что режут PSD обычно в Adobe ImageReady, потом сохраняют в HTML+Images, естественно, без всякого контента. Потом уже в визуальном редакторе вставляют эти текстовые области, цепляют к ним стили и прочее, и все это называется версткой. Так что найденный готовый шаблон в HTML с картинками и стилями – это просто здорово, и большое спасибо его автору!

Чем визуальные редакторы лучше текстовых

WYSIWYG расшифровывается как What You See Is What You Get – что видишь, то и получаешь. Рисуешь страничку, как на листе бумаги, а редактор визуальный по ходу пишет код. Особых знаний технологий создания страниц при этом не требуется, но начальные все же приветствуются. А в текстовых редакторах работают профессиональные кодеры. Вот и пусть себе работают.

Как справиться с контейнерами?

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

Впервые при работе с Dreamweaver мне пришлось побыть в роли кодера, впрочем, ненадолго. Нужно было создать контейнер-разделитель между контейнером-заголовком и остальными блоками, чтобы они не сливались, а принудительно располагались на новой линии. Что это такое? Коротко говоря, разделитель представляет собой мини-контейнер, содержащий один неразрывный пробел. В стиле для этого контейнера нужно сделать только одну настройку – выставить both для параметра “Очистить”. Вот такую строку-разделитель я и вставила между контейнерами:

<div>&nbsp;</div>