Cara Menggugurkan Kandungan 082223109953 dgn Obat Aborsi Usia Janin 1-8 Bula...
Modul dreamweaver dasar
1. Modul DreamweaverDasar
PostedonDecember15, 2015 by AdminKWM
macromedia_dreamweaver
Dalammodul kursusini,kitaakan berlatihmembuatsebuahhalamanwebdenganDreamweaver.Untuk
membuathalamanweb,dibutuhkanpengetahuandasartentangHTML dan CSS. Tapi keduanyatidak
akan dibahasdi modul ini.TentangHTML bisadilihatdi Modul HTML Dasar dan Modul CSSDasar.
Sisemyangkitagunakanuntuklatihandalammodul ini adalahserverweblokal yangdiinstall dengan
XAMPP.Aplikasi XAMPP-nyadianggapsudah terinstall.Tutorialmenginstall XAMPP,dapatdilihatdi
MembuatWeb ServerLokal denganXAMPP.
Materi yangakan dibahasadalah:
Mengapa Dreamweaver
Layar KerjaDreamweaver
Mengkonfigurasi Site(Project)
Memasukandan MemformatTeks
MemasukanGambar
MembuatTable
MembuatLink
MembuatCSS denganstylesheetInternal danEksternal
Dalamkursuswebini,kitaakan membuathalamanwebyangmenampilkandeskripsiproduksebuah
laptop.Materi ini tidakbermaksuduntukpromosi,tetapi hanyasebagaicontoh.Kalaupunadateksdan
gambar yangdicopy/diambil dari suatusumbernya,hakciptanyaadadipemiliksumbertersebut.
Mengapa Dreamweaver
2. Untuk membuatsebuahsituswebdari nol,dibutuhkanpengetahuandasarmembuatdokumenHTML,
lengkapdenganCSSdanJavascript. Bagi seorangpemula,hal itutidakmudah,karenaharusmengingat,
atau setidaknyamelihatreferensi,danmengetiktag-tagHTMLini secara manual di texteditor.Cara
seperti ini jugarawanterjadi kesalahan.
Untuk memudahkanprosesini,diperlukansebuah IDE(IntegratedDevelopmentEnvironment,
LingkunganPengembanganTerintegrasi) untukHTML.IDE tersebutharusdapat membantumemasukan
tag-tag ini secaramudah,bisamengecekkesalahan,danmenampilkanhasilnyasecarareal-time.Fiturini
seringdisebutWYSWYG(WhatYou See isWhat You Get).Kalaukita browsingdi Google,terdapat
banyaksekali “IDEuntukHTML”. Dreamweaveradalahsalahsatunya.Menurutpenilaiansayapribadi,
DreamweaveradalahsalahsatuIDE WYSWYG terbaikyangada saat ini.
Versi terakhirDreamweaverpadasaatkursuswebini dibuatadalahDreameaverCC2015. Versi ini
sangat lengkapdengansegudangfituryangakanterasamanfaatnyabagi profesional yangbekerjadi
webdesain.Bagi pemula,fituryangdibutuhkanhanyasedikit.Bahkanbanyaknyafiturhanyamembuat
bingung,danmembutuhkanresource komputeryangtinggi.
Dalamkursuswebini,akandibahasbagaimanamenggunakanDreamweaver8(versi lama) untuk
membuatdokumenHTML secaralengkap.Dreamweaverversi 8dapatdicari denganmudah di Internet.
Layar KerjaDreamweaver
The Welcome Screen
Layar Welcome ScreenDreamweaverdipakai untukpekerjaan
membukadokumenyangtelahada
membuatdokumenbaru
membuatdokumenberbasistemplate
Andadapat mematikanWelcome Screendenganmemilih check-box “Don’tshow again”di sudutkiri
bawah.
3. kursuswebdreamweaver
The Workspace
The Workspace Layout
Workspace Layoutdigunakanuntukmembedakanjenisrole pemakai.
Untuk Dreamweaver8tersedia2jenisrole,yaituCoder danDesigner.Coderadalahjenisuseryang
lebihbanyakmembuatkode program,biasanyauntuksitusdinamisdanaplikasi web.Designeradalah
useryang lebihbanyakbekerjadengandesain(grafis)danlayout,termasukCSS.
SetelanLayoutWorkspace adadi lokasi menuWindows>Workspace Layout
kursuswebworkspace layout
Workspace Codercocok untukdeveloperyangbanyakbekerjadengankode(server-side script) dan
Javascript.
Workspace Designercocokuntukdevelperyangbanyakbekerjadisisi desain,seperti layoutweb,CSS,
gambar,dan seterusnya.
Layout ruangkerjaDreamweaveradalahsebagai berikut:
4. kursusweblayoutruangkerjadreamweaver
Textberisi macam-macamteksdanformattag seperti b,em, p, h1, danul.
The Documentwindow
The DocumentWindowadalahjendela yangmenunjukandokumenyangsedangdi edit.Andadapat
memilihbeberapajenistampilan,yaitu:
Designviewuntukpekerjaandesainhalamanwebsecaravisual.Tampilanmiripdenganhalamanyang
muncul di browserdanbisa langsungdi-edit(WYSWYG).
Code viewadalahhalamanunukpembuatancode,menulislangsungHTML,kode Javascript,atauServer-
side skripseperti PHP.
Code and Designviewakanmenampilkansekaligus2jenisviewdalamsatuhalaman,digunakanuntuk
mengeditcode danvisual (desain) secarabersamaan.
The InsertBar
Insertbar mengandungtombol untukmembuatdanmenyisipkanobyekHTML,seperti paragraph,link,
table,form,media,danpotongankode untukwebdinamis(skripserver).
kursuswebinsertbar
Tombol tombol ini dikelompokandalambeberapakategori seperti Common,Layout,Forms,Text,HTML,
Application,danseterusnya.Jikakitaarahkanpointermouse ke tombol ini,keteranganfungsi akan
muncul di bawahnya.
Commonberisi obyekyangpalingseringdipakai seperti hyperlink,gambar,dantable.
5. Layout berisi obyekyangberkaitandenganlayoutseperti tables,divtags,danframes.
Formsberisi tombol untukmembuatformdanmenambahkanelemenform.
HTML berisi macam-macamtag html seperti horizontalrules,headcontent,tables,frames,and scripts.
Applicationberisi elemendinamisseperti recordsets,repeatedregions,andrecordinsertionandupdate
forms.Elemendankode yangtampil akandisesuaikandenganpilihanbahasaskripyangdigunakan.
(MisalnyaPHP)
FlashelementsuntukmenyisipkanMacromediaFlashelements.
`The DocumentToolbar
The Documenttoolbarmemilikitombol-tomboluntukmengaturperpindahanview danperintah-
perintahyangumum.
kursuswebdocumenttoolbar
Code,Split,Design,pilihanyangditampilkandi windows dokumen,apakahCode,Design,atauSplit
(keduanya).
Title,Judul halamanwebyangsedangdikerjakan,akanmuncul di browserbar.
Validate Markup,untukmemvalidasimarkupdi dokumenyangsedangdibuka
6. File Management,untukmenguploadhalamanke situs/remote
Priviewdi Browser,untukmembukadokumenyangsedangdikerjakanke browser
Opsi Tampilan,untukmengatursettingtampilan
kursuswebsettingtampilan
The Status Bar
Menyediakaninformasi tambahantentanghalamanyangsedangdibuka/dikerjakan
kursuswebstatusbar
Tag selectoradalahsalahsatutool yangpalingseringdipakai dansangatbergunauntukmelakukan
selecttagHTML di WindowsDocumen.
The Propertyinspector
The Propertyinspectormenyediakantool untukmemeriksadanmengeditproperti dari elemenHTML,
seperti teksatauobyeklain.Isi properti akanmenyesuaikandenganelemenyangsedangdipilih,
misalnyauntukelemenimage makaproperti yangakanmuncul adalahfile pathtothe image,widthdan
heightof the image,border,alt,align,danlain-lain.
kursuswe propertyinspector
SetupSite danFile Proyek
DalamDreamwaeaver,terdapatfituruntukmengelolaproyek,disebutSite.Fiturini bisaAndapakai
atau bisatidak.FiturSite akanmemudahkandalammengelolafile,asetdanprosesuploadke remote
server.
kursuswebsetupsite
7. MembuatHalaman WebdenganDreamweaver
Mengkonfigurasi Site(Project)
Berikutadalahlangkah-langkahmenyiapkanSite nya.
PilihmenuSite ->NewSite
Isi nama situs,misal:Jual Beli Laptop
Isi HTTP Address:http://localhost/laptopkursuswebsitedefinitionkursuswebsite definition2
KlikNext
Pada pertanyaanservertechnology,pilih“Yes,Iwanttouse a servertechnology”.Dalamkursusini,kita
menggunakanserverweblokal dari XAMPP. kursuswebserverlokal
KlikNext
Pada pertanyaaan“..workwithyour file:“,pilih:Editandtestlocally.Kitaakanmenyimpanfile-file web
di folderXAMPPdanlangsungdi tesdi komputerini.
Pada “Where onyour computerdoyou wantto store your files?”,isi dengan:C:xampphtdocslaptop.
Jikafolderini belumada,buatlahterlebihdahuludilokasitersebut.kursuswebworkwithyourfile
KlikNext
Untuk root site,isi dengan:http://localhost/laptop/kursuswebrootsite
Kliktombol TestURL, jikasuksesmuncul pesanThe URL Prefix testwassuccessfull.kursuswebtestURL
KlikOK,kemudianklikNext
Pada pilihan“..doyoucopyitto anothermachine?…”,pilih:PilihanNountuksementara,dapatdiubah
kemudian.kursuswebsitedefinitioncopy
KlikNext.
Modul Dreamweaver Dasar
Posted on December 15, 2015 by Admin KWM
8. Dalam modul kursus ini, kita akan berlatih membuat sebuah halaman web dengan Dreamweaver.
Untuk membuat halaman web, dibutuhkan pengetahuan dasar tentang HTML dan CSS. Tapi
keduanya tidak akan dibahas di modul ini. Tentang HTML bisa dilihat di Modul
HTML Dasar dan Modul CSS Dasar.
Sisem yang kita gunakan untuk latihan dalam modul ini adalah server web lokal yang diinstall
dengan XAMPP. Aplikasi XAMPP-nya dianggap sudah terinstall. Tutorial menginstall XAMPP,
dapat dilihat di Membuat Web Server Lokal dengan XAMPP.
Materi yang akan dibahas adalah:
Mengapa Dreamweaver
Layar Kerja Dreamweaver
Mengkonfigurasi Site (Project)
Memasukan dan Memformat Teks
Memasukan Gambar
Membuat Table
Membuat Link
Membuat CSS dengan stylesheet Internal dan Eksternal
Dalam kursus web ini, kita akan membuat halaman web yang menampilkan deskripsi produk sebuah
laptop. Materi ini tidak bermaksud untuk promosi, tetapi hanya sebagai contoh. Kalaupun ada teks
dan gambar yang dicopy/diambil dari suatu sumbernya, hak ciptanya ada dipemilik sumber tersebut.
Mengapa Dreamweaver
Untuk membuat sebuah situs web dari nol, dibutuhkan pengetahuan dasar membuat dokumen
HTML, lengkap dengan CSS dan Javascript. Bagi seorang pemula, hal itu tidak mudah, karena harus
mengingat, atau setidaknya melihat referensi, dan mengetik tag-tag HTML ini secara manual di text
editor. Cara seperti ini juga rawan terjadi kesalahan.
9. Untuk memudahkan proses ini, diperlukan sebuah IDE (Integrated Development Environment,
Lingkungan Pengembangan Terintegrasi) untuk HTML. IDE tersebut harus dapat membantu
memasukan tag-tag ini secara mudah, bisa mengecek kesalahan, dan menampilkan hasilnya secara
real-time. Fitur ini sering disebut WYSWYG (What You See is What You Get). Kalau kita browsing
di Google, terdapat banyak sekali “IDE untuk HTML”. Dreamweaver adalah salah satunya. Menurut
penilaian saya pribadi, Dreamweaver adalah salah satu IDE WYSWYG terbaik yang ada saat ini.
Versi terakhir Dreamweaver pada saat kursus web ini dibuat adalah Dreameaver CC 2015. Versi ini
sangat lengkap dengan segudang fitur yang akan terasa manfaatnya bagi profesional yang bekerja di
web desain. Bagi pemula, fitur yang dibutuhkan hanya sedikit. Bahkan banyaknya fitur hanya
membuat bingung, dan membutuhkan resource komputer yang tinggi.
Dalam kursus web ini, akan dibahas bagaimana menggunakan Dreamweaver 8 (versi lama) untuk
membuat dokumen HTML secara lengkap. Dreamweaver versi 8 dapat dicari dengan mudah di
Internet.
Layar Kerja Dreamweaver
The Welcome Screen
Layar Welcome Screen Dreamweaver dipakai untuk pekerjaan
membuka dokumen yang telah ada
membuat dokumen baru
membuat dokumen berbasis template
Anda dapat mematikan Welcome Screen dengan memilih check-box “Don’t show again” di sudut
kiri bawah.
10. The Workspace
The Workspace Layout
Workspace Layout digunakan untuk membedakan jenis role pemakai.
Untuk Dreamweaver 8 tersedia 2 jenis role, yaitu Coder dan Designer. Coder adalah jenis user yang
lebih banyak membuat kode program, biasanya untuk situs dinamis dan aplikasi web. Designer
adalah user yang lebih banyak bekerja dengan desain (grafis) dan layout, termasuk CSS.
Setelan Layout Workspace ada di lokasi menu Windows > Workspace Layout
11. Workspace Coder cocok untuk developer yang banyak bekerja dengan kode (server-side script) dan
Javascript.
Workspace Designer cocok untuk develper yang banyak bekerja disisi desain, seperti layout web,
CSS, gambar, dan seterusnya.
Layout ruang kerja Dreamweaver adalah sebagai berikut:
12. Text berisi macam-macam teks dan format tag seperti b, em, p, h1, dan ul.
The Document window
The Document Window adalah jendela yang menunjukan dokumen yang sedang di edit. Anda dapat
memilih beberapa jenis tampilan, yaitu:
Design viewuntuk pekerjaan desain halaman web secara visual. Tampilan mirip dengan
halaman yang muncul di browser dan bisa langsung di-edit (WYSWYG).
Code view adalah halaman unuk pembuatan code, menulis langsung HTML, kode Javascript,
atau Server-side skrip seperti PHP.
Code and Design view akan menampilkan sekaligus 2 jenis view dalam satu halaman,
digunakan untuk mengedit code dan visual (desain) secara bersamaan.
The Insert Bar
Insert bar mengandung tombol untuk membuat dan menyisipkan obyek HTML, seperti paragraph,
link, table, form, media, dan potongan kode untuk web dinamis (skrip server).
13. Tombol tombol ini dikelompokan dalam beberapa kategori seperti Common, Layout, Forms, Text,
HTML, Application, dan seterusnya. Jika kita arahkan pointer mouse ke tombol ini, keterangan
fungsi akan muncul di bawahnya.
Common berisi obyek yang paling sering dipakai seperti hyperlink, gambar, dan table.
Layout berisi obyek yang berkaitan dengan layout seperti tables, div tags, dan frames.
Forms berisi tombol untuk membuat form dan menambahkan elemen form.
HTML berisi macam-macam tag html seperti horizontal rules, head content, tables, frames, and
scripts.
Application berisi elemen dinamis seperti recordsets, repeated regions, and record insertion and
update forms. Elemen dan kode yang tampil akan disesuaikan dengan pilihan bahasa skrip yang
digunakan. (Misalnya PHP)
Flash elements untuk menyisipkan Macromedia Flash elements.
`The Document Toolbar
The Document toolbar memiliki tombol-tombol untuk mengatur perpindahan view dan perintah-
perintah yang umum.
14. Code, Split, Design, pilihan yang ditampilkan di windows dokumen, apakah Code, Design, atau
Split (keduanya).
Title, Judul halaman web yang sedang dikerjakan, akan muncul di browser bar.
Validate Markup, untuk memvalidasi markup di dokumen yang sedang dibuka
File Management, untuk mengupload halaman ke situs/remote
Priview di Browser, untuk membuka dokumen yang sedang dikerjakan ke browser
Opsi Tampilan, untuk mengatur setting tampilan
The Status Bar
15. Menyediakan informasi tambahan tentang halaman yang sedang dibuka/dikerjakan
Tag selector adalah salah satu tool yang paling sering dipakai dan sangat berguna untuk
melakukan select tag HTML di Windows Documen.
The Property inspector
The Property inspector menyediakan tool untuk memeriksa dan mengedit properti dari elemen
HTML, seperti teks atau obyek lain. Isi properti akan menyesuaikan dengan elemen yang sedang
dipilih, misalnya untuk elemen image maka properti yang akan muncul adalah file path to the
image, width dan height of the image, border, alt, align, dan lain-lain.
Setup Site dan File Proyek
Dalam Dreamwaeaver, terdapat fitur untuk mengelola proyek, disebut Site. Fitur ini bisa Anda pakai
atau bisa tidak. Fitur Site akan memudahkan dalam mengelola file, aset dan proses upload ke remote
server.
16. Membuat Halaman Web dengan
Dreamweaver
Mengkonfigurasi Site (Project)
Berikut adalah langkah-langkah menyiapkan Site nya.
1. Pilih menu Site ->New Site
2. Isi nama situs, misal: Jual Beli Laptop
18. 4. Klik Next
5. Pada pertanyaan server technology, pilih “Yes, I want to use a server technology”. Dalam
kursus ini, kita menggunakan server web lokal dari
19. XAMPP.
6. Klik Next
7. Pada pertanyaaan “.. work with your file: “, pilih: Edit and test locally. Kita akan
menyimpan file-file web di folder XAMPP dan langsung di tes di komputer ini.
8. Pada “Where on your computer do you want to store your files?”, isi dengan
: C:xampphtdocslaptop. Jika folder ini belum ada, buatlah terlebih dahulu dilokasi
21. 10. Untuk root site, isi dengan: http://localhost/laptop/
11. Klik tombol Test URL, jika sukses muncul pesan The URL Prefix test was successfull.
12. Klik OK, kemudian klik Next
22. 13. Pada pilihan “..do you copy it to another machine? …”, pilih: Pilihan No untuk sementara,
dapat diubah kemudian.
14. Klik Next.
24. 16. Setelah klik Done, nama situs dan lokasi folder akan muncul di panel
Files.
Setel Workspace Layout
25. 1. Pilih menu Window > Workspace Layout >
Coder
2. Pilihan ini akan memindahkan seluruh Panel ke-kiri. Silahkan coba Workspace Layout lain
yang lebih cocok bagi Anda.
Membuat Halaman Baru dan Menambahkan Teks
1. Pilih menu File, kemudian klik New
2. Pilih Category: Basic Page
3. Pilih Basic Page:HTML
27. 5. Klik Split supaya layar Code dan Visual tampil
keduanya.
28. 6. Ambil teks yang akan menjadi halaman web dengan copy.
7. Simpan kursor pada Windows Visual, kemudian klik menu Edit > Paste
8. Klik menu File > Save atau tombo Ctrl+S
9. Simpan dengan nama: asus-n550jv.html
10. Nama file akan muncul di bagian panel Files dan tab di atas Window Document
29. 11. Berikutnya, perhatikan Windows Code. Kita bisa lihat bahwa secara otomatis Dreamweaver akan
menambahkan tag HTML ke dalam teks. Hal tersebut sangat membantu, terutama bagi pemula yang
belum terlalu familiar dengan kode-kode HTML.
30. Memasang Tag Heading HTML
Pada dokument HTML, tag Heading, H1, H2, H3, dan seterusnya, dipakai untuk membuat head dari
dokumen atau paragraf.
1. Klik pada Window Code untuk menyimpan kursor pada teks, misalnya di tulisan ASUS
N550JV.
2. Klik Panel Properties
32. 4. Pada panel Properties, klik pada Format, pilih Heading
1
5. Lakukan penggantian tag, untuk beberapa kata berikut:
1. Incredible (semua), menjadi Heading 4
2. Beauty, Sound, Response, Touch, menjadi Heading 2
3. “Notebook hiburan …” , menjadi Heading 3
4. “Desain aluminium … “ , menjadi Heading 3
5. “SonicMaster Premium … “ menjadi Heading 3
6. “Teknologi dengan sentuhan … “ menjadi Heading 3
6. Untuk menampilkan hasilnya, klik pada Document Toolbar, pilih tombol Preview in Browser
33. Membuat Daftar (List) HTML
1. Blok teks mulai kalimat “Window 8 atau .. s/d …untuk kesan mewah”
35. 3. Perhatikan kode HTML yang baru dibuat
Untuk melihat hasil kerja kita sampai saat ini, buka alamat: http://localhost/laptop/asus.html atau dari
document
toolbar
36. Menambahkan Gambar Pada Halaman Web –
Tag <img>
Berikutnya kita akan menambahkan gambar pada halaman web tersebut.
1. Buatlah sebuah folder baru di dalam folder kerja. Caranya klik kanan di dalam panel Files,
kemudian pilih New Folder
2. Beri nama images. (Nama folder bebas, tapi umumnya menggunakan nama: assets atau
images).
37. 3. Tambahkan satu baris kosong dibawah judul dengan cara: posisikan kursor di ujung kanan
judul, kemudian klik tombol [Enter]
38. 4. Simpan cursor di baris yang baru, klik tombol Insert Image dari Insert Panel
5. Pilih gambar yang akan di masukan.
39. 6. Jika ada Dialog Box untuk mengcopy gambar ke Root Folder pilih Yes
7. Masukan di folder Images
8. Setelah dimasukan, akan ada dialog untuk memasukan Alternate Text dan Long descriction,
boleh diisi atau kosongkan saja
9. Setelah gambar berhasil dimasukan, resize gambar menjadi ukuran sekitar 300px. Caranya
pegang ujung gambar dengan mouse, sambil menekan tombol keyboard [Shift], drag mouse
untuk mengatur ukuran gambar agar sesuai.
40. 10. Ukuran gambar dapat dilihat di panel
Properties
11. Berikutnya kita akan meletakan gambar di sebelah kanan teks.
12. Klik gambar, pada panel Properties pilih drop-down Align menjadi Right
13. Tambahkan sisa gambar yang lain pada semua bagian halaman web ini.
41. 14. Tampilan akhir kira-kira akan seperti berikut:
15. Perhatikan bahwa kode untuk gambar dalam html adalah:
Menambahkan Tabel – tag <table><tr><td>
Tabel dalam halaman html, selain untuk menampilkan data dalam beluk tabulasi, juga dipakai untuk
layout. Baik untuk teks maupun gambar. Pada kursus web ini, kita akan menggunakan tabel untuk
menambahkan 3 gambar kecil dibawah teks paragraf pertama.
42. 1. Simpan cursor diatas tulisan Incredible Beauty
2. Klik tombol Table pada Panel Insert
3. Masukan Rows=1, Column=3, dan Header: None
43. 4. Setelah membuat table, masukan gambar di semua kolom. Caranya: klik kolom pertama pada
table, kemudian klik tombol Insert Image. Ikut prosedur yang sama seperti sebelumnya.
5. Tampilan setelah penambahan gambar di table
44. 6. Perhatikan bahwa kode untuk table adalah:
Menambahkan Link
Link akan ditambahkan dibawah daftar fitur N550 JV.
1. Posisikan kursor di bawah daftar, kemudian klik Enter untuk membuat baris baru
2. Tambahkan teks “Download Product Guide”, kemudian blok.
3. Pada Panel Properties, isi link dengan: http://www.asus.com/id/Static_WebPage/download/
Memakai Cascading Style Sheet (CSS) untuk
Style Web
Pada modul kursus web ini, kita masih akan melanjutkan menggunakan file latihan yang sama, yaitu
halaman asus.php.
Yang akan dibahas disini adalah:
Memasang CSS melalui Page Properties
Membuat 2 jenis identifier: tag dan class
Memasang syle pada object
45. Membuat style sheet menggunakan eksternal file
Menyetel Page Properties
Anda dapat menyetel style global (mempengaruhi situs secara keseluruhan) pada Page Properties
global, seperti default font, font size untuk seluruh teks, dan style lainnya disini. Untuk membukanya
klik Page Properties pada panel Properties
Page Properties dialog box memiliki 5 kategori terdaftar di kolom sebelah kiri: Appearance, Links,
Headings, Title/Encoding, and Tracing Image. Pada panel Properties, klik Page Properties.
Untuk menggunakan Page Properties, klik salah-satu kategori, kemudian lakukan perubahan yang
diinginkan, setelah itu klik Apply untuk melihat perubahan yang terjadi, atau klik OK untuk
menyimpan hasil perubahan.
Ubah page propertiesnya dengan data berikut;
Appeareance
Page Font: Verdana, Arial, Helvetica, sans-serif
Size:14
46. Links
Link Font: (Same as page font)
Link Color: #0033CC
Headings
Page Font: Georgia, Times New Roman, Times, serif
Title: Asus N550JV – Laptop Hiburan dengan 4 Speaker dan Layar Full HD IPS
Setelah disimpan, setelan Page Properties ini akan disimpan sebagai CSS. Buka/expand panel CSS
=> CSS Styles => All.
Buka Document Window : Code,kita bisa melihat kode yang ditambahkan oleh Page Properties,
dibagian <head> HTML.
47. Seperti kita lihat pada kode diatas, semua, thye yang dipasang berbasis pada tag: body, td, th, a, h1,
h1, h2, h3, h4, h5, h6.
Membuat Style berbasis Class
Setelah sebelumnya kita membuat style pada tag, berikutnya kita akan membuat style dengan
selector bukan tag. CSS memiliki 3 jenis selector: Tag, Class, Id (termasuk pseudo-class). Untuk
lebih lanjut tentang CSS, silahkan ikuti Modul Dasar Cascading Style Sheet.
Berikut adalah langkah-langkah membuat style berbasis class.
Membuat Syte Baru
1. Klik New CSS Rule Button pada .
2. New CSS Rule dialog muncul
3. Pilih Class, kemudian beri nama, misalnya rata-kanan.
4. Pilih opsi This document only
49. 8. Hasil style CSS ini bisa dilihat pada panel
CSS
9. Berikutnya adalah memasang sytle yang sudah dibuat pada halaman.
Memasang Style
1. Pilih teks yang akan dipasang style, milsanya pada paragraf ke dua, dengan cara melakukan
blok atau klik tombol tag selector diatas kotak Panel
50. Properties
2. Pada panel Properties, pilih Style:rata-
kanan.
Mengedit Styles
Anda dapat mengedit style yang sudah ada.
1. Dari panel CSS Styles, pilih Rules yang ingin diedit.
51. 2. Double klik nama
Rules
3. Lakukan perubahan yang diperlukan.
4. Kemudian klik OK
Membuat Eksternal Style Sheet
Menambahkan styles ke satu halaman web sangat mudah, tapi bukankah lebih baik jika kita membuat
style yang bisa dipakai di banyak halaman. Dengan eksternal Style Sheet hal tersebut menjadi
mungkin. Anda dapat mendefinisikan seluruh rule dalam sebuah file teks “.css”. Ketika Anda
membuat perubahan di eksternal style sheet, maka seluruh halaman yang me-referensi ke file ini akan
ikut berubah secara otomatis.
Untuk membuat external style sheet, ikuti langkah berikut:
52. 1. Klik New CSS Rule pada panel
CSS.
2. Isi dengan data berikut:
a. Selector Type: Class
b. Name: blue-subtitle
c. Define In: (New Style Sheet File)
d. Klik
OK
53. 3. Muncul dialog untuk nama file eksternal CSS, isi dengan nama: styles.css, klik OK
4. Beri nama: styles.css, klik Save
5. Pada Dialog CSS Rule Definition, isilah dengan data berikut:
a. Type > Style: italic
b. Type > Color: #003399
c. Klik OK
54. 6. Anda akan melihat sebuah file baru, yaitu: styles.css muncul di Panel
File
7. Anda dapat double-klik untuk melihat isinya .
8. Berikutnya kita akan memasang class .blue-subtitle pada halaman web
55. 9. Caranya, blok tulisan dibawah Judul, kemudian pasang style dengan memilihnya dari Panel
Properties.
10. Hasilnya akan tampak seperti ini.
56. Baik, itulah tutorial dasar menggunakan Dreamweaver versi-8 untuk membuat halaman web secara
mudah. Dalam tutorial yang akan datang, kita akan bahas bahas bagaimana menggunakan fitur-fitur
untuk membuat sebuah web dinamis. Tentunya dengan menggunakan tools yang lebih baru, versi
CS-5 atau versi CS-6
Andaakan dibawapadahalamanSummary.kursuswebhalamansummary
SetelahklikDone,namasitusdanlokasi folderakanmuncul di panel Files. kursuswebpanel file
Setel Workspace Layout
PilihmenuWindow>Workspace Layout> Coder kursusweb workspace layoutcoder
Pilihanini akanmemindahkanseluruhPanelke-kiri.SilahkancobaWorkspace Layoutlainyanglebih
cocok bagi Anda.
MembuatHalaman Baru dan MenambahkanTeks
1. PilihmenuFile,kemudianklikNew
2. PilihCategory:BasicPage
3. PilihBasicPage:HTML
4. Kliktombol Createkursuswebhalamanbaru
5. KlikSplitsupayalayarCode dan Visual tampil keduanya. kursuswebsplit
6. Ambil teksyangakan menjadi halamanwebdengancopy.kursuswebcopyteks
7. Simpankursorpada Windows Visual,kemudianklikmenuEdit>Paste
8. KlikmenuFile >Save atau tomboCtrl+S
57. 9. Simpandengannama:asus-n550jv.html
10. Namafile akanmuncul di bagianpanel Filesdantabdi atas Window Document
kursuswebpanel file namafile
11. Berikutnya,perhatikanWindowsCode.KitabisalihatbahwasecaraotomatisDreamweaverakan
menambahkantagHTML ke dalam teks.Hal tersebutsangatmembantu,terutamabagi pemulayang
belumterlalufamiliardengankode-kodeHTML.
kursuswebwindowkode
MemasangTag HeadingHTML
Pada dokumentHTML,tag Heading,H1,H2, H3, dan seterusnya,dipakai untukmembuatheaddari
dokumenatauparagraf.
KlikpadaWindowCode untukmenyimpankursorpadateks,misalnyadi tulisanASUSN550JV.
KlikPanel Properties
Kliktag inspektor<p> kursuswebtag heading
Pada panel Properties,klikpadaFormat,pilihHeading1kursuswebheading1
Lakukanpenggantiantag,untukbeberapakataberikut:
Incredible (semua),menjadi Heading4
Beauty,Sound,Response,Touch,menjadiHeading2
“Notebookhiburan…”, menjadi Heading3
“Desainaluminium…“ , menjadi Heading3
“SonicMasterPremium…“ menjadi Heading3
“Teknologi dengansentuhan…“ menjadi Heading3
58. Untuk menampilkanhasilnya,klikpadaDocumentToolbar,pilihtombol Preview inBrowserkursusweb
documenttoolbarpreview
kursuswebpreviewbrowser
MembuatDaftar (List) HTML
Blokteksmulai kalimat“Window8atau .. s/d…untuk kesanmewah”
Kliktombol UnorderedListpadapanel Propertieskursuswebunorderedlist
Perhatikankode HTML yangbaru dibuatkursuswebkode html
Untuk melihathasil kerjakitasampai saatini,bukaalamat:http://localhost/laptop/asus.htmlataudari
documenttoolbarkursuswebmelihathasil
MenambahkanGambar PadaHalaman Web – Tag <img>
Berikutnyakitaakanmenambahkangambarpadahalamanwebtersebut.
Buatlahsebuahfolderbarudi dalamfolderkerja.Caranyaklikkanandi dalampanel Files,kemudianpilih
NewFolderkursuswebmembuatfolderbaru
Beri nama images.(Namafolderbebas,tapi umumnyamenggunakannama:assetsatauimages).
Tambahkansatu bariskosongdibawahjudul dengancara:posisikankursordi ujungkananjudul,
kemudiankliktombol[Enter]kursuswebmenyisipkangambar
Simpancursor di barisyang baru,kliktombol InsertImage dari Insert Panelkursuswebinsert
imagekursuswebpilihgambar
Pilihgambaryangakan di masukan.
Jikaada DialogBox untukmengcopygambarke RootFolderpilihYeskursuswebcopyas
Masukan di folderImages
Setelahdimasukan,akanadadialoguntukmemasukanAlternate TextdanLongdescriction,bolehdiisi
atau kosongkansaja
59. Setelahgambarberhasil dimasukan,resize gambarmenjadiukuransekitar300px.Caranyapegangujung
gambar denganmouse,sambil menekantombolkeyboard[Shift],dragmouse untukmengaturukuran
gambar agar sesuai.kursuswebresize image
Ukuran gambar dapat dilihatdi panel Properties kursuswebpanel properties
Berikutnyakitaakanmeletakangambardi sebelahkananteks.
Klikgambar,pada panel Propertiespilihdrop-downAlignmenjadi Rightkursuswebmeletakangambardi
kanan
Tambahkansisagambar yang lainpadasemuabagianhalamanwebini.
Tampilanakhirkira-kiraakanseperti berikut:kursuswebtampilanakhir
Perhatikanbahwakode untukgambardalamhtml adalah:kursuswebkode gambar
MenambahkanTabel – tag <table><tr><td>
Tabel dalamhalamanhtml,selainuntukmenampilkandatadalambeluktabulasi,jugadipakai untuk
layout.Baikuntukteksmaupungambar.Pada kursuswebini,kitaakanmenggunakantabel untuk
menambahkan3gambar kecil dibawahteksparagraf pertama.
Simpancursor diatastulisanIncredible Beauty
Kliktombol Table padaPanel Insertkursuswebtable panelinsert
Masukan Rows=1,Column=3,dan Header:None
Setelahmembuattable,masukangambardi semuakolom.Caranya:klikkolompertamapadatable,
kemudiankliktombolInsertImage.Ikutproseduryangsamaseperti sebelumnya.kursuswebinsertimg
Tampilansetelahpenambahangambardi tablekursuswebtampilan
Perhatikanbahwakode untuktable adalah:kursuswebkode table
MenambahkanLink
60. Linkakan ditambahkandibawahdaftarfiturN550 JV.
Posisikankursordi bawahdaftar,kemudianklikEnteruntukmembuatbarisbaru
Tambahkanteks“DownloadProductGuide”,kemudianblok.
Pada Panel Properties,isi linkdengan: http://www.asus.com/id/Static_WebPage/download/kursusweb
panel propertiesisi link
Memakai CascadingStyle Sheet(CSS) untukStyleWeb
Pada modul kursuswebini,kitamasihakanmelanjutkanmenggunakanfile latihanyangsama,yaitu
halamanasus.php.
Yang akan dibahasdisini adalah:
MemasangCSS melalui Page Properties
Membuat2 jenisidentifier:tagdan class
Memasangsyle padaobject
Membuatstyle sheetmenggunakaneksternal file
Menyetel Page Properties
Andadapat menyetel style global(mempengaruhi situssecarakeseluruhan) padaPage Properties
global,seperti defaultfont,fontsize untukseluruhteks,danstyle lainnyadisini.Untukmembukanyaklik
Page Propertiespadapanel Propertieskursuswebpage properties
Page Propertiesdialogbox memiliki 5kategori terdaftardi kolomsebelahkiri:Appearance,Links,
Headings,Title/Encoding,andTracingImage.Padapanel Properties,klikPage Properties.kursuswebhal
page properties
61. Untuk menggunakanPage Properties,kliksalah-satukategori,kemudianlakukanperubahanyang
diinginkan,setelahituklikApplyuntukmelihatperubahanyangterjadi,atauklikOKuntukmenyimpan
hasil perubahan.
Ubah page propertiesnyadengandataberikut;
Appeareance
Page Font:Verdana,Arial,Helvetica,sans-serif
Size:14
Links
LinkFont: (Same aspage font)
LinkColor:#0033CC
Headings
Page Font:Georgia,TimesNewRoman,Times,serif
Title:AsusN550JV – Laptop Hiburandengan4 SpeakerdanLayar Full HD IPS
Setelahdisimpan,setelanPage Propertiesini akandisimpan sebagai CSS.Buka/expandpanel CSS=>CSS
Styles=> All.kursuswebcss
Buka DocumentWindow:Code,kitabisamelihatkode yangditambahkanolehPage Properties,
dibagian<head>HTML.kursus webdocwindow code
Seperti kitalihatpadakode diatas,semua, thye yangdipasangberbasispadatag:body,td,th,a, h1, h1,
h2, h3, h4, h5, h6.
MembuatStyle berbasisClass
62. Setelahsebelumnyakitamembuatstylepadatag,berikutnyakitaakanmembuatstyle denganselector
bukantag. CSS memiliki 3jenisselector:Tag,Class,Id(termasukpseudo-class).Untuklebihlanjut
tentangCSS,silahkanikuti Modul DasarCascadingStyle Sheet.
Berikutadalahlangkah-langkahmembuatstyle berbasisclass.
MembuatSyte Baru
KlikNewCSSRule Buttonpada.
kursuswebCSSSytlespanel
2. NewCSS Rule dialogmuncul
3. PilihClass,kemudianberi nama,misalnyarata-kanan.
4. Pilihopsi Thisdocumentonly
kursuswebcss rule
5. KemudianklikOK. kursuswebcss rule block
6. Pada Category:Block,pilihTextAlign:Justify
7. KlikOK.
63. 8. Hasil style CSSini bisadilihatpadapanel CSS kursuswebpanel
css
9. Berikutnyaadalahmemasangsytle yangsudahdibuatpadahalaman.
MemasangStyle
Pilihteksyangakandipasangstyle,milsanyapadaparagraf ke dua, dengancara melakukanblokatau
kliktombol tagselectordiataskotakPanel Properties kursuswebpilihteks
Pada panel Properties,pilihStyle:rata-kanan. kursuswebstyle rata kanan
MengeditStyles
Andadapat mengeditstyleyangsudahada.
Dari panel CSSStyles,pilihRulesyangingindiedit.
Double kliknamaRules kursuswebrules
Lakukanperubahanyangdiperlukan.
KemudianklikOK
MembuatEksternal Style Sheet
Menambahkanstyleske satuhalamanwebsangatmudah,tapi bukankahlebihbaikjikakitamembuat
style yangbisadipakai di banyakhalaman.Dengan eksternal StyleSheethal tersebutmenjadi mungkin.
Andadapat mendefinisikanseluruhrule dalamsebuahfile teks“.css”.KetikaAndamembuatperubahan
di eksternal style sheet,makaseluruhhalamanyangme-referensi ke file iniakanikutberubahsecara
otomatis.
64. Untuk membuatexternal style sheet,ikuti langkahberikut:
KlikNewCSSRule padapanel CSS. kursuswebnew css
Isi dengandata berikut:
SelectorType:Class
Name:blue-subtitle
Define In:(NewStyleSheetFile)
KlikOK kursuswebdefine in
3. Muncul dialoguntuknamafile eksternal CSS,isi dengannama:styles.css,klikOKkursuswebnamafile
css
4. Beri nama:styles.css,klikSave
5. Pada DialogCSS Rule Definition,isilahdengandataberikut:
Type > Style:italic
Type > Color:#003399
KlikOK
6. Anda akanmelihatsebuahfile baru,yaitu:styles.cssmuncul di Panel File kursusweb
panel file css
7. Anda dapatdouble-klikuntukmelihatisinya .kursuswebisi panel
file
