طراحی صفحات وب پاسخگو با استفاده ازدریم ویور

[کامران غلامی]

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

[*=right] شروع Dreamweaver، و در صفحه خوش آمدید کلیک کنید چیدمان شبکه سیالات.
http://www.adobepress.com/content/images/excerpt02_9780321822604/elementLinks/thfigure01.jpg
شکل 1
در جدید جعبه محاوره سند، تعداد در داخل هر گرافیکی روی صفحه نمایش اندازه تعداد ستون ها در سراسر طراحی است، و درصد زیر هر گرافیک درصد از عرض صفحه نمایش استفاده می شود برای بدن از صفحه است. در حال حاضر شما در صفحه برای اولین بار نجات دهد. این اتفاق می افتد در دو مرحله: صرفه جویی در یک فایل CSS و سپس یک فایل HTML. فایل CSS سبک صفحه و طرح را تعریف می کند، در حالی که فایل HTML توصیف آنچه که در فایل گنجانده شده است. به عبارت دیگر، برای یک صفحه وب، CSS فرم تعریف می کند و HTML محتوا را تعریف می کند.
[*=right] ترک به صورت پیش فرض و روی ایجاد کلیک کنید.
[*=right] در جدول فایل را ذخیره کنید سبک به عنوان کادر محاوره ای که ظاهر می شود، فهرست برای انتخاب پوشه CSS در داخل پوشه Lesson05. با زیرپوشه CSS انتخاب، نام جدید fluid.css فایل CSS، و ذخیره را کلیک کنید.
[*=right] را انتخاب کنید فایل> جویی در هزینه. نام و نام خانوادگی fluid.html فایل و ذخیره فایل HTML5 جدید. مطمئن باشید که آن را ذخیره کنید در سطح بالا از پوشه Lesson05، در کنار زیرپوشه CSS.
[*=right] در کپی وابسته فایل کادر محاوره ای که ظاهر می شود، کلیک کنید کپی برای نجات دو فایل ذکر شده (که مورد نیاز هستند) به طور خودکار به زیرپوشه مناسب در داخل پوشه Lesson05 خود را.
http://www.adobepress.com/content/images/excerpt02_9780321822604/elementLinks/thfigure02.jpg
شکل 2

[*=right] با کلیک بر روی دکمه اسپلیت در سمت چپ بالای پنجره سند. حالا شما می توانید مشخصات کد و مشخصات طراحی در همان زمان را ببینید. اگر شما یا مشخصات را ویرایش کنید، هر دو دیدگاه به روز رسانی. اگر شما ترجیح می دهید، شما می توانید فقط کد و یا فقط طراحی نشان می دهد.
[*=right] از نظر طراحی، کلیک کنید در داخل ظرف به طور پیش فرض DIV سبز به آن را انتخاب کنید. یک div یک لایه در یک صفحه HTML است.
[*=right] در بخش HTML بازرس خواص در پایین پنجره، انتخاب نام ظرف DIV موجود در زمینه ID (LayoutDiv1) و نام آن را هدر.
http://www.adobepress.com/content/images/excerpt02_9780321822604/elementLinks/thfigure03.jpg
شکل 3

[*=right] در سمت راست گوشه پایین سمت راست عنصر DIV gridContainer سبز موجود کلیک کنید. به نظر کد در سمت چپ، بررسی کنید که نقطه درج مکان نما را بعد از بسته شدن </ DIV> برچسب لایه به طور پیش فرض gridContainer واقع شده است.
[*=right] در رده طرح از پانل درج، کلیک کنید درج سیالات برچسب توری طرح دیو.
[*=right] در زمینه ID از درج ​​توری سیالات چیدمان دیو جعبه محاوره برچسب، نام تگ div دوم NAV.
http://www.adobepress.com/content/images/excerpt02_9780321822604/elementLinks/thfigure04.jpg
شکل 4

[*=right] اضافه کردن چهار divs های بیشتر تکرار مراحل 10 و 11، و نام divs جدید معرفی، اصلی، گذشته، و پاورقی.
http://www.adobepress.com/content/images/excerpt02_9780321822604/elementLinks/thfigure05.jpg
شکل 5
در پایین پنجره سیستمهای قطعنامه با سه آیکون و منوی پاپ آپ است. سه آیکون ایستگاه از پیش تنظیم برای پیش نمایش تلفن همراه، قرص، و اندازه رومیزی در نظر طراحی، و منوی پاپ آپ اجازه می دهد تا به شما در تنظیم اندازه های سفارشی. این توصیه می شود که شما شروع به طراحی برای کوچکترین اندازه صفحه نمایش شما می خواهید سایت خود را به حمایت از. http://www.adobepress.com/content/images/excerpt02_9780321822604/elementLinks/thfigure06.jpg
شکل 6

[*=right] در قطعنامه تلفن، کلیک کنید بزرگترین آیکون (رومیزی سایز) تا ببینید که چگونه تغییرات طرح.
به سمت چپ از قطعنامه تلفن است بزرگنمایی منوی پاپ آپ. این فعال هنگامی که مشخصات طراحی فعال است.
[*=right] کلیک کنید زیر ذره منوی پاپ آپ و همه جا به طوری که شما می توانید تمام طرح را ببینید را انتخاب کنید، و سپس با کلیک بر روی اندازه قرص و موبایل حجم دکمه در قطعنامه سیستمهای تا ببینید که چگونه طرح فعلی تنظیم به هر اندازه. هنگامی که شما انجام می شود، را انتخاب کنید 100٪ از زیر ذره منوی پاپ آپ.
[*=right] با کلیک بر روی دکمه زنده در بالای پنجره سند. این تغییر دیدگاه طراحی به نمایش زنده، که پیش نمایش سایت خود را با استفاده از WebKit است به طوری که آن را با دقت به عنوان آن را در مرورگرهای وب مبتنی بر WebKit به نظر می رسد.
http://www.adobepress.com/content/images/excerpt02_9780321822604/elementLinks/thfigure07.jpg
شکل 7
حالا شما می توانید برای یک صفحه نمایش کوچک موبایل می بینیم که، محتوای هر لایه (DIV) می شود یک ردیف گرفتن کل عرض صفحه نمایش و پوشا تمام ستون نمایش داده شده در صورتی.
[*=right] با کلیک بر روی دکمه قرص، و در صورت نیاز، تنظیم عرض مشخصات طراحی با کشیدن جدا در وسط پنجره به طوری که شما می توانید تمام عرض به اندازه قرص در٪ بزرگنمایی 100 را ببینید.
[*=right] کشیدن دسته در وسط لبه سمت راست عنصر DIV را کنار گذاشته و آن چهار ستون گسترده ای را. توجه کنید که عرض به طور خودکار به شبکه ستون جرقه بزند. تنظیم عرض لایه های اصلی در به همان شیوه.
http://www.adobepress.com/content/images/excerpt02_9780321822604/elementLinks/thfigure08.jpg
شکل 8

[*=right] لایه گذشته را انتخاب کنید و با کلیک بر روی حرکت یک دکمه ردیف. در حال حاضر لایه های اصلی و گذشته در همان سطر، که حس می کند در عرض بیشتری روی صفحه نمایش از یک قرص می باشد.
http://www.adobepress.com/content/images/excerpt02_9780321822604/elementLinks/thfigure09.jpg
شکل 9

[*=right] با استفاده از قطعنامه تلفن به سوئیچ بین اندازه های موبایل و تبلت، و مشاهده پوسته های مختلف شما را به هر اندازه اختصاص داده ام. احساس رایگان برای آزمایش بیشتر با طرح بندی برای سه اندازه.
[*=right] بستن فایل fluid.html، و ذخیره ی تغییرات اگر پرسید.


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