Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Membina Template E-mel HTML Dari Scratch

by
Length:LongLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

Final product image
What You'll Be Creating

Cara terbaik untuk memahami apa-apa proses adalah untuk menjalankan sendiri, dari bawah ke atas. Hari ini, kami akan melakukannya dengan reka bentuk e-mel, dengan membina templat e-mel HTML dari awal.

Kick Things Off

Untuk bermula, ia bernilai menyebut di mana saya menarik beberapa sumber dari.

Sekarang, seperti yang kita bincangkan dalam tutorial terdahulu, anda perlu memulakan dokumen e-mel HTML anda dengan doctype XHTML:

Dengan yang disusun, kita boleh memulakan membina struktur yang lain.

Mewujudkan Badan dan Jadual Utama

Pertama, kami akan menambah struktur keseluruhan untuk e-mel kami, bermula dengan tag <body>. Kami akan menetapkan margin dan padding pada tag badan kepada sifar untuk mengelakkan sebarang ruang yang tidak dijangka.

Kami juga akan menambah jadual dengan lebar 100%. Ini bertindak sebagai tag badan yang benar untuk e-mel kami, kerana gaya tag tubuh tidak disokong sepenuhnya. Jika anda mahu menambah warna latar belakang ke 'badan' e-mel anda, anda perlu memohonnya ke meja besar ini.

Tetapkan sel pengedap dan sel ke ruang kosong untuk mengelakkan sebarang ruang yang tidak dijangka di dalam jadual.

Nota: Kami akan meninggalkan sempadan = "1" pada semua jadual kami, supaya kami dapat melihat rangka susun atur kami semasa kami pergi. Kami akan membuangnya pada akhir dengan Cari & Ganti yang mudah.

1

Sekiranya terdapat atribut dalam HTML, gunakannya bukannya CSS

Sekarang letakkan meja berpusat 600 piksel lebar di dalam jadual bekas. 600 piksel adalah lebar maksimum yang selamat untuk e-mel anda untuk memaparkan dengan selesa dalam kebanyakan klien desktop dan webmail pada kebanyakan resolusi skrin.

Tetapkan lebar ini menggunakan HTML dan bukan CSS, dengan menggunakan atribut lebar. Peraturan keemasan dalam perkembangan e-mel HTML adalah: jika ada atribut dalam HTML, gunakannya bukan CSS.

Kami akan menggantikan salam 'Hello!' Kami dengan jadual ini:

Kami juga telah menambahkan satu sifat gaya sebaris yang menetapkan harta runtuh sempadan untuk  runtuh. Jika kita tidak melakukan ini, versi Outlook yang lebih baru akan menambah ruang kecil di antara meja dan sempadan kita.

2

Mewujudkan Struktur dan Pengepala

Dalam reka bentuk kami, kami dapat melihat bahawa e-mel dibahagikan kepada tiga bahagian logik, jadi kami akan membuat satu baris untuk setiap satu.

Mari kita duplikat baris tunggal yang telah kita buat supaya kita mempunyai tiga jumlah. Saya telah menukar teks di dalamnya supaya kita boleh mengenali setiap baris dengan mudah.

3

Sekarang kita akan mewarna mereka mengikut reka bentuk. Oleh sebab bgcolor adalah atribut HTML yang sah, kita akan menggunakannya untuk menetapkan warna latar belakang dan bukannya CSS. Sentiasa ingat untuk menggunakan enam aksara penuh kod hex, kerana tiga watak pendek tidak akan berfungsi.

4

Ok, seterusnya kita akan fokus pada Row 1. Kami mahu menyesuaikan padding pada sel dan kemudian masukkan imej kami.

Menggunakan Padding

Apabila menggunakan padding dalam e-mel, anda mesti sentiasa menetapkan setiap nilai tunggal (atas, kanan, bawah dan kiri) jika tidak, anda boleh mendapatkan hasil yang tidak menentu. Saya dapati bahawa anda masih boleh menggunakan singkatan, iaitu padding: 10px 10px 8px 5px ;, tetapi jika anda menghadapi masalah, anda mungkin ingin menuliskan bentuk lama, iaitu padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px ;.

Sekiranya anda mengalami masalah yang lebih besar dengan padding (contohnya, jika platform menghantar anda menghilangkan CSS anda), jangan gunakannya sama sekali. Hanya gunakan sel kosong untuk mewujudkan ruang. Tidak perlu menggunakan GIF spacer, pastikan anda menambah style="line-height: 0; saiz fon: 0;" ke sel, letakkan &nbsp; di dalam dan memberikan ketinggian atau lebar yang jelas. Berikut adalah contohnya:

Juga perhatikan bahawa selamat menggunakan padding pada tag TD tetapi tidak pada tag P atau DIV. Mereka berkelakuan lebih tidak dapat diduga.

Jadi, kami akan menggunakan beberapa CSS dalam talian untuk menambah padding ke sel. Kemudian kami akan memasukkan imej kami, menambah alt teks dan menambah style ="display: block;" yang merupakan pembetulan biasa yang menghentikan beberapa pelanggan e-mel menambah jurang di bawah imej anda. Kami akan memusatkan imej dengan menambahkan align="center" ke tag tdk kami. Kami juga akan menambah tag alt yang penting apabila e-mel kami dimuatkan pada mulanya yang, dalam kebanyakan kes, akan dimatikan dengan imej.

Nota: Jika kandungan tajuk anda benar-benar penting untuk mesej anda, jangan gunakan pengepala imej sahaja. Ingat, imej disekat secara lalai untuk kebanyakan pelanggan, jadi jika terdapat aspek e-mel anda yang penting, jangan masukkannya sebagai imej. Dalam contoh ini, bagaimanapun, pengepala saya cukup berlebihan.

6

Mewujudkan Kawasan Kandungan

Mula-mula, kami akan menambah beberapa padding ke sel tengah supaya jadual di dalam mempunyai ruang di sekelilingnya, mengikut reka bentuk kami.

7

Kini kami akan menambah jadual dengan tiga baris untuk kandungan utama kami - satu untuk tajuk utama, satu untuk teks pengantar, dan satu untuk barisan dengan dua lajur. Kami akan menetapkan lebar jadual ini kepada 100% dan bukannya menggunakan nilai piksel kerana ini akan membantu kami melangkaui trek jika kami mahu membuat emel responsif kami. Jika anda sentiasa mempunyai lebar piksel pada segalanya, anda boleh berakhir dengan banyak nilai untuk mengatasi pertanyaan media. Jika lebar meja bersarang anda didasarkan pada peratusan, maka apabila anda melaraskan lebar elemen induk, semuanya akan disesuaikan dengan sewajarnya.

8

Kini kami akan menambah kandungan kami, dan menambah padding ke sel tengah.

9

Sekarang kita akan menambah dua lajur kandungan kami kepada Row 3. Kerana kita menginginkan 'margin' di antara dua sel tersebut, tetapi margin tidak disokong, kita akan membuat jadual tiga lajur dengan sel kosong di antara dua lajur luar.

Sebaik saya suka melekat pada peratusan, apabila anda mempunyai kandungan yang bersaiz tertentu, boleh menjadi rumit untuk mengubahnya menjadi peratusan (dalam contoh ini, lajur akan menjadi 48.1% yang boleh menjadi mengelirukan). Atas sebab ini, kerana dua imej kami adalah 260px lebar, kami akan membuat lajur yang juga 260px lebar, dengan sel margin 20px di tengah. (Ini akan berjumlah 540px, iaitu lebar 600px meja kami tolak padding 30px di kedua-dua sisi.) Pastikan anda sifar saiz fon anda dan ketinggian baris dan tambah watak ruang yang tidak pecah &nbsp; dalam sel margin.

Kami juga akan menetapkan selak ke "atas" untuk kedua-dua sel supaya mereka akan menegak secara menegak ke atas, walaupun satu lajur mempunyai lebih banyak teks daripada yang lain. Penjajaran menegak lalai adalah "tengah".

10

Sekarang mari kita tambahkan imej dan kandungan kami kepada lajur tersebut. Memandangkan kami memerlukan berbilang baris, kami akan sarang lagi jadual lain kerana kami tidak boleh menggunakan sebarang tag colspan atau rowspan. Kami juga akan menambah beberapa padding di antara imej dan menyalin di setiap lajur.

Di sini kita telah menetapkan lebar imej menggunakan HTML pada 100% lebar lajur. Ini, sekali lagi, supaya jika kami membuat e-mel ini responsif, kami hanya perlu menggunakan pertanyaan media untuk menukar lebar unsur induk. Kita perlu mengatasi ketinggian dalam pixel kerana menggunakan style = "height: auto" sekarang tidak akan berfungsi dalam segalanya (batuk batuk, Outlook). Jadi kami akan menetapkannya menggunakan piksel. Ini bermakna kita perlu menetapkan ketinggian:auto! Penting pada imej yang menggunakan pertanyaan media untuk menimpa nilai piksel, tetapi kita boleh melakukannya dengan satu kelas. Seperti yang kita tetapkan lebar sebagai peratusan, kita tidak perlu mengatasinya. Perkara yang lebih sedikit untuk mengatasi, lebih baik.

13

The Footer

Kini kami akan menambah padding kami ke baris footer.

14

Di dalam sel itu, kita akan sarang meja lain untuk mendapatkan dua tiang kami.

15

Kami akan membuat satu lagi jadual kecil untuk ikon media sosial kami. Kami akan menetapkan sel induknya untuk menyelaraskan="betul". Pastikan anda menetapkan sempadan="0" pada pautan imej ini (untuk mengelakkan sempadan pautan biru) dan jangan lupa paparan: blok.

17

Kini kami akan menambah teks kami dan menambah lebar ke sel kami, hanya untuk selamat, walaupun terdapat ruang kosong di antara mereka. Kami akan menetapkan sel ini kepada 75% dan yang lain hingga 25%.

Dan di sana kita memilikinya! Susun atur kami selesai.

Pengesahan

Mari lari melalui Validator W3C untuk memastikan tiada apa-apa yang buruk atau patah. Jika anda telah mengikuti dengan tepat, ia akan mengatakan bahawa ia telah berlalu.

email-build-valid

Seterusnya kami akan menjalankan ujian melalui Litmus untuk memastikan struktur e-mel kami berfungsi dengan baik. Berikut adalah ringkasan ujian saya:

email-build-litmus
Lihatlah dalam talian

Menggayakan Teks kami

Baris pertama kami adalah tajuk. Kami akan menggunakan tag <b> untuk membuat teks tebal kerana, seperti yang sudah kami ketahui, jika ia wujud dalam HTML, kami menggunakannya bukannya CSS.

Kami juga akan menambah gaya inline ini ke semua sel lain teks:

Seterusnya kita perlu menyusun teks footer, dan kita juga akan membersihkan pautan berhenti berlangganan kami. Kami akan menyusun pautan teks langganan kami menggunakan kedua-dua CSS dan tag HTML <font>. Dua kali ganda ini adalah cara terbaik untuk memastikan bahawa pautan anda tidak muncul dalam warna biru.

20

Dan di sana kita memilikinya! Segala-galanya berada. Masa untuk mematikan sempadan dan melihatnya kelihatan cantik. Teruskan dan gantikan setiap perbatasan="1" dengan sempadan="0".

21

Pada ketika ini, ia kelihatan sedikit sedih terapung di ruang putih, jadi mari kita pergi ke jadual lebar pertama 600px kami dan tambah:

Sekarang ia tidak kelihatan seperti ia terapung lagi. Sebagai sentuhan akhir, saya akan menambah 30px padding ke bahagian bawah sel pertama, untuk mengelakkan e-mel kami daripada berhenti tiba-tiba di bahagian bawah dalam beberapa klien webmail (seperti Apple Mail), dan 10px padding di bahagian atas , supaya tajuk biru kami mempunyai sedikit ruang pernafasan.

23

Dan itu sahaja! Anda sudah bersedia untuk ujian akhir.

email-build-litmus-finished
Lihatlah dalam talian

Itulah Pembungkus!

Sebelum kita memanggilnya sehari, jika anda telah menggunakan sebarang komen, hapuskannya. Sesetengah pelanggan e-mel boleh tersedak pada komen jadi paling bijak untuk tidak mempunyai sebarang kod yang tidak perlu di mana saja di dalam fail anda.

Kini adalah masa yang baik untuk melakukan ujian akhir, dan kemudian, e-mel HTML anda sudah bersedia untuk dihantar!

Untuk mengambil apa yang telah anda pelajari ke peringkat seterusnya, periksa tutorial seterusnya:

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.