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

Рассмотрим основные средства и приемы работы с 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. На панели справа появится файл Un­­tit­led.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; просмотров: 612;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.004 сек.