Настройка цвета страницы

Ÿ Выделите всю таблицу. Чтобы настроить цвет фона таблицы, на панели свойств, в полеBg color (Цвет фона) можно:

а) щелкнуть по квадратику, откроется палитра, там выбрать нужный цвет,

б) если известен (задан) точный код цвета, то надо набрать этот код рядом в поле .

Мы создаём сайт по образцу, поэтому введите код нашего фона - #F7F8FB.

Это и будет цвет фона web-страницы.

Ÿ Сделаем ячейки по меню разноцветными (но в тон созданного рисунка - "шапки" сайта). Выделите (удерживая Ctrl) ячейку меню, где будет надпись "Главная", на панели свойств, в самом нижнем полеBg введите код цвета #B5C5DB (это число можно копировать туда с документа Word!). Аналогично задайте для ячеек "Раздел 2, Раздел 3, Портфолио" цвета: #C9D5E4, #D9E1EC, #EBEEF5.

Посмотрите вид web-страницы в браузере: нажмите F12 (или Файл / Просмотр в браузере). Браузер не закрывайте, перейдите опять в Dreamweaver.

Вставка рисунков

Предварительно в папке со своим сайтом создайте или скопируйте папку Images(она хранится в папке \Лаб5_DW_ создаём сайт).

Ÿ Вставка `шапки` сайта. Щелкните в верхнюю ячейку (`шапку`) и нажмите Вставка /Рисунок(Insert /Image). Вставьте из папки Images рисунок Shapka_sv.png.

Анализ разработки коллажа для `шапки` сайта. Чтобы для следующего сайта создать уже свою `шапку`- коллаж, в папке `Как создана шапка сайта` откройте в Photoshop рисунок-шапку, например Шапка сайта_my.psd.

Посмотрите в палитре Слои (попеременно отключая - включая каждый слой), из каких слоёв она сделана. Посмотрите остальные рисунки папки под именами Исходник 1, 2,… Итак, наша `шапка` – это коллаж из ряда фото (исходников), в них фигуры сначала тщательно отделялись от фона, потом копировались в один рисунок и компоновались в шапку-коллаж

Ÿ Вставка баннера.Щелкните под `шапкой` в правую ячейку и нажмите Вставка /Рисунок. Вставьте из папки Images баннер ban_lupa_468.gif (или другой по желанию). Выровняйте его:

- по горизонтали - по правому краю ячейки (на панели свойств нажмите кнопку По правому краю);

- по вертикали рисунок сместите к верхнему краю ячейки - выделите ячейку (удерживая Ctrl) и на панели свойств, в поле Vert (По вертикали) выберите Top (К верху).

Ÿ Вставьте рисунокв полосу, где будет основной текст сайта (из папки Images файл бизнесмены.jpg или др. по желанию). Пока текста нет, его можно не выравнивать.

Сохраните страницу (Ctrl+S). Посмотрите, как она выглядит в браузере: перейдите в браузер (если вы его не закрыли) и нажмите F5 (Обновить).

СОВЕТ: когда будете делать свой сайт, сначала вставьте основной текст сайта, а затем в нужные места текста уже вставляйте рисунки.

Ÿ Настройки рисунка на панели свойств.Выделив вставленный рисунок, панель свойств примет вид, как на рис. 9.

Рис. 9. Панель свойств рисунка

Рассмотрим, как управлять выравниванием рисункаотносительно текста. Не путайте 2 способа выравнивания:

1) абзац текста с рисунком можно выровнять по горизонтали - прижать к левому /правому краю или по центру - кнопками

2) Чтоб установить, как текст будет обтекать рисунок, в списке Align (Выравнивание) выбирают 1 из 10 способов выравнивания:

Тип выравнивания(Align)	Положение рисунка на странице
Default – выравнивание, установленное в браузере по умолчании. Обычно это выравнивание Baseline. Baseline – нижний край рисунка выравнивается по базовой линии строки текста, в которую вставлен рисунок. (Базовая линия – это линия, на которую опираются буквы, т.е. это линия подчеркивания) Button– тоже, что и Baseline	Рисунок здесь вставлен после точки. Нижний край рисунка выровнялся по базовой линии строки, в которую он вставлен
Absolute Bottom- выравнивает нижний край рисунка по самой нижней точке текущей строки (по нижним хвостикам символов)
Top (Верх) – верхний край рисунка выравнивается по верхнему краю строки, в которую он вставлен. Text Top- аналогично	Данный рисунок здесь вставлен после точки. Верхний край рисунка выровнен по верхнему краю строки, в которую он вставлен
Middle– выравнивает центр рисунка по базовой линии строки, в которую он вставлен. Absolute Middle- выравнивает центр рисунка по середине высоты строки, в которую он вставлен	Рисунок здесь вставлен после точки. Центр рисунка выравнивается по базовой линии строки, в которую он вставлен
Left– выравнивает рисунок по левому краю страницы и обтекает текстом справа	Рисунок стоит слева. А прилегающий текст располагается вокруг правого края рисунка
Righ – выравнивает рисунок по правому краю страницы и обтекает текстом слева	Рисунок стоит справа. А прилегающий текст располагается вокруг правого края рисунка

Html-тэг для вставки рисункав документ записывается так:

<img src="file-name.ext">Так, если вставить рисунок makaka. gif, то тэг будет таким: <img src="makaka. gif"> Для выравнивания рисунка к тэгу добавляют атрибут align=.. Так, тэг для рисунка, выровненного по левому краю страницы, таков:<img src="makaka.gif" align=left> Подробнее -Глава5

Если точка вставки находится за пределами абзаца, то этот тэг ещё окружается тэгами абзаца <p> … </p>

ЗАДАНИЕ: изучите параметры настройки рисунка.

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

2) Примените к рисунку обводку толщиной 3 пкс (на панели свойств в поле Border). Вставьте сверху и снизу от рисунка свободное пространство шириной в 5 пкс (на панели свойств в поле Vspace). При этом в режиме Кода наблюдайте, как изменяется html-код рисунка.

3) Задайте рисунку комментарий – альтернативное слово (на панели свойств в поле Alt). Комментарий будет виден при просмотре страницы в браузере. В режиме Кода найдите этот комментарий (атрибут ALT).

ЗАДАНИЕ. Для своего сайта (выпускной работы) разработайте коллаж для `шапки` сайта и баннер стандартного размера 468´60 пкс.