Добавить в избранное  ||  Размещение текста и заголовков  ||  Введение  ||  Продолжаем создание Web-узла

Глава 13 Использование таблиц в оформлении Web-страницы

Создание таблиц
Создание таблицы с использованием кнопки Добавить таблицу
Создание таблицы с помощью команды меню Вставить
Создание таблицы с помощью команды Нарисовать таблицу
Свойства таблицы
Свойства ячейки
Настройка таблицы
Панель инструментов Таблицы
Перемещение и копирование строк и столбцов
Вставка и удаление строк, столбцов и ячеек
Создание заголовков таблиц
Объединение и разбиение ячеек
Преобразование таблицы в текст
Преобразование текста в таблицу
Использование таблицы при оформлении Web-страницы

Создание таблиц

Функции таблиц при создании Web-страниц разнообразны. Приведем некоторые из них:

• Выравнивание информации за счет расположения ее в ячейках таблицы. С помощью таблиц текст можно представлять в виде колонок
• Выравнивание названий и полей формы
• Расположение на Web-странице текста и графических изображений по разным колонкам
• Использование вложенных таблиц
• Задание различного фона для отдельных частей страницы

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

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

Таблица может быть вставлена в произвольное место Web-страницы. Для создания таблиц вы можете использовать следующие средства:

•  Команду Вставить (Insert) меню Таблица (Table)
•  Кнопку Добавить таблицу (Insert Table) стандартной панели инструментов

Альтернативным способом создания таблиц является использование команды Нарисовать таблицу (Draw Table) меню Таблица, а также кнопка Нарисовать таблицу панели инструментов Таблицы. Это средство позволяет создать таблицу более сложной конфигурации (например, с ячейками разных размеров). При этом вы просто рисуете требуемую таблицу с помощью мыши, как рисовали бы ее карандашом на бумаге.

Если информация, которую требуется поместить в таблицу, уже присутствует в вашем документе в виде текста, вы можете преобразовать текст в таблицу. Но об этом чуть позже.

Прежде чем приступить непосредственно к созданию таблицы, вы должны иметь хотя бы приблизительное представление о том, сколько столбцов и строк должна иметь таблица. На этом этапе вам не обязательно точно указывать параметры таблицы. После создания вы сможете добавить и/или удалить столбцы и строки по своему усмотрению.

Создание таблицы с использованием кнопки Добавить таблицу

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

1. Установите курсор в то место Web-страницы, где хотите расположить таблицу.

2. Нажмите кнопку Добавить таблицу (Insert Table) На экране появится миниатюрное изображение таблицы.

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

4. В заключение отпустите кнопку мыши. В указанном месте страницы появится таблица требуемого размера.

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

Создание таблицы с помощью команды меню Вставить

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

1. Установите курсор в то место Web-страницы, где будет располагаться начало таблицы.

2. В меню Таблица (Table) выберите команду Вставить (Insert), а затем в открывшемся меню — опцию Таблица. В результате выполнения этой команды откроется диалоговое окно Вставка таблицы, представленное на рис. 13.1, в котором вы можете задать требуемые параметры таблицы.

Рис. 13.1. Диалоговое окно Вставка таблицы

Это диалоговое окно содержит параметры, назначение которых описано в табл. 13.1.

Таблица 13.1. Назначение параметров диалогового окна Вставка таблицы

3. Используя поля Число строк (Rows) и Число столбцов (Columns), задайте количество строк и столбцов в создаваемой таблице.

4. В раскрывающемся списке Выравнивание (Alignment) выберите тип выравнивания информации в таблице.

5. В поле Толщина границы (Border size) введите толщину разделительных линий таблицы в пикселах.

Замечание

При установке для параметра Толщина границы (Размер рамки) значения О таблица в Web-странице отображается пунктирной линией, которая не будет видна при просмотре страницы в обозревателе. Такой вид таблицы удобно использовать для выравнивания текста на Web-страницах.

6. Используя поля Поля ячеек (Cell padding) и Интервал ячеек (Cell spacing), задайте расстояние между границей ячеек и располагаемыми в них данными, а также интервал между смежными ячейками. Оба эти параметра задаются в пикселах.

7. FrontPage по умолчанию предполагает, что ширина таблицы будет задаваться в процентах от ширины окна обозревателя, что более наглядно. Введите необходимое число в поле, расположенное под установленным флажком Задать ширину (Specify width). Если хотите задать ширину в пикселах, установите опцию в точках (In pixels), а затем введите ширину таблицы.

Замечание

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

8. Завершив установку всех параметров, нажмите кнопку ОК для закрытия диалогового окна. Таблица с заданными параметрами будет помещена на Web-страницу.

Создание таблицы с помощью команды Нарисовать таблицу

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

1. Подготовьте место для создания таблицы.

2. В меню Таблица выберите команду Нарисовать таблицу или нажмите кнопку Нарисовать таблицу на панели инструментов Таблицы.

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

4. Действуя аналогичным образом, проведите линии границ столбцов и строк.

Совет

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

Свойства таблицы

Свойства таблицы определяют ее внешний вид. Для изменения свойств существующей таблицы используется диалоговое окно Свойства таблицы (Table Properties) (рис. 13.2), которое открывается после выбора в меню Таблица (Table) команды Свойства таблицы (Table Properties), а затем — опции Таблица. Альтернативный способ его открытия — выбор команды Свойства таблицы контекстного меню.

Рис. 13.2. Диалоговое окно Свойства таблицы

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

Замечание

По умолчанию в раскрывающемся списке Обтекание (Float) установлено значение по умолчанию (Default). Эта установка не позволяет располагать рядом с таблицей текст, даже если ширина таблицы меньше ширины Web-страницы. Если вы хотите расположить текст слева или справа от таблицы, то воспользуйтесь опциями по левому краю (Left) или по правому краю (Right), смещающими таблицу влево или вправо, соответственно. В результате на освободившемся месте появляется возможность разместить текстовую информацию или изображение.

Область Границы (Borders) содержит следующие параметры:

• Размер (Size) — толщина разделительных линий таблицы
• Цвет (Color) — цвет однородной рамки таблицы
• Светлая (Light border) — цвет освещенных сторон рамки
• Темная (Dark border) — цвет теневых сторон рамки

Замечание

Список Цвет (Color) используется в том случае, если вы хотите, чтобы вся рамка была одинакового цвета. Придать рамке объемность можно с помощью списков Светлая (Light border) и Темная (Dark border).

Список Цвет (Color) области Фон (Background) позволяет задать цвет фона таблицы. Если вы хотите в качестве фона использовать графическое изображение, то установите флажок Использовать фоновый рисунок (Use b ackgroi un d picture) и после нажатия кнопки Обзор (Browse) укажите название и расположение графического файла.

Свойства ячейки

Программа FrontPage предоставляет средства, позволяющие изменять свойства отдельных ячеек таблицы. Для изменения свойств ячеек таблицы выделите необходимые ячейки и выполните одно из следующих действий:

1 В меню Таблица (Table) выберите команду Свойства таблицы (Table Properties), а затем — опцию Ячейка (Cell)

Выберите команду Свойства ячейки (Cell Properties) контекстного меню I Нажмите комбинацию клавиш <Alt> + <Enter>
При выполнении любого из этих действий открывается диалоговое окно Свойства ячейки (Cell Properties) (рис. 13.3), содержащее параметры, назначение которых описано в табл. 13.2.

Рис. 13.3. Диалоговое окно Свойства ячейки

Таблица 13.2. Назначение параметров диалогового окна Свойства ячейки

Замечание

Параметры Объединение строк (Rows spanned) и Объединение столбцов (Columns spanned) позволяют указать количество строк или столбцов, которые выделенная ячейка должна занять, увеличивая тем самым свой размер. При этом расположенные справа и ниже от нее ячейки сдвинутся, освобождая место.

Настройка таблицы

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

Панель инструментов Таблицы

Для редактирования таблиц помимо команд меню Таблица и контекстного меню можно использовать панель инструментов
Таблицы (рис. 13.4).

Рис. 13.4. Панель инструментов Таблицы

На панели инструментов Таблицы расположены кнопки, функции которых призваны заменять основные команды меню Таблица. Назначение кнопок этой панели представлено в табл. 13.3.

Таблица 13.3. Назначение кнопок панели инструментов Таблицы

Перемещение и копирование строк и столбцов

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

Чтобы переместить или скопировать одну или несколько строк пли столбцов вместе с их содержимым, выполните следующие действия:

1. Выберите строки или столбцы, которые вы предполагаете переместить или скопировать.

2. Выберите в меню Правка (Edit) команду Вырезать (Cut) или Копировать (Сору) в зависимости от того, перемещаете или копируете данные.

3. Переместите курсор в строку или столбец, соответственно, левее или выше того места, в котором должны появиться перемешенные или скопированные данные.

4. Выберите в меню Правка (Edit) команду Вставить (Paste).

Вставка и удаление строк, столбцов и ячеек

После создания таблицы вы можете изменить ее структуру путем добавления или удаления строк и столбцов с помощью кнопок Добавить строки (Insert Rows) и Добавить столбцы (Insert Columns) панели инструментов Таблицы. Чтобы вставить в таблицу строку или столбец, можно также использовать диалоговое окно Вставка строк или столбцов (Insert Rows or Columns), открываемое из меню Таблица (Table) при выборе команды Вставить (Insert), а затем в появившемся подменю — опции Строки или столбцы
(Rows or Columns).

В верхней части диалогового окна Вставка строк или столбцов (рис. 13.5) расположены две опции, указывающие, строки или столбцы будут вставляться в таблицу. Поле Число столбцов (Number) позволяет указать количество, а опции области Размещение (Location) — расположение вставляемых объектов.

Для вставки в таблицу ячейки выберите в меню Таблица (Table) команду Вставить (Insert), а затем в появившемся подменю — опцию Ячейка (Cell).

Рис. 13.5. Диалоговое окно Вставка строк или столбцов

Совет

Если вам нужно добавить строку в конец таблицы, перейдите в последнюю ячейку таблицы и нажмите клавишу <Та b >.

Для удаления строк, столбцов или ячеек таблицы используются следующие действия:

1. Выделите одну пли несколько строк (столбцов или ячеек), которые вы предполагаете удалить.

2. Выберите команду Удалить ячейки (Delete Cells) меню Таблица или контекстного меню.

В результате выбора команды Удалить ячейки выбранные строки будут удалены. а все строки, расположенные ниже, сдвинутся вверх. При удалении столбцов все столбцы, расположенные справа от удаленных столбцов, сдвинутся влево.

  Замечание

Если вам требуется очистить ячейки (то есть удалить их содержимое, не удаляя самих ячеек), выделите ячейки, предназначенные для удаления содержимого, и нажмите клавишу <Delete> или <Backspace>.

Создание заголовков таблиц

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

Рис. 13.6. Выбор ячеек для объединения

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

Объединение и разбиение ячеек

FrontPage позволяет объединить несколько расположенных рядом горизонтальных ячеек в одну. При этом содержимое ячеек также объединяется.

Для объединения нескольких расположенных в одной строке или в одном столбце ячеек выполните следующие действия:

1. Выберите ячейки, которые вы хотите объединить (см. рис. 13.6).

2. Выполните команду Объединить ячейки (Merge Cells) меню Таблица или контекстного меню, или нажмите одноименную кнопку на панели инструментов Таблицы. В результате выбранные вами ячейки сливаются в одну (рис. 13.7). В случае необходимости, отформатируйте ячейку и ее содержимое.

Рис. 13.7. Результат объединения ячеек

Совет

Наиболее просто объединить ячейки — это воспользоваться кнопкой Ластик (Erase), расположенной на панели инструментов Таблицы . Выбрав этот инструмент, вы просто проводите им по линии, разделяющей ячейки, которые предполагается объединить.

Разбиение ячеек является обратной операцией по отношению к объединению. С ее помощью вы можете восстановить исходное состояние объединенных ячеек. При этом распределение текста между ячейками будет определяться наличием символов абзаца. Первый абзац будет помещен в первую ячейку, второй абзац — во вторую ячейку и т. д.

Кроме того, вы можете разбить ячейку, которая не является результатом объединения ячеек. В этом случае FrontPage разобьет ячейку на указанное вами число ячеек равного размера так, чтобы их общий размер был равен размеру исходной ячейки.

Для разбиения ячеек выполните следующие действия:

1. Выберите одну или несколько ячеек, которые вы предполагаете разбить.

2. Выберите команду Разбить ячейки (Split Sells) меню Таблица (Table) или контекстного меню, в результате чего на экране появляется диалоговое окно Разбиение ячеек (Split Sells) (рис. 13.8).

Рис. 13.8. Диалоговое окно Разбиение ячеек

Замечание

В качестве альтернативного средства для разбиения ячеек вы можете воспользоваться кнопкой Разбить ячейки (Split Sells) на панели инструментов Таблицы.

3. По умолчанию в диалоговом окне установлена опция Разбить на столбцы (Split into columns). В поле ввода Число столбцов (Number of columns) отображается количество столбцов, на которые FrontPage предлагает разбить каждую из ячеек. В случае необходимости измените указанное значение и нажмите ОК.

На рис. 13.9 представлена таблица, в которой верхняя строка, содержащая одну ячейку, разбита на четыре ячейки.

Рис. 13.9. Верхняя ячейка разбита на четыре ячейки

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

FrontPage позволяет преобразовать содержимое таблицы в абзацы обычного текста. Для преобразования таблицы в текст выполните следующие действия:

1. Выделите строки, которые вы предполагаете преобразовать в текст, или всю таблицу.

2. Выберите в меню Таблица (Table) команду Преобразовать (Convert), a затем в появившемся подменю — опцию Таблицу в текст (Table To Text).

На рис. 13.10 показан результат преобразования таблицы в текст.

Рис. 13.10. Результат преобразования таблицы в текст

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

Если вы работаете с другими приложениями, непосредственно не поддерживающими формат FrontPage, вы можете экспортировать данные, подготовленные в них, в текстовый файл, а затем вставить этот файл в требуемый документ. Если исходные данные имели табличную структуру, то после преобразования в текстовый файл она будет утрачена. К счастью, FrontPage предоставляет вам возможность преобразовать обычный текст в таблицу. Аналогичная проблема может возникнуть и при работе в программе FrontPage: вы уже успели ввести изрядный объем данных и только после этого поняли, что, заключив их в таблицу, вы значительно упростите работу с ними.

При преобразовании текста в таблицу вы можете использовать текст, уже содержащий символы-разделители (знаки пунктуации, не используемые в тексте, знаки табуляции или маркеры абзаца) или добавить их перед выделением текста, который требуется преобразовать.

Для преобразования текста в таблицу выполните следующие действия:

1. Если в исходном тексте отсутствуют символы-разделители, добавьте их.

2. Выделите текст, который вы предполагаете преобразовать в таблицу.

3. В меню Таблица (Table) выберите команду Преобразовать (Convert), a затем в появившемся подменю — опцию Текст в таблицу (Text to Table). В результате на экране появится диалоговое окно Текст в таблицу (Convert Text To Table) (рис. 13.11).

Рис. 13.11. Диалоговое окно Текст в таблицу

4. Если вы хотите изменить символ-разделитель, предложенный FrontPage, выберите требуемую опцию в разделе Разделитель (Separate text at).

5. Нажмите кнопку ОК.

Использование таблицы при оформлении Web-страницы

В начале главы мы говорили, что таблицы удобно использовать для расположения текста и графических изображений на Web-странице в определенных областях. Рассмотрим небольшой пример. Разместим на Web-странице рисунок и текстовую информацию, используя для форматирования таблицу:

1. Откройте созданный нами тестовый одностраничный Web-узел.

2. Добавьте в него новую страницу. Для этого в меню Файл (File) выберите команду Создать (New), а затем в открывшемся подменю — опцию Страница или веб-узел (Page or Web). В результате в главном окне программы FrontPage появляется панель Создание
веб-страницы или узла (New Page or Web). Выберите на этой панели команду Пустая страница (Blank Page).

3. Расположите в верхней части новой страницы заголовок.

4. Создайте под заголовком таблицу, состоящую из одного столбца и двух строк. В первую строку мы поместим графическое изображение, а во вторую — подпись к нему.

5. Поместите на страницу графическое изображение. Для этого установите курсор под таблицу, выберите из меню Вставка (Insert) команду Рисунок (Picture), а затем — опцию Из файла (From File). Открывается диалоговое окно Рисунок (Picture), используя которое найдите требуемый файл на диске и нажмите кнопку Вставить (Insert). Графическое изображение будет вставлено на Web-страницу.

6. С помощью мыши перетащите изображение в первую строку таблицы.

7. Во вторую строку таблицы введите надпись к рисунку.

8. С помощью курсора уменьшите ширину таблицы, чтобы справа можно было расположить текст.

9. Введите под таблицей текст, который хотите расположить на Web-странице рядом с изображением.

10. Теперь нам надо настроить свойства таблицы. Для этого откройте окно ее свойств, выбрав в контекстном меню команду Свойства таблицы (Table Properties).

11. Чтобы линии таблицы не были видны в обозревателе, задайте толщину линии 0 пиксел. Для этого в счетчике Размер (Size) области Границы (Borders) установите значение 0.

12. Необходимо, чтобы размещенный на Web-странице текст расположился справа и под рисунком, т. е. обтекал таблицу. Для этого из списка Обтекание (Float) области Положение (Layout) выберите значение но левому краю (Left).

13. Закройте окно свойств таблицы, нажав кнопку ОК. Web-страница будет иметь вид, аналогичный показанному на рис. 13.12.

Рис. 13.12. Размещение информации с использованием таблицы

Сохраните созданную Web-страницу. Для этого нажмите на панели инструментов кнопку Сохранить и в открывшемся диалоговом окне Сохранить как (Save As) введите название страницы. Откроется окно Сохранение внедренных файлов (Save Embedded Files), позволяющее указать имя, с которым графическое изображение будет сохранено в структуре Web-узда. Нажмите кнопку ОК.

Замечание

Более подробную информацию о диалоговом окне Сохранение внедренных файлов (Save Embedded Files) вы получите в главе 15.

Просмотрите созданную страницу в обозревателе (рис. 13.13). Для этого в меню Файл (File) выберите команду Просмотр в обозревателе (Preview in Browser). Открывается окно со списком установленных на компьютере браузеров. Установите курсор на браузер, в котором хотите просмотреть страницу, и нажмите кнопку Просмотр (Preview).

Рис. 13.13. Созданная Web-страница в обозревателе Internet Explorer

Добавить в избранное  ||  Размещение текста и заголовков  ||  Введение  ||  Продолжаем создание Web-узла

top

Школа Майкрософт© Copyright 2007г.

графика, хтмл, для, начинающий, начинающих, чайников, новичков, просто, основа, основы, графика, страница, домашний, домашняя, сайт, новый, новичок, html, обучение, учеба, пример, веб, мастер, веб-мастер, дизайн, веб-дизайн, вебдизайн, дезайн, веб-дезайн, вебдезайн, дезайнер, дизайнер, ступени, тэги, тэг, теги, тег, аттрибут, атрибуты, парамет, design, web, help, помощь, icq, e-mail, guest, book, guestbook, гостевая, книга, форум, аська, контакт, ссылка, link, links, banner, обмен, баннер, баннерами, банер, baner, друзья, friends, почитать, написать, вопросы, вопрос, ответ, проект, ступени, словарь, excel, exel, excell, exsel, эксель, ексель, для, начала, сначала, таблицы, форматирование, ряды, строки, ячейка, начинающий, начинающих, чайников, новичков, просто, основа, основы