Построение таблиц разметки автоматически
Мы только что создали новую ¥еЬ-страницу, где для размещения содержимого использовалась таблица разметки. И мы создали эту таблицу вручную. Для этого мы сначала нарисовали схему дизайна сайта на бумаге, а потом, при создании таблицы, сверялись с нарисованной схемой. И это оказалось совсем не сложно.
Недостатки способа создания таблиц разметки вручную
Нам помогло то, что схема дизайна нашего сайта очень проста. (Конечно, это не значит, что она плоха, примитивна, убога; очень и очень многие сайты в Сети построены по этой схеме.) В самом деле, в ней нет ничего сложного: всего четыре ячейки, минимальное количество слияний и полное отсутствие вложенных таблиц. Так что схема наша совершенно очевидна, "прозрачна", как еще говорят.
Но представьте себе, что вам нужно сделать что-то сложное. Это может быть главная страница новостного или музыкального сайта с множеством колонок, сложным заголовком, врезками и сносками. Также это может быть главная страница вполне тривиального сайта с необычным дизайном — такие частенько встречаются в Сети и удивляют привыкшего к простеньким таблицам разметки посетителя. Как сделать такое вручную?
Можно, конечно, во всех деталях расписать схему такого дизайна на бумаге, подробно нарисовать все вложенные таблицы и слитые ячейки. Но сколько времени это займет! Но даже если вы и создадите подобную таблицу разметки, ваши проблемы не исчезнут. А вдруг вам понадобится что-то сюда добавить? Неужели все перерисовывать заново?!
Вы видели, как работает дизайнер-полиграфист? Он не рисует на бумаге никаких — ни сверхпростых, ни сверхсложных — таблиц. В своей любимой программе настольного издательства он просто рисует на странице "рамку", куда будет помещен тот или иной фрагмент ее содержимого, после чего вставляет туда текст из буфера обмена 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.
Рис. 8.12. Диалоговое окно Grid Settings |
С помощью селектора цвета 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. Это будет ячейка основного содержания.
Рис. 8.15. Готовая ячейка основного содержания и таблица разметки |
Получившаяся таблица будет отображена в виде большого серого прямоугольника с зеленой рамкой, а ячейка — в виде меньшего белого прямоугольника с синей рамкой, расположенного внутри серого. Кроме того, Dreamweaver ненавязчиво покажет нам структуру результирующей таблицы HTML — если вы присмотритесь, то заметите тонкие белые линии — ячейки результирующей таблицы. Но ярко изображены будут только созданная вами ячейка разметки и таблица, в которой она находится.
Поместите курсор мыши где-либо внутри этой ячейки и щелкните. Граница этой ячейки будет подсвечена, а внутри ее появится текстовый курсор; это значит, что ячейка теперь выделена, и вы можете набирать в ней текст, размещать графические изображения, таблицы и все остальное, чем богат HTML.
Теперь поместите курсор мыши на границе этой ячейки так, чтобы она (граница) стала красной, и опять щелкните. Ячейка будет выделена, и на ее границе появятся девять маркеров изменения размера (рис. 8.16). Пользуясь этими маркерами, вы можете изменять размеры ячейки, как вам захочется. Чтобы переместить ячейку в другое место, просто "захватите" ее мышью за границу и перетащите, куда нужно. Если же ячейку по каким-либо причинам нельзя перенести на это место или изменить ее размеры, Dreamweaver очень красиво вернет все на свои места. А если вы будете перетаскивать ячейку разметки, удерживая нажатой клавишу <Alt>, ячейка будет скопирована на новое место.
Рис. 8.16. Выделенная ячейка разметки |
Если ячейка, размеры которой вы изменяете, содержит в себе что-то, и это "что-то" занимает ее целиком, вы не сможете уменьшить ее размеры. Либо уменьшите размеры содержимого ячейки (подредактируйте текст или уменьшите размеры изображений), либо "перетасуйте" другие ячейки. Также можете попробовать увеличить саму таблицу и раздвинуть ячейки, чтобы освободить пространство. (О том, как работать с таблицами разметки, см. ниже.)
Заметьте, что при перетаскивании или изменении размеров ячейки ее граница будет "прилипать" к линиям сетки, если, конечно, вы включили режим "прилипания". Если вы хотите временно отключить этот режим, не забираясь в меню, просто во время перетаскивания или изменения размеров ячейки нажмите и удерживайте клавишу <А11>.
Чтобы удалить ненужную ячейку, выделите ее и нажмите клавишу <Ое1>.
Рис. 8.17. Четыре ячейки разметки (сетка временно отключена) |
Нарисуйте теперь еще три ячейки: заголовка, полосы навигации и сведений об авторских правах. Измените размеры уже созданной ячейки, если вам не будет хватать места внутри таблицы разметки. У вас должно получиться что - то, похожее на рис. 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.
Рис. 8.20. Готовая разметка страницы (сетка временно отключена) |
Примечание )
Dreamweaver добавляет к тегам <table>, определяющим таблицы разметки, специальные атрибуты, в частности атрибут мм: layoutgrocjp. Как видите, эти атрибуты можно опознать по приставке "мм:" (MacroMedia). Web-обозреватель обрабатывать их не будет — они нужны только самому Dreamweaver.