Buat template desain web sederhana

A & # 39; template & # 39; hanyalah tata letak rancangan yang dapat Anda terapkan pada semua (atau sebagian besar) halaman situs web Anda. Keuntungan pertama menggunakan sistem "template" adalah memungkinkan Anda untuk membuat keputusan desain yang paling penting di awal dan kemudian berkonsentrasi pada konten saja. Keuntungan kedua adalah Anda dapat dengan cepat membuat halaman baru berdasarkan desain standar Anda.

Kerugiannya adalah banyak situs web berbasis template yang tampak dihomogenkan dan tampaknya tidak memiliki karakter yang unik. Desainer yang menjual template selalu menggunakan format yang sama, menyisipkan gambar generik yang sama dan menggunakan teknik yang sama.

Sama pentingnya, template sering tidak langsung siap digunakan. Mereka hampir selalu perlu diadaptasi dan seringkali sulit untuk mengubah template bergaya profesional karena perancang telah menggunakan teknik yang mungkin tidak sepenuhnya Anda pahami atau yang spesifik untuk alat yang telah ia gunakan untuk membuatnya.

Jadi lebih baik ] tidak untuk melihat template web sebagai jenis barang yang Anda beli dari toko template online. Anggap saja sebagai tata letak halaman standar yang dapat digunakan berulang kali. Template terbaik adalah template yang menggunakan teknik "standar" yang dapat dimodifikasi tanpa menggunakan alat atau program khusus (seperti Front Page atau Dreamweaver).

Membuat template dasar

Jika Anda tidak terbiasa dengan desain web, cobalah bekerja dengan kerangka "bare bones" di awal. Ada dua cara untuk pergi. Anda dapat bekerja dengan alat dan tabel dasar, atau Anda dapat membuat template dasar Anda dengan CSS. Karena CSS dengan cepat menjadi standar baru, mungkin lebih baik untuk memulai dengan CSS – terutama jika Anda tidak terbiasa membuat halaman web dengan tabel.

CSS adalah singkatan dari "Cascading Style Sheets", tetapi pada awalnya tidak penting untuk memahami apa artinya itu. Apa yang penting adalah untuk memahami bahwa CSS memungkinkan Anda untuk membuat serangkaian parameter pemformatan dalam "style sheet" (file terpisah) yang kemudian dapat Anda terapkan dengan mudah ke masing-masing halaman Anda. . Dengan kata lain, Anda memisahkan "gaya" dari "konten".

Lembar gaya sederhana hanya dapat berisi tiga atau empat elemen desain. Berikut ini contoh yang dapat Anda salin secara bebas (klik kanan dan "Save Target As" ke lokasi pada hard drive Anda, kemudian ubah namanya menjadi "sample-1.css".)

Contoh Lembar Gaya [http://www.1-webworks.com/sample-templates/sample-1-css.html]

Template ini berisi definisi untuk teks utama, komponen kepala (dengan gambar latar belakang), "navbar", dan definisi untuk dua gaya tajuk, h1 dan h2.

Setelah Anda memiliki style sheet, Anda dapat mulai membangun situs web Anda dengan membuat halaman master. Berikut ini contoh [http://www.1-webworks.com/sample-templates/sample-template-1.html] di mana halaman gaya disematkan yang dirujuk pada bagian sebelumnya. Anda bisa mendapatkan kode html dengan membuka halaman di jendela browser, melihat "kode sumber" dan menyimpan file yang dihasilkan pada hard drive Anda, misalnya "sample-1.html".

Sekarang Anda harus memiliki dua file di lokasi yang sama pada hard disk Anda – "sample-1.css" dan "sample-1.html". Anda dapat memperoleh file gambar dengan mengklik kanan gambar pada halaman pratinjau dan menyimpannya di lokasi yang sama pada hard drive Anda.

Langkah kedua adalah membuat halaman yang direferensikan di "bilah navigasi", jadi pastikan Anda mengingat nama untuk halaman ini sebelum melanjutkan (mis. Howitworks.html, products.html, about.html, sitemap.html, contact.html). Kemudian, buat hyperlink Anda ke bilah navigasi. (Lihat kode file contoh untuk melihat cara kerjanya.)

Setelah Anda memiliki halaman master dengan tautan, ini akan menjadi templat Anda. Simpan sebagai "howitworks.html", "products.html", dll. Dan buat perubahan pada halaman tertentu.

Hasilnya (setelah Anda mengunggah semuanya ke server host Anda) adalah fungsi situs web dasar dengan sejumlah halaman yang dicocokkan & # 39; s. Ini juga akan ramah mesin pencari karena desainnya tidak penuh dengan skrip, dan elemen yang paling penting dijelaskan dengan jelas di bagian atas halaman.

Untuk kiat dan teknik lebih lanjut untuk desain web, lihat Perpustakaan Sumber Daya Pemasaran Linknet [http://www.small-business-online.com/b2e]].



Source by Rick Hendershot