Для сравнения на рис. 7 отдельно показан сам рисунок.

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

     Обычно фоновые рисунки имеют форматы bmp, gif, jpg, png.

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

Разметка ячеек таблицы

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

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

     Если необходимо разбить одну или несколько ячеек на несколько строк или столбцов, нужно их выделить (при разбиении одной ячейки выделения не требуется), выполнить команду Разбить ячейки. В появившемся окне разбивки нужно указать как производить разбивку – на столбцы или на строки. Затем следует указать число столбцов или строк. Это окно показано на рис. 9.

Рис. 9. Окно разбивки ячейки (ячеек)

     Если необходимо изменить разметку какой-нибудь ячейки, следует щелкнуть по ней, и выполнить команду Таблица/Свойства ячейки.

     В появившемся окне (рис 10) можно изменить ее свойства.

Рис. 10. Окно свойств ячейки таблицы

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

     Можно установить ширину высоту ячейки в пикселах или процентах.

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

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

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

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

Рис. 12. Диалоговое окно создания гиперссылки

     Текст гиперссылки можно внести вручную в строку ввода с надписью Адрес либо воспользоваться кнопками выбора адреса.

Гиперссылка на Web-страницу

Гиперссылка на адрес электронной почты

Гиперссылка на закладку

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

     Перед созданием гиперссылки на закладку, последнюю необходимо предварительно создать. Для этого нужно выделить будущую закладку (фрагмент текста, рисунок и т. д.) и выполнить команду Вставка/Закладка. В открывшемся окне, вид которого показан на рис. 13, следует в строке ввода внести имя закладки и щелкнуть по кнопке ОК. В приведенном примере рис. 13 страница уже имеет одну ранее созданную закладку Закладка 1, а в окне ввода подготовлен текст Закладка 2 другой закладки. Далее следует выйти из окна создания закладки, выделить в окне создания страницы элемент гиперссылки на закладку, кнопкой Закладка (рис. 12) выбрать из списка нужную закладку. Ее текст будет помещен в строку адреса. Например если выбрана закладка Закладка 2, то гиперссылка в строке адреса примет вид строки #Закладка 2. После нажатия кнопки ОК гиперссылка на закладку будет создана.

Рис.5.13. Окно создания закладки

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

Программирование окна отображения

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

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

     Список меню показан на рис. 14. Строки, которые содержат подменю, помечены справа указателем в виде треугольника. Операции, которые можно продублировать "горячими" клавишами, помечены названием комбинации клавиш.

     Приведем некоторые наиболее часто используемые нетекстовые элементы меню Insert:

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

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

     В настоящее время среди разработчиков Web-страниц используются два широко популярных растровых формата – GIF (Graphics Interchange Format – формат обмена графикой), разработанный в 1987 г. и усовершенствованный в 1989 г. фирмой CompuServe, и JPEG, получивший сокращенное название группы разработчиков Joint Picture Experts Group.

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

     Применение формата GIF позволяет создавать множество эффектов, включая прозрачность (transparency). Этот эффект широко используется, когда рисунок нужно представить в виде, отличном от прямоугольного. В этих случаях часть прямоугольного изображения закрашивается специальным цветом прозрачности, а другая обычными цветами. После размещения на странице рисунок в тех пикселах, которые закрашены цветом прозрачности, замещается пикселами цвета подложки, а прочие пикселы воспроизводятся обычным способом, создавая таким образом эффект прозрачности. Теперь один и тот же рисунок можно класть на подложки разных цветов, не опасаясь, что при несовпадении цветов будут воспроизведены нежелательные прямоугольные контуры рисунка. Для создания прозрачных GIF-рисунков можно использовать множество графических редакторов, например Photo Shop.

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

     GIF-рисунки можно использовать для создания примитивной мультипликации, которая используется на Web-страницах для анимации ("оживления") ее содержимого. Анимационные эффекты несомненно украшают страницу, часто служат средством привлечения внимания к отдельным ее фрагментам. Оборотной стороной являются повышенные объемы файлов, содержащих анимированные рисунки. Для создания анимационных GIF-рисунков можно использовать многие программы – от простых до весьма сложных, позволяющих создавать в одном файле целые мультипликационные фильмы. Примером простой программы анимации является MP Gif Animator (автор В. Фам). Мощной программой анимации является Ulead GIF Animator Lite (продукт компании Ulead Systems).

     В формате JPEG (файлы с расширениями .jpg, реже .jpe или jpeg) предпочтительно хранить в сжатом виде многоцветные рисунки, например фотографии природы, высококачественные изображения богатой цветовой палитры. При сохранении рисунка в графических редакторах (например, Photo Shop) можно управлять объемом файла и качеством рисунка, которые находятся в обратной зависимости по отношению друг к другу. Этим свойством часто пользуются разработчики Web-страниц для того, чтобы предельно минимизировать файлы с рисунками, несколько потеряв в их качестве. Нередко такие изображения практически неотличимы визуально, но могут в 1,5–3 раза отличаться по объему соответствующих файлов.

     Нельзя обойти вниманием файлы с рисунками BMP-формата (файлы с расширением .bmp). Этот один из первых графических форматов. Рисунки в этом формате занимают очень много памяти, однако он до сих пор используются, но только для представления очень маленьких изображений.

     Недавно специально для Web разработан новый PNG-формат рисунков, который должен заменить GIF-формат.

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

Рис. 16. Использование панели инструментов редактора Photo Shop для правки изображения

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

     Слева на рис. 16 показана панель инструментов графического редактора, в середине снизу – фотография, сверху – увеличенный фрагмент фотографии (правая часть воротничка), справа – увеличенный вид отретушированного фрагмента. Ретушь заключалась в том, чтобы сделать однотонным воротничок рубашки. Понятно, что если сделать одноцветными пикселы, отображающие названный фрагмент, то качество фотографии не ухудшится, однако при сохранении путем сжатия информация о всех одноцветных пикселах будет зафиксирована один раз, вследствие чего объем файла стал меньше. Подобная операция была применена к различным фрагментам фотографии, что позволило уменьшить объем файла в 2,5 раза. Ретушь выполнена при помощи различных инструментов панели, в том числе инструмента Pencil Tool (карандаш), который на панели выделен активным цветом.

     Для минимизации размеров рисуночных файлов можно также использовать специальные программы, которые убирают из них неграфическую информацию, размещаемую графическими редакторами при разработке и сохранении рисунка. Например, автор этих строк пользуется программой Advanced GIF Optimizer фирмы Gold Software. Использование оптимизаторов часто позволяет уменьшить объем GIF-файла еще на 10-60 %.

     Для ускорения загрузки рисунка его можно разрезать на отдельные части и затем разместить эти части на страницах в разных ячейках таблицы. При просмотре в браузере рисунок, состоящий из частей, выглядит также, как не фрагментированный рисунок. Преимущество фрагментации состоит в том, что рисунки, как и прочие элементы страницы, загружаются в браузер параллельно, что способствует ускорению загрузки страницы. Кроме того, полностью загруженный фрагмент сразу появляется в браузере, что позволяет создать иллюзию скорой загрузки рисунка. Вкупе с возможностями передачи GIF- и JPEG-рисунков и ресурсами правки можно добиться заметного ускорения загрузки рисунков на страницах.

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

Далее щелчком в ячейку первой строки и командой Таблица/Выделить строку первая строка ячеек была выделена. Затем на нее был наведен курсор и выполнен щелчок правой клавиши мыши. В контекстном меню выбрана команда Свойства ячейки и в появившемся окне (рис. 10) всем выделенным ячейкам назначена подложка в виде рисунка bg.gif (он также подготовлен в редакторе Photo Shop). Этот рисунок представляет собой однотонное изображение размером 8x8 пикселов с одинаковыми характеристиками. Размер файла подложки составляет всего 46 байтов. Подложка необходима, чтобы вся первая строка таблицы закрасилась одинаковым цветом (рисунки выполнены на фоне этого же цвета).

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

     Далее были назначены две гиперссылки – на сайт КГТУ и сайт кафедры ТМС. Они необходимы для того, чтобы просматривающий страницу мог при желании перейти к просмотру этих страниц. Первому рисунку (h1.gif) была назначена гиперссылка http://www.kgtu.runnet.ru на сайт КГТУ (рис. 5.12). Второму (h2.gif) – гиперссылка на сайт кафедры ТМС http://tms.kgtu.runnet.ru. В строке Text свойств рисунков первому назначен текст К сайту КГТУ, второму – К сайту кафедры ТМС. Эти строки необходимы для того, чтобы просматривающий страницу при наведении курсора на рисунок смог прочесть на всплывающих подсказках назначение гиперссылок. Чтобы в браузере не были видны контуры рисунков-гиперссылок их свойству толщины границ присвоено значение нуль и граница свернута (рис. 15). На этом разметка первой строки таблицы закончена.

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

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

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

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

     Ниже таблицы набран текст, завершающий описание истории.

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

     Не упущена возможность подчеркнуть интересную особенность одного из фрагментов текста: если из первых букв наименований специальностей, которым обучают на кафедре ТМС, составить аббревиатуру, то она повторит аббревиатуру, составленную из первых букв наименования кафедры, т. е. снова получится "ТМС" (на рис. 20 и 21 эта часть текста не видна. Эта особенность подчеркнута тем, что первые буквы в наименовании специальностей выделены полужирным начертанием и красным цветом.

     Наконец, все ячейки нижней строки большой таблицы объединены и в получившуюся ячейку более мелким шрифтом внесены выходные данные кафедры – адрес, телефоны, адрес e-mail.