आपकी वेबसाइट को अच्छा दिखने के लिए वेब पेज layout बहुत महत्वपूर्ण है,
इसलिये हमे अपने वेब पेज layout का layout बहुत ध्यानपूर्वक डिजाइन करना
चाहिए ।
वेबपेज में बहुत से columns <div> या <table> elements का प्रयोग करके बनाये जाते है। CSS का प्रयोग elements का स्थान निर्धारित करने के लिये, या पेज के लिये backgrounds या colorful look तैयार करने के लिये किया जाता है।
निम्न उदाहरण मे एक multiple column layout बनाने के लिये 5 div elements का प्रयोग किया गया है।
वेबपेज में बहुत से columns <div> or <table> elements का प्रयोग करके बनाये जाते है। CSS का प्रयोग elements का स्थान निर्धारित करने के लिये, या पेज के लिये backgrounds या colorful look तैयार करने के लिये किया जाता है।
निम्न उदाहरण मे 3 rows और 2 columns के साथ एक table बनाई गयी है – पहली और आखिरी row colspan attribute का उपयोग करके दोनो columns को span करती है।
नोट : क्योकि advanced layouts बनने मे बहुत टाइम लेते है, इसलिए template का उपयोग एक आसान तरीका है, free website templates के लिये आप Google में सर्च कर सकते है। (free website templates या templates एक pre-built website layouts होते है जिनमें आप थोडा सा अपनी आवश्यकता के अनुरुप बदलाव करके उपयोग कर सकते)
* Website के Layouts
ज्यादातर websites अपना content बहुत से columns मे बनाती है (magazine या newspaper की तरह).वेबपेज में बहुत से columns <div> या <table> elements का प्रयोग करके बनाये जाते है। CSS का प्रयोग elements का स्थान निर्धारित करने के लिये, या पेज के लिये backgrounds या colorful look तैयार करने के लिये किया जाता है।
नोट : यह भी संभव है कि हम HTML tables से layouts का निर्माण कर सकते है, पर tables को tabular data प्रदर्शित करने के लिये डिजाइन किया जाता है – ना कि एक layout tool की तरह! |
* <div> Elements का प्रयोग करके Layouts का निर्माण
The div element एक block level element है, जिसका उपयोग HTML elements को आपस मे जोडने (grouping) के लिये किया जाता है।निम्न उदाहरण मे एक multiple column layout बनाने के लिये 5 div elements का प्रयोग किया गया है।
<!DOCTYPE html> <html><body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> Content goes here</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright © http://mahaanindia.blogspot.in </div> </div> </body> </html> |
* Tables का प्रयोग करके Layouts का निर्माण
layouts बनाने का एक आसान तरीका HTML <table> tag का प्रयोग करके बनाना भी है।वेबपेज में बहुत से columns <div> or <table> elements का प्रयोग करके बनाये जाते है। CSS का प्रयोग elements का स्थान निर्धारित करने के लिये, या पेज के लिये backgrounds या colorful look तैयार करने के लिये किया जाता है।
निम्न उदाहरण मे 3 rows और 2 columns के साथ एक table बनाई गयी है – पहली और आखिरी row colspan attribute का उपयोग करके दोनो columns को span करती है।
<!DOCTYPE html><html><body> <table width="500" border="0"> <tr><td colspan="2" style="background-color:#FFA500;"> <h1>Main Title of Web Page</h1> </td></tr> <tr><td style="background-color:#FFD700;width:100px;"> <b>Menu</b><br>HTML<br> CSS<br>JavaScript</td> <td style="background-color:#EEEEEE;height:200px;width:400px;"> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> Copyright © mahaanindia.blogspot.in</td> </tr></table></body></html> |
Layout - Useful Tips (ध्यान रखें)
नोट : CSS को उपयोग करने का सबसे बडा लाभ यह है कि, यदि आप CSS code को एक बाहरी (external) style sheet मे रखते है, आपके लिये अपनी site को maintain करना बहुत आसान हो जायेगा। आप सिर्फ़ एक फ़ाइल मे बदलाव करके अपनी site के सभी पेजों के layout मे बदलाव कर सकते
नोट : क्योकि advanced layouts बनने मे बहुत टाइम लेते है, इसलिए template का उपयोग एक आसान तरीका है, free website templates के लिये आप Google में सर्च कर सकते है। (free website templates या templates एक pre-built website layouts होते है जिनमें आप थोडा सा अपनी आवश्यकता के अनुरुप बदलाव करके उपयोग कर सकते)
0 comments:
Post a Comment