Media Pengembangan Web & App | by APPKEY

Desain Design Web Langkah Mudah Membuat Website dengan Adobe Dreamweaver untuk Pemula

Langkah Mudah Membuat Website dengan Adobe Dreamweaver untuk Pemula

-

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.

adobe-dreamweaver

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.
  1. 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.

Artikel Terkait  7 Praktik Mobile Web Design Terbaik di Tahun Ini

Langkah-Langkah Pembuatan Website menggunakan Adobe Dreamweaver

design-web-2

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.

Artikel Terkait  Web Hosting itu Sebenarnya Seperti Apa? Semua yang Wajib Diketahui Pemula

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.

Artikel Terkait  TailwindCSS, untuk Proses Prototyping Desain Web yang Lebih Cepat

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.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Mau Jadi Front-end Developer? Kamu Perlu Menguasai 10 Skill Berikut Ini!

Secara umum untuk membuat sebuah website impian Anda menjadi nyata, Anda hanya perlu datang ke web developer dan menyampaikan...

Mockup adalah: Membuat Mockup Design untuk Website

Wireframes adalah kerangka. Prototipe menunjukkan perilaku. Mockup adalah kulitnya. Dalam artikel ini, kami akan menjelaskan mengapa mockup sama pentingnya dengan...

Jasa Web

Bisnis online

Pengembangan

Murah

Profesional

Toko online

SEO

Pemasaran

Tips

Jasa Aplikasi

Pembuatan Aplikasi

Bisnis online

Pemasaran

Istilah IT

TIPS

TOOLS

JASA

HARGA

Jasa Marketing

Istilah SEO

Teknik SEO

Tips Marketing

Paling Sering dibaca
Mungkin Anda Menyukainya