Добре дошли!

Добре дошли в нашите форуми, пълни с полезна информация. Имате проблем с компютъра или телефона си? Публикувайте нова тема и ще намерите решение на всичките си проблеми. Общувайте свободно и открийте безброй нови приятели.

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

Основна работа с Dreamweaver MX

Последователи

6 октомври 200619 г.

Част първа: Работа с CSS.

CSS (Cascading Style Sheets) е доста мощен помощник на HTML в създаването на уеб сайтове и по-точно в изграждането стила на страницата. Macromedia Dreamweaver предлага много лесни начини за вмъкване на CSS в уеб страниците Ви и в следващите редове ще се опитам да покажа как става това. Версията на Dreamweaver която съм използвал е MX 6.0.

За да влезете в менюто с CSS настройки натиснете с десен бутон върху празното работно поле на страницата си и изберете CSS Styles -> New CSS Style... Показва се следното меню:

Първото поле е за име на 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, а останалото остава на Вашете въображение.

Автор: Звездомир Златинов

Редактирано 7 октомври 200619 г. от LinKin^parK (преглед на промените)

7 октомври 200619 г.

Автор

Част втора: Работа с рамки (frames).

В този пост ще обърна специално внимание на работата с рамки в Dreamweaver, но първо няколко думи за тях. Структурата на повечето сайтове е такава че някои елементи се повтарят на повече от една страница и е по-лесно кода им да се изнесе в отделна страница която да се включи допълнително към основната от колкото кода да се пише за всяка страница отделно. Добра идея за използване на рамки, например е, когато искаме да отделим менюто на сайта в отделна страница или да сложим банер в отделна страница.

Първото нещо което ще ни трябва е една празна страница, която да е основна (frameset) и да съдържа останалите страници (frames). Още като отворите Dreamweaver-а разполагате с такава. След това от основното меню отидете на Frames и ще видите възможностите за добавяне на рамки. Оцветеното в бял цвят поле показва в коя част на страницата ще се създаде рамката.

За пример ще направим една лява рамка (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.