Com crear el vostre propi lloc web: 16 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:16

Una guia completament coberta per passar del paper al web, de franc si voleu, sobretot si algun administrador web amable us deu alguns favors, però fins i tot amb poca experiència i coneixements podeu crear un lloc i accedir-lo al web de la manera següent: …

Pas 1: eines, materials i habilitats bàsiques

Per crear el vostre lloc necessitareu: Eines - Un ordinador, preferiblement de menys de cinc anys - Una còpia de dreamweaver (opcional), però és el que sé i us ho mostraré - Una còpia de Photoshop, no essencial, però definitivament obligatori per a qualsevol persona que vulgui un lloc atractiu - Una connexió a Internet a l'ordinador, preferiblement ràpida (perquè fa que les coses siguin més ràpides). un material molt valuós: una adreça de correu electrònic que funciona si en necessiteu, estan lliures de Gmail i hotmail Habilitats bàsiques: coneixements bàsics sobre com utilitzar l’ordinador, Internet. que volen crear un lloc però no tenen ni idea de com - Algunes habilitats de disseny serien útils - Saber utilitzar Photoshop seria bo, pintar. NET o GIMP

Pas 2: Comencem

Un cop hàgiu sabut quin tipus de lloc voleu prendre, decidireu el vostre disseny.

Penseu en els refrigeradors bàsics del lloc, l’estil i com voleu que la gent hi navegui. Si el feu per a un negoci o un club, probablement és millor que el lloc reflecteixi els refredadors de l’empresa / club i que tingui funcions que imiten o es basin en coses de l’empresa, com ara botons de menú que recorden alguna cosa que venen si es tracta d’un negoci. La navegació pel vostre lloc pot ser diferent, generalment els tres tipus principals que s’utilitzen són els menús de la barra lateral esquerra i dreta i els menús de la barra superior (es troben a sota de la capçalera com els d’aquest lloc). T'agrada i ves d'allà, però, paraula d'advertència. no utilitzeu colors realment conflictius i les noies intenten no apostar pel rosa fluorescent (no ser masclista, això passa molt) Fins i tot podríeu dirigir una empresa a través del vostre lloc si voleu, tinc poca experiència en fer-ho, però podria ser és més fàcil utilitzar alguna cosa com les botigues de Yahoo que utilitza aquest lloc.

Pas 3: iniciar el lloc

Just aquí és on comencem, anem a Els meus documents i feu-vos una carpeta anomenada "El meu lloc web o utilitzeu el nom del lloc, dins d'aquesta carpeta feu una carpeta anomenant" imatges ", una anomenada" pàgines "i una altra anomenada" fitxers ". (el fitxer anomenat és per a tots els altres fitxers que podríeu fer servir en el procés de creació del vostre lloc.) Ara engegueu dreamweaver i, a continuació, des del fitxer veureu un element del menú anomenat lloc, feu clic a això i trieu un lloc nou, utilitzeu la pestanya avançada (perquè és més fàcil de passar), ara poseu el nom del vostre lloc web al quadre corresponent al nom del lloc. Veureu un quadre anomenat "carpeta arrel local" que és la carpeta que heu creat sota el nom del vostre lloc. El següent quadre s’etiqueta com a “Carpeta d’imatges predeterminades”, trieu la carpeta anomenada imatges de la carpeta arrel. Deixeu les dues caselles de selecció soles, ambdues són com haurien de ser.

Pas 4: deixeu-vos enganxar aleshores

Després d’haver pres totes les vostres decisions principals al lloc, és hora de fer una plantilla per a totes les vostres pàgines, això és exactament el que sona, una plantilla per fer pàgines, un lloc web hauria de tenir un aspecte semblant per evitar confusions. per als espectadors i estalvia molt de temps i malgastar esforços.

A la plantilla, haureu de fer una capçalera, aquest és el bàner principal que travessa la part superior de la pàgina, normalment té el títol del nom del lloc / empresa, un eslògan i una imatge o logotip que reflecteix l'assumpte del lloc.. Les millors mesures que puc donar són 760 x 100-200, l'alçada és preferent i també depèn d'on anirà la barra de menú. L'amplada és de 760, de manera que s'adapta a les finestres del navegador fins i tot quan s'executen 800x600 res a les pantalles (no serveix de res si no podeu veure la meitat del lloc). Hi ha 30 píxels d’alçada i l’amplada depèn de moltes coses, però les meves solen oscil·lar entre 100 i 1500 píxels. Aleshores és possible que torneu a utilitzar botons de flaix que no requereixen cap esforç (per a Dreamweaver)

Pas 5: elaboració de la plantilla …

Ara, doncs, escollim els colors i el que fem del nostre lloc fent clic dret a la nostra pàgina en blanc i anant a les propietats de la pàgina. Per al meu, el fons serà negre, el text en blanc i posar el títol com a plantilla ara. Observareu a la imatge que tots els meus colors d’enllaços es defineixen com a blaus, us suggereixo que també utilitzeu el blau perquè el blau és el color tradicional de l’enllaç i l’ús de color d’enllaç estrany era un dels primers llocs de la llista de coses que molesten a la gent sobre els llocs web i què els fa poc professional.

Pas 6: Continuació de la plantilla. el disseny

Ara comencem el disseny de la plantilla.

Feu clic al botó Insereix taula o al botó Dibuixa taula. Ara només cal arrossegar per fer una taula, triar 3x3 és un lloc pràctic per començar. El primer que heu de fer és fer-vos una taula de 800 píxels d’amplada, podeu veure l’amplada a la barra de propietats de la part inferior, ara ressalteu la fila superior de cel·les i feu clic amb el botó dret, aneu a la taula al menú del clic dret i trieu combinar cel·les, fes que la cel·la acabada de formar sigui l’alçada de la imatge de capçalera. Amb aquesta pinta, aneu a les propietats de la taula i introduïu el valor de zero per als valors "cel·lular" i "vora". Això significa que la taula és inexistent per a l'usuari final, però ho manté tot al seu lloc. Ara l'enganxem a la imatge de capçalera que s'hauria de desar a la carpeta d'imatges del lloc, però si no és dreamweaver us preguntarà si voleu copiar-hi el fitxer. Per inserir una imatge, mireu al llarg de la barra de botons (la pestanya que hi ha a sobre hauria de ser comuna), cerqueu el botó amb la imatge d'un arbre en un quadre (la majoria dels programes utilitzen un símbol similar), feu-hi clic i apareixerà un quadre de diàleg, simplement cerqueu el fitxer i feu-hi doble clic. Si la imatge apareix al lloc equivocat, el cursor es troba a la cel·la equivocada. Ara que es reparteix la taula, dividiu-vos una cel·la al costat que vulgueu que tingueu la barra de menú, recordeu que les files es troben a les columnes del camí. Feu que la casella de la taula de botons del menú sigui tan àmplia com sembli bona i, a continuació, feu que els botons tinguin l’amplada adequada (ignoreu-ho si voleu botons de flaix) Ara feu una taula dins de la cel·la amb 1 fila i tantes columnes com hi hagi botons (ho heu de saber pel vostre pla de lloc, no us puc ajudar en absolut, és la vostra elecció) o per a una columna de menú horitzontal 1 i tantes files com botons hi ha.

Pas 7: afegir els botons de menú

Hi ha algunes maneres de fer-ho. Si voleu botons d’imatges senzills (una imatge on es pugui fer clic i que sembli un botó), inseriu la imatge amb normalitat i, de moment, això és tot. més endavant hi afegirem enllaços.

Si voleu botons de desplaçament (la imatge canvia quan el cursor està sobre la imatge del botó, heu de crear imatges per a cada botó, digueu que teniu uns bonics botons de color gris fosc que voleu il·luminar quan l'usuari hi posa el ratolí. a continuació, feu un segon conjunt de botons il·luminats. A continuació, aneu al botó Afegeix una imatge sobre la barra d'eines (al costat o al costat del botó d'imatge) i trieu el fosc per a la imatge 1 i el clar per a la imatge 2, torneu a deixar l'enllaç per ara perquè encara no heu creat cap pàgina. Si voleu botons de flaix, heu de fer clic a la pestanya multimèdia de la part superior de la barra d'eines del botó i fer clic al símbol d'inserció del botó de flaix (logotip de flaix amb barra petita a l'extrem inferior.), us demanarà que deseu el document abans de continuar, així que deseu-lo com a "plantilla base" o alguna cosa que sàpiga que significa la plantilla principal del vostre lloc.

Pas 8: creació de la plantilla per utilitzar-la

Just ja hem acabat amb la nostra plantilla i podem començar a les nostres pàgines molt aviat, ara necessita regions editables (llocs on es pot utilitzar el contingut de la pàgina). Les afegim fent clic dret i anant al menú desplegable de plantilla al clic dret del menú, trieu una nova regió editable i apareixerà un missatge que indica que el document es convertirà en una plantilla. Això és bo. Feu-ho amb el cursor a les cel·les de la taula on anirà el contingut (els que hi ha a sota i al costat de la barra de menú de la meva)

Ara deseu el document, tanqueu-lo i aneu al fitxer nou i feu clic a les pestanyes de plantilles que hi ha a la part superior, la plantilla hi hauria d’estar, assegureu-vos que la casella d’actualització quan es modifiqui la casella estigui marcada (desa molta feina més endavant).

Pas 9: afegiu contingut

Feu que les vostres pàgines afegeixin contingut i recordeu-les desar-les a les carpetes que heu creat per a les pàgines i introduïu les vostres imatges a la carpeta d’imatges que també heu creat. Simplement repetiu l’últim pas del pas 8 sobre la creació de la pàgina a partir d’una plantilla cada vegada que feu una Tingueu en compte el contingut fals que he utilitzat, es diu Lorem Ispsum i és una història sobre el bé i el mal en llatí, els dissenyadors gràfics i de webs fan servir aquesta idea per donar una idea de com serà el producte amb text real. es pot trobar a Lipsum.com. Aquests quadres blaus són les regions editables que també teniu, espero.

Pas 10: Ara fem els nostres enllaços

Obriu la plantilla que heu utilitzat (recordeu aquesta casella de selecció, ara ve a jugar). Al minut, els botons del menú són només imatges (si són flash, mireu a sota) Ara que teniu pàgines, poden ser botons reals Feu clic amb el botó dret del ratolí sobre el botó d'inici o bé canvieu l'enllaç o feu un enllaç (depèn de la versió); apareixerà un quadre de diàleg, tan sols cerqueu el fitxer de la pàgina d'inici i feu doble clic a sobre. ara està enllaçat a la pàgina, repeteix la resta de botons i desa el document, si dreamweaver pregunta si vols canviar totes les pàgines en funció del document digues que sí.

Per al botó flash, recordareu que vam ignorar la barra d’enllaços, de manera que tot el que fem és fer clic amb el botó dret al botó i fer clic a Edita que se us mostrarà amb la pantalla d’abans, només heu de prémer el botó de navegació situat al costat de la barra d’enllaços i trobar el fitxer. Ara hauríeu de tenir un lloc pràcticament funcionant, el següent pas es completa amb alguns trucs i coses per a pàgines de fotos, etc., per facilitar les coses i funcionar millor.

Pas 11: alguns consells i idees útils

Si esteu treballant a XP (possiblement inclosa la vista), hi ha un powertoy XP anomenat redimensionador d’imatges que us permetrà personalitzar la mida de les vostres imatges fent clic amb el botó dret i podeu fer lots i afegir polze al final de cada nom. Per a una galeria de fotos, utilitzeu les miniatures que heu fet com a imatges de la pàgina principal i enllaceu-les com botons al fitxer d'imatges més gran, cosa que permet una càrrega més ràpida i menys pàgines de la galeria.

Per a les pàgines amb un munt de contingut, pot ser que valgui la pena dividir-les en enllaços de pàgines i pàgines anteriors, això és senzill de fer i tot el que feu és enllaçar-los i posar l'inici com a enllaç de plantilla o des de qualsevol pàgina està vinculat des de. Tornaré i n'afegiré més a mesura que pensi en ells o quan la gent els suggereixi que només és el començament.

Pas 12: creeu una pàgina d'índex

Ara mateix, la majoria dels amfitrions web requereixen una pàgina d'índex, ja sigui una rèplica de la pàgina d'inici anomenada "index.htm" (així hauríeu de posar-hi el nom) o bé crear una pàgina divertida amb un lloc d'entrada (si ho feu) És bo en flash, podríeu tenir una animació per animar les coses. Heu de sentir que s’acosta a aquell moment especial. Aneu aquí …

Pas 13: fem-nos un amfitrió

Ara us trobareu al lloc on us he enviat, l’he triat perquè pel que fa als amfitrions gratuïts, és fantàstic i permet una gran quantitat de coses, a més d’emmagatzematge de 8 gig i una amplada de banda de 300 GB al mes.

Per tant, seguiu els passos de registre i activeu el vostre compte, ni tan sols mireu el gestor de fitxers que no necessitarem. Aneu directament al vostre compte i elimineu el nom del vostre compte FTP, el nom d’usuari i la contrasenya (igual que la vostra contrasenya per al compte d’allotjament) Accediu a llocs, editeu llocs i trieu el vostre, aneu a la pestanya avançada i aneu al servidor de proves (Sé que la meva és d'informació remota, però el servidor de proves és la manera més senzilla de pujar el lloc), introduïu la vostra informació tal com es mostra a la imatge.

Pas 14: el pots sentir?

És hora de penjar el lloc … Esteu a punt de tenir un lloc web.

Aneu a la barra de fitxers / recursos del lloc, sens dubte té un aspecte molt diferent ara mateix, feu clic al petit menú desplegable de vistes i trieu el servidor de proves. Ara dreamweaver ja ha desat la contrasenya FTP. Feu clic al botó de connexió a l'amfitrió remot (el que té tres formes divertides). una vegada que digui que esteu connectat, feu clic al botó Puja fitxers., aquest és el botó que és una fletxa cap amunt. (Per a un ús posterior, podeu iniciar sessió al compte i fer servir fitxers per obtenir fitxers que potser heu perdut al vostre ordinador.) Quan premeu això, us demanarà si voleu posar tot el lloc a sobre, maleït, ho feu amb tot això funciona, per a actualitzacions menors podeu enviar fitxers de substitució. Quan arribi a 'index.htm', us demanarà si el substitueixi, digueu que sí, en cas contrari, el vostre lloc baixarà al cap de 15 dies, per això hem creat primer el nostre lloc.

Pas 15: ara voleu un nom?

Per tant, la idea de ser un lloc web afecta el vostre ego, teniu opcions, compreu un nom de domini (no és car sense allotjament i podeu fer.com.org.co.uk i.net triar el que millor s’adapti al vostre nom. O per al noi que ho vol tot gratis, aneu al lloc dot tk. Simplement reflecteixen les vostres pàgines, de manera que quan feu que la pàgina d'inici o la pàgina d'índex sigui l'enllaç del lloc i trieu dir "killerjackalope.tk".

Pas 16: n’hi ha més per obtenir-ne més?

Ara, això respon a una pregunta ardent i s’està presentant al concurs de talladors làser (última hora), però si teniu alguna pregunta o voleu alguna explicació addicional que només fer, si és petita, us respondré i si és un bon, després afegiré un pas perquè tothom tingui la resposta a la vostra pregunta.

També sé que és de l'ex tutorial, però estic segur que això és el que passa quan intenteu crear un lloc a la pàgina principal, és horrible i preferiria dir-vos que robeu dreamweaver i que compreu la pàgina principal. A continuació, es pot instruir com fer imatges divertides de Hulk.