Site Web (HTML et CSS)

Bonjour tout le monde chez instructables:)

Récemment, j’ai essayé de faire quelques sites Web et hôte en ligne juste voir comment HTML et CSS , j’ai appris a fonctionné alors que je pourrais faire un site à part entière complet mettant en vedette et l’examen des jeux dans un avenir proche.

Dans les essais et travaux de réparation/amélioration de mes compétences, j’ai décidé de faire un site Web qui propose les instructables j’ai personnellement aimé de

J’ai essayé de mettre en œuvre un grand nombre de techniques pour rendre le site plus interactif. J’ai ajouté un collant pied de page qui est adapté à l’écran et puis beaucoup de listes déroulantes et certains menus cachés. Il a également le soutien par lequel quiconque Regarde un site pourront Envoyer nous des idées ou des plaintes concernant le site Web ou pour la vedette des nouveaux projets etc.... Cette fonctionnalité de l’envoi des réponses au courrier électronique du propriétaire du site Web est un peu compliquée car il implique l’utilisation de PHP et autres langages de script serveur...

Le reste des fonctions sont toutes basées sur l’utilisation de HTML et CSS. Cela le rend beaucoup plus simple de nouvelles personnes commencer à créer leurs propres sites Web de code plutôt qu’à l’aide de sites comme www.webs.com etc juste la façon dont j’ai commencé quand j’avais 12 ans, mais la meilleure chose est que vous pouvez créer le site Web entier seulement avec l’utilisation de CSS, HTML mais ajoute beaucoup d’éléments interactifs sur le site. Je suis actuellement âgée de 15 ans donc j’ai commencé à apprendre sur la programmation il y a environ 3 ans.

Le texte qui a été utilisé dans le site Web a été effectué par l’utilisation de Photoshop et quelques autre image programmes d’édition, j’ai utilisé environ 3-4 d'entre eux mais j’ai trouvé Photoshop pour être plus confortable.

Ce que tu l’as fait ?
J’ai fait un site Web qui est pleinement fonctionnel et dès que je reçois mon ordinateur retour haut et fonctionnel je vais commencer l’héberge en ligne. Tout est réglé et prêt à être hébergé, mais mon ordinateur hôte est en bas, comme il a récemment obtenu surmené que je l’utilise pour l’hébergement d’autres établissements tels que les serveurs minecraft. Il s’agit d’un site Web qui met en valeur les rudiments de la conception web, car je sais que nous pouvons obtenir dans les techniques de programmation beaucoup plus avancées qui font de très bons sites Web.

Comment tu l’as fait il ?
J’ai toujours eu un intérêt en programmation et en électronique. Quand j’ai vu beaucoup de sites à la recherche vraiment bien conçu et très bon, que je savais que je devais essayer de faire moi-même. Pour coder le site j’ai utilisé des programmes tels que Microsoft en première page et de mot de Microsoft, j’ai cependant apprécié l’aide première page beaucoup plus que le mot en première page, il est beaucoup plus facile pour les non professionnels commencer à créer des sites Web qu’il signale des erreurs de code commun et couleurs de texte différent dans différentes couleurs pour séparer le codage de l’écriture etc.... Mon techer informatique à l’école aussi m’a beaucoup aidé en m’apprenant de nouvelles choses comme la façon d’ajuster les formes/tailles/orientation des différent menu déroulant boîtes et l’effet d’ombrage etc....

Où tu l’as fait il ?
Sur mon ordinateur dans ma maison. Parfois, j’ai travaillé là-dessus à l’école aussi bien quand je me suis amusée.

Qu’avez-vous appris ?
En créant ce site j’ai appris beaucoup de choses, j’ai appris comment mettre le codage à utiliser, j’ai appris et j’ai appris à se joindre à des morceaux de code HTML et CSS codage j’ai appris à l’école et en ligne. Avant de faire ce site, que j’ai toujours été incertain si je peux faire un site Web et être en mesure d’héberger en ligne, comme je ne savais pas comment tout ce que j’ai appris serait ajouter jusqu'à pour me donner un résultat positif. Maintenant je suis beaucoup plus confiant sur la création de sites Web et peut commencer à la création des sites réels, graves et bons utiliser cela comme un départ hors:). L’une des plus grandes surprises, j’ai rencontré après avoir fini de faire que tout le site a été que j’ai découvert que je n’avais pas inclus support pour utilisation sur d’autres navigateurs comme Google Chrome, Safari etc comme lorsque je travaillais, j’ai seulement utilisé Mozilla Firefox pour les essais... à cause de cela que j’ai dû traverser plus de code et d’apprendre beaucoup d’autres choses pour s’assurer que le site Web couru sur Google Chrome et d’autres navigateurs.

J’ai aussi fait une instructable environ un an il y a sur les bases du site codage et création quand j’ai commencé à apprendre comment le code HTML et CSS, ont donc un coup d’oeil pour les bases de totale de conception web, mais pour faire des sites plus avancés, vous devriez apprendre plus profond et détaillé CSS et JavaScript de codage... qui j’espère que je vais commencer à apprendre rapidement.

Espérons que cela inspire les gens à commencer à faire leurs propres sites Web et de montrer leur créativité et leur talent.

"Code HTML de la page 1"

<!--chaque étape de l’instructable dans contenue à l’intérieur d’une balise de l’article, c’est juste pour les étapes de leur propre étiquette de groupe et organisation fins-->
<!--a 5 div principaux éléments, l’en-tête, navMenu, Info, corps, pied de page.-->
<!--un lien vers la feuille de style « style.css »-->

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

< html >

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

< tête >

< lien href="CSS/style.css" rel = "stylesheet" type = "text/css" >
< titre > génie DIY < /title >
< nom meta = « description » content = "apprendre les choses on ne savait jamais avant ! Faites vos propres projets de bricolage ! Devenez un maître DIY! » >
< nom meta = « keywords » content = « projets de site Web, nouvelles, bricolage, rendre, Best, déchets, technologie, atelier, Craft, Craft » >

< / head >

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

< body bgcolor = #CCCCCC >

< div id = « conteneur » >

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

< div id = « header » >
< a name = « Début de la page » >< / a >
< table width = 100 % align = center background="Images/headerbackground.jpg" >
< b >
< td largeur = "1000px" align = "center" >< img src="Images/Title.jpg" width = "916px" height = "198px" >< /td >
< td align = right >< H5 > contenu de < / H5 >< a href = « http://www.instructables.com » >< img src = « Images/instructables-logo.png » onmouseover = "src =" Images/instructables-logo1.jpg'"onmouseout =" src = "Images/instructables-logo.png'" style = "border-radius : 0px;" >< /a >< /td >
< /tr >
< /table >
< / div >

< br >< /br >

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

< div id = « navMenubackground » >
< div id = « navMenu » >

< ul >

< li >< a href = « # » > matériaux < /a >
< ul >
< li >< a 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 » > Liens Zip < /a >< /li >
< li >< a 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 » > souder < /a >< /li >
< li >< a 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 >< a 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" cible = « _blank » > ruban électrique < /a >< /li >
< /ul ><!--fin de sub balise UL-->
< /li >

< li >< a href = « # » > référence < /a >
< ul >
< li >< a href = « http://en.wikipedia.org/wiki/Cable_tie » target = « _blank » > attache < /a >< /li >
< li >< a href = "http://www.performance-pcs.com/catalog/index.php?main_page=index & cPath = 44_80" target = « _blank » > Zip Tie ancre < /a >< /li >
< li >< a href = « » target = « _blank » > Zip Tie panier < /a >< /li >
< /ul ><!--fin de sub balise UL-->
< /li >

< li >< a href = « # » > < /a > projets de bricolage
< ul >
< li >< a href = « Page d’accueil 1 » > Zip Tie panier < /a >< /li >
< li >< a href = « Page d’accueil 2.htm » > LED lampe de nuit < /a >< /li >
< /ul ><!--fin de sub balise UL-->
< /li >

< /ul ><!--fin du principal balise UL-->

< / div ><!--fin de nav menu div-->
< / div ><!--fin de nav menu arrière-plan div-->

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

< div id = « Info » >
< h3 > auteur : < a href = « » target = « _blank » > BladeFyre Studios < /a >< / h3 >
< h4 > publication : 26 juillet 2011 < / h4 >
< h4 > licence : aucun < abbr titre = « Tous droits réservés » > (ARR) < / abbr >< / h4 >
< h5 > Related : attache, panier, tissage, plastique < / h5 >
< / div >

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

< div id = « body » style = "width : 1110px ; hauteur : 1140px ">

< img src = « Images/rubrique 1.jpg » alt = « Faire un panier de cravate Zip » >< /br >

< article >
< image src = « Images/Zip-cravate-basket.jpg » alt = « Zip Tie panier » >
< / article >
< article >
< / article >
< article >
< / article >
< article >< p >< / p >
Nous allons maintenant apprendre comment faire un zip tie panier avec environ 100 attaches...
< p >< / p > vous serez en mesure d’utiliser ce panier pour beaucoup de choses !
< br / > j’en profite personnellement pour tenir mon soudure et Chatterton, mèche
< br / >
< br / >
< / article >

< ol >

< article >
< H2 >< li >< b > matériaux requis : < /b >< /li >< / H2 >
< image src="Images/Supplies.jpg" alt = "Fournitures" >
< ul >
< li >< p > 16 X ancres (1 « X 1 ») < /p >< /li >
< li >< p > 100 X Zip cravates (7 3/8 po long) < /p >< /li >
< /ul >
< br > je suppose que vous pouvez utiliser n’importe quelle taille selon comment grand ou petit, vous voulez faire votre panier!! < /br >
< / article >

< article >
< H2 >< li >< b > Set-up < /b >< /li >< / H2 >
< image src = « Images/Set-up.jpg » alt = « Set Up » >
< image src = "Images/F6EVZBQGQKLPAPE. MEDIUM.jpg"alt ="Set Up">
< p >< / p > jeter les 16 ancres dans un carré de 4 X 4
< br / > mettre une attache par une rangée de 4, cela pour chacun d’eux, mais alterner le sens des liens Zip.
< / article >

< article >
< H2 >< li >< b > tisser loin < /b >< /li >< / H2 >
< image src = « Images/armure-Away.jpg » alt = « Armure, tissage et tissage » >
< image src = "Images/FEMYGPIGQKM05QC. MEDIUM.jpg"alt ="Tisse sur et sur">
< image src = "Images/F096D66GQKLPAPS. MEDIUM.jpg"alt ="Weaving le long">
< p >< /p > tisser des liens Zip 7 de chaque côté (à nouveau en alternance de direction)
< br / > puis repliez les côtés et relier les liens Zip à l’autre...
< blockquote >< p >< / p > Remarque : J’ai trouvé plus facile d’utiliser 4 liens Zip pour faire un carré puis tisser dans chacun des 4 côtés à la fois... < / blockquote >
< / article >

< article >
< H2 >< li >< b > sécuriser l’armure < /b >< /li >< / H2 >
< image src = « Images/Secure-the-weave.jpg » alt = « Sécurisation de l’armure » >
< image src = "Images/FTGOJZUGQKM4NRK. MEDIUM.jpg"alt ="Fixer les coins">
< p >< / p > éliminez l’excédent attache extrémités
< br / > utiliser une attache pour connecter un coin à un coin pour garantir l’armure
< / article >

< article >
< H2 >< li >< b > Peel, coller et remplir < /b >< /li >< / H2 >
< image src = « Images/Peel-bâton-et-Fill.jpg » alt = « Peeling, collage et remplissage » >
< p >< / p > recherchez un endroit pour tenir le panier (c.-à-d. un banc de travail, l’habilleuse, compteur, etc...)
< br / > Décollez le soutien des ancres.
< p >< / p > Place sur l’emplacement d’installation, en appuyant fermement pour obtenir le panier de s’en tenir uniformément !
< br / > placer les éléments que vous souhaitez stocker dans le panier !
< p >< / p > dans mon cas, j’ai ranger ma bande de soudure, mèche et électrique à l’intérieur !
< / article >

< article >
< H2 >< li >< b > ressources, aide < /li >< / b >< / H2 >
< table align = « left » border = « 1 » width = « 40 % » height = « 100px » >
< colgroup >
< classe col = « Column1 » >
< classe col = « Column2 » >
< / colgroup >
< b >
< th colspan = « 2 » style = "background-color: #333333" >< couleur de police = « FFFFFF » > mesures < / police >< /th >
< /tr >
< b >
< largeur th = « 47 % » style = "background-color: #686868" >< couleur de police = « FFFFFF » > Liens Zip < / police >< /th >
< largeur th = « 49 % » style = "background-color: #686868" >< couleur de police = « FFFFFF » > panier taille < / police >< /th >
< /tr align = « center » >
< tr align = « center » >
< td largeur = « 47 % » > 100 < /td >
< td largeur = « 49 % » > 10cm < /td >
< /tr >
< tr align = « center » >
< td largeur = « 47 % » > 200 < /td >
< td largeur = « 49 % » > 20cm < /td >
< /tr >
< tr align = « center » >
< td largeur = « 47 % » > 300 < /td >
< td largeur = « 49 % » > 30cm < /td >
< /tr >
< tr align = « center » >
< td largeur = « 47 % » > 400 < /td >
< td largeur = « 49 % » > 40cm < /td >
< /tr >
< tr align = « center » >
< td largeur = « 47 % » > 500 < /td >
< td largeur = « 49 % » > 50cm < /td >
< /tr >
< tr align = « center » >
< td largeur = « 47 % » > 600 < /td >
< td largeur = « 49 % » > 60cm < /td >
< /tr >
< /table >
< p >< / p >
< / article >

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

< article >
< H2 >< li >< b > FAQ < /b >< /li >< / H2 >
< détails >
< Résumé >< em > quelle est la fort le panier? < /em >< / Résumé >
< p > il est assez fort, assez pour maison utiliser < /p >
< / détails >
< détails >
< Résumé >< em > combien de temps a-t-il fallu pour faire? < /em >< / Résumé >
< p > pas de long, environ 1 semaine < /p >
< / détails >
< détails >
< Résumé >< em > C’est votre propre idée? < /em >< / Résumé >
< p > Oui, j’ai imaginé par moi-même... < /p >
< / détails >
< / article >

< br / >< br / >

< fieldset >
la légende < h1 > >< envoyez-nous vos commentaires < / h1 >< / légende >
< font action = "mailto:vishalapr méthode ="post">
< table >
< b >
< td > nom : < /td >
< td >< input type = « text » name = « nom » valeur = « Entrez votre nom » size = « 35 » >< /td >
< /tr >
< b >
< td > Courriel : < /td >
< td >< input type = « texte » nom = valeur « email » = « Entrez votre email » size = « 35 » >< /td >
< /tr >
< b >
< td valign = « top » > Message : < /td >
< td >< textarea lignes = « 5 » cols = « 35 » >< / textarea >< /td >
< /tr >
< b >
< td > & nbsp ; < /td >
< td >< input type = « submit » value = « Envoyer » ! >< /td >
< /tr >
< /table >
< / font >
< / fieldset >

< br / >

< a href = « #Start de la page » > sauter jusqu’au début de la page < /a >

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

< /ol >

< / div ><!--fin du corps DIV-->

< br >< /br >

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

< div id = « footer » >
< >< Centre de taille de police = « 3 » > Copyright © 2012 < abbr titre = « www.DIYGenius.com » > & nbsp ; DIYGenius.com, & nbsp ; < / abbr > tous droits réservés. < / police >< / center >
< / div >

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

< / div ><!--fin du conteneur DIV-->

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

< / body >

< / html >

"Code HTML de la page 2"

<!--chaque étape de l’instructable dans contenue à l’intérieur d’une balise de l’article, c’est juste pour les étapes de leur propre étiquette de groupe et organisation fins-->
<!--a 5 div principaux éléments, l’en-tête, navMenu, Info, corps, pied de page.-->
<!--un lien vers la feuille de style « style.css »-->

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

< html >

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

< tête >

< lien href="CSS/style.css" rel = "stylesheet" type = "text/css" >
< titre > génie DIY < /title >
< nom meta = « description » content = "apprendre les choses on ne savait jamais avant ! Faites vos propres projets de bricolage ! Devenez un maître DIY! » >
< nom meta = « keywords » content = « projets de site Web, nouvelles, bricolage, rendre, Best, déchets, technologie, atelier, Craft, Craft » >

< / head >

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

< body bgcolor = #CCCCCC >

< div id = « conteneur » >

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

< div id = « header » >
< a name = « Début de la page » >< / a >
< table width = 100 % align = center background="Images/headerbackground.jpg" >
< b >
< td largeur = "1000px" align = "center" >< img src="Images/Title.jpg" width = "916px" height = "198px" >< /td >
< td align = right >< H5 > contenu de < / H5 >< a href = « http://www.instructables.com » >< img src = « Images/instructables-logo.png » onmouseover = "src =" Images/instructables-logo1.jpg'"onmouseout =" src = "Images/instructables-logo.png'" style = "border-radius : 0px;" >< /a >< /td >
< /tr >
< /table >
< / div >

< br >< /br >

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

< div id = « navMenubackground » >
< div id = « navMenu » >

< ul >

< li >< a href = « # » > matériaux < /a >
< ul >
< li >< a href = "http://www.ebay.com/itm/10-Sheets-1-8-Clear-Cast-Acrylic-Plexiglass-12-x-12-/290409405568?pt=LH_DefaultDomain_0 & hash = item439dbfdc80" > feuille acrylique < /a >< /li >
< li >< a href = "http://www.ebay.com/itm/10-x-5mm-Blue-LED-Light-emitting-Diodes-10000mcd-gift-/320568095904?pt=LH_DefaultDomain_0 & hash = item4aa358f4a0" > LEDs < /a >< /li >
< li >< a href = "http://www.ebay.com/itm/Pro-Sanding-Nail-File-Buffing-Sandpaper-Slim-Black-N111-/290610237063?pt=LH_DefaultDomain_0 & hash = item43a9b84e87" > papier abrasif < /a >< /li >
< li >< a href = "http://www.ebay.com/itm/NEW-10X-CR2025-2025-3V-Lithium-Button-Cell-Coin-Battery-/110793380114?pt=US_Batteries & hash = item19cbccd112" > pile bouton < /a >< /li >
< li >< a href = "http://www.ebay.com/itm/2pcs-CR2032-CR2025-Notebook-Laptop-PC-Button-Cell-Battery-Socket-Base-Holder-/150678515771?pt=US_Batteries & hash = item231523b03b" > bouton de porte-cuve < /a >< /li >
< li >< a href = "http://www.ebay.com/itm/Vinyl-Electrical-Tape-NEW-General-Use-/390306485709?pt=LH_DefaultDomain_0 & hash = item5ae01455cd" > ruban électrique < /a >< /li >
< li >< a 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" > interrupteur momentané < /a >< /li >
< /ul ><!--fin de sub balise UL-->
< /li >

< li >< a href = « # » > référence < /a >
< ul >
< li >< a href = « http://en.wikipedia.org/wiki/Poly%28methyl_methacrylate%29 » > feuille acrylique < /a >< /li >
< li >< a href = « http://en.wikipedia.org/wiki/Light-emitting_diode » > LED < /a >< /li >
< li >< a href = « http://en.wikipedia.org/wiki/Sandpaper » > papier abrasif < /a >< /li >
< li >< a href = « http://en.wikipedia.org/wiki/Button_cell » > pile bouton < /a >< /li >
< li >< a href = « http://en.wikipedia.org/wiki/Switch » > interrupteur momentané < /a >< /li >
< li >< a href = « » > LED lampe de nuit < /a >< /li >
< /ul ><!--fin de sub balise UL-->
< /li >

< li >< a href = « # » > < /a > projets de bricolage
< ul >
< li >< a href = « Page d’accueil 1 » > Zip Tie panier < /a >< /li >
< li >< a href = « Page d’accueil 2.htm » > LED lampe de nuit < /a >< /li >
< /ul ><!--fin de sub balise UL-->
< /li >

< /ul ><!--fin du principal balise UL-->

< / div ><!--fin de nav menu div-->
< / div ><!--fin de nav menu arrière-plan div-->

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

< div id = « Info » >
< h3 > auteur : < a href = « » target = « _blank » > motadacruz < /a >< / h3 >
< h4 > publié : 11 février 2010 < / h4 >
< h4 > licence : aucun < abbr titre = « Tous droits réservés » > (ARR) < / abbr >< / h4 >
< h5 > Related : cube, ambiance, lumière, lampe, LED, nuit < / h5 >
< / div >
< / div >

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

< div id = « body » style = "width : 1117px ; hauteur : 3072px ">

< img src = « Images/rubrique 2.jpg » alt = « Faire une lampe de nuit de LED » >< /br >

< article >
< image src = « Images/LED-Cube-Night-Light.jpg » alt = « The Final product » >
< / article >
< article >
< p >< / p > LED cette lampe sera parfaite dans toute la maison. Il donne plus de lumière, alors j’ai pensé qu’il serait.
< br / > aujourd'hui, j’ai reçu les produits dernières j’ai commandé pour commencer la création de ce cube de LED.
< p >< / p > si ce cube que j’ai fait est de 9 cm x 9 cm x 9 cm... il sent plus grand alors que. Peut-être parce qu’il donne attribuent de la lumière.
< br / > dans la plupart de mes projets et instructables, j’utilise une bascule interrupteur LED de marche et en arrêt.
< br / > j’ai voulu faire quelque chose de différent cette fois. J’ai à dire que ça a marché assez impressionnant.
< br / > sur le fond est le petit interrupteur momentané qui transformera les LED sur et en dehors. Le commutateur est assez fort
tenir le cube.
< br / > mais quand la boîte est enfoncée, l’interrupteur n’est pas assez fort pour cliquez sur retour
à cause du poids.
< br / > donc en appuyant sur la zone s’allume la lumière, et tirant la boîte vers le haut l’arrêtera à nouveau.
< p >< / p > ci-dessous vous pouvez voir un film que j’ai fait pour montrer comment cela fonctionne.
< p >< / p > Si vous pensez que c’est assez cool pour aller à la première étape afin d’obtenir tous les matériaux et les outils pour créer vos propres !
< br / >
< br / >
< iframe width = « 640 » height = « 480 » src = « http://www.youtube.com/embed/PBjm83P_AxM » frameborder = « 0 » allowfullscreen >< / iframe >
< / article >

< ol >

< article >
< p >< /p >< H2 >< li > Outils & matériaux < /li >< / H2 >
< image src = « Images/outils-Materials.jpg » alt = « Matériaux » >
< p >< / p > les matériaux utilisés pour ce projet sont assez faciles à obtenir et pas trop cher.
< br / > seulement certains outils sont peut-être pas dans la boîte à outils de tout le monde. Mais il existe aussi de nombreux outils que vous pouvez utiliser
< br / > au lieu de cela si vous n’êtes pas en mesure de mettre la main sur certains.
< ul >
< p >< b > matériaux < /b >< / p >
< li >< br / > - A4 feuille acrylique - 3mm d’épaisseur (également connu sous le nom "plexiglas") < /li >
< li >< br / >-Fine du papier de verre (400 fait un excellent travail!) < /li >
< li >< br / > - 3 x 5mm LED (j’ai utilisé bleu, donne un bon effet. Mais n’importe quelle couleur peut être utilisée) < /li >
< li >< br / >-2 x pile bouton (CR2032) < /li >
< li >< br / >-2 x porte-cellule de bouton < /li >
< li >< br / >-petit interrupteur momentané < /li >
< li >< br / > - électrique fil (arraché de mon vélo) < /li >
< /ul >
< / article >

< article >
< p >< H2 >< li > couper l’acrylique < /li >< / H2 >< / p >
< image src = « Images/coupe-the-acrylic.jpg » alt = « Coupe et raccommodage... » >
< image src = "Images/FBARYMIG5FR5LZM. MEDIUM.jpg"alt ="Couper l’acrylique">
< p >< / p > tout d’abord il faut couper les 6 faces du cube hors de la feuille d’acrylique.
< p >< p >< / p > 1. Obtenir le stylo et dessiner des six carrés égaux sur la feuille d’acrylique. Lignes droites sont nécessaires, à moins que
< br / > vous avez une main véritable, utilisez une règle:)
< p >< / p > 2. Utiliser la scie sauteuse pour couper les carrés de la feuille d’acrylique. N’oubliez pas de le faire aussi parfait que possible.
< blockquote >< br / > NOTE : toutes les cases doivent être (ou presque) les mêmes (photo 2). < / blockquote >
< / article >

< article >
< p >< H2 >< li > glaçage l’acrylique < /li >< / H2 >< / p >
< image src = « Images/glaçage-the-acrylic.jpg » alt = « Glaçage » >
< image src = "Images/FJ5WNU7G5FR5M20. MEDIUM.jpg"alt ="Peeling">
< image src = "Images/FHZ9CDFG5FR5M1Z. MEDIUM.jpg"alt ="Glaçage et Peeling">
< p >< / p > l’acrylique est « eau claire ». Ce n'est pas ce que nous voulons. Nous voulons qu'un cube givré (ou diffus) qui lui se propage
< br / > la lumière également de donner un bel effet.
< p ></p > vous pouvez probablement obtenir feuilles acryliques qui déjà ont un aspect givré. Mais je ne pouvais pas trouver ici.
< br / > trouvé 1 boutique, mais ils ont facturé allouer plus puis de l’eau clair. Étant donné que le papier de verre ne coûte pas
< br / > beaucoup je suis allé pour l’eau une claire:)
< p >< / p > 1. Retirer le plastique protecteur de chaque plaque (photo 1 et 2).
< p >< / p > 2. Maintenant obtenir le papier de verre fin (400) et le placer sur une table, avec le côté abrasif vers le haut. Obtenir une plaque et
< br / > frotter sur du papier de verre dans un mouvement circulaire. Si un côté est givré assez, retournez la plaque et faire
< br / > la même chose avec ce côté.
< p >< / p > pour voir si vous avez fait un bon travail sur ponçage, vous pouvez tenir les plaques contre la lumière. Il suffit de donner le mauvais
< br / > certains extra ponçage de pièces.
< / article >

< article >
< p >< H2 >< li > faire le cube < /li >< / H2 >< / p >
< image src = « Images/Make-the-cube.jpg » alt = « Faire le cube! » >
< image src = "Images/FUXRO3AG5FR5M8F. MEDIUM.jpg"alt ="Se joindre à l’acrylique">
< p >< / p > maintenant, nous avons les plaques prêts, que nous devons les former un cube.
< br / > avant de partir et coller les pièces ensemble, assurez-vous tout d’abord qu’ils s’adaptent bien sur l’autre. Nous avons besoin de toutes les pièces
< br / > pour s’adapter parfaitement.
< p >< / p > 1. Après avoir monté les plaques obtenir le pistolet à colle et recoller seulement 5 plaques. Si vous avez des problèmes
< br / > tenant ensemble les plaques avant de les coller, vous pouvez utiliser du ruban adhésif pour maintenir ensemble. De cette façon vous
< br / > peut mettre la colle sur plus détendu.
< p >< / p > 2. La dernière plaque qui n’est pas collée sur tout a besoin d’un trou pour le commutateur pour s’adapter dans. Téléchargez l’outil de forage et d’utiliser
< br / > un foret qui est la même taille que le commutateur (coin).
< br / > lorsque vous êtes percé, cela avec beaucoup d’attention ! Vous ne voulez pas faire vite, sinon vous risquez de mettre trop
< br / > pression dessus et casser la plaque.
< p >< / p > essayer si le commutateur correspond le trou très bien. Par la suite, nous allons utiliser le pistolet à colle pour mettre l’interrupteur en place.
< / article >

< article >
< p >< H2 >< li > préparer les LED < /li >< / H2 >< / p >
< image src = « Images/préparation-the-LEDs.jpg » alt = « Test LEDs » >
< image src = "Images/F6DIVHIG5FR5MBB. MEDIUM.jpg"alt ="Préparer les LEDs">
< p >< / p > Si vous êtes goofy ressemblant à moi et acheté l’eau clair LED ainsi, ici, nous allons diffuse:)
< p >< / p > 1. Obtenez le papier de verre (encore une fois les 400) et les LED de sable.
< br / > vous pouvez voir la différence de l’eau claire ones (photo 1) et le diffuse ones (photo 2).
< / article >

< article >
< p >< H2 >< li > faire le circuit < /li >< / H2 >< / p >
< image src = « Images/Make-the-circuit.jpg » alt = « Faire le Circuit » >
< image src = "Images/F3DL04HG5FR5MHF. MEDIUM.jpg"alt ="Composants de connexion">
< p >< / p > nous devons maintenant le mettre l’interrupteur, LEDs et des batteries pour faire le circuit.
< br / > pour ce circuit soit agréable et fort vous pouvez souder les pièces ensemble. Étant donné que je n’ai pas une soudure
< br / > station j’ai utilisé la colle chaude pour les coller ensemble. Peut-être pas aussi beau, mais il fait le travail.
< p >< / p > 1. Insérer les batteries dans les supports. Je voudrais faire ce premier et donc ils sont un peu plus lourd et plus facile à manipuler.
< p >< / p > 2. Mettre quelques fils électriques du côté positif de 1 support de batterie pour le côté négatif de l’autre support de batterie.
< p >< / p > 3. Dans le 2ème compartiment, → l’interrupteur momentané avec un autre fil électrique.
< p >< / p > 4. Utiliser un fil électrique pour connecter la jambe opposée de l’interrupteur au pied de le positif des LEDs.
< p >< / p > 5. Et de la jambe négative de la LED, vous utilisez des fils électriques pour revenir à la 1ère tenue de batterie.
< p >< / p > 6. L’interrupteur d’essai et voir si lumière LED vers le haut. Si ce n’est pas le cas, vous avez fait une erreur dans votre circuit. Si tout est
< br / > fonctionne très bien, utiliser une colle chaude pour s’assurer que les parties restent ensemble. Ou vous pouvez souder si vous avez une staion soudage.
< / article >

< article >
< p >< H2 >< li > < /li >< pour terminer / H2 >< / p >
< image src = "Images/F6I6UTBG5FR5MI8. MEDIUM.jpg"alt ="Propre et bien rangé">
< image src = "Images/FX93ZQOG5FRB5SK. MEDIUM.jpg"alt ="Tidying up">
< image src = "Images/FIQEX3DG5FR5MI7. MEDIUM.jpg"alt ="Finition up">
< image src = "Images/FBR70K2G5FRB5SJ. MEDIUM.jpg"alt ="Et fait!" >
< p >< / p > nous avons maintenant toutes les pièces que nous avons besoin. Tout ce que nous devons faire maintenant est mettre la partie inférieure dans le cube pour le rendre un cube tout entier.
< br / > 1. Poncez les côtés de la plaque de fond pour l’ajuster parfaitement dans le fond. Vous voulez juste la plaque de fond
< br / > un peu plus gros, puis le trou, il s’inscrit dans. De cette façon, une fois que vous le mettez là-dedans, il sera coincé et ne laisser aller
< br / > en bougeant le cube.
< p >< / p > vous pouvez bien sûr faire n’importe quelle couleur que vous voulez. Vous pouvez même mettre couleur que changeante LED est dans là pour créer de la lumière ambiante agréable.
< / article >

< article >
< H2 >< li >< b > ressources, aide < /li >< / b >< / H2 >
< table align = « left » border = « 1 » width = « 445 » >
< colgroup >
< classe col = « Column1 » >
< classe col = « Column2 » >
< / colgroup >
< b >
< th colspan = « 2 » style = "background-color: #045FB4" > mesures < /th >
< /tr >
< b >
< largeur th = « 47 % » style = "background-color: #045FB4" > acrylique taille < /th >
< largeur th = « 49 % » style = "background-color: #045FB4" > < /th > taille de la boîte
< /tr >
< b >
< td largeur = « 47 % » align = « center » > 60cm < /td >
< td largeur = « 49 % » align = « center » > 10cm < /td >
< /tr >
< b >
< td largeur = « 47 % » align = « center » > 120cm < /td >
< td largeur = « 49 % » align = « center » > 20cm < /td >
< /tr >
< b >
< td largeur = « 47 % » align = « center » > 180cm < /td >
< td largeur = « 49 % » align = « center » > 30cm < /td >
< /tr >
< b >
< td largeur = « 47 % » align = « center » > 140cm < /td >
< td largeur = « 49 % » align = « center » > 40cm < /td >
< /tr >
< b >
< td largeur = « 47 % » align = « center » > 320cm < /td >
< td largeur = « 49 % » align = « center » > 50cm < /td >
< /tr >
< b >
< td largeur = « 47 % » align = « center » > 380cm < /td >
< td largeur = « 49 % » align = « center » > 60cm < /td >
< /tr >
< /table >
< p >< / p >
< / article >

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

< article >
< H2 >< li >< b > FAQ < /b >< /li >< / H2 >
< détails >
< Résumé >< em > quelle est la fort le cube? < /em >< / Résumé >
< p > il est assez fort, assez pour maison utiliser < /p >
< / détails >
< détails >
< Résumé >< em > combien de temps a-t-il fallu pour faire? < /em >< / Résumé >
< p > pas de long, environ 2-3 semaines < /p >
< / détails >
< détails >
< Résumé >< em > C’est votre propre idée? < /em >< / Résumé >
< p > Oui, j’ai imaginé par moi-même... < /p >
< / détails >
< / article >

< br / >< br / >

< fieldset >
la légende < h1 > >< envoyez-nous vos commentaires < / h1 >< / légende >
< font action = "mailto:vishalapr méthode ="post">
< table >
< b >
< td > nom : < /td >
< td >< input type = « text » name = « nom » valeur = « Entrez votre nom » size = « 35 » >< /td >
< /tr >
< b >
< td > Courriel : < /td >
< td >< input type = « texte » nom = valeur « email » = « Entrez votre email » size = « 35 » >< /td >
< /tr >
< b >
< td valign = « top » > Message : < /td >
< td >< textarea lignes = « 5 » cols = « 35 » >< / textarea >< /td >
< /tr >
< b >
< td > & nbsp ; < /td >
< td >< input type = « submit » value = « Envoyer » ! >< /td >
< /tr >
< /table >
< / font >
< / fieldset >

< br / >
< br / >

< a href = « #Start de la page » > sauter jusqu’au début de la page < /a >

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

< /ol >

< / div >
< br >< /br >

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

< div id = « footer » >
< >< Centre de taille de police = « 3 » > Copyright © 2012 < abbr titre = « www.DIYGenius.com » > & nbsp ; DIYGenius.com, & nbsp ; < / abbr > tous droits réservés. < / police >< / center >
< / div >

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

< / div >

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

< / body >

< / html >

« Le code CSS pour les deux pages »

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

#body
{
border : 0px ;
padding : 0px ;
marge : 0px ;
font-family : Century Gothic ;
Largeur : 90 % ;
}

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

#container
{
Largeur : 100 % ;
border : 0px ;
padding : 0px ;
marge : 0px ;
}

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

#header
{
border-top : 15px solid #333333 ;
Largeur : 100 % ;
hauteur : 220px ;
}

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

#navMenubackground
{
hauteur : 36px ;
Largeur : 100 % ;
background-color: #333333 ;
}

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

#navMenu
{
margin: 0 ;
padding: 0 ;
position : absolute ;
gauche : 33 %
}

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

li #navMenu
{
margin: 0 ;
padding: 0 ;
liste-style : none ;
float : left ;
position : relative ;
Background: #666666 ;
border-radius : 20px 5px ;
}

#navMenu ul li un
{
text-align : center ;
font-family: « Comic Sans MS », cursive ;
text-decoration : none ;
hauteur : 30px ;
Largeur : 150px ;
afficher : bloquer ;
couleur : #FFFFFF ;
border : 1px solid #CCCCCC ;
border-right : 2px solid #CCCCCC ;
border-left : 2px solid #CCCCCC ;
text-shadow : 1px 1px 1px #000000 ;
padding : 2px ;
border-radius : 20px 5px ;
}

#navMenu ul ul
{
position : absolute ;
visibilité : caché ;
haut : 36px ;
}

#navMenu ul li:hover ul
{
visibilité : visible ;
}

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

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

#navMenu ul li:hover ul li a: hover
{
arrière-plan : #AAAAAA ;
Color: #000000 ;
}

li #navMenu a: hover
{
couleur: #FFFFFF ;
}

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

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

#Info
{
police-famille : Lucida Sans Unicode ;
frontière : 9px solid #333333 ;
marge : 2px solid #FFFFFF ;
background-color: #999999 ;
float : right ;
hauteur : 450px ;
Width : 300px ;
haut : 100px ;
position : relative ;
droite : 20px ;
haut : 55px ;
border-radius : 10px ;
}

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

#Info a: hover
{
couleur : #FFFFFF ;
text-decoration : none ;
}

#Info un : active
{
Color: #333333 ;
}

#Info un : lien
{
Color: #333333 ;
}

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

#footer
{
font-weight : bold ;
font-family : Century Gothic ;
couleur : #FFFFFF ;
Clear : both ;
background-color: #333333 ;
padding : 4px ;
Width : 100 % ;
position : fixe ;
bas : 5px ;
hauteur : 35px ;
}

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

fieldset
{
Width : 500px ;
hauteur : 270px ;
}

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

abbr
{
font-weight : bold ;
font-style : italic ;
la taille de police: ++ 1
}

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

. Colonne1
{
background-color: #999999 ;
}

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

. Colonne2
{
background-color: #999999 ;
}

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

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

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

IMG
{
border-radius : 20px ;
}

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

Mots clés: HTML, Online, CSS, Website, Designing, Hosting

Articles Liés

Faites vos propres sites Web - HTML de base (partie 1)

Faites vos propres sites Web - HTML de base (partie 1)

il s'agit d'un guide multi-partie sur comment construire vos propres sites Web. Je vais aborder tout de code HTML de base, le code PHP plus avancés, aux éditeurs de GUI pour rendre vos processus plus rapide. Cette première partie portera sur l'utilis
Faire un site Web html facile

Faire un site Web html facile

tout ce dont vous avez besoin pour cela est un ordinateur, des connaissances en html/css et un certain temps.Étape 1. Téléchargez le fichier zip et l'extraire. Ouvrez les fichiers dans un éditeur de texte comme le bloc-notes ou notepad ++Étape 2. Tou
Faites votre HTML-site Web adapté aux appareils mobiles

Faites votre HTML-site Web adapté aux appareils mobiles

tout d'abord, je n'étais pas satisfait lorsque j'ai visité un site optimisé Bureau sur un smartphone.Les polices sont trop petites, vous avez de panoramique et de zoomez / tout le temps, les liens sont toujours difficiles à cibler. Donc j'ai dû faire
Grille de produits DIY pour votre site Web

Grille de produits DIY pour votre site Web

Si vous n'êtes pas prêts à investir dans des services de fournisseur de magasin en ligne comme Shopify ou SquareSpace, vous pouvez envisager la mise en place d'une vitrine par vous-même sur votre propre site Internet. Pour ce faire, vous aurez besoin
Comment faire votre propre site Web ? Top 25 Best Site Builders

Comment faire votre propre site Web ? Top 25 Best Site Builders

Il n'est pas toujours nécessaire de s'embêter avec un hébergeur lorsque vous générez votre propre site Web. Il y a beaucoup de sites là-bas qui vous permettra de construire votre site Web, et tous ces sites peuvent être utilisé en conjonction avec le
Contrôler la valeur de température et d’humidité de votre site Web (Internet of Things consept)

Contrôler la valeur de température et d’humidité de votre site Web (Internet of Things consept)

Aujourd'hui, je vais vous montrer comment tracer température lecture de DHT11 et des valeurs d'humidité pour mettre le graphique produit sur votre site Internet. Si vous avez un modem sans fil, je veux dire WiFi hotspot point de toute façon qui perme
Créer un site Web tout sur vous avec Visual Studio (HTML, CSS, JQUERY)

Créer un site Web tout sur vous avec Visual Studio (HTML, CSS, JQUERY)

Hey tout le monde !Il s'agit de mon premier instructable et dans ce instructable je vais vous montrer comment utiliser Visual Studio pour créer votre propre site Web !Voici un lien de téléchargement pour Visual Studio :Liaison d'origine Visual Studio
Web Designing Basics (HTML et CSS)

Web Designing Basics (HTML et CSS)

j'apprends le HTML et CSS et je suis va bientôt pour devenir certifié dedans aussi bien, et j'ai pensé qu'il serait une bonne idée de donner un tutoriel sur comment commencer à concevoir votre propre site Web à l'aide de HTML et un peu de CSS...HTML
Créer un site web mobile avec RSS + CSS

Créer un site web mobile avec RSS + CSS

RSSmachine crée un flux RSS avec les feuilles de style CSS, conçus pour les utilisateurs de téléphones mobiles. Ces fils RSS sont un moyen rapide et facile pour créer des pages web mobiles. Combiné avec Dropbox, c'est un moyen gratuit pour publier un
Construire un site Web professionnel : partie 3 CSS

Construire un site Web professionnel : partie 3 CSS

CSS (Cascading Style Sheets) sont comme le pain dans un "sandwich" PB & J. Bien sûr, les tables sont d'accord mais le code est beaucoup plus propre et efficace avec CSS.CSS est une méthode simple pour ajouter style (polices, couleurs, espace
HTML et CSS pour les débutants

HTML et CSS pour les débutants

Ce qui est commun entre Instructables, Google, Facebook et plus d'autres sites Web sur l'internet ? Eh bien, tous d'entre eux utilisent HTML et CSS pour définir leur mise en page et l'interface. Ces sites utilisent Javascript trop, mais nous n'utilis
Comment créer un site Web

Comment créer un site Web

internet est un excellent moyen pour obtenir des informations. Si vous souhaitez utiliser l'affichage internet vos propres informations, vous devez savoir comment créer un site Web. Voici les instructions sur la façon d'utiliser HTML simple pour crée
Comment faire des sites Web - une Introduction complète au développement Web

Comment faire des sites Web - une Introduction complète au développement Web

Regardez sur YouTubeCette série de vidéos est d'introduire le développement de sites Web pour les débutants qui ne savent pas quoi faire des sites. Ce premier épisode introduit le logiciel que j'utilise dans mon flux de travail pour faire des sites W
Convertir un site Web existant en réactif WordPress utilisant le Bootstrap

Convertir un site Web existant en réactif WordPress utilisant le Bootstrap

Responsive Web Design, parfois simplement appelé RWD, est certainement l'un des aspects plus importants du web design aujourd'hui. Selon une enquête récente de Google, plus 82 % des sites sur le web Profitez de cette technique incroyablement efficace