Annons
Innehållsförteckning
§1. Introduktion
§2–Komma igång med xHTML
§3–Design med CSS
§4–Mer information
1. Introduktion: Vad är xHTML?
Välkommen till XHTML-världen – Extensible Hypertext Markup Language – ett märkningsspråk (liknande programmering) som gör att vem som helst kan bygga webbsidor med många olika funktioner. På många sätt är det det primära språket på Internet.
Så varför bryr vi oss?
Tja, har du aldrig velat ha en egen webbplats? Eller göra ditt eget spel? Den här guidens roll är att ge dig en smak av denna mäktiga värld. Om du har någon tidigare programmeringserfarenhet kommer du förstås att tycka att detta är lättare än om du precis har börjat ditt programmeringsäventyr. Hur som helst, jag hoppas kunna förklara detta så att även en nybörjare kan förstå.
Vi bryr oss om xHTML eftersom det är en stark utgångspunkt för att lära oss webbens grundläggande byggstenar. Sociala nätverkssajter som Facebook, MySpace och Twitter använder ett annat programmeringsspråk (serversidan). kallas PHP, men det är en bra idé att förstå grunderna innan du dyker in i programmeringen värld. Den här guiden handlar om grunderna.
Om du vill veta mer om hur Internet fungerar eller kanske hur datornätverk fungerar med allt detta tekniska grejer eller till och med bara hur datorer kan byggas så prova dessa fantastiska guider från dina vänner på Använda:
//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Hur man bygger din egen datorDet är mycket glädjande att bygga sin egen PC; samt skrämmande. Men själva processen är faktiskt ganska enkel. Vi går igenom allt du behöver veta. Läs mer
//www.makeuseof.com/tag/everything-need-know-home-networking/ Allt du behöver veta om hemnätverkAtt sätta upp ett hemnätverk är inte så svårt som du tror att det är. Läs mer
//www.makeuseof.com/tag/guide-file-sharing-networks/ MakeUseOf-guiden för fildelningsnätverkHar du någonsin undrat vilka är de största fildelningsnätverken där ute? Vilka är skillnaderna mellan BitTorrent, Gnutella, eDonkey, Usenet etc.? Läs mer
//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ Windows 7: Ultimate GuideOm du är rädd för att uppgradera från Vista eller XP för att du känner att det är helt annorlunda mot vad du är van vid bör du läsa den här nya guiden. Läs mer
//www.makeuseof.com/tag/download-how-the-internet-works/ Hur Internet fungerarVi kan nu komma åt Internet från våra hemdatorer, kontor, bärbara datorer och våra telefoner. Men många människor är fortfarande inte helt säkra på vad Internet är och hur det verkligen fungerar. Läs mer
2. Komma igång med xHTML
I det här kapitlet kommer du att lära dig hur du skapar och anpassar webbplatser på många olika sätt, inklusive hur du:
• Lägg till bilder på webbsidor.
• Skapa och använd hyperlänkar för att navigera på webbsidor.
• Skapa listor med information med hjälp av punktpunkter och sådant.
• Skapa tabeller med rader och kolumner med slumpmässiga data och kunna styra formateringen av nämnda tabeller.
• Skapa och använd formulär som du faktiskt kan interagera med.
• Gör webbsidor tillgängliga för sökmotorer.
Allt detta kommer att göras med xHTML-programmering. tror inte det? Läs vidare. Du skulle bli förvånad över hur mycket du kan lära dig av en så kort guide.
Innan vi faktiskt kommer in på "kodningsdelen" av den här guiden behöver du lite mjukvara att använda så att du kan redigera, testa och i princip utveckla dina program. Gå till www.dreamspark.com och få ett av följande program GRATIS, förutsatt att du är student:
• Microsoft Visual Studio 2010
• Expression Studio 4
Om du inte är student kan du också använda Anteckningar++, som du ganska lätt kan komma ifrån www.notepad-plus-plus.org
När du har fått ett av programmen och installerat det kan du starta din xHTML-upplevelse.
Du kanske använder en Mac eller Linux istället för Windows; du måste hitta en textredigerare som fungerar för dig i så fall. Försök att hitta en som visar ditt antal rader och färgkoder åt dig.
• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ Leafpad - en ultralätt textredigerare [Linux] Läs mer
• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/ Geany - En bra lättviktskodredigerare för LinuxÖverraskande nog erbjuder Linux inte så många bra IDE (Integrated Development Environments). Jag tror att detta beror på att de flesta Linux-programmerare på den tiden tog fram gamla goda Anteckningar (eller gedit i det här fallet) och började... Läs mer
Om du hellre inte vill ladda ner några dedikerade verktyg kan du fortfarande använda en textredigerare som Anteckningsblock eller Anteckningsblock. Ovanstående program är dock mycket bättre verktyg för att testa och designa, samt hjälpa dig med din kodning som den uppmanar dig om du gör ett misstag eller om du försöker komma ihåg det korrekta ordet till använda sig av. Enkelt är bättre, eller hur? Jag använder personligen Notepad++ och Microsoft Visual Studio, även om jag har hört många bra saker om Expression Studio 4. Du måste bestämma vad du gillar bäst, men alla fungerar bra.
NOTERA: För att testa en webbplats skapad från Anteckningar eller Wordpad:
Med filen öppen klickar du Arkiv >> Spara som
I slutet av filnamnet skriv in .html och klicka Spara
Öppna den nyligen sparade filen (den kommer att öppnas i din standardwebbläsare)
2.1 Lär känna "världen"
Okej, här är början på resan. Låt oss börja med att bara sätta upp något på skärmen på den här webbsidan. Först måste du veta vad är. XHTML-kod använder start- och sluttaggar för att reda ut vad som händer med varje element på sidan.
Här är ett exempel på en starttagg:
Här är ett exempel på en sluttagg:
Se skillnaden? Den ena har elementnamnet inom de spetsiga parenteserna och det andra är detsamma men har ett snedstreck före elementnamnet.
VIKTIG: Du måste stänga en tagg efter att du öppnat den någon gång i koden. Taggar måste också vara kapslade, det vill säga att du inte kan göra följande:; det borde vara. Ser du hur taggarna passar inuti varandra? Tänk på dem som lådor: du kan inte lägga något fast i en och en halv låda.
Det bästa sättet att lära känna hur man programmerar är att faktiskt göra det, så nog med teori. Bara för en referenspunkt kommer jag att märka varje kodrad med ett nummer så att jag kan förklara rad för rad vad som händer.
På rad 1 har jag angett html-koden och på rad 5 har jag avslutat den. Inuti taggen är
). Om du öppnar detta i en webbläsare kommer du att se följande komma över skärmen:
Om du vill ändra titeln på sidan från webbläsarens synvinkel (t.ex. firstpage.html) så kan du enkelt lägga till i följande kodrad:
Detta kommer att få din webbsida att se mer professionell ut.
2.2 Med utgångspunkt från och arbetar ner
I de flesta fall inuti tagg det finns en
och a .De används vanligtvis för skript i CSS (avsnitt 3) och JavaScript (förklaras i en kommande manual), medan är vanligtvis sidans innehåll.
En del innehåll kan ändras med hjälp av skriptet i
, men är vanligtvis innehållet som är oföränderligt på sidan. Ett exempel skulle vara ett kort snack om webbplatsen du besöker.Du kan göra ändringar i innehållets formatering med CSS (avsnitt 3) i
. Men du kan också göra ändringar i formateringen i .En vanlig uppsättning taggar som används i brödtexten är header-teckensnitten. Dessa rubrikteckensnitt varierar i storlek och styrka/fethet. Se bara själv nedan:
2.3 Är din bild värd mer än tusen ord? - Bilder
Hittills har vi bara pratat om text och vad den kan göra på en webbplats, men det finns fortfarande mer. Vill du få din webbplats att se ännu mer lockande ut än bara snygga typsnitt? Försök att få några bra bilder för att få din webbplats att verkligen ge publiken något att titta på. Var dock försiktig med upphovsrättslagar; bäst att ta dina egna bilder om du tänker lägga upp din webbplats på Internet.
Du kan behöva använda Photoshop eller några digitala bildtekniker för att skapa en fantastisk bild eller kanske förbättra din egen bild och få den att se ännu mer fantastisk ut. Prova dessa guider för några bra tips och insikter:
• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Lär dig fotoredigering i Photoshop: Lär dig grunderna på 1 timmePhotoshop är ett skrämmande program – men med bara en timme kan du lära dig alla grunderna. Ta ett foto som du vill redigera, så sätter vi igång! Läs mer
• //www.makeuseof.com/tag/guide-to-digital-photography/ En nybörjarguide till digital fotograferingDigital fotografering är en stor hobby, men det kan också vara skrämmande. Den här nybörjarguiden kommer att berätta allt du behöver veta för att komma igång! Läs mer
De mest populära bildformaten är följande:
• GIF = Graphics Interchange Format
• JPEG = Joint Photographic Experts Group
• PNG = Portable Network Graphics
Ta en titt på koden nedan så ska jag förklara vad det betyder; det vill säga hur du lägger till bilder på din webbsida.
Som vi har lärt oss i tidigare avsnitt börjar vi alltid med och co-taggar. Nästa
Efter att stycket har öppnats på rad 9 är det här bilderna infogas på webbplatsen. För att lägga till en bild/bild bör du använda till att börja med. Därefter måste du föreslå var filen är. Vanligtvis skulle du försöka ha den här filen i samma mapp som webbplatsfilerna, annars måste du ange mappsökvägen som den finns i. I fallet ovan har jag använt
. Det betyder att källan (src) av bilden finns i samma mapp och namnet på den bildfilen är Bild.jpg. Lätt eller hur?
Du behöver inte lägga till något mer än att skapa en bild med en alt egenskap men du kan lägga till egenskaper till den för att göra några ändringar i den.
Också känd som alt text, detta egenskapsvärde visas när du för musen över bilden.
Du kanske märker att på rad 10 har jag börjat taggen med och avslutade det med />. Detta är ett annat sätt att öppna och stänga taggar. Det här är det vanliga sättet att skapa bilder eftersom du kan välja bildens olika egenskaper som bredd och höjd som visas i exemplet ovan.
På raderna 11 och 12 infogas en annan bild men detta använder den andra metoden för att öppna och stänga taggar. Rad 10 skapar bilden på ett mycket snyggare sätt; använd det istället för metoden på rad 11 och 12.
2.4 Hyperlänkar vart kan de gå?
2.4.1 Flytta runt "världen"
Vill du visa dina vänner några coola sajter på din webbplats men vet inte hur? Du har kommit till rätt ställe, läs vidare...
Ta en titt på koden nedan och se om du kan gissa vad jag gör innan jag förklarar det.
Det stämmer, jag skapar hyperlänkar till några bra och användbara webbplatser. För att hyperlänka till en viss webbsida som har en webbadress använder du helt enkelt nedanstående syntax:
[vad du vill hyperlänka]
Det verkar inte särskilt svårt? Du kan ganska enkelt bara lägga in text där som exempelkoden ovan. Det finns dock ingen anledning till varför du inte skulle kunna använda något annat som en bild. Bara för lite extra information: en URL är en Uniform Resource Locator, i princip webbadressen.
2.4.2 Bilder påminner dig om var du har varit och tar dig dit igen
Här är ett exempel på hur en bild används som hyperlänk:
Jag är säker på att om du läser de tidigare delarna av det här avsnittet som du släpper att detta helt enkelt är att blanda att skapa bilder och hyperlänkar. Syntaxen är inställd på att ha hyperlänken på utsidan och bilden på insidan, varvid en hyperlänk av den infogade bilden placeras.
2.4.3 Du har e-post – Hyperlänkar till en e-postadress
Det här är helt enkelt en upprepning av den sista delen, men om du inte har uppmärksammat så mycket så titta bara på koden nedan:
Istället för att använda en URL (t.ex. http://www.something.com) här använder jag en e-postadress som innebär att följande syntax läggs efter likhetstecknet:
"mailto:[din e-postadress]"
Rad 10 är det grundläggande exemplet på detta koncept. Så vem ska du mejla? Spökjagare!
2.4.4 Ta sig runt i din värld – Intern hyperlänkning
Nu kan du se hur du skulle ta dig runt på din egen webbplats. Detta görs helt enkelt genom att använda ditt filnamn som URL. Därför kan du ha en uppsättning av webbplatser som visas i diagrammet nedan. Syntaxen du skulle använda skulle se ut ungefär så här:
2.5 Är du speciell? Dessa karaktärer är...
När du skriver in information som kommer att visas på webbplatsen som innehåll, kan du behöva göra det sätta in något som en symbol som copyright-symbolen: © eller kanske en mindre än eller större än symbol. Men eftersom de normala symbolerna används av kodningssyntaxen, måste det finnas ett annat sätt att komma förbi detta lilla hinder, och lösningen var att använda ett och-tecken (&) och sedan en kort kod efteråt för att tala om för datorn vilken symbol införa. Nedan finns en tabell med några exempel på specialtecken från kodning:
Du kan till exempel säga:
Det finns < sex rader i tabellen ovan, men > 2 rader
Det finns < 6 rader i tabellen ovan, men > 2 rader
2.6 Listor, listor och fler listor
Okej nu måste vi organisera några saker, som en inköpslista. Det finns två typer av listor. De är:
• Ordnad lista (siffror, alfabet, romerska siffror)
• Oordnad lista (punkter)
För en ordnad lista skulle du använda följande taggar =
För en oordnad lista skulle du använda följande taggar =
Till exempel:
I exemplet ovan inkluderade jag både oordnade och ordnade listtyper. Men märkte du vad jag gjorde mer? Jag inkluderade också en teknik som heter Kapslade listor. Dessa kapslade listor kan användas för att representera hierarkiska relationer, som listan över ingredienser i Få ingredienser steg i receptet ovan.
Du kanske ser att jag startade hela listan som en beställd lista på rad 10 och avslutade den på rad 23. Däremellan skulle du se och taggar jag har använt. Dessa betecknar Lista objekt. Listposterna är de ord som visas som i rad 21:
Om du vill gå till nästa hierarkiska nivå av punktpunkter eller siffror, häckar du in sig själv så här:
2.7 Tabeller... nej inte matematik
Är detta lika svårt som dina multiplikationstabeller? Naturligtvis inte, om du gör det på rätt sätt. Om du precis har börjat med det här konceptet och jag antar att du är det, är det vanligtvis bäst att rita bordet du vill göra på ett papper som jag har nedan:
Titta nu på det i koden nedan:
Blanda dem nu och displayen nedan bör hjälpa dig att förstå hur tabellen är uppbyggd:
A
och
feta den första respektive sista raden för att dra mer uppmärksamhet till de delarna av tabellen. De flesta skulle väl titta på summan i tabellens sidfot först?2.8 Digitala formulär (pennor borta)
När du surfar på nätet måste du interagera med webbsidorna du möter. Till exempel, på www.makeuseof.com skulle du behöva ange din e-postadress som inringats nedan för att prenumerera på nyhetsbrevet och dagliga uppdateringar från MakeUseOf. När du har angett din e-postadress du skulle trycka Ansluta sig och detta skulle skicka informationen (din e-post) i textrutan bredvid knappen till antingen en databas eller kanske en annan e-postadress. Blanketter används för att göra detta, vilket är vad du kommer att lära dig i det här kapitlet.
Nedan finns ett formulär som används för att bara skriva ditt namn och klicka på antingen Skicka in eller Klar:
Här är koden bakom kulisserna, som jag kommer att förklara mer i detalj inom kort:
För det första är det viktigaste i skriptet ovan rad 10. Detta är början på formuläret. Metoden är vanligtvis antingen posta eller skaffa sig. Ganska självförklarande, men posta skickar informationen någonstans för att registrera, till exempel en e-postadress eller databas. Till exempel: lägga upp en fråga på MakeUseOf Answers. Skaffa sig, å andra sidan, skickar informationen du har angett och återkommer med feedbackinformation, till exempel en sökmotor, skickar sökord och återkommer med resultaten.
Ovanstående kodningsblock är ett exempel på ett inläggsformulär där du skulle ange din e-postadress och det skulle skickas till den dolda egenskapen med en e-postadress efter att ha klickat på knappen Skicka. De
Raderna 22 – 25 placerar Skicka och Återställ/Rensa knapparna på sidan under textrutan. De Återställa knappen tar helt enkelt bort all text som skrivits in i textrutan eller rutorna i det formuläret. De Skicka in knappen följer instruktioner från de dolda delarna av formuläret som skapas på raderna 14 – 18. Den dolda typen skulle vanligtvis anta att något automatiskt eller en del av något annat används i den aktuella formen. I det här fallet är det den senare som ger postaed information en destination, i detta fall [email protected], med ämnesuppsättningen, i detta fall "Prenumerera e-post", och omdirigerar dig sedan till en annan sida, i detta fall huvudsidan eller "index.html".
2.9 meta vad? Varför?
Har du någonsin undrat hur sökmotorer hittar webbplatser? Tja, det här är vad de använder: metaelement. Sökmotorer katalogiserar vanligtvis webbplatser genom att följa länkar till sidor på webbplatser de hittar. Dessa metaelement har information om sidan på sig. Ta en titt på följande utdrag från någon kod för ett exempel:
Som du kan se ovan går metainformationen i
3. Designa med CSS
För det mesta råkar folk som tittar på guider som dessa bara gillar att spela tv-spel. CSS är dock inte Counter Strike Source, och inte heller en First Person Shooter (FPS) alls. CSS är en teknik som fungerar med xHTML, och står för Cstigande Style Slakan. xHTML är ganska tråkigt i sig, men om du lägger till en rättvis servering av CSS är formateringen och presentationen av din skapelse mycket mer intressant. Författare kan göra ändringar i element på en webbsida som typsnitt, mellanrum, färger; detta görs separat från dokumentstrukturen (huvud, kropp, etc.; detta kommer att förklaras i senare kapitel). xHTML designades faktiskt för att specificera innehållet och strukturen i ett dokument. Det är inte som att xHTML inte kunde göra ändringar i formateringen av innehållet. Den här inställningen är dock mycket mer fördelaktig eftersom den kan styras från ett ställe om det behövs. Till exempel, om en webbplatss format helt bestäms av en bifogad stilmall, kan en webbdesigner helt enkelt sätta in en annan stilmall för att kraftigt ändra presentationen av webbplatsen.
3.1 Inline dansstilar
Som nämnts ovan handlar det här avsnittet om formatering och stilar. Eftersom det finns många sätt att ändra stilen på ditt innehåll och din sida, tänkte jag att det skulle vara bra att börja med den mest raka tekniken som är Inline stilar. Detta görs genom att placera koden i egenskapsdelen av en flik som omfattar innehållet. Så här:
Låter det för svårt? Låt mig ge dig ett exempel:
Obs: Färg stavas Färg när du använder den här koden eftersom den skapades någonstans som inte är så cool som Australien eller Kanada; Jag hoppas att det inte stör dig för mycket.
Den fetstilta informationen i exemplet ovan är formateringen som bearbetas på innehållet som ingår i
märka. För en lista över hexadecimala koder för olika färger, sök helt enkelt på Google eller använd den här webbplatsen: http://html-color- codes.com/
3.2 Inbäddade formatmallar (cheat sheets är vinst)
Att använda inline-stilarna i föregående avsnitt kan vara jobbigt om du har en mycket stor webbplats. Men om du vill använda samma stilar om och om igen, varför inte använda en Inbäddad stilmall? Detta alternativ låter dig skapa dina egna stilar i
taggen av koden och sedan hänvisar du till dem i koden när du infogar något innehåll på din sida. För komplicerat? Här är ett exempel:
Se hur texten ändrar färg, storlek eller format beroende på stilmall högst upp? Detta är väl inte särskilt svårt att förstå?
På rad 7 där vi introducerar starten på
Linje 16 använder .xtra klass som gjordes tidigare. Sättet detta fungerar är att det lägger till xtra klass till vilken stil den än öppnas på, varigenom alla egenskaper som skrivs över xtra klass använder. Till exempel: om en stil har storlek 20pt teckensnitt och är färgen grön, och en klass läggs över på den som har en annan typsnittsstorlek, då kommer den nya teckenstorleken att ersätta den gamla, men den gamla färgen grön kommer att fortsätta i befintligt skick.
3.3 Stilar i krig (motstridiga stilar)
Det finns tre stilnivåer och de är:
• Användare (visar webbplatsen)
• Författare (till webbplatsen)
• Användaragent (webbläsare)
Stilarna smälter samman på ett sådant sätt som skapar bästa möjliga setup från användarens position. Följande diagram visar hierarkin för de tre nivåerna:
3.4 Style Sheets från andra sidan (externt)
Tycker du inte att det skulle vara irriterande att alltid behöva skriva ut samma stilmall i varje ny kodningsfil? Det finns en lösning: Externa stilmallar. Du kan skapa en annan fil med syftet att använda den för formatering; det är en ".css" fil. För att använda den i en annan fil skriver du bara in följande utdrag:
Byta ut filnamn med namnet på din CSS-fil och där går vi, de är länkade. Se till att din CSS-fil finns i samma mapp som dina länkade filer.
Exempel på CSS-fil:
Innan vi fortsätter har jag försummat att nämna vad em gör. Ovan ser du på sista raden att jag har satt "ul ul { font-size: .8em; }” och detta betyder att teckensnittsstorleken kommer att ändras till den relativa .8 eller 80 % av den normala storleken som användaren vill att den ska använda med sin egen stilmall som laddas in i sin webbläsare. De flesta människor använder inte en användardefinierad stilmall så låt oss inte oroa oss för detta.
3.5 Positioneringselement (vart ska du härnäst?)
När du lägger en bild på en webbsida vill du inte att den bara ska gå någonstans. Skulle du inte vilja ha något att säga till om? Så här gör du det, det är faktiskt ett exempel och jag ska förklara det snart:
På rad 9 till 13 kommer du att märka att det är en klass med ID som fgpic och har några egenskaper som används i den. De placera egenskapen är inställd på absolut vilket innebär att oavsett hur användaren ändrar den kommer bilden att stanna där din (författaren) placerar den med sin kod. De topp och vänster egenskaper anger en punkt där elementet (t.ex. bild/text) kommer att placeras. De z-index egenskap är ett mycket kraftfullt verktyg eftersom det ställer in staplingsnivån som visas i skärmdumpen nedan:
Se hur bakgrundsbilden är baktill med z-indexvärde 1 och texten längst fram med z-indexvärde 3, medan förgrundsbilden är i mitten med z-indexvärde 2. Får det att se ganska bra ut faktiskt om du spelar dina kort rätt
3.6 Tänk på din omgivning (bakgrund)
Webbplatser ser bra ut med bakgrunder, eller hur? Skulle det inte vara riktigt tråkigt om alla webbplatser bara hade en vit eller svart bakgrund? Varför inte lägga in en bild där och ändra färgen lite? Det finns några egenskaper som du kan använda för att få bakgrunden på din sida att sticka ut lite mer och ge sidan lite utstrålning. Ta en titt på följande kod och se om du kan räkna ut vad de markerade egenskaperna gör:
Har du räknat ut vad den gör? I grund och botten är bakgrundsbilden vad vi ska använda i bakgrunden, bildens sökväg går inom parentes/parentes så här > url(HÄR). Du kan tänka dig att detta har z-indexvärde 0 eftersom det alltid finns längst bak på sidan. Bakgrundspositionen för bilden har ställts in längst ner till vänster, ganska självförklarande eller hur? Därefter har bakgrundsbilden upprepats över sidans x-axel (repeat-x) och inte bara det utan den är fixerad längst ner i fönstret (bakgrundsbifogning). Äntligen har färgen slumpmässigt satts till att huvudsakligen vara röd. Ta en titt nedan för resultatet:
3.7 Hur stor tror du? (mått på element/textbegränsningar)
Om du tror att det är allt som CSS har att erbjuda, har du verkligen fel. CSS-regler kan ange de faktiska dimensionerna för varje sidelement. Låt oss ta exemplet med en textruta. Vill du skriva in någon text som inte går hela vägen över skärmen, eller kanske göra en textruta som kan rullas utan att sidan flyttas? Det är där du ska vara då. Se skärmdumpen nedan för vad jag just har beskrivit:
Låt oss nu ta en titt på koden bakom kulisserna:
Bara en liten anmärkning: rad 6 lägger till en marginalkant längst ner på var och en av textrutorna. Ganska coolt, eller hur? Men mer om gränser i nästa avsnitt.
3.8 Det som går runt kommer runt (gränser)
Jag tror inte att detta behöver en förklaring men jag ska ge en ändå. I grund och botten kan du sätta gränser runt i stort sett vad som helst så låt oss ta en titt på hur man gör det. Så här är koden:
Här är vad koden gör, i princip ett sortiment av kanter som omger namnet/namnen på den typ av kant som används. Tänk på att motsatsen till spåret är nock och motsatsen till infälld är infälld.
3.9 Flytande och flytande element
Det är vanligtvis ganska tråkigt att bara se rubrik, sedan text, sedan rubrik och sedan text. Även om det inte ser lite snyggare ut? Det finns en metod som kan användas som kallas flytande, och nu ska jag visa dig hur du gör just det. Flytande låter dig flytta ett element till ena sidan av skärmen medan annat innehåll i dokumentet sedan flyter runt det flytande elementet. Det flytande elementet kan vara en bild eller en rubrik eller till och med ett annat textblock. Låt oss nu ta en titt på hur det ser ut:
Ganska bra för en hel del situationer, nu är det här koden som konstruerar denna design:
Är det inte fantastiskt vad du kan göra om du bara hittar rätt metod?
3.10 Rulla inte ner menyn – exempel
Om du funderar på att skapa en webbplats kommer du sannolikt att behöva en meny, eller hur? Det här kan vara rätt plats för dig att gå till om du vill ha något som inte bara sitter där. Dynamiska element gör att webbsidor ser bättre ut och ger en bättre känsla för hela webbplatsen.
En av mina favorittyper av menyer måste vara en rullgardinsmenyn så nu ska vi ta en titt på hur man gör en genom att använda CSS. Kolla in koden nedan:
Jag vet att detta verkar lite skrämmande i början, men om du har tålamod och bara läser vidare kommer du att förstå snart nog.
Rad 15 säger: när jag har en <div> tagga med klass = "meny” och musen är svävaöver det visa de blockeraär inuti den.
Raderna 16-21 säger: när jag har en <div> tagga med klass = "meny” och ett <a> taggen och ställ sedan in dessa format. Tänk på att dessa rader väljer formatet för de dolda menyknapparna. Raderna 9-14 ställer in formaten för menyknappen att rulla över för att visa resten av menyn.
Rad 22 säger: när jag har en <div> tagga med klass = "meny” och ett <a> tag och jag sväva över ett av dessa element ställ sedan in bakgrundsfärg till en annan green.
Ta en titt nedan för slutprodukten:
3.11 User Style Sheets (du är universums centrum)
Användare kan definiera sina egna användarens stilmallar för att få sidorna att se ut som de vill ha dem. Bara för att skilja på Användarformatmallar och Författare Style Sheets. Användarstilar är externa stilmallar som användare kan skapa själva och som helt enkelt görs som CSS-filer utan det mesta av kodningen. Här ska jag visa dig en:
Var inte det extremt enkelt?
Om du vill veta hur du ställer in detta i din egen webbläsare går du helt enkelt till Verktyg >> Internetalternativ >> Allmänt >> Tillgänglighet >> Definiera sedan din egen fil Författarformatmallen definieras i koden däremellan .
4. Mer information
4.1 Varför använda xHTML och co. över design och andra applikationer?
Innan du ser på detta som fakta eller något liknande bör du veta att detta helt enkelt är en synvinkel beroende på var du står och hur tekniskt sinnad du kan vara. Jag tycker om att använda programmeringsspråk för att slutföra mina projekt eftersom det betyder att du kan förstå vad som ligger bakom designen, medan jag använder designapplikationer som Adobe Dreamweaver och Microsoft FrontPage låter dig skapa din webbplats med endast de verktyg som finns tillgängliga på menyerna. Därför är designapplikationerna begränsade till menyalternativet som du får. Sammanfattningsvis är det helt uppenbart att användning av programmeringsspråk skulle bygga in webbplatsen eller den färdiga produkten något mycket mer tilltalande eftersom dess funktionalitet endast begränsas av programmerarens skicklighet med det angivna språket (t.ex. JavaScript, CSS, xHTML). Jag vet att du förmodligen tror att jag är partisk, men du måste bara prova båda och bestämma hur mycket ansträngning du vill lägga på ditt arbete och välj sedan dina lämpliga verktyg för att komma till ditt destination. Du kan till och med välja att använda båda eftersom både Dreamweaver och FrontPage har en "kodningsvy" och en "designvy".
Det finns andra sätt att skapa webbplatser som att använda Joomla och WordPress.
4.2 Joomla
Joomla är ett fantastiskt innehållshanteringssystem (CMS) med mycket flexibilitet och med en lättanvänd användare gränssnitt som många människor blir skrämda över när de inser hur många alternativ och konfigurationer det finns tillgängliga. Joomla är en plattform baserad på PHP och MySQL. Denna programvara är öppen källkod som du kan hämta från http://www.joomla.org/download.html
Om du vill ha en djupgående guide om Joomla prova den här guiden från MakeUseOf: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ Nybörjarguiden till JoomlaDen här guiden går igenom allt från varför du ska välja Joomla och hur du installerar det på din webbserver till hur du designar och anpassar din webbplats efter dina önskemål. Läs mer
4.3 WordPress
WordPress är ett Content Management System (CMS) som tillåter användare att skapa och underhålla en webbplats genom en administrativ gränssnitt, inklusive en automatiskt genererad navigeringsstruktur, utan att behöva känna till HTML eller lära sig något annat verktyg. WordPress är en mjukvara med öppen källkod som skapats av tusentals programmerare över hela världen och lagts till allmän egendom, så du behöver inte betala för att använda den. WordPress är en webbaserad applikation, skriven i PHP och MySQL, designad för att köras på Linux-servrar: PHP är ett programmeringsspråk för webben applikationer, MySQL är en relationsdatabas (som MS Access), och Linux är ett operativsystem för webbservrar – alla dessa är också öppna källa. WordPress är överlägset det mest populära CMS-systemet med över 200 miljoner webbplatser över hela världen i slutet av 2009.
Ytterligare läsning
- Topp 11 HTML-taggar som alla bloggare och webbplatsägare måste känna till Topp 11 HTML-taggar som alla bloggare och webbplatsägare måste känna tillWorld Wide Web kan många språk och är kodad i flera olika. Det enda språket som dock finns överallt och som har funnits sedan webbsidorna uppfanns, är... Läs mer
- 5 roliga saker att göra online med HTML5 5 roliga saker att göra online med HTML5HTML5 fortsätter att gå från klarhet till klarhet, med fler webbplatser som byter till den nya standarden som för multimediainnehåll till webben utan behov av plugins som Adobe Flash. Är det sprängt... Läs mer
- Kod för webben med dessa verktyg direkt i din webbläsare Bygg det: 11 briljanta Chrome-tillägg för webbutvecklareChrome är bra för webbutvecklare på grund av dess pool av tillägg. Om du någonsin planerar att designa eller koda en webbplats, här är några viktiga verktyg som du bör installera direkt. Läs mer
Guide Publicerad: juni 2011
