Webseite (HTML und CSS)

Hallo an alle bei Instructables :)

Vor kurzem habe ich versucht, einige Webseiten zu machen und Gastgeber, die sie online nur sehen, wie die HTML- und CSS- ich lernte ausgearbeitet, so dass ich mit einem voll funktionsfähigen Website und Überprüfung Spiele in naher Zukunft machen könnte.

Die Prüfung und Reparatur/meine Fähigkeiten zu verbessern entschied ich mich um einer Website welche Funktionen der Instructables gefiel mir persönlich von

Ich habe versucht, eine Menge von Techniken, um die Website interaktiver zu gestalten zu implementieren. Ich habe eine klebrige Fußzeile die passen, wird auf dem Bildschirm und dann eine Menge von Dropdown - Listen und einige versteckte Menüshinzugefügt. Es hat auch Unterstützung jeder Betrachtung der Internetseite durch die über die Website oder für neue Projekte etc. mit uns Ideen/Beschwerden schicken können... Diese Funktion der Antworten auf die Website-Eigentümer e-Mail senden ist ein wenig knifflig, da es die Verwendung von PHP und andere Skriptsprachen Server beinhaltet...

Der Rest der Funktionen basieren auf der Verwendung von HTML und CSS. Dies macht es viel einfacher für neue Leute für den Einstieg zum Erstellen ihrer eigenen Websites durch Code anstatt mit Websites wie www.webs.com usw. so wie ich begann, als ich 12 war, aber das beste ist, dass Sie die gesamte Website nur mit dem Einsatz von HTML, sondern CSS erstellen können fügt eine Menge von interaktiven Elementen auf der Website. Ich bin derzeit 15 Jahre alt, so begann ich zu lernen über die Programmierung vor ca. 3 Jahren.

Der Text, der in der Website verwendet wurde, wurde durch den Einsatz von Photoshop und einige andere Bildbearbeitungsprogramme, früher habe ich über 3-4 davon aber ich Photoshop die bequemste sein gefunden.

Was hast du gemacht?
Ich habe eine Website, die voll funktionsfähig ist und sobald ich meinen Computer wieder Arbeit bekommen werde ich beginnen, Online-hosting. Ist alles eingestellt und bereit zu Gast zu sein, aber mein Hosting-Computer ausfällt, wie es vor kurzem überarbeitet habe, wie ich es verwenden, für andere Dinge so gut wie Minecraft Server hosting. Dies ist eine Website, die die Grundlagen der Web-Design, da ich weiß, dass wir in viel mehr fortgeschrittenen Programmiertechniken bekommen kann, macht sehr gute Webseiten präsentiert.

Wie haben Sie es gemacht?
Ich hatte immer ein Interesse an Programmierung und Elektronik. Als ich eine Menge von wirklich gut gestaltet und sehr gut aussehende Websites sah ich wusste, ich musste versuchen, selbst eine zu machen. Die Website Code ich Programme wie Microsoft Front-Page verwendet und Microsoft Word, ich aber genossen, mit Front-Seite viel mehr als nur Wort als Front-Seite macht es viel einfacher für nicht Profis zum Erstellen von Websites wie es einige häufige Codefehler ausführt und anderen Text in verschiedenen Farben zur Codierung von schreiben zu trennen Farben etc.... Mein Computer-Techer in der Schule half mir viel durch den Unterricht mir neue Dinge wie zum Beispiel Formen/Größen/Ausrichtung der verschiedenen Dropdown-Boxen und Schatteneffekt etc. anpassen...

Wo hast du es gemacht?
Auf meinem Computer in meinem Haus. Manchmal habe ich es in der Schule als auch als ich Zeit hatte.

Was hast du gelernt?
Durch die Schaffung dieser Website ich habe viele Dinge gelernt, ich habe gelernt, wie man die Codierung, ich habe gelernt, zu verwenden, und ich habe gelernt, wie Stücke von HTML und CSS verbinden Codierung habe ich in der Schule und online gelernt. Vor der Erstellung dieser Website war ich immer würde nicht sicher, ob ich kann eine Website zu machen und können Host online-da war ich unsicher, wie alles, was ich gelernt habe summieren sich um zu mir ein erfolgreiches Ergebnis. Ich bin viel selbstsicherer, was die Erstellung von Websites und zum Erstellen aktuelle, ernste und gute Websites mit diesem als Start ab:) loslegen können. Eine der größten Überraschungen begegnete ich, nachdem ich machen, die die gesamte Website, fand ich heraus fertig wurde, ich hatte nicht Unterstützung für den Einsatz auf anderen Browsern wie Google Chrome, Safari usw. enthalten, wie als ich arbeitete ich nur Mozilla Firefox zu Testzwecken... dadurch hatte ich mehr Code durchgehen und lernen eine Menge anderer Dinge verwendet zu achten, dass die Website auf Google Chrome und anderer Browser lief.

Ich habe auch ein instructable etwa ein Jahr vor über die Grundlagen der Website Codierung und Schöpfung, wenn ich gerade erst zu lernen begonnen, wie man HTML und CSS, code so haben einen Blick auf sie für die völligen Grundlagen der Web-Design, aber dafür erweiterte Websites Sie lernen sollten, mehr Tiefe und detaillierte CSS- und JavaScript-Codierung..., die hoffentlich werde ich bald lernen zu beginnen.

Hoffe, das inspiriert Menschen zu beginnen, ihre eigenen Websites und ihre Kreativität und ihre Talente zu zeigen.

"HTML-Code für die Seite 1"

Stil Blatt "style.css" verlinken

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

< html >

< Head >

< href="CSS/style.css link" Rel = "Stylesheet" Type = "Text/Css" >
< Titel > DIY Genie < / title >
< Meta Name = "Description" Content = "erfahren Sie Dinge, die man nie wusste, vor! Machen Sie Ihre eigenen DIY Projekte! Werden Sie einem DIY Meister!" >
< Meta Name = "Keywords" Content = "Website, neue, DIY-Projekte machen, Handwerk, beste, Abfall, Technik, Werkstatt, Handwerk" >

< / head >

< Body Bgcolor = #CCCCCC >

< Div-Id = "Container" >

< Div-Id = "Header" >
< a Name = "Start Seite" >< / a >
< Tisch Breite = 100 % align = Center background="Images/headerbackground.jpg" >
< tr >
< td Breite = "1000px" align = "center" >< Img src="Images/Title.jpg" Breite = Höhe der "916px" = "198px" >< /td >
< td ausrichten = rechts >< H5 > Inhalt aus < / H5 >< ein Href = " >< Img Src = "Bilder/Instructables-logo.png" Onmouseover = "Src =" Bilder/Instructables-Logo1.jpg "" Onmouseout = "Src =" Bilder/Instructables-Logo.png "" Style = "Border-Radius: 0px;" >< / a >< /td >
< /tr >
< / table >
< / Div >

< Br >< BR >

< Div-Id = "NavMenubackground" >
< Div-Id = "NavMenu" >

< Ul >

< li >< ein Href = "#" > </a > Materialien
< Ul >
< li >< ein 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 Krawatten </a >< li >
< li >< ein 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 > Löten
< li >< ein 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 >< ein 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" > </a >< li > elektrische Band
< /ul >
< li >

< li >< ein Href = "#" > </a > Referenz
< Ul >
< li >< ein Href = "http://en.wikipedia.org/wiki/Cable_tie" Target = "_blank" > Zip Krawatte </a >< li >
< li >< ein Href = "http://www.performance-pcs.com/catalog/index.php?main_page=index & cPath = 44_80" Target = "_blank" > Zip Krawatte Anker </a >< li >
< li >< ein Href = " Target = "_blank" > Zip Krawatte Korb </a >< li >
< /ul >
< li >

< li >< ein Href = "#" > DIY Projekte </a >
< Ul >
< li >< ein Href = "Main Seite 1.htm" > Zip Krawatte Korb </a >< li >
< li >< ein Href = "Main Seite 2.htm" > LED-Nachtlicht </a >< li >
< /ul >
< li >

< /ul >

< / Div >
< / Div >

< Div-Id = "Info" >
< h3 > Autor: < ein Href = " Target = "_blank" > BladeFyre Studios </a >< / h3 >
< h4 > veröffentlicht: 26. Juli 2011 < / h4 >
< h4 > Lizenz: keine < Abbr Titel "All Rights Reserved" = > (ARR) < / Abbr >< / h4 >
< h5 > Related: Zip-Krawatte, Korb, Weberei, Kunststoff < / h5 >
< / Div >

< Div-Id = "Körper" Style = "Breite: 1110px; Höhe: 1140px ">

< Img Src = "Images/Heading 1.jpg" Alt = "Machen einen Zip-Krawatte-Korb" >< BR >

< Artikel >
< Bild Src = "Images/Zip-Krawatte-basket.jpg" Alt = "Zip binden Korb" >
< / Artikel >
< Artikel >
< / Artikel >
< Artikel >
< / Artikel >
< Artikel >< p >< / p >
Wir werden jetzt wie erstelle ich einen Reißverschluss Korb mit etwa 100 Kabelbinder zu binden...
< p >< / p > werden Sie in der Lage, diesen Korb für eine Menge Dinge zu verwenden!
< Br / > ich persönlich benutze es um zu mein Lot, Docht und Isolierband zu halten
< Br / >
< Br / >
< / Artikel >

< Ol >

< Artikel >
< H2 >< li >< b > Materialien benötigt: </b >< li >< / H2 >
< Bild src="Images/Supplies.jpg" Alt = "Lieferungen" >
< Ul >
< li >< p > 16 X Anker (1 "X 1") </p >< li >
< li >< p > 100 X Zip-Bindungen (7 3/8 Zoll lang) </p >< li >
< /ul >
< Br > ich denke, Sie könnte verwenden beliebiger Größe je nachdem, wie groß oder klein, das Sie Ihrem Warenkorb vornehmen möchten!! < BR >
< / Artikel >

< Artikel >
< H2 >< li >< b > Setup </b >< li >< / H2 >
< Bild Src = "Images/Set-up.jpg" Alt = "Set Up" >
< Bild Src = "Images/F6EVZBQGQKLPAPE. MEDIUM.jpg"Alt ="Set Up">
< p >< / p > legen Sie die 16 Anker in einem 4 X 4-Quadrat
< Br / > habe eine Zip Krawatte durch eine Reihe von 4, dies gilt für alle von ihnen, aber wechseln die Richtung der Zip Krawatten.
< / Artikel >

< Artikel >
< H2 >< li >< b > weben Weg </b >< li >< / H2 >
< Bild Src = "Images/Weave-Away.jpg" Alt = "Weben, Weben und Weben" >
< Bild Src = "Images/FEMYGPIGQKM05QC. MEDIUM.jpg"Alt ="Webt und">
< Bild Src = "Images/F096D66GQKLPAPS. MEDIUM.jpg"Alt ="Weaving entlang">
< p >< / p > weben 7 Zip-Bindungen auf jeder Seite (wieder Richtung wechselnd)
< Br / > dann Klappen Sie die Seiten und die Zip-Bindungen miteinander verbinden...
< Blockquote >< p >< / p > Hinweis: Ich fand es einfacher, 4 Zip-Verbindungen verwenden, um ein Quadrat zu machen dann Weben es in allen 4 Seiten gleichzeitig... < / Blockquote >
< / Artikel >

< Artikel >
< H2 >< li >< b > sichern die Webart </b >< li >< / H2 >
< Bild Src = "Images/Secure-the-weave.jpg" Alt = "Sicherung der Webart" >
< Bild Src = "Images/FTGOJZUGQKM4NRK. MEDIUM.jpg"Alt ="Sichern die Ecken">
< p >< / p > schneiden Sie überschüssiges Zip enden
< Br / > Stimmengleichheit Zip verwenden, um eine Ecke, eine Ecke, um das Gewebe zu sichern verbinden
< / Artikel >

< Artikel >
< H2 >< li >< b > Schale, kleben und füllen Sie </b >< li >< / H2 >
< Bild Src = "Images/Peel-Stick-und-Fill.jpg" Alt = "Peeling, kleben und füllen" >
< p >< / p > suchen Sie einen Ort, um den Korb zu halten (d.h. eine Werkbank, Kommode, Zähler, etc...)
< Br / > entfernen Sie die Schutzfolie von der Anker.
< p >< / p > legen Sie auf den Speicherort zu installieren, drückt fest, um den Korb gleichmäßig bleiben erhalten!
< Br / > legen Sie die Artikel im Warenkorb gespeichert werden sollen!
< p >< / p > In meinem Fall ich speichere meine Lot, Docht und Elektrotechnik Band drin!
< / Artikel >

< Artikel >
< H2 >< li >< b > Ressourcen helfen < li >< / b >< / H2 >
< Tabelle ausrichten = "linke" Border = "1" Breite = "40 %" Höhe "100px" = >
< Colgroup >
< Col Klasse "Column1" = >
< Col Klasse "Spalte2" = >
< / Colgroup >
< tr >
< th Colspan = "2" Style = "Hintergrundfarbe: #333333" >< Schriftfarbe = "FFFFFF" > Messungen < / Font >< Radikalund >
< /tr >
< tr >
< th Breite = "47 %" Style = "Hintergrundfarbe: #686868" >< Schriftfarbe = "FFFFFF" > Zip Krawatten < / Schriftart >< Radikalund >
< th Breite = "49 %" Style = "Hintergrundfarbe: #686868" >< Schriftfarbe = "FFFFFF" > Korb Größe < / Font >< Radikalund >
< /tr align = "center" >
< tr align = "center" >
< td Breite = "47 %" > < /td > 100
< td Breite "49 %" = > 10cm < /td >
< /tr >
< tr align = "center" >
< td Breite "47 %" = > 200 < /td >
< td Breite "49 %" = > 20cm < /td >
< /tr >
< tr align = "center" >
< td Breite "47 %" = > 300 < /td >
< td Breite "49 %" = > 30cm < /td >
< /tr >
< tr align = "center" >
< td Breite "47 %" = > 400 < /td >
< td Breite "49 %" = > 40cm < /td >
< /tr >
< tr align = "center" >
< td Breite "47 %" = > 500 < /td >
< td Breite "49 %" = > 50cm < /td >
< /tr >
< tr align = "center" >
< td Breite "47 %" = > 600 < /td >
< td Breite "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 >
< Zusammenfassung >< Em > wie stark ist der Korb? < /em >< / Zusammenfassung >
< p > sie ziemlich stark ist, verwenden Sie genug für Zuhause </p >
< / details >
< Details >
< Zusammenfassung >< Em > wie lange hat es gedauert, machen? < /em >< / Zusammenfassung >
< p > lange nicht, ca. 1 Woche </p >
< / details >
< Details >
< Zusammenfassung >< Em > ist das Ihre eigene Idee? < /em >< / Zusammenfassung >
< p > Ja, ich dachte, dass es sich von mir... </p >
< / details >
< / Artikel >

< Br / >< Br / >

< Fieldset >
< Legende >< h1 > senden Sie uns Ihre Gedanken < / h1 >< / Legende >
< form Action = "mailto:vishalapr Methode ="post">
< Tabelle >
< tr >
< td > Name: < /td >
< td >< input Type = "Text" Name = "Name" Wert = "Geben Sie Ihren Namen" Größe "35" = >< /td >
< /tr >
< tr >
< td > E-Mail: < /td >
< td >< input Type = "Text" Name = "e-Mail" Value = "Geben Sie Ihre e-Mail-Adresse" Größe = "35" >< /td >
< /tr >
< tr >
< td Valign = "top" > Nachricht: < /td >
< td >< Textarea Zeilen = "5" Cols = "35" >< / Textarea >< /td >
< /tr >
< tr >
< td > & Nbsp; < /td >
< td >< input Type = "submit" Value = "Senden!" >< /td >
< /tr >
< / table >
< / form >
< / Fieldset >

< Br / >

< ein Href = "#Start Seite" > springt zum Anfang der Seite </a >

< Br / >< Br / >< Br / >< Br / >< Br / >

< /ol >

< / Div >

< Br >< BR >

< Div-Id = "Footer" >
< Center >< Schriftgröße = "3" > Copyright © 2012 < Abbr Titel = "www.DIYGenius.com" > & Nbsp; DIYGenius.com, & Nbsp; < / Abbr > All Rights Reserved. < / Font >< / center >
< / Div >

< / Div >

< / body >

< / html >

"HTML-Code für die Seite 2"

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

< html >

< Head >

< / head >

< Body Bgcolor = #CCCCCC >

< Div-Id = "Container" >

< Br >< BR >

< Div-Id = "NavMenubackground" >
< Div-Id = "NavMenu" >

< Ul >

< li >< ein Href = "#" > </a > Materialien
< Ul >
< li >< ein Href = "http://www.ebay.com/itm/10-Sheets-1-8-Clear-Cast-Acrylic-Plexiglass-12-x-12-/290409405568?pt=LH_DefaultDomain_0 & Hash = item439dbfdc80" > Acrylic Sheet </a >< li >
< li >< ein 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 >< ein Href = "http://www.ebay.com/itm/Pro-Sanding-Nail-File-Buffing-Sandpaper-Slim-Black-N111-/290610237063?pt=LH_DefaultDomain_0 & Hash = item43a9b84e87" > </a >< li > Schleifpapier
< li >< ein Href = "http://www.ebay.com/itm/NEW-10X-CR2025-2025-3V-Lithium-Button-Cell-Coin-Battery-/110793380114?pt=US_Batteries & Hash = item19cbccd112" > Knopfzelle </a >< li >
< li >< ein Href = "http://www.ebay.com/itm/2pcs-CR2032-CR2025-Notebook-Laptop-PC-Button-Cell-Battery-Socket-Base-Holder-/150678515771?pt=US_Batteries & Hash = item231523b03b" > Schaltfläche Küvettenhalter </a >< li >
< li >< ein Href = "http://www.ebay.com/itm/Vinyl-Electrical-Tape-NEW-General-Use-/390306485709?pt=LH_DefaultDomain_0 & Hash = item5ae01455cd" > </a >< li > elektrische Band
< li >< ein 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" > </a >< li > Taster
< /ul >
< li >

< li >< ein Href = "#" > </a > Referenz
< Ul >
< li >< ein Href = "http://en.wikipedia.org/wiki/Poly%28methyl_methacrylate%29" > Acrylic Sheet </a >< li >
< li >< ein Href = "http://en.wikipedia.org/wiki/Light-emitting_diode" > </a >< li > LED
< li >< ein Href = "http://en.wikipedia.org/wiki/Sandpaper" > </a >< li > Schleifpapier
< li >< ein Href = "http://en.wikipedia.org/wiki/Button_cell" > Knopfzelle </a >< li >
< li >< ein Href = "http://en.wikipedia.org/wiki/Switch" > </a >< li > Taster
< li >< ein Href = " > LED-Nachtlicht </a >< li >
< /ul >
< li >

< /ul >

< / Div >
< / Div >

< Div-Id = "Info" >
< h3 > Autor: < ein Href = " Target = "_blank" > Motadacruz </a >< / h3 >
< h4 > veröffentlicht: 11. Februar 2010 < / h4 >
< h4 > Lizenz: keine < Abbr Titel "All Rights Reserved" = > (ARR) < / Abbr >< / h4 >
< h5 > Related: Cube, ambient, Licht, Lampe, LED, Nacht < / h5 >
< / Div >
< / Div >

< Div-Id = "Körper" Style = "Breite: 1117px; Höhe: 3072px ">

< Img Src = "Images/Heading 2.jpg" Alt = "Stellen eine LED-Nachtlicht" >< BR >

< Artikel >
< Bild Src = "Images/LED-Cube-Nacht-Light.jpg" Alt = "The Final Produkt" >
< / Artikel >
< Artikel >
< p >< / p > diese LED-Lampe wird in jedem möglichem Haus perfekt sein. Es gibt mehr Licht, als ich dachte, es würde.
< Br / > heute erhielt ich die letzte bestellte ich um loszulegen Gebäude dieser LED-Würfel.
< p >< / p > obwohl dieser Würfel ich gemacht ist 9 x 9 cm x 9 cm... Es fühlt sich größer dann das. Vielleicht weil es gibt Zut Licht.
< Br / > In den meisten meiner Projekte und Instructables ich benutze eine Toggle Switch zu Switch LED's, ein- und ausschalten.
< Br / > ich wollte etwas anderes diesmal tun. Got zu sagen, dass es ziemlich genial geklappt.
< Br / > auf der Unterseite ist kleine Taster, der der LEDs leuchtet auf und ab. Der Schalter ist stark genug
um den Cube zu halten.
< Br / > aber wenn Feld gedrückt wird, ist der Schalter nicht stark genug, um auf zurück klicken
wegen des Gewichts.
< Br / > So Pressen die Box sich das Licht schaltet, und Hochziehen der Box schaltet es wieder ab.
< p >< / p > unten sehen Sie einen Film, ich habe zu zeigen, wie es funktioniert.
< p >< / p > Wenn Sie denken, es ist cool genug, gehen Sie zu Schritt eins, so können Sie alle Materialien und Werkzeuge zu bauen Ihre eigenen!
< Br / >
< Br / >
< Iframe Breite = "640" Höhe "480" Src = "http://www.youtube.com/embed/PBjm83P_AxM" Frameborder = "0" Allowfullscreen = >< / Iframe >
< / Artikel >

< Ol >

< Artikel >
< p >< / p >< H2 >< li > Tools und Materialien < li >< / H2 >
< Bild Src = "Images/Tools-Materials.jpg" Alt = "Materialien" >
< p >< / p > sind die Materialien für dieses Projekt ziemlich einfach zu bekommen und nicht zu teuer.
< Br / > nur einige Werkzeuge vielleicht nicht in jedermanns Werkzeugkasten sind. Aber es gibt auch viele Werkzeuge, die Sie verwenden können
< Br / > stattdessen bist du nicht in der Lage, Ihre Hände auf einige bekommen.
< Ul >
< p >< b > Materialien </b >< / p >
< li >< Br / > - A4 Acrylblatt - 3mm dick (auch bekannt als "Plexiglas") < li >
< li >< Br / >-feinem Sandpapier (400 macht einen tollen Job!) < li >
< li >< Br / > - 3 x 5mm LED (ich blau verwendet, gibt eine gute Wirkung. Aber jede Farbe eingesetzt werden) < li >
< li >< Br / >-2 x Knopfzelle (CR2032) < li >
< li >< Br / >-2 x Taste Küvettenhalter < li >
< li >< Br / >-kleine Pulsschalter < li >
< li >< Br / > - elektrische Draht (Riss es von meinem Fahrrad) < li >
< /ul >
< / Artikel >

< Artikel >
< p >< H2 >< li > < li >< Acryl schneiden / H2 >< / p >
< Bild Src = "Images/schneiden-die-acrylic.jpg" Alt = "Schneiden" und ausbessern...">
< Bild Src = "Images/FBARYMIG5FR5LZM. MEDIUM.jpg"Alt ="Schneiden das Acryl">
< p >< / p > zunächst müssen wir der 6 Seiten des Würfels aus der Acrylglasplatte zu schneiden.
< p >< p >< / p > 1. Bekommen Sie die Stift und zurückgreifen Sie sechs gleiche Quadrate auf die Acrylglasscheibe. Geraden sind erforderlich, es sei denn,
< Br / > Sie haben eine wirklich ruhige Hand, verwenden Sie ein Lineal :)
< p >< / p > 2. Verwenden Sie die Stichsäge zu die Plätzen aus die Acrylglasscheibe abgeschnitten. Achten Sie darauf, dies zu tun so perfekt wie möglich.
< Blockquote >< Br / > Hinweis: alle Felder müssen (fast) die gleiche (Foto 2). < / Blockquote >
< / Artikel >

< Artikel >
< p >< H2 >< li > Zuckerguss Acryl < li >< / H2 >< / p >
< Bild Src = "Images/Zuckerguss-the-acrylic.jpg" Alt = "Zuckerguss" >
< Bild Src = "Images/FJ5WNU7G5FR5M20. MEDIUM.jpg"Alt ="Peeling">
< Bild Src = "Images/FHZ9CDFG5FR5M1Z. MEDIUM.jpg"Alt ="Zuckerguss und Peeling">
< p >< / p > das Acryl ist "klares Wasser". Das ist nicht das, was wir wollen. Wir wollen, dass ein mattierte (oder diffuse) Cube, es breitet sich
< Br / > das Licht gleichmäßig auf einen schönen Effekt zu geben.
mattierte schauen Sie < p >< / p > Sie wahrscheinlich Acrylplatten, die bereits bekommen können. Aber ich konnte nicht finden sie hier.
< Br / > gefunden 1 Shop, sondern sie belastet Zut mehr dann das Wasser klar man. Da Schleifpapier kostet
< Br / > viel ich ging für das Wasser klar eine :)
< p >< / p > 1. Entfernen Sie die schützende Kunststoff aus jeder Platte (Foto 1 und 2).
< p >< / p > 2. Jetzt bekommen Sie die feinere Schleifpapier (400) und legen Sie es auf einem Tisch mit den Schleifen Seite nach oben. Eine Platte zu bekommen und
< Br / > das Schleifpapier in einer kreisförmigen Bewegung reiben. Wenn einseitig mattiert ist genug, die Platte umdrehen und tun
< Br / > das gleiche mit dieser Seite.
< p >< / p > zu sehen, ob du einen guten Job hast auf Schleifen, können Sie die Platten gegen das Licht halten. Rufen Sie die schlechten
< Br / > teilen einige zusätzliche Schleifen.
< / Artikel >

< Artikel >
< p >< H2 >< li > machen den Cube < li >< / H2 >< / p >
< Bild Src = "Images/Make-the-cube.jpg" Alt = "Making den Würfel!" >
< Bild Src = "Images/FUXRO3AG5FR5M8F. MEDIUM.jpg"Alt ="Fügen das Acryl">
< p >< / p > jetzt wir die Platten bereit haben, die wir sie in einen Würfel zu Formen müssen.
< Br / > bevor du gehst und Teile zusammenkleben, vergewissern Sie sich zunächst passen sie gut auf einander. Wir brauchen alle Teile
< Br / > zu passen.
< p >< / p > 1. Nach der Montage der Platten erhalten die Klebepistole und nur 5 Platten zusammenkleben. Wenn Sie einige Probleme haben
< Br / > die Platten vor dem Verkleben zusammenhalten, können Sie etwas Klebeband um sie zusammenzuhalten. Auf diese Weise Sie
< Br / > kann den Kleber auf setzen entspannter.
< p >< / p > 2. Die letzte Platte, die noch nicht auf geklebt ist braucht ein Loch für den Schalter zu passen. Das Bohrwerkzeug und verwenden
< Br / > ein Bohrer das ist die gleiche Größe wie der Schalter (Ecke zu Ecke).
< Br / > Wenn Sie bohren sind, tun Sie dies sehr sorgfältig! Sie wollen nicht zu beeilen, sonst könnten Sie zuviel setzen
< Br / > Druck drauf und die Platte zu brechen.
< p >< / p > versuchen, wenn der Schalter das Loch gut passt. Wir werden später die Klebepistole verwenden, um den Schalter eingeführt.
< / Artikel >

< Artikel >
< p >< H2 >< li > Vorbereitung der LED < li >< / H2 >< / p >
< Bild Src = "Images/Vorbereitung-der-LEDs.jpg" Alt = "Test LEDs" >
< Bild Src = "Images/F6DIVHIG5FR5MBB. MEDIUM.jpg"Alt ="Vorbereitung LEDs">
< p >< / p > diffuse wenn Sie albern aussehen wie mich und auch Wasser klare LED gekauft, hier wir gehen ihnen :)
< p >< / p > 1. Holen Sie sich das Schleifpapier (wieder die 400) und sand der LEDs.
< Br / > Sie sehen den Unterschied des Wassers diejenigen (Foto 1) und die diffuse klar diejenigen (Foto 2).
< / Artikel >

< Artikel >
< p >< H2 >< li > die Schaltung < li >< machen / H2 >< / p >
< Bild Src = "Images/Make-the-circuit.jpg" Alt = "Macht die Schaltung" >
< Bild Src = "Images/F3DL04HG5FR5MHF. MEDIUM.jpg"Alt ="Connecting Components">
< p >< / p > brauchen wir jetzt legte den Schalter, LEDs und Batterien, um die Schaltung zu machen.
< Br / >, damit diese Strecke ist schön und stark können Sie Löten Sie die Teile zusammen. Da habe ich kein Lot
< Br / > Bahnhof früher habe ich Heißkleber kleben sie zusammen. Vielleicht nicht so gut, aber es macht den Job.
< p >< / p > 1. Legen Sie die Batterien in den Halter. Ich möchte dazu zuerst etwas schwerer und leichter zu handhaben sind.
< p >< / p > 2. Die negative Seite der anderen Batteriehalter einige elektrische Draht von der positiven Seite 1 Batteriehalter gesetzt.
< p >< / p > 3. Gehen Sie aus dem 2. Batteriehalter zu den Taster mit einem anderen elektrischen Draht.
< p >< / p > 4. Verwenden Sie einige elektrische Draht Verbindung der Gegenkathete des Schalters zum positiven Bein der LED.
< p >< / p > 5. Und aus dem negativen Bein der LED verwenden Sie einige elektrische Draht in die 1. Batterie Betrieb zurückgeschaltet.
< p >< / p > 6. Den Schalter zu testen und sehen, ob die LED Leuchten. Ist dies nicht der Fall, Sie machte einen Fehler in Ihrer Schaltung. Wenn alles ist
< Br / > in Ordnung, etwas Heißkleber verwenden, um sicherzustellen, dass die Teile zusammen bleiben. Oder Sie können es haben Sie einen Lötkolben Staion zu löten.
< / Artikel >

< Artikel >
< p >< H2 >< li > < li >< Abschluss / H2 >< / p >
< Bild Src = "Images/F6I6UTBG5FR5MI8. MEDIUM.jpg"Alt =""sauber und ordentlich" >
< Bild Src = "Images/FX93ZQOG5FRB5SK. MEDIUM.jpg"Alt ="Tidying,">
< Bild Src = "Images/FIQEX3DG5FR5MI7. MEDIUM.jpg"Alt ="Finishing up">
< Bild Src = "Images/FBR70K2G5FRB5SJ. MEDIUM.jpg"Alt ="Und fertig!" >
< p >< / p > haben wir jetzt alle Teile, die wir brauchen. Alles, was wir tun müssen, jetzt wird Unterteil in den Cube zu machen, einen ganzen Würfel.
< Br / > 1. Schmirgeln Sie die Seiten der Bodenplatte, also es bequem in den Boden passt. Sie wollen einfach nur die Bodenplatte
< Br / > etwas größer, dann das Loch es in passt. Auf diese Weise, sobald Sie es in dort steckte stecken und will nicht loslassen
< Br / > während der Bewegung des Würfels.
< p >< / p > machen Sie natürlich jede Farbe, die Sie wollen. Sie können sogar Farbe setzen, die wechselnden LED's es in Nizza Umgebungslicht zu erstellen.
< / Artikel >

< Artikel >
< H2 >< li >< b > Ressourcen helfen < li >< / b >< / H2 >
< Tabelle ausrichten = "linke" Border = "1" Breite "445" = >
< Colgroup >
< Col Klasse "Column1" = >
< Col Klasse "Spalte2" = >
< / Colgroup >
< tr >
< th Colspan = "2" Style = "Hintergrundfarbe: #045FB4" > < Radikalund > Messungen
< /tr >
< tr >
< th Breite = "47 %" Style = "Hintergrundfarbe: #045FB4" > Acryl Größe < Radikalund >
< th Breite = "49 %" Style = "Hintergrundfarbe: #045FB4" > Boxgröße < Radikalund >
< /tr >
< tr >
< td Breite = "47 %" align = "center" > < /td > 60cm
< td Breite = "49 %" align = "center" > < /td > 10cm
< /tr >
< tr >
< td Breite = "47 %" align = "center" > < /td > 120cm
< td Breite = "49 %" align = "center" > < /td > 20cm
< /tr >
< tr >
< td Breite = "47 %" align = "center" > 180cm < /td >
< td Breite = "49 %" align = "center" > < /td > 30cm
< /tr >
< tr >
< td Breite = "47 %" align = "center" > < /td > 140cm
< td Breite = "49 %" align = "center" > < /td > 40cm
< /tr >
< tr >
< td Breite = "47 %" align = "center" > 320cm < /td >
< td Breite = "49 %" align = "center" > < /td > 50cm
< /tr >
< tr >
< td Breite = "47 %" align = "center" > 380cm < /td >
< td Breite = "49 %" align = "center" > < /td > 60cm
< /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 >
< Zusammenfassung >< Em > wie stark ist der Cube? < /em >< / Zusammenfassung >
< p > sie ziemlich stark ist, verwenden Sie genug für Zuhause </p >
< / details >
< Details >
< Zusammenfassung >< Em > wie lange hat es gedauert, machen? < /em >< / Zusammenfassung >
< p > lange nicht, ca. 2-3 Wochen </p >
< / details >
< Details >
< Zusammenfassung >< Em > ist das Ihre eigene Idee? < /em >< / Zusammenfassung >
< p > Ja, ich dachte, dass es sich von mir... </p >
< / details >
< / Artikel >

< Br / >< Br / >

< Br / >
< Br / >

< ein Href = "#Start Seite" > springt zum Anfang der Seite </a >

< Br / >< Br / >< Br / >< Br / >< Br / >

< /ol >

< / Div >
< Br >< BR >

< / Div >

< / body >

< / html >

"CSS-Code für beide Seiten"

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

#body
{
Border: 0px;
padding: 0px;
Margin: 0px;
Font-Family: Jahrhundert gotisch;
Breite: 90 %;
}

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

#container
{
Breite: 100 %;
Border: 0px;
padding: 0px;
Margin: 0px;
}

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

#header
{
Border-Top: 15px solid #333333;
Breite: 100 %;
Höhe: 220px;
}

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

#navMenubackground
{
Höhe: 36px;
Breite: 100 %;
Hintergrundfarbe: #333333;
}

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

#navMenu
{
Margin: 0;
Padding: 0;
Position: Absolute;
Links: 33 %
}

#navMenu ul
{
Margin: 0;
Padding: 0;
}

#navMenu li
{
Margin: 0;
Padding: 0;
Liste-Style: none;
Float: links;
Position: relative;
Hintergrund: #666666;
Border-Radius: 20px 5px;
}

#navMenu Ul li ein
{
Text-align: center;
Font-Family: "Comic Sans MS", kursiv;
Text-Decoration: none;
Höhe: 30px;
Breite: 150px;
Display: block;
Color: #FFFFFF;
Border: 1px solid #CCCCCC;
Rand rechts: 2px solid #CCCCCC;
Grenze-Links: 2px solid #CCCCCC;
Text-Shadow: 1px 1px 1px #000000;
padding: 2px;
Border-Radius: 20px 5px;
}

#navMenu Ul ul
{
Position: absolute;
Sichtbarkeit: versteckt;
oben: 36px;
}

#navMenu Ul Li:hover ul
{
Sichtbarkeit: sichtbar;
}

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

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

#navMenu Ul Li:hover Ul li ein: Hover
{
Hintergrund: #AAAAAA;
Farbe: #000000;
}

#navMenu li ein: Hover
{
Color: #FFFFFF;
}

#navMenu li li ein: Hover
{
Farbe: #000000;
}

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

#Info
{
Font-Family: Lucida Sans Unicode;
Grenze: 9px solid #333333;
Marge: 2px solid #FFFFFF;
Hintergrundfarbe: #999999;
Float: Recht;
Höhe: 450px;
Breite: 300px;
Top: 100px;
Position: relative;
rechts: 20px;
oben: 55px;
Border-Radius: 10px;
}

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

#Info ein: Hover
{
Color: #FFFFFF;
Text-Decoration: none;
}

#Info ein: aktiv
{
Color: #333333;
}

#Info ein: Link
{
Color: #333333;
}

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

#footer
{
Font-Weight: bold;
Font-Family: Jahrhundert gotisch;
Color: #FFFFFF;
klar: beide;
Hintergrundfarbe: #333333;
Padding: 4px;
Breite: 100 %;
Position: fixed;
unten: 5px;
Höhe: 35px;
}

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

fieldset
{
Breite: 500px;
Höhe: 270px;
}

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

ABBR
{
Font-Weight: bold;
Schrift-Style: Italic;
Schriftgröße: ++ 1
}

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

. "Column1"
{
Hintergrundfarbe: #999999;
}

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

. Column2
{
Hintergrundfarbe: #999999;
}

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

H2
{
Text-Shadow: 2px 2px 2px #AAAAAA;
}

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

IMG
{
Border-Radius: 20px;
}

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

Stichworte: Hosting, HTML, Online, CSS, Webseite, Gestaltung

In Verbindung stehende Artikel

Messer schärfen Jig hier ist, wie ich eine Spannvorrichtung, meine Schleifsteine zu halten gemacht. Jahrelang habe ich meine Messer auf ein ...
Coolste Auto Streich Demo die Wärmflasche erzeugt Gegendruck auf den Motor. Dies bewirkt, dass das Auto zu laufen wie Mist und macht zu verlieren ...
Halloween-Plätzchen: Kürbis-Stil! Es ist nicht schwierig, diese Cookies zu machen, also probieren Sie es!Schritt 1: Schritt 1! Sie benötigen 90 Gramm Blum ...
Knex f1 Fahrwerk und Lenkung Schritt 1: Teileliste Nicht Band-Mas Big Schneckenräder, wenn man sie nutzt 8 habenSchritt 2: Fahrwerk Schritt 3: Hinter ...
Der Bibliophile Weihnachtsbaum ... Möchten Sie eine schöne weihnachtliche Stimmung, ohne Gefahr für die einheimische Fauna und Flora haben?... Wäre nic ...