Dreamweaver ձեռնարկը


Dreamweaver Tutorial- ը ստեղծում է կայքԻնչպես գիտեք, այս կայքը ամեն ինչի մասին է, թե ինչպես ստեղծել կայք: Դուք կարող եք սովորել տարբեր եղանակներ ՝ օգտագործելով կամ WordPress, Joomla կամ Drupal: Մենք նույնիսկ հին օրերում մաքուր HTML օգտագործելու ուղեցույց ունենք (ակնհայտ է, որ HTML5- ը ՝ վերջին տարբերակը): Սկսնակների համար այս Dreamweaver ձեռնարկում դուք կսովորեք ևս մեկը.


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

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

Սա կլինի երկար ճանապարհորդություն: Այնուամենայնիվ, դուք կզարմանաք, թե որքան արագ կմտնեք այս շատ ինտուիտիվ ծրագրի մեջ.

Contents

Ինչ է Dreamweaver- ը և ինչ կարող է անել?

Մակերեւույթի վրա, Dreamweaver- ը IDE է (զարգացման ինտեգրված միջավայր): Դա նշանակում է, որ դա մի կտոր ծրագիր է, որը համատեղում է տարբեր գործիքներ `վեբ ձևավորումը և զարգացումը դյուրին դարձնելու համար.

Հատկանշականն այն է, որ այն ինչ-որ տեղ CMS- ի միջև է (որտեղ դուք վերահսկում եք ամեն ինչ ձեր վեբ կայքի վերաբերյալ `տեսողական ինտերֆեյսի միջոցով) և զուտ կոդերի խմբագրիչի միջոցով: Ահա, թե ինչպես են աշխատում տարբեր մասերը.

Ստեղծեք վեբ-կայք վիզուալ ձևավորման միջերեսի միջոցով

Տեսողական ձևավորման գործիքատուփը հիմնականում թույլ է տալիս կայքեր ստեղծել մկնիկի միջոցով: Այն թույլ է տալիս տեղադրել կայքի տարրերը Word- ում դասավորություն ստեղծելու ձևով: Ըստ էության, դուք տեսնում եք ձեր վեբ կայքը, ինչպես կտեսնեք զննարկիչում, բայց նաև այն շահագործելու ունակություն ունեք.

Սա շատ օգտակար է, քանի որ այն թույլ է տալիս արագորեն կառուցել կայքի կմախքը և առանց կոդերի մեկ տող գրելու անհրաժեշտության: Փոխարենը, Dreamweaver- ը ինքնաբերաբար կստեղծի ձեզ համար անհրաժեշտ կոդերը: Այդ կերպ, տեսականորեն, դուք կարող եք ձեռքով մի ամբողջ կայք ստեղծել և վերբեռնել այն ձեր սերվերին.

Մյուս կողմից, եթե դուք ի վիճակի եք կոդավորելու, Dreamweaver- ը նույնպես դրա համար ունի բոլոր անհրաժեշտ գործիքները.

Աշխատում է որպես Լրիվ օրենսգրքի խմբագիր

Dreamweaver- ի երկրորդ մասը կոդերի ամբողջական խմբագրիչ է: Այն հագեցած է բոլոր ստանդարտ գործառույթներով, ներառյալ.

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

Dreamweaver- ը աջակցում է վեբ ձևավորման համար ամենակարևոր լեզուները (HTML5, CSS), JavaScript, PHP) և շատ ավելին.

Լավագույն մասը. եթե ձեր կոդով որևէ բան փոխեք, Dreamweaver- ը ինքնաբերաբար կցուցադրի այն նաև տեսողական կողմում: Այդ եղանակով դուք կարող եք այն տեսնել առանց ձեր ֆայլերը սերվեր վերբեռնելու կամ զննարկիչը հրդեհելու.

Կան շատ ավելին գործառույթներ, և դրանցից շատերը կտեսնեք գործնականում ՝ սկսնակների համար Dreamweaver ձեռնարկի առաջիկա ձեռնարկում.

Dreamweaver- ի տեղադրման և վեբ կայքերի ձևավորման գործընթաց (քայլ առ քայլ)

Որպես առաջին քայլ, դուք պետք է ձեռք բերեք Dreamweaver- ը Adobe- ի պաշտոնական կայքից.

Դուք կարող եք անվճար փորձարկում ստանալ այստեղ կամ ձեր Creative Cloud հաճախորդից.

dreamweaver ձեռնարկը սկսնակների գնագոյացման համար

Քայլ 1. Ներբեռնեք և տեղադրեք

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

Եթե ​​արդեն օգտագործում եք Creative Cloud (ինչպես մենք ենք), ապա պարզապես կարող եք սեղմել Փորձեք հաճախորդի ներսում: Այնուհետև, երբ ծրագիրը ավարտվել է տեղադրմամբ, կտտացրեք Սկսեք փորձությունը.

Քայլ 2. Առաջին գործարկման

Երբ դուք առաջին անգամ սկսեք Dreamweaver- ը, կտեսնեք այս էկրանը.

dreamweaver- ի առաջին մեկնարկը

Եթե ​​նախկինում ծրագիրը չեք օգտագործել, ընտրեք Ոչ, ես նոր եմ. Երբ դա անես, Dreamweaver- ը քեզ առաջնորդում է կարգավորումների հրաշագործի միջոցով: Առաջին քայլն այն է, թե արդյոք աշխատուժը պետք է օգտագործի մշակողների համար կամ ստանդարտ աշխատատեղ.

dreamweaver վիդեո ուղեցույցը ընտրում է աշխատանքային տարածքը

Քանի որ սա Dreamweaver սկսնակ ձեռնարկ է, ընտրեք ստանդարտ տարբերակը: Դրանից հետո չորս տարբերակներից կարող եք ընտրել ձեր աշխատավայրի համար գունային թեման.

dreamweaver օդանավակայանի ուղեցույցը ընտրում է գունային սխեման

Վերջնական քայլն այն է, թե արդյոք սկսեք ընտրանքային ֆայլից, նոր կամ գոյություն ունեցող նախագծից կամ դիտելու ձեռնարկ.

dreamweaver օդանավակայանում ուղեցույցի վերջին քայլը

Ընտրեք սկսել նոր կամ գոյություն ունեցող թղթապանակից, և դուք ավարտվում եք տեղադրման գործընթացով: Լավ աշխատանք!

Հիմա եկեք սկսենք նախագիծ և սովորենք, թե ինչպես ստեղծել կայք Dreamweaver- ի հետ.

Քայլ 3. Սկսեք նոր կայք

Առաջին քայլը նոր կայքի ստեղծումն է: Դրա համար գնացեք Կայք> Նոր կայք. Այն ձեզ կստանա այս էկրանին.

ստեղծել նոր կայք dreamweaver- ում

Առաջին քայլը ձեր կայքի անունը տալն է: Այնուհետև պետք է ընտրել, թե որտեղ է այն խնայել: Դա կախված է ձեզանից, բայց սովորաբար իմաստ ունի բոլոր նախագծերը մեկ վայրում պահել պարզության համար.

Հնարավորություն ունեք նաև ձեր նոր նախագիծը ասոցացնել Git պահեստարանի հետ: Սա կարող է լավ գաղափար լինել, քանի որ այն տալիս է ձեզ տարբերակի հսկողություն բայց այժմ կարող եք այն բաց թողնել.

Մենք գործ ունենք ամեն ինչի տակ Սերվերներ ձախ կողմում ավելի ուշ: Նույնը CSS պրոցեսորներ, ինչը կարևոր է միայն այն ժամանակ, երբ օգտագործում ես այդպիսի բան.

Մեզ համար կարևորը դա է Տեղական տեղեկություն տակ Առաջադեմ պարամետրերը.

միացնել կանխադրված պատկերների թղթապանակը dreamweaver- ում

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

Հիմա այդպես է, կտտացրեք Խնայել վերադառնալ ձեր աշխատավայր.

Քայլ 4. Ստեղծեք ձեր էջի ֆայլը

Այժմ, երբ դուք ստեղծել եք ծրագրի կայք, ժամանակն է առաջին ֆայլը: Մենք կսկսենք գլխավոր էջից.

Եթե ​​Dreamweaver- ը ձեզ չի առաջարկում այդ տարբերակը, գնացեք Ֆայլ> Նոր Կարող եք ստեղծել բոլորովին նոր ֆայլ, կամ օգտագործել գոյություն ունեցող ձևանմուշ: Ծրագիրը գալիս է դրանցից մի քանիսի հետ (տե՛ս Սկսնակ կաղապարներ) Հենց հիմա մենք փոխարենը կստեղծենք նորը.

dreamweaver- ում ստեղծել նոր ֆայլ

HTML- ը սահմանված է որպես լռելյայն, և դուք կարող եք թողնել, որ կա: Փաստաթղթի վերնագրի համար մուտքագրեք index.html և ընտրել Ստեղծել. Սա ձեզ կստանա հետևյալ էկրանին.

թարմ նախագիծ dreamweaver- ում

Սա այն գլխարկն է, որը մենք նշեցինք սկզբում. Կենդանի տեսք, թե ինչպիսին է ձեր կայքը (դատարկ, այս պահին) և դրա հետևի ծածկագիրը: Դուք նաև կնկատեք, որ Dreamweaver- ը ինքնաբերաբար ստեղծել է HTML- ի մի քանի հիմնական նշում, որոնց վրա կարող եք կառուցել: Եկեք դա անենք հիմա, այնպես որ մենք ենք?

Քայլ 5. Ստեղծեք վերնագիր

Էջը էջում տեղադրելու համար նախ պետք է ընտրեք դրա գտնվելու վայրը: Կամ կտտացրեք դատարկ էջին (Dreamweaver- ը ինքնաբերաբար կընտրի) տարր, եթե դա անում ես) կամ կուրսորը նույն տարրում դնում էկրանի կոդային մասում.

Դրանից հետո դուք պետք է գնաք դեպի Տեղադրեք ներդիր վերին աջ անկյունում: Սա ձեզ տալիս է ընդհանուր HTML և կայքի տարրերի ցուցակ, որոնք կարող եք ավելացնել ձեր էջին: Ոլորեք ներքև, մինչև կտեսնեք Վերնագիր որպես տարբերակ.

տեղադրեք վերնագրի տարրը dreamweaver- ում

Պարզ կտտացնում է այն էջում: Դուք նաև տեսնում եք, որ այն հայտնվում է HTML փաստաթղթի ներսում.

վերնագիր, որը տեսանելի է տեսողական ինտերֆեյսի և կոդերի խմբագրում

Պարզ, ճիշտ?

Այժմ կփոխեք տեքստը վերնագրի ներսում և այն վերածեք վերնագրի: Երկուսի համար `նախ նշեք տեքստը կոդերի խմբագրում ներքևում.

նշագրեք վերնագրի տեքստը dreamweaver- ում

Դրանից հետո վերադառնալ Տեղադրեք, կտտացրեք սլաքի կողքին Վերնագիր և ընտրել Հ 1. Սա էջի վերնագիրը փաթաթում է H1 HTML պիտակի մեջ: Վերնագրերի վերնագրերի վերաբերյալ լրացուցիչ տեղեկություններ ստանալու համար կարդացեք այս հոդվածը.

Դրանից հետո կարող եք վերնագիր գրել նաև ձեր էջի համար: Ձեր իրական կայքում դուք կընտրեիք նկարագրական որևէ բան հիմնաբառերով և ոչ միայն Բարի գալուստ My Test կայք ինչպես օրինակով.

փոխեց վերնագիրը dreamweaver- ում

Լավ, դուք պարզապես էջի վերնագիր եք ստեղծել: Այս պահին այն դեռ մի փոքր կոպիտ է թվում, այնպես որ եկեք փոխենք հաջորդը CSS- ի միջոցով.

Քայլ 6. Ստեղծեք CSS ֆայլ

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

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

Առաջին քայլը ձեր նոր վերնագիրն է CSS դաս կամ ID: Այդ գործընթացի ընթացքում Dreamweaver- ը նաև հուշում է ձեզ ստեղծել ոճային թերթիկ ֆայլ: Գնացեք դեպի DOM ցանկը էկրանի ստորին աջ մասում, որը թվարկում է ձեր կայքի ամբողջ կառուցվածքը: Համոզվեք, որ ձեր վերնագիրն ընտրված է.

Ուղիղ տեսքով, այժմ կտեսնեք, որ այն կապույտ է, մի փոքր պիտակով և ներքևի մասում նշան.

ավելացնել css ֆայլը dreamweaver- ում

Կտտացրեք գումարած նշանը և մուտքագրեք # գլխաշոր դաշտում, որը բացվում է: Հեշթեգը նշանակում է, որ հանձնարարում եք կատարել id, ի տարբերություն դասի. Սեղմեք enter: Բացման ցանկում ՝ փոխարենը Էջում սահմանեք ընտրեք Ստեղծեք նոր CSS ֆայլ. Թռուցիկ ընտրության մեջ ընտրեք Զննել և նավարկեք ձեր կայքի պանակում: Ապա մուտքագրեք ոճը .css (որը ոճային թերթիկների ստանդարտ անունն է) մեջ Ֆայլի անուն դաշտ և հարվածել Խնայել.

dreamweaver- ում ստեղծել ոճային թերթ

Երբ հիմա ընտրեք Լավ, նոր ֆայլ կհայտնվի ձեր կենդանի տեսքի վերևում: Դուք կարող եք այն դիտել և խմբագրել այնտեղից: Դա կապված կլինի նաև հետ ձեր էջի HTML մասի բաժինը.

կայքէջին ավելացված ոճային թերթ

Awesome տիրույթ. Այժմ դուք պատրաստ եք փոխել ձեր էջի ոճավորումը.

Քայլ 7. Էջի վերնագրի համար Ստեղծեք CSS ընտրիչ

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

Նշեք ձեր H1- ի վերնագիրը ներքևի աջ մասում DOM- ի դիտում (ինչպես նախկինում դա անում եք վերնագրով): Այնուհետև, դրանից վեր, ընտրեք CSS դիզայներ.

պատրաստեք ոճավորումը վերնագրի տարրի համար

CSS ընտրիչ ստեղծելու համար կտտացրեք այն տողի վրա, որտեղ ասվում է Sընտրողներ և ապա կտտացրեք գումարած խորհրդանիշին: Սա ինքնաբերաբար պետք է առաջադրի ընտրողին ձեր անունով #header h1.

dreamweaver- ում ստեղծել css ընտրող

Մտեք մուտք գործելու համար: Կատարած!

Արագ նշում. CSS- ի բոլոր նրանց համար, այս ընտրողը նշանակում է, որ դուք թիրախավորում եք անվանված տարրը հ 1 ներսից կոչված տարրը # գլխաշոր. Այդ կերպ, ինչ էլ որ մուտքագրեք որպես CSS, կիրառվում է միայն գրավոր տեքստի վրա, այլ ոչ թե ընդհանուր վերնագրի տարր.

Քայլ 8. Փոխեք վերնագրի տառատեսակը

Այժմ, երբ դուք ունեք ընտրող, կարող եք հատկություններ դրան: Եթե ​​դուք գիտեք CSS- ի շուրջ ձեր ճանապարհը, ապա պարզապես կարող եք մուտքագրել նշումը ոճը .css և ծրագիրը ինքնաբերաբար հոգ կտանի դրա մասին.

Քիչ փորձառու օգտվողների համար Dreamweaver- ը այն իսկապես դյուրին է դարձնում: Մնացեք այնտեղ CSS դիզայներ ընտրացանկից և հանել այն վանդակը, որտեղ ասվում է Showուցադրել հավաքածուն. Երբ դա անեք, դա կբացվի բազմաթիվ լրացուցիչ ընտրանքներ.

միացնել css տարբերակները dreamweaver- ում

Նոր կոճակներով դուք կարող եք ընտրել շատ CSS հատկություններ `դասավորության, տեքստի, սահմանի և հետին պլանի ոլորտներից: The Ավելին կոճակը հնարավորություն է տալիս ընտրանքներ մուտքագրել ձեր սեփական կանոնները.

Տառատեսակի տեսակը փոխելու համար կտտացրեք Տեքստ տարբերակը վերևում (այլընտրանքով, ոլորեք ներքև): Առաջիկա ընտրանքներում սավառնել տառատեսակ-ընտանիք և կտտացրեք լռելյայն տառատեսակ.

փոխել տառատեսակների ընտանիքը dreamweaver- ում

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

Adobe edge վեբ տառատեսակներ

Այստեղ դուք կարող եք ընտրել անվճար տառատեսակներ Adobe- ի կողմից Edge Վեբ տառատեսակների ծառայություն. Կամ կա՛մ անունով տառատեսակ փնտրեք, կա՛մ ձախից օգտվեք բազմաթիվ զտիչի ընտրանքներից ՝ ձեր ընտրությունը նեղացնելու համար, մինչև ինչ-որ բան չգտնեք.

Typeանկացած տեսակի տիպի կտտոցով այն նշում է այն Dreamweaver- ում ընդգրկվելու համար: Դա անելուց հետո դուք կարող եք ուղղակիորեն օգտագործել դրանք կամ գնալ Պատվերով տառատեսակներ սահմանել ձեր սեփական տառատեսակները.

dreamweaver- ում ստեղծել սովորական տառատեսակների պարկեր

Առայժմ պարզապես հարվածեք Կատարած և հետո կտտացրեք լռելյայն տառատեսակներ նորից Այս անգամ ընտրեք ձեր նախընտրած տառատեսակը և voilá – փոփոխությունը կատարվում է `ներառելով բոլոր անհրաժեշտ կոդավորումը.

dreamweaver- ում փոխված տառատեսակը

Եթե ​​կտտացրեք ձեր վրա ոճը .css ֆայլ վերևում, կտեսնեք, որ ավելացվել է նաև բոլոր նշագրումը.

նորացված ոճային թերթը dreamweaver- ում

Քայլ 9. Կենտրոնացրեք վերնագիրը և փոխեք դրա չափը

Տեքստը դեռ կարող էր ավելի լավ տեսք ունենալ: Հաջորդ խնդիրն այն կենտրոնացնելն է և մեծացնել տառատեսակի չափը: Դրա համար կարող եք նաև օգտագործել մեկ այլ հնարավորություն, որը կոչվում է Արագ խմբագրում.

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

փակագիծ.

բացեք արագ խմբագրման ցանկը dreamweaver- ում

Այստեղ ընտրեք Արագ խմբագրում վերեւում. Դա կբացի CSS- ին, որը կապված է դրա ներքևի այս տարրի հետ: Այժմ դուք կարող եք մուտքագրել լրացուցիչ հատկություններ ՝ առանց որոնելու ամբողջ ոճային թերթիկի ֆայլը (որը կարող է շատ երկար լինել): Տեքստը կենտրոնացնելու և այն ավելի մեծ դարձնելու համար դրան ավելացրեք հետևյալ ծածկագիրը.

տառաչափը `42px;
տեքստային դասավորված. կենտրոն;

Մուտքագրելիս Dreamweaver- ը նաև առաջարկներ կներկայացնի այն, ինչի համար փորձում եք մուտքագրել ՝ այն ավելի դյուրին դարձնելով: Սա ավելի վաղ հիշատակված կոդերի լրացման առանձնահատկությունն է.

Երբ դուք ավարտեք, դա այսպիսին է լինելու.

փոխել css- ը երազում տարածող սարքում արագ խմբագրման միջոցով

Նկատի ունեցեք, որ տեքստն արդեն փոխվել է ուղիղ դիտում: Հիմա սեղմեք Էսք արագ, խմբագրելու և գլուխ հանձնելու ոճը թողնելու համար: Դուք կգտնեք, որ նոր CSS- ն ավելացված է համապատասխան տեղում.

Շատ զով, ճիշտ է?

Ի դեպ, եթե դուք երբևէ վստահ չեք, թե ինչ է նշանակում CSS ունեցվածքը, ապա պարզապես սեղմեք աջով այն և ընտրեք Արագ փաստաթղթեր (կամ սեղմել) Ctrl + K) Dreamweaver- ը հետագայում ձեզ բացատրություն կտա.

dreamweaver- ի արագ փաստաթղթեր

Քայլ 10. Ավելացնել ավելի շատ բովանդակություն

Այն ամենով, ինչ դուք սովորել եք մինչ այժմ, այժմ կարող եք կառուցել խնամակալ կայք: Հանուն այս Dreamweaver ձեռնարկի ՝ մենք արել ենք հետևյալը.

  • Վերնագրերի և պարբերությունների համար կանխադրված տառատեսակներ
  • Նա ավելացրեց նավիգացիայի գիծ և ստեղծեց հղում դեպի դրա էջը
  • Ներսից ևս երկու տուփ պարունակության համար ավելացրեց բաժանման տուփ
  • Տեղափոխվեց նրանցից մեկը ձախ և մեկը ՝ աջով լողալ գույք
  • Սահմանափակեց դրանց լայնությունը տոկոսներով, որպեսզի նրանք կարողանան հորիզոնական դիրքավորել
  • Ձախից ավելացրեք նմուշի վերնագիր և խրտվիլակ տեքստ, ներառյալ չկարգավորված ցուցակ
  • Ստեղծվել է ձև (օգտագործեք ներքևի ներքևի ընտրացանկը Տեղադրեք), տեքստի երկու դաշտ և ներկայացման կոճակ
  • Ավելացվեց տարածություն տարրերի շուրջ `CSS լուսանցքների և լիցքաթափման միջոցով
  • Տրամադրված ֆոնային գույներով և սահմաններով
  • Ստեղծեց ոտնահետք և հեղինակային իրավունքի հաղորդագրություն

Ահա արդյունքը.

առաջադեմ դիզայնով կայք

Օրենսգիրքի օրինակ ՝

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





index.html

 



տուն

Հիմնական բովանդակության նմուշների վերնագիր

Lorem ipsum dolor sit sit amet, consectetur adipiscing elit. Pellentesque scelerisque id is sit amet ornare. Կասեցրու ինձ: Imdiet աճուրդում leo vitae blandit.

  • Tiանկացած ժամանակաշրջանի համար անհրաժեշտ է պահպանել ազատ տարբերակները
  • Կատարյալ բծախնդրություն
  • Duis odio lacus, տարրական հագուստը կիսով չափ ավարտված է
  • Mollis ღირსավորության enim.
  • Quisque molestie suscipit odio vel facilisis

Առաստաղի շղթա, կապույտ կապույտ կապույտ, ինչպես նաև երեք ամսվա ընթացքում, բայց ոչ մի կապ չունի իմ լիգայի մեջ: Ուղղակի id auctor eros, nec porttitor odio. Nunc efficitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.

Գործողության կանչի օրինակ!

Lorem ipsum dolor sit sit amet, consectetur adipiscing elit. Pellentesque scelerisque id is sit amet ornare. Կասեցրու ինձ.

Հեղինակային իրավունք © 2017 Իմ երևակայական կայք

Եվ հետո CSS:

@charset «utf-8»;

մարմին {
ֆոնային գույնը ՝ # F5F5F5;
margin-top: 0px;
մարժայի աջ ՝ 0px;
margin-bottom: 0px;
մարժայի ձախ `0px;
}

փ,
ա,
ուլ,
օլ,
լե,
պիտակ,
մուտք
font-family: muli, sans-serif;
տառատեսակ `նորմալ;
տառատեսակի քաշը ՝ 300;
տառաչափը `17px;
}

h1, h2, h3, h4, h5
font-family: karla, sans-serif;
տառատեսակ `նորմալ;
տառատեսակի քաշը ՝ 400;
տեքստի վերափոխում. մեծատառ;
}

# գլխաշոր {
ծածկոց-վերին մաս `25px;
լիցք-ներքև `25px;
ֆոնային գույնը ՝ #FFFFFF;
սահման-ներքև ՝ 4px պինդ # EB232F;
}

#header h1
font-family: aguafina-script;
տառատեսակ `նորմալ;
տառատեսակի քաշը ՝ 400;
տառաչափը `42px;
տեքստային դասավորված. կենտրոն;
margin-top: 0px;
margin-bottom: 0px;
տեքստի վերափոխում. ոչ մեկը;
}

#navigation {
մարժայի աջ. ավտոմատ;
մարժայի ձախ. ավտոմատ;
առավելագույն լայնությունը `1140px;
margin-top: 10px;
margin-bottom: 10px;
}

#navigation a
գույնը ՝ # EB232F;
}

.հիմնական {
ցուցադրում ՝ բլոկ;
margin-top: 15px;
մարժայի աջ. ավտոմատ;
մարժայի ձախ. ավտոմատ;
margin-bottom: 15px;
պարզ ՝ երկուսն էլ;
արտահոսք `ավտո;
առավելագույն լայնությունը `1140px;
}

.հիմնական # հիմնական-աջ {
բոց: ճիշտ;
լայնությունը ՝ 37,5%;
ցուցադրում ՝ բլոկ;
}

.հիմնական # հիմնական-ձախ
բոց: ձախ;
լայնությունը ՝ 57%;
ցուցադրում ՝ բլոկ;
լիցք աջ `20px;
}

.հիմնական # հիմնական-աջ .cta
տեքստային դասավորված. կենտրոն;
}

.հիմնական # հիմնական-աջ .form
լայնությունը `92%;
մարժայի աջ. ավտոմատ;
մարժայի ձախ. ավտոմատ;
}

# հիմնական-աջ .form div {
margin-bottom: 10px;
}

# հիմնական-աջ .form .label {

}

# հիմնական-աջ .form .textfield {
լայնությունը `100%;

}

.հիմնական # հիմնական-աջ # կոճակ {
տեքստային դասավորված. կենտրոն;
լիցք-վերին մաս `7px;
լիցք-ներքև `7px;
մարժայի ձախ. ավտոմատ;
մարժայի աջ. ավտոմատ;
դիրքը `հարաբերական;
ցուցադրում ՝ բլոկ;
լիցք-աջ `36px;
լիցք-ձախ `36px;
սահման `ոչ;
ֆոնային գույնը ՝ # EB232F;
գույնը ՝ #FFFFFF;
կուրսորը ՝ ցուցիչ;
}

.ստորոտ {
ցուցադրում ՝ բլոկ;
ծածկոց-վերին մաս `25px;
լիցք-ներքև `25px;
տեքստային դասավորված. կենտրոն;
}

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

Քայլ 11. Նախադիտում զննարկիչում և շարժական սարքում

Ինչպե՞ս արեցինք այս ամենը: Դե, առաջին հերթին, մենք մի փոքր ավելի փորձառու ենք կայքեր կառուցելու համար, քան դուք հավանաբար: Հետևաբար, մտքումս արդեն կան քայլեր, թե ինչպես ստեղծել համապատասխան վեբ էջ.

Երկրորդ, մենք օգտագործում ենք շատ օգտակար հատկություն, որն օգնում է ինձ արագացնել գործընթացը. Զննարկչի նախադիտումը: Dreamweaver- ը թույլ է տալիս դիտել ձեր վեբ էջերը իրական ժամանակում զննարկիչում և նույնիսկ բջջային սարքերում.

Սկսելու համար կտտացրեք իրական ժամանակի նախադիտման կոճակը ներքևի աջ անկյունում.

միացնել նախադիտման ցանկը dreamweaver- ում

Սա կբացի նախադիտման ընտրանքները.

dreamweaver- ում իրական ժամանակի նախադիտման ընտրանքները

Բրաուզերի անուններից մեկի կտտոցով կբացվի ձեր կայքի նախագիծը դրա մեջ: Կարող եք նաև սկան QR ծածկագիրը ձեր հեռախոսով կամ պլանշետով (օրինակ ՝ հետ Firefox Quantum- ը) կամ մուտքագրեք ցուցադրված հասցեն ձեր դիտարկիչում ՝ ձեր սարքի ուղիղ նախադիտումը սկսելու համար.

Պարզապես տեղյակ եղեք, որ դրա համար անհրաժեշտ է մուտքագրել ձեր Adobe ID և գաղտնաբառ: Դա պետք է ունենաք Dreamweaver- ում գրանցվելուց.

Լավագույն մասը. Weանկացած փոփոխություն, որը դուք կկատարեք Dreamweaver- ում, ինքնաբերաբար կցուցադրվի զննարկչում, միևնույն ժամանակ, երբ դրանք կկատարեք.

Ինչպե՞ս դա օգնեց ինձ ավելի արագ տեղադրել կայքը: Առաջին հերթին, կախված ձեր էկրանի չափից, զննարկիչը կարող է ավելի մոտ լինել բնօրինակին, քան այն, ինչ տեսնում եք Dreamweaver- ում:.

Երկրորդ, զննարկիչում կայքը ստուգելը թույլ է տալիս օգտագործել ծրագրավորող գործիքներ ՝ փոփոխությունները ստուգելու համար.

մշակողի գործիքները զննարկիչում

Դրանք շատ նման են Dreamweaver- ում տեսածին: Նրանք մեզ ավելի ծանոթ են, որպեսզի մենք կարողանանք ավելի արագ աշխատել նրանց հետ և պարզապես պատճենեք և կպցրեք ծածկագիրը մեր ոճային թերթիկի մեջ.

Հեռախոսի վարկածի հայացքը ցույց է տալիս, որ դեռ շատ աշխատանք կա կատարելու.

բջջային իրական ժամանակի նախադիտում dreamweaver- ում

Սա մեզ բերում է ճիշտ մեր հաջորդ կետի.

Քայլ 12. Ավելացնել մեդիա հարցումներ

Որպեսզի ձեր կայքը բոլոր սարքերում աշխատի, դուք պետք է ավելացնեք այսպես կոչված լրատվամիջոցների հարցումները: Սրանք պայմանական CSS հայտարարություններ են, որոնք զննարկիչներին ասում են, որ ոճին դիմեն միայն էկրանի որոշակի չափերի կամ հատուկ սարքերի վերևում կամ ներքևում: Այդ կերպ Դուք կարող եք փոխել դասավորությունը փոքր էկրաններին.

Մինչ այժմ դուք սահմանել եք միայն համաշխարհային ոճերը: Դա նշանակում է, որ ոճերը, որոնք կիրառվում են ամբողջ կայքում: Այժմ դուք կսովորեք, թե ինչպես ավելացնել պայմանական ոճերը փոքր էկրանների համար.

Նախ գնացեք CSS դիզայներ. Համոզվեք, որ այն ֆայլը, որով ցանկանում եք ավելացնել կոդ, ընտրված է ներքևում Աղբյուրները. Հարված գումարած նշանի տակ @media.

Այն ձեզ տալիս է այս ընտրանքների վահանակը.

լրատվամիջոցների հարցումների ընտրացանկը dreamweaver- ում

Դուք կարող եք սահմանել պայմաններ լրատվամիջոցների հարցումների համար, օրինակ, այն սարքերի համար, որոնց համար նրանք դիմում են, կողմնորոշում, լուծում և այլն: Դուք կարող եք նաև ավելացնել մի քանի պայմաններ `գումարած նշանով.

Մեր օրինակի համար առավել կարևոր է առավելագույն լայնություն կարգաբերում Դրանով դուք ի վիճակի եք սահմանել հատուկ CSS, որը կկիրառվի միայն որոշակի առավելագույն չափի էկրանին.

Եկեք ասենք, որ նախ ուզում եք հեռախոսները շտկել իրերը, այնպես որ մուտքագրեք ա առավելագույն լայնություն 375 պիքսելից: Երբ դա անեք, ներքևում կարող եք տեսնել CSS ծածկագիրը.

ստեղծեք լրատվամիջոցների հարցումը dreamweaver- ում

Ինչ կլինի նաև պատահելիս սեղմելիս Լավ այն է, որ էկրանի վերին մասում կանաչ գիծ է հայտնվում: Սա տեսողականորեն ներկայացնում է լրատվամիջոցների հարցումը: Կտտացրեք այն և էկրանը ինքնաբերաբար անցնում է այդ չափի.

ստեղծել dreamweaver- ում լրատվամիջոցների հարցումներ

Քայլ 13. Ավելացնել պայմանական CSS

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

Դուք կարող եք դա անել այնպես, ինչպես նախկինում եք շահարկել CSS- ը, միայն այս անգամ ակտիվանում եք լրատվամիջոցների հարցումը:.

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

շտկված բջջային դիզայն

Կարծես շատ ավելի լավ է, այդպես չէ՞: Նույն կերպ, դուք կարող եք փոխել էջի մնացած բոլոր տարրերի CSS- ը, որպեսզի բոլորը ճիշտ տեսք ունենան.

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

Pro հուշում. Մի օպտիմիզացրեք որոշակի սարքերի և դրանց չափերի համար, փոխարենը ստեղծեք լրատվամիջոցների հարցումներ `կախված դասավորությունից: Դա նշանակում է, որ խաղում եք էկրանի չափի հետ և հարցումներ ավելացնել այն կետերին, երբ դասավորությունն այլևս լավ չի թվում.

Եվս մեկ բան. Դուք կարող եք նաև մի փոքր ավելի հեշտությամբ ստեղծել լրատվամիջոցների հարցումներ `օգտագործելով նախապես սահմանված սարքի չափերը ներքևի անկյունում և կտտացնելով գագաթին գումարած խորհրդանիշին, երբ գտել եք մի կետ, որտեղ ցանկանում եք ավելացնել մեկը.

ստեղծեք լրատվամիջոցների հարցումներ երազողի մեջ դյուրանցումների միջոցով

Քայլ 14. Վերբեռնեք ձեր կայքը սերվերին

Մենք խորհուրդ ենք տալիս օգտագործել Bluehost- ը (դուստր ձեռնարկություն) ձեր Dreamweaver կայքը հյուրընկալելու համար.

Դիզայնի մասի ավարտից հետո դուք բավականին պատրաստ եք կայքը վերբեռնելու ձեր սերվերին: Ինչպես նշվեց հենց սկզբում, Dreamweaver- ը նույնպես դա շատ հեշտացնում է.

Նախ գնացեք Կայք> Կառավարեք կայքերը. Ընտրեք ձեր ընթացիկ կայքը ցանկից և ընտրեք Խմբագրել ներքևի ձախում: Հաջորդ պատուհանում կտտացրեք Սերվերներ.

հեռավոր սերվերի կազմաձևումը dreamweaver- ում

Մուտքագրեք բոլոր կարևոր տվյալները `ձեր FTP սերվերին միանալու համար: Անունը ձեզնից է, մնացածը (FTP հասցեն, օգտվողի անունը, գաղտնաբառը) գալիս է ձեր հոստինգի մատակարարից: Մի մոռացեք նշել, թե որ ցուցակն է տեղադրել ֆայլերը և ձեր կենդանի կայքի վեբ հասցեն: Վերջին մասը կարևոր է, որպեսզի Dreamweaver- ը կարողանա ստեղծել կայքի համեմատական ​​ներքին հղումներ.

Տակ Առաջադեմ Դուք ունեք ևս մի քանի տարբերակ (արդյոք պահեք ֆայլերը ինքնաբերաբար վերբեռնեք): Դուք սովորաբար կարող եք պահել իրերը այնպես, ինչպես կան: Հիթ Խնայել երկու անգամ, և դուք ավարտվել եք.

Հիմա անցեք դեպի Ֆայլեր վահանակ (կամ վերին աջ կողմում կամ միջոցով) Պատուհան> Ֆայլեր) և կտտացրեք ձեր ամենահին ձախ խորհրդանիշին `ձեր սերվերին միանալու համար.

կայքը վերբեռնեք dreamweaver- ում հեռավոր սերվերի վրա

Կապը հաստատվելուց հետո ընտրեք այն ֆայլերը, որոնք ցանկանում եք վերբեռնել և կտտացրեք վերևում գտնվող սլաքը ՝ դա անելու համար: Դա անելուց հետո ձեր կայքը պետք է հասանելի լինի ձեր վեբ հասցեից.

Լավ արեց: Դուք պարզապես կառուցել և վերբեռնել եք մի պարզ կայք Dreamweaver- ով!

Dreamweaver Tutorial – Վերջնական բառեր

Dreamweaver- ը կայքեր կառուցելու ֆանտաստիկ ծրագիր է: Այն համատեղում է ինտուիտիվ ինտերֆեյսը կոդերի լրիվ խմբագրիչի հետ: Այս խառնուրդի միջոցով այն սկսնակների, միջնորդների և առաջադեմ օգտվողների համար հեշտացնում է բարձրորակ կայքեր կառուցելը.

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

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

Մի մոռացեք. Dreamweaver- ը կայք ստեղծելու ընդամենը մեկ եղանակ է: Դեռ ավելին կան, և այդ մասին շատ տեղեկություններ կարող եք գտնել այստեղ: Հաջողություն!

Դուք նախկինում օգտագործե՞լ եք Dreamweaver- ը: Ինչ է ձեր կարծիքը? Ինչ-որ բան ավելացնել վերը նշվածին: Տեղեկացրեք մեզ ներքևում գտնվող մեկնաբանությունների բաժնում!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map