Buat situs tanpa pengetahuan HTML dengan RocketCake

Buat situs tanpa pengetahuan html? Editor online untuk membangun situs web mulai berkembang, seringkali karena templatnya yang indah. Apakah Anda lebih suka tidak memulai dari desain yang sudah jadi, yang seringkali masih berakhir dengan opsi berbayar, maka RocketCake adalah program desktop yang dengannya Anda dapat membangun situs yang indah dari awal.

Program bahasa Inggris hanya berisi lima belas templat untuk inspirasi. Tujuannya adalah agar Anda membuat situs Anda sendiri dengan RocketCake yang dapat Anda perbarui dengan mudah nanti. RocketCake adalah apa yang disebut editor WYSIWYG. Anda tidak perlu mengetik kode HTML. Anda mengkompilasi situs Anda sendiri dengan menempatkan elemen di ruang kerja dan kemudian mengupload case. Elemen termasuk kotak teks, tombol, gambar, menu, tayangan slide, video, klip audio dan banyak lagi. Apa yang membuat RocketCake istimewa adalah ia merupakan editor untuk membangun apa yang disebut situs web responsif. Situs web yang responsif semacam itu ramah seluler, karena tata letaknya menyesuaikan dengan layar perangkat yang digunakan seseorang untuk mengunjungi situs tersebut.

Halaman web yang responsif tetap rapi, baik Anda melihatnya di monitor besar atau layar smartphone kecil. Untuk tujuan ini, website akan menyesuaikan sejumlah komponen, seperti ukuran font, penataan elemen tertentu, dan tampilan menu di layar.

Unduh RocketCake di sini. Ada satu versi untuk Windows dan satu untuk macOS. Dalam lokakarya ini kami menggunakan edisi gratis. Ini membuatnya mudah untuk membuat situs web responsif yang berfungsi dengan lancar. Ada juga edisi profesional RocketCake, dengan harga 39 euro. Dengan versi profesional Anda dapat membuat situs web dalam jumlah tidak terbatas. Ada juga dukungan CSS, yang dengannya Anda dapat dengan cepat menyesuaikan gaya tata letak di seluruh situs. Versi 3.1 dari RocketCake telah ditingkatkan sehingga skor situs web Anda lebih baik dengan Google dan mesin pencari lainnya. Selain itu, versi gratisnya menyertakan beberapa fitur yang dulunya hanya ada di edisi berbayar.

Lingkungan kerja dan tampilan

Di bagian atas ruang kerja adalah bilah dengan tombol untuk menambahkan halaman baru, untuk melihat pratinjau dengan Internet Explorer dan untuk mempublikasikan situs web di Internet. Di sebelah kanan Anda akan menemukan Toolset dengan semua elemen yang dapat Anda tempatkan di halaman web. Di kiri atas Anda dapat melihat struktur semua halaman situs web Anda.

Di bawah ini adalah Properties. Di sini Anda mengubah properti setiap elemen yang Anda pilih. Misalkan Anda ingin menambahkan gambar ke halaman, kemudian Anda memilih file gambar di Properties dan menunjukkan apakah gambar harus memiliki sudut membulat atau tajam dan sebagainya ...

Di bagian paling bawah Anda menentukan lebar layar. Secara default ini adalah tampilan Desktop . Melalui menu drop-down kecil di kiri bawah Anda juga dapat bekerja di tampilan sejumlah perangkat seluler populer, seperti iPhone, iPad, Samsung Galaxy, LG ... Jika Anda tidak menemukan lebar yang diinginkan di sini menu, Anda juga dapat memilih Kustom dan menggunakan slider menentukan lebar yang akan muncul di layar. Pengaturan lebar itu penting untuk menentukan breakpoint, yang akan kita bahas nanti.

Warna dan beranda

Mari kita mulai dengan beranda. Dalam contoh ini kami membuat situs web dari band rock yang ambisius. Daripada memulai dengan templat, pilih Halaman kosong . Bagian Properti akan menyesuaikan dengan elemen apa pun yang Anda pilih. Misalnya, klik latar belakang halaman pertama, lalu Anda dapat memilih warna latar belakang di BackgroundColor . Standarnya adalah 000000, kode html untuk putih. Mengklik kotak dengan tiga titik akan menampilkan pemilih warna. Di Properties Anda memberi judul pada halaman web ini. Ini akan segera muncul di bagian atas jendela browser. Anda membiarkan nama beranda di index.html. Browser selalu mencari halaman indeks untuk ditampilkan sebagai beranda.

Di bawahnya Anda menentukan warna dari empat jenis hyperlink. LinkColor menentukan warna tautan yang belum dikunjungi, LinkColorActive merujuk ke tautan yang saat ini dikunjungi seseorang, LinkColorHover adalah warna tautan yang diarahkan oleh penunjuk mouse, dan LinkColorVisited merujuk ke tautan yang telah dikunjungi seseorang.

Bilah navigasi dan gambar intro

Untuk menempatkan bilah navigasi, pilih item Menu Navigasi di Toolset dan kemudian klik pada ruang kerja. Di bilah navigasi ini Anda mengetik item menu yang ingin Anda buat halaman webnya. Jaga agar nama item tersebut tetap pendek. Dalam contoh kami, ini adalah The band, Who, Where, When, Why, dan Media. Di bagian atas adalah tombol untuk memformat teks item navigasi tersebut. Jika Anda mengklik bilah navigasi itu sendiri, Anda dapat menyesuaikan warna dan bentuk bilah di Properti. Anda dapat memilih BackGroundMode untuk Tombol Warna, Gambar, Gradien, dan Gaya . Dalam Gradient Anda menentukan corak warna transisi dan di Tombol Bergaya bilah menu mendapat tampilan cembung.

Kami juga ingin menambahkan gambar spanduk atau intro. Untuk melakukan ini, Anda terlebih dahulu menempatkan item Container . Di Properties at ImageName, klik pada tiga titik untuk memilih gambar yang telah Anda siapkan sebelumnya. Jika terlalu besar, RocketCake akan menanyakan apakah itu dapat mengubah ukuran gambar. Itu diperbolehkan. Judul 'Mad Dog' yang Anda lihat pada banner di bagian atas artikel ini, kami menambahkan gambar kami sendiri dengan program lain. Pada prinsipnya, Anda juga dapat menempatkan teks di atas gambar dengan item Teks Mengambang . Sayangnya, hal ini memberikan hasil yang tidak terduga di perangkat seluler.

Setelah Anda puas, simpan file kerja di suatu tempat di hard disk sebagai file .rcd.

Kolom

Di bawah spanduk, Anda ingin menyediakan halaman beranda dengan konten dalam satu, dua atau tiga kolom. Untuk melakukan ini, pilih item Penampung dengan Kolom di Toolset . RocketCake menanyakan berapa banyak kolom yang Anda inginkan. Aplikasi juga ingin mengetahui lebar minimum kolom. Kami telah memilih dua kolom dan pengaturan default 150. Ini berarti bahwa pada layar lebar kolom dapat dilihat dengan rapi bersebelahan. Jika kolom pada layar kecil menjadi lebih kecil dari 150 piksel, ia tidak akan lagi muncul di samping, tetapi di bawah kolom sebelumnya.

Dalam contoh ini kami mengatur kolom kiri ke MinWidth 500 melalui Properties . 500 adalah breakpoint untuk kolom kiri. Jika lebar layar menjadi terlalu kecil, pengunjung akan membaca isi kolom kanan bawah kolom kiri. Selain itu, kami telah menyetel spanduk ke MaxWidth 1000 .

Untuk membuat kolom kanan lebih sempit dari yang kiri, klik kolom kiri terlebih dahulu. The Ukuran standar pada 50%, auto . Misalnya, ubah itu menjadi 70%, otomatis . Hal ini menyebabkan kolom kedua mengambang sementara di bawah kolom pertama. Anda dapat menyelesaikan ini jika Anda mengklik kolom kedua dan memasukkan otomatis pada Ukuran 30% . Ini memberi Anda rasio 70/30. Kemudian Anda mengisi kolom dengan teks, yang juga Anda desain seperti pengolah kata. Di kolom seperti itu Anda juga dapat menambahkan Judul dari Toolset . Heading 1, 2, 3 membuat cup terlihat bagus.

Untuk menambahkan gambar, letakkan kursor di teks dan klik Gambar di Toolset . Kemudian arahkan ke lokasi tempat gambar menunggu. Klik tombol Pratinjau dari waktu ke waktu untuk melihat pekerjaan Anda di browser.

Jika Anda mengklik kolom teks seperti itu, Anda akan melihat di Properties bahwa Padding disetel ke 10, 10, 10, 10. Padding adalah jarak dari teks ke tepi kolom. Angka pertama mengacu ke atas, kedua ke bawah, ketiga ke kanan dan keempat ke kiri. Jika Anda ingin lebih banyak padding di sisi kanan kotak teks, Anda harus mengatur nilai ketiga menjadi 20.

Padding adalah jarak di dalam kotak, Margin adalah jarak di luar. Jika Anda ingin sedikit lebih banyak ruang antara bagian bawah foto dan bagian atas teks di bawahnya, ubah Margin dari 0, 0, 0, 0 menjadi 0, 10, 0, 0.

Halaman ekstra

Sekarang beranda sudah siap, Anda tentu ingin membuat lebih banyak halaman untuk proyek Anda. Ini dilakukan dengan tombol Add Page . Program ini menanyakan apakah Anda ingin membuat halaman yang benar-benar baru atau salinan dari halaman web yang sudah ada. Dalam contoh ini kami akan menggunakan gaya beranda kami: latar belakang hitam, font, ukuran font, lebar wadah ... Jadi kami pergi untuk opsi kedua. Kemudian kami menghapus spanduk dan mengubah konten wadah teks.

Jika Anda menginginkan footer di bagian bawah setiap halaman, tambahkan wadah atau wadah dengan kolom di sana dan masukkan, misalnya, informasi kontak atau informasi hak cipta. Karakter khusus seperti simbol hak cipta tidak dapat dimasukkan langsung dengan keyboard. Di RocketCake Anda memilih karakter khusus seperti itu dari menu Sisipkan, Sisipkan Simbol Teks .

Tautan

Tentu Anda ingin tombol di menu navigasi mengarah ke halaman yang benar. Untuk melakukan ini, pertama-tama pilih tombol di menu navigasi dan kemudian klik tombol dengan rantai. Atau Anda menekan tombol kanan mouse dan memilih Sisipkan hyperlink . Ini akan membuka jendela pilihan di mana Anda harus memilih antara menautkan ke halaman web eksternal, alamat email, halaman proyek ini atau file tertentu. Pilih opsi Halaman dalam proyek . Kemudian Anda akan melihat daftar halaman web yang dibuat di mana Anda memilih yang benar.

Di Target, Anda memilih untuk membuka halaman web di jendela browser baru atau di jendela browser yang terbuka. Opsi terakhir adalah umum. Jika Anda menahan tombol kiri mouse sambil mengarahkan kursor ke tombol menu navigasi, Anda menambahkan submenu yang akan menautkan Anda ke halaman web yang ada dengan cara yang sama.

Masterpages

RocketCake juga bekerja dengan apa yang disebut halaman master. Jika Anda membuat situs web dengan banyak halaman, teknik ini akan sangat mempercepat tata letaknya. Halaman master adalah master berformat yang bertindak sebagai templat untuk halaman lain. Oleh karena itu, halaman master seperti itu bukanlah halaman web biasa. Berikut cara membuatnya: buat halaman web baru, tempatkan menu drop-down, buat menu berfungsi sebagaimana mestinya, dan format halaman ini tanpa konten teks yang sebenarnya. Kemudian Anda menambahkan Placeholder Konten dari Toolset . Tanpa elemen ini, halaman master tidak akan berfungsi. Beri halaman khusus ini nama yang bermakna, misalnya masterpage.html. Kemudian Anda membuat satu atau lebih halaman web yang tidak Anda sediakan dengan tata letak.

Anda mengetik teks, secara opsional menambahkan gambar dan menyimpan halaman ini. Untuk halaman-halaman ini dengan konten Anda melihat di bagian bawah Properties di bidang Master Page . Di sana Anda mengaktifkan opsi UseMasterPage . Jika Anda telah mencentang kotak tersebut, kotak baru akan muncul di mana Anda memilih nama halaman master yang dimaksud. Anda dapat menggunakan beberapa halaman master. Pada titik ini Anda tidak akan melihat apa pun, tetapi jika Anda mengklik tombol Pratinjau , Anda akan melihat bahwa konten halaman ini diterbitkan dengan rapi di Placeholder Konten dari halaman master yang dipilih.

Masukkan media

Dengan RocketCake Anda menambahkan video YouTube dengan memilih item video YouTube di Toolset . Kemudian masukkan alamat web video di Properties. Menambahkan galeri foto semudah itu. Setelah memilih Galeri Gambar dari Toolset, pilih foto yang berbeda di kotak ImageFile1, ImageFile2 dan seterusnya. Ada beberapa cara memperbesar foto di galeri. Misalnya, Anda dapat membukanya di jendela baru, di jendela pop-up, tetapi kami paling suka yang terbaik sebagai gambar besar pada lapisan terpisah.

Untuk menerbitkan

Kamu sudah selesai? Kemudian Anda dapat mempublikasikan situs web di internet atau di disk lokal. RocketCake dilengkapi dengan fungsi ftp untuk menempatkan semua yang ada di server dengan rapi di folder yang disediakan oleh penyedia Anda untuk ini. Masukkan alamat ftp, nama pengguna dan kata sandi. Jika perlu, gunakan opsi Simpan Kata Sandi untuk menyimpan kata sandi. Saat Anda mempublikasikan situs web ke hard drive Anda, Anda dapat mengunjungi beranda dengan membuka file index.html dengan program internet Anda.