امروز چهارشنبه ۱۴۰۰/۰۱/۲۵

2021/04/14 GMT +4:30

» دلایل بهم ریختن قالب وبلاگ و سایت

web-template-question

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

نوع طراحی قالب


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

عدم سازگاری قالب با مرورگرها


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

درج محتوای غیر استاندارد


علت دیگری که می تواند سبب بهم ریختن قالب وب شود نوع مطالب و محتوایی است که مدیر سایت یا وبلاگ در آن درج می کند، به طور مثال درج تصاویری که پهنای پیکسلی آنها بیش از صفحه طراحی شده برای نمایش مطلب است (به فرض درج یک تصویر با ابعاد 600 در 800 پیکسلی در یک بلاک با ابعاد 500 در 600 پیکسلی) ممکن است موجب شود تا کل قالب ناقص نشان داده شود و یا به فرض  نویسنده سایت یا وبلاگ یک عبارت طولانی را بدون فاصله در جعبه های کناری قرار دهد (به فرض عبارت weeeeeeeeeeeee...b) که این موضوع موجب می شود تا مرورگر نتواند کلمات را بشکند و در خط بعدی نشان دهد و این خود باعث ایجاد مشکل می شود، لذا برای تصاویر بهتر است از مقدار عرض و ارتفاع (width و height) کمتر از فضای موجود استفاده کنیم و برای نوشته ها از موارد طولانی و غیرقابل شکست (non-breaking) خودداری کنیم، در همین رابطه درج کدهای فلش غیر استاندارد، درج پلیرهای وب با ابعادی بزرگتر از بلاک دربرگیرنده آنها و مواردی از این دست نیز می توانند موجب بهم ریخته شدن قالب وب شوند.

کدنویسی غیر استاندارد


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

دستکاری قالب سایت و وبلاگ


دستکاری شدن قالب ها و پاک شدن برخی تگ ها نیز از دلایل شایع بهم ریخته شدن آنها است، هر چند ممکن است تجربه و آشنایی کافی با تگ ها و اصول برنامه نویسی وب را داشته باشیم، اما با این حال بهتر است قبل از اعمال هر نوع تغییری در قالب، ابتدا از آن پشتیبان تهیه کنیم که در مواقع لزوم بتوانیم وضعیت را به حالت سابق تغییر دهیم، با رعایت این نکات ساده می توان از بروز مشکل به هم ریختن قالب سایت و وبلاگ تا حدود زیادی پیشگیری کرد.
دسته بندی: مهارتهای وب » دانستنی ها
related مطالب بیشتر:
» چگونه با برنامه Outlook ایمیل ارسال و دریافت کنیم؟
» مفهوم پلتفرم (Platform) و فریم ورک (Framework)
» اصطلاحات و مفاهیمی که مدیر سایت باید بداند!
» IP چیست و چه کاربردی دارد؟
» جلوگیری از بلاک یا ارسال ایمیل به اسپم با SPF
commentنظرات (۳۳ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: seyedsobhanmansouri
۲۱:۳۸ ۱۳۹۹/۱۰/۱۹
سلام خسته نباشید
من سایتمو طراحی کردم اما به این مشکلات بر میخورم
اول اینکه هدر سایتم نمایش داده نمیشه اصلا و بعد اینکه اسلایدر و بنر تبلیغاتیم در گوشی بهم می خوره اگر میشه راهنماییم کنید ممنون
پاسخ: 
استایل CSS قالب برای گوشی های تلفن همراه دارای ایراداتی است، رفع مشکل زمانبر است و نیاز به آزمایش و خطا دارد، باید با یک طراح وب موضوع را مطرح کنید.
نویسنده: parsa
۱۳:۳۰ ۱۳۹۹/۱۱/۱۵
سلام من در حال اموزش اچ تی ام ال و سی اس اس هستم من برای اموزش یک سایت نوشتم مشکل این هست که وقتی زوم می کنم درست زوم نمیشه همه چی بهم میریزه
پاسخ: 
این نوع مشکلات معمولا از مقداردهی پیکسلی ثابت به المان ها ناشی می شود که با تغییر Viewport در هنگام زوم به صورت ناهماهنگی تغییر می کنند، سعی کنید تکنیک های طراحی واکنش گرا (Responsive) را در قالبتان اعمال و از مقداردهی درصدی به جای پیکسل استفاده کنید، همچنین متاتگ زیر را در قالبتان داشته باشید:
<meta name="viewport" content="width=device-width, initial-scale=1">
در نهایت ممکن است نیاز به تست و آزمایش خطا و در نظر گرفتن فضای بیشتر برای المان هایی باشد که در حالت زوم ایجاد مشکل می کنند.
نویسنده: امیر حسین مروتی
۱۰:۴۲ ۱۳۹۹/۱۲/۲۳
سلام. من سایتم که کد نویسی کردم در دستگاه های مختلف به شکل های دیگری درمیاد. تو تلویزیون هر کاری کرم تمام صفحه نمیشد تو کامپیوتر درست میاره تو گوشی هم محتواها میرن تو دل هم. چیکار باید کنم؟
پاسخ: 
برای داشتن قالب سازگار با تمام دستگاه ها و صفحه نمایش ها باید با تکنیک های طراحی واکنش گرا (Responsive) آشنا باشید، از جمله این تکنیک ها استفاده از مقداردهی درصدی به جای حالت های ثابت (به فرض پیکسلی) است، همچنین استفاده از media screen و در نظر گرفتن استایل CSS مخصوص دستگاه های موبایل، آشنایی اولیه:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





6 × 6
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form شریفی
در:
سلام مجدد. من یه سوال خیلی تخصصی دارم. ممنون میشم پاسخ بدین. برای پروژه پایان نامه. دارم روی موتورهای جستجوگر تحقیق میکنم. فرض...
۱۴۰۰/۰۱/۲۵

form شریفی
در:
سلام استاد. من از متد file_get_contents استفاده می کنم برای دریافت اطلاعات از سایت های مختلف. بعضی وقتها سایت ها دیر لود میشه. آیا...
۱۴۰۰/۰۱/۲۵

form hh
در:
سلام خدمت شما بنده یه سوال داشتم تمام مراحل شما رو انجام دادم و نتیجه گرفتم و لازمه یه تشکرم بکنم. وبسایت من،...
۱۴۰۰/۰۱/۲۵

form erfan
در:
سلام من واسه یه دکمه یه محتوایی تعریف کردم که وقتی کلیک شد محتوا رو نشون بده اما تو دوجاش موندم یک اینکه چیکار کنم...
۱۴۰۰/۰۱/۲۱

form mahdi
در:
سلام استاد عزیز ، بازم معذرت میخوام سوالام زیاد شد ولی همشون در یک موضوع هستن ، تونستم که با این روش برای هر اسلایدر...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام استاد عزیز عذر میخوام بار سومه پیام میزارم ، مشکلش از ست اینترول بود که قطع نمیشد و با هم تداخل داشتند ولی بدون...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام وقت بخیر استاد عزیز ، یک تابع رو چطور میشه در جاوا اسکریپت اورراید کرد؟ که مثلا با هر فراخوانی مجدد ، قبلی ها...
۱۴۰۰/۰۱/۱۸

form متین
در:
سلام چجوری برای خود صفحه ادرس بسازیم که سایتی که رو ساختیم رو با دستگاه دیگه پیداش کنیم
۱۴۰۰/۰۱/۱۶

form امیرحسین برزویی
در:
من یک وبلاگ دارم و 9 سالمه من در وبلاگم مداحی می گذارم ولی وقتی قاب گذاشتم از این سایت من دیگه فیلم...
۱۴۰۰/۰۱/۱۶

form بنده خدا
در:
سلام خسته نباشین، خدا قوت. یه سوال دارم. چرا در بخش نظردهی وبلاگ به جای عنوان پست می نویسه مطلب مورد نظر یافت نشد؟!...
۱۴۰۰/۰۱/۱۵

form روح الله
در:
موقعی میخواهم وارد سایت ایران خودرو بشم پیام میده از Ip داخلی استفاده کنید دلیلش چیست
۱۴۰۰/۰۱/۱۴

form غریب
در:
تشکر از شما مشکلم حل شد امیدوارم موفق و پیروز باشید هر جا که هستید
۱۴۰۰/۰۱/۱۱

form غریب
در:
سلام مجدد ممنون و تشکر از کمکتون کد به خوبی کار میکنه اما همچنان من مشکلی دارم که حل نتونستم کنم...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام مجدد این کدی که دادید خوب هست ولی من بد و ناقص توضیح دادم توجه کنید کد این هست تقریبا ممنون...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام خسته نباشید من کدی دارم که میخوام داخل یه بخشیش نتیجه یه رویداد رو فراخوانی کنم و راهش و نمیدونم اگر میشه کمک...
۱۴۰۰/۰۱/۱۰

form محسن
در:
سلام ، سوال من مربوط به پنل کارگزاری هاست ، وقتی اسم یک سهم (نماد) را در قسمت جست و جو سرچ میکنم...
۱۴۰۰/۰۱/۰۸

form ترجمه
در:
باسلام همه صفحات من دارای دو url می باشد که یکی با حروف کوچک است و دیگری با حروف بزرگ چجوری این مشکل را...
۱۴۰۰/۰۱/۰۸

form سهیل ملکی
در:
سلام خسته نباشید ببخشید من میخوام از تابع navigator.online توی جاوا اسکریپت استفاده کنم تا باهاش بفهمم کاربر آنلاین هست یا نه و اگه بود...
۱۴۰۰/۰۱/۰۴

form Rabbiten
در:
سلام. من چند ماه است که دنبال کد استایل تصویر مثل تبلیغات بالای سایت شما هستم. اما هیچ جا پیدایش نمی کنم. لطف می...
۱۴۰۰/۰۱/۰۱

form mahdi
در:
سلام استاد عزیز سال نو رو تبریک میگم بهتون ، امیدوارم که خودتون و خانوادتون همیشه سالم و سلامت باشید و امسال پر از...
۱۳۹۹/۱۲/۳۰

form korosh abbasy
در:
سلام وقت بخیر ببخشید در مورد این مطلب سوالی پرسیدم شما در مورد output buffering توضیح دادید کد کار نمیکنه میخواستم ببینم نیازی هست من...
۱۳۹۹/۱۲/۲۹

form احمد
در:
سلام مجدد عذرخواهی میکنم یه موردی دیگه بود فراموش کردم در مورد سوال هدر بگم اینکه روی لوکال به هدر ارسال میشه ولی روی هاست...
۱۳۹۹/۱۲/۲۸

form احمد
در:
با سلام خسته نباشید ببخشید قبلا یه سری دستورات جی کوری رو از خودتون گرفتم وقتی فیلدهای فرمم تکمیل شده است توسط هدر بره به...
۱۳۹۹/۱۲/۲۸

form korosh abbasy
در:
سلام دم شما گرم این دستور برای خوندن فایل هم استفاده میشه؟ من میخوام دسترسی تعیین کنم که اگر یک متغییر true...
۱۳۹۹/۱۲/۲۷

form احمد
در:
با سلام و خسته نباشید ببخشید داخل جیکوری یدونه متغییر دارم الان میخوام همین متغییر رو با یه عدد دیگه جمع کنم ولی وقتی علامت...
۱۳۹۹/۱۲/۲۶
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.