Anda di halaman 1dari 10

BAB III

PEMBAHASAN
Pada bagian pembahasan ini untuk menceritakan bagian-bagian
pada setiap halaman website yang dibuat
3.1 Pembuatan Desain dengan adobe photoshop 7
Langkah-langkahnya sebagai berikut
1. klik start > All Program > Adobe Photoshop 7
2. Pilih File lalu New terus pada preset sizes pilih yang 600 pixels x
800 pixels Maka keluar jendela adobe Photoshop 7

Gambar 20 Halaman depan Photoshop


3. Beri garis pembantu untuk memudahkan dalam pembuatan garis

Gambar 21 Pembuatan garis

17
4. Klik Pen Tool, Lalu klik pada titik-titik tertentu sebanyak 6 kali
sehingga membentuk yang di inginkan

Gambar 22 Bentuk awal website

5. Lalu buatlah persegi dengan mengklik Raunded Rectangle Tool,


kemudian pilih menu layer pilih lagi layer style terus pilih Drop
Shadow dan pada bagian Opacity beri nilai 100% terus klik ok dan
hasilnya tempatkan di sebelah kiri website, lalu copy sebanyak 4 kali

Gambar 23 Pemberian Kotak

18
6. Pada persegi memberikan kata dengan mengklik Horizontal Type
Tool terus tulis kata yang dimaksud pada 4 Persegi tersebut

Gambar 24 Pemberian Kata


7. Untuk membuat logo dengan mengklik Horizontal Type Tool terus
ketikan hurufnya lalu pilih Layer lalu Layer Style terus Blending
Options dan berikan pada Drop Shadow Opacity 60% lalu pada
Inner Glow Opacity 75% dan Bevel and Emboss pada bagian
Depth beri nilai 141%

Gambar 25 Logo website

19
8. Dan untuk melengkapi dengan memberikan kata-kata pada bagian
atas dan gambar

Gambar 26 Pemberian kata dan gambar


9. Terus klik Slice Tool pada Toolbox dan pada website di potong-
potong hingga sesuai yang diinginkan

Gambar 27 Hasil Pemotongan

10. Klik file lalu pilih save for web dan pilih tab optimized untuk
menyimpan hasil pemotongan lalu save otomatis kesimpan dengan
folder images

20
Gambar 28 Cara Penyimpanan
11. Setelah penyimpanan selesai langkah selanjutnya adalah masuk ke
Macromedia Dreamwever

3.2 Langkah-langkah pengerjaan dengan Macromedia Dreamwever.


Setelah proses pembuatan desain web selesai, lalu melakukan
editing dengan Dreamwever, untuk menambahkan halaman dan
informasi didalam website tersebut. Berikut langkah-langkah dalam
mengerjakannya
1. Klik Start > All Program > Macromedia Dreamwever

Gambar 29 Tampilan Macromedia Dreamwever

21
2. Setelah muncul macromedia dreamwever dan untuk membuka file
dengan mengkilk File lalu open

Gambar 30 Membuka file dengan Dreamweaver


3. lakukan pemasukan data kesemua potongan gambar yang akan
dijadikan link seperti Home, About Us, Product dan Contact Us

Gambar 31 Memasukan data


4. Setelah selesai memasukan data dan link pada setiap potongan
gambar lalu save hasilnya

22
Gambar 32 Menyimpan file
Hal yang sama dilakukan untuk menambahkan halaman yang lain,
seperti halaman about us, Product, dan Contact Us. Hanya tinggal
mengganti informasi yang ada disetiap halaman dan kemudan
menambahkan link kehalaman-halaman tersebut.

5. Mengupload website dengan menggunakan FTP Commander

Gambar 33 Upload website

23
3.3 Hasil Tampilan Website
1. Buka Browser
Untuk membuka suatu website kita perlu aplikasi, diantaranya
Mozilla Firefox, Opera, Internet Expoler, dan masih banyak yang
lainnya. Tapi disini akan menggunakan mozilla Firefox . dan
langkahnya sebagai berikut
 Buka Menu Star > All Program Pilih Mozilla Firefox

Gambar 34 Membuka Browser Mozilla Firefox


2. Pada Address ketik www.kurniajayaseragam.co.cc

Gambar 35 Pengetikan Alamat Website

24
3. Tampilan Halaman Website
Pada bagian pembahasan ini untuk menceritakan bagian-bagian
pada setiap halaman website yang sedang dibuat
 Pada halaman Home
Pada halaman ini berisi informasi tentang Toko Kurnia Jaya
sendiri.

Gambar 36 Tampilan Halaman Home


 Pada halaman About Us
Pada halaman ini berisi tentang sejarah awal berdiri,
pemilihan bahan dan motto dalam melayani konsumen.

Gambar 37 Tampilan Halaman About Us

25
 Pada halaman Product
Pada halaman ini berisi informasi tentang produk yang dijual

Gambar 38 Tampilan Halaman Product


 Pada halaman Contact US
Pada halaman ini berisi informasi tentang alamat toko, email,
telepon dan website yang bisa dihubungi

Gambar 39 Tampilan Halaman Contact Us

26

Anda mungkin juga menyukai