Reklame
Indholdsfortegnelse
§1. Introduktion
§2–Kom godt i gang med xHTML
§3–Design med CSS
§4–Mere information
1. Introduktion: Hvad er xHTML?
Velkommen til XHTML-verdenen – Udvidbart Hypertext Markup Language – et opmærkningssprog (ligner programmering), der giver enhver mulighed for at konstruere websider med mange forskellige funktioner. På mange måder er det det primære sprog på internettet.
Så hvorfor er vi ligeglade?
Nå, har du aldrig ønsket at have din egen hjemmeside? Eller lave dit eget spil? Denne guides rolle er at give dig en smagsprøve på denne magtfulde verden. Hvis du har nogen tidligere programmeringserfaring, vil du selvfølgelig finde dette nemmere, end hvis du lige er startet på dit programmeringseventyr. Uanset hvad, håber jeg at forklare dette, så selv en nybegynder kan forstå.
Vi bekymrer os om xHTML, fordi det er et stærkt udgangspunkt for at lære de grundlæggende byggesten på nettet. Sociale netværkssider som Facebook, MySpace og Twitter bruger et andet (server-side) programmeringssprog kaldet PHP, men det er en god idé at forstå det grundlæggende, før du dykker med hovedet ind i programmeringen verden. Denne guide handler om det grundlæggende.
Hvis du vil vide mere om, hvordan internettet fungerer eller måske hvordan computernetværk fungerer med alt dette tekniske ting eller bare hvordan computere kan bygges, så prøv disse fantastiske guider fra dine venner på Gøre brug af:
//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Sådan bygger du din egen pcDet er meget glædeligt at bygge din egen pc; samt skræmmende. Men selve processen er faktisk ret simpel. Vi guider dig igennem alt, hvad du behøver at vide. Læs mere
//www.makeuseof.com/tag/everything-need-know-home-networking/ Alt du behøver at vide om hjemmenetværkOpsætning af et hjemmenetværk er ikke så svært, som du tror, det er. Læs mere
//www.makeuseof.com/tag/guide-file-sharing-networks/ MakeUseOf-guiden til fildelingsnetværkHar du nogensinde spekuleret på, hvad der er de største fildelingsnetværk derude? Hvad er forskellene mellem BitTorrent, Gnutella, eDonkey, Usenet osv.? Læs mere
//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ Windows 7: Ultimate GuideHvis du er bange for at opgradere fra Vista eller XP, fordi du føler, at det er helt anderledes end det, du er vant til, bør du læse denne nye guide. Læs mere
//www.makeuseof.com/tag/download-how-the-internet-works/ Sådan fungerer internettetVi kan nu få adgang til internettet fra vores hjemmecomputere, kontor, bærbare computere og vores telefoner. Men mange mennesker er stadig ikke helt sikre på, hvad internettet er, og hvordan det virkelig fungerer. Læs mere
2. Kom godt i gang med xHTML
I dette kapitel lærer du, hvordan du opretter og tilpasser websteder på mange forskellige måder, herunder hvordan du:
• Tilføj billeder til websider.
• Opret og brug hyperlinks til at navigere på websider.
• Opsæt lister med information ved hjælp af punktpunkter og sådan.
• Opret tabeller med rækker og kolonner af tilfældige data og være i stand til at styre formateringen af nævnte tabeller.
• Opret og brug formularer, som du faktisk kan have noget interaktion med.
• Gør websider tilgængelige for søgemaskiner.
Alt dette vil blive gjort med xHTML-programmering. tror du ikke på det? Læs videre. Du vil blive overrasket over, hvor meget du kan lære af sådan en kort guide.
Før vi rent faktisk kommer ind på "kodningsdelen" af denne guide, skal du bruge noget software, så du kan redigere, teste og stort set hele vejen rundt om at udvikle dine programmer. Gå til www.dreamspark.com og få et af følgende programmer GRATIS, forudsat at du er studerende:
• Microsoft Visual Studio 2010
• Expression Studio 4
Hvis du ikke er studerende, kan du også bruge Notesblok++, som du ret nemt kan komme fra www.notepad-plus-plus.org
Når du har fået et af programmerne og installeret det, så kan du starte din xHTML-oplevelse.
Du bruger muligvis en Mac eller Linux i stedet for Windows; du skal finde en tekst editor der virker for dig i så fald. Prøv at finde en, der viser dig dit linjeantal og farvekode for dig.
• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ Leafpad - en ultralet teksteditor [Linux] Læs mere
• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/ Geany - En fantastisk letvægtskodeeditor til LinuxOverraskende nok tilbyder Linux ikke så mange gode IDE'er (Integrated Development Environments). Jeg tror, det skyldes, at dengang de fleste Linux-programmører tog den gode gamle Notesblok frem (eller gedit i dette tilfælde) og startede... Læs mere
Hvis du hellere ikke vil downloade nogle dedikerede værktøjer, kan du stadig bruge en teksteditor som Notesblok eller Wordpad. Ovenstående programmer er dog langt bedre værktøjer til at teste og designe, samt hjælpe dig med din kodning, da den beder dig, hvis du laver en fejl, eller hvis du forsøger at huske det rigtige ord til brug. Simpelt er bedre, ikke? Jeg bruger personligt Notepad++ og Microsoft Visual Studio, selvom jeg har hørt mange gode ting om Expression Studio 4. Du bliver nødt til at beslutte, hvad du bedst kan lide, men alle fungerer fint.
BEMÆRK: For at teste en hjemmeside oprettet fra Notepad eller Wordpad:
Med filen åben, klik Fil >> Gem som
I slutningen af filnavnet skal du indtaste .html og klik Gemme
Åbn den nyligt gemte fil (den åbnes i din standard internetbrowser)
2.1 Lær "verden" at kende
Okay, her er starten på rejsen. Lad os starte med bare at sætte noget på skærmen på denne webside. Først skal du vide hvad er. XHTML-kode bruger start- og sluttags til at sortere ud, hvad der foregår med hvert element på siden.
Her er et eksempel på et startmærke:
Her er et eksempel på et slutmærke:
Kan du se forskellen? Den ene har elementnavnet omgivet af de spidse parenteser, og det andet er det samme, men har en skråstreg før elementnavnet.
VIGTIG: Du skal lukke et tag, efter du har åbnet det på et tidspunkt i koden. Tags skal også være indlejret, det vil sige, at du ikke kan gøre følgende:; det bør være. Kan du se, hvordan mærkerne passer ind i hinanden? Tænk på dem som kasser: du kan ikke lægge noget solidt i halvanden kasse.
Den bedste måde at få at vide, hvordan man programmerer, er ved faktisk at gøre det, så nok teori. Bare for et referencepunkt vil jeg mærke hver linje kode med et nummer, så jeg kan forklare linje for linje, hvad der foregår.
I linje 1 har jeg angivet html-koden og i linje 5 har jeg afsluttet den. Inde i tag er
). Hvis du åbner denne i en webbrowser, vil du se følgende komme over skærmen:
Hvis du vil ændre titlen på siden fra browserens synspunkt (f. firstpage.html), så kan du nemt tilføje følgende kodelinje:
Dette vil få din webside til at se mere professionel ud.
2.2 Startende fra og arbejder ned
I de fleste tilfælde inde i tag der er en
og en .Det bruges normalt til scripting i CSS (afsnit 3) og JavaScript (forklaret i en kommende manual), hvorimod er normalt indholdet på siden.
Noget indhold kan ændres ved hjælp af scripting i
, men er normalt det indhold, der er uforanderligt på siden. Et eksempel kunne være en kort snak om den hjemmeside, du besøger.Du kan foretage ændringer i indholdets formatering ved hjælp af CSS (afsnit 3) i
. Du kan dog også foretage ændringer i formateringen i .Et almindeligt brugt sæt tags, der bruges i brødteksten, er header-skrifttyperne. Disse overskriftsskrifttyper varierer i størrelse og styrke/fed skrift. Bare se selv nedenfor:
2.3 Er dit billede mere end tusind ord værd? – Billeder
Indtil nu har vi kun talt om tekst, og hvad den kan på en hjemmeside, men der er stadig mere. Vil du få din hjemmeside til at se endnu mere tillokkende ud end bare smarte skrifttyper? Prøv at få nogle gode billeder for at få dit websted til at give publikum noget at se på. Vær dog forsigtig med love om ophavsret; bedst at tage dine egne billeder, hvis du har til hensigt at lægge din hjemmeside op på internettet.
Du skal muligvis bruge Photoshop eller nogle digitale billeddannelsesfærdigheder for at skabe et fantastisk billede eller måske forbedre dit eget billede og få det til at se endnu mere fantastisk ud. Prøv disse guider for at få nogle gode tips og indsigt:
• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Lær fotoredigering i Photoshop: Få det grundlæggende på 1 timePhotoshop er et skræmmende program - men med kun en time kan du lære alt det grundlæggende. Tag et billede, du vil redigere, og lad os komme i gang! Læs mere
• //www.makeuseof.com/tag/guide-to-digital-photography/ En begynderguide til digital fotograferingDigital fotografering er en stor hobby, men det kan også være skræmmende. Denne begynderguide fortæller dig alt, hvad du behøver at vide for at komme i gang! Læs mere
De mest populære billedformater er følgende:
• GIF = Graphics Interchange Format
• JPEG = Joint Photographic Experts Group
• PNG = Portable Network Graphics
Tag et kig på koden nedenfor, og jeg vil derefter forklare, hvad det betyder; det vil sige, hvordan du tilføjer billeder til din webside.
Som det blev undervist i tidligere afsnit, starter vi altid med og co-tags. Dernæst
Efter at afsnittet er åbnet i linje 9, er det her billederne indsættes på hjemmesiden. For at tilføje et billede/billede skal du bruge til at begynde med. Dernæst skal du foreslå, hvor filen er. Normalt ville du prøve at have denne fil i samme mappe som webstedsfilerne, ellers bliver du nødt til at indtaste mappestien, som den findes i. I ovenstående tilfælde har jeg brugt
. Det betyder, at kilden (src) af billedet ligger i den samme mappe, og navnet på den billedfil er Picture.jpg. Nemt ikke?
Du behøver ikke tilføje mere end at skabe et billede med en alt egenskab, men du kan tilføje egenskaber til den for at foretage nogle ændringer i den.
Også kendt som alt tekst, vises denne egenskabsværdi, når du holder musen over billedet.
Du bemærker måske, at jeg i linje 10 har startet tagget med og sluttede det med />. Dette er en anden måde at åbne og lukke tags på. Dette er den sædvanlige måde at oprette billeder på, fordi du kan vælge de forskellige egenskaber for billedet, såsom bredde og højde, som vist i eksemplet ovenfor.
I linje 11 og 12 indsættes et andet billede, men dette bruger den anden metode til at åbne og lukke tags. Linje 10 skaber billedet på en meget pænere måde; brug det i stedet for metoden i linje 11 og 12.
2.4 Hyperlinks, hvor kan de henvende sig?
2.4.1 At bevæge sig rundt i "verden"
Vil du vise dine venner nogle fede sider på din hjemmeside, men ved ikke hvordan? Du er kommet til det rigtige sted, læs videre...
Tag et kig på koden nedenfor og se, om du kan gætte, hvad jeg laver, før jeg forklarer det.
Det er rigtigt, jeg opretter hyperlinks til nogle gode og nyttige websteder. For at hyperlinke til en bestemt webside, der har en webadresse, bruger du blot nedenstående syntaks:
[hvad du vil hyperlinke]
Det virker ikke meget svært? Du kan ganske nemt bare sætte tekst derind som eksempelkoden ovenfor. Der er dog ingen grund til, at du ikke kunne bruge noget andet som et billede. Bare for lidt ekstra information: en URL er en Uniform Resource Locator, dybest set webadressen.
2.4.2 Billeder minder dig om, hvor du har været, og tager dig derhen igen
Her er et eksempel på brug af et billede som et hyperlink:
Jeg er sikker på, at hvis du læser de foregående dele af denne sektion, som du udgiver, at dette simpelthen er en blanding af at skabe billeder og hyperlinks. Syntaksen er indstillet til at have hyperlinket på ydersiden og billedet på indersiden, hvorved der placeres et hyperlink af det indsatte billede.
2.4.3 Du har mail – Hyperlink til en e-mailadresse
Dette er simpelthen en gentagelse af den sidste del, men hvis du ikke har været opmærksom så meget, så tag et kig på koden nedenfor:
I stedet for at bruge en URL (f.eks. http://www.something.com) her bruger jeg en e-mailadresse, som involverer at sætte følgende syntaks efter lighedstegnet:
"mailto:[din e-mailadresse]"
Linje 10 er det grundlæggende eksempel på dette koncept. Så hvem vil du sende en e-mail til? Ghostbusters!
2.4.4 Kom rundt i din verden – Intern hyperlinking
Nu kan du se, hvordan du ville komme rundt på din egen hjemmeside. Dette gøres blot ved at bruge dit filnavn som URL. Derfor kan du have en opsætning af hjemmesider som vist i diagrammet nedenfor. Den syntaks, du ville bruge, ville se sådan ud:
2.5 Er du speciel? Disse karakterer er...
Når du indtaster oplysninger, der skal vises på hjemmesiden, f.eks. indhold, skal du muligvis gøre det indsætte noget som et symbol såsom copyright-symbolet: © eller måske en mindre end eller større end symbol. Men da de normale symboler bruges af kodningssyntaksen, så måtte der være en anden måde at komme forbi denne lille forhindring, og løsningen var at bruge et og-tegn (&) og så en kort kode bagefter for at fortælle computeren hvilket symbol sætte ind. Nedenfor er en tabel med et par eksempler på specialtegn fra kodning:
For eksempel kan du sige:
Der er < seks rækker i ovenstående tabel, men > 2 rækker
Der er < 6 rækker i ovenstående tabel, men > 2 rækker
2.6 Lister, lister og flere lister
Okay nu bliver vi nødt til at organisere et par ting, såsom en indkøbsliste. Der er to typer lister. De er:
• Ordnet liste (tal, alfabeter, romertal)
• Uordnet liste (punkter)
Til en ordnet liste skal du bruge følgende tags =
For en uordnet liste ville du bruge følgende tags =
For eksempel:
I ovenstående eksempel inkluderede jeg både uordnede og ordnede listetyper. Men lagde du mærke til, hvad jeg ellers gjorde? Jeg inkluderede også en teknik kaldet Indlejrede lister. Disse indlejrede lister kan bruges til at repræsentere hierarkiske relationer, ligesom listen over ingredienser i Få ingredienser i opskriften ovenfor.
Du kan se, at jeg startede hele listen som en bestilt liste i linje 10 og afsluttede den i linje 23. Ind imellem vil du se og tags jeg har brugt. Disse betegner Liste genstande. Listepunkterne er de ord, der dukker op som i linje 21:
Hvis du vil gå til det næste hierarkiske niveau af prikpunkter eller tal, skal du indlejre dig selv på denne måde:
2.7 Tabeller... nej ikke matematik
Er det lige så svært som dine multiplikationstabeller? Selvfølgelig ikke, hvis du gør det på den rigtige måde. Hvis du lige er begyndt med dette koncept, og det antager jeg, at du er, så er det normalt bedst at tegne den tabel, du vil lave, på et stykke papir, som jeg har nedenfor:
Se det nu i koden nedenfor:
Bland dem nu sammen, og displayet nedenfor skulle hjælpe dig med at forstå, hvordan tabellen er struktureret:
EN
og
fed henholdsvis første og sidste række for at henlede mere opmærksomhed på de dele af tabellen. De fleste mennesker ville se på totalen i tabellens sidefod først ikke?2.8 digitale formularer (penne væk)
Når du surfer på nettet, bliver du nødt til at interagere med de websider, du støder på. For eksempel på www.makeuseof.com skal du indtaste din e-mailadresse som cirklet nedenunder til abonner på nyhedsbrevet og daglige opdateringer fra MakeUseOf. Når du har indtastet din e-mailadresse, skal du ville trykke Tilslutte og dette ville sende oplysningerne (din e-mail) i tekstboksen ved siden af knappen til enten en database eller måske en anden e-mailadresse. Former bruges til at gøre dette, hvilket er, hvad du vil lære i dette kapitel.
Nedenfor er en formular, der bruges til kun at indtaste dit navn og klikke på enten Indsend eller Klar:
Her er koden bag kulisserne, som jeg vil forklare mere detaljeret om kort tid:
For det første er den vigtigste ting i ovenstående script linje 10. Dette er starten på formularen. Metoden er normalt enten stolpe eller få. Ganske selvforklarende, men stolpe sender oplysningerne et sted hen for at lave en registrering, såsom en e-mailadresse eller database. For eksempel: poste et spørgsmål på MakeUseOf Answers. Få, på den anden side, sender de oplysninger, du har givet, og returnerer med feedbackoplysninger, såsom en søgemaskine, sender søgeord og vender tilbage med resultaterne.
Ovenstående kodeblok er et eksempel på en postformular, hvor du indtaster din e-mail-adresse, og den vil blive sendt til den skjulte ejendom med en e-mailadresse efter at have klikket på knappen Send. Det
Linje 22 – 25 placerer knapperne Send og Nulstil/Slet på siden under tekstboksen. Det Nulstil knappen sletter simpelthen al tekst, der er indtastet i tekstboksen eller felterne i den form. Det Indsend knappen følger instruktioner fra de skjulte dele af formularen, som er oprettet i linje 14 – 18. Den skjulte type ville normalt antage for noget automatisk eller en del af noget andet, der bruges i den nuværende form. I dette tilfælde er det sidstnævnte, der giver stolpeed information en destination, i dette tilfælde [email protected], med emnet sæt, i denne case “Abonner e-mail”, og omdirigerer dig derefter til en anden side, i dette tilfælde hovedsiden eller "indeks.html".
2.9 meta hvad? Hvorfor?
Har du nogensinde spekuleret på, hvordan søgemaskiner finder websteder? Nå, dybest set er dette, hvad de bruger: meta elementer. Søgemaskiner katalogiserer normalt websteder ved at følge links til sider på websteder, de finder. Disse metaelementer har information om siden på dem. Tag et kig på følgende uddrag fra noget kode for et eksempel:
Som du kan se ovenfor, går metainformationen i
3. Design med CSS
Det meste af tiden kan folk, der ser på guider som disse, bare lide at spille videospil. CSS er dog ikke Counter Strike Source, og det er heller ikke et First Person Shooter (FPS) overhovedet. CSS er en teknologi, der fungerer med xHTML, og står for Cstigende Style Sark. xHTML er temmelig kedeligt i sig selv, men hvis du tilføjer en rimelig servering af CSS, er formateringen og præsentationen af din skabelse langt mere interessant. Forfattere kan foretage ændringer i elementer på en webside, såsom skrifttyper, mellemrum, farver; dette gøres separat fra dokumentstrukturen (hoved, krop osv.; dette vil blive forklaret i senere kapitler). xHTML var faktisk designet til at specificere indholdet og strukturen af et dokument. Det er ikke sådan, at xHTML ikke kunne foretage ændringer i formateringen af indholdet. Denne opsætning er dog langt mere fordelagtig, da den kan styres fra ét sted, hvis det kræves. For eksempel, hvis et websteds format udelukkende bestemmes af et vedhæftet typografiark, kan en webdesigner blot sætte et andet typografiark på plads for i høj grad at ændre præsentationen af hjemmesiden.
3.1 Inline dansestile
Som nævnt ovenfor handler dette afsnit om formatering og stilarter. Da der er mange måder at ændre stilen på dit indhold og din side på, tænkte jeg, at det ville være godt at starte med den mest ligetil teknik, som er Inline stilarter. Dette udføres ved at placere koden i egenskabssektionen på en fane, der omfatter indholdet. Sådan her:
Lyder det for svært? Lad mig give dig et eksempel:
Bemærk: Farven er stavet farve når du bruger denne kode, da den blev oprettet et sted, der ikke er så cool som Australien eller Canada; Jeg håber ikke det generer dig for meget.
Informationen med fed skrift i eksemplet ovenfor er den formatering, der behandles på indholdet, der er omfattet af
tag. For en liste over hexadecimale koder for forskellige farver skal du blot søge på Google eller bruge dette websted: http://html-color- codes.com/
3.2 Embedded Style Sheets (cheat Sheets er gevinst)
Det kan være besværligt at bruge de inline-stile i det foregående afsnit, hvis du har et meget stort websted. Men hvis du vil bruge de samme stilarter igen og igen, hvorfor så ikke bruge en Indlejret Style Sheet? Dette alternativ giver dig mulighed for at skabe dine egne stilarter i
tag af koden og så henviser du til dem i koden, når du indsætter noget indhold på din side. For indviklet? Her er et eksempel:
Se, hvordan teksten ændrer farve, størrelse eller format afhængigt af typografiarket øverst? Dette er ikke meget svært at forstå vel?
I linje 7, hvor vi introducerer starten på
Linje 16 bruger .ekstra klasse, der blev lavet tidligere. Måden dette fungerer på er, at det tilføjer ekstra klasse til hvilken som helst stil, den åbnes på, hvorved eventuelle egenskaber, som ekstra klasse bruger. For eksempel: hvis en typografi har en skriftstørrelse på 20 pt og er farven grøn, og der sættes en klasse over på den, der har en anden skriftstørrelse, så vil den nye skriftstørrelse erstatte den gamle, men den gamle farve grøn fortsætter som det er.
3.3 Stilarter i krig (modstridende stilarter)
Der er tre niveauer af stilarter, og de er:
• Bruger (ser hjemmesiden)
• Forfatter (af hjemmesiden)
• Brugeragent (browser)
Stilene smelter sammen på en sådan måde, at der skabes det bedst mulige setup fra brugerens position. Følgende diagram viser hierarkiet af de tre niveauer:
3.4 Style Sheets fra hinsides (eksternt)
Synes du ikke, det ville være irriterende altid at skulle skrive det samme typografiark i hver ny kodningsfil? Der er en løsning: Eksterne Style Sheets. Du kan oprette en anden fil med det formål at bruge den til formatering; Det er en ".css" fil. For at bruge det i en anden fil skal du blot indtaste følgende uddrag:
Erstatte filnavn med navnet på din CSS-fil, og så er de forbundet. Sørg for, at din CSS-fil er i samme mappe som dine linkede fil(er).
Eksempel på CSS-fil:
Inden vi fortsætter, har jeg forsømt at nævne, hvad em gør. Ovenfor kan du se i sidste linje, at jeg har sat "ul ul { font-size: .8em; }” og det betyder, at skriftstørrelsen vil blive ændret til den relative .8 eller 80 % af den normale størrelse, som brugeren ønsker, at den skal bruge ved at bruge deres eget typografiark indlæst i deres browser. De fleste mennesker bruger ikke et brugerdefineret typografiark, så lad os ikke bekymre os om dette.
3.5 Positioneringselementer (hvor hen nu?)
Når du lægger et billede på en webside, ønsker du ikke rigtig, at det bare skal gå nogen steder. Vil du ikke have indflydelse på det? Nå, det er sådan du gør det, ja det er faktisk et eksempel, og jeg vil forklare det kort:
I linje 9 til 13 vil du bemærke, at det er en klasse med ID'et som fgpic og har et par egenskaber brugt i det. Det position egenskab er indstillet til absolut hvilket betyder, at uanset hvordan brugeren ændrer det, vil billedet blive, hvor din (forfatteren) placerer det med deres kode. Det top og venstre egenskaber angiver et punkt, hvor elementet (f.eks. billede/tekst) vil blive placeret. Det z-indeks ejendom er et meget kraftfuldt værktøj, fordi det indstiller niveauet for stabling som vist på skærmbilledet nedenfor:
Se hvordan baggrundsbilledet er bagerst med z-indeksværdien 1 og teksten foran med z-indeksværdien 3, mens forgrundsbilledet er i midten med z-indeksværdien 2. Får det til at se ret godt ud, hvis du spiller dine kort rigtigt
3.6 Pas på dine omgivelser (baggrund)
Hjemmesider ser godt ud med baggrunde, gør de ikke? Ville det ikke være rigtig kedeligt, hvis alle hjemmesider bare havde en hvid eller sort baggrund? Hvorfor ikke lægge et billede ind og ændre farven lidt? Der er et par egenskaber, som du kan bruge til at få baggrunden på din side til at skille sig lidt mere ud og give siden noget lys. Tag et kig på følgende kode og se, om du kan finde ud af, hvad de fremhævede egenskaber gør:
Har du fundet ud af, hvad det gør? Grundlæggende er baggrundsbilledet det, vi skal bruge i baggrunden, stien til billedet går i parentes/parentes som denne > url(HER). Du kan tænke på, at dette har z-indeksværdien 0, da det altid er helt bagerst på siden. Baggrundspositionen for billedet er sat til nederst til venstre, ret selvforklarende ikke? Dernæst er baggrundsbilledet blevet gentaget på tværs af sidens x-akse (repeat-x), og ikke kun det, men det er fastgjort til bunden af vinduet (baggrundsvedhæftning). Endelig er farven tilfældigt indstillet til hovedsageligt at være rød. Se resultatet nedenfor:
3.7 Hvor stor tror du? (dimensioner af elementer/tekstgrænser)
Hvis du tror, det er alt, hvad CSS har at tilbyde, tager du meget fejl. CSS-regler kan angive de faktiske dimensioner af hvert sideelement. Lad os tage eksemplet med en tekstboks. Vil du skrive noget tekst ind, der ikke går hele vejen hen over skærmen, eller måske lave en tekstboks, der kan rulles uden at flytte siden? Det er her du så skal være. Se skærmbilledet nedenfor for, hvad jeg lige har beskrevet:
Lad os nu se på koden bag kulisserne:
Bare en mindre bemærkning: Linje 6 tilføjer en marginal kant i bunden af hver af tekstboksene. Ret sejt, ikke? Men mere om grænser i næste afsnit.
3.8 Det, der foregår, kommer rundt (grænser)
Jeg tror ikke, det kræver en forklaring, men jeg giver alligevel en. Dybest set kan du sætte grænser omkring stort set alt, så lad os se på, hvordan man gør det. Så her er koden:
Her er, hvad koden gør, dybest set et udvalg af grænser, der omgiver navnet/navnene på den type kant, der bruges. Husk, at det modsatte af rille er ryg og det modsatte af indsat er forskudt.
3.9 Flydende og flydende elementer
Det er normalt ret kedeligt bare at se overskrift, så tekst, så overskrift og så tekst. Mens du ikke får det til at se lidt pænere ud? Der er en metode, der kan bruges kaldet flydende, og nu skal jeg vise dig, hvordan du gør netop det. Flydende giver dig mulighed for at flytte et element til den ene side af skærmen, mens andet indhold i dokumentet derefter flyder rundt om det flydende element. Det flydende element kunne være et billede eller en overskrift eller endda en anden tekstblok. Lad os nu se på, hvordan det ser ud:
Temmelig godt til en del situationer, nu er dette koden, der konstruerer dette design:
Er det ikke fantastisk, hvad du kan gøre, hvis du bare finder den rigtige metode?
3.10 Drop ikke menuen - eksempel
Hvis du overvejer at oprette en hjemmeside, har du højst sandsynligt brug for en menu, ikke? Dette er måske det rigtige sted for dig at tage hen, hvis du vil have noget, der ikke bare sidder der. Dynamiske elementer får websider til at se bedre ud og giver en bedre fornemmelse for det overordnede websted.
En af mine yndlingstyper af menuer må være en Drop down menu så lad os nu se på, hvordan man laver en ved at bruge CSS. Tjek koden nedenfor:
Jeg ved godt, at dette virker en smule skræmmende i starten, men hvis du er tålmodig og bare læser videre, forstår du hurtigt nok.
Linje 15 siger: når jeg har en <div> tag med klasse = "menu” og musen er svæveover det Skærm det bloker inde i den.
Linje 16-21 siger: når jeg har en <div> tag med klasse = "menu” og et <-en> tag og indstil derefter disse formater. Husk, at disse linjer vælger formatet for de skjulte menuknapper. Linje 9-14 indstiller formaterne for menuknappen til at rulle over for at vise resten af menuen.
Linje 22 siger: når jeg har en <div> tag med klasse = "menu” og et <-en> tag og jeg svæve over et af disse elementer, sæt derefter baggrundsfarve til en anden green.
Se det endelige produkt nedenfor:
3.11 Brugertypografiark (du er universets centrum)
Brugere kan definere deres egne bruger stilark at få sider til at se ud, som de vil have dem til. Bare for at skelne mellem Brugertypografiark og Forfatter Style Sheets. Brugerstile er eksterne typografiark, som brugerne selv kan oprette, som simpelthen udføres som CSS-filer uden det meste af kodningen. Her vil jeg vise dig en:
Var det ikke ekstremt simpelt?
Hvis du vil vide, hvordan du sætter dette op i din egen browser, skal du blot gå til Værktøjer >> Internetindstillinger >> Generelt >> Tilgængelighed >> Definer derefter din egen fil Forfatterstilarket er defineret inde i koden derimellem .
4. Mere information
4.1 Hvorfor bruge xHTML og co. over design og andre applikationer?
Før du ser på dette som fakta eller noget lignende, bør du vide, at dette simpelthen er et synspunkt, afhængigt af hvor du står og hvor teknisk indstillet du måtte være. Jeg nyder at bruge programmeringssprog til at fuldføre mine projekter, da det betyder, at du kan forstå, hvad der ligger bag designerne, hvorimod at bruge designapplikationer som f.eks. Adobe Dreamweaver og Microsoft FrontPage giver dig mulighed for at oprette din hjemmeside ved kun at bruge de værktøjer, der er tilgængelige på menuerne. Derfor er designapplikationerne begrænset til den menufunktion, du får. Afslutningsvis er det helt indlysende, at brug af programmeringssprog ville bygge hjemmesiden eller det færdige produkt ind noget langt mere tiltalende, da dets funktionalitet kun er begrænset af programmørens dygtighed med det angivne sprog (f.eks. JavaScript, CSS, xHTML). Jeg ved, at du sikkert tænker, at jeg er forudindtaget, men du bliver nødt til bare at prøve begge dele og beslutte, hvordan meget indsats, du vil lægge i dit arbejde, så vælg dine passende værktøjer for at komme til dit bestemmelsessted. Du kan endda vælge at bruge begge dele, da både Dreamweaver og FrontPage har en "kodningsvisning" og en "designvisning".
Der er andre måder, du kan oprette websteder på, som at bruge Joomla og WordPress.
4.2 Joomla
Joomla er et fantastisk Content Management System (CMS) med stor fleksibilitet og med en brugervenlig bruger grænseflade, som mange mennesker bliver skræmt over, når de indser, hvor mange muligheder og konfigurationer der er ledig. Joomla er en platform baseret på PHP og MySQL. Denne software er open source, som du kan få fra http://www.joomla.org/download.html
Hvis du vil have en dybdegående guide til Joomla, prøv denne guide fra MakeUseOf: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ Begynderguiden til JoomlaDenne guide vil lede dig igennem alt fra hvorfor du skal vælge Joomla og hvordan du installerer det på din webserver til hvordan du designer og tilpasser dit websted til din smag. Læs mere
4.3 WordPress
WordPress er et Content Management System (CMS), der giver brugerne mulighed for at oprette og vedligeholde en hjemmeside gennem en administrativ grænseflade, inklusive en automatisk genereret navigationsstruktur, uden at du behøver at kende HTML eller lære noget andet værktøj. WordPress er et stykke open source-software skabt af tusindvis af programmører over hele verden og lagt til det offentlige domæne, så du ikke skal betale for at bruge det. WordPress er en webbaseret applikation, skrevet i PHP og MySQL, designet til at køre på Linux-servere: PHP er et programmeringssprog til web applikationer, MySQL er en relationsdatabase (såsom MS Access), og Linux er et operativsystem til webservere – alle disse er også åbne kilde. WordPress er langt det mest populære CMS med over 200 millioner websteder på verdensplan i slutningen af 2009.
Yderligere læsning
- Top 11 HTML-tags, som enhver blogger og webstedsejer skal kende Top 11 HTML-tags, som enhver blogger og webstedsejer skal kendeWorld Wide Web kan mange sprog og er kodet i flere forskellige. Det ene sprog, der dog kan findes overalt og har eksisteret siden opfindelsen af websider, er... Læs mere
- 5 sjove ting at lave online med HTML5 5 sjove ting at lave online med HTML5HTML5 fortsætter med at gå fra styrke til styrke, hvor flere websteder skifter til den nye standard, der bringer multimedieindhold til nettet uden behov for plugins såsom Adobe Flash. Er det sprængt... Læs mere
- Kode til internettet med disse værktøjer lige i din browser Byg det: 11 geniale Chrome-udvidelser til webudviklereChrome er fantastisk til webudviklere på grund af dens pulje af udvidelser. Hvis du nogensinde planlægger at designe eller kode et websted, er her nogle vigtige værktøjer, som du bør installere med det samme. Læs mere
Vejledning Udgivet: juni 2011