Lumikha ng isang site na walang kaalaman sa HTML? Ang mga online na editor upang bumuo ng mga website ay nakakakuha ng lupa, kadalasan dahil sa magagandang template. Kung mas gusto mong hindi magsimula mula sa isang handa na disenyo, na madalas na nagtatapos sa isang bayad na pagpipilian, kung gayon ang RocketCake ay isang desktop program kung saan maaari kang bumuo ng isang magandang site mula sa wala.
Ang programa sa wikang Ingles ay naglalaman lamang ng labinlimang mga template (mga template) para sa inspirasyon. Ang ideya ay na sa RocketCake lumikha ka ng iyong sariling site na madali mong mai-update sa ibang pagkakataon. Ang RocketCake ay isang tinatawag na WYSIWYG editor. Kaya hindi mo na kailangang mag-type ng anumang HTML code. Pinagsama-sama mo ang iyong sariling site sa pamamagitan ng paglalagay ng mga elemento sa ibabaw ng trabaho at pagkatapos ay pag-upload ng case. Kasama sa mga elemento ang mga text box, button, larawan, menu, slideshow, pelikula, audio clip, at higit pa. Ang dahilan kung bakit espesyal ang RocketCake ay isa itong editor upang bumuo ng mga tinatawag na tumutugon na mga website. Ang ganitong tumutugon na website ay pang-mobile, dahil ang layout ay umaangkop sa screen ng device kung saan may bumibisita sa site.
Ang isang tumutugon na web page ay magiging maayos pa rin, tingnan mo man ito sa isang malaking monitor o isang maliit na screen ng smartphone. Para dito, aayusin ng website ang ilang bahagi, gaya ng laki ng font, pag-aayos ng ilang partikular na elemento at kung paano ipinapakita ang menu sa screen.
I-download ang RocketCake dito. Mayroong isang bersyon para sa Windows at isa para sa macOS. Sa workshop na ito ginagamit namin ang libreng edisyon. Ginagawa nitong madali ang paglikha ng isang maayos na gumaganang tumutugon na website. Mayroon ding propesyonal na edisyon ng RocketCake, na nagkakahalaga ng 39 euro. Ang propesyonal na bersyon ay nagpapahintulot sa iyo na lumikha ng isang walang limitasyong bilang ng mga website. Mayroon ding suporta sa CSS, kung saan maaari mong mabilis na ayusin ang mga istilo ng layout sa isang buong site. Ang Bersyon 3.1 ng RocketCake ay napabuti upang mas mahusay ang ranggo ng iyong website sa Google at iba pang mga search engine. Higit pa rito, ang libreng bersyon ay may kasamang ilang mga tampok na dati ay nasa bayad lamang na edisyon.
Kapaligiran sa trabaho at display
Sa itaas ng workspace ay ang bar na may mga button para magdagdag ng bagong page, para i-preview gamit ang Internet Explorer at para i-publish ang website sa Internet. Sa kanan ay makikita mo ang toolset kasama ang lahat ng mga elemento na maaari mong ilagay sa isang web page. Sa kaliwang itaas makikita mo ang istraktura ng lahat ng pahina ng iyong website.
Nasa ibaba ang mga Ari-arian. Dito mo babaguhin ang mga katangian ng bawat elemento na iyong pipiliin. Ipagpalagay na gusto mong magdagdag ng isang imahe sa isang pahina, pagkatapos ay pipiliin mo ang file ng imahe sa Properties at ipahiwatig kung ang imahe ay dapat na bilugan o matalim na sulok at iba pa...
Sa pinakailalim ay tinutukoy mo ang lapad ng display. Bilang default, iyon ang desktop-display. Sa pamamagitan ng maliit na drop-down na menu sa kaliwang ibaba maaari ka ring magtrabaho sa display ng isang bilang ng mga sikat na mobile device, tulad ng iPhone, iPad, Samsung Galaxy, LG ... Kung hindi mo mahanap ang nais na lapad dito menu, maaari mo ring piliin ang Custom at gumamit ng slider na tukuyin ang lapad na lalabas sa screen. Ang setting ng lapad na iyon ay mahalaga para sa pagtukoy ng mga breakpoint, na tatalakayin natin sa ibang pagkakataon.
Mga kulay at homepage
Magsimula tayo sa home page. Sa halimbawang ito, gumagawa kami ng website ng isang ambisyosong rock band. Sa halip na magsimula sa isang template, pumili Walang laman na pahina. Ang seksyong Properties ay iaangkop sa bawat elementong pipiliin mo. Halimbawa, mag-click sa background ng unang pahina, pagkatapos ay maaari mong ma-access Kulay ng background pumili ng kulay ng background. Bilang default mayroong 000000, ang html code para sa puti. Sa pamamagitan ng pag-click sa kahon na may tatlong tuldok, ilalabas mo ang tagapili ng kulay. Sa Properties binibigyan mo ng pamagat ang webpage na ito. Malapit na itong lumitaw sa tuktok ng window ng browser. Iwanan ang pangalan ng homepage sa index.html. Palaging hinahanap ng browser ang index page na ipapakita bilang homepage.
Sa ibaba nito matutukoy mo ang mga kulay ng apat na uri ng mga hyperlink. LinkColor tinutukoy ang kulay ng mga link na hindi pa nabisita, LinkColorActive tumutukoy sa mga link na kasalukuyang binibisita ng isang tao, LinkColorHover ay ang kulay ng isang link na itinuturo ng mouse pointer at LinkColorVisited tumutukoy sa mga link na binisita na ng isang tao.
Navigation bar at intro image
Upang maglagay ng navigation bar, piliin ang item sa Toolset Menu ng Nabigasyon at pagkatapos ay mag-click sa workspace. Sa navigation bar na ito i-type mo ang mga item sa menu kung saan mo gustong gumawa ng mga web page. Panatilihing maikli ang mga pangalan ng mga item na iyon. Sa ating halimbawa ito ay Ang banda, Sino, Saan, Kailan, Bakit at Media. Sa itaas ay ang mga button para i-format ang text ng mga navigation item na iyon. Kung nag-click ka sa mismong navigation bar, inaayos mo ang kulay at hugis ng bar sa Properties. Kaya mo yan BackGroundFashion pumili para sa Kulay, Larawan, Gradient at Pindutan na may istilo. Sa Gradient matutukoy mo ang mga tono ng kulay ng transition at sa Styled Button ang menu bar ay nakakakuha ng spherical na hitsura.
Gusto rin naming magdagdag ng banner o intro image. Para doon mo munang ilagay ang item Lalagyan. Sa Properties sa Pangalan ng Larawani-click ang tatlong tuldok upang piliin ang larawang inihanda mo noon pa man. Kung ito ay masyadong malaki, itatanong ng RocketCake kung maaari nitong baguhin ang laki ng imahe. Ayos lang iyon. Ang pamagat na 'Mad Dog' na nakikita mo sa banner sa tuktok ng artikulong ito, kami mismo ang nagdagdag sa larawan gamit ang isa pang programa. Talaga maaari ka ring mag-text kasama ang item Lumulutang na Teksto ilagay sa ibabaw ng isang imahe. Sa kasamaang palad, nagbibigay ito ng hindi inaasahang resulta sa mga mobile device.
Kapag nasiyahan ka, i-save ang gumaganang file sa isang lugar sa hard disk bilang isang .rcd file.
Mga hanay
Sa ibaba ng banner na gusto mong ibigay sa home page na may nilalaman sa isa, dalawa o tatlong column. Upang gawin ito, piliin ang item sa Toolset Lalagyan na may mga Column. Tinatanong ng RocketCake kung ilang column ang gusto mo. Nais ding malaman ng application ang pinakamababang lapad ng isang column. Dito pinili namin ang dalawang column at ang default na setting ay 150. Nangangahulugan ito na ang mga column ay makikita nang maayos sa tabi ng isa't isa sa isang malawak na screen. Kung ang isang column sa isang maliit na screen ay nagiging mas maliit sa 150 pixels, hindi na ito lalabas sa tabi, ngunit sa ibaba ng nakaraang column.
Sa halimbawang ito itinakda namin ang kaliwang hanay sa MinWidth 500. 500 ang breakpoint para sa kaliwang column. Kung masyadong maliit ang lapad ng screen, babasahin ng bisita ang mga nilalaman ng kanang column sa ibaba ng kaliwang column. Bilang karagdagan, itinakda namin ang banner sa MaxWidth 1000.
Upang gawing mas makitid ang kanang column kaysa sa kaliwa, mag-click muna sa kaliwang column. Ang laki ay naroroon bilang default 50%, kotse. Halimbawa, palitan iyon ng 70%, kotse. Dahil dito, pansamantalang lumutang ang pangalawang column sa ibaba ng una. Maaari mong lutasin ito kapag nag-click ka sa pangalawang hanay at sa Sukat 30%, kotse pumupuno. Bibigyan ka nito ng 70/30 ratio. Pagkatapos ay punan mo ang mga column ng teksto, na idinisenyo mo rin tulad ng isang word processor. Sa ganoong column ay maaari mo ring Mga pamagat (mga tasa). Pinapanatili ng heading 1, 2, 3 na maganda ang hitsura ng mga tasa.
Upang magdagdag ng larawan, ilagay ang cursor sa teksto at mag-click sa Toolset sa Imahe. Pagkatapos ay mag-navigate sa lokasyon kung saan naghihintay ang larawan. I-click ang button paminsan-minsan silipin upang tingnan ang iyong gawa sa isang browser.
Kung nag-click ka sa naturang text column, makikita mo sa Properties na ang padding Ang default ay nakatakda sa 10, 10, 10, 10. Ang Padding ay ang distansya mula sa text hanggang sa hangganan ng column. Ang unang numero ay nag-iimbak sa itaas, ang pangalawa sa ibaba, ang pangatlo sa kanan, at ang ikaapat sa kaliwa. Kung gusto mo ng higit pang padding sa kanang bahagi sa isang text box, dapat mong itakda ang pangatlong halaga sa 20, halimbawa.
Samakatuwid, ang padding ay ang distansya sa loob ng isang kahon, margin ay ang layo sa labas. Kung gusto mo ng higit pang espasyo sa pagitan ng ibaba ng larawan at tuktok ng teksto sa ibaba nito, baguhin ang Margin mula 0, 0, 0, 0 hanggang, halimbawa, 0.10, 0, 0.
Mga karagdagang pahina
Ngayon na handa na ang homepage, siyempre gusto mong lumikha ng higit pang mga pahina para sa iyong proyekto. Napupunta sa pindutan Magdagdag ng Pahina. Ang programa ay nagtatanong kung gusto mong lumikha ng isang ganap na bagong pahina o isang kopya ng isang umiiral nang web page. Sa halimbawang ito gagamitin namin ang istilo ng aming homepage: ang itim na background, ang font, ang laki ng font, ang lapad ng lalagyan... Kaya pumunta kami sa pangalawang opsyon. Pagkatapos ay tinanggal namin ang banner at binabago ang mga nilalaman ng lalagyan ng teksto.
Kung gusto mo ng footer sa ibaba ng bawat page, magdagdag din ng footer doon Lalagyan o Lalagyan na may mga Column at i-type, halimbawa, ang impormasyon sa pakikipag-ugnayan o impormasyon sa copyright. Ang mga espesyal na character tulad ng simbolo ng copyright ay hindi maaaring direktang maipasok mula sa keyboard. Sa RocketCake pipiliin mo ang mga espesyal na character sa pamamagitan ng menu Ipasok, Ipasok ang Simbolo ng Teksto.
Mga link
Siyempre gusto mong ang mga pindutan sa menu ng nabigasyon ay tumuro sa tamang mga pahina. Upang gawin ito, piliin muna ang pindutan sa menu ng nabigasyon at pagkatapos ay mag-click sa pindutan na may chain. O mag-right click ka at pumili Ipasok ang hyperlink. Magbubukas ito ng isang kahon ng pagpili kung saan kailangan mong pumili sa pagitan ng pag-link sa isang panlabas na web page, isang e-mail address, isang pahina ng proyektong ito o isang partikular na file. Piliin ang opsyon Pahina sa proyekto. Makakakita ka ng isang listahan ng mga nilikhang web page kung saan pipiliin mo ang tama.
Pukyutan Target piliin na buksan ang web page sa isang bagong browser window o sa bukas na browser window. Ang huling opsyon na ito ay karaniwan. Kung pinindot mo ang kaliwang pindutan ng mouse habang nakaturo sa isang pindutan mula sa menu ng nabigasyon, magdaragdag ka ng mga submenu na pagkatapos ay sumangguni sa mga kasalukuyang web page sa parehong paraan.
mga master page
Gumagana rin ang RocketCake sa mga tinatawag na master page. Kung ikaw ay gumagawa ng isang website na may maraming mga pahina, ang diskarteng ito ay magpapabilis nang malaki sa pag-format. Ang master page ay isang naka-format na modelo na nagsisilbing template para sa iba pang mga page. Ang nasabing master page ay hindi isang regular na web page. Narito kung paano gumawa ng isa: lumikha ng bagong web page, ilagay ang drop-down na menu, tiyaking gumagana ang menu ayon sa nararapat, at i-format ang pahinang ito nang walang tunay na nilalamang teksto. Pagkatapos ay magdagdag ka ng . mula sa Toolset Placeholder ng Nilalaman pataas. Kung wala ang elementong ito, hindi gagana ang master page. Bigyan ng makabuluhang pangalan ang espesyal na pahinang ito, halimbawa masterpage.html. Pagkatapos ay gagawa ka ng isa o higit pang mga web page na hindi mo binibigyan ng layout.
Nag-type ka ng text, magdagdag ng larawan kung kinakailangan at i-save ang page na ito. Sa mga page na ito na may content, tingnan ang Properties sa field sa ibaba Master Page. Doon mo i-activate ang opsyon Gamitin angMasterPage. Kung nilagyan mo ng check ang kahon, lalabas ang isang bagong kahon kung saan pipiliin mo ang pangalan ng nilalayong master page. Maaari kang gumamit ng maraming master page. Sa sandaling ito ay wala ka pang nakikita, ngunit kung i-click mo ang pindutan silipin i-click, mapapansin mo na ang nilalaman ng pahinang ito ay maayos na nai-publish sa Placeholder ng Nilalaman ng napiling master page.
Ipasok ang media
Sa RocketCake, magdagdag ka ng mga video sa YouTube sa pamamagitan ng pagpili ng item sa Toolset video sa YouTube upang pumili. Pagkatapos ay ilagay ang web address ng video sa Properties. Kasing dali lang ng pagdaragdag ng photo gallery. pagkatapos mong Gallery ng Larawan pumili mula sa Toolset, piliin ang iba't ibang mga larawan sa mga kahon ImageFile1, ImageFile2 at iba pa. Mayroong ilang mga paraan upang palakihin ang mga larawan sa gallery. Halimbawa, maaari mong buksan ang mga ito sa isang bagong window, sa isang pop-up window, ngunit gusto namin ang pinakamahusay bilang isang malaking imahe sa isang hiwalay na layer.
Upang i-publish
Tapos ka na? Pagkatapos ay maaari mong i-publish ang website sa internet o sa isang lokal na disk. Ang RocketCake ay nilagyan ng ftp function upang ilagay ang lahat nang maayos sa server sa folder na ginagawang available ng iyong provider. Ipasok ang ftp address, username at password. Gamitin ang opsyon I-save ang password para i-save ang password. Kapag nai-publish mo ang website sa iyong hard drive, maaari mong bisitahin ang homepage sa pamamagitan ng pagbubukas ng index.html file gamit ang iyong internet program.
