اجعل نفسك صفحة بدء مخصصة وأضيق الحدود: 10 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:36

هل اضطررت إلى التحول إلى العمل عن بُعد في الغالب منذ أن أصبح COVID-19 شيئًا؟ نفس!

غالبًا ما يعني العمل من المنزل باستخدام أجهزة الكمبيوتر الخاصة بنا وعبر الإنترنت أنه يتعين علينا تتبع الكثير من مواقع الويب للعمل أو للمدرسة أو حتى … من أجل المتعة!

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

إليك ما ستحتاجه:

• جهاز كمبيوتر (يعمل نظامنا بنظام Windows ، ولكن أي كمبيوتر حديث سيفي بالغرض).
• اتصال بالإنترنت.
• تثبيت جديد لمحرر النصوص Notepad ++.

عندما تكون جاهزًا ، دعنا نبدأ باستخدام نموذج صفحة البدء الخاص بنا … أو إنشاء نموذج خاص بك من البداية!

الخطوة 1: قم بإنشاء صفحة رئيسية أو قم بتنزيل النموذج المخصص الخاص بنا

عند هذه النقطة لديك خياران:

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

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

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

1. افتح مستودعنا DIY_startpage على جيثب.
2. انقر على زر الرمز الأخضر الكبير لفتح قائمة منسدلة.
3. انقر فوق Download ZIP لتنزيل جميع الملفات الخاصة بالمشروع.
4. قم باستخراج جميع الملفات من ملف ZIP الذي قمت بتنزيله للتو إلى الموقع الذي تختاره.

GitHub هو موقع ويب يشارك فيه المبرمجون والمصممين من جميع أنحاء العالم أكوادهم وإبداعاتهم مع الآخرين: كما يتيح لك التعاون مع الآخرين في مشاريع من جميع الأنواع. خلاصة القول ، إنها أداة رائعة يجب على كل صانع أن يعرفها!

ابدأ الآن المتصفح الذي تختاره: أنا أحب Firefox حقًا ، ولكن يجب أن يعمل القالب الخاص بنا على أي متصفح ويب حديث ، لذا لا تتردد في استخدام Edge أو Chrome أو Safari!

أخيرًا ، افتح ملف "DIY_startpage.html" في متصفحك وفي Notepad ++ ، ودعنا نبدأ في تخصيصه!

الخطوة 2: قائمة مفضلاتك

وجود صفحة بداية أمر رائع. إن الحصول على صفحة بداية مفيدة هو أفضل ، والآن تبدو صفحتنا فارغة قليلاً!

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

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

الأخبار والقراءة

• الصحف الرقمية
• كتب رقمية
• المجلات الرقمية

التعلم

• مدارس W3C
• Udemy
• لغات المانجو

موسيقى

• استمع محلي
• انفجار الأغنية
• راديو موسيقى Jamendo

ثقافة صانع

• كور 77
• لوميكلاستر
• ميلابروبيسيز

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

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

الخطوة 3: تخصيص الخط الخاص بك

ابدأ برنامج Notepad ++ ، وانقر فوق ملف> فتح لفتح ملف "DIY_startpage.html". ما تراه يبدو مختلفًا تمامًا عن الصفحة في متصفحك ، أليس كذلك؟ إنه رمز صفحتك ، وتقوم المتصفحات بتفسير هذه الشفرة لجعلها تبدو أكثر ملاءمة للعين وتقوم بكل الأشياء التي نحتاجها للقيام بها.

تمت كتابة الكود الخاص بمشروع الصفحة الرئيسية بلغتين مرتبطتين: HTML و CSS. عادةً ما يكون HTML مسؤولاً عن محتوى الصفحة ، بينما يكون CSS مسؤولاً عن مظهر الصفحة.

ابحث عن هذا القسم الأول لتخصيص صفحتك الرئيسية:

لغة البرمجة {

محاذاة العناصر: مركز ؛ اللون: # 313131 ؛ عرض: فليكس ؛ الخط: 22px "Courier New"، Courier، monospace؛ الارتفاع: 100٪؛ تبرير المحتوى: مركز ؛ الهامش: 0؛ }

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

الخط: 22px "Courier New"، Courier، monospace؛

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

• الحجم - هذا ما هو "22 بكسل". يتم تحديد حجم النص الخاص بك على الشاشة بـ "px" ، وهي اختصار لوحدات البكسل.
• عائلة الخطوط - هذا هو المكان الذي ندرج فيه الخطوط التي نرغب في استخدامها. من الجيد عادةً إدراج العديد من الخطوط ، من الخط الذي تريد حقًا استخدامه للعائلة الأكثر عمومية. تعتمد هذه الخطوط على المتصفح الذي تستخدمه ، لذلك إذا لم يكن الخيار الأكثر تحديدًا متاحًا ، فسيقوم المتصفح بتجربة الخيار التالي ، وهكذا.

تحتوي صفحة CSS Web Safe Fonts من w3schools على قائمة رائعة من مجموعات الخطوط التي تبدو رائعة ، وتمسك بالنمط الذي تبحث عنه وستعمل على معظم المتصفحات الحديثة.

على سبيل المثال ، يمكنك استبدال:

"Courier New" ، Courier ، monospace ؛

مع:

"Palatino Linotype" ، "Book Antiqua" ، Palatino ، serif ؛

أو:

"Comic Sans MS" ، مخطوطة ، sans-serif ؛

احفظ ملفك وقم بتحديث الصفحة في متصفحك لترى التغييرات! لا تحب ذلك؟ لا مشكلة! العب مع CSS Web Safe Fonts حتى تجد المجموعة التي تريدها.

الخطوة 4: تخصيص اقتباس العنوان الخاص بك

ابحث عن هذا القسم في ملف HTML الخاص بك:

هذه صفحة البداية الخاصة بك! يتمتع

اختر اقتباسًا يعجبك ، واستبدل الكود! بالنسبة لي ، اخترت

مرة أخرى على الخرق

يجب أن يتكيف تخطيط صفحة البداية الخاصة بك بسرعة لمطابقة عرض الأسعار الخاص بك بمجرد إعادة تحميل الصفحة في متصفحك: في Firefox ، هذا يعني الضغط على CTRL + R على لوحة المفاتيح ، أو النقر فوق أيقونة إعادة التحميل. اختر عرض أسعار يعجبك الآن (أو اختر شيئًا لاحقًا!) ودعنا نبدأ في تخصيص أقسام صفحة البداية الخاصة بك!

الخطوة 5: تخصيص الأقسام الخاصة بك

الآن بعد أن وجدت مجموعة الخطوط التي تعجبك ولديك اقتباس رائع لإلهامك ، دعنا نواصل ونخصص أقسامك.

إذا قمت بتنزيل صفحة البداية الخاصة بنا من Github ، فلديك 6 أقسام متاحة للتخصيص: يحتوي الدليل الأصلي على 4 أقسام فقط ، ولكن نظرًا لأن المزيد والمزيد من جوانب حياتنا قد انتقلت عبر الإنترنت مؤخرًا ، فقد تقدمت وأضفت المزيد فقط في حالة.

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

مع استمرار فتح ملفك في Notepad ++ ، ابحث عن السطر التالي من التعليمات البرمجية:

القسم 1

واستبدله بالفئة في قائمتك التي تعتقد أنك ستستخدمها أكثر من غيرها.

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

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

القسم 2

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

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

الخطوة 6: تخصيص الروابط الخاصة بك

يعد تخصيص الروابط في كل قسم أمرًا أكثر تعقيدًا ولكنه بالتأكيد ليس أصعب بكثير!

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

أولاً ، ابحث عن خط يشبه:

link_one_name

حدد ذلك "link_one_name" بت واستبدله بالنص الخاص بك. على سبيل المثال ، الرابط الأول في القسم الأول بناءً على القائمة الخاصة بي من الخطوة X هو "الصحف الرقمية" لذلك نحصل على:

الصحف الرقمية

بعد ذلك ، لنعمل على تخصيص الرابط! استبدل "link.one" بت بالرابط الأول. بالنسبة لي ، سيكون هذا هو الرابط إلى صحفنا الرقمية ، لذا سيبدو كما يلي:

الصحف الرقمية

احفظ عملك في محرر النصوص ، وأعد تحميل الصفحة في متصفحك

يجب أن تكون الآن قادرًا على النقر فوق الرابط الأول الذي قمت بتخصيصه. إذا لم يستغرق الأمر ، فلا بأس بذلك! ابدأ من جديد أو تابع خطواتك حتى يفتح الرابط عند النقر فوقه.

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

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

الصحف الرقمية

لكن خمن ماذا - هذا أيضًا هو المكان الذي نقرر فيه كيفية فتح الرابط! قم بتغييره إلى:

الصحف الرقمية

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

الخطوة 7: أضف صورة إلى صفحة البدء الخاصة بك

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

على طول الطريق في نهاية النموذج. اختر الصورة التي تريدها ، وانقلها إلى نفس المجلد مثل ملف صفحة البداية ، واستبدل "library_picture.jpg" باسم ملف صورتك. على سبيل المثال ، إذا كان اسم الملف الخاص بي هو "your_picture.jpg" ، فسيصبح السطر:

احفظ التغييرات ، ومرة أخرى ، أعد تحميل صفحة البدء في متصفحك.

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

خلفيات الهواتف الذكية مناسبة جدًا لهذا المشروع. بشكل عام ، أي صورة عمودية (أو كما يقول الأشخاص الخياليون "صورة ذات اتجاه عمودي" بنسبة 16: 9) لهذه المسألة! لكن تصميم صفحة البداية الخاصة بنا سوف يتكيف بغض النظر عما ترمي إليه.

إذا ظهرت صورتك ، تهانينا ، لقد انتهيت كثيرًا!

الخطوة 8: تنظيف بعض الشيء

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

• القسم 6
• البند 1
• البند 2
• البند 3

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

عادةً ما تكون هذه هي الخطوة التي أقوم فيها بتحطيم كل شيء لأنني أسير بسرعة كبيرة ، لذلك إذا لم يعمل شيء ما فجأة ، فتذكر: خذ نفسًا عميقًا ، وتراجع عما فعلته للتو باستخدام مجموعة المفاتيح CTRL + Z على لوحة المفاتيح!

الخطوة 9: جعلها صفحة بداية فعلية

الآن بعد أن فتحت صفحة البداية جميع الروابط التي نريدها ، وتبدو بالطريقة التي نريدها ، حان الوقت لفتحها عند بدء تشغيل المتصفح!

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

التالي: على الأرجح يفتح متصفحك بمحرك البحث المفضل لديك ، أو ربما حتى صفحة فارغة.

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

• تعليمات Firefox
• إرشادات Google Chrome
• تعليمات سفاري
• إرشادات Microsoft Edge

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

إذا لم يستغرق الأمر ، فانتقل إلى الإرشادات الخاصة بالمتصفح مرة أخرى وتأكد من أنك لم تفوت أي شيء. الأسوأ من ذلك هو الأسوأ ، ثم أعد تشغيل الكمبيوتر بعد حفظ كل عملك. 9 مرات من أصل 10 ، هذا يحل كل شيء!

الخطوة 10: كل ذلك! وهل ترغب في معرفة المزيد؟

تهانينا على الانتهاء من صفحة البداية الخاصة بك! قد لا يبدو الأمر كثيرًا ، لكنك تعلمت للتو برمجة أحد أهم اللبنات الأساسية لموقع الويب بالطريقة التي فعلتها … منذ حوالي 20 عامًا!

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

• هل جربت دليل صفحة البدء الأساسي؟ أخبار سارة ، هناك المزيد من أين أتت! تحقق من الأدلة الأخرى بواسطة / stpg / لمزيد من الإلهام والميزات المتقدمة!
• تحقق من كتالوج مكتبة مقاطعة جونسون للكتب على HTML و CSS - وباستخدام بطاقة المكتبة أو البطاقة الإلكترونية ، يمكنك الوصول إلى الكتب الإلكترونية أيضًا!
• تمنحك بطاقة المكتبة أيضًا إمكانية الوصول إلى Udemy ، كما أنها تحتوي على بعض الفئات الكاملة جدًا حول HTML و CSS وتصميم الويب أيضًا.

إذا كنت فخورًا جدًا بإبداعك ، فلماذا لا تأخذ لقطة شاشة وتشاركها معنا عبر Twitter أو Instagram باستخدام علامة التجزئة #jocomakes؟ يسعدنا دائمًا أن نرى ما يبتكره عملاؤنا!