Дмитрий Макарский - Работа в Интернете
Также для картинки можно задать тег ALT (например, ALT="Красивая картинка">). По сути, этот тег призван заменить содержимое рисунка, если по каким-то причинам он не сможет быть отображен.
Еще один тег, который можно применять не только к изображениям, но и практически к любому элементу веб-страницы, – это тег TITLE (например, <TITLE>Текст</TITLE>). Данный параметр позволяет задать не только заголовок страницы, как уже было сказано выше, но и текст всплывающей подсказки, которая будет появляться при подведении к картинке или другому объекту указателя мыши.
В этом разделе были приведены самые общие знания, необходимые начинающему веб-дизайнеру. Читатели, которые захотят изучить язык гипертекстовой разметки глубже, могут обратиться к специальной литературе на эту тему. Возможно, кто-то уже успел испугаться некоторой сложности языка HTML и подумать: «А так ли нужен мне этот собственный сайт?» Спешим поделиться хорошей новостью. Создавать сайты можно гораздо проще, чем вручную писать весь HTML-код. Для этого существуют специальные приложения.
Создание сайтов в визуальном режиме WYSIWYG
Аббревиатура 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
Начало работы с пакетом 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
Обратим внимание на некоторые моменты. Самое большое по площади место занимает рабочее окно, в котором создаются и редактируются веб-страницы. Отдельного упоминания заслуживают кнопки переключения режимов работы: Code (Код), Split (Разделитель) и Design (Дизайн). Работать над обликом веб-страницы в рассматриваемом пакете можно в режиме дизайна, то есть видя перед собой редактируемую страницу и непосредственно воздействуя на элементы ее оформления, или в режиме ручного написания, так как если бы пользователь писал HTML-код, например, в Блокноте. Режим дизайна включается кнопкой Design (Дизайн), а режим кода – кнопкой Code (Код). Кнопка Split (Разделитель) включает режим одновременного отображения HTML-кода и дизайна, как показано на рисунке.
Под рабочим окном расположена панель Properties (Cвойства). В зависимости от того, с каким объектом в данный момент работает пользователь (таблица, рисунок, текст, гиперссылка), содержимое панели Properties (Свойства) может изменяться, отображая свойства выделенного объекта. Разумеется, эти свойства можно изменять.
Правую сторону основного окна программы занимает панель дополнительных функций и элементов управления.
Создание веб-страницы
Поскольку основная составляющая веб-страниц – это текст, то работа в Adobe Dreamweaver CS3 ничем особо не отличается от работы в текстовом редакторе. Если программа уже запущена и создан пустой HTML-документ, как было описано выше, то можно приступать к работе. Если нет – следует выполнить команду File → New (Файл → Новый) – откроется окно New Document (Новый документ) (рис. 8.9).
Рис. 8.9. Создание нового документа
В разделе Page Type (Тип страницы) следует выбрать пункт HTML и нажать кнопку Create (Создать) – будет создана новая пустая веб-страница.
Прежде чем наполнять страницу содержимым, или, как говорят веб-дизайнеры, контентом, нужно задать некоторые ее свойства. Для этого на панели Properties (Свойства) внизу главного окна программы следует нажать кнопку Page properties (Свойства страницы) – откроется окно (рис. 8.10), в котором можно управлять всеми свойствами редактируемой веб-страницы.
Рис. 8.10. Окно свойств страницы
В частности, можно устанавливать основной шрифт страницы, его размер, стиль и цвет; внешний вид гиперссылок; внешний вид заголовков (H1, H2, H3 и т. д.); указать название страницы, фоновый рисунок, кодировку.
Написав первые слова в режиме дизайна страницы, нужно выделить их и переключиться в режим работы с кодом (нажать кнопку Code (Код)). Появится HTML-код созданной страницы, причем тот фрагмент, который выделен в режиме дизайна, в режиме кода тоже будет выделен. Если в код страницы вносятся какие-либо изменения, то они тут же будут отражены в режиме дизайна. Такой принцип работы помогает начинающему веб-дизайнеру освоить навыки работы с HTML-кодом. Впрочем, можно обойтись и без обращения к коду, а работать исключительно в режиме WYSIWYG.
Следует сохранить страницу на винчестер, а затем продолжить редактирование. При этом нужно уяснить следующие моменты.
• Для хранения всех файлов сайта нужно создать отдельную папку. При этом для полностью корректной работы лучше расположить эту папку в корневом каталоге одного из дисков и присвоить ей имя, состоящее из латинских букв длиной не более восьми символов. Это гарантирует правильную обработку путей к файлам на этапе разработки сайта и тестирования его на локальном компьютере.
• Как правило, сайт состоит из нескольких отдельных страничек, разумеется, все они хранятся в отдельных файлах. Каждому такому файлу также присваивается имя из латинских букв, желательно не очень длинное и, по возможности осмысленное (например, для странички Контакты хорошо назвать файл contacts.html).
• Файл главной страницы сайта в большинстве случаев должен называться index.html. Поэтому не следует изобретать ничего нового, а сразу так и назвать этот файл независимо от того, будет ли сайт состоять из одной странички или из нескольких.
• Все рисунки сайта лучше поместить в одну папку, которая будет находиться в корневом каталоге веб-ресурса. Так будет удобнее организовать доступ к картинкам с разных страничек. В крайнем случае, если изображений довольно много, лучше разложить их по подпапкам общей папки, созданной специально для рисунков.
Выполнив команду File → Save (Файл → Сохранить), нужно присвоить файлу нужное имя и сохранить его в нужной папке.
Продолжим редактирование страницы. Добавлять элементы оформления удобно с помощью панели инструментов, расположенной над областью редактирования сайта. Точнее, даже не одной панели, а нескольких, между которыми можно переключаться. Доступны следующие панели инструментов:
