Веб-сайтқа шаблонды қалай салуға болады

Мазмұны:

Веб-сайтқа шаблонды қалай салуға болады
Веб-сайтқа шаблонды қалай салуға болады

Бейне: Веб-сайтқа шаблонды қалай салуға болады

Бейне: Веб-сайтқа шаблонды қалай салуға болады
Бейне: HTML сабақтары #9 - Сурет қоюдың жолдары 2024, Қараша
Anonim

Интернетте веб-сайт шаблондарының саны өте көп, бірақ олардың бір кемшілігі бар - олар бірегей емес. Егер сайт иесі өз сайтының дизайны басқа жерде қайталануын қаламаса, онда ол шаблонға кәсіби дизайнерге тапсырыс бере алады немесе оны өз бетімен жасауға тырысады.

Веб-сайтқа шаблонды қалай салуға болады
Веб-сайтқа шаблонды қалай салуға болады

Бұл қажетті

Adobe Photoshop бағдарламасы

Нұсқаулық

1-қадам

Өзіңіздің шаблоныңызды жасау қиын емес, бірінші көзқараста көрінуі мүмкін. Жұмыс істеу үшін сізге Adobe Photoshop қажет - әрине, онымен жұмыс істеу туралы кем дегенде қарапайым түсінікке ие болуыңыз керек. Бағдарламаны іске қосып, құруды бастамас бұрын, болашақ дизайн туралы алдын ала ойлану керек. Мұның ең қолайлы тәсілі - алдымен кемінде жүз дайын шаблонмен танысу, олардың артықшылықтары мен кемшіліктерін бағалау. Белгілі бір дизайн элементтерінің сәтті шешімдеріне назар аударыңыз. Бұл сіз оларды көшіресіз дегенді білдірмейді, бірақ кейбір әдемі және ыңғайлы шешімдерді негізге алу өте орынды.

2-қадам

Өзгелердің шаблондарын және өзіңіздің шығармашылық қабілеттеріңізді талдау негізінде сіз өзіңіздің сайтыңыздың қалай көрінетіндігі туралы түсінік алуыңыз керек. Кәдімгі А4 парақтарында түрлі-түсті қарындаштармен болашақ дизайнның өрескел эскиздерін жасаған дұрыс. Сіз нақты не салатындығыңызды нақты білгеннен кейін ғана Photoshop-пен жұмыс істей бастауыңыз керек.

3-қадам

Photoshop бағдарламасын іске қосыңыз, 1200x1600 жаңа жоба жасаңыз, мөлдір фон орнатыңыз. Сызғыш құралын қосыңыз, егер ол әлі қосылмаған болса, бұл үшін Ctrl + R пернелер тіркесімін басыңыз. Түсіруді қосу: Көру - Түсіру.

4-қадам

Енді біз үлгіні оның элементтерінің шекараларын көрсететін бағыттаушылармен бөлуіміз керек - жақтар, бағандар және т.б. Мысалы, сіз үлгіні сол жақта тар баған, шаблонның оң жағында кең баған және үстіңгі жағында тақырып үшін орын болатындай етіп бөлгіңіз келеді. Бұл сізге үш тік сызық қажет (шаблонның сол жақ шекарасы, оң және олардың арасындағы сызық) және көлденең, тақырыптың төменгі шекарасын көрсетіңіз. Тік сызықты орнату үшін курсорды сол жақтағы сызғышқа қарай жылжытыңыз, V түймесін басып, пернені басып тұрып, керекті жерге сүйреңіз. Қалған екі тік сызықпен де солай жасаңыз. Көлденеңдері дәл осылай салынған, тек жоғарғы сызғыш қолданылады.

5-қадам

Үлгі үшін фон табыңыз, ол шағын, қайталанатын үлгі болуы керек. Оны Photoshop-та ашыңыз, таңдаңыз, көшіріңіз. Содан кейін шаблонға фонмен толтыру үшін қанша керек болса, сонша рет салыңыз. Қою осылай жасалады: «Өңдеу» - «Қою», содан кейін фон аймағын қажетті орынға сүйреңіз. Ctrl + V пәрмені арқылы кескін салу жылдамырақ. Дәл осылай сайттың тақырыбына фон қосыңыз. Фон жасау үшін әр түрлі градиентті толтырғыштарды қолдануға болады.

6-қадам

Қарындаш құралын қолданып, сызылған сызықтарға назар аударып, шаблонның шекараларын салыңыз (яғни олардың үстіне). Сіз ең қарапайым шаблонның негізін алдыңыз, енді оны қажетті мәліметтермен - навигациялық батырмалармен, мәзір жолдарымен, әр түрлі безендіру элементтерімен және т.б. Түймешіктер мен басқа элементтерді жасау туралы қосымша ақпарат алу үшін Adobe Photoshop бағдарламасымен жұмыс туралы тиісті мақалаларды оқыңыз.

7-қадам

Үлгі құрылды, енді оны html парағына енгізу үшін кесектерге кесу керек. Кесу үшін «Тілімдер» құралын пайдаланыңыз. Оны табу үшін жақтау құралын тінтуірдің оң жақ түймешігімен басып, ашылған мәзірден Қиюды таңдаңыз. Енді сіз үлгіні қалауыңыз бойынша ұяға сала аласыз, содан кейін сақтай аласыз: «Файл» - «Веб үшін сақтау». Ашылған терезеде файл түрін таңдаңыз: HTML & суреттер, файлдың атын көрсетіңіз: index.htm және оны сақтаңыз. Сізде index.htm файлы және кескіндері бар кескіндер қалтасы болады.

Ұсынылған: