Создание статической страницы

Добавление рисунков

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

Добавить рисунок на страницу:
1. Сохраните страницу.

Вы можете вставлять рисунки в несохраненный документ, но если Вы это делаете, покажется диалоговое окно, информирующее о том что URL, которой используется, полный путь к рисунку на основе локальных папок. Dreamweaver исправит URL позже, когда сохраните документ, но намного легче сохранить документ перед тем как добавлять рисунки.

2. Для вставки рисунка в место где есть заполнитель рисунка (image placeholder), дважды кликните на этом заполнителе.

Например, для вставки графического баннера вверху страницы Trio Motors, дважды кликните на заполнителе “Banner (600 x 41)”. Дальше в диалоговом окне выберите нужный рисунок.
3. Внизу диалогового окна убедитесь, что значение Relative To выставлено на Document.
4. Найдите рисунок в папке images/trio_logo.jpg.
5. Нажмите OK или Select (Windows) или Choose (Macintosh) для вставки рисунка.

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

6. Вставлять картинки вместо заполнителей можно и с помощью Инспектора свойств. Выделите заполнитель и с помощью выбора файлов с панели Files ().
7. Вы также можете вставлять рисунки без image placeholder-а, выберите вид просмотра дизайна, поставьте курсор там, где хотите вставить рисунок и выберите Insert > Image.

Если вставляете рисунок, который находится за пределами локального сайта, Dreamweaver автоматически предлагает сохранить рисунок в пределах локального сайта.

8. Сохраните страницу.

Добавить обтекание текста вокруг рисунка:
1. Выделите рисунок.
2. В панели CSS Styles (Window > CSS Styles), нажмите кнопочку New CSS Style.
3. В диалоговом окне New CSS Style, выберите Advanced из опций Selector Type и наберите текст #SplashImage (включая значок номера впереди) в текстовом поле Name. В опции Define In, выберите This Document Only. (стиль применять только к этому документу).
4. Нажмите OK.
5. В диалоговом окне CSS Style Definition, выберите категорию Box, потом выберите Left из выпадающего меню Float.
6. Нажмите OK для определения стиля и закрытия диалогового окна.
7. Стиль будет применен ко всем рисункам (которые имеют значение SplashImage их атрибута ID), делая обтекание текстом вокруг рисунка.

Установка цвета фона

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

Изменить цвет фона боковой колонки:
1. Кликните на тексте заголовка боковой колонки.
2. В Инспекторе тегов (Window > Tag Inspector), выберите закладочку Relevant CSS.
3. В списке правил, которые применяются к выделенному, выделите линию с правилом #col1.

В статусной линии посредине Инспектора тегов появится строка “In file: divs.css” (В файле: divs.css) которая означает, что правило хранится в файле divs.css.

4. Нажмите на кнопочку Show Category View (), потом раскройте категорию Background.

Свойство background-color (цвет фона) показано с перечеркнутым, что значит что свойство не применяется к выбранному элементу. Но цвет фона виден, так как фон текста прозрачный, разрешая цвету фона "высшего" тега показываться сквозь текст.

5. Нажмите на цветной квадратик в правой колонке в линии background-color. Пипеткой выбираете текст.

6. Выберите цвет. Вы можете также выбрать цвет в палитре или кликнуть в любом месте экрана для выбора цвета той точки в которой кликнете. Цвет колонки изменится на цвет, который выбран.
7. Если выбран темный цвет, откройте (с еще выбранным правилом #col1) категорию Font в нижней части Инспектора тегов и выберите контрастный цвет (к примеру - белый) для текста используя атрибут color (цвет).
8. Сохраните страницу.
9. Переключитесь на документ divs.css (используя меню Window) и сохраните документ.

Dreamweaver автоматически откроет файл стилей divs.css после изменения цвета фона, если он описан в таблице стилей.

<< назад

Источник:
Macromedia Dreamweaver для каждого -
статьи, форум, обмен ссылками.

Реклама