Ringkasan Otodidak Desain Website dari Nol dengan Dreamweaver < Tugas 5 >

Otodidak Desain Website dari Nol dengan Dream Weaver

Jubilee Enterprise

Pendahuluan

Dreamweaver merupakan salah satu software yang paling banyak digunakan dalam merancang sebuah Website. Program ini memungkinkan Anda untuk menciptakan sebuah website dari yang sederhana hingga paling rumit sekalipun.

Ada beberapa metode dalam membuka program Adobe Dreamweaver, salah satunya melalui Start Menu, Icon di Desktop maupun lewat aplikasi RUN.

Start Menu.

Berikut ini langkah-langkah membuka Adobe Dreamweaver melalui Start Menu.

  1.    Klik tombol Start yang berada di sudut kiri bawa taskbar

  2.    Pilih opsi All Programs 

  3.    Selanjutnya Anda akan melihat opsi-opsi yang muncul dan carilah opsi Adobe Dreamweaver dan klik opsi tersebut.

Icon Dreamweaver di Desktop.

Berikut adalah langkah-langkah dalam membuka Adobe Dreamweaver lewat Icon Desktop.

  1.    Pada dekstop cari icon Adobe Dreamweaver

  2.    Arahkan Kursor pada Icon Adobe Dreamweaver

  3.    Klik Ganda pada ikon tersebut dan tunggu beberapa saat hingga program terbuka.

Aplikasi Run.

Langkah ini lebih rumit bila dibandingkan dengan langkah-langkah Start Menu maupun Icon Desktop karena langkah ini mengharuskan Anda untuk mengetahui path dari file adobe dreamweaver terlebih dahulu, jika tidak maka aplikasi tidak akan terbuka.

Berikut adalah contoh langkah-langkah dalam membuka adobe dreamweaver lewat aplikasi RUN.

  1.    Klik tombol Start.

  2.    Pilih opsi Run.

  3.    Pada kota dialog Run masukkan path file Adobe Dreamweaver.

Co : C:\ProgramFiles\Adobe\Dreamweaver\Dreaweaver.exe

  4.    Akhiri dengan menekan tombol OK.

Merancang Website Baru.

Setelah tampilan Aplikasi Adrobe Dreamweaver muncul selanjutnya kita coba merancang website dengan langkah-langkah sebagai berikut :

  1.    Setelah Program Adobe Dreamweaver terbuka, pilih Dreamweaver Site.

  2.    Pada kotak dialog yang muncul, masukkan data-data awal seperti nama dan alamat URL website Anda.

  3.    Klik Next.  

  4.    Pada kotak dialog kedua yang muncul pilih opsi No, I do not want to use a server technology, karena pada tahap awal ini kita akan mendesain website tanpa menggunakan script pemrograman berbasis server.

  5.    Klik tombol Next.

  6.    Pada Kotak dialog yang ketiga muncul, disini kita akan menetukan folder tempat kita menyimpan file-file website. Aktifkan pula opsi Edit local copies on my machine.

  7.    Klik tombol Next.

  8.    Pada kotak dialog yang keempat muncul, pilih opsi None karena pada tahap awal ini kita tidak akan berhubungan dengna server.

  9.    Klik tombol Next.

  10. Setelah itu, Anda akan melihat data-data yang telah Anda pilih dan masukkan sebelumnya, periksa kembali dan jika sudah yakin dengan data-data tersebut, klik tombol Done.

  11. Kemablilah ke halaman awal Dreamweaver. Selanjutnya, pilih opsi HTML karena kita tidak akan berhubungan dengan server.

Mengenal Tipe Teks pada Website.

Kita memerlukan teks untuk melengkapi sebuah halaman website karena berisi tengan informasi-informasi yang ingin kita sampaikan kepada pebaca, maka dari itu penting bagi kita untuk memahaminya sebelum menggunakannya, berikut tipe-tipe teks :

  1.    Teks Berbasis GRAPHIC

Teks tipe ini cukup sulit pembuatannya karena membutuhkan komputer berspesifikasi tinggi untuk menghasilkan teks yang bernilai seni. Teks ini biasanya dirancang menggunakan adobe photoshop ataupun Gimp, teks semacam inilah yang termasuk tipe graphic.

  2.    Teks Berbasis HTML

Teks tipe ini yang banyak digunakan unutk isi sebuah website karena paling mudha untuk dibuat.Anad tinggal mengetiikan informasi yang Anda indin sampaikan di dalam halaman website bila teks tersebut terdapat di dalam script HTML.

Meletakkan Gambar.

Gambar merupakan salah satu kreasi visual yang paling mudah kita nikmati keindahannya. Dunia website banyak menampilkan beragam gambar yang indah dan unik, Dalam mendesain halaman website, memasukkan gambar sebagai bagian dari tampilan website merupakan hal yang paling sering dilakukan, karena itu merupakan salah satu hal dasar dalam pembuatan sebuah website.

Properties untuk Gambar.

Adobe Dreamweaver menyediakan beragam opsi yang dapat Anda gunakan untuk mengatur ulang gambar sesuai dengan keinginan. Opsi-opsi tersebut dapat Anda temukan di dalam panel properties.

Membuat Folder Khusus Gambar.

Membuat folder khusus untuk menyimpan gambar dengna jenis yang sama kedalam satu folder dapat memudahkan Anda ketika membutuhkannya. Perhaitkanlah langkah-langkah berikut :

  1.    Buka Panel Files >> pilih menu Windows >Files.

  2.    Tekanlah nama website yang Anda buat lalu klik kanan.

  3.    Apabila sudah, buatlah folder baru dengan menekan tombol Ctrl+Alt+Shift+N.

  4.    Ketikkan nama yang Anda inginkan untuk menamai folder tersebut.

  5.    Tekan tombol Enter.

Dasar-dasar memasang Gambar.

Untuk meletakkan objek gambar dihalaman website, bisa mencoba langkah berikut :

  1.    Arahkan kurson ketempat Anda ingin menempatkan Objek Gambar.

  2.    Buka menu Insert > Image.

  3.    Pilih file gambar yang Anda inginkan di dalam kotak dialog Select Image Source.

  4.    Tekan tombol OK.

  5.    Tekan kembali tombol OK pada kotak dialog yang muncul setelah opsi ke 4 diatas.

  6.    Pada kotak dialog Adobe Dreamweaver, tekanlah YES agar dapat meng-Copy gambar tersebut kedalam folder khusus.

  7.    Pilih folder tempat Anda menyimpan file gambar lalu tekan tombol Save.

  8.    Apabila gambar yang dinginkan tidak muncul, ketikkan teks lain sebagai pengganti dalam kotak teks Alternate Teks.

  9.    Selanjutnya, tekanlah tombol OK pada kotak dialog Image Tag Accessibility Attributes.

  10.  Gambar akan diletakkan secara otomatis kedalam halaman yang diinginkan.

Membuat LIST.

Pada menu Text, ada salah satu opsi yang tidak dapat Anda lewatkan begitu saja yaitu opsi List. Oleh karena berada didalam menu Text, sudah pasti jika opsi ini berkaitan dengna teks yang Anda ketikkan di dalam halaman website. Kemunculan Teks yang dibuat tentunya sangat memengaruhi tampilan.

Ada 3 jenis List yaitu : Ordered List, Unordered List, dan Definition List.

  1.    Ordered List

Untuk merinci langkah-langkah atau suatu hal yang ingin Anda klasifikasikan ke dalam poin-poin  ( Jika dalam MS Word dapat Anda jupai pada Bullets and Numbering ).

  2.    Unordered List

Untuk mengklasifikasikan unsur-unsur yang tidak menunjukkan tingkatan atau yang berhubungan erat.

  3.    Definition List.

Dipakai untuk teks berupa definisi di dalam halaman web.

Merancang Tabel.

Selain menggunakan Align, desainer website juga dapat memformat menggunakna tabel. Hal ini lebih disukai karena slain praktis kerapian juga dapat terjaga, Anda tidak hanya dapat meletakkan  teks, tetapi juga beragam objek pada posisi mendatar atau tegak lurus, dengna begitu kekakuratan lebih terjamin.

Istilah dalam Dunia Tabel.

Seringkali kita pusing dengan istilah di dalam tabel yang jarang kita jumapi pada fitur-fitur lain, oleh karena itu ada beberapa istilah yang Anda perlu ketahui terlebih dahulu sebagai berikut :

  1.    Collumn

Disebut juga dengan ‘Kolom’. Istilah ini diugnakan untuk menyebut lajur kotak yang tegak lurus atau vertikal pada tampilan tabel. Jika Anda menambahkan jumlah kolom maka tampilan tabel akan melebar kesamping.

  2.    Rows

Sering disebut dengan ‘Baris’. Digunakan untuk menyebut kotak-kotak yang menyusun bentuk tabel sehingga semakin memanjang kebawah.

  3.    Cell

Kotak yang terbentuk karena perpotongan kolom dengan baris ini disebut sebagai ‘Sel’.

Meletakkan Tabel ke dalam Halaman Website.

Ada banyak cara yang dapat Anda gunakan untuk membuat tabel pada desain website, berikut ini metode-metode yang dapat Anda gunakan dalam meletakkan tabel pada Halaman Website :

  1.    Pilih menu Insert > Table.

  2.    Isikan Jumlah kolom dan baris kedalam kotak teks Column dan Rows.

  3.    Masukkan nilai yang diinginkan kedalam kotak Table Width untuk menentukan besar table.

  4.    Di dalam kotak Border Thickness, ketikkan nilai untuk mengatur ketebalan border table.

  5.    Pilihlah model Header yang Anda inginkan.

  6.    Ketikkan teks yang Anda ingikan sebagai judul pada kotak Caption.

  7.    Setelah itu tekan tombol Ok pada kotak dialog Table.

Menulis Teks didalam Tabel.

Saat Anda ingin menulis suatu teks di dalam tabel, Anda harus perhatikan berul bagaimana cara menulis teks dan bagaimana cara perpindahan dari tabel yang satu ke tabel yang lain, Anda dapat mengikuti langkah-langkah dibawah ini :

  1.    Letakkan kursor di dalam salah satu sel tabel.

  2.    Ketikkan Teks yang Anda inginkan.

  3.    Tekanlah tombol TAB pada keyboard apabila Anda ingin berpindah ke kotak lainnya.

  4.    Ulangi langkah tersebut sampai semua data Anda masukkan kedalam tabel.

Memanfaatkan Layer.

Layer

Layer lebih dikela pada adobe photoshop. Meski pada software dreamweaver juga ada istilah ‘layer’, perbedaanya apabila layer pada photoshop lebih berfungsi pada bagian gambar yang ditumpuk untuk dijadikan suatu kreasi utuh atau sengaja dipisah, sementara itu Layer pada Dreamweaver  merupakan tempat untuk menampung objek gambar, teks dan unsur lainnya dalam halaman website.

Meletakkan Layer di Halaman Website.

  1.    Siapkan halaman website untuk menampnug layer, lalu pilih menu Insert > Layout Objects > Ap Div.

  2.    Lihat kotak transparan berwarna di layar maka itulah yang dinamakan layer.

Menyelseksi Layer.

Bayangkan betapa riuhnya jika Anda secara serampangan memasukkan begitu banyak laer pada halaman website msekipun halaman website dapat menampung layer sebanyak yang Anda inginkan akan tetapi sebaikya Anda menyeleksi terlebih dahulu layernya, dengan cara dibawah ini :

  1.    Posisikan kursor pada kotak kecil di pojok kiri atas layer,

  2.    Klik kotak kecil tersebut.

  3.    Layer yang terpilih akan ditandai dengan garis biru dengan sejumlah kotak handle mengelilinginya.

Membuat LINK.

Link merupakan intin desain dari sebuah website dan internet. Banyaknya link yang menghubungkan satu area dengan area lain hingga terbentuk haringan internet, bisa diumpamakan link sebagai kuncil jika seseorang inigin berpindah dari satu negara ke negara lain secara visual.

Memasukkan Link ke dalam Teks.

Langkah-langkah memasukkan link kedalam sebuah teks cukup sederhana, terapkanlan langkah-langkah berikut :

  1.    Siapkanlah teks yang akan di beri link terlebih dahulu

  2.    Blok teks tersebut agar dreamweaver mengetahui letak link akan dibuat dimana saja.

  3.    Klik ikon Browse to File yang ada di panel Porperties. 

  4.    Pada kotak dialog Select File, tentukan halaman website yang akan Anda tuju, kilk saja salah satu file yan sudah berlaku sampai saaat ini, itu merupakan halaman link yang dituju.

  5.    Lalu Klik OK.