Cara Membuat Template Blog dengan Software

Cara Membuat Template Blog dengan Software - Imamkunblog kali ini menjelaskan artikel mengenai penggunaan Software dalam membuat Template Blog. Software - Software tersebut antara lain :

1. Dreamweaver

Dreamweaver adalah salah satu editor paling terkenal untuk pengembangan web sejak 1997 dan merupakan bagian dari bundel Adobe Creative Cloud di bawah paket berlangganan . Ini sempurna untuk semua pengguna yang bekerja dengan kode web seperti HTML, PHP, XML, dan lainnya, dengan kemungkinan untuk membuat kode Anda dengan cepat dan mudah dengan pratinjau langsung dari hasil Anda. Dalam artik ini kami akan menyajikan fitur-fitur utama Dreamweaver, dengan asumsi pengetahuan dasar tentang kode HTML. Saat Anda membuka Dreamweaver, Anda mendapatkan beberapa opsi untuk memulai pengkodean. Dari Mulai Cepat Anda mendapatkan beberapa template siap pakai termasuk Bootstrap, HTML, CSS, Javascript (JS), PHP dan XML tetapi Anda mungkin perlu mengatur situs web Anda terlebih dahulu dengan Pengaturan Situs. Dreamweaver bekerja dengan folder lokal, digunakan untuk menyimpan dan bekerja dengan file Anda dan server jarak jauh yang digunakan untuk menyimpan dan menampilkan halaman situs web Anda secara online. Tetapkan nama untuk halaman situs web Anda, folder lokalnya untuk digunakan, dan alihkan ke Server untuk terhubung dengan server jarak jauh atau FTP yang Anda gunakan untuk menjadi tuan rumah.

Tentukan nama server, jenis protokol, alamat server FTP atau IP, dan nomor port. Kemudian sertakan nama pengguna dan kata sandi Anda untuk terhubung dan mendaftar dengan Simpan. Pada titik ini Anda dapat mulai coding. Anda dapat membuka Starter Template untuk menemukan beberapa dokumen siap pakai yang dapat Anda mulai seperti dokumen multi-kolom, grid sederhana, Bootstrap atau template email dan juga model Responsif yang beradaptasi dengan layar smartphone dan tablet. Misalnya dengan Email - Basic Anda mendapatkan kode HTML dan file CSS siap pakai yang dapat Anda sesuaikan sesuka Anda, tanpa memulai dari nol. Sedangkan dengan Bootstrap - Produk Anda mendapatkan halaman situs web yang siap untuk mempresentasikan atau menjual produk apa pun dengan dokumen HTML siap pakai, file CSS, dan Javascript semuanya terhubung bersama. Anda dapat menyisipkan gambar Anda sendiri dengan menentukan jalur lengkapnya pada atribut src atau mulai mengedit judul apa pun secara langsung. Untuk melihat bagaimana menggunakan Dreamweaver mari kita mulai dari dokumen HTML baru. Ini muncul di bawah tampilan Split, menunjukkan representasi grafik langsung di atas dan kode HTML Anda di bawah. Anda juga dapat beralih ke tampilan Kode untuk memperluas kode atau ke Tampilan langsung untuk menampilkan pratinjau langsung saja. Sekarang mari kita lihat bagaimana membangun kode HTML Anda dengan Dreamweaver.

Anda dapat membuat kode sendiri atau menggunakan panel Sisipkan di sebelah kanan untuk menambahkan beberapa tag HTML dengan format siap pakai. Misalnya Anda dapat menyisipkan judul apa pun dengan Judul, memilih format yang benar dari daftar. Tag ini akan ditempatkan tepat di tempat kursor Anda ditempatkan pada kode dan muncul secara real time di pratinjau langsung. Anda juga dapat menyesuaikan distribusi header dan properti dengan mengetik langsung dengan opsi yang disarankan oleh Dreamweaver, sangat berguna untuk menghindari kesalahan pada tanda baca atau segera mendapatkan atribut yang dapat diterapkan saat ini. Pastikan untuk menambahkan lekukan dengan tombol Tab. Tambahkan tag Paragraf untuk menambahkan paragraf teks atau tag Daftar untuk menyertakan daftar yang diurutkan atau tidak, menggunakan Item Daftar untuk menambahkan elemen ke dalamnya. Anda juga dapat menyalin dan menempelkan baris kode masing-masing dengan CTRL (atau CMD) dan C atau V. Anda juga dapat mengedit dan mengelola tag ini langsung di pratinjau langsung, memilih tag dan mengubah atribut umumnya, misalnya format teks, gaya, atau tautan apa pun. Perubahan ini juga diterapkan dalam kode dan selalu mengacu pada tag yang dipilih saja. Anda juga dapat menyesuaikan properti grup tag melalui seluruh tag Tubuh. Untuk menambahkan gambar apa pun, Anda dapat menggunakan tag Gambar dan menelusuri gambar.

Kode akan mengimpor gambar melalui jalur folder lokal dengan ukuran lebar dan tinggi aslinya. Sedangkan jika ingin menambahkan gambar yang menyertakan keterangan harus menambahkan tag Gambar. Di dalam Gambar Anda mengimpor gambar dengan tag Gambar dan pada figcaption Anda menyertakan deskripsi apa pun untuknya. Selain itu, Anda dapat menambahkan tabel apa pun dengan tag Tabel yang mendefinisikan baris, lebar total, gaya batas, dan header. Kode HTML akan dihasilkan sesuai dengan opsi ini, menunjukkan tag tr untuk setiap baris tabel dan tag td untuk setiap kolom tabel, jadi setiap sel. Secara default, setiap sel tabel menyertakan ' ', yang menunjukkan ruang kosong yang dapat Anda hapus untuk mengetik atau menyisipkan tag HTML lainnya. Dalam atribut lingkup yang Anda ketik dengan format header tabel, dalam hal ini perataan tengah sederhana. Untuk menambahkan tautan apa pun, klik Hyperlink dan tentukan teks dan alamat tautan yang akan digunakan.

Dengan cara ini Anda dapat mengimpor tautan apa pun ke dokumen HTML lain yang Anda miliki, seperti halaman web sekunder untuk dijelajahi. Untuk mendapatkan pratinjau lengkap dari dokumen HTML Anda, Anda bisa pergi ke File, Real Time Preview dan pilih browser yang ingin Anda gunakan termasuk Firefox, Chrome, Explorer dan Edge. Ini sangat berguna untuk memeriksa apakah halaman dan hyperlink Anda berfungsi dengan baik. Di bawah panel Sisipkan Anda juga menemukan tag div, yang digunakan untuk mengelompokkan beberapa elemen HTML menjadi satu. Pastikan untuk memilih semua elemen yang tertarik terlebih dahulu. Kapan pun Anda memerlukan bantuan atau penyegaran, Anda dapat mengeklik kanan tag apa pun dan membuka Quick Docs untuk mendapatkan deskripsi sederhana dan lengkap tentang tag dan fungsinya. Untuk meningkatkan visibilitas kode Anda, Anda dapat mengompres atau memperluas konten tag apa pun dengan panah di sisi kiri.

Dreamweaver juga menyertakan kode siap pakai di bawah panel Cuplikan di sebelah kanan, termasuk kode untuk menambahkan menu navigasi sederhana dan banyak lagi. Sekarang mari kita lihat cara membuat dan mengelola gaya halaman web Anda dengan Cascading Style Sheets, atau CSS. Saat bekerja dengan dokumen HTML apa pun, pilih elemen apa pun dari pratinjau langsung dan klik tombol plusnya. Anda dapat mengaitkan pemilih CSS apa pun ke elemen tersebut, baik Kelas atau ID yang didahului oleh tagar. Lalu pergi ke Buat file CSS baru yang mendefinisikan nama dan lokasi di dalam jalur lokal Anda. File CSS baru ini akan disertakan dalam tag Head dan terdaftar di bawah panel CSS Designer di bawah Sources, lengkap dengan daftar lengkap pemilih yang telah Anda tentukan sejauh ini, dalam hal ini ID yang baru saja ditetapkan ke tag div. Di bawah Properties Anda menemukan semua opsi yang dapat Anda terapkan ke pemilih CSS saat ini . Jika pemilih ini diterapkan ke tag termasuk konten tekstual, Anda dapat mencari bagian Teks untuk menyesuaikan warna teks, jenis font, gaya, distribusi, dan sebagainya.

Gaya baru ini memang diterapkan pada semua tag yang terkait dengan pemilih #div1 saat ini, dalam hal ini seluruh tag div yang kita miliki. Anda dapat menemukan semua properti baru ini diterapkan langsung pada file CSS yang terkait. Ingatlah untuk sering menyimpan dokumen Anda, agar tidak kehilangan upaya. Di Dreamweaver Anda juga dapat menerapkan pemilih Kelas untuk menerapkan gaya kustom Anda pada beberapa tag HTML. Misalnya Anda dapat menentukan pemilih Kelas .left langsung pada CSS untuk menyelaraskan beberapa tag ke sisi kiri halaman HTML. Anda dapat menerapkan pemilih Kelas ini pada tag langsung pada kode HTML jika Anda lebih suka pengkodean. Sedangkan jika Anda ingin memasukkan file CSS sendiri, cukup tempatkan kursor di dalam tag Head, klik kanan dan pergi ke Attach Style Sheet. Pastikan untuk menggunakan nama pemilih CSS yang benar yang ditentukan oleh file CSS baru ini. Anda dapat pergi ke File, Page Properties... untuk mengatur beberapa pilihan untuk seluruh halaman HTML Anda seperti font teks, warna teks dan warna latar belakang, jenis penyandian, versi HTML dan sebagainya. Setelah dokumen dan file Anda siap, Anda dapat mengunggah atau memperbaruinya di server jarak jauh Anda secara online.

Pada panel File Anda mendapatkan folder lokal Anda dengan semua file dan dokumen tunggal di dalamnya. Anda dapat menggunakan tombol pertama di atas untuk membuat koneksi dengan server jarak jauh atau alamat FTP Anda yang ditentukan di awal video ini. Kemudian gunakan tombol unggah atau sinkronkan untuk mengunggah dan menimpa dokumen Anda secara online atau menyinkronkan server lokal dan jauh untuk mendapatkan versi terbaru dari file-file ini. Selalu periksa apakah ada kesalahan dengan melihat tombol kedua di bagian bawah. Setelah file-file ini diunggah di server Anda, file-file ini siap online, karena Anda dapat memeriksanya dengan browser apa pun.

 

 

 2.Artisteer

 

 Ini adalah ikhtisar singkat tentang Software Artisteer. Kami mencari cara menyenangkan bagi anak-anak untuk mendapatkan penghasilan dan kami pikir Artisteer dapat membantu. Ini adalah cara yang cepat dan menyenangkan untuk membuat situs web. Software Artisteer membuat template situs web dengan Blogger, WordPress, HTML, dan lainnya. 

 

Anda dapat mengklik sampel untuk memulai. Anda juga dapat mengklik sampel online untuk melihat lebih banyak sampel online. Gulir ke bawah dan Anda dapat mencari berdasarkan kategori. Setelah Anda menemukan sesuatu yang Anda sukai, Anda dapat mulai menyesuaikan. Anda dapat mengubah gambar atau mengunggah gambar Anda sendiri. Anda dapat mengubah posisi gambar.

Anda dapat mengubah latar belakang header. Anda juga dapat mengubah template. Saya mengubahnya dari HTML ke WORDPRESS. Saya suka tiga kolom, jadi saya akan mengklik tata letak dan memilih tiga kolom. 

 

Setelah Anda puas dengan situs Anda, Anda tinggal mengekspor dan mengunggahnya. Anak-anak menyukai komputer, jadi mengapa tidak membiarkan mereka menggunakan Artisteer untuk membuat bisnis situs web mereka sendiri. Ini cepat, menyenangkan, dan mudah digunakan. 

 

 3. Elementor

 

 continued...gaesss..😁😁

.

Share this post