Ինչպես ծածկագրել կայք

Ինչպես ծածկագրել կայքԱնկանում եք իմանալ, թե ինչպես ստեղծել կայք HTML և CSS- ով?


Դուք ճիշտ տեղում եք: Այս ուղեցույցում մենք ձեզ ցույց ենք տալիս բոլոր այն քայլերը, որոնք պետք է լինեն դատարկ էկրանից աշխատանքային կայք, որը նույն ժամանակ օպտիմիզացված է և բավականին լավ տեսք ունի.

Բայց նախ ՝ ինչն է HTML և CSS?

Դե, դուք կարող եք պարզապես որոնել երկու տերմինները Վիքիպեդիայում, բայց այդ սահմանումները շատ ընթերցասեր չեն: Եկեք մի փոքր պարզեցնեք իրերը.

  • HTML (Hypertext Markup Language) սահմանում է վեբ էջի կառուցվածքը և բովանդակությունը. ուր իրերը գնում են, ինչպես դրանք դրված են, և ինչ է էջում
  • CSS (Cascading Style Sheets) – ը սահմանում է ոճավորում / ներկայացում վեբ էջից և դրանում առկա տարրերից

Դուք չեք կարող իրոք ունենալ առանց մյուսի. Երկուսը միասին աշխատում են `կազմելու վերջնական վեբ էջը, դրա ձևավորումը և դրանում պարունակվող բովանդակությունը.

Նշում; երբ մենք ասում ենք «վեբ էջ», այն, ինչ մենք նկատի ունենք, HTML- ի մեկ միասնական փաստաթուղթ է `ձեր էջի մաս հանդիսացող մեկ էջ: Մինչդեռ «կայքը» ամբողջությունն է. Ձեր ամբողջ կայքը `իր բոլոր վեբ էջերով.

Ինչպե՞ս ստեղծել վեբ կայք ՝ օգտագործելով HTML և CSS (բովանդակության աղյուսակ).

  1. Իմացեք HTML- ի հիմունքները
  2. Հասկացեք HTML փաստաթղթի կառուցվածքը
  3. Ծանոթացեք CSS- ի ընտրողներին
  4. Միացրեք CSS ոճաթերթը միասին
  5. Ստացեք Bootstrap
  6. Ընտրեք ձևավորում
  7. Անհատականացրեք ձեր կայքը HTML և CSS
  8. Ավելացնել բովանդակություն և պատկերներ
  9. Նրբագեղ գույներ և տառատեսակներ
  10. Ստեղծեք լրացուցիչ էջեր

Կայք ստեղծելու ընդհանուր ժամանակ. 4-5 ժամ
Հմտությունների մակարդակ. Միջանկյալ

Եթե ​​կարծում եք, որ դա չափազանց բարդ է, խորհուրդ ենք տալիս կա՛մ ստեղծել վեբ կայք ՝ օգտագործելով WordPress, կա՛մ ընտրեք կայքի ստեղծողներից մեկը: Կարող եք նաև ստուգել վեբ զարգացման համար ընտրված լավագույն IDE- ի ցուցակը. 

Contents

Սկսելուց առաջ հավաքեք ձեր ռեսուրսները.

Այսպիսով, առաջին բանը, որ ձեզ հարկավոր է նույնիսկ HTML- ով և CSS- ով վեբ կայք ստեղծելուց առաջ, վեբ սերվեր է (հոստինգ): Մի անհանգստացեք, չնայած. պարտադիր չէ գնել ձեր սեփական մեքենան: Շատ վեբ հոստինգ ընկերություններ ձեզ կվաճառեն իրենց հյուրանոցների մի պարզ հոստինգի ծառայություն: Ուղղակի google «վեբ հոստինգի» համար և ընտրեք մի բան, որը թանկ չէ.

Սերվերի տեսակավորմամբ, հաջորդ բանը, ինչ ձեզ հարկավոր է, դոմենի անունն է: Դոմեյն անունն այն է, ինչ կայքը նույնացվում է համացանցում: Օրինակ ՝ այս կայքի տիրույթի անունն է կայքեր.

Երբ ունեք ինչպես տիրույթի անուն, այնպես էլ սերվեր, կարող եք երկուսը միացնել իրար.

Ամբողջական բացահայտումՄենք վաստակում ենք միջնորդավճար, եթե այս ուղեցույցում ավարտվում եք Bluehost- ի գնման միջոցով: Սա օգնում է մեզ պահել Վեբ կայքի տեղադրումը և գործարկումը և արդիականացումը: Շնորհակալություն աջակցության համար.

Որպեսզի այս տեսակետն առանց որևէ ցավ ունենալու ձեր վերջում, խորհուրդ ենք տալիս գրանցվել նման ընկերության հետ Bluehost- ը.

Նրանք կաշխատեն ձեզ համար նախատեսված բոլոր կարգավորումները: Նշանակում է, որ նրանք ՝ (ա) ստեղծել ձեզ համար հոստինգի հաշիվ, (բ) գրանցեք դոմեյն անուն ձեր անունից, (գ) կարգավորել ամեն ինչ միասին աշխատելու համար, և (դ) ձեզ հնարավորություն է տալիս օգտագործել հեշտ օգտագործման վահանակ.

Առաջ անցեք և գրանցվեք Bluehost- ը, մենք կսպասենք Երբ վերադառնում եք և ձեր վեբ սերվերը կազմաձևված է և պատրաստ է գնալ, ոլորեք դեպի հաջորդ քայլը.

Պ.Ս. Եթե ​​պարզապես ուզում եք փորձարկել HTML կայք ձեր համակարգչում, և մտադրություն չունեք այն հրապարակայնացնել, օգտագործել տեղական վեբ սերվերի ծրագրակազմ: Այն, ինչ մենք առաջարկում ենք և սիրում ենք օգտագործել, կոչվում է XAMPP. Այն ունի տարբերակներ ինչպես Mac- ի, այնպես էլ համակարգչի համար, և այն շատ հեշտ է օգտագործել: Ահա ուղեցույց այն մասին, թե ինչպես տեղադրել այն ձեր համակարգչում.

1. Իմացեք HTML- ի հիմունքները

HTML կառուցվածքի հիմնական տարրը HTML- ն է պիտակ.

Օրինակ, պիտակը հետևյալն է.

ԻՆՉ - ՈՐ ԲԱՆ

Այստեղ մենք գործ ունենք Ա պիտակ Դա կլինի համարձակ տեքստի մի կտոր, որը գտնվում է բացման պիտակի միջև () և փակման պիտակը () Այս դեպքում տեքստի այդ կտորն է ԻՆՉ - ՈՐ ԲԱՆ.

Բայց կան նաև այլ պիտակներ, պարզապես նշելու համար մի քանիսը.

  • ... այն կանդրադառնա տեքստը բացման և փակման պիտակների միջև
  • ... ընդգծելու է այն
  • ...

    տեքստի պարբերություն է


  • ...

    էջի գլխավոր վերնագիրն է

Բացի այդ պարզ պիտակներից, կան նաև ավելի բարդ պիտակներ: Օրինակ, եթե ցանկանում եք ցուցակ կազմել հետևյալի նման.

  • 1-ին կետ
  • 2-րդ կետ
  • 3-րդ կետ

… Դուք կարող եք դա անել հետևյալ HTML կոդով.

  • 1-ին կետ
  • 2-րդ կետ
  • 3-րդ կետ

Կամ, եթե ցանկանում եք հղում ավելացնել մեկ այլ էջի համար, այսպիսին է.

Սա հղում է մեր գլխավոր էջին

… Դուք կարող եք դա անել կոդերի այս կտորով.

Սա հղում է իմ էջին

Կարդացեք սա ստանալու համար HTML պիտակների ամբողջական ցուցակը. Դա օգտակար կդառնա, քանի որ ստեղծում եք HTML HTML և CSS կայք.

2. Հասկացեք HTML փաստաթղթի կառուցվածքը

Մտածեք ձեր HTML էջի մասին, կարծես այն կառուցված է Legos- ից: Դուք տարբեր աղյուսներ եք դնում միմյանց գագաթին, որպեսզի ավարտվի տրված ավելի մեծ կառուցվածքով.

Բայց «Լեգո» աղյուսի փոխարեն HTML- ի պիտակներ եք ստանում…

Ահա HTML փաստաթղթի ամենապարզ կառուցվածքը.





Բարեւ աշխարհ!


Բարեւ աշխարհ!

Իմ առաջին վեբ էջը.

Կարող եք վերցնել վերևում նշված ծածկագիրը, պատճենել և տեղադրել այն նոր ֆայլի վրա, պահպանել փաստաթուղթը որպես index.html, և դա կլինի կատարյալ վավեր HTML էջ.

Եկեք բացատրենք այս կոդի առանձին մասերը.

  • – փաստաթղթի նախնական հայտարարագիրը
  • – մեկ այլ հայտարարություն. ասում է, որ այն, ինչ հաջորդը գալու է, HTML փաստաթուղթ է, որը գրված է անգլերենով
  • – նշում է սկիզբը գլուխ Բաժին; է գլուխ բաժինը, որտեղ գնում են էջի բոլոր հիմնական պարամետրերը. դրանց մեծ մասը չի պատրաստվում ցուցադրվել էկրանին. նրանք պարզապես սահմանում են, թե ինչ է կատարվում գլխարկի տակ
  • – սահմանում է, թե ինչ նիշերի հավաքածուն է օգտագործվում փաստաթուղթը գրելու համար. կարիք չկա դրա վրա չափազանց շատ ժամանակ ծախսել. պարզապես օգտագործեք այս հայտարարությունը, ինչպես կա
  • Բարեւ աշխարհ! – էջի վերնագիրը. սա այն է, ինչ մարդիկ կտեսնեն իրենց զննարկիչների վերնագրի տողում, օրինակ.

վերնագիր վեբ բրաուզերում HTML և CSS կայք ստեղծելու ժամանակ

  • – նշում է սկիզբը մարմինը Բաժին; սա այն դեպքում, երբ գնում է էջի ամբողջ բովանդակությունը. դա HTML փաստաթղթի հիմնական մասն է. եկեք շեշտենք սա, այս բաժնում դուք կներառեք բոլոր այն բովանդակությունը, որը նախատեսված է էջում հայտնվել

  • Բարեւ աշխարհ!

    – էջի գլխավոր վերնագիրը

  • Իմ առաջին վեբ էջը.

    – տեքստի պարզ պարբերություն

  • – ամբողջ HTML փաստաթղթի փակման նշանը

Կարևոր նշում այստեղ: Հիմնական տեքստային ծրագրի կամ MS Word- ի նման բարդ տեքստային պրոցեսորի վրա HTML ֆայլի վրա աշխատելը լավ փորձ չէ: Ինքներդ ձեզ հեշտ դարձնելու համար տեղադրեք կոչված գործիք Բարձրակարգ տեքստ. Այն ունի տարբերակներ ինչպես Mac- ի, այնպես էլ համակարգչի համար, և այն անվճար է.

Ինչու է ավելի լավը: Ի թիվս այլ բաների, այն կլրացնի HTML ֆայլի շարահյուսությունը: Նշանակում է, այն տեսողականորեն կտարբերի ձեր HTML պիտակները տեքստի պարունակությունից, պիտակների պարամետրերից և այլ արժեքներից: Ըստ էության, այն ամենը կդառնա ընթեռնելի: Ահա թե ինչպիսին է մեր պարզ HTML կառուցվածքը Sublime Text- ում.

բարձրակարգ շարահյուսությունը հիանալի է HTML և CSS կայքէջ ստեղծելու ժամանակ

Լավ, վերադառնանք թեմային: Դուք կարող եք վերցնել այդ նորը index.html ձեր ֆայլը, պատճենեք այն, որտեղ գտնվում է ձեր վեբ սերվերի հիմնական գրացուցակը, այնուհետև տեսեք այդ էջը ՝ այն դիտարկելով վեբ զննարկչի միջոցով: Չեն չափազանց հուզվել, չնայած. այս էջը կլինի բավականին տգեղ (տես ստորև).

այս էջը տգեղ է

Լավ, այնպես որ էջը տգեղ է, ինչպես անել, որ այդպես չէ?

3. Ծանոթացեք CSS- ի ընտրողներին

Likeիշտ այնպես, ինչպես HTML- ն ունի իր պիտակները, CSS- ն ունի ընտրողներ.

Ընտրողները նկարագրում են, թե ինչպես պետք է տվյալ տարրը վարվի արտաքին տեսքով: Ահա CSS ընտրողի օրինակ.

փ {
տառաչափը `18 հատ;
}

Այս ընտրիչը ցույց է տալիս, որ բոլոր HTML- ն է

Փաստաթղթի ներսում պիտակները կունենան 18 տառաչափ տառաչափ.

Այնուամենայնիվ, CSS- ի ընտրողների օգտագործման ավելի գործնական միջոց է ոչ թե տվյալ տիպի բոլոր պիտակները սահմանափակել որոշակի ստիլինգի վրա, այլ ստեղծել տարբեր «դասեր» և դրանք մեկ առ մեկ հատկացնել պիտակներին:.

Օրինակ ՝ CSS- ում դասի ընտրողը հետևյալն է.

.նորմալ տեքստ {
տառաչափը `18 հատ;
}

Նկատեք կետը (.) դասի անունից առաջ (նորմալ տեքստ) Սահմանված «նորմալ տեքստի» դասի միջոցով մենք այժմ կարող ենք այդ դասը հատկացնել այն HTML հատուկ հատկորոշիչներին, որոնք մենք ուզում ենք կատարել 18px չափսերով:.

Օրինակ:

Այս տեքստը կլինի 18px.

Եկեք ևս մեկ րոպե բացատրենք վերը նշված CSS ծածկագրի այդ մասի բոլոր տարրերը.

  • .նորմալ տեքստ – դասի սահմանում; ամեն ինչ դասի անվան տակ և բացման և փակման փակագծերի միջև } սահմանում է, թե ինչ տեսք կունենան այս դասին հատկացված տարրերը
  • տառաչափ – CSS- ի օրինակ
  • 18 հատ – գույքին հատկացված արժեք

Վերը նշվածից բացի, կա մեկ տոննա CSS հատկություն տառաչափ. Ահա ամբողջական ցուցակ եթե դու հետաքրքրասեր ես.

4. Միասին դարձրեք CSS ոճաթուղթ

HTML փաստաթուղթը շատ կառուցվածքային է. Յուրաքանչյուր տարր իր տեղն ունի, և տարրերի կարգը շատ կարևոր է տվյալ վեբ էջի վերջնական կառուցման և տեսքի համար: CSS փաստաթուղթը շատ ավելի քիչ է.

CSS փաստաթղթերը հաճախ անվանում են որպես ոճաթերթեր. Ըստ էության, CSS ոճաթերթը դասի բոլոր սահմանումների ցանկն է, որոնք օգտագործվում են համապատասխան HTML փաստաթղթում: Դասի սահմանումների կարգը մեծագույն նշանակություն չունի ամենից շատ (գոնե պարզ ձևավորման համար).

CSS ձևաթուղթը միասին կազմելու ձևը յուրաքանչյուր դասը մեկ առ մեկ սահմանելն է, այնուհետև փորձարկելը, եթե ձեր էջի ձևավորման արդյունքում արդյունքն այն է, ինչ ցանկանում եք:.

Սա հնչում է որպես հոգնեցուցիչ աշխատանք, և այդպես էլ կա.

Բայց մենք ձեզ համար գործերը հեշտացնելու ենք, և ձեզ չենք ստիպի ձեռքով սովորել HTML և CSS ձևավորումը: Փոխանակ ձեզ ամեն ինչ զրոյից դասավանդելու փոխարեն, մենք կենդանի օրգանիզմ ենք վերցնելու և կտոր ենք դրա տարրերը.

Հենց այստեղ է գործվում Bootstrap կոչվող մի բան.

5. Ներբեռնեք / տեղադրեք Bootstrap

Bootstrap- ը բաց կոդով գործիքակազմ է ՝ HTML և CSS կայքէջ ստեղծելու համար.

Պարզ անգլերենով ՝ Bootstrap- ը հոգ է տանում HTML փաստաթղթի և CSS ոճերի թերթի հիմնական կառուցվածքի մասին: Այն մատուցում է մի շրջանակ, որը վստահեցնում է, որ ձեր վեբ էջի հիմնական փորը պատրաստ է և օպտիմիզացված է հետագա զարգացման համար.

Ըստ էության, Bootstrap- ը թույլ է տալիս չսկսվել զրոյից և փոխարենը անցնել հենց զվարճալի հատվածին: Դրա օգնությամբ հարկ չկա աշխատել HTML և CSS կայքէջի ստեղծման հաճախ ձանձրալի վաղ փուլերի վրա.

Գոյություն ունեն երկու ուղի.

  • Ընտրանք (ա)սովորել Bootstrap – անցիր Bootstrap- ի գլխավոր էջ, ներբեռնիր Bootstrap- ի հիմնական փաթեթը և սկսիր կառուցել դրա վերևում.
  • Ընտրանք (բ)վերցրեք դյուրանցում. ստացեք Bootstrap- ի համար ստարտափ փաթեթ ՝ լավ դիզայնով և ցուցադրված վեբ էջով արդեն կառուցված.

Ընտրանք (ա) Սկզբում կարող է լինել որոշ ուսման կորեր, բայց դա ոչ մի կերպ վատը չէ HTML- ով և CSS- ով կայք ստեղծելու համար: Երբ դուք տիրապետեք Bootstrap- ի հիմնական կառուցվածքին, ձեզ համար կարող է ավելի հեշտ լինել նոր էջեր կառուցել և նրանց այնպես դարձնել այնպես, ինչպես ցանկանում եք: The Bootstrap փաստաթղթեր հիանալի տեղ է այս ուղով սկսելու համար.

Մենք պատրաստվում ենք գնալ Option- ի հետ (բ) այս ուղեցույցի համար: Մենք դա անում ենք մի քանի պատճառով, դրանցից գլխավորը.

Պատրաստի կառուցվածքով սկսելը մեծ ցավ է փրկում ՝ փորձելով պարզել HTML փաստաթղթի հիմնական անհրաժեշտությունները: Սա Ձեզ հնարավորություն է տալիս կենտրոնանալ հետաքրքիր իրերի վրա `բովանդակություն դնելը և այն լավ տեսք ունենալ.

Մի խոսքով, այս եղանակով բաներ սովորելը ձեզ ավելի լավ արդյունք կտա ավելի արագ, ինչը մենք ենթադրում ենք, որ ուզում եք.

6. Ընտրեք ձևավորում

HTML և CSS կայքէջ ստեղծելիս ազատ եք օգտագործել ձեր նախընտրած Bootstrap ձևանմուշը: Նրանք բոլորը պետք է բավականաչափ նույն կերպ աշխատեն.

Այնուամենայնիվ, այս ուղեցույցի համար մենք պատրաստվում ենք օգտագործել օրինակներից մեկը Սկսեք Bootstrap- ը. Նրանք ունեն գեղեցիկ ձևանմուշների անվճար ընտրություն, որոնք օպտիմիզացված են, աշխատում են անսարք և նաև շատ լավ մշակված.

Թեման, որը մենք կօգտագործենք, կոչվում է Ստեղծագործական. Վերջնական էֆեկտը, որը մենք փնտրում ենք, նման է լինելու այսպիսի մի բան.

Վերջնական էջը HTML- ով և CSS- ով վեբ կայք ստեղծելուց հետո

Սկսելու համար, Creative ձևանմուշը, կտտացրեք այն Անվճար ներբեռնում կոճակը, որը աջ կողմում է (միացված այս էջը) և պահպանել zip փաթեթը ձեր աշխատասեղանին.

Համալրեք փաթեթը և տեղափոխեք դրա պարունակությունը ձեր տեղական վեբ սերվերի կամ ձեր վեբ հոստինգի հաշվի հիմնական գրացուցակում.

Այժմ բացեք այդ գտնվելու վայրը ձեր վեբ զննարկչի միջոցով: Կտեսնեք ձևանմուշի ֆոնդային տարբերակը.

սկսել bootstrap ձևանմուշը

Դա արդեն բավականին լավ տեսք ունի, բայց այժմ ժամանակն է սովորել, թե ինչպես օգտագործել HTML և CSS, որպեսզի այն ճշգրտորեն դառնա այն, ինչ ցանկանում եք:.

7. Անհատականացրեք ձեր վեբ կայքը HTML և CSS

Եկեք նախ աշխատենք դիզայնի գլխավոր էջում: Սա մեզ ցույց կտա, թե ինչպես փոխարինել գրաֆիկան, տեքստերը և ընդհանուր առմամբ ամեն ինչ կարգավորել.

Մենք կարճ խոսեցինք HTML փաստաթղթի գլխամասի մասին: Եկեք ավելի խորը նայենք այստեղ.

Երբ դու բացես index.html ձեր Bootstrap կայքի Sublime Text- ի ֆայլը, դուք կտեսնեք այսպիսի գլխի բաժինը (մենք պարզության համար հանեցինք այս կոդից ոչ բոլոր կարևոր բաները *):






Creative - Սկսել Bootstrap- ի թեման





* Բացի վերը նշվածից, կար նաև Google տառատեսակներ, տառատեսակներ Awesome սրբապատկերներ և լուսատուփի մոդուլ բեռնելու էջում էջում ցուցադրված պատկերների համար.

Հայտարարությունների մեծ մասը այստեղ մենք արդեն գիտենք, բայց կան ևս մի քանի նոր.

  • Նախ և առաջ, ամեն ինչի միջև փակագծերը HTML մեկնաբանություններ են: Այն չի երևում վերջին էջում.
  • – դա Bootstrap- ի սեփական հայտարարության պիտակներից մեկն է: Այն սահմանում է կայքի դիտման չափը.
  • – այս գիծը բեռնում է Creative ձևանմուշի CSS ոճաթերթը և այն պարունակում է նաև Bootstrap- ի լռելյայն ոճային թերթ:.

Եկեք փոփոխենք վերջին հայտարարությունը `CSS- ը բեռնող գիծը, որպեսզի ավելի հեշտ լինի հետագայում աշխատել.

Փոխեք այդ գիծը հետևյալում ՝


Սա պարզապես փոքր տարբերություն է, այն կբեռնի նույն CSS թերթի ոչ կրճատված տարբերակը: Այս տարբերակը պարզապես ավելի հեշտ է փոփոխել.

Այժմ ոլորեք դեպի ներքևի մասը index.html ֆայլ: Դուք կտեսնեք հետևյալ տողերը փակվելուց անմիջապես առաջ մարմինը պիտակ:

        

Նրանք պատասխանատու են JavaScript ֆայլերը բեռնելու համար, որոնք պարունակում են դիզայնի ավելի տեսողական փոխազդեցություններ: Օրինակ, երբ կտտացնում եք Մասին հղումը վերևի ընտրացանկում, դուք սահուն տեղափոխվելու եք նույն էջի մոտակայքում գտնվող բլոկ. սա, ի թիվս այլ բաների, արվում է JavaScript- ի միջոցով: Մենք կարիք չունեմ ինքներս մեզ նեղսրտելու այս ծածկագիրը հասկանալու համար: Եկեք թողնենք սա ևս մեկ անգամ.

Փոխարենը, եկեք աշխատենք էջում մեր սեփական բովանդակության ավելացման վրա.

8. Ավելացնել բովանդակություն և պատկերներ

Առաջին բանը, որ դուք կցանկանաք անել, էջի վերնագիրը փոխելն է.

1. Փոխեք վերնագիրը

Գտնել կոչում վերնագրի հատվածում նշեք և պիտակների միջև եղած տեքստը փոխարինեք ձեր սեփական որևէ բանի.

Իմ HTML կայքը

2. Անհատականացրեք հերոսների բաժինը

Հերոս հատվածը այն է, ինչ մենք անվանում ենք այս բլոկ.

հերոսի բաժինը

Լավ կլինի, որ դրա ներսում ունենանք մեր սեփական բովանդակությունը: Այս բլոկը փոփոխելու համար վերադարձրեք ձեր index.html ֆայլը և գտիր այս բաժինը.

...


...

Իմանալ ավելին

Կոդի այս ամբողջ բլոկը վերահսկում է հերոս հատվածում եղածը.

Այստեղ կան մի քանի նոր պիտակներ.


  • – սա պիտակ է, որը սահմանում է, որ այս ամբողջ բաժինը էջի վերնագիրն է. այս պիտակը ունի մի քանի եղբայրներ և քույրեր ՝ տեսքով
    պիտակ և
    պիտակ
  • – ընդհանուր CSS պիտակ է, որը ցույց է տալիս, որ այն, ինչ հետևում է, առանձին բաժին է (aka բաժանում) HTML փաստաթղթում. օգտագործելով այն ավելի հեշտացնում է էջի առանձին հատվածները տեսողական տարբերակել

Դուք նաև կնկատեք, որ մի քանի այլ պիտակներ (որոնց մասին մենք արդեն գիտենք) կարծես թե մի փոքր ավելի բարդ են, քանի որ նրանց համար նշանակվել են CSS բազմաթիվ դասեր: Օրինակ:

...

Դասարանները, որոնք նշանակվել են

պիտակը այստեղ է տեքստի մեծատառ տեքստ-սպիտակ տառատեսակ-քաշը համարձակ.

Այս դասերը ստեղծվել են Bootstrap- ի և Creative թեմայի մշակողի կողմից: Լավ նորությունն այն է, որ դուք նույնպես կարող եք դրանք օգտագործել ազատորեն HTML և CSS կայք ստեղծելիս.

Անկեղծ ասած, դուք կարող եք հարմարեցնել ձեր էջի կառուցվածքին ավելացրած ցանկացած պիտակ ՝ դրանով իսկ նշանակելով ցանկացած քանակի դաս:.

Եթե ​​ցանկանում եք տեսնել առկա դասերի ամբողջական ցանկը, կարող եք բացել հիմնականը ստեղծագործական .css ֆայլ, որը գտնվում է css Ստեղծագործական թեմայի ենթաուղղորդություն.

Այս բոլոր դասերի մասին հասկանալը կարող է սկզբում վախեցնել, բայց իրականում այն ​​ավելի հեշտ է, քան թվում է.

Օրինակ ՝ դասերից մեկը, որը տրված է մեր որոշ պարբերություններին index.html ֆայլը տառատեսակ-թեթև լույս. Երբ ցատկում ես դեպի ստեղծագործական .css ֆայլ և ctrl + f փնտրելով այդ դասի անունը, կտեսնեք, որ այն պարզապես սահմանում է տառատեսակի քաշը պարամետրը նման է.

.font-weight-light {
տառատեսակի քաշը ՝ 300;
}

Լռելյայն տեքստերի փոփոխումը index.html ֆայլը շատ պարզ է: Պարզապես գտեք այն պիտակը, որը ցանկանում եք խմբագրել և փոխել այն, ինչ կա բացման և փակման պիտակների միջև.

Օրինակ ՝ հիմնական վերնագիրը փոխելու համար պարզապես փոխեք սա.

Ձեր սիրածը ...

Հետևյալի նման մի բան.

Հմայի՛ր իմ HTML կայքը!

Նույնը կարող եք անել էջի բոլոր պարբերությունների և այլ պիտակների հետ.

Կարևորն այն է, որ կարողանաք նաև ազատորեն ավելացնել նոր պարբերություններ: Օրինակ, մենք կարող ենք վերցնել այն էջը, որն արդեն գտնվում է էջում, կազմել դրա պատճենը և կպցնել այն սկզբնական պարբերության տակ: այսպես է.

Սկսեք Bootstrap- ը կարող է ...

2-րդ կետ

Հիմա, հոգ տանելով տեքստերի հետ, եկեք փոխարինենք հետին պլանում գտնվող պատկերը.

Սա մի փոքր ավելի բարդ է անել, քանի որ այն պահանջում է, որ մենք մտնենք CSS ոճաթերթերի ֆայլ և այնտեղ կատարենք փոփոխությունները: Ինչպես տեսնում եք, HTML կոդում Masthead բաժին, ոչ մի պիտակ չի նշանակում որևէ կերպ ներառել էջի պատկեր: Այս ամենը արվում է CSS- ի միջոցով.

Երբ մեկ այլ հայացք եք նետում կոդերի մշակման ամբողջ բլոկին Masthead բաժնում, կտեսնեք, որ այն նշանակված է կոչվող դասի գլուխապետ. Կոդի այս տողը ղեկավարում է դասի առաջադրանքը.

The գլուխապետ դասը մեկն է, որը պատկեր է դնում ամբողջ բլոկի ֆոնի վրա.

Եկեք բացենք ստեղծագործական .css նորից ներկայացրեք և փնտրեք «գլխավոր գլխի» դաս.

header.masthead
լիցք `10rem;
լիցք-ներքև `հաշվարկ (10rem - 72px);
ֆոնային ՝ գծային-գրադիենտ (ներքևից ՝ rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masthead.jpg" );
ֆոն-դիրք. կենտրոն;
ֆոնային կրկնել. չկրկնել;
ֆոնային կցորդ. պտտվել;
ֆոնային չափս ՝ ծածկոց;
}

Այս ծածկագիրը մեր պատկերին է ներկայացնում բոլոր տեսակի գեղարվեստական ​​իրեր (օրինակ, ծածկույթ ավելացնել, ստվերել և այլն), բայց կարևոր մասը հետևյալն է. url ("../ img / bg-masthead.jpg"). Սա այն գիծն է, որը ցույց է տալիս, թե որտեղ կարելի է գտնել ֆոնի պատկերը: Դա լինելու է իմգ ենթաօրենսդրական.

Այս ֆոնի պատկերը փոխելու համար վերցրեք ձեր սեփական ցանկացած պատկեր, պատճենեք այն իմգ ենթաօրենսդրական, իսկ այնուհետև պատճենեք և տեղադրեք իր անունը բնօրինակի փոխարեն bg-masthead.jpg ֆայլ: Մի խոսքով, փոխեք սա. url ("../ img / bg-masthead.jpg") այս: url ("../ img / YOURFILE.jpg").

3. Անհատականացրեք էջի մյուս բլոկները

Երբ անցնում ես index.html ֆայլ, կնկատեք, որ էջում արդեն կան շատ տարբեր բաժիններ: Մենք ունենք մի հատված նավարկություն, և մասին բլոկ, ոմանք ծառայություններ, ա պորտֆոլիո, ա գործողության կոչ, ա Կապ բլոկ, և ա ստորոտ.

Չնայած այս բոլոր բաժիններում կան տարբեր բովանդակություն, սեկցիաներն իրենք կառուցվածքով նման են: Նրանք բոլորն էլ ունեն մոտավորապես նույն HTML HTML պիտակների հավաքածու `պարզապես CSS- ի տարբեր դասեր, որոնք նշանակվել են.

Էջը ձեր կարիքները բավարարելու համար փոփոխելու լավագույն միջոցը բլոկները մեկ առ մեկ անցնելն է և փորձարկելը ՝ փոխելով իրերը.

Բացի տեքստերը փոփոխելուց, կարող եք նաև ամբողջ բաժինները տեղափոխել շուրջը (մասերը միջև

պիտակները): Grիշտ է, դուք պետք է դա անեք ձեռքով (կտրելով և ապա տարրերը տեղում տեղադրելով), դա դեռ պարզ է անել.

Այսպես ասած, կան երկու միանգամայն հիմնական փոփոխություն, որի մասին մենք դեռ չենք խոսել: Եկեք լուսաբանենք դրանք հաջորդը.

9. Նուրբ գույներով գույներ և տառատեսակներ

Գույների կամ տառատեսակների փոփոխումը շատ հեշտ է անել HTML- ում և CSS- ում: Ամենապարզ բանը, որ դուք կարող եք անել, HTML- ի պիտակի վրա որոշակի գծային ոճավորում նշանակելն է: Օրինակ:

Կարմիր տեքստ

HTML- ում գույները ներկայացված են դրանց hex արժեքներով. «# FF0000» – ը կարմիր է: Ահա մյուս բոլորի սեղանը ստանդարտ գույներ.

Գույներ նշանակելու ավելի լավ միջոց է դա անել CSS ոճային թերթիկի միջոցով: Օրինակ, նույն էֆեկտը ստանալու համար, ինչ վերը նշված ծածկագիրը, մենք կարող ենք սա դնել մեր CSS ոճաթերթում.

p.red
գույնը ՝ # FF0000;
}

Եվ ապա հիմնական փաստաթղթում օգտագործեք HTML կոդի հետևյալ կտորը.

Կարմիր տեքստ

Այս երկրորդ մեթոդը հիմնականում այն ​​է, թե ինչպես են գործերն արվում Bootstrap- ում.

Էջի ցանկացած տեքստի գույնը փոխելու համար նախ գտնեք այն տեգը, որը պատասխանատու է այդ տեքստը ոճավորելու համար, այնուհետև անցեք ոճաթերթը և փոփոխեք համապատասխան դասը կամ ստեղծեք նոր դաս:.

Ահա մի օրինակ; ասեք, որ ուզում եք փոխել վերնագրի գույնը `ասելով« Ձեր ծառայության մեջ »: Ներկայումս այն սև է, և սա այն ծածկագիրն է, որն օգտագործում է այն.

Ձեր ծառայության մեջ

Իր գույնը փոխելու համար լավագույն միջոցը նոր դաս ստեղծելն է, ասենք, .տեքստային-նարնջագույն և այնտեղ տեղադրիր գույնի արժեքը ՝ այսպես.

.տեքստ-նարնջագույն {
գույնը ՝ # f4623a! կարևոր;
}

* The !կարևոր է համոզվելու է, որ այս գունային պարամետրը կվերջրի ցանկացած այլ գունային կայանք, որն առաջ է եկել.

Այժմ մենք կարող ենք վերադառնալ մեր վերնագրին և դրա կոդը փոխել հետևյալի ՝

Ձեր ծառայության մեջ

Այս փոփոխություններով վերնագիրն այժմ նարնջագույն կլինի.

նարնջագույն հ 2

Տառատեսակը և դրա չափը փոխելու համար դուք կարող եք շատ նման բան անել: Բայց նախ ՝ օրինակ, թե ինչպես է տառատեսակների սահմանման բլոկը կարծես CSS- ում.

.SOMECLASS
font-family: "Merriweather", Roboto, sans-serif;
տառաչափը `18 հատ;
}
  • բեռի տառատեսակներ Merriweather, Ռոբոտո, և համակարգային լռելյայն sans-serif տառատեսակ (կարդացեք սա `վեբ-անվտանգ տառատեսակների մասին իմանալու համար)
  • սահմանեք տառաչափը 18px

Այս տեսակի սահմանումը կարող է տեղադրվել ցանկացած CSS դասի, ինչպես գույնի սահմանումը: Իրականում, տառատեսակի և գույնի սահմանումները հաճախ հանդիպում են նույն դասի հռչակագրերում.

Վերադառնալով մեր նախորդ օրինակին ՝ փոխելու համար այդ վերնագրի համար տառատեսակի չափը, որն ասում է «Ձեր ծառայության մեջ», մենք նախ կարող էինք ստեղծել այսպիսի դաս.

.text-xxl
տառաչափը `50px;
}

Եվ հետո այս դասը նշանակեք վերնագրին.

Ձեր ծառայության մեջ

B Bootstrap- ի կողմից պատրաստված ձևանմուշում գույները կամ տառատեսակները փոխելիս առաջին հերթին նայեք CSS- ի ոճային թերթիկին այն դասերի համար, որոնք կարող են արդեն ապահովել ձեզ այլընտրանքային չափեր կամ գույներ: Օգտագործեք այնտեղ, որտեղ առկա է.

10. Ստեղծեք լրացուցիչ էջեր

Այժմ, երբ դուք ունեք գլխավոր էջը հարմարեցված, ժամանակն է սկսել աշխատել որոշ լրացուցիչ էջերում, այնուհետև դրանք կապել գլխավոր էջի վրա.

HTML- ով և CSS- ով վեբ կայք ստեղծելիս կարող եք կառուցել ենթածրագրերի ցանկացած քանակ, այնուհետև դրանք բոլորին միասին կապել.

Ահա մի քանի ընդհանուր էջեր, որոնք վեբ կայքերի մեծ մասի կարիքն ունեն.

  • էջի մասին
  • Կապ
  • պորտֆոլիո
  • արտադրանք / ծառայություններ
  • թիմ
  • քաղաքականություն (գաղտնիության քաղաքականություն, պայմաններ և այլն)

1. Սկսեք դասավորությունից

Նոր վեբ էջ կառուցելիս առաջին որոշումը, որ դուք պետք է կայացնեք, այն է, թե ինչ եք ուզում դասավորությունը.

HTML և CSS կայքէջ ստեղծելիս ոչինչ չի խանգարում ձեզ կատարելագործվել ինչ էլ որ լինի դասավորությունը, որը ցանկանում եք: Միակ դժվարությունն այն իրականում համատեղելն է.

HTML- ը և CSS- ը կարող են կոշտ գործ ունենալ դատարկ էկրանից սկսելիս, ուստի մենք այստեղ նույնպես կօգտագործենք Bootstrap- ը: Սկզբում մենք ձեզ կցուցադրենք դասավորության ձևավորման որոշ սկզբունքներ, այնուհետև ցույց կտանք, թե ինչպես դա անել Bootstrap- ի միջոցով.

Ձեր վեբ էջերի դասավորության մասին մտածելու ձևը այն համարում է առանձին բլոկների հաջորդականություն `մեկը մյուսի վերևում: Նման մի բան (նկատեք չորս հստակ բլոկը).

դասավորությունը ՝ HTML և CSS կայքէջ ստեղծելիս

Bootstrap- ի մասին հիանալին այն է, որ այն գործադրում է ձեզ համար հիմնական ձևավորման սկզբունքները և արտաքին տեսքի մանրամասները, որպեսզի կարողանաք պարզապես կենտրոնանալ այդ տեղերը ճիշտ տեղերում դնելու վրա:.

Ուղեցույցի այս բաժնում մենք պատրաստվում ենք ստեղծել նոր «մոտ» էջ.

Սկզբնապես, մենք կստեղծենք դասավորության մի շատ հիմնական նախագիծ: Վերը նշվածի նման մի բան.

  • վերևում կա նավիգացիայի մենյու,
  • -անկի տակ լրիվ լայնությամբ վերնագիր բլոկ,
  • հիմնական բովանդակության հատվածը մեջտեղում, բռնցքված էկրանի կենտրոնում (ոչ ամբողջությամբ),
  • և ոտնաման.

Հիմա եկեք կառուցենք այս դասավորությունը HTML- ում.

2. Կառուցեք նոր էջ

Նոր էջի վրա սկսելու ամենադյուրին ճանապարհը գոյություն ունեցող էջը կրկնօրինակելն ու այն որպես ձևանմուշ օգտագործելն է: Դա այն է, ինչ մենք պատրաստվում ենք անել.

Ստեղծեք պատճենը index.html ֆայլը վերանվանեք և վերանվանեք մոտ.html.

Պարզապես, որպեսզի էջերը ավելի հեշտությամբ տարբերվեն այս վաղ փուլում, խմբագրեք նորը մոտ.html մուտքագրեք և փոխեք այն, ինչ կա </code> պիտակ Օրինակ, <code><title>Իմ մասին.

Հիմա եկեք անցնենք ֆայլի տողն առ տող և որոշենք, թե ինչ ենք թողնելու և ինչ ենք հեռացնելու:

  • The նավարկություն ընտրացանկ (ստորև ) Դուք հավանաբար ցանկանում եք պահպանել այս բաժինը անձեռնմխելի, պարզապես բոլոր էջերում նավիգացիայի փորձը միատեսակ դարձնելու համար.
  • The գլխավոր հերոսը բաժին (ստորև ) Դա մենք մեզ պետք չենք ըստ մեր դասավորության նախագծի: Կարող եք առաջ գնալ և ջնջել ամբողջ հատվածը.
  • The մասին բաժին (ստորև ) Մենք պատրաստվում ենք օգտագործել այս հատվածը, որպես մեր հիմնական վերնագիր.
  • The ծառայություններ Բաժին, պորտֆոլիո Բաժին, գործողության կոչ հատված, և Կապ հատված (ամեն ինչի միջև և ) Մեզ այդ բաժինները ընդհանրապես պետք չեն: Կարող եք առաջ գնալ և դրանք ջնջել.
  • The ստորոտ հատվածը և դրա տակ գտնվող ամեն ինչ (ստորև ) Սա մենք պետք է պահենք.

Սա բավականին պարզ է դարձնում մեր ներկայիս ծածկագիրը: Դա հիմնականում սա է.



























Այն, ինչը մեզ այստեղ պակասում է, դա է հիմնական բովանդակությունը Բաժին. Այն կառուցելու համար մենք պատրաստվում ենք օգտագործել վերոհիշյալ հատվածը.

Անցեք առաջ և կազմեք մեր մասին հատվածի օրինակը: Այս մեկը:

...


...

Հիմա առաջին երկու տողը փոխեք դրան.

Քանի որ մենք դրա կարիքը չունենք

վերնագիր այնտեղ և

տարր, եկեք պարզապես հանենք դրանք: Միակ բանը, որ մնացել է այս ամբողջ բլոկի մեջ, կլինի տեքստի պարբերությունը: Այսպես.

Տեքստի պարբերություն.

Երբ պահում եք ֆայլը և այն նայում եք ձեր զննարկչի միջոցով, կտեսնեք, որ դուք հիմնականում ունեք երկու շատ նման բլոկ, մեկը մյուսից ներքև, նույն գույնի ֆոնով.

էջի գլխի մասին

Ավելի լավ է սպիտակ ֆոն ունենալ հիմնական բովանդակության բաժնում: Այն փոխելու համար միակ բանը, որ մենք պետք է անենք, հեռացնելն է bg- առաջնային դասը հիմնականից

պիտակ Այլ կերպ ասած, նշանը դարձրեք հետևյալին.

Դա ավելի լավ է:

էջի գլուխ 2-ի մասին

Եկեք մի քանի կոպիտ պարագրություններ ավելացնենք էջում, որպեսզի այն ևս մի քանիսն ավելացնենք, գումարած, հնարավոր է, ենթախնդիր.

Lorem ipsum dolor sit sit amet, consectetur adipiscing elit...

Proin fermentum, felis ժամանակավոր pharetra lobortis, magna quam hendrerit dolor...

Ենթա

Lorem ipsum dolor sit sit amet, consectetur adipiscing elit...

Ահա, թե սա ինչ տեսք ունի էջում.

1-ի մասին

Եթե ​​ձեզ դուր չի գալիս, որ տեքստը կենտրոնացած լինի, ապա պարզապես հեռացրեք այն տեքստային կենտրոն դասը դասերից մեկի

պիտակները.

2-ի մասին

Եթե ​​ցանկանում եք մի քանի այլ բացթողումներ տեղադրել տեքստի այս բլոկներում, կարող եք ստեղծել CSS- ի նոր դասարաններ (ինչպես նախկինում) և դրանք վերագրել բլոկի պարագրաֆներին: Կամ, դուք կարող եք հայացք գցել ներկայիս ոճային թերթիկին և տեսնել, թե այդ նպատակներն ինչ դասարաններ են արդեն այնտեղ: Ահա նրանք, ում մենք հանձնարարեցինք

և

պիտակները

Lorem ipsum dolor sit amet...

Proin fermentum, felis ժամանակավոր pharetra lobortis, magna quam hendrerit dolor...

Ենթա

Եվ ահա հետևանքները.

3-րդ համարի մասին

Եվս մեկ բան, որ մենք պատրաստվում ենք անել այստեղ ՝ էջի որևէ տեղ պատկեր ավելացնել.

Ահա, թե ինչպես է HTML- ի օրինակելի պատկերային նիշը.


Միանգամայն պարզ է, ճիշտ է: Միակ պարամետրը պատկերի ֆայլի ուղին է: Լավ իրերը կազմակերպված պահելու համար կարող եք տեղադրել ձեր պատկերը իմգ գրացուցակ կրկին (ճիշտ այնպես, ինչպես դուք արել եք այդ ֆոնի հետ որոշ ժամանակ առաջ): Նման դեպքում պատկերի պիտակը կլինի.


Ասվածի համաձայն, այս հատուկ կազմաձևում պատկերի պիտակը բավականին սահմանափակ է: Որպեսզի այն մի փոքր ավելի զտված լինի, եկեք Bootstrap- ի որոշ դասեր հանձնենք դրան: Մասնավորապես.


Այս երկու դասերը կտան ձեր պատկերին կլորացված անկյուններով և նաև համոզվելու են, որ պատկերի չափը չի գերազանցում այն ​​բլոկի չափը, որտեղ այն գտնվում է.

Այժմ կարող եք այսպիսի պիտակ ավելացնել որևէ տեղ ՝ ձեր էջի հիմնական բովանդակության բաժնում: Օրինակ ՝ այստեղ.

Lorem ipsum dolor sit amet...

Proin fermentum, felis ժամանակավոր pharetra lobortis, magna quam hendrerit dolor...

Ենթա

Եվ ահա էջի վերջնական ազդեցությունը.

4-ի մասին

Ահա մեր ամբողջ էջը մեր ամբողջ փառքով.

էջի ամբողջական մասին

3. Հղում դեպի Նոր էջին

Ավարտված նոր էջով, եկեք հիմա այն կապենք գլխավոր էջից ( index.html ֆայլ): Բնականաբար, այս հղումը ավելացնելու լավագույն վայրը նավարկության ցանկում է (ներքևում) ).

Մասնավորապես, փնտրեք այս տողը.

Մասին

Մենք պատրաստվում ենք այն փոխել այս հարցում.

Մասին

Սա մի բան է, որի մասին դեռ չենք խոսել, բայց թեգը հղման նշան է HTML- ում: Օգտագործելով այն, դուք կարող եք հղում կատարել ցանկացած վեբ էջի ՝ տրամադրելով այդ էջի հասցեն հրեֆ պարամետր Հղման տեքստը `հղման սեղմելի մասը, կլինի բացման և փակման միջև եղած տեքստը պիտակները.

Երբ հիմա թարմացնում եք գլխավոր էջը, կտեսնեք, որ ձեր նոր հղումը ցույց է տալիս էջին.

Հետագա ընթերցում.

Այս փուլում դուք ինքներդ ինքներդ եք ստեղծել մի պարզ կայք, որը բաղկացած է երկու էջից ՝ a գլխավոր էջ և ան մասին էջ.

Այն, ինչ հիմա պետք է անեք, լվանալը և կրկնելն է `ստեղծելով նոր էջեր, կարգավորել դրանք, բովանդակություն ավելացնել դրանց վրա, այնուհետև ամեն ինչ կապել նավիգացիայի ցանկից.

Այլ քայլեր, որոնք դուք արժե անել, քանի որ անցնում եք այս քայլերով `HTML և CSS սկզբունքների հետագա ուսուցումն է, ստուգաթերթիկի անցնելը, ինչպես նաև Bootstrap- ը և դրա կառուցվածքները և դասերը սովորելը: Դրա համար որոշ ռեսուրսներ.

  • HTML5 խաբել թերթիկ
  • CSS խաբելու թերթիկ
  • Javascript խաբել թերթիկ
  • HTML ձեռնարկ
  • Bootstrap ձեռնարկը
  • Bootstrap խաբելու թերթիկ

Վարվելով Bootstrap- ին, շատ հավանական է, որ ներկայումս առկա լավագույն ճանապարհն է HTML և CSS օպտիմիզացված և գեղեցիկ կայքեր կառուցելու համար.

Եթե ​​ունեք HTML և CSS կայքէջ ստեղծելու վերաբերյալ որևէ կասկած, մի հապաղեք ներկայացնել դրանք մեկնաբանություններում.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map