Dreamweaver CS6 за LuckyTemplates Cheat Sheet

Ако сте нов в уеб дизайна или създавате HTML страници от години, Adobe Dreamweaver CS6 е идеалният инструмент за изграждане на вашия уебсайт. Във версия CS6 намирате нов приветствен екран и поддръжка за най-новото в каскадни стилови таблици (CSS3) и HTML5. Dreamweaver е популярна програма сред професионални уеб дизайнери, както и хора, които искат да създават сайтове за своите хобита, клубове, семейства и малки фирми.

Екранът за приветствие на Adobe Dreamweaver CS6

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

Dreamweaver CS6: Добавяне на текстови сенки с CSS3

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

Кредит: Пол Гуал, istockphoto.com

Dreamweaver CS6 включва поддръжка за текстови сенки на CSS3, когато използвате панела Properties в панела CSS Styles. Можете да създавате стилове на клас или идентификатор с текстови сенки и можете да добавяте текстови сенки към съществуващи HTML елементи, като дефинирате стил на етикет, като стила на заглавие 1, използван в изображението.

CSS3 кодът, който създава тази текстова сянка е

h1 {text-shadow: 2px 2px 3px #000;}

Числата в кода указват, че сянката на текста трябва да се простира с 2 пиксела вдясно и 2 пиксела под текста с 3 пиксела размазване. В допълнение, сянката се създава с черния цвят, определен от съкратения шестнадесетичен цветен код #000.

Когато създавате правила за текстови сенки, можете да зададете до четири стойности:

• Хоризонтално и вертикално: Първите две числови стойности са задължителни и определят хоризонталните и вертикалните отмествания — разстоянието, на което падащата сянка се простира под текста (хоризонтално) и вдясно от текста (вертикално).

• Радиус на размазване: Третата стойност определя количеството размазване в сянката. Ако не включите радиус на размазване, по подразбиране е 0, което прави сянката да изглежда като плътен цвят.

• Цвят: Четвъртата стойност определя цвета на сянката и може да бъде дефинирана с помощта на шестнадесетичен цветен код или цветен код RGBa.

Можете да добавите текстова сянка, като използвате панела Property в долната част на панела CSS Styles, както е показано на изображението. За да направите това, изпълнете следните стъпки:

Щракнете върху връзката Добавяне на свойство в лявата част на панела за свойства на CSS стилове.

Въведете името на правилото за стил на CSS3, текстова сянка или изберете правилото за стил от падащия списък.

След като името се появи в лявата страна, от дясната се появява малка стрелка.

Щракнете, за да изберете стрелката вдясно от текстовата сянка.

Появява се кутия.

Въведете X и Y отмествания, радиус на размазване и цвят.

Уебсайтове и ресурси за уеб дизайнери

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

• Аудио и видео хостинг услуги:

  • YouTube

  • Vimeo

  • SoundCloud

• Блогове и CMS програми

  • Blogger

  • Joomla

  • MovableType

  • TypePad

  • Tumblr

  • WordPress

• Услуги за споделяне на социални медии

  • Добави Това

  • Lockerz Share

• Услуги за отчитане на трафика:

  • Google Analytics

  • Yahoo! Уеб анализ

  • HubSpot

• Популярни уеб браузъри:

  • Apple Safari

  • Google Chrome

  • Microsoft Internet Explorer

  • Mozilla Firefox

  • Опера

• Услуги за тестване на уеб браузър:

  • Adobe Browser Lab

  • BrowserShots

  • Кръстосано тестване на браузъра

  • Пясъчник на браузъра от Spoon (бивш Xenocode)

• Dreamweaver, CSS и ресурси за уеб дизайн:

  • Център за разработчици на Dreamweaver

  • Обучение по уеб дизайн в DigitalFamily.com

  • W3 Conversions HTML5 и CSS3 ресурси

  • Списък отделно