Adobe dreamweaver cs6 уроци за изпращане на формуляри. Dreamweaver обучение. Избор на режим на показване на документ

Dreamweaver е мощен инструмент, който ви позволява да опростите десетократно много рутинни операции, с които всеки уеб администратор неизбежно се сблъсква. Удобен преход между графичен режим и режим за редактиране на код ви позволява да получите максимален контрол върху сайта, който създавате.

Adobe Dreamweaver за начинаещи.

В този урок ще научим как да работим с този редактор на код и да извършим първоначалната настройка на програмата:

Първото нещо, което трябва да направите, е да щракнете върху раздела Редактиране и да отидете Настройки –> Създаване на документ (Нов документ).

В диалоговия прозорец, който се появява, трябва да зададете следните параметри:

Стандартен тип документ (DTD) –> HTML 4.01 Преходен

Кодиране по подразбиране –> кирилица (Windows)

Отиваме към създаденото локален диск Z:\ (този диск се създава от програмата по подразбиране). Там, в домашната директория, създаваме папка, наречена plata.ru, в която от своя страна създаваме папката www, в която създаваме папката img. Резултатът трябва да е йерархия - Z:\home\plata.ru\www\img.

Кликнете Създаване (Нов) –> Сайт (Сайт)

В раздела Местна информация Въведете основна информация за сайта:

Име на уебсайта: PLATA.RU

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

Папка с изображения по подразбиране: Z:\home\plata.ru\www\img\

В документа, който се отваря, между таговете напишете следния код:

Здравей свят

Рестартираме Denver, за да актуализираме списъка с адреси и във всеки наличен браузър въведете www.plata.ru в адресната лента.

Трябва да изглежда така:

Всичко, което остава, е да прикачите стиловия лист и настройката на Dreamweaver може да се счита за завършена.

Ние създаваме нов файлс името SS.css в основната директория на сайта и напишете малък код вътре

Щракнете с десния бутон върху празната зона за работа със стилове, разположена в горния десен ъгъл на прозореца на програмата, и изберете Прикачете стилов лист.

Въведете адреса, на който сте запазили таблицата, и щракнете върху OK. Запазваме двата документа и ги проверяваме в браузъра. Цветът на надписа трябва да стане червен.

В този урок конфигурирахме Dreamweaver да работи с нашия бъдещ уебсайт. Тази програмаТой ще се окаже просто незаменим и скоро ще можете да се убедите в това сами.

В следващия урок ще разгледаме.

Цел : Запознайте се с Dreamweaver, когато създавате уеб страница, както и работното пространство на програмата.

Задачи:

  • Разгледайте работната зона.
  • Научете се да създавате нова страница с помощта на CSS съдържание.
  • Научете се да запазвате документ.
  • Научете как да променяте заглавието на страницата и текстовите заглавия.
  • Научете се да вмъквате текст от външен документ.
  • Научете се да добавяте изображения на преден план и фон.
  • Научете се да създавате, променяте и избирате CSS стилове.
  • Научете се да работите с код и режими на показване на код и дизайн.

Преди да започнете да учите,.

В процеса на завършване на цялата лабораторна работа ще създадете пълноценен уебсайт за туристическа компания.

Структурата на уеб страниците е показана на фигура 1.

Фигура 1 - Структура на окончателния уебсайт

В резултат на тази лабораторна работа трябва да получите уеб страница като тази (Фигура 1.1):

Фигура 1.1 - Визуализация на уеб страница

Използване на началния екран

Прозорецът на началния екран предоставя бърз достъпкъм страници, с които наскоро сте работили, ви помага лесно да създавате различни видовестраници и предоставя директен достъп до някои ключови теми, където можете да намерите отговори на вашите въпроси. Екранът за добре дошли се появява при първото стартиране на програмата или ако не са отворени други документи.

Нека използваме началния екран, за да научим как да отворим документ.

1. За да отворите нова празна страница, щракнете върху опцията HTMLв колоната Създаване на нов(Създаване) (Фигура 1.2).

Фигура 1.2 - Прозорец на началния екран

2. Пред вас ще се отвори нов HTMLдокумент (Фигура 1.3).

Фигура 1.3 - Нов HTML прозорец

Избор на CSS оформление

Adobe Dreamweaver CS4 има 32 файла с CSS оформление, всеки с различен дизайн. В тази задача ще изберем един файл и ще го модифицираме.

  1. Изпълнение Файл => Нов(Файл => Създаване) .
  2. Изберете Колона Празно Страница (Празна страница) в диалоговия прозорец Нов Документ(Създаване на документ) .
  3. Изберете HTMLв колоната Страница Тип(Тип страница) .
  4. Изберете 2 колони фиксиран, ляв странична лента, заглавка и долен колонтитул(2 колони с фиксирана ширина, поле отляво, горен и долен колонтитул) на колона Оформление(Оформление) .
  5. Оставете другите опции на настройките им по подразбиране и щракнете върху бутона Създавайте(Създаване).
  6. Изберете Файл => Запазване(Файл => Запазване).
  7. Запиши като(Запиши като) отидете в папка лаборатория1. Въведете „Umbria.html“ и щракнете върху бутона Запазване.

Избор на режим на показване на документа

Ще извършим повечето операции по уеб дизайн в прозореца Дизайн, но помнете това до прозореца ДокументИма четири режима на показване (Фигура 1.4):

  • Дизайн(Дизайн) – представя страницата в контекст подобен на браузър;
  • Код(Код) – показва изходния код на страницата;
  • Код и Дизайн(Код и дизайн) - комбинира и режим на показване Дизайни режим на показване Код. Щракнете върху бутона Сплит(разделяне), за да покажете този режим на показване.
  • На живо(Live View) – представя страницата в браузър, работещ в реално време.

Фигура 1.4 - Режими на показване

Режимите на показване са свързани един с друг. Всички промени, направени в един от тях, могат веднага да се видят в останалите.

Промяна на заглавието на страницата

Заглавието на страницата се появява в заглавната лента на браузъра. Заглавията на страниците са един от ключовите използвани елементи търсачкиза индексиране на уебсайтове.

  1. Изберете контейнера за текст „Документ без заглавие“ в полето Заглавие(Име)ленти с инструменти Документ(Фигура 1.5).
  2. Въведете „Umbria Hill Town Tours“ и щракнете Въведете.

Фигура 1.5 - Лента с инструменти за документи

Промяна на заглавките

Заместителите на заглавия в Dreamweaver се променят лесно.

1. Щракнете двукратно върху текста на контейнера Заглавиеза да го изберете. След това въведете „Пътувайте в Умбрия с нас“ (Фигура 1.6).

Фигура 1.6 - Промяна на контейнера за заглавие

2. Задръжте курсора на мишката върху началото на текста на контейнера ОсновенСъдържание(Основно съдържание) и маркирайте цялата фраза.
3. С избрания текст напишете „Забавлявате се. Ние работим“. (Фигура 1.7)

Фигура 1.7 - Промяна на контейнера за съдържание

4. Изберете Файл => Запазване(Файл => Запазване).

Вмъкване на текст

Обикновеният текст може да се променя толкова лесно, колкото и заглавията.

1. Поставете курсора пред простия текст на контейнера и изберете останалата част от текста, за да изберете втория контейнер на заглавието и всички абзаци.
2. Натиснете клавиша Изтриванеза да премахнете това, което сте избрали.
3. Прегледайте до файл Текст. txtразположени в папка Lessons/lab1/Text.txt.

4. Копирайте текста в клипборда.
5. Поставете копирания текст под заглавието „Забавлявате се. Ние работим“. (Фигура 1.8).

Фигура 1.8 - Вмъкване на текст

Текстът автоматично ще бъде форматиран като параграфи.

6. По същия начин въведете „Umbria Hill Town Tours“ в полето Долен колонтитул.
 7. Създайте края на линията, като щракнете Shift+ Въведете, след това въведете „Нашите контакти“.

Вмъкване на изображения

1. Изберете цялото съдържание в страничната лента, включително заглавието на контейнера Странична лента1 Съдържаниеи следващите два абзаца.
2. Щракнете Изтриване.
3. Щракнете

и натиснете Изтриванев селектора на етикети, разположен в долната част на прозореца на документа, за да премахнете маркера

(Фигура 1.9).

Фигура 1.9 - Селектор на етикети

4. Ако панелът Поставете(Вмъкване) е невидим, направете го видим, като изберете Прозорец => Вмъкване(Прозорец => Вмъкване). Изпълнение Вмъкване => Общо => Изображения(Вмъкване => Общи => Изображение) (Фигура 1.10).

Фигура 1.10 - Панел за вмъкване

5. Отидете до файловете, намиращи се в папката Уроци/lab1/и изберете изваяна градина.jpgи щракнете върху OK (Фигура 1.11).

Фигура 1.11 - Вмъкване на изображението sculpted-garden.jpg

6. Поставете курсора в началото на основния параграф, който започва с „Елате и се насладете“ и изберете Изображенияна панела Поставете.
7. Изберете изображение италиански-хълм-град.jpgи натиснете добре.
8. Въведете "italian-hill-town" като допълнителен текст. Кликнете добре(Фигура 1.12).
9. Ако панелът със свойства не се вижда, изберете Прозорец => Свойства.
10. Активирайте с изображението, което току-що сте вмъкнали fltrtв изскачащото меню Класпанели Свойства.

Класът fltrt е съкращение от float right, съответно fltlft - float left.

11. Изберете Файл => Запазване.

Фигура 1.12 - Вмъкване на изображението italian-hill-town.jpg

Избор и промяна на стилове CSS

Съвременните уеб страници използват Cascading Style Sheets (CSS) за стилизиране и оформление. Една уеб страница често се сравнява със стол с три крака, като HTML, CSS и JavaScript са компонентите на нейната структура. HTML е съдържанието, материалът, който въвеждате в режим на показване на дизайн. CSS е външен види оформление с определени елементи, цветове и фонове. JavaScript добавя интерактивна функционалност. В това упражнение ще промените цвета на фона на съществуваща страница, ще добавите графики към фона и ще конфигурирате няколко текстови атрибута. Всички тези действия се извършват чрез използването на панела CSSСтилове(CSS стилове).

CSS може да се използва за промяна на стиловите свойства на всеки HTML таг, например етикет .

1. Изберете Прозорец => CSS стилове (Прозорец => CSS стилове).Панелът ще се отвори CSS стилове.
2. Ако е необходимо, щракнете върху бутона Всичкина панела CSS стиловеда се промени текущ режим Текущ.

Режимът Всички показва всички CSS стилове, свързани с текущата страница. Трябва да отворите документа в инструмента за преглед на документи, за да видите всички стилове в панела CSS стилове.

3. Отворете записа