i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

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

web-template-question

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

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


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

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


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

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


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

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


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

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


دستکاری شدن قالب ها و پاک شدن برخی تگ ها نیز از دلایل شایع بهم ریخته شدن آنها است، هر چند ممکن است تجربه و آشنایی کافی با تگ ها و اصول برنامه نویسی وب را داشته باشیم، اما با این حال بهتر است قبل از اعمال هر نوع تغییری در قالب، ابتدا از آن پشتیبان تهیه کنیم که در مواقع لزوم بتوانیم وضعیت را به حالت سابق تغییر دهیم، با رعایت این نکات ساده می توان از بروز مشکل به هم ریختن قالب سایت و وبلاگ تا حدود زیادی پیشگیری کرد.
sectionدسته بندی: مهارتهای وب » دانستنی ها
related مطالب بیشتر:
» اصطلاحاتی که هر مدیر سایت باید بداند!
» IP چیست و چه کاربردی دارد؟
» مفهوم پلتفرم (Platform) و فریم ورک (Framework)
» لیست کدهای وضعیت HTTP و معنی خطاهای سرور
» چگونه با برنامه Outlook Express ایمیل ارسال و دریافت کنیم؟
commentنظرات (۱۴ یادداشت برای این مطلب ارسال شده است)
نویسنده: محمدرضا
زمان: ۱۶:۱۲:۰۰ - تاریخ: ۱۳۹۲/۰۵/۰۸
ممنون دقیقا مورد آخر رو انجام داده بودم :D
نویسنده: مصطفی
زمان: ۲۰:۲۹:۵۶ - تاریخ: ۱۳۹۲/۱۱/۰۸
ببخشید من مانیتورم 1600 در 900 هست و واسه طراحی ممکنه یک بلاک رو منطقه ی 1500px قرار بدم حالا کاربری که مانیتورش 800 در 600 باشه میتونه این بلاک رو بدرستی و بدون اسکرول ببینه؟ آیا راهی هست مثلا اگه همه بلاک ها رو با درصد وارد کنیم درست میشه؟
پاسخ: 
استاندارد خاصی برای عرض قالب های وب وجود ندارد، چون گستره استفاده از دستگاهها با پهنای متفاوت زیاد است، اما معمولا برای قالب های با عرض ثابت، پهنای 960 یا 980 پیکسل استفاده می شود، امروزه اکثر مانیتورهای CRT از استاندارد 1024 پیکسل استفاده می کنند و در مانیتورهای عریض این اندازه بیشتر است، پس اگر پیکسل قالب خود را همان 960 در نظر بگیرید، با طراحی خوب و استاندارد، مرورگر سایت را به خوبی نشان می دهد و به فرض اسکرول افقی نخواهید داشت، یک شیوه دیگر طراحی قالب به صورت تعریف مقادیر درصدی به جای پیکسل است، به این صورت با کاهش یا افزایش پهنای پنجره مرورگر، قالب نیز خود را با آن هماهنگ می کند، البته این روش به دلیل برهم زدن یکنواختی کار، چندان باب طبع طراحان وب نیست، ولی گاهی رهگشا است، در حال حاضر طراحی واکنشگرا (Responsive) مورد اقبال توسعه دهندگان واقع شده که به نظر آینده وب به سمت این سبک طراحی در حرکت است!
نویسنده: مصطفی
زمان: ۱۸:۳۰:۱۳ - تاریخ: ۱۳۹۲/۱۱/۰۹
ممنون فقط یه مشکل کوچیک دارم وقتی با درصد عناصر رو تعریف می کنم همه ی بلاک ها با تغییر اندازه صفحه تغییر می کنن بجز خاصیت font-size یعنی سایز فونتها به همون شکل اولیه میمونه
پاسخ: 
برای این کار راه حل ساده ای وجود ندارد، در واقع کم تر سایتی را می توان پیدا کرد که با تغییر اندازه صفحه نمایش، اندازه فونت آن تغییر کند (این کار استاندارد نیست!)، در طراحی های جدید از متاتگ viewport به صورت زیر استفاده استفاده می کنند:
<meta name="viewport" content="width=device-width, initial-scale=1">
نویسنده: بهار
زمان: ۲۲:۳۲:۰۰ - تاریخ: ۱۳۹۲/۱۲/۲۶
سلام من یک قالب وب را کپی کردم خوشم نیومد یک قالب دیگه رو کپی کردم اما قالب اول به صورت پیش فرض ذخیره شده هر چی قالب کپی می کنم اون قالب هم هست چی کار کنم
پاسخ: 
در چه سیستم یا سرویسی وبلاگ دارید؟ ممکن است مشکل از cache شدن اطلاعات باشد، برای اطمینان دکمه Ctrl و F5 را با هم بزنید.
نویسنده: پریسا
زمان: ۱۰:۴۱:۲۴ - تاریخ: ۱۳۹۳/۱۲/۱۲
سلام
من یک سایت طراحی کردم که با کوچک کردن صفحه بعضی نوشته هاش تو هم میرن .
از تگ زیر هم استفاده کردم ولی درست نشد.
<meta name="viewport" content="width=device-width, initial-scale=1">
پاسخ: 
استفاده از متاتگ چاره مشکل نیست! باید تسلط خود بر خواص CSS را افزایش دهید تا قالب های سازگارتری طراحی یا بتوانید اشکلات آنها را رفع کنید.
نویسنده: پریسا
زمان: ۱۰:۰۲:۴۹ - تاریخ: ۱۳۹۳/۱۲/۲۶
با تشکر از جواب قبلی شما. یه سوال دیگه این که برای اینکه سایت در صفحه موبایل به صورت اسکورل بیاد باید اندازه ها رو به صورت پیکسل بدم؟ یا اینکه راه دیگه ای داره؟
ممنون.
پاسخ: 
برای طراحی قالب سازگار با تلفن های همراه بهتر است از مقدار دهی درصدی یا قالب رسپانسیو استفاده کنید، البته اکثر تلفن های همراه امروزی قابلیت نمایش هوشمند صفحات وب را دارند که حتی قالب های با مقداردهی ثابت (پیکسلی) را نیز به خوبی نمایش می دهند اما از نظر سئو بهتر است قالب واکنشگرا یا طراحی جداگانه مخصوص موبایل داشته باشید.
نویسنده: رها
زمان: ۲۰:۳۵:۵۹ - تاریخ: ۱۳۹۴/۱۲/۰۴
با سلام لطفا به منم کمک کنید. من توی وبلاگم کد هر قالبی رو که وارد میکنم یا قبول نمیکنه یا اگر هم قبول کنه کل وبلاگ به هم میریزه با این وجود کد رو از یه سایت معتبر گرفتم و عکسی هم وارد نکردم ولی بازم به هم میریزه. سرویس دهنده ی وبلاگم هم بلاگفا هستش. اینکه میگم کدها به هم میریزه منظورم فقط قالب وبلاگه وگرنه کد هایی مثل حباب و قلب و ساعت رو درست وارد میکنه. راستی توی وارد کردن کدها هم اشتباه نکردم. خواهش میکنم زود جواب بدید به کمکتون نیاز دارم. ممنون.
پاسخ: 
دلایل این مشکل می تواند خیلی گسترده باشد، لطفا آدرس وبلاگتان را جهت بررسی درج کنید.
نویسنده: رها
زمان: ۰۹:۵۹:۱۷ - تاریخ: ۱۳۹۴/۱۲/۰۸
باسلام. این وبلاگ منه:
www.khatkhatird13.blogfa.com
پاسخ: 
وبلاگتان در مرورگر فایرفاکس بررسی شد و بدون مشکل بود! ممکن است ایراد از cache شدن اطلاعات باشد، پس از بارگذاری وبلاگ، دکمه Ctrl + F5 را با هم بزنید تا صفحه به طور کامل رفرش شود، همچنین برای اطمینان می توانید در سیستم ها یا مرورگرهای دیگر چک کنید.
زمان: ۰۱:۳۲:۰۰ - تاریخ: ۱۳۹۵/۰۱/۲۹
سلام، پروفایل وبلاگم خود به خودی جابجا و عوض شده حالا نمیتونم به یخش مدیرتم برم حالا چیکار کنم خواهشن راهنماییم کنید مرسی
پاسخ: 
سوال واضح نیست! منظور از جابجایی پروفایل مشخص نیست؟! لطفا توضیحات دقیق تری ارائه کنید.
نویسنده: بهنام
زمان: ۲۳:۵۰:۲۲ - تاریخ: ۱۳۹۵/۰۱/۳۰
سلام از دیروز وبلاگم حذف شده آخه چرا؟ من دیروز ازتون سوال کردم وقتی سرورهای بلاگفا خراب شده بود پروفایل وبلاگم با اسم یه نفر دیگه عوض شده بود خواهشا بهم بگین چرا وبلاگم‌ حذف شده
پاسخ: 
هرچند نمی توان در مورد علت حذف وبلاگ شما نظر قطعی داد، اما متاسفانه سایت بلاگفا مدتها است که دچار مشکلات عدیده ای است و بروز چنین مواردی به دفعات از طرف کاربران این سرویس عنوان شده.
نویسنده: رضا
زمان: ۱۵:۳۰:۲۸ - تاریخ: ۱۳۹۵/۰۴/۳۱
سلام
من در حال طراحی قالبی هستم با دریم ویور و wampserver وقتی مرورگر رو کوچک میکنم اندازه ها و کل قالب بهم میریزه
لطفا اگه راه حلو میدونین کمک کنین
تلگرام   @delent
پاسخ: 
رفع این موارد به سادگی ممکن نیست، در واقع مشکل مربوط به ساختار و کارهای پایه ای در طراحی قالب است، به طور مثال باید قالب را به صورت بلاک های در هم و آشیانه ای فرمت بندی کنید یعنی ابتدا بلاک کلی سپس بلاک های دیگر در درون آن تعریف شوند، تعیین مقدار پیکسلی یا درصدی مناسب با اندازه های موجود و در دسترس و همچنین استفاده بجا از خاصیت ها و آشنایی با رفع ناسازگاری ها همگی نیازمند تمرین و تکرار CSS از پایه است که باید در زمینه فراگیری آموزش های مقدماتی بیشتر تلاش کنید!
نویسنده: میلاد کرامتی
زمان: ۱۲:۳۷:۳۰ - تاریخ: ۱۳۹۵/۰۹/۲۰
سلام ، من یه قالب طراحی کردم ، اما وقتی این قالب را روی هاست پابلیش میکنم از هم میپاشه چیکار کنم؟
پاسخ: 
باید در درجه اول ببینید آدرس دهی بخش های مربوط به فایل های CSS قالب به درستی صورت گرفته باشد، یعنی href تگ link، اگر مشکل رفع نشد باید قالبتان به صورت آنلاین بررسی شود!
نویسنده: ali reza
زمان: ۲۰:۱۶:۲۸ - تاریخ: ۱۳۹۶/۰۲/۱۸
با سلام بنده یک سایت دارم طراحی کردم که در صفحه نمایش خودم مرتب است اما در صفحه نمایش های دیگر به هم میریزد پرسیدم می گن که یک کد دارد لطفن کد مورد نیاز رو برام بفرستید
پاسخ: 
این بستگی به شیوه طراحی شما داد، کدی که معجزه کند برای این موضوع وجود ندارد! توصیه می کنیم طراحی واکنشگرا (Responsive) وب را فرا بگیرید.
نویسنده: زینب
زمان: ۱۷:۱۷:۴۰ - تاریخ: ۱۳۹۶/۰۴/۲۸
سلام توروخدا کمکم کنید هدر وبلاگم عووض کرد بهم ریخته قالبم
میشه تو تلگرام بهم راهنمایی کنید درستش کنم
پاسخ: 
لطفا آدرس وبلاگ را جهت بررسی درج و در همین قسمت منتظر پاسخ باشید!




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

8 × 6
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...
پرشین آی تی
Persianit.net

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)
سامانه استخدام ایران
Iran-karyab.com

اطلاع رسانی استخدام های معتبر دانلود رایگان نمونه سئوالات