Macromedia Dreamweaver MX

Построение таблиц разметки автоматически

Мы только что создали новую ¥еЬ-страницу, где для размещения содержи­мого использовалась таблица разметки. И мы создали эту таблицу вручную. Для этого мы сначала нарисовали схему дизайна сайта на бумаге, а потом, при создании таблицы, сверялись с нарисованной схемой. И это оказалось совсем не сложно.

Недостатки способа создания таблиц разметки вручную

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

Но представьте себе, что вам нужно сделать что-то сложное. Это может быть главная страница новостного или музыкального сайта с множеством колонок, сложным заголовком, врезками и сносками. Также это может быть главная страница вполне тривиального сайта с необычным дизайном — та­кие частенько встречаются в Сети и удивляют привыкшего к простеньким таблицам разметки посетителя. Как сделать такое вручную?

Можно, конечно, во всех деталях расписать схему такого дизайна на бумаге, подробно нарисовать все вложенные таблицы и слитые ячейки. Но сколько времени это займет! Но даже если вы и создадите подобную таблицу раз­метки, ваши проблемы не исчезнут. А вдруг вам понадобится что-то сюда добавить? Неужели все перерисовывать заново?!

Вы видели, как работает дизайнер-полиграфист? Он не рисует на бумаге никаких — ни сверхпростых, ни сверхсложных — таблиц. В своей любимой программе настольного издательства он просто рисует на странице "рамку", куда будет помещен тот или иной фрагмент ее содержимого, после чего вставляет туда текст из буфера обмена Windows, текстового файла или на­бирает его вручную. Если фрагмент слишком велик и не вмещает содержи­мого, он изменяет размеры рамки и, если нужно, переносит ее на следую­щую страницу. А если ему необходимо что-то добавить или удалить, ему надо всего лишь сделать несколько движений мышью.

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

Что? Неужели можем?..

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

Да, можем!

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

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

Но как все-таки перейти в режим разметки? И как им пользоваться?

Очень просто.

Давайте создадим новый вариант начальной страницы нашего нового сайта. Но, прежде всего, переименуйте файл default. htm сайта Sample site 3 (соз­данная нами ранее страница), скажем, в default_old. htm. Потом откройте эту страницу в окне документа. Мы будем часто копировать с нее фрагменты содержимого в новую страницу, поэтому лучше держать ее открытой.

Далее создайте в панели Site новую страницу default. htm, проверьте, являет­ся ли она главной страницей, и откройте ее в окне документа. Это и будет новая главная страница нашего сайта.

Чтобы переключиться в режим разметки страницы, нажмите кнопку Layout View, расположенную на вкладке Layout панели объектов. Слева от нее на­ходится кнопка Standard View, позволяющая переключиться в обычный ре­жим отображения страницы. Обе эти кнопки показаны на рис. 8.10. Вы также можете выбрать в подменю Table View меню View пункт Layout View или нажать комбинацию клавиш <Ctrl>+<F6>. Для обратного переключе­ния выберите пункт Standard View в том же подменю или нажмите комби­нацию ioiaBiim<Ctii>+<Shift>+<F6>.

[ Standard View Layout View Рис. 8.10. Кнопки Standard View и Layout View панели объектов

В любом случае после этого Dreamweaver выдаст объемистое предупрежде­ние, описывающее, что вы можете делать в режиме разметки. Прочитайте его, если хотите, и закройте, нажав кнопку Done. Если вы не хотите, чтобы Dreamweaver выдавал это предупреждение в дальнейшем, перед закрытием его включите флажок Don't show me this message again. Автор рекомендует вам так и сделать.

Теперь самое время включить отображение измерительных линеек. Это на­стоящие линейки, проградуированные в одной из единиц измерения и ото­бражаемые вдоль границ окна документа. Они позволят вам в дальнейшем более точно позиционировать фрагменты содержимого страницы. Чтобы увидеть их, включите в подменю Rulers меню View пункт-выключатель Show или нажмите комбинацию клавиш <Ctrl>+<Alt>+<R>. Чтобы убрать ли­нейки, отключите этот пункт. Пункты-переключатели Pixels (пикселы), Inches (дюймы) и Centimeters (сантиметры) того же подменю Rulers меню View позволят вам задать нужную единицу измерения.

Теперь обратите внимание на сами линейки. В месте их пересечения в ле­вом верхнем углу находится точка начала отсчета, "ноль" системы коорди­нат, иначе говоря, точка с координатами (0, 0) (см. рис. 8.11). По умолча­нию она находится именно там — в левом верхнем углу. Но вы можете пе­реместить ее в любое другое место; для этого достаточно "захватить" ее мы­шью и перетащить куда надо. Как только вы отпустите кнопку мыши, шка­лы на линейках изменятся и станут отсчитывать все координаты от вновь заданного "нуля". Иногда это бывает полезно. А чтобы вернуть начало коор­динат на свое законное место — в левый верхний угол окна, выберите пункт Reset Origin подменю Rulers меню View.

ЕЕ

Рис. 8.11. Точка начала отсчета в месте пересечения измерительных линеек

Еще одно средство помочь вам разместить фрагменты содержимого в нуж­ном месте — координатная сетка. Чтобы отобразить ее, включите пункт - выключатель Show Grid подменю Grid меню View или нажмите комбинацию клавиш <Ctrl>+<Alt>+<G>. Чтобы убрать сетку, отключите этот пункт.

Можно сделать так, чтобы фрагменты содержимого, рисуемые мышью, "прилипали" к линиям сетки. Это поможет вам более точно позициониро­вать их по делениям шкал. Чтобы включить "прилипание", включите пункт Snap То Grid подменю Grid меню View или нажмите комбинацию клавиш <Ctrl>+<Alt>+<Shift>+<G>.

Если вас не устраивает шаг координатной сетки, вы можете его изменить. Для этого выберите пункт Grid Settings подменю Grid меню View. На экране появится диалоговое окно Grid Settings, показанное на рис. 8.12.

С помощью селектора цвета Color задается цвет линий сетки.

Флажок Show Grid включает или отключает показ сетки. Он аналогичен пункту Show Grid подменю Grid меню View.

Флажок Snap to Grid включает или отключает "прилипание" фрагментов со­держания к линиям сетки. Он аналогичен пункту Snap to Grid подменю Grid меню View.

Поле ввода Spacing задает шаг линий сетки, то, что нам больше всего нуж­но. Раскрывающийся список, расположенный справа от него, задает едини­цу измерения: Pixels (пикселы), Inches (дюймы) или Centimeters (сантимет­ры). Задайте шаг сетки равным одному сантиметру — привычную для нас единицу измерения. Хотя в Web-дизайне чаще используются пикселы, сан­тиметры будут вам привычнее на первых порах.

Группа переключателей Display задает вид линий сетки. Переключатель Lines делает их такими, какие вы видите сейчас — сплошными линиями. Это поведение Dreamweaver по умолчанию. Переключатель Dots включает отображение точечных линий; в таком виде они меньше отвлекают внима­ние, однако хуже видны на экране.

Закончив настройку сетки, нажмите кнопку ОК для сохранения заданных установок или Cancel — для отказа от них. Вы можете также нажать кнопку Apply, чтобы применить заданные установки без закрытия диалогового окна Grid Settings.

Внешний вид окна документа в режиме разметки с включенными линейка­ми и координатной сеткой с шагом в один сантиметр показан на рис. 8.13.

Задайте параметры этой страницы как у предыдущей (default_old. htm). Те­перь можно приступать к работе над разметкой.

Таблицы и ячейки разметки

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

Как уже говорилось, в режиме разметки вы можете просто мышью на стра­нице рисовать "рамки", в которых будут размещаться фрагменты содержи­мого вашей страницы. Dreamweaver превратит эти "рамки" в ячейки таблиц, которые сам же сформирует. Вы можете размещать такие "рамки" где угодно на странице; единственное условие — они не должны перекрывать друг дру­га. Ячейки, где размещаются фрагменты содержимого страницы, называют­ся ячейками разметки по аналогии с таблицами разметки.

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

Сейчас мы узнаем, как ячейки и таблицы разметки размещаются на страни­це. Рассмотрим это на примере новой начальной страницы нашего сайта. В общем ее схема не будет отличаться от схемы предыдущей страницы. Но, чтобы усложнить работу Dreamweaver, давайте добавим колонку новостей. Она будет располагаться справа от основного содержимого (см. рис. 8.5). В верхней части колонки новостей мы поместим ее заголовок, а в ниж­ней — ссылку на страницу архива новостей.

Но с чего начать? С создания самой таблицы разметки? Или сразу же начи­нать делать ячейки разметки? В принципе, вы можете сразу же начинать с ячеек — Dreamweaver сам создаст необходимую таблицу разметки. А вы уже потом зададите ее параметры.

Посмотрите на вкладку Layout панели объектов. Там расположены две кнопки: кнопка Draw Layout Cell позволит вам поместить на страницу ячейку разметки, а кнопка Draw Layout Table — таблицу разметки. Эти кнопки показаны на рис. 8.14.

Рис. 8.14. Кнопки Draw Layout Table (слева) и Draw Layout Cell (справа) панели объектов

Нажмите кнопку Draw Layout Cell и переместите курсор мыши в окно до­кумента. Он примет форму крестика. Это значит, что теперь вы можете на­рисовать на странице новую ячейку разметки. Поставьте курсор мыши в то место, где будет угол вашей ячейки, нажмите левую кнопку и, не отпуская ее, протащите мышь в точку, где будет другой, противоположный угол ячейки, после чего отпустите кнопку. Dreamweaver сформирует таблицу разметки и находящуюся в ней ячейку.

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

Получившаяся таблица будет отображена в виде большого серого прямо­угольника с зеленой рамкой, а ячейка — в виде меньшего белого прямо­угольника с синей рамкой, расположенного внутри серого. Кроме того, Dreamweaver ненавязчиво покажет нам структуру результирующей таблицы HTML — если вы присмотритесь, то заметите тонкие белые линии — ячей­ки результирующей таблицы. Но ярко изображены будут только созданная вами ячейка разметки и таблица, в которой она находится.

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

Теперь поместите курсор мыши на границе этой ячейки так, чтобы она (граница) стала красной, и опять щелкните. Ячейка будет выделена, и на ее границе появятся девять маркеров изменения размера (рис. 8.16). Пользуясь этими маркерами, вы можете изменять размеры ячейки, как вам захочется. Чтобы переместить ячейку в другое место, просто "захватите" ее мышью за границу и перетащите, куда нужно. Если же ячейку по каким-либо причи­нам нельзя перенести на это место или изменить ее размеры, Dreamweaver очень красиво вернет все на свои места. А если вы будете перетаскивать ячейку разметки, удерживая нажатой клавишу <Alt>, ячейка будет скопиро­вана на новое место.

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

Заметьте, что при перетаскивании или изменении размеров ячейки ее гра­ница будет "прилипать" к линиям сетки, если, конечно, вы включили режим "прилипания". Если вы хотите временно отключить этот режим, не забира­ясь в меню, просто во время перетаскивания или изменения размеров ячей­ки нажмите и удерживайте клавишу <А11>.

Чтобы удалить ненужную ячейку, выделите ее и нажмите клавишу <Ое1>.

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

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

Создание таблицы разметки почти ничем не отличается от создания ячейки разметки за тем исключением, что щелкать нужно кнопку Draw Layout Table. Рисуется таблица так же, как ячейка. Существуют, правда, несколько правил, которым нужно следовать при размещении на странице новой таб­лицы разметки. Ниже они все перечислены.

1. Если нарисованная таблица находится внутри другой, то она становится вложенной; Dreamweaver сам сформирует необходимую ячейку во внеш­ней таблице.

2. Если же вы рисуете таблицу вокруг уже существующих ячеек разметки, они становятся частью новой таблицы.

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

4. Таблица разметки обязательно должна содержать ячейки, в которых бу­дет находиться содержимое страницы. Поместить содержимое прямо в таблице невозможно — это запрещают стандарты НТМЬ; создайте хотя бы одну ячейку, занимающую всю таблицу целиком.

( Примечание )

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

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

Layout Т able

Рис. 8.18. Заголовок таблицы

Вы можете отключить показ заголовков таблиц, если они вам мешают. Для этого достаточно отключить пункт-выключатель Show Layout Table Tabs подменю Table View меню View.

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

О Layout View

Ті 302 т і — ТО т

Рис. 8.19. Строка ширин

Может получиться так, что в строке ширин для какой-то ячейки будут ото­бражаться два значения ширины: одно в кавычках и другое в скобках. Обычно это случается, когда в слишком узкую ячейку помещают слишком широкое содержимое, и Dreamweaver бывает вынужден расширить эту ячей­ку. Первое значение обозначает реальную ширину ячейки, а второе — ши­рину, заданную для ячейки в HTML-коде. В этом случае лучше всего будет изменить ширину ячейки так, чтобы оба эти значения совпали. Как это проще всего сделать, мы рассмотрим ниже.

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

Нарисуйте на свободном месте таблицу разметки. Внутри нее создайте три ячейки:

□ верхняя — узкая, под заголовок колонки новостей;

□ центральная — самая большая, под собственно новости;

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

Примечание )

Dreamweaver добавляет к тегам <table>, определяющим таблицы разметки, специальные атрибуты, в частности атрибут мм: layoutgrocjp. Как видите, эти атрибуты можно опознать по приставке "мм:" (MacroMedia). Web-обозреватель обрабатывать их не будет — они нужны только самому Dreamweaver.