DREAMWEAVER

основы верстки HTML

Поскольку самый простой способ создания из нарезанных кусков (slices) HTML шаблона страниц веб-сайта – это воспользоваться одним из HTML редакторов, мы так и поступим. Самый “простой” в изучении программой является программа Dreamweaver (рис. 1).

Рис. 1. Пример программы Dreamweaver, версия 8

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

Для того чтобы запустить программу Macromedia Dreamweaver необходимо:

    Дважды щелкнуть мышью на иконке программы (рис. 2) Macromedia Dreamweaver ан Рабочем столе (Desktop).


Рис. 2. Пиктограмма быстрого запуска программы Macromedia Dreamweaver

    Щелкнув на кнопке Пуск (Start) выбрать Программы (Programs) затем Macromedia ® Macromedia Dreamweaver.

Через некоторое время после запуска программы на экране появится[*] небольшое диалоговое окно Workspace Setup, предлагающее вам выбрать вид рабочей среды Dreamweaver MX (рис. 3).

Рис. 3. Диалоговое окно Workspace Setup

В этом окне выбираем переключатель Dreamweaver MX Workspace В этом случае все нужные вам инструменты в последующем при работе в программе будут находиться в одном большом окне.

После этого на экране появится еще одно диалоговое окно по выбору типа вновь создаваемого документа (рис. 4).

Рис. 4. Пример диалогового окна для вновь создаваемого документа

Мы выбираем в колонке Create New (Создать новый) => HTML. В результате будет создан новый HTML документ (рис. 5).

НЕ нашли? Не то? Что вы ищете?

Рис. 5. Пример нового HTML документа

Работа в программе Dreamweaver очень похожа на работу в программе Word для подготовки и оформления документов. Но прежде чем начинать наполнять HTML документ информацией его сначала нужно сохранить. Сохранять документы нужнее не абы куда. Его нужно сохранять в специально отведенное для этого места – папку. В этой папке у вас уже хранятся, например, нарезанные функциональные куски дизайна в папке images или иллюстрации к тесту. Это очень важно! чтобы HTML документ был сначала сохранен, настроен, а потом уже наполнен информацией.

Для того чтобы сохранить документ выполняем стандартное действие в строке меню File=>Save As… (Файл => Сохранить как…) (рис. 6). Имя сохраняемого файла желательно задать как template. html

Рис. 6. Пример диалогового окна Save As

Таким образом, создаваемый HTML файл должен быть сохранен в ту же папку, где храниться папка images. Что касается имени сохраняемого документа, то оно, в принципе, может быть любым. Но так сложилось исторически, что HTML шаблон страниц будущего веб-сайта, обычно, сохраняется под именем template. html

После того как пустой HTML шаблон сохранен, необходимо произвести настройку документа. А именно с помощью команды в строке меню Modify=>Page Properties… выполнить установку следующих параметров (рис. 7).

Рис. 7. Диалоговое окно Page Properties (Параметры страницы)

В расположенном слева списке категорий (Category) обязательно нужно произвести настройки в категории Appearance и Title/Encoding.

В категории Appearance устанавливаем по нулям значения для полей HTML документа (рис. 8):

    Left Margin (Левое поле) = 0, Right Margin (Правое поле) = 0, Top Margin (Верхнее поле) = 0, Bottom Margin (Нижнее поле) = 0.

Рис. 8. Пример настройки параметров категории Appearance

В категории Title/Encoding устанавливаем следующие значения для параметров (рис. 9):

Рис. 9. Пример настройки параметров категории Title/Encoding

    Encoding (Кодировка) = из ниспадающего списка всевозможных кодировок выбираем «Кириллица (Windows)» - это указывает на то, что содержимое вашего сайта будет на русском и др. языках. Если ваш сайт только на иностранных языках, т. е. вы не собираетесь использовать русские (кириллические) буквы алфавита, то о выборе кодировки можно не заботиться. Document Type (DTD). Здесь в ниспадающем списке вариантов выбираем самый простой HTML 4.01 Transitional. Title (Заголовок) – это то, что обычно отображается у любого документа в его верхней строке заголовка (рис. 10). Здесь обязательно вписываете название вашего сайта.

Рис. 10. Пример HTML страницы веб-сайта отображаемой в браузере IE

Чтобы сохранить выполненную настройку параметров HTML шаблона достаточно нажать на клавиатуре комбинацию клавиш CTRL+S или выполнить в строке меню команду File=>Save.

Текст

Общие правила работы с текстовой информацие распространяются и на программу Dreamveawer. Текст можно печатать, копировать, вырезать, вставлять. Поскольку программа Dreamweaver немного интеллектуальная, то она позволяет вставлять скопированный текст с теми параметрами форматирования (шрифт, размер букв, цвет), которые были у текста в оригинальном документе. А это не всегда надо. И даже всегда не надо. Поэтому для того, чтобы случайно не возникло каких-либо недоразумений лучше всего проводить очистительную процедуру с помощью программы Блокнот*. Поэтому даже если вы выделите текст с какими-либо другими элементами, например, таблица, изображения, то, скопировав и вставив в блокнот, вы получите только текст и больше ничего.

Таким образом, процедура вставки текста в HTML документ из других источников следующая (рис. 11).

Рис. 11. Процедура «очищения» текстовой информации с помощью Блокнота

Т. е. выделив фрагмент текста в оригинальном документе, выполняем действие «Копировать». Затем в программе Блокнот выполняем действие «Вставить». В результате «очищение» произошло. Остался только текст. Теперь уже в Блокноте выделяем полученный текст, выполняем действие «Вырезать», переходим в HTML документ программы Dreamweaver и выполняем в нужном месте команду «Вставить». В результате «чистый» текст уже в HTML документе.

А вот текст в HTML документе можно форматировать. Форматирование производится стандартным способом. Выделив требуемый фрагмент текста с помощью панели Properties (Свойства)* выполняем настройку требуемых параметров (рис. 12).

Рис. 12. Окно HTML документа и расположение панели Properties (Свойства)

Основными параметрами форматирования текста являются (рис. 13):

    Font (Шрифт), Size (Размер), Text Color (Цвет), B (Bold) (Полужирный), I (Italic) (Курсив), Align (Выравнивание) по левому краю, по центру, по правому краю, по ширине.

Рис. 13. Панель Properties (Свойства) текста

Таблицы

HTML документы поддерживают работу с таблицами (рис. 14).

Рис. 14. Пример таблицы и расположение строк (row) и столбцов (column)

Для того чтобы добавить в HTML документ таблицу необходимо выполнить следующее действие в строке меню: Insert=>Table (Вставить=>Таблица). Или щелкнуть на панели инструментов Insert (Вставка) раздел Common (Общие) на кнопке Table (Таблица) (рис. 15).

Рис. 15. Панель Insert (Вставка), раздел Common (Общие), кнопка Table (Таблица)

В результате выполнения этих действий на экране появится диалоговое окно Table (Таблица) (рис. 16).

Рис. 16. Диалоговое окно Table (Таблица)

Параметрами таблицы являются:

    Row (Строки), Columns (Столбцы), Table width (Ширина таблицы), Border thickness (Толщина линий границ таблицы), Cell padding (Поля ячеек), Cell spacing (Промежутки между ячейками)*.

Указав требуемое число строк (row) и столбцов (column), а так же ширину таблицы, обычно в пикселах, щелкаем на кнопке «OK» получаем таблицу в HTML документе (рис. 17).

Рис. 17. Пример размещения таблицы в тексте

После того как таблица создана, можно щелкать в ее ячейках и вставлять туда текст или картинки. Кроме того ячейки таблицы можно форматировать. Для настроек параметров ячеек таблицы используется панель Properties (Свойства) (рис. 18).

Рис. 18. Панель Properties (Свойства) отдельной ячейки таблицы

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

Высота (Height) задает высоту строки, в которой находится ячейка, ширина (With) – ширину столбца, в котором находится ячейка (рис. 19).

Рис. 19. Геометрические параметры ячейки

Если указатель мыши подвести к границе таблицы и, в тот момент. когда он примет вид двунаправленных стрелок, щелкнуть основной (левой) клавишей мыши, то выделится вся таблица. Общие параметры таблицы отобразятся на панели Properties (Свойства) (рис. 20).

Рис. 20. Панель Properties (Свойства) таблицы

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

Изображения

Любой HTML документ обязательно содержит изображения. Это могут быть функциональные куски (slices) дизайна страницы, например, кнопки разделов или просто иллюстрации сопровождающие текст, или отдельные фотографии галереи.

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

Для того чтобы вставить изображения в HTML документ необходимо выполнить следующие действия в строке меню Insert=>Image (Вставка=>Изображение). В результате на экране появится диалоговое окно Select Image Source (Выбор расположения изображения) (рис. 21).

Рис. 21. Пример диалогового окна Select Image Source

Где вы должны указать источник расположения изображений и имя самого изображения. Поскольку источник расположения изображения является папка images для текущего сайта, то именно она и выбирается в поле Папка (рис. 20). После того как требуемое изображение выбрано, щелкаем на кнопке «OK», а затем на еще одном появивщемя диалоговом окне Image Tag Accessibility Attributes щелкаем еще раз на кнопке «OK» (рис. 22).

Рис. 22. Диалоговое окно Image Tag Accessibility Attributes

В результате выполнения этих действий в HTML документ будет вставлено изображение (рис. 23).

Рис. 23. Пример изображения в HTML документе

Если уже вставленное изображение выбрать, то с помощью панели Properties можно получить доступ к его параметрам (рис. 24).

Рис. 24. Панель Properties (Свойства) изображения (Image)

Обратите внимание на поле Src (Source) источник. Здесь указан относительный адрес, где хранится изображение. В нашем случае это папка images.

Ссылки

Ссылки или гипертекстовые ссылки (links) – это своего рода двигатель Интернета. Именно они позволяют пользователям переходить с одной страницы на другую, путешествуя тем самым по просторам всемирной паутины. В качестве ссылок могут выступать фрагменты текста, слова и даже отдельные символы, а также изображения (рис. 25).

Рис. 25. Пример гипертекстовых ссылок в виде изображения и текста

Отличительной чертой наличия гипертекстовых ссылок на веб-странице является превращение указателя мыши над ними в указующий перст («пальчик») (рис. 24).

Для того чтобы превратить уже имеющийся текст или изображение в ссылку его сначала необходимо выделить, а затем на панели Properties (Свойства) в поле Link (Ссылка) ввести требуемый адрес (рис. 26).

Рис. 26. Пример создания гипертекстовой ссылки для фрагмента текста

Ссылки могут быть абсолютными. В этом случае адрес, куда будет перенаправлен пользователь, необходимо вводить полностью, например, http://www. / Кроме абсолютных ссылок, ссылки бывают относительные, т. е. расположение новой веб-страницы определяется относительно расположение текущего документа. Например, если бы мы ввели для выделенного на рис. 26 фрагмент текста ссылку images/image1.jpg, то при щелчке на фразе “Ловцы приведений» открылась бы картинка image1.jpg хранящаяся в папке images.

[*] Подобная настройка на экране появляется только в момент первой загрузки программы Dreamweaver сразу после ее установки на компьютер. В последующие запуски подобное окно не появляется.

* Блокнот (Notepad) – это простейший текстовый редактор, который позволяет работать только с текстом, причем с простым текстом, без каких-либо параметров форматирования. Его всегда можно найти через кнопку Пуск=>Программы=>Стандартные (Start=>Programs=>Accessories).

* Панель Properties (Свойства) располагается в нижней части окна программы Dreamweaver. Если она отсутствует на экране, то ее необходимо развернуть, например, с помощью команды из строки меню Window=>Properties (Окно=>Свойства).

* Обычно значения параметров Border thickness (Толщина линий границ таблицы), Cell padding (Поля ячейки) и Cell spacing (Промежутки между ячейками) задаются равными нулю.