Hemsida (HTML och CSS)

Nyligen jag har försökt att göra vissa webbplatser och värd dem online att bara se hur den HTML och CSS jag lärt mig fungerat så att jag kunde göra en full fledged webbplats med och granska spel inom en snar framtid.

Testning och lagning/förbättra mina kunskaper, bestämde jag mig att göra en webbplats som funktioner instructables jag personligen gillade från

Jag försökte att genomföra en hel del metoder för att göra webbplatsen mer interaktiv. Jag har lagt till en klibbig sidfot som är lämplig på skärmen och sedan en massa nedrullningsbara listor och vissa dolda menyer. Den har också stöd av som någon som tittar på webbplatsen kommer att kunna Skicka idéer/klagomål om webbplatsen eller för featuring nya projekt osv... Skicka svar till webbplatsen ägarens e-post-funktionen är ett lite knepigt eftersom det handlar om användning av PHP och andra server skriptspråk...

Resten av funktionerna som bygger på användning av HTML och CSS. Detta gör det mycket mer enklare för nya människor att komma igång med att skapa sina egna hemsidor med kod i stället för att använda webbplatser som www.webs.com etc precis som jag började när jag var 12, men bästa är att du kan skapa hela webbplatsen endast med hjälp av HTML men CSS läggs en hel del interaktiva element till för webbplatsen. Jag är för närvarande 15 år gammal så började jag lära om programmering ca 3 år sedan.

Den text som användes i hemsidan gjordes med hjälp av Photoshop och vissa andra bild redigerande program, använde jag ungefär 3-4 av dem men jag hittade Photoshop vara den mest praktiska.

Vad gjorde du?
Jag gjorde en webbplats som är helt funktionell och så fort jag får min dator tillbaka upp och arbetar jag startar hosting det online. Allt är inställda och redo att vara värd men min värd dator är ner som det nyligen fick överarbetade eftersom jag använder den för andra saker också som minecraft servrar. Detta är en webbplats som visar upp grunderna i web designing som jag vet att vi kan få in en hel del mer avancerade programmeringstekniker som gör mycket bra webbplatser.

Hur gjorde du det?
Jag har alltid haft ett intresse för programmering och elektronik. När jag såg en hel del riktigt bra utformade och mycket bra snygga webbplatser jag visste bara att jag var tvungen att försöka göra en själv. För att koda hemsidan jag använt program som Microsoft förstasidesnyhet och Microsoft word, emellertid haft med front-page mycket mer än ord som förstasidesnyhet gör det mycket lättare för icke yrkesverksamma att börja skapa webbplatser som det pekar ut några vanliga koden fel och färger olika text i olika färger för att skilja kodning från skrivande osv... Min dator techer i skolan också hjälpt mig mycket genom att lära mig nya saker som hur man Justera former/storlekar/läggning av olika nedrullningsbara rutor och skuggning osv...

Där gjorde du det?
På min dator i mitt hus. Ibland arbetade jag på det i skolan också när jag hade tid.

Vad lärde du dig?
Genom att skapa denna webbplats jag lärt mig en massa saker jag lärt mig hur man sätter den kodning jag lärt mig att använda och jag lärt mig hur man kan gå upp bitar och bitar av HTML och CSS kodning jag lärt mig i skolan och på nätet. Innan du gör denna webbplats jag var alltid osäker på om jag kan göra en hemsida och vara värd det online som jag var osäker på hur allt jag lärt mig skulle lägga till ge mig ett lyckat resultat. Nu jag är mycket mer övertygad om att skapa webbplatser och kan komma igång med att skapa faktiska, seriöst och bra webbplatser använder detta som en start av:). En av de största överraskningar jag stött på efter att jag avslutat gör hela webbplatsen var jag fick reda på jag inte hade inkluderat stöd för användning på andra webbläsare som Google Chrome, Safari etc som när jag jobbade jag endast använt Mozilla Firefox för att testa... med detta jag hade att gå igenom mer kod och lära sig en massa andra saker att se till att webbplatsen sprang på Google Chrome och andra webbläsare.

Jag gjorde också en instructable ungefär ett år sedan på grunderna i webbplats kodning och skapande när jag precis börjat lära sig att koda HTML och CSS, så ta en titt på det för fullkomlig grunderna i webb-design, men för att göra mer avancerade webbplatser bör du lära dig mer djupgående och detaljerad CSS och JavaScript kodning... som förhoppningsvis kommer jag börja lära sig snart.

Hoppas att detta inspirerar människor att börja göra sina egna webbplatser och visa upp sin kreativitet och talang.

"HTML-koden för sidan 1"

<!--varje steg i den instructable i innehållet insida en artikel tagg, detta är bara för att gruppera stegen i sin egen tagg och för organisationen syften-->
<!--har 5 viktigaste div element, header, navMenu, Info, kroppen, sidfot.-->
<!----> länka till style sheet "style.css"

<! DOCTYPE html PUBLIC "-//w3C//DTD HTML 5.0 / / EN" >

< html >

<!--***********************************************************************************************************************************************-->

< head >

< länka href="CSS/style.css" rel = "stylesheet" type = "text/css" >
< title > DIY geni < / title >
< meta namn = "Beskrivning" content = "Lär dig saker du inte visste innan! Gör din egna DIY projekterar! Bli en DIY mästare!" >
< meta namn = "keywords" content = "hemsida, ny, DIY, projekt, göra, Craft, bästa, avfall, teknik, Workshop, Craft" >

< / head >

<!--***********************************************************************************************************************************************-->

< body bgcolor = #CCCCCC >

< div id = "behållare" >

<!--***********************************************************************************************************************************************-->

< div id = "huvud" >
< a namn = "Start av sidan" >< /a >
< tabell bredd = 100% align = center background="Images/headerbackground.jpg" >
< tr >
< td bredd = "1000px" align = "center" >< img src="Images/Title.jpg" bredd = "916px" höjd = "198px" >< /td >
< td align = höger >< H5 > innehåll från < / H5 >< en href = " >< img src = "Bilder/instructables-logo.png" onmouseover = "src =" bilder/instructables-logo1.jpg "" onmouseout = "src =" bilder/instructables-logo.png "" style = "border-radie: 0px;" >< / a >< /td >
< /tr >
< / table >
< / div >

< br >< /br >

<!--***********************************************************************************************************************************************-->

< div id = "navMenubackground" >
< div id = "navMenu" >

< ul >

< li >< en href = "#" > material < /a >
< ul >
< li >< en href = "http://www.ebay.com/itm/100-x-2-5mm-Nylon-Zip-Ties-Wraps-Cable-Wire-/140611677563?pt=LH_DefaultDomain_0 & hash = item20bd1bed7b" target = "_blank" > Zip band < /a >< /li >
< li >< en href = "http://www.ebay.com/itm/New-0-6mm-Tin-Lead-Soldering-Solder-Wire-Rosin-Core-/270714225033?pt=LH_DefaultDomain_0 & hash = item3f07d34189" target = "_blank" > löda < /a >< /li >
< li >< en href = "http://www.ebay.com/itm/5-ft-3mm-Desoldering-Braid-Solder-Remover-Wick-TNI-U-/200595432345?pt=LH_DefaultDomain_0 & hash = item2eb46b6399" target = "_blank" > Wick < /a >< /li >
< li >< en href = "http://www.ebay.com/itm/NEW-1-ROLL-BROWN-COVALENCE-ELECTRICAL-TAPE-66-3-4-7-MIL-ELECTRIC-19MM-X-20M-/190601313480?pt=LH_DefaultDomain_0 & hash = item2c60b93cc8" target = "_blank" > elektrisk tejp < /a >< /li >
< /ul ><!--slutet av sub UL tag-->
< /li >

< li >< en href = "#" > referens < /a >
< ul >
< li >< en href = "http://en.wikipedia.org/wiki/Cable_tie" target = "_blank" > Zip slips < /a >< /li >
< li >< en href = "http://www.performance-pcs.com/catalog/index.php?main_page=index & cPath = 44_80" target = "_blank" > Zip slips ankare < /a >< /li >
< li >< en href = " target = "_blank" > Zip slips korg < /a >< /li >
< /ul ><!--slutet av sub UL tag-->
< /li >

< li >< en href = "#" > renovera < /a >
< ul >
< li >< en href = "Main Page 1.htm" > Zip slips korg < /a >< /li >
< li >< en href = "Main Page 2.htm" > LED Night lampa < /a >< /li >
< /ul ><!--slutet av sub UL tag-->
< /li >

< /ul ><!--slutet av huvudsakliga UL tag-->

< / div ><!--slutet av nav-menyn div-->
< / div ><!--slutet av nav-menyn bakgrunden div-->

<!--***********************************************************************************************************************************************-->

< div id = "Information" >
< h3 > författare: < en href = " target = "_blank" > BladeFyre Studios < /a >< / h3 >
< h4 > Publicerad: 26 Jul 2011 < / h4 >
< h4 > licens: ingen < abbr titel = "All Rights Reserved" > (ARR) < / abbr >< / h4 >
< h5 > relaterade: Zip-slips, korg, vävning, plast < / h5 >
< / div >

<!--***********************************************************************************************************************************************-->

< div id = "kropp" style = "bredd: 1110px; höjd: 1140px ">

< img src = "Bilder/rubriken 1.jpg" alt = "Gör en Zip slips korg" >< /br >

< artikel >
< bild src = "Bilder/Zip-tie-basket.jpg" alt = "Zip knyta korg" >
< / artikel >
< artikel >
< / artikel >
< artikel >
< / artikel >
< artikel >< p >< /p >
Vi nu lära dig att göra en zip slips korg med cirka 100 zip band...
< p >< /p > du kommer att kunna använda denna korg för en massa saker!
< br / > jag personligen använder det för att hålla min lödtenn, wick och eltejp
< br / >
< br / >
< / artikel >

< ol >

< artikel >
< H2 >< li >< b > material som krävs: < /b >< /li >< / H2 >
< bild src="Images/Supplies.jpg" alt = "Leveranser" >
< ul >
< li >< p > 16 X ankare (1 "X 1") < /p >< /li >
< li >< p > 100 X Zip band (7 3/8 i långa) < /p >< /li >
< /ul >
< br > jag antar att du kan använda valfri storlek beroende på hur stor eller liten du vill göra din korg! < /br >
< / artikel >

< artikel >
< H2 >< li >< b > Konfigurera < /b >< /li >< / H2 >
< bild src = "Bilder/Set-up.jpg" alt = "Set Up" >
< bild src = "bilder/F6EVZBQGQKLPAPE. MEDIUM.jpg"alt ="Set Up">
< p >< /p > lägga ut 16 ankare i en 4 X 4 kvadrat
< br / > sätta en Zip slips genom en rad med 4, göra detta för dem alla, men växlar riktning mot Zip band.
< / artikel >

< artikel >
< H2 >< li >< b > väva bort < /b >< /li >< / H2 >
< bild src = "Bilder/väva-Away.jpg" alt = "Väva, väva och väva" >
< bild src = "bilder/FEMYGPIGQKM05QC. MEDIUM.jpg"alt ="Väver på och">
< bild src = "bilder/F096D66GQKLPAPS. MEDIUM.jpg"alt ="Vävning längs">
< p >< /p > väva 7 Zip band på varje sida (igen omväxlande riktning)
< br / > sedan Vik upp sidorna och ansluta de Zip band till varandra...
< blockquote >< p >< /p > Obs: Jag fann det lättare att använda 4 Zip band till göra en kvadrat då väva det in alla 4 sidor på en gång... < / blockquote >
< / artikel >

< artikel >
< H2 >< li >< b > Secure väven < /b >< /li >< / H2 >
< bild src = "Bilder/Secure-the-weave.jpg" alt = "Säkra väven" >
< bild src = "bilder/FTGOJZUGQKM4NRK. MEDIUM.jpg"alt ="Säker hörnen">
< p >< /p > trimma bort överflödigt Zip slips slutar
< br / > använda en Zip slips för att ansluta ett hörn till ett hörn att säkra väven
< / artikel >

< artikel >
< H2 >< li >< b > Peel, Stick och fylla < /b >< /li >< / H2 >
< bild src = "Bilder/Peel-Stick-och-Fill.jpg" alt = "Peeling, stickning och fylla" >
< p >< /p > hitta en plats att hålla fast korgen (dvs. en arbetsbänk, dresser, räknare, etc..)
< br / > lossnar stöd av ankare.
< p >< /p > placera på plats att installera, att trycka fast för att få korgen att sticka jämnt!
< br / > placera objekten du vill lagra i korgen!
< p >< /p > i mitt fall jag förvara min lödtenn, Wick och elektrisk tejp i det!
< / artikel >

< artikel >
< H2 >< li >< b > resurser, hjälpa < /li >< b >< / H2 >
< tabell align = "vänster" border = "1" width = "40%" höjd = "100px" >
< colgroup >
< col klass = "Kolumn1" >
< col klass = "Kolumn2" >
< / colgroup >
< tr >
< th colspan = "2" style = "bakgrundsfärg: #333333" >< font color = "FFFFFF" > mätningar < / font >< /th >
< /tr >
< tr >
< th bredd = "47%" style = "bakgrundsfärg: #686868" >< font color = "FFFFFF" > Zip band < / font >< /th >
< th bredd = "49%" style = "bakgrunden-cologne: #686868" >< teckenfärg = "FFFFFF" > korg storlek < / font >< /th >
< /tr align = "center" >
< tr align = "center" >
< td bredd = "47%" > 100 < /td >
< td bredd = "49%" > 10cm < /td >
< /tr >
< tr align = "center" >
< td bredd = "47%" > 200 < /td >
< td bredd = "49%" > 20cm < /td >
< /tr >
< tr align = "center" >
< td bredd = "47%" > 300 < /td >
< td bredd = "49%" > 30cm < /td >
< /tr >
< tr align = "center" >
< td bredd = "47%" > 400 < /td >
< td bredd = "49%" > 40cm < /td >
< /tr >
< tr align = "center" >
< td bredd = "47%" > 500 < /td >
< td bredd = "49%" > 50cm < /td >
< /tr >
< tr align = "center" >
< td bredd = "47%" > 600 < /td >
< td bredd = "49%" > 60cm < /td >
< /tr >
< / table >
< p >< /p >
< / artikel >

< br / >< br / >< br / >< br / >< br / >< br / >< br / >< br / >< br / >< br / >< br / >< br / >

< artikel >
< H2 >< li >< b > frågor och svar < /b >< /li >< / H2 >
< Detaljer >
< Sammanfattning >< em > hur stark är korgen? < /em >< / Sammanfattning >
< p > det är ganska stark, nog för hem använda < /p >
< / Detaljer >
< Detaljer >
< Sammanfattning >< em > Hur lång tid tog det för att göra? < /em >< / Sammanfattning >
< p > för inte så länge, ca 1 vecka < /p >
< / Detaljer >
< Detaljer >
< Sammanfattning >< em > är detta din egen idé? < /em >< / Sammanfattning >
< p > Ja, jag tyckte det själv... < /p >
< / Detaljer >
< / artikel >

< br / >< br / >

< fieldset >
< legend >< h1 > Skicka oss dina tankar < / h1 >< / legend >
< bildar åtgärd = "mailto:vishalapr metod ="post">
< table >
< tr >
< td > Namn: < /td >
< td >< input type = "text" name = "namn" value = "Ange ditt namn" storlek = "35" >< /td >
< /tr >
< tr >
< td > e-post: < /td >
< td >< input type = "text" namn = "email" value = "Ange din e-post" storlek = "35" >< /td >
< /tr >
< tr >
< td nederkant = "topp" > meddelande: < /td >
< td >< textarea rader = "5" cols = "35" >< / textarea >< /td >
< /tr >
< tr >
< td > & nbsp; < /td >
< td >< input type = "Skicka" värde = "Skicka!" >< /td >
< /tr >
< / table >
< / form >
< / fieldset >

< br / >

< en href = "#Start sidan" > hoppa till början av sidan < /a >

< br / >< br / >< br / >< br / >< br / >

< /ol >

< / div ><!--slutar av kroppen DIV-->

< br >< /br >

<!--***********************************************************************************************************************************************-->

< div id = "sidfot" >
< center >< font size = "3" > Copyright © 2012 < abbr titel = "www.DIYGenius.com" > & nbsp; DIYGenius.com & nbsp; < / abbr > alla rättigheter reserverade. < / font >< / center >
< / div >

<!--***********************************************************************************************************************************************-->

< / div ><!--slutar av behållaren DIV-->

<!--***********************************************************************************************************************************************-->

< / body >

< / html >

"HTML-koden för sidan 2"

<!--varje steg i den instructable i innehållet insida en artikel tagg, detta är bara för att gruppera stegen i sin egen tagg och för organisationen syften-->
<!--har 5 viktigaste div element, header, navMenu, Info, kroppen, sidfot.-->
<!----> länka till style sheet "style.css"

<! DOCTYPE html PUBLIC "-//w3C//DTD HTML 5.0 / / EN" >

< html >

<!--***********************************************************************************************************************************************-->

< head >

< länka href="CSS/style.css" rel = "stylesheet" type = "text/css" >
< title > DIY geni < / title >
< meta namn = "Beskrivning" content = "Lär dig saker du inte visste innan! Gör din egna DIY projekterar! Bli en DIY mästare!" >
< meta namn = "keywords" content = "hemsida, ny, DIY, projekt, göra, Craft, bästa, avfall, teknik, Workshop, Craft" >

< / head >

<!--***********************************************************************************************************************************************-->

< body bgcolor = #CCCCCC >

< div id = "behållare" >

<!--***********************************************************************************************************************************************-->

< div id = "huvud" >
< a namn = "Start av sidan" >< /a >
< tabell bredd = 100% align = center background="Images/headerbackground.jpg" >
< tr >
< td bredd = "1000px" align = "center" >< img src="Images/Title.jpg" bredd = "916px" höjd = "198px" >< /td >
< td align = höger >< H5 > innehåll från < / H5 >< en href = " >< img src = "Bilder/instructables-logo.png" onmouseover = "src =" bilder/instructables-logo1.jpg "" onmouseout = "src =" bilder/instructables-logo.png "" style = "border-radie: 0px;" >< / a >< /td >
< /tr >
< / table >
< / div >

< br >< /br >

<!--***********************************************************************************************************************************************-->

< div id = "navMenubackground" >
< div id = "navMenu" >

< ul >

< li >< en href = "#" > material < /a >
< ul >
< li >< en href = "http://www.ebay.com/itm/10-Sheets-1-8-Clear-Cast-Acrylic-Plexiglass-12-x-12-/290409405568?pt=LH_DefaultDomain_0 & hash = item439dbfdc80" > akryl blad < /a >< /li >
< li >< en href = "http://www.ebay.com/itm/10-x-5mm-Blue-LED-Light-emitting-Diodes-10000mcd-gift-/320568095904?pt=LH_DefaultDomain_0 & hash = item4aa358f4a0" > lysdioder < /a >< /li >
< li >< en href = "http://www.ebay.com/itm/Pro-Sanding-Nail-File-Buffing-Sandpaper-Slim-Black-N111-/290610237063?pt=LH_DefaultDomain_0 & hash = item43a9b84e87" > sandpapper < /a >< /li >
< li >< en href = "http://www.ebay.com/itm/NEW-10X-CR2025-2025-3V-Lithium-Button-Cell-Coin-Battery-/110793380114?pt=US_Batteries & hash = item19cbccd112" > knappen cellsbatteri < /a >< /li >
< li >< en href = "http://www.ebay.com/itm/2pcs-CR2032-CR2025-Notebook-Laptop-PC-Button-Cell-Battery-Socket-Base-Holder-/150678515771?pt=US_Batteries & hash = item231523b03b" > knapp Cell innehavaren < /a >< /li >
< li >< en href = "http://www.ebay.com/itm/Vinyl-Electrical-Tape-NEW-General-Use-/390306485709?pt=LH_DefaultDomain_0 & hash = item5ae01455cd" > elektrisk tejp < /a >< /li >
< li >< en href = "http://www.ebay.com/itm/1pc-Momentary-ON-OFF-N-C-CAR-BOAT-3V-4-5V-6V-9V-12V-24V-120V-Push-Switch-YM507-/180758737924?pt=LH_DefaultDomain_0 & hash = item2a160f7404" > momentan switch < /a >< /li >
< /ul ><!--slutet av sub UL tag-->
< /li >

< li >< en href = "#" > referens < /a >
< ul >
< li >< en href = "http://en.wikipedia.org/wiki/Poly%28methyl_methacrylate%29" > akryl blad < /a >< /li >
< li >< en href = "http://en.wikipedia.org/wiki/Light-emitting_diode" > LED < /a >< /li >
< li >< en href = "http://en.wikipedia.org/wiki/Sandpaper" > sandpapper < /a >< /li >
< li >< en href = "http://en.wikipedia.org/wiki/Button_cell" > knapp cell < /a >< /li >
< li >< en href = "http://en.wikipedia.org/wiki/Switch" > momentan Switch < /a >< /li >
< li >< en href = " > LED Night lampa < /a >< /li >
< /ul ><!--slutet av sub UL tag-->
< /li >

< li >< en href = "#" > renovera < /a >
< ul >
< li >< en href = "Main Page 1.htm" > Zip slips korg < /a >< /li >
< li >< en href = "Main Page 2.htm" > LED Night lampa < /a >< /li >
< /ul ><!--slutet av sub UL tag-->
< /li >

< /ul ><!--slutet av huvudsakliga UL tag-->

< / div ><!--slutet av nav-menyn div-->
< / div ><!--slutet av nav-menyn bakgrunden div-->

<!--***********************************************************************************************************************************************-->

< div id = "Information" >
< h3 > författare: < en href = " target = "_blank" > motadacruz < /a >< / h3 >
< h4 > Publicerad: 11 Feb 2010 < / h4 >
< h4 > licens: ingen < abbr titel = "All Rights Reserved" > (ARR) < / abbr >< / h4 >
< h5 > relaterade: LED, kub, ambient, ljus, lampa, natt < / h5 >
< / div >
< / div >

<!--***********************************************************************************************************************************************-->

< div id = "kropp" style = "bredd: 1117px; höjd: 3072px ">

< img src = "Bilder/rubriken 2.jpg" alt = "Gör en LED Night lampa" >< /br >

< artikel >
< bild src = "Bilder/LED-kub-natt-Light.jpg" alt = "The Final produkt" >
< / artikel >
< artikel >
< p >< /p > denna lysdiod lampa blir perfekt i alla hem. Det ger mer ljus då jag trodde det skulle.
< br / > idag fick jag de senaste produkter jag beställde att komma igång att bygga denna LED cube.
< p >< /p > om denna kub jag gjort är 9 x 9 cm x 9 cm... Det känns större sedan som. Kanske eftersom det ger tilld av ljus.
< br / > i de flesta av mina projekt och instructables jag använder en toggle switch för att växla LED's på och av.
< br / > jag ville göra något annorlunda den här gången. Fick säga det fungerat ganska häftigt.
< br / > på botten är små momentan strömbrytare som stänger lysdioder på och av. Växeln är tillräckligt stark
för att hålla kuben.
< br / > men när rutan trycks ner, växeln är inte stark nog att klicka tillbaka
på grund av vikten.
< br / > så att trycka på rutan kommer att slå ljus på, och dra rutan upp kommer att stänga av igen.
< p >< /p > nedan kan du se en film som jag gjorde för att visa hur det fungerar.
< p >< /p > gå om du tycker det är coolt nog, till steg ett så du kan få alla material och verktyg för att bygga din egen!
< br / >
< br / >
< iframe bredd = "640" höjd = "480" src = "http://www.youtube.com/embed/PBjm83P_AxM" frameborder = "0" allowfullscreen >< / iframe >
< / artikel >

< ol >

< artikel >
< p >< /p >< H2 >< li > Verktyg & material < /li >< / H2 >
< bild src = "Bilder/verktyg-Materials.jpg" alt = "Material" >
< p >< /p > materialen för detta projekt är ganska lätt att få och inte för dyrt.
< br / > bara några verktyg är kanske inte i allas verktygslåda. Men det finns också många verktyg du kan använda
< br / > istället om inte du kan få tag på några.
< ul >
< p >< b > material < /b >< /p >
< li >< br / > - A4 akryl blad - 3mm tjock (även känd som "plexiglas") < /li >
< li >< br / >-fint sandpapper (400 gör ett bra jobb!) < /li >
< li >< br / > - 3 x 5mm LED (jag använde blå, ger en god effekt. Men vilken färg kan användas) < /li >
< li >< br / >-2 x knappen cellsbatteri (CR2032) < /li >
< li >< br / >-2 x knapp cell innehavaren < /li >
< li >< br / >-små momentan switch < /li >
< li >< br / > - elektrisk tråd (slet av min cykel) < /li >
< /ul >
< / artikel >

< artikel >
< p >< H2 >< li > skära akryl < /li >< / H2 >< /p >
< bild src = "Bilder/klipp-the-acrylic.jpg" alt = "Styckning och lagning..." >
< bild src = "bilder/FBARYMIG5FR5LZM. MEDIUM.jpg"alt ="Skära akryl">
< p >< /p > först måste vi skära kuben av bladet akryl 6 sidor.
< p >< p >< /p > 1. Få penna och rita sex lika rutor på akryl blad. Raka linjer är behövs, så om inte
< br / > har du en riktigt stadig hand, använda en linjal :)
< p >< /p > 2. Använd jig sågar till skär torgen från akryl bladet. Se till att göra detta så perfekt som du kan.
< blockquote >< br / > Obs: alla rutor måste vara (nästan) samma (bild 2). < / blockquote >
< / artikel >

< artikel >
< p >< H2 >< li > Frosting akryl < /li >< / H2 >< /p >
< bild src = "Bilder/glasyr-the-acrylic.jpg" alt = "Glasyr" >
< bild src = "bilder/FJ5WNU7G5FR5M20. MEDIUM.jpg"alt ="Peeling">
< bild src = "bilder/FHZ9CDFG5FR5M1Z. MEDIUM.jpg"alt ="Glasyr och Peeling">
< p >< /p > akryl är "klart vatten". Det är inte vad vi vill. Vi vill ha en frostat (eller indirekt) kub att det sprider sig
< br / > ljuset lika att ge en fin effekt.
< p >< /p > du kan nog få akryl duk som redan har ett frostat utseende. Men jag kunde inte hitta dem här.
< br / > hittade 1 butik, men de debiteras tilld mer då vattnet klart en. Eftersom sandpapper inte kostar
< br / > mycket jag gick för vattnet klart en :)
< p >< /p > 1. Ta bort den skyddande plasten från varje platta (Foto 1 och 2).
< p >< /p > 2. Nu får det fint sandpapper (400) och placera den på ett bord, med slipning sidan upp. Få en tallrik och
< br / > gnugga det över sandpapper i en cirkelrörelse. Om en sida är frostat nog, vänd plattan och göra
< br / > samma med den sidan.
< p >< /p > om du gjorde ett bra jobb på slipning, kan du hålla plattorna mot ljuset. Bara ge dåligan
< br / > delar några extra slipning.
< / artikel >

< artikel >
< p >< H2 >< li > göra kuben < /li >< / H2 >< /p >
< bild src = "Bilder/gör-det-cube.jpg" alt = "Att göra kuben!" >
< bild src = "bilder/FUXRO3AG5FR5M8F. MEDIUM.jpg"alt ="Gå med i akryl">
< p >< /p > nu har vi plattorna redo måste vi forma dem till en kub.
< br / > innan du går och limma delar tillsammans, se till att först de passar fint på varandra. Vi behöver alla delar
< br / > att passa fint.
< p >< /p > 1. Efter montering av plattorna får limpistolen och limma bara 5 tallrikar tillsammans. Om du har några problem
< br / > håller ihop plåtarna innan limning, du kan använda lite tejp för att hålla dem samman. Detta sätt du
< br / > kan sätta limmet på mer avslappnad.
< p >< /p > 2. Den sista plattan som inte är fastlimmad ännu behöver ett hål för växeln för att passa in. Verktyget borrning och Använd
< br / > en borr som är i samma storlek som växeln (hörn till hörn).
< br / > när du borra, göra detta mycket noga! Du vill inte skynda, annars du kan lägga alltför mycket
< br / > Tryck på den och bryta plattan.
< p >< /p > prova om växeln passar fint i hålet. Senare ska vi använda limpistolen för att införa växeln.
< / artikel >

< artikel >
< p >< H2 >< li > förbereder lysdioder < /li >< / H2 >< /p >
< bild src = "Bilder/förberedelser-the-LEDs.jpg" alt = "Testning lysdioder" >
< bild src = "bilder/F6DIVHIG5FR5MBB. MEDIUM.jpg"alt ="Förbereda lysdioder">
< p >< /p > sprida om du är fånig ser ut som mig och köpte vatten klart LED också, här går vi dem :)
< p >< /p > 1. Få sandpapper (igen 400) och sand lysdioder.
< br / > kan du se skillnaden på vattnet klart dem (bild 1) och de diffust ettor (bild 2).
< / artikel >

< artikel >
< p >< H2 >< li > göra kretsen < /li >< / H2 >< /p >
< bild src = "Bilder/gör-det-circuit.jpg" alt = "Gör kretsen" >
< bild src = "bilder/F3DL04HG5FR5MHF. MEDIUM.jpg"alt ="Ansluter komponenter">
< p >< /p > måste vi nu lägga växeln, lysdioder och batterier tillsammans för att göra banan.
< br / > att säkerställa denna krets är fin och stark du kan löda delarna ihop. Eftersom jag inte har en löda
< br / > station jag använde varmt lim för att hålla dem ihop. Kanske inte lika bra ute, men det gör jobbet.
< p >< /p > 1. Sätta i batterierna i innehavare. Jag skulle vilja göra detta först så att de är något tyngre och lättare att hantera.
< p >< /p > 2. Sätta några elektrisk tråd från den positiva sidan av 1 batterihållare för den negativa sidan av andra batterihållaren.
< p >< /p > 3. Från 2: a batterihållaren, gå till den ögonblickliga switchen med en annan elektrisk tråd.
< p >< /p > 4. Använda vissa elektrisk tråd för att ansluta det motsatta benet av växeln till den positiva delen av lysdioder.
< p >< /p > 5. Och från den negativa delen av lampan du använda vissa elektrisk tråd för att gå tillbaka till 1: a batteriet anläggningen.
< p >< /p > 6. Testa växeln och se om lysdioder lyser upp. Om inte, du gjorde ett misstag i din krets. Om allt är
< br / > arbetande böter, använda vissa varmt lim så att delarna håller ihop. Eller du kan löda det om du har en lödning station.
< / artikel >

< artikel >
< p >< H2 >< li > färdigställande < /li >< / H2 >< /p >
< bild src = "bilder/F6I6UTBG5FR5MI8. MEDIUM.jpg"alt ="Snygg och Tidy">
< bild src = "bilder/FX93ZQOG5FRB5SK. MEDIUM.jpg"alt ="Tidying upp">
< bild src = "bilder/FIQEX3DG5FR5MI7. MEDIUM.jpg"alt ="Finishing upp">
< bild src = "bilder/FBR70K2G5FRB5SJ. MEDIUM.jpg"alt ="Och klar!" >
< p >< /p > vi har nu fått alla delar vi behöver. Allt vi behöver göra nu sätts den nedre delen i kuben för att göra det en hela kuben.
< br / > 1. Slipa sidorna av bottenplattan så det passar perfekt in i botten. Du vill bara bottenplattan
< br / > något större då hålet det passar i. Hitåt, när du sätter det där, det kommer att fastna och inte släppa taget
< br / > medan du flyttar kuben.
< p >< /p > kan du naturligtvis göra vilken färg du vill. Du kan även lägga färg förändras LED's i det för att skapa trevlig omgivande ljus.
< / artikel >

< artikel >
< H2 >< li >< b > resurser, hjälpa < /li >< b >< / H2 >
< tabell align = "vänster" border = "1" width = "445" >
< colgroup >
< col klass = "Kolumn1" >
< col klass = "Kolumn2" >
< / colgroup >
< tr >
< th colspan = "2" style = "bakgrunden-cologne: #045FB4" > mätningar < /th >
< /tr >
< tr >
< th bredd = "47%" style = "bakgrunden-cologne: #045FB4" > akryl storlek < /th >
< th bredd = "49%" style = "bakgrunden-cologne: #045FB4" > rutans storlek < /th >
< /tr >
< tr >
< td bredd = "47%" align = "center" > 60cm < /td >
< td bredd = "49%" align = "center" > 10cm < /td >
< /tr >
< tr >
< td bredd = "47%" align = "center" > 120cm < /td >
< td bredd = "49%" align = "center" > 20cm < /td >
< /tr >
< tr >
< td bredd = "47%" align = "center" > 180cm < /td >
< td bredd = "49%" align = "center" > 30cm < /td >
< /tr >
< tr >
< td bredd = "47%" align = "center" > 140cm < /td >
< td bredd = "49%" align = "center" > 40cm < /td >
< /tr >
< tr >
< td bredd = "47%" align = "center" > 320cm < /td >
< td bredd = "49%" align = "center" > 50cm < /td >
< /tr >
< tr >
< td bredd = "47%" align = "center" > 380cm < /td >
< td bredd = "49%" align = "center" > 60cm < /td >
< /tr >
< / table >
< p >< /p >
< / artikel >

< br / >< br / >< br / >< br / >< br / >< br / >< br / >< br / >< br / >< br / >< br / >< br / >

< artikel >
< H2 >< li >< b > frågor och svar < /b >< /li >< / H2 >
< Detaljer >
< Sammanfattning >< em > hur stark är kuben? < /em >< / Sammanfattning >
< p > det är ganska stark, nog för hem använda < /p >
< / Detaljer >
< Detaljer >
< Sammanfattning >< em > Hur lång tid tog det för att göra? < /em >< / Sammanfattning >
< p > för inte så länge, ca 2-3 veckor < /p >
< / Detaljer >
< Detaljer >
< Sammanfattning >< em > är detta din egen idé? < /em >< / Sammanfattning >
< p > Ja, jag tyckte det själv... < /p >
< / Detaljer >
< / artikel >

< br / >< br / >

< fieldset >
< legend >< h1 > Skicka oss dina tankar < / h1 >< / legend >
< bildar åtgärd = "mailto:vishalapr metod ="post">
< table >
< tr >
< td > Namn: < /td >
< td >< input type = "text" name = "namn" value = "Ange ditt namn" storlek = "35" >< /td >
< /tr >
< tr >
< td > e-post: < /td >
< td >< input type = "text" namn = "email" value = "Ange din e-post" storlek = "35" >< /td >
< /tr >
< tr >
< td nederkant = "topp" > meddelande: < /td >
< td >< textarea rader = "5" cols = "35" >< / textarea >< /td >
< /tr >
< tr >
< td > & nbsp; < /td >
< td >< input type = "Skicka" värde = "Skicka!" >< /td >
< /tr >
< / table >
< / form >
< / fieldset >

< br / >
< br / >

< en href = "#Start sidan" > hoppa till början av sidan < /a >

< br / >< br / >< br / >< br / >< br / >

< /ol >

< / div >
< br >< /br >

<!--***********************************************************************************************************************************************-->

< div id = "sidfot" >
< center >< font size = "3" > Copyright © 2012 < abbr titel = "www.DIYGenius.com" > & nbsp; DIYGenius.com & nbsp; < / abbr > alla rättigheter reserverade. < / font >< / center >
< / div >

<!--***********************************************************************************************************************************************-->

< / div >

<!--***********************************************************************************************************************************************-->

< / body >

< / html >

"CSS koden för båda sidor"

/*******************************************************************************************************************************************************************/

#body
{
Border: 0px;
padding: 0px;
marginal: 0px;
font-family: talet gotiska;
bredd: 90%.
}

/*******************************************************************************************************************************************************************/

#container
{
bredd: 100%.
Border: 0px;
padding: 0px;
marginal: 0px;
}

/*******************************************************************************************************************************************************************/

#header
{
Border-top: 15px solid #333333;
bredd: 100%.
höjd: 220px;
}

/********************************************************************************************************************************************************************/

#navMenubackground
{
höjd: 36px;
bredd: 100%.
bakgrundsfärg: #333333;
}

/********************************************************************************************************************************************************************/

#navMenu
{
marginal: 0;
padding: 0;
position: absolute;
vänster: 33%
}

#navMenu ul
{
marginal: 0;
padding: 0;
}

#navMenu li
{
marginal: 0;
padding: 0;
lista-style: none;
Float: left;
position: släkting;
bakgrund: #666666;
border-radius: 20px 5px;
}

#navMenu ul li en
{
text-align: center;
font-family: "Comic Sans MS", vanliga bokstäver;
text-decoration: none;
höjd: 30px;
bredd: 150px;
Visa: blockera;
Color: #FFFFFF;
Border: 1px solid #CCCCCC;
gränsen till höger: 2px solid #CCCCCC;
gränsen till vänster: 2px solid #CCCCCC;
text-shadow: 1px 1px 1px #000000;
stoppning: 2px;
border-radius: 20px 5px;
}

#navMenu ul ul
{
position: absolute;
synlighet: hidden;
topp: 36px;
}

#navMenu ul li:hover ul
{
synlighet: synlig;
}

/*******************************************************************************************************************************************************************/

#navMenu li:hover
{
bakgrund: #333333;
}

#navMenu ul li:hover ul li en: hover
{
bakgrund: #AAAAAA;
Color: #000000;
}

#navMenu li en: hover
{
Color: #FFFFFF;
}

#navMenu li li en: hover
{
Color: #000000;
}

/*******************************************************************************************************************************************************************/

#Info
{
font-family: Lucida Sans Unicode;
gränsen: 9px solid #333333;
marginal: 2px solid #FFFFFF;
bakgrundsfärg: #999999;
Float: höger;
höjd: 450px;
bredd: 300px;
topp: 100px;
position: släkting;
rätt: 20px;
topp: 55px;
border-radius: 10px;
}

/*******************************************************************************************************************************************************************/

#Info en: hover
{
Color: #FFFFFF;
text-decoration: none;
}

#Info en: aktiv
{
färg: #333333;
}

#Info en: länk
{
färg: #333333;
}

/*******************************************************************************************************************************************************************/

#footer
{
font-weight: bold;
font-family: talet gotiska;
Color: #FFFFFF;
klart: båda;
bakgrundsfärg: #333333;
stoppning: 4px;
bredd: 100%.
ståndpunkt: fast;
botten: 5px;
höjd: 35px;
}

/*******************************************************************************************************************************************************************/

fieldset
{
bredd: 500px;
höjd: 270px;
}

/*******************************************************************************************************************************************************************/

abbr
{
font-weight: bold;
font-style: kursiv;
font-size: ++ 1
}

/*******************************************************************************************************************************************************************/

. Kolumn1
{
bakgrundsfärg: #999999;
}

/*******************************************************************************************************************************************************************/

. Kolumn2
{
bakgrundsfärg: #999999;
}

/*******************************************************************************************************************************************************************/

H2
{
text-shadow: 2px 2px 2px #AAAAAA;
}

/*******************************************************************************************************************************************************************/

IMG
{
border-radius: 20px;
}

/*******************************************************************************************************************************************************************/