Чтение онлайн

С помощью таблицы можно создать сколь угодно сложное оформление веб-страницы, например оформить меню или другие элементы.

Тег, с помощью которого на веб-страницу вставляется таблица, достаточно объемен, однако и сама таблица не простой элемент. Пример таблицы с размером ячейки 2 x 2 приведен в листинге 8.3.

Внешний вид этой таблицы представлен на рис. 8.5.

Рис. 8.5. Вид простейшей таблицы

Стоит дать некоторые пояснения, хотя если вдумчиво посмотреть на приведенный фрагмент HTML-кода, то и так все становится ясно.

Тег <TABLE> означает начало таблицы, здесь же задаются некоторые следующие параметры:

• WIDTH – ширина таблицы;

• BORDER – толщина бордюра или границы;

• CELLSPASING – расстояние между ячейками;

• CELLSPADDING – отступ от границ ячейки внутри ее.

Тег <TR> начинает новую строку таблицы, а <TD> – новую ячейку. Для обоих этих тегов допустимо применение тех же параметров, которые задаются для таблицы. Другие теги, используемые в табличном дизайне, приведены в табл. 8.2.

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

Современный сайт сложно представить без изображений. Не будем рассуждать об их необходимости, а сразу скажем, что для вставки картинки на веб-страницу используется тег <img src="URL">, где вместо букв URL пишется реальный адрес рисунка в Интернете. Тег вставки картинки непарный, то есть не имеет закрывающего тега. К этому тегу могут быть также применены некоторые дополнительные параметры, например WIDTH, HEIGHT, BORDER, ALIGN могут применяться не только к элементам таблицы, но и к изображениям. Причем в этом случае они имеют то же значение и формат, что и таблицы.

Среди дополнительных параметров назовем HSPACE и VSPACE. Они позволяют задать соответственно горизонтальный и вертикальный отступы текста от картинки, чтобы сделать страницу более привлекательной, не «слепливая» все в кучу.

Рисунок, как и текст, можно вставить внутрь гиперссылки – щелкнув на такой картинке, можно будет перейти на заданную страницу.

Также для картинки можно задать тег ALT (например, ALT="Красивая картинка">). По сути, этот тег призван заменить содержимое рисунка, если по каким-то причинам он не сможет быть отображен.

Еще один тег, который можно применять не только к изображениям, но и практически к любому элементу веб-страницы, – это тег TITLE (например, <TITLE>Текст</TITLE>). Данный параметр позволяет задать не только заголовок страницы, как уже было сказано выше, но и текст всплывающей подсказки, которая будет появляться при подведении к картинке или другому объекту указателя мыши.

В этом разделе были приведены самые общие знания, необходимые начинающему веб-дизайнеру. Читатели, которые захотят изучить язык гипертекстовой разметки глубже, могут обратиться к специальной литературе на эту тему. Возможно, кто-то уже успел испугаться некоторой сложности языка HTML и подумать: «А так ли нужен мне этот собственный сайт?» Спешим поделиться хорошей новостью. Создавать сайты можно гораздо проще, чем вручную писать весь HTML-код. Для этого существуют специальные приложения.

Аббревиатура WYSIWYG образована от англ. What You See Is What You Get, что в вольном переводе звучит как «что видишь, то получишь». Это название подхода к работе, когда конечный результат сразу же виден разработчику чего-либо. В частности, на таком принципе основана работа в некоторых HTML-редакторах, что значительно упрощает процесс разработки веб-страниц.

В простейшем случае создать интернет-страничку в режиме WYSIWYG можно даже с помощью текстового процессора Microsoft Word. Однако этот способ хорош, только если не планируется выкладывать созданную страницу в Интернете, а, например, нужно использовать ее в качестве презентации чего-нибудь на локальном, то есть не подключенном к Сети, компьютере. HTML-код, полученный с помощью текстового редактора, получается довольно громоздким, что не очень приемлемо для уважающего себя интернет-ресурса. Да и ориентирован этот текстовый процессор прежде всего на подготовку традиционных, то есть бумажных, документов, а не веб-страниц.

Для создания интернет-страниц существуют специализированные среды разработки, например программа Adobe Dreamweaver CS3 (http://www.adobe.com/products/dreamweaver/) компании Adobe (рис. 8.6). На ее примере рассмотрим основные принципы разработки веб-документов в режиме WYSIWYG.

Рис. 8.6. Программа Adobe Dreamweaver CS3

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

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

• Open (Открыть) – открыть готовый документ;

• Create New (Создать новый) – создать новый документ;

• Create from Samples (Создать на основе готовых шаблонов) – создать документ на основе имеющихся в программе шаблонов.

Рис. 8.7. Начало работы с программой Adobe Dreamweaver CS3

Создадим новый пустой HTML-документ, выбрав в разделе Create New (Создать новый) пункт HTML.

Даже при беглом взгляде на рабочее окно программы Adobe Dreamweaver CS3 (рис. 8.8) можно заметить, что принципиальных отличий от множества других компьютерных программ здесь нет: та же строка меню, те же панели инструментов и т. д.

Рис. 8.8. Главное рабочее окно программы Adobe Dreamweaver CS3