Unlimited Powerpoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. Responsive Web Design
Business

Cara Membuat Laman Web Perniagaan Responsif Dengan Templat

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called How to Make Responsive Business Websites (Tutorial Guide).
How to Make Responsive WordPress Websites (With Themes)
13 Quick Responsive Web Design Tips & Tricks for 2018

Malay (Melayu) translation by Kaustina Nurul Ilmi (you can also view the original English article)

Apabila ia datang untuk mewujudkan laman web perniagaan anda, terdapat beberapa cara untuk melakukannya. Anda boleh memilih pembina tapak, atau anda boleh menggunakan CMS seperti WordPress. Walaupun tidak ada yang salah dengan pilihan itu, ia adalah laman web yang mudah untuk memperlihatkan apa perniagaan anda.

Sekiranya anda tidak memerlukan ciri-ciri mewah dan anda tidak merasakan diri anda kerap blog atau menjual secara dalam talian, maka templat laman web responsif HTML hanyalah apa yang anda perlukan. Di sini, kami akan berjalan melalui langkah persediaan supaya anda boleh melancarkan dalam masa yang singkat.

Cara Membuat Laman Web Responsif dalam HTML

Keindahan template laman web perniagaan responsif HTML adalah bahawa mereka mudah digunakan dan tidak memerlukan pengetahuan teknikal khusus untuk mengunggahnya ke pelayan hosting anda. Mereka juga lebih mudah untuk diubah suai daripada pembina laman web dan CMS lain.

Dalam tutorial ini, kami akan menunjukkan kepada anda bagaimana untuk mengubah suai dan memuat naik templat laman responsif HTML ke pelayan anda supaya anda dapat membuat laman web perniagaan responsif dengan mudah.

Sebelum Anda Bermula

Sebelum kita mulakan dengan pengubahsuaian template laman web responsif, terdapat beberapa perkara yang anda perlukan. Kami mempunyai nama domain dan pelan tuan rumah, program FTP dan editor kod, template laman web perniagaan responsif HTML, dan akhirnya, kandungan dan imej yang akan diteruskan di laman web anda. Mari lihat setiap orang di bawah.

1. Nama Domain dan Hosting

Perkara pertama yang perlu anda lakukan ialah membeli nama domain dan pelan tuan rumah supaya laman web anda dapat ditemui dalam talian. Dalam kebanyakan kes, anda boleh mendapatkan nama domain percuma apabila anda mendaftar untuk pelan hosting dengan kebanyakan pembekal. Ketika datang ke nama domain anda, ide yang baik adalah menggunakan nama perniagaan anda yang sebenarnya sebagai nama domain.

Jika boleh, cubalah untuk mendapatkan pelanjutan .COM kerana ia adalah yang paling popular, tetapi perlu diingat bahawa mencari nama domain yang hebat dengan .COM tidak semudah yang pernah dilakukannya. Dalam hal ini, anda mungkin ingin melihat sambungan lain seperti .US atau domain setempat seperti .US.

Apabila ia datang kepada pembekal hosting, anda boleh mencari pakej hosting yang bermula pada $5/bulan. Anda akan mahu membaca Soalan Lazim mereka untuk melihat bagaimana mereka mengendalikan khidmat pelanggan dan mendapatkan terma dan syarat mereka. Juga, pertimbangkan untuk membaca ulasan hos tertentu di laman web pihak ketiga yang lain untuk melihat apa yang pelanggan mereka katakan tentang mereka.

2. Pelanggan FTP dan Editor Kod

Item seterusnya dalam senarai kami adalah pelanggan FTP seperti FileZilla dan editor kod seperti Sublime Text. Tujuan klien FTP adalah untuk memuat naik fail laman web anda sekali gus,bukannya memuat naiknya satu demi satu melalui panel kawalan tuan rumah. Sebagai editor kod, sebaliknya, akan membantu anda mengedit fail template dan memudahkan untuk mencari bahagian yang berlainan kod yang memerlukan penyuntingan.

Kedua-dua Teks Sublime dan FileZilla bebas untuk memuat turun dan boleh digunakan pada komputer Mac, Windows, dan Linux.

3. Template Laman Web Responsif HTML Terpilih dan Kandungan Laman Web

Akhirnya, anda memerlukan template HTML dan kandungan yang ingin anda tambahkan ke tapak web anda. Anda boleh menemui kebanyakan template HTML responsif yang dibuat khusus untuk laman web perniagaan di pasar seperti Elemen Envato. Sebaik sahaja anda mencari yang anda suka, hanya muat turun, unzip folder itu, dan simpan di mana sahaja anda boleh mengakses dengan mudah.

Setakat kandungan, pertimbangkan apa yang syarikat anda lakukan dan bagaimana ia melayani pelanggan dengan produk dan perkhidmatan. Anda juga boleh menambah maklumat tentang orang penting di syarikat anda. Jangan lupa elemen visual seperti imej dan logo.

Cara Menyesuaikan Kandungan Template

Kini, waktunya untuk mengedit kandungan dalam templat dan menggantikan maklumat dummy dengan anda sendiri. Untuk tujuan tutorial ini, saya akan menggunakan template Moose. Templat tapak responsif ini sesuai untuk pemilik perniagaan, agensi kreatif, studio digital dan banyak lagi.

1. Memahami Bagaimana Template Laman Web Responsif Tersusun

Sebelum anda mula mengedit templat, penting untuk memahami struktur supaya anda tahu fail mana yang perlu anda ubah. Seperti yang anda dapat lihat dari tangkapan skrin di bawah, folder yang tidak terjejas mempunyai tiga subfolder.

template folders and files

Templat yang dipanggil adalah subfolder yang mengandungi semua fail yang membentuk templat laman web responsif serta beberapa subfolder tambahan. Jika anda menggunakan templat yang berbeza, anda boleh mengharapkan untuk mencari:

  • Folder imej yang mengandungi semua imej demo yang digunakan dalam templat.
  • Folder JS atau JavaScript dengan semua kod JavaScript yang diperlukan untuk templat berfungsi dengan betul. Secara umumnya, anda tidak perlu mengedit kandungan folder ini kerana JavaScript digunakan untuk fungsi tambahan seperti animasi atau pengesahan bentuk.
  • Folder CSS atau Styles yang mengandungi fail CSS yang perlu anda edit untuk menyesuaikan fon, warna, dan gaya visual yang lain.
  • Pelbagai fail HTML untuk halaman yang berbeza di laman web anda seperti index.html, about.html, contact.html, dan lain-lain.

2. Gantikan Kandungan Dummy

Klik dua kali fail index.html atau klik kanannya dan pilih Buka di Chrome (atau penyemak imbas apa sahaja yang anda gunakan). Apabila anda melihat templat di pelayar anda, anda dapat melihat terdapat gelangsar di mana anda perlu menggantikan imej dan kapsyen, seksyen perkhidmatan di mana anda perlu menambah maklumat anda sendiri, dan banyak lagi.

Cara termudah untuk mencari di mana untuk mengedit ialah klik kanan pada teks dan klik pada pautan Inspect.

Inspector window

Tingkap Inspektor akan muncul, dan anda akan dapat melihat kod HTML yang digunakan dalam templat laman web responsif HTML di sebelah kiri tetingkap dan jawapan kod CSS untuk gaya visual templat di kanan- sebelah tangan tingkap Inspektor.

Lihatlah kod HTML dan anda akan melihat baris kod yang mengandungi teks diserlahkan. Dalam contoh tangkapan skrin, tajuk yang saya periksa dan yang diserlahkan dalam tetingkap Inspektor ialah antara tag <3>, yang merupakan tag HTML. Tag dalam HTML terdiri daripada tag pembukaan dan penutup dan membentuk pasangan tag yang memegang elemen HTML yang sesuai. Sebagai contoh, tag <h1> dipanggil tag tajuk dan digunakan untuk memegang tajuk tingkat 1. Begitu juga, <p>tag memegang elemen HTML perenggan.

Untuk mengubah suai templat, anda perlu mengetahui teg mana yang memegang teks yang ingin anda edit dan carinya dalam editor kod. Kemudian, anda boleh menggantikan teks dengan anda sendiri.

Sekarang kita tahu mana tag yang perlu kita edit, sudah tiba masanya untuk membuka index.html file dalam editor kod seperti Teks Sublime. Klik kanan fail dan klik Open with Sublime Text (atau mana-mana editor kod lain).

Dengan fail HTML anda terbuka dalam editor kod, tatal ke bawah sehingga anda mencari teks yang sama yang anda periksa dalam penyemak imbas anda. Kemudian, klik di antara tanda <h3>, padam teks dummy, dan masukkan sendiri.

HTML file open

Seterusnya, klik di antara tanda <span>, padamkan teks, dan masukkan tagline ringkas atau teks deskriptif. Anda juga boleh memadam templat laman web yang anda tidak perlukan. Jika anda melihat tangkapan skrin di bawah, anda akan mendapati saya telah menggantikan teks pengepala dan memadamkan baris bawah perkhidmatan.

Website screenshot

Untuk mengedit keseluruhan laman utama dan halaman lain dalam templat, semua yang perlu anda lakukan ialah mengulangi proses ini berulang-ulang.

Sekarang, mari kita jelaskan bagaimana dengan mudah menggantikan imej dummy. Pertama, anda perlu meletakkan imej anda dalam folder HTML dalam folder template laman web responsif HTML anda. Kemudian, kembali ke penyemak imbas anda dan periksa bahagian halaman dengan imej.

Inspektor akan memberitahu anda nama imej serta tag mengandungi imej itu. Sekarang, anda boleh kembali ke editor kod dan cari kod itu. Kemudian, gantikan nama imej dengan nama imej anda dan simpan perubahan.

Cara Gaya Template Laman Web Responsif

Sekarang bahawa anda telah memasukkan kandungan anda sendiri, mari kita bincangkan cara meniru template. Dalam kes saya, template Moose termasuk beberapa skema warna pra-dibuat yang terletak dalam subfolder style > CSS > color. Ini bermakna saya boleh dengan mudah mengubah warna dengan menukar stylesheets di kepala dokumen untuk gaya warna pilihan saya.

Cari kod baris berikut dalam templat HTML:

<link href="style/css/color/red.css" rel="stylesheet">

Menukar nama ke blue.css akan menukar warna merah templat kepada warna biru:

Change the colors by changing the stylesheet

Anda juga boleh mengedit helaian gaya utama yang dipanggil style.css dan masukkan fon dan warna pilihan anda.

Moose HTML responsive website template

Cukup ikut prinsip penyuntingan HTML: pertama, periksa elemen yang anda mahu gaya, dan kemudian cari dalam file style.css dan eksperimen dengan nilai yang berbeza.

Cara Muatkan Fail Anda ke Pelayan

Langkah terakhir dalam membuat laman web responsif ialah untuk memuat naik fail anda ke pelayan hosting anda. Penyedia hosting anda sepatutnya menghantar e-mel kepada anda sebaik sahaja anda mendaftar dengan maklumat untuk pemindahan fail FTP.

Anda perlu melancarkan FileZilla (atau program FTP yang lain) dan kemudian masukkan maklumat yang diperlukan di bar atas. Ini bermakna anda perlu memasukkan nama pelayan, nama pengguna anda, dan kata laluan anda, kemudian klik pada QuickConnect:

QuickConnect

Kemudian, anda ingin mencari folder templat laman web responsif HTML di sebelah kiri program FTP dan memperluasnya dengan mengklik padanya. Dalam tetingkap di bawah, pilih semua kandungan dan seretnya ke sebelah kanan skrin FTP. Jatuhkan fail ke dalam folder akar pelayan hosting anda, yang biasanya folder public_html.

Tunggu proses muat naik selesai, dan kemudian buka penyemak imbas anda dan masukkan nama domain anda. Tapak anda sekarang perlu hidup.

4 Elemen Utama Laman Web Perniagaan Responsif Anda Perlu Sertakan

Sekarang bahawa laman web anda adalah hidup, penting bagi anda untuk memasukkan maklumat penting setiap laman web perniagaan yang perlu.

  1. Perihal dan Perkhidmatan Laman. Halaman mengenai memberitahu pengunjung tentang cerita bagaimana anda dapat membantu mereka. Dari sana, anda boleh mendapatkan penerangan ringkas tentang segala yang termasuk dalam perkhidmatan serta harga setiap pakej.
  2. Hubungi Halaman. Ia tidak mengatakan bahawa anda memerlukan halaman kenalan supaya pengunjung dapat menghubungi anda untuk menjadualkan panggilan atau untuk mengetahui lebih lanjut tentang anda.  Halaman hubungan anda harus menyertakan borang hubungan mudah, tetapi anda juga boleh menyenaraikan profil media sosial atau nombor telefon anda.
  3. Bukti Sosial. Potongan bukti sosial seperti testimonial, ulasan atau ciri-ciri dalam penerbitan lain akan memberikan kepercayaan dan kepakaran anda. Pertimbangkan termasuk beberapa daripada mereka di laman utama dan membuat halaman khusus yang akan menempatkan semua pujian semasa dan masa depan yang akan anda terima.
  4. Panggilan untuk Tindakan. Akhirnya, jangan lupa bahawa anda perlu membuatnya jelas bagi pelawat anda apa yang anda mahu mereka lakukan. Hanya menunjukkan perkhidmatan anda tidak akan berbuat banyak untuk menggalakkan mereka untuk benar-benar membuat panggilan. Sertakan beberapa panggilan untuk bertindak di laman utama anda dan buat jalan anda untuk mengambil tindakan.

Buat Laman Web Perniagaan Responsif Anda Hari Ini

Mewujudkan laman web perniagaan responsif adalah mudah untuk melakukan cara yang anda perlukan untuk mengubah suai. Gunakan tutorial kami untuk menyediakan laman web perniagaan anda, dan jangan lupa untuk menyemak koleksi template HTML responsif perniagaan kami untuk mencari yang sesuai untuk laman web anda.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.