Dalam bab sebelumnya Dreamweaver tutorial ini, kami merancang sebuah halaman dua kolom web menggunakan Dreamweaver CS3 dan upload ke web host.
Dalam bab ini, Anda akan belajar cara memasukkan gambar ke dalam halaman web Anda.
Jika Anda telah melewatkan angsuran pertama dari tutorial ini, Anda harus membaca dan mencoba langkah-langkah yang diberikan dalam Dreamweaver Tutorial: Cara Membuat Website dengan Dreamweaver CS3 (Bagian 1) sebelum mencoba hal-hal di halaman ini. Meng-upload halaman web, yang kami lakukan di Bagian 1, merupakan langkah penting jika Dreamweaver akan menangani alamat web (URL) gambar Anda dengan benar. Bab ini mengasumsikan bahwa Anda telah menyelesaikan langkah-langkah di Bagian 1.Persyaratan
Anda akan memerlukan berikut ini untuk menyelesaikan tutorial ini:
Sebuah gambar kecil untuk bertindak sebagai logo dari situs Anda
Anda akan membutuhkan gambar kecil untuk menempatkan di pojok kiri atas halaman web Anda. Gambar ini akan berfungsi sebagai logo situs Anda. Ini akan muncul pada setiap halaman situs Web Anda.
Jika Anda sedang merancang sebuah situs perusahaan, kemungkinan bahwa perusahaan Anda sudah memiliki logo. Jika Anda tidak memiliki file gambar untuk logo, baik memindai atau mengambil foto digital dari logo untuk Anda gunakan dalam bab ini.
Jika Anda tidak memiliki logo belum, membuat satu menggunakan grafis favorit Anda menggambar perangkat lunak atau menggambar satu di atas kertas dan scan atau mengambil foto digital dari itu. Anda akan membutuhkan sebuah program yang dapat menghasilkan baik PNG, GIF atau JPG file. Jika Anda tidak sudah memiliki gambar atau program lukisan, Anda dapat menemukan daftar yang gratis di Menggambar thefreecountry.com 's Free Software Lukisan dan halaman.
Ketika membuat logo Anda, perhatikan hal berikut:
Cobalah untuk menjaga lebar dan tinggi gambar kecil. Tidak ada ketentuan ukuran tetap untuk logo, tetapi jika logo Anda terlalu lebar atau tinggi, Anda akan memiliki waktu yang sulit pas ke halaman web Anda. Jika gambar yang Anda miliki adalah terlalu besar, coba ubah ukuran dalam perangkat lunak grafis Anda.
Jika Anda benar-benar tidak tahu apa yang harus dimasukkan ke dalam logo Anda, hanya membuat sebuah gambar dengan nama situs Anda di atasnya.
Sebuah panduan tentang cara membuat logo situs Anda sendiri dapat ditemukan dalam tutorial, Cara Buat Logo untuk Situs Anda Jalan Cepat dan Mudah: Membuat Logo untuk grafis Cacat di http://www.thesitewizard.com/webdesign/ membuat-situs-logo-banner.shtml
Produk gambar atau gambar lainnya (opsional)
Jika Anda ingin menempatkan gambar yang lain pada halaman web Anda, misalnya, foto dari produk yang Anda jual, atau foto Anda sendiri, Anda juga akan perlu untuk memiliki mereka baik PNG, GIF atau format JPG. Jangan khawatir jika Anda tidak memiliki gambar atau foto semacam ini. Bagian ini sepenuhnya opsional.
Menambahkan Gambar ke Halaman Dreamweaver Anda
Taruh salinan file grafis Anda dalam direktori yang sama seperti file yang Anda buat untuk website Anda di bagian pertama dari tutorial ini.
Start up Dreamweaver.
Di kolom kanan, Anda harus dapat melihat "index.html" di daftar file yang dimiliki proyek Anda. DoubleClick untuk membuka file.
Di bagian atas halaman adalah nama situs Anda, yang Anda masukkan dalam bab pertama. Tempatkan kursor teks ke sebelah kiri nama. Yaitu, klik pada nama, dan memindahkan kursor ke posisi paling kiri dengan menggunakan tombol panah kiri pada keyboard Anda. Anda akan memasukkan logo Anda pada posisi ini.
Pilih "Insert | Image" dari menu. Jika Anda ingat dari bab sebelumnya, "Insert | Image" berarti bahwa Anda klik "Insert" menu, kemudian klik "Gambar" item pada menu yang muncul. Sebuah kotak dialog akan muncul. Anda harus melihat foto atau gambar yang Anda sebelumnya disimpan dalam folder. Jika Anda memiliki lebih dari satu gambar dalam folder tersebut dan tidak yakin yang merupakan salah satu yang akan digunakan untuk logo Anda, Anda dapat klik nama gambar sekali. Sebuah preview gambar akan muncul dalam kotak dialog, sehingga lebih mudah bagi Anda untuk memilih gambar yang benar.
Sekali Anda telah memutuskan pada gambar yang Anda inginkan, pilih dengan mengkliknya sekali, dan kemudian mengklik tombol "OK".
Sebuah kotak dialog akan muncul, meminta Anda untuk "teks alternatif" untuk gambar. Ini pada dasarnya adalah deskripsi singkat dari gambar Anda. Deskripsi akan ditampilkan bagi pengunjung browsing dengan grafis yang dinonaktifkan. Ini juga akan menjadi teks yang dibacakan oleh pembaca layar. Yang terakhir ini digunakan oleh orang-orang tunanetra mengunjungi website Anda. Search engine juga bergantung pada teks, karena mereka tidak bisa "melihat" gambar baik. Adalah bijaksana untuk selalu memberikan grafis Anda deskripsi singkat.
Karena gambar ini hanyalah logo situs Anda, Anda dapat mengetik ke dalam kolom "Alternate text" nama perusahaan Anda atau bahkan hanya kata "logo" jika Anda malas. Jangan khawatir bahwa kotak ini sangat kecil - akan gulir saat Anda mengetik.
Setelah Anda mengetik "teks alternatif" Anda, klik tombol OK. Abaikan "deskripsi Panjang" lapangan.
Logo Anda seharusnya sekarang muncul sebelum nama perusahaan Anda atau nama situs Anda. Jika Anda menemukan logo terlalu besar, dan Anda ingin mengulang, cukup klik sekali dan tekan tombol DEL. Menciptakan logo Anda yang diperlukan, simpan ke dalam folder website dan ulangi prosedur di atas.
Pada titik ini, Anda mungkin akan menemukan bahwa logo tersebut tidak nyaman dekat dengan nama website Anda. Untuk memperkenalkan beberapa ruang antara logo dan nama situs Anda, klik logo sekali untuk memilihnya. Di bagian bawah jendela Dreamweaver Anda, Anda harus panel berlabel "Properties" yang berisi informasi tentang foto Anda (lihat gambar di bawah).
Cari "H Space" kotak edit dan masukkan "5" (tanpa tanda kutip). Tekan enter. Perhatikan bahwa beberapa ruang telah disisipkan antara gambar dan judul website Anda. Jika Anda berpikir 5 terlalu banyak atau terlalu sedikit, Anda bisa bereksperimen dengan nilai-nilai lain dalam kotak ini. Pada dasarnya, nilai yang lebih besar berarti lebih banyak ruang dimasukkan, sementara nilai yang lebih kecil menyusut jumlah ruang antara gambar dan materi di sekitarnya.
Itu saja. Anda sekarang menambahkan logo untuk halaman web Anda, sehingga terlihat sedikit lebih profesional.
(Langkah Opsional) Teknik yang sama yang Anda gunakan di sini untuk menambahkan logo dan digunakan untuk menambahkan foto lain ke halaman web Anda. Sebagai contoh, Anda dapat menggunakan metode ini untuk menambahkan gambar produk Anda dalam tubuh utama dari halaman web.
Katakanlah misalnya, bahwa Anda menggunakan teks berikut di bagian utama dari halaman web Anda.
Selamat Datang
Contoh Perusahaan berurusan dengan segala macam contoh. Kami memiliki contoh-contoh karya sastra, fiksi pulp, buku teks, review film, script, kursi, meja, peralatan rumah tangga, dan sebagainya. Kami bahkan memiliki contoh contoh.
Feature Produk
Dreamweaver Site: Ini adalah contoh dari situs Dreamweaver, dibuat dengan bantuan tutorial thesitewizard.com 's di Dreamweaver. Tutorial mengajarkan Anda bagaimana untuk membuat website dasar tetapi penuh-fungsional yang Anda dapat memodifikasi dan menambah sesuai dengan kebutuhan anda.
(Jika teks tampaknya akrab, itu karena saya menggunakannya sebagai contoh teks dalam bab sebelumnya.)
Jika Anda ingin menyisipkan gambar produk sehingga muncul sebagai thumbnail kecil tepat di samping blok kata-kata "Situs Dreamweaver: ini ..." (dll), tempatkan kursor sebelum "Situs Dreamweaver" (digunakan untuk mouse untuk klik tempat itu). Klik "Insert | Image". Ketik teks alternatif untuk produk Anda saat kotak dialog muncul Teks alternatif. Klik OK.
Perhatikan bahwa kata-kata tidak tepat mengalir ke kanan gambar. Untuk membuat semua kata-kata muncul di sebelah kanan gambar, klik gambar. Cari "Rata" kotak di panel Properties. Saat ini diatur ke "Default". Set ke "Kiri".
Gambar sekarang harus benar-benar ditempatkan di sebelah kiri teks, dengan kata-kata mengisi ruang di sebelah kanan.
Jika gambar terlalu dekat dengan kata-kata sesuai dengan keinginan anda, menyesuaikan "Ruang H" di panel Properties seperti sebelumnya. Anda juga dapat menyesuaikan "Ruang V" untuk mengubah ruang vertikal antara gambar dan kata-kata. Jika Anda tidak tahu apa yang saya maksud, hanya percobaan dengan menetapkan beberapa nilai seperti "5" (tanpa tanda kutip) di kotak "Ruang V" untuk melihat apa yang terjadi. Anda selalu dapat menghapus nilai lagi jika Anda tidak menyukai hasilnya.
Sebelum Anda melanjutkan ke bagian berikutnya, menyimpan halaman Anda dengan "File | Save".
Anda sekarang harus meng-upload (misalnya, menerbitkan) halaman web diperbarui untuk host Web Anda. Karena Anda telah menyiapkan segala sesuatu dalam bab sebelumnya, semua harus Anda lakukan pada titik ini adalah dengan mengklik "Situs | Masukan" dari menu. Jika Dreamweaver meminta Anda untuk menyimpan situs sebelum "meletakkan", melakukannya. Jika Anda ditanya apakah Anda harus meletakkan "file bergantung", klik "Ya" untuk mengizinkan Dreamweaver untuk mempublikasikan foto dan file CSS juga.
Akhirnya, memeriksa situs web Anda menggunakan browser Anda. Selamat. Website Anda sekarang terlihat lebih profesional dengan penambahan logo dan beberapa gambar untuk produk Anda atau diri Anda sendiri.
lanjut baian ke3
dudu.rojo
0 komentar:
Post a Comment