pokok bahasan layout situs webkhm201.weblog.esaunggul.ac.id/wp-content/uploads/sites/... ·...

9
Pokok Bahasan Layout Situs web Pada pertemuan ini dibahas bagimana cara mendesain halaman layout situs web menggunakan adobe photoshop Tujuan ,agar Mahasiswa dapat : 1. Mahasiswa dapat mendesain layout halaman situs web menggunakan adobe photoshop 2. Mahasiswa memahami konsep layout situsweb 3. Mahasiswa dapat berkreatif dengan adobe photoshop Daftar pustaka : 1. Tutorial dreamweaver 8 2. Using dreamweaver 8 3. www.adobe-photosho.com

Upload: others

Post on 09-Jul-2020

10 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Pokok Bahasan Layout Situs webkhm201.weblog.esaunggul.ac.id/wp-content/uploads/sites/... · 2019-02-20 · Layout Situs web Pada pertemuan ini dibahas bagimana cara mendesain halaman

Pokok Bahasan Layout Situs web Pada pertemuan ini dibahas bagimana cara mendesain halaman layout situs web menggunakan adobe photoshop Tujuan ,agar Mahasiswa dapat :

1. Mahasiswa dapat mendesain layout halaman situs web menggunakan adobe photoshop

2. Mahasiswa memahami konsep layout situsweb 3. Mahasiswa dapat berkreatif dengan adobe photoshop

Daftar pustaka :

1. Tutorial dreamweaver 8 2. Using dreamweaver 8 3. www.adobe-photosho.com

Page 2: Pokok Bahasan Layout Situs webkhm201.weblog.esaunggul.ac.id/wp-content/uploads/sites/... · 2019-02-20 · Layout Situs web Pada pertemuan ini dibahas bagimana cara mendesain halaman

LAYOUT/TATALETAK HALAMAN SITUS WEB

Layout halaman situs web selain menggunakan dreamweaver 8, juga dapat

menggunakan adobe photoshop, sbbb :

Buka photo shop ukuran :

o Width : 1024 Pixel

o Height ; 768 Pixel

Klik Ok

o Maka akan tampil halaman sesui dengan permintaan

Page 3: Pokok Bahasan Layout Situs webkhm201.weblog.esaunggul.ac.id/wp-content/uploads/sites/... · 2019-02-20 · Layout Situs web Pada pertemuan ini dibahas bagimana cara mendesain halaman

o Klik new fill dari layer

o Pilih solid color

Untuk memilih warna :

o Pilih New Create Fill

o Pilih Solid pilih ungu - Klik OK

Page 4: Pokok Bahasan Layout Situs webkhm201.weblog.esaunggul.ac.id/wp-content/uploads/sites/... · 2019-02-20 · Layout Situs web Pada pertemuan ini dibahas bagimana cara mendesain halaman

o Klik ok

Maka object akan diberi warna

Membetuk Header Layout

o KLik Retagular Marquee

Page 5: Pokok Bahasan Layout Situs webkhm201.weblog.esaunggul.ac.id/wp-content/uploads/sites/... · 2019-02-20 · Layout Situs web Pada pertemuan ini dibahas bagimana cara mendesain halaman

o Dan berwarna

Memberi Judul Header :

o Gunakan Text Tool

o Ketik judul headre

Page 6: Pokok Bahasan Layout Situs webkhm201.weblog.esaunggul.ac.id/wp-content/uploads/sites/... · 2019-02-20 · Layout Situs web Pada pertemuan ini dibahas bagimana cara mendesain halaman

Memasukan komponen layout :

o Masukan oject image

o Klik File Open

o Buka object yang akan jadi bagian layout

o Gunakan Move tool untuk memindahkan object

Page 7: Pokok Bahasan Layout Situs webkhm201.weblog.esaunggul.ac.id/wp-content/uploads/sites/... · 2019-02-20 · Layout Situs web Pada pertemuan ini dibahas bagimana cara mendesain halaman

Tampilkan dalam halaman situs web :

o Klik File

o Save Forweb

Page 8: Pokok Bahasan Layout Situs webkhm201.weblog.esaunggul.ac.id/wp-content/uploads/sites/... · 2019-02-20 · Layout Situs web Pada pertemuan ini dibahas bagimana cara mendesain halaman

o Pilih Quality 60

o Save HTML and Image

o Format JPG

o Save Format HTML

Page 9: Pokok Bahasan Layout Situs webkhm201.weblog.esaunggul.ac.id/wp-content/uploads/sites/... · 2019-02-20 · Layout Situs web Pada pertemuan ini dibahas bagimana cara mendesain halaman

o Klik Privew Web

o Maka terbentuk layout halaman web