هنگام طراحی سایت ها ، شما اغلب باید یک سوال اساسی را حل کنید: رفتار صفحه با باز شدن صفحه با وضوح مختلف چگونه خواهد بود؟ در اینجا دو گزینه وجود دارد - صفحات سایت "لاستیکی" (کش دار) یا ایستا. اولین گزینه مورد بحث قرار خواهد گرفت. اولویت شما برای چیدمان ، اصل اصلی طراحی کشش مقیاس پذیری نسبی است.
لازم است
- - دانش HTML
- - برنامه ویرایش کد HTML.
دستورالعمل ها
مرحله 1
فایل اصلی را برای الگوی سایت خود انتخاب کنید که نشان دهنده اصلی باشد. این می تواند پرونده index.html یا index.php باشد. یکی از بهترین نرم افزارهای ویرایش قالب سایت های بصری Macromedia Dreamweawer است. ویرایش های لازم بر اساس این برنامه انجام می شود.
پرونده الگو را باز کنید یا با دستور "File" - "New" ، category - "Base page" - "HTML" یا گروه "صفحه Dynamic" - "PHP" پرونده جدیدی ایجاد کنید. در اینجا ما حالت کلی را در نظر می گیریم که ساختار سایت دقیقاً در یکی از دو پرونده ثبت شود.
گام 2
مدتهاست که هیچ رازی وجود ندارد که انواع مختلفی از چیدمان وجود دارد - روی میزها ، روی بلوک های جداگانه و ترکیبی (جداول و بلوک ها به طور همزمان). برچسب html مسئول چیدمان جدول است
برای هر ملک درصدی (100٪) مشخص کنید. با این کار می توان به اثر کشش خودکار سلول های جدول روی صفحه هایی با هر هندسه دست یافت. این می تواند یک مانیتور 19 اینچی یا یک گوشی هوشمند باشد - هر یک از آنها به درستی تولید محتوا می کنند.
مرحله 3
اگر لازم است مطابقت بین سلول های جدول را دقیقاً مشخص کنید ، از مثال زیر استفاده کنید:
| … … محتویات سلول 1. … | … … محتویات سلول 2. … |
در اینجا خواهید دید که یکی از سلول ها با عرض 30٪ از هر آنچه برای خود جدول تعریف شده مشخص شده است. یک محاسبه ساده نشان می دهد که 100٪ -30٪ = 70٪ برای سلول دوم باقی مانده است. به یاد داشته باشید که در این حالت یکی از سلول های جدول نباید تنظیمات عرض را تعیین کند. مرورگر همه محاسبات را به تنهایی انجام می دهد و به درستی جدول را با سلولها کش می دهد. محتوای داخل میزها نیز به درستی در صفحه های مختلف کشیده و کوچک می شوند.
مرحله 4
در شرایطی که یک طرح div دارد ، بلوک های برچسب به طور پیش فرض به تمام عرض صفحه کشیده می شوند و یکی پس از دیگری از چپ به راست ، از بالا به پایین دنبال می شوند. برای اصلاح هندسه آنها ، یک کلاس یا شناسه CCS (ID) ایجاد کنید ، در آن ، برای مثال ، ویژگی ها و / یا برای دسته اندازه و موقعیت جعبه (جعبه) را مشخص کنید. فراموش نکنید که سبک مشخص شده را به پرونده نشانه گذاری سایت پیوند دهید و کلاس (ID) را به برچسب مورد نظر متصل کنید. معمولاً در ابتدای اسکریپت قرار می گیرد و تمام هندسه سایت آینده را تعریف می کند:
… … محتوای سایت. …
یا مثل این:
… … محتوای سایت. …
کد قانون CSS به شرح زیر است:
… کلاس من {
عرض: 30٪
قد: 50٪
}
#شناسه ی من {
عرض: 30٪
قد: 50٪
}
