HTML и CSS (stylizer)

Фотошоп FastWeb Курсът показва как да използваме Photoshop, за да създаваме скоростно качествен уеб дизайн и как да обработваме изображения с Photoshop според целите ни.

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео
Назад Алтернативен видео плеър
¿ Напред
сега в този урок ще превърнем този мокър html използваме stylizer различен метод ще видите че доста по-бърз и лесен за работа този фейсбук Ехо от който направихме в предния урок сега ще го отворя Google Chrome отвори по друг начин имена до утре ги дръпна вътре ще изтрия стила който направихме тук ще го изтрия в момента таговете които сме сложили е за маркиране с летящи във въздуха Направи ги по този начин за Да виждате много по-лесно Какво представлява html нозематоза тук който правим ще трябва да използваме истинския A4 mail който има реална структура на html Сложил съм един файл template котето от хора когато създавате имейл почвайте от този файл той ще подсигури това че имате стандартните html елементи всичко това което направихме може да се сложи в боди сега ще го копи-пейст на купи best в Италия бой се отваря и затваря вратата сложи това там се сега ще го отворя въпроса хидравлика няма между предния и този а понеже браузер е достатъчно умен за да си изкарате такива тагове сам случая не искам да има повече контрол затова ще ги сложим при стандартни да го напусне какво правят първо до тайпе html казва на браузъра че това е html5 А не някакъв друг ешкия mail и трябва да го визуализира точно както би визуализирал html5 ако не сложите този така В някой различни браузъри ще видите стаята си по различен начин докато той подсигурява това че доста от случаите ще направи така че да изглеждаме всички българи еднакво е това е мотова щаб на html и се затваря чак долу това че оттук почва нашия имейл и накрая свършва Wicked имаме параметри които задаваме в страницата Един от основните параметри е title Тоест заглавието на страницата което излиза тук както и от Google когато си търси my page title description а на страницата излиза Също така от Google като си нещо Идеята не са добър пример Този текст тук доста от случаите 51 който се намира в метан description животните Също така служат на търсачките за да разберат На кои ключови думи да й казват след което имам коментирани две линии едната добавя скрит към страницата който е в отделен файл Skype джаса а другата добавя css тоест cascading Style sheet file който е style.
css те са коментирани ако искаме да ги премахнем коментарите доста изтрием тези три символа тук последните два символа тук когато някой така коментира табло за лед няма да го интерпретира и напълно Ще го игнорира Аз съм ги сложил тук за да може да си ги извадите от коментар или ги ползвате Ако и трябват доказване на браузъра че имаме отделен файл style.
css в който ще сложим всички Естил место да го слагаме тук в стая и Това са нашите правила те ще са в отделен файл този начин stylizer ще може да работи с този файл и ще ни даде възможност да обработваме на страница stylizer не работи с вътрешни стилове само с външен файл тук се свършва и започва боди което значи съдържание Head се превежда като глава на боди като съдържание нищо което е в ред не се показва на екрана Head to a само за поставяне на параметри например този час след от f8 казва на страницата ни че утре в осем този начин тя ще поддържа кирилица сега в бой така сложих това което имаме предния урок обаче няма никакъв стил стила би трябвало да е в стаята Asus но той е празен файл Всъщност тя още не е файл в момента с вас трябва да си го създам Даньо текст документ Style css без това което ти показах с екстеншъните в първи урок тухли за употреба сега ще изтрия точка техните ще остане само style.
css пусна програмата stylizer дай старт-стоп html ще отворя stylized това нещо мога да направя по следния начин Драгна от браузъра горе ремонт на баня хром vmro адреса и го пействам тук ти изтрия първата част the file до сега Отворих на този файл от лявата страна имаме също което показва в браузъра Всъщност реално в stylizer лявата част на браузъра хром или който сме си избрали от тук имате различни възможности интернет експлорър Фокс този начин на бързо може да видите Как изглежда вашата страница тези браузъри от дясната част на Мерцедес s203 които се намират в style.
css този файл в момента е празен затова няма правила една от основните функции на тази програма е Булстат той се намира тук и се включва със Space еротични Space имена върху някой елемент забележете отдолу ще ми показва Пътя към него тук имаме be sure this title след което имаме dhl.
de subtitle и накрая ме DHL dismiss caption сега Ще създам правила за моята е till down Space отивам върху my title натискам първия бутон на мишката Да обаче ще остане след което ще мога да си създам правила Искам първо на тая тема давам macro видео тясно създаде css правила от него сега мога да напиша например Колор и да сложа червения цвят който Софарма начална дето бяхме веднага се променя единия вариант е да го напиша Другия вариант е отдолу да го избера виж децата там се променя просто го направя малко по-голям да се види по-добре ще 50 пиксела беше Сега когато му променя цвета в реално време се вижда отляво когато правихме си имейл на ръка тия всеки път да го променяме в hex да го записваме да отиваме в браузъра и да ме разбереш е доста бавно А тази програма с тази програма става мигновено stylizer Също така ни помага писа даването на тези css правила Сега ще ги изтрия да и покажа какво имам предвид докато съм в title класа ще натисна тук цвят текст и тук за големина на текста като отдолу мога да си избера големината и да я променям оттук през това което давам Какво става от ляво мога да го направя Болт италик underlying изнесен бутон да го премахна този начин може да пуснете без да знаете тези ключови думи Нека да се опитаме да направим нашия дизайн използваме само тези бутони почвам с този цвят ще го сложа такова сядам сложа диез Sony font size ти го давам тук направо долна поляна след което ще мина на следващото правило Space ще го създам оттук subtitle maker щом избера background-color тук виес след което ще сложа падинг натисни тук и тръгвам визатон и бутона сутрин като папка Когато натисна на него не мога да променям отгоре отстоянието отдолу отдясно не се вижда случая от ляво с контрол зет download добра 11 pixel сега се преминава към последния клас description micro Тук съм там Мартин отгоре magento и тук ще го преместя разликата между Мартини балинг е следната мога да ви я покажа в горния клас избере пак като вижда отдясно след като избрахте Space ми показва Кои класове са вързани към този елемент всички нови Гери Минера сега ще сложа Мартин когато отстояние извън фона на елемента докато падинг отстояние вътре във форма прислужница комедии топ така в този елемент дискретен клас Маджарово премества тук финално сложа светлина текст Ако искам да видя всички правила натискам Escape няма да се върна към subtitles който се снимаш в този цвят накрая Трябва да се краде елемента който ги плашиш тези три Space този път избирам село micro вид 500 пиксела лекарство ден Мартин e-docs написа Auto Auto ако ти падна този Мартин ще видите че отгоре също мога да сложа отстояние докато запазвана write alert das Auto Auto значи че го слага в центъра тоест слага едно и също отстояние отляво и отдясно сега давам контролер за сейф то го записва директно във файла който направихме пясъчните лице с преграда ги виждаме тук и трябва да си от този файл Да ама дето едно отпадат Ето и тук търсеща при Гала които ние направихме ръчно от предния урок но този път са вързани към страницата с този таг вместо с директно вътре в нея ако ти забравихме и да сложим правилото което променя фонд batucada всичките лева micro тук font-family доста мога да сложа всичките фондове които мога да свържа на тази страница гердан песни Роман трахома Мерси добре ционистите ми телефон тоест се вижда по различен начин ако някой няма да присъстват затова запетайка мога да изведа някой от фондовете които искам да си показват ако операционната система няма този фон например Вентана запетайка Ариел както виждате за да направим този дизайн наистина мейл s15 което направихме пеещи Milan да сложим Този текст След това да сложим гейове Ако всеки от елементите както и да сложим класната един елемент около тях и накрая в stylizer да ги стилизираме като ЕТ имейла който е на това което направихме е стандартен и си го копирате от template това ела и го пестите просто както и този отдолу Ако ти се променя и ние правим тук

Въпроси и отговори

  • Как да реша проблема си със Stylizer?

    Галина Караджова:

    Както и на Daniela така и на мен не ми излизат тези опции! Пробвах какво ли не! За съжаление не се получава. Помогнете! Как да изпробвам урока?

    Dev:

    Можеш ли да прикачиш картинка която да показва какъв е проблема точно? Може би файла style.css не е вързан както е в урока.

    Галина Караджова:

    Ето това е! Мисля, че следвам стъпките и всичко съм направила както трябва! Кажете ако греша :)

    Галина Караджова:

    и в програмата Stylizer проблема е такъв:

    Дани:

    Натискате Space /интервал/ и екранът се променя така:


    Дани:

    След това с ляв бутон на мишката кликвате върху ред от текста:
    /Горе вдясно в жълто поле пише, че сте в режим Bullseye/

    Дани:

    Тогава вече елементите стават активни и можете да им зададете стил. Надявам се да съм била полезна :)

    Галина Караджова:

    Мисля че от отбелязването на картинката съм показала, че това което ме съветвате е направено (1 и 2) или избрала съм Bullseye чрез Space и съм кликнала върху реда на текста, на пътя долу избирам (моя случай) deskription i Make Rule  и не ми се активират правилата на CSS в дясната лента

    Aula Developer:

    Галина, всичко изглежда наред при теб, което е лошо. Значи че проблема е в инсталацията ти на Stylizer и няма какво да направим по случая. Алтернативите са много далеч от визуално редактиране каквото дава той.

    Или трябва да преинсталираш Stylizer, да сложиш друг или можеш да редактираш CSS с notepad+. Изпращам ти картинка на това как можеш да разбереш еквивалента на Stylizer в CSS. Така ще можеш да разбереш какво трябва да напишеш с notepad+ което е показано в уроците.

    .nav-g A:hover
    {
    background-color: #ECECEC;
    text-decoration: none;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    }

    Всичко правила започващи с + или иконката диамант - като "+border-radius" са локални за Stylizer и трансформират на 4 такива за различните броузъри. Други такива не се ползват в уроците, те и не са задължителни.

    Всяко правило се разделя със знака ' ; ' от другите.

    Докато гледаш уроците важното е да разбереш какво се случва. Самите правила винаги могат да се напишат на ръка.

  • Изтекъл триал Stylizer

    Галина Караджова:

    След дълго лутане и трошене на нерви, видях че е изтекла триал версията на Stylizer!! Колко време можем да ползваме триал версията? Защо толкова кратко ми действаше? Означава ли сега, че трябва да си я закупя за да мога да правя следващите уроци?

    Петър Вачков:

    Мисля че е 2 седмици

    MaxRemix:

    Дърпай версия 5 от торентите, кикас торентс

    Лъчезар Николов:

    В Stylizer 7 Bulseye е в опцията Edit или като се кликне кръгчето горе или с клавишната комбинация Ctrl+Space.

  • Само аз ли имам проблем със Stylizer?

    Галина Караджова:

    Всички ли са си купили програмата за да нямат проблем? 

    След като имах проблем с изтичането на времето за ползване на триал версията, аз инсталирах триал версия на друг компютър и ми пише когато я отворя  "ОСТАВАТ ОЩЕ 14 ДЕНА" , следователно триал версията е за 15 дни. 
    И все пак изникна нов проблем: След стартирането на програмата, копирам адреса и го поставям, ползвам Bullseye и ми излизат в дясно CSS правилата УРАААА!, но не за дълго, защото след минута, две ползване на програмата ми излиза отброяване на 10 секунди и накрая излиза това: "It's time for a time-out. Let's reflect on  buying Stylizer" и след това отново не е възможно да я ползвам докато не я затворя и стартирам на ново, но нали разбирате, че не бих могла да направя урок от 20 минути за 2 минути. 
    Може ли някой да ме посаветва какво да правя!
    Гергана Игнатова:

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

    Според мен е редно да си я свалиш от торент. Така или иначе ако искаш да използваш Stylizer за работа, а не за да го изпробваш, ще трябва да си го купиш. Старите торент версии няма да имат всички нововъведения и ще ти излизат грешки на нови CSS правила. Аз първоначално използвах торент версия и след това си го купих понеже ми потрябва :) Но наистина ако просто ще го изпробваш, вземи го от торент.

    Галина Караджова:

    Преинсталирах и все същото! За да продължа с учението, просто отварям Stylizer правя промени бързо и затварям програмата. И така отново и отново :)

    Уча малко на пресекулки, но пак е нещо. Бързам да мина уроците за да не ми изтече и тук триал версията! :)
    Павел Сарандиев:

    Здравей! Ти от къде си свали торента? Поздрави!

    Галина Караджова:

    skybound.ca


    Павел Сарандиев:

    Аз оригинала си го свалих но сигурно след 14  дни няма да ми върши работа за да се упражнявам. За това ако има торент няма да е с това ограничение. 

    Галина Караджова:

    За съжаление го няма торент! Поне аз не го намерих и естествено в момента не мога да ползвам програмата! Ако го намериш торент би ли споделил?

    Павел Сарандиев:

    Здравей!

    Намерих но има някои неща които не работят.
    1 Пикселите се правят ръчно а не със стрелкичките
    2 По специфичните неща като bordder-radius и т.н
    3 Няма google chrome a с Internet Explorer и Mozila но те са с по - низка версия.
    Иначе си работи.
    https://rutracker.org/forum/viewtopic.php?t=1819644

  • Създаване на CSS-правил

    Kana: 
        В 0:06:55-тата минута не ми създава правило, а ми изписва "This file is an empty place holder."<br><br>
    Веселин Аула:

    Провери дали имаш връзка към style.css в HEAD на HTML страницата. След това виж дали има въобще такъв файл style.css. Трябва да е създаден предварително и празен. Това си е просто празен текстов файл, но разширението му не трябва да е style.css.txt а style.css

    Показано е как да накараме explorer да показва разширенията на файлове които знаем (show file extensions of known file types), така че да може да ги преименуваме
    Maria:

    Maria:

    При мен се получи.

    Maria:

  • Как да създам .css правила?

    Kana:

    Сега пък излезе това съобщение :)

    Петър Вачков:

    Направила си style.css с Word а не notepad. Word формата не е 'plain text' (чист текст). Използвай notepad

  • Защо моето Bulseye не е активно?

    инж. Юлия Петрова Савова:

    Photoshop CS6

    Ангел Арънски:

    Много неща са възможни, има няколко теми в близките уроци за такива проблеми със Stylizer. Може да е изтекъл trial периода, може да няма свързан css файл. Може страницата да не е коректна или да не се е заредила. Изпробвай различни неща. Например напиши dir.bg в адресната линия и виж дали ще се появи.

    инж. Юлия Петрова Савова:

    Написах dir.bg в адресната линия. Появи се Bullseye,но когато заредя моя файл пак става неактивно. Как се свързва css файл?

    Веселин Аула:

    В HTML файловете го има. Реда със "style.css"

    Става така: 
    <link rel="stylesheet" href="style.css" type="text/css">
    И този таг се слага между отварянето на <head> и затварянето му </head>
    Също така, трябва да има файл в директорията наименуван "style.css", да не е "style.css.txt" (Ако си скрила разширенията на файловете, както е по подразбиране в Windows, ще изглежда правилно, докато е грешно) Ако го направиш с File/New в Notepad++ ще стане както трябва
    инж. Юлия Петрова Савова:

    Благодаря! Получи се.Липсвало: type="text/css" в посочения ред.

    Venko Stoev:

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

  • Какво да попитам?

    Маринела Тенева:

    Здравейте, ето това е моят краен резултат след видеоурока. Нямах никакви проблеми!

    Ангел Арънски:

    Браво :)

    Една забележка, този шрифт 'premi' който си избрала, няма да се вижда така на друг компютър. Можеш да си сложиш някой от безплатните google web fonts и тогава ще работят. 

    Започваш от страницата https://www.google.com/fonts
    След това натискаш на показания бутон 'quick use' и ще ти даде един ред код който да сложиш в сайта си
    Маринела Тенева:

    Добре, благодаря, просто исках да експериментирам с нещо по-непознато като шрифт


  • Поздрави!

    Павел Сарандиев:


    Павел Сарандиев:

    Ще направите ли видео урок за нея?

  • Защо ми липсва ad Rule? 

    Venko Stoev:

    Всичко което се изисква съм направил но в Stylizerот дясно не ми излиза ad Rule!

    Venko Stoev:

    Прикачвам стъпките

    Диляна Кънева:

    Аз имам същият проблем, дано някой отговори скоро, защото не мога да продължа!!!

    Venko Stoev:

    Аз ще ти отговоря :) .... след известно главоблъскане стигнах до

    Диляна Кънева:

    Много благодаря! И аз го открих също, но явно като е трейл версия някои неща са доста по-различни! Важното е, че продължаваме нататък :)

    MaxRemix:

    Ако по някаква причина Стайлайзера не Ви зарежда CSS файловете, сменете мод-а на Firefox и рестартирайте и ще заработи.

  • Много приятно съм изненадан от една програма която напълно замества Stylizer.

    Павел Сарандиев:

    Нейното име е Brackets (https://brackets.io/) и е с отворен код. Изискването за нея е че трябва да инсталиран Local host. 

    Тук (https://aula.bg/fotoshop-web-instalaciia-ako-niamate-hosting) в коментарите на първия въпрос можете да водите как се инсталира ако стандартния начин както го показва лектора даде грешки. 
    Павел Сарандиев:

    https://aula.bg/fotoshop-web-instalaciia-ako-niamate-hosting

    Павел Сарандиев:

    https://brackets.io/


  • Защо при някои страници опциите работят и stylizer разрешава обработката , а при други не?

    Elena Kocheva:

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

    Ангел Арънски:

    Пише 'No stylesheets are open'. Ако това е проблема в действителност, то трябва да добавиш CSS файл в html-а. <LINK rel="stylesheet" href="style.css" type="text/css"> и да създадеш празен файл с това име.

Напред