Ինչպես ստեղծել շաղ տալ էջ վեբ կայքի համար. 8 քայլ (նկարներով)

Բովանդակություն:

Ինչպես ստեղծել շաղ տալ էջ վեբ կայքի համար. 8 քայլ (նկարներով)
Ինչպես ստեղծել շաղ տալ էջ վեբ կայքի համար. 8 քայլ (նկարներով)

Video: Ինչպես ստեղծել շաղ տալ էջ վեբ կայքի համար. 8 քայլ (նկարներով)

Video: Ինչպես ստեղծել շաղ տալ էջ վեբ կայքի համար. 8 քայլ (նկարներով)
Video: Emma Novel by Jane Austen 👧🏼 | Volume Two | Full Audiobook 🎧 | Subtitles Available 🔠 2024, Մայիս
Anonim

Այսպիսով, ցանկանում եք շաղ տալ էջը ձեր վեբ էջում: Splash էջերը ձեր կայքը բրենդավորելու հիանալի միջոց են: Այս How-To- ը ենթադրում է, որ դուք բավականին քիչ HTML և CSS գիտեք, և դա կարող է օգնել, եթե դուք գիտեք նաև հիմնական JavaScript- ը:

Քայլեր

Ստեղծեք Splash էջ վեբ կայքի համար Քայլ 1
Ստեղծեք Splash էջ վեբ կայքի համար Քայլ 1

Քայլ 1. Ստեղծեք ձեր ուրվագծային էջը:

Դուք կարող եք օգտագործել արտաքին CSS (Cascading Style Sheet), բայց այս օրինակում մենք պատրաստվում ենք օգտագործել an ներքին ոճի թերթիկ. Այսպիսով, դուք պետք է սկսեք ձեր հիմնական պիտակներից.

Բարի գալուստ:

Ստեղծեք Splash էջ վեբ կայքի համար Քայլ 2
Ստեղծեք Splash էջ վեբ կայքի համար Քայլ 2

Քայլ 2. Լրացրեք բաժնում առկա CSS և վերնագրի տվյալները:

Դուք ակնհայտորեն պետք է փոխեք արժեքները `ձեր կարիքներին համապատասխան.

Բարի գալուստ:

մարմինը {ֆոնային-գույնը ՝ #DCDCDC}

Բաց թողնված…

Նշում:

Հնարավոր է, որ ցանկանում եք CSS հատկություն ավելացնել տառատեսակների համար:

Ստեղծեք Splash էջ վեբ կայքի համար Քայլ 3
Ստեղծեք Splash էջ վեբ կայքի համար Քայլ 3

Քայլ 3. Ավելացրեք սցենարը `հիմնական էջ տեղափոխվելու համար:

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

Բաց թողնված…

window.onload = timeout;

ֆունկցիայի ընդմիջում () {

window.setTimeout ("վերահղում ()", 5000)}

գործառույթը վերահղում () {

window.location = "Տուն. htm"

վերադարձ}

Բաց թողնված…

Բաց թողնված…

Նշումներ.

Համարը 5000 նշանակում է

Քայլ 5. վայրկյան Փոխեք սա ավելի կարճ կամ երկար ժամանակների համար: Փոխեք վերահղման ֆայլի անունը ձեր հիմնական էջի անվան:

Ստեղծեք Splash էջ վեբ կայքի համար Քայլ 4
Ստեղծեք Splash էջ վեբ կայքի համար Քայլ 4

Քայլ 4. Ավելացրեք վերնագիր:

Սա, հավանաբար, պետք է լինի ձեր վեբ կայքի անվանումը, և դուք պետք է այն ներդիրներով փակեք ՝ որոնիչների համար հեշտ գտնելու համար:

Ստեղծեք Splash էջ վեբ կայքի համար Քայլ 5
Ստեղծեք Splash էջ վեբ կայքի համար Քայլ 5

Քայլ 5. Ավելացրեք նկար:

Սա պետք է ցույց տա, թե ինչի մասին է ձեր կայքը: Կրկին կարող եք օգտագործել

Image
Image

պիտակ

Բաց թողնված…

Նշումներ.

Այս քայլը ենթադրում է, որ դուք պահպանել եք վերնագրի պատկերը նույն թղթապանակում, ինչ որ .htm ֆայլը, և որ այն անվանված է "splashimage.jpg". Կարող եք ավելացնել CSS- ի դիրքավորումը, եթե նախընտրում եք, որ պատկերը լինի որևէ այլ տեղ էկրանին, օրինակ ՝ կենտրոնը:

Քայլ 6. Ավելացրեք կոճակ:

Այս կոճակը այցելուների համար կդառնա հիմնական էջ ավելի արագ հասնելու միջոց: Երբ նրանք սեղմում են այն, դրանք անմիջապես տեղափոխվում են գլխավոր էջ: Այլապես կարող եք ուղղակի հղում տրամադրել գլխավոր էջին:

Բաց թողնված…

Նշում:

Կարող եք փոխել "արժեք" տարր ՝ կոճակի վրա ցուցադրվող տեքստը փոխելու համար:

Ստեղծեք Splash էջ վեբ կայքի համար Քայլ 7
Ստեղծեք Splash էջ վեբ կայքի համար Քայլ 7

Քայլ 7. Ավելացրեք տեքստ:

Սա կարող է լինել այն ամենը, ինչ ձեզ դուր է գալիս: Ընդհանրապես, դա «Շնորհակալություն այցելության համար» ողջույնի կամ «Ստեղծված է…» -ի կողմից ողջույնի խոսք է:

Բաց թողնված…

Շնորհակալություն այցելության համար:

Նշումներ.

Այստեղ կարող եք օգտագործել CSS- ը տեքստի համար: Դուք կարող եք օգտագործել վերնագիր (

) փոխարենը, եթե ցանկանում եք:

Ստեղծեք Splash էջ վեբ կայքի համար Քայլ 8
Ստեղծեք Splash էջ վեբ կայքի համար Քայլ 8

Քայլ 8. Այժմ դուք ունեք աշխատանքային ցայտուն էջ:

Հիմա ժամանակն է գեղեցկացնել այն CSS- ի միջոցով և այն դարձնել կենդանի:

Տեսանյութ - Այս ծառայությունից օգտվելով ՝ որոշ տեղեկություններ կարող են կիսվել YouTube- ի հետ:

Խորհուրդներ

  • Ավելացրեք այնքան բովանդակություն, որքան ցանկանում եք, բայց մի զբաղեցրեք այն չափազանց զբաղվածությամբ:
  • Եթե ցանկանում եք, կարող եք ավելացնել հնչյուններ և տեսանյութեր, բայց դա որոշ մարդկանց համար երկար ժամանակ կտա:
  • Եթե դուք շատ բան չգիտեք HTML- ի կամ CSS- ի մասին, կարող եք օգտագործել Blogger- ի նման առաջնորդվող խմբագիր `այս գործընթացը ավելի պարզեցնելու համար:

Խորհուրդ ենք տալիս: