تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: TP-إنشاء موقع خطوة بخطوة


الصفحة السابقة

وأخيرا ، نحن هنا. إنه فصل خاص ، يختلف تمامًا عما قرأته حتى الآن. في الواقع ، هذا هو ما أسميه "TP" (العمل التطبيقي). الآن ، لا يمكنك فقط قراءة فصولي نصف نائم ، سوف تضطر إلى العمل معي في نفس الوقت.

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

نمذجة التصميم


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

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

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

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

css img float

الخطوة الأولى هي تخطيط التصميم ، ليكون للموقع هدف و علينا تحقيقه. من هنا ، هناك احتمالان:

  • أما أنك مصمم جرافيك (أو تعرف احدا) اعتاد على تخيل التصميمات ، باستخدام برنامج مثل Photoshop ؛
  • أو إذا لم تكن مبدعًا للغاية ، فأنت تفتقر إلى الإلهام ، وفي هذه الحالة ، سوف نسعى إلى إلهامك على مواقع الويب مثل https://html5up.net/ ، والتي تقدم لك أفكارًا للتصميم والتي يمكنه حتى أن يعطيك كود HTML / CSS جاهزًا!

من جهتي ، ناشدت مصمم جرافيك ، فان جيونغ ، الذي قدم لي التصميم (الذي أعجبني كثيرًا!) يمكنك أن تراه في الشكل التالي.

css img float

نموذج الموقع الذي سنحققه

تصميم النموذج: فان جيونغ

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

تحميل الصور والخطوط

لم يبقى لنا سوى ان نقوم بانشاء هذا الموقع! سنقوم به على مرحلتين:

  1. سنقوم ببناء هيكل الصفحة HTML
  2. ثم سنقوم بتنسيقه وتخطيطه باستخدام CSS .

هيا ، الى العمل!

تنظيم المحتوى في HTML


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

لإنشاء هذا الهيكل ، سنستخدم علامات HTML مختلفة:

  • العلامات الهيكلية HTML5، ونحن نعرف:<header>، <section>، <nav> الخ .
  • علامة شاملة <div>عندما لا توجد علامة هيكلة مناسبة.

كيف أعرف العلامة التي يجب استخدامها؟

الأمر متروك لك. يفضل استخدام علامة ذات معنى أن من المنطقي (مثل علامات الهيكلة <header> ، <section>، <nav> ) ولكن إذا لم ترى في ان احداهن مناسبة لك ، اختر القالب الشامل <div>.

انظر إلى الشكل التالي لترى ما أقترحه لك كهيكل.

css img float

نموذج مقطع إلى أقسام مختلفة

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Zozor - Carnets de voyage</title>
    </head>
    
    <body>
        <div id="bloc_page">
            <header>
                <div id="titre_principal">
                    <div id="logo">
                        <img src="images/zozor_logo.png" alt="Logo de Zozor" />
                        <h1>Zozor</h1>    
                    </div>
                    <h2>Carnets de voyage</h2>
                </div>
                
                <nav>
                    <ul>
                        <li><a href="#">Accueil</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">CV</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </header>
            
            <div id="banniere_image">
                <div id="banniere_description">
                    Retour sur mes vacances aux États-Unis...
                    <a href="#" class="bouton_rouge">Voir l'article <img src="images/flecheblanchedroite.png" alt="" /></a>
                </div>
            </div>
            
            <section>
                <article>
                    <h1><img src="images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie" />Je suis un grand voyageur</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel enim mi, in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis. Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis. Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc posuere pellentesque non at eros. Suspendisse non lectus lorem.</p>
                    <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem. Quisque mollis ullamcorper diam vel faucibus. Vestibulum sollicitudin facilisis feugiat. Nulla euismod sodales hendrerit. Donec quis orci arcu. Vivamus fermentum magna a erat ullamcorper dignissim pretium nunc aliquam. Aenean pulvinar condimentum enim a dignissim. Vivamus sit amet lectus at ante adipiscing adipiscing eget vitae felis. In at fringilla est. Cras id velit ut magna rutrum commodo. Etiam ut scelerisque purus. Duis risus elit, venenatis vel rutrum in, imperdiet in quam. Sed vestibulum, libero ut bibendum consectetur, eros ipsum ultrices nisl, in rutrum diam augue non tortor. Fusce nec massa et risus dapibus aliquam vitae nec diam.</p>
                    <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue. Sed auctor fringilla quam quis porttitor. Praesent vitae dignissim magna. Pellentesque quis sem purus, vel elementum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas consectetur euismod urna. In hac habitasse platea dictumst. Quisque tincidunt porttitor vestibulum. Ut iaculis, lacus at molestie lacinia, ipsum mi adipiscing ligula, vel mollis sem risus eu lectus. Nunc elit quam, rutrum ut dignissim sit amet, egestas at sem.</p>
                </article>
                <aside>
                    <h1>À propos de l'auteur</h1>
                    <img src="images/bulle.png" alt="" id="fleche_bulle" />
                    <p id="photo_zozor"><img src="images/zozor_classe.png" alt="Photo de Zozor" /></p>
                    <p>Laisse-moi le temps de me présenter : je m'appelle Zozor, je suis né un 23 novembre 2005.</p>
                    <p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie afin que vous sachiez qui je suis réellement.</p>
                    <p><img src="images/facebook.png" alt="Facebook" /><img src="images/twitter.png" alt="Twitter" /><img src="images/vimeo.png" alt="Vimeo" /><img src="images/flickr.png" alt="Flickr" /><img src="images/rss.png" alt="RSS" /></p>
                </aside>
            </section>
            
            <footer>
                <div id="tweet">
                    <h1>Mon dernier tweet</h1>
                    <p>Hii haaaaaan !</p>
                    <p>le 12 mai à 23h12</p>
                </div>
                <div id="mes_photos">
                    <h1>Mes photos</h1>
                    <p><img src="images/photo1.jpg" alt="Photographie" /><img src="images/photo2.jpg" alt="Photographie" /><img src="images/photo3.jpg" alt="Photographie" /><img src="images/photo4.jpg" alt="Photographie" /></p>
                </div>
                <div id="mes_amis">
                    <h1>Mes amis</h1>
                    <div id="listes_amis">
                        <ul>
                            <li><a href="#">Pupi le lapin</a></li>
                            <li><a href="#">Mr Baobab</a></li>
                            <li><a href="#">Kaiwaii</a></li>
                            <li><a href="#">Perceval.eu</a></li>
                        </ul>
                        <ul>
                            <li><a href="#">Belette</a></li>
                            <li><a href="#">Le concombre masqué</a></li>
                            <li><a href="#">Ptit prince</a></li>
                            <li><a href="#">Mr Fan</a></li>
                        </ul>
                    </div>
                </div>
            </footer>
        </div>
    </body>
</html>             
خصوصية صغيرة: كما ترى ، يتم وضع جميع محتويات الصفحة في علامة كبيرة <div>لها id يسمى bloc_page (تسمى أحيانًا main_wrapper باللغة الإنجليزية) . تتضمن هذه العلامة كل المحتوى ، مما سيتيح لنا تعيين أبعاد الصفحة بسهولة وتوسيط موقعنا على الشاشة.
بالنسبة للباقي ، لا توجد صعوبة كبيرة. لاحظ أنني لم أفكر بالضرورة في جميع العلامات من الوهلة الأولى: من خلال انشاء التصميم في CSS ، بدا لي في بعض الأحيان أنه كان من الضروري تضمين جزء من علامات كتلة <div> لمساعدتي في تحقيق التصميم.

في الوقت الحالي ، كما يمكنك أن تتخيل ، الموقع ليس جيدًا جدًا .تستطيع أن ترى النتيجة الحالية في الشكل التالي.

css img float

ظهور الموقع يتكون فقط من HTML

في CSS سيتم تشغيل السحر الآن.

تنسيق CSS


تصبح الأمور أكثر تعقيدًا عندما تصل إلى CSS في الواقع ، يتطلب الأمر عملًا (وأحيانًا خدعة صغيرة) للحصول على نتيجة أقرب إلى النموذج. أقول "الاقتراب" لأنك لن تحصل أبدًا على نتيجة 100%

ضعها في الاعتبار جيدًا: الهدف هو الحصول على أقرب عرض ممكن ، دون السعي إلى الكمال. حتى إذا حصلت على "الكمال" في متصفح ، يمكنك التأكد من وجود اختلافات في متصفح آخر (أقدم) أو على جهاز آخر غير متصفحك. لذلك سنبذل قصارى جهدنا وسيعمل بالفعل ، سوف ترى.

لتشكيل التصميم ، سأشرع في عدة خطوات. سأعتني بما يلي ، بهذا الترتيب:

  1. الخطوط المخصصة.
  2. تعريف الأنماط الرئيسية للصفحة (عرض الموقع ، الخلفية ، اللون الافتراضي للنص).
  3. الرأس و الوابط.
  4. لافتة (تمثل جسر سان فرانسيسكو).
  5. القسم الرئيسي من نص الصفحة ، في الوسط.
  6. تذييل (footer)
الخطوط المخصصة

لأغراض التصميم ، استخدم مصمم الجرافيك ثلاثة خطوط:

  • Trebuchet MS(الخط الحالي) ؛
  • BallparkWeiner
  • Day Roman

ستجد هذه الخطوط في الملف الذي قمت بتنزيله أعلى قليلاً. إذا لم يتم ذلك بعد ، فإني أشجعك بشدة على تنزيله.

معظم أجهزة الكمبيوتر مجهزة ب Trebuchet MS (على الرغم من أنها ليست كلها بالضرورة ، يمكننا تنزيله) من ناحية أخرى ، الخطان الآخران أصليان بعض الشيء وهما بالتأكيد غير موجودين على أجهزة الكمبيوتر الخاصة بزائرك. سنقوم بتنزيلها.

كما تعلمون ، عليك تقديم عدة إصدارات من هذه الخطوط لمتصفحات مختلفة. Dafontيقدم فقط .ttfللتحميل. في المقابل ، FontSquirrel يقدم مولد الخط لاستخدامه في CSS3 مع @font-face: أنت ترسل له واحد .ttf، والأداة تحول الملف في جميع الأشكال الأخرى اللازمة وحتى يوفر لك كود CSS جاهزا للاستخدام!

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


@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}             

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

تعريف الأنماط الرئيسية

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


body
{
    background: url('images/fond_jaune.png');
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
}

#bloc_page
{
    width: 900px;
    margin: auto;
}

section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}             

مع #bloc_page الكتلة التي تحتوي على الصفحة بأكملها ، قمت بتعيين الحدود بعرض 900 بكسل. مع الهوامش التلقائية (auto)، التصميم سيكون في وسط الصفحة.

إذا كنت ترغب في إنشاء تصميم يناسب أبعاد شاشة الزائر ، فقم بتعيين عرض بالنسبة المائوية بدلا من بكسل.

لقد استخدمت خاصية CSS text-transform: uppercase; (التي لم نرها من قبل) للتأكد من أن عناويني تكون بالأحرف الكبيرة دائمًا. هذه الخاصية تغير النص بشكل فعال إلى أحرف كبيرة (يمكنك أيضًا القيام بالعكس ب lowercase ). لاحظ أنه يمكن أيضًا كتابة العناوين مباشرة بحروف كبيرة في كود HTML

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

css img float

الجزء السفلي والحدود من الصفحة تبدأ في الظهور

الرأس و روابط العناوين

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


header
{
    background: url('images/separateur.png') repeat-x bottom;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#titre_principal
{
    display: flex;
    flex-direction: column;
}

#logo
{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

#logo img
{
    width: 59px;
    height: 60px;
}

header h1
{
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
    margin: 0 0 0 10px;
}

header h2
{
    font-family: Dayrom, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}             

قمنا بإنشاء تمييز بين الرأس وجسم الصفحة من خلال صورة خلفية. و تم وضع العناصر مع flexbox: هناك عدة مستويات من التداخل ، وبعضها يتم وضعه عموديًا و البعض الآخر في وضع أفقي. و وقع تخصيص الخطوط والأبعاد.

روابط العناوين

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


nav ul
{
    list-style-type: none;
    display: flex;
}

nav li
{
    margin-right: 15px;
}

nav a
{
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
}

nav a:hover
{
    color: #760001;
    border-bottom: 3px solid #760001;
}             
وما هو جديد هو استعمال list-style-type: none; ، التي تزيل نقاط القائمة. يتم وضع كل عنصر في القائمة ( <li>) في Flexbox ، مما يسمح لنا بوضع الروابط جنبًا إلى جنب كما يحلو لنا.

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

يوضح الشكل التالي النتيجة التي حصلنا عليها مع أحدث إضافات CSS.

css img float

تم تنسيق الرأس

اللافتة

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

الشعار مثير للاهتمام بأكثر من طريقة:

  • يتكون من زوايا دائرية.
  • الوصف مكتوب على خلفية شفافة قليلاً ؛
  • يتكون الزر " Voir l'article" فقط باستعمال الكود CSS ، مع زوايا مستديرة ؛
  • الظل يعطي حجم للافتة.

إليك الكود الذي استخدمته لإنشاء الشعار بالكامل:


#banniere_image
{
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    background: url('images/sanfrancisco.jpg') no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}

#banniere_description
{
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 5px 5px;
    width: 99.5%;
    height: 33px;
    padding-top: 15px;
    padding-left: 4px;
    background-color: rgba(24,24,24,0.8);
    color: white;
    font-size: 0.8em;
    
}

.bouton_rouge
{
    height: 25px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    background: url('images/fond_degraderouge.png') repeat-x;
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}

.bouton_rouge img
{
    border: 0;
}              

هذا الكود تقني وغني بوظائف CSS. ربما هذا هو الجزء الأكثر دقة لتحقيقه في هذه الصفحة.

قد تلاحظ أنني اخترت عرض صورة الجسر كصورة خلفية في كتلة <div> للافتة.

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

ألا يجب أن يكون الزر في أسفل يمين الصفحة؟

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

هذه هي تقنية مفيدة وقوية بشكل خاص في تحقيق التصميم ، تذكر ذلك!

آخر التفاصيل: بالنسبة لأسطورة الشعار ، اخترت استخدام الشفافية مع الترميز RGBa بدلاً من الخاصية opacity في الواقع ، بالنسبة ل opacity من شأنها أن تجعل جميع محتويات الكتلة شفافة ، بما في ذلك الزر في الداخل. لقد وجدت أنه من الأفضل جعل لون الخلفية شفافًا بدلاً من الكتلة بأكملها.

والنتيجة لطيفة إلى حد ما (الشكل التالي).

css img float

لافتة مهيأة

لجعل التدرج اللوني للزر ، استخدمت صورة خلفية تمثل التدرج وقمت بتكرار هذه الصورة أفقياً. كنت على دراية بوجود خاصية CSS3 linear-gradient التي تسمح لك بأداء التدرجات دون الحاجة إلى اللجوء إلى صورة خلفية. استخدامه معقد قليلاً ، اخترت عدم استخدامه في هذا المثال ، ولكن يمكنك أن تقرأ عنه إذا كنت ترغب في ذلك!

الجسم الصفحة
الجسم في وسط الصفحة هو في حالتنا علامة واحدة ( <section> ) ولكن قد يكون هناك عدة مكونات ، بالطبع.

يتم تحديد موقع كتلة "À propos de l'auteur" من خلال Flexbox. اخترت تقسيم حجم العناصر مع الخاصية flex، مما يسمح للمقالة والكتلة الموجودة على الجانب بموازنة عرضهما. نحن نلعب بزوايا وظلال مدورة ، ونعدل قليلاً هوامش وأبعاد النص ، وهنا نذهب!


section
{
    display: flex;
    margin-bottom: 20px;
}

article, aside
{
    text-align: justify;
}

article
{
    margin-right: 20px;
    flex: 3;
}

.ico_categorie
{
    vertical-align: middle;
    margin-right: 8px;
}

article p
{
    font-size: 0.8em;
}

aside
{
    flex: 1.2;
    position: relative;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
}

#fleche_bulle
{
    position: absolute;
    top: 100px;
    left: -12px;
}

#photo_zozor
{
    text-align: center;
}

#photo_zozor img
{
    border: 1px solid #181818;
}

aside img
{
    margin-right: 5px;
}             
كانت الصعوبة الصغيرة هنا هي وضع السهم بنجاح على يسار كتلة "About the Author" <aside> لإعطاء تأثير 3D. مرة أخرى ، أفضل صديق لدينا هو تحديد المواقع المطلقة. هذه التقنية هي نفسها: أضع الكتلة <aside>في موضع نسبي (بدون تبديل) ، مما يسمح لي بوضع صورة السهم بشكل مطلق بالنسبة للكتلة <aside> (وليس مقارنة بالصفحة بأكملها). من خلال اللعب على إزاحة الصورة ، يمكنني أن أضعها بدقة حيث أريد ، بكسل بالبكسل (الشكل التالي)!
css img float

نص الصفحة منسق

التذييلFOOTER
لم يتبقى لنا سوى التذييل لتنسيقه. إنه يتكون من ثلاث مجموعات فرعية قمت بتحقيقها من قبل من <div>أعطيتها لتحديدها idبشكل أفضل.يتم وضع هذه الكتل مع Flexbox بجانب بعضها البعض.

footer
{
    display: flex;
    background:  url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top;
    padding-top: 25px;
}

footer p, footer ul
{
    font-size: 0.8em;
}

footer h1
{
    font-size: 1.1em;
}


#tweet
{
    width: 28%;
}

#mes_photos
{
    width: 35%;
}

#mes_amis
{
    width: 31%;
}

#mes_photos img
{
    border: 1px solid #181818;
    margin-right: 2px;
}

#listes_amis
{
    display: flex;
    justify-content: space-between;
    margin-top: 0;
}

#mes_amis ul
{
    list-style-image: url('images/ico_liensexterne.png');
    padding-left: 2px;
}

#mes_amis a
{
    text-decoration: none;
    color: #760001;
}             

ميزتان صغيرتان موجودتان في تذييل الصفحة:

  • لقد استخدمت ميزة الخلفية المتعددة CSS3 ، والتي سمحت لي بعمل الفاصل بين الجسم وتذييل الصفحة. يتكون من ثلاث صور: الفاصل ، السهم الصغير للأعلى والتدرج البسيط.
  • لقد قمت بتغيير النقطة في قائمة " Mes amis" ، أسفل اليمين ، باستخدام الخاصية list-style-image التي سمحت لي باستخدام صورة مخصصة بدلاً من النقاط. هناك العديد من خصائص CSS المحددة مثل هذه ، ولا يمكننا رؤيتها جميعًا واحدة تلو الأخرى في هذه الدورة ، لكن الآن ، بعد أن أصبحت معتادًا في CSS ، لن تواجه مشكلة في تعلم كيفية استخدامها فقط عن طريق القراءة في المرفق يعدد خصائص CSS الرئيسية .

وها قد ، انتهى تصميمنا (الشكل التالي)!

css img float

تذييل الصفحة مهيأ

آه ، تعتقد أنك انتهيت؟ لسوء الحظ ، لا يزال هناك القليل من العمل: يجب علينا اختبار موقعنا على متصفحات مختلفة. من الناحية المثالية ، من الأفضل أن تفعل ذلك عندما يكون التصميم في مكانه. لذا افتحه على متصفحات أخرى للتأكد من أن كل شيء في محله!

css img float

عرض الموقع أيضًا على chrome

تحقق من صحة الموقع

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

تذكر ، وضعت W3C المعايير. من الضروري احترامها ، للتأكد من أن جميع مواقع الويب تتحدث "اللغة" نفسها.

هناك مدقق لـ HTML ومدقق لـ CSS (لوضعه في قائمة المواقع المفضلة لديك)مدقق CSS يحتوي بعض الأخطاء (bugs) لذلك لن نستعمله. من ناحية أخرى ، فإن أداة التحقق من صحة HTML ستكون مهمة للغاية بالنسبة لنا: ها هو عنوانها http://validator.w3.org .

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

  • العنوان (URL) ؛
  • إرسال الملف .html؛
  • نسخ ولصق رمز HTML.

في الوقت الحالي ، لا يتوفر موقع الويب الخاص بنا حتى الآن على الويب ، لذلك لا يحتوي على عنوان URL. لذلك فإن الأفضل هو إرسال الملف .htmlالذي أنشأناه أو نسخ ولصق رمز HTML مباشرةً.

إذا أرسلت رمز HTML الخاص بك وكل شيء على ما يرام ، فسوف يجيب المدقق على الرد بالرسالة الموضحة في الشكل التالي.

css img float

يعلمنا مدقق W3C بأنه لا يوجد خطأ في صفحتنا

في هذه الحالة ، فهذا يعني أن كل شيء على ما يرام وأنك قمت ببناء صفحتك!

لسوء الحظ ، سيحدث غالبًا أن لديك أخطاء. في هذه الحالة ، لا داعي للذعر مثل هذا:

النجدة ... صفحة الويب الخاصة بي غير صالحة ، ولن أخرج ، فأنا محاط بالأخطاء ، وأفعل شيئًا ما!

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

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

ما الهدف من تصحيحها إذن؟

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

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

فيما يلي قائمة بالنصائح التي يمكن أن تساعدك في حل الأخطاء التي قد يتم الإبلاغ عنها إليك عاجلاً أم آجلاً:

  • كل ما تكتبونه من النصوص ينبغي أن تكون عموما في علامات الفقرة. يحظر وضع النص مباشرة بين العلامات <body></body>دون أن يحيط بها العلامات الشهيرة <p></p>. ينطبق هذا أيضًا على فواصل الأسطر <br />، والتي يجب أن تكون داخل الفقرات. هذا خطأ شائع جدا للمبتدئين.
    
    <p>Ceci est un texte correctement placé dans un paragraphe.
    <br />
    Les balises <br /> doivent se trouver à l'intérieur d'un paragraphe, ne l'oubliez pas</p>
    
    Ceci est un texte en-dehors d'un paragraphe. C'est interdit.
    <br />              
    
  • يجب أن تحتوي جميع صورك على سمة alt تشير إلى ما تحتويه الصورة. إذا ، عن طريق الصدفة ، صورتك مزخرفة بحتة (لا يمكنك العثور على وصف لها) ، يُسمح لك بوضع أي شيء كقيمة للسمة alt.
    
    <img src="photo.jpg" alt="my photo" />
    <img src="deco.png" alt="" />
    
  • يجب أن تكون علاماتك مغلقة بالترتيب .
    
    <!-- علامات مغلقة بالترتيب  -->
    <p>Texte <em>important</p></em>
    <!-- - علامات ليست مغلقة بالترتيب  -->
    <p>Texte <em>important</em></p>
    
    ضع هذا المخطط في الاعتبار ، العديد من المبتدئين يرتكبون هذا الخطأ.
  • إذا كانت الروابط الخاصة بك تحتوي على &، فيجب استبدالها بالكود &لتفادي الخلط بين المتصفح.
    
    <!--رابط سيء -->
    <a href="http://www.site.com/?jour=15&mois=10&an=2000">
    
    <!--رابط جيد- -->
    <a href="http://www.site.com/?jour=15&mois=10&an=2000">      
    
  • أخيرًا تحقق من أنك لم تستخدم العلامات القديمة في HTML5 مثل <frame>، العلامة <marquee>...

سيقول المدقق "Element XXX undefined" أو "لا توجد سمة XXX ".

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

الخلاصة


حاول إعادة الموقع دون الحل أمامك الآن! سوف يستغرق الأمر بعض الوقت ، ولن تنجح في البداية ، ولكن لا داعي للذعر: بالمثابرة ، ستنجح في النهاية!