** کینگ کد : بزرگترین مرجع دانلود سورس کد های برنامه نویسی اندروید، ویندوز و جدید ترین اسکریپت های روز دنیا **

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

** سورس فروشگاه اینترنتی مارکیت فارسی برای اندروید - سورس فروشگاه اینترنتی موکتز فارسی برای اندروید **

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

** اسکریپت چیست؟ و چگونه از آن استفاده کنیم؟ (آموزش کامل نصب اسکریپت) **

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

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

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

** دانلود فیلم آموزشی فتوشاپ فارسی **

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

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

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

آموزش مجازی

تبلیغات

پست ثابت

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

تبلیغات

پست ثابت

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

ساخت اسکلت یک سایت کامل

  • 611 بازدید
  • 08 مهر 1395
  • دیدگاه‌ها برای ساخت اسکلت یک سایت کامل بسته هستند
  • آموزش, آموزش html

اکنون آماده هستید که اسکلت یک سایت کامل را بسازید . کار من این است که کدهای مربوط به اسکلت یک سایت کامل را به شما بدهم و کار شما تنها یک چیز است و آن ((خرابکاری)) می باشد . نخندید کاملا جدی گفتم ، شما باید این کدها را کپی کرده و نتیجه را مشاهده کنید که یک اسکلت کامل برای سایت است سپس باید بخش های مختلف آن را دستکاری کنید و ببینید چه چیزهایی خراب می شود . تنها با این روش است که می توانید به چگونگی شکل گرفتن این اسکلت پی ببرید . نگران خرابکاری نباشید هر وقت که بخواهید کدهای صحیح در این صفحه در اختیار شما می باشد . البته من نیز توضیحاتی را در مورد کدها ارائه خواهم کرد .

کدها :

 

توضیحاتی در مورد کدها :

نحوه جداسازی بخش های مختلف سایت با تگ div :

در بخش body از فایل html ، با استفاده از تگ div ، بخش های مختلف سایت را جدا کرده ایم تا بتوانیم به هر یک به طور جداگانه مشخصه هایی را اختصاص بدهیم و همچنین نحوه چیدمان بخش های مختلف سایت در کنار هم را مشخص کنیم . به هر تگ div یک id اختصاص داده ایم زیرا کدهای CSS را در بخش head فایل html نوشته ایم و با استفاده از id است که تعیین می کنیم هر قسمت صفحه ( محتویات هر تگ div ) چه مشخصه هایی باید داشته باشد .

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

 

چگونگی نوشته شدن کدهای CSS :

کدهای CSS در قسمت head فایل html باید نوشته شوند ( یعنی بین دو تگ <head> و <head/> ) . شروع کدهای CSS را با تگ <“style type=”text/css> و پایان کدهای CSS را با تگ <style/> اعلام کرده ایم . سپس ابتدا باید مشخص کنیم که می خواهیم مشخصه ها را به کدام بخش سایت اعمال کنیم . اگر بخواهیم مشخصه ای را به محتویات یک تگ div اعمال کنیم باید ابتدا علامت # را نوشته و بعد از این علامت ، نام id مربوط به آن تگ div را بنویسیم . سپس یک علامت ((})) را نوشته و پس از آن مشخصه های مورد نظرمان را می نویسیم . چنانچه قصد نوشتن چند مشخصه را داشته باشیم باید آنها را با علامت ((;)) از یکدیگر جدا کنیم . پس از نوشتن تمامی مشخصه های مورد نظرمان ، علامت (({)) را به کار می بریم تا اعلام کنیم که مشخصه های آن تگ div پایان یافته است . برای سایر تگ ها نیز باید همین شیوه را اجرا کنیم و کدهای آنها را پشت سرهم بنویسیم .

همان طور که می بینید برای تعیین مشخصه های تگ های div ، ترتیب فراخوانی تگ های div دقیقا مثل ترتیب نوشته شدن کدهای آنها در بخش body فایل html می باشد .

 

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

 

نحوه چیدمان بخش های مختلف سایت در کنار هم :

نحوه چیدمان بخش های مختلف سایت باید به این شکل باشد که ابتدا header نمایش داده شود و سپس دو ستون اصلی سایت و بخش content باید در پایین قسمت header نمایش داده شوند . ما برای کنار هم قرار دادن دو ستون اصلی و بخش content از مشخصه float استفاده کرده ایم که باعث می شود تگ های div شناور شوند و موقعیت خود را بر اساس تگ div کنار خود ، تنظیم کنند . در کدهای CSS مشاهده می کنید که برای هر سه تگ div با id های sidebar1 ، sidebar2 و content ، مشخصه float به کار رفته است به این صورت که چون ابتدا کدهای sidebar1 در بخش body نوشته شده است پس ابتدا مشخصه float آن را به صورت left ( سمت چپ ) تعیین کرده ایم تا در سمت چپ صفحه قرار بگیرد ، سپس بخش content را داریم که مشخصه float آن را نیز برابر left تعیین کرده ایم تا به sidebar1 که در سمت چپ آن است بچسبد . سپس برای sidebar2 نیز مشخصه float را برابر left تعیین کرده ایم تا در کنار بخش content که در سمت چپ آن است بچسبد .

 

نکته : برای آنکه دو ستون اصلی و بخش content به درستی در کنار هم قرار بگیرند باید مجموع عرض هر سه بخش برابر عرض کل صفحه باشد وگرنه ممکن است sidebar2 در زیر sidebar1 و content قرار بگیرد . برای فهمیدن عرض هر بخش ابتدا باید در کدهای CSS نگاه کنید و ببینید عرض آن بخش چقدر تعریف شده است و علاوه بر این باید ببینید که این بخش ها دارای مشخصه padding-left یا padding-right هستند یا نه . زیرا باید میزان این مشخصه ها را به عرض تعریف شده اضافه کنید . به عنوان مثال در کدهای بالا عرض های تعریف شده به صورت درصد می باشند و زمانی که کل درصدها را برای sidebar1 ، content و sidebar2 جمع بزنید ، برابر 100 درصد خواهد شد .



سورس فروشگاه اینترنتی اندروید سورس کتاب اندروید
دانلود سورس موبوگرام دانلود سورس تلگرام

جعبه دانلود

ورژن :

پسورد فایل ها : www.kingcode.ir

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

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