Կայքեր նախագծելիս հաճախ պետք է լուծել մի հիմնարար հարց. Ինչպիսի՞ն կլինի էջի պահվածքը, երբ այն բացվի էկրանի տարբեր լուծումներով: Այստեղ կա երկու տարբերակ `կայքի« ռետինե »(ձգվող) էջեր կամ ստատիկ: Կքննարկվի առաջին տարբերակը: Ինչ էլ որ նախընտրեք դասավորությանը, ձգվող ձևավորման հիմնական դրույթը հարաբերական մասշտաբայնությունն է:
Դա անհրաժեշտ է
- - HTML- ի իմացություն;
- - html- կոդի խմբագրման ծրագիր:
Հրահանգներ
Քայլ 1
Ընտրեք ձեր կայքի ձևանմուշի հիմնական ֆայլը, որը կարտացոլի հիմնական նշումը: Դա կարող է լինել index.html կամ index.php ֆայլ: Կայքի ձևանմուշների խմբագրման լավագույն տեսողական ծրագրերից մեկը Macromedia Dreamweawer- ն է: Անհրաժեշտ խմբագրումը կկատարվի այս ծրագրի հիման վրա:
Բացեք կաղապարի ֆայլը կամ ստեղծեք նորը ՝ «Պատկեր» - «Նոր» հրամանով, կատեգորիա ՝ «Հիմնական էջ» - «HTML» կամ կատեգորիա «Դինամիկ էջ» ՝ «PHP»: Այստեղ մենք համարում ենք ընդհանուր դեպքը, երբ կայքի կառուցվածքը գրանցվում է երկու ֆայլերից ուղիղ մեկում:
Քայլ 2
Երկար ժամանակ գաղտնիք չէր, որ դասավորության տարբեր տեսակներ կան `սեղանների վրա, բաժանարար բլոկների և համակցված (սեղաններ և բլոկներ միաժամանակ): Html պիտակը պատասխանատու է սեղանի դասավորության համար
Յուրաքանչյուր գույքի համար նշեք տոկոս (100%): Սա կհասնի ցանկացած երկրաչափություն ունեցող էկրանների վրա ավտոմատ ձգվող սեղանի բջիջների ազդեցությանը: Դա կարող է լինել 19 դյույմանոց մոնիտոր կամ սմարթֆոն. Նրանցից յուրաքանչյուրը ճիշտ կվերարտադրի բովանդակությունը:
Քայլ 3
Եթե Ձեզ անհրաժեշտ է ճշգրիտ նշել սեղանի բջիջների համապատասխանությունը, ապա օգտագործեք հետևյալ օրինակը.
| … … 1 բջիջի պարունակությունը: … | … … 2-րդ խցի պարունակությունը: … |
Այստեղ դուք կտեսնեք, որ բջիջներից մեկը նշվում է 30% -ով լայնությամբ ամեն ինչով, որը սահմանված է հենց սեղանի համար: Պարզ հաշվարկը ցույց է տալիս, որ երկրորդ բջիջի համար մնում է 100% -30% = 70%: Հիշեք, որ այս դեպքում սեղանի բջիջներից մեկը չպետք է ունենա լայնության հատկանիշի հավաքածու: Theննարկիչը կկատարի բոլոր հաշվարկները ինքնուրույն և ճիշտ կբարձրացնի աղյուսակը բջիջներով: Սեղանների ներսում պարունակությունը նույնպես տարբեր ձևերով կձգվի և կծկվի:
Քայլ 4
Div դասավորությամբ իրավիճակում պիտակների բլոկները լռելյայն ձգվում են էկրանի ամբողջ լայնությամբ և հետևում են մեկը մյուսի ետևից ձախից աջ, վերևից ներքև: Նրանց երկրաչափությունը կատարելագործելու համար ստեղծեք CCS դաս կամ նույնացուցիչ (ID), որում դուք նշում եք, օրինակ, հատկանիշները և (կամ) տուփի չափի և դիրքի կատեգորիայի համար (Տուփ): Մի մոռացեք նշված ոճը կապել կայքի նշման ֆայլի հետ և դասը (ID) կապել ցանկալի պիտակի հետ: Սովորաբար այն տեղադրվում է սցենարի հենց սկզբում ՝ սահմանելով կայքի հետագա երկրաչափությունը.
… … կայքի բովանդակությունը: …
Կամ այսպես.
… … կայքի բովանդակությունը: …
CSS կանոնի կոդը կլինի հետևյալը.
… Իմ դասարանը {
լայնությունը `30%;
բարձրությունը `50%;
}
#myID {
լայնությունը `30%;
բարձրությունը `50%;
}
