Ինչպես կատարել կարկանդակ աղյուսակ Excel-ում: Կլորացված անկյուններ, որոնք ավելացնում են տողեր և սյունակներ

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

Ես ձեզ հենց այդպիսի աղյուսակների մասին կասեմ։ Իհարկե, նման սեղան կարելի է պատրաստել մի քանի ձևով, այս մեթոդը, որի մասին ես ձեզ կպատմեմ, ամենապարզն է և ամենագեղեցիկը, քանի որ եթե նման աղյուսակը պատրաստում եք այլ ձևով, ապա ստիպված կլինեք սովորել JAVA-ն։ և միավորեք այն CSS-ի հետ, և այդպիսով ձեր կոդը կդառնա շատ ծանր ու բարդ:

Այս մեթոդը օգտագործում է միայն HTML, բայց մենք ստիպված կլինենք ստեղծել պատկերներ, այսինքն՝ աղյուսակի անկյունները։ Անկյունները ստեղծելու համար մեզ անհրաժեշտ կլինի Photoshop կամ ցանկացած այլ գրաֆիկական ծրագիր, որը ձեզ դուր է գալիս (նույնիսկ MS Point), բայց որպեսզի կարողանաք կառավարել այն: Այս հոդվածում ես ձեզ կասեմ, թե ինչպես դրանք պատրաստել Photoshop-ում:

Եկեք ուղղակիորեն անցնենք աղյուսակի ստեղծմանը: Աղյուսակ ստեղծելու համար բացեք Dreamweaver-ը կամ ցանկացած այլ HTML խմբագրիչ: Մենք ստեղծում ենք նոր փաստաթուղթ կամ բացում ենք արդեն ստեղծվածը և այնտեղ ստեղծում ենք աղյուսակը ինքնին 3 տողով և 2 սյունակով.

Գնացեք Photoshop, վերցրեք Rounded Rectangle Tool-ը և նկարեք կլորացված ուղղանկյուն, իսկ կլորացման շառավիղը դրեք այնպես, ինչպես ուզում ենք, որ աղյուսակը ունենա, ես դրեցի այն 30 պիքսել:

Նախ, ֆոնային շերտը և շերտը միացրեք ուղղանկյուն պատկերով, դա անելու համար շերտերի վահանակում սեղմեք և պահեք Ctrl ստեղնը, ընտրեք վերին և ներքևի շերտը և սեղմեք Ctrl + E:

Այժմ այս ուղղանկյունից մենք պետք է ինքնուրույն հանենք անկյունները, դրա համար վերցնում ենք Recatangular Marquee Tool-ը, վերևի վահանակում ընտրում ենք Style: Fixed Size Width և Height դաշտերում, գրում ենք Radius-ի արժեքները, որոնք դուք նշել եք: Քայլ 2. Սեղմեք պատկերների վրա, ձեր քառակուսու դիմաց կհայտնվի մի կետագիծ, այնպես որ կլորացված անկյունն ամբողջությամբ լինի քառակուսու մեջ:

Սեղմեք Ctrl + C (այն, ինչ կա քառակուսի ներսում, այսինքն՝ մեր անկյունը պատճենելու համար, հիմա պետք է ստեղծենք նոր պատկեր, որպեսզի այնտեղ տեղադրենք նախկինում պատճենված անկյունը, գնացեք՝ File-New...-Ok): և անմիջապես տեղադրեք մեր անկյունը Ctrl + V

Ստեղծված աղյուսակում երկրորդ շարքը պետք է միավորել մեկի մեջ, քանի որ այնտեղ պետք է գրվի տեքստ:
Այժմ մենք տեղադրում ենք մեր պատկերները (անկյունները) մեր սեղանի մեջ:

Տեղադրված նկարները (ներքևից աջ և աջ վերևով) պետք է հավասարեցվեն աջ կողմում:
Այժմ վերջին քայլը. հարկավոր է սեղանին տալ ֆոնի գույն, ինչպես անկյունները:

Լավ, հիմա ամեն ինչ ավարտված է: Այս մեթոդը բոլորից ամենահեշտն է: Հուսով եմ, որ այս հոդվածը ինչ-որ կերպ օգնեց ձեզ, և հուսով եմ, որ ես ամեն ինչ պարզ բացատրեցի: Հաջողություն!

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

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

Կոդ Նկարագրություն Դիտել
div (սահմանային շառավիղ՝ 10px;) Կլորացման շառավիղը միանգամից բոլոր անկյունների համար:
div (սահմանային շառավիղ՝ 0 10px;) Առաջին արժեքը սահմանում է վերևի ձախ և ներքևի աջ անկյունների շառավիղը, երկրորդ արժեքը սահմանում է վերևի աջ և ներքևի ձախ անկյունների շառավիղը:
div (սահմանային շառավիղ՝ 20px 10px 0;) Առաջին արժեքը սահմանում է վերին ձախ անկյունի շառավիղը, երկրորդը և՛ վերին աջը, և՛ ստորին ձախը, իսկ երրորդ արժեքը՝ ստորին աջը:
div (սահմանային շառավիղ՝ 20px 10px 5px 0;) Հերթականորեն սահմանում է վերին ձախ, վերին աջ, ստորին աջ և ստորին ձախ անկյունների շառավիղը:

Օրինակ 1-ը ցույց է տալիս, թե ինչպես կարելի է բլոկ ստեղծել կլորացված անկյուններով:

Օրինակ 1. Բլոկի անկյուններ

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Շառավիղ

Ես I-ի մեղադրական գործի լրացվող ձևն է։


Այս օրինակի արդյունքը ներկայացված է Նկ. 1.

Բրինձ. 1. Բլոկ կլորացված անկյուններով

Հետաքրքիր էֆեկտ կարելի է ստանալ, եթե կլորացման շառավիղը սահմանեք տարրի բարձրության և լայնության կեսից ավելին: Այս դեպքում դուք կստանաք շրջանակ: Օրինակ 2-ը ցույց է տալիս, թե ինչպես կարելի է նկարով շրջանաձև կոճակ ստեղծել:

Օրինակ 2. Կլոր կոճակ

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Կոճակ

Այս օրինակի արդյունքը ներկայացված է Նկ. 2.

Բրինձ. 2. Կլոր կոճակ

Opera բրաուզերում, կլորացվում է դեպի