Nettisivujen tekeminen

one word: www.google.com
löydät miljaardeja ohjeita ja esimerkkejä mitä ei ainakaan
kannata tehdä ;)

-- xybo

Ihan yleisesti voisin sanoa, että pelkkien wysiwyg-ohjelmien
hallitseminen ei riitä. Eli vaikka voi tuntua turhalta, on HTML
kyllä aivan pakko osata. Vaikka esim Dreamweaver on varsin
fiksu ja osaa tehdä riittävän selkeää html:ää, niin silti - itsekin
useasti - joudun työskentelemään ihan siellä koodin puolella.
Täytyy tietää edes tyydyttävästi, mitä se softa tekee.

Ja tietenkin, se että osaa käyttää jotakin softaa, ei tarkoita sitä
että _osaisi_ tehdä niitä webbisivuja...

Vaatimukset hyvälle sivulle ovat tietenkin varsin erilaiset riippuen
siitä mitä sivulla halutaan kertoa, mille aiheeseen se liittyy jne jne
Mutta yleisesti hyvän web-sivun kriteereinä pidän:
- Käytettävyys
- Visuaalisuus
- Kokemuksellisuus

MX:llä). Tässä näytteitä mitä nyt oon saanu aikaiseksi, saa antaa
palautetta...

Jos nuo ovat vain softien käyttöharjoituksia, niin siinä tapauksessa
ihan OK. Mutta omia laatuvaatimuksia _hyvänä_ web-sivuna, nuo
eivät täytä.

Muutamia linkkejä, lähinnä web-designiin liittyen:

• Styleboost
  Styleboost listaa pääasiallisesti portfolioita. Hyvä saitti jos haluaa
  tutustua huipputason suunnittelijoiden sivuihin.
• Linkdup
  Kuten edellinen
• K10000
  Web-design porttaali.
• useit.com
  Jakob Nielsen. Tämä setä ei tykkää yhtään edellisten linkkien sisällöstä....
  Mutta käytettävyydestä häneltä oppii yhtä jos toista. Suosittelen
  tutustumaan miehen kirjallisuuteen.

Se mikä löytyy sieltä Platinum-idolsista se mun sivu on tehty siten, että muuten omissa päissäni kirjotellu <allaire> HomeSite 2.5* ohjelmalla, mutta se vaihtokoodi ku laittaa hiiren niiden pikkukuvien päälle on Dynamicdrivestä hieman mukautettuna. - Se on sitä DHTML:ää. (Skulaa paremmin ku oma koodi. Toi on fiksumman kirjoittama.)

Duunissa jos jotain teen, niin teen sen EditPad ohjelmalla tai maailman yhteensopivimmalla HTML-editorilla.

W3C on erittäin hyvä sivu jos haluaa lisää tietoa CSS:n tai HTML:n käytöstä.

Kun opettelet, niin opettele mieluummin ensin ilman WYSIWYMGIYAL-ohjelmia. Ja jos opettelet HTML ja DHTML puolen, niin minä ainakin hyvin mielelläni käyn sivuillasi. Eli CSS on osa DHTMLää, ja niitä kun käyttää, niin se kirjoittaminen nopeutuu huomattavasti, kun ei tarvii joka tagin muotoiluja kirjoitella erikseen. Ja erillisellä .CSS tiedostolla saa koko sivustoa koskevat asetukset, niin ei tarvii edes sitä <style> tagia kirjoittaa kokonaan joka sivulle. Noilla automaattiohjelmilla voi tulla helposti fiboja. Sivukoot saattaa olla aika isoja.

Esmes tuo oma idolssisivun koko:

• Total (10kpl): 62.7kB
• Musiikki (1kpl): 22.4kB
• HTML (1kpl): 7.87kB
• Kuvat (8kpl): 32.3kB

Joku päivä ostan vielä tälläisen:

Höh... amatöörinäppis. Mihin sitä Done-nappia tarvii? Se "done" komento menee 8 sarjoina kumminkin, eli senkin käskyn sais ihan vaa 0 ja 1 nakuttelemalla. Tossa on näppisvalmistaja käyttänyt 33% liikaa näppäimiä, se ei ole kustannustehokasta.

(Ihan ku osaiski binääriä oikeesti edes riittävän hyvin...)

On vain 10 erilaista ihmistyyppiä - niitä jotka osaa binääriä ja niitä jotka ei.

* HomeSite 2.5 oli vielä <allaire> yrityksen omistama ja tekstipohjainen. Tekivät vissiin siitäkin myöhemmässä vaiheessa WYSIWYMGIYAL-ohjelman. Mut kaippa kaikilla, myös Microsoftin ohjelmilla saa tekstipohjaisenakin tehtyä.

Itse karsastan Dreamweaveriä. Layoutin tekoon se on 'ihan ok', mutta se valmiin koodin luettavuus / ratkaisut on aika karmeaa katsottavaa. Mieluiten teen layoutit Photoshopilla. Flash MX:ää käytän myös melko paljon.

Suosittelen opettelemaan XHTML & CSS -yhdistelmää ja unohtamaan taulukot. Sivuista saa huomattavasti kevyemmät div:eillä ja standardien mukaan toteutettuna ne yleensä näyttää samalta kolmessa pääselaimessa (IE, NS, Opera). Bonuksena sivuja voi katsoa muillakin laitteilla kuin tietokoneilla (kännykät yms).

Lisäksi PHP:n opetteleminen on iso plussa. Dynaamisten saittien teko on sillä helppoa ja tuota tuetaan melkein kaikkialla.

Tässä on pari katsomisen arvoista linkkiä lisää:

W3Schools.com
Täältä pääset alkuun. Online-tutoriaaleja, eri tekniikoiden esittelyt ja merkkaustavat yms.

W3.org
Kaikki nippelitieto HTML:stä, CSS:stä, XHTML:stä jne.
Tarkista myös tekemäsi sivut HTML Validatorilla.

PHP.net
Kaikki nippelitieto PHP:stä.

Apukeittiö
Suomalainen Flash-foorumi. Ohjeita, esimerkkejä, keskustelua yms.

A List Apart
Keskittyy web-standardien mukaiseen sisällön tuottamiseen. Hyviä esimerkkejä kinkkisiin ongelmiin.

CSS Zen Garden
Saitti, joka osoittaa epäilijöille, että CSS:lläkin saa tehtyä hienoja saitteja.

Jeffrey Zeldman
J.Zeldmanin saitti. Kova äijä web-standardien saralla.

Actionscript.org
Flashille ja sen Actionscriptille pyhitetty saitti.

Design-saitteja voisi luetella n+1 kappaletta, mutta tuosta zAon mainitsemasta Linkdup:sta on ihan hyvä lähteä liikkeelle. Katsele erilaisia saitteja ja niiden respect-listoja, niin löydät paljon mielenkiintoista tavaraa.

Saitti, joka osoittaa epäilijöille, että CSS:lläkin saa tehtyä hienoja saitteja.

Kielo - Soitin tossa päntissä joskus. Alotettii joskus vuonna kypärä ja miekka tekee Ren & Stimpy fanisivuja basistin kanssa ja nyt se on menny tekee tollaset sivut. (Katsokaa sorsa. Yksi sivu - koko sivusto.)

Sellaiset sivut jotka voi päivittää selaimen kautta olisi vallan mainio asiakkaalle joka ei osaa muuten niitä päivittää. Mutta, selaiset sivut vaatikin jo aika lailla osaamista.

Sellaiset sivut jotka voi päivittää selaimen kautta olisi vallan mainio asiakkaalle joka ei osaa muuten niitä päivittää. Mutta, selaiset sivut vaatikin jo aika lailla osaamista.

Nojaa, jos kyseessä on ihan pieni saitti, niin äkkiäkös
vaikka PHP:llä jonkinlaisen päivityssysteemin kehittää,
jota voi sitten selaimen kautta päivitellä.

Sellaiset sivut jotka voi päivittää selaimen kautta olisi vallan mainio asiakkaalle joka ei osaa muuten niitä päivittää. Mutta, selaiset sivut vaatikin jo aika lailla osaamista.

Valmiita (ja ilmaisia) sisällönhallintajärjestelmiä löytyy kyllä roppakaupalla.

Mistä?
Löytyykö linkkejä?

Google on yleensä aika hyvä paikka aloittaa etsiminen. Melko yleinen pikkusivustojen ylläpitoon käytetty on (Open)PHPNuke.

Ite testailen oman saitin julkaisua tällä hetkellä typo3-ratkaisun päälle. Vaikuttaa ns. hyvältä.

Tämä unohtui:

Why tables for layout is stupid
Hauskasti toteutettu saitti, jossa perusteluita sille, miksi taulukot ei ole hyvä juttu leiskan teossa.

Why tables for layout is stupid

Hyviä pointteja. Itse olen siirtynyt taulukoista divin käyttöön aika lailla, mutta kyllä sitä vielä taulukoitakin käytän.

(Sivut, joita mä teen ei varmasti mene W3C testeistä läpi... Enkä edes yritä, ennen ku mulle maksetaan rahaa siitä. Pääasia, että haluamallani selaimella näkyy oikein, kun teen amatöörisivuja. - Mutta perseilyä on tehdä ilotulitussivut, jotka sotii standardeja vastaan. Oma vääristymäni on lähinnä sitä, että sotken standardeja. - Toimii ne sivut kumminkin. Enkä spämmää nettiä miljoonilla toimimattomilla sivuilla. Sitä vihaan.)

Kevyempi taulukko on, ku framesetti. :panic:

Vaan mitä kevyempi, sitä kevyempi. Internet on vielä tekstipohjainen. CSS opettelu oli ehkä parasta mitä olen opetellut nettisivujen teossa. (Ja Photoshop 5.5sta saakka ollut "Save File(s) for Web" -mahdollisuus on auttanut kovasti kuvien optimoimisessa.)

Heitä hyvästit vanhanaikaisille ja kankeille taulukoille osa 2:
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Näin saa <div></div> sydeemit keskitettyä. Muista, että LEFT: (jotain)px; juttua ei tule ja taulukkon leveys pitää olla sama kuin divissä..

Code:

<center> <table width="744" border="0"> <tr> <td height="340"> <div style="POSITION: absolute; TOP: 20px; HEIGHT: 340px; WIDTH: 744px; BORDER-TOP: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-LEFT: #000000 1px solid;"></div> </td> </tr> </table> </center>

Näin saa <div></div> sydeemit keskitettyä. Muista, että LEFT: (jotain)px; juttua ei tule ja taulukkon leveys pitää olla sama kuin divissä..

Ööö?

Siis ei esmes: jos halutaan keskittää jotain? Ja jos Div on käytössä, miksi käyttää tageja?

Ja jos border on joka sivulla sama, niin miksi määritellä jokainen sivu erikseen? Enkä mä ymmärrä tässä tän TABLE:n osuutta? Miksi se on tohon laitettu?

Ei, vaan näin:

Ulompi on container, sisempi sisältöä.
Ei käytetä niitä tableja...

Code:

<center> <table width="744" border="0"> <tr> <td height="340"> <div style="POSITION: absolute; TOP: 20px; HEIGHT: 340px; WIDTH: 744px; BORDER-TOP: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-LEFT: #000000 1px solid;"></div> </td> </tr> </table> </center>

Näin saa <div></div> sydeemit keskitettyä. Muista, että LEFT: (jotain)px; juttua ei tule ja taulukkon leveys pitää olla sama kuin divissä..

Ööö?

Siis ei esmes:

Code:

<div align="center"></div>

jos halutaan keskittää jotain? Ja jos Div on käytössä, miksi käyttää

Code:

<center></center>

tageja?

Ja jos border on joka sivulla sama, niin miksi määritellä jokainen sivu erikseen? Enkä mä ymmärrä tässä tän TABLE:n osuutta? Miksi se on tohon laitettu?

Table on laitettu siihen sen takia et se keskittää div tagin.. muistaakseni en saanut keskitettyä ilman tablea..

Table on laitettu siihen sen takia et se keskittää div tagin.. muistaakseni en saanut keskitettyä ilman tablea..

No mutta hyvähän se on silti jos olet ton kuitenkin itse keksinyt. Eli älä ota tota mun postausta mitenkään siis kettuiluna, eikä tämä nyt osoita, että väärässä olisit. Ota postaukseni lisäyksenä tietoihisi.

Omaa säätämistä ja itseoppimista arvostan kovasti.