سيعلمك البرنامج التعليمي اليوم كيفية استخدام Div+CSS لخفض صفحة PSD إلى صفحات HTML. لقد قام هذا الموقع دائمًا بعمل القليل من البرامج التعليمية ، ومعظمها مجزأة نسبيًا. في المستقبل ، سننشر ببطء وترجمة المزيد من البرامج التعليمية مثل هذا.
انظر أولاً إلى التأثير
الصورة أدناه هي العروض. بعد التخلص منه ، قد يكون الرأس والأسفل أوسع ...
إنشاء مجلد جديد
للبدء ، قم بإنشاء مجلد في جهاز الكمبيوتر الخاص بك. أسمته Zmool. ثم قم بإنشاء صور مجلد جديدة في المجلد ووضع جميع صور الموقع. بعد ذلك ، افتح محرر التعليمات البرمجية (DreamWeaver) وقم بإنشاء ملف HTML باسم Index.html في دليل الجذر ، وهو قالب الصفحة الرئيسية الخاصة بنا. الآن قم بإنشاء ملف CSS جديد وقم بتسمية ملف Style.CSS. كما هو مبين في الشكل أدناه:
افتح ملف index.html. في الجزء العلوي من علامة الرأس ، أضف الرابط إلى ورقة الأنماط (style.css). يمكنك استخدام الرمز التالي.
<link href = style.css rel = typsheet type = text /css />
رمز الرأس كما يلي:
<! doctype html public -// w3c // dtd xhtml 1.0 transitional // en http://www.w3 xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html ؛ charset = utf-8/> <title> استوديو التصميم الحديث </title> <link href = style.css rel = typehelet type = text/css/> </head> <body> </body> </html>
إنشاء هيكل HTML
الآن ، سنقوم بإعداد بنية ملف HTML. تعيين الأقسام 3 (العنوان ، المحتوى ، تذييل) كما يلي:
<! doctype html public -// w3c // dtd xhtml 1.0 transitional // en http://www.w3 xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html ؛ charset = utf-8/> <title> مستند بدون عنوان </title> <link rel = type-theet type = text/css href = style.css/> </head> <body> <div id = header> </viv> <div id = content> </viv> <div id =/div> </body> </html
خلفية قطع
يحتوي ملف PSD الخاص بنا على العديد من تأثيرات الملمس. نحتاج إلى قطع كل هذه الأشياء ثم إضافتها إلى صفحة الويب باستخدام رمز لجعل تأثير صفحة DIV متوافقًا مع تأثير التصميم.
<Body> <div id = header> <div id = container> </viv> </viv> <div id = content> <div id = container> </viv> </viv> <div id = footer> <div id = container> </viv> </viv> </body>
افتح الآن الطبقة المصممة في الأصل في Photoshop ، واخفيها ، باستثناء طبقة الخلفية.
خذ الآن أداة التقطيع ، حدد الخلفية ، احفظ تنسيق الويب لـ Web Page (Alt + Shift + Ctrl + S). ثم يدعى ملف مجلد الصورة المحفوظ اسمه الخلفية. jpg.
تعيين نمط الخلفية
افتح ملف style.css ، وضبط النمط الأساسي ، ونمط الخلفية ، وعرض الجزء الرئيسي ، على النحو التالي:
* {الهامش: 0px ؛ padding: 0px ؛} body {background: url (Images/background.jpg) ؛}#Container {margin: auto ؛ العرض: 960px ؛}قطع الرأس
ارجع إلى Photoshop ، وإخفاء ما يسمى الطبقة ، باستثناء خلفية الرأس ، واستخدم نفس الطريقة لخفض صورة خلفية الرأس إلى تنسيق ويب ، وحفظ اسم الملف كما head.jpg.
قم بتحرير رمز خلفية الرأس
قم بتحرير الكود التالي في ملف style.css:
#Header {background: url (صور/header.jpg) ؛ الارتفاع: 124px ؛}قطع شعار الرأس
في هذا الوقت ، قطع طبقة الشعار وإخفاء جميع الطبقات ، بما في ذلك طبقة الخلفية. قم بقطع طبقة الشعار بنفس الطريقة كما هو مذكور أعلاه لحفظها كـ logo.png. ملاحظة: احفظها كصورة تنسيق PNG.
أضف لإضافة شعار على الصفحة
ارجع الآن إلى HTML وأضف الكود التالي <div id = logo> ...
<div id = header> <div id = container> <div id = logo> <a href =#> <img src = images/logo.png> </a> </viv> </viv> </viv>
الآن ، قم بالتبديل إلى ملف style.css أدناه واكتب نمط #logo.
#logo {margin-top: 20px ؛ الحدود: لا شيء ؛}تحرير رمز التنقل
فيما يلي الرمز في الصفحة. يتضمن الرأس جزأين: الشعار والملاحة.
<div id = header> <div id = container> <div id = logo> <a href =#> <img src = images/logo. <li> <a href =#> blog </a> </li> <li> <a href =#> contact </a> </li> </viv> </viv>
نمط الملاحة كما يلي:
الآن ، أضف أنماط التنقل في جدول CSS ~ ، UL ، LI وربط الأنماط:
#Header li {color:#959595 ؛ style style: none ؛ float: left ؛ hargin-rocl: 20px ؛ font-family: myriad pro ، arial ؛ font-weight: bold ؛ font-size: 24px ؛}#header li a {color:#959595 ؛ ul {float: right ؛ margin-top: -40px ؛}#header li a: hover {background:#202020 ؛ color:#d2d2d2 ؛ -moz-border-radius: 5px ؛ -khtml-border-radius: 5px ؛ -webkit-border-radius: 5 px ؛}الآن اجعل الجزء الأوسط
الآن نضيف اثنين من divs إلى الجزء الأوسط من محتوى الصفحة ، كما هو موضح في الشكل أدناه:
<div id = content> <div id = container> <div id = superned> </viv> <div id = paragraphs> </viv> </viv> </viv>
قم بالتبديل إلى صفحة Photoshop PSD ، وقم بقطع الجزء الأوسط ، وتسمية It It Superive.jpg. الشكل التالي:
أضف الكود التالي إلى صفحة HTML الخاصة بك ، وبعض مقدمة النص:
<div id = content> <div id = container> <div id = simplired> <a href =#> المزيد من المشاريع </a> <p> <psh> مشروع محفظة ، 5 يناير 2010 </span> هل أردت من قبل إنشاء تصميم محفظة نظيفة ولطيفة؟ في هذا البرنامج التعليمي ، سأوضح لك كيفية تصميم تخطيط محفظة زرقاء نظيفة. هل أردت يومًا إنشاء تصميم محفظة نظيف ولطيف؟ في هذا البرنامج التعليمي ، سأوضح لك كيفية تصميم تخطيط محفظة زرقاء نظيفة في Adobe Photoshop. </p> </viv> <div id = paragraphs> </viv> </viv> </viv>
في ملف PSD ، إخفاء الطبقات المزعومة الأخرى ، اترك جزءًا من طبقة الزر فقط ، وقطع جزء الزر ، وحفظ تنسيق PNG ، واسم الزر.
الآن نضيف هذه الصور إلى الصفحة ، ونفّح إلى صفحة ملف CSS ، ونضيف الكود التالي ، والذي يتضمن نمط الخلفية ونمط الزر.
#featured {background: url (Images/superive.jpg) no-repeat ؛ الارتفاع: 381px ؛ الهامش: 30px ؛ margin-left: 80px ؛}#مميز A {background: url (صور/زر.الآن دعنا نضيف بعض أنماط DummyText:
.DummyText {color:#d2d2d2 ؛ العرض: 245px ؛ الهامش-أعلى: 150px ؛ الموضع: المطلق ؛ font-family: arial ، helvetica ، sans-serif ؛ font-size: 12px ؛ line-line: 180 ٪ ؛ margin-left: 290px ؛} span {font-size: 16px ؛ color:#191919 ؛ font-weight: bold ؛}تتم إضافة ما يلي لإضافة صور لعرض قسم مقدمة الفئة التالية
جزء الكود من الصفحة كما يلي.
<div id = paragraphs> <p> <span> جميلة </span> WebDesignfan هي مدونة ذات صلة بالتصميم حول تصميم الويب ، فوتوشوب ، الهدايا المجانية والبرامج التعليمية. ننشر معلومات مفيدة مخصصة لمصممي الويب والمطورين. هنا يمكنك العثور على موارد مجانية مثل المتجهات وموضوعات WordPress والكثير من الإلهام. </p> <p> <span> الفعالة </span> WebDesignfan عبارة عن مدونة ذات صلة بالتصميم حول تصميم الويب ، Photoshop ، الهدايا المجانية والدروس التعليمية. ننشر معلومات مفيدة مخصصة لمصممي الويب والمطورين. هنا يمكنك العثور على موارد مجانية مثل المتجهات وموضوعات WordPress والكثير من الإلهام. </p> <p> <span> الوظيفية </span> WebDesignfan هي مدونة ذات صلة بالتصميم حول تصميم الويب ، Photoshop ، الهدايا المجانية والدروس التعليمية. ننشر معلومات مفيدة مخصصة لمصممي الويب والمطورين. هنا يمكنك العثور على موارد مجانية مثل المتجهات وموضوعات WordPress والكثير من الإلهام. </p> </viv>
يجب أن يبدو المحتوى في الجزء الأوسط مثل هذا:
<div id = content> <div id = container> <div id = simplired> <a href =#> المزيد من المشاريع </a> <p> <psh> مشروع محفظة ، 5 يناير 2010 </span> هل أردت من قبل إنشاء تصميم محفظة نظيفة ولطيفة؟ في هذا البرنامج التعليمي ، سأوضح لك كيفية تصميم تخطيط محفظة زرقاء نظيفة. هل أردت يومًا إنشاء تصميم محفظة نظيف ولطيف؟ في هذا البرنامج التعليمي ، سأوضح لك كيفية تصميم تخطيط محفظة زرقاء نظيفة في Adobe Photoshop. </p> </viv> <div id = paragraphs> <p> <span> جميلة </span> WebDesignfan هي مدونة ذات صلة بالتصميم حول تصميم الويب ، Photosh ، photospies و photospies. ننشر معلومات مفيدة مخصصة لمصممي الويب والمطورين. هنا يمكنك العثور على موارد مجانية مثل المتجهات وموضوعات WordPress والكثير من الإلهام. </p> <p> <span> الفعالة </span> WebDesignfan عبارة عن مدونة ذات صلة بالتصميم حول تصميم الويب ، Photoshop ، الهدايا المجانية والدروس التعليمية. ننشر معلومات مفيدة مخصصة لمصممي الويب والمطورين. هنا يمكنك العثور على موارد مجانية مثل المتجهات وموضوعات WordPress والكثير من الإلهام. </p> <p> <span> الوظيفية </span> WebDesignfan هي مدونة ذات صلة بالتصميم حول تصميم الويب ، Photoshop ، الهدايا المجانية والدروس التعليمية. ننشر معلومات مفيدة مخصصة لمصممي الويب والمطورين. هنا يمكنك العثور على موارد مجانية مثل المتجهات وموضوعات WordPress والكثير من الإلهام. </p> </viv> </viv> </viv>
انتقل إلى ملف CSS وأضف الكود التالي.
#Paragraphs span {font-family: myriad pro ، helvetica ، sans-serif ؛ font-size: 22px ؛ font-weight: 600 ؛ تباعد الحروف: -2px ؛}#الفقرة {Margin-Left: 80px ؛ sans-serif ؛ اللون:#191919 ؛ الحجم السائد: 12px ؛ الهامش-أعلى: 15px ؛}. الفقرة {العرض: 250px ؛ الهامش-اليسار: 15px ؛ عائم: اليسار ؛}هذا ما فعلناه حتى الآن:
يتم التعامل مع الجزء السفلي من الموقع أدناه
الآن بعد أن انتهينا من هذا الجزء منه ، سنبدأ في إنشاء تذييل.
أولاً ، في ملف PSD الخاص بك ، إخفاء طبقات أخرى باستثناء طبقات تذييل التذييل وتذييل ، ثم قم بتقطيع وحفظ أشياء تذييل تذييل. jpg.
ثم قطعه مرة أخرى وقطع الزر ورسومات الطيور. اسمه متابعة. png و bird.jpg على التوالي.
تحرير الرمز السفلي
يتضمن التذييل السفلي بعض النص وصورة للطائر مع رابط.
لذا أضف الكود التالي إلى صفحة HTML.
<div id = footer> <div id = container> <p> 2010؟ استوديو التصميم الخيالي. تصميم بواسطة webdesignfan. </p> <a href =#> اتبعنا على Twitter </a> <img src = images/bird.jpg/> </viv> </viv>
الآن ، قم بتحرير رمز نمط التذييل في الأسفل على النحو التالي:
#footer {background: url (صور/footer.jpg) ؛ الارتفاع: 71px ؛ الهامش-أعلى: 191px ؛}#footer p {font-family: arial ، helvetica ، sans-serif ؛ font-size: 12px ؛ color:#959595 ؛ position: margin-top: 30px ؛ A {background: url (صور/متابعة.نستخدم tooter.jpg كخلفية تذييل ثم إضافة بعض أنماط النص.
للحصول على رابط صورة الطيور في الأسفل ، استخدمنا نفس الطريقة من قبل ، باستخدام التأثير العائم لوضعها.
التأثير النهائي
تنزيل الملف (0،7 ميغابايت)
حتى الآن انتهى. لا أعرف إذا كنت تفهم ذلك. إذا كنت لا تفهمها ، فاترك رسالة. إذا كنت لا تفهم ذلك ، فسوف أضيفه وأعدله مرة أخرى ، هاها ~