Структура и размещение файлов

Рассмотрим основные средства и приемы работы с Dreamweaver на осно­ве инструкционных материалов, подготовленных С.И. Рыковым.

Вначале создадим каталоги для элементов сайта (рис. 1.10.3.1).

В корневом каталоге Test разместим веб-страницы (.HTML-файлы), в каталоге Images - картинки (фотографии, элементы дизайна и многое другое) и в каталоге CSS ‑ файлы стилей (п. 1.2.14).

Для начала работы со страничкой нужно иметь структуру этой стра­нички. Делается эта структура при помощи модульной сетки. Рассмотрим пример такой сетки (рис. 1.10.3.2).

Рисунок - 1.10.3.2. Пример модульной сетки

Menu, SubMenu - главное меню сайта и подменю текущего раздела.

Text - основное наполнение, занимает весь экран (контент).

Copyright - "подвальный" раздел для баннеров, кнопок, копирайтов и др.

1.10.4. Создание заготовки HTML‑документа

Для начала войдите в свой сайт (выберите его из списка) и создайте но­вый файл командой New File. На панели справа появится файл Un­­tit­led.Htm, который стоит сразу переименовать в Index.Htm или Default.Htm (так обычно указывается название первой головной стра­нич­ки сайта). Двойным щелчком открываем созданный файл и видим чистый белый лист (заготовка документа), на котором будем создавать нашу страничку.

Зададим основные свойства нашей странички командой Modify/Page Properties (^J) и появится окно свойств (рис. 1.10.4.1).

Title - название странички, отображаемое в заголовке окна браузера.

Background Image - фоновый рисунок (не используем).

Background/Text - цвет фона/текста (белый/черный).

Links - цвет ссылок (темно-синий).

Visited Links - цвет посещенных ссылок (фиолетовый).

Active Links - цвет текущей активной ссылки (темно-красный).

Left/Top Margin, Margin Width/Height - отступ от края страницы до начала контента слева/сверху и его ширина/высота.

Document Encoding - кодировка документа.

Tracing image - кладет на фон полупрозрачную картинку для точ­­ного совмещения дизайна в HTML с наброском, сделанным в PhotoShop.