پیاده سازی نصیب کانالای وبسایت اتریوم
الان قراره یه نصیب کانالای زیرخیس از دکمههامون پیاده سازی کنیم، دقیقاً مثل همون چیزی که تو تارنما اتریوم چشم میشه. برای آغاز، اینجانب نخستین یه ستون (row) نو اضافه میکنم و تنظیمش میکنم روی فلکسجعبه. زیرا ساختار این نصیب طوریه که بایستی دو تا ردیف داشته باشیم؛ یه ردیف که خودش دربرگیرنده سه عدد گزینه کنار همدیگهست و یک کدام از طراحی سایت اختصاصی هم یه جعبه تکی.
نصیب کانالای تارنما اتریوم
نصیب کانالای وب سایت اتریوم
پس اینجانب نخستین یه کانتینر می سازم که توش دو عدد ردیف قرار بگیره. سمت چپی همون جعبه توکل و سمت حقیقت سهتا مورد داره. ردیف چپ رو که اضافه میکنم، عرضشو یه نادر کمتر میگیرم، به عنوان مثالً ۴۵٪، تا جاش اندازه همون چیزی بشه که توی طرح میباشد. یه ردیف میندازم داخلش و عرضشو روی ۱۰۰٪ تهیه می کنم که فیکس بشینه تو ردیف خودش. این نصیب سمت چپ الان بی نقص و درسته.
هم اکنون میحافظه موقت سراغ ردیف سمت راست. زیرا این ردیف خودش دو عدد ستون داره (بالا و زیر)، بایستی داخلش یه کانتینر اضافه کنم و آنگاه اون کانتینر رو نشر کنم تا دو عدد ستون داشته باشم. توی ستون اولیه، قراره دو عدد گزینه کنار هم قرار بگیرن، پس گشوده درون اون، یه کانتینر دیگه میندازم، و دو تا ردیف داخلش میسازم. سپس اون کانتینر رو افقی می کنم تا این دو عدد ردیف کنار هم قرار بگیرن.
زیرساخت قسمت کانالای وبسایت اتریوم
زیرساخت قسمت کانالای وبسایت اتریوم
توی ستون دوم، تنها یه گزینه قراره باشه، پس یه دونه ردیف باطن اون قرار میدم و عرضشو میذارم رو ۱۰۰٪ که تک تک فضای عرضی ستون ذیل رو بگیره.
اکنون که تمامی چی راز جاشه، یه نگاه کلی می کنم: توی ستون اساسیمون یه فلکسجعبه داریم که دو عدد ردیف داره؛ سمت چپ یه ردیف معمولی و سمت راست یه ساختار پاره ای بغرنجخیس که خودش دو ستون داره؛ یکی از با دو ردیف افقی و یک کدام از با یه ردیف تکی.
دکورا سیون قسمت کانالای تارنما اتریوم
چینش قسمت کانالای وبسایت اتریوم
در غایت این ساختار تماماً همون چیزی رو درمیاره که توی وب سایت اتریوم داریم. تنها کافیه محتواهاشو وارد کنیم و در شکل نیاز، استایلهارو روی هر قسمت مستقل مستقل تهیه کنیم. الان همگیچی مهیاست، کانالمون به صحت و تمیزی پیادهسازی گردیده.
از در بین بردن مسافتهای مازاد
الان که ساختار کلی کانالمون رو ساختیم، ممکنه یه محرمانه مسافتهای خالی یا این که ناهماهنگ میان ردیفها ببینیم که ظواهر عمل رو بهم میریزن. کاری که اعمال میدم اینه کهاین مسافتهای اضافه رو صفر می کنم. برای این فعالیت، میحافظه موقت سراغ پیکربندی توسعه یافته ردیفها (همون Advanced). هر ستونی که تو این نصیب می باشد رو تعیین میکنم، سپس تو بخش مسافت داخلی یا این که همون پدینگ (Padding)، تمامی مقادیر رو صفر میذارم. یعنی کلیهی ردیفهایی که تو این کانال هستن، یکی ازیک کدام از پدینگشون رو صفر می کنم.
یه نکته حائض اهمیت اینه که بعضا وقتا یه کانتینر یا این که ستون والد می باشد که تمامیی این ردیفها داخلش قرار تصاحب کردن؛ اونم نباید فراموش شه. اون کانتینر رو هم گزینش میکنم و پدینگشو صفر میذارم. با این شغل، کلیهی فواصل اضافه فی مابین اجزا از دربین میرن و اجزا ظریف و منظم کنار هم قرار میگیرن.
البته یه زمینه دیگه هم میباشد: ممکنه ببینیم یه ردیف از حیث طول با سایر همقد وجود ندارد یا این که نمیخواد تک تک طول اون قسمت رو مالامال کنه. یه رویه غیر اصولی اینه که بیایم براش طول اثبات بذاریم (به عنوان مثالً بگیم دستکم ارتفاعش فلان قدر باشه)، البته این شغل تو پیاده سازی ریسپانسیو به درد نمیخوره زیرا تو دستگاههای گوناگون ممکنه بههم بریزه.
منش اصولیخیس چیه؟ اینکه بیایم ردیف والدش رو گزینش کنیم، یعنی اون ستونی کهاین یکیاز توش قرار گرفته. زیرا پدینگ رو صفر کردیم، شاید نشه بی واسطه انتخابش کرد، پس یهجور غیرمستقیم یا این که با راستکلیک انتخابش میکنم. بعداز اینکه انتخابش کردم، تو نصیب «طرحبندی» یا این که همون Layout، تراز موردها (Align Items) رو میذارم روی «کشیده» یا این که Stretch. اگه بازم صحیح عمل نکنه، جهت محتوا (Direction) رو میذارم روی افقی (Horizontal) تا محتوا به صحت کش بیاد و طول رو لبریز کنه.
پیاده سازی نصیب کانالای وبسایت اتریوم
الان قراره یه نصیب کانالای زیرخیس از دکمههامون پیاده سازی کنیم، دقیقاً مثل همون چیزی که تو تارنما اتریوم چشم میشه. برای آغاز، اینجانب نخستین یه ستون (row) نو اضافه میکنم و تنظیمش میکنم روی فلکسجعبه. زیرا ساختار این نصیب طوریه که بایستی دو تا ردیف داشته باشیم؛ یه ردیف که خودش دربرگیرنده سه عدد گزینه کنار همدیگهست و یک کدام از طراحی سایت اختصاصی هم یه جعبه تکی.
نصیب کانالای تارنما اتریوم
نصیب کانالای وب سایت اتریوم
پس اینجانب نخستین یه کانتینر می سازم که توش دو عدد ردیف قرار بگیره. سمت چپی همون جعبه توکل و سمت حقیقت سهتا مورد داره. ردیف چپ رو که اضافه میکنم، عرضشو یه نادر کمتر میگیرم، به عنوان مثالً ۴۵٪، تا جاش اندازه همون چیزی بشه که توی طرح میباشد. یه ردیف میندازم داخلش و عرضشو روی ۱۰۰٪ تهیه می کنم که فیکس بشینه تو ردیف خودش. این نصیب سمت چپ الان بی نقص و درسته.
هم اکنون میحافظه موقت سراغ ردیف سمت راست. زیرا این ردیف خودش دو عدد ستون داره (بالا و زیر)، بایستی داخلش یه کانتینر اضافه کنم و آنگاه اون کانتینر رو نشر کنم تا دو عدد ستون داشته باشم. توی ستون اولیه، قراره دو عدد گزینه کنار هم قرار بگیرن، پس گشوده درون اون، یه کانتینر دیگه میندازم، و دو تا ردیف داخلش میسازم. سپس اون کانتینر رو افقی می کنم تا این دو عدد ردیف کنار هم قرار بگیرن.
زیرساخت قسمت کانالای وبسایت اتریوم
زیرساخت قسمت کانالای وبسایت اتریوم
توی ستون دوم، تنها یه گزینه قراره باشه، پس یه دونه ردیف باطن اون قرار میدم و عرضشو میذارم رو ۱۰۰٪ که تک تک فضای عرضی ستون ذیل رو بگیره.
اکنون که تمامی چی راز جاشه، یه نگاه کلی می کنم: توی ستون اساسیمون یه فلکسجعبه داریم که دو عدد ردیف داره؛ سمت چپ یه ردیف معمولی و سمت راست یه ساختار پاره ای بغرنجخیس که خودش دو ستون داره؛ یکی از با دو ردیف افقی و یک کدام از با یه ردیف تکی.
دکورا سیون قسمت کانالای تارنما اتریوم
چینش قسمت کانالای وبسایت اتریوم
در غایت این ساختار تماماً همون چیزی رو درمیاره که توی وب سایت اتریوم داریم. تنها کافیه محتواهاشو وارد کنیم و در شکل نیاز، استایلهارو روی هر قسمت مستقل مستقل تهیه کنیم. الان همگیچی مهیاست، کانالمون به صحت و تمیزی پیادهسازی گردیده.
از در بین بردن مسافتهای مازاد
الان که ساختار کلی کانالمون رو ساختیم، ممکنه یه محرمانه مسافتهای خالی یا این که ناهماهنگ میان ردیفها ببینیم که ظواهر عمل رو بهم میریزن. کاری که اعمال میدم اینه کهاین مسافتهای اضافه رو صفر می کنم. برای این فعالیت، میحافظه موقت سراغ پیکربندی توسعه یافته ردیفها (همون Advanced). هر ستونی که تو این نصیب می باشد رو تعیین میکنم، سپس تو بخش مسافت داخلی یا این که همون پدینگ (Padding)، تمامی مقادیر رو صفر میذارم. یعنی کلیهی ردیفهایی که تو این کانال هستن، یکی ازیک کدام از پدینگشون رو صفر می کنم.
یه نکته حائض اهمیت اینه که بعضا وقتا یه کانتینر یا این که ستون والد می باشد که تمامیی این ردیفها داخلش قرار تصاحب کردن؛ اونم نباید فراموش شه. اون کانتینر رو هم گزینش میکنم و پدینگشو صفر میذارم. با این شغل، کلیهی فواصل اضافه فی مابین اجزا از دربین میرن و اجزا ظریف و منظم کنار هم قرار میگیرن.
البته یه زمینه دیگه هم میباشد: ممکنه ببینیم یه ردیف از حیث طول با سایر همقد وجود ندارد یا این که نمیخواد تک تک طول اون قسمت رو مالامال کنه. یه رویه غیر اصولی اینه که بیایم براش طول اثبات بذاریم (به عنوان مثالً بگیم دستکم ارتفاعش فلان قدر باشه)، البته این شغل تو پیاده سازی ریسپانسیو به درد نمیخوره زیرا تو دستگاههای گوناگون ممکنه بههم بریزه.
منش اصولیخیس چیه؟ اینکه بیایم ردیف والدش رو گزینش کنیم، یعنی اون ستونی کهاین یکیاز توش قرار گرفته. زیرا پدینگ رو صفر کردیم، شاید نشه بی واسطه انتخابش کرد، پس یهجور غیرمستقیم یا این که با راستکلیک انتخابش میکنم. بعداز اینکه انتخابش کردم، تو نصیب «طرحبندی» یا این که همون Layout، تراز موردها (Align Items) رو میذارم روی «کشیده» یا این که Stretch. اگه بازم صحیح عمل نکنه، جهت محتوا (Direction) رو میذارم روی افقی (Horizontal) تا محتوا به صحت کش بیاد و طول رو لبریز کنه.
پیاده سازی ریسپانسیو و تلفن همراه فرندلی