Как да създадете персонализирани медийни заявки в Dreamweaver

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

Медийните заявки се използват в мрежата повече от десетилетие за други цели, като например създаване на алтернативен дизайн на страница, оптимизиран за печат. Медийната заявка се състои от тип медия, като екран или печат (двете най-често срещани) и незадължителен израз, който проверява за определени характеристики, като височина или ширина. Най-често използваните видове медии са

• всички: Подходящо за всички устройства

• печат: Проектиран за визуализация на печат и за показване при отпечатване на страница

• екран: За съдържание, показвано на всеки екран

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

Как да приложите стилове към дизайна на вашите страници в Dreamweaver

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

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

Как да използвате медийни заявки във външни стилови таблици в Dreamweaver

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

Втората опция е да свържете две или повече отделни външни стилови таблици към всяка HTML страница и да включите медийните заявки във всеки стилов лист. Така или иначе, кодът за CSS и HTML се записват в отделни файлове, а

маркер ги свързва.

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

Как да създавате медийни заявки в Dreamweaver

Можете да създавате толкова много медийни заявки, колкото искате в Dreamweaver и можете да ги включите в един или много CSS файл. За да създадете нова медийна заявка в Dreamweaver, следвайте тези стъпки:

Отворете панела на CSS Designer, като изберете Window→CSS Styles.

Изберете съществуващ лист със стилове в панела Източници или създайте нов, като щракнете върху знака плюс (+) в панела Източници.

Щракнете върху знака плюс (+) в панела @Media в панела на CSS Designer.

Отваря се диалоговият прозорец Дефиниране на медийни заявки.

Изберете Медия от първия падащ списък и Екран от втория падащ списък.

Преместете курсора си вдясно от всеки падащ списък, за да се появи знакът плюс, след което щракнете върху знака плюс, за да добавите ново поле.

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

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

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

Полето Min-Width се появява в диалоговия прозорец Media Queries, така че можете да посочите минималната ширина, която искате да използвате за насочване на заявката. Минималната ширина е важна, тъй като медийната заявка е насочена към стиловете въз основа на диапазона от минимална до максимална ширина, който сте посочили, обхванати в следващата стъпка.

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

Полето Max-Width се появява в диалоговия прозорец, така че можете да посочите максималната ширина, която искате да използвате, за да насочвате заявката.

Щракнете върху OK.

Диалоговият прозорец Media Queries се затваря и медийната заявка се генерира и се добавя към стиловата таблица, която сте избрали в панела Източници в панела CSS Designer.

За да добавите допълнителни медийни заявки към избрана таблица със стилове, повторете стъпки 3–8. За да добавите медийни заявки към различен стилов лист, повторете стъпки 2–8.

Въпреки че можете да запазвате медийни заявки в толкова различни таблици със стилове, колкото искате, запазването им в една външна таблица със стилове е по-ефективно, тъй като всеки стилов лист трябва да бъде изтеглен от сървъра отделно, което изисква повече честотна лента. Изтеглянето на един дълъг лист със стилове с множество медийни заявки е малко по-ефективно от изтеглянето на множество стилови таблици.