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....