Метод-С няколко слоя

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

Ако сте вече потребител - Регистриран съм
Видео
Назад Алтернативен видео плеър
¿ Напред
Следващият начин е по-интересен.
Дава ни повече свобода, ако искаме да анимираме или използваме javascript ефекти.
В случая няма да имаме javascript ефекти.
Нека да ви покажа как се прави.
Разделих предния файл на два файла.
Единият е само с текст и картинки.
Другият е с фоновите елементи.
Направих го, като ги скривах един по един, от тук.
Отварям този файл.
Той няма слайсове.
Избирам Export.
Експортирам в Jpg High.
130 килобайта.
Кликвам на Save.
Записвам го като page 2.
Отварям този файл.
Тук слайсовете са настроени, както в предходния урок.
Премахнвам фона.
Избирам Save for Web.
Селектирам всичко.
Ще избера png 24 и ще добавя transparency.
Големината се увеличи с 200 килобайта.
Всичките тези елементи ще може да ги контролираме със скрипт.
Например да заменя само текста контакти с друга картинка, когато някой направи mouseover без да променя фона на бутона.
Избирам Save.
Записвам го като page2 layer2 Да видим какво се получи.
Това е едната страница.
Това е другата.
Нека да ги обединим.
От тук ще взема картинката.
В случая не е създал повече html, a е само този.
Слагам го най-отгоре, веднага след body style.
Когато избера Save, и отида на страницата.
Виждате, че те са застанали една върху друга.
За да ги контролирана малко по-добре, тук ще сложа Style, position absolute z-index 1, което оказва на кой слой е.
В случай tози ще е z index 1.
Долните слайдове, които представляват текста, ще ги сложа да са като z index 2.
Tака може да си имаме колкото си искаме слоеве.
Тоест може три-четири psd файла да ги сложите един върху друг и да ги анимирате.
За да преместя всичко в центъра ще запиша един div.
От началото, веднага след body.
Докрая, точно преди да свърши body.
Ще запазя файла.
Сега не проработи понеже, този div няма width.
Трябва да се добави, какъвто е размера на страницата.
Премести се в центъра.
Така получихме тази страница от два psd файла.
Имайки два слоя.

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

  • При всички случаи ли трябва слоя с картинките и текста да бъде слайснат ?

    Daniela:

    При всички случаи ли трябва слоя с картинките и текста да бъде слайснат ? Защото въпросният слой не го нарязах и не ми се получи после при html въвеждането,т.е не ми се заместиха страниците една в/у друга....

    Мария Балева:

    Здравей,

    Файла с фоновите елементи не се слайсва. Запазваш го като едно изображение. SaveforWev and Devices със следните характеристики file name: page2.html format: HTML and image setting: background image

    Втория файл с текста и картинките е нарязан по същия начин като в предния урок, но трябва да има слайсове. Преди да го запазиш се маха background-a и след това отиваш на SaveforWev and Devices селектираш цялото изображение, избираш png24 и се дава transparency. Запазваш го със следните характеристики: format: HTML and image setting: background image Slices: All slices

    След това правиш промените н html файла. Ако има отново трудности пиши.

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

    Здравейте ,
    Файлът с фоновите елементи се получава слайснат. Бихте ли обяснили как се премахват слайсовете?   Освен това моите файлове се записват в Notepad  директно. Не ми се получава Интернет страница. Как да я получа? Записът е с посочените по-горе характеристики.
         

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

    Изтриваш slices като избереш инструмента за селектиране на slices и ги изтриеш с бутона на клавиатурата Delete


    За да отвориш html файл не с notepad, а с някой броузър - десен бутон "Open with" и там избираш броузъра.

    Моля задавайте всеки въпрос като отделен и не в отговор на друг въпрос :)
    инж. Юлия Петрова Савова:

    Благодаря. Получи се.

    Venko Stoev:

    При мен от самото начало когато обединих страниците се събраха но не на точните и текста излезе извън предназначените за него кутийки, защо ли? 

  • Защо не ми се обединиха страниците?

    Ивалина:

    Здравейте, Следвах стъпките в урока, но страниците ми не се обединиха.

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

    Ще ми трябва малко повече информация.

    Изпълни ли всички стъпки ? 
    - записване със 'Save For Web' в различни файлове
    - събиране на HTML-а от тези файлове в един
    - промени в HTML-а, за да се насложат един върху друг
    Ивалина:

    записване със 'Save For Web' в различни файлове - да

     събиране на HTML-а от тези файлове в един
    промени в HTML-а, за да се насложат един върху друг
    това, което съм показала чрез скрийншота е събиране и промяна на HTML - а или нещо съм пропуснала. Благодаря,
    Ангел Арънски:

    В следващия урок е даден файла за сваляне, можеш да видиш как е там и да сравниш. Аз не виждам нищо нередно в кода ти. Ако искаш качи файловете в dropbox или google drive, архивирани и прати връзка, за да видим. 


    Не знам какво виждаш, но това което би трябвало да стане е да имаш един jpg фон и нарязани png прозрачни картинки върху него
    Ивалина:

    https://dox.bg/files/dw?a=72843f34fb https://dox.bg/files/dw?a=5ce26ba344  мисля че в общи линии се получи

    Ивалина:

    https://www.dropbox.com/sh/5d9brak5ok1pal3/AACP2JCEUlqQqJksBJwPQGRla

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

    Няма картинки, но изглежда както трябва. Ако имаш някакви проблеми, то те може да са от това, че фона има position:absolute, но няма  "left:0px; top:0px;" вътре в стила, както другото


    Говоря за реда <img style="position:absolute;z-index:1" src="images/page2.jpg" width="1055" height="1288" alt="">
  • Защо background слоят ми излиза така?

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

    Здравейте! Следвам стъпките от урока, но при достигане запазване на страницата с картинки явно обърквам нещо в запазването...  Стъпките ми са:
    Save for web and div. ->JPEG ->high qualitty ->name -> format - HTML and images - >settings - background image ->save.

    Резултатът е това:
    под №2 - не може да се скролва.

    Ангел Арънски:
    Принципно в стъпките ти виждам следното. За най-долния слой можеш да избереш JPG, но за следващите ще ти трябва PNG, понеже JPG няма прозрачност.
    Иначе в стъпките ти всичко изглежда наред.

    Ако двата слоя не излизат един върху друг и както трябва, то значи нещо се е объркало с HTML-а които леко променяме. Дори при една изпусната буквичка, всичко може да се счупи до неузнаваемост.
    Можеш да прегледаш архива в следващия урок и да сравниш дали всичко е написано както трябва. Там има HTML-а на направеното в този "page2_layer2.html" заедно с малко анимиращ javascript които можеш да игнорираш
    Маринела Тенева:

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

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

    Не трябва да има зададен background в BODY тага. Може от там да идва проблема. Всъщност това обяснява защо не можеш да scroll-ваш. Картинката трябва да е зададена като IMG. Когато слагаме фон с background image, то броузъра няма да разтегли платното на страницата спрямо големината му

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

    Проблемът се реши, като запазих файла със Default settings. След това си въведох нужните команди и резултатът от всичко е това:


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

    Всичко е центрирано и пасва

  • Как да сложа картинки една върху друга?

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

    Опитах много пъти. Дори да го копирам два пъти след боди. появява се от страни.

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

    Забележи как да позиционирани другите картинки:

    Ако искаш тази картинка която си маркирала да излезне върху или под другите, то трябва да и сложиш CSS позиция

    Първо слагаш 'id'

    <img id="neshto" src="............." width="...." height="....">
    

    След това отиваш и след другите CSS правила, като това на горната картинка, слагаш

    #neshto {
    position:absolute;
    top:705px;
    left:404px;
    z-index:10
    }
    

    Top и Left можеш да ги разместиш, за да сложиш картинката където решиш. Z-index ще промени реда на слоя. Ако сложиш на друг слой z-index: 11, ще го накараш де излезне върху този с z-index: 10

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

    Значи при сдвояването ; Взимам img(от Background) и го слагам след body (в файла с картинките) Задавам позиция(винаги ли пишем-absolute i relative-абсолютно и относително) kak определям стойностите за top, left, index(за индекс-колкото по-голяма стойност,толкова по нагоре в слоевете?) За да използваме CSS- се отварят {...} този тип скоби за да зададем координати, а в HTML-<>...</> тези .това така ли е? Моя случай има; #(кога се поставя този знак)? neshto- описват се координатите на местоположението на изображението в компютъра ? В полето на <head - се манипулира даден текст с css? В полето на <body - izobrajeniq Кога и как избираме <div - division- раздел за да центрираме страницата? Отново ли при първият div style които срещнем в Notepad? И какъв е фаилът ,които просто записваме със разширение .css rabotq q s window 8.1 Опитах се ,но той пак си остана .тхт Имам още куп въпроси понеже за пръв път навлизам в света на таговете и техните атрибути. Надявам се да не съм досадна,но смятам че тези неща трябва да се "излъскат" в началото за да мога да продължа с уроците Ви Ако се сетите нещо важно, което съм пропуснала да попитам,ще се радвам да го допълните. Ако съм задала или написала нещо некоректно ,се извинявам. Благодаря предварително! :)

    Веселин:

    Радвам се, че си задаваш такива въпроси. Това значи, че започваш да навлизаш в нещата.

    В тези уроци е показано как се прави точно определено нещо с HTML и идеята не е била да се разбира, а да може да се изпълни стъпка по стъпка и с много copy/paste :)

    Предлагам ти да преминеш напред, има уроци за HTML, CSS и Stylizer, които ще ти отговорят на повечето въпроси и можеш да се върнеш на това упражнение, за да го довършиш.

    CSS се слага или във външен файл (например style.css) или вътре в HTML-а в таг

    . Той се поставя точно между Всяко правило има селектор и правила. Селектора е това което виждаш преди отварящата скоба { Например #neshto. Това значи, че искаме да стилизираме html елемент с "id"="neshto".

    CSS правилата започващи с точка, селектират класове, като class="drugo". Можеш да имаш няколко елемента с този клас и всичките ще бъдат стилизирани със CSS .drugo { }

    CSS правила може да има и в HTML елемтите. Например <div style=" ...... ">

    Сега, това което слагаш в правилата са различни неща които стилизират селектираните елементи. Тук имаме основните Кратък CSS наръчник

    Координатите се описват с top и left или top и right или bottom и left или bottom и right. За да можеш да ги променяш, елемента трябва да е position:absolute или position:relative. Нулевата координата на елемента в случая absolute е първия 'ancestor' елемент (родител, прародител :) ), който има фиксирани координати. Това ще е BODY, освен ако елемента ти не е в друг елемент, който е позициониран с relative или absolute. Тогава преместването ще е от неговата нулева координата.

    Елементите <div> са просто контейнери с картинки, текст и тнт. Избираш ги спрямо това какво има в тях. Ако натиснеш десен бутон върху елемента и 'Inspect' Chrome ще ти покaже къде се намира той в HTML-а му.

  • Защо нямам CSS класове след PS export

    Алекс:

    при мен няма изобщо това с което започва урока <link.........> В предния урок направих всичко, на слоеве е, центрирано, но нямам това...как да продължа

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

    Зависи от настройките на Photoshop export-а. Погледни всички настройки при export, показани са в уроците. Би трябвало да е свързано с "Inline CSS" или "CSS Classes" (Трябва ти второто)