Livingdead Публикувано Септември 30, 2006 Report Share Публикувано Септември 30, 2006 (Редактиран) В следващите си постове имам за цел да изясня основите в използването на някои функции на Dreamweaver MX. Уроците са предназначени по-скоро за начинаещи, които да могат по-лесно да се ориентират в работата с програмата. Ако Ви трябва нещо конкретно или имате предложение коя част от възможностите на програмата би била полезна, пишете ми и ако мога ще я опиша. Версията на Dreamweaver която ползвам е MX 6.0. P.S. Това че една част е с номер две не значи че трябва да сте прочели част едно, за да преминете към нея, просто ги подреждам по реда по който ги пиша. Автор: Звездомир ЗлатиновПравата над статията принадлежат на SoftVisia Редактиран Октомври 20, 2007 от Златинов Цитирай Link to comment Сподели другаде More sharing options...
Livingdead Публикувано Октомври 10, 2006 Author Report Share Публикувано Октомври 10, 2006 (Редактиран) Част първа: Работа с CSS. CSS (Cascading Style Sheets) е доста мощен помощник на HTML в създаването на уеб сайтове и по-точно в изграждането стила на страницата. Macromedia Dreamweaver предлага много лесни начини за вмъкване на CSS в уеб страниците Ви и в следващите редове ще се опитам да покажа как става това. За да влезете в менюто с CSS настройки натиснете с десен бутон върху празното работно поле на страницата си и изберете CSS Styles -> New CSS Style... Показва се следното меню: http://pics.softvisia.com/design/pics/2008/ss_1.PNG Първото поле е за име на CSS стила, а най-долните две "Define in" опции са: - New Style Sheet File (За запис на CSS стила в отделен .css файл.) - This Document Only (За запис на CSS стила директно в кода на страницата.) Основното в прозорчето е да изберете вида по който CSS ще действа (полето Type). Възможностите са: - Make Custom Style (class) (Създаване на нов клас.) - Redefine HTML Tag (Промяна на вида на стандартен HTML таг.) - Use CSS Selector (Въвежда се името на някой обект от сайта и стилът действа върху него.) Според различните нужди ще Ви трябва и различен вид CSS. Първата опция е подходяща когато искате да имате няколко различни стила за един и същ HTML таг. Например искате на страницата Ви един параграф (<p></p>) да е в червено, а друг в черно. В такъв случай избирате Make Custom Style (class) и в текстовото поле Name въвеждате желаното име за клас. Името трябва да съдържа само букви и числа и по избор може да се включи точка в началото му (ако бъде пропусната се добавя автоматично). След това натиснете OK и ще преминете към прозореца от където всъщност се правят настройки по CSS стила. Няма да се спирам на възможностите, понеже те са много, а и бутоните са описани доста добре и човек лесно се ориентира. Като приключите с избора на стила натиснете OK и класа вече е готов. За да го използвате трябва само да включите class="име_на_класа" в тага към който искате да се приложи стила. Например, ако за име на класа сте задали "red-style" и от опциите сте избрали цвета на текста да е червен и искате класа да бъде приложен на някой <p> таг, то генерирания код би трябвало да изглежда като този. В <head> тага<style type="text/css"> <!-- .red-style { color:red; } --> </style> В <body> тага:<p class="red-style">Текст в червено</p> Следващата опция - Redefine HTML Tag Ви дава възможност да промените стила на някой HTML таг за цялата страница. Избирате опцията Redefine HTML Tag, от падащото меню "Tag" избирате името на тага и натискате OK. Например, ако искате всички <h1> тагове да са със зелен фон и син цвят на текста, избирате h1 тага от менюто, правите настройките в Type и Background категориите и трябва генерирания код да е подобен на този. В <head> тага<style type="text/css"> <!-- h1 { color: #000099; background-color: #00FF00; } --> </style> В <body> тага:<h1>Заглавие 1 с приложен CSS стил</h1> Последната опция Use CSS Selector се използва за някой обект върху който искате да приложите CSS стил. Да речем имате картинка с име "pic1" която искате да разположите 100 пиксела в дясно от левия ръб на страницата. За да зададете име на картинката в тага и добавете: name="pic1" id="pic1" Отворете New CSS Style менюто, изберете Use CSS Selector и в полето "Selector" добавете името на стандартния HTML таг + диез (#) + името на обекта, в случая трябва да въведете "img#pic1". Натиснете OK, от категорията Positioning на прозореца CSS Style definition for * изберете за Type - absolute, а за Placement -> Left - 100 и натиснете OK. Ето и примерния код. В <head> тага<style type="text/css"> <!-- img#pic1 { position: absolute; left: 100px; } --> </style> В <body> тага:<img src="pic1.png" name="pic1" id="pic1"> Ето и кратко описание на останалите елементи от менюто CSS Styles: - На първо място са изброени съществуващите CSS класове, като е отбелязан този който действа на обекта върху който сте натиснали - някоя таблица например. - New CSS Style... е описано по-горе. - Edit Style Sheet... дава възможност да правите промени по вече създадените CSS стилове. - Attach Style Sheet... позволява да се вмъкнат файлове с CSS стилове, като може да се избере локален файл или да се приложи линк към файл на отдалечен сървър. Предлага се и опция, кода от файла да се пренесе в документа или страницата да се свърже с файла. - Export Style Sheet... се използва за да се запазят всички приложени CSS стилове от страницата във файл. - Design Time Style Sheets... дава възможност да се добавят CSS стилове, които да действат само докато работите над страницата в самата програма, а в браузъра те не се включват. Горе-долу така се използва CSS в Dreamweaver, а останалото остава на Вашете въображение. Част втора: Работа с рамки (frames). В този пост ще обърна специално внимание на работата с рамки в Dreamweaver, но първо няколко думи за тях. Структурата на повечето сайтове е такава че някои елементи се повтарят на повече от една страница и е по-лесно кода им да се изнесе в отделна страница която да се включи допълнително към основната от колкото кода да се пише за всяка страница отделно. Добра идея за използване на рамки, например е, когато искаме да отделим менюто на сайта в отделна страница или да сложим банер в отделна страница. Първото нещо което ще ни трябва е една празна страница, която да е основна (frameset) и да съдържа останалите страници (frames). Още като отворите Dreamweaver-а разполагате с такава. След това от основното меню отидете на Frames и ще видите възможностите за добавяне на рамки. Оцветеното в бял цвят поле показва в коя част на страницата ще се създаде рамката. http://pics.softvisia.com/design/pics/2008/1.PNG За пример ще направим една лява рамка (frame), която в последствие ще може да се сложи страница с меню например. Натиснете на "Left Frame" и ще видите как страницата се разделя на две. След това натиснете в лявата половина и от главното меню изберете File -> Open in Frame... и изберете файл, който да се появи в лявата рамка. Направете същото и за дясната страна, като изберете файл който да се изобрази в нея. Преди да зареждате страници в рамките е добре да запазите основната страница (frameset), понеже ако не е запазена страницата Dreamweaver-а прави линк към страницата от рода на "file:///D|/Dreamweaver%20MX/file", което не ни върши работа. Нещо важно, което трябва да имате предвид е че всъщност двете страници, от лявата и дясната половина, всъщност са в една отделна, основна страница и че като се отваря сайта ще се изобрази Title тага на основната страница. За да правите линкове, който да се отварят в някой от направените рамки ще трябва да включите елемента target в тага на линковете: <a href="history.html" target="mainFrame"></a> Имената на рамките можете да видите и променяте, като преминете в Code View на основната страница (frameset). По подразбиране са нещо от сорта на: "mainFrame", "leftFrame" и т.н. В случай че сте объркали името на рамката, линка ще се отвори в нов прозорец. Неприятно е че когато се отвори файл с рамки в него, по подразбиране границите на рамките не се виждат и няма как да се коригират. За да се виждат границите последвайте менюто View -> Visual Aids -> Frame Borders. Редактиран Ноември 5, 2007 от IVAN Цитирай Link to comment Сподели другаде More sharing options...
emil9216 Публикувано Август 15, 2010 Report Share Публикувано Август 15, 2010 Имам няколко основни въпроса за Dreamweaver, тъй като от скоро започнах да се занимавам с тази програма. Надявам се някой да ми отговори. 1. Като започна да правя сайт всички снимки, които ще използвам трябва ли да го слагам в предварително създадена папка images? Защото не виждам опция както при web page maker например, когато се експортва готовия сайт програмата автоматично създава папка images и копира всички снимки там. 2. Като отворя някой .html файл направен с Dreamweaver, с Notepad, текстовете на кирилица ми излизат като кодирани, а charset- а е настроен на windows-1251. Цитирай Link to comment Сподели другаде More sharing options...
crio Публикувано Август 27, 2010 Report Share Публикувано Август 27, 2010 Не използвам Dreamweaver, защото ми е по-удобно с някой редактор като Notepad++ да си надраскам всичко. Ще ти дам по-скоро насоки, отколкото точни упътвания. За първия проблем, предполагам че трябва да създадеш ръчно папките със снимки и допълнителни файлове. Тъй като няма място за сравнение между Web Page Maker, който е ориентиран към начинаещите потребители, и като цяло е продукт за любителски сайтове, докато Dreamweaver е ориентиран към по-напредналите потребители и професионалистите, за които е по-удобно ръчно да си построят структурата на сайта. А относно кодировките на HTML файловете, независимо от зададената кодировка в meta таговете, файлът трябва да е запазен в ASCII (за Windows-1251) или UTF-8 (за utf-8) кодировка. В документацията (на английски) на Dreamweaver пише, че при създаването на нов файл, има възможност за определяне на DTD (демек HTML, XHTML и т.н.) и кодировка на файла. Цитирай Link to comment Сподели другаде More sharing options...
Препоръчан пост