Luoda sivusto ilman HTML-tietoa? Verkkosivustojen rakentamiseen tarkoitetut online-toimittajat ovat saamassa kasvua, usein kauniiden mallien takia. Jos et halua aloittaa tällaisesta valmiista suunnittelusta, joka usein päättyy maksettuun vaihtoehtoon, niin RocketCake on työpöytäohjelma, jolla voit rakentaa kauniin sivuston tyhjästä.
Englanninkielinen ohjelma sisältää vain viisitoista mallia inspiraatiota varten. Tarkoitus on, että luot oman sivustosi RocketCakella, jonka voit helposti päivittää myöhemmin. RocketCake on niin kutsuttu WYSIWYG-editori. Sinun ei tarvitse kirjoittaa HTML-koodeja. Käännät oman sivuston sijoittamalla elementit työtilaan ja lataamalla sitten tapauksen. Elementteihin kuuluvat tekstiruudut, painikkeet, kuvat, valikot, diaesitykset, elokuvat, äänileikkeet ja paljon muuta. RocketCake tekee erityisen, että se on toimittaja, joka rakentaa niin sanottuja reagoivia verkkosivustoja. Tällainen reagoiva verkkosivusto on mobiiliystävällinen, koska asettelu mukautuu sen laitteen näyttöön, jolla joku vierailee sivustolla.
Reagoiva verkkosivu pysyy siistinä riippumatta siitä, katsotko sitä suurella näytöllä vai pienellä älypuhelimen näytöllä. Tätä varten verkkosivusto säätää useita komponentteja, kuten fonttikokoa, tiettyjen elementtien järjestystä ja tapaa, jolla valikko näkyy näytöllä.
Lataa RocketCake täältä. On yksi versio Windowsille ja yksi macOS: lle. Tässä työpajassa käytämme ilmaista versiota. Tämän avulla on helppo luoda sujuvasti toimiva reagoiva verkkosivusto. RocketCakesta on myös ammattiversio, joka maksaa 39 euroa. Ammattimaisen version avulla voit luoda rajoittamattoman määrän verkkosivustoja. Siellä on myös CSS-tuki, jolla voit nopeasti säätää koko sivuston asettelutyylejä. RocketCake-sovelluksen versiota 3.1 on parannettu, jotta verkkosivustosi saa parempia tuloksia Googlen ja muiden hakukoneiden kanssa. Lisäksi ilmainen versio sisältää muutamia ominaisuuksia, jotka aiemmin olivat vain maksullisessa versiossa.
Työympäristö ja näyttö
Työtilan yläosassa on painike, jolla voit lisätä uuden sivun, esikatsella Internet Explorerilla ja julkaista verkkosivuston Internetissä. Oikealta löydät Työkalusarja kaikki elementit, jotka voit sijoittaa verkkosivulle. Vasemmassa yläkulmassa näet verkkosivustosi kaikkien sivujen rakenteen.
Sen alla ovat Ominaisuudet. Tässä muutat jokaisen valitsemasi elementin ominaisuuksia. Oletetaan, että haluat lisätä kuvan sivulle, valitset sitten kuvatiedoston Ominaisuudet-kohdasta ja ilmoitat, onko kuvan pyöristettyjä tai teräviä kulmia ja niin edelleen ...
Aivan alaosassa määrität näytön leveyden. Oletuksena tämä on Työpöytä-näyttö. Vasemmassa alakulmassa olevan pienen avattavan valikon kautta voit myös työskennellä useiden suosittujen mobiililaitteiden, kuten iPhone, iPad, Samsung Galaxy, LG, näytössä ... Jos et löydä haluamaasi leveyttä täältä valikossa, voit myös valita Mukautettu ja määrittää liukusäätimen avulla näytölle tulevan leveyden. Tuo leveysasetus on tärkeä määritettäessä murtumispisteitä, joista keskustelemme myöhemmin.
Värit ja kotisivu
Aloitetaan kotisivulta. Tässä esimerkissä teemme kunnianhimoisen rock-yhtyeen verkkosivuston. Sen sijaan, että aloitat mallilla, valitset Tyhjä sivu. Ominaisuudet-osio mukautuu kaikkiin valitsemiisi elementteihin. Napsauta esimerkiksi ensimmäisen sivun taustaa ja pääset sitten Taustaväri valitse taustaväri. Oletusarvo on 000000, valkoisen HTML-koodi. Kolme pistettä sisältävän laatikon napsauttaminen tuo esiin värivalitsimen. Ominaisuuksissa annat tälle verkkosivulle otsikon. Tämä näkyy pian selainikkunan yläosassa. Jätät kotisivun nimen hakemistoon index.html. Selain etsii aina hakemistosivua, joka näytetään kotisivuna.
Sen alapuolella määritetään neljän tyyppisten hyperlinkkien värit. LinkColor määrittää niiden linkkien värin, joita ei ole vielä käynyt, LinkColorActive viittaa linkkeihin, joissa joku käy parhaillaan, LinkColorHover on linkin väri, johon hiiren osoitin osoittaa ja LinkColorVisited viittaa linkkeihin, joissa joku on jo käynyt.
Navigointipalkki ja esittelykuva
Sijoita navigointipalkki valitsemalla kohde Työkalusarjasta Navigointivalikko ja napsauta sitten työtilaa. Tässä navigointipalkissa kirjoitat valikkokohdat, joille haluat luoda verkkosivuja. Pidä näiden nimien nimet lyhyinä. Esimerkissämme nämä ovat yhtye, kuka, missä, milloin, miksi ja media. Yläreunassa on painikkeet näiden navigointikohteiden tekstin muotoilemiseksi. Jos napsautat itse navigointipalkkia, voit säätää palkin väriä ja muotoa Ominaisuudet-kohdassa. Niin sinä voit BackGroundMode valitse Väri, kuva, kaltevuus ja Tyylitelty painike. Gradientissa määritetään siirtymän värisävyt ja Tyylitelty-painikkeessa valikkorivi saa kuperan ulkonäön.
Haluamme myös lisätä bannerin tai esittelykuvan. Voit tehdä tämän asettamalla kohteen ensin Kontti. Ominaisuudet: ImageNameNapsauta kolmea pistettä valitaksesi kuvan, jonka olet valmistellut etukäteen. Jos se on liian suuri, RocketCake kysyy, voiko se säätää kuvan kokoa. Se on sallittua. Otsikko "Hullu koira", jonka näet tämän artikkelin yläosassa olevassa bannerissa, lisäsimme kuvaan itse toisella ohjelmalla. Periaatteessa voit myös kirjoittaa tekstin kohteen kanssa Kelluva teksti kuvan päälle. Valitettavasti tämä antaa arvaamattoman tuloksen mobiililaitteilla.
Kun olet tyytyväinen, tallenna työtiedosto jonnekin kiintolevylle .rcd-tiedostona.
Sarakkeet
Bannerin alapuolella haluat antaa kotisivulle sisältöä yhdessä, kahdessa tai kolmessa sarakkeessa. Voit tehdä tämän valitsemalla kohteen Työkalusarjassa Säiliö pylväillä. RocketCake kysyy, kuinka monta saraketta haluat. Sovellus haluaa myös tietää, mikä on sarakkeen vähimmäisleveys. Olemme valinneet kaksi saraketta ja oletusasetuksen 150. Tämä tarkoittaa, että sarakkeet näkyvät laajalla näytöllä siististi vierekkäin. Jos pienen näytön sarakkeesta tulee pienempi kuin 150 pikseliä, se ei enää näy edellisen sarakkeen vieressä, vaan sen alapuolella.
Tässä esimerkissä asetamme vasemman sarakkeen arvoksi MinLeveys 500. 500 on vasemman sarakkeen taittopiste. Jos näytön leveys muuttuu liian pieneksi, kävijä lukee oikean sarakkeen sisällön vasemman sarakkeen alapuolelta. Lisäksi olemme asettaneet banneriksi Suurin leveys 1000.
Jos haluat tehdä oikean sarakkeen kapeamman kuin vasen, napsauta ensin vasenta saraketta. Koko onko se oletuksena 50%, automaattinen. Vaihda esimerkiksi asetukseksi 70%, automaattinen. Tämä saa toisen sarakkeen kellumaan väliaikaisesti ensimmäisen alle. Voit ratkaista tämän napsauttamalla toista saraketta ja valitsemalla Koko 30%, automaattinen täyttää. Tämä antaa sinulle 70/30 suhde. Sitten täytät sarakkeet tekstillä, jonka suunnittelet myös tekstinkäsittelyohjelmalla. Voit käyttää tällaista saraketta myös Työkalusarjasta Otsikot (kupit). Otsikot 1, 2, 3 pitävät kupit näyttävän hyvältä.
Lisää kuva sijoittamalla kohdistin tekstiin ja napsauttamalla sitä Työkalusarjassa Kuva. Siirry sitten paikkaan, jossa kuva odottaa. Napsauta painiketta silloin tällöin Esikatselu nähdäksesi työsi selaimessa.
Jos napsautat tällaista tekstisaraketta, näet Ominaisuudet-kohdassa Pehmuste oletusasetus on 10, 10, 10, 10. Täyte on etäisyys tekstistä sarakkeen reunaan. Ensimmäinen numero viittaa yläosaan, toinen alaosaan, kolmas oikealle ja neljäs vasemmalle. Jos haluat hieman enemmän täytettä tekstiruudun oikealle puolelle, sinun on asetettava kolmas arvo esimerkiksi 20.
Täyte on siis etäisyys laatikon sisäpuolelta, Marginaali on etäisyys ulkopuolelta. Jos haluat hieman enemmän tilaa kuvan alareunan ja sen alla olevan tekstin yläosan väliin, muuta marginaali arvoksi 0, 0, 0, 0 sanoen 0, 10, 0, 0.
Lisäsivut
Nyt kun kotisivu on valmis, haluat luonnollisesti luoda lisää sivuja projektillesi. Se tehdään painikkeella Lisää sivu. Ohjelma kysyy, haluatko luoda kokonaan uuden sivun vai kopion olemassa olevasta verkkosivusta. Tässä esimerkissä käytämme kotisivumme tyyliä: musta tausta, fontti, kirjasinkoko, kontin leveys ... Joten valitsemme toisen vaihtoehdon. Sitten poistamme bannerin ja muutamme tekstisäiliön sisältöä.
Jos haluat alatunnisteen jokaisen sivun alaosaan, lisää se myös sinne Kontti tai Säiliö pylväillä ja syötä esimerkiksi yhteystiedot tai tekijänoikeustiedot. Erikoismerkkejä, kuten tekijänoikeussymboli, ei voida syöttää suoraan näppäimistöllä. RocketCakessa valitset valikosta tällaiset erikoismerkit Lisää, lisää tekstisymboli.
Linkit
Tietenkin haluat, että navigointivalikon painikkeet osoittavat oikeille sivuille. Voit tehdä tämän valitsemalla ensin navigointivalikossa olevan painikkeen ja napsauttamalla sitten ketjun painiketta. Tai painat hiiren oikeaa painiketta ja valitset Lisää hyperlinkki. Tämä avaa valintaikkunan, jossa sinun on valittava linkitys ulkoiselle verkkosivulle, sähköpostiosoite, tämän projektin sivu tai tietty tiedosto. Valitse vaihtoehto Sivu projektissa. Sitten näet luettelon luotuista verkkosivuista, joista valitset oikean.
Mehiläinen Kohde voit avata verkkosivun uudessa selainikkunassa tai avoimessa selainikkunassa. Jälkimmäinen vaihtoehto on yleinen. Jos pidät hiiren vasenta painiketta painettuna, kun viet hiiren navigointivalikkopainikkeen päälle, lisäät alivalikkoja, jotka linkittävät sinut samalla tavalla olemassa oleville verkkosivuille.
Pääsivut
RocketCake toimii myös ns. Master-sivujen kanssa. Jos luot verkkosivun, jolla on useita sivuja, tämä tekniikka nopeuttaa asettelua huomattavasti. Pääsivu on alustettu malli, joka toimii mallina muille sivuille. Tällainen pääsivu ei siis ole tavallinen verkkosivu. Näin luot sellaisen: luo uusi verkkosivu, aseta avattava valikko, tee valikko toimimaan niin kuin sen pitäisi ja muotoile tämä sivu ilman todellista tekstisisältöä. Lisää sitten yksi työkalupakista Sisällön paikkamerkki . Ilman tätä elementtiä sivupohja ei toimi. Anna tälle erityiselle sivulle mielekäs nimi, esimerkiksi masterpage.html. Sitten luot yhden tai useamman verkkosivun, jota et tarjoa asettelulla.
Kirjoitat tekstiä, valinnaisesti lisää kuvan ja tallennat tämän sivun. Näiden sivujen sisältöä tarkastellaan kentän Ominaisuudet-alaosassa Pääsivu. Siellä aktivoit vaihtoehdon UseMasterPage. Jos olet ottanut valintamerkin käyttöön, näkyviin tulee uusi ruutu, jossa valitset suunnitellun pääsivun nimen. Voit käyttää useita sivupohjia. Tässä vaiheessa et näe mitään, mutta jos painat painiketta Esikatselu huomaat, että tämän sivun sisältö on siististi julkaistu valitun pääsivun Sisältöpaikkamiehessä.
Aseta tulostusmateriaali
RocketCake-sovelluksella voit lisätä YouTube-videoita napsauttamalla kohdetta Työkalusarjassa YouTube-video valita. Syötä sitten videon verkko-osoite Ominaisuudet-kohtaan. Valokuvagallerian lisääminen on yhtä helppoa. Kun olet kuvagalleria Valitse työkaluryhmästä, valitse valokuvat ruuduista ImageFile1, ImageFile2 ja niin edelleen. Gallerian valokuvia voi suurentaa useilla tavoilla. Voit esimerkiksi avata ne uudessa ikkunassa, ponnahdusikkunassa, mutta pidämme parhaiten suurena kuvana erillisellä kerroksella.
Julkaista
Olet valmis? Sitten voit julkaista verkkosivuston Internetissä tai paikallisella levyllä. RocketCake on varustettu ftp-toiminnolla, joka sijoittaa kaiken palvelimelle siististi kansioon, jonka palveluntarjoajasi tarjoaa tähän. Täytä ftp-osoite, käyttäjänimi ja salasana. Käytä vaihtoehtoa tarvittaessa Tallenna salasana tallentaa salasanan. Kun julkaiset verkkosivuston kiintolevyllä, voit käydä kotisivulla avaamalla index.html-tiedoston Internet-ohjelmallasi.
