Иллюстрированный самоучитель по Adobe Dreamweaver MX

Сложные таблицы

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

Поместите текстовый курсор в единственную ячейку первой вложенной таблицы и щелкните тег <TABLE> в секции тегов. Первая вложенная таблица будет выделена. Нажмите комбинацию клавиш CTRL + C, чтобы скопировать ее в буфер обмена Windows (или сделайте это другим образом, благо Dreamweaver предоставляет целых три способа). Теперь поместите текстовый курсор в третью ячейку внешней таблицы и нажмите комбинацию клавиш CTRL + V, чтобы вставить сюда содержимое буфера обмена. В третью ячейку будет вставлена точная копия первой вложенной таблицы; вам нужно будет только изменить находящийся в ней текст. Точно так же поместите в четвертую ячейку копию второй вложенной таблицы, удалите лишнюю строку и впишите в ее ячейки нужный текст. Окончательный вид страницы со списком увлечений представлен на рис. 5.43.

Отлично! Мы получили то, что хотели. Можете просмотреть готовую страницу в Web-обозревателе. И не забудьте сохранить плоды ваших трудов на диске.

Однако что-то в этой странице нам не нравится. Вы, наверно, знаете, что именно. Допущена эта ошибка специально, чтобы вас проверить. Если вы собираетесь серьезно заниматься Web-дизайном, вы должны видеть такие ошибки сразу.

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

Это тоже оптимизация. И на этот раз более серьезная.

Иллюстрированный самоучитель по Adobe Dreamweaver MX › Таблицы › Сложные таблицы
Рис. 5.43. Готовый список увлечений

Вместо того чтобы "тыкать" мышью в окно документа, мы отредактируем HTML-код. Откройте окно кода или переключитесь в режим отображения кода. Найдите следующий фрагмент:

<table width="100%" border="0" cellspacing="0" cellpadding="2" bgcolor="#000000">
    <!-- Это определение внешней таблицы -->
    <tr>
        <td>
            <!-- Это первая строка внешней таблицы и ее единственная ячейка -->
            <table width="100%" border="0" cellspacing="0" cellpadding="2" height="100%">
                <!-- Это внутренняя таблица -->
                <tr>
                    <td>
                        <!-- Это единственная строка и ячейка внутренней таблицы -->
                        <div align="center"> <font color="#FFFFFF">Компьютеры </font>
                            <!-- Это текст, содержащийся в единственной ячейке внутренней таблицы -->
                    </td>
                </tr>
            </table>
            <!-- Здесь кончается определение внутренней таблицы -->
        </td>
    </tr>
    <!-- А здесь кончается определение первой строки внешней таблицы -->

Сейчас мы вырежем несколько строк этого кода. Вот что получилось:

<table width="100%" border="0" cellspacing="0" cellpadding="2" bgcolor="#000000">
    <tr>
        <td>
            <div align="center"><font color="IFFFFFF">Компьютеры</font>
            </div>
        </td>
    </tr>

Как видите, мы удалили все определение внутренней таблицы, оставив только ее содержимое. Теперь переключитесь в режим отображения страницы и посмотрите, что получилось. Замечательно, нам даже ничего не нужно подправлять! Аналогично измените HTML-код, связанный с третьей ячейкой и третьей вложенной таблицей. Сделайте это самостоятельно – это будет лучшей практикой.

Все, наша оптимизация закончена! А страница списка увлечений Ивана Ивановича полностью готова.

Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.