Nettisivujen tekeminen

Ajattelin tässä vanhoilla päivillä opettella kunnollisten nettisivujen
tekemisen. Olen niitä jo muutaman tehnyt ihan vain kokeilemalla
ohjelmia ja viimeisempää varten lukasin jo oikein kirjankin
Dreamweaverin käytöstä (kirja tosin oli kolmosversiosta, sivut tein
MX:llä). Tässä näytteitä mitä nyt oon saanu aikaiseksi, saa antaa
palautetta

Tämän tein Front Page 4:lla
Tämäkin on tehty FS:llä
Tämä on tehty Dreamweaver MX:llä
Tämä on tehty kokonaan Flash MX:llä

Platinum on varmaan täynnä kaiken maailman koodareita, designareita
ja muita sisällön tuottajia, joten nyt kaipaisinkin "ammattilaisten" neuvoja
oikeiden nettisivujen tekoon. Kertokaa ainakin:

1. Alustavat toimenpiteet, kuten suunnittelu, tiedostojen nimeämissysteemit,
mitä ominaisuuksia sivuille pitää määrittää...
2. Kuinka rakentaa nettisivut, mielellään näytteitä
3. Erilaisten selainten huomioon ottaminen
4. Serverin valinta, domainin hankinta...
5. Hyvät ohjelmat, ja missä mikäkin on hyvä
6. Koodikielet ja mihin niitä tarvitaan (CSS, Perl, CGI, HTML...)
Koodaustahan ei enää uusilla ohjelmilla tarvitse kunnolla osata, mutta
perusteet on varmaan hyvä osata?
7. Kuinka tehdä dynaamisia sivuja, esim vieraskirja, keskusteluforumit?
8. Mistä saa hyviä shareware-ohjelmia?
9. Mitä hyviä kirjoja kannattaa lukea?
10. Kaikki muutkin vinkit käy...

one word: http://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

Quote by NoStatus

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

• 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.

Quote by zAo

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

Quote by NoStatus

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

Quote by NoStatus

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

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.

Quote by George Shield

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

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.

Quote by mark hamilton

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.

Quote by mark hamilton

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.

Quote by akir0

Quote by mark hamilton

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.

Quote by NoStatus

Mistä?
Löytyykö linkkejä?

Tämä unohtui:

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

Quote by George Shield

Why tables for layout is stupid

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

[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>
[/code]

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

Quote by mark hamilton

[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>
[/code]

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

Ei, vaan näin:

[code]
<div style="text-align: center; width: 100%;">
<div style="margin-right: auto; margin-left: auto;">
<!-- Sisältö tähän -->
</div>
</div>
[/code]

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

Quote by Taedium

Quote by mark hamilton

[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>
[/code]

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>[/code] jos halutaan keskittää jotain? Ja jos Div on käytössä, miksi käyttää [code]<center></center>[/code] 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?

Quote by mark hamilton

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