Mine sisusse
Otsi siit
  • Rohkem valikuid...
Otsi tulemusi mis sisaldab...
Otsi tulemusi...

[Õpetus]Loome kodulehe (Hosti otsimisest kuni pealehe loomiseni)

Õpetus oli hea?  

29 liiget on hääletanud

  1. 1. Õpetus oli hea?



Soovitatud postitused

VIP

Kuidas teha?

Alustame hosti otsimisega

Valin hostiks 000Webhosti, sest see on hea ja tasuta!

Mine http://www.000webhost.com/order.php ja täida lüngad. Umbes nii:

[spoiler=Registreerimine]rega.png

 

Ja vajuta nuppu "Create My Account"

Nüüd on sul host olemas! Nüüd mine oma e-maili ja aktiveeri oma konto! Kui oled aktiveerinud siis logi sisse 000webhosti ja oota millal teie leht on aktiveeritud(see käib kähku). Kui on kodulehe "Status: Active", siis vajuta "Go To CPanel" ja otsi üles link "View FTP Details" ja kliki sinna ja tuleb ette midagi sellist:

[spoiler=FTP andmed]ftp.png

 

 

Jätame need andmed hetkel lahti ja lähme otsima FTP-clienti:

Mina valin "FileZilla" ftp clienti, sest see parim minu silmis. Mine sellele lingile http://filezilla-project.org/download.php?type=client ja vali platvorm(Mac, Linux, Windows), kuhu soovid installida, lae installer alla ja installi peale, peale installimist ava FileZilla client. Ette tuleb selline asi:

[spoiler=FileZilla]FZ.png

 

 

Kuidas ühendada?

Nüüd läheb meil vaja FTP andmeid, need samad:

[spoiler=FTP andmed]ftp.png

 

Filezillasse paned:

Server: FTP host name, Kasutajanimi: FTP user name, Parool: FTP password, Port jäta tühjaks...

Ja vajuta "Kiirühendus", ette tuleb midagi sellist:

[spoiler=Ühendus]FZ2.png

 

Kliki 2 korda kasutale "public_html", leiate sealt 2 faili: ".htaccess" ja "default", kustuta ära "default"(1 klikk peale ja vajuta delete nuppu)

 

Alustame siis saidi sisustamisega

Avage oma lemmik teksti-editor(Notepad, Wordpad jne), ise soovitan teil alla tirida Notepad++,

mille saate siit: http://notepad-plus-plus.org/download/v6.1.3.html .

Looge uus dokument ja alustame koodi kirjutamisega, alustuseks vormistame ilusti koodi ära:

br />"http://www.w3.org/TR/html4/loose.dtd">



Lehe pealkiri


	Siia tuleb lehe sisu!


Lisame välise "Stiililehe(Stylesheet)", pannes

tagide vahele rea koodi, head jääb nii:



Lehe pealkiri

Nüüd salvestage see dokument nimega "index.html", kui on plaanis PHP-d hakata kasutama salvestage kui "index.php".

 

Siis laadige üles index fail, mille just salvestasite

Tehke seda nii:

[spoiler=Üles laadimine]FZ3.png

 

Ja oodake kuni on see üles laetud.

Siis hakkame looma style faili

Looge teksti-editoris uus fail ja nimeks pange "style.css"

Sinna kirjutage:

body{
background: #CCC;
font-family: Arial, Helvetica, sans-serif;	
font-size: 13px;	
}

Selgitan mida need tähendavad:

body{blablabla}: Selle sisse paned koodi, mis mõjub terve lehe ulatuses(Teksti värv, Font, taustavärv või taustapilt jms...)

background: Sellega määrame taustavärvi.

font-family: Määrame kasutatava fondi, neid paneme 3, sest kui kasutajal ei pruugi olla esimest,siis kasutatakse teist ja kui puudub ka teine, siis kasutatakse kolmandat, mis peaks kindlasti olema...

font-size: Määrame teksti suuruse.

Järgmiseks loome "mähise" e. "wrapper", mis hoiab sisu ilusti koos

style.css jääb nii:

body{
background: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper{
margin: 0 auto;
width: 922px;
       border: 1px #000 solid;
}

Selgitus vahepeal:

"margin: 0 auto;" Hoiab sisu ilusti keskel.

"width: 922px;" Määrab laiuse, mille sisse jääb sisu.

"border: 1px #000 solid;" Teeb "mähise" ümber piirjoone, mis on musta(#000) värvi ja 1pikslit(1px) lai.

 

index.php body nii

	

	Bla bla bla

"

" näitab style.css-is olevat "eset" kui paned id="wrapper", näitab ta wrapperit jne...

 

Vahepeal uuendame style.css faili, lisame "headeri", "contenti" ja "footeri".

style.css

body{
background: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper{
margin: 0 auto;
width: 922px;
border: 1px #000 solid;
}
#header{
width: 100%;
height: 100px;
background: #C2C2A3;
border-bottom: 1px #000 solid;
}
#content{
background: #CCCCB2;
height: 600px;	
border-bottom: 1px #000 solid;
}
#footer{
height: 50px;
width: 100%;
background: #C2C2A3;
text-align: center;
}

Ja jälle selgitan:

"width: 100%" kuna header, footer ja content on wrapperi sees ja wrapper on 922px siis header, content ja footer on 100% wrapperi sisust ehk 922px.

"height" määrab elemendi kõrguse.

"border-bottom:" annab elemendi alumise osale piiri.

 

Ja lisame uued elemendid ka index faili

index

br />"http://www.w3.org/TR/html4/loose.dtd">




Lehe pealkiri



Siia võid panna pildi vms
fgfdgfhftghtfg
Siia kirjutad midagi


Laadige üles indexi fail ja ka style.css ja leht näeb välja selline:

[spoiler=Leht]leht.php.png

 

Ja siis uuendame veel style.css-i ja indexit ja lisame sisu ja vasaku menüü

 

style.css selline:

body{
background: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper{
margin: 0 auto;
width: 922px;
border: 1px #000 solid;
}
#header{
width: 100%;
height: 100px;
background: #C2C2A3;
border-bottom: 1px #000 solid;
}
#contentwrap{
background: #CCCCB2;
height: 600px;	
border-bottom: 1px #000 solid;
}
#footer{
height: 50px;
width: 100%;
background: #C2C2A3;
text-align: center;
}
#vasak{
width: 201px;
background: #A3A375;
float: left;
height: 600px;
border-right: 1px #000 solid;
}
#sisu{
float: right;
width: 720px;
background: #ADAD85;
height: 100%;
}

"float: left" paneb kujunduse "hõljuma" vasakule.

 

ja index selline:

br />"http://www.w3.org/TR/html4/loose.dtd">




Lehe pealkiri



Siia võid panna pildi vms



Siia võid panna linke ja muud sellist



Siia kirjutad mis vaja
			

Siia kirjutad midagi


 

Lae uuesti üles style.css ja index fail ja leht on selline:

[spoiler=Leht]leht2.php.png

 

 

Siinkohal lõpetan õpetuse, kujundus on küll algeline ja kiviajast aga keegi ehk õpib sellest midagi. Õpetus ja kood kirjutatud kõik minu poolt, õpetust võib ainult kopeerida minu loaga.... Kui leiate õpetusest vigu, andge teada. Küsimused, kriitika, hinnangud on oodatud ja veel võite soovitada, millest järgmine õpetus teha.

 

Kasulikud lingid:

http://www.w3schools.com/tags/ref_colorpicker.asp - Color Picker, ehk saad värvikoode otsida...

http://www.000webhost.com/ - 000webhost

http://notepad-plus-plus.org/download/v6.1.3.html - Notepad++ allalaadimise link

http://filezilla-project.org/download.php?type=client - FileZilla allalaadimise link

Muudetud liikme m6uk'i poolt

Mama,just killed a man, put a gun against his head, pulled my trigger, now he's dead,

Jaga seda postitust


Postituse link
Share on other sites
VIP
Author of the topic Postitas
Kui kasutad HTML5 DOCTYPEi, siis võiksid selle tage ka kasutada.

Tõsi, muutsin parem HTML 4.01-ks :)


Mama,just killed a man, put a gun against his head, pulled my trigger, now he's dead,

Jaga seda postitust


Postituse link
Share on other sites
SUPERVIP

Tee mingi leht valmis siis pane link siia .

Tahaks näha milline see on . :)


daddy.png

 

12770.png

Jaga seda postitust


Postituse link
Share on other sites
VIP
Author of the topic Postitas
Tee mingi leht valmis siis pane link siia .

Tahaks näha milline see on . :)

Selle kujundusega, mis siin tegin? Kui hoolikalt viimast pilti vaatad, siis näed aadressi :)


Mama,just killed a man, put a gun against his head, pulled my trigger, now he's dead,

Jaga seda postitust


Postituse link
Share on other sites
SUPERVIP

br />"http://www.w3.org/TR/html4/loose.dtd">




Overload-Gaming.Net



http://www.upload.ee/image/2543721/logo.png



Links.



Siia kirjutad mis vaja
			

Siia kirjutad midagi



Panin logo lingi sinna logo kohta,

http://www.upload.ee/image/2543721/logo.png

Ei toimi, mis valesti?

 

Ning kuidas ma saan teksti värvi muuta?


www.gameritele.eu - midagi cs:go ning minecrafti mängijatele

Jaga seda postitust


Postituse link
Share on other sites
br />"http://www.w3.org/TR/html4/loose.dtd">




Overload-Gaming.Net



http://www.upload.ee/image/2543721/logo.png



Links.



Siia kirjutad mis vaja
            

Siia kirjutad midagi



Panin logo lingi sinna logo kohta,

http://www.upload.ee/image/2543721/logo.png

Ei toimi, mis valesti?

 

Ning kuidas ma saan teksti värvi muuta?

 

Prosinec vastas ühele küsimusele ära. Teisele saad abi aga,

 

//

Jaga seda postitust


Postituse link
Share on other sites

Kommentaari lisamiseks loo konto või logi sisse

Kommenteerimiseks peate olema liige

Loo konto

Liituge meie kommuuni uue kontoga. See on lihtne!

Loo uus konto

Logi sisse

On juba konto? Logi sisse siit.

Logi sisse nüüd

×
×
  • Loo uus...

Oluline informatsioon

Selle veebisaidi paremaks muutmiseks oleme teie seadmesse paigutanud küpsised . Võite kohandada oma küpsiste seadeid , vastasel juhul eeldame, et te olete küpsiste kasutamisega nõus kui jätkate veebisaidil sirvimist.. Palun lugege läbi Kasutustingimused ja Privaatsuspoliitika.