Учебник Macromedia Dreamweaver (стр. 62 из 135)
Также вы можете захотеть изменить вручную значения параметров таблиц, строк и ячеек, которые нельзя установить в режиме разметки. Это цвет рамки таблицы и ячейки, ее видимость или невидимость. Dreamweaver делает эти рамки невидимыми, что оправдано для таблиц и ячеек разметки. Но у вас могут быть другие планы.
Рис. 8.31. Готовая главная страница в обычном режиме отображения
Ну и, наконец, вы можете выполнить точную подгонку самой таблицы. Например, ради компактности HTML-кода можно объединить некоторые ячейки, образующие пустую строку (просвет). Конечно, в режиме разметки Dreamweaver почти всегда генерирует оптимальную результирующую таблицу. Почти, но не всегда.
Теперь вернемся к нашей странице. Внимательно осмотрите ее на предмет всевозможных огрехов. Автор нашел таковых целых три, хоть Dreamweaver и старался ему угодить.
1. Вложенная таблица колонки новостей занимает отведенную ей ячейку внешней таблицы не целиком.
2. Строку, образующую горизонтальный просвет между заголовком и нижними ячейками, можно объединить в одну ячейку. HTML-код станет несколько компактнее.
3. Dreamweaver влепил-таки в низ таблицы разметки лишнюю строку!
После того как мы выявили все огрехи, можно (и нужно) их исправить. Подстройте высоту вложенной таблицы, объедините ячейки строки просвета в одну и удалите лишние строки (если они есть). Переключитесь в режим отображения HTML-кода и посмотрите, все ли там гладко, — скорее всего, Dreamweaver создал еще несколько ненужных строк и ячеек; удалите их. Результат показан на рис. 8.32.
Рис. 8.32. Готовая страница после внесения всех исправлений
Внимание!
При правке таблиц разметки в обычном режиме специальные атрибуты, добавляемые к тегам <TABLE> Dreamweaver, могут потеряться. Это значит, что в дальнейшем с такими таблицами возможны проблемы, если вы снова захотите редактировать их в режиме разметки страниц.
Как видите, даже "интеллектуальный" Dreamweaver припасет для вас немного ручной работы. Правда, это, в основном, тонкая оптимизация, "вылизывание", без которой, в крайнем случае, можно обойтись. Но лучше не обходиться, ведь маленькие "шероховатости" HTML-кода могут вырасти в дальнейшем в большие проблемы.
А для того, чтобы устранить эти "шероховатости", лучше переключиться в обычный режим. На наш взгляд, режим разметки подходит только для первоначальной и довольно грубой разработки дизайна. Поскольку вы уже работали в режиме разметки, то должны были заметить, как "норовист" Dreamweaver. Всю окончательную его доводку лучше производить в обычном режиме отображения страницы, когда он ведет себя более предсказуемо.
Ну вот, мы устранили последние огрехи. Казалось бы, теперь уж все действительно готово. Можно приступать к созданию остальных страниц сайта, взяв за основу главную страницу. Как это сделать?
1. Сохраните готовую главную страницу. Если вы хотите сделать небольшую передышку, то самое время.
2. Откройте главную страницу, если уже ее закрыли.
3. Сохраните ее под другим именем, например Projects.htm. Для этого выберите пункт Save As в меню File или нажмите комбинацию клавиш <Ctrl>+<Shift>+<S>.
4. Удалите все то, что не должно присутствовать на данной странице (в нашем примере это начальное содержимое — мы подставим вместо него список проектов). Создайте содержимое страницы проектов.
5. Закройте готовую страницу. Не забудьте сохранить ее при этом.
6. Повторите пункты 2—5 этого списка для всех страниц вашего сайта.
Неплохо придумано! Мы заимствуем общие элементы с другой страницы и создаем заново только ее содержимое. Это может сэкономить немало времени и убережет нас от множества ошибок, которые мы неизбежно сделаем, если начнем создавать каждую страницу сайта "с нуля". Это один из способов облегчить себе работу, за которые мы должны благодарить ленивых Web-дизайнеров.
Недостатки табличного дизайна
Осталось разбавить дегтем оставшийся мед.
Здесь мы поговорим о недостатках табличного дизайна. В основном, они происходят от недостатков самих таблиц; а недостатки таблиц мы перечислили в главе 5. И все-таки перечислим их еще раз. Но, кроме них, есть и недостатки самого способа построения Web-страниц с использованием таблиц, и мы их также рассмотрим.
Начнем с таблиц как основы табличного дизайна.
Недостатки таблиц
Как уже говорилось, недостатки таблиц были описаны в главе 5. Если вы их забыли, давайте вспомним: очень медленная загрузка и отображение и громоздкий, запутанный HTML-код. Рассмотрим их еще раз и уже в приложении к табличному дизайну. (О специфических недостатках, связанных с особенностями обработки HTML-кода отдельными программами Web-обозревателей, мы говорить не будем. Вы можете прочитать о них все в той же главе 5.)
Очень медленная загрузка — недостаток номер один для Web-страниц, созданных на основе таблиц разметки. В самом деле, если какая-то часть страницы долго не отображается, посетитель сайта может подождать. Но если заставляет себя ждать вся страница, это действует на нервы. Это справедливо для всех страниц, созданных на основе таблиц, и если страница достаточно сложна, а соединение с Интернетом медленное, посетитель может даже уйти с сайта, не дождавшись загрузки страницы. Это действительно серьезная проблема, и ее решению следует уделить внимание.
Какие же пути решения этой проблемы существуют?
В основном, это, конечно же, грамотная разработка и тщательная оптимизация таблицы разметки. Таблица разметки должна быть как можно более простой, по возможности не содержать ячеек и строк с относительными значениями ширины и высоты и минимальным количеством вложенных таблиц. Все эти рекомендации описаны в главе 5, и автор настоятельно вам советует прочитать их еще раз.
Насчет простоты. Когда таблица занимает всю страницу и вмещает в себя множество разнородных данных, которые должны быть расположены в разных ее ячейках, говорить о простоте неуместно. Таблица в любом случае получится очень сложной. Слегка упростить вы ее сможете за счет тонкой оптимизации HTML-кода, но именно слегка. Это один из недостатков табличного дизайна, который нельзя преодолеть.
Насчет относительных значений ширины и высоты. Таблица разметки, как правило, занимает всю ширину Web-страницы, а значит, без относительного значения этой самой ширины не обойтись. Конечно, иногда таблицы разметки имеют фиксированную ширину, но в этом случае используется не вся полезная площадь окна Web-обозревателя, и могут возникнуть проблемы, если ширина окна меньше ширины таблицы. То же самое можно сказать об относительных значениях ширины и высоты ячеек таблиц: одна из них, как правило, с основным содержимым страницы, должна использовать оставшееся от ее "соседей" свободное пространство по максимуму. А значит, без относительных значений размеров опять же не обойтись.
Совет включать в таблицу минимум данных в случае табличного дизайна, конечно, неприменим. В самом деле, если в таблице помещается все содержимое Web-страницы, и содержимое немаленькое, вы ничего не сможете сделать. Однако здесь можно дать другой совет. Даже два.
Во-первых, по возможности, разбивайте одну большую таблицу на несколько меньших. Вы можете, например, отделить от главной, большой таблицы заголовок сайта и поместить его в отдельной таблице. Также вы можете поступить со сведениями об авторских правах. При этом страница будет загружаться визуально быстрее, и посетитель, видя, что "процесс идет", возможно, дождется его окончания.
Взгляните на рис. 8.33. Здесь дизайн страницы построен на основе не одной большой, а трех небольших таблиц разметки, загружающихся и отображающихся последовательно, одна за другой. Таблицы расположены "впритык" друг к другу. Посетитель сайта и не заметит, чтр ваша страница на самом деле состоит из отдельных частей. Надо только точно подогнать эти части, чтобы между ними не оставалось пустых мест.
| Таблица 1 : заголовок сайта | |
| Таблица 2: набор гиперссылок (полоса навигации) | Таблица 2: основное содержание сайта |
| Таблица 3: сведения об авторских правах | |
Рис. 8.33. Многотабличный дизайн начальной страницы
И так часто делают! Берите пример!
Во-вторых, некоторые части страницы вы можете вынести вообще за пределы таблицы разметки. Чаще всего так поступают со сведениями об авторских правах, реже — с заголовком. Пример такого подхода показан на рис. 8.34.
Заголовок сайта
| Набор гиперссылок для перехода между страницами сайта | Полезное содержимое сайта |
Сведения о правах разработчика сайта
Рис. 8.34. Дизайн главной страницы с заголовком и сведениями об авторских правах, вынесенными за пределы таблицы разметки
Давайте поступим так с нашим сайтом: вынесем за пределы таблицы заголовок сайта и сведения об авторских правах. Конечно, поскольку страницы нашего сайта очень малы, это не даст большого прироста скорости загрузки, но все-таки сделаем это.
Откройте файл default.htm и переключитесь в обычный режим отображения страницы. В этом режиме будет проще выполнить нужные манипуляции.
Сначала нам необходимо вставить перед таблицей разметки пустой абзац. Поместите курсор мыши левее таблицы так, чтобы он принял вид текстового курсора, и щелкните левой кнопкой мыши. Слева от таблицы появится большой мигающий текстовый курсор. Нажмите клавишу <Enter>, и Dreamweaver поместит перед таблицей пустой абзац.
Теперь выделите текст заголовка и перетащите его в этот пустой абзац. Отформатируйте его, чтобы он походил на заголовок сайта. После этого удалите верхнюю строку таблицы, где раньше был заголовок, и следующую за ней узкую строку — горизонтальный просвет.