Направете себе си персонализирана, минималистична начална страница!: 10 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:50

Трябваше ли да преминете към предимно отдалечена работа, след като COVID-19 стана нещо? Същото!

Работата от вкъщи с нашите компютри и през Интернет често означава, че трябва да следим много уебсайтове за работа, за училище или дори … за забавление!

Отметките не винаги отговарят на задачата, така че какво ще кажете да си направим персонализирана начална страница, съобразена само за вас, с всички необходими връзки и която се отваря във вашия уеб браузър всеки път, когато имате нужда от нея?

Ето какво ще ви трябва:

• Компютър (нашият работи с Windows, но всеки съвременен компютър ще го направи).
• Връзка с интернет.
• Нова инсталация на текстов редактор Notepad ++.

Когато сте готови, нека започнем с използването на нашия собствен шаблон за начална страница … Или да създадете свой собствен от нулата!

Стъпка 1: Създайте начална страница ИЛИ изтеглете нашия персонализиран шаблон

На този етап имате две възможности:

1. Изтеглете нашия персонализиран шаблон (инструкциите следват малко по -късно в тази стъпка) или,
2. Следвайте това основно ръководство за начална страница; той ще ви преведе през градивни елементи на проста начална страница стъпка по стъпка - и това е ръководството, което следвахме, за да изградим тази персонализирана начална страница!

Защо да препоръчате урок … в урок? Нашата работа като фасилитатори на MakerSpace не е просто да ви покажем как да правите нещата: това е и да ви свърже с културата и ресурсите на Maker, налични там. Това ръководство е едно от местата, където започват много дизайнери за стартиране, така че имаше смисъл да го споделите с вас!

Ако имате време, продължете с опция #2, но ако нямате, винаги можете да се обърнете към основното ръководство за начална страница по -късно! За този урок просто ще приемем, че изтегляте нашия персонализиран шаблон! За да го изтеглите:

1. Отворете нашето хранилище DIY_startpage в Github.
2. Щракнете върху големия зелен бутон за код, за да отворите падащо меню.
3. Щракнете върху Download ZIP, за да изтеглите всички файлове за проекта.
4. Извлечете всички файлове от ZIP файла, който току -що сте изтеглили, на място по ваш избор.

GitHub е уебсайт, където програмисти и дизайнери по целия свят споделят своя код и творения с други: той също така ви позволява да си сътрудничите с други по проекти от всякакъв вид. В крайна сметка, това е чудесен инструмент, който всеки производител трябва да знае!

Сега стартирайте избрания от вас браузър: Аз наистина харесвам Firefox, но нашият шаблон трябва да работи върху почти всеки скорошен уеб браузър, така че не се колебайте да използвате Edge, Chrome или Safari!

Накрая отворете файла „DIY_startpage.html“във вашия браузър И в Notepad ++ и нека започнем да го персонализираме!

Стъпка 2: Избройте любимите си

Наличието на начална страница е страхотно. Да имаш полезна начална страница е още по -добре и в момента нашата изглежда малко празна!

Кои са нещата, които редовно проверявате и трябва да следите? Какви уеб комикси четете сутрин? Кой уебсайт за новини обичате да проверявате? Това са нещата, които трябва да попаднат на вашата начална страница.

За този урок ще използвам само някои от любимите си. Предупреждение за спойлер, много връзки от библиотеката! Но също така някои от любимите ми създатели за вдъхновение и някои от любимите ми забавления. Можете да намерите всички тези елементи по -долу с връзка, като пример!

Новини и четене

• Цифрови вестници
• Дигитални книги
• Дигитални списания

Изучаване на

• W3C училища
• Udemy
• Езици на манго

Музика

• Слушайте местно
• Song Exploder
• Музикални радиостанции Jamendo

Култура на създател

• Ядро77
• Lumecluster
• Мелапропизми

Избрах три от любимите ми за всяка категория, но би трябвало да можете да изберете повече или по -малко от това без проблеми - оформлението на началната ви страница ще се адаптира автоматично към броя или ресурсите!

След като изброите всичките си любими, нека ги оставим настрана за минута и да работим върху това да направим нашия общ шаблон за начална страница малко повече за вас.

Стъпка 3: Персонализирайте шрифта си

Стартирайте Notepad ++, щракнете върху Файл> Отваряне, за да отворите файла „DIY_startpage.html“. Това, което гледате, изглежда много различно от страницата във вашия браузър, нали? Това е кодът на вашата страница и браузърите интерпретират този код, за да изглеждат малко по-удобни за очите и да правят всички неща, от които се нуждаем.

Кодът за нашия проект за начална страница е написан на два сродни езика: HTML и CSS. HTML обикновено отговаря за съдържанието на страница, а CSS - за външния вид на страницата.

Потърсете този първи раздел, за да персонализирате началната си страница:

html {

align-items: center; цвят: #313131; дисплей: гъвкав; шрифт: 22px "Courier New", Courier, monospace; височина: 100%; justify-content: център; марж: 0; }

Този раздел на нашата начална страница се фокусира върху общия вид на артикулите на нашата страница. Линията:

шрифт: 22px "Courier New", Courier, monospace;

е специално за шрифта, който използваме на началната страница и има два параметъра, които определят как ще изглежда текстът на страницата ви: размер и семейство шрифтове.

• размер - Това е това "22px". Размерът на текста ви на екрана се определя в "px", съкратено от пиксели.
• семейство шрифтове - Тук изброяваме шрифтовете, които бихме искали да използваме. Обикновено е добра идея да изброите няколко, от шрифта, който наистина искате да използвате най -общото семейство. Тези шрифтове разчитат на браузъра, който използвате, така че ако най -конкретният не е наличен, браузърът ще опита следващия и т.н.

Страницата CSS Web Safe Fonts от w3schools има страхотен списък от комбинации от шрифтове, които изглеждат страхотно, държат на стила, който търсите и ще работят в повечето съвременни браузъри.

Например, можете да замените:

"Куриер Нов", Куриер, монопространство;

с:

"Палатино Линотип", "Книга Антиква", Палатино, засечки;

или:

"Comic Sans MS", курсив, без засечки;

Запазете файла си и опреснете страницата в браузъра си, за да видите промените! Не ви харесва? Няма проблем! Поиграйте с 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
• Инструкции за Safari
• Инструкции за Microsoft Edge

След като приключите с инструкциите за браузъра си, затворете всичко и го отворете отново. Ако началната ви страница се покаже при стартирането на браузъра, вие сте го направили!

Ако това не се случи, прегледайте отново инструкциите за браузъра си и се уверете, че не сте пропуснали нищо. По -лошото е най -лошото, след това рестартирайте компютъра, след като запазите цялата си работа. 9 пъти от 10, това решава всичко!

Стъпка 10: Всичко е готово! И бихте ли искали да знаете повече?

Поздравления за завършването на началната страница! Може да не изглежда много, но току -що се научихте да кодирате един от най -важните градивни елементи на уебсайта по начина, по който го направих аз … Преди около 20 години!

Ако това ви е харесало и бихте искали да научите повече за началните страници, това е дълбока заешка дупка, която трябва да следвате! Ето малка селекция, която да ви помогне при пътуването ви към началната страница:

• Опитахте ли основното ръководство за начална страница? Добра новина, има още откъде идва! Разгледайте другите ръководства от / stpg / за повече вдъхновение и разширени функции!
• Разгледайте каталога на библиотеката на окръг Джонсън за книги по HTML и CSS - и с вашата библиотечна карта или електронна карта имате достъп и до електронни книги!
• Вашата библиотечна карта също ви дава достъп до Udemy и има някои много пълни класове по HTML, CSS и уеб дизайн.

Ако се гордеете със своето творение, защо не направите екранна снимка и не я споделите с нас в Twitter или Instagram с хаштага #jocomakes? Винаги сме щастливи да видим какво предлагат нашите покровители!