Pengertian Desain Web
Pengertian Desain Web atau definisi Desain Web adalah jenis desain grafis yang ditujukan untuk pengembangan dan styling obyek lingkungan informasi Internet untuk menyediakan dengan fitur konsumen high-end dan kualitas estetika. Definisi yang ditawarkan memisahkan desain web dari pemrograman web, menekankan fitur fungsional dari sebuah situs web, serta desain posisi web sebagai semacam desain grafis.
Tujuan desain web
adalah untuk membuat situs web atau dokumen elektronik dan aplikasi
yang berada pada web server dan menampilkan konten dan fitur antarmuka
interaktif kepada pengguna akhir dalam bentuk halaman Web. Seperti
unsur-unsur teks, gambar (gif, jpeg) untuk ditempatkan pada halaman
menggunakan HTML / XHTML / tag XML. Menampilkan media yang lebih
kompleks (vektor grafis, animasi, video, suara) membutuhkan plug-in
seperti Adobe Flash, QuickTime, Java run-time dan lain-lain. Plug-in
juga dimasukkan ke dalam halaman web dengan menggunakan HTML / tag
XHTML.
Perbaikan sesuai browser dengan standar W3C diminta penerimaan luas dan penggunaan XHTML / XML bersama dengan Cascading Style Sheets (CSS) untuk posisi dan memanipulasi unsur-unsur halaman web dan objek. Kemampuan browser untuk mengirimkan berbagai konten dan pilihan aksesibilitas kepada klien tanpa menggunakan plug-in.
Dengan spesialisasi yang tumbuh di bidang teknologi informasi ada kecenderungan kuat untuk membedakan antara desain web (web design) dan pengembangan web (web development).
Ada banyak alasan mengapa orang ingin membuat websitenya sendiri.
Antara lain, mereka ingin agar tulisan-tulisan, gambar, serta suasana
hati mereka dapat dibaca oleh banyak orang atau iseng saja belajar dan
siapa tau kalau sudah menjadi webmaster bisa
mendapatkan penghasilan tambahan dengan membuat suatu jasa pembuatan
website. Pada proyek pertama ini, kita akan menciptakan salah satu
bentuk website personal. Website ini didesain dengan nuansa full color
sehingga mempunyai kesan yang menarik dan indah walaupun bisa dibilang
proyek pertama ini sangat sederhana sekali, hehehe. Walaupun demikian
anda bisa memodifikasinya sendiri sesuai dengan yang anda sukai.
Sebelum kita memulai tutorial cara membuat website sederhana dengan menggunakan photoshop dan dreamweaver ini, tentunya terlebih dahulu anda harus menginstal aplikasi Photoshop dan Dreamweaver. Kedua aplikasi ini tidak gratis tapi merupakan pilihan yang tepat untuk membuat project website, untuk membeli aplikasi ini anda dapat men-download-nya di situs resmi adobe yaitu www.adobe.com. Mari kita memulai project pembuatan website sederhana apabila anda sudah memiliki kedua aplikasi tersebut. Berikut merupakan hasil dari proyek Websiteku
Pilih rounded retangle tool pada tool panel
dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah
Pilih layer click kanan pada layer 1 (bidang yang anda buat) kemudian click gradient dan pilih gradasi warna yang anda sukai... pastikan warna bawah adalah warna dasar putih
Hasil dari gradasi yang anda buat akan menghasilkan gambar seperti berikut :
buatlah bidang untuk panel menu dengan rounded retangle tool pada tool panel seperti sebelumnya beri sentuhan warna yang berbeda dengan layer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga anda mendapatkan gambar seperti dibawah ini
buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel, tempatkan sejajar dengan bidang yang anda buat sebelumnya putarkan sampai arah kemiringan 250 dengan move tool
kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser kebawah sebanyak 4 kali. Beri sentuhan warna pada bidang yang telah anda buat sehingga akan tampak seperti berikut:
Ketik daftar menu gunakan Type Tool dengan lambang (T) pada tool panel
Isi text pada bidang untuk daftar menu dengan : Halaman Utama, Tentang Saya, Galerry Foto dan Link. Kemudian pada sebelah kanan beri Logo dan judul Website yang sesuai dengan keinginan anda . Sampai tahapan ini kita sudah berhasil merancang layout Websiteku dengan tampilan sebagai berikut
Gunakan Slicetool
kemudian slice Layout website menjadi 6 bagian yaitu : 4 slice untuk daftar menu, 1 slice untuk logo, dan 1 lagi untuk untuk content/ isi web.
Sekarang anda tinggal menyimpanya saja. Pilih File->Save For Web
dan akan muncul wizard seperti berikut
pada opsi dibawah save, anda bisa menentukan format gambar yang akan di save mulai dari gif, png, jpg.
apabila sudah memilih sebelum di save beri nama file anda dengan index, pilih opsi HTML and Images, simpan layout anda pada satu folder yang anda beri nama Websiteku
Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya anda tinggal melakukan mark-up atas file index.html yang telah kita save tadi dengan macromedia Dreamweaver.
Ada banyak alasan mengapa orang ingin membuat websitenya sendiri.
Antara lain, mereka ingin agar tulisan-tulisan, gambar, serta suasana
hati mereka dapat dibaca oleh banyak orang atau iseng saja belajar dan
siapa tau kalau sudah menjadi webmaster bisa
mendapatkan penghasilan tambahan dengan membuat suatu jasa pembuatan
website. Pada proyek pertama ini, kita akan menciptakan salah satu
bentuk website personal. Website ini didesain dengan nuansa full color
sehingga mempunyai kesan yang menarik dan indah walaupun bisa dibilang
proyek pertama ini sangat sederhana sekali, hehehe. Walaupun demikian
anda bisa memodifikasinya sendiri sesuai dengan yang anda sukai.
Sebelum kita memulai tutorial cara membuat website sederhana dengan menggunakan photoshop dan dreamweaver ini, tentunya terlebih dahulu anda harus menginstal aplikasi Photoshop dan Dreamweaver. Kedua aplikasi ini tidak gratis tapi merupakan pilihan yang tepat untuk membuat project website, untuk membeli aplikasi ini anda dapat men-download-nya di situs resmi adobe yaitu www.adobe.com. Mari kita memulai project pembuatan website sederhana apabila anda sudah memiliki kedua aplikasi tersebut. Berikut merupakan hasil dari proyek Websiteku
Pilih rounded retangle tool pada tool panel
dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah
Pilih layer click kanan pada layer 1 (bidang yang anda buat) kemudian click gradient dan pilih gradasi warna yang anda sukai... pastikan warna bawah adalah warna dasar putih
Hasil dari gradasi yang anda buat akan menghasilkan gambar seperti berikut :
buatlah bidang untuk panel menu dengan rounded retangle tool pada tool panel seperti sebelumnya beri sentuhan warna yang berbeda dengan layer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga anda mendapatkan gambar seperti dibawah ini
buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel, tempatkan sejajar dengan bidang yang anda buat sebelumnya putarkan sampai arah kemiringan 250 dengan move tool
kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser kebawah sebanyak 4 kali. Beri sentuhan warna pada bidang yang telah anda buat sehingga akan tampak seperti berikut:
Ketik daftar menu gunakan Type Tool dengan lambang (T) pada tool panel
Isi text pada bidang untuk daftar menu dengan : Halaman Utama, Tentang Saya, Galerry Foto dan Link. Kemudian pada sebelah kanan beri Logo dan judul Website yang sesuai dengan keinginan anda . Sampai tahapan ini kita sudah berhasil merancang layout Websiteku dengan tampilan sebagai berikut
Gunakan Slicetool
kemudian slice Layout website menjadi 6 bagian yaitu : 4 slice untuk daftar menu, 1 slice untuk logo, dan 1 lagi untuk untuk content/ isi web.
Sekarang anda tinggal menyimpanya saja. Pilih File->Save For Web
dan akan muncul wizard seperti berikut
pada opsi dibawah save, anda bisa menentukan format gambar yang akan di save mulai dari gif, png, jpg.
apabila sudah memilih sebelum di save beri nama file anda dengan index, pilih opsi HTML and Images, simpan layout anda pada satu folder yang anda beri nama Websiteku
Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya anda tinggal melakukan mark-up atas file index.html yang telah kita save tadi dengan macromedia Dreamweaver.
buka file index.htm yang telah kita save pada sesi photoshop dengan cara pilih File->Open setelah file index.html dibuka pada dreamweaver delete gambar slice yang 6 keenam atau gambar dengan nama index_06.png, yaitu gambar yang digunakan untuk isi content.
Jangan Heran bila tampilan layout website menjadi hancur seperti gambar dibawah, atur tabel HTML sehingga tampilan web menjadi normal lagi
Setelah anda mengatur tata letak gambar pada tabel, pindahkan opsi view ke show code view sehingga anda dapat melihat Tag-tag Mark-up HTML seperti berikut :
Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS), caranya tambahkan tag yang berwarna merah pada tag berikut kedalam tag HTML anda.
Dengan demikian maka kerangka website anda sudah jadi. Langkah selanjutnya kembalikan tampilan dreamweaver ke design view "Show Design View" kemudian isi bagian kolom content dengan hal-hal yang ingin anda publikasikan pada website anda. setelah selesai save index.html, lalu save as dengan nama file yang berbeda about.html pada folder yang sama, save as lagi dengan nama file gallery.html dan yang terakhir link.html. Sehingga kini anda memiliki 4 (empat) file html yang berbeda (semuanya harus dalam folder yang sama).
Isi kolom content pada masing-masing file yang sudah anda buat sesuai dengan tema masing-masing file, yakni isi halaman utama website, tentang kita, galeri dan link. saya contohkan dibawah merupakan isi halaman utama
Langkah terakhir setelah mengisi semua file adalah menghubungkan/melink-an file yang satu dengan yang lain. caranya mudah saja. click setiap menu link pada website kita lalu pada properties pilih link dan click icon folder seperti dapat dilihat pada gambar dibawah :
pilih file yang ingin di hubungkan
Lakukan hal yang sama dan hubungkan semua file... selesailah project anda, kini anda mempunyai website yang anda rancang sendiri...
Catatan Penting : Pembuatan website diatas merupakan salah satu cara perancangan web yang berbasis Table. selain menggunakan table sebetulnya ada cara lain yaitu dengan menggunakan Divatau campuran keduanya Div+Table. kedua cara memiliki plus minus masing-masing dan anda akan mengerti dengan sendirinya seiring dengan pengetahuan dan pengalaman anda dalam membuat website.
Perbaikan sesuai browser dengan standar W3C diminta penerimaan luas dan penggunaan XHTML / XML bersama dengan Cascading Style Sheets (CSS) untuk posisi dan memanipulasi unsur-unsur halaman web dan objek. Kemampuan browser untuk mengirimkan berbagai konten dan pilihan aksesibilitas kepada klien tanpa menggunakan plug-in.
Dengan spesialisasi yang tumbuh di bidang teknologi informasi ada kecenderungan kuat untuk membedakan antara desain web (web design) dan pengembangan web (web development).
Pengertian Web Desain
Web Desain
adalah istilah yang sering digunakan untuk menggambarkan bagaimana
tampilan isi suatu website atau situs. Tampilan dari website biasanya
berupa hypertext (HTML) atau hypermedia yang dikirimkan ke users melalui
World Wide Web. Untuk menampilkan suatu desain web atau isi dari suatu
website, dibutuhkan sebuah browser web atau software (perangkat lunak)
berbasis web. Tujuan dari web desain adalah untuk membuat website yang
meliputi sekumpulan konten online termasuk dokumen dan aplikasi yang
berada pada web server. Bisa juga, sebuah website berupa sekumpulan
teks, gambar, suara dan konten lainnya, serta dapat bersifat interaktif
maupun statis.
Cara Membuat Website dengan Menggunakan Photoshop & Dreamiver
Belajar Membuat Website dengan Photoshop dan Dreamweaver
Sebelum kita memulai tutorial cara membuat website sederhana dengan menggunakan photoshop dan dreamweaver ini, tentunya terlebih dahulu anda harus menginstal aplikasi Photoshop dan Dreamweaver. Kedua aplikasi ini tidak gratis tapi merupakan pilihan yang tepat untuk membuat project website, untuk membeli aplikasi ini anda dapat men-download-nya di situs resmi adobe yaitu www.adobe.com. Mari kita memulai project pembuatan website sederhana apabila anda sudah memiliki kedua aplikasi tersebut. Berikut merupakan hasil dari proyek Websiteku
Membuat Disain Awal dengan Photoshop
jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height : 875 pixel Resolution : 72 pixel/inch Background Content : TransparentPilih rounded retangle tool pada tool panel
dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah
Pilih layer click kanan pada layer 1 (bidang yang anda buat) kemudian click gradient dan pilih gradasi warna yang anda sukai... pastikan warna bawah adalah warna dasar putih
Hasil dari gradasi yang anda buat akan menghasilkan gambar seperti berikut :
buatlah bidang untuk panel menu dengan rounded retangle tool pada tool panel seperti sebelumnya beri sentuhan warna yang berbeda dengan layer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga anda mendapatkan gambar seperti dibawah ini
buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel, tempatkan sejajar dengan bidang yang anda buat sebelumnya putarkan sampai arah kemiringan 250 dengan move tool
kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser kebawah sebanyak 4 kali. Beri sentuhan warna pada bidang yang telah anda buat sehingga akan tampak seperti berikut:
Ketik daftar menu gunakan Type Tool dengan lambang (T) pada tool panel
Isi text pada bidang untuk daftar menu dengan : Halaman Utama, Tentang Saya, Galerry Foto dan Link. Kemudian pada sebelah kanan beri Logo dan judul Website yang sesuai dengan keinginan anda . Sampai tahapan ini kita sudah berhasil merancang layout Websiteku dengan tampilan sebagai berikut
Gunakan Slicetool
kemudian slice Layout website menjadi 6 bagian yaitu : 4 slice untuk daftar menu, 1 slice untuk logo, dan 1 lagi untuk untuk content/ isi web.
Sekarang anda tinggal menyimpanya saja. Pilih File->Save For Web
dan akan muncul wizard seperti berikut
pada opsi dibawah save, anda bisa menentukan format gambar yang akan di save mulai dari gif, png, jpg.
apabila sudah memilih sebelum di save beri nama file anda dengan index, pilih opsi HTML and Images, simpan layout anda pada satu folder yang anda beri nama Websiteku
Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya anda tinggal melakukan mark-up atas file index.html yang telah kita save tadi dengan macromedia Dreamweaver.
Belajar Membuat Website dengan Photoshop dan Dreamweaver
Sebelum kita memulai tutorial cara membuat website sederhana dengan menggunakan photoshop dan dreamweaver ini, tentunya terlebih dahulu anda harus menginstal aplikasi Photoshop dan Dreamweaver. Kedua aplikasi ini tidak gratis tapi merupakan pilihan yang tepat untuk membuat project website, untuk membeli aplikasi ini anda dapat men-download-nya di situs resmi adobe yaitu www.adobe.com. Mari kita memulai project pembuatan website sederhana apabila anda sudah memiliki kedua aplikasi tersebut. Berikut merupakan hasil dari proyek Websiteku
Membuat Disain Awal dengan Photoshop
jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height : 875 pixel Resolution : 72 pixel/inch Background Content : TransparentPilih rounded retangle tool pada tool panel
dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah
Pilih layer click kanan pada layer 1 (bidang yang anda buat) kemudian click gradient dan pilih gradasi warna yang anda sukai... pastikan warna bawah adalah warna dasar putih
Hasil dari gradasi yang anda buat akan menghasilkan gambar seperti berikut :
buatlah bidang untuk panel menu dengan rounded retangle tool pada tool panel seperti sebelumnya beri sentuhan warna yang berbeda dengan layer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga anda mendapatkan gambar seperti dibawah ini
buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel, tempatkan sejajar dengan bidang yang anda buat sebelumnya putarkan sampai arah kemiringan 250 dengan move tool
kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser kebawah sebanyak 4 kali. Beri sentuhan warna pada bidang yang telah anda buat sehingga akan tampak seperti berikut:
Ketik daftar menu gunakan Type Tool dengan lambang (T) pada tool panel
Isi text pada bidang untuk daftar menu dengan : Halaman Utama, Tentang Saya, Galerry Foto dan Link. Kemudian pada sebelah kanan beri Logo dan judul Website yang sesuai dengan keinginan anda . Sampai tahapan ini kita sudah berhasil merancang layout Websiteku dengan tampilan sebagai berikut
Gunakan Slicetool
kemudian slice Layout website menjadi 6 bagian yaitu : 4 slice untuk daftar menu, 1 slice untuk logo, dan 1 lagi untuk untuk content/ isi web.
Sekarang anda tinggal menyimpanya saja. Pilih File->Save For Web
dan akan muncul wizard seperti berikut
pada opsi dibawah save, anda bisa menentukan format gambar yang akan di save mulai dari gif, png, jpg.
apabila sudah memilih sebelum di save beri nama file anda dengan index, pilih opsi HTML and Images, simpan layout anda pada satu folder yang anda beri nama Websiteku
Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya anda tinggal melakukan mark-up atas file index.html yang telah kita save tadi dengan macromedia Dreamweaver.
Mark-Up Tag HTML dengan Dreamweaver
Setelah desain web di-slice dengan photoshop, sekarang saatnya kita melakukan sedikit modifikasi dengan menggunakan Dreamweaver. dreamweaver yang saya gunakan adalah dreamweaver versi 8 padahal sekarang sudah ada lho yang versi CS 4, hihi. Langsung saja jalankan aplikasi buatan Macromedia ini dan Anda akan melihat tampilan seperti gambar dibawah ini:buka file index.htm yang telah kita save pada sesi photoshop dengan cara pilih File->Open setelah file index.html dibuka pada dreamweaver delete gambar slice yang 6 keenam atau gambar dengan nama index_06.png, yaitu gambar yang digunakan untuk isi content.
Jangan Heran bila tampilan layout website menjadi hancur seperti gambar dibawah, atur tabel HTML sehingga tampilan web menjadi normal lagi
Setelah anda mengatur tata letak gambar pada tabel, pindahkan opsi view ke show code view sehingga anda dapat melihat Tag-tag Mark-up HTML seperti berikut :
Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS), caranya tambahkan tag yang berwarna merah pada tag berikut kedalam tag HTML anda.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| < html > < head > < title >Untitled-1</ title > < meta http-equiv = "Content-Type" content = "text/html; charset=iso-8859-1" > < style type = "text/css" > .content { background:url(images/index_06.png) bottom; padding:20px 20px 40px 20px; } </ style > </ head > < body bgcolor = "#FFFFFF" leftmargin = "0" topmargin = "0" marginwidth = "0" marginheight = "0" > <!-- ImageReady Slices (Untitled-1.psd) --> < table id = "Table_01" align = "center" width = "700" height = "377" border = "0" cellpadding = "0" cellspacing = "0" > < tr > < td height = "94" > < img src = "images/index_01.gif" width = "281" height = "94" alt = "" ></ td > < td rowspan = "4" > < img src = "images/index_02.gif" width = "419" height = "328" alt = "" ></ td > </ tr > < tr > < td height = "76" > < img src = "images/index_03.gif" width = "281" height = "76" alt = "" ></ td > </ tr > < tr > < td height = "64" > < img src = "images/index_04.gif" width = "281" height = "64" alt = "" ></ td > </ tr > < tr > < td height = "94" > < img src = "images/index_05.gif" width = "281" height = "94" alt = "" ></ td > </ tr > < tr > < td colspan = "2" class = "content" ></ td > </ tr > </ table > <!-- End ImageReady Slices --> </ body > </ html > |
Isi kolom content pada masing-masing file yang sudah anda buat sesuai dengan tema masing-masing file, yakni isi halaman utama website, tentang kita, galeri dan link. saya contohkan dibawah merupakan isi halaman utama
Langkah terakhir setelah mengisi semua file adalah menghubungkan/melink-an file yang satu dengan yang lain. caranya mudah saja. click setiap menu link pada website kita lalu pada properties pilih link dan click icon folder seperti dapat dilihat pada gambar dibawah :
pilih file yang ingin di hubungkan
Lakukan hal yang sama dan hubungkan semua file... selesailah project anda, kini anda mempunyai website yang anda rancang sendiri...
Catatan Penting : Pembuatan website diatas merupakan salah satu cara perancangan web yang berbasis Table. selain menggunakan table sebetulnya ada cara lain yaitu dengan menggunakan Divatau campuran keduanya Div+Table. kedua cara memiliki plus minus masing-masing dan anda akan mengerti dengan sendirinya seiring dengan pengetahuan dan pengalaman anda dalam membuat website.
Terima kasih kak, dengan tutorial yang kakak bagikan sangat membantu sekali
ReplyDeleteNama: yulinda sari
Nim: 1922500197
Dan link web kampus saya
https://www.atmaluhur.ac.id/
Terima kasih kak buat tutor nya, Sangat bermanfaat kak, ditunggu tutor selanjutnya kak. perkenalkan nama saya Tri scorpio, Nim saya 1922500198 dan link kampus saya https://www.atmaluhur.ac.id/
ReplyDeleteTerima kasih kak buat tutor nya, Sangat bermanfaat kak, ditunggu tutor selanjutnya kak. perkenalkan nama saya Tri scorpio, Nim saya 1922500198 dan link kampus saya https://www.atmaluhur.ac.id/
ReplyDelete