6. Ввод текста web-страницы

Введём в ячейки под меню надписи: Главная, Раздел 2, Раздел 3, Портфолио

Щелкните в ячейку, где будет надпись `Главная`. На панели свойств, в полях Format, Style пусть задано None (Нет), а в поле Size (Размер) назначьте =18.

Если начнёте вводить текст, он вплотную `прилипнет` к левой границе, т.к. у нас отступы в ячейках (Cell Padding) =0. Поэтому сначала вставьте 2 пробела, а потом введите слово. Но лишние пробелы на web-страницах игнорируются! Поэтому для ввода дополнительных пробелов нужно нажимать Ctrl+Shift+пробел (html-код такого пробела будет  ).

Аналогично введите надписи Раздел 2, Раздел 3, Портфолио.

7. Настройка гиперссылок

Настройка оформления гиперссылок. На панели свойств нажмите кнопку Page Properties (Параметры страницы). Откроется окно, зайдите во вкладку Links (Ссылки) и настройте цвета ссылок (точнее, цвета текста, на который настроены ссылки), например, так:

Рис. 10

Создание остальных страниц сайта и настройка ссылок

Нам нужно от надписей в меню (Главная, Раздел 2, Раздел 3, Портфолио) настроить ссылки на соответствующие web-страницы сайта. Но эти web-страницы ещё не созданы. По принципам web-дизайна, все страницы сайта должны быть оформлены в едином стиле, поэтому главную страницу сайта (index.html) можно скопировать ещё 3 раза, чтоб получить страницы-шаблоны под остальные разделы сайта, а потом внести в них изменения.

Для этого откройте папку вашего сайта (в Проводнике). Выделите файл index.html и скопируйте его в эту же папку 3 раза. Полученные файлы переименуйте в razdel_2.html, razdel_3.html, portfolio.html.

Настройка гиперссылок. Вернитесь в Dreamweaver. Выделите надпись `Раздел 2` и на панели свойств, в поле Ссылка (Link) щелкните справа по значку . Откроется окно, где выделите файл web-страницы (razdel_2.html), на которую нужно настроить ссылку. Ок.

Аналогично настройте ссылку от надписи Раздел 3 на файл razdel_3.html, от Портфолио на файл portfolio.html. От надписи `Главная` тоже настройте ссылку на страницу index.html.

Когда откроете для доработки web-страницы razdel_2.html, razdel_3.html, portfolio.html, в их меню опять аналогично нужно настроить ссылки на соответствующие страницы.

Подробнее о html-тэгах для вставки гиперссылок – см. Главу 5.

Рисунки в качестве ссылок. Карты изображений

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

1. Создание рисунков-кнопок

2. Создание карты-изображения

3. Работа с фоновыми рисунками

4. Рисунки-кальки

1. Создание кнопок. Кнопки на сайтах – это небольшие картинки, изображающие кнопки. Пользователи интуитивно понимают, что по ним можно щелкать для перемещения по сайту (или для др. действий). Чаще для создания кнопки готовят маленький рисунок, обычно в формате GIF. Затем вставляют рисунок кнопки на web-страницу и назначают на него ссылку.

2. Создание карты-изображения (активного изображения).

На карте-изображении ссылка присваивается не всему рисунку, а отдельным его частям – горячим областям, которые вы указываете. Т.е. одна большая картинка может содержать несколько ссылок, при щелчках по ним пользователь будет попадать на разные web-страницы (или разные места текущей web-страницы).

Например, на рисунке карты мира можно указать несколько горячих областей. Затем от этих горячих областей назначить ссылки на разные документы (с информацией о местности выделенных областей).

Но чаще карты-изображения используют для объединения нескольких навигационных кнопок в один рисунок. Так достигается единство стиля их оформления.

Например, можно в Photoshop сделать для «шапки» сайта коллаж, и в коллаж включить полосу для горизонтального меню для навигации по сайту (см. рис. 11). В этой полосе (ещё в Photoshop) ввести названия разделов сайта. Затем в Dreamweaver, вставить в web-страницу эту «шапку»-коллаж, на надписи (названия разделов сайта) назначить горячие области и настроить на них ссылки на соответствующие web-страницы (разделы) сайта.

Рис. 11. Карты-изображения позволяют связывать одну большую картинку с множеством web-страниц.

Для создания карты изображения:

1. Вставьте рисунок, который хотите использовать в качестве карты-изображения. Выделите его и нужные настройки карты (Map) отразятся на панели свойств (см. рис. 12).

Если панель закрыта, нажмите Ctrl+F3. Если на панели поле Map и инструменты создания горячих областей не видны, щелкните по кнопке со стрелкой () в правом нижнем углу - панель развернётся полностью.

Рис. 12

2. В поле Map на панели свойств введите имя вашей карты.

3. Включите один из инструментов создания областей и на рисунке очертите им горячую область.

При этом для создания прямоугольной области выберите инструмент _, для создания округлой области выберите Oval . Для создания областей неправильной формы выберите инструмент Многоугольник , щелкните по рисунку, чтобы определить начальную точку области; потом щелкайте по периметру нужной области. Щелкните по инструменту Pointer, чтобы замкнуть многоугольник.

4. В поле Link на панели свойств назначьте на горячую область ссылку: щелкните по кнопке , откроется окно, где укажите файл для ссылки. В поле Alt на панели свойств введите альтернативное слово(а) для горячей области (оно будет всплывать в браузере при наведении на него мышкой).

Горячие области изображаются в виде полупрозрачных цветных фигур на изображении. Эта функция лишь позволяет проще видеть и выделять нужные области, в браузере они не видны.

5. Щелкните по рисунку за пределами текущей области. Для создания других областей со ссылками повторите шаги 2 - 4.

После создания карты-изображения её горячие области можно изменять:

• Щелкнув по области, на панели свойств можно сменить ссылку и любые др. свойства.

• Для перемещения области щелкните по ней и перетащите.

• Щелкните правой кнопкой мыши по области и выберите Bring To Front (На передний план) или Send То Back (На задний план), чтобы определить порядок наложения областей.

• Для изменения формы области выделите ее инструментом Pointer (Указатель) и перетащите метки в углах области в нужных направлениях.

Html-код создания карты изображения.

Чтобы изображение стало активным, с горячими областями, к тегу вставки рисунка <img src="image .gif"> нужно добавить атрибут usemap и тег <map>. Т.е. атрибут usemap задаётся для активных областей рисунка; причем в атрибуте после равно указывают символ "#" и имя карты:

<img src="mymap.gif" usemap="#sitemap">

Границы активных областей задаются координатами углов прямоугольника и многоугольника, или центра и радиуса круга. Например:

<img src="image .gif" usemap="#imap">

<map name="imap">

<area shape="rect" coords="0,0,100,100" href="http://www.int.ru/help/index.html">

<area shape="rect" coords="100,0,200,100" href="http://www.int.ru/shop/index.html">

<area shape="default" nohref>

</map>

Но такое указание координат – работа трудоёмкая, лучше это делать в режиме дизайна – см. выше.

3. Работа с фоновыми рисунками (рисунками, выступающий как фон для web-страницы). С помощью них можно создавать интересные эффекты, но смотрите, чтобы не возникло конфликтов цвета, когда текст и др. объекты переднего плана нечитаемы на фоновом рисунке.

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

В качестве фона старайтесь выбирать неконтрастные изображения, которые будут укладываться на странице без заметных швов. Легкая текстура смотрится гораздо лучше, нежели яркие, `кричащие` рисунки.

Для добавления фонового рисунка:

1. Нажмите в меню Изменить /Свойства страницы (Modify/ Page Properties), чтобы открыть диалоговое окно Page Properties.

2. Чтоб в поле Background Image (Фоновое изображение) ввести имя графического файла, щелкните по кнопке Browse (Обзор), выделить нужный файл. ОК.

4. Рисунки-кальки. Смысл рисунков-калек. Можно создать макет дизайна страницы в графическом редакторе, а затем в Dreamweaver накладывать на нее реальные элементы. Рисунок-калька заменяет фон и фоновое изображение, но, в отличие от них, в браузере никогда не отображается.

Для добавления рисунка-кальки на страницу:

1. Нажмите в меню Изменить /Свойства страницы (Modify/ Page Properties), чтобы открыть диалоговое окно Page Properties.

2. Во вкладке Tracing Image (Изображение-калька) щелкните по кнопке Обзор (Browse). Откроется окно, где выберите файл с рисунком-калькой. Перетащите бегунок Прозрачность (Transparency) в нужную сторону для установки подходящей степени прозрачности рисунка-кальки. Нажмите ОК.

Кроме изменения прозрачности кальки, её можно включать и выключить, менять положение на странице. Для выбора положения кальки на странице: View /Tracing Image /Adjust Position (Вид /Рисунок-калька /Выбор положения), откроется окно Настройки кальки (Adjust Tracing Position). Введите координаты рисунка в полях X и Y (калька станет в желаемое место)