با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. همانطور که در ابتدای دوه نیز اشاره کردیم صفحات وب از عناصر HTML تشکیل شده اند. اما این عناصر در حالت عادی ظاهری ندارند و اغلب غیر قابل مشاهده می باشد، این CSS است که برای هر یک از عناصر یک صفحه وب Style خاصی را تعریف کرده و ظاهر آن ها را ایجاد می کند، بنابراین کاربرد کلی CSS طراحی وب سایت است، در این بخش قصد داریم تا با آموزش هایی که تاکنون از CSS مرور کرده ایم چگونگی طراحی وب سایت در CSS را بررسی کنیم، در این آموزش ما نمونه ی ساده ای از استاندارد طراحی وب سایت در CSS را ارائه کرده ایم.
در ادامه ی مباحث ، چگونگی طراحی وب سایت در CSS را با ارائه ی طراحی هر کدام از بخش های قالب وب سایت بررسی کرده ایم.
یک وب سایت اغلب شامل بخش های header, menu, محتوا و یک footer می باشد.
طرح های مختلفی برای قالب یک وب سایت وجود دارد که طرح فوق یکی از رایج ترین هاست.
یک header معمولا در بخش بالایی وب سایت قرار می گیرد، که معمولا شامل لوگو و یا نام وب سایت است:
1 2 3 4 5 | .header { background-color: #F1F1F1; text-align: center; padding: 20px; } |
نتیجه :
یک نوار navigation شامل لیستی از لینک برای کمک به ویزیت بخش های مختلف وب سایت است:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /* The navbar container */ .topnav { overflow: hidden; background-color: #333; } /* Navbar links */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Links - change color on hover */ .topnav a:hover { background-color: #ddd; color: black; } |
نتیجه :
ساختار طراحی صفحات وب اغلب بستگی به هدف شما دارد، اغلب طراحی ها شامل یک یا چند ستون است:
برای نمونه ما یک طراحی ۳-column ایجاد می کنیم به طوری که برای صفحه نمایش های کوچکتر به ۱-column تبدیل شود:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* Create three equal columns that floats next to each other */ .column { float: left; width: 33.33%; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */ @media screen and (max-width: 600px) { .column { width: 100%; } } |
نتیجه:
محتوای اصلی بزرگترین و مهمترین بخش سایت شماست.
معمولا محتوای اصلی بیشترین فضا را در برمی گیرد و محتوای جانبی نیز در حاشیه شامل اطلاعاتی مرتبط با محتوای اصلی هستند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .column { float: left; } /* Left and right column */ .column.side { width: 25%; } /* Middle column */ .column.middle { width: 50%; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; } } |
نتیجه:
footer در پایین قالب وب سایت قرار گرفته و اغلب شامل اطلاعات copyright و اطلاعات کاربران است.
1 2 3 4 5 | .footer { background-color: #F1F1F1; text-align: center; padding: 10px; } |
نتیجه :
Footer
با استفاده از کدهای CSS فوق ما یک وب سایت با قابلیت Responsive ایجاد می کنیم. که متناسب با اندازه های مختلف صفحه نمایش ها نمایش داده شود:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 | <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } body { font-family: Arial; padding: 10px; background: #f1f1f1; } /* Header/Blog Title */ .header { padding: 30px; text-align: center; background: white; } .header h1 { font-size: 50px; } /* Style the top navigation bar */ .topnav { overflow: hidden; background-color: #333; } /* Style the topnav links */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change color on hover */ .topnav a:hover { background-color: #ddd; color: black; } /* Create two unequal columns that floats next to each other */ /* Left column */ .leftcolumn { float: left; width: 75%; } /* Right column */ .rightcolumn { float: left; width: 25%; background-color: #f1f1f1; padding-left: 20px; } /* Fake image */ .fakeimg { background-color: #aaa; width: 100%; padding: 20px; } /* Add a card effect for articles */ .card { background-color: white; padding: 20px; margin-top: 20px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Footer */ .footer { padding: 20px; text-align: center; background: #ddd; margin-top: 20px; } /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; } } /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */ @media screen and (max-width: 400px) { .topnav a { float: none; width: 100%; } } </style> </head> <body> <div class="header"> <h1>My Website</h1> <p>Resize the browser window to see the effect.</p> </div> <div class="topnav"> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#" style="float:right">Link</a> </div> <div class="row"> <div class="leftcolumn"> <div class="card"> <h2>TITLE HEADING</h2> <h5>Title description, Dec 7, 2017</h5> <div class="fakeimg" style="height:200px;">Image</div> <p>Some text..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> <div class="card"> <h2>TITLE HEADING</h2> <h5>Title description, Sep 2, 2017</h5> <div class="fakeimg" style="height:200px;">Image</div> <p>Some text..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> </div> <div class="rightcolumn"> <div class="card"> <h2>About Me</h2> <div class="fakeimg" style="height:100px;">Image</div> <p>Some text about me in culpa qui officia deserunt mollit anim..</p> </div> <div class="card"> <h3>Popular Post</h3> <div class="fakeimg"><p>Image</p></div> <div class="fakeimg"><p>Image</p></div> <div class="fakeimg"><p>Image</p></div> </div> <div class="card"> <h3>Follow Me</h3> <p>Some text..</p> </div> </div> </div> <div class="footer"> <h2>Footer</h2> </div> </body> </html> |
نتیجه :
طراحی وب سایت در CSS یکی از اصلی ترین بخش های ایجاد و توسعه ی یک وب سایت به شمار می رود چراکه در این مرحله ظاهر بخش های مختلف وب سایت و قابلیت هایی نظیر Responsive ایجاد می شود.
Mahdi
سلام بسیار عالی بود موفق باشید 🙂