Elkészült a mindenki által annyira várt videó, ahol a korábban Photoshopban elkészített weboldal mintából megírjuk a HTML és CSS kódot.
Videó
Őszi hangulatú weboldal 2.rész
86 hozzászólás
Keresés a blogon
Kategóriák
Legújabb hozzászólások
-
Mi a különbség a UX designer és a webdesigner között?
Nem igazán, mert annyi hoszting cég van, mint égen a csillag. 10 perc alatt tudsz intézni tárhelyet....
-
Mi a különbség a UX designer és a webdesigner között?
Azt vettem észre, hogy a legtöbb weboldal készítéssel foglalkozó cég nyújt a weboldal mellé hosting szolgáltatást is. Szerinted nagyon nagy hátrány ha...
-
Mi a különbség a UX designer és a webdesigner között?
Ki a célcsoport? Van e jelenlegi weboldal / meglévő arculat amihez igazodni kell? Ha nincs még oldal, van e már domain / tárhely? Ki fogja karbantarta...
-
Mi a különbség a UX designer és a webdesigner között?
Hali. Azt szeretném kérdezni, hogy ha egy ügyfél rendel tőled egy teljes weboldalt, és a tervezést és a kódolást is rád bízza, akkor mik azok a dolgok...
-
Klónok támadása: Vectr
Plusz mostantól az Adobe XD is ingyenes lett....
-
Klónok támadása: Vectr
Ajánlom a Figma nevű szoftvert, működik weben, Macen és Winen is. A Sketch-hez hasonló felépítése van, sőt igazából egy másolat, még a billentyűparanc...
-
WordPress sablon készítés
Ott NextGen gallery van, az ilyen mindent tudó galéria bővítmény. Azért szeretem, mert lehet hozzá írni saját template-et, és akkor semmilyen gyári sz...
-
WordPress sablon készítés
Üdv! Wordpresshez milyen galéria plugint ajánlasz? Olyanra gondolok, mint amilyen a wellatirun oldalán is van például....
-
A villanyszerelés örömei panelben
Igen, én sem állítottam az ellenkezőjét :)...
-
A villanyszerelés örömei panelben
A világításhoz is kötelező a védőföld kiépítése....
-
Bootstrap carousel
Sikerült megcsinálni a komponensekkel együtt. :) Köszi....
-
Bootstrap carousel
Köszi. És itt sem lehet külön csak a carousel komponest letölteni? Egybe le kell szednem a bootstrapet hozzá?...
Hali. Azt akarom kérdezni, hogy te honnan veszel ötleteket? Mert én többször is próbáltam saját oldalt tervezni, de sose sikerült. 1 volt ami jó volt de 1 évembe telt, és nagyon sokat változtattam mindig.
Van csomó oldal ahonnan lehet inspirálódni, illetve nem árt követni külföldi webdesign blogokat.
Nézegettem más oldalakat, de ha nekiálltam tervezni egyet, az katasztrófa lett 😀 Jobb ha senki nem látja.. 😀
Szia
Nekem a szovegek kilognak a container-en kivulre. Mit irhattam rosszul?
Koszi
Valamelyik DIV-nek a mérete nem stimmel szerintem.
Koszi a valaszt. Sikerult kijavitani. 🙂
Szia
PS-ben egyes oldalrészek kijelőlése után melyik billentyűkombináció segítségével hozod elő azt az ablakot amelyik pontosan megmutatja annak az elemnek a méretét?
Válaszodat előre is köszi
Hello!
Ha ki van jelölve, nyomj ctrl+c -t, ekkor vágólapra teszi, ha nyomsz egy ctrl+n -t akkor egy új képet hoz létre, ekkor akkora méretű lesz, mint a vágólapon lévő kép és a képméretnél ezek az adatok lesznek. De vigyázz arra, hogy ha átlátszó rész volt a szélén, akkor azt nem teszi ilyenkor hozzá!
Megint én vagyok :$
most az a baj van ,hogy
http://dr-maps.allalla.com/hiba.jpg
ezen a képen a menüpontokat kéne középreigazítani..
és hiába adom a text-align: center; -t nem csinál semmit
Style.css
body {
background: #000;
font-family: Stencil Std,Tekton Pro,tahoma,arial,sans-serif,verdana;
font-size: 11px;
}
div#container {
width: 790px;
height: 590px;
padding: 5px;
background: url(‘http://dr-maps.allalla.com/bg_container.png’);
margin: 40px auto;
-moz-box-shadow: 0 0 20px #7e7e7e;
-webkit-box-shadow: 0 0 20px #7e7e7e;
box-shadow: 0 0 35px #7e7e7e;
}
div#header {
width: 790px;
height: 21px;
padding-top: 200px;
background: url(‘http://dr-maps.allalla.com/bg_header.jpg’);
text-align: center;
}
div#header a {
color: #a19498;
text-transform: uppercase;
font-family: trebuchet MS;
font-size: 20px;
font-weight: bold;
text-decoration: none;
margin: 0 65px;
}
Nekem pedig úgy tűnik a képen, hogy középen vannak az egyed menüpontok.
nem úgy értettem,hanem h felfelé közepreigazítani, azt hogy csináljam? mert a menüpontok a kis “átlátszó”doboz alján van,és nekem feljebbkéne vinni középre
Nekem az a baj lépett fel, videóban “1:10” -től mikor a háttért aztán a bg_header.jpg -t mented, én kijelölöm + ctrl+c aztán nyitok egy újat ctrl+n , majd ctrl+v és csak egy fehér kép van .. mi a baj?
Nyomjál Ctrl+Shift+C-t a másoláshoz.
Rendben,már megyen,köszönöm 🙂
Kérlek nézzétek meg az enyémet is.
http://www.manofaktura.co.cc/other/cyrex_autumn
Köszönöm.
Jó lett. De a menü FF-ben furcsa. Túl nagy a padding.
Hi Cyrex. 😀 a Paddingnél aztmondtad , mindegyiknél 20px 😀 a heightből 30px-t vontál le !? 😀 ez hiba vagy tényleg így szeretted volna méretezni a boxot ? 😀
Köszönöm!
Dolgozom a problémán!
Köszönöm a választ!
De a korrigálás után sem működik!
http://kepfeltoltes.hu/view/120803/804796288V_g_lap02_www.kepfeltoltes.hu_.jpg
A képeknek rossz az elérési útvonala a CSS-ben, azért nem látszik semmilyen grafikai elem.
Ez nem hiba de gáz:
D:\Webszerkesztés\Próba weblapok\Őszi hangulatú weboldal készítése
Nem kell regényt írni a könyvtárak neveihez. Elég lenne annyi, hogy D:\web\test\autumn_page
Itt elvileg nem okoz problémát de, ha egy éles webszerveren így nevezed el a könyvtárakat, tutira nem fog jól működni.
Ezt elfelejtettem!
http://kepfeltoltes.hu/view/120803/V_g_lap01_www.kepfeltoltes.hu_.jpg
A background-nál felesleges szóközök vannak, a header-en belüli A tag-nél a color után nincs pontosvessző. Ha feketével írja az attribútumot akkor az vagy hibás vagy nem létezik. Töltsél le újabb notepad ++ verziót, az már támogatják a HTML5-öt is.
Szia “Cyrex”!
Szeretném megkérdezni, hogy mit csináltam rosszul, mert ha megnyitom, akkor tiszta fekete hátteret kapok benne jobboldalt piros a fejléc betűk pirosak.
Addig nem akarok tovább menni, míg ez a hiba fent áll!
Köszönöm a választ!
Igen, minden utf-8.
(illetve nem tudom pontosan mit értesz azalatt, hogy a PHP-ben is megadtam-e)
De most nyitottam egy sima txt-fájlt, átmásoltam abba a php-ból mindent és ezzel van ékezet.
Notepad++ szerint a kódolása ennek ANSI, de megadtam metába az utf-8-at.
“Notepad++ szerint a kódolása ennek ANSI”
ez úgy működik, hogy a notepad “encoding” menüje nem tájékoztató jellegű, hanem rá kell kattntani az utf8 BOM nélkül-re és akkor átváltoztatja (ezt azonnal látni is fogod mivel az ékezetek átváltoznak más karakterekké meg még más, egyébként láthatatlan micsodákká)
A php-ben meg küldhetsz a fájl elején egy headert:
< ?php header("Content-Type: text/html; charset=UTF-8"); ?>Közben sikerült rájönnöm miért van…
A chrome-al ellentétben az FF és az opera elég butuska állat.
Ez volt:
Ez lett:
Viszont most a karakterekkel van gond.
Szintén FF és Opera (meg windows 8-as IE alatt):
Kezdőlap = KezdĹlap
Galéria = GalĂŠria
*.php minden lap.
Esetleg erre valami ötleted?
** ami kimaradt:
” \index.css ” ről /index.css -re kellelt változtatni az eléréseket, tehát a dőlés iránya volt a hiba…
A karakterkészlet: utf-8
A fájl kódolása is UTF-8? A PHP kódban is megadtad az UTF-8-as kódolást?
Hello!
A css tutorial videók segítségével készítettem egy weboldalt, ami google chrome-ban nézve tökéletesen úgy jelenik meg, ahogy azt én fejben elképzeltem, sőt még IE-ben is jónak mondom, de Operában és Firefoxban katasztrofális a helyzet.
Felismerhetetlenül szétesik.
Ennek mi lehet az oka?
Kb ugyan azokat a kódokat használtam, amiket te.
Egyébként a lapok betöltéséhez az egyszerű PHP oldalfelépítéses tutorialt használtam, op-al inklúdolja a lapokat a keret.
Ezt én így látatlanban nem tudom megmondani.
Üdv!
Először is gratulálok a videókhoz!
Kérdésem az lenne felétek hogy ha a css-ből megadom az elérési utat a képnek de nem jeleníti meg.
pl:
dic#container {
background :url(../pic/bg_header.png);
width: 1024px;
height: 395px;
}
Wampservert használom!
Próbáltam más free oldal ott megjelenít mindent.
Pontról-pontra végigkövettem a munkafolyamatot és ugyanúgy írtam mindent de nem akarja a jót.
Ha valaki tud valami megoldást az megköszönném.
Elírtam a dolgot!
Ez a helyes:
div#header {
width: 1024px;
height: 398px;
background-image:url(../pic/bg_header.jpg);
}
ha a css fájlod külön mappában van akkor okésnak kéne lennie, de ha a css is csak kintvan a gyökérben, akkor vedd le ezt a részt: “../” …mert ez visszalép…írd le a mappák elrendezését meg minden…abból meg lehet állapítani h mi a gond.
A nagy igyekezetembe nem zártam le a containert a html-be,így nem tudtam css-be formázni.
Egyébként a backgroundnál kihagytad a két aposztrófot.
Szia!
Az lenne a kérdésem, hogy Opera böngésző alatt a boxshadow-t hogy tudom beállítani?
Firefox alatt jó és Chrome alatt is, de Opera alatt nem :S
-o-box-shadow: szerintem ez az.
Kedves Cyrex!
Azt megkérdezhetem, hogy a dreamweaver-rel hogy állsz? esetleg lehetséges lesz ebben a témában is tutorial, illetve ugyan ez illustratorral. Előre is köszönöm a választ!
Nem használok DW-t, hamarabb megírja az ember a kódot, mire egy wysiwyg progival összeszerkeszti. Illustrator tutorial biztosan lesz majd.
meg mi ez a <link rel="chortcut icon" href…. nem is mondod …asdasdas
Favicon.
helloka van egy aprócska kérdésem, ahogy látom, te egész jól vágod ezt az egész webes dolgokat! Akkor miért nem saját oldalad van, azaz nem bunkóságból. XD Azaz mert wordpreselsz, ha teis tudnál csinálni egy sajátot?
Egyrészt nem tudnék csinálni sajátot, mert nem vagyok programozó, másrészt meg minek állnék egyáltalán neki,ha a WP minden tud amit kell, sőt még annál jóval többet is? Nem véletlenül használják több, mint 25 millióan…
A lényeg, hogy találd meg a magadnak megfelelőt! 😀
Helló
A tutoriál jó lett. A gépen a karakter kódolás jó, de ha felteszem internetre, akkor mindig baj van az ékezetekkel. Próbáltam megoldani, de nem jött össze.
Szerinted hogyan lehetne megoldani?
Köszi a segítséget előre is!
Üdv.: BeluDavid
link:
http://beludavid.weboldala.net/tutorial
http://beludavid.atw.hu
Mindenkinek ez a baja, ugyanis az ATW valamiért nem támogatja az ITF-8-at. Vagy állítsd át latin 2-re, vagy keress másik szervert.
De az http://okhost.eu -n van egy másik oldal is amit én szerkesztek, de az oldalt nem én csináltam ha nem letöltöttem és minden jó.
De nem tudom mi a különbség a kettő oldal kódja között.
link:
http://belusuli.weboldala.net
Hali!
Már az elején nem másolta a CS5 ki a contentnek a layer effektjeit az új lapra, megoldottam, de nem értem neked hogyan másolja át az effekteket? Nekem csak egy üres réteg másolódik át. Előre is köszi!
Használd a Ctrl+Shift+C kombót a másoláshoz, az mindent vágólapra tesz effektekkel együtt, függetlenül attól, hogy melyik rétegen van a cucc.
Ok, köszi így müködik!
Szia!
Köszi a videókat! Már várom a többit! Sokat segítettek!
Helló Cyrex ! Nagyon jók a tutorialjaid ,igényes és ami legfontosabb érthető! 🙂
Lenne egy kérésem vagy inkább kérdésem ,olyan tutorial videot nem tervezel ahol WordPress CMS -rendszerére készítesz el egy sablont?
Szerintem népszerű lenne…
Előre is köszönöm válaszod
Mindig az a baj az ilyen videókkal, hogy, ha bemutatnám, hogyan kell sablont készíteni WP-hez, utána jönnének a kérdések, hogy mi az a WP, hogyan kell telepíteni? Utána jönne, hogy miért nem tudják lokálban telepíteni, a következő probléma a webszerver beállítása lenne, majd a PHP konfigurálása. Ilyen videót csak sorozatban lenne értelme megcsinálni. Vannak ilyen videók egyébként, csak szerintem fizetni kell érte: http://wpvideo.hu/
Szia! Hát aki nem tud egy cms rendszert használni illetve felinstalálni az megérdemli a sorsát 😛 De azért köszi hogy visszaírtál
Hát szerintem nézz körül az oldalon, hogy milyen kérdéseket tesznek fel 🙂 Eszméletlen. Sok videó tervbe van véve, majd lehet, hogy lesz WP is.
Rendben köszi a Gyors választ ! 🙂
10px-el kevesebb lett a height a news divnél 😛
Igen, ezt utólag én is észrevettem, de szerencsére nem befolyásolta az eredményt. Mondjuk jó lenne megtanulnom kivonni és összeadni rendesen
hát meglehet de am jó lett naon főleg hogy mostmá azt is tudom hogy hogy kell olyan fix szövegdobozt csinálni vagy mit
Lécciii enyémet is értékeljétek, bár én nem csináltam küldöm logo-t…
Léciike 🙂
http://noob.hu/2011/01/10/weboldal.jpg
Szia…tök jó lett az oldi…még nem töltöttem fel a tárhelyre, ezért csak a png képet mutatom meg…a menüt még ne nézd, azon még alakítok…
http://kepfeltoltes.hu/110102/template_www.kepfeltoltes.hu_.png
Egyébként az lenne a kérdésem h h lehet azt megcsinálni, hogy ha vki bejelentkezett, csak akkor lásson bizonyos menüpontokat…tehát regisztrált, bejelentkezett, és utána a menüsorból eltűnne a regisztráció, és a bejelentkezés menüpont, de előjönne a kijelentkezés, és még pár egyéb menüpont…ezt h lehet megoldani?…gondolom változókkal…szval ebben majd hosszabb segítségre lenne szükségem, mert végignéztem a html+css “tanfolyam”-ot, de erre nem láttam bennük megoldást…vagy csak nem vettem észre…lécci segíts!…jah és a lapomat a menü kivételével légyszi értékeld!…köszi!!!
Én is értékelni szeretném 🙂
4,5 🙂
Ha ennyire jól nyomod 🙂
Márpedig eléggé, akkor egy még jobb “logó”-t, “fejléc-“et is összekovácsolhatsz 🙂 😉
Értsétek már meg, hogy a HTML + CSS az oldal kinézetét írja le. Ha dinamikus funkciót akarsz egy oldalba építeni, ahhoz programozási ismeretekre van szükség valamely erre alkalmas nyelvben plusz az adatbázisokhoz is érteni kell. Vegyük például a PHP + MySQL párost, mert ez a legelterjedtebb nyílt rendszer. Ahhoz, hogy egyáltalán el tudj kezdeni vele dolgozni, telepítened kell webszervert a gépedre amit utána be kell konfigurálni. Telepítened kell adatbázis szervert, valamint PHP-t is. Továbbá középszintű angoltudás sem árt, mert a dokumentációk többsége angol nyelvű.
Ha egyáltalán nincs programozási ismereted, akkor nem érdemes így belevágni, mert hiába másolgatod össze innen-onnan a kódot, ha nem tudod mit jelent. Először meg kell tanulni a programozás elméletét (változók, függvények, tömbök, ciklusok, stb.), utána lehet rátérni konkrét nyelv megtanulására.
Nekem megvilágosodott.. 😛 🙂
Én csak értékeltem mester 🙂
Egyébként én is kezdő szinten vagyok… a html + css ben…
De addig is a desingel eléggé jól lehet gyakorolni a photoshopban pár dolgot 🙂
Fogok csinálni egyébként 1-2 hasznos PHP-s videót is. Pl. arra fogok mutatni egy megoldást amit itt lejjebb kérdezett valaki, hogyan lehet JS-ben megoldani.
Huuu már nagyon sokat tanultam tőled… 🙂
Köszy, már várom 🙂
Kosz szepen 🙂 erre sztem nagy erdeklodes is lesz 🙂 es lehet tudni h kb mikor?
ÜDV Cyrex! Nagyón jók ezek a tutorialok, én így képzelek el egy jó tutorialt, grat hozzájuk.Hasonlóképpen szeretném kialakítani a weboldalamat és a kérdésem viszont a következő lenne, hogyan írjam meg azt, hogy ha rákkatintok az egyes menü pontokra akkor csak a pl. content DIV tartalma változzon? írjam meg külön-külön a HTML oldalakat vagy kilehet valahogyan sakkozni? persze csak HTML+CSS-t használok énis, esetleg ha valami scriptel ha lehetne vagy FLASH.
Ez érdekes…
Erre én is kíváncsi vagyok 🙂
Köszy Pepe a kérdést 😉
A HTML + CSS nem alkalmas dinamikus funkciók megvalósítására, erre találták ki a JavaScript-et. Ezt úgy lehet pl. megoldani, hogy a különböző megjelenítendő tartalmakat különböző div-ekbe teszed, amik alapból el vannak rejtve pl.: style=”display:none;”. Aztán amikor rákattintasz a menüpontra, akkor az oClick eseményhez írsz egy függvényt ami leszedi róla a display: none beállítást, illetve átrakja arra a DIV-re ami idáig volt látható, mivel azt meg el kell tüntetni.
A JavaScript-hez egyébként vannak tök jó keretrendszerek amivel lényegesebben kevesebbet kell kódolni, ilyen pl. a jQuery ami elég jól dokumentált, illetve a Prototype, aminek a doksija sajnos jóval szűkösebb, de ettől függetlenül egy nagyon jó kis rendszer.
De ezek már nem olyan dolgok amiket gépiesen meg lehet tanulni úgy, hogy lemásolod a kódot egy videóból, hanem szükség van hozzá programozási ismeretekre is.
Fuha koszi szepen a valaszt, de azt hiszem maradok annal a megoldasnal,hogy kulon kulon megirom az oldalakat ha rakattintok az egyes menupontokra es akkor csak a div tartalma fog valtozni a korites valtozatlan marad tehat atmasolom, vagy ez a megoldas nem valami megfelelo?
Vagy esetleg ha nem tul nagy keres lehene egy ilyen video konkretan erre az oszi hangulatu weboldalra. Egyebkent mijen progival veszed fel a videokat ?
Nagyon köszy, sokat segítettél 🙂
De lenne egy kérdésem…
[mint mindig] 😛
Azt szeretném, kérdezni, hogy van-e valami olyan beálítás css-ben, hogy a ne legyen az, hogy a képre ha bal egérrel simán rákatt, nyomvatartod, és ilyenkor a kép simán kihúzható a böngészőből…
És ugye most nem a jobb egér kattra gondoltam, na meg az minek ha css-ben dolgozunk 🙂
Válaszodat előre is köszönöm 😉
Tisztelet: Brien 😉
És ez mire lenne jó? Mert én pl. rendszeresen használom ezt a funkcióját a Firefox-nak, direktbe a böngészőből be lehet húzni a Photoshopba a képet anélkül, hogy le kellene menteni vagy screenshotot csinálni róla.
Ha annyira zavar, akkor tedd be háttérképképként a képet és akkor szerintem nem lehet “elhúzni”. Vagy lebegtess fölé egy láthatatlan DIV-et, bár nem tudom, hogy az megoldja e. Vagy csináld flash-ben az egész oldalt, akkor biztos, hogy senki sem fogja elmozgatni a böngészőben
Köszy a választ, igen ha belegondolok semmi értelme 🙂
Értem, annyit nem ér meg, am én is úgy csinálom sokszor a photoshopban 🙂
Igazad van, nem tudom, konkrétan nem zavar 🙂
Egyébként én is felépítettem 1 hasonló oldalt mint te, csak gyakorlás képen köszy még 1× 😉
by: Brien
Üdv.
Nagyon szépen köszönöm a videót.
Nagyon hasznos volt!
Helló!
Én elakadtam ott, hogy a hátteret lementem. Megcsinálom úgy, ahogy a videóba mondod(kijelölöm -> ctrl+c -> ctrl+n- > ctrl+v. De mégse a háttérképet rakja be az új dokumentumba hanem egy sima fehér réteget. Ennek mi lehet az oka?
Valószínűleg nem az a réteg van kiválasztva amit másolni akarsz. Használd a Ctrl+Shift+C kombót a másoláshoz, az mindent vágólapra tesz függetlenül attól, hogy melyik rétegen van a cucc.
Köszi tényleg így működött 🙂
Jaj 😀
Van még mit fejlődni:D
Már a kódolásnál járok, de a képek valamiért ismétlődnek és elvannak csúszva kicsit. Ennek mi lehet az oka?
Bocsi h ilyenekkel zaklatlak:S
Helló!
Én is így jártam, de nálam a ctrl+c, ctrl+shift+c kombinációk nem is aktívak, akármit csinálok. Apropó: az elkészült képet milyen formátumba kell menten? A videóban már csak két réteg és egy plusz content-réteg van. Össze lettek fésülve a többiek?
Meg nem mondom már neked, nem emlékszem, végig kellene néznem az egészet, az meg horror, mert magamat kellene hallgatni :)))
Szia
Nagyon hasznosak a videóid végre eltudom készíteni ez alapján a saját normális honlapomat Photoshopot sikerült megtanulnom elég magas szinten az évek során de neked köszönhetően most megtanulhatom a html+css használatát. Köszönöm a jó minőségű és érthető videóidat.
Nagyon hasznosak a videók szerintem, sokat lehet tanulni belőlük.
Várom az új videókat majd 🙂
Szia
az előző videó alapján nekem így sikerült:
http://kepup.vacau.com/images/589template.jpg
Nagyom jók a videóid,igen hasznosak.
Köszönöm szépen ezt a videót is 🙂