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

و

با دانش خود درآمد کسب کنید

آموزش طراحی سایت با HTML و CSS قسمت 12 : طراحی واکنشگرا

اگه دقت کرده باشید سایت ITPRO رو وقتی داخل مبایل باز می کنید و یا صفحه ی Browser خودتون رو کوچیک می کنید ، تغیرات زیادی احساس میشه مثلا نوار پیمایش (Navigation) سایت به شکل یک منو در میاد که تا روش آیکونش کلیک نکنید باز نمیشه اما بعضی از سایت ها رو که داخل موبایل باز می کنید میبینید که به خوبی نمایش داده نمی شوند و به هم میریزند. طراحی واکنشگرا به ما کمک می کنه که در زمانی که اندازه ی صفحه ی نمایش از حالت معمول خارج شد و اندازه ای کوچکتر (مثلا مبایل) و یا بزرگتر (مثل صفحه نمایش های بزرگ) از حالت طبیعی داشت بتوانیم Style های وبسایتمان را مدیریت کنیم تا با اندازه ی صفحه نمایش همخوانی پیدا کند. برای شروع کار من فولدر Project 15 رو داخل فولدر WorkSpace ایجاد می کنم و داخلش فایل های index.html و style.css رو می سازم. بعد CSS Reset ها رو داخل فایل CSS و کد های اولیه ی HTML رو داخل فایل HTML می نویسم: CSS: HTML : حالا دو Div داخل صفحم ایجاد می کنم : به اون ها کمی Style می دم : در قسمتی که به هر دو Margin دادیم ، مقدار ورودی اول Margin را برای بالا و پایین و مقدار ورودی دوم Margin را برای چپ و راست مشخص می کند. خروجی: حالا با استفاده از Float ها آن ها را کنار هم قرارمی دهم: HTML: CSS: خروجی: حالا اگر پنجره را Resize کنیم دیگه سایت ما به هم نمی ریزه . حالا من کمی متن داخل Div ها می ریزم: حالا کمی صفحه را کوچک می کنم: می بینیم که متن داخل Div جا نشد و برای همین هم به بیرون از Div آمد. پس وبسایت ما هنوز با اندازه های مختلف صفحه نمایش سازگار نیست! برای جلو گیری از به هم ریختن متن هایی که ممکن است کم و زیاد شوند باید از پراپرتی های Min-width و Min-height استفاده کنیم. این پراپرتی ها حداقلی برای ارتفاع یا عرض یک المان در نظر می گیرند و مقدار عرض و ارتفاع المان را بر اساس نیاز تنظیم می کنند. حالا من به جای height به Div ها min-height می دهم تا ارتفاع ثابتی برای آن در نظر گرفته نشود: خروجی: می بینیم که ارتفاع المان به مقدار لاظم زیاد شد. در بالا ما دیدیم که اگر محتوای المانی بیش از اندازه اش باشد محتوا در بیرون از المان نمایش داده خواهد شد. ما می توانیم کاری کنیم که این محتوا داخل همان المان به صورت Scroll شدن المان نمایش داده شود و یا محتوای اضافی نمایش داده نشود. برای این کار باید از پراپرتی Overflow استفاده کنیم: می بینیم که من min-height را به height تبدیل کردم و پراپرتی Overflow را با مقدار Scroll به Style های المان اضافه کردم.مقدار Scroll باعث می شود که المان در زمان های لاظم قابلیت Scroll شدن پیدا کند. خروجی: می بینیم که المان های ما قابلیت Scroll شدن پیدا کردند. حالا من به جای مقدار Scroll مقدار Hidden را می نویسم : خروجی: در خروجی بالا متن ها به مقدار که داخل المان ما جا می شدند داخل آن قرار گرفتند و بقیه ی متن نمایش داده نشد. ما در بالا راجع به طراحی واکنشگرا صحبت کردیم که Style های متناسب با اندازه ی صفحه نمایش را اجرا می کند. این امر به کمک Media Query ها انجام می شود. برای نمونه ما میخواهیم وقتی صفحه نمایش ما کمتر از 500px بود دو المان موجود در صفحه هر کدام عرض 100% بگیرند و دیگر در کنار هم نباشند: ما در قسمت max-width بیشترین عرضی که صفحه باید داشته باشد تا این Style ها مشخص شوند را می نویسیم.توجه داشته باشید که کلمه ی کلیدی Only Screen مشخص می کند که ما این Style ها را در زمان نمایش صفحه اجرا می کنیم نه در حالات دیگر (مثلا پرینت). خروجی: img8 می بینیم که خروجی هیچ تغیری نکرده! برای اجرا شدن Media query باید این تگ Meta را داخل Head اضافه کنیم تا تنظیمات عرض صفحه و عرض صفحه نمایش و ... انجام شود: خروجی: دیدیم که در زمان کم شدن عرض صفحه دو المان زیر هم قرار گرفتند و عرض صفحه را پر کردند. Media Query مبحثی بسیار گسترده است که می توان در آن عمیق شد اما برای این سطح بیش از این نیاز نیست. برای دیدن روش های بهتر طراحی واکنشگرا می توانید از استفاده کنید. ما با استفاده از IFrame ها می توانیم صفحات دیگر را درون وبسایت خودنمایش دهیم. من برای این کار داخل همین فولدر project 15 و در زیر Div ها یک Iframe می نویسم: HTML: CSS: خروجی: شما می توانید یک تگ A را داخل iframe باز کنید: در زمان کلیک شدن بر روی لینک محتوای iframe عوض می شود. خروجی: ممنو از این که توی این دوره همراه ما بودید. ITPRO باشید محمد پارسا صفوی انجمن تخصصی فناوری اطلاعات ایران - tosinso.com
#آموزش_css #طراحی_صفحات_وب_با_html_و_css #آموزش_طراحی_وبسایت_با_css #طراحی_responsive #آموزش_html_و_css #آموزش_طراحی_واکنشگرا #آموزش_طراحی_وبسایت #آموزش_طراحی_responsive
عنوان
1 آموزش طراحی سایت با HTML و CSS قسمت 1 : مقدمه رایگان
2 آموزش طراحی سایت با HTML و CSS قسمت 2 : Style ها و متن ها رایگان
3 آموزش طراحی سایت با HTML و CSS قسمت 3 : لینک ها و CSS Property رایگان
4 آموزش طراحی سایت با HTML و CSS قسمت 4 : تگ های ساختاری و Selector رایگان
5 آموزش طراحی سایت با HTML و CSS قسمت 5 : Box Model رایگان
6 آموزش طراحی سایت با HTML و CSS قسمت 6 : Flaot ها رایگان
7 آموزش طراحی سایت با HTML و CSS قسمت 7 : Position ها رایگان
8 آموزش طراحی سایت با HTML و CSS قسمت 8 : لیست ، Background و عکس رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 آموزش طراحی سایت با HTML و CSS قسمت 10 : کد نویسی اصولی رایگان
11 آموزش طراحی سایت با HTML و CSS قسمت 11 : انیمیشن ها رایگان
12 آموزش طراحی سایت با HTML و CSS قسمت 12 : طراحی واکنشگرا رایگان
زمان و قیمت کل 0″ 0
1 نظر
prober

شما اموزش های جذابی می ذارین گرچه هنوز برای سایت خودم پیاده سازی نکردم ولی تصمیم دارم به زودی این کار رو بکنم و مطمئنا برای شروع کار سراغ آموزش شما خواهم امد

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....