Ефекти върху слоевете

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

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

Ако сте вече потребител - Регистриран съм
Видео
Назад Алтернативен видео плеър
¿ Напред
Сега ще ви покажа, какво имам предвид под анимиране на тази страница, която направихме в предишния урок.
 Затова ще навляза малко по-дълбоко сложната материя, която ще разглеждаме в модула с HTML.
 Тук имам отворен този файл.
 Първото нещо, което ще направя е да сложа този HTML - Link rel=stylesheet.
 "href=styles.
css" и да направя този "style.
css" празен файл.
 Вътре в същата директория.
 Сега ще мога да работя с една програма наречена "stylizer".
 Като отворя същата страница.
 Отляво ще излезе браузър, с отворенатастраница, а отдясно ще са CSS правилата.
 Тези CSS справила са абсолютно същото като това нещо тук.
 Тези стайл правила.
 Tова е CSS.
 Но в той случи са отделени във външен файл.
 Всичко, което добавям в този файл ще са правила към тази страница.
 За да ги адресирам, трябва да сложа класове.
 Как ще го направя това нещо? Сега, за да разбера тези бутони, как се казват, от къде им е html, ще дам десен бутон и "inspect element".
 Това е в Google Chrome.
 Тук ще ми каже, че това е картинка "l30-3".
 Ще я намеря в HTML.
 "l3_03.
png".
 И ще сложа в линка class="button".
 Сега с "button", може да използвам някоя ключова дума, затова ще го кръстя "menubutton" И ще го копирам, искам да намеря и другите бутони.
 Избирам "inspect".
 "l3_05" "l3_05" От линка му ще сложа същия.
 "l3_ 06" Файл и след това запази.
 Сега през тази програмата, мога да ги адресирам.
 Вижте как, когато натисна "Space", обикалям по тези елементи и отдолу тук тази линия, ще ми показва пътя до тях.
 Както виждате когато мина през бутоните ми показа, че са в HTML.
 Който от своя страна има елемент "body" А вътре в него е div, и още един div, още един div и в него "image".
 Сега аз искам да адресирам "a, menu button" "image".
 Натискам "make rule".
 И се появява в дясната страна.
 Сега тук мога да задавам правила.
 "opacity" 0.
5 или нула едно, с това се сменя прозрачността.
 И понеже направихме този дизайн на два слоя, не променям прозрачността на фона.
 Само на текста.
 И то само на текста, който съм избрал с css правилото.
 Което е "a menu button image" Сега искам, когато отивам върху този бутон, да се появява какъв ефект.
 Затова ще сложа тук директно след "a manu button", слагам две точки и "hover", това е ключва дума за "mouseover", което значи че когато мишката мине, това трябва да се получи.
 Сега това можеше да го използваме по друг начин.
 Например, в "psd" файла на първия слой, да имам един бутон, а на вторият слой втори бутон.
 Когато някой отиде с мишката, първият слой да се скрива, при "opacity" нула.
 И да се показва слоя отдолу.
 Така щяхме да имаме по-голям контрол върху това меню, директно от фотошоп.
 Сега ще се върна във фотошоп и ще променя тази картинка малко.
 Ще и сменя цвета.
 И ще дам "Save for web and devices".
 Kато този път, избера друга директория.
 За да не ми пълни предната, със ненужни неща, аз искам само тази картинка да взема.
 Ще я намеря от тук.
 Ще сменя името.
 Slide 2.
 Ще я копирам.
 Където са нормалните картинки.
 Тук ще сменя и ще сложа slide.
 Ще запаметя името 2 0 9 "slide 1" Ще се върна в HTML и ще потърси 209 като го прекръстя на Slide 1, както бяхме направили.
 Сега няма да има разлика.
 Всичко е ОК.
 След което ще отида в Google, за да добавя една "javascript" библиотека, която ще ми помогне по-лесно да ги намирам тези неща.
 Google "jquery api" като директно ще сложа кода на Google.
 Копирам го от тук.
 jquery Ще го сложа в хедъра Директно след линка, който направих.
 Давам save.
 След което ще напиша кратък скрипт.
 Като намеря първо елемента "slide1" Ще му сложа ID, за да мога да го адресирам със скрипта.
 Slides Ще отида горе в хедъра.
 Ще напиша script Отваряме и затваряме.
 Сега първото нещо, което добавих в script tag е този синтаксис, който е на "jquery" и означава, че това, което е вътре тук ще се изпълни дракон след, като е пусната страницата.
 Ако се опитаме да изпълняваме "javascript", преди да се зареди страницата и той изпълнява различни функции и библиотеки, които още не са заредили, ще има грешка.
 Затова всичко, което пиша ще го вкарвам между тези редове.
 Като разбира се, те работят само при "jquery".
 Но "jquery" е най-разпространената библиотека, така че най-вероятно ще работят навсякъде при вас.
 Тоест, във всички HTML, които имат "jquery" библиотека.
 За да проверите дали има такава, трябва да пуснете един search на jquery или ако няма, да добавите.
 Сега, когато дам "alert" например, "x" и натисна "F5" Kогато се зареди страницата, ще ми даде "x".
 Това, което искам да направя аз е да изпълня една функция "change".
 Една секунда и половина след като стартира страницата.
 Мина една секунда и половина след като стартира.
 и ни дава и "y".
 Сега тази функция, която направих ще използвам, за да поменя "slides".
 Трябва да го адресирам по този начин с "#" което ще селектира "ID slides".
 И тогава ще му променя атрибута "src" на "images".
 "slide2.
png" Натискам "f5" Забележете слайда се промени със следващия.
 Това "src" тук идва от...
 Първо трябва да намеря елемента.
 Понеже съм избрал "slides" да е "image" и той има "src" "images slider1" С този скрипт го променям на "images slide2" Сега трябва да го направя по някакъв начин.
 Да се завърта.
 Най-лесният начин е да сложа още един "timeout".
 Като този път е "change2".
 Копирам цялата функция.
 И този път ще променя на 1.
 Тоест, веднъж ще се пусне change, след това change 2, накрая трябва да се пусне пак change, за да се върти.
 Ще го сменя от тук.
 Давам "save".
 Както виждате, с основни "javascript" команди, които дори да не разбирате, ако препишете за две минути Mоже да изпълните 90% от ефектите, които се получават в повечето страници.
 Имаме ефекти върху бутоните, направени с "css".
 И с "javascript" сменяме картинката, тук може да поставяме няколко.
 И да добавя малко повече време между сменянията.
 Например тук.
 10 пъти повече.
 Така ще е по-нормално.
 Не се стряскайте от този урок, просто исках да ви покажа, какво може да се прави, когато комбинираме три от технологиите.
 "css, javascript и два файла, които сме ги свързали от два слоя, един върху друг.
 По този начин може да сездавате доста креативни страници.

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

  • Daniela:

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

    Ivan Mavrev:

    https://www.skybound.ca/download/

    Daniela:

    Благодаря

    Daniela:

    Свалих си програмата, но нямам тези опции, които при вас на видеото са долу в ляво (html,body,div и др...)И като натисна спейса не ми се маркира нищо в синьо....

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

    Отговор на въпроса на https://aula.bg/question/7315

    Илиян Виденов:

    Здравейте, не иска да отвори линка в Stylizer. Пише "No style sheets loaded  because this page is being rendered in an IE Compatibility Mode...

    Илиян Виденов:

    Някой ще ми отговори ли ?

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

    В Stylizer можеш да избираш с кой броузър да преглеждаш страницата. Най-добре това да е firefox или chrome. (Избира се от горния ляв ъгъл) Възможно е също да нямаш свързан .css файл в html-а. 

    Илиян Виденов:

    Не мога да променя браузъра, защото ми иска пълна версия на програмата 


    Илиян Виденов:

    Лицензирах я и вече всичко е наред.

    Теодора Симова:

    Тъй като програмата е платена и опцията не работи прии безплатната !!!! Дайте пример с безплатна ,защото не е правилно това !!!

  • Проблем с файлове style.css.txt

    Daniela:

    Toзи style.css празен документ, който е показан в урока от прогарама STylizer ли го правим?

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

    Не, просто си правим празен файл и го наименуваме style.css Внимавай windows да не преименува файла на style.css.txt и да го показва като style.css Това е опция във folder options на explorer, 'Hide extensions of known file types'

    Стиляна Димитрова:

    извинявам се, но не можах да се оправя

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

    Файла продължава да е .txt Името му в момента е style.css.txt За да го оправиш, трябва да влезнеш в настройките на windows 'folder options' и да премахнеш 'hide extension of known file types'

    1. Старт бутон
    2. Търси в полето 'folder options'
    3. Таб 'View'
    4. Премахни 'Hide extensions for known file types'
    5. Ок
    6. Преименувай файла отново

  • Как да направя правило в Stylizer?

    ПЕТЯ Георгиева                             :

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




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

    Здравей, няма правилно свързан style.css в HTML файла. (Съобщението гласи, че не може да го намери) 

    Ще трябва да създадеш празен файл. Направи това с notepad или notepad++, но гледай да е style.css, а не style.css.txt
    В windows по подразбиране настройката е да скрива разширението на познати файлове 'hide file extension of known file types' и се намира във 'folder options'. Тази опция трябва да се премахне, иначе ще правим постоянно файлове index.html.txt и няма да можем да ги различим, понеже ще излизат като index.html. 
    Показана е тази опция в началото на HTML уроците.
    ПЕТЯ Георгиева                             :

    Да всичко съм направила както си ми написал в отговора. Направих празен файл с notepad и на файла пише, че е CSS (иконката не е като в урока, а е бяла...все едно не е намерило с коя програма да отвори файла, така е и на html не ми показва chrome иконка/картинка....както и да е) Опцията в folder options ми е включена на show hidden files, folders and drives. Явно ще трябва да направя всичко наново за да разбера от къде идва проблема, защото уроците ги гледам през голям интервал от време, а и всичко си записвам и ми отнема повече време. Мерси за отговора.


  • Защо не направите курс само за команди и управление на html?

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

    Здравейте! Като човек, който никога не се е занимавал с команди, останах силно притеснена от това, че не разбирам кое какво е. Защо не направите курс, който следва ясно стъпките в писането на команди, каква е логиката, кое какво означава, кога се използва и т.н  Смятам, че полезността и успеваемостта би била по-голяма. Поздрави

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

    Здравей. В тази част на курса идеята не е да се разбира HTML-а из основи. Той е обяснен принципно в предпоследния модул, както и в някои от въпросите към уроците. Също така е възможно и да се направи курс по HTML самостоятелно с повече фокус върху темата.


    Принципно няма нищо сложно. Първото нещо което трябва да схванеш, е че HTML-а не е език за програмиране. Няма команди или процедури. Това е език за структуриране на съдържание с цел унифицирана интерпретация от компютърен алгоритъм.
    Например, ако ни дадат задача, да напишем в един текстов файл абсолютно минималистично данните (Име, години, град, снимки). То без да ползваме език за маркиране, щяхме да направим така:

    Иван, 24, София, img1.jpg, img2.jpg
    Петър, 27, Бургас, img12.jpg, img13.jpg, img14.jpg

    Ако искаме обаче това да се разбира от компютър, то първо задаваме по коя схема ще маркираме. Това може да е BML, (Business Markup Language), PML ( Person Markup Language), HTML ( Hyper Text Markup Language). Решаваме, че това ще е PML (чисто теоретично) В него има елементите <person> <picture> и още много други. Те са зададени в дефиницията му.
    Така след като прочетем дефиницията на PML, ще направим файла си така и той ще бъде разбран от софтуера който работи с такива файлове.

    <person name="Иван" city="София" age="24">
         <picture src="img1.jpg" >
         <picture src="img2.jpg" >
    </person>

    <person name="Петър" city="Бургас" age="27">
         <picture src="img12.jpg" >
         <picture src="img13.jpg" >
         <picture src="img14.jpg" >
    </person>

    Сигурно се чудиш, защо <picture> няма затварящ таг, както е <person></person>. Някои тагове са така, за тях няма смисъл да бъдат затваряни, тъй като поставят един елемент, който не може да съдържа други елементи в себе си. Като например <br> - за нов ред <img> - картинка <hr> - хоризонтална черта

    След което решаваме да направим същия лист в HTML. Там обаче нямаме тагове за <person> или <picture>, за това ще ползваме тези които имаме според дефиницията му. В 95% от случаите се ползват <div><span><img><b><i><em><p><br><a>

    <div class="person">
        <div class="name">Иван</div>
        <div class="age">24</div>
        <div class="city">София</div>
        <div class="pictures">
              <img src="img1.jpg">
              <img src="img2.jpg">
        </div>
    </div>

    <div class="person">
        <div class="name">Петър</div>
        <div class="age">27</div>
        <div class="city">Бургас</div>
        <div class="pictures">
             <img src="img12.jpg">
             <img src="img13.jpg">
             <img src="img14.jpg">
        </div>
    </div>

    Сега може да визуализираме този HTML както си поискаме. Така зададен HTML-а може да бъде стилизиран по всички възможни за HTML начини. Това обаче, се прави със CSS (Cascading Style Sheets), което е обяснено в предпоследния модул също. С едно-две CSS правила можем да сложим картинките на един ред или пък да са едно върху друго. Можем да окажем размера на фонта на името, точната позиция на годините, града. Да сложим всичко върху една картинка от Photoshop или пък да му сложим плътен цвят и рамка.
    Всъщност кода на HTML-а се вижда когато махнем CSS, тоест всичко което е в 
    style="...." и
    <STYLE>....</STYLE> и
    <LINK type="stylesheet">

    След това трябва да махнем всичкия JavaScript който пък се намира в <SCRIPT>...</SCRIPT>

    Тук ще свържа няколко теми от форума даващи още информация:
    https://aula.bg/question/7846
    https://aula.bg/question/7913

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

    Благодаря Поизясниха ми се нещата за сега

  • Може ли помощ с анимирането?

    Iveta Atanasova:

    Здравейте, следвам урока стъпка по стъпка и преписвам командите точно, но при мен анимирането на картинките с jQuery не работи. Предполагам, че това идва от различната версия - в урока е 1.8.0 , а на мен ми дава да тегля последните излязли - 1.11.1 и 2.1.1 . Съответно влязох на официалния сайт на jQuery с надеждата да намеря дали функцията ми е правилна, но без успех. Моля за съдействие.

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

    Здравей, не е от jquery версията. Използват се прекалено основни методи, за да е от това. 

    Като например https://api.jquery.com/attr/
    Трябва да е от нещо друго. Може да са объркани имената 'slides' или нещо от сорта. Можеш да видиш това като натиснеш CTRL+SHIFT+J
    и след това презаредиш страницата с F5.
    Най-вероятно ще се покажат грешки в червено. Ако не ги разбираш ги покажи тук в един screenshot.
    Iveta Atanasova:

    Явно все пак грешката е jquery ама и не само... прикачам screenshot с надеждата да се разбере защо не става :)

    Златин Христов:

    Просто си добавила една скоба в повече :idea:

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

    Натисни на файла където е показано и ще те отведе на реда с грешката. Най-вероятно е точно както Златин казва.

  • Защо ни давате програма ,която е платена ? 

    Теодора Симова:

    На свободната версия и е забранен bullseye , а платената е 70 $ ,което е малко прекалено за едно упражнение ! Все пак ние се учим и на този етап не ми трябва ! Моля да предложите друга програма с която можем да работим!

    Теодора Симова:

    Намерих една програма Kompozer безплатна е ,ако може да обясните как стават нещата там моля ви

  • Може ли да ми отговорите необходими ли са тези уроци за начинаещи дизайнери и не е ли това работа на програмистите?

    Елена:

    Объркваща и сложна материя.

    Веселин:

    Здравей, не е задължително дизайнерите да знаят този материал. Но е много хубаво. Като се има в предвид, че не е чак толкова сложен, че да не може да се разбере след 2 седмици труд, аз силно го препоръчвам. В колкото по-голяма фирма работиш, толкова по-специализирани ще са твоите знания. Дори работата - дизайн ще бъде разбита на няколко части. Но при малките фирми и старт-ъпите тези знания ще ти трябват. Освен това, ако ги разбереш, самият дизайн който правиш, ще е много по-лесен за реализация и ще се прехвърля през Интернет до потребителите по-бързо (Което в момента е критична характеристика). Не е казано, че трябва да станеш програмист, за да разбереш тези неща. Този материал е като предмета за ученици 'Биология' и няма да те направи доктор, така че не му се плаши. Плюс това, ще ти даде разбиране на целия процес и по-лесна комуникация с разработчиците.

    Елена:

    Благодаря ти :) Ще се постарая да последвам съвета ти :)

Напред