abohmam
27-03-2011, 05:41 PM
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
تخطيط الصفحات Layout لتوزيع التصميم في لغة CSS - HTML
حياكم الله جميعا
تخطيط الصفحات من أهم مايميز لغة CSS والتى تفوقت بكثير عن استخدام الجداول العادية والتى طال استخدامها فى لغة HTML وذلك للتوافق الرائع على اغلب المتصفحات والمرونة الفائقة التى تتيحها لغة CSS
وحتى لانطيل فى المقدمة سنعرض هنا بعض النماذج التى ستفيد كل من اراد تخطيط صفحته او تقسيمها بلغة CSS ان شاء الله تعالى
التخطيط الأول وهو لفهم التخطيط جيدا
3 Column CSS Layout
http://www.abc4web.net/upload/images2/p8bn8wgucd.jpg (http://www.abc4web.net/upload/)
معاينة التخطيط إضغط على الشعار
:abc4web: (http://www.abc4web.net/abc4web_java/css/layout/layout_1.htm)
فى هذا التخطيط سنقوم بتوزيع الصفحة كالتالي
هيدر
ثلاث اعمدة
فوتر
وسنحدد عرض صفحة التخطيط ولمن يريد ان يكون التخطيط ممتدا فعليه مشاهدة الأمثلة التالية ان شاء الله تعالى
أولا بعد ان حددنا التخطيط فى ورقة مثلا نقوم بوضع الحاويات وهذا مانسميه التوزيع بلغة HTML
<div id="page">
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">Content</div>
<div id="action">Call To Action</div>
<div id="footer">Footer</div>
</div>
نقوم الآن بتحديد أماكن ومقاسات وخيارات كل حاوية
Page Div
div#page {
border:1px solid purple;
width:755px;
margin:0 auto;
padding:5px;
text-align:left;
position:relative
}
لجعل الكتابة فى المنتصف
div {
text-align:center;
}
Header Div
div#header {
border:2px solid red;
width:750px;
height:30px;
}
Menu Div
div#menu {
border:2px solid green;
width:150px;
float:left;
margin:10px 0 10px 5px;
height:500px;
}
Content Div
div#content {
border:2px solid blue;
width:400px;
margin:10px 0 10px 175px;
min-height:500px;
_height:500px
}
Action Div
div#action {
position:absolute;
top:50px;
right:10px;
border:2px solid green;
width:150px;
margin:0;
height:500px;
}
Footer Div
div#footer {
border:2px solid red;
width:750px;
height:30px;
}
نلاحظ هنا اننا قمنا بتحديد كل حاوية بلون لفهم الأماكن والأبعاد وبذلك سيتم التغير كما نراه مناسبا للتصميم
وإضافة مانريد فى كل حاوية حسب الأبعاد التى قمنا بتحديدها
وبالطبع يمكننا تحديد التخطيط بعمودين فقط بنفس الطريقة مع الإستغناء عن العمود call to Action
http://www.abc4web.net/upload/images2/7htyrwjser.gif (http://www.abc4web.net/upload/)
:fasel6:
التخطيط الثاني ممتد
http://www.abc4web.net/upload/images2/nyobnbkkmn.jpg (http://www.abc4web.net/upload/)
معاينة التخطيط إضغط على الشعار
:abc4web: (http://www.abc4web.net/abc4web_java/css/layout/layout_2.htm)
أكواد HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Three Column Liquid Layout by Mani Sheriar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><!-- begin header -->
<h1>This is the header</h1>
</div><!-- end header -->
<div id="wrapper1"><!-- sets background to white and creates full length leftcol-->
<div id="wrapper2"><!-- sets background to white and creates full length rightcol-->
<div id="maincol"><!-- begin main content area -->
<div id="leftcol"><!-- begin leftcol -->
<p>This is the left column</p>
</div><!-- end leftcol -->
<div id="rightcol"><!-- begin rightcol -->
<p>This is the right column</p>
</div><!-- end righttcol -->
<div id="centercol"><!-- begin centercol -->
<p>This is the center column </p>
</div><!-- end centercol -->
</div><!-- end main content area -->
<div id="footer"><!-- begin footer -->
<p>This is the footer</p>
</div><!-- end footer -->
</div><!-- end wrapper1 -->
</div><!-- end wrapper2 -->
</body>
</html>
أكواد CSS
تم ربط الأكواد فى ملف css خارجى بإسم styles
/* CSS Document */
body {
background:#9343B9;
text-align:center;
margin:20px;
padding:0;
font:normal 0.8em/1.2em verdana,aria,sans-serif;
color:#666;
}
a {
color:#FFF;
text-decoration:none;
border-bottom:1px dotted;
}
a:hover {
border-bottom:1px solid;
color:#9343B9;
}
#wrapper1 {
position:relative;
text-align:left;
width:100%;
background:#FFF url("../images/rightcolor_bg.gif") repeat-y top right;
}
#wrapper2 {
position:relative;
text-align:left;
width:100%;
background:url("../images/leftcolor_bg.gif") repeat-y top left;
}
#header {
background:#BB62AB;
padding:10px;
margin:0;
text-align:center;
color:#FFF;
}
#header h1 {
font-size:200%;
}
#header a:hover {
color:#7A2875;
}
#maincol {
position:relative;
margin:0;
padding:10px;
}
#leftcol {
position:relative;
top:-10px;
left:-10px;
float:left;
width:220px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:200px; /* actual value */
margin:0 0 -10px 0;
padding:10px;
background:#ECB9E8;
z-index:100;
}
#rightcol {
position:relative;
top:-10px;
right:-10px;
float:right;
width:220px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:200px; /* actual value */
margin:0 0 -10px 0;
padding:10px;
background:#D7C4FA;
z-index:99;
}
#centercol {
position:relative;
padding:0 240px;
}
#centercol a {
color:#666;
}
#centercol a:hover {
border-bottom:1px solid;
color:#9343B9;
}
#footer {
position:relative;
top:1px;
background:#7A2875;
width:100%;
clear:both;
margin:0;
padding:1% 0;
text-align:center;
color:#CCC;
}
:fasel6:
التخطيط الثالث تم تحديد مقاس العرض
http://www.abc4web.net/upload/images2/msmlbdfthf.jpg (http://www.abc4web.net/upload/)
معاينة التخطيط إضغط على الشعار
:abc4web: (http://www.abc4web.net/abc4web_java/css/layout/layout_3.htm)
أكواد HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>abc4web</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>
ABC4WEB.net
</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div id="content-container">
<div id="section-navigation">
<ul>
<li><a href="#">Section page 1</a></li>
<li><a href="#">Section page 2</a></li>
<li><a href="#">Section page 3</a></li>
<li><a href="#">Section page 4</a></li>
</ul>
</div>
<div id="content">
<h2>
The significance of obedience to parents
</h2>
<p>
Islam builds a family in which prevails mutual respect and care. Parents and children in Islam are bound together by mutual obligations and reciprocal arrangements.
Allaah Says (what means): “…No mother should be harmed through her child, and no father through his child…” [Quran 2: 233]
The Quran has made it compulsory for the child to treat his parents with all goodness and mercy.
<p>
Every Muslim must show goodness and mercy to his parents throughout their lives. There is only one exception to this, and that is, if the parents ask their children to associate anything with Allaah and to commit sins, then the children must not obey their parents.
In all cases, the children must show love and gratitude to their parents. They must always speak to them gently and respectfully. They must try their best to make them happy, provided they do not disobey Allaah in the process.
</p>
<p>
Allaah says (what means): “But if they (both) strive with you to make you join in worship with me others of which you have no knowledge, then obey them not; but behave with them in the world kindly…” [Quran 31:15]
</p>
</div>
<div id="left-side">
<h3>
Being patient and tolerant with parents:
</h3>
<p>
The children must take great care not to react to what their parents have to say. If they say or do anything which is not liked or approved of by the children, then they must show patience and tolerance instead of giving vent to their anger.
The children must scrupulously try to refrain from disobeying their parents since the Prophet sallallaahu `alayhi wa sallam ( may Allaah exalt his mention ) regarded this as one of the grave sins.
</p>
</div>
<div id="footer">
Copyright ©
abc4web.net, 20XX
</div>
</div>
</div>
</body>
</html>
أكواد CSS
#container
{
margin: 0 auto;
width: 1000px;
background: #fff;
}
#header
{
background: #ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#navigation
{
float: left;
width: 1000px;
background: #333;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content-container
{
float: left;
width: 1000px;
background: #fff url(/wp-content/uploads/layout-three-fixed-background.gif) repeat-y 100% 0;
}
#section-navigation
{
float: left;
width: 160px;
padding: 20px 0;
margin: 0 20px;
display: inline;
}
#section-navigation ul
{
margin: 0;
padding: 0;
}
#section-navigation ul li
{
margin: 0 0 1em;
padding: 0;
list-style-type: none;
}
#content
{
float: left;
width: 500px;
padding: 20px 0;
margin: 0 0 0 30px;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 200px;
padding: 20px 0;
margin: 0 20px 0 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer
{
clear: left;
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}
:fasel:
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
:fasel6:
أبوهمام
.
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
تخطيط الصفحات Layout لتوزيع التصميم في لغة CSS - HTML
حياكم الله جميعا
تخطيط الصفحات من أهم مايميز لغة CSS والتى تفوقت بكثير عن استخدام الجداول العادية والتى طال استخدامها فى لغة HTML وذلك للتوافق الرائع على اغلب المتصفحات والمرونة الفائقة التى تتيحها لغة CSS
وحتى لانطيل فى المقدمة سنعرض هنا بعض النماذج التى ستفيد كل من اراد تخطيط صفحته او تقسيمها بلغة CSS ان شاء الله تعالى
التخطيط الأول وهو لفهم التخطيط جيدا
3 Column CSS Layout
http://www.abc4web.net/upload/images2/p8bn8wgucd.jpg (http://www.abc4web.net/upload/)
معاينة التخطيط إضغط على الشعار
:abc4web: (http://www.abc4web.net/abc4web_java/css/layout/layout_1.htm)
فى هذا التخطيط سنقوم بتوزيع الصفحة كالتالي
هيدر
ثلاث اعمدة
فوتر
وسنحدد عرض صفحة التخطيط ولمن يريد ان يكون التخطيط ممتدا فعليه مشاهدة الأمثلة التالية ان شاء الله تعالى
أولا بعد ان حددنا التخطيط فى ورقة مثلا نقوم بوضع الحاويات وهذا مانسميه التوزيع بلغة HTML
<div id="page">
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">Content</div>
<div id="action">Call To Action</div>
<div id="footer">Footer</div>
</div>
نقوم الآن بتحديد أماكن ومقاسات وخيارات كل حاوية
Page Div
div#page {
border:1px solid purple;
width:755px;
margin:0 auto;
padding:5px;
text-align:left;
position:relative
}
لجعل الكتابة فى المنتصف
div {
text-align:center;
}
Header Div
div#header {
border:2px solid red;
width:750px;
height:30px;
}
Menu Div
div#menu {
border:2px solid green;
width:150px;
float:left;
margin:10px 0 10px 5px;
height:500px;
}
Content Div
div#content {
border:2px solid blue;
width:400px;
margin:10px 0 10px 175px;
min-height:500px;
_height:500px
}
Action Div
div#action {
position:absolute;
top:50px;
right:10px;
border:2px solid green;
width:150px;
margin:0;
height:500px;
}
Footer Div
div#footer {
border:2px solid red;
width:750px;
height:30px;
}
نلاحظ هنا اننا قمنا بتحديد كل حاوية بلون لفهم الأماكن والأبعاد وبذلك سيتم التغير كما نراه مناسبا للتصميم
وإضافة مانريد فى كل حاوية حسب الأبعاد التى قمنا بتحديدها
وبالطبع يمكننا تحديد التخطيط بعمودين فقط بنفس الطريقة مع الإستغناء عن العمود call to Action
http://www.abc4web.net/upload/images2/7htyrwjser.gif (http://www.abc4web.net/upload/)
:fasel6:
التخطيط الثاني ممتد
http://www.abc4web.net/upload/images2/nyobnbkkmn.jpg (http://www.abc4web.net/upload/)
معاينة التخطيط إضغط على الشعار
:abc4web: (http://www.abc4web.net/abc4web_java/css/layout/layout_2.htm)
أكواد HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Three Column Liquid Layout by Mani Sheriar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><!-- begin header -->
<h1>This is the header</h1>
</div><!-- end header -->
<div id="wrapper1"><!-- sets background to white and creates full length leftcol-->
<div id="wrapper2"><!-- sets background to white and creates full length rightcol-->
<div id="maincol"><!-- begin main content area -->
<div id="leftcol"><!-- begin leftcol -->
<p>This is the left column</p>
</div><!-- end leftcol -->
<div id="rightcol"><!-- begin rightcol -->
<p>This is the right column</p>
</div><!-- end righttcol -->
<div id="centercol"><!-- begin centercol -->
<p>This is the center column </p>
</div><!-- end centercol -->
</div><!-- end main content area -->
<div id="footer"><!-- begin footer -->
<p>This is the footer</p>
</div><!-- end footer -->
</div><!-- end wrapper1 -->
</div><!-- end wrapper2 -->
</body>
</html>
أكواد CSS
تم ربط الأكواد فى ملف css خارجى بإسم styles
/* CSS Document */
body {
background:#9343B9;
text-align:center;
margin:20px;
padding:0;
font:normal 0.8em/1.2em verdana,aria,sans-serif;
color:#666;
}
a {
color:#FFF;
text-decoration:none;
border-bottom:1px dotted;
}
a:hover {
border-bottom:1px solid;
color:#9343B9;
}
#wrapper1 {
position:relative;
text-align:left;
width:100%;
background:#FFF url("../images/rightcolor_bg.gif") repeat-y top right;
}
#wrapper2 {
position:relative;
text-align:left;
width:100%;
background:url("../images/leftcolor_bg.gif") repeat-y top left;
}
#header {
background:#BB62AB;
padding:10px;
margin:0;
text-align:center;
color:#FFF;
}
#header h1 {
font-size:200%;
}
#header a:hover {
color:#7A2875;
}
#maincol {
position:relative;
margin:0;
padding:10px;
}
#leftcol {
position:relative;
top:-10px;
left:-10px;
float:left;
width:220px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:200px; /* actual value */
margin:0 0 -10px 0;
padding:10px;
background:#ECB9E8;
z-index:100;
}
#rightcol {
position:relative;
top:-10px;
right:-10px;
float:right;
width:220px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:200px; /* actual value */
margin:0 0 -10px 0;
padding:10px;
background:#D7C4FA;
z-index:99;
}
#centercol {
position:relative;
padding:0 240px;
}
#centercol a {
color:#666;
}
#centercol a:hover {
border-bottom:1px solid;
color:#9343B9;
}
#footer {
position:relative;
top:1px;
background:#7A2875;
width:100%;
clear:both;
margin:0;
padding:1% 0;
text-align:center;
color:#CCC;
}
:fasel6:
التخطيط الثالث تم تحديد مقاس العرض
http://www.abc4web.net/upload/images2/msmlbdfthf.jpg (http://www.abc4web.net/upload/)
معاينة التخطيط إضغط على الشعار
:abc4web: (http://www.abc4web.net/abc4web_java/css/layout/layout_3.htm)
أكواد HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>abc4web</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>
ABC4WEB.net
</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div id="content-container">
<div id="section-navigation">
<ul>
<li><a href="#">Section page 1</a></li>
<li><a href="#">Section page 2</a></li>
<li><a href="#">Section page 3</a></li>
<li><a href="#">Section page 4</a></li>
</ul>
</div>
<div id="content">
<h2>
The significance of obedience to parents
</h2>
<p>
Islam builds a family in which prevails mutual respect and care. Parents and children in Islam are bound together by mutual obligations and reciprocal arrangements.
Allaah Says (what means): “…No mother should be harmed through her child, and no father through his child…” [Quran 2: 233]
The Quran has made it compulsory for the child to treat his parents with all goodness and mercy.
<p>
Every Muslim must show goodness and mercy to his parents throughout their lives. There is only one exception to this, and that is, if the parents ask their children to associate anything with Allaah and to commit sins, then the children must not obey their parents.
In all cases, the children must show love and gratitude to their parents. They must always speak to them gently and respectfully. They must try their best to make them happy, provided they do not disobey Allaah in the process.
</p>
<p>
Allaah says (what means): “But if they (both) strive with you to make you join in worship with me others of which you have no knowledge, then obey them not; but behave with them in the world kindly…” [Quran 31:15]
</p>
</div>
<div id="left-side">
<h3>
Being patient and tolerant with parents:
</h3>
<p>
The children must take great care not to react to what their parents have to say. If they say or do anything which is not liked or approved of by the children, then they must show patience and tolerance instead of giving vent to their anger.
The children must scrupulously try to refrain from disobeying their parents since the Prophet sallallaahu `alayhi wa sallam ( may Allaah exalt his mention ) regarded this as one of the grave sins.
</p>
</div>
<div id="footer">
Copyright ©
abc4web.net, 20XX
</div>
</div>
</div>
</body>
</html>
أكواد CSS
#container
{
margin: 0 auto;
width: 1000px;
background: #fff;
}
#header
{
background: #ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#navigation
{
float: left;
width: 1000px;
background: #333;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content-container
{
float: left;
width: 1000px;
background: #fff url(/wp-content/uploads/layout-three-fixed-background.gif) repeat-y 100% 0;
}
#section-navigation
{
float: left;
width: 160px;
padding: 20px 0;
margin: 0 20px;
display: inline;
}
#section-navigation ul
{
margin: 0;
padding: 0;
}
#section-navigation ul li
{
margin: 0 0 1em;
padding: 0;
list-style-type: none;
}
#content
{
float: left;
width: 500px;
padding: 20px 0;
margin: 0 0 0 30px;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 200px;
padding: 20px 0;
margin: 0 20px 0 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer
{
clear: left;
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}
:fasel:
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
:fasel6:
أبوهمام
.