logo2

-----------------------------------------------

** (160 جلسه) آموزش کامل و 0 تا 100 برنامه نویسی PHP **

آخرین مطالب ارسال شده

مطالب بر اساس ماه

تبلیغات

تبلیغات

پست ثابت

برای ورود کلیک کنید

تبلیغات

پست ثابت

برای ورود کلیک کنید

من قبل از اینکه طراحی سایت را یاد بگیرم چندین بار آموزش های مختلف html را در مراجع مختلف خوانده بودم اما آنقدر آن مراجع در مورد تگ ها و مشخصه های تگ ها توضیح می دادند که در نیمه راه خسته می شدم و آن را رها می کردم . تا اینکه در مرجعی که برای آموزش طراحی قالب سایت بود با تگ div آشنا شدم و یاد گرفتم که ابتدا با تگ های div ، اسکلت و ساختار اصلی سایت خود را بسازم و سپس هرگاه از بخشی از ظاهر این ساختار خوشم نیامد به سراغ یادگیری تگ های جدید بروم و با آنها سایت خود را بهتر و زیباتر کنم .

بنابراین در این مرحله شما را با تگ div آشنا می کنم ، شاید این آشنایی زود باشد اما حکمت دارد !!!

امروزه در اکثر سایت ها یک شکل برای بالای سایت (header) و یک ستون اصلی در وسط برای محتوای هر صفحه (content) ، دو ستون برای دو طرف ستون اصلی که شامل لینک ها ، اخبار کوتاه ، تبلیغات ، پیام ها و … می باشند (sidebar1 و sidebar2) و در پایین صفحه نیز بخشی برای تبلیغات ، معرفی شرکت صاحب سایت ، حقوق سایت و … (footer) ، به کار می رود . اما قبلا مشاهده کردید که مرورگر دستورات html را خوانده و بخش هایی را که باید نمایش دهد به صورت ستونی و پشت سرهم نمایش می دهد ، بنابراین ما به تگی نیاز داریم که با آن بخش های مختلف صفحه را از یکدیگر جدا کنیم و سپس بتوانیم بر روی هر بخش تغییرات مورد نظر خود را اعمال کنیم ، به گونه ای که این تغییرات چیدمان سایر بخش ها را به هم نریزد . تگ مورد استفاده برای این منظور ، تگ div می باشد .

 

نمایش اطلاعات دو div به صورت پشت سرهم :

در واقع این حالت ، حالت متداول است و چنانچه هیچ مشخصه ای برای نحوه قرارگیری تگ های div در کنار هم مشخص نکنید ، آنگاه خود به خود اطلاعات درون تگ های div پشت سرهم نمایش داده می شود .

نتیجه :

paragraph number 1

paragraph number 2

مشاهده می کنید که نتیجه با حالتی که از دو پاراگراف پشت سر هم استفاده کنیم یکسان است .

 

نمایش اطلاعات دو div به صورت دو ستون در کنار هم :

با مثال بعدی نشان خواهیم داد که چگونه می توانیم اطلاعات درون دو div را به صورت دو ستون در کنار هم قرار دهیم :

نتیجه :

paragraph number 1

paragraph number 2

 

این بار اطلاعات درون دو تگ div در دو ستون کنار هم نمایش داده شده اند و دلیل آن استفاده از مشخصهstyle=”float:left” می باشد . این مشخصه ، تگ های div را به صورت شناور در می آورد و با تعیین جهت left برای float ، باعث شده ایم که تگ div دوم در سمت راست تگ div اول قرار بگیرد . دقت شود که در تگ div اول از مشخصه padding-right:100px استفاده کرده ایم که باعث می شود به اندازه 100 پیکسل از محتویات تگ div دوم که در سمت راست آن قرار خواهد گرفت ، فاصله بگیرد .

 

نکته : مشخصه style مربوط به CSS می باشد . CSS شیوه ای است که با استفاده از آن می توانید حجم کدنویسی خود را به نحو چشمگیری کاهش دهید . در واقع از شیوه CSS به روش های مختلفی می توان استفاده نمود که روش فوق ساده ترین حالت آن ، اما نه بهترین انتخاب ، می باشد . در مباحث بعدی شکل دیگری از استفاده از شیوه CSS را برای شما شرح خواهم داد .

جعبه دانلود

ورژن :

پسورد فایل ها : www.scriptbaran.com

قابل توجه مدیران وبسایت های ایرانی : تمامی مطالب سایت اسکریپت باران بصورت اختصاصی ترجمه و منتشر می شوند و کپی برداری از آن ها فقط با ذکر نام منبع مجاز است.

  • 1. از نوشتن دیدگاه های غیر مرتبط با پست جدا خودداری کنید ؛ پرسش های غیرمرتبط را در انجمن مطرح کنید
  • 2. در خواست های خود برای اسکریپت ها و افزونه ها را فقط از طریق تماس با ما ارسال کنید.
  • 3. فقط فارسی تایپ کنید و برای سوال مجدد در صفحه از دکمه پاسخ دادن استفاده نمایید.
  • 4. قبل از ارسال کامنت حتما متن پست + نظرات سایر دوستان را بخوانید .
  • 5. نظر شما ممکن است بدون پاسخ تایید شوند که در این صورت باید منتظر پاسخ از سوی دیگر کاربران باشید .

به اسکریپت باران امتیاز دهید