01.10.2013 01:04
73845
طرح لاستیکیسایت (و همچنین طرح ثابت) با ایجاد به اصطلاح اسکلت یا چارچوبی برای توسعه بیشتر شروع می شود. به طور کلی، html layout یک سازنده است. ابتدا کانتینر اصلی ایجاد می شود که اساس آن بعداً مسئولیت حداقل و حداکثر عرض کل سایت، مرزها را بر عهده خواهد داشت. اگر همه کارها را به درستی انجام دهید، با تغییر حداکثر اندازه، می توانید حداکثر اندازه سایت را به عنوان مثال از 1280 پیکسل به 1360 پیکسل یا 1920 پیکسل با تغییرات کم یا بدون تغییر کد (و گاهی اوقات اصلاً بدون آنها) افزایش دهید. شما نباید لاستیک بی نهایت بسازید زیرا در نمایشگرهای بزرگ قابل خواندن نیست. گزینه ایده‌آل طرح‌بندی html است که شامل تمام وضوح‌های اصلی صفحه، از جمله موارد موبایل، به عنوان مثال، طرح‌بندی لاستیکی برای وضوح صفحه نمایش از 240 پیکسل تا 1920 پیکسل است.
انواع مختلفی از طرح بندی html وجود داردکه از نظر بصری متفاوت است. قبل از اینکه به ساخت عملی قاب برویم، به طور خلاصه این نوع چیدمان را در نظر می گیریم:
از نظر ظاهری انواع مختلف چیدمان عبارتند از: چیدمان سیال، چیدمان ثابت، چیدمان تطبیقی. چیدمان واکنشگرا را می توان با چیدمان سیال ترکیب کرد.
ویژگی های هر نوع چیدمان:
1) چیدمان ثابت- قابلیت کانتینر اصلی سایت برای داشتن همان عرض بدون توجه به وضوح مانیتور. اگر صفحه نمایش کوچکتر از اندازه ثابت ظرف اصلی باشد، اسکرول جانبی (پیمایش چپ به راست) ظاهر می شود.
2) طرح لاستیکی- قابلیت کشش کانتینر سایت اصلی از و به اندازه های حداقل و حداکثر تعیین شده. چیدمان سیال می‌تواند بدون تعیین حداقل (در صفحه‌های کوچکتر از Npx خیلی مناسب به نظر نمی‌رسد، اگر سازگاری اضافه نشود، اشیاء استاتیک می‌توانند روی یکدیگر همپوشانی داشته باشند) یا حداکثر اندازه باشد، سپس به طور نامحدود گسترش می‌یابد (تصور کنید یک مقاله چگونه خواهد بود. با وضوح 7000 پیکسل، عملا در یک خط)، بنابراین طرح بندی خوب html همیشه محدودیت های معقولی دارد. بنابراین، شما همیشه باید نتیجه چیدمان را در رزولوشن های مختلف و در مرورگرهای مختلف بررسی کنید.
3) چیدمان تطبیقی- توانایی کانتینر اصلی و هر یک از عناصر سایت برای انطباق با وضوح صفحه، بنابراین به شما امکان می دهد اندازه فونت، محل اشیاء، رنگ و هر چیزی را که می خواهید تغییر دهید. علاوه بر این، این کار به صورت پویا و بدون اقدام کاربر انجام می شود، به عنوان مثال، با استفاده از پرس و جوهای رسانه ای که به شما امکان می دهد به طور خودکار وضوح مانیتور، نوع دستگاه (موبایل، گوشی هوشمند، تبلت) را تعیین کنید و مقادیر مشخص شده را به طور خودکار جایگزین کنید. این فرصت های بزرگی می دهد. به عنوان مثال، هنگام ترکیب یک چیدمان سیال با یک طرح تطبیقی، می‌توانید نمایش سایت را سفارشی کنید، از کوچک‌ترین رزولوشن‌های موبایل شروع کنید و به بزرگترین نمایشگرها ختم کنید. چیدمان تطبیقی بر امکانات لاستیکی یا چیدمان ثابت تأثیر نمی گذارد، آنها را تکمیل می کند.
بنابراین، بهترین گزینه امروزی طرح html خواهد بود، که در اصل به عنوان یک طرح بندی سیال ساخته شده است، به عنوان مثال 980px-1920px، با استفاده از طرح تطبیقی به 240px ارتقا یافته است. همیشه باید تفاوت اصلی را به خاطر بسپارید:
چیدمان لاستیکی کار می کندفقط با کانتینرها، در حالی که چیدمان تطبیقی هم با کانتینرها و هم با محتوای آنها کار می کند، به شما این امکان را می دهد که اشیایی مانند فونت ها را تغییر دهید، یک شی را با شی دیگری جایگزین کنید، و موارد دیگر بسته به وضوح صفحه یا دستگاه. بنابراین سعی کنید در برنامه ریزی و ایجاد پروژه های خود به این نکته توجه داشته باشید و به یاد داشته باشید که امروزه چیدمان سیال در ترکیب با چیدمان تطبیقی شکل خوبی در ساخت وب سایت محسوب می شود و فردا ممکن است به استانداردی ناگفته تبدیل شود. بنابراین، برای اینکه بعداً مجبور به عقب نمانیم، بهتر است امروز جلوتر باشیم و ترکیب فوق را برای خودمان عادی کنیم.
همچنین ارزش آن را دارد که در هنگام طرح بندی به اعتبار سایت نیز توجه شود. این عقیده وجود دارد که امروزه اعتبار حداقل در موتور جستجوی گوگل بر عملکرد تأثیر می گذارد. بنابراین، هنگام ایجاد یک پروژه، همیشه ارزش دارد که به اعتبارسنجی آنلاین نگاه کنید و اعتبار را بررسی کنید، و در صورت امکان، وجود خطاها را تا حد امکان به حداقل برسانید. معمولاً صفحه اصلی سایت از نظر اعتبار بررسی می شود. طبق آن مرسوم است که اعتبار سایت مشخص شود. همچنین لازم به ذکر است که اکثر CMS ها در برخی مکان ها دارای کدهایی هستند که از اعتبار سنجی عبور نمی کنند.
اغلب اوقات این را می توان در اخبار کامل مشاهده کرد، جایی که یک ویرایشگر بصری وجود دارد، به خصوص با استفاده بیش از حد از قالب بندی و انواع برجسته سازی توسط خود ویرایشگر. اما بدون این، هیچ جا، بنابراین اگر صفحه اصلی سایت اعتبار سنجی شود، این نتیجه کاملاً شایسته خواهد بود و در صورت امکان می توان صفحات داخلی را منتقل کرد. گاهی اوقات شما مجبور هستید حتی در موتور ویرایش کنید، که همه نمی توانند انجام دهند، بنابراین همه چیز نیاز به یک معیار معقول دارد و اعتبار باید یک اتفاق معمول برای یک طراح چیدمان باشد، یک هنجار روزمره، اما در عین حال به یک شیدایی تبدیل نشود. شما را مجبور می کند که اعتبار را به خاطر اعتبار انجام دهید. شما فقط باید سعی کنید تا آنجا که ممکن است این کار را انجام دهید و تعداد خطاها را در حد توانایی خود به حداقل برسانید. در نهایت اگر یک دوجین یا دو خطا وجود داشته باشد، سایت از کار نمی افتد، بنابراین شما نیز نباید از آنها ترسید.
حالا بیایید به ساخت قاب سایت برویم.، که از طرح لاستیکی استفاده می کند:
اول، ما باید یک استاندارد مشترک، مانند همیشه، یک doctype، تگ های سرویس بسازیم و محتوای سایت آینده را بین تگ ها قرار دهیم.
این همان چیزی است که بدنه اولیه سایت به نظر می رسدکه هنوز حتی قاب و بلوک های داخلی ندارد. این فقط اطلاعات لازم برای مرورگر است، یک کتابخانه آنلاین برای درک html5، زیرا هنوز فقط یک توصیه است، و مشخصات هنوز html 4.1 است، اگرچه html5 در حال حاضر به طور گسترده با قدرت و اصلی استفاده می شود. همچنین در تگ های سرویس متا تگ ها، یک عنوان و یک فایل سبک css برای طراحی بصری قاب ما قرار داده شده است.
برای ایجاد قاب اصلی، که به 240 پیکسل کاهش می یابد و به 1920 پیکسل افزایش می یابد و اگر وضوح بیشتر از 1920 پیکسل تراز وسط باشد، باید ظرف را بلافاصله بعد از برچسب بدنه قرار دهید و قبل از تگ بدنه بسته شدن آن را ببندید. تمام مابقی چاشنی از قبل باید داخل آن اجرا شود.
معمولاً این ظرف را با نام های مشابهی مانند wrap، wrapper و غیره می نامند، به این معنی که یک بلوک پوششی است که تمام محتویات طرح اصلی، بلوک ها، محتوا را شامل می شود. بنابراین، ما چرخ را دوباره اختراع نخواهیم کرد و سعی می کنیم از نام های کلاس های پذیرفته شده استفاده کنیم.
کلاس نوعی نام مستعار برای هر کانتینری است که می توان آن را یک بار نوشت و در هر جایی، تعداد نامحدودی بار استفاده کرد.
به عنوان مثال، اگر شما یک کلاس در سبک های css بنویسید، فرض کنید redblock، و یک رنگ پس‌زمینه قرمز به آن اختصاص دهید، سپس هر بلوکی که این کلاس را به آن اختصاص دهید، رنگ پس‌زمینه قرمز خواهد داشت. تعیین کلاس بسیار ساده است. در علامت نقل قول به بلوک مورد نظر نام دلخواه داده می شود، به عنوان مثال، redblock یا wrapper یا privetvasya. این یک کلاس انتزاعی است که شما خودتان با آن آشنا می شوید، مانند یک نام مستعار برای یک توله سگ.
بنابراین، ظرف بسته بندی ما، که ما تصمیم گرفتیم کلاس wrapper را به آن اختصاص دهیم، می تواند به شکل زیر باشد:
اما، از آنجایی که مطمئن هستیم که تنها یک محفظه پوششی در کل سایت خواهیم داشت، بهتر است که به آن یک شناسه اختصاص دهیم تا یک کلاس. شناسه با کلاس تفاوت دارد زیرا می توان از کلاس به اندازه دلخواه استفاده کرد و شناسه می تواند فقط یکی در صفحه باشد. شناسه دارای اولویت بالاتری است، زیرا یکی است، می توان به طور خاص به آن پرداخت. این را می توان با صف در ایستگاه مقایسه کرد. همه شنیدند که چگونه در ایستگاه راه آهن اعلام کردند ، به عنوان مثال ، شهروند کوتوزوا آدلینا ماتویونا ، به اعزام کننده بروید ...
در این مورد، خطاب به یک شهروند با نام کامل، آنالوگ یک شناسه در html است (آنها همچنین می گویند ID، ID، ID). و درخواستی مثل مسافران عزیز ارسال قطار ..
با کلاس قابل مقایسه خواهد بود، زیرا جذابیت برای همه مسافران است، بدون جذابیت خاص.
وجود شناسه استفاده از کلاس را منعی نمی کند و همان نام کلاس و شناسه (ID) متفاوت است و شما می توانید با کلاس یا شناسه به چنین بلوکی مراجعه کنید.
برای مثال:
یک اتفاق رایج که به شما امکان می دهد از چند طریق به این بلوک دسترسی داشته باشید. اما این اطلاعات عمومی است، برای گرم کردن. این درس فرض می‌کند که شما قبلاً حداقل درک و درک نظری از موارد فوق دارید.
بنابراین، بیایید روندی به نام طرح‌بندی وب‌سایت را پیچیده نکنیم، که بر اساس آن بلوک ما همچنان یک شناسه خواهد داشت و نه یک کلاس، این تنها در نوع خود است، اما در اینجا نیز به کلاس اضافی نیاز نداریم. بنابراین بگذارید اینگونه باشد:
قاب آماده است، اکنون طبق قوانین html5، از تگ های معنایی استفاده خواهیم کرد که درک ساختار را برای موتورهای جستجو آسان تر می کند تا نکته اصلی مورد توجه قرار نگیرد. باز هم تکرار می‌کنم، شرح برچسب‌ها را در این درس بارگذاری نمی‌کنیم، برای این بخش ویژه‌ای وجود دارد که تگ‌های html را با جزئیات، با نمایش و فرصت آزمایش به تنهایی توضیح می‌دهد.
اجازه دهید توجه شما را به این واقعیت جلب کنم که در ابتدا به قانون اصلی عادت کنید - بخش محتوا در چشم موتورهای جستجو وزن بیشتری دارد، در ساختار بالاتر است. بنابراین، هنگام چیدمان، باید با رعایت این قانون، این را در نظر بگیرید:
ستون‌های کناری و پاورقی باید در کد منبع پایین‌تر از قسمت اصلی باشد که باید با برچسب مقاله برجسته شود و محتوای اصلی را به موتور جستجو نشان دهد. علاوه بر این از تگ های header, main, article, side, footer استفاده خواهیم کرد که هدف اول از همه نشان دادن اهمیت و اولویت های معنایی در ساختار است. بنابراین، طرح‌بندی در عین حال غیر لاستیکی ما، پس از افزودن این برچسب‌ها، به شکل زیر خواهد بود:
کد html
نمایش کد
قاب قالب
برای سایت آینده
محتوا
html ما به این شکل خواهد بود، اما برای تجسم چیدمان خود باید از استایل های css استفاده کنیم. برای انجام این کار، همانطور که انتظار می رفت، فایل استایل css خود را در head قرار دادیم. اکنون می توانیم به هر بلوک بپردازیم.
برای این کار، کلاس‌ها و شناسه‌هایی در بالا به آنها اختصاص داده شد تا یک div را با دیگری اشتباه نگیرند. این در مورد برخی از تگ های معنایی که به صورت مفرد داریم صدق نمی کند، زیرا می توانیم آنها را با نام به عنوان یک برچسب، حتی بدون کلاس و شناسه، ارجاع دهیم. این کار باعث کاهش حجم فایل استایل می شود و تاثیری در نتیجه نخواهد داشت.
بنابراین، با کد html، من فکر می کنم همه چیز واضح است، این فقط یک قاب بدون چهره در آینده است، و طرح لاستیکی با دستکاری کلاس های css به دست می آید. چیدمان پاسخگو ریشه های یکسانی دارد، css است. آنها به شما این امکان را می دهند که طرح بندی را به صورت زنده و متناسب با اندازه صفحه نمایش دهید. بنابراین، اقدامات بعدی با فایل سبک css انجام خواهد شد.
ما به هر ورودی نمی پردازیم، زیرا این استانداردی است که در هر فایل سبک یافت می شود. ما فقط روی روشی تمرکز می‌کنیم که به ستون‌های کناری اجازه می‌دهد ثابت بمانند، در حالی که بخش مرکزی از حداقل به حداکثر عرضی که خودمان تعیین می‌کنیم کشیده می‌شود، که بین 240 تا 1920 پیکسل خواهد بود.
حالا قبل از اینکه به بررسی کد css بپردازیم(که در آن هیچ چیز اضافی وجود ندارد ، من فقط آنچه را برای این درس لازم است گذاشتم ، به علاوه یک پس زمینه برای بلوک ها برای دید و حداقل ارتفاع اضافه کردم تا بلوک ها به خوبی دیده شوند) ، بیایید به چند نکته توجه کنیم:
1) اگر دقت کنید فوتر خارج از ظرف اصلی است. این تصادفی نیست، زیرا چنین ترتیبی فشار دادن پاورقی را به پایین ممکن می کند. من فکر می‌کنم بسیاری در وب‌سایت‌ها پاورقی را دیده‌اند که در هر مقیاسی در پایین باقی می‌ماند. و بسیاری می خواستند بدانند چگونه این کار انجام می شود. بنابراین، مکانیسم را در طول مسیر توضیح خواهم داد، پس از آن همه چیز مشخص خواهد شد.
2) بسیاری که در سایت یک فوتر و سربرگ 100٪ قابل کشش و یک مرکز لاستیکی دیده اند، قبلاً این را یک طراحی تطبیقی می دانند. این کاملا درست نیست، سازگاری یک مفهوم گسترده تر و تحولات پیشرفته تر است، اما در این درس به این موضوع توجه نشده است. با این حال، تحمیل لاستیک می تواند انواع مختلفی داشته باشد، از جمله نوع فوق. بنابراین، بیایید فورا قالب خود را مدرن کنیم تا در پایان سرصفحه و پاورقی همیشه 100٪ باشد، اما در عین حال قسمت قابل مشاهده محتوای موجود در آنها از 240px تا 1920px و در مرکز باشد.
این روشی است که من در این سایت استفاده کردم.
3) بنابراین، برای پیاده سازی ایده های شرح داده شده در پاراگراف دوم، باید چیز دیگری به چیدمان خود اضافه کنیم. بنابراین، برای اینکه فوتر و هدر ما همیشه 100% باشد (معمولا این بلوک ها با پس زمینه، تصاویر و ... پر می شوند) و در عین حال محتوای آنها از 1920 پیکسل فراتر نرود، موارد زیر را انجام می دهیم:
1) بیرون بیاورید
2) بیایید چندین بلوک با یک کلاس ایجاد کنیم، به عنوان مثال، من معمولا آن را .maxw می نامم، بنابراین از قوانین خود منحرف نمی شوم. بیایید آن را به سربرگ و پاورقی اضافه کنیم و این کلاس را به بخش اصلی خود با کلاس .section اختصاص دهیم. همچنین برای نسخه‌های قدیمی‌تر IE، با فراخوانی به مجموعه قوانین، شرط اضافه می‌کنیم، مشروط بر اینکه ورودی از IE باشد.< 9 (если такие пользователи еще есть), и специальный метатег متانام="
درگاه دید"
برای نسبت مقیاس صحیح در دستگاه هایی مانند تبلت، تلفن های هوشمند و غیره (قطعاً چنین کاربرانی وجود دارند).
3) برای کنترل رفتار بلوک‌های خود در وضوح صفحه‌نمایش زیر 980 پیکسل، قوانین رسانه @ را به پایین فایل استایل اضافه کنید، که در آن تغییرات لازم را برای بلوک‌های خاص، در مورد نوارهای جانبی، می‌نویسیم. بیایید آنها را مجبور کنیم تا با وضوح صفحه‌ای کمتر از 980 پیکسل زیر قسمت محتوا حرکت کنند و در مرکز تراز شوند.
در نتیجه، طرح html ما به شکل زیر خواهد بود:
کد نهایی html
نمایش کد html
قاب قالب
برای سایت آینده
محتوا
فایل استایل ما به شکل زیر خواهد بود:
کد css
نمایش کد css
* ( حاشیه: 0؛ بالشتک: 0؛ ) html (ارتفاع: 100%؛ ) سرصفحه، ناوبری، بخش، اصلی، مقاله، کنار، پاورقی (نمایش: بلوک؛) بدنه (ارتفاع: 100%؛ عرض: 100%; پس‌زمینه: #fefefe؛ ) .maxw (حاشیه: 0 خودکار؛ حداقل عرض: 240 پیکسل؛ حداکثر عرض: 1920 پیکسل؛ ) هدر (عرض حداقل: 240 پیکسل؛ عرض: 100٪؛ ارتفاع: 220 پیکسل؛ پس‌زمینه: #74C9FF؛ ) #wrapper (موقعیت: نسبی؛ حاشیه: 0 خودکار؛ ارتفاع: خودکار !مهم؛ ارتفاع: 100%؛ /*min-height: 100%؛ - برای فشار دادن پاورقی به پایین مورد نیاز است*/ padding: 5px 0; ) . بخش (عرض: 100٪؛ بالشتک: 0 0 220 پیکسل؛ موقعیت: نسبی؛ ) .section:after ( محتوا: ""؛ روشن: هر دو؛ نمایش: جدول؛ ) .پوشش اصلی (عرض: 100٪؛ شناور: سمت چپ؛ سرریز : پنهان ؛ ) اصلی ( بالشتک: 0 240 پیکسل 0 240 پیکسل؛ حداقل ارتفاع: 350 پیکسل؛ حاشیه: 0؛ ) مقاله ( پد: 0 5 پیکسل؛ حاشیه: 0 5 پیکسل؛ پس‌زمینه: #EAF2F5؛ حداقل ارتفاع: 350 پیکسل ( شناور: چپ؛ عرض: 240 پیکسل؛ حاشیه-چپ: -100٪؛ چپ: 0؛ موقعیت: نسبی؛ پس‌زمینه: #E88139؛ حداقل ارتفاع: 350 پیکسل؛ ) #s_right (fl جو دوسر: چپ؛ عرض: 240 پیکسل حاشیه سمت چپ: -240 پیکسل؛ سمت راست: 0; موقعیت: نسبی; پس زمینه: #E86A3B; حداقل ارتفاع: 350 پیکسل ) پاورقی ( حاشیه: -220 پیکسل خودکار 0؛ عرض: 100٪؛ حداقل عرض: 240 پیکسل؛ ارتفاع: 220 پیکسل؛ پس زمینه: #AFBFC6؛ موقعیت: نسبی؛ ) /* برای نمایش در دستگاه های کوچکتر از 980 پیکسل */ صفحه رسانه @ و (min-width:240px) و (حداکثر عرض:479px) ( اصلی ( padding:10px; ) #s_left ( بالشتک: 0؛ حاشیه: 0 خودکار؛ شناور: هیچ؛ روشن: هر دو؛ سمت چپ: 0؛ ) #s_right ( بالشتک: 0؛ حاشیه: 0 خودکار؛ شناور: هیچ؛ روشن: هر دو؛ سمت راست: 0؛ ) ) صفحه رسانه @ و (حداکثر عرض: 480 پیکسل) و (حداکثر عرض: 799 پیکسل) ( اصلی ( پد: 10 پیکسل؛ ) #s_left ( padding: 0; margin: 0 auto; float: none; clear: هر دو؛ چپ: 0; ) #s_right ( padding: 0; margin: 0 auto; float: none; clear: هر دو؛ راست: 0. ) ) صفحه رسانه @ و (حداکثر عرض: 800 پیکسل) و (حداکثر عرض: 979 پیکسل) ( اصلی ( padding: 10 پیکسل؛ ) #s_left ( بالشتک: 0؛ حاشیه: 0 خودکار؛ شناور: هیچ؛ روشن: هر دو؛ سمت چپ : 0; ) #s_right ( بالشتک: 0؛ حاشیه: 0 خودکار؛ شناور: هیچ؛ روشن: هر دو؛ سمت راست: 0؛ ))
و اکنون بیایید به آخرین مراحل با چیدمان خود نگاهی بیندازیم و تفاوت های ظریف اصلی چیدمان لاستیکی را در نظر بگیریم که به همین دلیل ما یک قاب ثابت، بلکه یک لاستیکی دریافت کردیم.
1) ما هدر را به بیرون منتقل کردیم، زیرا در نسخه اول داخل ظرف پوشاننده بود. و کانتینر محصور به نوبه خود حداکثر 1920 پیکسل بود، همانطور که در همان ابتدا گفته شد. این امکان ایجاد 100% عریض هدر را فراهم نمی کند، بلکه روی 1920px اصلی قرار می گیرد. بنابراین، ما حداکثر عرض را از پوشش پوششی حذف کردیم و آن را به خارج از آن منتقل کردیم، به علاوه یک کلاس maxw. ایجاد کردیم، که حداکثر 1920px و تراز وسط را به آن اختصاص دادیم. اکنون برای هر بلوکی با کلاس maxw 1920 پیکسل داریم. بنابراین در داخل هدر و پاورقی یک ظرف div با این کلاس قرار می‌دهیم تا همه چیز در داخل آن از 240 پیکسل تا 1920 پیکسل کشیده شود و اگر وضوح بیشتر از 1920 پیکسل باشد در مرکز قرار می‌گیرد. این را می توان با تغییر وضوح با یک مقیاس، به عنوان مثال، با یک نوار لغزنده در اپرا مشاهده کرد.
2) پاورقی به پایین فشار داده شده است. این نیز یکی از ویژگی های مهم چیدمان است. راز اینجاست:
خود فوتر خارج از ظرف بسته بندی است که به نوبه خود 100% ارتفاع دارد. همچنین قسمتی که داخل لفاف است، اما خود ستون‌های کناری و قسمت مرکزی را می‌پیچد، با استفاده از بالشتک از پایین تا ارتفاع پاورقی پدیدار می‌شود. این یک فضای خالی در زیر محتوا ایجاد می کند. از آنجایی که ارتفاع 100% است و پاورقی خارج از بلوک است، با فاصله ای برابر با ارتفاع آن از دید خارج می شود. با padding پایین: 0 0 100px ما در حال آماده سازی فضایی برای انتقال فوتر به ارتفاع منفی هستیم. با این کار بالا به ترتیب معکوس فرورفته می شود، به این معنی که تا ارتفاع خود به سمت بالا حرکت می کند. ما در نهایت با یک لایه 100 پیکسلی از پایین، یک پاورقی 100 پیکسل زیر صفحه نمایش حرکت می کنیم، و این یک موقعیت ثابت است. وقتی به فوتر دستور margin:-100px auto 0 می دهیم، آن را از پایین صفحه به داخل حفره ای که ایجاد کرده ایم بالا می بریم. در نتیجه، یک پاورقی داریم که به پایین صفحه فشار داده شده است.
3) طرح بندی سیال مورد علاقه بسیاری است، بنابراین درس ما به طرح بندی سایت اختصاص دارد، به طور دقیق تر، طرح بندی قاب سایت، که باید دارای دو نوار کناری با عرض ثابت باشد، در مورد ما 240 پیکسل است، اما در همان زمان در هر صفحه ای از 240 پیکسل تا 1920 پیکسل، قاب ما باید به طور خودسرانه در امتداد عرض کشیده شود و طرح html باید درک کند که ما فقط باید قسمت مرکزی را بکشیم، نوار کناری را لمس نکنیم!
خب باید همینطور باشه طرح آماده است. باقی مانده است که تشخیص دهیم، به دلیل اینکه او اینگونه رفتار می کند؟
همه چیز با محفظه بسته بندی واضح است، اما طرح html چگونه نوارهای کناری را در حین کشش بخش محتوا نگه می دارد؟
همه چیز در اینجا آنقدرها که در نگاه اول به نظر می رسد پیچیده نیست. طرح بندی سبک های css نیز طرح بندی است، به این معنی که از قوانین طرح بندی خاصی برای سبک های سایت تبعیت می کند.
تورفتگی سمت چپ و راست که برای تگ مقاله تجویز کردیم نقش مهمی در این امر ایفا می کند. اگر به کد html نگاه کنیم، می بینیم که یک ظرف خاص با id=container وجود دارد که 100% عرض دارد. داخل آن مقاله ما است که دارای padding چپ و راست است، padding:10px 270px. اما عرض برای آن مشخص نشده است و با توجه به اینکه دارای display: block است (برای المان های html5 مشخص کرده ایم که از درون خطی بودن خارج شوند) عرض کامل خواهد بود و بدون عرض صریح، تورفتگی های داخل آن خواهد بود. درون ظرف و نه پشت آنها. به لطف این ترکیب، id=container داریم که داخل آن مقاله ای با تورفتگی چپ و راست 270 پیکسل است. ما نوارهای کناری هر کدام 240 پیکسل و هر کدام 20 پیکسل برای تورفتگی های مقاله مرکزی داریم.
حالا آنچه را که در بالا در مورد پاورقی فشرده نوشتم به یاد بیاورید. و اگر فراموش کردید: به عقب برگردید و دوباره بخوانید، طرح لاستیکی جدول کلمات متقاطع نیست، نیازی به حدس زدن آن نیست، طرح بندی html به دقت و دقت نیاز دارد. بنابراین، طرح لاستیکی از همان اصل استفاده می کند که فوتر به پایین فشار داده شده است، فقط یک جابجایی عمودی وجود دارد و در اینجا افقی است.
بسته می شود
آخرین نکته این است که نوارهای کناری خود را به درستی قرار دهیم تا آنها متوجه شوند که ما از چیدمان وب سایت آگاه هستیم و در جایی که می گوییم بایستیم. برای انجام این کار، می توانید منطق را متصل کنید. اگر بلوک در عرض مناسب نباشد، به پایین منتقل می شود. و اگر اعداد منفی در موقعیت‌یابی پشتیبانی شوند، می‌توانیم جلوه را معکوس کنیم.
بلوک سمت چپ اول است، بنابراین به آن یک بالشتک منفی margin-left:-100% بدهید و با ظاهر شدن دقیقاً در فضای خالی مقاله برای ما، خود را گول می زند. چیدمان خوب است، چیدمان سیال حتی بهتر است و چیدمان آماده حتی بهتر است، به خصوص بعد از نبردهای طولانی. بنابراین، یک شلیک کنترلی به طرف حریف ما به نام طرح لاستیکی، جابجایی نوار کناری سمت راست با عرض خودش به سمت چپ است. چرا سمت چپ؟
بله، چون سمت راست بود، 240px مناسب نبود، و به گوشه چپ منتقل شد، همه چیز طبق قوانین است، html در اینجا مقصر نیست و css نیز با کاراکتر است. بنابراین، margin-left:-240px با کشیدن کادر سمت راست دقیقاً در فضای خالی آماده شده در سمت راست سمت، مشکل باقی مانده را حل می کند.
خوب، در اینجا ما تمام مکان های سایه دار طرح لاستیکی چیدمان را بررسی و مرتب کرده ایم. در یک مثال، همه بررسی‌ها، کدهای منبع اعمال می‌شوند. چیدمان کاری است که نیاز به مهارت های ثابت دارد، چه لاستیکی باشد و چه ثابت. چیدمان پاسخگو یک موضوع جداگانه است. شاید در درس بعدی قاب را از ابتدا نسازیم، قبلاً آن را داریم. بهتر است سازگاری را به موجود اضافه کنیم، با فونت بازی کنیم، پس زمینه، تصاویر را بسته به وضوح صفحه تغییر دهیم، به طور کلی، تفاوت های ظریف چیدمان را با جزئیات بیشتر تجزیه و تحلیل خواهیم کرد. و فراموش نکنید که اعتبار html را پس از طرح بندی سایت بررسی کنید، قطعاً بدتر نمی شود.
در زیر کد منبع با طرح نهایی پیوست شده است که قابل دانلود است. اگر می‌خواهید چیزی مانند تعداد ستون‌های کناری یا شناسه آنها، ارتفاع سرصفحه یا پاورقی و سایر تغییرات را تغییر دهید، می‌توانید به سادگی از ژنراتور طرح‌بندی Wireframe آنلاین رایگان استفاده کنید. می توانید هم یک قاب با یک طرح ثابت ایجاد کنید و هم یک طرح لاستیکی + شرایط تجویز شده برای چیدمان تطبیقی دریافت کنید.
همه اینها را می توان در ژنراتور قالب ما انجام داد.
طرح لاستیکی
"طرح لاستیکی
همه قالب هایی که ما ایجاد کردیم دارای یک عرض ثابت بودند: یعنی عرض واحدها، ستون ها، نواحی و غیره با تغییر اندازه پنجره مرورگر ثابت می ماند. اکثر وب سایت های تجاری موفق از زمان ظهور اینترنت از این اصل استفاده می کنند. این رویکرد ثابت کرده است که موثرترین روش چیدمان برای ایجاد طرح های با کیفیت در محیطی که همیشه طراح پسند نیست.
با این حال، نمی توانم در نظر نگیرم طرح "لاستیک".– ایجاد صفحاتی که اندازه آنها بسته به درگاه دید تغییر می کند.
طراحان می خواهند وب سایت هایی ایجاد کنند که واقعاً ترجیحات کاربران را در نظر بگیرند. بنابراین، نمی توان استدلال های قوی هدایت شده را رد کرد در برابرصفحات با عرض ثابت و مقدماتی مطابقطرح "لاستیک". در اصل، یک صفحه وب با عرض ثابت تمایل طراح را به کنترل استفاده واقعی منعکس می کند، در حالی که صفحاتی که بر اساس viewport تغییر می کنند، در درجه اول نیازهای کاربر را در نظر می گیرند.
می توان گفت که با اندازه صفحه نمایش بزرگ، سایت باید کل فضای موجود را اشغال کند و با اندازه کوچک باید متناسب با آن کاهش یابد. کاملاً منصفانه نیست که بگوییم طرح "لاستیک" سعی دارد با همه کاربران سازگار شود، اما وظیفه ای نزدیک به این دارد. اینترنت مجموعه ای از سیستم های بسیاری است که به طیف وسیعی از کاربران به روش هایی که تا حد امکان متناسب با نیازهای فردی آنها است، خدمات ارائه می دهد. موافق باشید که درک یکسان از محتوا یا عملکرد همان سایت غیرممکن است. چرا باید ظاهر برای همه یکسان باشد؟ چیدمان سیال بیشتر برای وب مناسب است و نقاط قوت و ضعف آن را بهتر از صفحات با اندازه های ثابت در نظر می گیرد. همانطور که قبلا ذکر شد، هر چه راه حل طبیعی تر باشد، موثرتر است.
تا همین اواخر، امکانات طراحی وب این امکان را به ما نمی داد که از چیدمان "لاستیک" لذت کامل ببریم. قابلیت‌های جدید مرورگر، همراه با نوآوری‌های آگاه از دستگاه در CSS و جاوا اسکریپت، طراحان را قادر می‌سازد تا صفحات بسیار پویاتری ایجاد کنند.
طراحان مبتکر اکنون می توانند در طراحی وب به اصطلاح "رسپانسیو" شرکت کنند. اتان مارکوت، یکی از طرفداران صدا، استدلال می کند که این رویکرد فرصت های جدیدی را باز می کند:
می‌توان ضمن استفاده از فناوری‌های استاندارد، سایت را از نظر ظاهری کاربرپسند و جذاب ساخت تا سایت نه تنها انعطاف‌پذیرتر باشد، بلکه با محیطی که در آن تجسم یافته است سازگار شود.
این فناوری‌ها به‌طور باورنکردنی سریع در حال توسعه هستند، بنابراین تصمیم گرفتم که آنها را در کتابم نیاورم. بهترین روش ها در زمینه طراحی وب سایت "ریسپانسیو" هنوز پیدا نشده است.
با این وجود، اصول اساسی طراحی بدون توجه به توسعه یک رویکرد جدید معتبر باقی می‌ماند. همچنین منصفانه است که طراحان باید همچنان کنترل خود را با کاربرانی که می خواهند اعمال خود را کنترل کنند، به اشتراک بگذارند. این اشتباه است که فکر کنیم طراحی وب "رسپانسیو" به معنای ارائه کنترل کامل به کاربران است، زیرا آنچه واقعاً به آن نیاز دارند این است برخی از ویژگی هاکاربران امیدوارند که طراحان نه تنها نوعی پوسته را در اختیار آنها بگذارند، بلکه آن را به اندازه کافی اصلاح کنند تا قابل مدیریت باشد.
طراح باید برخی از تصمیمات را برای کاربر اتخاذ کند، اما نه همه آنها، بلکه فقط آنهایی که به درک کمک می کنند. طراح به کاربر اجازه می دهد تا مهمترین جنبه های ادراک را برای اهداف خود کنترل کند، اما کاربر باید احساس ثبات و اعتماد نیز داشته باشد.
طراحی وب ریسپانسیو این کار را آسان نمی کند. در واقع او آن را پیچیده می کند. موقعیت‌های بیشتری وجود خواهد داشت که باید در نظر گرفته شوند، ترکیب‌های بیشتری از عناصر رابط کاربری در ترکیب‌های مختلف، که درک سایت‌ها را دشوار می‌کند. به این ترتیب، شبکه برای طراحی کلی اهمیت بیشتری پیدا می کند. ایجاد یک شبکه سختگیرانه که زیربنای طراحی وب "رسپانسیو" باشد، آن را مستحکم تر و قوی تر می کند.
از همان اصول طراحی مبتنی بر شبکه می توان در طراحی وب سیال و واکنش گرا استفاده کرد. واحدها را می توان در ستون ها و مناطق ترکیب کرد و اندازه عناصر را می توان بسته به پارامترهای اصلی شبکه تغییر داد. این عناصر باید با توجه به پارامترهای یکسان رشد و کوچک شوند، اما مهم است که به یاد داشته باشید که همه چیز نیاز به تغییر ندارد. برخی از عناصر می توانند و باید بدون تغییر باقی بمانند. در محیطی که اندازه عناصر بی‌پایان تغییر می‌کند، مهم است که همه چیز را ثابت نگه دارید، تا به کاربران نوعی مرجع ارائه دهید. با توسعه این نظریه، فرصت های جدیدی برای طراحان شاغل در این زمینه ایجاد خواهد شد. اما نقش اصلی طراح، شخصی که تجربه کاربری را مدیریت می کند، بدون تغییر باقی می ماند.
از کتاب Adobe InDesign CS3 نویسنده زاوگورودنی ولادیمیرطرح چند ستونی ویژگی اصلی طراحی هر روزنامه، طرح چند ستونی است. از آنجایی که تصور خطی به طول یک صفحه کامل روزنامه دشوار است، طراح صفحه را به ستون های جداگانه تقسیم می کند. تعداد آنها بستگی به قالب روزنامه دارد.
از کتاب 300 بهترین برنامه برای همه مناسبت ها نویسنده لئونتیف ویتالی پتروویچچیدمان با تصاویر یکی دیگر از ویژگی های چیدمان مجله که باید در نظر داشت، تصاویر بیشتر است. اگر برای یک مقاله روزنامه (کوتاه تر و اشغال بخشی از صفحه) یک یا دو تصویر کافی است، مقاله های مجله طولانی تر نیاز دارند.
از کتاب آنچه در کتابهای دلفی نوشته نشده است نویسنده گریگوریف A.B.طراحی نهایی و چیدمان برگه اولین کار در طراحی نهایی جزوه طراحی کتیبه "جدید" است که مطمئنا برای مدت طولانی برای خوانندگان ما دردناک بوده است. تکنیک بصری ساده که اغلب در آن استفاده می شود
از کتاب HTML 5، CSS 3 و Web 2.0. توسعه وب سایت های مدرن نویسنده درونوف ولادیمیرطرح بندی نهایی صفحه طرح نهایی صفحه در مورد ما به عملیات زیر کاهش می یابد: قرار دادن اطلاعات سرویس در صفحه (به عنوان مثال، سرصفحه ها و پاورقی ها). پر کردن نوار با متن واقعی (برنامه های تلویزیونی واقعی، انتخاب واقعی
از کتاب HTML 5، CSS 3 و Web 2.0. توسعه وب سایت های مدرن نویسنده درونوف ولادیمیرچیدمان متن اولین وظیفه چیدمان، تخصیص سبک به متن وارد شده است. همچنین باید خطوط خالی اضافی را حذف کنید (معمولاً برای سرفصل ها و ستون های فرعی در یک مجموعه استفاده می شود) و فقط یک خط خالی بین متن نوار کناری و زیر معمولی باقی می ماند.
از کتاب اول موبایل! نویسنده Wroblewski لوکچیدمان و آماده سازی پیش از چاپ متن
از کتاب نویسنده1.3.4.2. عملیات خط لاستیکی و شطرنجی اکنون باید به کاربر توانایی ترسیم خطوط را بدهیم. برای انجام این کار، از یک خط استاندارد "لاستیکی" استفاده می کنیم: کاربر دکمه سمت چپ ماوس را فشار می دهد و در حالی که آن را نگه می دارد، ماوس را حرکت می دهد. تا زمانی که دکمه را نگه دارید،
از کتاب نویسنده از کتاب نویسندهطرح چند ستونی طرح چند ستونی چیزی است که برای مدت طولانی در طراحی وب کم بوده است. علاقه مندان منفرد مدت‌هاست که آن را با استفاده از جداول یا کانتینرها اجرا کرده‌اند، اما اکنون ابزارهای "مشروع" برای شکستن متن به تعداد دلخواه از ستون‌ها دارند.
از کتاب نویسنده7 اصول چیدمان سازماندهی محتوا و عناصر رابط کاربری مورد استفاده در طراحی سایت های معمولی بدون شک می توانند در طراحی برنامه های کاربردی وب موبایل مفید باشند. اما چگونه می توانید مطمئن باشید که این اصول برای هر کدام مرتبط خواهد بود
ولاد مرژویچ
طرح سیال سه ستونی بدون شک انعطاف پذیرترین و قابل تنظیم ترین طرح موجود است. ترکیب درصدها و پیکسل ها برای تعیین عرض ستون به شما امکان می دهد طرح بندی های مختلفی ایجاد کنید و آنها را برای نیازهای خود انتخاب کنید. روی انجیر شکل 5.17 گزینه هایی را برای طرح بندی های سه ستونی نشان می دهد، برای راحتی آنها شماره گذاری شده اند.
برنج. 5.17. طرح بندی سه ستونی
در اینجا، نماد درصد (%) به این معنی است که عرض ستون به عنوان درصدی از عرض طرح، px تنظیم می شود - عرض ستون بر حسب پیکسل مشخص می شود و علامت بی نهایت (∞) که ستون فضای باقی مانده را اشغال می کند. با وجود فراوانی چیدمان های مختلف، اصول ساخت آنها یکسان است و شامل دو روش اصلی است: موقعیت یابی و عناصر شناور. همچنین می توانید از جداول برای ایجاد ستون هایی با ارتفاع مساوی استفاده کنید.
با استفاده از موقعیت یابی
برای کنترل موقعیت لایه ها نسبت به عنصر والد، ویژگی موقعیت والد را روی نسبی قرار دهید و عناصر فرزند را که ستون ها را تشکیل می دهند روی مطلق تنظیم کنید. ساختار کد برای چهار طرح اول یکسان خواهد بود و در مثال 5.13 نشان داده شده است.
مثال 5.13. دو ستون در پیکسل یا سه ستون در درصد
در اینجا ستون ها به ترتیب شماره گذاری می شوند، یعنی. ستون 1 در سمت چپ، ستون 2 در مرکز و ستون 3 در سمت راست قرار دارد.
موقعیت یابی یک اشکال خاص دارد که استفاده از این روش را محدود می کند - هنگام اضافه کردن پاورقی، در زیر ستون ها پنهان می شود. این به این دلیل است که لایه چیدمان به خودی خود ارتفاعی ندارد، بنابراین لایه فوتر را به پایین "فشار" نمی کند. اگر فوتر در یک صفحه کاملاً مورد نیاز است، باید از روش ساخت ستون ها بر اساس عناصر شناور استفاده کنید. همچنین این روش در IE6 به دلیل وجود خطا در آن کار نمی کند.
برای طرح شماره 1، که در آن عرض ستون اول سیال و بقیه ثابت هستند، استایل به صورت زیر خواهد بود (مثال 5.14).
مثال 5.14. طرح شماره 1
سرصفحه ( پس زمینه: #D5BAE4; ) .layout ( موقعیت: نسبی؛ /* موقعیت نسبی */ ) .layout DIV ( موقعیت: مطلق؛ /* موقعیت مطلق */ ) .col1 ( پس زمینه: #C7E3E4؛ /* رنگ پس زمینه * / چپ: 0؛ /* موقعیت حاشیه چپ */ سمت راست: 300 پیکسل؛ /* موقعیت حاشیه سمت راست */ ) به عرض ستون 3 */ ) .col3 ( پس زمینه: #ECD5DE؛ عرض: 100 پیکسل؛ سمت راست: 0؛ )
ستون هایی با عرض معین دارای ویژگی width هستند و موقعیت آنها در سمت چپ یا راست به ترتیب با ویژگی چپ یا راست مشخص می شود. عرض لاستیکی ستون باقیمانده پس از افزودن همزمان چپ و راست ساخته می شود که مقادیر آنها برابر با عرض ستون های ثابت است.
طرح بندی شماره 2 (مثال 5.15) و شماره 3 (مثال 5.16) بر اساس یک اصل ساخته شده اند.
مثال 5.15. طرح شماره 2
سرصفحه ( پس زمینه: #D5BAE4; ) .layout ( موقعیت: نسبی؛ ) .layout DIV ( موقعیت: مطلق؛ ) .col1 ( پس زمینه: #C7E3E4؛ عرض: 100px; ) .col2 ( پس زمینه: #E0D2C7؛ سمت چپ: 100px; راست: 200 پیکسل؛) col3 ( پس‌زمینه: #ECD5DE؛ عرض: 200 پیکسل؛ سمت راست: 0؛ )
مثال 5.16. طرح شماره 3
سرصفحه ( پس زمینه: #D5BAE4; ) .layout ( موقعیت: نسبی؛) .layout DIV ( موقعیت: مطلق؛ ) .col1 ( پس زمینه: #C7E3E4؛ عرض: 100 پیکسل؛ ) .col2 ( پس زمینه: #E0D2C7؛ عرض: 200 پیکسل; چپ: 100 پیکسل؛ ) .col3 ( پس‌زمینه: #ECD5DE؛ چپ: 300 پیکسل؛ راست: 0؛ )
طرح شماره 4، که در آن عرض تمام ستون ها به صورت درصد داده شده است، دارای تفاوت های ظریف است. اگر عرض همه ستون‌ها یکسان باشد، می‌توان آن را به صورت کسری تنظیم کرد (33.33%)، اما مرورگر Opera نمی‌داند چگونه با مقادیر درصد کسری کار کند، بنابراین "سوراخ‌ها" در آن بین ستون‌ها ظاهر می‌شوند (شکل 5.18). ).
برنج. 5.18. عرض ستون در درصد کسری مشخص شده است
در چنین شرایطی، باید به سهام نابرابر تغییر دهید، به عنوان مثال، 33٪، 34٪، 33٪، همانطور که در مثال 5.17 نشان داده شده است.
مثال 5.17. طرح شماره 4
سرصفحه ( پس زمینه: #D5BAE4; ) .layout ( موقعیت: نسبی؛) .layout DIV ( موقعیت: مطلق؛ ) .col1 ( پس زمینه: #C7E3E4؛ عرض: 33%؛ ) .col2 ( پس زمینه: #E0D2C7؛ سمت چپ: 33 %؛ عرض: 34%؛ ) .col3 ( پس‌زمینه: #ECD5DE؛ سمت راست: 0؛ عرض: 33%؛ )
برخی از مرورگرها ممکن است فاصله کمی بین ستون ها داشته باشند. با استفاده از مقادیر نه عدد صحیح، بلکه درصد کسری حل می شود. 33.3 درصد به جای 33 درصد.
طرح‌بندی‌های باقیمانده، که در آن دو ستون سه تایی لاستیکی هستند، نشان‌دهنده گروه خاصی هستند، زیرا می‌توان آنها را به روش‌های مختلف تفسیر کرد. بنابراین، عرض یک ستون به پیکسل نشان داده می شود، دیگری به عنوان درصدی از عرض طرح، و عرض ستون باقی مانده به طور خودکار محاسبه می شود. روی انجیر شکل 5.19 رویکردهای متفاوتی را برای محاسبه عرض ستون با استفاده از طرح شماره 5 به عنوان مثال نشان می دهد.
برنج. 5.19. عرض دو ستون لاستیکی
در گزینه اول، عرض ستون اول به صورت درصدی از عرض طرح، عرض ستون دوم به صورت خودکار محاسبه می شود و ستون سوم دارای عرض ثابت بر حسب پیکسل است. در نوع دوم، ستون ها بین خودشان تغییر می کنند و عرض ستون اول به طور خودکار محاسبه می شود. گزینه سوم فرض می کند که عرض کل ستون های لاستیکی 100% در نظر گرفته شده و عرض ستون اول و دوم از آن محاسبه می شود.
گزینه های اول و دوم به راحتی مشابه کد با دو ستون در پیکسل پیاده سازی می شوند. فقط به جای عرض در px ما مشخص می کنیم. مثال 5.18 سبک طرح بندی شماره 5 را با ستون اول به صورت درصد نشان می دهد.
مثال 5.18. طرح شماره 5. عرض ستون دوم محاسبه می شود
سرصفحه ( پس زمینه: #D5BAE4; ) .layout ( موقعیت: نسبی؛) .layout DIV ( موقعیت: مطلق؛ ) .col1 ( پس زمینه: #C7E3E4؛ عرض: 50%؛ ) .col2 ( پس زمینه: #E0D2C7؛ سمت چپ: 50 %؛ راست: 200 پیکسل؛ ) .col3 ( پس‌زمینه: #ECD5DE؛ سمت راست: 0؛ عرض: 200 پیکسل؛ )
سبک چیدمان شماره 5 با اولین ستون محاسبه شده در مثال 5.19 نشان داده شده است.
مثال 5.19. طرح شماره 5. عرض ستون اول محاسبه می شود
سرصفحه ( پس زمینه: #D5BAE4; ) .layout ( موقعیت: نسبی؛) .layout DIV ( موقعیت: مطلق؛ ) .col1 ( پس زمینه: #C7E3E4؛ چپ: 0؛ راست: 200 پیکسل؛ حاشیه-راست: 50%؛ ) . col2 ( پس‌زمینه: #E0D2C7؛ عرض: 50%؛ سمت راست: 200 پیکسل؛ ) .col3 ( پس‌زمینه: #ECD5DE؛ عرض: 200 پیکسل؛ سمت راست: 0؛ )
ستون اول را نمی توان از طریق ویژگی سمت راست به سمت راست محدود کرد، زیرا مقدار 50% + 200 پیکسل خواهد بود، چنین مقادیر محاسبه شده ای در CSS2 وجود ندارد. بنابراین اجازه دهید فوکوس را اعمال کنیم - لایه اول را در سمت راست به عرض 200 پیکسل از راست محدود کرده و با استفاده از margin-right به سمت چپ به عرض ستون دوم 50% منتقل کنید. لایه ما کاملاً قرار دارد، بنابراین چنین ماشینکاری ها به هیچ وجه بر عرض تأثیر نمی گذارد.
گزینه سوم با دو ستون لاستیکی به یک لایه اضافی نیاز دارد، اجازه دهید آن را لاستیک بنامیم که عرض ستون ها نسبت به آن تنظیم می شود (مثال 5.20).
مثال 5.20. طرح شماره 5: عرض دو ستون
ساخت چیدمان شماره 6 مشابه طرح شماره 5 است که به آن نمی پردازیم. در مورد طرح شماره 7، گزینه ای برای آن وجود دارد که می تواند مشکل ایجاد کند. این در موردی صدق می کند که می خواهید عرض ستون چپ و راست را محاسبه و برابر یکدیگر کنید. برای انجام این کار، عرض ستون اول و سوم باید برابر با 50٪ باشد (شکل 5.20).
برنج. 5.20. طرح شماره 7 ستون با عرض مساوی
برای خالی کردن فضای ستون دوم، از ویژگی margin-right برای ستون اول و margin-left برای ستون سوم استفاده کنید. مقدار این ویژگی ها نصف عرض ستون دوم خواهد بود. بنابراین اگر 200 پیکسل است، پس حاشیه سمت راست است: 100 پیکسل (مثال 5-21).
مثال 5.21. طرح شماره 7. عرض ستون های لاستیکی یکسان است
سرصفحه ( پس‌زمینه: #D5BAE4؛ ) .layout (موقعیت: نسبی؛) .layout DIV (موقعیت: مطلق؛) .col1 (پس‌زمینه: #C7E3E4؛ چپ: 0؛ راست: 50%؛ حاشیه-راست: 100 پیکسل؛ ) . col2 ( پس‌زمینه: #E0D2C7؛ عرض: 200 پیکسل؛ چپ: 50%؛ حاشیه چپ: -100 پیکسل؛ ) .col3 (پس‌زمینه: #ECD5DE؛ چپ: 50%؛ راست: 0؛ حاشیه چپ: 100 پیکسل؛ )
شما نمی توانید مستقیماً از ویژگی width استفاده کنید، زیرا اضافه کردن یک حاشیه فقط باعث افزایش عرض می شود نه آنطور که ما می خواهیم آن را کاهش دهید. بنابراین، عرض توسط ویژگی های چپ و راست تنظیم شده در یک زمان تشکیل می شود. با قرار دادن ستون دوم، تعیین مقدار چپ یا راست دشوار است، زیرا برابر با 50٪ -200 پیکسل خواهد بود. بنابراین، ما موقعیت حاشیه سمت چپ را روی 50% قرار می دهیم (چپ: 50%)، و سپس کل ستون را به اندازه نصف عرض آن به سمت چپ از طریق ویژگی margin-left (margin-left: -100px) تغییر می دهیم.
از آنجایی که عرض برخی از ستون ها به صورت خودکار محاسبه می شود، توصیه می شود حداقل عرض طرح را با افزودن ویژگی min-width به انتخابگر BODY محدود کنید. سپس عرض ستون ها با رسیدن به حد تعیین شده کاهش نمی یابد.
BODY ( حداقل عرض: 800 پیکسل؛ /* حداقل عرض طرح */ )
مقدار min-width به چیدمان و محتوای صفحه بستگی دارد و معمولاً به صورت تجربی انتخاب می شود.
استفاده از عناصر شناور
عناصر شناور یکی دیگر از روش های همه کاره برای ساخت انواع چیدمان های سه ستونی است. برخلاف موقعیت‌یابی، به شما این امکان را می‌دهد که نگران مشکل فوتر نباشید، زیرا پاورقی همیشه در جای خود زیر بلندترین ستون قرار می‌گیرد.
ستون ها با استفاده از ویژگی float در ترکیب با ویژگی های حاشیه و عرض ساخته می شوند. بسته به چیدمان انتخاب شده، ترتیب ستون‌ها در کد نیز تغییر می‌کند، لایه‌ها همیشه ابتدا دنبال می‌شوند که float به آن اضافه می‌شود.
طرح شماره 1. ستون اول لاستیکی
عرض ستون دوم و سوم بر حسب پیکسل مشخص می شود و موقعیت آنها از طریق خاصیت float با مقدار سمت راست مشخص می شود. برای ستون اول، شما همچنین باید ویژگی margin-right را با مقداری برابر با عرض کل ستون های باقی مانده تنظیم کنید (مثال 5.22).
مثال 5.22. طرح شماره 1
طرح شماره 2. ستون وسط لاستیکی
عرض ستون اول و سوم بر حسب پیکسل داده می شود و موقعیت آنها با چپ برای ستون اول و راست برای ستون سوم شناور می شود. ستون وسط، برای حفظ ظاهر خود، حاوی حاشیه خاصیت جهانی است که تورفتگی را در سمت چپ و راست تنظیم می کند (مثال 5.23).
مثال 5.23. طرح شماره 2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
طرح شماره 3. ستون سوم لاستیکی
موقعیت ستون های اول و دوم از طریق ویژگی float با مقدار چپ مشخص می شود، برای ستون سوم، باید حاشیه سمت چپ (حاشیه-چپ) را به عرض کل ستون های باقی مانده تنظیم کنید (مثال 5.24).
مثال 5.24. طرح شماره 3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
طرح شماره 4: تمام عرض ستون ها به صورت درصد تنظیم می شود
برای ساخت این چیدمان، گزینه های زیادی بر اساس چیدمان های قبلی کار می کنند، اما به جای پیکسل ها باید درصدها را مشخص کنید. راه دیگری در مثال 5-25 نشان داده شده است که فقط از ویژگی های float و width استفاده می کند.
مثال 5.25. طرح شماره 4
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
طرح شماره 5. عرض لاستیکی دو ستونی
روی انجیر 5.19 نشان داده شد که طرح شماره 5 که دارای دو ستون لاستیکی می باشد را می توان به طرق مختلف تفسیر کرد.
- عرض ستون اول به صورت درصدی از عرض طرح مشخص می شود، ستون سوم به پیکسل است و ستون وسط فضای باقیمانده را اشغال می کند.
- عرض ستون دوم به صورت درصدی از عرض طرح مشخص می شود، ستون سوم به پیکسل است و ستون اول فضای باقیمانده را اشغال می کند.
- عرض کل دو ستون لاستیکی 100% در نظر گرفته می شود و عرض ستون ها به عنوان درصدی از این مقدار نشان داده می شود.
عرض ستون وسط محاسبه شد
در اینجا عرض ستون اول بر حسب درصد مشخص می شود و موقعیت آن از طریق خاصیت float با مقدار چپ مشخص می شود، برای ستون سوم عرض بر حسب پیکسل و مقدار خاصیت float به صورت سمت راست مشخص می شود. برای ستون وسط، تنها چیزی که باقی می ماند این است که حاشیه های سمت چپ و راست را به عرض ستون ها تنظیم کنید (مثال 5.26).
مثال 5.26. طرح بندی 5.1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
عرض ستون اول محاسبه شد
این پیچیده ترین طرح است، زیرا عرض ستون اول مستقیماً مشخص نشده است. اما برای محدود کردن محتوا، باید مقداری را برای ویژگی margin-right مشخص کنید که درصدها و پیکسل ها را ترکیب می کند. در CSS2 همانطور که قبلاً گفته شد نمی توان این را تنظیم کرد، بنابراین یک لایه دیگر داخل لایه col1 به نام wrap اضافه می کنیم و به هر یک از این لایه ها یک تورفتگی اضافه می کنیم. یکی بر حسب درصد، دیگری بر حسب پیکسل (مثال 5.27).
مثال 5.27. طرح بندی 5.2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
درصد عرض دو ستون
در این چیدمان، عرض کلی ستون های لاستیکی 100% در نظر گرفته شده است، بنابراین ما به یک لایه اضافی برای اشاره به عرض ستون های داخلی نیاز داریم. این لایه که لاستیک نام دارد با لایه col3 به عنوان یک طرح دو ستونی کار می کند و لایه های داخلی col1 و col2 با اعمال ویژگی float به صورت افقی تراز می شوند (مثال 5.28).
مثال 5.28. طرح بندی 5.3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
چیدمان های 6، 7 و تغییرات آنها بر اساس همان اصل طرح شماره 5 ساخته شده اند، به استثنای طرح شماره 7 که در آن عرض ستون های چپ و راست لاستیکی و مساوی با یکدیگر است.
ابتدا پایه را آماده می کنیم، ترتیب لایه ها را در کد HTML مشخص می کنیم.
Col1 (عرض: 50%؛ شناور: چپ؛ ) .col2 (عرض: 200 پیکسل؛ شناور: چپ؛ ) .col3 (عرض: 50%؛ شناور: راست؛ )
این همه چیز نیست، لایه ها هنوز هیچ ستونی تشکیل نمی دهند و به گونه ای ردیف می شوند که برای ما کاملاً نامناسب است. شما باید ستون دوم را نصف عرض آن به سمت چپ تغییر دهید (حاشیه-چپ: -100px) و ستون سوم را مجبور کنید تا در جای خود قرار گیرد. برای انجام این کار، عرض آن را طوری افزایش دهید که برابر یا بیشتر از 50% + 100px (نیمی از ستون دوم) باشد. ویژگی margin-left با مقدار منفی بهترین است، پس از آن ستون ها ایجاد می شوند. برخی تفاوت های ظریف دیگر نیز وجود دارد. ستون های افراطی به یکدیگر متصل می شوند که زمانی که ارتفاع آنها از ارتفاع ستون میانی بیشتر شود به وضوح قابل مشاهده است (شکل 5.21).
برنج. 5.21. بلندگوهای انباشته
علاوه بر این، در ستون سمت چپ، متن در سمت راست و در ستون سمت راست، متن سمت چپ در زیر پس زمینه ستون مرکزی پنهان شده است. اگر ارتفاع این ستون زیاد باشد این امر قابل توجه نخواهد بود، اما همیشه این امکان وجود ندارد. برای غلبه بر این کاستی ها، لازم است یک لایه دیگر را در بیرونی ترین ستون ها قرار دهید (در مثال به آن wrap می گویند) و از قبل برای آنها رنگ پس زمینه ستون، حاشیه ها و تورفتگی های لازم را تنظیم کنید. کد نهایی در مثال 5.29 نشان داده شده است.
مثال 5.29. طرح شماره 7
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
حاشیه ها و حاشیه ها در طرح سه ستونی
ویژگی padding عمداً به نمونه‌های طرح‌بندی داده‌شده اضافه نشده است، زیرا کد فقط به عنوان مبنای طرح‌بندی عمل می‌کند، و این شما هستید که در موارد خاص تصمیم می‌گیرید که آیا به حاشیه‌ها در ستون‌ها نیاز است یا خیر. افزودن حاشیه‌ها و حاشیه‌ها به یک عنصر بلوک، عرض آن را افزایش می‌دهد، که باید هنگام چیدمان در نظر گرفته شود. با این حال، عرض تنها در صورتی افزایش می‌یابد که لایه روی عرض تنظیم شود. بیایید به چند مثال نگاه کنیم که در آن عرض تغییر می کند و کجا تغییر نمی کند.
Div ( /* padding بر عرض */ عرض: 200 پیکسل؛ بالشتک: 10 پیکسل؛ ) div ( /* بالشتک روی عرض تأثیر نمی گذارد */ موقعیت: مطلق؛ چپ: 20 پیکسل؛ راست: 20 پیکسل؛ بالشتک: 10 پیکسل؛ ) div ( / * padding بر عرض */ float: چپ؛ عرض: 50%؛ padding: 10px؛ ) div (/* padding روی عرض تأثیر نمی‌گذارد */ margin-right: 50%؛ padding: 10px; )
در ستون هایی که به padding یا حاشیه نیاز است، اما اضافه کردن آنها باعث شکسته شدن طرح می شود، می توانید از لایه تودرتو استفاده کنید و ویژگی های لازم را برای آن تنظیم کنید.
در این مثال، عرض لایه روی 200 پیکسل تغییر نمی کند، اما حاشیه ها و حاشیه ها اضافه می شوند.
جدول به عنوان ستون
جدول برای ایجاد ساده و سریع ستون هایی با ارتفاع یکسان مفید است. این سرعت با چند چیز به دست می آید. اولاً، ساختار کد برای هر طرح‌بندی ثابت می‌ماند، ستون‌های کد، مانند مورد float، هرگز ترتیب خود را تغییر نمی‌دهند. ثانیاً عرض سلول ها به طور خودکار بر اساس محتویات آنها محاسبه می شود، بنابراین کافی است عرض ستون های مورد نیاز را مشخص کنید و بقیه با عرض کل جدول تنظیم می شوند. مثال 5.30 طرح شماره 1 ساخته شده روی یک جدول را نشان می دهد.
مثال 5.30. طرح شماره 1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| ستون 1 | ستون 2 | ستون 3 |
افزودن یک ویژگی padding به یک انتخابگر TD، ویژگی cellpadding برچسب را لغو می کند
