Annonse
Innholdsfortegnelse
§1. Introduksjon
§2–Komme i gang med xHTML
§3–Design med CSS
§4–Mer informasjon
1. Introduksjon: Hva er xHTML?
Velkommen til XHTML-verdenen – Utvidbart Hypertext Markup Language – et markup-språk (ligner på programmering) som lar hvem som helst konstruere nettsider med mange forskjellige funksjoner. På mange måter er det hovedspråket på Internett.
Så hvorfor bryr vi oss?
Vel, har du aldri ønsket å ha din egen nettside? Eller lage ditt eget spill? Rollen til denne guiden er å gi deg en smak av denne mektige verdenen. Hvis du har noen tidligere programmeringserfaring, vil du finne dette lettere, selvfølgelig, enn om du akkurat har startet programmeringseventyret. Uansett håper jeg å forklare dette slik at selv en nybegynner kan forstå.
Vi bryr oss om xHTML fordi det er et sterkt utgangspunkt for å lære de grunnleggende byggesteinene til nettet. Sosiale nettverkssider som Facebook, MySpace og Twitter bruker et annet (server-side) programmeringsspråk kalt PHP, men det er en god idé å forstå det grunnleggende før du dykker med hodet først inn i programmeringen verden. Denne veiledningen handler om det grunnleggende.
Hvis du vil vite mer om hvordan Internett fungerer eller kanskje hvordan datanettverk fungerer med alt dette tekniske ting eller bare hvordan datamaskiner kan bygges, så prøv disse flotte guidene fra vennene dine på Benytte seg av:
//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Hvordan bygge din egen PCDet er veldig gledelig å bygge din egen PC; samt skremmende. Men selve prosessen er faktisk ganske enkel. Vi leder deg gjennom alt du trenger å vite. Les mer
//www.makeuseof.com/tag/everything-need-know-home-networking/ Alt du trenger å vite om hjemmenettverkÅ sette opp et hjemmenettverk er ikke så vanskelig som du tror det er. Les mer
//www.makeuseof.com/tag/guide-file-sharing-networks/ MakeUseOf-veiledningen for fildelingsnettverkHar du noen gang lurt på hva som er de største fildelingsnettverkene der ute? Hva er forskjellene mellom BitTorrent, Gnutella, eDonkey, Usenet osv.? Les mer
//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ Windows 7: Ultimate GuideHvis du er redd for å oppgradere fra Vista eller XP fordi du føler det er helt annerledes enn det du er vant til, bør du lese denne nye guiden. Les mer
//www.makeuseof.com/tag/download-how-the-internet-works/ Hvordan Internett fungererVi kan nå få tilgang til Internett fra våre hjemmedatamaskiner, kontor, bærbare datamaskiner og telefoner. Men mange mennesker er fortsatt ikke helt sikre på hva Internett er og hvordan det egentlig fungerer. Les mer
2. Komme i gang med xHTML
I dette kapittelet vil du lære hvordan du oppretter og tilpasser nettsteder på mange forskjellige måter, inkludert å lære hvordan du:
• Legg til bilder på nettsider.
• Opprett og bruk hyperkoblinger for å navigere på nettsider.
• Sett opp lister med informasjon ved hjelp av punktpunkter og slikt.
• Lage tabeller med rader og kolonner med tilfeldige data og kunne kontrollere formateringen av nevnte tabeller.
• Lag og bruk skjemaer som du faktisk kan ha litt interaksjon med.
• Gjør nettsider tilgjengelige for søkemotorer.
Alt dette vil bli gjort med xHTML-programmering. Tror ikke det? Les videre. Du vil bli overrasket over hvor mye du kan lære av en så kort guide.
Før vi faktisk kommer inn på "kodingsdelen" av denne veiledningen, trenger du noe programvare du kan bruke slik at du kan redigere, teste og i utgangspunktet utvikle programmene dine. Gå til www.dreamspark.com og få ett av følgende programmer GRATIS, forutsatt at du er student:
• Microsoft Visual Studio 2010
• Expression Studio 4
Hvis du ikke er student, kan du også bruke Notisblokk++, som du ganske enkelt kan komme fra www.notepad-plus-plus.org
Når du har fått et av programmene og installert det, kan du starte xHTML-opplevelsen.
Du bruker kanskje en Mac eller Linux i stedet for Windows; du må finne en tekstredigerer som fungerer for deg i så fall. Prøv å finne en som viser linjeantallet og fargekoden for deg.
• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ Leafpad - en ultralett tekstredigerer [Linux] Les mer
• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/ Geany - En flott lettvektskoderedigerer for LinuxOverraskende nok tilbyr ikke Linux så mange gode IDE-er (integrerte utviklingsmiljøer). Jeg tror dette er fordi de fleste Linux-programmerere på den tiden tok ut gode gamle Notisblokk (eller gedit i dette tilfellet), og startet... Les mer
Hvis du heller ikke vil laste ned noen dedikerte verktøy, kan du fortsatt bruke en tekstredigerer som Notisblokk eller Notisblokk. Imidlertid er de ovennevnte programmene langt bedre verktøy for testing og design, i tillegg til å hjelpe deg med kodingen din når den ber deg om du gjør en feil eller hvis du prøver å huske det riktige ordet til bruk. Enkelt er bedre, ikke sant? Jeg personlig bruker Notepad++ og Microsoft Visual Studio, selv om jeg har hørt mange gode ting om Expression Studio 4. Du må bestemme hva du liker best, men alle fungerer helt fint.
MERK: For å teste et nettsted opprettet fra Notisblokk eller Wordpad:
Med filen åpen, klikk Fil >> Lagre som
På slutten av filnavnet skriver du inn .html og klikk Lagre
Åpne den nylig lagrede filen (den åpnes i standard nettleser)
2.1 Bli kjent med "verden"
Greit, her er starten på reisen. La oss starte med å bare sette noe på skjermen på denne nettsiden. Først må du vite hva er. XHTML-kode bruker start- og sluttkoder for å sortere ut hva som skjer med hvert element på siden.
Her er et eksempel på en start-tag:
Her er et eksempel på en sluttkode:
Se forskjellen? Den ene har elementnavnet omsluttet av de spisse parentesene, og det andre er det samme, men har en skråstrek foran elementnavnet.
VIKTIG: Du må lukke en tag etter at du har åpnet den på et tidspunkt i koden. Også tagger må være nestet, det vil si at du ikke kan gjøre følgende:; det bør være. Ser du hvordan merkelappene passer inn i hverandre? Tenk på dem som bokser: du kan ikke legge noe solid i en og en halv boks.
Den beste måten å bli kjent med hvordan programmere er ved å faktisk gjøre det, så nok teori. Bare for et referansepunkt, skal jeg merke hver linje med kode med et tall slik at jeg kan forklare linje for linje hva som skjer.
I linje 1 har jeg oppgitt html-koden og i linje 5 har jeg avsluttet den. Inne i taggen er
). Hvis du åpner denne i en nettleser, vil du se følgende komme over skjermen:
Hvis du vil endre tittelen på siden fra nettleserens synspunkt (f. firstpage.html) så kan du enkelt legge til i følgende kodelinje:
Dette vil få nettsiden til å se mer profesjonell ut.
2.2 Starter fra og jobber nedover
I de fleste tilfeller inne i taggen er det en
og a .De brukes vanligvis for skripting i CSS (seksjon 3) og JavaScript (forklart i en kommende manual), mens er vanligvis innholdet på siden.
Noe innhold kan endres ved å bruke skriptet i
, men er vanligvis innholdet som ikke kan endres på siden. Et eksempel kan være en kort snakk om nettstedet du besøker.Du kan gjøre endringer i innholdets formatering ved å bruke CSS (del 3) i
. Du kan imidlertid også gjøre endringer i formateringen i .Et vanlig brukt sett med tagger som brukes i brødteksten, er overskriftsfontene. Disse overskriftsskriftene varierer i størrelse og styrke/fethet. Bare se selv nedenfor:
2.3 Er bildet ditt verdt tusen ord? - Bilder
Til nå har vi bare snakket om tekst og hva den kan gjøre på et nettsted, men det er fortsatt mer. Vil du få nettstedet ditt til å se enda mer fristende ut enn bare fancy fonter? Prøv å få noen gode bilder for å få nettstedet ditt til å virkelig gi publikum noe å se på. Vær imidlertid forsiktig med lover om opphavsrett; best å ta dine egne bilder hvis du har tenkt å legge ut nettstedet ditt på Internett.
Du må kanskje bruke Photoshop eller noen digitale bildeteknikker for å lage et flott bilde eller kanskje forbedre ditt eget bilde og få det til å se enda mer fantastisk ut. Prøv disse veiledningene for noen gode tips og innsikt:
• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Lær bilderedigering i Photoshop: Få det grunnleggende på 1 timePhotoshop er et skremmende program – men med bare én time kan du lære alt det grunnleggende. Ta et bilde du vil redigere, og la oss komme i gang! Les mer
• //www.makeuseof.com/tag/guide-to-digital-photography/ En nybegynnerguide til digital fotograferingDigital fotografering er en flott hobby, men det kan også være skremmende. Denne nybegynnerguiden vil fortelle deg alt du trenger å vite for å komme i gang! Les mer
De mest populære bildeformatene er følgende:
• GIF = Graphics Interchange Format
• JPEG = Joint Photographic Experts Group
• PNG = Portable Network Graphics
Ta en titt på koden nedenfor, så skal jeg forklare hva det betyr; det vil si hvordan du legger til bilder på nettsiden din.
Som det ble lært i tidligere seksjoner starter vi alltid med og co-tagger. Neste
Etter at avsnittet er åpnet i linje 9, er det her bildene settes inn på nettsiden. For å legge til et bilde/bilde bør du bruke til å begynne med. Deretter må du foreslå hvor filen er. Vanligvis vil du prøve å ha denne filen i samme mappe som nettstedfilene, ellers må du angi mappebanen som den finnes i. I tilfellet ovenfor har jeg brukt
. Dette betyr at kilden (src) av bildet ligger i samme mappe og navnet på den bildefilen er Bilde.jpg. Enkelt ikke sant?
Du trenger ikke legge til noe mer enn å lage et bilde med en alt egenskap, men du kan legge til egenskaper for å gjøre noen endringer i den.
Også kjent som alt tekst, vises denne egenskapsverdien når du holder musepekeren over bildet.
Du legger kanskje merke til at i linje 10 har jeg startet taggen med og avsluttet det med />. Dette er en annen måte å åpne og lukke tagger på. Dette er den vanlige måten å lage bilder på fordi du kan velge de forskjellige egenskapene til bildet som bredde og høyde som vist i eksempelet ovenfor.
I linjene 11 og 12 er et annet bilde satt inn, men dette bruker den andre metoden for å åpne og lukke tagger. Linje 10 skaper bildet på en mye penere måte; bruk det i stedet for metoden i linje 11 og 12.
2.4 Hyperkoblinger hvor kan de gå?
2.4.1 Flytte rundt i "verden"
Vil du vise vennene dine noen kule sider på nettstedet ditt, men vet ikke hvordan? Du har kommet til rett sted, les videre...
Ta en titt på koden nedenfor og se om du kan gjette hva jeg gjør før jeg forklarer det.
Det stemmer, jeg lager hyperkoblinger til noen flotte og nyttige nettsteder. For å hyperlenke til en bestemt nettside som har en nettadresse bruker du ganske enkelt syntaksen nedenfor:
[hva du vil ha hyperkobling]
Ser ikke veldig vanskelig ut? Du kan ganske enkelt bare legge inn tekst der som eksempelkoden ovenfor. Det er imidlertid ingen grunn til at du ikke kunne bruke noe annet som et bilde. Bare for litt ekstra informasjon: en URL er en Uniform Resource Locator, i utgangspunktet nettadressen.
2.4.2 Bilder minner deg om hvor du har vært og tar deg dit igjen
Her er et eksempel på bruk av et bilde som en hyperkobling:
Jeg er sikker på at hvis du leser de forrige delene av denne delen du slipper, er dette ganske enkelt å blande å lage bilder og hyperkoblinger. Syntaksen er satt til å ha hyperkoblingen på utsiden og bildet på innsiden, hvorved en hyperkobling av det innsatte bildet plasseres.
2.4.3 Du har e-post – Hyperkobling til en e-postadresse
Dette er ganske enkelt en repetisjon av den siste delen, men hvis du ikke har fulgt så mye med, er det bare å ta en titt på koden nedenfor:
I stedet for å bruke en URL (f.eks. http://www.something.com) her bruker jeg en e-postadresse som innebærer å sette følgende syntaks etter likhetstegnet:
"mailto:[din e-postadresse]"
Linje 10 er det grunnleggende eksempelet på dette konseptet. Så hvem skal du sende e-post til? Ghostbusters!
2.4.4 Komme seg rundt i verden – Intern hyperkobling
Nå kan du se hvordan du kommer deg rundt på din egen nettside. Dette gjøres ganske enkelt ved å bruke filnavnet som URL. Derfor kan du ha et oppsett av nettsteder som vist i diagrammet nedenfor. Syntaksen du vil bruke vil se omtrent slik ut:
2.5 Er du spesiell? Disse karakterene er...
Når du skriver inn informasjon som skal vises på nettstedet som innhold, kan det hende du må sette inn noe som et symbol, for eksempel copyright-symbolet: © eller kanskje en mindre enn eller større enn symbol. Men siden de vanlige symbolene brukes av kodingssyntaksen, så måtte det være en annen måte å komme forbi dette lille hindring, og løsningen var å bruke et og-tegn (&) og så en kort kode etterpå for å fortelle datamaskinen hvilket symbol sette inn. Nedenfor er en tabell med noen få eksempler på spesialtegn fra koding:
Du kan for eksempel si:
Det er < seks rader i tabellen ovenfor, men > 2 rader
Det er < 6 rader i tabellen ovenfor, men > 2 rader
2.6 Lister, lister og flere lister
Ok nå må vi organisere noen få ting, som en handleliste. Det er to typer lister. De er:
• Ordnet liste (tall, alfabeter, romertall)
• Uordnet liste (punkter)
For en ordnet liste vil du bruke følgende tagger =
For en uordnet liste vil du bruke følgende tagger =
For eksempel:
I eksemplet ovenfor inkluderte jeg både uordnede og ordnede listetyper. Men la du merke til hva annet jeg gjorde? Jeg inkluderte også en teknikk kalt Nestede lister. Disse nestede listene kan brukes til å representere hierarkiske relasjoner, som listen over ingredienser i Få ingredienser trinn i oppskriften ovenfor.
Du ser kanskje at jeg startet hele listen som en bestilt liste på linje 10 og fullførte den på linje 23. I mellom vil du se og tagger jeg har brukt. Disse angir Liste elementer. Listeelementene er ordene som vises som i linje 21:
Hvis du vil gå til det neste hierarkiske nivået med punktpunkter eller tall, kan du hekke inni seg selv slik:
2.7 Tabeller... nei ikke matematikk
Er dette like vanskelig som multiplikasjonstabellene dine? Selvfølgelig ikke, hvis du gjør det på riktig måte. Hvis du nettopp har begynt med dette konseptet og jeg antar at du er det, er det vanligvis best å tegne bordet du vil lage på et stykke papir som jeg har nedenfor:
Se nå på det i koden nedenfor:
Bland dem sammen og visningen nedenfor skal hjelpe deg å forstå hvordan tabellen er strukturert:
EN
og
fet første og siste rad for å trekke mer oppmerksomhet til de delene av tabellen. De fleste vil vel se på totalen i bunnteksten på tabellen først?2.8 digitale skjemaer (penner unna)
Når du surfer på nettet, må du samhandle med nettsidene du møter. For eksempel, på www.makeuseof.com må du skrive inn e-postadressen din som omringet nedenfor til abonner på nyhetsbrevet og daglige oppdateringer fra MakeUseOf. Etter at du har skrevet inn e-postadressen din ville trykke Bli med og dette vil sende informasjonen (e-posten din) i tekstboksen ved siden av knappen til enten en database eller kanskje en annen e-postadresse. Skjemaer brukes til å gjøre dette, noe du vil lære i dette kapittelet.
Nedenfor er et skjema som brukes til å sette bare navnet ditt inn og klikke enten Sende inn eller Klar:
Her er koden fra bak kulissene, som jeg vil forklare dette mer detaljert snart:
For det første er det viktigste i manuset ovenfor linje 10. Dette er starten på skjemaet. Metoden er vanligvis enten post eller få. Ganske selvforklarende, men post sender informasjonen et sted for å lage en registrering, for eksempel en e-postadresse eller database. For eksempel: legge ut et spørsmål på MakeUseOf Answers. Få, på den annen side, sender informasjonen du har gitt og returnerer med tilbakemeldingsinformasjon, for eksempel en søkemotor, sender søkeordene og returnerer med resultatene.
Kodeblokken ovenfor er et eksempel på et postskjema der du skriver inn e-postadressen din og den vil bli sendt til den skjulte eiendommen med en e-postadresse etter å ha klikket på Send-knappen. De
Linje 22 – 25 plasserer Send og Tilbakestill/Slett-knappene på siden under tekstboksen. De Nullstille knappen sletter ganske enkelt all tekst som er skrevet inn i tekstboksen eller boksene i det skjemaet. De Sende inn knappen følger instruksjoner fra de skjulte delene av skjemaet som er opprettet på linje 14 – 18. Den skjulte typen vil vanligvis anta for noe automatisk eller en del av noe annet som brukes i gjeldende form. I dette tilfellet er det sistnevnte som gir posted informasjon en destinasjon, i dette tilfellet [email protected], med emnet satt, i denne tilfellet "Abonner på e-post", og omdirigerer deg deretter til en annen side, i dette tilfellet hovedsiden eller "indeks.html".
2.9 meta hva? Hvorfor?
Har du noen gang lurt på hvordan søkemotorer finner nettsteder? Vel, i utgangspunktet er dette hva de bruker: metaelementer. Søkemotorer katalogiserer vanligvis nettsteder ved å følge lenker til sider på nettsteder de finner. Disse metaelementene har informasjon om siden på seg. Ta en titt på følgende utdrag fra en kode for et eksempel:
Som du kan se ovenfor, går metainformasjonen i
3. Design med CSS
Mesteparten av tiden liker folk som ser på guider som disse bare å spille videospill. CSS er imidlertid ikke Counter Strike Source, og det er heller ikke et First Person Shooter (FPS) i det hele tatt. CSS er en teknologi som fungerer med xHTML, og står for Cascading Style Sark. xHTML er ganske kjedelig i seg selv, men hvis du legger til en rettferdig servering av CSS, er formateringen og presentasjonen av kreasjonen din langt mer interessant. Forfattere kan gjøre endringer i elementer på en nettside som fonter, mellomrom, farger; dette gjøres separat fra dokumentstrukturen (hode, kropp, etc.; dette vil bli forklart i senere kapitler). xHTML ble faktisk designet for å spesifisere innholdet og strukturen til et dokument. Det er ikke slik at xHTML ikke kunne gjøre endringer i formateringen av innholdet. Imidlertid er dette oppsettet langt mer fordelaktig ettersom det kan kontrolleres fra ett sted om nødvendig. For eksempel, hvis formatet til et nettsted helt og holdent bestemmes av et vedlagt stilark, kan en nettdesigner ganske enkelt sette på plass et annet stilark for å endre presentasjonen av nettstedet kraftig.
3.1 Inline dansestiler
Som nevnt ovenfor handler denne delen om formatering og stiler. Siden det er mange måter å endre stilen på innholdet og siden din, tenkte jeg at det ville være greit å starte med den mest rett frem teknikken som er Inline stiler. Dette utføres ved å plassere koden i egenskapsdelen av en fane som omfatter innholdet. Som dette:
Høres det for vanskelig ut? La meg gi deg et eksempel:
Merk: Fargen er stavet farge når du bruker denne koden siden den ble opprettet et sted som ikke er så kult som Australia eller Canada; Jeg håper det ikke plager deg for mye.
Informasjonen med fet skrift i eksemplet ovenfor er formateringen som blir behandlet på innholdet som er omfattet av
stikkord. For en liste over heksadesimale koder for forskjellige farger, søk bare på Google eller bruk denne siden: http://html-color- codes.com/
3.2 Innebygde stilark (jukseark er vinn)
Å bruke de innebygde stilene i forrige seksjon kan være vanskelig hvis du har et veldig stort nettsted. Men hvis du vil bruke de samme stilene om og om igjen, hvorfor ikke bruke en Innebygd stilark? Dette alternativet lar deg lage dine egne stiler i
taggen til koden og så refererer du til dem i koden når du setter inn noe innhold på siden din. For komplisert? Her er et eksempel:
Se hvordan teksten endrer farge, størrelse eller format avhengig av stilarket øverst? Dette er vel ikke så vanskelig å forstå?
I linje 7 der vi introduserer starten på
Linje 16 bruker .ekstra klasse som ble laget tidligere. Måten dette fungerer på er at det legger til ekstra klasse til hvilken stil den er åpnet på, og overskriver eventuelle egenskaper som ekstra klasse bruker. For eksempel: hvis en stil har en skriftstørrelse på 20 pkt og er fargen grønn, og en klasse settes over på den som har en annen skriftstørrelse, vil den nye skriftstørrelsen erstatte den gamle, men den gamle grønnfargen fortsetter som den er.
3.3 Stiler i krig (motstridende stiler)
Det er tre nivåer av stiler, og de er:
• Bruker (viser nettstedet)
• Forfatter (av nettstedet)
• Brukeragent (nettleser)
Stilene smelter sammen på en slik måte at det skaper et best mulig oppsett fra brukerens posisjon. Følgende diagram viser hierarkiet for de tre nivåene:
3.4 Stilark fra hinsides (eksternt)
Synes du ikke det ville være irriterende å alltid måtte skrive ut det samme stilarket i hver nye kodefil? Det er en løsning: Eksterne stilark. Du kan lage en annen fil med det formål å bruke den til formatering; det er en ".css" fil. For å bruke den i en annen fil, skriv inn følgende utdrag:
Erstatte filnavn med navnet på CSS-filen din, og så er de koblet. Sørg for at CSS-filen din er i samme mappe som den(e) koblede filen(e).
Eksempel på CSS-fil:
Før vi fortsetter har jeg unnlatt å nevne hva em gjør. Over ser du i siste linje at jeg har satt «ul ul { font-size: .8em; }” og dette betyr at skriftstørrelsen vil bli endret til den relative .8 eller 80 % av den normale størrelsen som brukeren vil at den skal være ved å bruke sitt eget stilark lastet inn i nettleseren. De fleste bruker ikke et brukerdefinert stilark, så la oss ikke bekymre oss for dette.
3.5 Plasseringselementer (hvor skal neste?)
Når du legger et bilde på en nettside, vil du egentlig ikke at det bare skal gå hvor som helst. Vil du ikke si noe om det? Vel, dette er hvordan du gjør det, vel det er faktisk et eksempel, og jeg skal forklare det kort:
På linje 9 til 13 vil du legge merke til at det er en klasse med ID som fgpic og har noen få egenskaper brukt i den. De posisjon egenskapen er satt til absolutt som betyr at uansett hvordan brukeren endrer det, vil bildet forbli der din (forfatteren) plasserer det med koden deres. De topp og venstre egenskaper angir et punkt der elementet (f.eks. bilde/tekst) vil bli plassert. De z-indeks eiendom er et veldig kraftig verktøy fordi det setter stablingsnivået som vist på skjermbildet nedenfor:
Se hvordan bakgrunnsbildet er bak med z-indeksverdien 1 og teksten foran med z-indeksverdien 3, mens forgrunnsbildet er i midten med z-indeksverdien 2. Får det til å se ganske bra ut faktisk hvis du spiller kortene dine riktig
3.6 Pass på omgivelsene dine (bakgrunn)
Nettsteder ser bra ut med bakgrunn, gjør de ikke? Ville det ikke vært veldig kjedelig hvis alle nettsteder bare hadde en hvit eller svart bakgrunn? Hvorfor ikke legge inn et bilde der og endre fargen litt? Det er noen få egenskaper du kan bruke for å få bakgrunnen til siden din til å skille seg ut litt mer og gi siden litt flair. Ta en titt på følgende kode og se om du kan finne ut hva de uthevede egenskapene gjør:
Fant du ut hva den gjør? I utgangspunktet er bakgrunnsbildet det vi skal bruke i bakgrunnen, banen til bildet går i parentes/parentes som dette > url(HER). Du kan tenke på at dette har z-indeksverdien 0 siden den alltid er helt bakerst på siden. Bakgrunnsposisjonen til bildet er satt nederst til venstre, ganske selvforklarende ikke sant? Deretter har bakgrunnsbildet blitt gjentatt over x-aksen på siden (repeat-x) og ikke bare det, men det er festet til bunnen av vinduet (bakgrunnsvedlegg). Endelig er fargen tilfeldig satt til hovedsakelig å være rød. Ta en titt nedenfor for resultatet:
3.7 Hvor stor tror du? (dimensjoner på elementer/tekstgrenser)
Hvis du tror det er alt CSS har å tilby, tar du veldig feil. CSS-regler kan spesifisere de faktiske dimensjonene til hvert sideelement. La oss ta eksemplet med en tekstboks. Vil du skrive inn litt tekst som ikke går hele veien over skjermen, eller kanskje lage en tekstboks som kan rulles uten å flytte siden? Det er her du bør være da. Se skjermbildet nedenfor for det jeg nettopp har beskrevet:
La oss nå ta en titt på koden bak kulissene:
Bare en liten merknad: linje 6 legger til en marginal kant på bunnen av hver av tekstboksene. Ganske kult, ikke sant? Men mer om grenser i neste avsnitt.
3.8 Det som går rundt kommer rundt (grenser)
Jeg tror ikke dette trenger en forklaring, men jeg skal gi en likevel. I utgangspunktet kan du sette grenser rundt stort sett alt, så la oss ta en titt på hvordan du gjør det. Så her er koden:
Her er hva koden gjør, i utgangspunktet et utvalg av grenser som omgir navnet/navnene på typen kant som brukes. Husk at det motsatte av sporet er rille og det motsatte av innfelt er utsett.
3.9 Flytende og flytende elementer
Det er vanligvis ganske kjedelig bare å se overskrift, så tekst, så overskrift og så tekst. Mens du ikke får det til å se litt penere ut? Det er en metode som kan brukes kalt flytende, og nå skal jeg vise deg hvordan du gjør nettopp det. Flytende lar deg flytte et element til den ene siden av skjermen mens annet innhold i dokumentet deretter flyter rundt det flytende elementet. Det flytende elementet kan være et bilde eller en overskrift eller til og med en annen tekstblokk. La oss nå se på hvordan det ser ut:
Ganske bra for ganske mange situasjoner, nå er dette koden som konstruerer dette designet:
Er det ikke utrolig hva du kan gjøre hvis du bare finner den riktige metoden?
3.10 Ikke rull ned menyen – eksempel
Hvis du tenker på å lage et nettsted, trenger du mest sannsynlig en meny, ikke sant? Vel, dette kan være det rette stedet for deg å gå hvis du vil ha noe som ikke bare sitter der. Dynamiske elementer får nettsider til å se bedre ut og gir en bedre følelse til hele nettstedet.
En av mine favoritttyper menyer må være en nedtrekksmenyen så la oss nå se på hvordan du lager en ved å bruke CSS. Sjekk ut koden nedenfor:
Jeg vet at dette virker litt skremmende i begynnelsen, men hvis du er tålmodig og bare leser videre, vil du snart forstå det.
Linje 15 sier: når jeg har en <div> tag med klasse = "Meny” og musen er sveveover det vise de blokkereer inne i den.
Linje 16-21 sier: når jeg har en <div> tag med klasse = "Meny” og en <en> tag og angi disse formatene. Husk at disse linjene velger formatet for de skjulte menyknappene. Linje 9-14 setter opp formatene for menyknappen for å rulle over for å vise resten av menyen.
Linje 22 sier: når jeg har en <div> tag med klasse = "Meny” og en <en> tag og jeg sveve over ett av disse elementene, sett deretter bakgrunnsfarge til en annen green.
Ta en titt nedenfor for sluttproduktet:
3.11 Brukerstilark (du er universets sentrum)
Brukere kan definere sine egne brukerstilark for å få sidene til å se ut som de vil. Bare for å skille mellom Brukerstilark og Forfatter stilark. Brukerstiler er eksterne stilark som brukere kan lage selv, som ganske enkelt gjøres som CSS-filer uten det meste av kodingen. Her skal jeg vise deg en:
Var ikke det ekstremt enkelt?
Hvis du vil vite hvordan du setter opp dette i din egen nettleser, går du ganske enkelt til Verktøy >> Internett-alternativer >> Generelt >> Tilgjengelighet >> Definer deretter din egen fil Forfatterstilarket er definert i koden i mellom .
4. Mer informasjon
4.1 Hvorfor bruke xHTML og co. over design og andre applikasjoner?
Før du ser på dette som fakta eller noe lignende, bør du vite at dette rett og slett er et synspunkt avhengig av hvor du står og hvor teknisk tenkende du kan være. Jeg liker å bruke programmeringsspråk for å fullføre prosjektene mine, da det betyr at du kan forstå hva som ligger bak designene, mens jeg bruker designapplikasjoner som Adobe Dreamweaver og Microsoft FrontPage lar deg lage nettstedet ditt ved å bruke bare verktøyene som er tilgjengelige på menyene. Derfor er designapplikasjonene begrenset til menyvalget du får. Avslutningsvis er det helt åpenbart at bruk av programmeringsspråk vil bygge nettstedet eller det ferdige produktet inn i noe langt mer tiltalende siden funksjonaliteten bare begrenses av programmererens ferdigheter med det angitte språket (f.eks. JavaScript, CSS, xHTML). Jeg vet at du sannsynligvis tenker at jeg er partisk, men du må bare prøve begge deler og bestemme hvordan mye innsats du vil legge ned i arbeidet ditt, og velg deretter de riktige verktøyene for å komme til ditt mål. Du kan til og med velge å bruke begge siden både Dreamweaver og FrontPage har en "kodingsvisning" og en "designvisning".
Det er andre måter du kan lage nettsteder på, som å bruke Joomla og WordPress.
4.2 Joomla
Joomla er et flott innholdsstyringssystem (CMS) med mye fleksibilitet og med en brukervennlig bruker grensesnitt som mange mennesker blir skremt av når de innser hvor mange alternativer og konfigurasjoner det er tilgjengelig. Joomla er en plattform basert på PHP og MySQL. Denne programvaren er åpen kildekode som du kan få fra http://www.joomla.org/download.html
Hvis du vil ha en grundig guide om Joomla, prøv denne guiden fra MakeUseOf: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ Nybegynnerguiden til JoomlaDenne guiden vil lede deg gjennom alt fra hvorfor du skal velge Joomla og hvordan du installerer det på nettserveren din til hvordan du designer og tilpasser nettstedet ditt til din smak. Les mer
4.3 WordPress
WordPress er et Content Management System (CMS) som lar brukere opprette og vedlikeholde et nettsted gjennom en administrativ grensesnitt, inkludert en automatisk generert navigasjonsstruktur, uten å måtte kunne HTML eller lære noe annet verktøy. WordPress er et stykke åpen kildekode-programvare laget av tusenvis av programmerere over hele verden og lagt til det offentlige domene, så du trenger ikke å betale for å bruke det. WordPress er en nettbasert applikasjon, skrevet i PHP og MySQL, designet for å kjøre på Linux-servere: PHP er et programmeringsspråk for web applikasjoner, MySQL er en relasjonsdatabase (som MS Access), og Linux er et operativsystem for webservere – alle disse er også åpne kilde. WordPress er uten tvil det mest populære CMS-systemet med over 200 millioner nettsteder over hele verden i slutten av 2009.
Ytterligere lesing
- Topp 11 HTML-tagger alle bloggere og nettstedeiere må kjenne til Topp 11 HTML-tagger alle bloggere og nettstedeiere må kjenne tilWorld Wide Web kan mange språk og er kodet i flere forskjellige. Det ene språket som imidlertid finnes overalt og har eksistert siden oppfinnelsen av nettsider, er... Les mer
- 5 morsomme ting å gjøre på nettet med HTML5 5 morsomme ting å gjøre på nettet med HTML5HTML5 fortsetter å gå fra styrke til styrke, med flere nettsteder som bytter til den nye standarden som bringer multimedieinnhold til nettet uten behov for plugins som Adobe Flash. Er det sprengt... Les mer
- Kode for nettet med disse verktøyene rett i nettleseren din Bygg det: 11 strålende Chrome-utvidelser for nettutviklereChrome er flott for nettutviklere på grunn av sin samling av utvidelser. Hvis du noen gang planlegger å designe eller kode et nettsted, her er noen viktige verktøy som du bør installere med en gang. Les mer
Veiledning Publisert: juni 2011
