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

سلام به دوستان عزیز ITPRO
این دوره ی ما هم پایان خودش رسید( البته با مطالب آموزشی خدمت دوستان خواهم بود.)امیدوارم که خوب استفاده کرده باشید و دوره ی خوبی بوده باشه.
خب در این جلسه می خوایم کمی با طراحی Responsive (واکنشگرا) و بعد با IFrame ها آشنا بشیم .

طراحی Mobile Friendly و واکنشگرا


اگه دقت کرده باشید سایت ITPRO رو وقتی داخل مبایل باز می کنید و یا صفحه ی Browser خودتون رو کوچیک می کنید ، تغیرات زیادی احساس میشه مثلا نوار پیمایش (Navigation) سایت به شکل یک منو در میاد که تا روش آیکونش کلیک نکنید باز نمیشه اما بعضی از سایت ها رو که داخل موبایل باز می کنید میبینید که به خوبی نمایش داده نمی شوند و به هم میریزند.
responsive

طراحی واکنشگرا به ما کمک می کنه که در زمانی که اندازه ی صفحه ی نمایش از حالت معمول خارج شد و اندازه ای کوچکتر (مثلا مبایل) و یا بزرگتر (مثل صفحه نمایش های بزرگ) از حالت طبیعی داشت بتوانیم Style های وبسایتمان را مدیریت کنیم تا با اندازه ی صفحه نمایش همخوانی پیدا کند.
برای شروع کار من فولدر Project 15 رو داخل فولدر WorkSpace ایجاد می کنم و داخلش فایل های index.html و style.css رو می سازم. بعد CSS Reset ها رو داخل فایل CSS و کد های

اولیه ی HTML رو داخل فایل HTML می نویسم:
CSS:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
HTML :


	Project 15
	


	


حالا دو Div داخل صفحم ایجاد می کنم :
	
1
2
به اون ها کمی Style می دم :
#div1,#div2{
	height:100px;
	background-color:darkorange;
	margin:20px 1%;
}
#div1{
	width:28%;
}
#div2{
	width:68%;
}
در قسمتی که به هر دو Margin دادیم ، مقدار ورودی اول Margin را برای بالا و پایین و مقدار ورودی دوم Margin را برای چپ و راست مشخص می کند.
خروجی:
responsive

حالا با استفاده از Float ها آن ها را کنار هم قرارمی دهم:
HTML:
1
2
CSS:
.clear-fix{
	clear:both;
}
#div1,#div2{
	height:100px;
	background-color:darkorange;
	margin:20px 1%;
	float:right;
}
#div1{
	width:28%;
}
#div2{
	width:68%;
}
خروجی:
responsive

حالا اگر پنجره را Resize کنیم دیگه سایت ما به هم نمی ریزه .
حالا من کمی متن داخل Div ها می ریزم:
responsive

حالا کمی صفحه را کوچک می کنم:
responsive

می بینیم که متن داخل Div جا نشد و برای همین هم به بیرون از Div آمد. پس وبسایت ما هنوز با اندازه های مختلف صفحه نمایش سازگار نیست!
برای جلو گیری از به هم ریختن متن هایی که ممکن است کم و زیاد شوند باید از پراپرتی های Min-width و Min-height استفاده کنیم. این پراپرتی ها حداقلی برای ارتفاع یا عرض یک المان در نظر می گیرند و مقدار عرض و ارتفاع المان را بر اساس نیاز تنظیم می کنند. حالا من به جای height به Div ها min-height می دهم تا ارتفاع ثابتی برای آن در نظر گرفته نشود:
#div1,#div2{
	min-height:100px;
	background-color:darkorange;
	margin:20px 1%;
	float:right;
}
خروجی:
responsive

می بینیم که ارتفاع المان به مقدار لاظم زیاد شد.

OverFlow


Scroll

در بالا ما دیدیم که اگر محتوای المانی بیش از اندازه اش باشد محتوا در بیرون از المان نمایش داده خواهد شد. ما می توانیم کاری کنیم که این محتوا داخل همان المان به صورت Scroll شدن المان نمایش داده شود و یا محتوای اضافی نمایش داده نشود. برای این کار باید از پراپرتی Overflow استفاده کنیم:
#div1,#div2{
	height:100px;
	background-color:darkorange;
	margin:20px 1%;
	float:right;
	overflow:scroll;
}
می بینیم که من min-height را به height تبدیل کردم و پراپرتی Overflow را با مقدار Scroll به Style های المان اضافه کردم.مقدار Scroll باعث می شود که المان در زمان های لاظم قابلیت Scroll شدن پیدا کند.
خروجی:
responsive

می بینیم که المان های ما قابلیت Scroll شدن پیدا کردند.

Hidden

حالا من به جای مقدار Scroll مقدار Hidden را می نویسم :
overflow:hidden;
خروجی:
responsive

در خروجی بالا متن ها به مقدار که داخل المان ما جا می شدند داخل آن قرار گرفتند و بقیه ی متن نمایش داده نشد.

Media Queries


ما در بالا راجع به طراحی واکنشگرا صحبت کردیم که Style های متناسب با اندازه ی صفحه نمایش را اجرا می کند. این امر به کمک Media Query ها انجام می شود.
برای نمونه ما میخواهیم وقتی صفحه نمایش ما کمتر از 500px بود دو المان موجود در صفحه هر کدام عرض 100% بگیرند و دیگر در کنار هم نباشند:
@media only screen and (max-width: 500px) {
	#div1,#div2{
		width:100%;
		margin:20px 0
		;
	}
 }
ما در قسمت max-width بیشترین عرضی که صفحه باید داشته باشد تا این Style ها مشخص شوند را می نویسیم.توجه داشته باشید که کلمه ی کلیدی Only Screen مشخص می کند که ما این

Style ها را در زمان نمایش صفحه اجرا می کنیم نه در حالات دیگر (مثلا پرینت).
خروجی:
img8
می بینیم که خروجی هیچ تغیری نکرده! برای اجرا شدن Media query باید این تگ Meta را داخل Head اضافه کنیم تا تنظیمات عرض صفحه و عرض صفحه نمایش و ... انجام شود:

	Project 15
	
	

خروجی:
responsive

دیدیم که در زمان کم شدن عرض صفحه دو المان زیر هم قرار گرفتند و عرض صفحه را پر کردند.
Media Query مبحثی بسیار گسترده است که می توان در آن عمیق شد اما برای این سطح بیش از این نیاز نیست.
برای دیدن روش های بهتر طراحی واکنشگرا می توانید از Twitter Bootstarp استفاده کنید.

IFrame


ما با استفاده از IFrame ها می توانیم صفحات دیگر را درون وبسایت خودنمایش دهیم. من برای این کار داخل همین فولدر project 15 و در زیر Div ها یک Iframe می نویسم:
HTML:

CSS:
iframe {
	width:95%;
	margin:20px 1%;
	height:450px;
	border:3px solid gray;
}
خروجی:
responsive

شما می توانید یک تگ A را داخل iframe باز کنید:
لینک
	
در زمان کلیک شدن بر روی لینک محتوای iframe عوض می شود.
خروجی:
reponsive


ممنو از این که توی این دوره همراه ما بودید.
ITPRO باشید
محمد پارسا صفوی
انجمن تخصصی فناوری اطلاعات ایران - tosinso.com

#طراحی_responsive #آموزش_html_و_css #طراحی_صفحات_وب_با_html_و_css #آموزش_طراحی_وبسایت #آموزش_css #آموزش_طراحی_واکنشگرا #آموزش_طراحی_responsive #آموزش_طراحی_وبسایت_با_css
عنوان
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

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

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

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