Sayt dizayni qanday yaratiladi?

3. Simple Machines. Forum tashkil etish uchun juda qulay CMS. Unda foydalanuvchilar ro’yxatdan o’tishlari, mavzular yaratishlari, mavjud mavzularda o’z firklarini bildirish orqali qatnashishlari va boshqalarning fikrlarini to’ldirishlari mumkin. Bu CMS vBulletin kabi katta imkoniyat va kuchga ega bo’lmasa ham, oddiy darajadan yuqoriroq bo’lgan katta forum saytlarni bemalol boshqara oladi.
Forum uchun o’zbek tilini o’rnatish imkoniyati mavjud, ammo hozircha o’zbek tilidagi rasmiy CMS ishlab chiqilmagan. Tilni faqat dasturga qo’shimcha kiritish orqali o’zgartirish imkoni bor.
Bugungi kunda Simple Machines forum saytlar uchun yengil ishlashi, o’rnatilishi uchun ko’p joy talab qilmasligi va eng asosiysi bepul bo’lganli sababli ham ko’p sonli saytlarning tanloviga aylangan.
Simple Machines CMSni dasturning rasmiy sayti www.simplemachines.org orqali yuklab olishingiz mumkin.
Agar Sayt yaratishni rejalashtirayotgan bo’lsangiz va o’z saytingiz uchun qaysi CMS to’g’ri kelishini bilmayotgan bo’lsangiz, saytingizning hajmi va u orqali foydalanuvchilar qanday ma’lumotlarni olishini rejalashtirayotganingizga qarab o’zingizga ma’qul bo’lgan CMSni tanlang.
CMS tanlash jarayonida faqat Siz tanlamoqchi bo’lgan CMSning shablonlariga, saytning tashqi ko’rinishini belgilaydigan jihatlarigagina emas, balki saytning yengil ishlashi, hostingingizda ko’p joy olmasligi (agar buning zarurati bo’lsa), qidiruv mashinalarida oson ro’yxatdan o’ta olishi, foydalanuvchilar uchun qulayligi, turli brauzerlarda bir hil ko’rinishi kabi muhim jihatlariga ham e’tibor bering.


Veb-sahifalarni loyihalashtirish va juda oddiy va funktsional usulda kodni kiritmasdan yoki tegmasdan ishlash uchun juda ko'p turli xil vositalar mavjud. Ular son-sanoqsiz, ilovalar tomonidan taklif qilingan (Adobe Dreamweaver misol) yoki to'g'ridan-to'g'ri Wix kabi onlayn platformalar orqali. Biroq, veb-dizayner uchun qo'llanma protseduralarini bilish juda muhimdir. HTML5 va CSS veb-saytlar va ochilish sahifalarini joylashtirish uchun asosiy ustunlardir.
Biroq, siz kutganingizdan ko'ra tez-tez Indesign yoki kabi dasturlarga murojaat qilishingiz kerak bo'ladi Adobe fotoshop sizning tartib ishingizni to'ldirish va ularga mukammal ishlov berish uchun. Bugun biz ushbu keng qo'llanmada Adobe Photoshop dasturidan foydalanib veb-sahifani qanday joylashtirishimiz mumkinligini ko'rib chiqamiz. Ushbu birinchi qismda biz Photoshop-da ishlab chiqiladigan ishda qolamiz, ammo kelgusi qismlarda biz ushbu ishni qanday qilib to'g'ridan-to'g'ri HTML kodida qo'llashimiz mumkinligini ko'rib chiqamiz.
Indeks

• 
  1 Simli ramkamizning dizaynidan boshlaymiz
  
• 
  2 Mobil telefonlar uchun o'lchovlar
  
• 
  3 Tabletkalarni o'lchash
  
• 
  4 Statsionar kompyuterlar uchun o'lchovlar
  

Simli ramkamizning dizaynidan boshlaymiz
Veb-sahifaning dizayni va dizaynidan boshlash uchun asosiy elementlarning nima bo'lishini aniqlashdan boshlashimiz juda muhim, bu skelet. Ushbu tuzilma barcha tarkibni (matnli yoki multimedia) saqlashga yordam beradi. Bizning sahifamizni tashkil etuvchi bo'limlarning har biriga aniqlik kiritib, ular ustida to'liq aniqlik bilan ishlashimiz va iloji boricha aniq tasviriy dizaynni taqdim etishimiz mumkin.
Agar u bo'lsa, bizning veb-saytimiz o'lchamlarini hisobga olishimiz juda muhimdir quti yoki to'liq kenglik. Qutidagi veb-sahifa kichik konteyner ichida bo'ladi va shu sababli uning atrofida bo'sh joy paydo bo'ladi. Aksincha, to'liq veb-sahifa sahifani qayta ishlab chiqaruvchi qurilmaning butun ekranini egallaydi. U yoki bu usulni tanlash shunchaki uslubiy savollarga javob beradi va biz ishlayotgan loyihaning ehtiyojlariga ham bog'liq bo'ladi. Ushbu misolda biz qutidagi rejim bilan ishlaymiz, shunda u brauzer tomonidan taqdim etilgan barcha joylarni egallamaydi.

Simli ramkamizni yaratish uchun birinchi navbatda Adobe Photoshop dasturiga kirish va sahifamizga kerakli o'lchamlarni kiritish kerak. Ushbu misolda bizning sahifamiz 1280 piksel kenglikda bo'ladi. Biroq, o'lchamdagi muammo oxirgi manzilga yoki sahifamizni ko'paytirmoqchi bo'lgan qurilmaga qarab farq qilishi mumkin. Hech shubha yo'qki, veb-dizayn funktsional va samarali bo'lishi uchun u bo'lishi kerak javob va u bozordagi barcha qurilmalarga moslashishi kerak. Ammo, bu holda biz statsionar kompyuterda ko'paytiradigan prototipni yaratish ustida ish olib boramiz. Shunday bo'lsa-da, biz javob beradigan masalani keyinroq ko'rib chiqamiz, hozircha ushbu misolda ishlash uchun ekran o'lchamlari iyerarxiyasi. Shuni yodda tutingki, bu holda biz Adobe Photoshop-da ochilish sahifasini joylashtiramiz va keyin HTML5 VA CSS3-ga o'tkazamiz. Ushbu kichik amaliyotning maqsadi fotoshopda yaratilgan dizaynni foydalanuvchi harakatiga javob beradigan, foydalanishga yaroqli va interaktiv veb-dizaynga aylantirishdir.
Youtube kanalimizga obuna bo'ling
Mobil telefonlar uchun o'lchovlar
iPhone 4 va 4S: 320 x 480
iPhone 5 va 5S: 320 x 568
iPhone6: 375x667
iPhone 6+: 414x736
Nexus 4: 384 x 598
Nexus 5: 360 x 598
Galaxy S3, S4, S5: 360x640
HTC One: 360 x 640
Tabletkalarni o'lchash
iPad barcha modellari, shuningdek iPad Mini: 1024 x 768
Galaxy Tab 2 va 3 (7.0 dyuym): 600 x 1024
Galaxy Tab 2 va 3 (10.1 dyuym): 800 x 1280
Nexus 7: 603 x 966
Nexus 10: 800 x 1280
Microsoft Surface W8 RT: 768 x 1366
Microsoft Surface W8 Pro: 720 x 1280
Statsionar kompyuterlar uchun o'lchovlar
Kichik ekranlar (masalan, netbuklarda ishlatiladi): 1024 x 600
O'rta ekranlar: 1280 x 720/1280 x 800
Katta ekranlar: kengligi 1400 pikseldan katta, masalan 1400 x 900 yoki 1600 x 1200.

Veb-maketimizdagi elementlarni tarqatish va bo'limlarni tayinlashni boshlash uchun biz o'qishni va ohangdorlikni ta'minlash uchun mutanosiblikni hisobga olishimiz juda muhimdir. Ko'rish menyusida topishingiz mumkin bo'lgan qoidalar va qo'llanmalardan foydalanishingiz juda muhimdir. Mutanosib va ​​aniq usulda ishlash uchun eng yaxshisi foizlardan ishlaganimiz ma'qul. Bo'limning usulini tanlash uchun biz ko'rish menyusini, so'ngra «Yangi qo'llanma» parametrini bosamiz. Bunday holda biz 25% darajasida to'rtta vertikal bo'linishni amalga oshiramiz va ularni rasmlarimizni pastki qismga va logotipimiz tasvirini sarlavhaga joylashtirish uchun mos yozuvlar sifatida qabul qilamiz.

Bizning hududimizni egallaydigan har bir sohani belgilash uchun kod mavjud model va ularning har biri bajaradigan funktsiya. Masalan, rasm egallaydigan maydonni ko'rsatish uchun biz o'zaro faoliyat xoch bilan to'rtburchaklar hosil qilamiz. Videolarni ma'lum bir hududga qo'shishni xohlayotganimizni ko'rsatish uchun konteynerimiz ichiga ijro etish belgisini kiritamiz. Ushbu birinchi misolda biz faqat tasvirlar bilan ishlashni rejalashtirmoqdamiz, yuqori rasmda siz maydonni ko'rishingiz mumkin logotipi bizning veb-saytimizdan.

Bu bizning yakuniy natijamiz bo'ladi teleframe. Ko'rib turganimizdek, u logotip topiladigan va ikkita yorliq, qidiruv tizimi va qidiruv maydonchasidagi to'rtta tugma bilan birga uy sahifasiga havola bo'lib xizmat qiladigan tasvirdan tashkil topgan sarlavhaga bo'lingan. Bundan tashqari, allaqachon tanada, biz ajratuvchi satrdan tashkil topgan yon panelni va veb-saytimizdagi tarkib turlarini tasniflaydigan bir qator toifalarni kiritdik. Bizning saytimizda mavjud bo'lgan yozuvlarni o'z ichiga olgan raqamlash bilan boshqa bo'lim va nihoyat bizning saytimizdagi eng ko'p meta teglar bilan ro'yxat.
O'z ichiga olgan bo'lim tomonidan aniqlanadigan tarkib sohasidagi o'z-o'zini boshqaradigan tarkib, biz maqolalarimizning mazmunini topamiz. Bunday holda, non yoki maydalangan non (bu veb-saytimizning organik tuzilishini, maqola sarlavhasini, metama'lumotlarni, matn tanasi sifatida paragrafni o'z ichiga olgan rasmni o'z ichiga oladi).
Altbilgi sifatida biz sahifamizning boshqa sohalariga havola sifatida xizmat qiladigan to'rtta rasmni kiritdik. Bu erda biz logotiplarni yoki boshqa qiziqarli bo'limlarni kiritishimiz mumkin. Haqiqatan ham, bu soha ko'proq o'xshash ishlaydi oldingi oyoq, chunki altbilgining o'zi foydalanish siyosati, qonuniy ogohlantirish va mualliflik huquqi bilan biroz pastga tushadi.
Sahifamizning asosiy tuzilishini yoki skeletini aniqlagandan so'ng, keyingi bosqichga o'tishimiz kerak bo'ladi. Bu veb-saytimizning har bir sohasini to'g'ri dizaynidan iborat bo'ladi. Boshqacha qilib aytganda, biz ushbu sohalarning har birini veb-saytimizga nihoyat kiritiladigan tarkib bilan "to'ldirishni" boshlaymiz. Simli kadr ustida ishlashdan oldin ushbu elementlarni ishlab chiqmasligimiz tavsiya etiladi, chunki agar biz buni shu tartibda qilsak, ularning nisbatlarini keyinroq o'zgartirishimiz kerak bo'ladi. Tasvirlarimizni buzish xavfi mavjud va vaqtni yo'qotish yoki undan past sifatli natijaga aylanadigan elementlarning har birining dizaynini qayta ishlashga to'g'ri keladi.
Bunday holda bizning veb-saytimiz dizayni nihoyatda sodda bo'ladi. Biz ishlatamiz moddiy dizayn qoidalari, chunki biz ushbu amaliyotni misol qilish uchun Google logotipidan foydalanamiz. Shuni aniqlik kiritishim kerakki, ushbu o'quv qo'llanmaning maqsadi texnik bilimlarni tasvirlashdir, shuning uchun bu holda estetik natija ahamiyatsiz. Ko'rib turganingizdek, asta-sekin biz o'z sxemamizda ilgari aniqlagan barcha maydonlarni to'ldirdik. Biroq, biz so'nggi daqiqada kichik modifikatsiya qildik. Ehtimol siz sezganingizdek, biz logotipimiz hajmini ancha kamaytirdik va pastki menyuga yuqori menyu bilan mukammal bog'langan bo'linish chizig'ini kiritdik. Bunday holda biz resurslar bankining tugmalari va materiallaridan foydalanganmiz. Dizaynerlar sifatida biz ularni o'zimiz ishlab chiqa olamiz (ayniqsa, ushbu belgi brend tasviri yoki logotipi bilan juda o'xshash tonikni taqdim etishini istasak tavsiya etiladi).

Shuni yodda tutishimiz kerakki, ushbu misolni bayon qilish uchun biz ikki xil darajada ish olib boramiz. Bir tomondan, biz ob'ektlar ustida ishlaymiz, boshqa tomondan veb-saytning tashqi ko'rinishi. Ya'ni, bir tomondan veb-saytimiz skeletida va boshqa tomondan umuman bu skelet qo'llab-quvvatlaydigan suzuvchi elementlar. Hech qanday suzib yurmaydigan joylar borligini ko'rasiz, masalan, bizning yon panelimiz egallaydigan maydon, perefoot yoki sarlavhani tanadan ajratib turuvchi chiziq.

1, 2, 3 va 4-tuzilmalar fon bizning veb-sahifamiz, shuning uchun aslida Adobe Photoshop-dan eksport qilishimiz kerak bo'lmaydi, garchi biz buni qila olsak ham, bu shart emas. Gap haqida gap ketganda Yassi ranglar (Yassi dizayn va moddiy dizaynning muhim xususiyatlaridan biri, ular CSS uslublar jadvalidan foydalangan holda kod orqali mukammal qo'llanilishi mumkin). Biroq, qolgan elementlar keyinchalik HTML kodimizga qo'shilishi uchun saqlanishi kerak. Ushbu kichik diagrammada biz sahifamizning orqa qismiga tegishli maydonlarni ham ko'paytirdik, shunda saytimizning yakuniy ko'rinishi qanday bo'lishi haqida aniq tasavvurga ega bo'lamiz.
Siz tushunganingizdek, Adobe Photoshop-da ushbu sxemani yaratishdan maqsad har bir elementning haqiqiy hajmini olish va har bir elementning joylashuvi va tuzilishini aniqlashtirishdir. Albatta, jarayonning ushbu bosqichida matnli tarkibga o'rin yo'q, chunki bo'lishi kerak edi bizning kod muharririmiz tomonidan taqdim etilgan. Shuni ham ta'kidlashimiz kerakki, ushbu amaliyotda biz tugmalar va statik elementlar bilan ishlaymiz, garchi odatda bu odatda Bootstrap kabi ramkalardan yoki to'g'ridan-to'g'ri Jquery-dan qo'llaniladi.
Veb-sahifamizni tashkil etadigan elementlarning har birini yaratganimizdan so'ng, ularni eksport qilishni va HTML loyiha papkasida joylashgan rasmlar papkasida saqlashni boshlash vaqti keldi. Simli ramkangizdan eksport qilishga odatlanishingiz juda muhim, chunki skelet konfiguratsiyasi asosida ba'zi asl elementlarni o'zgartirishingiz kerak bo'ladi. (Masalan, bu holda biz asl tugmachalarning o'lchamini, logotipini va kompozitsiyaning bir qismi bo'lgan elementlarning aksariyatini, shu jumladan pastki qismdagi rasmlarni o'zgartirdik).
Biz har qanday buyumni ularni o'lchamlari va aniq tarzda saqlash uchun mustaqil ravishda saqlashni o'rganishimiz muhimdir. Har qanday xato, minimal bo'lsa ham, veb-sahifangizning barcha elementlariga ta'sir qilishi mumkin. Shuni yodda tutingki, ular bir-biri bilan bog'liq bo'ladi va mukammal o'lchamlarga ega bo'lishi kerak, shunda ularni yakuniy veb-ga HTML-dan kiritish mumkin. Bunday holda, biz quyidagi elementlarni mustaqil ravishda kesib, saqlashimiz kerak bo'ladi:

• 
  Bizning logotipimiz.
  
• 
  Barcha tugmalar (asosiy menyu tarkibiga kiradiganlar va qolganlari).
  
• 
  Barcha rasmlar.
  

Buni ko'p jihatdan qilishimiz mumkin, ehtimol siz o'zingiz uchun samaraliroq alternativani topasiz. Ammo agar siz ushbu turdagi maketni birinchi marta qilmoqchi bo'lsangiz, quyidagi maslahatlarga amal qilishingizni maslahat beraman.

• 
  Birinchidan, siz bizning sim simli ramkamizni o'z ichiga olgan PSD fayli joylashgan papkaga o'tishingiz va eksport qilmoqchi bo'lgan elementlaringiz sonini ko'paytirishingiz kerak. Bunday holda biz asl nusxadan 12 nusxani yaratdik va ularni o'sha papkada saqladik. Keyin siz nusxalarning har birining nomini o'zgartirasiz va ularning har biriga tarkibidagi element nomini berasiz. Bizning 12 nusxamiz qayta nomlanadi: Asosiy, menyu tugmasi 1, menyu tugmasi 2, qidiruv satri, yuqori tugma 1, yuqori tugma 2, yuqori tugma 3 va yuqori tugma. Qolgan to'rttasi quyidagicha nomlanadi: rasm 4, rasm 1, Rasm 2 va Rasm 3.
  
• 
  Bu amalga oshirilgandan so'ng biz logotip nomi bilan faylni ochamiz.
  
• 
  Biz qatlamlar palitrasiga boramiz va logotipimizni o'z ichiga olgan qatlamni topamiz. Keyin biz bosamiz Ctrl / Cmd biz ushbu qatlamning kichik rasmini bosganimizda. Shu tarzda logotip avtomatik ravishda tanlangan bo'ladi.
  
• 
  Keyingi qadam Photoshop-ga ushbu logotipni aniq tarzda kesib tashlashini xohlashimizni aytishdir. Buning uchun biz faqat tugmachadan yoki buyruqdan chiqib ketish vositasiga qo'ng'iroq qilishimiz kerak bo'ladi C.
  
• 
  Buni amalga oshirgandan so'ng, biz kesilganligini tasdiqlash uchun Enter tugmachasini bosamiz.
  
• 
  Endi biz qanday qilib saqlashni bosish uchun yuqori Fayl menyusiga o'tamiz. Biz nomni tanlaymiz, bu holda u "Logo" bo'ladi va biz formatini tayinlaymiz PNG, Internetda eng yuqori sifatni taqdim etadigan fayl bo'lgani uchun.
  
• 
  Jarayonni barcha nusxalar va elementlar bilan takrorlaymiz. Sochingizni kesganingizda, palitramizdagi qolgan qatlamlar ekanligiga ishonch hosil qiling ko'rinmas yoki yo'q qilingan. Shu tarzda har bir elementni shaffof fon bilan saqlashimiz mumkin.
  

Bunday holda biz qatlamlar palitrasidan menyu tugmachamiz 2 ni tanlaymiz. Tugmachamizning chegaralari avtomatik ravishda qanday tanlanganligini skrinshotda ko'rishingiz mumkin.

S tugmachasidan kesish vositasini tanlaganimizdan so'ng, bizning tuvalimiz faqat tugmachamiz o'lchamlariga qisqartiriladi.

Endi veb-saytimiz tarkibiga kiradigan va ularni rasmlar papkasiga qo'shadigan va keyinroq foydalanadigan barcha elementlarni birma-bir saqlash vaqti keldi. Biz kodimizdan qo'ng'iroqlarni amalga oshiramiz va tartibimizni davom ettiramiz, ammo bundan buyon bizning kod muharririmiz.
Jarayonni umuman intuitiv holga keltiradigan veb-sahifani joylashtirish uchun ko'plab vositalar va alternativalar mavjud bo'lsa-da, biz buni amalga oshirishni o'rganishimiz juda muhimdir qo'llanma. Shu tarzda biz veb-sahifani loyihalashda qanday asoslar borligini bilib olamiz.