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

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

Ако сте вече потребител - Регистриран съм
Видео

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

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

    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 прозрачни картинки върху него
    Ивалина:

    http://dox.bg/files/dw?a=72843f34fb http://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" (Трябва ти второто)