Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver 2024
Minggu, 27 Oktober 2024
Aplikasi Dreamweaver dianggap sebagai perpaduan yang sempurna antara WYSIWYG dan juga HTML editor yang dimana lebih konvesional.
Pertama kali Dreamweaver dikembangkan oleh Macromedia, tetapi kemudian diakuisisi oleh Adobe Inc pada tahun 2005.
Pada awalnya Dreamweaver ini menawarkan perpetual license, metode pembayaran sekali dalam seumur hidup dalam menjalankan software ini.
Baca juga : Cara Export Filmora 9 Tanpa Watermark
Mungkin menggunakan Dreamweaver ini untuk percobaan pertama kali pasti terasa sangat sulit.
Namun, jangan khawatir karena artikel ini kita akan mengulas cara membuat aplikasi berbasis web dengan Dreamweaver oleh karena itu tetap simak ulasan ini hingga akhir.
Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver
1. Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver dengan Membuat Situs Baru
 |
| Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver dengan Membuat Situs Baru |
Cara membuat aplikasi berbasis web dengan Dreamweaver dengan membuat situs baru, langkah pertama dengan membuka site "New Site" pada dashboard Adobe Dreameaver CC.
Lalu anda namai website tersebut sesuai keinginan anda dan menyimpannya ke dalam satu folder.
Cara ini dapat membantu anda untuk mengelola file dan mempermudah anda untuk melakukan proses unggah nantinya.
Jika Anda ingin memasukkan gambar ke situs anda tersebut, maka klik "Advanced Settings > Local Info" sehingga folder gambar akan dibuat dalam folder situs.
Lalu anda namai website tersebut sesuai keinginan anda dan menyimpannya ke dalam satu folder.
Baca juga : Free VPN For PC
Jika Anda ingin memasukkan gambar ke situs anda tersebut, maka klik "Advanced Settings > Local Info" sehingga folder gambar akan dibuat dalam folder situs.
2. Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver dengan Membuat File Homepage
 |
| Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver dengan Membuat File Homepage |
Selanjutnya cara membuat aplikasi berbasis web dengan Dreamweaver dengan membuat file Homepage.
Anda akan menemukan file situs di bagian panel kanan atas sehingga bisa membuat homepage dari nol.
Langkah pertama, yaitu silahkan anda buka menu "File > New" lalu pilih "New Document" setelah itu pilih "HTML" sebagai tipe dokumen lalu klik "Create".
Anda akan menemukan file situs di bagian panel kanan atas sehingga bisa membuat homepage dari nol.
Langkah pertama, yaitu silahkan anda buka menu "File > New" lalu pilih "New Document" setelah itu pilih "HTML" sebagai tipe dokumen lalu klik "Create".
Baca juga : Cara Menginstal Software Autocad
Lalu simpan file HTML sebagai index.html, dan letakkan dalam folder situs tersebut.
3. Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver dengan Membuat Header
 |
| Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver dengan Membuat Header |
Cara ketiga yaitu cara membuat aplikasi berbasis web dengan Dreamweaver dengan membuat Header.
Biasanya header akan diisi dengan logo dan nama situs anda, klik halaman putih atau pilih bagian tertentu dengan elemen "Body" pada editor.
Setelah itu tekan "Insert" yang berada di kanan atas panel sehingga akan menampilkan daftar dari elemen HTML umum yang bisa ditambahkan pada halaman anda.
Setelah itu anda bisa mencari elemen Header dengan drag and drop elemen tersebut ke lembar kerja anda sehingga elemen tersebut akan ditambahkan pada website anda beserta kodenya.
Biasanya header akan diisi dengan logo dan nama situs anda, klik halaman putih atau pilih bagian tertentu dengan elemen "Body" pada editor.
Baca juga : 7 Aplikasi Download selain IDM Tercepat
Setelah itu anda bisa mencari elemen Header dengan drag and drop elemen tersebut ke lembar kerja anda sehingga elemen tersebut akan ditambahkan pada website anda beserta kodenya.
4. Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver dengan Menambahkan Navigasi Home
 |
| Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver dengan Menambahkan Navigasi Home |
Kemudian cara membuat aplikasi berbasis web dengan Dreamweaver dengan menambahkan Navigasi Home.
Sekarang masuk pada menu "Panel Insert" dan cari elemen "Navigation" sehingga akan muncul jendela lalu tulis "Navigation" sebagai ID dan klik "OK".
Cara ini akan menambah elemen navigasi ke editor saat anda berada pada elemen konten cari Hyperlink pada panel Insert lalu klik dan isi detailnya.
Jika sudah selesai, klik "OK" lalu klik tombol "Home" memiliki lebih banyak baris kode di editor.
Sekarang masuk pada menu "Panel Insert" dan cari elemen "Navigation" sehingga akan muncul jendela lalu tulis "Navigation" sebagai ID dan klik "OK".
Cara ini akan menambah elemen navigasi ke editor saat anda berada pada elemen konten cari Hyperlink pada panel Insert lalu klik dan isi detailnya.
Jika sudah selesai, klik "OK" lalu klik tombol "Home" memiliki lebih banyak baris kode di editor.
5. Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver dengan Menambahkan Deskripsi Website
 |
| Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver dengan Menambahkan Deskripsi Website |
Selanjutnya ada juga cara membuat aplikasi berbasis web dengan Dreamweaver dengan menambahkan deskrtipsi website anda.
Anda bisa menambah bullet points dengan menggunakan baris di bawah kode paragraf lalu buka pane Insert dan klik "Unordered List".
Lalukan tag pada "<l>" pada editor dan klik "List Item" pada panel Insert, proses ini akan menambahkan tag "<li>" ke dalam tag "<ul>"
Pada list HTML adalah anda harus menambah beberapa tag secara manual sesuai dengan jumlah poinnya.
Jika sudah berhasil membuat struktur dasar homepage, anda juga dapat menambah beberapa konten lain seperti form, video, gambar, dan lainnya.
Anda bisa menambah bullet points dengan menggunakan baris di bawah kode paragraf lalu buka pane Insert dan klik "Unordered List".
Baca juga : 5 Aplikasi Database Gratis
Pada list HTML adalah anda harus menambah beberapa tag secara manual sesuai dengan jumlah poinnya.
Jika sudah berhasil membuat struktur dasar homepage, anda juga dapat menambah beberapa konten lain seperti form, video, gambar, dan lainnya.
6. Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver dengan Membuat File CSS
 |
| Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver dengan Membuat File CSS |
Yang keenam ada cara membuat aplikasi berbasis web dengan Dreamweaver dengan Membuat File CSS.
Cascading Style Sheet (CSS) digunakan untuk memodifikasi elemen pada HTML dan akan selalu digunakan oleh developer ketika membuat website.
Pertama-tama silahkan beri header anda ID dengan arahkan kursor ke kanan bawah dari panel Dreamweaver lalu pilih panel "DOM".
Lalu tekan "Header" sehingga ditandai dengan ada warna biru bersamaan dengan tanda plus juga label.
Kemudian klik tanda plus tersebut dan ketikkan "#header" dengan hashtag tersebut memberikan ID kepada elemen tersebut.
Setelah itu tekan return atau enter, pada menu selanjutnya pilih source "Create a New CSS file".
Jendela baru akan muncul dan pilih Browser cari folder situs anda dengan ketikkan "Style.css" dan lalu klik "Save" dan "OK".
Anda akan mendapati style.css yang baru muncul di atas live view dan elemen link baru pada code editor.
Cascading Style Sheet (CSS) digunakan untuk memodifikasi elemen pada HTML dan akan selalu digunakan oleh developer ketika membuat website.
Pertama-tama silahkan beri header anda ID dengan arahkan kursor ke kanan bawah dari panel Dreamweaver lalu pilih panel "DOM".
Lalu tekan "Header" sehingga ditandai dengan ada warna biru bersamaan dengan tanda plus juga label.
Baca juga : 3 Aplikasi Adzan PC
Setelah itu tekan return atau enter, pada menu selanjutnya pilih source "Create a New CSS file".
Jendela baru akan muncul dan pilih Browser cari folder situs anda dengan ketikkan "Style.css" dan lalu klik "Save" dan "OK".
Anda akan mendapati style.css yang baru muncul di atas live view dan elemen link baru pada code editor.
7. Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver dengan Membuat Judul CSS Selector Untuk Judul Website
 |
| Cara Membuat Aplikasi Berbasis Web dengan Dreamweaver dengan Membuat Judul CSS Selector Untuk Judul Website |
Terakhir yakni cara membuat aplikasi berbasis web dengan Dreamweaver dengan membuat judul CSS selector untuk judul website anda.
Langkah pertama yaitu dengan menandai H1 dibawah header dari panel DOM lalu pilih "CSS Designer" dari panel tersebut.
Lalu klik tanda plus "+" di belakang Selectors maka secara otomatis nama #header h1 akan muncul, setelah itu tekan "return".
Pembahasan ini hanya bersifat informasi semata-mata hanya untuk menambah wawasan anda seputar Dreamweaver.
Jika informasi ini bermanfaat untuk anda, jangan lupa juga untuk dibagikan kepada teman atau kerabat anda.
Demikian informasi yang dapat kami bagikan kepada anda mengenai cara membuat aplikasi berbasis web dengan Dreamweaver pada artikel kali ini. Semoga bermanfaat dan selamat mencoba.
Langkah pertama yaitu dengan menandai H1 dibawah header dari panel DOM lalu pilih "CSS Designer" dari panel tersebut.
Baca juga : Aplikasi Convert Video PC
Akhir Kata
Itulah selurruh pembahasan kita menegai cara membuat aplikasi web dengan Dreamweaver yang bisa kami jabarkan kepada anda.Pembahasan ini hanya bersifat informasi semata-mata hanya untuk menambah wawasan anda seputar Dreamweaver.
Jika informasi ini bermanfaat untuk anda, jangan lupa juga untuk dibagikan kepada teman atau kerabat anda.
Demikian informasi yang dapat kami bagikan kepada anda mengenai cara membuat aplikasi berbasis web dengan Dreamweaver pada artikel kali ini. Semoga bermanfaat dan selamat mencoba.