تحويل تصميم من PSD إلى HTML

الكاتب: أحمد الكثيري | في: 13/2/2010 | التصنيف: تطوير واجهة المستخدم | التعليقات: 33

تكثر الأسئلة حول تصميم المواقع بواسطة برنامج الفوتوشوب وكما نرى عادةً أسئلة شبيهة مثل تحويل التصميم من الفوتوشوب إلى صفحة ويب ولكن في الحقيقة إن ما يمكنك فعله بهذا البرنامج هو عمل التفاصيل الأخرى لتصميم الموقع وهو جزء بسيط في عملية تصميم الموقع بحيث يمكنك عن طريقه عمل الصور التي تريد إستخدامها في التصميم أو إختيار الألوان المناسبة وأشياء أخرى لها علاقة بالشكل والتنسيق فقط وليس بصفحة الويب نفسها.

أكثر الطرق الشائعة لإستخدام هذا البرنامج في عملية تصميم الموقع هي تحويل تخطيط النهائي لشكل الموقع من برنامج الفوتوشوب إلى صفحة ويب بواسطة إستخدام HTML وتطبيق الشكل المصمم بالفوتوشوب على صفحة ويب، في هذا الدرس ستتعرف على كيفية تحويل التصميم من برنامج الفوتوشوب إلى صفحة ويب مركبة بتقنية HTML.

قبل البدأ في الدرس، أذكر بأن المثال الخاص بالدرس مجهز مسبقاً ببرنامج الفوتوشوب أي أن الدرس سيشرح بعد هذه المرحلة مباشرةً لكيفية تحويل التصميم إلى صفحة ويب، هذه صورة عامة للمثال الذي سنعمل عليه:

إستخدمنا حجم 1280×1024 لملف الفوتوشوب الخاص بالتصميم، والمثال الذي سنبطقه سيكون صفحة بإسم (مبدع) (إسم مدونتي الحالية – فقط كمثال لا أكثر!)

طريقة تحويل التصميم في الفوتوشوب

الطريقة الأولى

والتي يتيحها البرنامج ضمن أدواته هي أداة التقطيع Slice Tool وهي موجودة ضمن قائمة الأدوات والفكرة هي أن تقطع أجزاء التصميم التي تريدها ثم تحفظها كما هي كصور مستقلة ويمكن حفظها ضمن صفحة واحدة من برنامج الفوتوشوب مباشرةً. (لا أنصح بهذه الطريقة والأفضل الإعتماد على كتابة تركيبة HTML يدوياً أو تنظيمها حسب ما تريد)

بعد تقطيع التصميم بإستخدام أداة التقطيع Slice Tool للتصميم كامل نستخدم أداة أخرى بجانب الأداة السابقة التي إستخدمناها وهي أداة تحديد التقطيع Slice Select Tool وتستخدم في تعديل التقطيع قبل إعتماده وحذف التقطيع الذي تقرر الإستغناء عنه في أي وقت ولتحديد أجزاء التصميم التي حددناها مسبقاً بأداة التقطيع Slice Tool وتحويلها إلى صورة مستقلة وحفظها كصورة نهائية بإمتداد PNG. (سنستخدم إمتداد PNG و JPG في هذا الدرس)

لشرح المثال السابق بشكل عملي سنستعمل المثال في تقطيع أجزاء التصميم بإستخدام هذه الأداة، فإذا أردنا تقطيع عنوان القائمة الجانبية ستكون بهذه الطريقة التي ستشاهدها في الصورة:

ملاحظة:
البعض سيعاني من عدم الدقة في تحديد الأماكن التي يريد تقطيعها وحلها سهل جداً وهي تسريع التحديد وإظهار الأبعاد والفروقات بين الطبقات للوصول إلى النقطة المناسبة عن طريق خاصية Smart Guides.
التي تختصر عليك التدقيق في تحديد المكان بالضبط فتظهر لك البعد الذي تريد وضع فيه الطبقة التي تريد تحركها أو الأماكن التي تريد تقطيعها بشكل دقيق.
للوصول إلى هذه الخاصية عن طريق View->Show->Smart Guides.

بعد تحديد أجزاء التصميم نأتي لحفظ كل جزء لإخراجه بصورة خاصة وحفظه مع ملف قالب HTML فيما بعد، لإنجاز ذلك إذهب إلى File->Save for Web & Devices وبعد ذلك ستجد صورة التصميم كامل مع التقطيعات التي قمت بها، الآن حدد الاجزاء التي تريد حفظها كصورة PNG أو JPG (بالضغط على الجزء المحدد) (الأداة المستخدمة في قائمة Save for Web & Devices هي Slice Select Tool التي ذكرناها سابقاً)

ملاحظة:
عند حفظ الصورة بصيغة PNG ستجد أكثر من خيار للحفظ فإما أن تحفظها في كصورة أصلية Original أو كصورة مثالية Optimized (تعني الوصول إلى أفضل نتيجة وهي تقليل الحجم مع الحفاظ باكبر قدر ممكن من الجودة)، يمكن إختيار أياً منهم ولكن إذا كانت الصورة التي تريد أن تخفظها شفافة فأستخدم خيار Original.

لإكمال حفظ جزء التصميم وبعد تحديد الجزء الذي تريد تحويله إلى صورة إضغط على Save ثم ستظهر لك نافذة بالمكان الذي تريد حفظ الصورة فيه، ستجد في الأسفل إخيارات ومن بينها خيار Slices (الشرائح) وأختر Selected Slices ،ومعنى ذلك أنك تريد حفظ الجزء الذي حددته من التصميم فقط وليس التصميم باكمله.

الآن إنتهيت من حفظ أول صورة من التصميم الذي تريد تقطيعه، وإذا إستمرينا في تقطيع باقي التصميم سنصل إلى النتيجة التي نريدها، في الطريقة السابقة تعرفنا على تقطيع التصميم إلى أجزاء إضافةً إلى حفظ الأجزاء المقطعة من التصميم والمهمة فقط (أي التي سنستخدمها في في تكوين صفحة HTML لأن هناك أشياء غير مهمة للحفظ مثل المساحة البيضاء في التصميم الموجود في الفوتوشوب فهي لا تحتاج إلى حفظ لأنها ستكون موجودة في صفحة HTML أساساً وهكذا) وتحويل الأجزاء المقطعة إلى صورة مستقلة بصيغة PNG.

الطريقة الثانية
والتي أسهل من الأولى (بوجهة نظري) وهي إظهار الطبقات Layers (الموجودة في الفوتوشوب) التي ستحولها إلى صورة مستقلة وإخفاء باقي الطبقات التي لا تريد إستخدامها في الصورة وإستخدام النسخ الموحد Copy Merged (يمكنك الوصول إليها بسهولة عن طريق Edit->Copy Merged)

لتوضيح الطريقة نستخدم المثال في تقطيع الأجزاء التي نريدها من القائمة الجانبية مثل عنوان القائمة مثلاً ونخفي جميع طبقات التصميم الموجودة في الفوتوشوب

بعد ذلك نحفظ التصميم في ملف جديد في برنامج الفوتوشوب وسيتم تحديد عرض وطول الجزء المحدد عند إستخدام النسخ الموحد Copy Merged في الخطوة السابقة (مع مراعاة إظهار الطبقات التي تحتوي على الجزء الذي تريد تنسخه فقط)

بعد ذلك تحفظ التصميم عن طريق File->Save for Web & Devices وتختار نوع الصورة أصلية Original إذا كنت ستحفظ الصورة بصيغة PNG وكانت شفافة في نفس الوقت حتى تظهر بجودة عالية.

هنا إنتهينا من شرح الطريقتين، الآن نستطيع تطبيق ما ذكرناه لإنجاز الخطوة الأولى في تحويل تصميم المثال المرفق إلى صفحة HTML وكانت الخطوة الأولى هي حفظ الصور (لإستخدامها لاحقاً أثناء كتابة شفرة HTML وCSS في تكوين صفحة ويب)

نفترض الآن أننا إنتهينا من تقسيم التصميم وتحويل أجزائه إلى صور مستقلة بصيغة JPG أو PNG سنتعرف في الخطوة القادمة على كتابة صفحة ويب بـ HTML. (يجب إستخدام أياً من الخطوات السابقة عند تقطيع تصميمك الخاص)

الآن سأعرض أهم الأجزاء التي قطعتها أو إخترتها من التصميم الكامل الموجود في الفوتوشوب وحولتها إلى صور بصيغة JPG وبعضها لصيغة PNG.

خلفية الصفحة Background

رأس الصفحة Header

قائمة التصفح Navigation

القائمة الجانبية Sidebar

ثلاثة أعمدة من محتويات الموقعِContent

رأس الصفحة شاملة Header

ذيل الصفحة Footer

كتابة تركيبة HTML لمحتوى الصفحة

بعد أن إنتهينا من تحويل التصميم من الفوتوشوب والذي كان يتحدث عن طرق التقطيع والتحويل في برنامج الفوتوشوب بعد الإنتهاء من التصميم الأساسي، نأتي إلى كتابة صفحة الويب وتهيئتها لتكون مماثلة لما خططنا له في التصميم المنفذ بالفوتوشوب.

في البداية يجب تحديد الأصناف والعناصر التي سيتم إستخدامها في كتابة صفحة HTML فقط وذلك قبل البداية في الكتابة وأعني بالتحديد أن تكون لديك خلفية عن عدد العناصر التي تحمل الوسم div في html على سبيل المثال وتسمياتها بأصناف جديدة مثل content، #header، #footer# وهكذا. ضعها في مخيلتك فقط أو أرسم تخطيط بسيط لما ستكون عليه الصفحة بعد كتابة العناصر:

بعد توقع عناصر الصفحة التي سيتم كتابتها نبدأ بشفرة HTML، سنكتب الأجزاء الأولى التي ستمثل ما طبقناه في برنامج الفوتوشوب، مثل خلفية الصفحة وتوسيطها وقائمة التصفح ورأس الصفحة والأشياء الأخرى التي سنذكرها كأسماء عناصر في التعليقات في شفرة HTML التالية التي سنكتبها:

ملاحظة:
الشفرة التالية تحتوي على رابط ملف CSS الذي سنكتب به جميع الخصائص التي نحتاجها لتنسيق الصفحة لاحقاً.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
<title>قالب تجريبي</title>
</head>
<body>
<!-- Wrap -->
<div id="wrap">
  <!-- Middle -->
  <div id="middle"> <span class="top-background">
    <!-- Top Background -->
    </span>
    <!-- Navigation -->
    <div id="navigation"> ... </div>
    <!-- /Navigation -->
    <!-- Header -->
    <div id="header"> ... </div>
    <!-- /Header -->
    <!-- Contain -->
    <div id="contain">
      <!-- Content -->
      <div id="content"> ... </div>
      <!-- /Content -->
      <!-- Sidebar -->
      <div id="sidebar"> ... </div>
      <!-- /Sidebar -->
    </div>
    <!-- /Contain -->
    <!-- Footer -->
    <div id="footer"> ... </div>
    <!-- /Footer -->
    <span class="bottom-background">
    <!-- Bottom Background -->
    </span> </div>
  <!-- /Middle -->
</div>
<!-- /Wrap -->
</body>
</html>

تذكر قبل أن تبدأ بالتحويل أن يكون المحتوى جاهز على الصفحة، فيفضل أن يكون المحتوى جاهز قبل التصميم لكي ترى كيف سيكون شكله بعد التحويل، إذا لم تكن تملك محتوى جاهز إستخدم النص الحشو (lorem ipsum)، في مثالنا هذا سنستخدم النص الحشو.

بما أن لدينا عنصرين جاهزين wrap# و middle# (الأول لتغطية الصفحة كاملة والثاني لتوسيط المحتويات) ، سنبدأ بعنصر Navigation، هنا شفرة HTML الخاصة بعنصر Navigation وتحتوي على قائمة روابط:

<!-- Navigation -->
<div id="navigation">
  <ul>
    <li><a class="active" href="#"><span class="home">الرئيسية</span></a></li>
    <li><a href="#"><span class="about">حول الموقع</span></a></li>
    <li><a href="#"><span class="wptemp">قوالب ووردبريس</span></a></li>
    <li><a href="#"><span class="practuts">دروس عملية</span></a></li>
    <li><a href="#"><span class="articles">مقالات</span></a></li>
    <li><a href="#"><span class="artworks">أعمال فنية</span></a></li>
  </ul>
</div>
<!-- /Navigation -->

الصنف active. في الشفرة السابقة يشير إلى الصفحة الحالية وأنشأنا عنصر بوسم span وكتابة أصناف أخرى تمثل عناوين القوائم التي ستظهر على شكل صور، سنقوم بتنسيق جميع العناصر في وقت لاحق بالطبع، وهذه شفرة للعنصر header# الذي يحتوي على عنوان الموقع ووصف بسيط له:

<!-- Header -->
<div id="header">
  <h1>مبدع</h1>
  <p>القالب الخاص بدرس تحويل التصميم من PSD إلى XHTML</p>
</div>
<!-- /Header -->

بعد ذلك سيكون لدينا المحتوى content# والعمود الجانبي (القوائم الجانبية) sidebar# ، سندرجه تحت عنصر آخر بإسم contain# سنستفيد منه في وقت لاحق، الثلاث عناصر سيكونوا بهذا الشكل :

<!-- Contain -->
<div id="contain">
  <!-- Content -->
  <div id="content"> ... </div>
  <!-- /Content -->
  <!-- Sidebar -->
  <div id="sidebar"> ... </div>
  <!-- /Sidebar -->
  <br style="clear:both" />
</div>
<!-- /Contain -->

أما عن عنصر content# الذي سيمثل المحتوى الرئيسي للقاريء أو الزائر فليس هناك نص معين نضعه سنستخدم النص الحشو Lorem Ipsum كما ذكرنا مسبقاً، كمثال سنستخدم عنوان وثلاثة فقرات:

<div id="content">
<h2>عنوان رئيسي لنص وهمي</h2>
<p>مع الى وقام رجوعهم, أخذ شواطيء الباهضة أوكيناوا أم. ما زهاء أوزار الإمبراطوري غزو, أهّل تغييرات إستراتيجية الى في. الصفحات المزيفة باستحداث
كما عل, شبح هاربر كارثة أسلحته في. تحت استمرار بالمحور السوفييتية تم, لأداء الأجل وتزويده وضم ما. جوي لم سليمان، ولاتّساع أوكيناوا, ضرب من غضون الحكم استطاعوا .</p>
<p>ثمّة مشاركة قام لم, عن الذرية للإتحاد الولايات كما. حشد مع المحور بانتحار, أثره، كارثة قصف 30, كل دول أكثر والجنود. وحزبه اكتوبر أوروبا هو حدى
غزو خصوصا إستعمل كل, أسر بالقصف معاملة لم. ما تلك بأذى بالحرب تكاليف, المحيط وتزويده ذات كل, قبل تم لكون غرّة،. أدوات القوى الإمتعاض
عل ذلك, ما ومن إعلان الروس مشاركة, الدول الشتاء، التكاليف بعد ثم. يكن وتعدد الذرية وتتحمّل إذ, قد الطرفين القوقازية الأيديولوجية .</p>
<p>أدوات القوى الإمتعاض
عل ذلك, ما ومن إعلان الروس مشاركة, الدول الشتاء، التكاليف بعد ثم. يكن وتعدد الذرية وتتحمّل إذ, قد الطرفين القوقازية الأيديولوجية .</p>
</div>

بالإضافة إلى العمود الجانبي الذي سحتوي على القوائم الجانبية ومحرك البحث الخاص بالموقع:

<!-- Sidebar -->
<div id="sidebar">
<div id="search-box">
  <form>
    <p class="right">
      <input class="search-text" name="s" type="text" />
    </p>
    <p class="left">
      <input class="search-submit" name="submit" type="button" value="إيحث" />
    </p>
  </form>
</div>
<!-- Box -->
<div class="box-title">
  <h2>روابط نصية</h2>
</div>
<div class="box-top"></div>
<div class="box-center">
<ul>
<li><a href="#" title="مدونة قص ولصق">مدونة قص ولصق</a></li>
<li><a href="http://www.mubde3.net/blog/" title="مدونة مبدع">مدونة مبدع</a></li>
<li><a href="#" title="رابط الدرس مع المرفقات">رابط الدرس مع المرفقات</a></li>
<ul>
</div>
<div class="box-bottom"></div>
<!-- /Box -->
<!-- Box -->
<div class="box-title">
  <h2>مواقع وخدمات</h2>
</div>
<div class="box-top"></div>
<div class="box-center">
<ul>
<li><a href="http://twitter.com/mobde3net/" title="تويتر">تويتر</a></li>
<li><a href="http://facebook.com/" title="فايسبوك">فايسبوك</a></li>
<li><a href="http://youtube.com/" title="يوتيوب">يوتيوب</a></li>
<li><a href="http://google.com/" title="جوجل">جوجل</a></li>
<ul>
</div>
<div class="box-bottom"></div>
<!-- /Box -->
</div>
<!-- /Sidebar -->

تبقى لنا في النهاية ذيل الصفحة الذي يمثل العنصر footer#، يحتوي على فقرة حقوق الموقع أو القالب بالإضافة رابط الإتصال ورابط الخلاصات (رابط وهمي للخلاصات) الرابطين الأخيرين سيكونوا على شكل أيقونات وسنقوم بعمل ذلك فيما بعد أيضاً بـ CSS:

<!-- Footer -->
<div id="footer">
  <p>حقوق الدرس محفوظة لمدونة قص ولصق &copy; 2010</p>
  <ul>
    <li><a href="#" class="contact">للمراسلة</a></li>
    <li><a href="#" class="rss">تابعني عن طريق الخلاصات</a></li>
  </ul>
</div>
<!-- /Footer -->

هكذا انتهينا تقريباً من كتابة الصفحة باستخدام HTML ولاحظ أني صممت ثلاثة أعمدة جانبية ضمن المحتوى الرئيسي (ضمن العنصر Content)، سأضعها هنا لأننا سنستخدمها في التصميم، عبر هذه الشفرة:

<!-- Columns -->
<div id="columns">
  <div class="col">
    <h3>القائمة الأولى</h3>
    <p>و اتّجة الشرق، معارضة إيو، بلا بل وحتى وبدون. لها التكاليف الإكتفاء، تم وترك مسؤولية العسكرية كما. كان ثم جيما يتبقّ طائرات. الألوف تحرّكت مع أما، وتم أحدث كثيرة تحرّكت إذ, سمّي الأولى.</p>
  </div>
  <div class="col">
    <h3>القائمة الثانية</h3>
    <p>كل فمرّ بلاده تاريخ فصل، 2004 يتعلّق دنكيرك على جعل, السبب والحزب مسؤولية أم كلا. من وحزبه اليميني قصف. تم فسقط تشيرشل، وضم كل اقتصادية.</p>
  </div>
  <div class="col">
    <h3>القائمة الثالثة</h3>
    <p>تم كلا تشكيل منهمكتين ولكسمبورغ, وعلى اوروبا بـ يكن, خطّة اتفاق ليرتفع سقط على أم زهاء التنازلي انه، إيو بل يطول وباءتممثّلة. بل كما الستار للأسطول, عن خيار عجّل اللا فصل.</p>
  </div>
</div>
<!-- Columns -->

ملاحظة:
هناك عدة عناصر كتبناها بالوسم div وأنشأنا عناصر داخلية أخرى باستخدام نفس الوسم لكي يكون شكل الصفحة بنفس الشكل المطلوب والمصمم بالفوتوشوب، واعلم بأنه يمكنك اختصار المزيد من هذه العناصر تصميم الشكل المطلوب بأقل أسطر ممكنة ولكن اعتمدت على طريقتي التي أريدها لكتابة المثال، يمكن أن تكتبها بشكل آخر إن استطعت.

الآن انتهينا كلياً من كتابة الصفحة، هذه جميع أسطر 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
<title>قالب تجريبي</title>
</head>
<body>
<!-- Wrap -->
<div id="wrap">
<!-- Middle -->
<div id="middle">
<span class="top-background">
<!-- Top Background -->
</span>
<!-- Navigation -->
<div id="navigation">
  <ul>
    <li><a href="#">الرئيسية</a></li>
    <li><a href="#">حول الموقع</a></li>
    <li><a href="#">قوالب ووردبريس</a></li>
    <li><a href="#">دروس عملية</a></li>
    <li><a href="#">مقالات</a></li>
    <li><a href="#">أعمال فنية</a></li>
  </ul>
</div>
<!-- /Navigation -->
<!-- Header -->
<div id="header">
  <h1>مبدع</h1>
  <p>القالب الخاص بدرس تحويل التصميم من PSD إلى XHTML</p>
</div>
<!-- /Header -->
<!-- Contain -->
<div id="contain">
<!-- Content -->
<div id="content">
  <h2>عنوان رئيسي لنص وهمي</h2>
  <p>مع الى وقام رجوعهم, أخذ شواطيء الباهضة أوكيناوا أم. ما زهاء أوزار الإمبراطوري غزو, أهّل تغييرات إستراتيجية الى في. الصفحات المزيفة باستحداث
    كما عل, شبح هاربر كارثة أسلحته في. تحت استمرار بالمحور السوفييتية تم, لأداء الأجل وتزويده وضم ما. جوي لم سليمان، ولاتّساع أوكيناوا, ضرب من
    غضون الحكم استطاعوا .</p>
  <p>ثمّة مشاركة قام لم, عن الذرية للإتحاد الولايات كما. حشد مع المحور بانتحار, أثره، كارثة قصف 30, كل دول أكثر والجنود. وحزبه اكتوبر أوروبا هو حدى
    غزو خصوصا إستعمل كل, أسر بالقصف معاملة لم. ما تلك بأذى بالحرب تكاليف, المحيط وتزويده ذات كل, قبل تم لكون غرّة،. أدوات القوى الإمتعاض
    عل ذلك, ما ومن إعلان الروس مشاركة, الدول الشتاء، التكاليف بعد ثم. يكن وتعدد الذرية وتتحمّل إذ, قد الطرفين القوقازية الأيديولوجية .</p>
  <p>أدوات القوى الإمتعاض
    عل ذلك, ما ومن إعلان الروس مشاركة, الدول الشتاء، التكاليف بعد ثم. يكن وتعدد الذرية وتتحمّل إذ, قد الطرفين القوقازية الأيديولوجية .</p>
  <!-- Columns -->
  <div id="columns">
    <div class="col">
      <h3>القائمة الأولى</h3>
      <p>و اتّجة الشرق، معارضة إيو، بلا بل وحتى وبدون. لها التكاليف الإكتفاء، تم وترك مسؤولية العسكرية كما. كان ثم جيما يتبقّ طائرات. الألوف تحرّكت مع أما، وتم أحدث كثيرة تحرّكت إذ, سمّي الأولى.</p>
    </div>
    <div class="col">
      <h3>القائمة الثانية</h3>
      <p>كل فمرّ بلاده تاريخ فصل، 2004 يتعلّق دنكيرك على جعل, السبب والحزب مسؤولية أم كلا. من وحزبه اليميني قصف. تم فسقط تشيرشل، وضم كل اقتصادية.</p>
    </div>
    <div class="col">
      <h3>القائمة الثالثة</h3>
      <p>تم كلا تشكيل منهمكتين ولكسمبورغ, وعلى اوروبا بـ يكن, خطّة اتفاق ليرتفع سقط على أم زهاء التنازلي انه، إيو بل يطول وباءتممثّلة. بل كما الستار للأسطول, عن خيار عجّل اللا فصل.</p>
    </div>
  </div>
  <!-- Columns -->
</div>
<!-- /Content -->
<!-- Sidebar -->
<div id="sidebar">
<div id="search-box">
  <form>
    <p class="right">
      <input class="search-text" name="s" type="text" />
    </p>
    <p class="left">
      <input class="search-submit" name="submit" type="button" value="إيحث" />
    </p>
  </form>
</div>
<!-- Box -->
<div class="box-title">
  <h2>روابط نصية</h2>
</div>
<div class="box-top"></div>
<div class="box-center">
<ul>
<li><a href="#" title="مدونة قص ولصق">مدونة قص ولصق</a></li>
<li><a href="http://www.mubde3.net/blog/" title="مدونة مبدع">مدونة مبدع</a></li>
<li><a href="#" title="رابط الدرس مع المرفقات">رابط الدرس مع المرفقات</a></li>
<ul>
</div>
<div class="box-bottom"></div>
<!-- /Box -->
<!-- Box -->
<div class="box-title">
  <h2>مواقع وخدمات</h2>
</div>
<div class="box-top"></div>
<div class="box-center">
<ul>
<li><a href="http://twitter.com/mobde3net/" title="تويتر">تويتر</a></li>
<li><a href="http://facebook.com/" title="فايسبوك">فايسبوك</a></li>
<li><a href="http://youtube.com/" title="يوتيوب">يوتيوب</a></li>
<li><a href="http://google.com/" title="جوجل">جوجل</a></li>
<ul>
</div>
<div class="box-bottom"></div>
<!-- /Box -->
</div>
<!-- /Sidebar -->
</div>
<!-- /Contain -->
<!-- Footer -->
<div id="footer">
  <p>حقوق الدرس محفوظة لمدونة قص ولصق &copy; 2010</p>
  <ul>
    <li><a href="#">للمراسلة</a></li>
    <li><a href="#">تابعني عن طريق الخلاصات</a></li>
  </ul>
</div>
<!-- /Footer -->
<span class="bottom-background">
<!-- Bottom Background -->
</span>
</div>
<!-- /Middle -->
</div>
<!-- /Wrap -->
</body>
</html>

للتذكير، جميع العناصر التي كتبناها في الشفرات السابقة سأبين وظيفتها عبر هذه القائمة مرة أخرى، فقط للذين لم ينتبهوا لأهمية بعضها وخصوصاً في بداية كتابة الصفحة:

wrap#، تغطية جميع عناصر الصفحة الداخلية.
middle#، توسيط الصفحة والعناصر الداخلية.
navigation#، قائمة التصفح التي تحتوي على روابط أساسية للصفحة.
header#، شعار الموقع إضافة إلى وصف الموقع.
contain#، يحتوي على عناوين وفقرات المحتوى الأساسي (المواضيع) إضافةً إلى القائمة الجانبية.
content#، المحتوى الأساسي، عبارة عن عناوين وفقرات لإستخدامها في عرض موضوع وهمي.
sidebar#، يحتوي على القوائم الجانبية ومحرك البحث الخاص بالموقع.
footer#، ذيل الصفحة، يحتوي على جملة الحقوق إضافةً إلى روابط فرعية (رابط المراسلة ورابط الخلاصات).

تنسيق صفحة HTML بـ CSS حسب طريقة التقطيع في الفوتوشوب

بعد ان إنتيهنا من تجهيز الصور وكتابة محتويات وعناصر صفحة HTML نأتي لجزء مهم وهو إكمال عملية تحويل التصميم من الفوتوشوب إلى HTML بواسطة تقنية CSS وسنكمل بقية هذا الجزء حسب ما إتفقنا عليه سابقاً على شكل التصميم في الفوتوشوب ونطبقه على الصفحة بتنسيقها.

ملاحظة:
إستخدم خواص مثل margin وpadding في عمل مساحات البيضاء بتحديد الفارق بين العناصر الأخرى وحدود العنصر (margin) إضافةً إلى تحديد الفارق بين محتوى العنصر وحدود العنصر من الداخل (padding) لكي يتناسب مع العمل الموجود في الفوتوشوب .

سنبدأ أولاً بكتابة التصفير Reset، التي عادة تكون في مقدمة ملف CSS، الفائدة الرئيسية من تصفير الأوسمة هي توفير الوقت في كتابة خواص لن نحتاجها في الأساس ولكن لكي يظهر العنصر كما نريده في المتصفح فإننا قد نستخدمه، والهدف الرئيسي منها إرجاع قيم الخواص إلى قيم إفتراضية في الأوسمة والأصناف التي سنسخدمها.

فمثلاً لماذا نكتب خواص مثل margin أو padding كل مرة في تنسيق بعض الأوسمة أو الأصناف عدة مرات وهي تحمل نفس القيم والهدف منها جعل الخواص غير مفعلة أو أن تحمل القيمة صفر لأننا لن نسخدم الخواص إلا عند الحاجة لها.

فبدلاً من كتابة الخاصية في عدة أصناف وهي تحمل نفس القيمة:

#content p {
	margin: 0;
	padding: 0;
}
#content h2 {
	margin: 0;
	padding: 0;
}
#sidebar h2 {
	margin: 0;
	padding: 0;
}

نقوم بدمج الأصناف وتحديد خواص وقيم ثابتة لها:

p, h2 {
	margin: 0;
	padding: 0;
}

شفرة التصفير ستكون في البداية وكتبت الأوسمة التي استخدمتها في كتابة الصفحة إضافة إلى أوسمة أخرى يمكن استخدمها فيما بعد:

body, div, h1, h2, h3, h4,  p, span, small, a,  body, div, h1, h2, h3, h4,  p, span, small, a,  blockquote, pre,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
}
a {
	text-decoration: none;
}
ul, li {
	list-style: none;
}

ملاحظة:
يفضل كتابة شفرة تصفير خاصة لك قد تحتاج إلى إضافة خواص أخرى أو تقسيم الأوسمة أو حذف بعضها التي لا تحتاجها.

تبقى لنا وسم رئيسي وهو الوسم body، حسب التصور الذي وضعته للتصميم فإن خلفية الصفحة ستكون ضمن هذا الوسم إضافة إلى إتجاه الصفحة وتوسيط عناصر الصفحة كذلك:

body {
	direction: rtl;
	text-align: center;
	background: #000000 url(images/background.jpg) top center no-repeat;
}

نبدأ الآن في الأصناف سواء كانت من نوع class أو id، فإن الأصناف الأولى ستكون wrap# و middle# التي ستحوي بقية العناصر، الأول لتغطية الصفحة والثاني لإكمال توسيط بقية العناصر ضمن حجم معين:

#wrap {
	padding: 65px 0;
	width: 100%;
	text-align: right;
}
#middle {
	margin: 0 auto;
	width: 980px;
	background-color: #fff;
}

لإكمال الحواف الدائرية للعنصر الذي يحمل الصنف middle# فإننا وضعنا من خلاله عنصرين من نوع span الأول بإسم الصنف top-background. و الثاني bottom-background. (إذا لم تذكر هذان الصنفين بأرجو مراجعة شفرة HTML إضافةً إلى صورة التصميم بعد إخراجه ببرنامج الفوتوشوب) وسيكون تنسيق CSS بهذه الطريقة:

#middle .top-background {
	position: relative;
	top: -27px;
	display: block;
	width: 980px;
	height: 27px;
	background: url(images/mid_top.png) no-repeat;
}
#middle .bottom-background {
	position: relative;
	bottom: -25px;
	display: block;
	width: 980px;
	height: 25px;
	background: url(images/mid_bottom.png) no-repeat;
}

نأتي إلى عنصر قائمة التصفح في الصفحة بإسم navigation# ، فإن تنسيق هذا الصنف سيكون كما هو موضح في الشفرة (مع شرح عمل أهم الخواص في الصفحة عن طريق التعليقات CSS Comments)

#navigation {
	position: relative; /* لتحريك العنصر بأي إتجاه وفق العناصر المحيطة */
	top: -25px; /* إزاحة العنصر إلى الأعلى */
	right: -12px; /* إزاحة العنصر إلى اليمين */
	width: 1004px;
	height: 43px;
	background: url(images/navigation.png) top center no-repeat;
}
#navigation ul {
	padding: 12px 15px 0;
	overflow: hidden;  /* لإخفاء أي جزء يظهر خارج العنصر ، وخاصة في متصفح
                            Sarafi و Google */
}
#navigation ul li {
	display: inline;
}
#navigation ul li a {
	padding: 3px 25px 2px;
	float: right;
	height: 27px;
	text-indent: -9999px; /* لإخفاء النص وإستبداله بصورة فيما بعد */
}
#navigation ul li a.active {
	background: url(images/nav_arrow.gif) bottom no-repeat; /* إظهار صورة سهم لرابط المفعل */
}
#navigation ul li a:hover {
	background: url(images/nav_arrow.gif) bottom no-repeat;
}

تبقى جزء أخير في قائمة التصفح وهو إظهار صور الروابط التي سنضعها بدلاً من النص، وهذه هي بقية التنسيق ومع شرح أهم الخواص:

#navigation ul li a span.home {
	margin: 3px 20px 2px;
	display: block; /* إستخدام القيمة block
                            لإظهار كامل الصورة بطولها وعرضها */
	height: 16px;
	width: 48px;
	background: url(images/nav_home.png) top no-repeat;
}
#navigation ul li a span.about {
	margin: 3px 20px 2px;
	display: block;
	height: 17px;
	width: 65px;
	background: url(images/nav_about.png) top no-repeat;
}
#navigation ul li a span.wptemp {
	margin: 3px 20px 2px;
	display: block;
	height: 16px;
	width: 94px;
	background: url(images/nav_wptemplates.png) top no-repeat;
}
#navigation ul li a span.practuts {
	margin: 4px 20px 2px;
	display: block;
	height: 15px;
	width: 68px;
	background: url(images/nav_practicaltuts.png) top no-repeat;
}
#navigation ul li a span.articles {
	margin: 3px 20px 2px;
	display: block;
	height: 12px;
	width: 44px;
	background: url(images/nav_articles.png) top no-repeat;
}
#navigation ul li a span.artworks {
	margin: -1px 20px 2px;
	display: block;
	height: 20px;
	width: 66px;
	background: url(images/nav_artworks.png) top no-repeat;
}
#navigation ul li a span.home:hover, #navigation ul li a span.about:hover, #navigation ul li a span.wptemp:hover, #navigation ul li a span.practuts:hover, #navigation ul li a span.articles:hover, #navigation ul li a span.artworks:hover {
	background-position: bottom; /* لأننا إستخدمنا نص عادي ونص باللون الأصفر عند تمريرالفأره على الرابط
                                        سيظهر الجزء الأسفل من الصورة عند تمرير الفأرة وستكون صورة الرابط بالنص ذات اللون الأصفر */
}

بالنسبة لرأس الصفحة أو العنصر الذي يحمل إسم الصنف header# فإن تنسيقه سيكون بهذا الشكل:

#header {
	margin: -5px 0 0;
	clear: right; /* لتفادي مجاورة أي عنصر في الأعلى يتضمن الخاصية float
					وسبق أن استخدمناها لتعويم الجزء الأيمن */
	width: 980px;
	height: 112px;
	overflow: hidden;
	background: #fff url(images/header.jpg) top no-repeat; /* وضع صورة العريضة المتضمنة شعار الصفحة ووصفها */
}
#header h1 a {
	position: relative;
	right: 35px;
	top: 7px;
	width: 135px;
	height: 95px;
	display: block;
}
#header h1 a, #header p {
	text-indent: -9999px;
}

بالنسبة للمحتوى الرئيسي للصفحة content# والقائمة الجانبية sidebar# فإنها ستكون ضمن عنصر بإسم الصنف contain# كما توضح الشفرة:

#contain {
	padding: 30px 0;
	width: 980px;
	background: #fff url(images/container_background.gif) top repeat-x;
}
#contain #content {
	margin: 0 15px;
	float: right; /* محتوى الصفحة الرئيسية سيكون على الجهة اليمنى */
	width: 650px;
}
#contain #content h2 {
	margin: 0 0 15px;
	font: bold 20px Arial, Helvetica, sans-serif;
	color: #a00000;
}
#contain #content p {
	margin: 1px 0 15px;
	font: 13px tahoma;
	line-height: 22px;
}
#contain #sidebar {
	margin: 0 0 0 10px;
	float: left;  /* محتوى الصفحة الرئيسية سيكون على الجهة اليسرى */
	width: 275px;
}

وضعنا ثلاثة أعمدة ضمن المحتوى كمثال بإسم الأصناف col. و columns# ، وهذه الشفرة الخاصة بها:

#contain #content #columns {
	margin: 60px auto 20px;
	overflow: hidden;
	text-align: center;
}
#contain #content #columns h3 {
	margin: 5px 0 10px;
	font: bold 18px Arial, Helvetica, sans-serif;
	text-align: center;
}
#contain #content #columns p {
	text-align: justify;
	font: 12px tahoma;
	line-height: 15px;
}
#contain #content #columns .col {
	margin: 5px 0 0 20px;
	float: right; /* الأعمدة تبدأ بالإتجاه الأيمن بجوار بقية العناصر */
	width: 203px;
	background: url(images/content_col_mid.png) center repeat-y;
}
#contain #content #columns .col:last-child {
	margin-left: 0;
}
#contain #content #columns .col .col_top {
	padding: 10px;
	width: 183px;
	height: 200px;
	min-height: 135px; /* تحديد أقل طول للعنصر في حال عدم وجود نص معين */
	background: url(images/content_col_top.png) top no-repeat;
}
#contain #content #columns .col .col_bottom {
	display: block;
	width: 203px;
	height: 14px;
	background: url(images/content_col_bottom.png);
}

في القائمة الجانبية sidebar#، كتبنا نموذج للبحث في الصفحة بإسم search-box# وليست هناك أشياء جديدة سوى أننا إستخدمنا الصور في النموذج (حقل الكتابة وزر البحث):

#contain #sidebar #search-box {
	margin: 0 6px 10px 0;
	width: 264px;
	overflow: hidden;
}
#contain #sidebar #search-box p.right {
	float: right;
	width: 207px;
	height: 35px;
	background: url(images/searchbox_input.png) no-repeat;
}
#contain #sidebar #search-box p.right input {
	padding: 5px;
	margin: 5px 5px 5px 0;
	width: 185px;
	border: 0;
	font: 13px tahoma;
	color: #333333;
	border: 0;
	background: none;
}
#contain #sidebar #search-box p.left {
	float: left;
	width: 57px;
	height: 35px;
	background: url(images/searchbox_submit.png) no-repeat;
}
#contain #sidebar #search-box p.left input {
	margin: 4px 2px;
	padding: 4px;
	width: 47px;
	text-indent: -9999px;
	border: 0;
	background: none;
}

الآن نأتي إلى القوائم أو الصناديق والتي ستحتوي على الروابط وبقية أجزاء القائمة الجانبية بشكل عام، كما كتبنا في صفحة HTML سابقاً الصنف box. وهو يمثل الصندوق الذي يحتوي على قائمة الروابط بإستخدام الوسم li، والصنف box-title-links. و box-title-sites. ستكون لعناوين القوائم حسب ما صممناه سابقاً في برنامج الفوتوشوب.

بالإضافة إلى ثلاثة عناصر ضمن عنصر الصنف box. وهم box-top. و box-center. و box-bottom. سنستخدمهم فقط لتزيين أجزاء الصندوق وإظهار الصور التي نريدها كخلفيات، مثل ما هو موجود في هذه الشفرة:

#contain #sidebar .box {
	margin: 0 auto;
	width: 259px;
}
#contain #sidebar .box-top {
	width: 259px;
	height: 13px;
	background: url(images/sidebar_box_top.jpg) center no-repeat;
}
#contain #sidebar .box-center {
	width: 259px;
	min-height: 120px; /* تحديد أقل طول للصفحة */
	background: url(images/sidebar_box_center.jpg) center repeat-y;
}
#contain #sidebar .box-bottom {
	width: 259;
	height: 13px;
	background: url(images/sidebar_box_bottom.jpg) center no-repeat;
}
#contain #sidebar .box-title-links, #contain #sidebar .box-title-sites {
	margin: 0 0 3px;
	position: relative;
	left: 7px;
	width: 306px;
	height: 41px;
	background: url(images/sidebar_box_title.png) no-repeat;
}
#contain #sidebar .box-title-links h2 {
	width: 63px;
	height: 16px;
	background: url(images/box-title-links.png) no-repeat;
}
#contain #sidebar .box-title-sites h2 {
	width: 77px;
	height: 16px;
	background: url(images/box-title-sites.png) no-repeat;
}
#contain #sidebar .box-title-links h2, #contain #sidebar .box-title-sites h2 {
	position: relative;
	right: 20px;
	top: 16px;
	text-indent: -9999px;
	overflow: hidden;
}
#contain #sidebar .box-center ul li {
	margin: 0 10px;
	padding: 0 13px;
	font: 12px tahoma;
	line-height: 22px;
	background: url(images/side_arrow.png) right 11px no-repeat;
}
#contain #sidebar .box-center ul li a {
	padding: 1px 2px 5px;
	border-bottom: 1px dashed #484b4e;
	color: #222121;
}
#contain #sidebar .box-center ul li a:hover {
	border-bottom: 1px dashed #222121;
	color: #000;
}

تبقى لنا ذيل الصفحة وسيحتوي على نص الحقوق على الجهة اليمنى بالإضافة إلى قائمة لرابطين (رابط الإتصال + رابط الخلاصات) على الجهة اليسرى، شفرة CSS مع وصف الخواص والأصناف:

#footer {
	padding: 0 15px 0 15px;
	clear: both;
	width: 950px;
	height: 100%;
	overflow: hidden;
}
/* قائمة الروابط السفلية على شكل أيقونات */
    #footer ul {
	float: left; /* بقية الروابط ستكون على الجهة اليسرى */
	width: 165px;
}
#footer ul li {
	float: right;
	margin: 0 35px 0 0;
}
/* أيقونة رابط الإتصال */
    #footer ul li a.contact {
	width: 46px;
	height: 48px;
	display: block;
	text-indent: -9999px;
	background: url(images/contact.png) no-repeat;
}
/* أيقونة رابط الخلاصات */
    #footer ul li a.rss {
	width: 45px;
	height: 48px;
	display: block;
	text-indent: -9999px;
	background: url(images/rss.png) no-repeat;
}
/* نص حقوق المحفوظة */
    #footer p {
	padding: 20px 0 0;
	float: right;  /* النص سيكون على الجهة اليمنى */
	width: 780px;
	font: 13px tahoma;
	color: #343232;
}

ملاحظة:
إذا لم تستوعب شفرة CSS أو كنت مبتدئ في هذه التقنية إستخدم طريقتك في معرفة تركيب أي صفحة ويب تعتمد وتستخدم تقنية CSS بشكل معقد يفضل أن يكون بإستخدام أداة تساعدك على تشريح الصفحة بسهولة مثل إضافة Firebug الموجودة في متصفح Firefox.

تبقى لنا شيء آخر وهو شفرة CSS خاصة بمتصفح الإكسبلورر الإصدار السابع، لأن روابط قائمة التصفح لا تظهر جيداً فوضعت الشفرة بإستخدام التعليقات الشرطية Conditional Comments ، فقط ضعه ضمن محتويات الوسم head:

 <!--[if IE 7]>
<style type="text/css">
#navigation ul li a {
	padding: 5px 25px 0px;
	float: right;
	height: 27px;
	text-indent: -9999px;
}
#navigation ul li a span.artworks {
	margin: -3px 20px 2px;
}
#navigation ul li a span.practuts {
	margin: 7px 20px 2px;
}
#navigation ul li a span.articles {
	margin: 7px 20px 2px;
}
#navigation ul li a span.wptemp {
	margin: 6px 20px 2px;
}
#navigation ul li a span.about {
	margin: 6px 20px 2px;
}
#navigation ul li a span.home {
	margin: 6px 20px 2px;
}
#contain #content #columns .col {
	margin: 5px 3px 0 10px;
	padding: 0;
}
</style>
<!--[endif]-->

وضع شفرات CSS السابقة معاً في شفرة واحدة

/*
Author: Ahmed Alkatheeri
Author URI: http://www.mubde3.net/blog/
Tutorial Website: http://www.qaswlasq.com/
*/
body, div, h1, h2, h3, h4,  p, span, small, a,  blockquote, pre,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
}
a {
	text-decoration: none;
}
ul, li {
	list-style: none;
}
body {
	direction: rtl;
	text-align: center;
	background: #000000 url(images/background.jpg) top center no-repeat;
}
#wrap {
	padding: 65px 0;
	width: 100%;
	text-align: right;
}
#middle {
	margin: 0 auto;
	width: 980px;
	background-color: #fff;
}
#middle .top-background {
	position: relative;
	top: -27px;
	display: block;
	width: 980px;
	height: 27px;
	background: url(images/mid_top.png) no-repeat;
}
#middle .bottom-background {
	position: relative;
	bottom: -25px;
	display: block;
	width: 980px;
	height: 25px;
	background: url(images/mid_bottom.png) no-repeat;
}
#navigation {
	position: relative; /* لتحريك العنصر بأي إتجاه وفق العناصر المحيطة */
	top: -25px; /* إزاحة العنصر إلى الأعلى */
	right: -12px; /* إزاحة العنصر إلى اليمين */
	width: 1004px;
	height: 43px;
	background: url(images/navigation.png) top center no-repeat;
}
#navigation ul {
	padding: 12px 15px 0;
	overflow: hidden;  /* لإخفاء أي جزء يظهر خارج العنصر ، وخاصة في متصفح
                            Sarafi و Google */
}
#navigation ul li {
	display: inline;
}
#navigation ul li a {
	padding: 3px 25px 2px;
	float: right;
	height: 27px;
	text-indent: -9999px; /* لإخفاء النص وإستبداله بصورة فيما بعد */
}
#navigation ul li a.active {
	background: url(images/nav_arrow.gif) bottom no-repeat; /* إظهار صورة سهم لرابط المفعل */
}
#navigation ul li a:hover {
	background: url(images/nav_arrow.gif) bottom no-repeat;
}
#navigation ul li a span.home {
	margin: 3px 20px 2px;
	display: block; /* إستخدام القيمة block
                            لإظهار كامل الصورة بطولها وعرضها */
	height: 16px;
	width: 48px;
	background: url(images/nav_home.png) top no-repeat;
}
#navigation ul li a span.about {
	margin: 3px 20px 2px;
	display: block;
	height: 17px;
	width: 65px;
	background: url(images/nav_about.png) top no-repeat;
}
#navigation ul li a span.wptemp {
	margin: 3px 20px 2px;
	display: block;
	height: 16px;
	width: 94px;
	background: url(images/nav_wptemplates.png) top no-repeat;
}
#navigation ul li a span.practuts {
	margin: 4px 20px 2px;
	display: block;
	height: 15px;
	width: 68px;
	background: url(images/nav_practicaltuts.png) top no-repeat;
}
#navigation ul li a span.articles {
	margin: 3px 20px 2px;
	display: block;
	height: 12px;
	width: 44px;
	background: url(images/nav_articles.png) top no-repeat;
}
#navigation ul li a span.artworks {
	margin: -1px 20px 2px;
	display: block;
	height: 20px;
	width: 66px;
	background: url(images/nav_artworks.png) top no-repeat;
}
#navigation ul li a span.home:hover, #navigation ul li a span.about:hover, #navigation ul li a span.wptemp:hover, #navigation ul li a span.practuts:hover, #navigation ul li a span.articles:hover, #navigation ul li a span.artworks:hover {
	background-position: bottom; /* لأننا إستخدمنا نص عادي ونص باللون الأصفر عند تمريرالفأره على الرابط
                                        سيظهر الجزء الأسفل من الصورة عند تمرير الفأرة وستكون صورة الرابط بالنص ذات اللون الأصفر */
}
#header {
	margin: -5px 0 0;
	clear: right; /* لتفادي مجاورة أي عنصر في الأعلى يتضمن الخاصية float
                        وسبق أن استخدمناها لتعويم الجزء الأيمن */
	width: 980px;
	height: 112px;
	overflow: hidden;
	background: #fff url(images/header.jpg) top no-repeat; /* وضع صورة العريضة المتضمنة شعار الصفحة ووصفها */
}
#header h1 a {
	position: relative;
	right: 35px;
	top: 7px;
	width: 135px;
	height: 95px;
	display: block;
}
#header h1 a, #header p {
	text-indent: -9999px;
}
#contain {
	padding: 30px 0;
	width: 980px;
	background: #fff url(images/container_background.gif) top repeat-x;
}
#contain #content {
	margin: 0 15px;
	float: right; /* محتوى الصفحة الرئيسية سيكون على الجهة اليمنى */
	width: 650px;
}
#contain #content h2 {
	margin: 0 0 15px;
	font: bold 20px Arial, Helvetica, sans-serif;
	color: #a00000;
}
#contain #content p {
	margin: 1px 0 15px;
	font: 13px tahoma;
	line-height: 22px;
}
#contain #content #columns {
	margin: 60px auto 20px;
	overflow: hidden;
	text-align: center;
}
#contain #content #columns h3 {
	margin: 5px 0 10px;
	font: bold 18px Arial, Helvetica, sans-serif;
	text-align: center;
}
#contain #content #columns p {
	text-align: justify;
	font: 12px tahoma;
	line-height: 15px;
}
#contain #content #columns .col {
	margin: 5px 0 0 20px;
	float: right; /* الأعمدة تبدأ بالإتجاه الأيمن بجوار بقية العناصر */
	width: 203px;
	background: url(images/content_col_mid.png) center repeat-y;
}
#contain #content #columns .col:last-child {
	margin-left: 0;
}
#contain #content #columns .col .col_top {
	padding: 10px;
	width: 183px;
	height: 200px;
	min-height: 135px; /* تحديد أقل طول للعنصر في حال عدم وجود نص معين */
	background: url(images/content_col_top.png) top no-repeat;
}
#contain #content #columns .col .col_bottom {
	display: block;
	width: 203px;
	height: 14px;
	background: url(images/content_col_bottom.png);
}
#contain #sidebar {
	margin: 0 0 0 10px;
	float: left;  /* محتوى الصفحة الرئيسية سيكون على الجهة اليسرى */
	width: 275px;
}
#contain #sidebar #search-box {
	margin: 0 6px 10px 0;
	width: 264px;
	overflow: hidden;
}
#contain #sidebar #search-box p.right {
	float: right;
	width: 207px;
	height: 35px;
	background: url(images/searchbox_input.png) no-repeat;
}
#contain #sidebar #search-box p.right input {
	padding: 5px;
	margin: 5px 5px 5px 0;
	width: 185px;
	border: 0;
	font: 13px tahoma;
	color: #333333;
	border: 0;
	background: none;
}
#contain #sidebar #search-box p.left {
	float: left;
	width: 57px;
	height: 35px;
	background: url(images/searchbox_submit.png) no-repeat;
}
#contain #sidebar #search-box p.left input {
	margin: 4px 2px;
	padding: 4px;
	width: 47px;
	text-indent: -9999px;
	border: 0;
	background: none;
}
#contain #sidebar .box {
	margin: 0 auto;
	width: 259px;
}
#contain #sidebar .box-top {
	width: 259px;
	height: 13px;
	background: url(images/sidebar_box_top.jpg) center no-repeat;
}
#contain #sidebar .box-center {
	width: 259px;
	min-height: 120px; /* تحديد أقل طول للصفحة */
	background: url(images/sidebar_box_center.jpg) center repeat-y;
}
#contain #sidebar .box-bottom {
	width: 259;
	height: 13px;
	background: url(images/sidebar_box_bottom.jpg) center no-repeat;
}
#contain #sidebar .box-title-links, #contain #sidebar .box-title-sites {
	margin: 0 0 3px;
	position: relative;
	left: 7px;
	width: 306px;
	height: 41px;
	background: url(images/sidebar_box_title.png) no-repeat;
}
#contain #sidebar .box-title-links h2 {
	width: 63px;
	height: 16px;
	background: url(images/box-title-links.png) no-repeat;
}
#contain #sidebar .box-title-sites h2 {
	width: 77px;
	height: 16px;
	background: url(images/box-title-sites.png) no-repeat;
}
#contain #sidebar .box-title-links h2, #contain #sidebar .box-title-sites h2 {
	position: relative;
	right: 20px;
	top: 16px;
	text-indent: -9999px;
	overflow: hidden;
}
#contain #sidebar .box-center ul li {
	margin: 0 10px;
	padding: 0 13px;
	font: 12px tahoma;
	line-height: 22px;
	background: url(images/side_arrow.png) right 11px no-repeat;
}
#contain #sidebar .box-center ul li a {
	padding: 1px 2px 5px;
	border-bottom: 1px dashed #484b4e;
	color: #222121;
}
#contain #sidebar .box-center ul li a:hover {
	border-bottom: 1px dashed #222121;
	color: #000;
}
#footer {
	padding: 0 15px 0 15px;
	clear: both;
	width: 950px;
	height: 100%;
	overflow: hidden;
}
/* قائمة الروابط السفلية على شكل أيقونات */
    #footer ul {
	float: left; /* بقية الروابط ستكون على الجهة اليسرى */
	width: 165px;
}
#footer ul li {
	float: right;
	margin: 0 35px 0 0;
}
/* أيقونة رابط الإتصال */
    #footer ul li a.contact {
	width: 46px;
	height: 48px;
	display: block;
	text-indent: -9999px;
	background: url(images/contact.png) no-repeat;
}
/* أيقونة رابط الخلاصات */
    #footer ul li a.rss {
	width: 45px;
	height: 48px;
	display: block;
	text-indent: -9999px;
	background: url(images/rss.png) no-repeat;
}
/* نص حقوق المحفوظة */
    #footer p {
	padding: 20px 0 0;
	float: right;  /* النص سيكون على الجهة اليمنى */
	width: 780px;
	font: 13px tahoma;
	color: #343232;
}

الآن إنتهينا من جميع التنسيقات ويمكن تصفح صفحة HTML التي حولناها للتأكد من ذلك أو تنزيل الملفات وتجربة الدرس بنفسك، أتمنى أن يكون الدرس قد أفادكم.

ساعدنا على الإنتشار بمشاركتك هذه المقالة مع الآخرين

مصطلحات ذات الصلة: psd2html، تصميم، فوتوشوب

عن الكاتب

أحمد الكثيري، مطور ومصمم مواقع ويب، مهتم بإثراء المحتوى العربي على الإنترنت والتدوين ومشاريع الويب. يمكنك متابعته عبر مدونته وعبر حسابه في تويتر.

التعليق رقم: 1 ماجي في 13/02/2010، الساعة 13:06

اشكرك بشدة على هذا الشرح الرائع , فقد قمت بعمل الخطوات بنفسي و نجحت في تحويل ملف الpsd المرفق الى html.

و لكن لدي سؤال في الجزء المتعلق بالطريقة الثانية للتقطيع و هي إظهار الطبقات (الموجودة في الفوتوشوب) التي ستحولها إلى صورة مستقلة وإخفاء باقي الطبقات وإستخدام النسخ الموحد Copy Merged فقد قمت بذلك و لكن Copy Merged لم يكن active لاستخدامه فماذا افعل؟

شكرا

رد على التعليق
- التعليق رقم: 2 كريم طارق في 13/02/2010، الساعة 13:44
  
  غالباً Copy Merged لم يكن active لأن الطبقة التي أنت عليها وقت محاولتك إستخدام Copy Merged كانت مخفية
  
  قومي بإختيار طبقة غير مخفية وجربي مرة أخرى
- التعليق رقم: 3 أحمد الكثيري في 13/02/2010، الساعة 23:31
  
  مثل ما قال الأخ كريم، عند إخفاء الطبقات التي لا تريدينها تأكدي من أن الطبقة المحددة أو الحالية هي طبقة غير مخفية وسيعمل النسخ الموحد للجزء.
التعليق رقم: 4 أحمد حمودة في 13/02/2010، الساعة 14:59

هذا التعليق ليس إلا شكر لأخي أحمد الكثيري (وهو يعلم كم أقدره و أقدر أعماله)
أخي أحمد لقد ابدعت في هذا الدرس و أعتقد إنه سيصبح الدرس الرسمي على الإنترنت باللغة العربية لتقطيع تصاميم الفوتوشوب لتصبح تصاميم وب بوجه عام.
كمية تفاصيل دقيقة و بداية قوية للمدونة تحياتي لفريق عملها كله

رد على التعليق
التعليق رقم: 5 أنيس في 13/02/2010، الساعة 16:06

ما شاء الله درس جميل و شرح في منتهى الدقة

رد على التعليق
التعليق رقم: 6 bzizit في 13/02/2010، الساعة 16:46

جزاك الله خيرا ,أشكرك على المجهود الجبار جعله الله في ميزان حسناتك ولا حرمنا الله من عطائك ,فلقج كنت محتاج لمثل هذه الدروس, فتقبل مني فائق الاحترام و التقدير ,ولي عودة بإذن الله بعد التطبيق أرجوا أن تتقبلني بصدر رحب

رد على التعليق
التعليق رقم: 7 محمود قنديل في 13/02/2010، الساعة 17:35

مشكوور حبيبي على درس الرائع

تحياتي لمجهودك الرائع

اخوك محمود قنديل

رد على التعليق
التعليق رقم: 8 abdallh في 13/02/2010، الساعة 22:14

لي عودة بأذن الله وسيكون التطبيق معي

رد على التعليق
التعليق رقم: 9 أحمد شيكو في 13/02/2010، الساعة 22:30

أشكرك أخي أحمد على هذا الدرس الأكثر من الرائع و الممتاز

لكن لي طلب بسيط أرجو أن تلبيه لي و هو شرح التقطيع بالفيديو حتى أتفادى الأخطاء

شكرا جزيلا لك و لتلك المدونة الرائعة التي ستصبح أفضل مدونة عربية بأذن الله.

تقبل خالص تحياتي و احتراماتي,

رد على التعليق
- التعليق رقم: 10 أحمد الكثيري في 13/02/2010، الساعة 23:28
  
  أرجو منك أن تخبرني بالأخطاء أو الصعوبات التي واجهتها أثناء تطبيقك للدرس لأقوم بتوضيحها لك إن شاء الله
  
  للأسف لا أستطيع حالياً عمل الدرس بالفيديو.
التعليق رقم: 11 أحمد الكثيري في 13/02/2010، الساعة 23:40

أحمد حمودة: أشكرك على دعمك المعنوي لي وللمدونة أخي أحمد، وأهم شيء أن يكون الدرس مفيد ويلبي طلب الباحثين عن طريقة تحويل تصميم لصفحة ويب

abdallh، bzizit: أتمنى لكم التوفيق في تطبيق الدرس وأتقبل إستفساراتكم وملاحظاتكم عن الدرس في حال واجهتكم مشكلة أثناء التطبيق

أنيس، محمود قنديل: أشكركم على ردودكم

رد على التعليق
التعليق رقم: 12 أحمد شيكو في 14/02/2010، الساعة 00:33

أشكرك أخي أحمد تعبتك معي كانت المشكلة صغيرة جدا و قد تم حلها بحمد الله فقد قمت بالتقطيع بنفسي و لم أعتمد على التقطيع الجاهز و قد ظهرت بعض الأخطاء لكني حللتها و الحمد لله.

شكرا جزيلا لك.

رد على التعليق
التعليق رقم: 13 aatkco في 14/02/2010، الساعة 12:03

شكرا جزيلا على الشرح الرائع

رد على التعليق
التعليق رقم: 14 alhuthaly في 14/02/2010، الساعة 15:23

الدرس جدا رائع ومفيد لا كن أخوي أحمد لو كان سكرين كست كان أفضل من وجهة نظري

يعطيك ألف عافية ياليت تكمل المسيرة إلى الـwordpress

رد على التعليق
التعليق رقم: 15 abdallh في 14/02/2010، الساعة 19:03

تم التحويل

هذا تطبيقي :
http://www.abdallh.net/uplods/index/
متوافق مع كروم , سفاري , فاير فوكس
ولا اعلم ان كان متوافق مع اكسبلولر او لا

مدة التطبيق ساعتين استاذي احمد هل ساعتين وقت طبيعي ؟ ام انني بطيء ؟

رد على التعليق
- التعليق رقم: 16 أحمد الكثيري في 14/02/2010، الساعة 19:42
  
  بداية جيدة وموفقة أخي عبدالله، كان بأمكانك الإعتماد على صور png في القوائم لكي تكون شفافة ويسهل عليك تعديل خلفية الصفحة بدون تعديل باقي الصور، أشكرك على تفاعلك معنا
  
  بالنسبة لتوافق التصميم مع متصف الإكسبلورر أعتقد تصميمك متوافق مع الإصدارات الثلاث تقريباً يمكنك التأكد من ذلك عن طريق برنامج IETester، أما بالنسبة لوقت التصميم فسوف تقل مع الممارسة وهذا شيء طبيعي ولكن الأهم من هذا هو إتقان التصميم أكثر من الوقت المستغرق، فيمكن لتصميم أن يأخذ ساعات ويعيد المصمم ما قام به من جديد بسبب الفكرة أو وجود أخطاء أو ما إلى ذلك، شيء طبيعي
  
  أتمنالك التوفيق وأشكرك مرة أخرى على تفاعلك وتطبيقك للدرس.
التعليق رقم: 17 abdallh في 14/02/2010، الساعة 19:05

اتشرف بأنني صاحب اول تطبيق في مدونة قص ولصق

رد على التعليق
التعليق رقم: 18 أرابيك لووك في 16/02/2010، الساعة 01:51

شكرا على الدرس الثمين أخي , سأقوم بحفظه لحاجتي الشديدة له …

رد على التعليق
التعليق رقم: 19 حمد في 17/02/2010، الساعة 14:10

شكرا عل الدرس

ملحوظة لمدير الموقع : تلقيمات RSS لا تظهر هذا الموضوع حتى الأن .. ولا يظهر فيها إلا موضوعين فقط .. تدوينة الإفتتاح والتدوينة الخاصة بالتعريف بسيناترا

رد على التعليق
التعليق رقم: 20 Ahmed Bolica في 20/02/2010، الساعة 15:20

بصراحه مش لاقى كلام اقوله لاشكر الاخ احمد مقاله اكثر من رائعه
انا بس عايز اعلق ومنه استفسار
انا بفضل بصراحه الطريقة الثانية فى التقطيع لانها اسهل بكثير وتتيح التكويد اكثر من الاولى فى راى
وبصراحه مش عارف الكلام اللى حقوله ده صح ولا لا
بس افتكر الاعتماد على الاكوااد اكثر اهم من التدخل الكثير للفتوشوب
css 3 اصبحت اكثر حيويه الان
شكرا اخ احمد

رد على التعليق
- التعليق رقم: 21 أحمد الكثيري في 21/02/2010، الساعة 12:55
  
  أهلاً أخي أحمد، بالنسبة للطريقة الثانية في التقطيع هي الطريقة التي أستخدمها وأفضلها أيضاً، ولكل مصمم له تفضيلاته.
  
  أما عما ذكرته بخصوص الإعتماد على الأكواد أكثر بالتصميم في برنامج الفوتوشوب فإنه لا يتعدى مرحلة التخطيط بالتصميم كله، يمكن البدأ مباشرة في التكويد ولكن يفضل أن يكون هناك تخطيط للشكل ليس بالضرورة التخطيط في برنامج الفوتوشوب يمكن التخطيط على ورق أو ما يمسى بالتمثيل الشبكي.
  
  كنت أتمنى إعتماد جميع محركات المصفحات كافة خصائص CSS3 لأنها تعتبر بمثابة محسنات للشكل فقط حالياً إلى أن يتم دعمها في متصفحات يستعملها أغلب المستخدمين مثل الإكسبلورر، أوبرا أو غيره. ولو تم الإعتماد على CSS3 سنستغني عن عمل وإستخدام بعض الصور في التصميم.
  
  أشكرك على تعليقك.
التعليق رقم: 22 pluscss في 21/02/2010، الساعة 15:07

السلام عليكم جميعاً .

بالنسبة لي لا استخدم الفوتوشوب الا للغرافيك اي لمحاكاة اي شيء مطلوب في الموقع و ابدأ بكتابة أكوادي دون المرور بمرحلة الفوتوشوب .. لا استعمل اداة slice أبداً و أحاول قدر الإمكان اقناع العميل بالتخفيف من العامل الصوري ( الغرافيك ) في اي مشروع ..

إجمالاً .. الموضوع رائع . و بداية رائعة للمدونة أتمنى للكاتب و للقائمين عليها التوفيق .

رد على التعليق
التعليق رقم: 23 محمد حمزة في 22/02/2010، الساعة 13:27

جزاك الله خير . اخي احمد .. حقيقة شرح سلس ومختصر ومفيد
اتمنى لك التوفيق وان ينفع الله بك الامة

رد على التعليق
التعليق رقم: 24 أسامة في 27/02/2010، الساعة 14:19

هي بداية جودة المحتوى العربي في الانترنت .
أسامة حميدة

رد على التعليق
التعليق رقم: 25 nazpro في 17/03/2010، الساعة 22:00

درس رائع جدا واستفد منه كثيييير
وقد حفظته كمرجع لي
دمت بود

رد على التعليق
التعليق رقم: 26 علاء الدين في 23/03/2010، الساعة 18:40

شرح ممتاز وتستحق مائة من مائه
وفقك الله

رد على التعليق
التعليق رقم: 27 الرياض في 28/03/2010، الساعة 21:47

جميل

مدونة أكثر من رائعة

خالص تحياتى ؛؛

رد على التعليق
التعليق رقم: 28 أحمد الغنام في 01/05/2010، الساعة 20:17

شرح أكثر من راااائع

ولطالما استخدمت الطريقة الأولى في التقطيع…………لكن الطريقة الثانيه جديده علي

واستفدت من الشرح الممتاز

جزاك الله خيرا

رد على التعليق
التعليق رقم: 29 مي في 23/05/2010، الساعة 13:10

جزاك اللة خيرا

رد على التعليق
- التعليق رقم: 30 مي في 23/05/2010، الساعة 13:13
  
  شرح اكثر من ممتاز
التعليق رقم: 31 dark59 في 29/06/2010، الساعة 12:13

بصراحة موضوع جميل بس كان لى استفسار هل هذه الطريقة تصلح لمدونات البلوجر

رد على التعليق
التعليق رقم: 32 محمد في 25/08/2010، الساعة 08:25

موضوع قيم جزاك الله كل خير

رد على التعليق
التعليق رقم: 33 نسيم رحالي في 27/08/2010، الساعة 04:52

جزاك الله خيرا اخي احمد
صراحة موضوع في القمة لك مني تقييم 10/10
تحياتي لك

رد على التعليق

عَلق على الموضوع

إذا كان لديك تعليق، سؤال أو إقتراح متعلق بالموضوع تأكد من ملء جميع الحقول لتتمكن من التعليق.

الإسم* الرجاء إدخال الاسم

البريد الإلكتروني* الرجاء إدخال البريد الإلكتروني الخاص بك
التعليق* الرجاء إدخال تعليقك
النموذج غير مخصص للإعلان عن موقعك أو الخدمة التي تقدمها لذا رجاءً لا تضع رابط أو أسم موقعك في خانة الإسم أو في التعليق، التعليقات يتم النظر فيها قبل نشرها، شكراً لك.

مدونة قص ولصق

تحويل تصميم من PSD إلى HTML

طريقة تحويل التصميم في الفوتوشوب

كتابة تركيبة HTML لمحتوى الصفحة

تنسيق صفحة HTML بـ CSS حسب طريقة التقطيع في الفوتوشوب

ساعدنا على الإنتشار بمشاركتك هذه المقالة مع الآخرين

عن الكاتب

عدد التعليقات: 33

عَلق على الموضوع

كن على تواصل

إعلانات جوجل

تصنيفات