PNVA: PHP Website

#1| 0

Hej PN.

Nu har jeg siddet og læst en masse om hhv. PHP, HTML og CSS.

Jeg ved at PHP er et server-side sprog, og at HTML bare er rimelig standard sprog sprog til websites, hvor CSS bruges til at modificere HTML'en således at den ser bedre ud.


Men hvis vi nu siger at jeg gerne vil lave en nice dynamisk website - så skal man vel bruge alle tre sprog sammen, hvis ikke flere?

Jeg er ikke 100% sikker på hvad jeg spørger om her, men ville være fedt hvis der var nogen som kunne forklare lidt nærmere.

Sidespørgsmål:
Eksempelvis hvis vi siger at jeg gerne vil lave en "bar" med en masse kategorier i, som f.eks. toppen af PN hvor der står:

Forside, Races, Promotions, Pokersider, Forum, Lær Poker, Pokervideoer, Vidensbanken.

Så skal jeg vel først ind og designe den i photoshop, hvorefter jeg skal lave et nyt billede for hver gang jeg "hover" over en af knapperne.

Derefter skal det jo sættes ind på sitet, hvilket ikke er så svært. Men så skal knapperne jo også have funktionalitet således at der sker noget når man trykker på hver enkelt af dem. Dér har jeg lidt svært ved at se hvordan man først og fremmest får linket/funktionaliteten til at fylde hele knappen, f.eks. hvis det er en rund knap. Dernæst kan jeg ikke helt forstå hvordan man kan få det samme billede (som er tilfældet med en "bar") til at have flere forskellige links/funktionaliteter.


Mvh Jonas

14-07-2012 18:59 #2| 1
Metalby skrev:
Hej PN.

Nu har jeg siddet og læst en masse om hhv. PHP, HTML og CSS.

Jeg ved at PHP er et server-side sprog, og at HTML bare er rimelig standard sprog sprog til websites, hvor CSS bruges til at modificere HTML'en således at den ser bedre ud.


Men hvis vi nu siger at jeg gerne vil lave en nice dynamisk website - så skal man vel bruge alle tre sprog sammen, hvis ikke flere?


Jeg er ikke 100% sikker på hvad jeg spørger om her, men ville være fedt hvis der var nogen som kunne forklare lidt nærmere.

Sidespørgsmål:
Eksempelvis hvis vi siger at jeg gerne vil lave en "bar" med en masse kategorier i, som f.eks. toppen af PN hvor der står:

Forside, Races, Promotions, Pokersider, Forum, Lær Poker, Pokervideoer, Vidensbanken.

Så skal jeg vel først ind og designe den i photoshop, hvorefter jeg skal lave et nyt billede for hver gang jeg "hover" over en af knapperne.

Derefter skal det jo sættes ind på sitet, hvilket ikke er så svært. Men så skal knapperne jo også have funktionalitet således at der sker noget når man trykker på hver enkelt af dem. Dér har jeg lidt svært ved at se hvordan man først og fremmest får linket/funktionaliteten til at fylde hele knappen, f.eks. hvis det er en rund knap. Dernæst kan jeg ikke helt forstå hvordan man kan få det samme billede (som er tilfældet med en "bar") til at have flere forskellige links/funktionaliteter.


Mvh Jonas


1. Ja

2. Ja

3. Du programmere det således at det enkelte billede(objekt) repræsentere funktionen.
14-07-2012 21:23 #3| 0

Du højreklikker og vælger "View Page Source" (afhængig af din browser). Pokernet har følgende menu:

<div class="menuwrapper">
<ul class="menu">
<li class="forside"><a href="/">Poker</a></li>
<li class="races"><a href="/rake-races/" title="Poker races - Find de største og bedste private poker races">Poker Rake races</a></li>
<li class="promotions"><a href="/promotions/" title="Find en oversigt over de største og bedste poker promotions">Poker promotions</a></li>
<li class="deals"><a href="/online-poker/" title="Online Poker">Online Poker</a></li>
<li class="forum_active"><a href="/forum/">Poker forum</a></li>
<li class="laer-poker"><a href="/laer-poker/">Lær Poker</a></li>
<li class="pokervideoer"><a href="/poker-videoer/">Pokervideoer</a></li>
<li class="vidensbanken"><a href="/vidensbanken/">Vidensbanken</a></li>
</ul>
</div>

<li class=".."> er et HTML-element class=".." er en CSS-klasse som styler HTML-elementet og <a href=".."> er linket til en side.

14-07-2012 22:24 #4| 0

lidt Offtopic, men anskaf dig firebug(til firefox..) og gennemgå siden. så får du hurtigt dannet dig en ide om hvordan mange sider er sat sammen.

15-07-2012 18:57 #6| 1
Metalby skrev:
Jeg har fundet ud af hvordan man gør. Man går ind i photoshop, laver layoutet som man vil have det. Derefter slicer man billedet ud til hver knap, og gemmer det til website. Så skal man bare copy-paste det ind i ens kode og modificere lidt :)



Neeeeej.. Det helt galt det der :)

Den menu skal ikke laves som billeder, men kodes istedet. Hvorfor? Fordi google ikke kan læse billeder og det er international standard at gøre det sådan i 2012.

Du har også bygget din side op i tables, og det gør man langt fra stadig. Istedet skal du bruge <div>.

Som det er nu, så virker din side, men set udfra et proffesionelt synspunkt, så er den.. ked af at sige "til at græde over".

Det ikke for at skyde den ned eller noget og hvis du har flere spørgsmål til hvordan du kommer "rigtig" igang, så sig endelig til :)

Men hvis vi nu siger at jeg gerne vil lave en nice dynamisk website - så skal man vel bruge alle tre sprog sammen, hvis ikke flere?


Yeps! Et dynamisk website er typisk bygget i PHP/HTML/CSS/JAVASCRIPT/JQUERY
Redigeret af witten d. 21-10-2012 23:07
15-07-2012 19:15 #8| 0

Nej du misforstår :)

Det som din menu består af er i princippet kun følgende.

blå baggrund
Horisontal hvid tekst med noget skygge og evt. hover effekt.

HTML'en vil som udgangspunkt ligne noget ala det her:

<div id="header">
<ul>
<li><a href='index.html'>home</a></li>
<li><a href='about.html'>about</a></li>
<li><a href='pictures.html'>pictures</a></li>
<li><a href='contact.html'>contact</a></li>
</ul>
</div>

Hernæst skal du blot style menuen, så den kommer til at sidde rigtigt.

Det er en lidt længere forklaring, men du er ude i noget med at den sidde i en div med dertilhørene blå baggrundsfarve, hvid tekst, og text-shadow.

Det ikke helt så nemt lige at forklare i en comment, hvordan man fra bunden laver en menu :)

Det virker som om du er helt grøn på området om hvordan man i dag bygger et website op, så du får lige et link her, hvor du bliver taget igennem det at bygge en side om fra start til slut, med nutidens "standarder":

tutsplus.com/course/30-days-to-learn-html-and-css/

Redigeret af MrPaulsen d. 15-07-2012 19:19
15-07-2012 19:18 #9| 0
OP

Vil rigtig gerne have et link til tutorial. Har siddet og set tutorials hele dagen, men har ikke kommet frem til andre fremgangsmåder end den jeg har brugt på nuværende tidspunkt.

15-07-2012 19:20 #10| 0

Har rettet i min komment med link :)

Prøv og kig de videoer igennem :)

15-07-2012 19:23 #11| 0
OP
MrPaulsen skrev:
Har rettet i min komment med link :)

Prøv og kig de videoer igennem :)


De er nærmest identiske med disse:

thenewboston.org/list.php?cat=40

som jeg har set alle af :/
15-07-2012 19:24 #12| 0
OP

Det her er hvad jeg PT. har gang i, er det way out of line?

15-07-2012 19:28 #13| 0

Well, jeg kan kun sige at hvis du følger de instruktioner i det link jeg sendte dig så laver du det korrekt.

Men den side du har lagt op nu er ikke korrekt. Du har brugt <tables> og billeder til at strukturere din menu, og det er så forkert som det kan blive :)

Mht. til det nye design, så virker det også meget "old-school".

glow/gloss er "so last year". Herudover så bliver din menu en udfordring at kode og lave korrekt. Men det kan sagtens lade sig gøre uden brug af billeder.

15-07-2012 19:33 #14| 0

Prøv og se den her f.eks.:

codepen.io/Veiovis/pen/navblue/1

Her kan du se både HTML/CSS/javascript delen der får denne menu til at virke.

Her er der ikke brugt billeder og du kan sige at man har kodet sig til udseendet.

Redigeret af MrPaulsen d. 15-07-2012 19:37
15-07-2012 19:37 #15| 0
OP
MrPaulsen skrev:
Prøv og se den her f.eks.:

codepen.io/catalinred/pen/4/1

Her kan du se både HTML/CSS/javascript delen der får denne menu til at virke.


Nice, det vil jeg kigge nærmere på!
15-07-2012 19:37 #16| 0

Jeg har ændret linket Metalby.

Jeg fandt en menu som mindede mere om din og som var lidt mere simpel :)

codepen.io/Veiovis/pen/navblue/1

26-07-2012 23:05 #18| 0

Den sejler rundt i Safari 5.1.7 OSX 10.7.4.

Dog kan jeg se du har fået bedre styr på det nu med lidt HTML5 og brug af <divs> fremfor tables :)

26-07-2012 23:07 #19| 0

Hvis du har adobeID kan du teste din side i forskellige browsere ved at bruge:

browserlab.adobe.com/

Alternativt kan du betale dig til den noget dyrere men også bedre løsning:

www.browserstack.com/

26-07-2012 23:15 #20| 0

Udover det..

Siden ser ok ud i den nyeste firefox på OSX 10.7.4

<aside> er et nyt HTML5 element, men din <doctype> er ikke sat til HMTL5. html5doctor.com/understanding-aside/

<center> er big no no i HTML. Centrer din text i din CSS :)

Du har kaldt tråden "PHP Website" men der er ikke meget php over den, men det går jeg udfra du er klar over ;)

Det var sådan lige det første der faldt mig ind :)

Redigeret af MrPaulsen d. 26-07-2012 23:16
27-07-2012 19:16 #21| 0
OP
MrPaulsen skrev:
Udover det..

Siden ser ok ud i den nyeste firefox på OSX 10.7.4

<aside> er et nyt HTML5 element, men din <doctype> er ikke sat til HMTL5. html5doctor.com/understanding-aside/

<center> er big no no i HTML. Centrer din text i din CSS :)

Du har kaldt tråden "PHP Website" men der er ikke meget php over den, men det går jeg udfra du er klar over ;)

Det var sådan lige det første der faldt mig ind :)


Tak for kritikken. har ændret min <!doctype> tidligere idag til xhtml 1.0 transitional efter at have kørt sitet igennem w3 validator som sagde at der var en masse problemer grundet min doctype.

Ved godt at jeg kaldte tråden php, og der kommer også php kodning på før eller siden. Men man skal jo lige have noget content først før at php kodningen kan betale sig :)
27-07-2012 19:22 #22| 0

Ja. w3 validatoren anerkender ikke <!doctype> men det skal du bare ignorere :)

27-07-2012 19:24 #23| 0
OP

Det er virkelig bare et living hell at få tilpasset sitet til de fleste browsere! Det pisser mig af at min twitterfugl er malplaceret i alle andre browsere end rockmelt. Problemet er bare hvis jeg rykker den så den passer til de andre browsere, så passer den ikke i rockmelt.

Fuck absolute positioning!


Er forresten rigtig glad for at du linkede til tutsplus. Har købt medlemskab derinde, og de har altså bare klasse tutorials til alting. Det var også tydeligt at se at dén 30 dages html/css tutorial var en del mere professionel end den på thenewboston.

Har desuden downloadet alle deres bøger omkring kodning/design/SEO "gratis". Så når jeg en dag ikke gider at betale mere, har jeg en masse læsestof!

Redigeret af Metalby d. 27-07-2012 19:30
27-07-2012 20:36 #24| 0

Det var så lidt :)

Har også deres bøger, som er ganske udemærket :)

← Gå til forumoversigtenGå til toppen ↑
Skriv et svar