Обучение dreamweaver

Дримвивер является мощным инструментом, который позволяет в десятки раз упростить многие рутинные операции с которыми неизбежно сталкивается любой web-мастер. Удобный переход между графическим режимом и режимом редактирования кода позволяет получить максимальный контроль над создаваемым сайтом.

Adobe Dreamweaver для новичков.

В этом уроке мы научимся работать с данным редактором кода и произведем первичную настройку программы:

Главное окно программы

Первым делом необходимо нажать вкладку Правка и перейти Настройки –> Создать документ (New Document).

В появившемся диалоговом окне необходимо установить следующие парпметры:

Тип документа по умолчанию (DTD) –> HTML 4.01 Transitional

Кодировка по умолчанию –> Кириллица (Windows)

Меняем кодировку

Далее выбираем раздел файлы –> управление веб–сайтами (Files -> Manage Sites) , расположенные в правом нижнем углу окна программы:

Управление сайтами

Заходим на созданный денвером локальный диск Z:\ (данный диск создается программой по умолчанию). Там в директории home создаем папку с названием plata.ru, в которой, в свою очередь, создаем папку www, в которой создаем папку img. В итоге должна получиться иерархия - Z:\home\plata.ru\www\img.

Нажимаем Создать (New) –> Сайт (Site)

На вкладке Локальная информация вводим основную информацию о сайте:

Имя сайта: PLATA.RU

Локальная корневая директория: Z:\home\plata.ru\www\

Папка изображений по умолчанию: Z:\home\plata.ru\www\img\

создаем новый сайт

Нажимаем ОК. Далее в главном окне программы нажимаем файл (File) –> создать (New) –> html –> создать (Create) .

В открывшемся документе, между тегами <body></body> прописываем следующий код:

<h1>Привет мир</h1>

Нажимаем файл (File) –> сохранить как (Save as) и сохраняем в папке Z:\home\plata.ru\www\ под именем index.html

Перезапускаем Денвер для обновления списка адресов и в любом имеющемся браузере, в адресной строке вводим www.plata.ru.

Должно получиться так:

Первый HTML код

Осталось только прикрепить таблицу стилей и настройку дримвивера можно считать оконченной.

Создаем новый файл с именем SS.css в корневой директории сайта и прописываем внутри небольшой код

h1 { color:red}

Нажимаем правой кнопкой мыши в пустой области работы со стилями, расположенной в правом верхнем углу окна программы, и выбираем присоеденить таблицу стилей (Attach Style Sheet) .

Присоединяем таблицу стилей

Вводим адрес, где сохранили таблицу и нажимаем ОК. Сохраняем оба документа и проверяем в браузере. Цвет надписи должен стать красным.

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

В следующем уроке мы разберем основы работы в Photoshop.

Наверх

Источник: Создание сайтов