Website (HTML en CSS)

Hallo iedereen op instructables :)

Onlangs mij zijn geweest trying te halen sommige websites en gastheer hen online om gewoon zien hoe de HTML en CSS ik geleerd uitgewerkt zodat ik maken kon een volledige grootgebrachte website met en spelen in de nabije toekomst te herzien.

In de testen en herstellen/verbeteren van mijn vaardigheden, besloot ik een website te maken welke functies de instructables , ik persoonlijk vond van

Ik heb geprobeerd om een heleboel technieken de website om interactiever te maken. Ik heb een kleverige voettekst dat geschikt is op het scherm en vervolgens een heleboel vervolgkeuzelijsten en sommige verborgen menu'stoegevoegd. Het heeft ook ondersteuning waarmee iedereen bekijken van de website kundig voor Stuur ons ideeën/klachten over de website of zitten zal voor met nieuwe projecten enz... Deze functie van het verzenden van antwoorden op e-mail van de websiteeigenaar is een beetje lastig als het gaat om het gebruik van PHP en andere server scripting talen...

De rest van de functies zijn allemaal gebaseerd op het gebruik van HTML en CSS. Dit maakt het een veel eenvoudigere voor nieuwe mensen aan de slag op het creëren van hun eigen websites door code in plaats van gewoon de manier waarop die ik ben begonnen toen ik 12 was, maar het beste ding is dat u de gehele website alleen met het gebruik van HTML maar CSS kunt maken met behulp van websites zoals www.webs.com enz voegt een heleboel interactieve elementen toe aan de website. Ik ben momenteel 15 jaar oud dus ik begon te leren over het programmeren van ongeveer 3 jaar geleden.

De tekst die werd gebruikt in de website is gemaakt door het gebruik van Photoshop en sommige andere beeld het uitgeven programma's, gebruikte ik over 3-4 van hen maar ik Photoshop het meest handig gevonden.

Wat heeft u te maken?
Ik maakte een website die is volledig functioneel en zo snel als ik mijn computer bijvallen en werken zal ik beginnen online hosting. Alles is ingesteld en klaar om te worden gehost, maar mijn hosting computer neer zoals het onlangs kreeg overwerkte zoals ik het gebruiken voor het hosten van andere dingen zo goed zoals minecraft servers. Dit is een website die vitrines de basisprincipes van web ontwerpen als ik weet dat we kunnen krijgen in een veel meer geavanceerde programmeertechnieken waardoor zeer goede websites.

Hoe u het?
Ik had altijd een belang van programmeren en elektronica. Toen ik zag een heleboel echt goed ontworpen en zeer goed uitziende websites, ik wist dat ik moest proberen om mezelf. Code van de website die ik gebruikte programma's zoals Microsoft voorpagina en Microsoft word, ik toch genoten van het gebruik voorpagina veel meer dan word als voorpagina maakt het een stuk makkelijker om te beginnen met het maken van websites, want het wijst op een aantal veelvoorkomende fouten van de code en kleuren van verschillende tekst in verschillende kleuren te scheiden van de codering van het schrijven niet Profissionais enz... Mijn computer techer op school ook sociaal assistente mij alot door het onderwijs mij nieuwe dingen zoals hoe aan te passen van vormen/afmetingen/oriëntatie van verschillende daling onderaan dozen en het effect van de arcering enz...

Waar je het maken?
Op mijn computer in mijn huis. Soms werkte ik op het op school zo goed toen ik tijd had.

Wat heb je geleerd?
Door het creëren van deze website ik een heleboel dingen geleerd, ik geleerd hoe te zetten de codering ik geleerd te gebruiken en ik geleerd hoe om toe te treden omhoog stukken en brokken van HTML en CSS codering ik geleerd op school en online. Alvorens deze website ik altijd was onzeker als ik kan maken van een website kunnen hosten het online als ik was niet zeker hoe alles wat ik geleerd zou kloppen om mij een succesvol resultaat. Nu ik ben veel meer vertrouwen over het maken van websites en kan aan de slag op het creëren van werkelijke, serieuze en goede websites met behulp van dit als een begin af:). Een van de grootste verrassingen die ik tegenkwam nadat ik klaar maken die de hele website dat ik ontdekte dat ik niet had bevat ondersteuning voor het gebruik op andere browsers zoals Google Chrome, Safari enz was zoals toen ik werkte ik alleen Mozilla Firefox gebruikt voor het testen... Hierdoor ik moest meer code doorlopen en leren een heleboel andere dingen om ervoor te zorgen dat de website op Google Chrome en andere browsers draaiden.

Ik maakte ook een instructable ongeveer een jaar geleden over de basisprincipes van website codering en creëren wanneer ik net begonnen met het leren hoe aan de code van HTML en CSS, dus neem een kijkje op het voor de volslagen basics van web ontwerpen, maar voor het maken van meer geavanceerde websites moet je leren meer diepe en gedetailleerde CSS en JavaScript codering... die hopelijk zal ik beginnen met het leren snel.

Hoop dat dit inspireert mensen om te beginnen met het maken van hun eigen websites en pronken met hun creativiteit en talent.

"HTML-code voor pagina 1"

koppelen aan stijl blad "style.css"

<! DOCTYPE html publiek "-//w3C//DTD HTML 5.0 / / nl" >

< html >

< head >

< link href="CSS/style.css" rel = "stylesheet" type = "text/css" >
< titel > DIY Genius < / title >
< metanaam = "description" content = "leren dingen die je nooit voordat wist! Maak je eigen DIY projecten! Een DIY meester geworden!" >
< metanaam = "keywords" content = "website, nieuwe, DIY, projecten, verleen, Craft, beste, afval, technologie, Workshop, Craft" >

< / head >

< body bgcolor = #CCCCCC >

< div id = "container" >

< div id = "header" >
< a naam = 'Start van pagina' >< /a >
< tabel breedte = 100% align = center background="Images/headerbackground.jpg" >
< tr >
< td breedte = "1000px" align = "center" >< img src="Images/Title.jpg" breedte = "916px" height = "198px" >< /td >
< td uitlijnen = rechts >< H5 > inhoud van < / H5 >< een href = " >< img src = "Afbeeldingen/instructables-logo.png" onmouseover = "src =' beelden/instructables-logo1.jpg'" onmouseout = "src =' beelden/instructables-logo.png'" style = "border-radius: 0px;" >< /a >< /td >
< /tr >
< / table >
< / div >

< br >< /br >

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

< ul >

< li >< een href = "#" > < /a > materialen
< ul >
< li >< een 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 banden < /a >< /li >
< li >< een 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" > < /a >< /li > soldeer
< li >< een 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" > < /a >< /li > Wick
< li >< een 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" > elektrische Tape < /a >< /li >
< /ul >
< /li >

< li >< een href = "#" > verwijzing < /a >
< ul >
< li >< een href = "http://en.wikipedia.org/wiki/Cable_tie" target = "_blank" > Zip Tie < /a >< /li >
< li >< een href = "http://www.performance-pcs.com/catalog/index.php?main_page=index & cPath = 44_80" target = "_blank" > Zip Tie anker < /a >< /li >
< li >< een href = " target = "_blank" > Zip Tie mand < /a >< /li >
< /ul >
< /li >

< li >< een href = "#" > DIY projecten < /a >
< ul >
< li >< een href = "Startsite 1.htm" > Zip Tie mand < /a >< /li >
< li >< een href = "Main Page 2.htm" > LED nacht Lamp < /a >< /li >
< /ul >
< /li >

< /ul >

< / div >
< / div >

< div id = "Info" >
< h3 > Auteur: < een href = " target = "_blank" > BladeFyre Studios < /a >< / h3 >
< h4 > geplaatst: 26 Jul 2011 < / h4 >
< h4 > licentie: geen < abbr titel = "Alle rechten voorbehouden" > (arr.) < / abbr >< / h4 >
< h5 > Related: Zip Tie, mand, weven, Plastic < / h5 >
< / div >

< div id = "lichaam" style = "width: 1110px; hoogte: 1140px ">

< img src = "Afbeeldingen/rubriek 1.jpg" alt = "Verleen een stropdas Zip mand" >< /br >

< artikel >
< afbeelding src = "Afbeeldingen/Zip-tie-basket.jpg" alt = "Zip binden mandje" >
< / artikel >
< artikel >
< / artikel >
< artikel >
< / artikel >
< artikel >< p >< /p >
Nu zullen we leren hoe maak je een zip binden mand met ongeveer 100 treksluiters...
< p >< /p > u zal zitten kundig voor deze mand voor een heleboel dingen gebruiken!
< br / > ik persoonlijk gebruik het voor mijn soldeer, wick en elektrische tape
< br / >
< br / >
< / artikel >

< ol >

< artikel >
< H2 >< li >< b > materialen nodig: < /b >< /li >< / H2 >
< afbeelding van src="Images/Supplies.jpg" alt = "Leveringen" >
< ul >
< li >< p > 16 X ankers (1 "X 1") < /p >< /li >
< li >< p > 100 X Zip banden (7 3/8 op lange) < /p >< /li >
< /ul >
< br > ik denk dat je kon gebruiken elke grootte afhankelijk van hoe groot of klein je wilt om uw mandje! < /br >
< / artikel >

< artikel >
< H2 >< li >< b > Set-Up < /b >< /li >< / H2 >
< afbeelding src = "Afbeeldingen/Set-up.jpg" alt = "Set Up" >
< afbeelding src = "afbeeldingen/F6EVZBQGQKLPAPE. MEDIUM.jpg"alt ="Set Up">
< p >< /p > Lay-out de 16 ankers in een 4 X 4 vierkante
< br / > één Zip gelijkspel doorverbonden met een rij van 4, doen dit voor hen allen, maar de richting van Zip banden worden afgewisseld.
< / artikel >

< artikel >
< H2 >< li >< b > weven weg < /b >< /li >< / H2 >
< afbeelding src = "Afbeeldingen/Weave-Away.jpg" alt = "Weave, Weave en Weave" >
< afbeelding src = "afbeeldingen/FEMYGPIGQKM05QC. MEDIUM.jpg"alt ="Weeft op en">
< afbeelding src = "afbeeldingen/F096D66GQKLPAPS. MEDIUM.jpg"alt ="Weaving langs">
< p >< /p > weven de banden van 7-Zip aan weerskanten (opnieuw afwisselend richting)
< br / > dan opvouwen van de zijkanten en de Zip-banden met elkaar verbinden...
< blockquote >< p >< /p > Opmerking: Ik vond het makkelijker om 4 Zip banden gebruiken om een vierkant dan weven het in alle 4 zijden tegelijk... < / blockquote >
< / artikel >

< artikel >
< H2 >< li >< b > Secure het weefsel < /b >< /li >< / H2 >
< afbeelding src = "Afbeeldingen/Secure-de-weave.jpg" alt = "Beveiligen het weefsel" >
< afbeelding src = "afbeeldingen/FTGOJZUGQKM4NRK. MEDIUM.jpg"alt ="Secure de hoeken">
< p >< /p > Trim uit overtollige Zip gelijkspel eindigt
< br / > een gelijkspel Zip verbinding een hoek een hoek om het weefsel te gebruiken
< / artikel >

< artikel >
< H2 >< li >< b > Peel, vasthouden en vul < /b >< /li >< / H2 >
< afbeelding src = "Afbeeldingen/Peel-Stick-en-Fill.jpg" alt = "Peeling, steken en vullen" >
< p >< /p > Zoek een plek om te houden van de mand (dat wil zeggen een werk Bank, dressoir, teller, etc..)
< br / > de steun afschilferen van de ankers.
< p >< /p > plaats op de vestiging te installeren, stevig te drukken om de mand te gelijkmatig houden!
< br / > plaats van de items die u wilt opslaan in de mand!
< p >< /p > In mijn geval ik mijn soldeer, Wick en Electrical tape in het opslaan!
< / artikel >

< artikel >
< H2 >< li >< b > middelen, Help < /li >< /b >< / H2 >
< tabel align = "left" border = "1" width = "40%" hoogte = "100px" >
< colgroup >
< col klasse = "Kolom1" >
< col klasse = "Kolom2" >
< / colgroup >
< tr >
< th colspan = "2" style = "background-color: #333333" >< tekstkleur = "FFFFFF" > metingen < / lettertype >< /th >
< /tr >
< tr >
< th breedte = "47%" stijl = "background-color: #686868" >< tekstkleur = "FFFFFF" > Zip banden < / lettertype >< /th >
< th breedte = "49%" style = "achtergrondkleur: #686868" >< tekstkleur = "FFFFFF" > mand grootte < / lettertype >< /th >
< /tr align = "center" >
< tr align = "center" >
< td breedte = "47%" > 100 < /td >
< td breedte = "49%" > 10cm < /td >
< /tr >
< tr align = "center" >
< td breedte = "47%" > 200 < /td >
< td breedte = "49%" > 20cm < /td >
< /tr >
< tr align = "center" >
< td breedte = "47%" > 300 < /td >
< td breedte = "49%" > 30cm < /td >
< /tr >
< tr align = "center" >
< td breedte = "47%" > 400 < /td >
< td breedte = "49%" > 40cm < /td >
< /tr >
< tr align = "center" >
< td breedte = "47%" > 500 < /td >
< td breedte = "49%" > 50cm < /td >
< /tr >
< tr align = "center" >
< td breedte = "47%" > 600 < /td >
< td breedte = "49%" > 60cm < /td >
< /tr >
< / table >
< p >< /p >
< / artikel >

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

< artikel >
< H2 >< li >< b > FAQ < /b >< /li >< / H2 >
< details >
< samenvatting >< em > hoe sterk is de mand? < /em >< / overzicht >
< p > het is vrij sterk, genoeg voor thuis gebruik < /p >
< / details >
< details >
< samenvatting >< em > hoe lang duurde het voordat maken? < /em >< / overzicht >
< p > lang niet, ongeveer 1 week < /p >
< / details >
< details >
< samenvatting >< em > Is dit uw eigen idee? < /em >< / overzicht >
< p > Ja, ik het bedacht door mezelf... < /p >
< / details >
< / artikel >

< br / >< br / >

< fieldset >
< legende >< h1 > Stuur ons uw gedachten < / h1 >< / legende >
< vormen actie = "mailto:vishalapr methode ="post">
< tabel >
< tr >
< td > naam: < /td >
< td >< input type = "text" name = "naam" value = "Geef uw naam" grootte "35" = >< /td >
< /tr >
< tr >
< td > E-mail: < /td >
< td >< input type = "text" name = "e-mail" value = "Voer uw e-mailadres" grootte "35" = >< /td >
< /tr >
< tr >
< td valign = "top" > Message: < /td >
< td >< textarea rijen = "5" cols = "35" >< / textarea >< /td >
< /tr >
< tr >
< td > & nbsp; < /td >
< td >< input type = "submit" waarde = "Verstuur!" >< /td >
< /tr >
< / table >
< / form >
< / fieldset >

< br / >

< een href = "#Start van pagina" > springen naar het begin van de pagina < /a >

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

< /ol >

< / div >

< br >< /br >

< div id = "voettekst" >
< center >< tekengrootte = "3" > Copyright © 2012 < abbr titel = "www.DIYGenius.com" > & nbsp; DIYGenius.com, & nbsp; < / abbr > Alle rechten voorbehouden. < / lettertype >< / center >
< / div >

< / div >

< / body >

< / html >

"HTML-code voor pagina 2"

<! DOCTYPE html publiek "-//w3C//DTD HTML 5.0 / / nl" >

< html >

< head >

< / head >

< body bgcolor = #CCCCCC >

< div id = "container" >

< br >< /br >

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

< ul >

< li >< een href = "#" > < /a > materialen
< ul >
< li >< een href = "http://www.ebay.com/itm/10-Sheets-1-8-Clear-Cast-Acrylic-Plexiglass-12-x-12-/290409405568?pt=LH_DefaultDomain_0 & hash = item439dbfdc80" > acryl blad < /a >< /li >
< li >< een href = "http://www.ebay.com/itm/10-x-5mm-Blue-LED-Light-emitting-Diodes-10000mcd-gift-/320568095904?pt=LH_DefaultDomain_0 & hash = item4aa358f4a0" > < /a >< /li > LEDs
< li >< een href = "http://www.ebay.com/itm/Pro-Sanding-Nail-File-Buffing-Sandpaper-Slim-Black-N111-/290610237063?pt=LH_DefaultDomain_0 & hash = item43a9b84e87" > < /a >< /li > schuurpapier
< li >< een href = "http://www.ebay.com/itm/NEW-10X-CR2025-2025-3V-Lithium-Button-Cell-Coin-Battery-/110793380114?pt=US_Batteries & hash = item19cbccd112" > knop celbatterij < /a >< /li >
< li >< een href = "http://www.ebay.com/itm/2pcs-CR2032-CR2025-Notebook-Laptop-PC-Button-Cell-Battery-Socket-Base-Holder-/150678515771?pt=US_Batteries & hash = item231523b03b" > knop cel houder < /a >< /li >
< li >< een href = "http://www.ebay.com/itm/Vinyl-Electrical-Tape-NEW-General-Use-/390306485709?pt=LH_DefaultDomain_0 & hash = item5ae01455cd" > elektrische Tape < /a >< /li >
< li >< een 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" > pulsdrukker < /a >< /li >
< /ul >
< /li >

< li >< een href = "#" > verwijzing < /a >
< ul >
< li >< een href = "http://en.wikipedia.org/wiki/Poly%28methyl_methacrylate%29" > acryl blad < /a >< /li >
< li >< een href = "http://en.wikipedia.org/wiki/Light-emitting_diode" > < /a >< /li > LED
< li >< een href = "http://en.wikipedia.org/wiki/Sandpaper" > < /a >< /li > schuurpapier
< li >< een href = "http://en.wikipedia.org/wiki/Button_cell" > knop cel < /a >< /li >
< li >< een href = "http://en.wikipedia.org/wiki/Switch" > pulsdrukker < /a >< /li >
< li >< een href = " > LED nacht Lamp < /a >< /li >
< /ul >
< /li >

< /ul >

< / div >
< / div >

< div id = "Info" >
< h3 > Auteur: < een href = " target = "_blank" > motadacruz < /a >< / h3 >
< h4 > geplaatst: 11 Feb, 2010 < / h4 >
< h4 > licentie: geen < abbr titel = "Alle rechten voorbehouden" > (arr.) < / abbr >< / h4 >
< h5 > Related: LED kubus, ambient licht, lamp, nacht < / h5 >
< / div >
< / div >

< div id = "lichaam" style = "width: 1117px; hoogte: 3072px ">

< img src = "Afbeeldingen/rubriek 2.jpg" alt = "Maak een LED-nachtlampje" >< /br >

< artikel >
< afbeelding src = "Afbeeldingen/LED-kubus-nacht-Light.jpg" alt = "Het eindproduct" >
< / artikel >
< artikel >
< p >< /p > deze LED lamp zal perfect zijn in elk huis. Het geeft meer licht dan ik gedacht had.
< br / > vandaag ontving ik de laatste producten ik bestelde aan de slag deze LED kubus te bouwen.
< p >< /p > deze kubus maakte ik wel 9 x 9 cm x 9 cm... het voelt groter dan die. Misschien omdat het geeft toe te wijzen van licht.
< br / > In de meeste van mijn projecten en instructables gebruik ik een knevel schakelaar om te schakelen LED's in- en uitschakelen.
< br / > ik wilde iets anders te doen deze keer. Moet zeggen dat het werkte vrij ontzagwekkend.
< br / > op de bodem is kleine pulsdrukker dat de LED's blijken zal in- en uitschakelen. De schakelaar is sterk genoeg
om te houden van de kubus.
< br / > maar wanneer het vak wordt ingedrukt, de switch niet sterk genoeg is om te klikken terug
vanwege het gewicht.
< br / > dus op het vak te drukken zal het licht weer op, en omhoog te trekken van het vak zal zet hem weer uit.
< p >< /p > hieronder ziet u een film die ik heb gemaakt om te laten zien hoe het werkt.
< p >< /p > gaat als u denkt dat het is koel genoeg is, u naar stap één zodat kunt u alle materialen en hulpmiddelen om te bouwen uw eigen!
< br / >
< br / >
< iframe breedte = "640" height = "480" src = "http://www.youtube.com/embed/PBjm83P_AxM" frameborder = "0" allowfullscreen >< / iframe >
< / artikel >

< ol >

< artikel >
< p >< /p >< H2 >< li > Tools & materialen < /li >< / H2 >
< afbeelding src = "Afbeeldingen/Tools-Materials.jpg" alt = "Materialen" >
< p >< /p > de materialen gebruikt voor dit project zijn vrij gemakkelijk te krijgen en niet te duur.
< br / > slechts enkele hulpmiddelen misschien niet in ieders werkset zijn. Maar er zijn ook veel tools die u kunt gebruiken
< br / > in plaats daarvan als u niet in staat om uw handen op een aantal.
< ul >
< p >< b > materialen < /b >< /p >
< li >< br / > - acrylaat A4-blad - 3mm dik (ook bekend als ' plexiglas') < /li >
< li >< br / >-fijn schuurpapier (400 heeft een geweldige job!) < /li >
< li >< br / > - 3 x 5mm LED (ik gebruikte blauw, geeft een goed effect. Maar elke kleur kan worden gebruikt) < /li >
< li >< br / >-2 x batterij (CR2032) van de cellen van de knop < /li >
< li >< br / >-2 x knop cel houder < /li >
< li >< br / >-kleine pulsdrukker < /li >
< li >< br / > - elektrische draad (geript van mijn fiets) < /li >
< /ul >
< / artikel >

< artikel >
< p >< H2 >< li > snijden het acryl < /li >< / H2 >< /p >
< afbeelding src = "Afbeeldingen/Cutting-de-acrylic.jpg" alt = "Snijden en Mending..." >
< afbeelding src = "afbeeldingen/FBARYMIG5FR5LZM. MEDIUM.jpg"alt ="Snijden het acryl">
< p >< /p > eerst moeten we snijden de 6 zijden van de kubus uit de acrylplaat.
< p >< p >< /p > 1. Krijgen van de pen en teken van zes gelijke vierkantjes op de acrylplaat. Rechte lijnen zijn nodig, dus tenzij
< br / > je hebt een echte vaste hand, een liniaal gebruiken :)
< p >< /p > 2. Gebruik de jig saw te snijden van de vierkantjes van de acrylplaat. Doe dit zo perfect als je kunt.
< blockquote >< br / > Opmerking: alle pleinen opnieuw moet (bijna) hetzelfde (foto 2). < / blockquote >
< / artikel >

< artikel >
< p >< H2 >< li > Frosting het acryl < /li >< / H2 >< /p >
< afbeelding src = "Afbeeldingen/glazuur-de-acrylic.jpg" alt = "Glazuur" >
< afbeelding src = "afbeeldingen/FJ5WNU7G5FR5M20. MEDIUM.jpg"alt ="Peeling">
< afbeelding src = "afbeeldingen/FHZ9CDFG5FR5M1Z. MEDIUM.jpg"alt ="Glazuur en Peeling">
< p >< /p > het acryl is "helder water". Dat is niet wat we willen. Wij willen dat een matte (of diffuus) kubus aan het verspreidt
< br / > het licht even te geven een leuk effect.
< p >< /p > u kunt waarschijnlijk krijgen acrylplaten die reeds hebben een matte look. Maar ik kon niet hen hier vinden.
< br / > gevonden 1 winkel, maar ze betalen meer toewijzen dan het water duidelijk een. Aangezien schuurpapier kost niet
< br / > veel ging ik voor het water duidelijk een :)
< p >< /p > 1. Verwijder het beschermende plastic uit elke plaat (foto 1 en 2).
< p >< /p > 2. Nu krijgen de fijn schuurpapier (400) en plaats deze op een tafel, met de schuren kant omhoog. Krijgen van een plaat en
< br / > wrijf het over het schuurpapier in een draaiende beweging. Als één kant is genoeg frosted, draai de plaat om en doen
< br / > het zelfde met die kant.
< p >< /p > om te zien of je een goede baan hebt op te schuren, kunt u de platen tegen het licht houdt. Geef het slechte
< br / > onderdelen wat extra schuren.
< / artikel >

< artikel >
< p >< H2 >< li > maken de kubus < /li >< / H2 >< /p >
< afbeelding src = "Afbeeldingen/Make-de-cube.jpg" alt = "Het maken van de kubus!" >
< afbeelding src = "afbeeldingen/FUXRO3AG5FR5M8F. MEDIUM.jpg"alt ="Lid worden van de acryl">
< p >< /p > nu hebben we de platen klaar, die we moeten ze in een kubus vorm te geven.
< br / > voordat je gaat en delen aan elkaar worden gelijmd, zorg ervoor dat eerste ze mooi op elkaar passen. We moeten alle onderdelen
< br / > mooi past.
< p >< /p > 1. Na montage van de platen het lijmpistool en slechts 5 platen aan elkaar worden gelijmd. Als je problemen hebt
< br / > de platen bij elkaar te houden voor het lijmen, kunt u sommige tape hen om samen te houden. Deze manier u
< br / > kan zetten de lijm meer ontspannen.
< p >< /p > 2. De laatste plaat die niet gelijmd op nog moet een gat voor de schakeloptie om in te passen. De boren tool en gebruik
< br / > een boor bits dat is hetzelfde formaat als de schakelaar (hoek tot hoek).
< br / > wanneer u boren bent, dit zeer zorgvuldig doen! U wilt niet te haasten, anders zou je teveel
< br / > druk op het en het breken van de plaat.
< p >< /p > proberen als u de schakeloptie past mooi het gat. Later we gonna het lijmpistool gebruiken om de schakeloptie in plaats.
< / artikel >

< artikel >
< p >< H2 >< li > voorbereiding van de LED's < /li >< / H2 >< /p >
< afbeelding src = "Afbeeldingen/voorbereiden-de-LEDs.jpg" alt = "Testing LEDs" >
< afbeelding src = "afbeeldingen/F6DIVHIG5FR5MBB. MEDIUM.jpg"alt ="Voorbereiding van LEDs">
< p >< /p > zenden als je goofy kijkt op me en kocht water heldere LED's als goed, hier gaan we :)
< p >< /p > 1. Krijg het schuurpapier (opnieuw de 400) en zand van de LED's.
< br / > u kunt zien het verschil van het water duidelijk degenen (foto 1) en de diffuus degenen (foto 2).
< / artikel >

< artikel >
< p >< H2 >< li > maken het circuit < /li >< / H2 >< /p >
< afbeelding src = "Afbeeldingen/Make-de-circuit.jpg" alt = "Het maken van het Circuit" >
< afbeelding src = "afbeeldingen/F3DL04HG5FR5MHF. MEDIUM.jpg"alt ="Verbinding maken onderdelen">
< p >< /p > moeten We nu de zet de schakelaar, LED's en batterijen samen om het circuit.
< br / > om ervoor te zorgen dit circuit is mooi en sterk kunt u de onderdelen samen soldeer. Daar heb ik niet een soldeer
< br / > station ik gebruikte warme lijm te houden ze samen. Misschien niet zo goed op zoek, maar het doet het werk.
< p >< /p > 1. Zet de batterijen in de houder. Ik zou willen doen dit eerste zodat ze zijn iets zwaarder en gemakkelijker te hanteren.
< p >< /p > 2. Breng wat elektrische draad van de positieve kant van 1 batterijhouder aan de negatieve kant van de andere batterijhouder.
< p >< /p > 3. De 2de batterijhouder, ga naar de pulsdrukker met een andere elektrische draad.
< p >< /p > 4. Gebruik wat elektrische draad tegenovergesteld been van de switch verbinden met de positieve poot van de LED's.
< p >< /p > 5. En van de negatieve been van de LED u wat elektrische draad gebruiken om terug te gaan naar de 1ste batterij bedrijf.
< p >< /p > 6. De schakeloptie testen en kijken of de LED's verlicht. Als dat niet het geval is, u een fout gemaakt in de schakeling. Als alles is
< br / > werkt prima, sommige hete lijm gebruiken om ervoor te zorgen de delen bij elkaar blijven. Of u kunt het soldeer hebt u een solderen staion.
< / artikel >

< artikel >
< p >< H2 >< li > < /li >< afronden / H2 >< /p >
< afbeelding src = "afbeeldingen/F6I6UTBG5FR5MI8. MEDIUM.jpg"alt ="Neat and Tidy">
< afbeelding src = "afbeeldingen/FX93ZQOG5FRB5SK. MEDIUM.jpg"alt ="Tidying van">
< afbeelding src = "afbeeldingen/FIQEX3DG5FR5MI7. MEDIUM.jpg"alt ="Finishing up">
< afbeelding src = "afbeeldingen/FBR70K2G5FRB5SJ. MEDIUM.jpg"alt ="En klaar!" >
< p >< /p > We hebben nu alle onderdelen die we nodig hebben. Nu alles wat we moeten doen is het onderste deel zet in de kubus om er een hele kubus.
< br / > 1. De zijkanten van de bodemplaat zand zodat het past precies in de bodem. Wil je de bodemplaat
< br / > iets groter dan het gat het past. Deze manier, zodra je hem daar, het zal blijven steken en zal niet laten gaan
< br / > terwijl het bewegen van de kubus.
< p >< /p > Uiteraard kun je elke gewenste kleur. Je kunt zelfs stellen kleur die veranderende LED's in er maken mooie omgevingslicht.
< / artikel >

< artikel >
< H2 >< li >< b > middelen, Help < /li >< /b >< / H2 >
< tabel align = "left" border = "1" width = "445" >
< colgroup >
< col klasse = "Kolom1" >
< col klasse = "Kolom2" >
< / colgroup >
< tr >
< th colspan = "2" style = "background-color: #045FB4" > metingen < /th >
< /tr >
< tr >
< th breedte = "47%" stijl = "background-color: #045FB4" > acryl grootte < /th >
< th breedte = "49%" stijl = "background-color: #045FB4" > vak grootte < /th >
< /tr >
< tr >
< td breedte = "47%" align = "center" > 60cm < /td >
< td breedte = "49%" align = "center" > 10cm < /td >
< /tr >
< tr >
< td breedte = "47%" align = "center" > 120cm < /td >
< td breedte = "49%" align = "center" > 20cm < /td >
< /tr >
< tr >
< td breedte = "47%" align = "center" > 180cm < /td >
< td breedte = "49%" align = "center" > 30cm < /td >
< /tr >
< tr >
< td breedte = "47%" align = "center" > 140cm < /td >
< td breedte = "49%" align = "center" > 40cm < /td >
< /tr >
< tr >
< td breedte = "47%" align = "center" > 320cm < /td >
< td breedte = "49%" align = "center" > 50cm < /td >
< /tr >
< tr >
< td breedte = "47%" align = "center" > 380cm < /td >
< td breedte = "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 > FAQ < /b >< /li >< / H2 >
< details >
< samenvatting >< em > hoe sterk is de kubus? < /em >< / overzicht >
< p > het is vrij sterk, genoeg voor thuis gebruik < /p >
< / details >
< details >
< samenvatting >< em > hoe lang duurde het voordat maken? < /em >< / overzicht >
< p > lang niet, ongeveer 2-3 weken < /p >
< / details >
< details >
< samenvatting >< em > Is dit uw eigen idee? < /em >< / overzicht >
< p > Ja, ik het bedacht door mezelf... < /p >
< / details >
< / artikel >

< br / >< br / >

< br / >
< br / >

< een href = "#Start van pagina" > springen naar het begin van de pagina < /a >

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

< /ol >

< / div >
< br >< /br >

< / div >

< / body >

< / html >

"CSS-code voor beide pagina's"

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

#body
{
Border: 0px;
padding: 0px;
marge: 0px;
lettertype-familie: Century Gothic;
breedte: 90%;
}

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

#container
{
breedte: 100%;
Border: 0px;
padding: 0px;
marge: 0px;
}

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

#header
{
border-top: 15px solide #333333;
breedte: 100%;
hoogte: 220px;
}

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

#navMenubackground
{
hoogte: 36px;
breedte: 100%;
background-color: #333333;
}

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

#navMenu
{
marge: 0;
opvulling: 0;
positie: absoluut;
links: 33%
}

#navMenu ul
{
marge: 0;
opvulling: 0;
}

#navMenu li
{
marge: 0;
opvulling: 0;
lijst-stijl: none;
float: links;
positie: relatief;
achtergrond: #666666;
border-radius: 20px 5px;
}

#navMenu ul li een
{
text-align: Midden;
lettertype-familie: "Comic Sans MS", cursieve;
text-decoration: none;
hoogte: 30px;
breedte: 150px;
weergeven: blokkeren;
kleur: #FFFFFF;
rand: 1px solid #CCCCCC;
grens-rechts: 2px solide #CCCCCC;
grens-links: 2px solide #CCCCCC;
tekst-schaduw: 1px 1px 1px #000000;
padding: 2px;
border-radius: 20px 5px;
}

#navMenu ul ul
{
positie: absoluut;
zichtbaarheid: verborgen;
boven: 36px;
}

#navMenu ul li:hover ul
{
zichtbaarheid: zichtbaar;
}

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

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

#navMenu ul li:hover ul li een: hover
{
achtergrond: #AAAAAA;
kleur: #000000;
}

#navMenu li een: hover
{
kleur: #FFFFFF;
}

#navMenu li li een: hover
{
kleur: #000000;
}

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

#Info
{
lettertype-familie: Lucida Sans Unicode;
rand: 9px solide #333333;
marge: 2px solide #FFFFFF;
achtergrondkleur: #999999;
float: recht;
hoogte: 450px;
breedte: 300px;
boven: 100px;
positie: relatief;
rechts: 20px;
boven: 55px;
border-radius: 10px;
}

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

#Info een: hover
{
kleur: #FFFFFF;
text-decoration: none;
}

#Info een: actief
{
kleur: #333333;
}

#Info een: link
{
kleur: #333333;
}

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

#footer
{
font-weight: bold;
lettertype-familie: Century Gothic;
kleur: #FFFFFF;
Clear: both;
background-color: #333333;
opvulling: 4px;
breedte: 100%;
positie: vast te stellen;
bottom: 5px;
hoogte: 35px;
}

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

FIELDSET
{
breedte: 500px;
hoogte: 270px;
}

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

abbr
{
font-weight: bold;
lettertype-stijl: cursief;
tekengrootte: ++ 1
}

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

. Kolom1
{
achtergrondkleur: #999999;
}

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

. Kolom2
{
achtergrondkleur: #999999;
}

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

H2
{
tekst-schaduw: 2px 2px 2px #AAAAAA;
}

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

img
{
border-radius: 20px;
}

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

Labels: Ontwerpen, Hosting, Online, Website, CSS, HTML-code

Gerelateerde Artikelen

Verf kan oven met accessoires, schuim gieten, verloren en meer! Toen ik begon te gegoten aluminium het uiteindelijke doel was het bouwen van een draaibank vanaf nul na de dave gingery ...
Ontwerper Pour koffie Ik had dit voedsel presentatie bord dat ik was niet met behulp van een verleden project, opgetrokken uit de restanten va ...
Knex speelgoed spuit hebt u kinderen of jongere broers en zussen, je weet hoe moeilijk het kan zijn om ze te vermaken. Kinderen zijn dol op t ...
Video Game controller riem gespen met geluid een jaar of 2 geleden maakte ik een hoe over het maken van een snes-riem gesp dan begon ik verkopen ze na veel mensen ve ...
Houten Hand Vise dit is een 2-delige houten apparaat dat kan strak grip kleine voorwerpen die tot 3/8 inch dik.Stap 1: Materialen en gere ...