Avatar billede alex15 Nybegynder
29. oktober 2007 - 12:54 Der er 17 kommentarer og
1 løsning

Opbygning af selve designet på hjemmesiden

Hej

Nu sidder jeg og er gået i gang med min hjemmeside nummer 2. Og vil gerne lave den mere dynamisk / selv tænkene eller hva man nu kalder det? lavede min sidste hjemmeside i Html og css. Måden hvorpå selve hjemmesidens "skabelon" så ud. lavede jeg ud fra Layers, hvor jeg så tastede ind hvor store de forsekllige layers skulle være, og i hvad level de skulle ligge i.

Men har lidt fået den opfattelse at det er dybt forkert og gøre det på den måde.

Hvordan har sådan en hjemmeside som eksperten opbygget deres design?

- Alex
Avatar billede w13 Novice
29. oktober 2007 - 12:58 #1
Eksperten er et virkelig dårligt forbillede. Jeg har hørt lidt om muligheden for et evt. redesign på et tidspunkt i nærmeste fremtid, men indtil videre er det ikke noget at råbe hurra for, hvad angår valid kode. Bare det at koden slutter sådan her:

</body>
</html>
<pre>

Det er ikke, fordi det er meget gyldigt at åbne et pre-tag efter </html>.

Men når du siger layers, mener du så div-elementer? Det er nemlig den populære og mest accepterede måde at opbygge designs i i dag, og naturligvis med CSS, som du selv siger. Levels har jeg dog aldrig selv brugt (hvis du mener z-index), og de fleste anbefaler vist, at man går uden om dem.
Avatar billede alex15 Nybegynder
29. oktober 2007 - 13:11 #2
Okay, var ikke lige beskrivende nok i min forklaring kan jeg godt høre.. Gjorde det på denne måde sidst:

i min html fil linkede jeg i head delen til f.eks. css.css med følgende formel "<link rel="stylesheet" type="text/css" href="css.css">" og nede i selve body delen skrev jeg så følgende:

<div id="site">
  <div id="Layer1"><A HREF="index.html"><img border="0" src="billeder/banner/top/banner700.jpg" alt="" width="700" height="75" /></A></div>
   
  <div id="Layer2"> <p align="left">
 
&nbsp <a href="forside.html" class="uden_streg">Forside</a>
<a href="biler.html" class="uden_streg">Biler</a>
<a href="systemet.html" class="uden_streg">Systemet</a>
<a href="arrangementer.html" class="uden_streg">Arrangementer</a>
<a href="medlemskab.html" class="uden_streg">Medlemskab</a>

</div>

bare som et eksempel.

Dette synes jeg selv fungerede meget godt, men eftersom at jeg lavede 1000 css filen i stedet for én stor, gjorde det det total besværligt, hvis man lige skulle ændre lidt på størrelsen af et filerne. For så blev jeg nød til at gå ind i alle de forskellige filer og rette i dem der. Så det passede sammen.

Et andet problem jeg stødte på. det var at jeg gerne på et tidspukt ville have lavet sådan en login side, hvor dem med adgang dertil kunne gå ind og skrive nyheder osv. Men hvis nyheden blev for lang fungte hjemmesidens nede del lige som ikke med nyheden som her inde? hvis du forstår?

ved godt jeg klare MEGET dårligt..
Avatar billede w13 Novice
29. oktober 2007 - 13:19 #3
Ja, jeg forstår. Det er som regel noget i CSS'en, der gør dét, men skal ikke kunne sige, hvad det er.

Og det med de 1000 css-filer: hvis du bare laver én fil, som du refererer til fra hver side, slipper du jo for det problem og alt bliver meget mere overskueligt.

Når jeg laver hjemmesider, tænker jeg hele tiden på, hvordan jeg optimerer mine koder og gør dem så korte så muligt. Med tiden har det resulteret i nogle ultrakorte koder til ellers store sider. Det går hurtigt sport i det, og med korte koder er det enormt let at finde fejl og redigere sider.

Ud over det ser det ud til, at du gør det ligesom jeg.
Avatar billede alex15 Nybegynder
29. oktober 2007 - 13:46 #4
Ja okay.. Hvilke hjemmesider har du lavet? mere så man kunne sammenligne med om de skal bruges til det samme?

Målet med min hjemmeside skulle gerne være at den skal kunne klare sig selv 100%, med min anden hjemmeside ccclub.dk skal man ind og rette i tingene HELE tiden. Og hvis man skal lave en ny side, oprette en ny bil, kræver det at jeg laver en nye html fil hver gang. Derfor jeg også er gået i gang med php. Som vist nok skulle kunne klare sådan noget. hvis man ellers bare kunne finde ud af det.

Men kan man så godt lave koder i css som automatisk går ind selv og rette de forskellige layers til, så de passer til de ønskede mål?
Avatar billede w13 Novice
29. oktober 2007 - 13:50 #5
Jeg er i gang med at udvikle et par stykker, som dog ikke ligger på nettet endnu.
Dog er det sådan, som jeg beskrev før, at langt de fleste opbygger deres designs i dag.

Det du så skal lave i PHP må være en form for admin-system eller CMS, hvor i du kan styre sidens indhold let.

Ja, du kan principielt godt styre css'en med PHP, men så skal man holde hovedet koldt, når man koder den funktion. Jeg har aldrig lavet dét. Når jeg ønsker at rette noget i designet, går jeg ind og retter det i koden, og det er så det. =)
Avatar billede alex15 Nybegynder
29. oktober 2007 - 14:05 #6
Ja okay. Du skriver noget med (z-index) og det brugte jeg faktisk lidt, kan jeg godt se, når jeg går ind og kigger i min css filer. men hvis de anbefaler at man går væk fra det? hvad skal man så bruge i stedet til at finde frem til hvad der skal være det øverste layer osv?

en lillebid i en af mine css filer kunne godt se ud på følgende måde:

---

#Layer3 {
    position:absolute;
    width:520px;
    height:275px;
    z-index:2;
    left: 50px;
    top: 160px;
    visibility: inherit;
    background-image: url(billeder/banner/v/billede3.jpg);
}

---

Men kan man bare sådan skrive php koder inde i en css fil?

men du kan godt se mit problem? Når der på denne side (eksperten.dk) bliver skrevet en forumtråd er siden ca. 800 px høj? eller sådan noget. Men efterhånden som folk skriver mere og mere til den enkelte tråd tilpasser siden sig automatisk efter det? så den nu bliver i en højde af MEGET mere end de 800 px.
Avatar billede w13 Novice
29. oktober 2007 - 14:13 #7
Ja, det er desværre stadig svært at arbejde med CSS, men det bli'r bedre i fremtiden. Lige nu handler det om bedst muligt at lave designs, der ikke er for komplicerede, men ser ud som om, de er det. =)

Jeg gik ud fra, du talte om z-index, når du sagde levels?

Du bli'r nødt til at bruge z-index, hvis du skal kunne ændre layoutet med PHP. Det er skam stadig tilladt at bruge, en del fraråder det bare.
Hvis man laver et statisk design, dvs. et der ikke skal ændres dynamisk, så skal man bare vide, at nu højere oppe i koden et element ligger, nu lavere level ligger det på.

Og du kan sagtens generere en CSS-fil med PHP. Du skal bare kalde den .php i stedet for .css og så inde i filen skal du angive en content-type som skal være text/css.
Nu er php ikke lige mit felt, men mener, det skal være:
<?php header('Content-Type: text/css'); ?>

Det skal så ligge øverst i filen.

Det gør nemlig ikke noget, hvilken endelse en fil har - det er dens content-type der afgør, hvordan den læses.
Avatar billede w13 Novice
29. oktober 2007 - 14:13 #8
Alternativt skal du have din css-fil liggende direkte inde i HTML-koden.
Avatar billede alex15 Nybegynder
29. oktober 2007 - 14:30 #9
Det med at have css-filen liggende inde i koden gør bare koden så F...... lang. og det kunne være være super lækkert hvis man kun behøvede og rette i en fil i stedet for en masse.

Ja det var z-index som jeg snakkede om. Du skriver at jo højere oppe i koden et element ligger jo lavere level ligger det på? det vil altså sige hvis man lagte i bilelde i z-index 1 og et billede oven på det andet billede men bare i z-index 2. så ville det var det billede som lå i z.index 2, som ville blive vist right? det er i hvert fald sådan som jeg har fået forstået det.

læste også et sted at der var nogle som brugte table? Men det virkede total ubruligt for mig og se? Da man ikke kunne bestemme hvor lange de forskellige table var osv? eller er det bare mig som er helt væk på den?

Okay, så man linker bare til en php fil? i stedet for css? og det kan ens server godt selv finde ud af. En "normalt" css fil er jo bare ikke bygger op på samme måde som en php fil. med hensyn til at der skal være alt det der html, body osv.
Avatar billede w13 Novice
29. oktober 2007 - 14:39 #10
1) Ja, det er noget rod at have CSS liggende i HTML-filen.

2) Du har ret i det, du siger. Men det var nu ikke helt det, jeg mente. Hvis man ikke skal lave et dynamisk design, som skal kunne redigeres af HTML, så kan man i koden skrive:

<img id="1" src="blabla">
<img id="2" src="blablabla">

Hvis jeg så lagde disse 2 billeder oven på hinanden (uden at definere z-index), så ville det være det nederste (altså id=2), der ville blive vist. Så min pointe er: uden z-index er det det nederste element i koden, som ligger oven på andre elementer. Så det svarer til, at img med id=1 har z-index 1 og id=2 har z-index 2.

3) Ja, i 90'erne brugte alle tabeller, men tabeller er beregnet til at vise tabeldata, og ikke til at lave et design med, så det bør man holde sig fra. Koden bliver som regel 4-5 gange så stor (minimum). Indtil videre er det desværre bare sådan, at med tabeller undgår man f.eks. dit problem, det med at indholdet gik ud over layeret, men vi må bare håbe, at det snart bliver optimeret i browserne. Så hold dig endelig fra tabeller! Det er en meget dårlig vane! :)
Man kan dog godt bestemme, hvor lange de forskellige table var, som du spurgte om.. Men stadig: brug dem ikke til design! :P

4) Ja, du linker til en php-fil. Det kan du sagtens, når du definerer content-type i filen, som jeg skrev tidligere. Din server er ligeglad med filendelserne, hvis der er en content-type i filen (også kaldet MIME-type).
Du skal dog heller ikke have HTML, BODY, osv. i CSS-filen. Du skal bare bruge PHP til at lave den dynamisk. Men når PHP så genererer filen, skal den se fuldstændig ud som en normal CSS-fil.
Altså f.eks.:

body{text-align:center}

Det kunne du så eksempelvis generere med:

<?php $align="center" ?>
body{text-align:<?php $align ?>}
så vidt jeg ved. Men igen, PHP er ikke mit felt. =)
Avatar billede alex15 Nybegynder
29. oktober 2007 - 15:21 #11
arh. havde lige fået svaret igen på den, men så slettede jeg lige det hele (flot).
1) Okay, synes jeg nemlig også det var

2) Nu forstår jeg hvordan det fungere.

3) Hmm.. okay, det er jeg faktisk glad for at høre, for synes også selv at det fungere lidt underligt, men var lidt bange for at det bare var mig som var underlig..

4) Nårh men tror måske jeg har fundet ud af hvordan det fungere. Det fungere på den måde at man laver sin normale css.css fil, som man istedet bare kalder for f.eks. css.php. opbrygger den på den normale måde, som ens gamle css fil var. Ud over at man kan putte de php koder ind i den som man ønsker. Man husker bare lige at starte og lukke koden (<?php - ?>). Derudover ligner den en normal css fil, bare med nogle enkelte php koder i? Right?

Men hvad gør hjemmeside som eksperten.dk, borsen.dk, bold.dk osv? Det er alle hjemmesider hvor højden på hjemmesiden automatisk tilpasser sig. De må da være en eller anden fast metode hvor på er den smartede, nemmeste og mest korrekte? eller er det den måde med layers bare i php. men en masse koder i?
Avatar billede w13 Novice
29. oktober 2007 - 18:03 #12
1) Nemlig.
2) Godt. =)
3) Nej, folk der bruger tabeller, er de underlige. =P
4) Ja, altså du skal ikke nødvendigvis indlede og slutte din php-fil med <? og ?>, du kan bare skrive med php i koden, ligesom du kan i et HTML-dokument. Men husk endelig at definere content-type i toppen, for at det skal fungere.
5) Eksperten.dk og bold.dk bruger tabeller (føj), mens borsen.dk bruger div's. Det kan nemlig godt lade sig gøre med div's, men det afhænger af, hvordan man bygger sin side op. Det sker nogle gange som du oplever det, og jeg kan ikke lige i hovedet, hvorfor det nu er. Så mit råd må være, at du forsigtet prøver at lave skabelonen til et design med div'er og css, og hvis den ikke udvider sig efter indholdet, så spørg her og smid din kode sammen med et link til designet.
Altså lav grundstrukturen i designet og se, om problemet viser sig dér også. Det er nemlig så svært for os herinde at løse den slags fejl i en kilometerlang kode. =)
Avatar billede alex15 Nybegynder
29. oktober 2007 - 18:20 #13
Ja okay, tror jeg har fundet ud af hvordan jeg vil gøre det! I hvert fald til at starte med..! Og så henter jeg hjælp her inde efterhånden som problemerne kommer frem.

Meget rart lige og få nogle linjer man skal følge. Så 1.000 tak for hjælpen..!!

Husk lige at lav et svar ;o)
Avatar billede w13 Novice
29. oktober 2007 - 21:13 #14
Det var så lidt! Og her er svar!
Avatar billede alex15 Nybegynder
29. oktober 2007 - 22:31 #15
Ikke for mig ;o)
Avatar billede majbom Novice
30. oktober 2007 - 13:41 #16
det kan være at du kan bruge dette:
http://www.maxdesign.com.au/presentation/process/index.htm

den har jeg selv brugt, da jeg mente at det var tiden at skrotte tabellerne :)
Avatar billede alex15 Nybegynder
30. oktober 2007 - 13:52 #17
Okay, vil jeg lige kigge lidt på..!

Hvorfor ALT altid være på engelsk ;o)

Og tak :o)
Avatar billede majbom Novice
30. oktober 2007 - 13:58 #18
hehe ja sådan er det jo

og velbekomme
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester