Membuat Website dengan Dreamweaver CS4 Bagian II Menyiaapkan Situs Baru

Membuat Website dengan Dreamweaver CS4

Jika Anda orang yang baru mulai belajar membuat website, maka akan ada banyak hal yang perlu dipelajari dalam cara pembuatan website. Secara umum, banyak orang memulai langkah pembuatan website dengan membuat sketsa atau rencana kasar. Sketsa kasar biasanya dibuat dengan berbagai macam cara, misalnya coretan atau gambar di atas kertas. Sketsa tersebut kemudian dibuat menjadi gambar grafis dengan menggunakan software Desain Grafis seperti Adobe Photoshop. Langkah selanjutnya adalah membuat halaman HTML dengan menggunakan Adobe Dreamweaver. Dengan demikian, Adobe Photoshop berperan sebagai software untuk merancang, sedangkan Dreamweaver menjadi software yang dipergunakan untuk menata halaman. Kenyataannya, pembuatan situs besar maupun kecil bisa dikelola dengan menggunakan Adobe Dreamweaver.

Langkah Persiapan

Dalam dunia internet, sebuah situs dikenal karena memiliki identitas yang berbeda dari situs lainnya. Ibaratnya sebuah barang yang diproduksi oleh pabrik, maka situs tersebut memiliki merek, citra produk (brand image), warna serta desain yang menjadi ciri khasnya. Dengan demikian, kita dapat mengenal Google, Yahoo!, WordPress, Facebook, dan sebagainya sebagai sebuah identitas dari alamat situs yang mereka miliki.

Langkah permulaan membuat situs adalah dengan menentukan hal-hal yang berhubungan dengan identitas situs dan di mana situs tersebut akan ditempatkan. Berikut ini adalah beberapa langkah yang bisa kita lakukan untuk menyiapkan sebuah situs baru :

  1. Buka Adobe Dreamweaver CS4. Jika Anda belum terbiasa, maka cara memulai Adobe Dreamweaver adalah dengan memilih tombol Start > All Programs > Adobe Master Collection CS4 > Adobe Dreamweaver CS4.
  2. Anda akan dihadapkan pada Menu Pembuka Adobe Dreamweaver CS4. Untuk memulai situs baru, klik pada menu Create New > Dreamweaver Site.Dreamweaver site
  3. Kotak dialog Site Definition akan segera terbuka. Pada form isian pertama kita bisa menuliskan nama website yang akan kita buat dan pada form kedua kita bisa mengisikan alamat online secara lengkap website yang akan kita buat. Tapi, berhubung kita belum menggunakan alamat server secara online, maka alamat ini sementara tidak perlu diisi. Klik pada tombol Next.https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a>Selalu ada cara-cara baru yang menarik untuk menciptakan <a href="http://www.desainstudio.com/2010/02/manipulasi-foto-dengan-photoshop-efek.html">manipulasi foto dengan photoshop</a>. Seperti pada <a href="http://www.desainstudio.com/search/label/photoshop">tutorial photoshop</a> kali ini, kita akan belajar memadukan cipratan cat ke dalam sebuah gambar untuk menciptakan efek fresh yang colorfull di Photoshop. Beberapa resource image dan tekstur pada tutorial kali ini juga bisa jadi koleksi menarik bagi kamu yang memang gemar memanipulasi foto menggunakan <a href="http://www.desainstudio.com/search/label/photoshop">photoshop</a&gt;. Lets check it out..</p> <p>STEP 1</p> <p>Persiapkan dokumen dengan background berwarna hitam. Lalu masukkan gambar ke photoshop lalu cropping gambar tersebut. Gambar pada <a href="http://www.desainstudio.com/search/label/tutorial">tutorial</a&gt; ini bisa ditemukan <a href="http://dulkimso-photography.deviantart.com/art/happy-jump-109998972">disini</a&gt;. Untuk cropping gambar di <a href="http://www.desainstudio.com/search/label/photoshop">photoshop</a&gt;, bisa lihat disini : <a href="http://www.desainstudio.com/2009/10/menghapus-background-di-photoshop.html">menghapus background di photoshop</a></p> <p><a href="http://1.bp.blogspot.com/_I_PFFJSrTec/TFVQtmw7zpI/AAAAAAAADYA/9_eJpkl3_k4/s1600/fresh-photo-manipulation---photoshop-tutorial-1.jpg"><img src="http://1.bp.blogspot.com/_I_PFFJSrTec/TFVQtmw7zpI/AAAAAAAADYA/9_eJpkl3_k4/s400/fresh-photo-manipulation---photoshop-tutorial-1.jpg&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 2</p> <p>Buka layer palette dan pilih layer gambar wanita tersebut (layer 1), lalu tekan dan tahan tombol Alt di keyboard kemudian klik ikon create new fill or adjustment layer di bagian bawah layer palette dan pilih Brightness/Contrast kemudian lepas kembali tombol Alt. Langkah ini untuk membuat adjustment layer diaplikasikan hanya kepada layer terpilih. Atur nilai brightness/contrast seperti pada gambar dibawah.</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-2.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-2.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 3</p> <p>Selanjutnya, donwload <a href="http://mediamilitia.com/paint-tossing/">kumpulan gambar cipratan cat</a>. Masukkan salah satu gambar cipratan cat tersebut ke dokumen <a href="http://www.desainstudio.com/search/label/photoshop">photoshop</a&gt;. Beri nama layer cipratan cat dengan nama ‘splatter 1’.</p> <p><a href="http://1.bp.blogspot.com/_I_PFFJSrTec/TFVQtC05PtI/AAAAAAAADXw/-29E8BG4PJA/s1600/fresh-photo-manipulation---photoshop-tutorial-3.jpg"><img src="http://1.bp.blogspot.com/_I_PFFJSrTec/TFVQtC05PtI/AAAAAAAADXw/-29E8BG4PJA/s400/fresh-photo-manipulation---photoshop-tutorial-3.jpg&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 4</p> <p>Gunakan magic wand tool (W) dan klik bagian putih dari gambar splatter 1 kemudian tekan tombol delete di keyboard untuk menghapusnya.</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-4.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-4.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 5</p> <p>Gunakan teknik yang sama dengan STEP 2 untuk memberikan adjustment layer pada layer splatter 1. Namun kali ini, pilih adjustment layer berupa Hue/Saturation. Atur nilai dari Hue/saturation hingga warna cipratan cat mendekati warna baju seperti pada gambar dibawah ini.</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-6.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-6.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 6</p> <p>Pilih layer splatter 1, kemudian klik ikon add layer mask dibagian bawah layer palette. klik pada thumbnail putih di layer splatter 1, lalu gunakan brushes tool (B) untuk menghilangkan sebagian dari gambar cipratan cat (lihat gambar dibawah).</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-8.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-8.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 7</p> <p>Masukkan gambar cipratan cat yang lain dan beri nama layer dengan nama ‘splatter 2’, kemudian lakukan hal yang sama seperti pada STEP 5 untuk menyamakan warna cat dengan warna baju yaitu menggunakan Hue/saturation.</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-9.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-9.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 8</p> <p>Ulangi langkah pada STEP 6 yaitu memberikan layer mask pada layer splatter 2 dan hapus sebagian gambar cat di sebagian gambar.</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-10.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-10.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 9</p> <p>Tambahkan juga beberapa cipratan cat lain ke dalam dokumen photoshop. Beri nama dengan splatter 3, splatter 4 dan seterusnya. Gunakan langkah yang sama untuk menyamai warna dengan hue/saturation seperti pada STEP 5 dan juga menambah layer mask untuk menghilangkan sebagian gambar seperti pada STEP 6. Setiap cipratan cat berbeda bentuk, dalam hal ini kita harus mampu menyesuaikan tata letak hingga tampak cocok ketika diaplikasikan pada gambar.</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-11.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-11.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 10</p> <p>Download <a href="http://kuschelirmel-stock.deviantart.com/art/Textures-05-Stock-Pack-109884342?q=gallery%3Akuschelirmel-stock%2F287456&qo=9">Grunge watercolor image</a>. Kemudian masukkan ke dalam dokumen <a href="http://www.desainstudio.com/search/label/photoshop">photoshop</a&gt; dan posisikan di atas layer background (lihat gambar dibawah).</p> <p><a href="http://4.bp.blogspot.com/_I_PFFJSrTec/TFVMkWczb8I/AAAAAAAADWA/hsC-r-58EOY/s1600/fresh-photo-manipulation---photoshop-tutorial-12.jpg"><img src="http://4.bp.blogspot.com/_I_PFFJSrTec/TFVMkWczb8I/AAAAAAAADWA/hsC-r-58EOY/s400/fresh-photo-manipulation---photoshop-tutorial-12.jpg&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 11</p> <p>Selanjutnya, kita akan membuat bayangan dari objek gambar wanita dan cipratan cat disekelilingnya. Caranya : tekan dan tahan tombol Ctrl di keyboard lalu klik pada thumbnail di layer 1 (layer si wanita). Setelah itu, lanjut dengan menekan dan tahan tombol ctrl + Shift di keyboard dan klik pada thumbnail pada layer splatter 1. Begitu seterusnya sampai layer 1 dan seluruh layer splatter terseleksi.</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-13.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-13.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 12</p> <p>Setelah semua terseleksi, buat layer baru dengan klik ikon add layer mask di bagian bawah layer palette. Beri nama layer dengan nama ‘shadow’. Pilih layer shadow dan pastikan warna foreground adalah hitam dengan menekan tombol D di keyboard. Kemudian tekan tombol Alt + Delete di keyboard untuk mengisi layer dengan warna hitam (lihat gambar dibawah). Jika sudah, tekan Ctrl + D untuk menghilangkan seleksi.</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-14.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-14.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 13</p> <p>Drag layer shadow pada layer palette ke atas layer grunge watercolor image dan perbesar ukuran shadow dengan menggunakan transform tool (Ctrl + T). Kemudian pada menu bar pilih Filter > Blur > Gaussian Blur dan atur nilai pada radius menjadi 8. Jika sudah, klik Ok.</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-15.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-15.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-16.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-16.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 14</p> <p>Ganti blending mode pada layer shadow menjadi multiply dan opacity menjadi 40 %.</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-17.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-17.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 15</p> <p>Buat layer baru, lalu fill dengan warna hitam. Kemudian pada Menu Bar pilih Filter > Render > Lens flare. Atur dan posisikan letak cahaya pada lens flare seperti pada gambar dibawah. Jika sudah, tekan tombol OK.</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-18.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-18.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-19.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-19.jpg?w=210&quot; alt="manipulasi foto dengan photoshop" border="0" /></a><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-20.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-20.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 16</p> <p>Pilih layer paling atas, kemudian klik ikon Create new fill or adjustment layer lalu pilih Brightness/Contrast (kali ini tanpa tombol Alt karena adjustment akan kita aplikasikan pada semua layer). Atur nilai pada brightness/Contrast seperti pada gambar dibawah ini.</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-21.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-21.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 17</p> <p>Dengan cara yang sama, tambahkan juga Adjustment exposure dan atur nilainya seperti pada gambar dibawah ini.</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-22.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-22.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>STEP 18</p> <p>Untuk finishing akhir, pilih layer splatter 2, lalu pilih Dodge tool (O) dan sapukan dibagian cipratan cat untuk menerangkannya. Langkah ini untuk mengoreksi pencahayaan bagian ini yang terlihat agak gelap sedangkan terletak paling dekat dengan sumber cahaya.</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-23.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-23.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>Hasil akhir:</p> <p><a href="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-24.jpg"><img src="https://padistudio.files.wordpress.com/2012/05/fresh-photo-manipulation-photoshop-tutorial-24.jpg?w=300&quot; alt="manipulasi foto dengan photoshop" border="0" /></a></p> <p>Semoga bermanfaat, selamat mencoba dan terus berkarya! :)</p> </div> " data-medium-file="" data-large-file="" class="size-full wp-image-424" title="02b_Site-Definition" src="https://webdesainer.files.wordpress.com/2009/08/02b_site-definition1.gif?w=468" alt="Site Definition" />
  4. Selanjutnya adalah pilihan untuk menggunakan Server Technology (yakni ColdFusion, ASP.NET, ASP, JSP, dan PHP) atau tidak menggunakan Server Technology (web statis). Server Technology akan menyebabkan file-file ditulis dalam format sesuai dengan jenis server. Berhubung pada tahap awal ini belum menggunakan Server Technology, maka kita bisa lanjutkan ke tahap berikutnya. Pastikan pilihan masih pada No, I do not want to use a server technology. Kemudian, klik pada tombol Next.Server Technology
  5. Tahap berikutnya adalah menentukan di mana lokasi file-file kerja kita akan disimpan. Pada Kotak dialog ini, gantilah form isian di bagian bawah dengan lokasi folder di mana file-file website akan disimpan.Pastikan pilihan tetap aktif pada Edit local copies in my machine… Cara lain untuk menentukan lokasi folder adalah dengan browse. Anda bisa klik pada ikon folder dan menentukan lokasi folder tersebut di harddisk.Selesai menentukan folder kerja, kita bisa melanjutkan ke proses berikutnya. Klik pada tombol Next. Penting untuk menyimpan semua file website pada folder yang didaftarkan pada proses ini. Semua file yang akan di-upload ke server online akan berhubungan dengan alamat relatif, sehingga harus diletakkan pada satu folder induk, yakni folder yang didaftarkan.Folder untuk menyimpan file website
  6. Tahap selanjutnya adalah menentukan bagaimana dan di mana file-file tersebut akan diletakkan pada Remote Server. Proses ini sangat penting mengingat setelah website terbentuk, maka file-file yang telah dibuat dapat dikirimkan ke Online Server. Cara yang terbaik untuk mengirimkan file-file tersebut adalah dengan menggunakan FTP (File Transfer Protocol).Jika Anda sudah pernah melakukan upload file melalui FTP, maka form-form isian ini tidaklah terlalu sulit untuk dijelaskan. Anda tinggal mengisi form-form isian mengenai alamat Web Server (hostname), Folder hosting, FTP Login, dan FTP Password. Tapi jika Anda belum pernah melakukannya dan belum memiliki alamat Remote Server, sementara bisa Anda kosongkan.Setting FTP untuk upload file
  7. Nah, berhubung tahapan ini membutuhkan Remote Server, maka untuk sementara kita bisa lewati. Jangan khawatir karena Adobe Dreamweaver mengijinkan proses ini dapat dilakukan kemudian. Pengaturan Remote Server dapat kita isi di lain waktu setelah semua file siap untuk di-upload.Untuk mengabaikannya, pilih None pada pilihan Remote Server. Lanjutkan dengan klik tombol Next.Pilih None pada Remote Server
  8. Untuk sementara, tahap persiapan pembuatan situs baru telah selesai. Namun, apabila semua file telah lengkap dan Anda telah memiliki Hosting pada sebuah ISP (Internet Service Provider), proses ini dapat Anda lengkapi.Ringkasan hasil setting

    Klik Done untuk mengakhiri.

    Perhatikan bahwa di sebelah kanan sekarang telah tersedia folder baru sesuai dengan yang telah didefinisikan pada tahap sebelumnya.

    Folder baru muncul sebagai hasil setting

Membuat Halaman Website Baru

Setelah proses persiapan selesai, kita bisa memulai tahapan awal membuat website. Perlu diketahui, bahwa halaman website dapat dibuat dengan menggunakan berbagai macam format. Sebagai contoh, banyak halaman web dibuat dengan format table HTML. Namun, format CSS lebih dianjurkan mengingat format CSS memiliki banyak kelebihan dan fleksibilitas yang lebih baik.

Pada contoh latihan pertama ini kita akan menggunakan format HTML mengingat format HTML adalah dasar dari bahasa yang dipergunakan di web. Sekarang kita bisa mulai membuat halaman baru. Langkah-langkahnya adalah sebagai berikut :

  1. Klik More pada pilihan di bawah kolom Create New. (Alternatif lain adalah dengan klik pada menu File > New).Membuat file baru
  2. Kotak dialog selanjutnya memperlihatkan jenis dokumen yang akan dibuat, tipe file, dan template layout yang sudah siap pakai tergantung pada jenis dokumen yang akan dibuat. Kita dapat mencoba-coba memilih beberapa di antaranya. Jendela preview di bagian paling kanan akan memperlihatkan tampilan template yang sedang dipilih.Kotak Dialog untuk memilih layout

    Pada kolom Layout terdapat banyak bentuk kolom yang dapat dipilih. Pada dasarnya bentuk kolom pada website masa kini menggunakan metoda CSS, sehingga Dreamweaver menyiapkan layout kolom menggunakan CSS.

    Terdapat empat bentuk layout kolom sebagai berikut :

    Fixed ;
    kolom yang tidak dapat diubah, tergantung pada setting pada browser di komputer pengguna. Lebar kolom menggunakan ukuran piksel.

    Elastic ; kolom dapat beradaptasi pada setting text di komputer pengguna, tetapi tidak berubah ketika browser diperbesar atau diperkecil. Lebar kolom menggunakan ukuran ems (ukuran pada typography tradisional).

    Liquid ; kolom dapat berubah jika browser diperbesar atau diperkecil, tetapi tidak berubah ketika pengguna mengubah setting text.

    Hybrid ; kombinasi dari berbagai tipe kolom.Untuk latihan pertama, kita bisa klik HTML pada pilihan Page Type dan klik pada None pada pilihan Layout. Klik pada Tombol Create untuk menyelesaikan proses pembuatan Dokumen baru.

  3. Sampai pada tahap ini pembuatan halaman baru dengan format HTML biasa telah selesai. Anda dapat mencoba menuliskan sebuah kalimat pada bagian workspace design. Cobalah mengetikkan kalimat berikut : Selamat Datang di Website Kami.Jendela Code dan Jendela Design

    Tulisan yang telah diketik akan muncul dalam dua jendela, yakni jendela Design dan jendela Code. Artinya, kita dapat melihat preview website di jendela Design, dan dapat melihat bagaimana kodenya dituliskan pada jendela Code.

Menyimpan Halaman Web

Pada aplikasi lain, seringkali tempat di mana sebuah file diletakkan tidaklah menjadi masalah. Namun tidak demikian dengan halaman-halaman website. File-file yang kita ciptakan akan berhubungan dengan file lain dalam struktur website yang sama. Oleh karena itu, sangatlah penting untuk meletakkan file-file yang kita buat pada satu folder yang sama.

  1. Klik pada menu File > Save.
  2. Pada kotak dialog Save As, pastikan Anda meletakkan pada folder yang telah dibuat pada proses sebelumnya. Jika tidak, carilah folder yang telah dibuat sebelumnya!
  3. Ketikkan pada kotak File name : index.html
    File : index.html adalah nama file standar dalam dunia internet yang menjadi acuan sebuah website. File ini adalah file yang pertama kali dibuka ketika browser diarahkan untuk membuka alamat website tertentu.

Simpan file sebagai index.html

  • Biarkan kotak Save as type : terisi All Document. Dan pada kotak Unicode Normalization Form : pilih None.
  • Klik pada tombol Save.

Sampai di sini tahapan awal pembuatan file utama index.html telah berhasil dilakukan. Dengan demikian kita dapat melanjutkan ke tahap selanjutnya, yakni membuat format text dengan HTML.

https://webdesainer.wordpress.com/2009/07/30/membuat-website-dengan-dreamweaver-cs-4-bagian-i-mengenal-dreamweaver-cs4/

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s