Петр Ташков - Работа в Интернете. Энциклопедия

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

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

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

Еще один тег, который можно применять не только к изображениям, но практически к любому элементу веб-страницы, – тег TITLE (например,

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

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

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

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

Рис. 11.6.Окно программы Adobe Dreamweaver CS3

Начало работы с пакетом Adobe Dreamweaver

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

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

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

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

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

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

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

Основные элементы интерфейса

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

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

Обратим внимание на некоторые моменты. Самое большое по площади место занимает рабочее окно, в котором создаются и редактируются веб-страницы. Отдельного упоминания заслуживают кнопки переключения режимов работы: Code (Код), Split (Разделитель) и Design (Дизайн). Работать над обликом веб-страницы в рассматриваемом пакете можно в режиме дизайна, то есть видя перед собой редактируемую страницу и непосредственно воздействуя на элементы ее оформления, или в режиме ручного написания, так, как если бы пользователь писал HTML-код, например, в Блокноте. Режим дизайна включается кнопкой Design (Дизайн), а режим кода – кнопкой Code (Код). Кнопка Split (Разделитель) включает режим одновременного отображения HTML-кода и дизайна, как показано на рисунке.

Читать дальше