Dizajnimi i një Faqe Web të krijuara nga Notepad me CSS

01 nga 10

Krijo fletën e stilit CSS

Në të njëjtën mënyrë që krijuam një skedar teksti të veçantë për HTML, do të krijoni një skedar teksti për CSS. Nëse keni nevojë për vizuale për këtë proces, ju lutemi shihni tutorialin e parë. Këtu janë hapat për të krijuar fletën tuaj të stilit CSS në Notepad:

1. Zgjidhni File> New në Notepad për të marrë një dritare bosh
2. Ruaj skedarin si CSS duke klikuar File
3. Lundroni në dosjen time my_website në hard drive tuaj
4. Ndrysho "Ruaj si tip:" te "Të gjitha skedarët"
5. Emëroni skedarin tuaj "styles.css" (hiqni kuotat) dhe klikoni Save

02 nga 10

Lidhni fletën e stilit CSS me HTML-in tuaj

Sapo të keni një fletë stili për web faqen tuaj, do t'ju duhet ta shoqëroni atë në vetë faqen Web. Për ta bërë këtë ju përdorni tagun e lidhjes. Vendosni tagun e mëposhtëm të linkut kudo brenda tags të dokumentit tuaj pets.htm:

03 nga 10

Fix Margins faqe

Kur po shkruani XHTML për shfletues të ndryshëm, një gjë që do të mësoni është se ata të gjithë duket se kanë kufij dhe rregulla të ndryshme për mënyrën se si shfaqin gjërat. Mënyra më e mirë për t'u siguruar që faqja juaj të duket e njëjtë në shfletuesit më të shumtë është mos lejimi i gjërave si kufijtë në default ndaj zgjedhjes së shfletuesit.

Preferoj të filloj faqet e mia në këndin e sipërm të majtë, pa asnjë mbushje shtesë ose margjinë që rrethon tekstin. Edhe në qoftë se unë jam duke shkuar për të pad përmbajtjen, kam vendosur kufijtë në zero në mënyrë që unë jam duke filluar me të njëjtën propozoj bosh. Për ta bërë këtë, shtojini sa më poshtë dokumentit tuaj styles.css:

html, trup {
margjina: 0px;
mbushje: 0px;
kufiri: 0px;
e majtë: 0px;
lartë: 0px;
}

04 nga 10

Ndryshimi i fontit në faqe

Gërma është shpesh gjëja e parë që do të dëshironi të ndryshoni në një faqe Web. Gërma e parazgjedhur në një faqe Web mund të jetë e shëmtuar dhe është në të vërtetë vetë shfletuesi i internetit, kështu që nëse nuk përcaktoni fontin, me të vërtetë nuk do të dini se cila do të duket faqja juaj.

Në mënyrë tipike, ju do të ndryshoni fontin në paragrafë, ose nganjëherë në tërë dokumentin. Për këtë faqe ne do të përcaktojmë fontin në nivel header dhe paragraph. Shtoni në vijim dokumentin tuaj styles.css:

p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}

Unë fillova me 1em si madhësinë e bazës për paragrafët dhe artikujt e listës, dhe më pas e përdora për të vendosur madhësinë për titujt e mi. Unë nuk pres që të përdor një titull më të thellë se h4, por nëse planifikoni të doni, do ta doni edhe atë.

05 nga 10

Bërja e lidhjeve tuaja më interesante

Ngjyrat e parazgjedhura për lidhjet janë blu dhe vjollcë, përkatësisht për lidhje të pambajtura dhe të vizituara. Ndërsa kjo është standarde, mund të mos përputhet me skemën e ngjyrave të faqeve tuaja, prandaj le ta ndryshojmë. Në skedarin tuaj styles.css shtoni sa vijon:

një: lidhje {
font-familja: Arial, Helvetica, sans-serif;
ngjyra: # FF9900;
tekst-dekorim: nënvizoj;
}
a: vizituar {
ngjyra: # FFCC66;
}
a: rri pezull {
sfondi: #FFFFCC;
font-weight: bold;
}

I vendosur tre stilet e lidhjes, a: lidhja si parazgjedhje, a: vizito për kur është vizituar, ndryshoj ngjyrën dhe a: rri pezull. Me një: hover unë kam lidhje të marrë një ngjyrë të sfondit dhe të shkojnë të guximshme për të theksuar është një lidhje për të klikuar.

06 nga 10

Dizajni i Seksionit të Lundrimit

Meqë ne vendosim seksionin e lundrimit (id = "nav") në HTML, le të bëjmë stilin e parë. Ne duhet të tregojmë se sa e gjerë duhet të jetë dhe të vendosim një diferencë më të gjerë në anën e djathtë në mënyrë që teksti kryesor të mos burojë kundër tij. Unë gjithashtu vendos një kufi rreth tij.

Shto CSS-në e mëposhtme në dokumentin tuaj styles.css:

#nav {
gjerësia: 225px;
kufiri i djathtë: 15px;
kufiri: i mesëm solid # 000000;
}
#nav li {
lista-style: none;
}
.footer {
font-size: .75em;
qartë: të dyja;
gjerësia: 100%;
text-align: qendra;
}

Prona e listës së stilit e vendos listën brenda seksionit të navigimit për të mos pasur plumba ose numra dhe .footer e stilin e të drejtave të autorit për të qenë më i vogël dhe i përqendruar në seksionin.

07 nga 10

Pozicionimi i seksionit kryesor

Duke pozicionuar seksionin tuaj kryesor me pozicionimin absolut mund të jeni i sigurt se do të qëndroni pikërisht aty ku dëshironi që të qëndroni në faqen tuaj Web. Kam bërë 800px të mi të gjerë për të vendosur vëzhgues më të mëdhenj, por nëse ke një monitor më të vogël, mund të dëshirosh ta ngushtosh atë.

Vendosni sa vijon në dokumentin tuaj styles.css:

#main {
gjerësia: 800px;
lartë: 0px;
pozita: absolute;
e majtë: 250px;
}

08 nga 10

Dizajnimi i paragrafëve tuaj

Meqë unë e kam caktuar tashmë shkronjën e paragrafëve, kam dashur t'i jap çdo paragraf një "goditje" të vogël shtesë për ta bërë atë të dalë më mirë. E bëra këtë duke vendosur një kufi në krye që e theksoi paragrafin më shumë sesa vetëm imazhin.

Vendosni sa vijon në dokumentin tuaj styles.css:

.topline {
kufi i lartë: i ngushtë i trashë # FFCC00;
}

Vendosa ta bëja atë si një klasë të quajtur "topline" dhe jo thjesht të definoheshin të gjitha paragrafët në atë mënyrë. Në këtë mënyrë, nëse vendos se dua të kem një paragraf pa një vijë të verdhë të lartë, thjesht mund ta lë klasën = "topline" në etiketën e paragrafit dhe nuk do të ketë kufi të lartë.

09 nga 10

Dizajni i imazheve

Imazhet zakonisht kanë një kufi rreth tyre, kjo nuk është gjithmonë e dukshme nëse imazhi nuk është një lidhje, por më pëlqen të kem një klasë brenda stilit të stilit tim të CSS-së që automatikisht fiket kufirin. Për këtë stylesheet, kam krijuar klasën "noborder", dhe shumica e imazheve në dokument janë pjesë e kësaj klase.

Pjesa tjetër e veçantë e këtyre imazheve është vendndodhja e tyre në faqe. Doja që ata të ishin pjesë e paragrafit ku ishin në pa përdorur tabela për t'i lidhur ato. Mënyra më e thjeshtë për ta bërë këtë është përdorimi i pronës së notave CSS.

Vendosni sa vijon në dokumentin tuaj styles.css:

#main img {
noton: majtas;
margjina-djathtas: 5px;
margjinat e fund: 15px;
}
.noborder {
kufiri: 0px none;
}

Siç mund ta shikoni, ekzistojnë edhe vetitë e margjinave të vendosura në imazhe, për t'u siguruar që ato të mos shkatërrohen kundër tekstit të notuar që është pranë tyre në paragrafët.

10 nga 10

Tani shikoni në faqen tuaj të përfunduar

Pasi të keni ruajtur CSS tuaj ju mund të rifreskoni faqen pets.htm në shfletuesin tuaj Web. Faqja juaj duhet të duket e ngjashme me atë të treguar në këtë foto, me imazhe të përafruara dhe navigacionin e vendosur në mënyrë të saktë në anën e majtë të faqes.

Ndiqni këto hapa të njëjtë për të gjitha faqet tuaja të brendshme për këtë faqe. Ju dëshironi të keni një faqe për çdo faqe në navigacion tuaj.