Դաս 11: Layout

0

Լավ կլիներ չէ՞, եթե Ձեր էջերին կարողանայիք տալ արժանի դասավորություն և գեղեցիկ տեսք։

Ահա, թե ինչպես։

Ձեր կայքին  դասավորվածություն տալու համար օգտագործեք Cascading Style Sheets-ը (CSS), որը կարճ կներկայացնենք այս դասի ընթացքում։ Սակայն ավելի ուշ, դուք կարող եք ուսումնասիրել CSS-ը զրոյից մեր CSS դասընթացների օգնությամբ։ Այնպես որ, այս դասը կրում է ներածական բնույթ։

CSS-ը HTML-ի առավել հետաքրքիր մասն է: Կոդավորման հարցում չկա որևէ հավասարություն այս երկուսի միջև: HTML-ը հիմնական կազմություն է (կոշտ կառուցվածքը), իսկ CSS-ը տալիս է այդ ամենին գեղեցիկ տեսք և հնչերանգ (Layout):

Ինչպես ցույց է տրված 6-րդ դասում, CSS-ը հնարավոր է ավելացնել style ատրիբուտով։ Օրինակ, դուք կարող եք սահմանել տառատեսակի տեսակը և չափը տեքստում։

Օրինակ 1

        <p style=”font-size:20px;”>This is typed in size 20px</p>

        <p style=”font-family:courier;”>This is typed in Courier</p>

        <p style=”font-size:20px; font-family:courier;”>This is typed in Courier size 20px</p>

Բրաուզերում կունենա հետևյալ տեսքը՝

1

Վերը նշված օրինակում մենք օգտագործել ենք style ատրիբուտը ֆոնտի տեսակը բնորոշելու համար (font-family հրամանով) և տառաչափը (font-size հրամանով): Ուշադրություն դարձրեք, թե ինչպես ենք մենք վերջին պարբերությունում սահմանել տառատեսակը և չափը կետ – ստորակետով։

 Թվում է, թե աշխատանքը շա՞տ է։

CSS-ի լավագույն հատկություններից մեկը հնարավորությունն է կառավարել Ձեր layout-երը: style ատրիբուտը յուրաքանչյուր թեգում օգտագործելու փոխարեն, դուք կարող եք մեկ անգամ բրաուզերին ասել, ինչպես դասավորել ամբողջ տեքստը։

Օրինակ 2

 <html>

<head>

          <title>My first CSS page</title>

              <style type=”text/css”> 

                 h1 {font-size: 30px; font-family: arial;}

                 h2 {font-size: 15px; font-family: courier;}

                p {font-size: 8px; font-family: “times new roman”;}

          </style>

</head>

      <body>

        <h1>My first CSS page</h1>

          <h2>Welcome to my first CSS page</h2>

          <p>Here you can see how CSS works </p>

          </body>

</html>

Վերը բերված օրինակում CSS-ը արդեն տեղադրված է գլխամասային հատվածում և կիրառված է ամբողջ էջի համար: Այդ գործողությունը անելու համար, պարզապես օգտագործեք <style type=”text/css”> թեգը, որը մատնանշում է բրաուզերին, որ դուք մուտգրում եք CSS։

Այս օրինակում էջի բոլոր վերնագրերը կլինեն Arial տառատեսակի և կունենան 30px չափ, իսկ բոլոր ենթավերնագրերը՝ Courier 15։ Ամբողջ տեքստը նորմալ պարագրաֆներում կլինի Times New Roman 8 չափսի:

Մեկ այլ հարմար տարբերակ է մուտքագրել CSS-ը առանձին փաստաթղթով: Առանձին CSS փաստաթղթով դուք կարող եք կառավարել մի քանի էջերի դասավորությունը բոլորը միանգամից։ Դա խելամիտ քայլ է, եթե ցանկանում եք փոխել ամբողջ վեբ կայքի և հարյուրավոր էջերի տառատեսակները կամ չափերը։ Ինչևէ, այժմ խոսքը դրա մասին չէ, ավելին իմանալու համար կորող եք կարդալ մեր CSS-ի դասընթացները։

 Ուրիշ ի՞նչ կարելի է անել CSS-ով։

CSS-ը օգտագործվում ոչ միայն տառատեսակի և չափի համար, այլ նաև տարբեր նպատակներով։ Օրինակ, դուք կարող եք ավելացնել գույներ և հետին ֆոն։ Ահա մի քանի օրինակներ՝

        <p style=”color:green;”>Green text</p>

         <h1 style=”background-color: blue;”>Heading on blue background</h1>

         <body style=”background-image: url(‘http://www.html.net/logo.png’);”>

Փորձեք ներմուծել այս օրինակները Ձեր էջերում՝ փորձարկելով այս երկու ձևերը՝ ինչպես ներկայացված է վերևում և ինչպես գլխավոր բաժնում։

Արդյո՞ք CSS-ի միայն գույնն ու տառատեսակն է։ 

Բացի layout-ներ ավելացնելուց ինչպիսիք են գույները, տառատեսակը  և այլն, CSS-ը կարել է օգտագործել էջի կարգավորումները /setup/ և տեսքը վերահսկելու համար (margins, float, alignment, width, height և այլն): Կարգավորելով տարբեր տարրեր CSS-ի հետ դուք ի վիճակի եք ձևավորել ձեր էջերը ճշգրիտ և գեղեցիկ։

Օրինակ 3

<p style=”padding:25px;border:1px solid red;”>I love CSS</p>

Բրաուզերում կունենա հետևյալ տեսքը՝

3float հատկության հետ տարրը կարող է տեղաշարժվել դեպի աջ կամ ձախ։ Ներքևի օրինակը ներկայացնում է սկզբունքը։

Օրինակ 4

                <img src=”bill.jpg” alt=”Bill Gates” style= “float:left;” />

         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore   magna aliquam erat volutpat. Ut wisi enim ad minim veniam,  quis nostrud exerci tation ullamcorper suscipit    lobortis nisl ut aliquip ex ea commodo consequat…</p>

Բրաուզերում կունենա հետևյալ տեսքը՝

4Բերված օրինակում մեկ տարրը (պատկերը) տեղափոխվում է դեպի ձախ, իսկ մյուսը, տարրը (տեքստը) լրացնում ազատ տեղերը։

 Position հատկության շնորհիվ հնարավոր է տեղադրել տարրը էջի ցանկացած հատվածում։

Օրինակ 5

<img src=”bill.jpg” alt=”Bill Gates” style=”position:absolute;bottom:50px;right:10px;” />

Օրինակում պատկերը տեղադրված  50 փիքսել ներքև և բրաուզերից 10 փիքսել աջ։ Սակայն դուք կարող եք տեղադրել այն, որտեղ որ կցանկանաք։ Փորձեք: Հե՞շտ է։

CSS-ը հնարավոր չէ սովորել 10 րոպեում։ Եվ, ինչպես վերը նշվեց, այս դասը, միայն կարճ ներածություն է: Ավելի ուշ կսովորեք շատ ավելին։

Այժմ, կենտրոնացեք HTML-ի վրա և շարժվեք դեպի հաջորդ դասը, որտեղ կսովորեք, թե ինչպես կարելի է տեղադրել Ձեր կայքը ինտերնետում, որպեսզի ամբողջ աշխարհը տեսնի այն։

Հարգելի ընթերցող, խնդրում ենք չմոռանալ like տալ մեր ֆեյսբուքյան էջին, քանի որ նորությունների մեծ մասը առաջինը տեղադրվում է հենց այնտեղ։ Ինչպես նաև հետևեք մեզ այլ սոցիալական ցանցերում և, իհարկե, գրանցվեք մեր բլոգում։

Share.