Өзіңізді жеке, минималистік бастапқы бетке айналдырыңыз!: 10 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:22

COVID-19 біртіндеп пайда болғаннан кейін сізге негізінен қашықтан жұмыс жасауға көшуге тура келді ме? Дәл осындай!

Үйде компьютерлермен және Интернетте жұмыс істеу бізді жұмысқа, мектепке немесе тіпті көңіл көтеру үшін көптеген веб -сайттарды қадағалауымыз керек дегенді білдіреді!

Бетбелгілер әрқашан тапсырмаға сәйкес келмейді, сондықтан сізге қажет сілтемелері бар веб -браузерде қажет болған сайын ашылатын өзіңізге арналған арнайы бастапқы бетті қалай жасауға болады?

Міне сізге қажет:

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

Дайын болған кезде, біз бастапқы беттің шаблонын қолдануды бастаймыз … Немесе өзіңіздің нөлден өзіңізді құрыңыз!

1 -қадам: Бастапқы бет жасаңыз немесе біздің жеке шаблонды жүктеңіз

Бұл кезде сізде екі нұсқа бар:

1. Біздің теңшелген шаблонды жүктеңіз (нұсқаулар осы қадамнан кейінірек орындалады) немесе,
2. Бастапқы беттің негізгі нұсқаулығын орындаңыз; бұл сізге қарапайым бастапқы беттің құрылыс блоктары бойынша қадамдық қадаммен жүруге мүмкіндік береді - және біз осы арнайы бастапқы бетті құруға арналған нұсқаулық!

Неліктен оқулықты … оқулықта ұсынуға болады? Біздің MakerSpace -тің көмекшісі ретінде жұмысымыз сізге тек қалай істеу керектігін көрсету үшін ғана емес, сонымен қатар сізді Maker мәдениеті мен ресурстармен байланыстыру. Бұл нұсқаулық - бұл көптеген сайттар дизайнерлері бастайтын орындардың бірі, сондықтан сіздермен бөліскен дұрыс болды!

Егер сізде уақыт болса, №2 опцияны қолданыңыз, бірақ егер олай болмаса, сіз әрқашан бастапқы беттің негізгі нұсқаулығына жүгіне аласыз! Бұл оқулық үшін біз біздің жеке шаблонды жүктеп жатырсыз деп ойлаймыз! Оны жүктеу үшін:

1. Github -да DIY_startpage репозиторийін ашыңыз.
2. Мәзірді ашу үшін үлкен жасыл код түймесін басыңыз.
3. Жобаның барлық файлдарын жүктеу үшін ZIP жүктеу түймесін басыңыз.
4. Сіз жүктеген ZIP файлынан барлық файлдарды өзіңіз таңдаған жерге шығарыңыз.

GitHub - бұл бүкіл әлемдегі бағдарламашылар мен дизайнерлер өз кодтары мен туындыларын басқалармен бөлісетін веб -сайт: ол сонымен бірге басқалармен әр түрлі жобалар бойынша жұмыс жасауға мүмкіндік береді. Қорытынды: бұл әрбір жасаушы білуі керек тамаша құрал!

Енді өзіңіз таңдаған шолғышты бастаңыз: маған Firefox өте ұнайды, бірақ біздің шаблон кез келген веб -шолғышта жұмыс істеуі керек, сондықтан Edge, Chrome немесе Safari -ді қолданыңыз!

Ақырында, браузерде және Блокнот ++ бағдарламасында «DIY_startpage.html» файлын ашыңыз және оны баптауға кірісейік!

2 -қадам: Таңдаулылардың тізімін жасаңыз

Бастапқы беттің болуы керемет. Пайдалы бастапқы беттің болуы әлдеқайда жақсы және дәл қазір біздікі бос сияқты!

Сіз үнемі тексеріп отыратын және қадағалауыңыз қажет нәрселер қандай? Сіз таңертең қандай веб -комикстер оқисыз? Қай жаңалықтар сайтын тексергенді ұнатасыз? Бұл сіздің бастапқы бетіңізге түсуі керек нәрселер.

Бұл оқулық үшін мен өзімнің таңдаулыларымды қолданамын. Спойлер туралы ескерту, кітапханадан көптеген сілтемелер! Сонымен қатар шабыт алу үшін менің сүйікті жасаушылардың кейбірі және менің сүйікті ойын -сауықтарым. Сіз бұл элементтердің барлығын төменде мысал ретінде сілтеме арқылы таба аласыз!

Жаңалықтар мен оқу

• Сандық газеттер
• Сандық кітаптар
• Сандық журналдар

Оқыту

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

Музыка

• Жергілікті тыңдау
• Ән жарылғыш
• Jamendo музыкалық радиостанциялары

Жасаушы мәдениеті

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

Мен әр санат үшін өзіме ұнайтын үшеуін таңдадым, бірақ сіз одан көп немесе аз таңдау жасай аласыз - сіздің бастапқы бетіңіздің макеті санға немесе ресурстарға автоматты түрде реттеледі!

Барлық таңдаулыларды тізімге енгізгеннен кейін, оларды бір минутқа қалдырып, біздің бастапқы беттің үлгісін сіздікіне айналдыруға тырысайық.

3 -қадам: Шрифтті теңшеңіз

Блокнот ++ іске қосыңыз, «DIY_startpage.html» файлын ашу үшін Файл> Ашу түймесін басыңыз. Сіз қарап отырған нәрсе сіздің браузердегі беттен мүлдем өзгеше көрінеді, солай емес пе? Бұл сіздің парағыңыздың коды, ал браузерлер бұл кодты көзге ыңғайлы етіп жасау үшін түсіндіреді және бізге қажет нәрсенің бәрін жасайды.

Біздің бастапқы бет жобасының коды екі байланысты тілде жазылған: HTML және CSS. HTML әдетте беттің мазмұны үшін жауап береді, ал CSS беттің сыртқы түріне жауап береді.

Бастапқы бетті баптау үшін осы бірінші бөлімді іздеңіз:

html {

туралау элементтері: ортасы; түсі: #313131; көрсету: икемділік; қаріп: 22px «Courier New», Курьер, бір кеңістік; биіктігі: 100%; justify-content: орталық; маржа: 0; }

Біздің бастапқы беттің бұл бөлімі біздің беттегі элементтердің жалпы көрінісіне бағытталған. Сызық:

қаріп: 22px «Courier New», Курьер, бір кеңістік;

бұл біз бастапқы бетте қолданатын қаріп туралы және сіздің парағыңыздағы мәтін қандай болатынын анықтайтын екі параметрі бар: өлшемі мен қаріптер тобы.

• өлшемі - бұл «22 пиксель». Мәтіннің экрандағы өлшемі пиксель үшін қысқаша «px» өлшемімен анықталады.
• қаріптер тобы - Мұнда біз қолданғымыз келетін қаріптерді тізімдейміз. Әдетте ең қарапайым отбасын қолданғыңыз келетін бірнеше қаріптерді тізімге енгізген дұрыс. Бұл қаріптер сіз қолданатын браузерге сүйенеді, сондықтан егер олардың біреуі қол жетімді болмаса, браузер келесі нұсқаны қолданады және т.б.

W3schools CSS Web Safe Fonts бетінде тамаша қарайтын комбинациялардың керемет тізімі бар, олар сіз іздеген стильді ұстайды және көптеген заманауи браузерлерде жұмыс істейді.

Мысалы, сіз ауыстыра аласыз:

«Courier New», Курьер, бір кеңістік;

бар:

«Palatino Linotype», «Book Antiqua», Palatino, serif;

немесе:

«Comic Sans MS», курсивті, sans-serif;

Өзгерістерді көру үшін файлды сақтап, браузердегі бетті жаңартыңыз! Ұнамады ма? Проблема жоқ! Сізге ұнайтын комбинацияны тапқанша CSS Web қауіпсіз қаріптерімен ойнаңыз.

4 -қадам: Титулдық баға ұсынысын теңшеңіз

HTML бөлімінде осы бөлімді іздеңіз:

Бұл сіздің бастапқы бетіңіз! Ләззат алыңыз

Сізге ұнайтын баға ұсынысын таңдап, кодты ауыстырыңыз! Мен өзім үшін таңдадым

Тағы да бұзушылыққа

Браузерде бетті қайта жүктегеннен кейін сіздің бастапқы беттің орналасуы сіздің баға ұсынысыңызға сәйкес келуі керек: Firefox -те, бұл пернетақтада CTRL+R пернелерін басу немесе Қайта жүктеу белгішесін басу. Өзіңізге ұнайтын баға ұсынысын таңдаңыз (немесе кейінірек бірдеңе таңдаңыз!), Содан кейін сіздің бастапқы беттің бөлімдерін баптауға кірісейік!

5 -қадам: Бөлімдерді теңшеңіз

Енді сіз өзіңізге ұнайтын қаріптердің комбинациясын таптыңыз және сізде шабыт беретін керемет баға бар, енді бөлімдеріңізді жалғастырып, баптайық.

Егер сіз біздің Github -дан біздің бастапқы бетті жүктеген болсаңыз, сізде баптауға болатын 6 бөлім бар: түпнұсқаулықта тек 4 бөлім бар, бірақ жақында біздің өміріміздің көптеген аспектілері онлайнға көшкендіктен, мен алға жылжып, қажет болған жағдайда көбірек қостым.

Бірінші бөлімді тауып, бізге қажет нәрсені енгізіңіз. Естеріңізге сала кетейін, менің бірінші бөлімім «Жаңалықтар мен оқу»:

Блокнот ++ ішінде файлыңыз әлі ашық болса, келесі код жолын табыңыз:

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 арқылы бөліспейсіз? Біз әрқашан меценаттарымыздың не ойлап тапқанын көруге қуаныштымыз!