Структура и размещение файлов
Рассмотрим основные средства и приемы работы с Dreamweaver на основе инструкционных материалов, подготовленных С.И. Рыковым.
Вначале создадим каталоги для элементов сайта (рис. 1.10.3.1).
Риc. 1.10.3.1. Структура каталогов с элементами сайта
В корневом каталоге Test разместим веб-страницы (.HTML-файлы), в каталоге Images - картинки (фотографии, элементы дизайна и многое другое) и в каталоге CSS ‑ файлы стилей (п. 1.2.14).
Для начала работы со страничкой нужно иметь структуру этой странички. Делается эта структура при помощи модульной сетки. Рассмотрим пример такой сетки (рис. 1.10.3.2).
Рисунок - 1.10.3.2. Пример модульной сетки
Logo - логотип странички (броский рисунок для привлечения внимания).
Menu, SubMenu - главное меню сайта и подменю текущего раздела.
Text - основное наполнение, занимает весь экран (контент).
Copyright - "подвальный" раздел для баннеров, кнопок, копирайтов и др.
1.10.4. Создание заготовки HTML‑документа
Для начала войдите в свой сайт (выберите его из списка) и создайте новый файл командой New File. На панели справа появится файл Untitled.Htm, который стоит сразу переименовать в Index.Htm или Default.Htm (так обычно указывается название первой головной странички сайта). Двойным щелчком открываем созданный файл и видим чистый белый лист (заготовка документа), на котором будем создавать нашу страничку.
Зададим основные свойства нашей странички командой Modify/Page Properties (^J) и появится окно свойств (рис. 1.10.4.1).
Рисунок - 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.
Дата добавления: 2015-04-15; просмотров: 598;