👩‍🌾 📰 📚 मेलिंग सूचियों का लेआउट: डिब्रीफिंग 💇🏾 😽 📦

अपने पिछले विषयों में, मैंने केवल डाक के लेआउट के बारे में एक शुष्क सिद्धांत दिया था, और मुझे लगता है कि अभ्यास का समय आ गया है। पाठक पिछले लेखों के बारे में मौलिक रूप से नई जानकारी नहीं देगा, लेकिन यह देखेगा कि मेरे द्वारा पहले बताई गई सलाह व्यवहार में कैसे लागू होती है। एक उदाहरण के रूप में, हम एक काल्पनिक कंपनी की मेलिंग सूची का उपयोग करेंगे (मैंने इसे खुद आकर्षित किया)। आप अपने आप को लेआउट के साथ परिचित कर सकते हैं, और फिर लेआउट के साथ, कट पर।

के लिए याद किया

मेलिंग सूचियों का लेआउट
प्रयोज्यता मेलिंग सूची
मेलिंग सूचियों का लेआउट: एक आंतरिक रूप

आधार

एक आधार के रूप में हम 710px में शून्य इंडेंट और पतन के साथ तालिका लेते हैं। जैसा कि पहले के विषयों में लिखा गया था, एमएस आउटलुक में कोशिकाओं के बीच एकल-पिक्सेल इंडेंटेशन से बचने के लिए पतन आवश्यक है। हमने बेस फ्रेम करने के लिए ग्रे फ्रेम भी सेट किया है।

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <table width="710" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border:#cccccc 1px solid;"> <tr><td border="0" style="border:none;"></td></tr> <tr><td border="0" style="border:none;"> </td></tr> <tr><td border="0" style="border:none; border-top:#1667b2 5px solid;"></td></tr> </table> </body> </html>

टोपी

इस उदाहरण में, हेडर काफी सरल है, और इसमें प्रयुक्त टेक्स्ट हाइलाइटिंग और कॉपी-पेस्ट के लिए महत्वपूर्ण नहीं है, इसलिए पूरे हेडर को एक तस्वीर से सजाया जा सकता है। क्लिक-संवेदी क्षेत्र (उदाहरण के लिए, शीर्ष लेख में अधिक जानें बटन) मानचित्र टैग पर आधारित होते हैं।

 <map id="map" name="map"><area shape="rectangle" coords="700,200,602,162" href="http://domain.com" alt="learn more" /></map> <img width="710" height="195" src="http://habrastorage.org/storage/2eaa88b4/0e1af19d/85f2e20d/e389e5e2.png" usemap="#map"/>

शरीर का अक्षर

पत्र के मुख्य भाग में अधिक जटिल संरचनाएं शामिल होंगी, इस सरल कारण के लिए कि स्पेसर्स का उपयोग करके सभी इंडेंटेशन का प्रदर्शन किया जाएगा। आपको याद दिला दूं कि blank.gif स्पेसर के रूप में कार्य करता है (एक एकल-पिक्सेल पारदर्शी .gif फ़ाइल 1450821408255127738039) है, जो हर जगह एक लोहे के लेआउट की गारंटी देता है।

पत्र का मुख्य कोड थोड़ा बड़ा था, इसलिए यह पेबिन पर निहित है , लेकिन आपको डर नहीं होना चाहिए, यह काफी पठनीय है। कोड नेस्टेड टेबल की बहुतायत को वॉल्यूम देता है।

चेतावनी! इंडेंटेशन की नकल के संबंध में एक और महत्वपूर्ण बिंदु। Gif अकड़ ऊंचाई में मानक रेखा-ऊंचाई से कम नहीं हो सकती। इसलिए, उदाहरण में अक्षर का शरीर कोड (सूचियों के मामले में), आप ऊंचाई स्पेसरों को कम करने का एक तरीका देख सकते हैं। यह इस तरह से चलता है:

 <tr><td height="5"><div style="line-height:0;"><img src="1450821408255127738039" width="5" height="5" /></div></td></tr>

सबसे अधिक picky के लिए। मैंने सूची में वर्ग आइकन के लिए एक इकाई का चयन नहीं किया, इसलिए मैंने "टैम्बोरिन" इकाई डाली। यदि आप एक वर्ग चाहते हैं, तो इकाई की तलाश करें या चित्र के साथ बदलें। कुछ स्थानों पर, कोल्प्सन कोशिकाओं के मूल्यों में विसंगतियां हो सकती हैं। कभी-कभी उन्हें बिल्कुल संकेत नहीं दिया जा सकता है, लेकिन मैं आदत से संकेत देता हूं। दुर्घटना में विफलता भी हमेशा नेतृत्व नहीं करती है। लेकिन वैसे भी, हमेशा पत्र भेजने से पहले टेस्ट मेलिंग का आयोजन करें, भले ही टेम्प्लेट में थोड़ा बदलाव आया हो।

फ़ुटबाल

नीला पाद सीमा, जैसा कि आपने देखा होगा, लेआउट के आधार पर भी संकेत दिया गया था। संपर्क जानकारी के लिए, हम इंडेंट स्पेसर्स के साथ दो-स्तंभ तालिका बनाएंगे।

 <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border:none;" border="0"> <tr> <td width="20" height="20"><img src="1450821408255127738039" width="20" height="20" /></td> <td/> <td/> <td width="20" height="20"><img src="1450821408255127738039" width="20" height="20" /></td> </tr> <tr> <td/> <td align="left"> <span style="font-family:Tahoma; font-size:12px; color:#404040;">domain.com (c) 2011<br/><a href="%unsucscribe_link%" target="_blank" style="font-family:Tahoma; font-size:12px; color:#404040; text-decoration:none;">unsucsribe</a> from all lists</span> </td> <td align="right"><span style="font-family:Tahoma; font-size:12px; color:#404040;">St.Petersburg +7(812)123 45 67 <br/> Moscow +7(495)123 45 67</span></td> <td/> </tr> <tr> <td width="20" height="20"><img src="1450821408255127738039" width="20" height="20" /></td> <td/> <td/> <td width="20" height="20"><img src="1450821408255127738039" width="20" height="20" /></td> </tr> </table>

मैं आपको इस तथ्य पर ध्यान देने के लिए कहता हूं कि लाइन domain.com 2011 के बाद पाद कोड में, साथ ही पीटर के फोन नंबर के बाद, टैग br डाल दिया जाता है (किसी कारण के लिए हब्बरपर्स इसे खाता है)। मैं समाचार पत्र से सदस्यता समाप्त करने के लिंक पर भी ध्यान केंद्रित करना चाहता हूं। हमने जानबूझकर इसे पाठ का रंग बना दिया और एक अंडरलाइन के रूप में सजावट को हटा दिया, जिससे लिंक न्यूनतम रूप से ध्यान देने योग्य हो जाता है, लेकिन साथ ही हम अच्छे हैं - हमने पत्र के शरीर में सदस्यता समाप्त करने के लिए लिंक डाला।

PS मुझे नहीं पता कि मैंने आपके मस्तिष्क को मेरे उदाहरणों से कितना उड़ाया है, लेकिन यदि आप अधिक जटिल लेआउट के विश्लेषण में रुचि रखते हैं, तो लिखें, हम इसे करेंगे! :)

UPD: और यहाँ उन्होंने मुझे मामले में सही किया।

मेलिंग सूचियों का लेआउट: डिब्रीफिंग

के लिए याद किया

आधार

टोपी

शरीर का अक्षर

फ़ुटबाल

More articles: