Otsi Vahvlist
Kuvatakse tulemused sildile ''õpetusloome''.
Leitud 1 tulemus
-
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] 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] 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] Kuidas ühendada? Nüüd läheb meil vaja FTP andmeid, need samad: [spoiler=FTP andmed] 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] 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] 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] 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] 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