Tutorial project akhir web meyta febriyani

2,722 views
2,578 views

Published on

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,722
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Tutorial project akhir web meyta febriyani

  1. 1. LAPORAN PROJECT AKHIR“ WEBEDIT “OlehMEYTA FEBRIYANINISN : 9976896353Kelas X RPL 2SMK NEGERI 1 DEPOK2013
  2. 2. KATA PENGANTARPuji dan Syukur Penulis Panjatkat ke Hadirat Tuhan Yang Maha Esa karena berkatlimpahan Rahmat dan Karunia-Nya sehingga saya dapat menyusun tutorialini.Tutorial ini membahas tentang “ pembuatan web dengan dreaweaver cs5”.Dalam penyusuna makalah ini, banyak mendapat tantangan dan hambatan akantetapi dengan bantuan dari berbagai pihak tantangan itu bisa teratasi . Olehnya itu ,saya sebgai penulis mengucapkan terimakasih yang sebesar-besarnya kepadaTuhan Yang Maha Esa yang telah memberikan kemudahan dalam penyusunanmakalah ini.Menyadari bahwa makalah ini masih jauh dari kesempurnaan baik dari bentukpenyusunan maupun materinya , penulis mohon maaf karena penulis sendiri dalamtahap belajar.Dengan demikian , tak lupa saya sebagai penulis mengucapkan banyak terimakasihkepada para pembaca.Semoga makalh ini bermanfaat bagi para pembacanya.Penyusuni
  3. 3. DAFTAR ISIKata pengantar ..................................................................... iBab I .................................................................................... 1Pengenalan Software dreamweaver Cs5 ............................. 11.1 Dreamweaver ...............................................................11.2 PengenalanElemenRuangkerjaDreamweavercs5 ......... ..3Bab II .......................................................................................... 6I . Langkah-langkah bekerja dengan site ..................................... 62.1 membuat site baru .................................................................. 62.2 membuat folder image ............................................................ 82.3 menentukan alamat testing server ......................................... 112.4 menyimpan dokumen halaman web ......................................13II membuat dan mengolah halaman web ........................... 15II.1 membuat table ................................................................ 15II.2 mengolah kerangka menjadi seperti sebuah web.............17
  4. 4. 1.1 mengatur halaman menu home ..................................... 171.2 mengatur halaman menu profile .................................. 181.3 mengatur halaman menu galery ................................... 191.4 mengatur halaman menu comment ............................. 20III memberi link pada setiap menu ................................. 22Bab III ...................................................................................24Penutup ................................................................................. 24BAB 1Pengenalan Software Dreamweaver1.1 Dreamweaver cs5Dreamweaver cs5 adalah versi terbaru dari Dreamweaver yang merupakanbagian dari Adobe Creative Suite 5.Dreamweaver juga merupakan aplikasiyang digunakan sebagai HTML editor professional untuk mendesign websecara visual.Aplikasi ini juga biasa di kenal dengan istilah WYSIWYG(What See You Is What You Get) , yang intinya adalah anda tidak harusberurusan dengan tag-tag HTML untuk membuat sebuah site dan dapatmelihat designnya secara langsung.Selain itu , ada kemampuan Dreamweaver yaitu dapat berinteraksi dengandengan beberapa bahasa pemrograman seperti PHP, ASP, Java Script, danyang lainnya juga memberikan fasilitas maksimal kepada desainer webdengan menyertakan bahasa pemrograman di dalamnya.Cara menginstal Adobe dreamweaver Cs 51. Buka folder adobe dreamweaver Cs5 lalu klik setup dan akan menginstalseperti ini :
  5. 5. 2.Klik Accept13. Masukkan serial number lalu creat dan akan menginstal sendiriSelesai
  6. 6. Untuk menjalankan Adobe Dreamweaver cs5 , klik tombol Start yang beradadi sudut kiri bawah lembar kerja windows , pilih menu Programs  AdobeMaster Collection cs5  Adobe Dreamweaver cs5 .Tampilan awal AdobeDreamweaver cs5 terlihat seperti pada gambar berikut:Gambar 1.1 Tampilan awal Dreamweaver cs521.2 Pengenalan Elemen Ruang kerja Dreamweaver cs5A B C D E F G
  7. 7. H I JGambar 1.2 Tampilan ruang kerja Adobe Dreamweaver cs5 dan elemen-elemennya• Document Title (A) , menunjukkan nama dokumen atau file yang aktif atauterbuka.• Aplication Bar (B) , berada di bagian paling atas jendela aplikasiDreamweaver cs5. Baris ini berisi tombol workspace (workspaceswitcher) ,CS Live , menu , dan aplikasi lainnya.Gambar 1.3 Tampilan Aplication Bar• Toolbar Application ( C ) , berisi tombol-tombol yang digunakan untukmengubah tampilan jendela dokumen , sebagai contoh tampilan design atautampilan code. Juga dapat di gunakan untukoperasi-operasi umum.3
  8. 8. A B C D E F G H I J K LGambar 1.4 Tampilan toolbar DokumenBerikut keterangan fungsi tombol dalam toolbar Document:Tombol Keterangan[ A ] Show Code View Untuk mengubah tampilan jendela dokumendalam mode pengetikan kode HTML[ B ] Show Code and DesignViewUntuk mengubah tampilan jendela dokumenantara tampilan Code dan Design[ C ] Show Design view Untuk mengubah tampilan jendela dokumenmenjadi tampilan layout design . Apa yanganda lihat pada tampilan ini akan samaseperti tampilan pada jendela browser.[ D ] Live Code View Menampilkan dan menguji kode, aktual yangdigunakan oleh browser untuk menjalankanhalaman[ E ] Check BrowserCompatibilityUntuk melakukan pengecekkan kesalahanpada dokumen web[ F ] Live View Untuk mwlihat dan menguji hasil akhir padadesign halaman yang anda buat[ G ] CSS Inspect Mode Untuk mengecek CSS masing-masing bagiandesign halaman saat dalam tampilan LiveView[ H ] Preview and Debug inBrowserUntuk melihat hasil dalam browser yang dikenali oleh Dreamweaver dan digunakanuntuk mencari kesalahan script dalamdokumen[ I ] Visual Aids Menampilkan Visual Aids yang berbedauntuk design halaman web[ J ] Refresh Design View Untuk melakukan pembaharuan terhadapperubahan isi website Anda[ K ] Document Title Untuk memberikan judul pada dokumenhalaman web[ L ] File Management Untuk menampilkan pop-up menupengolahan file , diantaranya proses uploaddan download file4
  9. 9. • Toolbar Browser Navigator ( D ) , adalah toolbar baru dalam Dreamweavercs5. Kegunaannya sama seperti saat anda menggunakkan toolbar Addressdalam jendela browser.• Workspace Switcher ( F ), digunakan untuk mengubah tampilan ruang kerja(workspace) Dreamweaver cs5.• Panel group ( G ), adalah kumpulan panel yang saling berkaitan , panel-panel ini di kelompokkan pada judul- judul tertentu sesuai fungsinya.• Tag Selector ( H ) , berada di pojok kiri bawah jendela dokumen , satu barisdengan status bar.bagian ini menampilkan hirarki pekerjaan yang sedangterpilih pada jendela dokumen , dapat juga di gunakan untuk memilih objekpada jendela design berdasarkan jenis atau kategori objek tersebut.• Property Inspector ( I ), biasa juga dengan panel properties. Digunkan untukmelihat dan mengubah berbagai property objek atau teks pada jendeladesign.• Status Bar ( J ), berisi informasi presentasi besarnya tampilan, jenis pointermouse, dan lembar kerja
  10. 10. 5BAB IIILangkah- Langkah Bekerja dengan Site2.1 Membuat Site BaruLangkah site dalam Dreamweaver cs5 lebih cepat dan sederhana dariversi sebelumnya, bahkan saat anda bekerja dengan beberapa serveratau jaringan site.Langkah untuk membuat site baru adalah sebagai berikut :1. Pilih salah satu langkah berikut untuk menampilkan kotak dialogSite Setup for Unnamed Site :• Pilih menu Site  New Sites• Pilih Dreamweaver Site pada kontak dialog WelcomeScreen , pada saat pertama kali menjalankan Dreamweavercs5.• Klik tombol Site  New Site.
  11. 11. 2. Selanjutnya akan tampil kontak dialog Site Setup for UnnamedSite.Pada kotak dialog ini, Anda di minta untuk mengetikkan namasite di dalam kotak Site Name. Sebagai contoh Anda ketikkan“webedit”Gambar 1.5 Kotak dialog Site Setup for unnamed Site – emong63. Langkah selanjutnya adalah menentukan direktori site padacomputer lokal.Klik ikon Browser for Folder di sebelah kanankotak Local Site Folder untuk menampilkan kotak dialog ChooseRoot Folder. Perhatikan gambar 1.64. Pilih folder lokasi penyimpanan file site di dalam direktori lokal ,sebagai contoh pilih folder emong di dalam drive D:. Jika foldertersebut belum ada , klik tombol Creat New Folder di bagianatas kotak dialog untuk membuat folder baru dengan nama
  12. 12. webedit.Gambar 1.7 Kotak dialog Choose Root Folder5. Setelah memilih folder , klik tombol Open kemudian lanjutkandengan klik tombol Select dalam kotak dialog Choose Root Folder.6. Klik tombol Save untuk mengakhiri langkah pembuatanSite.Sampai di sini maka langkah pembuatan site pertama andadalam Dreamweaver cs5 telah selesai .Gambar 1.8 Kotak dialog Choose Root Folder77. Setelah menekan tombol Save , maka site anda akan ditampilkan didalam panel Files. Perhatikan hasilnya seperti pada gambar 1.9Untuk sementara site anda masih kosong karena belum pernahmelakukan penyimpanan file di dalamnya.
  13. 13. Gambar 1.9 panel Files dengan nama site yang baru di buat2.2Membuat Folder ImagesFolder images adalah lokasi yang anda buat sebagai tempat penyimpananseluruh image atau gambar pendukung site anda di dalam direktori.Berikut ini adalah langkah-langkah untuk membuat folder image:1. Pilih menu Site  Manage Sites2. Pilih nama site yang akan di buat lokasi folder image-nya , kemudianklik tombol Edit. Perhatikan gambar 1.10Gambar 1.10 Panel files dengan nama site yang baru di buat
  14. 14. 83.Setelah itu muncul kotak dialog Site Setup for webedit.Gambar 1.11 kotak dialog Site Setup for emong4.Di kotak dialog tersebut dapat mengganti nama site (site name )dan lokasi folder lokal penyimpanan site (Local Site Folder )5.Untuk menentukan lokasi image, klik kategori Advance Settings Local Info.Gambar 1.12 kotak dialog Site Setup for emong-Advance Settings-Local Info
  15. 15. 96. Klik ikon browse for folder untuk mencari folder lokasi images di dalamdirektori lokal , sehingga tampil kotak dialog berikut :Gambar 1.13 kotak dialog Choose images folder7. Sebelumnya buat folder dengan nama “editan gambar” di folderwebedit,8. Setelah itu klik folder images lalu klik open , selanjutnya kliktombol select. Seperti di bawah ini :
  16. 16. Gambar 1.14 kotak dialog Choose images folder109.Lalu Klik tombol Save, Kemudian klik tombol Done.Gambar 1.15 kotak dialog Site Setup for emong-Advance Settings-Local InfoHasil membuat folder images akan tampil dalam panel files.Gambar 1.16 hasil membuat folder images di dalam panel files2.3 Menentukan Alamat Testing Server
  17. 17. Langkah untuk menentukan alamat testing server dari site adalah :1. Klik menu Site , kemudian klik Manage Site  Klik Site yangakan di Edit  Edit .112. Akan muncul gambar seperti ini :Gambar 1.17 kotak dialog Site setup for emong –Servers
  18. 18. Sebelumnya klik kategori Servers.4.Klik menu ( + ) di bagian bawah daftar nama server sehinggakotakdialog Site Setup for emong akan di ubah tampilannya sebagaiberikut :Gambar 1.18 kotak dialog Site Setup-servers-local/Network5. Isikan kotak dialog seperti gambar 1.186. Setelah memasukkan beberapa informasi dari testing anda ,akhiridengan menekan tombol Save . Dan hasilnya seperti gambar bawahini :12Gambar 1.19 kotak dialog Choose Folder Site Setup-Servers dengan 1 nama testingserver
  19. 19. 7.Di bagian kolom Testing , pastikan anda sudah memberi tandacentang seperti gambar 1.19.2.4 Menyimpan Dokumen halaman WebLangkah untuk menyimpan dokumen halaman web adalah :1. Pilih menu File  Save As atau klik tombol Save , pada baris toolbarStandard.2. Berikutnya akan tampil kotak dialog Save As seperti di bawah ini :Gambar 1.20 Kotak dialog Save As133.Ketikan nama file pada File Name , tekan tombol Save . Seperti Contoh ini :
  20. 20. Gambar 1.21 Kotak Dialog Save As3. Setelah proses penyompanan selesai ,perhatikan pada panel Files akanditambahkan cabang file di bawah folder site.Gambar 1.22 Hasil penyimpanan halaman baru pada panel files14
  21. 21. IIMembuat dan mengolah halaman WebII.1 Membuat TabelLangkah untuk membuat kerangka adalah :1. Letakkan kursor pada lembar kerja jendela dokumen .2. Pilih perintah menu Insert  Table atau klik tombol Insert Table di dalampanel Insert kategori Layout.3. Berikutnya tampil kotak dialog Table seperti pada gambar 1.23.Gambar 1.23 Kotak dialog table4. Tentukan jumlah kolom dan baris dengan cara memasukkan angka kotakteks yang sudah disediakan.5. Kita akan buat beberapa Tabel secara satu persatu-Tabel untuk Banner ( isikan Coloumns = 1 ,rows kosong , table width1000, border thickness = kosong lalu klik OK )-Tabel untuk menu ( isikan Coloumn = 4 ,rows kosong, table width 500,border thickness = 2 lalu klik OK)-Tabel untuk Body (isikan Coloumns=1 ,rows kosong , table width 900,border thickness = kosong lalu klik OK )-Tabel untuk background categori( isikan Coloums = 1, row kosong, tablewidht 300, border thickness = 0 lalu klik OK)
  22. 22. 15-Tabel untuk Categori (taruh cursor di table background dan isikan Coloums= 1 , rows kosong , table width 300 ,border thickness = 0 lalu klik OK )Kerangka akan menjadi seperti ini :II.2 Mengolah Kerangka menjadi seperti sebuah Web1.1Mengolah kerangka menu HOME :1. Mengatur background dengan cara arahkan kursor ke arena luar tablelalu klik page propertis  lalu lihat background image lalu klik menuBrowser  dan pilih gambar dan klik gambar yang akan dijadikanbackground  klik OK .2. Dari kerangka tersebut bisa kita masukkan bannerKlik menu Insert  image  klik gambar yang akan dijadikan banner klik OK .3. Di table menu keikan nama menu seperti HOME, PROFILE , GALERY ,COMMENT. Setelah itu atur warna background table menu dengan carataruh kursor di dalam table menu  klik menu Bg di bagian Pageproperties .4. Mewarnai background body sama caranya dengan mewarnai Backgroundmenu.5. Mengatur kerangka Categori , bisa diisikan nama CATEGORI :Mau di tambahkan menu tambahan seperti :- Editan Alam
  23. 23. - Editan Kartun- Editan Iluminati- Editan WOW6. Di background Categori bisa dimasukkan kata-kata , dan di halamanHOME kita bisa masukkan menu tambahan lainnya yaitu Photoshop danCorel draw menu ini berbentuk gambar , cara memasikun gambarnya samaseperti memasukkan banner.Setelah semuanya selesai bisa di save caranya klik menu File  save as (karna memakai xammp jadi save di folder xammp ) jadi klik local disk D:(karna folder xammp saya di local disk D:) pilih folder htdocs  pilihnama foldernya webedit  creat nama filenya seperti home.html (haruspakai .html agar bisa koneksi ke internet)  klik selesai.17Kerangka Halaman HOME yang sudah jadi seperti ini:Ini bisa di masukkan kata-kata atau gambar sesuai keinginan.
  24. 24. 1.2Mengatur Halaman menu ProfileDi menu profile tidak perlu mengulang lagi membuat kerangka dari awalcukup apus isi dari body home dan di isikan dengan Profile yang akan kalianisi. Bisa langsung di save as , save-nya sama seperti home (namaun creatname file – nya profile.html )Dan menu profile bisa di lihat seperti ini :
  25. 25. 181.3Mengatur halaman menu GALERYSama dengan mengatur menu profile hanya saja bodynya bukan di isidengan profile tetapi dengan kumpulan gambar yang akan di perlihatkan.Setelah mengatur semuanya di save dengan nama galery.htmlAkan tampil seperti ini :
  26. 26. 191.4Mengolah Halaman menu CommentNah disini butuh ekstra ketelitian dan ini juga gak sembarangan karna kitamenggunakan database .Langkah – langkahnya :Membuat database dengan cara , buka google chrome klik urlhttp://localhost/phpmyadmin.comLalu klik menu database (untuk membuat database baru )  masukkannama databse  creat.Setelah itu klik database yang sudah di buat dan sekarang buat table untukdatabase  tulis nama tablenya  masukkan kolomnya (4)klik Go isikan kolomnya ( kolom 1 “ id , int , 50, autoncremment (untuk primary key) “kolom ke 2 “ nama, varchar , 100, “ kolom ke 3 “email, varchar, 100”kolom ke 4” komentar, text, kosongkan (tidak terhingga ) ,” ) setelah selesaiklik Simpan .Selesai buat database kita langsung ke dreamweaver .Pertama buat “ add “1. Klik menu file  new pilih Php  lalu kita langsung masuk ke Code masukkan code seperti gambar di bawah ini :
  27. 27. 2. Lalu save klik menu file  save as  klik folder xammp  klik folderhtdocts  klik folder webedit  buat folder baru dan di namakan “coment “  create name file “ add.php “lalu klik SAVE.Kedua buat “ koneksi “1. Klik menu file  new pilih Php  lalu kita langsung masuk ke Code masukkan code seperti gambar di bawah ini :2. Lalu save klik menu file  save as  klik folder xammp  klik folderhtdocts  klik folder webedit  buat folder baru dan di namakan “coment “  create name file “ koneksi.php “lalu klik SAVE.Ketiga buat “ index”1. Klik menu file  new pilih Php klik designDi sini kita bisa design comment dengan menambahkan banner , dantable khusus komentar dengan cara :-Klik menu insert  form  form (untuk menambahkan form biarkomentar bisa dijalankan .-Klik menu insert  table  isikan 3 baris dan 3 kolom-Isi table dengan “ nama, email, komentar20-Di bagian baris nama kita masukan textfiled ( klik menu insert  formtextfield OK-Di bagian baris email kita masukan textfiled ( klik menu insert  formtextfield OK-Di bagian baris komentar kita masukkan textarea ( klik menu insert textareaOK)
  28. 28. -Tambahkan submit OK dan Cancel dengan cara . Klik menu insert  form button  OK.-Setelah semuanya selesai bisa kita kasih menu << Back To Home-Dan untuk tempat hasil komentar bisa kita kasih kode seperti gambar dibawah ini :-2. Setelah semuanya selesai klian bisa save dengan cara klik menu file save as  klik folder xammp  klik folder htdocts  klik folderwebedit  klik folder coment  OK.Untuk 4 menu tadu sudah selesai sekarang membahas menu tambahan .Langkah-langkah :1. Masukkan ini “ editan alam , editan kartun, editan iluminati , daneditan WOW pada setiap halaman menu “2. Lalu di setiap menu tambahan di masukkan gambar sesuai nama menutersebut .3. Dan jangan lupa d save dengan nama “ editanalam.html ,editankartun.html , editaniluminati.html , editanWOW.html “Dan menu tambahan ke 2 yaitu :Masukkan gambar logo photoshop dan corel draw di halaman menuHome . dan di save dengan create name file “ photoshop.html dancoreldraw.html “
  29. 29. 21IIIMemberi link pada setiap menuAgar terlihat seperti website sungguhan kita bisa beri likn pada setiap menunyaagar bisa berjalan.Nih cara- cara memberi link untuk setiap menunya:• Menu HomeBlok menu home dan lihat ke menu properti di bagian html ada yangnamanya link dan di sampingnya ada bentuk gambar browser . Sepertigambar di bawah ini :klik menu browser  lalu pilih home.html  OK. Menu home sudahbisa berjalan , namun bila home ingin menyambung ke yang lain , disetiap halaman menu lainnya beri link untuk home.• Menu ProfileLangkahnya sama dengan menu home namun saat browser pilihprofile.html lalu OK. Di setiap halaman menu lainnya beri link untukprofile.• Menu GaleryMenu ini juga sama langkahnnya dan saat browser pilih galery.htmllalu OK. Di setiap halaman lainnya beri link untuk Galery .• Menu CommentMenu ini sama tapi saat browaser klik folder coment  klikindex.php OK . dan di saat selesai memberikan komentar kita kliksubmit OK dan browser ke folder coment  klik add.php  OK.Ada menu << Back to Home di beri link home.• Dan dengan menu tambahan semua caranya sama hanya saja saatbrowse berbeda .Menu editan alam saat browse pilih editanalam.html lalu OKMenu editan kartun saat browse pilih editankartun.html lalu OK
  30. 30. Menu editan iluminati saat browse pilih editaniluminati.html lalu OKMenu editan WOW saat browse pilih editanWOW.html lalu OK.Menu photoshop saat browse pilih photoshop.html lalu OKMenu Corel Draw saat browse pilih coreldraw.html lalu Ok.22Karena semuanya sudah selesai diberi link otomatis semua halamanmenyambung dan bisa di coba di gogle chrome atau di mozila firefox .Ada 2 cara untuk menyobaCara pertama dengan menggunakan xammp (sebelumnya xammp distart dulu mysql dan ) setelah selesai buka gogle chrome  ketik url( localhost/webedit )  enter .Akan muncul web anda .Cara ke 2 langsung dari foldernyaBuka folder web anda misal computter  local disk D:  xammp htdocts webedit  home .Akan tampil web anda .
  31. 31. 23
  32. 32. BAB IIIPenutupTujuan :Tujuannya saya buat ini yaitu untuk mealtih saya membuat sebuahweb dengan dreamweaver dan lebih mengenal jauh dreamweaver.Akhir Tutorial ini saya ingin berterimakasih sudah melihat tutorial saya .24

×