Създаване на страница 6 (раздвижване)

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

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

Ако сте вече потребител - Регистриран съм
Видео
Назад Алтернативен видео плеър
¿ Напред
Това, което направихме в предните уроци, ще го поразчупим и подобрим Първо ще премахна фонът тук с F8, като го коментирам също така, margin-bottom ще го направя на нула пиксела.
 Отивам на бутоните и ще сложа border-radius обаче само на top-left да бъде 15 пиксела и се получават 15 пиксела.
 Виж как се заоблиха само от горната част, не бях сложил отдолу.
Слагам отдолу и се получава това.
 Сега отивам на global.
css Ще отида на този conteiner тук, където се слайдерите.
Ще сложа също border-radius.
 Само в горния край - 80 пиксела.
 след това трябва да се върна и от featured, където съм сложил фона, трябва да го махна за да стане прозрачно.
 Същото ще направя и тук за sidebar-а +border-radius Този път в долният десен ъгъл.
 Сега ще избера featuredshell и ще махна margin-bottom за да се долепят тези.
 Искам съдържанието ми да се застъпва и да влиза вътре.
 Това ще го направя, но първо трябва да преместя тези бутони от дясната страна.
 Сега ще ги намеря, те бяха в global.
css pagination и отивам на margin Вижте това ги центрира, left auto и right auto.
 Ако премахна right и сложа 0 пиксела, то ще отиде отдясно, а пък ако премахна left ще отида отляво.
 Затова тук ще сложа 0 пиксела и ще го променя на 15.
 Сега вече мога да променя на съдържанието divconteiner-a content, като му сложа в position, relative.
 Както виждате визуланите проблеми в момента са никакви, но всъщност извадихме този Div на нов слой.
 Сега ще мога с тези координати - top, да го преместя нагоре.
 Той обаче се покри от горният слой, за това трябва да му сложа z-index.
 Нека пробваме с 10, не стана с 10, затова ще го увелича на 300.
 Виждате с 300 стана! Понеже контейнера отгоре, който идва от скрипта най-вероятно е между 300 и 0 z-index.
 Сега на този page title h2 ще му сложа border-radius top-right, 25 пиксела.
 Същото ще го направя и за контейнера, понеже тук виждам някакъв ръб.
 Сега стана по-добре.
 Това което искам да направя в долната част, е само тази кутийка да се качва нагоре.
 Затова първо ще увелича height.
 Например така, а пък на другите ще им сложа margin-top.
 за да ги преместя да са надолу.
 Същият този margin-top, ще го копирам и на другия box.
 Сега остана само да преместя тази част нагоре, за да направя това трябва да избера containing.
 Избирам Fboxshell и да сложа za position relative.
 Сега го извадих на нов слой и top ще работи, като на top му дам минус координати.
 Единственото което трябва да направя е да прилепа footer-a към тях.
 margin-bottom С минусови координати.
 Накрая за финал ще сложа тук един border-radius, top right с 80 пиксела.
 Страницата се получи малко по-разчупена.
 Избирам Save и на двата файла.
 Тук давам refresh.
 И всичко продължава да си работи.
 Kакто виждате успяхме да излезнем, от стандартния редови дизайн, който беше в предният урок.
 Нека видим разликата.
 Тук всичко е на редове, имаме един ред тук, един тук.
 Това също е един ред и където той свършва почва нов ред.
 Докато в този дизайн преместихме части от тези редове, да застъпват горните редове.

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

  • Защо има разлика в това какво ми визуализира Stylizer и това как се вижда в браузъра?

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

    Прилагам картинки за да се види какво имам предвид. Става въпрос за копирайт текста долу!

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

    Има разлика понеже Stylizer не използва реалния броузър а модул който го пресъздава на 99%. Някой по-странни правила които не би трябвало да се използват, излизат грешно.

    Чрез иконката диамант в горния ляв ъгъл на Stylizer, от там избираш кой броузър искаш да симулираш.

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

    Има и друг вариант, просто да използваш комбинация от сложни правила върху един и същ елемент или поделементи , като например:
    position:relative; float:left; margin:-50px 50px; padding:10px 20px; display:inline-block; 
    Принципно всички те преместват елемента на някъде и много от тях не ни трябва да ги използваме заедно. Ако всеки броузър реши да изпълни тези правила но по различен ред, всеки ще покаже нещо различно.

    Това се получава понеже стандартите се диктуват от организацията W3C, те понякога са непълни и всеки от броузърите си правят собствени нови или различни интерпретации :) 
    Поне сега вие сте доста по-облагодетелствани понеже нещата са около 100 пъти по-лесни да се направят да работят на всички броузъри от както бяха преди 10 години :)
    Галина Караджова:

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

    Значи повредата не е в моя телевизор :) 
    Прегледах всички дивове и всички са затворени, пробвах да отворя страничката в различни броузари и промяна няма. От там изхождам, че има някакъв проблем с правилата в Stylizer. 
    В предните уроци  нямах проблем с този текс. В този се получава грешката при усложняването на страницата :)
    Ангел Арънски:

    Намерих къде е проблема. трябва да се добави float:left :)

    Когато започнеш да добавяш елементи с float в един контейнер, ще трябва всички в него да го имат.
    Има и друг вариант които се ползва. Вместо да слагаме clearfix и float, може да слагаме display:inline-block . Това ще доведе до същия ефект с малки разлики в margin и размерите на контейнера. Можеш да го изпробваш в някой прост файл с няколко DIV-а.

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

    10X :)

    Валентина :

    И при мен се получи разлика във визуализацията на копирайт текста в Stylizer и Web browser.


    Дани:

    И при мен копирайт текстът се "отлепи", след добавяне на float:left в chrome се поправи, но в mozilla продължава да "виси" - каква може да е причината да се визуализира различно в различните браузери? 

Напред