خودتان را یک صفحه شروع سفارشی و مینیمالیستی کنید!: 10 قدم

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:52

آیا از زمانی که COVID-19 به یک امر تبدیل شده است ، مجبور شده اید به کارهای عمدتا از راه دور تغییر دهید؟ یکسان!

کار در خانه با رایانه و اینترنت به این معنی است که ما مجبور هستیم بسیاری از وب سایت ها را برای کار ، مدرسه یا حتی … برای سرگرمی پیگیری کنیم!

نشانک ها همیشه وظیفه خود را ندارند ، پس چگونه می توانیم خود را به عنوان یک صفحه شروع سفارشی که فقط برای شما طراحی شده است ، با تمام پیوندهایی که نیاز دارید ، ایجاد کنیم و هر بار که به مرورگر وب نیاز دارید ، در مرورگر وب شما باز می شود؟

در اینجا چیزی است که شما نیاز دارید:

• یک کامپیوتر (سیستم عامل ما ویندوز دارد ، اما هر رایانه ای مدرن این کار را انجام می دهد).
• اتصال به اینترنت.
• نصب جدید ویرایشگر متن Notepad ++.

وقتی آماده اید ، بیایید با استفاده از الگوی صفحه اصلی خود شروع به کار کنیم … یا خود را از ابتدا ایجاد کنید!

مرحله 1: ایجاد یک صفحه شروع یا بارگیری قالب سفارشی ما

در این مرحله شما دو گزینه دارید:

1. قالب سفارشی ما را بارگیری کنید (دستورالعمل ها کمی بعد در این مرحله دنبال کنید) یا ،
2. این راهنمای اولیه صفحه اصلی را دنبال کنید ؛ گام به گام شما را با اجزای سازنده یک صفحه شروع ساده آشنا می کند - و این راهنمایی است که ما برای ساختن این صفحه شروع سفارشی دنبال کردیم!

چرا توصیه می شود آموزش … در یک آموزش؟ کار ما به عنوان تسهیل کننده MakerSpace فقط نشان دادن نحوه انجام کارها نیست ، بلکه ارتباط شما با فرهنگ سازنده و منابع موجود است. این راهنما یکی از مکانهایی است که بسیاری از طراحان مبتدی شروع به کار می کنند ، بنابراین منطقی بود که آن را با شما به اشتراک بگذاریم!

اگر وقت دارید ، گزینه 2 را ادامه دهید ، اما اگر ندارید ، همیشه می توانید بعداً به راهنمای اصلی صفحه اصلی مراجعه کنید! برای این آموزش ، ما فقط فرض می کنیم که قالب سفارشی ما را بارگیری می کنید! برای بارگیری آن:

1. مخزن DIY_startpage ما را در Github باز کنید.
2. روی دکمه سبز بزرگ کد کلیک کنید تا منوی کشویی باز شود.
3. برای بارگیری همه فایل های پروژه روی بارگیری ZIP کلیک کنید.
4. همه فایلها را از فایل ZIP که تازه بارگیری کرده اید به مکان دلخواه خود استخراج کنید.

GitHub یک وب سایت است که در آن برنامه نویسان و طراحان سراسر جهان کد و خلاقیت خود را با دیگران به اشتراک می گذارند: همچنین به شما امکان می دهد در پروژه های مختلف با دیگران همکاری کنید. در انتها ، این یک ابزار عالی است که هر سازنده باید بداند!

حالا مرورگر دلخواه خود را راه اندازی کنید: من فایرفاکس را خیلی دوست دارم ، اما قالب ما باید تقریباً روی هر مرورگر وب اخیر کار کند ، بنابراین از Edge ، Chrome یا Safari استفاده کنید!

در نهایت ، فایل "DIY_startpage.html" را در مرورگر خود و در Notepad ++ باز کنید ، و اجازه دهید سفارشی سازی آن را شروع کنیم!

مرحله 2: موارد دلخواه خود را لیست کنید

داشتن صفحه شروع عالی است. داشتن یک صفحه شروع مفید حتی بهتر است و در حال حاضر ، صفحه ما کمی خالی به نظر می رسد!

چه مواردی را مرتباً بررسی می کنید و باید آنها را پیگیری کنید؟ صبح چه وب کمیک هایی می خوانید؟ دوست دارید چه وب سایت خبری را بررسی کنید؟ اینها مواردی هستند که باید در صفحه اصلی شما قرار بگیرند.

برای این آموزش ، من فقط از برخی از موارد مورد علاقه خود استفاده می کنم. هشدار خرابکار ، تعداد زیادی پیوند از کتابخانه! اما همچنین برخی از سازندگان مورد علاقه من برای الهام و برخی از سرگرمی های مورد علاقه من. می توانید همه این موارد را در زیر با پیوند ، به عنوان مثال ، پیدا کنید!

اخبار و خواندن

• روزنامه های دیجیتال
• کتابهای دیجیتال
• مجلات دیجیتال

یادگیری

• مدارس W3C
• اودمی
• زبانهای انبه

موسیقی

• محلی گوش دهید
• آهنگ Exploser
• رادیوهای موسیقی جامندو

فرهنگ سازنده

• Core77
• Lumecluster
• ملاپروپیسم ها

من سه مورد از موارد مورد علاقه خود را برای هر دسته انتخاب کردم ، اما شما باید بتوانید بیشتر یا کمتر از آن را بدون مشکل انتخاب کنید - طرح صفحه شروع شما به طور خودکار با تعداد یا منابع تنظیم می شود!

پس از اینکه همه موارد دلخواه خود را در لیست قرار دادید ، بگذارید آنها را برای یک دقیقه کنار بگذاریم و روی ساختن الگوی صفحه اصلی خود کمی بیشتر از شما کار کنیم.

مرحله 3: قلم خود را سفارشی کنید

Notepad ++ را شروع کنید ، روی File> Open کلیک کنید تا فایل "DIY_startpage.html" شما باز شود. ظاهر شما با صفحه مرورگر شما بسیار متفاوت است ، اینطور نیست؟ این کد صفحه شما است و مرورگرها این کد را تفسیر می کنند تا کمی چشم نوازتر به نظر برسد و تمام کارهایی را که برای انجام آن نیاز داریم انجام می دهند.

کد پروژه صفحه شروع ما به دو زبان مرتبط نوشته شده است: HTML و CSS. HTML معمولاً مسئول محتوای یک صفحه و CSS مسئول ظاهر یک صفحه است.

به دنبال این بخش اول باشید تا صفحه شروع خود را سفارشی کنید:

html {

align-items: center؛ رنگ: #313131؛ صفحه نمایش: flex؛ font: 22px "پیک جدید" ، پیک ، تک فضا ؛ ارتفاع: 100؛ ؛ justify-content: center؛ حاشیه: 0؛ }

این بخش از صفحه شروع ما بر ظاهر کلی موارد موجود در صفحه ما تمرکز می کند. خط:

font: 22px "پیک جدید" ، پیک ، تک فضا ؛

به طور خاص در مورد فونت مورد استفاده ما در صفحه شروع است و دارای دو پارامتر است که تعیین می کند متن در صفحه شما چگونه خواهد بود: اندازه و خانواده فونت.

• اندازه - این همان "22px" است. اندازه متن شما روی صفحه با "px" ، کوتاه برای پیکسل ، تعریف شده است.
• فونت خانواده - این جایی است که ما فونت هایی را که می خواهیم استفاده کنیم لیست می کنیم. معمولاً ایده خوبی است که چندین مورد را از قلم موردنظر برای استفاده از عمومی ترین خانواده ذکر کنید. این فونت ها به مرورگری که استفاده می کنید وابسته است ، بنابراین اگر خاص ترین آن موجود نباشد ، مرورگر بعدی را امتحان می کند و غیره.

صفحه CSS Web Safe Fonts از w3schools دارای فهرستی عالی از ترکیب فونت است که بسیار زیبا به نظر می رسد ، سبک مورد نظر خود را حفظ کرده و در اکثر مرورگرهای مدرن کار می کند.

به عنوان مثال ، می توانید جایگزین کنید:

"پیک جدید" ، پیک ، تک فضا ؛

با:

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

یا:

"Comic Sans MS" ، cursive ، 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 ++ ، به دنبال این خط باشید:

تمام راه در انتهای قالب. تصویری را که دوست دارید انتخاب کنید ، آن را به همان پوشه فایل صفحه اصلی خود منتقل کنید و نام فایل عکس خود را "libra_picture.jpg" جایگزین کنید. به عنوان مثال ، اگر نام فایل من "your_picture.jpg" باشد ، خط زیر می شود:

تغییرات خود را ذخیره کرده و بار دیگر صفحه اصلی را در مرورگر خود بارگیری کنید.

از آنجا که کد صفحه اصلی شما و فایل های تصویری شما در یک پوشه قرار دارند ، هنگام تازه کردن صفحه ، تصویر باید به طور خودکار بارگیری شود. اگر اینطور نبود ، نام فایل خود را بررسی کنید - معمولاً جایی است که من اشتباه می کنم!

تصاویر پس زمینه گوشی های هوشمند مناسب آن پروژه است. به طور کلی ، هر تصویر عمودی (یا همانطور که افراد فانتزی می گویند "تصویر عمودی" با نسبت 16: 9) در این مورد! اما طرح صفحه اصلی ما هرچه را که در آن بیاندازید ، سازگار می شود.

اگر تصویر شما نشان داده شد ، تبریک می گویم ، تقریباً تمام شده اید!

مرحله 8: کمی تمیز کنید

اگر بخشهای اضافی دارید که در آن زمان از آنها استفاده نمی کنید ، با خیال راحت آنها را حذف کنید! برای مثال ، فرض کنید از بخش 6 استفاده نمی کنید. پیدا کنید:

• بخش 6
• مورد 1
• مورد 2
• مورد 3

این خطوط را انتخاب و حذف کنید ، فایل خود را ذخیره کرده و فایل را در مرورگر خود تازه کنید تا مطمئن شوید همه چیز از بین رفته است.

این معمولاً مرحله ای است که من همه چیز را خراب می کنم زیرا خیلی سریع می روم ، بنابراین اگر چیزی به طور ناگهانی کار نکرد ، به یاد داشته باشید: یک نفس عمیق بکشید و آنچه را که با ترکیب کلید CTRL+Z در صفحه کلید خود انجام داده اید لغو کنید!

مرحله 9: تبدیل آن به یک صفحه شروع واقعی

اکنون که صفحه اصلی تمام پیوندهای مورد نظر ما را باز می کند و به شکلی که ما می خواهیم ظاهر می شود ، زمان بازکردن آن هنگام شروع مرورگر شما فرا رسیده است!

در آن زمان ، من دوست دارم با برش و چسباندن پوشه شروع صفحه خود در پوشه Documents ویندوز ، همه چیز را از رایانه رومیزی خود دور نگه دارم. بنابراین اگر کار روی صفحه شروع خود را به پایان رساندید ، این کار را انجام دهید!

بعدی: به احتمال زیاد مرورگر شما با موتور جستجوی مورد علاقه شما باز می شود ، یا شاید حتی یک صفحه خالی باشد.

در زیر می توانید دستورالعمل های سفارشی سازی Firefox و سایر مرورگرها را بیابید:

• دستورالعمل های فایرفاکس
• دستورالعمل های Google Chrome
• دستورالعمل های سافاری
• دستورالعمل های Microsoft Edge

پس از اتمام دستورالعمل های مرورگر خود ، همه را ببندید و دوباره باز کنید. اگر صفحه شروع شما هنگام راه اندازی مرورگر شما نشان داده شد ، شما آن را ساخته اید!

اگر طول نکشید ، دستورالعمل های مرورگر خود را دوباره مرور کنید و مطمئن شوید که چیزی را از دست نداده اید. بدتر از همه بدتر می شود ، پس از صرفه جویی در تمام کارها ، رایانه خود را مجدداً راه اندازی کنید. 9 بار از 10 ، که همه چیز را حل می کند!

مرحله دهم: همه انجام شد! و آیا دوست دارید بیشتر بدانید؟

تبریک می گویم که صفحه شروع خود را به پایان رساندید! ممکن است زیاد به نظر نرسد ، اما شما به تازگی یاد گرفته اید که یکی از مهمترین اجزای سازنده یک وب سایت را مانند من کدگذاری کنید … حدود 20 سال پیش!

اگر از این کار لذت بردید و دوست دارید در مورد صفحات شروع بیشتر بدانید ، این سوراخ خرگوش عمیقی است که باید دنبال کنید! در اینجا یک انتخاب کوچک وجود دارد که به شما در سفر به صفحه اصلی کمک می کند:

• آیا راهنمای پایه اولیه را امتحان کرده اید؟ خبر خوب ، منبع بیشتری از آنجا آمده است! برای الهام بیشتر و ویژگی های پیشرفته ، راهنمای دیگر / stpg / را بررسی کنید!
• کتابخانه کتابخانه شهرستان جانسون را برای کتابهای HTML و CSS بررسی کنید - و با کارت کتابخانه یا کارت الکترونیکی خود به کتابهای الکترونیکی نیز دسترسی دارید!
• کارت کتابخانه شما همچنین به شما امکان دسترسی به Udemy را می دهد و کلاسهای کاملی در زمینه HTML ، CSS و طراحی وب نیز دارد.

اگر به آفرینش خود بسیار افتخار می کنید ، چرا عکس خود را از طریق توییتر یا اینستاگرام با هشتگ #jocomakes با ما به اشتراک نمی گذارید؟ ما همیشه خوشحالیم که می بینیم مشتریان ما به چه نتیجه ای می رسند!