Tutorial: őszi hangulatú weboldal 2.rész
2011. január 4.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.
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.
Ü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.
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
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