فواصل » شرح،تصميم،موقع،انيق،اتش،تي،ام،ال،5،سي،اس،اس،css،html5 http://portal.fwasl.com Wed, 16 Oct 2019 18:49:35 +0000 ar hourly 1 https://wordpress.org/?v=3.9.40 تصميم موقع أنيق بإستخدام HTML 5 و CSS3 http://portal.fwasl.com/%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d9%85%d9%88%d9%82%d8%b9-%d8%a3%d9%86%d9%8a%d9%82-%d8%a8%d8%a5%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-html-5-%d9%88-css3/ http://portal.fwasl.com/%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d9%85%d9%88%d9%82%d8%b9-%d8%a3%d9%86%d9%8a%d9%82-%d8%a8%d8%a5%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-html-5-%d9%88-css3/#comments Thu, 05 Jan 2012 11:15:09 +0000 http://www.portal.fwasl.com/?p=5672 إن المصمم علي شبكة الإنترنت يجب أن يتبع احساسه في تصاميمه لكي تكون فريده ومميزه ولاشك أنه يبتكر ويبدع ويطور الفكره ويشرع في تنفيذها لكي تصبح مشروع مكتمل الأركان .

هناك بعض الحالات يحتاج المصمم فيها الي التحليل والتدقيق في العناصر المكونه لموقعه الإلكتروني،لكي يبلور فكرته جيدا ويرسمها علي أرض الواقع.فعندما نريد تصميم موقع معين لابد من إتباع هذه الخطوات التاليه:الخطوة 1 : فهم الموضوع جيدا ودراسة طلبات العميل بما يتوافق مع إمكانيته والمواضيع لمراد وضعها علي الموقع
الخطوة 2 : اختيار الأسلوب الصحيح ورسم الأفكار
الخطوة 3 : رسم هيكل الموقع علي ورقه خارجيه لتحديد الفكره
الخطوة 4 : تصميم الموقع من خلال محرر ما وليكن الفوتوشوب مثلا
الخطوة 5 : تحويل نموذج بالحجم الطبيعي من PSD إلى HTML و CSS
أي لابد أن تقوم باستخدام الدماغ ، وقلم، ورقة، فوتوشوب، HTML و CSS. لكن التكنولوجيا لا تتوقف..

نظرة سريعة على HTML 5

تهدف HTML 5 لإنشاء برنامج شامل وهي عباره عن لغة العلامات لتطوير الواجهة الأمامية ، وقادرة على توفير المعلومات النوعية على مختلف عناصر الصفحة ، قدمت عناصر جديده ووسائل الإعلام (وخصائصها) ، مثل و<video><audio>وعناصر semanthic (التي تعكس الاستخدام الحديث للموقع) ، مثل <header>، و<article><footer>.
نحن نركز اهتمامنا على العناصر الجديدة التي تجعل من الأسهل تكوين هيكل صفحة الويب. لنلقي نظره علي هذه العناصر

<section>– وهو تجمع من المحتوى الموضوعي الذي يحتوي على البند.ويكون للعنصر الذي ليس له حاوية عامة مثلdiv
<aside>– جانبا العنصر هو مقطع من الصفحة التي تتكون من المحتوى الذي يرتبط بشكل طفيف إلى محتوى حول العنصر جانبا
<article>– العنصر المادة هو لتكوين قائمة بذاتها

<footer>– العنصر الذي يمثل تذييل للصفحه أو الموقع.

<header>– عنصر الرأس و هو عادة ما يحتوي على عنصر H1 – H6

<nav>– العنصر الخاص بالملاحه وهو لإضافة ارتباطات التنقل

<address>– يمثل عنصر العنوان لإضافة معلومات الإتصال والعنواين وهكذا.

<TIME>– يتم استخدامه لتمثيل التاريخ و / أو الوقت.

نظرة سريعة على CSS3

هناك بعض الخصائص التي هي قيد التجربه ، مثل دائرة نصف قطرها الحدود ومربع الظل وهناك العديد من التقنيات الجديده و الحديثه في css3 يمكنك التعرف عليها عن طريق الخصائص الجيده التي سوف أتحدث عنها في السطور القليله القادمه

RGBa — RGBA هو النموذج القياسي RGB (0،0،0 — 255255255) و a هذا للتعتيم

[html] background: rgba(196,89,30,0.65);
[/html]

علبة الظلbox-shadow — خاصية CSS – مربع الظل يقبل تأثيرات الظل المختلفة على شكل قائمة مفصولة بفواصل.

[html] -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
[/html]

نصف قطر الإطارborder-radius– : دائرة نصف قطرها الحدود، الذي يسمح لنا بإضافة زوايا مدورة على مربع من البنود.

[html] -moz-border-radius: 10px; /*radius of 10px*/
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
[/html]

النص الظل text-shadow — خاصية ظل النص عبارة عن مجموعه تأثيرات ظل للنص .

[html] text-shadow: 1px 1px 1px #2c0306;
[/html]

والتصميم الأنيق مع الويب HTML 5 و CSS3 للمعاينه اضغط هنا

الآن ، وبعد إلقاء نظرة سريعة على التقنيات التي سوف نقوم بإستخدامها، يمكننا البدء في تصميم موقعنا. لعمل تصميم الأنيق للويب HTML 5 و CSS3

كيف تستطيع أن تقوم بإنشاء موقع الكتروني لطيف

من الممكن أن تقوم بعمل الموقع كاملا دون الحاجه الي الفوتوشوب ولكن عليك أولا ان تقوم برسم أفكارك وترجمتها علي الورقه والقلم

رسم الموقع بالورقة والقلم

تفاصيل الرسم

يمكنك أن تقوم بإستخدام الفوتوشوب إذا أردت لعمل رسومات جذابه
لوحة الألوان

والأن كود موقعك بإستخدام html5
الخطوة 1 — البنية الأساسية
أولا وقبل كل شيء تحديد البنية الأساسية لصفحة HTML ، بما في ذلك DOCTYPE، وصلات إلى صفحات الأنماط، وعنوان الصفحة وهكذا. الصورة التالية تشرح الهيكل ويسلط الضوء على العلامة التي يمكنني استخدامها لإنشاء بنية الأساسية.

والأن مع الكود :

[html] <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>mr. hurley | personal blog</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<header id="site_head">
<div><!–useful to create the 960px limit–>
<!–header stuff–>
</div>
</header>

<div id="main_content"><!–useful to create the 960px limit–>

<section id="last_posts">
<!–last posts here–>
</section>

<div>
<section id="archive">
<!–list od posts here–>
</section>

<aside>
<!–blogroll–>
</aside>
</div>

<aside>
<section>
<!–personal info here–>
</section>

<nav>
<!–links for the portfolio–>
</nav>

<section>
<!–contact details here–>
</section>
</aside>

<footer>
<!–footer info here–>
</footer>
</footer>

</div><!–/main_container–>

</body>
</html>
[/html]

يمكنك تكويد الهيدر كما بالشكل التالي

[html] <header id="site_head">
<div>
<h1><a href="#">mr. hurley</a></h1>

<nav>
<ul>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Follow Me</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

[/html]

وهذا هو ملف css الذي عليك ان تقوم بإضافته

[html] @charset "utf-8";
/* CSS Document */

/* Reset for some default browser CSS – General */

body, div, h1, h2, h3, p, ul, ol, li, img, header, section, aside, footer, button {
margin: 0; padding: 0; border: 0; list-style: none;
}

a {
text-decoration: none;
color: #961b25;
}

a:hover {
color: #6f92a7;
}

:focus {
outline: 0;
}

h1, h2, h3 {
font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
font-weight: normal;
}

h2 {
font-size: 22px;
line-height: 28px;
}

.float {
float:left;
}

body {
background: #f6f6ee url(images/bck.jpg);
font-family : "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
}

/* Header */

header#site_head {
background: url(images/bck_head.jpg);
-moz-box-shadow: inset 0px -2px 3px #480508;
-khtml-box-shadow: inset 0px -2px 3px #480508;
-webkit-box-shadow: inset 0px -2px 3px #480508;
box-shadow: inset 0px -2px 3px #480508;
border-bottom: 1px solid #fffffb;
height: 70px;
width: 100%;
display: block;
}

.header_cont {
width: 960px;
margin: 0 auto;
padding-top: 15px;
}

.header_cont h1 {
text-indent:-9999px;
float: left;
}

.header_cont h1 a {
background: url(images/logo.png) no-repeat;
width: 143px;
height: 45px;
display: block;
}

.header_cont h1 a:hover {
background-position: 0px -45px;
}

nav.head_nav {
float: right;
margin-top: 13px;
}

nav.head_nav ul li {
display: inline;
margin: 0px 5px;
}

nav.head_nav ul li a {
color: #f6f6ee;
font-size: 12px;
font-weight: normal;
text-transform: lowercase;
padding: 5px 8px;
}

nav.head_nav ul li.home a {
background: #4f1d1e;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

nav.head_nav ul li a:hover {
text-shadow: 1px 1px 1px #2c0306;
background: #4f1d1e;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: inset 0px 0px 2px #2c0306;
-khtml-box-shadow: inset 0px 0px 2px #2c0306;
-webkit-box-shadow: inset 0px 0px 2px #2c0306;
box-shadow: inset 0px 0px 2px #2c0306;
color: #f6f6ee;
}

nav.head_nav ul li.rss, nav.head_nav ul li.twitter {
position: relative;
left: -355px;
margin: 0;
}

nav.head_nav ul li.rss a {
color: #b4676c;
border-right: 1px solid #903f43;
margin: 0;
padding-left: 20px;
background: url(images/rss.png) left no-repeat;
font-size:10px;
}

nav.head_nav ul li.twitter a {
color: #b4676c;
margin-left: 3px;
padding-left: 20px;
background: url(images/twitter.png) left no-repeat;
font-size:10px;
}

nav.head_nav ul li.rss a:hover, nav.head_nav ul li.twitter a:hover {
color: #f6f6ee;
-moz-border-radius: 0;
-khtml-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: none;
-khtml-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
[/html]

وهذا هو التنفيذ

والأن لتقوم بإضافة المحتوي التالي:

[html] <div id="main_content"><!–useful to create the 960px limit–>

<section id="last_posts"><!–section for recent posts–>
<header>
<h3>Last posts</h3>
</header>

<div><!–single post container–>
<article>
<div>
<figure>
<img src="images/test3.jpg" alt="test" />
</figure>
<footer>
<ul>
<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
<li>written by <a href="#">Mr. Hurley</a></li>
<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
<li><a href="#">Comments (15)</a></li>
</ul>
</footer>
</div>

<div>
<header>
<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
</header>
<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients. After all, they put their trust in me and gladly compensate me for my efforts. I guess I would be…</p>
<span><a href="#">Read more</a></span>
</div>
</article>

</div>

<div>
<article>
<div>
<figure>
<img src="images/test1.jpg" alt="test" />
</figure>
<footer>
<ul>
<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
<li>written by <a href="#">Mr. Hurley</a></li>
<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
<li><a href="#">Comments (15)</a></li>
</ul>
</footer>
</div>

<div>
<header>
<h2><a href="#">Purple In Web Design: A New Trend?</a></h2>
</header>
<p>For a long time purple has been the least used colour in web design. In recent months I noticed the number of websites…</p>
<span><a href="#">Read more</a></span>
</div>
</article>
</div>

<div>
<article>
<div>
<figure>
<img src="images/test4.jpg" alt="test" />
</figure>
<footer>
<ul>
<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
<li>written by <a href="#">Mr. Hurley</a></li>
<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
<li><a href="#">Comments (15)</a></li>
</ul>
</footer>
</div>

<div>
<header>
<h2><a href="#">How To Design A Better Blog? Break Down The Rules</a></h2>
</header>
<p>Once upon a time in World Wide Web a private and personal diary, where recording daily activities and reflections, called Weblog. </p>
<span><a href="#">Read more</a></span>
</div>
</article>
</div>

<div>
<article>
<div>
<figure>
<img src="images/test2.jpg" alt="test" />
</figure>
<footer>
<ul>
<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
<li>written by <address><a href="#">Mr. Hurley</a></address></li>
<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
<li><a href="#">Comments (15)</a></li>
</ul>
</footer>
</div>

<div>
<header>
<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
</header>
<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients.</p>
<span><a href="#">Read more</a></span>
</div>
</article>
</div>

</section>

</div>
[/html]

وهذا هو ملف الستايل

[html] /* Main container */

#main_content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
}

/* Last posts section */

.section_tit {
clear: both;
}

.section_tit h3 {
background: url(images/line.png) no-repeat center center;
text-align: center;
font-size: 34px;
margin: 10px 0 25px 0;
color: #c9c9c0;
text-shadow: 1px 1px 0px #fff;
}

div.single_post {
float: left;
width: 447px;
height: 345px;
margin: 0 16px 35px 16px;
}

img {
border: 5px solid rgba(255,255,255,0.75);
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-box-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #c6c6bf;
-khtml-box-shadow: 0px 0px 5px #c6c6bf;
-webkit-box-shadow: 0px 0px 5px #c6c6bf;
box-shadow: 0px 0px 5px #c6c6bf;
}

div.single_post footer {
color: #2b2b28;
text-align:right;
font-size: 10px;
}

div.single_post ul {
margin-top: 10px;
border-right: 3px solid #dbdbd4;
}

div.single_post ul li {
padding: 1px 13px 1px 0px;
}

div.single_post ul li a {
font-weight: bold;
}

div.art {
width: 250px;
display: block;
background: rgba(255,255,255,0.75);
border: 1px solid rgba(255,255,255,1);
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 5px #c6c6bf;
-khtml-box-shadow: 0px 0px 5px #c6c6bf;
-webkit-box-shadow: 0px 0px 5px #c6c6bf;
box-shadow: 0px 0px 5px #c6c6bf;
margin-left: 15px;
overflow: auto;
float:left;
}

div.art:hover {
background: rgba(255,255,255,1);
}

div.single_post header h2 {
border-bottom: 1px solid #dbdbd4;
margin: 20px;
padding-bottom: 20px;
text-align: center;
}

div.single_post p {
padding: 0 20px;
font-size: 12px;
line-height: 20px;
}

span.more {
float: right;
margin: 30px 20px 30px 0px;
}

span.more a {
background: #8badc2;
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
padding: 8px 12px;
color: #fff;
text-shadow: 1px 1px 1px #546d7c;
-moz-box-shadow: inset 0px 0px 2px #3f5867;
-khtml-box-shadow: inset 0px 0px 2px #3f5867;
-webkit-box-shadow: inset 0px 0px 2px #3f5867;
}

span.more a:hover {
background: #b8ccd7;
text-shadow: none;
-moz-box-shadow: none;
-khtml-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
[/html]

في النهايه يمكنك أن تضيف المحتوي الذي تريده تبعا لفكرتك الخاصه فلماذا لا تقوم بتجربه هذا المثال

]]> http://portal.fwasl.com/%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d9%85%d9%88%d9%82%d8%b9-%d8%a3%d9%86%d9%8a%d9%82-%d8%a8%d8%a5%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-html-5-%d9%88-css3/feed/ 0