درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من
تخفیف های وب سایت
همه تخفیف ها

عضویت در

کانال تلگرام

توسینسو

اطلاعات مطلب
مدرس/نویسنده
پارسا صفوی
امتیاز: 17244
رتبه:34
20
30
10
138
طراح و برنامه نویس وب و ویندوز با استفاده از C# و ASP.NET MVC پروفایل کاربر

طراحی وب سایت با کمک HTML و CSS - بخش دوازدهم (پایانی) :: طراحی واکنشگرا و IFrame ها

تاریخ 45 ماه قبل
نظرات 1
بازدیدها 597
سلام به دوستان عزیز 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 :
<html>
<head>
	<title>Project 15</title>
	<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
	
</body>
</html>
حالا دو Div داخل صفحم ایجاد می کنم :
	<div id="div1">1</div>
	<div id="div2">2</div>
به اون ها کمی Style می دم :
#div1,#div2{
	height:100px;
	background-color:darkorange;
	margin:20px 1%;
}
#div1{
	width:28%;
}
#div2{
	width:68%;
}
در قسمتی که به هر دو Margin دادیم ، مقدار ورودی اول Margin را برای بالا و پایین و مقدار ورودی دوم Margin را برای چپ و راست مشخص می کند.
خروجی:
responsive

حالا با استفاده از Float ها آن ها را کنار هم قرارمی دهم:
HTML:
<div id="div1">1</div>
	<div id="div2">2</div>
	<div class="clear-fix"></div>
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 اضافه کنیم تا تنظیمات عرض صفحه و عرض صفحه نمایش و ... انجام شود:
<head>
	<title>Project 15</title>
	<link rel="stylesheet" href="style.css" type="text/css"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
خروجی:
responsive

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

IFrame


ما با استفاده از IFrame ها می توانیم صفحات دیگر را درون وبسایت خودنمایش دهیم. من برای این کار داخل همین فولدر project 15 و در زیر Div ها یک Iframe می نویسم:
HTML:
<iframe src="http://w3schools.com"></iframe>
CSS:
iframe {
	width:95%;
	margin:20px 1%;
	height:450px;
	border:3px solid gray;
}
خروجی:
responsive

شما می توانید یک تگ A را داخل iframe باز کنید:
<a href="http://aparat.com" target="iframe-a">لینک</a>
	<iframe src="http://w3schools.com" name="iframe-a"></iframe>
در زمان کلیک شدن بر روی لینک محتوای iframe عوض می شود.
خروجی:
reponsive


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

برچسب ها
ردیف عنوان
1 طراحی وب سایت با کمک HTML و CSS - بخش اول :: مقدمه
2 طراحی وب سایت با کمک HTML و CSS - بخش دوم:: Style ها و متن ها
3 طراحی وب سایت با کمک HTML و CSS - بخش سوم::لینک ها و Css property ها
4 طراحی وب سایت با کمک HTML و CSS - بخش چهارم :: تگ های ساختاری و CSS Selector های پیشرفته
5 طراحی وب سایت با کمک HTML و CSS - بخش پنجم :: Box Model
6 طراحی وب سایت با کمک HTML و CSS - بخش ششم :: Float ها
7 طراحی وب سایت با کمک HTML و CSS - بخش هفتم :: Position ها
8 طراحی وب سایت با کمک HTML و CSS - بخش هشتم :: لیست ها ، Background ها و عکس ها
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول
10 طراحی وب سایت با کمک HTML و CSS - بخش دهم :: کد نویسی اصولی و Transition ها
11 طراحی وب سایت با کمک HTML و CSS - بخش یازدهم :: Animation ها
12 طراحی وب سایت با کمک HTML و CSS - بخش دوازدهم (پایانی) :: طراحی واکنشگرا و IFrame ها
دوره مجموعه کل دوره
مطالب مرتبط

در حال دریافت اطلاعات

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

برای ارسال نظر ابتدا به سایت وارد شوید