Hjelp på veien til personlig hjemme-/businessside.

[Yawa]

Heisann. Thomas heter jeg.

Med dette innlegget håper jeg på å få litt hjelp underveis med utviklingen av hjemmesiden min. Håper noen dyktige web-programmerere/utviklere kan bistå sånn smått etterhvert.

--> Hvis dere ikke gidder å lese alt herunder, så hopp til bunnen av innlegget får å se spørsmålene mine...

 

Jeg jobber med en personlig business side.

Er så si nesten helt ny på dette området, web-utvikling/koding etc. men lærer fortløpende.

 

Jeg jobber på en Apple MB Pro med OS X 10.6.2.

Jeg har invistert i Adobe programmvare, noe som var en enorm invistering for meg. Så hadde vert artig om jeg hadde fått dette til.

Er ikke helt orientert på hva hvert av programmene er best egnet til og hvilke jeg bør bruke til hvilke formål.

Så, hvis det er noen racere på web-utvikling med Adobe her, så gi meg gjerne en liten innføring i hvordan disse programmen jobber sammen. På best måte.

 

Slik ligger jeg ann nå:

-

Dreamweaver

er hovedprogrammet jeg benytter meg av. Jeg har lært meg endel grunnleggende

HTML

for å bygge opp strukturen samt legge inn tekstinnhold.

Har benyttet meg av <table> for å bygge opp og kontrollere strukturen/innholdet så langt

.

 

- Har fått litt kjennskap til

CSS

så jeg på lettere måte kan modifisere spesielle elementer i sidene.

Benytter CSS for å kontrollere tekst stiler og bakgrunder foreløpig

 

-

JavaScript

har jeg lite kjennskap til foreløpig.

Har satt inn "onmouseover /-out". Men dette har DW ordnet for meg... Så kan fortsatt ingenting...

Har klart å laget en liten "document.write();" sak da, til bunnteksten til sidene

 

- Benytter meg av

Photoshop

og

Illustrator

til å utvikle designet samt lage de grafiske elementene til siden;

bakgrunder, knapper, menyer, logo, bannere etc.

 

- Lærer meg

Flash

samt Flash

ActionScript 3.0

så jeg kan sette elementer og tekst i bevegelse.

Animere litt personlig reklame samt en business presentasjon etc.

Dette lurer jeg på, til å begynne med:

 

Er det old-school å bruke <table>?

Hørt rykter om det, og hvis; Hva er vanlig?

 

Jeg har et menysystem som er likt på alle sider.

> Kan jeg på noen enkel måte lage et script eller lignende som jeg kan referere til fra hver enkelt side?

Så jeg slipper å gjøre samme endringene på hver enkelt side. Lignende CSS

 

> FLASH AS3.0 - Hvordan får jeg til en utsatt oppstart?

timer, listener, function og masse annet styr

 

Sliter med å forstå både JavaScript og ActionScript. 2 viktige elementer har jeg forstått at det er... Typisk...

 

 

Håper noen har lyst til å være behjelpelige...

 

Takker på forhånd...

 

<!-- Har lagt ved ett bilde av siden (ikke online enda). Blå tekst m/skygge = onPage | Grå, forstørret tekst = mouseover -->

Endret 26. desember 2009 av Yawa

[Scooby snacks]

Er det old-school å bruke <table>?

Hørt rykter om det, og hvis; Hva er vanlig?

Lag alt av utseende i CSS. Ikke bruk <table> til annet enn tabeller.

 

Jeg har et menysystem som er likt på alle sider.

> Kan jeg på noen enkel måte lage et script eller lignende som jeg kan referere til fra hver enkelt side?

Så jeg slipper å gjøre samme endringene på hver enkelt side. Lignende CSS

Inkluder menyen vha. PHP-include. Du finner sikkert mange eksempel ved å Google det, men jeg kan skrive litt mer utfyllende i morgen. Det går i praksis ut på å lage menyen i en egen .php-fil, som du inkluderer i sidene. Dette forutsetter at du har støtte for .php på serveren, og at du lagrer filene i .php-format.

 

Fikk plutselig jævlig dårlig tid.

 

 

HTMLdog.com har en meget bra nybegynnerguide til korrekt oppsett av layout med CSS og (X)HTML,

Endret 26. desember 2009 av Scooby snacks

[ronron25]

Denne siden vil kanskje være nyttig:

http://hjemmeside.org/koding

 

Siden din ser forresten bra ut.

Endret 26. desember 2009 av ronron25

[MikkelRev]

Dersom du bruker <table> for å struktere siden din, kan du regne med å få masse kjeft fremover! Selv synes jeg ikke det er noen big deal, har brukt det selv i flere år. Men den foretrukkne måten er å putte data i <div> og <span>'er istedetfor i <td>'er.

 

JavaScript, ActionScript og Flash: Drit i det! Du trenger ikke det for å lære å lage nettside. Tvert imot vil det bare bremse utviklingen din. Kom heller tilbake til det når du vet at du trenger det. Flash er ofte bare småplagsomt allikevel. Så glemt det.

 

Menysystem: Det er mange måter å gjøre dette på. Selv bruker jeg php include(). Uten php kan du bruke SSI. Lag en egen fil for menyen. Kall den meny.html

Putt denne linjen i filen(e) hvor du vil ha menyen:

<!--#include file="meny.html"-->

 

Samme prinsippet kan du også bruke for header, footer og andre ting.

[Yawa]

Heisann folkens, og takk for tilbakemeldigner...

Hvorfor er det så galt å bruke <table> funksjonen til å stukturere innholdet?

Jeg vet ikke hvordan man strukturerer en side i CSS, <span>'er og <div>'er enda...

 

Grunnen til at jeg har benyttet meg av <table>, er pga. at jeg ikke vet om noen annen, like enkel, måte å få full kontroll over bakgrund og innhold. Jeg har lagt ved noen bilder som illustrerer hvordan jeg har tilpasset bakgrund, meny og innhold.

 

Jeg har en hoved <table> med en helt egen bakgrund som dekker hele sullamitten.

 

Jeg delt opp siden i 6 rader som fordeler innholdet der jeg ønkser å ha det.

rad #1:

Gir bare plass i toppen, til utside effekten

rad #2:

Inneholder

top_banner

rad #3:

Meny knappene - Disse ligger i en egen

<table>

, så slipper jeg styret med

colspan / rawspan

.

Jeg har "

rollover

" funksjonen her; hovedbildet er en tom .png, så bakgrunden synes, samt "onmouseover" bildene. Disse bildene ligger 100% kontrollert i hver sin kollone

.

 

rad #4:

Sørger bare for at innholdet på siden ikke skal komme i veien for skygge-effekten fra menyen (

som er en del av bakgrunden

)

rad #5:

Her legger jeg inn selve sideinnholdet.

rad #6:

Gir bare plass i bunnen, til utside effekten

Ved å bruke <table> funksjonen føler jeg at jeg har den kontrollen jeg trenger.

 

Se over bildene, så skjønner dere kansje min tankegang og arbeidsmetode så langt...

Endret 27. desember 2009 av Yawa

[MikkelRev]

Det er ikke SÅ galt å bruke tabeller til layout IMO. Men det er ikke vanskeligere å bruke div'er istedet uten å miste kontroll.

 

Prøv noe sånt:

 

<div>

<div style="float:left;width:20%">bla bla</div>

<div style="float:left;width:50%">bla bla</div>

</div>

 

Og les på linken som ronron ga deg.

Endret 27. desember 2009 av MikkelRev

[Yawa]

har sittet å studert endel her, men klarer ikke å finne ut hvordan jeg kan få til samme strukturen, nøyaktigheten og kontrollen med CSS som jeg har med <table>.

 

leser og leser, men får det ikke til her...

 

hoved bakgrunnsfarger = #DDD

bakgrunnbilde (layout/design) = en .png fil

rollover-knaper = .png filer

Hvordan får jeg satt disse elementene sammen så de sitter på samme måte som med <table> metoden jeg har brukt?

[ronron25]

På hjemmeside.org finnes det også et forum. Du får nok svar her også, men du kan jo prøve det. Dessuten er han som driver hjemmeside.org veldig dyktig, så han kan nok også hjelpe deg. Forøvrig skal alt være forklart på hjemmeside.org.

[Yawa]

Om jeg velger å bruke <table> metoden, vil det skape noe særlig problemer for meg da?

 

Hvilke problemer eventuelt?

[masb]

skaper ingen spesielle problemer, men hvis andre skal redigere koden din så kan veldig mange tabeller være forvirrende.

[Yawa]

okay, så det har egentlig ingenting å si hvordan man velger å strukturere siden...

 

 

Med <table> funksjonen, så må man foreta endringene på hver enkelt side.

 

Med CSS får man fleksibiliteten til å kunne foreta en endring, som tar alle sidene.

 

sant?

Endret 27. desember 2009 av Yawa

[MikkelRev]

Det har ikke med table vs css å gjøre. Det går an å bruke css på tables også.

<table class="minKlasse"><tr><td style="background-color:red">...

 

Det er som masb nevner lettere å rote det til med tabellene om du har mange nestede tabeller på kryss og tvers, enn bare diver. Tabeller krever flere tagger enn divs. <table> er dessuten beregnet for å lage... tabeller faktisk(!) - feks en timeplan, ikke for å lage layout.

 

Så jeg ville like godt vennet meg til å bruke diver og spaner først som sist.

[Yawa]

Da var siden ombygget til å ikke bruke <tables> metoden, som jeg startet med, til å dele opp siden...

Må si det tok litt tid før jeg klarte å fikle det til, men det satt til slutt... sånn delevis da, sikkert en hel masse å lære seg fortsatt...

Men, mye herligere å slippe alle <table><tr><td> og </>'ene etc. Smart!

 

har også benyttet meg av "template"-funksjonen i Dreamweaver, så når jeg foretar endringer på utsiden av "<!-- Template...--> tag'ene", så reflekterer det på alle sidene som jeg har benyttet denne templaten på. Samt at jeg ikke kan f**** til noe når jeg legger inn innhold på de enkelte sidene... Praktisk og smart

 

<!-- Håper det forstsatt er noen som er villige til å hjelpe meg videre her -->

 

Jeg har ikke fått til å hente menyoppsettet mitt fra en ekstern kilde enda, da

Jeg benytter meg av "rollover image" funksjon her. Og da følger det med JavaScript også. Selve JavaScriptet har jeg klart å flytte til ett eget .js dokument. Så det har gått i orden.

Men alle knappene, eller bildene med tilhørende koder, opptar endel unødvendig plass i dokumentet. Så jeg kunne tenkt meg å bare flytta alle knappene inn i ett eget dokument, eller lignende, som jeg kan referere til fra templaten. Sånn her: <div id="menu">menu.file</div>.. Istedenfor sånn som bildet illustrerer.

 

Det jeg også kunne ha tenkt meg, hadde vert å kunne gjort noe lignende med "onload"-biten som kommer frem i <body>-tag'en. (også uthevet i vedlagt bilde...

 

EDIT: Har forresten forsøkt noe include funksjoner, men fikk dem ikke til å funke. har nok gjort dem noe feil da.

Endret 28. desember 2009 av Yawa

[MikkelRev]

Til menyen, prøv SSI include, som jeg foreslo. Du bruker ikke JavaScript til det. Hvorfor må du ha JavaScript på alt?

[Yawa]

kan ikke JavaScript, så, når jeg satte inn en sånn "rollover" funksjon i dreamweaver, så kom det opp automatisk.

 

Den inneholder scriptet eller kodingen for å bytte ut det orginale bildet med det bildet som skal vises når jeg holder musen over.

 

men akkurat det med å forstørre, endre font-type og legge på skygge kan jeg kansje få til med CSS?

Da kan jeg jo ta vekk bildene, og kun beholde bakgrunden.

[MikkelRev]

Bruk heller CSS til mus-over-funksjonen. Sjekk "hover". Bruk JavaScript kun når det ikke lar seg gjøre på andre måter.

[Yawa]

hadde vert greit å slippe ja, pga. det er jo bare styr å prøve å lære seg... Takker for svar, kjempe konge!

 

 

Videre --> Når jeg vil plassere flere elementer etter hverandre, ikke bare under hverandre.

 

Si jeg har lyst til å lage et område som er delt inn i fire ruter: ba, bb, bc, bd. hvor det er 2 ruter "oppe" og 2 ruter "under".

 

ER dette riktig?

<body>

 <div id="ba">
<div id="bb"></div>
 </div>

 <div id="bc">
<div id="bd"></div>
 </div>

</body>

for å oppnå ett resultat som:

 

ba | bb

bc | bd

 

Altså, en <div> inni en <div> for å få elementene på samme linje.

Jeg setter en bredde på #ba og #bc til: 100px

Jeg setter venstre margin på #bb og #bd til: 100px.

 

forstålig?

 

EDIT: NEI, det funket dårlig...

Funker bra på tomme elementer, men så fort dem settes i kombinasjon med tekst, så begynner tullet... får heller ikke implentert det på siden heller. det flytter seg rett og slett til høyre av en eller anna mystisk grunn...

 

I ett rent HTML dokument, så funker det SMELL. Men så fort jeg setter de inn i about_us.html'en, så kødder det seg til...

 

 

EDIT: Der satt den!!! Alt er plassert i sine rette omgivelser... satse på at dette går bra nå, i lengden også...

 

takk for masse bra hjelp folks...

Endret 29. desember 2009 av Yawa

[ronron25]

Kanskje ikke så dumt å bruke en "validator", for å gjøre det ekstra vanskelig for deg . Om du ikke bruker den fra før:

http://validator.w3.org/

[MikkelRev]

Lær deg CSS-attributtene float, text-align, width, height, padding og margin.

[Yawa]

Akkurat dem funksjonen jeg har brukt MikkelRev. Takk for kjempe hjelp

Nå legger jeg layout spørsmålene til side, det er validert og funker som jeg vil.

 

Nå skal jeg begynne å lage en videresende-til-side ting, en log_in sak samt noe automatisk epost-responder greier...

 

Her er Scenario #1: - Videresending

Besøkende kommer inn på

index.html

siden, ser en kjapp "Velkommen til EK Enterprise" animasjon.

Når denne animasjinen er ferdig, så blir de automatisk videresendt til

otherpage.html

for å se videre.

videre følger Scenario #2: Log-In

Informasjonen på "otherpage.html" er også animasjon.

I bunnen er det innloggingsmulighet (navn, e-post + passord)

Når filmen/animasjonen er ferdig, så blinker denne innloggingsrubrikken (ramme) eller en annen form for signalisering.

 

For de besøkende som er intressert i å vite mer, så må de legge inn navnet sitt, kontakt epost samt ett passord og klikke "log inn" eller noe.

Passordet er ikke direkte hemmelig, men innholdet på siden er beregnet for intresserte. Så for å luke ut ikke-intresserte, så ønsker jeg å benytte meg av passord

.

Til slutt følger Scenario #3 på: auto-epost-responder

Når de er logget inn følger videre informasjon, sant.

Det som også skal skje, er at jeg vil jo gjerne vite hvem som har vist ytterligere interesse, så jeg må få en epost som inneholder infoen de har lagt inn. Navn og e-post + dato og klokke. Men her er en twist:

Jeg må kunne separere fornavn og etternavn. Så jeg kan velge om jeg vil referer til dem via etternavn, fornavn eller begge deler. (dette må kunne konfigureres i epost-responder-tingen.

 

De besøkende må få en epost fra meg med engang som sier "Takk <navn> for at du har vist interesse...etc."

Dette er kansje PHP dette?

 

Spørsmålet mitt er:

- Hvor bør jeg begynne for å klare å sette opp noe slikt som dette?

- Hvilke nøkkel-elementer/funksjoner må jeg studere?

Endret 29. desember 2009 av Yawa