Tutorial Cara Membuat Website Menggunakan Dreamweaver CC Part 2

Sambungan dari Tutorial Cara Membuat Website Menggunakan Dreamweaver CC Part 1

1. Delete kalimat "Content for id "hero" Goes Here"
2. Klik Insert, pilih Common  
3. Buat dulu folder images pada folder yang dibuat di desktop, dalam hal ini saya buat folder images di dalam folder blog wiwin di desktop
4. Siapkan gambar dengan ukuran 1000 x 547 pixel lalu simpan di dalam folder images.
5. Pilih insert >> Common >> Image >> Image, pilih gambar yang tadi disimpan di folder images.
6. Menuju menu properties dibagian bawah, delete ukuran gambar tersebut. lihat pada gambar dibawah
   
7. Tempatkan kursor pada artikel paragrap 2 di bagian mana saja, lalu klik <p>. Maka paragrap 2 akan di highlight lalu tekan tanda panah kanan pada keyboard, maka kursor akan berada di akhir paragrap 2. 
   
8. Menuju menu di sebelah kanan Insert >> Structure >> Figure
9. Delete kalimat pertama This is the content for Layout Figure Tag
   
10. Siapkan gambar ukuran 400 x 256 pixel atau terserah ukurannya berapa lalu simpan dalam folder images. Kembali ke menu di sebelah kanan yaitu  Insert >> Common >> Image >> Image, pilih gambar 400x256. Hasilnya seperti ini 
    
11.  Gantilah kalimat This is the caption for Layout Figure Tag dibawah gambar dengan kalimat apa saja yang Anda mau.
12. Kembali ke list menu di atas (list menu web yang saya buat: Home, Tentang Win's Blog, Privacy policy, dan Resep). Highlight Home lalu ke Properties, dibagian link, klik icon folder (Browse for File) pilih index.html. Lalu highlight Tentang Win's Blog lalu ke Properties, isi link dengan #. Begitu juga dengan Privacy Policy dan Resep, highlight dulu lalu isi bagian link dengan #. Kenapa diisi #?... Karena belum disiapkan urlnya atau belum siap artikelnya... he he

    

    Link untuk Home

13. Pada menu Code-Split-Design-Live di bagian atas kiri, klik Design.
14. Lalu menuju menu Compact di kanan atas. Klik Compact lalu pilih Expanded.
    
15. Di menu Insert dan Files. Pilihlah Files >> CSS Designer >> klik tanda plus lalu pilih Attach Existing CSS File
    
    .
16. bersambung

Tutorial Cara Membuat Website Menggunakan Dreamweaver CC Part 1

1. Buat folder baru dahulu, misalkan disimpan di desktop (misalkan nama folder tersebut: blog wiwin)
2. Jalankan Dreamweaver CC
3. Lalu klik site >> new site, dibagian Advanced Settings, isi Site Name dengan nama site yang anda inginkan, dalam hal ini saya beri nama Blog Wiwin, lalu pada bagian Local Site Folder klik icon folder disebelah kanan lalu pilih folder yang barusan dibuat, kalau saya tentu memilih folder blog wiwin. Lalu save.
    
   
   
   
   
    
   
   
   
   
4. Setelah itu Create New >> HTML
   
   
    
   
   
   
5. Setelah terbuka, save terlebih dahulu dengan nama index.html
    
   
   
    
   
   
6. Klik split untuk menampilkan struktur htmlnya (disebelah kiri ) dan hasilnya / preview ( disebelah kanan )
   
7. Isi title dengan judul yang Anda inginkan, kalau saya misalkan titlenya Tutorial Dreamweaver CC 2014, maka ketika kursor diklik disembarang tempat, title di struktur html sebelah kiri akan berubah sesuai dengan title yang kita berikan
   
8. Klik Insert disebelah kanan, pilih Structure, lalu pilih Div, maka akan muncul kotak Insert Div, isi bagian ID dengan wrapper, klik OK
    
   
   
   
9.  Kita tidak memerlukan bacaan "Content for  id "wrapper" Goes Here" jadi didelete saja.
10. Klik Header disebelah kanan, maka akan muncul kotak Insert Header, lalu isi ID dengan top, klik OK                                                                          
11.   Kita tidak memerlukan kata-kata "Content for  id "top" Goes Here", jadi didelete saja dan diganti dengan judul untuk header yang kita inginkan, misalkan kalau saya akan kasih judul diheader Tutorial Dreamweaver CC 
    
12. Pilih Format >> Heading 1
    
13. Selanjutnya klik Navigation dimenu Insert structure sebelah kanan, maka akan muncul kotak Insert Navigation, lalu  pada bagian insert pilih Before end of tag, sebelah kanannya pilih <header id="top">, ID diisi mainnav, klik OK
    
     
    
    
    
    
    
14.  Klik Unordered List pada menu Insert Structure disebelah kanan, lalu ganti kata "Content for  id "mainnav" Goes Here" dengan nama menu yang kita inginkan, kalau saya misalkan Home, selanjutnya menu Tentang Blog Wiwin, Privacy Policy, Resep 
     
    
    
    
    
    
15.   Pada menu Insert Structure, pilih Div, akan muncul kotak Insert Div, lalu bagian Insert pilih After tag, sebelah kanannya pilih <header id="top">, ID diisi hero, lalu klik OK
    
16. Pada menu Insert Structure, klik Article lalu akan muncul kotak Insert Article, pada insert  pilih After tag, sebelah kanannya pilih <div id="hero">, ID diisi main, klik OK.
    
    
17. Pada menu Insert Structure, klik Aside, lalu pada bagian Insert pilih After tag, <article id="main">, ID diisi sidebar, lalu klik OK.
    
18. Pada menu Insert Structure, klik Footer, lalu pilih After tag,  <aside id="sidebar">, lalu klik OK. 
    
    
19. Buat dulu folder content di dalam folder yang kita buat pertama kali, dalam hal ini saya buat folder content tersebut didalam folder blog wiwin didesktop.
    
20. Siapkan artikel yang ingin anda posting diwebsite anda dalam microsoft word, lalu save dengan nama content dalam format .rtf dalam folder content 
    
21. Delete terlebih dahulu kalimat "Content for  id "main" Goes Here" lalu copy artikel yang tadi disiapkan, lalu kembali ke dreamweaver.  lalu klik menu edit >> paste special dibagian atas, pilih Text with structure (paragraphs, lists, tables, etc.), klik OK.
    
     
    
    
    
    eng ing eng... hasilnya seperti ini
    
     
    
22. Bersambung....