Adobe Dreamweaver : Langkah Mudah Membuat Website untuk Pemula

Last Updated on March 23, 2022 by

Di era digital saat ini, website menjadi salah satu kebutuhan untuk menunjang jalannya kehidupan. Tanpa adanya website, kita akan kesulitan untuk melakukan aktivitas yang kini serba beralih menjadi online di masa pandemi.

Pada Oktober 2020 lalu, Adobe meluncurkan versi terbaru Adobe Dreamweaver versi 21.0 untuk membantu para developer dalam membuat website yang responsif.

Adobe Dreamweaver merupakan aplikasi pengembangan dan desain web dengan editor WYSIWYG (What You See Is What You Get) dengan fitur-fitur bawaan seperti syntax highlighting, code completion, code collapsing, real-time sytax checking, dan code introspection.

Dreamweaver pertama kali dikembangkan oleh Macromedia di tahun 1997 dengan versi 1.0 yang kemudian diakuisisi oleh Adobe Inc pada tahun 2005.

Adobe Dreamweaver 21.0 memiliki beberapa fitur terbaru seperti seamless live view editing yang memungkinkan pengguna untuk mengedit teks dan gambar secara langsung dalam live view tanpa perlu beralih ke mode edit terpisah.

Kemudian fitur-fitur terbaru lainnya adalah multi-monitor yang menunjang untuk Windows, redesign, modern UI dan Git support.

Beberapa keunggulan Adobe Dreamweaver sebagai aplikasi pengembangan dan desain web.

1. Display yang dinamis cocok untuk semua perangkat.

Dengan Adobe Dreamweaver Anda dapat membuat situs web responsif yang menyesuaikan dengan ukuran layar perangkat apa pun. Anda dapat melakukan  pratinjau dan edit situs secara real time untuk memastikan halaman Anda terlihat dan berfungsi seperti yang Anda inginkan sebelum Anda menerbitkannya. Selain itu, tampilan antarmuka visual Adobe Dreamweaver ramah untuk pemula.

2. Code Editor yang Serbaguna

• Syntax highlighting. Fitur ini akan menyoroti berbagai elemen, seperti variabel, ID, class, dan lain-lain, serta mempermudah pembacaan kode.
• Code completion. Anda dapat menyelesaikan pekerjaan dengan mengaktifkan code completion otomatis. Contoh, ketik img dan tekan tombol tab di keyboard untuk menambahkan <img src=””alt””>.
• CSS documentation. Jika Anda memerlukan beberapa referensi untuk CSS properties, ada fitur Quick Docs yang akan muncul dengan informasi terkait pada code editor.

• Bootstrap 4 yang merupakan versi terbaru dari framework HTML, CSS, dan JavaScript untuk membuat website yang responsif

• Git support. Dengan Adobe Dreamweaver terbaru, Anda dapat melakukan operasi Git yang umum dilakukan termasuk Push, Pull, Commit, dan Fetch dari dashboard Dreamweaver.

• Real-time Preview browser membuat Anda dapat melihat perubahan website sembari mengubah susunannya secara real-time

• Creative Cloud Libraries, mempermudah Anda dalam mengakses warna, grafis, dan berbagai tool kreativitas di database

• Chromium Embedded Framework (CEF), fitur ini membantu developer untuk menempatkan browser untuk digunakan di aplikasi pihak ketiga.

3. Dreamweaver sudah dilengkapi FTP

FTP (File Transfer Protocol) yang dimiliki oleh Dreamweaver memudahkan para developer untuk mengupload web yang sudah dibuat. FTP adalah protokol Internet yang berjalan di dalam lapisan aplikasi yang merupakan standar untuk pentransferan berkas (file) komputer antar mesin-mesin dalam sebuah internetwork Adobe Dreamweaver memang didesain.

Langkah-Langkah Pembuatan Website menggunakan Adobe Dreamweaver

1.Download dan Instal Adobe Dreamweaver

Sebelum membuat website, Anda perlu melakukan instalasi Adobe Dreamweaver di perangkat Anda. Adobe Dreamweaver 21.0 merupakan versi terbaru Adobe Dreamweaver yang dapat diinstal langsung melalui https://www.adobe.com/products/dreamweaver.html#.

2.Membuat Situs Baru

Setelah menginstal Adobe Dreamweaver Anda bisa langsung membuka menu Site pada Adobe Dreamweaver lalu klik New Site pada Dashboard. Langkah selanjutnya adalah menamai website sesuai keinginan Anda lalu simpan.

Pastikan nama dan lokasi file tempat Anda menyimpan situs Anda. Selanjutnya, buat folder gambar dan simpan di dalam folder website yang Anda buat. Klik Advanced Settings lalu pilih Local Info dan Save.

3.Membuat Hompage File

Setelah membuat situs, langkah selanjutnya adalah membuat Homepage. Caranya dengan membuka menu File, lalu klik New dan pilih New Document. Tipe dokumen biarkan berbentuk HTML dan beri nama dokumen dengan  ‘index.html’ lalu pilih menu Create.

Setelah itu Anda akan mendapati lembar kerja Anda berwarna putih dengan beberapa baris kode HTML. Baris kode HTML itu adalah beberapa dasar HTML yang dibuat oleh Dreamweaver secara otomatis, sementara lembar kerja berwarna putih ini adalah tampilan situs Anda.

4. Membuat Header

Header adalah bagian paling atas halaman website yang berisi informasi singkat dari suatu website seperti nama, logo, dan slogan. Untuk membuat Header Anda dapat klik halaman putih atau bagian yang akan Anda tambahkan header dengan elemen <body> pada code editor.

Kemudian klik Insert, maka muncul daftar elemen-elemen website yang dapat ditambahkan ke laman Anda.

Pilih opsi Header lalu drag and drop ke laman Anda. Ubah header menjadi heading dengan tag <H1>…</H1>. Hal ini penting dilakukan dengan tujuan optimalisasi SEO dan agar website Anda mudah ditemukan oleh search engine. Setelah itu Anda dapat memberi judul yang lebih mendeskripsikan situs Anda.

5. Membuat CSS File

CSS (Cascading Style Sheet) adalah bagian yang biasanya digunakan untuk mengatur tampilan elemen pada HTML serta berfungsi untuk memisahkan konten dari tampilan visualnya di situs.

Untuk membuat CSS File, hal yang perlu dilakukan pertama kali adalah memberi ID pada Header. Kemudian arahkan kursor Anda ke bagian kanan bawah dari panel Dreamweaver ini lalu pilih panel DOM.

Klik Header dan Anda akan melihat header section yang berwarna biru kemudian klik tanda ‘+’. Kemudian, ketik #header lalu tekan Return atau Enter. Pada menu selanjutnya pilih: Create a New CSS File. Pada jendela baru yang muncul, pilih Browse dan cari folder situs Anda. Ketik style.css, klik Save dan OK.

Dengan CSS File yang sudah dibuat, Anda akan memperoleh style.css yang baru di atas live view dan elemen link baru pada code editor. Hal ini memungkinkan Anda untuk mengubah teks pada Header tanpa mengubah Header secara keseluruhan.

Arahkan pada DOM Editor yang berada di pojok kanan bawah, dan pilih tag H1 yang sudah Anda buat, lalu pilih CSS Designer. Klik pada Selectors dan secara otomatis akan muncul ‘#header h1’ dan tekan Enter.

Setelah step tersebut, Anda dapat mengubah font tulisan pada header. Pada CSS Designer menu Anda dapat memilih ‘#header h1’ kemudian uncheck kotak kecil yang bertuliskan ‘Show Set’ maka Anda dapat membuka berbagai opsi kostumisasi. Anda dapat dengan bebas mengubah font, font style, ukuran teks, menambahkan alignment, menambahkan borders, dan lainnya.

6. Menambahkan Ragam Konten Pada Situs

Berikut adalah beberapa cara menambahkan dan mengubah style elemen teks pada homepage:

1. Menambahkan teks pada laman dapat dilakukan dengan klik Insert kemudian pilih Paragraph Anda juga dapat menambahkan batas antar paragraf.
2. Jika Anda ingin menambahkan poin-poin, Anda dapat mengklik opsi Unordered List, kemudian klik pada <ul> </u> tag pada code section. Lalu pilih List Item section dan tempatkan di antara 2 tag.
3. Menambahkan heading pada bagian atas laman dan bagian kanan bawah header dapat dilakukan dengan menemukan section code yang berakhiran </header> lalu tekan enter dan klik Create a Space. Kemudian, pilih Heading dan pilih H2.
4. Menambahkan Gambar

Salah satu keuntungan menggunakan Adobe Dreamweaver dalam membuat website adalah stok foto yang bisa diperoleh dari CC Libraries. Anda juga dapat menggunakan gambar Anda sendiri dengan menguploadnya. Pastikan Anda menyimpannya pada folder gambar yang telah Anda buat. Tekan Insert lalu klik Image. Setelah menemukan gambar-gambar Anda klik Open.

7. Pratinjau Website Anda

Sebelum meluncurkan website Anda, sebaiknya dilakukan pratinjau terlebih dahulu untuk melihat bagaimana website yang telah Anda buat. Hal ini juga membantu menemukan eror sebelum Anda mempublikasikan website Anda.

Untuk melihat pratinjau Anda perlu klik tombol preview pada pojok kanan bawah, kemudian pilih browser yang kamu inginkan untuk pratinjau. Anda juga dapat melakukan pratinjau di perangkat mobil dengan QR Code.

8. Publikasikan Website Anda

Jika sudah puas dengan hasil website buatan Anda, langkah selanjutnya adalah publikasikan website. Hal yang dilakukan pertama adalah, dapatkan host dan temukan informasi FTP. Setelah itu, upload website Anda ke server yang sudah Anda miliki.

Untuk melakukan hal tersebut, arahkan pada menu Site kemudian klik Manage Sites pada jendela yang muncul, pilih website Anda, kemudian klik pada ikon pensil yang berada di pojok kiri bawah. Pilih opsi server yang ada di sisi kiri dan klik ikon ‘+’.

Seluruh informasi pada jendela tersebut disediakan oleh host Anda, kecuali area Server Name. Pastikan diri Anda masuk di server root directory dan URL. Kemudian menambahkan informasi server Anda, klik Save dan klik Save lagi.

Demikianlah langkah-langkah mudah membuat situs dengan Adobe Dreamweaver. Kunjungi terus situs kami dan dapatkan informasi terbaru mengenai pengembangan aplikasi dan website setiap harinya.!