مرحبا ، في محاضرة اليوم، سنتحدث عن تصميم النص على صفحاتك. من افضل وأسهل الطرق لجعل صفحتك تبدوا مختلفة قليلاً
عن الشكل الافتراض القياسي هو أن تفكر كيف قد تغير تصميم نصك ليترك أكبر أثر. هناك الكثير و الكثير من الخيارات
والتي سنتحدث عن بعضها اليوم. وإحدى تلك الخيارات هو أخذ نوعية الخط
بشكل أساسي بعين الاعتبار. بعض الأشياء التي يمكن تنسيقها نوع الخط وشكله، وتنوع أشكال الخط وحجمه. ويمكن التفكير في تنسيق لون وخلفية خطك. كما يمكننا التحدث عن المحاذاة أيضًا. وأخيرا سنتحدث بإيجاز عن ارتفاع السطر. ويمكن القيام بكافة الأربعة أشياء هذه فقط لتوضيح أو التأكيد على الأشياء المرجوة المختلفة
التي تاّمل ان يعكسها أسلوبك. لذلك دعونا أولاً نتحدث عن نوع الخط. مجموعات الخطوط هي عبارة عن
أنواع مختلفة من النصوص. فإذا استخدمت محرر النصوص (Word) من قبل ،
فأنت ذهبت الى نوع الخط و تختار (Arial) او (Wingdings)
أو جميع هذه الأنواع المختلفة من الخطوط. يمكنك أن تفعل نفس الشئ على صفحة الويب الخاصة بك. لذا سأعرض عليكم مثالين هنا من الأمثلة الأكثر شيوعًا. هناك أنواع(Helvetica) او(Courier) أو
(Courier New) أو(Comic Sans) أو (cursive) أو (Verdana). حاولت وضع نوع الخط هنا على الشريحة ، ولكن قد يكون من الصعب عليك رؤيتها. وقد فعلت ذلك بقصد،
حيث أن ما يبدو لك واضحًا أثناء التصميم، لا يبدو دائمًا واضحًا للأشخاص الذين ينظرون إلى صفحتك. لذا فاخترت هذه الكلمات المحددة لأنني أردت أن أريكم أن بعضها تكون كلمة واحدة مثل Helvetica. بينما تتكون Comic Sans MS من عدة كلمات،
لذا فكان ينبغي على وضعها داخل علامات الاقتباس. حسنًا لذا كيف يعمل ذلك، مرة أخرى،
قم باستخدام القاعدة الخاصة بك. لديك المحددات الخاصة بك،
وكذلك الخاصية (الميزة) والقيمة الخاصة بك. لذا في هذه الحالة، كما أشرت، كلما رأيت عنوان h1، لا تستخدم العنوان الافتراضي للمتصفح،
بل أريدك أن تستخدم الخط Arial. لذا، فليتغير الخط قليلاً ليشبه هذا المثال المذكور هنا. والاّن، ليس كل متصفح فردي يدعم كل شئ. وقد رأينا هذا حتى مع HTML5. تقوم بعض المتصفحات بدعم بعض النصوص،وبعضها لا. وبالطريقة نفسها، تدعم بعض المتصفحات
بعض الخطوط وبعضها لا يدعمها أيضًا. لذا، ما يمكنك فعله هو توفير بدائل. في هذا المثال، أغطيت المتصفح ثلاثة بدائل مختلفة لاستخدامها. وأقل بشكل أساسي، عندما تصل لعلامة h1، أريدك أن تستخدم خط Courier . ولكن إن لم يكن لديك خط Courier ،
امض قدمًا، واستخدم خط Impact . إن لم يكن هذا الخط متاحًا لديك،
امضِ قدمًا واستخدم خط Arial. والاّن، من إحدى ألأساله التي قد تطرحها على نفسك، ماذا إن لم يمكن لديك أى خط من هذه الخطوط الثلاثة؟ ليس هناك أى من هذه الخطوط Courier, Impact, or Arial. حسنا ، إذا كنتم تتذكرون ، عندما تحدثنا لأول مرة عن أوراق التصميم المتتالية،
ذكرنا أنه إذا قمت بإعطائها قاعدة و ولا يمكنه دعم ذلك، ستتم العودة دائمًا للمتصفح الافتراضي. لذا لا داعي للقلق بشأن اختفاء الخط لأنك قمت بتصميم مجموعة خطوط سيئة. سيحدث ذلك دائمًا. لذا عندما تختار مجموعة الخطوط الخاصة بك، هناك بعض الأشياء التي ينبغي عليك وضعها في الاعتبار. أول شئ قد يبدو أكثر أهمية، هو أن بعض الخطوط أكثر من غيرها سهولة في الاستخدام. هناك فئتان في الأساس. لديك خط serif وخط sans-serif. إن فئة خطوط serif هى تلك الفئة
التي تحتوي على نوع من الحواف الرائعة على الجانب والتي كنت تستخدمها عندما كنت تتعلم الخط أو ما شاباه ذلك. بينما فئة خطوط sans-serif تكون أنيقة جدًا،
ولا توجد قوائم منبثة للأسفل أو أي شيء من هذا القبيل. لذا عندما يحين وقت تصفح شخص ما لصفحتك، أحاول التفكير في المصطلح الصحيح نوعًا ما، عندما يريدون الدخول غلى صفحتك وجعلها تبدو أكبر. من الممكن أن تصبح فئة خطوط Serif عشوائية في حقيقة الأمر،
لذا فتجنبها قدر المستطاع. أنا شخصيًا لا أستخدم هذه الخطوط المخصصة بنفسي، ولكني لم أكن أبدًا هذا الشخص الذي يبدو فنانًا. لذا غن قررت أن يكون لك الخط الخاص بك أو أو أى نوع من خطوط وقع الويب الاّمنة، ستحتاج إلى استخدام شيئًا خاصًا هنا يطلق عليه قاعدة واجهة الخط. وما نفعله، هو انك يمكنك أن ترى في المثال الأول، تقول حسنًا سأقوم بتحديد واجهة الخط الخاص بي. وسأطلق عليه mySpecialFont. أى الخط الخاص بس. يمكنك أن تطلق عليه أى اسم تريده، وستحتاج بعد ذلك إعطاءه مصدر. حتى يكون هذا المصدر جديدًا لم تره من قبل. لا نستخدم href، نحن لا نستخدم مصدرًا، بل نستخدم URL. كما يوضح عنوان URL، أين يمكنك أن تجد الملف الذي يحدد الخط الخاص بك. وبمجرد القيام بذلك، بمجرد كتابة قاعدة واجهة الخط الخاص بك، في باقي ورقة التصميم الخاصة بك،
يمكنك المضِ قدمًا والرجوع إليها. لذا فالاّن ستستخدم mySpecialFont.
في كل مرة تستخدم فيها خط h1. لذا فلنتحدث الاّن عن نمط الخط. إنها كلمة ليست باليسيرة كما تتوقع، ولكن سنتحدث ببساطة عن إذا ما كنت تريد أن يبدو خطك طبيعيًا، بعدمًا كان افتراضيًا، أو إذا ما كنت تريده أن يكون مائلاً؟ أو أنك تريده مائلاً بشكل اّخر oblique،
بعدما كان فقط مائل بشكل مختلف كخط Italic. إذا فالخط العادي موجود بغض النظر عن أي شئ. إذا كتب شخص اّخر ورقة تصميم، وكانت كلها مائلة مخط Italic، فعندما قد تقول لا سأكتب عليها واجعل الخط طبيعيًا. ستجد أن الخط المائل Italic
هو نوع معين من أنواع الخطوط المائلة بشكل أسساي لخطك. كما أن خط oblique المائل تستفيد منه
عندما تريد أن تكون حقُامميزًا بشكل أكبر وتحدد بدقة الزاوية التي تريد أن يميل نحوها نصك. وبخصوص متغير الخط، يدنا خياران. لدينا أحرف عادية، وأحرف صغيرة. يقوم الناس باستخدام ذلك كثيرًا عندما يحاولون أن يبدو كل شيء متسقًا وساحر لحد ما. وقد ذكرت هنا مرة أخرى، عندما أستخدم h1،
أريد أن يكون متغير الخط الخاص بي صغيرًا. فالاّن عندما تلقي نظرة على النص الخاص بي،
تجد أن نصي h1 يكون في الجزء الأسفل، سجلت اختلافات صغيرة. ولكن عندما يعرضه المتصفح،
سوف يعرضه كأحرف صغيرة. لذا فقد يمنعك ذلك من الرجوع لتذكر تغيير نصك بأكمله لأحرف كبيرة أو صغيرة. بصرف النظر عن الطريقة التي تكتبه بها،
سيقوم المتصفح بعرضه دائمًا بحروف كبيرة. وسنتحدث الاّن عن حجم الخط كثيرًا
على مدار هذه الدورة التدريبية بأكملها، وفي دورات أخرى سنقدمها أيضًا، كالتصميم السريع، لأنها هناك حقًا طرقًا مختلفة للقيام بذلك. لذا دعونا نبدأ بالأساسيات. ولديك خيارات، فيمكنك استخدام حجم خط صغير جدًا جدًا، وصغير جدًا، وصغير وأصغر. لا أحب هذه الأشياء كثيرًا، لأنها لا تعكي حقًا إطارًا مرجعيًا. يمكن أن يكون حج الخط متوسطًا، ومن الممكن أن يكون كبيرًا،
وكبيرًا جدًا، وكبيرًا جدًا جدًا xx وقد يكون أكبر. والقليل جدًا من الناس يستخدم هذه الخيارات، لكنها خيارات موجودة لذا أردت أن أخبرك عنها. وبدلاً منها، فإن العديد من الناس يستخدمون البكسل. لذا، سأقوم بتضمين هذا النوع اللطيف من الجداول على صفحة الويب والتي تقوم بربط عدد البكسل بالبوصة،
وعدد البكسل بوحدات البكسلpecos حتى يمكنك أن تستشعر به. لكن معظم الناس ينهجون نهج 20 بكسل، 35 بكسل، 80 بكسل. وهذه نظرة متفحصة للغاية فهو بمثابة شئ يستطيع الناس أن يشعروا به بالشكل الذي يجب أن يبدو عليه. ومع ذلك، فإنني أميل إلى استخدام النسب المئوية بدلاً من ذلك. فاستخدام النسب المئوية سيسمح لنا بتغيير حجم الخط
حيث أننا سنقوم بتغيير حجم الشاشة بشكل أكثر سهولة. لذا إذا قلت استخدم 100%، سيكون هذا هو الحجم الافتراضي. إذا قلت استخدم 110%، سيكون أكثر بعض الشئ. إذا كنت ستستخدم 75%، سيكون ثلاثة أرباع الحجم. بعد ذلك، لنتحدث عن اللون ولون الخلفية. إن اللون هو السمة التي تميز المقدمة، وهى التي تمنح النص نفسه فقط سحرًا. حسنًا لون الخلفية هو لون خلفية الخط الذي ننظر إليه. وحسب نوع النص الذي بتصميمه، يمكن أن يبدو مختلفًا تمامًا. لذا، فقد قمت بقاعدة واحدة لم ترها من قبل. سأمضي قدمًا وأقوم بتصميم اثنين من المحددات المختلفة. سأقوم بتصميم h1 وكذلك عنصر الامتداد Span. لذا إذا وضعت فاصلة هناك، وجدتها هنا، بين H1 وعنصر الامتداد SPAN ،
يمكنك وضع العديد من الفواصل كما تريد و وكتابة أكبر عدد مكن من المحددات كيفما تشاء. في هذه الحالة، قلت أنني أريد أن يكون اللون الخاص بي أرزق، وأن يكون لون خلفيتي رمادي. وإن لم تكن متاكدًا من مصدر هذه الأرقام الغريبة، فاذهب وشاهد فيديو الألوان. سوف يشرح لك كل شئ هناك. لذا فقد مضيت قدمًا وفي HTML الخاص بي،
لدى ألوان في علامة H1، والكلمة تكون مضمنة داخل علامة الامتداد SPAN. وما أريدك أن تلاحظه هو أن H1، وعنصر الكتلة، ولون الخلفية يغطي عرض الصفحة بأكمله. لكن بالنسبة لعنصر الامتداد Span، والعناصر المضمنة، فإن لون الخلفية يدور فقط حول العنصر والنص نفسه. دعنا نتحدث بعد ذلك عن محاذاة النص. إن محاذاة النص أمر بسيط. سنتحدث بعد ذلك عن أحد أسهل الأشياء
التي يمكنك القيام بها باستخدام HTML. وستكون حقًا سعيدًا بذلك. حيث أنك عندما تقرر أن تقوم بمحاذاة أشياء أخرى،
سيكون الأمر صعبًا للغاية وستريد فقط وضع كل شئ في النص. لذا فالخيارات التي لديك عندما تقوم بمحاذاة النص،
هى أن يمكنك استخدام الخيار "يسار"، والذي يعني فقط محاذاة النص إلى اليسار. وهذا ما نقوم به بالفعل. من الممكن أن يكون لديك الخيار "يمين"،
والذي يعني محاذاة كل شئ لليمين، والوسط، والتبرير. قم بتوسيط كل شئ على طول منتصف هذا القسم. يحاول خيار justify نشره لاستخدام أكبر مساحة ممكنة. لذا اسنحوا لي أن أريكم بعض الأمثلة
لأن هذه حقًا هى أفضل طريقة لفهم ما الذي يجري هنا؟ لدى محاذاة إلى اليسار. كل شئ يتجمع في الجانب الأيسر من الشاشة. واستخدمت الخيار الثاني
وهو أنني استخدمت النص في السطر "اليمين". ويمكنك أن ترى كل شئ يتجمع في اليمين، الأمر يبدو حقًا غريبًا. هناك أسباب قلة لاستخدامك لهذا. ما لم يكن لديك شئ اّخر سيوضع في الجانب هنا في المنتصف. والخطوة التالية التي سنقوم بها هى "المركز" أو التوسيط. يستخدم الناس "الوسط" قليلاً جدًا. إنهم يستخدمونه كثيرًا لحد ما،
لكنها طريقة تبدو لطيفة بعض الشئ لتقسيم النص وجعله يبدو مختلفًا بعض الشئ. لذا من الصعب جدًا شرح خيار Justify،
وعندما تنظر إليه لأول مرة، قد لا تستوعب ما يحدث. ولكن مع خيار Justify، يمنحك المتصفح بعض المساحات الإضافية لمساعدتك على نشرها فيكون لديك نفس العرض تمامًا في كل الصفحة. لذا سأريكم خيار Justify عند استخدامه في الجانب الأيسر. وأعتقد أن هذه هى أفضل طريقة لمعرفة الفرق إلى حد ما، هو أنك ليس لديك في الأساس أى مساحة فارغة هنا. لقد قاموا بنشرها هنا،
لذلك فليس هناك مكان به مسافات فارغة كثيرة. سنتحدث بعد ذلك عن ارتفاع الخط، و كما يختلف ارتفاع السطر في حقيقة الأمر
حيث أنه لا يؤثر على الخط نفسه. كما لا يؤثر على نصك. إنه يؤثر على مقدرا المساحة التي تحيط بالنص الخاص بك. ربما استخدم بعضكم برنامج WORD من قبل، يمكنكم المضي قدمًا وتحديد مقدر المسافة بين السطور. ربما تريدوا أن تكون المسافة سطرًا واحدًا،
أو سطرًا ونصف، أو مسافة مضاعفة. هذا ما نتحدث عنه هنا. لذا، ذكرت في مثالي الأول ان ارتفاع السطر يساوى 50%. وفي المثال التالي، ذكرت أن ارتفاع السطر يساوي 200%. ومن ثم، في القاعدة الأولى تبدو نوعًا من القواعد الغربية الذكر
لأنني أقول أنني أريد أن تتداخل الأشياء مع بعضها البعض. في القاعدة الثانية،
أذكر أنني أريدك حقًا أن تنتشر بعيدًا. عفًوًا حسنًا، سأمضي قدمًا،
وسأضع مثالاً على الإنترنت لاحقًا حيث يمكنني أن أريكم بالضبط كيف تبدو هذه الأشياء. أو حتى سأقوم بما هو أفضل.
سوف أقوم بتحويل ذلك إلى لحظة تعلم حقيقية، وستمضي قدمًا وتدونها بنفسك وترى تأثير هاتين القاعدتين المختلفتين على النص. هيا بنا نراجع. أعلم أنني تجاوزت العديد من الأشياء،
وقد يكون الأمر ليس باليسير. لذا فإن أحد أهم الأشياء بين كل ما نقوم به خلال هذا الدورة التدريبية، هى أخذ خمسة أو عشر دقائق نكتب فيها بعض الأشياء،
ثم نلقي النظر عليها ونرى ماذا يحدث. ارتكب أكبر عدد ممكن من الأخطاء، لأن هذا هو الوقت المناسب لارتكاب الأخطاء عندما تكون معي، وباقي الوقت هنا سأجيب عل الأسئلة الموجودة على اللوحات المختلفة. تدرب على مواجهة حل المشكلات. لا تنشئ صفحة ويب ضخمة وتقم بتصميمها. انشأ صفحة مكونة من ثلاث او أربع فقرات، ورابطين،
وقم بالممارسة فلا يهم أن تتدرب على صفحة كبيرة، يمكنك التدرب على حل المشكلات الصغيرة،
وهذا يحدث فرقًا بالطبع. وأخيرًا، إذا قررت أنك مستعد للبرمجة ومتأهب أن تقوم بمشروع كبير، فتأكد من تصميمك لمشروعاتك الأكبر على الورق أولاً. لا يمكنني التأكيد بشكل كافي أنه إذا بدأت البرمجة والتصميم بدون خطة واضحة حقًا، سوف تشعر بالإحباط الشديد، واّمل ألا تشعر بالإحباط الشديد وتترك ما تفعله. ولا أريدك أن تفعل ذلك. لذا فقم بالتخطيط لجميع مشروعاتك على الورق أولاً. إذا اتبعت هذه الاقتراحات، إن مارست ومارست، إن كنت تواجه مشاكلات،
إن كنت تتمعن أولاً في الأمور قبل أن تقفز لمشكلات كبيرة، أعتقد انك ستستمتع كثيرًا، وستبدو صفحتك حقًا رائعة تفتخر بها.