Basic Tutorial to Use dreamweaver cs3 | SEO Guide
1 like656 views
Tutorial ini memberikan panduan langkah-demi-langkah tentang cara menggunakan Adobe Dreamweaver CS3 untuk membuat dan mengelola situs web, termasuk bagaimana mendesain tata letak, menyisipkan elemen, dan meng-upload situs ke internet. Instruksi mencakup pengaturan ruang web, pembuatan halaman beranda, serta penggunaan tabel untuk tata letak konten. Tutorial ini ditujukan untuk pengguna Mac dan PC dengan langkah-langkah yang jelas untuk mempermudah proses desain web.
Basic Tutorial to Use dreamweaver cs3 | SEO Guide
- 1. TUTORIAL ADOBE DREAMWEAVER CS3 SEO Guide | Osfir Insan Bersahaja Tutorial ini berfokus pada langkahlangkah dasar yang terlibat dalam membuat hal yang menarik tentang website fungsional. Belajarlah untuk merancang tata letak situs, menyisipkan gambar dan teks, membuat link, dan bagaimana untuk mengupload situs Anda ke Internet. Tutorial ini menawarkan informasi untuk Mac dan PC pengguna. 1. Mengaktifkan ruang web Anda .............................................. ................. 3 2. Memulai ................................................ .............................. 4 3. Membuat Homepage ............................................... ....................... 7 4. Desain dan Tata Letak ............................................... ........................... 8 5. Memasukkan dan Menggunakan Tabel .............................................. ................. 10 6. Menambahkan Elemen Desain ............................................... ................... 16 7. Meninjau di Browser ............................................... ...................... 19 8. Membuat Hyperlink ................................................ ........................ 21 9. Memasukkan Media Khusus ............................................... ..................... 24 10. Mengupload File ke Web ............................................. .................. 27 11. Mendownload File dari Web ............................................. ........... 29 Dreamweaver CS3 2 SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 2. SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 3. SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 4. MENGAKTIFKAN 1 WEB SPACE ANDA Sebelum Anda memulai, penting bahwa Anda memiliki ruang untuk mengupload situs Web Anda Ketika selesai. BGSU menawarkan 15 MB ruang web pribadi bebas untuk setiap Client, sehingga Anda dapat menggunakan ruang ini untuk mengupload proyek Andaberikut:. Untuk mengaktifkan ruang Web pribadi Anda, ikuti langkah 1. Masuk ke Akun MyBGSU Anda. 2 Gulir ke bawah halaman untuk menemukan kotak Akun My Computer (Gbr. 1). 3 Klik tombol Add Akun Server. 4. BGSU Server Rekening jendela Pendaftaran, centang kotak di sebelah Pribadi (Gbr. 2). 5. Klik tombol Submit. Sekarang ruang Web Anda diaktifkan CATATAN:.Sebuah email akan dikirim jika account Anda diaktifkan Gambar. 2 Registrasi BGSU Server Rekening Gambar. 1 Akun My Computer jendela Dreamweaver CS3 3 1Jika Anda Belum Menginstall, Silahkan Download Adobe Dreamweaver CS3 SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 5. MEMULAI SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 6. MENCIPTAKAN LOKAL ROOT FOLDER ANDA Pertama, Anda perlu memutuskan apa yang Anda ingin tempatkan di website Anda: gambar, tombol, video, dokumen PDF, presentasi PowerPoint, dll Untuk menciptakan dan memelihara Situs terorganisir, Anda perlu membuat hirarki folder yang berisi semua komponen yang membentuk situs Anda. Folder ini disebut folder lokal root. Hal ini penting karena ini adalah di mana Dreamweaver mencari semua file Anda berikut:. Untuk membuat folder root, ikuti langkah 1. Buat folder baru di desktop Anda. Pada Mac, klik File> New Folder. Pada PC, klik kanan dan pilih New Folder. 2. Berikan nama singkat, namun deskriptif folder. Jangan gunakan huruf kapital, spasi, atau karakter khusus ketika penamaan folder dan file untuk website Anda. Semua halaman Anda akan disimpan dalam folder ini. 3. Buka folder, dan membuat folder baru lain di dalam. Nama folder ini gambar. Masukkan semua gambar, tombol, file film Anda, dll di dalam folder gambar CATATAN:..Pastikan bahwa semua halaman Anda dan gambar akan disimpan dalam folder root Anda, atau mereka tidak akan muncul pada saat website Anda dibuka MENGELOLA SITUS ANDA Sekarang Anda siap untuk memulai Dreamweaver CS3. Pada Mac, klik ikon Dreamweaver CS3 dari Dock. Pada PC, klik Start> Programs> Macromedia Dreamweaver CS3. Langkah yang paling penting yang perlu Anda ambil setiap kali Anda memulai Dreamweaver CS3 adalah untuk mendefinisikan Info Lokal Anda. The "root folder lokal" adalah nama untuk folder di mana Anda menyimpan semua isi website Anda. berikut: Untuk menentukan sebuah situs, ikuti langkah 1. Klik Site> Manage Sites CATATAN:.Jika Anda menggunakan Dreamweaver CS3, pergi ke Situs> New Site 2..Klik New> Site. 3 Pilih tab Advanced. 4. Masukkan nama untuk situs dalam bidang teks Nama Situs (Gbr. 1). (Nama ini akan untuk hanya menggunakan Anda tidak akan dipublikasikan dengan situs Anda.) 5. Klik ikon folder kecil di sebelah kolom teks Local Root Folder. 6. Menavigasi melalui folder pada komputer dan / atau disk dan cari folder yang Anda ditunjuk untuk proyek website Anda (folder root lokal). 7 Pilih folder yang ditunjuk dan klik tombol Choose. Dreamweaver CS3 4 SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 7. 8 Ikuti langkah yang sama di atas untuk memilih Folder default Images, yang terletak di Lokal SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 8. Root Folder. Gambar. 1: Info tab Local Selanjutnya, setiap kali Anda memulai Dreamweaver, Anda harus mendefinisikan Info remote Anda. Tab Info remote digunakan untuk memberitahu Dreamweaver mana untuk menempatkan file Anda ketika Anda siap untuk upload ke web. Jika Anda menggunakan BGSU ruang server pribadi, menggunakan diagram di bawah (Gbr. 1) untuk mengisi informasi. (Jika Anda menggunakan server lain Anda akan perlu untuk mengetahui nama host.) Untuk menentukan Info terpencil, lakukan hal berikut: 1. Klik pada tab Info Remote terletak di sisi kiri dari toolbar. 2. Pilih FTP di bidang akses. 3. Ketik personal.bgsu.edu untuk host FTP. 4. Ketik public_html untuk direktori Host. 5. Ketik nama pengguna webmail Anda untuk Login. 6. Ketik password webmail Anda untuk Password. 7. Pastikan Gunakan kotak FTP pasif diperiksa. 8. Klik Test untuk memastikan terhubung ke server dengan benar. 9. Klik OK. 10 Pilih nama situs Anda dan klik Selesai Gbr.2:. Dreamweaver CS3 5 SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 9. Info tab remote SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 10. Dreamweaver CS3 6 SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 11. MENCIPTAKAN HOMEPAGE SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 12. Untuk membuat halaman Web, ikuti panduan ini: 1. Pilih halaman menjadi homepage situs Web Anda. Ini akan menjadi halaman pertama pengguna yang mengalami ketika mereka mengunjungi situs Anda. Simpan file ini ke folder root lokal Anda sebagai index.html. Penamaan homepage index.html memberitahu browser Web bahwa ini adalah halaman pertama itu harus terbuka ketika seseorang mengunjungi situs Anda. 2. Untuk menambah halaman baru buka File> New dan memilih halaman HTML dasar. Simpan halaman ini dengan mengklik File> Save As. Nama halaman pertama index.html 3. Setelah situs Anda index.html dibuat, Anda dapat menggunakan halaman ini sebagai layout template untuk semua halaman lain di situs Anda. Cukup tekan Save As dan beri nama file apapun yang Anda inginkan, tetapi pastikan untuk menjaga nama sederhana, misalnya history.html, resume.html, dll Ingatlah untuk tidak menggunakan huruf kapital atau spasi ketika penamaan file, ini akan membuat mudah bagi web browser untuk menemukan file Anda. 4. Untuk menyimpan halaman situs Anda cukup klik File> Save untuk setiap halaman. Pastikan situs Anda bernama index.html, dan menyimpan semua file Anda dalam folder yang Anda pilih saat menetapkan situs Anda, yaitu di folder root lokal Anda Catatan:.Proses ini akan menyimpan file Anda ke situs lokal Anda. Anda dapat mentransfer setiap file secara terpisah ke situs remote atau mentransfer seluruh situs setelah Anda selesai bekerja di atasnya. Dreamweaver CS3 7 SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 13. DESAIN DAN TATA LETAK SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 14. Bahkan jika Anda membuat hanya situs Web yang sederhana, Anda harus mulai dengan membuat sketsa tata letak Anda situs. Tentukan di mana Anda ingin judul, gambar, tombol navigasi, dan teks yang muncul di layar. Sebagian besar situs web memiliki karakteristik desain yang sama pada setiap halaman. Sebagai contoh, judul situs web biasanya di atas pusat kiri atau atas, sementara tombol navigasi biasanya muncul secara vertikal di sebelah kiri atau horizontal di bawah judul. Selain membuat sketsa layout untuk setiap halaman, Anda harus menentukan berapa banyak halaman yang Anda perlukan untuk situs Web. Perencanaan yang menyeluruh sangat penting untuk desain web yang baikWeb.; Untuk mendapatkan teks Anda, tombol navigasi, dan gambar muncul di mana Anda ingin mereka pada halaman Anda perlu menggunakan tabel untuk memformat isi setiap halaman. Segala sesuatu di setiap halaman situs Web Anda harus cocok dalam satu meja besar. Menggunakan sketsa tata letak Anda, Anda dapat menentukan apa meja Anda perlu terlihat seperti. Gambar. 1 menunjukkan tata letak sketsa sederhana. Gambar. 2 menunjukkan tata letak yang sama, dengan batas tabel ditarik di. Gambar. 3 dan Gambar. 4 menunjukkan bagaimana tabel dapat diimplementasikan dalam Dreamweaver. Sekarang, cukup membuat tabel di Dreamweaver yang memiliki karakteristik yang sama seperti perbatasan digambar pada halaman. Bab berikutnya akan mengajarkan Anda bagaimana untuk menyisipkan tabel Anda. Gbr. 1: Simple tata letak sketsa Gbr.2: Simple tata letak sketsa dengan perbatasan Dreamweaver CS3 8 SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 15. Gbr.3: menu Table di Dreamweaver Gbr.4: Selesai tabel dalam Dreamweaver SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 16. Gambar. 5 dan 6 menunjukkan beberapa layout umum untuk halaman web dasar Gbr.5:.Tata Letak umum dengan Kolom Gbr.6: Tata Letak Umum tanpa Kolom Dreamweaver CS3 9 SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 17. MEMASUKKAN DAN MENGGUNAKAN TABEL SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com
- 18. MENGAPA MENGGUNAKAN TABEL Tabel membantu Anda membagi ruang pada halaman Anda. Mereka mirip dengan tabel di Word atau Excel tetapi dapat digunakan dengan cara yang lebih fleksibel. Tabel memberikan pilihan untuk membuat halaman Anda ukuran tetap atau membuatnya cocok untuk jendela pengguna yang terbaik yang bisa. Tabel juga menjamin bahwa lokasi teks dan gambar tidak berubah jika dilihat di layar dengan resolusi yang berbeda atau dalam browser web yang berbedaberikut:. CARA MEMASUKKAN A TABLE Untuk menyisipkan tabel, ikuti langkah 1. Dalam menu utama, klik Insert> Table. 2. Masukkan jumlah Table Baris dan Kolom (Gambar 1). 3. Set Tabel lebar untuk antara 600 dan 800 piksel. 4. ketebalan Set Border. Untuk memiliki tipe perbatasan terlihat dalam 1 atau lebih tinggi, tidak memiliki jenis perbatasan di 0 5. Sel bantalan menambah ruang dalam sel. Masukkan 0 untuk tidak ada ruang atau nomor untuk Meningkatkan ruang. 6 Sel jarak menambah ruang antara sel. Masukkan 0 untuk tidak ada ruang atau nomor untuk Meningkatkan ruang. 7. Klik OK. Dreamweaver CS3 10 SELESAI DEMIKIAN LANGKAH AWAL UNTUK TUTORIAL ADOBE DREAMWEAVER CS3 SEO Guide | Osfir Insan Bersahaja http://osfir.blogspot.com