Работа в Macromedia Dreamweaver 8

Рис. 4. Диалоговое окно Email Link

В поле Text самим Dreamweaver8 подставляется текст, выделенный в окне документа (в нашем случае — слова по этому адресу). В поле E-Mail вводим нужный нам почтовый адрес. После этого остается нажать кнопку ОК.

Если мы после этого  переключимся в режим отображения HTML-кода, то увидим, что интернет-адрес  созданной нами почтовой гиперссылки  имеет вид:

mailto:admin@mail.somesite.ru

To есть от гиперссылки, указывающей на файл, она отличается наличием символов mailto: перед почтовым адресом, причем между ними не должно быть пробела.

Ну и, разумеется, мы можем  ввести почтовый адрес в представленном ранее виде в раскрывающийся список Link редактора свойств. В гиперссылку можно превратить не только строку текста, но и графическое изображение. Делается это точно так же, как было описано ранее: выделяем рисунок, вводим нужный интернет-адрес в раскрывающийся список Link редактора свойств и нажимаем клавишу <Enter>.

Работа со стилями  в Dreamweaver 8

Для работы со стилями нам  понадобится панель CSS Styles. (Панель — это, как мы уже узнали, небольшое окно Dreamweaver8, содержащее различные полезные инструменты.) Посмотрим, есть ли она на экране; если же нет, то включим пункт-выключатель CSS Styles в меню Window или нажмем комбинацию клавиш <Shift>+<Fll>. Сама эта панель показана на рис. 5.

Рис. 5 . Панель CSS Styles

Большую часть этой панели занимает иерархический список всех действующих на редактируемой в  данный момент Web-странице (как говорят опытные пользователи, активном документе) стилей с указанием, где какой стиль определен. Так, на рис. 5 видно, что из "корня" <style> растет чахлое "деревце" с единственной "ветвью" .style2. Это значит, что единственный стиль style2 определен во внутренней таблице стилей (она-то и обозначается пунктом <style>) Web-страницы. Как мы помним, этот стиль вместе с таблицей создал сам Dreamweaver8 в Web-странице, которая в данный момент открыта .

Ссделаем так, чтобы все заголовки первого уровня (тег <H1>) выравнивались по центру без всяких наших усилий. Для этого нужно создать стиль переопределения тега <H1> и поместить его во внешнюю таблицу стилей, а ее потом — привязать ко всем страницам сайта.

Нажмем маленькую кнопочку ,находящуюся на нижнем крае панели CSS Styles. На экране появится диалоговое окно New CSS Style, показанное на рис. 6.

Рис. 6. Диалоговое окно New CSS Style

Здесь нужно включить переключатель Tag в группе Selector Type, задающий создание стиля переопределения тега. После этого в раскрывающемся списке Tag мы сможем выбрать нужный нам тег, а именно <H1>. Переключатель Class группы Selector Type заставляет Dreamweaver8 создать для нас стилевой класс, а переключатель Advanced — комбинированный стиль.

Теперь включим верхний  переключатель в группе Define in и проверим, чтобы в расположенном правее раскрывающемся списке был выбран пункт (New Style Sheet File). Таким образом мы дадим Dreamweaver8 знать, что нам нужно поместить создаваемый стиль во внешнюю таблицу стилей, которая также должна быть создана. Переключатель This document only группы Define in предписывает Dreamweaver8 поместить создаваемый стиль во внутреннюю таблицу стиля, что нам совсем не нужно.

Нажимаем кнопку ОК. На экране появляется диалоговое окно сохранения файла Dreamweaver8, похожее на аналогичное окно Windows. Вводим в поле имени файла styles.css — именно так, без затей будет называться наша внешняя таблица стилей — и нажимаем кнопку сохранения. Новая, пока еще пустая таблица стилей создана.

Теперь перед нами —  диалоговое окно CSS Style Definition. В левой его части находится список Category, в котором выбирается категория атрибутов стилей, а сами эти атрибуты настраиваются с помощью элементов управления, находящихся в правой части этого окна.

Выберем в списке Category пункт Block — эта категория содержит атрибуты, затрагивающие формат абзацев текста. Окно CSS Style Definition примет такой вид — рис. 7.

Рис. 7. Категория Block диалогового окна CSS Style Definition

Выравнивание абзаца задается с помощью раскрывающегося списка Text align. Выберем в нем пункт center и нажмем кнопку ОК. В списке панели CSS Styles появится новое "дерево" с "корнем" styles.css (имя файла нашей внешней таблицы стилей) и ветвью h1 (только что созданный нами стиль переопределения тега <H1>).

Теперь осталось выбрать  окно документа, в котором открыта  страница default.htm, переключиться в  режим отображения кода HTML и убрать у тега <H1> атрибут ALIGN вместе со значением.

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

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

Список стилей в панели CSS Styles сейчас пуст, так как ни одной таблицы стилей к этой странице пока не привязано и внутренней таблицы стилейона не содержит. Нажмем кнопку расположенную на нижнем крае панели CSS Styles. На экране появится небольшое диалоговое окно Attach External Style Sheet, показанное на рис. 8.

Рис. 8. Диалоговое окно Attach External Style Sheet

Нажмем кнопку Browse этого окна, в появившемся на экране диалоговом окне Select File выберем файл нашей таблицы стилей и нажмем кнопку открытия. После этого имя выбранного файла появится в поле ввода File/URL. Включим переключатель Link, чтобы привязать эту таблицу стилей к Web-странице, и нажмем кнопку ОК. (Переключатель Import заставляет Dreamweaver8 поместить все определенные во внешней таблице стили во внутреннюю таблицу, а это нам не нужно.)

Опять же, выберем окно документа, в котором открыта страница наша страница, переключимся в режим отображения  кода HTML и уберем у тега <н1> атрибут ALIGN вместе со значением. Все, действие внешней таблицы стилей распространилось и на эту страницу! Осталось повторить  ту же самую процедуру для всех страниц нашего сайта.

Теперь создадим стиль  для сведений об авторских правах. Сохраним все открытые Web-страницы, закроем их и откроем страницу default.htm. Опять щелкнем по кнопке панели CSS Styles.Включим переключатель Class в группе Selector Type окна New CSS Style, в раскрывающийся список Name введем текст .copyright, проверим, включен ли верхний переключатель группы Define in и выбран ли в раскрывающемся списке правее него пункт styles.css. (Нам нужно поместить стиль copyright во внешнюю таблицу стилей styles.css, не так ли?) Нажимаем кнопку OK и попадаем в диалоговое окно CSS Style Definition.

Чтобы задать параметры шрифта, нам понадобятся элементы управления категории Type, так что выберем пункт Type в списке Category и увидим то, что показано на рис. 9. Выберем в раскрывающемся списке Size пункт smaller, а в раскрывающемся списке Style-пункт italic. Таким образом мы зададим для стилевого класса copyright уменьшенный курсивный шрифт. И нажмем кнопку OK.

Рис. 9..Категория Type диалогового окна CSS Style Definition

Теперь выберем окно документа, в котором открыта страница. Нам  нужно будет удалить тег <em>, задающий курсивное начертание текста сведений об авторских правах, чтобы он не мешал нам, и привязать только что созданный стилевой класс к этому тексту(точнее к тегу<P>).

Поставим текстовый курсор на текст мы, разработчики, щелкнем  кнопку <em> в секции тегов правой кнопкой мыши и выберем в появившемся на экране контекстном меню пункт Remove Tag. Так мы удалим тег <em>, но оставим его содержимое. (Если бы мы нажали клавишу <Del>, то был бы удален и тег, и его содержимое.) Теперь останется только щелкнуть по кнопке <p> секции тегов, дабы выделить весь абзац, и выбрать в раскрывающемся списке Style редактора свойств пункт copyright,соответствующий нужному стилевому классу. Все!

Вставка специальных  символов и работа с таблицами  в Dreamweaver8

Вставка символов

Вставим в текст значок © ("копирайт"). Поставим текстовый  курсор в то место текста, где  мы хотим поместить этот знак. И  выберем пункт Copyright подменю Special Characters, находящегося, в свою очередь, в подменю HTML меню Insert.

Dreamweaver8 выведет небольшое предупреждение (рис. 1), говорящее о том, что данный символ может не отобразиться корректно в случае использования заданной нами в настройках Dreamweaver кодировки. Закроем его, нажав кнопку ОК, а чтобы оно не выводилось на экран в дальнейшем, перед закрытием включим флажок Don't show me again.

На рис. 2 показан символ ©, только что вставленный нами в  текст. (Не забудем также исправить  последнюю строку.)

Рис. 1. Предупреждение о возможном некорректном отображении специального символа

Рис. 2. Символ © в тексте страницы

Здесь мы столкнулись с  так называемыми специальными символами HTML. Эти символы из соображений все той же совместимости не могут быть просто так вставлены в код HTML, а заменяются либо числовыми кодами, либо мнемоническими обозначениями. В частности, символ © обозначается в HTML-коде как &сору;. Вот так:

<Р><ЕМ>&сору; мы, разработчики, 2004 год.</ЕМ></Р>

Кстати, символ двойных кавычек (") обозначается как ", символ "меньше" (<) — как &1t; , а символ "больше" (>) — как >. (Знак точки с запятой в конце обязателен — нужно иметь это в виду при правке HTML-кода!)

Еще один полезный специальный  символ — неразрывный пробел. Что бы ни случилось, Web-обозреватель никогда не будет переносить строку по этому пробелу. Чтобы вставить такой пробел в текст, необходимо поставить в нужно место текстовый курсор, удалить обычный пробел, если он там есть, и нажать комбинацию клавиш <Сtr1>+<Shift>+<Пробел>. В коде HTML неразрывный пробел обозначается так —  ,.

Иногда нужно, наоборот, разорвать  строку абзаца на две, да так, чтобы  этот разрыв сохранялся всегда. Для  этого нужно поставить текстовый  курсор на нужное место и нажать комбинацию клавиш +. При этом в код HTML будет вставлен особый одинарный  тег  
— тег разрыва строк.

Разделение абзацев горизонтальной линией. Поместим текстовый курсор в начале абзаца и выберем пункт Horizontal Rule подменю HTML меню Insert. Созданная нами горизонтальная линия показана на рис. 3.

Рис. 3. Горизонтальная линия

Чтобы удалить вставленную  не в то место горизонтальную линию, нужно выделить ее щелчком мыши и  нажать клавишу <Del>.

Горизонтальная линия  создается одинарным тегом <HR> и относится к так называемым нетекстовым элементам. Нетекстовые элементы определяются в самом коде HTML, но не относятся к тексту. Кроме горизонтальных линий, к ним относятся еще и таблицы, с которыми мы сейчас

Работа с таблицами  в Dreamweaver8

Если нужно поместить  на ограниченном пространстве Web-страницы множество числовых (и не только числовых) данных, нет лучшего средства, чем таблица. Если необходимо создать красивый список, снова на помощь приходит таблица. Таблицы заполонили Web-документы. И немудрено: при нескольких не слишком значительных недостатках они обладают массой достоинств.

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

Пустая таблица создается  выбором пункта Table меню Insert или нажатием комбинации клавиш <Ctrl>+<Alt>+<T>. На экране появится диалоговое окно Table, показанное на рис. 3.19.

В полях ввода Rows и Columns этого окна вводятся, соответственно, количество строк и столбцов создаваемой таблицы. Введем в поле Rows число 5 — пока наша таблица будет содержать пять строк. А в поле Columns введем число 2.

Рис. 4. Диалоговое окно Table

В поле ввода Table width задается ширина таблицы в пикселах или процентах от ширины родителя. В раскрывающемся списке, расположенном справа от этого поля ввода, нужно будет выбрать соответственно пункт pixels или percent. Давайте зададим ширину таблицы, равную 400 пикселов.

В поле ввода Border thickness задается толщина границ таблицы в пикселах. По умолчанию она равна 1. Мы можем ввести 0, чтобы убрать границы совсем.

В поле ввода Cell padding задается расстояние между границей ячейки таблицы и ее содержимым в пикселах. По умолчанию оно равно 1.

Аналогично, поле ввода Cell spacing служит для задания расстояния между границами отдельных ячеек. По умолчанию оно равно 2.

Остальные элементы управления нам пока не пригодятся. Поэтому  сразу нажмем кнопку ОК. В результате у нас должно получиться что-то похожее на рис. 5.

Рис. 5. Наша первая таблица

Интересно, что, хотя ранее  мы задали нулевую толщину границы  таблицы (в поле ввода Border thickness диалогового окна Table), Dreamweaver8 все равно отобразит так называемую невидимую границу, состоящую из тонких точечных линий. В Web-обозревателе эта граница отображаться не будет. Если бы мы задали ненулевую толщину видимой границы таблицы, Dreamweaver8 отобразил бы ее в виде сплошной линии.

Теперь поставим текстовый  курсор в первую (верхнюю левую) ячейку таблицы и начнем набирать текст. Набрав содержимое первой ячейки, нажмем клавишу <Таb>, чтобы переместить текстовый курсор во вторую ячейку таблицы, и продолжим создание списка.

Dreamweaver8 поможет нам в этом. Когда мы наберем содержимое последней ячейки таблицы и нажмем клавишу <Таb>, он добавит в таблицу еще одну строку, Так что нам не придется заниматься этим вручную. Но если же нам понадобится вставить в таблицу новую строку, нам будет нужно поместить текстовый курсор в любую ячейку строки, над которой требуется вставить новую строку, и либо выбрать пункт Insert Row в подменю Table меню Modify, либо нажать комбинацию клавиш <Ctrl>+<M>.

В результате у нас должно получиться нечто, похожее на рис. 6. Пока мы не будем заниматься оформлением  текста списка, а лучше поэкспериментируем с нашей первой таблицей.

Рис. 6. Таблица с заполненными ячейками

Работа с таблицей