Pokok Bahasan Layout Situs webkhm201.weblog.esaunggul.ac.id/wp-content/uploads/sites/... ·...
Transcript of Pokok Bahasan Layout Situs webkhm201.weblog.esaunggul.ac.id/wp-content/uploads/sites/... ·...
![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](https://reader030.fdocument.pub/reader030/viewer/2022041120/5f33bde2f74bc913e52e1a74/html5/thumbnails/1.jpg)
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](https://reader030.fdocument.pub/reader030/viewer/2022041120/5f33bde2f74bc913e52e1a74/html5/thumbnails/2.jpg)
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](https://reader030.fdocument.pub/reader030/viewer/2022041120/5f33bde2f74bc913e52e1a74/html5/thumbnails/3.jpg)
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](https://reader030.fdocument.pub/reader030/viewer/2022041120/5f33bde2f74bc913e52e1a74/html5/thumbnails/4.jpg)
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](https://reader030.fdocument.pub/reader030/viewer/2022041120/5f33bde2f74bc913e52e1a74/html5/thumbnails/5.jpg)
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](https://reader030.fdocument.pub/reader030/viewer/2022041120/5f33bde2f74bc913e52e1a74/html5/thumbnails/6.jpg)
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](https://reader030.fdocument.pub/reader030/viewer/2022041120/5f33bde2f74bc913e52e1a74/html5/thumbnails/7.jpg)
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](https://reader030.fdocument.pub/reader030/viewer/2022041120/5f33bde2f74bc913e52e1a74/html5/thumbnails/8.jpg)
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](https://reader030.fdocument.pub/reader030/viewer/2022041120/5f33bde2f74bc913e52e1a74/html5/thumbnails/9.jpg)
o Klik Privew Web
o Maka terbentuk layout halaman web