Өзүңүздү ыңгайлаштырылган, минималисттик баштапкы баракчага айлантыңыз!: 10 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:36

COVID-19 нерсе болуп калгандан кийин, сиз негизинен алыстан иштөөгө өтүшүңүз керек беле? Ошол эле!

Үйдөн компьютерлерибиз жана интернет аркылуу иштөө көп учурда жумуш үчүн, мектеп үчүн, ал тургай көңүл ачуу үчүн көптөгөн веб -сайттарды көзөмөлдөп туруубуз керектигин билдирет!

Кыстармалар дайыма эле тапшырманы аткара бербейт, андыктан өзүңүзгө керектүү бардык шилтемелериңиз бар жана сизге керектүү болгон сайын веб -браузериңизде ачылган жеке баштапкы баракчаны кантип түзсөк болот?

Бул жерде сизге эмне керек:

• Компьютер (биздики Windows менен иштейт, бирок ар кандай заманбап компьютер жасайт).
• Интернетке туташуу.
• Notepad ++ текст редакторунун жаңы орнотулушу.

Даяр болгондо, өзүбүздүн баштапкы баракчабыздын шаблонун колдонуу менен баштайлы … Же өзүңүздүн нөлдөн баштап өзүңүздү түзүңүз!

1 -кадам: Баштоо барагын түзүңүз ЖЕ биздин ылайыкташтырылган шаблонуңузду жүктөп алыңыз

Бул жерде сизде эки вариант бар:

1. Ылайыкташтырылган шаблонуңузду жүктөп алыңыз (көрсөтмөлөр бул кадамда бир аз кийинчерээк) же,
2. Бул негизги баштапкы көрсөтмөнү аткарыңыз; ал сизди этап -этабы менен жөнөкөй баштапкы баракчанын курулуш блоктору аркылуу басып өтөт - жана бул колдонуучунун баштапкы баракчасын куруу үчүн биз ээрчиген көрсөтмө!

Эмне үчүн үйрөткүчтү сунуштайбыз … үйрөткүчтө? MakerSpace көмөкчүсү катары биздин ишибиз сизге кантип жасоо керектигин көрсөтүү менен эле чектелбейт: бул сизди Жараткандын маданияты жана ресурстары менен байланыштыруу. Бул колдонмо көптөгөн баштапкы дизайнерлер баштай турган жерлердин бири, андыктан аны сиздер менен бөлүшүүнүн мааниси бар!

Эгер убактыңыз болсо, #2 варианты менен кетиңиз, бирок андай болбосоңуз, анда кийинчерээк ар дайым негизги баракчанын көрсөтмөсүнө кайрылсаңыз болот! Бул үйрөткүч үчүн, биз жөн гана биздин калыпты түшүрүп жатасыз деп ойлойбуз! Аны жүктөө үчүн:

1. Githubдагы DIY_startpage репозиторийибизди ачыңыз.
2. Чоң жашыл код баскычын чыкылдатуу менюну ачуу үчүн.
3. Долбоордун бардык файлдарын жүктөө үчүн ZIPти жүктөө дегенди басыңыз.
4. Жаңы файлдарды ZIP файлынан өзүңүз каалаган жерге чыгарып алыңыз.

GitHub - бул дүйнө жүзү боюнча программисттер жана дизайнерлер өз коддору жана жаратмалары менен башкалар менен бөлүшкөн веб -сайт: ал ошондой эле башкалар менен ар кандай долбоорлордо кызматташууга мүмкүндүк берет. Жыйынтык - бул ар бир Жаратуучу билиши керек улуу курал!

Эми өзүңүз каалаган браузерди баштаңыз: мага Firefox абдан жагат, бирок биздин шаблон акыркы веб -браузерлердин баарында иштеши керек, андыктан Edge, Chrome же Safariди колдонуңуз!

Акырында, "DIY_startpage.html" файлын браузериңизде ЖАНА Блокнот ++ де ачыңыз жана аны ыңгайлаштырууну баштайлы!

2 -кадам: Сүйүктүүлөрүңүздүн тизмесин түзүңүз

Баштапкы баракчанын болушу сонун. Пайдалуу баракчага ээ болуу дагы жакшы жана азыр, биздики бир аз бош окшойт!

Сиз дайыма текшерип турган жана көз салып турушуңуз керек болгон нерселер кайсылар? Эртең менен кайсы вебкомикти окуйсуз? Кайсы жаңылыктар сайтын текшерүүнү жактырасыз? Бул сиздин баштапкы баракчаңызга түшүшү керек болгон нерселер.

Бул үйрөткүч үчүн мен жөн гана кээ бир сүйүктүүлөрүмдү колдоном. Спойлердин эскертүүсү, китепканадан көптөгөн шилтемелер! Ошондой эле илхам үчүн менин сүйүктүү Жаратуучуларымдын кээ бири жана менин жакшы көргөн көңүл ачууларым. Булардын бардыгын мисал катары төмөндө шилтеме менен таба аласыз!

Жаңылыктар жана окуу

• Санариптик гезиттер
• Санарип китептер
• Санарип журналдар

Үйрөнүү

• W3C мектептери
• Udemy
• Манго тилдери

Музыка

• Жергиликтүү угуңуз
• Song Exploder
• Jamendo Music Radio

Жаратуучу маданияты

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

Мен ар бир категория үчүн үч сүйүктүүмдү тандадым, бирок сиз көйгөйсүз эле аздыр -көптүр тандап алышыңыз керек - баштапкы баракчаңыздын макети автоматтык түрдө санга же ресурстарга ылайыкташтырылат!

Бардык сүйүктүүлөрүңүз тизмеленгенден кийин, келгиле, аларды бир мүнөткө бөлүп, биздин жалпы баракчанын шаблонун бир аз көбүрөөк кылуу үчүн иштейли.

3 -кадам: Арипти ыңгайлаштыруу

Notepad ++ баштаңыз, "DIY_startpage.html" файлыңызды ачуу үчүн Файл> Ачуу дегенди басыңыз. Сиз карап жаткан нерсе браузериңиздеги баракчадан такыр башкача көрүнөт, туурабы? Бул сиздин баракчаңыздын коду жана браузерлер бул кодду бир аз көзгө жагымдуу кылып, бизге керектүү нерселердин бардыгын чечмелеп беришет.

Биздин баштапкы барак долбоорубуздун коду эки тили менен жазылган: HTML жана CSS. HTML адатта барактын мазмунуна жооп берет, ал эми CSS барактын көрүнүшү үчүн жооп берет.

Баштоо барагыңызды ыңгайлаштыруу үчүн бул биринчи бөлүмдү издеңиз:

html {

тегиздөө-пункттары: борбор; түс: #313131; дисплей: flex; шрифт: 22px "Courier New", Courier, monospace; бийиктиги: 100%; justify-content: борбор; маржа: 0; }

Баштапкы бетибиздин бул бөлүмү биздин беттеги нерселердин жалпы көрүнүшүнө багытталган. Сызык:

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

бул биз баштапкы бетте колдонуп жаткан шрифт жөнүндө жана сиздин баракчаңыздагы текст кандай болорун аныктоочу эки параметрге ээ: өлчөмү жана шрифт үй -бүлөсү.

• өлчөмү - бул "22px" деген эмне. Экранда сиздин тексттин өлчөмү пиксел үчүн кыска "px" менен аныкталат.
• шрифт үй -бүлөсү - Бул жерде биз колдонууну каалаган шрифттерди тизмектейбиз. Адатта, эң жалпы үй -бүлөнү колдонууну каалаган шрифттен бир нече тизмектөө жакшы идея. Бул ариптер сиз колдонгон браузерге таянат, андыктан эгерде өзгөчө бирөө жеткиликтүү болбосо, браузер кийинкисин сынап көрөт ж.б.

W3schoolsтин CSS Web Safe Fonts баракчасы сонун көрүнгөн, сиз издеп жаткан стилди карманган жана көпчүлүк заманбап браузерлерде иштей турган шрифт айкалыштарынын чоң тизмесине ээ.

Мисалы, сиз алмаштыра аласыз:

"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 көрсөтмөлөрү
• Safari көрсөтмөлөрү
• Microsoft Edge көрсөтмөлөрү

Браузериңиздин көрсөтмөлөрүн аткарып бүткөндөн кийин, баарын жаап, кайра ачыңыз. Эгерде сиздин браузериңиз ишке киришип жатканда сиздин баштапкы баракчаңыз көрүнүп калса, сиз буга жетиштиңиз!

Эгерде ал жок болсо, браузериңиздин көрсөтмөлөрүн кайра карап чыгып, эч нерсени өткөрүп жибербегениңизди текшериңиз. Баарынан жаманы келет, андан кийин бардык иштериңизди сактап калгандан кийин компьютериңизди өчүрүп күйгүзүңүз. 10дон 9 жолу баарын чечет!

10 -кадам: Баары бүттү! Жана, Көбүрөөк билгиңиз келеби?

Баштоо баракчаңыздын бүтүшү менен куттуктайбыз! Бул анча окшошпошу мүмкүн, бирок сиз веб -сайттын эң маанилүү курулуш блокторунун бирин мен сыяктуу коддоону үйрөндүңүз … Болжол менен 20 жыл мурун!

Эгер сизге бул жакты жана баштоо баракчалары жөнүндө көбүрөөк билгиңиз келсе, анда ээрчишибиз керек болгон терең коён тешиги! Бул жерде сиздин баштапкы баракчаңызга жардам берүү үчүн кичинекей тандоо:

• Негизги баштапкы баракчаны колдонуп көрдүңүз беле? Жакшы кабар, дагы кайдан келгени бар! Көбүрөөк илхам жана өркүндөтүлгөн мүмкүнчүлүктөр үчүн / stpg / башка гиддерин текшериңиз!
• HTML жана CSS боюнча китептер үчүн Джонсон Каунти Китепканасынын каталогун карап көрүңүз - жана сиздин китепкана картаңыз же электрондук картаңыз менен электрондук китептерге да мүмкүнчүлүгүңүз бар!
• Сиздин китепкана картаңыз сизге Udemyге кирүүгө мүмкүнчүлүк берет жана анын HTML, CSS жана веб -дизайн боюнча абдан толук сабактары бар.

Эгерде сиз өзүңүздүн жаратууңуз менен сыймыктансаңыз, анда эмне үчүн скриншотуңузду #jocomakes хештеги менен Twitter же Instagram аркылуу биз менен бөлүшпөйсүз? Биз ар дайым биздин кардарлар эмнени ойлоп жатканын көрүүгө кубанычтабыз!