Creeu un lloc sense coneixements d'HTML? Els editors en línia per crear llocs web estan guanyant terreny, sovint a causa de les boniques plantilles. Si preferiu no partir d'un disseny tan preparat, que sovint acaba en una opció de pagament, aleshores RocketCake és un programa d'escriptori amb el qual podeu crear un lloc bonic des del no-res.
El programa en anglès conté només quinze plantilles (plantilles) per inspirar-se. La idea és que amb RocketCake creeu el vostre propi lloc que podreu actualitzar fàcilment més tard. RocketCake és un editor anomenat WYSIWYG. Així que no cal escriure cap codi HTML. Munteu el vostre propi lloc col·locant elements a la superfície de treball i després carregant el cas. Els elements inclouen quadres de text, botons, imatges, menús, presentacions de diapositives, pel·lícules, clips d'àudio i molt més. El que fa especial RocketCake és que és un editor per crear els anomenats llocs web sensibles. Un lloc web tan responsiu és compatible amb mòbils, perquè el disseny s'adapta a la pantalla del dispositiu amb el qual algú visita el lloc.
Una pàgina web responsiva encara es veurà ordenada, tant si la visualitzeu en un monitor gran com en una petita pantalla de telèfon intel·ligent. Per a això, el lloc web ajustarà una sèrie de parts, com ara la mida de la lletra, la disposició de determinats elements i la manera com es mostra el menú a la pantalla.
Descarrega RocketCake aquí. Hi ha una versió per a Windows i una altra per a macOS. En aquest taller fem servir l'edició gratuïta. Això fa que sigui fàcil crear un lloc web responsiu que funcioni sense problemes. També hi ha una edició professional de RocketCake, que té un preu de 39 euros. La versió professional us permet crear un nombre il·limitat de llocs web. També hi ha suport CSS, amb el qual podeu ajustar ràpidament els estils de disseny a tot un lloc. La versió 3.1 de RocketCake s'ha millorat perquè el vostre lloc web es classifiqui millor amb Google i altres motors de cerca. A més, la versió gratuïta inclou algunes funcions que abans només es trobaven a l'edició de pagament.
Entorn de treball i exposició
A la part superior de l'espai de treball hi ha la barra amb botons per afegir una pàgina nova, per previsualitzar amb Internet Explorer i per publicar el lloc web a Internet. A la dreta trobareu el conjunt d'eines amb tots els elements que pots col·locar en una pàgina web. A la part superior esquerra veieu l'estructura de totes les pàgines del vostre lloc web.
A continuació es mostren els Propietats. Aquí canvieu les propietats de cada element que seleccioneu. Suposem que voleu afegir una imatge a una pàgina, després seleccioneu el fitxer d'imatge a les Propietats i indiqueu si la imatge hauria de tenir cantonades arrodonides o afilades, etc.
A la part inferior determineu l'amplada de la pantalla. Per defecte, aquest és el escriptori-exhibició. A través del petit menú desplegable a la part inferior esquerra també podeu treballar a la pantalla d'una sèrie de dispositius mòbils populars, com ara l'iPhone, l'iPad, el Samsung Galaxy, LG... Si no trobeu l'amplada desitjada en aquest menú, també podeu seleccionar Personalitzat i utilitzar un control lliscant per especificar l'amplada que apareixerà a la pantalla. Aquest paràmetre d'amplada és important per determinar els punts d'interrupció, dels quals parlarem més endavant.
Colors i pàgina d'inici
Comencem per la pàgina d'inici. En aquest exemple, estem creant el lloc web d'una banda de rock ambiciosa. En lloc de començar amb una plantilla, trieu Pàgina buida. La secció Propietats s'adaptarà a cada element que seleccioneu. Per exemple, feu clic al fons de la primera pàgina i, a continuació, podreu accedir Color de fons seleccioneu un color de fons. Per defecte hi ha 000000, el codi html del blanc. En fer clic a la casella amb els tres punts apareixerà el selector de colors. A les Propietats li doneu un títol a aquesta pàgina web. Aviat apareixerà a la part superior de la finestra del navegador. Deixeu el nom de la pàgina d'inici a index.html. Un navegador sempre cerca la pàgina d'índex per mostrar-la com a pàgina d'inici.
A continuació determineu els colors dels quatre tipus d'hiperenllaços. LinkColor determina el color dels enllaços que encara no s'han visitat, LinkColorActive fa referència als enllaços que algú està visitant actualment, LinkColorHover és el color d'un enllaç al qual apunta el punter del ratolí i LinkColorVisited fa referència als enllaços que algú ja ha visitat.
Barra de navegació i imatge d'introducció
Per col·locar una barra de navegació, seleccioneu l'element al conjunt d'eines Menú de navegació i després feu clic a l'espai de treball. En aquesta barra de navegació escriviu els elements de menú per als quals voleu crear pàgines web. Manteniu els noms d'aquests elements curts. En el nostre exemple, aquests són The band, Who, Where, When, Why i Media. A la part superior hi ha els botons per donar format al text d'aquests elements de navegació. Si feu clic a la barra de navegació, ajusteu el color i la forma de la barra a les Propietats. Així és com pots Fons de moda triar per Color, imatge, degradat i Botó amb estil. A Gradient determineu els tons de color de la transició i a Botó amb estil, la barra de menú té un aspecte esfèric.
També volem afegir un bàner o una imatge d'introducció. Per això primer col·loqueu l'element Contenidor. A les propietats a NomImatgefeu clic als tres punts per seleccionar la imatge que heu preparat abans. Si és massa gran, RocketCake pregunta si pot canviar la mida de la imatge. Està bé. El títol 'Mad Dog' que veieu a la pancarta a la part superior d'aquest article, l'hem afegit nosaltres mateixos a la imatge amb un altre programa. Bàsicament, també podeu enviar missatges de text amb l'element Text flotant col·locar sobre una imatge. Malauradament, això dóna un resultat imprevisible en dispositius mòbils.
Quan estigueu satisfet, deseu el fitxer de treball en algun lloc del disc dur com a fitxer .rcd.
Columnes
A sota del bàner voleu proporcionar a la pàgina d'inici contingut en una, dues o tres columnes. Per fer-ho, trieu l'element al conjunt d'eines Contenidor amb columnes. RocketCake us pregunta quantes columnes voleu. L'aplicació també vol conèixer l'amplada mínima d'una columna. Aquí optem per dues columnes i la configuració predeterminada és 150. Això vol dir que les columnes es poden veure perfectament una al costat de l'altra en una pantalla ampla. Si una columna d'una pantalla petita fa menys de 150 píxels, ja no apareixerà al costat, sinó a sota de la columna anterior.
En aquest exemple establim la columna de l'esquerra a Amplada mínima 500. 500 és el punt d'interrupció de la columna de l'esquerra. Si l'amplada de la pantalla es fa massa petita, el visitant llegirà el contingut de la columna de la dreta sota la columna de l'esquerra. A més, hem posat la pancarta a Amplada màxima 1000.
Per fer que la columna de la dreta sigui més estreta que l'esquerra, primer feu clic a la columna de l'esquerra. El mida hi és per defecte 50%, cotxe. Per exemple, canvieu-ho per 70%, cotxe. Això fa que la segona columna suri temporalment per sota de la primera. Podeu resoldre-ho quan feu clic a la segona columna i a Mida 30%, cotxe omple. Això us donarà una relació de 70/30. A continuació, ompliu les columnes amb text, que també dissenyeu com amb un processador de textos. En aquesta columna també podeu Encapçalaments (cosses). Els títols 1, 2, 3 fan que les tasses es vegin bé.
Per afegir una imatge, col·loqueu el cursor al text i feu clic al conjunt d'eines a Imatge. A continuació, navegueu fins a la ubicació on està esperant la imatge. Feu clic al botó de tant en tant Vista prèvia per veure el vostre treball en un navegador.
Si feu clic a aquesta columna de text, veureu a les Propietats que el farciment El valor predeterminat és 10, 10, 10, 10. El farciment és la distància entre el text i la vora de la columna. El primer nombre s'emmagatzema a la part superior, el segon a la part inferior, el tercer a la dreta i el quart a l'esquerra. Si voleu una mica més de farciment al costat dret d'un quadre de text, hauríeu d'establir el tercer valor a 20, per exemple.
El farciment és, per tant, la distància a l'interior d'una caixa, marge és la distància a l'exterior. Si voleu més espai entre la part inferior de la foto i la part superior del text que hi ha a sota, canvieu el Marge de 0, 0, 0, 0 a, per exemple, 0,10, 0, 0.
Pàgines addicionals
Ara que la pàgina d'inici està preparada, per descomptat, voldreu crear més pàgines per al vostre projecte. Això va amb el botó Afegeix pàgina. El programa us pregunta si voleu crear una pàgina completament nova o una còpia d'una pàgina web ja existent. En aquest exemple utilitzarem l'estil de la nostra pàgina d'inici: el fons negre, el tipus de lletra, la mida del tipus de lletra, l'amplada del contenidor... Així que anem a la segona opció. Aleshores eliminem el banner i canviem el contingut del contenidor de text.
Si voleu un peu de pàgina a la part inferior de cada pàgina, afegiu-hi també un peu de pàgina Contenidor o Contenidor amb columnes i escriviu, per exemple, la informació de contacte o la informació de copyright. Els caràcters especials, com ara el símbol de copyright, no es poden introduir directament des del teclat. A RocketCake, trieu aquests personatges especials mitjançant el menú Inserir, inserir símbol de text.
Enllaços
Per descomptat, voleu que els botons del menú de navegació apuntin a les pàgines correctes. Per fer-ho, primer seleccioneu el botó del menú de navegació i després feu clic al botó amb la cadena. O feu clic amb el botó dret i trieu Insereix un hiperenllaç. S'obre un quadre de selecció on has de triar entre enllaçar a una pàgina web externa, una adreça de correu electrònic, una pàgina d'aquest projecte o un fitxer específic. Seleccioneu l'opció Pàgina del projecte. A continuació, veureu una llista de pàgines web creades en la qual seleccioneu la correcta.
Abella Objectiu trieu obrir la pàgina web en una nova finestra del navegador o a la finestra oberta del navegador. Aquesta última opció és habitual. Si manteniu premut el botó esquerre del ratolí mentre assenyaleu un botó del menú de navegació, afegireu submenús que fan referència a pàgines web existents de la mateixa manera.
pàgines mestres
RocketCake també funciona amb les anomenades pàgines mestres. Si esteu creant un lloc web amb moltes pàgines, aquesta tècnica accelerarà significativament el format. Una pàgina mestra és un model amb format que serveix de plantilla per a altres pàgines. Per tant, aquesta pàgina mestra no és una pàgina web normal. A continuació us expliquem com crear-ne una: creeu una pàgina web nova, col·loqueu el menú desplegable, assegureu-vos que el menú funcioni com cal i formateu aquesta pàgina sense contingut de text real. A continuació, afegiu un . del conjunt d'eines Marcador de posició de contingut amunt. Sense aquest element, la pàgina mestra no funcionarà. Doneu un nom significatiu a aquesta pàgina especial, per exemple, masterpage.html. A continuació, creeu una o més pàgines web que no proporcioneu amb un disseny.
Escriviu text, afegiu una imatge si cal i deseu aquesta pàgina. En aquestes pàgines amb contingut, mireu les Propietats al camp de la part inferior Pàgina Mestra. Allà activeu l'opció Utilitzeu MasterPage. Si heu marcat la casella, apareixerà una casella nova en la qual seleccioneu el nom de la pàgina mestra desitjada. Podeu utilitzar diverses pàgines mestres. De moment encara no veieu res, però si feu clic al botó Vista prèvia feu clic, notareu que el contingut d'aquesta pàgina es publica perfectament al marcador de posició de contingut de la pàgina mestra seleccionada.
Insereix suport
Amb RocketCake, afegiu vídeos de YouTube seleccionant l'element al conjunt d'eines vídeo de YouTube seleccionar. A continuació, introduïu l'adreça web del vídeo a les propietats. Tan fàcil és afegir una galeria de fotos. després de vostè Galeria d'imatges heu escollit del conjunt d'eines, seleccioneu les diferents fotos dels quadres ImageFile1, ImageFile2 i així successivament. Hi ha diverses maneres d'ampliar les fotos a la galeria. Per exemple, podeu obrir-los en una finestra nova, en una finestra emergent, però ens agrada més com a imatge gran en una capa separada.
Per publicar
Estàs acabat? A continuació, podeu publicar el lloc web a Internet o en un disc local. RocketCake està equipat amb una funció ftp per col·locar-ho tot perfectament al servidor a la carpeta que el vostre proveïdor posa a disposició. Introduïu l'adreça ftp, el nom d'usuari i la contrasenya. Utilitzeu l'opció Desa la contrasenya per guardar la contrasenya. Quan publiqueu el lloc web al vostre disc dur, podeu visitar la pàgina d'inici obrint el fitxer index.html amb el vostre programa d'Internet.
