Smiley face

عنوان : ایجاد یک صفحه وب mobile-friendly با Dreamweaver

1396/11/14 - 09:22:23
با توجه به محبوبیت فزاینده ای از تلفن های هوشمند و رایانه های لوحی، Adobe ادغام توانایی ایجاد محتوای تلفن همراه را در سراسر مجموعه خلاقیت خود و Dreamweaver را بدون هیچ استثنائی آغاز کرده است. یک ویژگی که در Dreamweaver CS5 معرفی شد و در CS5.5 بهبود یافت پشتیبانی از CSS3 Media Queries است.


ایجاد یک صفحه وب mobile-friendly با Dreamweaver

با توجه به محبوبیت فزاینده ای از تلفن های هوشمند و رایانه های لوحی، Adobe ادغام توانایی ایجاد محتوای تلفن همراه را در سراسر مجموعه خلاقیت خود و Dreamweaver را بدون هیچ استثنائی آغاز کرده است. یک ویژگی که در Dreamweaver CS5 معرفی شد و در CS5.5 بهبود یافت پشتیبانی از CSS3 Media Queries است.

پرس و جوهای رسانه ای به طراحان وب اجازه می دهد تا صفحات سبک بر اساس اندازه صفحه نمایش دستگاه مورد استفاده برای مشاهده صفحه ایجاد کنند. با نگاه کردن به مثال، ساده تر می شود درک کرد:

@import url("tablet.css") only screen and (min-width:321px) and (max-width:768px);

برای پرس و جو در بالای صفحه، tablet.css فقط برای دستگاههایی با عرض صفحه بین 321 و 768 پیکسل استفاده می شود. دستگاه های بزرگتر و کوچکتر tablet.css را نادیده می گیرند.

به سادگی مي توان گفت، پرس و جوهای رسانه ای برای صفحه وب امکان استفاده از صفحات جداگانه برای تلفن، تبلت و دسکتاپ (و حتی اندازه صفحه نمایش در میان) را دارد. من ترجیح شخصی خود را برای ایجاد یک سبك ورقه برای همه دستگاه ها و سپس استفاده از پرس و جو رسانه ها برای نوشتن سبک های موجود و ایجاد سبک جدید خاص دستگاه مشخص شده است. این همچنین برای جلوگیری از مشکلی در مرورگرهای قدیمی که از پرس و جوهای رسانه پشتیبانی نمی کند کمک می کند.

ما از طریق یک مثال ساده کار خواهيم کرد. هنگامی که این مفهوم را می فهمید، می توانید طرح های چالش برانگیزتری را برای استفاده از تلفن همراه تطبیق دهید. ما قصد داريم فرض کنيم شما یک درک اولیه از Dreamweaver و HTML / CSS دارید.

 

راه اندازی سایت
سایت خود را به طور معمول تنظیم کنید.

توجه: در زیر اطلاعات محلی در زبانه پیشرفته تنظیمات گفتگوی سایت، یک فیلد برای فایل Site-Wide Media Query خواهید دید. اکنون آن را نادیده بگیرید این فقط زماني کار می کند كه شما یک فایل پرس و جو موجود رسانه ای که می خواهید برا رای سایت خود استفاده کنید.

 

ایجاد و ذخیره یک صفحه HTML جدید

برای این مثال ما با Dreamweaver ساخته شده در 2 ستون مایع، نوار کناری سمت چپ، هدر و طرح بالا و پایین صفحه کار می کنند و ذخیره CSS به یک فایل جدید در یک پوشه به نام CSS. استفاده از طرح مایع غیر ضروری است اما به طرح اجازه می دهد تا حداکثر استفاده از صفحه را در هر اندازه ای به حداکثر برساند.
ما 4 تغییر را به طرح پیش فرض ایجاد می کنیم:

    1. خصوصیات عرض کانتینر را تا 90٪ تغییر دهید تا از روی صفحه نمایش در دسترس در دستگاه های کوچک استفاده کنید.
    2. خصوصیات max-width container را به 960px تغییر دهید (این لازم نیست اما من خواندن خطوط بسیار طولانی متن را دوست ندارم).
    3. خصوصیات min-widthcontainer را به 760px تغییر دهید. توجه: از آنجا که ما قوانین را برای صفحه های کوچکتر تنظیم می کنیم، این به نظر غیر ضروری است، اما برای مرورگرهای قدیمی که از پرس و جوهای رسانه پشتیبانی نمی کنند مفید است. ارزش 760px بهتر خواهد شد مطابقت با پرس و جو رسانه ای که ما تنظیم می شود.
    4. یک تصویر گسترده 960 پیکا برای جایگزینی حفره یا سوراخ تصویر در هدر اضافه کنید.

 

یک تصویر را به طور پویا اندازه بگیرید

تصویر هدر اولین چالش ما را ایجاد می کند. این تصویر برای کار با دستگاه های تلفن همراه بسیار بزرگ خواهد بود. ما این مسئله را با حذف ویژگی های ارتفاع و عرض تصویر از HTML و اندازه گیری تصویر با استفاده از CSS حل خواهیم کرد.

properties

1. با انتخاب تصویر، ویژگی های ارتفاع و عرض را در Inspector Properties (شکل 1 بالا) حذف کنید.
2. بعد، در فایل twoColLiqLtHdr.css، یک سبک جدید برای تصویر هدر ایجاد کنید:

.header img {
	width:100%;
}

با از بین بردن ویژگی های ارتفاع و عرض از تگ منو و با استفاده از یک مقدار درصد در ویژگی عرض CSS ما باعث می شود تصویر به صورت پویا به تغییر عرض صفحه تغییر کند.


اضافه کردن پرس و جو رسانه ها و فایل های CSS خاص دستگاه

 

Media-Queries-dialog

 

1. گزینه منوی Insert> Media Queries را انتخاب کنید.
2. در ديالوگ Media Queries: (شکل 2 بالا)
        a. در زیر Write media queries کلیک کنید تا گزینه ی فایل های درخواستی رسانه های سایت را انتخاب کنید (می توانید انتخاب کنید که سؤالات را به سند فعلی ذخیره کنید اما آنها را به یک فایل خارجی ذخیره کنید و آنها را برای تمام فایل های سایت خود در دسترس قرار دهید).
        b. برای ایجاد و ذخیره فایل پرس و جو رسانه ای خود، روی دکمه Specify کلیک کنید. ما آن را به عنوان media.css ذخیره کرديم (شما باید پرونده پرس و جو رسانه را به عنوان یک سند CSS ذخیره کنید) در همان پوشه css که در آن فایل اصلی CSS خود را، twoColLiqLtHdr.css، ذخیره کرديد.
        c. دستگاه را خاموش کنید تا گزارش انجام شدن واقعی را بررسی کنید.
        d. در کادر زیر، روی دکمه پیش فرض پیش فرض در گوشه پایین سمت راست کلیک کنید. این سه پرس و جوی رسانه (برای دسکتاپ، تبلت و تلفن) را تعریف می کند، اما هنوز نیاز به ایجاد و ذخیره یک فایل CSS برای هر یک از پرس و جو ها دارید.
        e. ایجاد فایل های CSS.
        3. a. پرس و جو تلفن از لیست را انتخاب کنید اگر قبلا انتخاب نشده است.
            b. در قسمت Properties در پایین جعبه گفتگو:
            c. پیش فرض ها برای توصیف و حداقل و حداکثر عرض را قبول کنید.
               گزینه Create a new file menu را انتخاب کنید و روی نماد پوشه کلیک کنید تا فایل CSS مبتنی بر تلفن خود را ایجاد و ذخیره کنید. ما تصمیم گرفتيم فایلی را به نام phone.css و آن را در پوشه css ذخیره کنيم.
            d. مراحل بالا را برای ساختن فایل های CSS برای تبلت ها و كامپيوترهاي رومیزی تکرار کنید (همانطور که احتمالا تا به حال به این موضوع پرداخته اید، من tablet.css و desktop.css را نامگذاری کردم و آنها را در پوشه css ذخیره کردم).
            e. روی Ok کلیک کنید تا محاورهی Media Queries را رد کنید.

هشدار: از آنجایی که ما می خواهیم قوانین Style در فایل های پرس و جو رسانه ما برای نوشتن قوانین Style با همان نام در فایل twoColLiqLtHdr.css، لینک به فایل پرس و جو رسانه (media.css) پس از لینک به فایل CSS اصلی ظاهر می شود همانطور که در زیر نشان داده شده است. این باید به طور پیش فرض اتفاق بیافتد، اما اگر سفارش معکوس شود، باید آن را در کد رفع کنید.

<link href="css/twoColLiqLtHdr.css" rel="stylesheet" type="text/css">
<link href="css/media.css" rel="stylesheet" type="text/css">

توجه: بعد از اینکه شما با برخی از درخواست های رسانه ای پیش فرض Adobe بازی کردید، ممکن است بخواهید آنها را ویرایش کنید یا بیشتر اضافه کنید. شما می توانید این کار را در هر زمان با انتخاب گزینه منو Modify> Media Queries ... انجام دهید.

 

فایل tablet.css

از آنجا که طرح انتخاب شده برای صفحه نمایش بزرگتر طراحی شده است، من desktop.css را در حال حاضر نادیده می گیرم و تمرکز خود را بر تبلت ها و تلفن ها قرار ميدهم.

بیایید با تبلت ها شروع کنیم. اولین چیزی که ما نیاز داریم تغییر خصوصيت min-width برای div است. این در حال حاضر به 760px در twoColLiqLtHdr.css تنظیم شده است. از آنجا که پرس و جوی رسانه های تبلت ها برای صفحه نمایش از 321 تا 768 پیکسل استفاده می شود، ارزش 320 پیکسل، حساس تر خواهد بود. متاسفانه ویژگی min-width در جعبه گفتگوی تعریف Rule  نرم افزار Dreamweaver پشتیبانی نمی شود، بنابراین ما باید Rule را مستقیما در کد table.css اضافه کنیم.

 

Container width

related

 

1. اطمینان حاصل کنید که شما در Split View کار می کنید و روی پیوند tablet.css در لیست فایل های مرتبط در بالای پنجره Document کلیک کنید. فایل table.css در قسمت سمت چپ پنجره تقسیم در سمت چپ (شکل 3 بالا) نمایش داده می شود.
2. این قانون را به فایل اضافه کنید:

.container {
	min-width: 320px;
}

شما باید قادر به دیدن اثر این Rule با تغییر دادن نمای Live View و تغییر اندازه پنجره سند باشيد. توجه داشته باشید که این طرح در حال حاضر به اندازه 320 پیکسل عرض تغییر می کند.

نکته: شما می توانید طرح خود را در اندازه های مختلف صفحه نمایش رایج با انتخاب یک اندازه از منو با کلیک کردن بر روی پیکان پایین در سمت راست دکمه Multiscreen در نوار ابزار سند در بالای پنجره سند (تصویر 4 پایین) نشان می دهد ببينيد. شما همچنین می توانید طرح را در بخشهای چندین صفحه پیش نمایش همزمان (شکل 6) با کلیک بر روی خود دکمه Multiscreen مشاهده نماييد.

multiscreen-menu

نوار کناری و عرض منو

نادیده گرفتن مشکلات با طرح تلفن برای لحظه ای که هنوز با طرح تبلت مشکل داریم. در نوارهای باریک نوار کناری و منوی سمت چپ بسیار کمرنگ هستند. ما می توانیم آن را با حذف شناور نوار کناری و ایجاد عرض کامل آن را حل کنیم:

.sidebar1 {
	float: none;
	width:100%;
}

در حال حاضر نوار کناری بالاتر از محتوای اصلی به جای چپ آن ظاهر می شود.

 

عرض دکمه ناوبری

عرض کامل دکمه های نوت نسبتا گسترده است. ما می توانیم آنها را در دو ستون به ترتیب با شناور کردن آیتم های لیست چپ و تنظیم عرض آنها به 50٪ ترتیب دهیم:

ul.nav li {
	float:left;
	width:50%;
}

عرض محتوا

در نهایت، محتوای div عدد 80 درصد است. ما برای پر کردن عرض کامل طرح ما نیاز داریم تا این قانون نهایی را به table.css اضافه کنیم:

.content {
	width: 100%;
}

tablet.css به پایان رسیده ما به شرح زیر است:

@charset "utf-8";
.container {
	min-width: 320px;
}
.sidebar1 {
	float: none;
	width:100%;
}
ul.nav li {
	float:left;
	width:50%;
}
.content {
	width: 100%;
 }

و در یک دستگاه وسیع 480 پیکسل، طرح ما اکنون شبیه شکل زیر است.

layout

 

فایل phone.css

ما به قوانین مشابه برای phone.css نیاز داریم با یک تغییر چندگانه: حداقل عرض این طرح 200 پیکسل است که باید حتی گوشی های هوشمند نازک را نیز جایگزین کند. و ما اجازه می دهیم که دکمه ها عرض کامل طرح باشند. بنابراین فایل phone.css ما مانند این خواهد بود:

@charset "utf-8";
.container {
	min-width: 200px;
}
.sidebar1 {
	float: none;
	width:100%;
}
.content {
	width: 100%;
}

صفحه نهايي :

multiscreen

 

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

البته اگر این یک پروژه واقعی بود، نه یک نسخه ی نمایشی ساده، ما احتمالا می خواهیم قالب های سربرگ و ویژگی های دیگر را برای حداکثر قابلیت خواندن در صفحه های کوچکتر سفارشی کنیم، اما اکنون که اصول اولیه CSS های رسانه ای را درک می کنید، این باید یک سفارشي سازي نهايي باشد.

 

1396/11/14 - 09:22:23
برچسب هاي مطلب :



شما اولين نفري باشيد كه نظر ارسال مي كند.

فرم ثبت نظر

نام و نام خانوادگی
ایمیل
وبلاگ
نظر و کامنت
كد امنيتي