വ്ലാഡ് മെർഷെവിച്ച്
മൂന്ന് നിരകളുള്ള ഫ്ലൂയിഡ് ലേഔട്ട് ഒരുപക്ഷേ ലഭ്യമായ ഏറ്റവും വഴക്കമുള്ളതും ഇഷ്ടാനുസൃതമാക്കാവുന്നതുമായ ലേഔട്ടാണ്. നിരകളുടെ വീതി വ്യക്തമാക്കുന്നതിന് ശതമാനങ്ങളുടെയും പിക്സലുകളുടെയും സംയോജനം വ്യത്യസ്ത ലേഔട്ടുകൾ സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, നിങ്ങളുടെ ആവശ്യങ്ങൾക്കനുസരിച്ച് അവ തിരഞ്ഞെടുക്കുന്നു. ചിത്രത്തിൽ. 5.17 സൗകര്യാർത്ഥം മൂന്ന് നിര ലേഔട്ടുകൾക്കുള്ള ഓപ്ഷനുകൾ കാണിക്കുന്നു, അവ അക്കമിട്ടിരിക്കുന്നു.
അരി. 5.17 മൂന്ന് കോളം ലേഔട്ടുകൾ
ഇവിടെ ശതമാനം ചിഹ്നം (%) അർത്ഥമാക്കുന്നത് നിരയുടെ വീതി, ലേഔട്ട് വീതിയുടെ ശതമാനമായി വ്യക്തമാക്കുന്നു, px - നിരയുടെ വീതി പിക്സലുകളിലും, കോളം ശേഷിക്കുന്ന ഇടം ഉൾക്കൊള്ളുന്ന അനന്ത ചിഹ്നം (∞) ആണ്. വ്യത്യസ്ത ലേഔട്ടുകളുടെ സമൃദ്ധി ഉണ്ടായിരുന്നിട്ടും, അവയുടെ നിർമ്മാണത്തിൻ്റെ തത്വങ്ങൾ ഒന്നുതന്നെയാണ്, കൂടാതെ രണ്ട് പ്രധാന രീതികളും ഉൾപ്പെടുന്നു: പൊസിഷനിംഗ്, ഫ്ലോട്ടിംഗ് ഘടകങ്ങൾ. തുല്യ ഉയരമുള്ള നിരകൾ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് പട്ടികകൾ ഉപയോഗിക്കാം.
പൊസിഷനിംഗ് ഉപയോഗിക്കുന്നുബന്ധപ്പെട്ട പാളികളുടെ സ്ഥാനം നിയന്ത്രിക്കുന്നതിന് മാതൃ ഘടകംമാതാപിതാക്കൾ സജ്ജമാക്കാൻ അത്യാവശ്യമാണ് സ്ഥാനം സ്വത്ത്മൂല്യം ആപേക്ഷികമായി , ഒപ്പം കുട്ടികളുടെ ഘടകങ്ങൾ, ഏത് നിരകൾ രൂപപ്പെടുത്തുന്നു, മൂല്യം കേവലമാണ് . ആദ്യത്തെ നാല് ലേഔട്ടുകളുടെ കോഡ് ഘടന സമാനമായിരിക്കും, ഉദാഹരണം 5.13-ൽ അവതരിപ്പിച്ചിരിക്കുന്നു.
ഉദാഹരണം 5.13. പിക്സലിൽ രണ്ട് കോളങ്ങൾ അല്ലെങ്കിൽ ശതമാനത്തിൽ മൂന്ന്
മൂന്ന് കോളങ്ങൾ സൈറ്റ് ഹെഡർ കോളം 1 കോളം 2 കോളം 3
ഇവിടെ നിരകൾ ക്രമത്തിൽ അക്കമിട്ടിരിക്കുന്നു, അതായത്. കോളം 1 ഇടതുവശത്താണ്, കോളം 2 മധ്യഭാഗത്തും കോളം 3 വലതുവശത്തുമാണ്.
പൊസിഷനിംഗിന് ഈ രീതിയുടെ ഉപയോഗം പരിമിതപ്പെടുത്തുന്ന ഒരു പ്രത്യേക പോരായ്മയുണ്ട് - ഒരു അടിക്കുറിപ്പ് ചേർക്കുമ്പോൾ, അത് നിരകൾക്ക് കീഴിൽ മറയ്ക്കപ്പെടും. കാരണം, ലേഔട്ട് ലെയറിന് അത്ര ഉയരം ഇല്ല, അതിനാൽ അത് ഫൂട്ടർ ലെയറിനെ താഴേക്ക് തള്ളുന്നില്ല. ഒരു പേജിൽ ഒരു അടിക്കുറിപ്പ് തീർത്തും ആവശ്യമാണെങ്കിൽ, ഫ്ലോട്ടിംഗ് ഘടകങ്ങളെ അടിസ്ഥാനമാക്കി നിങ്ങൾ ഒരു നിര നിർമ്മാണ രീതി ഉപയോഗിക്കണം. ബഗുകൾ കാരണം ഈ രീതി IE6-ലും പ്രവർത്തിക്കുന്നില്ല.
ലേഔട്ട് നമ്പർ 1 ന്, അതിൽ ആദ്യ നിരയുടെ വീതി റബ്ബറും ബാക്കിയുള്ളവ ഉറപ്പിച്ചതുമാണ്, ശൈലി ഇപ്രകാരമായിരിക്കും (ഉദാഹരണം 5.14).
ഉദാഹരണം 5.14. ലേഔട്ട് നമ്പർ 1
തലക്കെട്ട് (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (സ്ഥാനം: ബന്ധു; /* ആപേക്ഷിക സ്ഥാനനിർണ്ണയം */ ) .ലേഔട്ട് DIV (സ്ഥാനം: കേവലം; /* സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയം */ ) .col1 (പശ്ചാത്തലം: #C7E3E4; /* പശ്ചാത്തല നിറം * / ഇടത്: 0; /* ഇടത് എഡ്ജ് സ്ഥാനം */ വലത്: 300px; /* വലത് എഡ്ജ് സ്ഥാനം */ .col2 (പശ്ചാത്തലം: #E0D2C7; വീതി: 200px; /* നിര വീതി */ വലത്: 100px; /* ഇടത് കോളം വീതി 3 */ ) .col3 (പശ്ചാത്തലം: #ECD5DE; വീതി: 100px; വലത്: 0; )
തന്നിരിക്കുന്ന വീതിയുള്ള നിരകൾക്ക് വീതി പ്രോപ്പർട്ടി ഉണ്ട്, ഇടത് അല്ലെങ്കിൽ വലത് വശത്തുള്ള അവയുടെ സ്ഥാനം യഥാക്രമം ഇടത് അല്ലെങ്കിൽ വലത് പ്രോപ്പർട്ടി വ്യക്തമാക്കുന്നു. ശേഷിക്കുന്ന നിരയുടെ റബ്ബർ വീതി ഒരേസമയം ഇടത്തും വലത്തും ചേർത്താണ് നിർമ്മിച്ചിരിക്കുന്നത്, അതിൻ്റെ മൂല്യങ്ങൾ നിശ്ചിത നിരകളുടെ വീതിക്ക് തുല്യമാണ്.
ലേഔട്ടുകൾ നമ്പർ 2 (ഉദാഹരണം 5.15), നമ്പർ 3 (ഉദാഹരണം 5.16) എന്നിവ ഒരേ തത്വത്തിലാണ് നിർമ്മിച്ചിരിക്കുന്നത്.
ഉദാഹരണം 5.15. ലേഔട്ട് നമ്പർ 2
ഹെഡർ (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (സ്ഥാനം: ബന്ധു; ) .ലേഔട്ട് DIV (സ്ഥാനം: കേവലം; ) .col1 (പശ്ചാത്തലം: #C7E3E4; വീതി: 100px; ) .col2 (പശ്ചാത്തലം: #E0D2C7; ഇടത്: 100px; വലത്: 200px;).col3 (പശ്ചാത്തലം: #ECD5DE; വീതി: 200px; വലത്: 0; )
ഉദാഹരണം 5.16. ലേഔട്ട് നമ്പർ 3
തലക്കെട്ട് (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (സ്ഥാനം: ബന്ധു; ) .ലേഔട്ട് DIV (സ്ഥാനം: കേവലം; ) .col1 (പശ്ചാത്തലം: #C7E3E4; വീതി: 100px; ) .col2 (പശ്ചാത്തലം: #E0D2C7; വീതി: 200px; ഇടത്: 100px; .col3 (പശ്ചാത്തലം: #ECD5DE; ഇടത്: 300px; വലത്: 0; )
എല്ലാ നിരകളുടെയും വീതി ശതമാനമായി സജ്ജീകരിച്ചിരിക്കുന്ന ലേഔട്ട് നമ്പർ 4 ന് ചില സൂക്ഷ്മതകളുണ്ട്. എല്ലാ നിരകളുടെയും ഒരേ വീതി ആവശ്യമാണെങ്കിൽ, അത് ഫ്രാക്ഷണൽ ആയി സജ്ജീകരിക്കാം (33.33%), പക്ഷേ ഓപ്പറ ബ്രൗസർഫ്രാക്ഷണൽ ശതമാനം മൂല്യങ്ങളുമായി പ്രവർത്തിക്കാൻ കഴിയില്ല, അതിനാൽ നിരകൾക്കിടയിൽ "ദ്വാരങ്ങൾ" ദൃശ്യമാകും (ചിത്രം 5.18).
അരി. 5.18 നിരയുടെ വീതി ഫ്രാക്ഷണൽ ശതമാനത്തിൽ വ്യക്തമാക്കിയിരിക്കുന്നു
അത്തരം സാഹചര്യങ്ങളിൽ, നിങ്ങൾ അസമമായ ഷെയറുകളിലേക്ക് മാറണം, ഉദാഹരണത്തിന്, 33%, 34%, 33%, ഉദാഹരണം 5.17 ൽ കാണിച്ചിരിക്കുന്നത് പോലെ.
ഉദാഹരണം 5.17. ലേഔട്ട് നമ്പർ 4
തലക്കെട്ട് (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (സ്ഥാനം: ബന്ധു; ) .ലേഔട്ട് DIV (സ്ഥാനം: കേവലം; ) .col1 (പശ്ചാത്തലം: #C7E3E4; വീതി: 33%; ) .col2 (പശ്ചാത്തലം: #E0D2C7; ഇടത്: 33 %; വീതി: 34%; .col3 (പശ്ചാത്തലം: #ECD5DE; വലത്: 0; വീതി: 33%;
ചില ബ്രൗസറുകളിൽ, കോളങ്ങൾക്കിടയിൽ ഒരു ചെറിയ വിടവ് പ്രത്യക്ഷപ്പെടാം. പൂർണ്ണ ശതമാനം മൂല്യങ്ങളേക്കാൾ ഫ്രാക്ഷണൽ ഉപയോഗിച്ച് ഇത് പരിഹരിക്കാനാകും, അതായത്. 33% ന് പകരം 33.3%.
ബാക്കിയുള്ള ലേഔട്ടുകൾ, അതിൽ മൂന്ന് നിരകളിൽ രണ്ടെണ്ണം റബ്ബറാണ്, പ്രതിനിധീകരിക്കുന്നു പ്രത്യേക ഗ്രൂപ്പ്, കാരണം അവയെ വ്യത്യസ്ത രീതികളിൽ വ്യാഖ്യാനിക്കാം. അങ്ങനെ, ഒരു നിരയുടെ വീതി പിക്സലുകളിൽ സൂചിപ്പിച്ചിരിക്കുന്നു, മറ്റൊന്ന് ലേഔട്ട് വീതിയുടെ ശതമാനമായി, ശേഷിക്കുന്ന നിരയുടെ വീതി യാന്ത്രികമായി കണക്കാക്കുന്നു. ചിത്രത്തിൽ. ലേഔട്ട് നമ്പർ 5 ൻ്റെ ഉദാഹരണം ഉപയോഗിച്ച് നിരകളുടെ വീതി കണക്കാക്കുന്നതിനുള്ള വ്യത്യസ്ത സമീപനങ്ങൾ ചിത്രം 5.19 കാണിക്കുന്നു.
അരി. 5.19 രണ്ട് റബ്ബർ നിരകളുടെ വീതി
ആദ്യ ഓപ്ഷനിൽ, ആദ്യ നിരയുടെ വീതി ലേഔട്ട് വീതിയുടെ ശതമാനമായി സജ്ജീകരിച്ചിരിക്കുന്നു, രണ്ടാമത്തെ നിരയുടെ വീതി യാന്ത്രികമായി കണക്കാക്കുന്നു, മൂന്നാമത്തെ നിരയ്ക്ക് പിക്സലുകളിൽ ഒരു നിശ്ചിത വീതിയുണ്ട്. രണ്ടാമത്തെ ഓപ്ഷനിൽ, നിരകൾ പരസ്പരം മാറുന്നു, ആദ്യ നിരയുടെ വീതി യാന്ത്രികമായി കണക്കാക്കുന്നു. മൂന്നാമത്തെ ഓപ്ഷൻ റബ്ബർ നിരകളുടെ മൊത്തം വീതി 100% ആയി കണക്കാക്കുകയും അതിൽ നിന്ന് ഒന്നാമത്തെയും രണ്ടാമത്തെയും നിരകളുടെ വീതി കണക്കാക്കുകയും ചെയ്യുന്നു.
പിക്സലുകളിൽ രണ്ട് നിരകളുള്ള കോഡിന് സമാനമായി ആദ്യത്തേയും രണ്ടാമത്തെയും ഓപ്ഷനുകൾ എളുപ്പത്തിൽ നടപ്പിലാക്കാൻ കഴിയും. px-ൽ വീതിക്കുപകരം ഞങ്ങൾ % സൂചിപ്പിക്കുന്നു. ഉദാഹരണം 5.18, ആദ്യ കോളം ഒരു ശതമാനമായി സജ്ജീകരിച്ചിരിക്കുന്ന ലേഔട്ട് ശൈലി നമ്പർ 5 കാണിക്കുന്നു.
ഉദാഹരണം 5.18. ലേഔട്ട് നമ്പർ 5. രണ്ടാമത്തെ നിരയുടെ വീതി കണക്കാക്കുന്നു
ഹെഡർ (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (സ്ഥാനം: ബന്ധു; ) .ലേഔട്ട് DIV (സ്ഥാനം: കേവലം; ) .col1 (പശ്ചാത്തലം: #C7E3E4; വീതി: 50%; ) .col2 (പശ്ചാത്തലം: #E0D2C7; ഇടത്: 50 %; വലത്: 200px; .col3 (പശ്ചാത്തലം: #ECD5DE; വലത്: 0; വീതി: 200px; )
കണക്കാക്കിയ ആദ്യ നിരയുള്ള ലേഔട്ട് ശൈലി #5 ഉദാഹരണം 5.19-ൽ കാണിച്ചിരിക്കുന്നു.
ഉദാഹരണം 5.19. ലേഔട്ട് നമ്പർ 5. ആദ്യ നിരയുടെ വീതി കണക്കാക്കുന്നു
തലക്കെട്ട് (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (സ്ഥാനം: ബന്ധു; ) .ലേഔട്ട് DIV (സ്ഥാനം: കേവലം; ) .col1 (പശ്ചാത്തലം: #C7E3E4; ഇടത്: 0; വലത്: 200px; മാർജിൻ-വലത്: 50%; ) . col2 (പശ്ചാത്തലം: #E0D2C7; വീതി: 50%; വലത്: 200px; ) .col3 (പശ്ചാത്തലം: #ECD5DE; വീതി: 200px; വലത്: 0; )
ആദ്യ നിര ശരിയായ പ്രോപ്പർട്ടി വഴി വലത്തേക്ക് സജ്ജമാക്കാൻ കഴിയില്ല, കാരണം മൂല്യം 50%+200px ആയിരിക്കും; അതിനാൽ, ഞങ്ങൾ ഫോക്കസ് പ്രയോഗിക്കും - ഞങ്ങൾ വലതുവശത്തുള്ള ആദ്യ പാളി വലത് വഴി 200px വീതിയിലേക്ക് പരിമിതപ്പെടുത്തുകയും മാർജിൻ-വലത് ഉപയോഗിച്ച് രണ്ടാമത്തെ നിരയുടെ 50% വീതി ഉപയോഗിച്ച് ഇടത്തേക്ക് നീക്കുകയും ചെയ്യും. ഞങ്ങളുടെ പാളി തികച്ചും സ്ഥാനത്താണ്, അതിനാൽ അത്തരം കൃത്രിമങ്ങൾ ഒരു തരത്തിലും വീതിയെ ബാധിക്കില്ല.
രണ്ട് റബ്ബർ നിരകളുള്ള മൂന്നാമത്തെ ഓപ്ഷന് ഒരു അധിക പാളിയുടെ സാന്നിധ്യം ആവശ്യമാണ്, അതിനെ റബ്ബർ എന്ന് വിളിക്കാം, ആപേക്ഷികമായി നിരകളുടെ വീതി സജ്ജമാക്കും (ഉദാഹരണം 5.20).
ഉദാഹരണം 5.20. ലേഔട്ട് #5: രണ്ട് നിരകളുടെ ശതമാനം വീതി
മൂന്ന് നിരകൾ .തലക്കെട്ട് (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (സ്ഥാനം: ബന്ധു; 60%;
ലേഔട്ട് നമ്പർ 6 ൻ്റെ നിർമ്മാണം ലേഔട്ട് നമ്പർ 5 ന് സമാനമാണ്, അതിനാൽ ഞങ്ങൾ അതിൽ വസിക്കില്ല. ലേഔട്ട് നമ്പർ 7 നെ സംബന്ധിച്ചിടത്തോളം, ബുദ്ധിമുട്ട് ഉണ്ടാക്കുന്ന ഒരു ഓപ്ഷൻ ഉണ്ട്. ഇടത്, വലത് നിരകളുടെ വീതി കണക്കാക്കി പരസ്പരം തുല്യമാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോൾ ഇത് കേസിന് ബാധകമാണ്. ഇത് ചെയ്യുന്നതിന്, ഒന്നാമത്തെയും മൂന്നാമത്തെയും നിരകളുടെ വീതി 50% (ചിത്രം 5.20) തുല്യമാക്കണം.
അരി. 5.20 തുല്യ വീതിയുള്ള നിരകളുള്ള ലേഔട്ട് നമ്പർ 7
രണ്ടാമത്തെ കോളത്തിന് ഇടം നൽകുന്നതിന്, ആദ്യ കോളത്തിന് മാർജിൻ-വലത് പ്രോപ്പർട്ടിയും മൂന്നാമത്തേതിന് മാർജിൻ-ലെഫ്റ്റും ഞങ്ങൾ ഉപയോഗിക്കും. ഈ ഗുണങ്ങളുടെ മൂല്യം രണ്ടാമത്തെ നിരയുടെ പകുതി വീതിയായിരിക്കും. അതിനാൽ, ഇത് 200px ന് തുല്യമാണെങ്കിൽ, ഫലം മാർജിൻ-വലത് : 100px ആയിരിക്കും (ഉദാഹരണം 5.21).
ഉദാഹരണം 5.21. ലേഔട്ട് നമ്പർ 7. റബ്ബർ നിരകളുടെ വീതി ഒന്നുതന്നെയാണ്
തലക്കെട്ട് (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (സ്ഥാനം: ബന്ധു; ) .ലേഔട്ട് DIV (സ്ഥാനം: കേവലം; ) .col1 (പശ്ചാത്തലം: #C7E3E4; ഇടത്: 0; വലത്: 50%; മാർജിൻ-വലത്: 100px; ) . col2 (പശ്ചാത്തലം: #E0D2C7; വീതി: 200px; ഇടത്: 50%; മാർജിൻ-ഇടത്: -100px; ) .col3 (പശ്ചാത്തലം: #ECD5DE; ഇടത്: 50%; വലത്: 0; മാർജിൻ-ഇടത്: 100px; )
വീതി പ്രോപ്പർട്ടി നേരിട്ട് ഉപയോഗിക്കാൻ കഴിയില്ല, കാരണം ഒരു മാർജിൻ ചേർക്കുന്നത് നമുക്ക് ആവശ്യമുള്ളത് വീതി കൂട്ടും, കുറയ്ക്കില്ല. അതിനാൽ, വീതി വ്യക്തമാക്കിയത് ഒരേസമയം രൂപംകൊള്ളുന്നു ശേഷിക്കുന്ന പ്രോപ്പർട്ടികൾശരിയാണ് . രണ്ടാമത്തെ നിരയുടെ സ്ഥാനം ഉപയോഗിച്ച്, ഇടത് അല്ലെങ്കിൽ വലത് മൂല്യം വ്യക്തമാക്കുന്നതിൽ ബുദ്ധിമുട്ടുകൾ ഉണ്ട്, കാരണം അത് 50% -200px ന് തുല്യമായിരിക്കും. അതിനാൽ ഞങ്ങൾ ഇടത് മാർജിൻ സ്ഥാനം 50% ആക്കി (ഇടത്: 50% ), തുടർന്ന് മാർജിൻ-ലെഫ്റ്റ് പ്രോപ്പർട്ടി (മാർജിൻ-ഇടത്: -100px) ഉപയോഗിച്ച് മുഴുവൻ കോളവും അതിൻ്റെ പകുതി വീതിയിൽ ഇടത്തേക്ക് നീക്കുക.
ചില നിരകളുടെ വീതി സ്വയമേവ കണക്കാക്കുന്നതിനാൽ, BODY സെലക്ടറിലേക്ക് ഒരു മിനി-വീതി പ്രോപ്പർട്ടി ചേർത്ത് ഏറ്റവും കുറഞ്ഞ ലേഔട്ട് വീതി പരിമിതപ്പെടുത്താൻ ശുപാർശ ചെയ്യുന്നു. അപ്പോൾ നിശ്ചിത പരിധിയിൽ എത്തുമ്പോൾ നിരകളുടെ വീതി കുറയില്ല.
ബോഡി (മിനി-വീതി: 800px; /* കുറഞ്ഞ ലേഔട്ട് വീതി */ )
കുറഞ്ഞ വീതി മൂല്യം പേജിൻ്റെ ലേഔട്ടിനെയും ഉള്ളടക്കത്തെയും ആശ്രയിച്ചിരിക്കുന്നു, ഇത് സാധാരണയായി അനുഭവത്തെ അടിസ്ഥാനമാക്കിയാണ് നിർണ്ണയിക്കുന്നത്.
ഫ്ലോട്ടിംഗ് ഘടകങ്ങൾ ഉപയോഗിക്കുന്നുഫ്ലോട്ടിംഗ് മൂലകങ്ങളാണ് മറ്റൊന്ന് സാർവത്രിക രീതിവൈവിധ്യമാർന്ന മൂന്ന് നിര ലേഔട്ടുകൾ നിർമ്മിക്കുന്നു. പൊസിഷനിംഗിൽ നിന്ന് വ്യത്യസ്തമായി, ബേസ്മെൻറ് പ്രശ്നത്തെക്കുറിച്ച് വിഷമിക്കേണ്ടതില്ല, കാരണം ബേസ്മെൻറ് എല്ലായ്പ്പോഴും ഏറ്റവും ഉയർന്ന നിരയ്ക്ക് കീഴിലായിരിക്കും.
ഫ്ലോട്ട് പ്രോപ്പർട്ടി ഉപയോഗിച്ച് മാർജിൻ, വീതി പ്രോപ്പർട്ടികൾ എന്നിവ ഉപയോഗിച്ച് നിരകൾ നിർമ്മിക്കുന്നു. തിരഞ്ഞെടുത്ത ലേഔട്ടിനെ ആശ്രയിച്ച്, കോഡിലെ നിരകളുടെ ക്രമവും എപ്പോഴും മാറുന്നു, അതിൽ ഫ്ലോട്ട് ചേർക്കുന്നു.
ലേഔട്ട് നമ്പർ 1. റബ്ബർ ആദ്യ നിര
രണ്ടാമത്തെയും മൂന്നാമത്തെയും നിരകളുടെ വീതി പിക്സലുകളിൽ വ്യക്തമാക്കിയിരിക്കുന്നു, കൂടാതെ അവയുടെ സ്ഥാനം ഫ്ലോട്ട് പ്രോപ്പർട്ടി വഴി മൂല്യ വലത് പ്രകാരമാണ് വ്യക്തമാക്കുന്നത്. ആദ്യ നിരയ്‌ക്കായി, ശേഷിക്കുന്ന നിരകളുടെ മൊത്തം വീതിക്ക് തുല്യമായ മൂല്യമുള്ള മാർജിൻ-വലത് പ്രോപ്പർട്ടി നിങ്ങൾ സജ്ജീകരിക്കേണ്ടതുണ്ട് (ഉദാഹരണം 5.22).
ഉദാഹരണം 5.22. ലേഔട്ട് നമ്പർ 1
ലേഔട്ട് 1 .ഹെഡർ, .ഫൂട്ടർ (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (ഓവർഫ്ലോ: മറച്ചിരിക്കുന്നു; /* അൺറാപ്പ് */ ) .col1 (പശ്ചാത്തലം: #C7E3E4; /* പശ്ചാത്തല നിറം */ മാർജിൻ-വലത്: 300px; /* Shift 2, 3 നിരകളുടെ വീതി ഇടത് */ .col2 (പശ്ചാത്തലം: #E0D2C7; വീതി: 200px; ഫ്ലോട്ട്: വലത്; /* ഇടത് പൊതിയുക */ ) .col3 (പശ്ചാത്തലം: #ECD5DE; വീതി: 100px; ഫ്ലോട്ട്: വലത്; /* ഇടത് പൊതിയുക */ ) സൈറ്റ് ഹെഡർ കോളം 3 കോളം 2 കോളം 1 അടിക്കുറിപ്പ്
ലേഔട്ട് നമ്പർ 2. റബ്ബർ മധ്യ നിര
ആദ്യത്തെയും മൂന്നാമത്തെയും നിരകളുടെ വീതി പിക്സലുകളിൽ വ്യക്തമാക്കിയിരിക്കുന്നു, കൂടാതെ അവയുടെ സ്ഥാനം ഫ്ലോട്ട് പ്രോപ്പർട്ടി വഴി ആദ്യ കോളത്തിന് ഇടത് മൂല്യവും മൂന്നാമത്തേതിന് വലത് വശത്തും വ്യക്തമാക്കുന്നു. മധ്യ നിരയിൽ, അതിൻ്റെ രൂപം നിലനിർത്തുന്നതിന്, ഒരു സാർവത്രിക പ്രോപ്പർട്ടി മാർജിൻ അടങ്ങിയിരിക്കുന്നു, അത് ഇടത്, വലത് മാർജിൻ വ്യക്തമാക്കുന്നു (ഉദാഹരണം 5.23).
ഉദാഹരണം 5.23. ലേഔട്ട് നമ്പർ 2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
ലേഔട്ട് 2 .ഹെഡർ, .ഫൂട്ടർ (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (ഓവർഫ്ലോ: മറച്ചിരിക്കുന്നു; ) .col1 (പശ്ചാത്തലം: #C7E3E4; ഫ്ലോട്ട്: ഇടത്; വീതി: 200px; ) .col2 (പശ്ചാത്തലം: #E0D2C7; മാർജിൻ: 0 100px 0 200px; /* വലത്, ഇടത് പാഡിംഗ് */ .col3 (പശ്ചാത്തലം: #ECD5DE; വീതി: 100px; ഫ്ലോട്ട്: വലത്; ) സൈറ്റ് ഹെഡർ കോളം 1 കോളം 3 കോളം 2 അടിക്കുറിപ്പ്
ലേഔട്ട് നമ്പർ 3. റബ്ബർ മൂന്നാം നിര
ആദ്യത്തെയും രണ്ടാമത്തെയും നിരകളുടെ സ്ഥാനം ഫ്ലോട്ട് പ്രോപ്പർട്ടിയിലൂടെ ഇടതുവശത്തുള്ള മൂല്യം ഉപയോഗിച്ച് സൂചിപ്പിച്ചിരിക്കുന്നു , മൂന്നാമത്തെ കോളത്തിന് നിങ്ങൾ ഇടത് മാർജിൻ (മാർജിൻ-ഇടത് ) ശേഷിക്കുന്ന നിരകളുടെ മൊത്തം വീതിയിലേക്ക് സജ്ജീകരിക്കേണ്ടതുണ്ട് (ഉദാഹരണം 5.24).
ഉദാഹരണം 5.24. ലേഔട്ട് നമ്പർ 3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
ലേഔട്ട് 3 .ഹെഡർ, .ഫൂട്ടർ (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (ഓവർഫ്ലോ: മറച്ചിരിക്കുന്നു; ) .col1 (പശ്ചാത്തലം: #C7E3E4; ഫ്ലോട്ട്: ഇടത്; വീതി: 100px; ) .col2 (പശ്ചാത്തലം: #E0D2C7; ഫ്ലോട്ട്: ഇടത് വീതി: 200px ;
ലേഔട്ട് നമ്പർ 4. എല്ലാ നിരകളുടെയും വീതി ശതമാനമായി സജ്ജീകരിച്ചിരിക്കുന്നു
ഈ ലേഔട്ട് നിർമ്മിക്കുന്നതിന്, മുമ്പത്തെ ലേഔട്ടുകളെ അടിസ്ഥാനമാക്കി നിരവധി ഓപ്ഷനുകൾ അനുയോജ്യമാണ്, എന്നാൽ പിക്സലുകൾക്ക് പകരം നിങ്ങൾ ശതമാനം വ്യക്തമാക്കണം. മറ്റൊരു രീതി ഉദാഹരണം 5.25-ൽ കാണിച്ചിരിക്കുന്നു, അത് ഫ്ലോട്ടും വീതിയും മാത്രം ഉപയോഗിക്കുന്നു.
ഉദാഹരണം 5.25. ലേഔട്ട് നമ്പർ 4
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
ലേഔട്ട് 4 .ഹെഡർ, .ഫൂട്ടർ (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (ഓവർഫ്ലോ: മറച്ചിരിക്കുന്നു; ) .ലേഔട്ട് DIV (ഫ്ലോട്ട്: ഇടത്; ) .col1 (പശ്ചാത്തലം: #C7E3E4; വീതി: 20%; ) .col2 (പശ്ചാത്തലം: #E0D2C7; വീതി: 60%;
ലേഔട്ട് നമ്പർ 5. രണ്ട് റബ്ബർ നിരകളുടെ വീതിചിത്രത്തിൽ. 5.19 രണ്ട് റബ്ബർ നിരകളുള്ള ലേഔട്ട് നമ്പർ 5 വ്യത്യസ്ത രീതികളിൽ വ്യാഖ്യാനിക്കാമെന്ന് തെളിയിക്കപ്പെട്ടു.
ഇവിടെ, ആദ്യ നിരയുടെ വീതി ഒരു ശതമാനമായി വ്യക്തമാക്കുന്നു, കൂടാതെ ഫ്ലോട്ട് പ്രോപ്പർട്ടി വഴി ഇടതുവശത്തുള്ള മൂല്യം ഉപയോഗിച്ച് അതിൻ്റെ സ്ഥാനം വ്യക്തമാക്കുന്നു, മൂന്നാമത്തെ കോളത്തിന് വീതി പിക്സലുകളിലും ഫ്ലോട്ട് പ്രോപ്പർട്ടിയുടെ മൂല്യം വലത്തോട്ടും സജ്ജീകരിച്ചിരിക്കുന്നു. . മധ്യ നിരയ്ക്ക്, ഇടത്, വലത് അരികുകൾ നിരകളുടെ വീതിയിലേക്ക് സജ്ജീകരിക്കുക മാത്രമാണ് അവശേഷിക്കുന്നത് (ഉദാഹരണം 5.26).
ഉദാഹരണം 5.26. ലേഔട്ട് 5.1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
ലേഔട്ട് 5.1 .ഹെഡർ, .ഫൂട്ടർ (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (ഓവർഫ്ലോ: മറച്ചിരിക്കുന്നു; ) .col1 (പശ്ചാത്തലം: #C7E3E4; വീതി: 40%; ഫ്ലോട്ട്: ഇടത്; ) .col2 (പശ്ചാത്തലം: #E0D2C7; മാർജിൻ: 0 200px 0 40%; .col3 (പശ്ചാത്തലം: #ECD5DE; വീതി: 200px; ഫ്ലോട്ട്: വലത്; ) സൈറ്റ് ഹെഡർ കോളം 1 കോളം 3 കോളം 2 അടിക്കുറിപ്പ്
ആദ്യ നിരയുടെ വീതി കണക്കാക്കുന്നു
ആദ്യ നിരയുടെ വീതി നേരിട്ട് വ്യക്തമാക്കിയിട്ടില്ലാത്തതിനാൽ ഇത് ഏറ്റവും തന്ത്രപ്രധാനമായ ലേഔട്ടാണ്. എന്നാൽ ഉള്ളടക്കം പരിമിതപ്പെടുത്തുന്നതിന്, മാർജിൻ-റൈറ്റ് പ്രോപ്പർട്ടിക്കായി ശതമാനങ്ങളും പിക്സലുകളും സംയോജിപ്പിക്കുന്ന ഒരു മൂല്യം നിങ്ങൾ വ്യക്തമാക്കേണ്ടതുണ്ട്. CSS2-ൽ, ഇതിനകം സൂചിപ്പിച്ചതുപോലെ, ഇത് സജ്ജീകരിക്കാൻ കഴിയില്ല, അതിനാൽ നമുക്ക് col1 ലെയറിനുള്ളിൽ wrap എന്ന മറ്റൊരു ലെയർ ചേർക്കുകയും ഈ ഓരോ ലെയറുകളിലേക്കും ഒരു പാഡിംഗ് ചേർക്കുകയും ചെയ്യാം. ഒന്ന് ശതമാനത്തിൽ, മറ്റൊന്ന് പിക്സലുകളിൽ (ഉദാഹരണം 5.27).
ഉദാഹരണം 5.27. ലേഔട്ട് 5.2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
ലേഔട്ട് 5.2 .ഹെഡർ, .ഫൂട്ടർ (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (ഓവർഫ്ലോ: മറച്ചിരിക്കുന്നു; ) .col1 (മാർജിൻ-വലത്: 40%; ) .col1 .wrap (മാർജിൻ-വലത്: 200px; പശ്ചാത്തലം: #C7E3E4; ) .col2 (പശ്ചാത്തലം: #E0D2C7; വീതി: 40%; ഫ്ലോട്ട്: വലത്; ) .col3 (പശ്ചാത്തലം: #ECD5DE; വീതി: 200px; ഫ്ലോട്ട്: വലത്; ) സൈറ്റ് ഹെഡർ കോളം 3 കോളം 2 കോളം 1 അടിക്കുറിപ്പ്
ശതമാനത്തിൽ രണ്ട് നിരകളുടെ വീതി
ഈ ലേഔട്ടിൽ, റബ്ബർ നിരകളുടെ ആകെ വീതി 100% ആയി കണക്കാക്കുന്നു, അതിനാൽ ആന്തരിക നിരകളുടെ വീതി അളക്കുന്ന ഒരു അധിക പാളി ഞങ്ങൾക്ക് ആവശ്യമാണ്. റബ്ബർ എന്ന് പേരിട്ടിരിക്കുന്ന ഈ പാളി, രണ്ട് കോളം ലേഔട്ടായി col3 ലെയർ ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നു, കൂടാതെ col1, col2 എന്നീ അകത്തെ പാളികൾ ഫ്ലോട്ട് പ്രോപ്പർട്ടി ഉപയോഗിച്ച് തിരശ്ചീനമായി വിന്യസിച്ചിരിക്കുന്നു (ഉദാഹരണം 5.28).
ഉദാഹരണം 5.28. ലേഔട്ട് 5.3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
ലേഔട്ട് 5.3 .ഹെഡർ, .ഫൂട്ടർ (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (ഓവർഫ്ലോ: മറച്ചിരിക്കുന്നു; ) .റബ്ബർ (മാർജിൻ-വലത്: 200px; ) .col1 (പശ്ചാത്തലം: #C7E3E4; വീതി: 60%; ഫ്ലോട്ട്: ഇടത്; ) .col2 (പശ്ചാത്തലം: #E0D2C7; വീതി: 40%; ഫ്ലോട്ട്: ഇടത്; ) .col3 (പശ്ചാത്തലം: #ECD5DE; വീതി: 200px; ഫ്ലോട്ട്: വലത്; ) സൈറ്റ് ഹെഡർ കോളം 3 കോളം 2 കോളം 1 അടിക്കുറിപ്പ്
ലേഔട്ടുകൾ 6, 7 എന്നിവയും അവയുടെ വ്യതിയാനങ്ങളും ലേഔട്ട് നമ്പർ 5 ൻ്റെ അതേ തത്വത്തിലാണ് നിർമ്മിച്ചിരിക്കുന്നത്, ലേഔട്ട് നമ്പർ 7 ഒഴികെ, അതിൽ ഇടത്, വലത് നിരകളുടെ വീതി റബ്ബറും പരസ്പരം തുല്യവുമാണ്.
ആദ്യം, ഞങ്ങൾ അടിസ്ഥാനം തയ്യാറാക്കുകയും HTML കോഡിലെ ലെയറുകളുടെ ക്രമം സൂചിപ്പിക്കുകയും ചെയ്യുന്നു.
കോളം 1 കോളം 3 കോളം 2
Col1 (വീതി: 50%; ഫ്ലോട്ട്: ഇടത്; ) .col2 (വീതി: 200px; ഫ്ലോട്ട്: ഇടത്; ) .col3 (വീതി: 50%; ഫ്ലോട്ട്: വലത്; )
അത്രയൊന്നും അല്ല, ലെയറുകൾ ഇതുവരെ കോളങ്ങളൊന്നും രൂപപ്പെടുത്തിയിട്ടില്ല, ഞങ്ങൾക്ക് തികച്ചും അനുചിതമായ വിധത്തിലാണ് നിർമ്മിച്ചിരിക്കുന്നത്. നിങ്ങൾ രണ്ടാമത്തെ നിരയെ അതിൻ്റെ പകുതി വീതിയിൽ ഇടത്തേക്ക് നീക്കേണ്ടതുണ്ട് (മാർജിൻ-ഇടത് : -100px ) കൂടാതെ മൂന്നാമത്തെ കോളം നിർബന്ധിതമാക്കേണ്ടതുണ്ട്. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ അതിൻ്റെ വീതി വർദ്ധിപ്പിക്കേണ്ടതുണ്ട്, അങ്ങനെ അത് 50%+100px-ന് തുല്യമോ അതിൽ കൂടുതലോ ആയിരിക്കും (രണ്ടാമത്തെ നിരയുടെ പകുതി). നെഗറ്റീവ് മൂല്യമുള്ള മാർജിൻ-ലെഫ്റ്റ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നതാണ് നല്ലത്, അതിനുശേഷം നിരകൾ സൃഷ്ടിക്കപ്പെടും. മറ്റ് ചില സൂക്ഷ്മതകളുണ്ട്. പുറത്തെ നിരകൾ പരസ്പരം യോജിപ്പിച്ചിരിക്കുന്നു, അവയുടെ ഉയരം മധ്യ നിരയുടെ ഉയരം കവിയുമ്പോൾ അത് വ്യക്തമായി കാണാം (ചിത്രം 5.21).
അരി. 5.21 ഡോക്ക് ചെയ്ത സ്പീക്കറുകൾ
കൂടാതെ, ഇടത് നിരയിൽ ടെക്സ്റ്റ് വലതുവശത്തും അകത്തും ആണ് വലത് കോളംമധ്യ നിരയുടെ പശ്ചാത്തലത്തിൽ ഇടതുവശത്തുള്ള വാചകം മറച്ചിരിക്കുന്നു. ഈ നിരയുടെ ഉയരം വലുതാണെങ്കിൽ ഇത് ശ്രദ്ധിക്കപ്പെടില്ല, പക്ഷേ ഇത് എല്ലായ്പ്പോഴും സാധ്യമല്ല. മറികടക്കാൻ സൂചിപ്പിച്ച ദോഷങ്ങൾ, നിങ്ങൾ ബാഹ്യ നിരകൾക്കുള്ളിൽ ഒരു ലെയർ കൂടി ഇടേണ്ടതുണ്ട് (ഉദാഹരണത്തിൽ ഇതിനെ റാപ്പ് എന്ന് വിളിക്കുന്നു) അവയ്‌ക്കായി കോളം പശ്ചാത്തല നിറം സജ്ജമാക്കുക, ആവശ്യമായ ഫീൽഡുകൾഇൻഡൻ്റുകളും. അന്തിമ കോഡ്ഉദാഹരണം 5.29 ൽ നൽകിയിരിക്കുന്നു.
ഉദാഹരണം 5.29. ലേഔട്ട് നമ്പർ 7
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
ലേഔട്ട് 7 .ഹെഡർ, .ഫൂട്ടർ (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (ഓവർഫ്ലോ: മറച്ചിരിക്കുന്നു; ) .col1 (വീതി: 50%; ഫ്ലോട്ട്: ഇടത്; ) .col1 .റാപ്പ് (പശ്ചാത്തലം: #C7E3E4; മാർജിൻ-വലത്: 100px ; .col3 (വീതി: 50%; ഫ്ലോട്ട്: വലത്; മാർജിൻ-ഇടത്: -100px; ) .col3 .wrap (പശ്ചാത്തലം: #ECD5DE; മാർജിൻ-ഇടത്: 100px; /* നിര 2 */ പാഡിംഗിൻ്റെ പകുതി വീതിയിൽ വലത്തേക്ക് മാറ്റുക : 10px; ) സൈറ്റ് തലക്കെട്ട് നിര 1 നിര 3 നിര 2 അടിക്കുറിപ്പ്
മൂന്ന് കോളങ്ങളുള്ള ലേഔട്ടിലെ അരികുകളും ബോർഡറുകളുംനൽകിയിരിക്കുന്ന ഉദാഹരണ ലേഔട്ടുകളിലേക്ക് പാഡിംഗ് പ്രോപ്പർട്ടി മനഃപൂർവ്വം ചേർത്തിട്ടില്ല, കാരണം കോഡ് ലേഔട്ടിൻ്റെ അടിസ്ഥാനമായി മാത്രമേ പ്രവർത്തിക്കൂ, കൂടാതെ നിരകളിൽ നിങ്ങൾക്ക് മാർജിനുകൾ വേണമോ വേണ്ടയോ എന്ന് പ്രത്യേക സന്ദർഭങ്ങളിൽ നിങ്ങൾ തീരുമാനിക്കേണ്ടതാണ്. ഒരു ബ്ലോക്ക് മൂലകത്തിലേക്ക് മാർജിനുകളും ബോർഡറുകളും ചേർക്കുന്നത് അതിൻ്റെ വീതി വർദ്ധിപ്പിക്കുന്നു, ഇത് ലേഔട്ട് സമയത്ത് കണക്കിലെടുക്കേണ്ടതാണ്. എന്നിരുന്നാലും, പാളി സജ്ജമാക്കിയാൽ മാത്രമേ വീതി വർദ്ധിക്കുകയുള്ളൂ വീതി മൂല്യം. വീതി മാറുന്നതും മാറാത്തതുമായ ഏതാനും ഉദാഹരണങ്ങൾ നോക്കാം.
Div ( /* പാഡിംഗ് വീതി */ വീതി: 200px; പാഡിംഗ്: 10px; ) div ( /* പാഡിംഗ് വീതിയെ ബാധിക്കില്ല */ സ്ഥാനം: കേവലം; ഇടത്: 20px; വലത്: 20px; പാഡിംഗ്: 10px; ) div ( / * പാഡിംഗ് വീതിയെ ബാധിക്കുന്നു */ ഫ്ലോട്ട്: ഇടത്; പാഡിംഗ്: 10px;
പാഡിംഗ് അല്ലെങ്കിൽ ബോർഡർ ആവശ്യമുള്ള ആ നിരകളിൽ, എന്നാൽ അവയുടെ കൂട്ടിച്ചേർക്കൽ ലേഔട്ടിൻ്റെ "ബ്രേക്കിംഗിലേക്ക്" നയിക്കും, നിങ്ങൾക്ക് ഒരു നെസ്റ്റഡ് ലെയർ ഉപയോഗിക്കാനും അതിന് ആവശ്യമായ പ്രോപ്പർട്ടികൾ സജ്ജമാക്കാനും കഴിയും.
കോളം
ഈ ഉദാഹരണത്തിൽ, 200 പിക്സലുകളായി സജ്ജീകരിച്ചിരിക്കുന്ന ലെയർ വീതി മാറില്ല, പക്ഷേ മാർജിനുകളും ബോർഡറും ചേർക്കും.
നിരകളായി പട്ടികപട്ടിക ലളിതവും ഉപയോഗിക്കാൻ സൗകര്യപ്രദവുമാണ് പെട്ടെന്നുള്ള സൃഷ്ടിഒരേ ഉയരമുള്ള നിരകൾ. ഈ വേഗത നിരവധി കാര്യങ്ങളിലൂടെ കൈവരിക്കുന്നു. ഒന്നാമതായി, ഏത് ലേഔട്ടിനുമുള്ള കോഡ് ഘടന അതേപടി നിലനിൽക്കും, ഫ്ലോട്ടിൻ്റെ കാര്യത്തിലെന്നപോലെ, അവയുടെ ക്രമം ഒരിക്കലും മാറ്റരുത്. രണ്ടാമതായി, സെല്ലുകളുടെ വീതി അവയുടെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി യാന്ത്രികമായി കണക്കാക്കുന്നു, അതിനാൽ വീതി വ്യക്തമാക്കുക ആവശ്യമായ സ്പീക്കറുകൾ, ബാക്കിയുള്ളവ പട്ടികയുടെ മൊത്തത്തിലുള്ള വീതിയിൽ ക്രമീകരിക്കും. ഉദാഹരണം 5.30 ഒരു മേശയിൽ ഉണ്ടാക്കിയ ലേഔട്ട് നമ്പർ 1 കാണിക്കുന്നു.
ഉദാഹരണം 5.30. ലേഔട്ട് നമ്പർ 1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
ലേഔട്ട് 1 .ഹെഡർ, .ഫൂട്ടർ (പശ്ചാത്തലം: #D5BAE4; ) .ലേഔട്ട് (വീതി: 100%; /* പട്ടിക വീതി */) .ലേഔട്ട് TD (പാഡിംഗ്: 5px; /* സെൽ മാർജിനുകൾ */ ലംബമായി-അലൈൻ: മുകളിൽ; / * മുകളിലെ വിന്യാസം */ .col1 (പശ്ചാത്തലം: #C7E3E4; ) .col2 (പശ്ചാത്തലം: #E0D2C7; വീതി: 200px; ) .col3 (പശ്ചാത്തലം: #ECD5DE; വീതി: 100px; ) സൈറ്റ് തലക്കെട്ട്
| കോളം 1 | കോളം 2 | കോളം 3 |
ഒരു ടിഡി സെലക്ടറിലേക്ക് ഒരു പാഡിംഗ് പ്രോപ്പർട്ടി ചേർക്കുന്നത് ടാഗിൻ്റെ സെൽപാഡിംഗ് ആട്രിബ്യൂട്ടിനെ മറികടക്കുന്നു
 |
അവൻ ഒരു മരത്തിൻ്റെ ചുവട്ടിൽ നിന്നുകൊണ്ട് കാത്തിരുന്നു. ഒന്ന്-രണ്ട്, ഒന്ന്-രണ്ട്! പുല്ല് കത്തുന്നു, വാൾ മുറിക്കുന്നു, നിലവിളിക്കുന്നു, ലൂയിസ് കരോൾ, ഡിന ഒർലോവയുടെ വിവർത്തനം, ജോൺ ടെനിയേലിൻ്റെ ഡ്രോയിംഗുകൾ |
 |
ഉദാഹരണത്തിൻ്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 5.22
അരി. 5.22 ലേഔട്ടിൻ്റെ മധ്യഭാഗത്തുള്ള നിര
രചയിതാവിൽ നിന്ന്: എൻ്റെ ബ്ലോഗിൻ്റെ പ്രിയ വായനക്കാർക്ക് ആശംസകൾ! തീർച്ചയായും നിങ്ങളിൽ പലരും ഡ്രാഗണുകൾ, സാന്താക്ലോസ്, അതിൻ്റെ ആകൃതി മാറ്റാൻ കഴിവുള്ള റബ്ബർ വെബ് ഡിസൈൻ എന്നറിയപ്പെടുന്ന മനസ്സിലാക്കാൻ കഴിയാത്ത മൃഗം എന്നിവയെക്കുറിച്ചുള്ള ഐതിഹ്യങ്ങൾ ഇതിനകം കേട്ടിട്ടുണ്ട്. ജോൺ ടോൾകീൻ്റെ കൈയെഴുത്തുപ്രതികൾ ആദ്യ കഥാപാത്രത്തെക്കുറിച്ച് നിങ്ങളോട് പറയും, രണ്ടാമത്തേതിനെ കുറിച്ച് മാതാപിതാക്കൾ നിങ്ങളോട് പറയും, എന്നാൽ മൂന്നാമത്തേതിനെക്കുറിച്ചുള്ള വിവരങ്ങൾ ഞാൻ ഏറ്റെടുക്കുന്നു. ഇത് എത്ര വിചിത്രമായി തോന്നിയാലും, ഈ ലേഖനത്തിൽ ഞാൻ റബ്ബർ വെബ് ഡിസൈൻ ചവയ്ക്കാനും അതിൻ്റെ ഗുണങ്ങളെയും ദോഷങ്ങളെയും കുറിച്ച് സംസാരിക്കാനും ശ്രമിക്കും.
ഒരു വെബ്സൈറ്റ് വികസിപ്പിക്കുമ്പോൾ, ഒരു വെബ്‌മാസ്റ്റർ, ഒന്നാമതായി, പ്രോജക്റ്റിൻ്റെ ലക്ഷ്യങ്ങളാൽ നയിക്കപ്പെടണം. ഏത് മോണിറ്റർ സ്‌ക്രീനിലേക്കും വെബ് പേജ് ക്രമീകരിക്കാൻ കഴിയുമെന്നത് ഉപഭോക്താവിന് പ്രധാനമാണെങ്കിൽ, ഇവിടെ സഹായം വരുംറബ്ബർ (അഡാപ്റ്റീവ്) ഡിസൈൻ.
അതിൻ്റെ വീതി പിക്സലുകളിലല്ല, ശതമാനമായി സജ്ജീകരിച്ചിരിക്കുന്നതിനാലാണ് ഈ ഫോർമാറ്റിന് ഈ പേര് ലഭിച്ചത്. അതിൻ്റെ സഹായത്തോടെ, റെസല്യൂഷൻ പരിഗണിക്കാതെ, മുഴുവൻ മോണിറ്റർ സ്ക്രീനിലും പേജ് തുറക്കും.
ഒരു വെബ് ഡിസൈനർ എന്ന നിലയിൽ നിങ്ങളുടെ കരിയർ അതിവേഗം വികസിക്കുന്നതിന്, ഈ ദിശ പഠിക്കേണ്ടത് അത്യന്താപേക്ഷിതമാണ്. ഇതിനകം ഒത്തുചേർന്ന വിശ്വസ്ത ഉപഭോക്തൃ അടിത്തറയുള്ള നിരവധി ഉപഭോക്താക്കൾ ഈ ഘട്ടത്തിൽ പ്രത്യേകിച്ചും ആവശ്യപ്പെടുന്നു, കാരണം അവരുടെ ഉപയോക്താക്കൾക്ക് പരമാവധി സൗകര്യങ്ങൾ നൽകാൻ അവർ ആഗ്രഹിക്കുന്നു.
ഫ്ലൂയിഡ് വെബ് ഡിസൈനിൻ്റെ പിറവിരസകരമായ ഒരു നിരീക്ഷണമെന്ന നിലയിൽ, നമ്മുടെ രാജ്യത്ത്, സ്പെഷ്യലിസ്റ്റുകൾ "റബ്ബർ" വെബ് ഡിസൈൻ പാശ്ചാത്യ രാജ്യങ്ങളെ അപേക്ഷിച്ച് പോസിറ്റീവ് വീക്ഷണകോണിൽ നിന്ന് മനസ്സിലാക്കാൻ തുടങ്ങി എന്ന വസ്തുത നമുക്ക് ശ്രദ്ധിക്കാം. വെബ് ദിശയുടെ പിറവിയിൽ അത് ഈ മേഖലയിലേക്ക് വന്നു എന്നതാണ് വസ്തുത ഒരു വലിയ സംഖ്യഇടുങ്ങിയ ചിന്താഗതിയുള്ള പ്രിൻ്ററുകൾ.
വിദേശ വിദഗ്ധർ നോൺ-ഫിക്സഡ് സൃഷ്ടിക്കുന്നതിനുള്ള സാധ്യത മനസ്സിലാക്കിയില്ല ഗ്രാഫിക് വികസനങ്ങൾ. എന്നാൽ “വെബ്”, “ഡിസൈൻ” എന്നീ ആശയങ്ങൾ ഏതാണ്ട് തുല്യമായി ഞങ്ങൾക്ക് വന്നു, അതിൻ്റെ ഫലമായി ചിത്രത്തിൻ്റെ അത്തരം വിഷ്വൽ ഫ്ലെക്സിബിലിറ്റി ഡവലപ്പർമാർ സാധാരണ സൃഷ്ടിപരമായ സ്വാതന്ത്ര്യമായി മനസ്സിലാക്കി.
ഫ്ലൂയിഡ്, റെസ്‌പോൺസിവ് വെബ് ഡിസൈൻ എന്നിവ ഒരേ കാര്യമാണോ?ആളുകൾ പലപ്പോഴും ഈ രണ്ട് ആശയങ്ങളും ആശയക്കുഴപ്പത്തിലാക്കുന്നു, എന്നിരുന്നാലും, അവ പരസ്പരം ശുദ്ധമായ പര്യായങ്ങളല്ല. എല്ലാത്തരം സ്ക്രീൻ റെസല്യൂഷനുകളും കണക്കിലെടുത്ത്, എല്ലാത്തരം ഉപകരണങ്ങളിലും പരമാവധി എളുപ്പത്തിലുള്ള ഉപയോഗം സൃഷ്‌ടിക്കുന്നതിന് വ്യത്യസ്ത വെബ്സൈറ്റ് ലേഔട്ടുകളിൽ പ്രവർത്തിക്കുന്നത് റെസ്‌പോൺസീവ് വെബ് ഡിസൈനിൽ ഉൾപ്പെടുന്നു.
ഉപകരണത്തിലെ ഡിസ്പ്ലേയുടെ വലുപ്പത്തെ ആശ്രയിച്ച് ഇത് "ന്യായമായ രീതിയിൽ" സ്ക്രീനിലേക്ക് മൊത്തത്തിലുള്ള ഇമേജ് ക്രമീകരിക്കുന്നു. ശരി, റബ്ബർ ഡിസൈൻ, വാസ്തവത്തിൽ, ഘടകങ്ങളിൽ ഒന്നാണ് പ്രതികരിക്കുന്ന വെബ് ഡിസൈൻ. അതാകട്ടെ, വെബ് പേജിൻ്റെ അനുപാതത്തിൽ മാത്രമേ മാറ്റങ്ങൾ വരുത്തുകയുള്ളൂ.
അതിനാൽ, റബ്ബറിൻ്റെയും മറ്റ് പുരോഗമനപരമായ മെച്ചപ്പെടുത്തലുകളുടെയും സംയോജനമാണ് റെസ്‌പോൺസീവ് വെബ് ഡിസൈൻ എന്ന നിഗമനത്തിൽ നമുക്ക് എത്തിച്ചേരാനാകും. അനുരൂപമായ നിർവചനങ്ങൾ കാരണമാണെങ്കിലും, ചിലപ്പോൾ ആശയക്കുഴപ്പം ഉണ്ടാകാം. ഉപഭോക്താവുമായി ഇക്കാര്യത്തിൽ അഭിപ്രായവ്യത്യാസങ്ങൾ ഉണ്ടാകുമ്പോൾ ഇത് പ്രത്യേകിച്ചും അസുഖകരമാണ്, അതിനാൽ സൈറ്റിൻ്റെ റബ്ബർ രൂപകൽപ്പനയെക്കുറിച്ച് സംസാരിക്കുമ്പോൾ ക്ലയൻ്റ് എന്താണ് ഉദ്ദേശിച്ചതെന്ന് എല്ലായ്പ്പോഴും വ്യക്തമാക്കുകയും ശ്രദ്ധിക്കുക.
ഫ്ലൂയിഡ് വെബ് ഡിസൈനിൻ്റെ പ്രയോജനങ്ങൾറബ്ബർ css ഡിസൈൻ ഉപയോഗിച്ച് നിങ്ങൾക്ക് എല്ലാം നിറയ്ക്കുന്ന ഒരു വെബ് പേജ് രൂപകൽപ്പന ചെയ്യാനുള്ള കഴിവുണ്ട് സ്വതന്ത്ര സ്ഥലംസ്‌ക്രീൻ വലുപ്പം പരിഗണിക്കാതെ ബ്രൗസർ. അനുമതിയുമായി ബന്ധപ്പെട്ട ക്രമീകരണങ്ങളിൽ എന്തെങ്കിലും മാറ്റങ്ങളുണ്ടെങ്കിൽ, മുഴുവൻ സൈറ്റ് ഘടനയും പുതുക്കിയ വ്യവസ്ഥകളിലേക്ക് വീണ്ടും ക്രമീകരിക്കും. അത്ഭുതങ്ങളും മാന്ത്രികതയും, അല്ലേ?
ചിത്രം ഒരു ചെറിയ എച്ച്ടിസിയിലോ 20 ഇഞ്ചിലോ പ്രദർശിപ്പിച്ചാലും, വെബ് പേജ് ബ്രൗസർ വിൻഡോയെ പൂർണ്ണമായും ഉൾക്കൊള്ളുമെന്ന് ഈ സവിശേഷത ഉറപ്പാക്കുന്നു. വൈഡ്സ്ക്രീൻ മോണിറ്റർ. റബ്ബർ ഡിസൈനിൻ്റെ പ്രധാന നേട്ടം ഇതാണ്.
ചെറിയ മോണിറ്ററുകൾ ഉള്ള ഉപയോക്താക്കൾക്ക് പ്രശ്നങ്ങൾ അനുഭവപ്പെടില്ല തിരശ്ചീന വരകൾസ്ക്രോളിംഗ്, പക്ഷേ അവ ചിലപ്പോൾ വലിയ വൈഡ്സ്ക്രീൻ ഫോർമാറ്റുകളുടെ ഉടമകളെ ബുദ്ധിമുട്ടിക്കുന്നു. തൽഫലമായി, ഇക്കാര്യത്തിൽ, രണ്ടാമത്തേതിന് ചിത്രം പൂർണ്ണമായും ആസ്വദിക്കാൻ കഴിയും, കാരണം മുഴുവൻ ഡിസ്പ്ലേ ഏരിയയും ഫലപ്രദമായി ഉപയോഗിക്കും.
ഏത് സൈറ്റുകൾക്ക് റബ്ബർ വെബ് ഡിസൈൻ അനുയോജ്യമാണ് എന്ന ചോദ്യം ഞങ്ങൾ പരിഗണിക്കുകയാണെങ്കിൽ, എല്ലാം വീണ്ടും ഉപഭോക്താവിൻ്റെ ലക്ഷ്യങ്ങളെ ആശ്രയിച്ചിരിക്കുന്നു. ഒരു വെബ്‌പേജിലെ പ്ലെയ്‌സ്‌മെൻ്റിന് മുൻഗണന നൽകുന്ന സൈറ്റുകളിൽ ഈ വിഷ്വൽ ഫ്ലെക്സിബിലിറ്റി നന്നായി കാണപ്പെടും പരമാവധി അളവ്ഉള്ളടക്കവും സൗന്ദര്യാത്മക മാനദണ്ഡങ്ങളും പശ്ചാത്തലത്തിലേക്ക് മങ്ങുന്നു.
ഈ അടിസ്ഥാനത്തിലാണ് റബ്ബർ വെബ് ഡിസൈൻ സൃഷ്ടിക്കുന്നതിൽ വ്യാപകമായി ഉപയോഗിക്കുന്നത് വാർത്താ പോർട്ടലുകൾ, ബ്ലോഗുകൾ, അതുപോലെ എല്ലാത്തരം വിവര സൈറ്റുകളും. ഈ സാഹചര്യത്തിൽ, അതിൻ്റെ ഉപയോഗം ഏറ്റവും അനുയോജ്യമാണ്.
ആധുനിക പ്രവണതകൾവെബ് വികസനത്തിലെ സമീപനങ്ങളും
വെബ്സൈറ്റ് നിർമ്മാണത്തിൽ ആദ്യം മുതൽ ദ്രുതഗതിയിലുള്ള വളർച്ചയ്ക്കുള്ള അൽഗോരിതം പഠിക്കുക
ഫ്ലൂയിഡ് വെബ് ഡിസൈനിൻ്റെ പോരായ്മകൾകൂടാതെ പോസിറ്റീവ് പോയിൻ്റുകൾ, അത്തരം വെബ് ഡിസൈനിന് ചില പ്രത്യേക ദോഷങ്ങളുമുണ്ട്. അവയിലൊന്ന്, വാസ്തവത്തിൽ, ചില സ്ക്രീൻ റെസല്യൂഷൻ വ്യവസ്ഥകളിലേക്ക് "യാന്ത്രികമായി ക്രമീകരിക്കൽ" എന്ന പേജിൻ്റെ അന്തിമ ഫലം പ്രവചനാതീതമാണ്. ചിലത് ഗ്രാഫിക് ഘടകങ്ങൾഅയൽക്കാരായ സഹപ്രവർത്തകർ അവരെ മാറ്റിപ്പാർപ്പിച്ചതിനാൽ സൈറ്റിൽ പെട്ടെന്ന് മറ്റൊരു സ്ഥലത്ത് തങ്ങളെത്തന്നെ കണ്ടെത്തിയേക്കാം.
അത്തരം "റബ്ബറിൻ്റെ" മറ്റൊരു പോരായ്മ, സ്റ്റാൻഡേർഡ് ദൈർഘ്യവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു പേജ് ലോഡ് ചെയ്യുന്നത് 2-3 മടങ്ങ് വർദ്ധിക്കും എന്നതാണ്. ചില ബ്രൗസറുകൾ പേജ് ലേഔട്ടുകൾ തിരഞ്ഞെടുക്കുന്നതിനാലാണ് ഇത് സംഭവിക്കുന്നത്. ഈ ഫോർമാറ്റിൻ്റെ. വേരിയബിൾ-വിഡ്ത്ത് ഘടകങ്ങൾ പ്രദർശിപ്പിക്കുന്നതിൽ അവർ ബുദ്ധിമുട്ടുന്നു, ഇത് ദൃശ്യ പിശകുകളുടെ അപകടസാധ്യതയും വർദ്ധിപ്പിക്കുന്നു.
ഫ്ലൂയിഡ്, റെസ്‌പോൺസീവ് വെബ് ഡിസൈനിൻ്റെ ഉദാഹരണങ്ങൾവ്യക്തതയ്ക്കായി, ഞാൻ നിങ്ങളെ കുറച്ച് കാണിക്കാൻ ആഗ്രഹിക്കുന്നു വിജയകരമായ ഉദാഹരണങ്ങൾമതിയായ മുതൽ റബ്ബർ, അഡാപ്റ്റീവ് ഡിസൈനുകൾ വിജയകരമായ ഡെവലപ്പർമാർ.
1. http://www.simplebits.com/ആദ്യം, വെബ് വികസനത്തിൽ ഒരേസമയം ഏർപ്പെട്ടിരിക്കുന്ന ഒരു അമേരിക്കൻ ബ്ലോഗറുടെ റബ്ബർ സൈറ്റ് നോക്കാം. പൂർണ്ണ പതിപ്പ്വെബ്സൈറ്റ്:
മൊബൈൽ പതിപ്പ്വെബ്സൈറ്റ്:
നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഈ സാഹചര്യത്തിൽ ചിത്രം ഉപകരണത്തിൻ്റെ വലുപ്പത്തിലേക്ക് മാത്രം ക്രമീകരിച്ചിരിക്കുന്നു, കൂടാതെ പൊതു ഘടനസൈറ്റ് മാറ്റമില്ലാതെ തുടരുന്നു.
2. http://www.fork-cms.com/പൊരുത്തപ്പെടുന്ന ഒരു വെബ്‌സൈറ്റുമായി നിങ്ങൾ സ്വയം പരിചയപ്പെടാൻ ഇപ്പോൾ ഞാൻ നിർദ്ദേശിക്കുന്നു നിർദ്ദിഷ്ട ഉപകരണംകൂടാതെ, അതിൻ്റെ വലുപ്പത്തെ ആശ്രയിച്ച്, സ്വന്തം ഘടന പൂർണ്ണമായും പുനർനിർമ്മിക്കുന്നു. സൈറ്റിൻ്റെ പൂർണ്ണ പതിപ്പ്:
സൈറ്റിൻ്റെ മൊബൈൽ പതിപ്പ്:
അത്രയേയുള്ളൂ. ഇന്നത്തെ മെറ്റീരിയൽ രസകരമായിരുന്നുവെന്നും നിങ്ങൾ നിങ്ങളുടെ സമയം പാഴാക്കിയില്ലെന്നും ഞാൻ പ്രതീക്ഷിക്കുന്നു. അങ്ങനെയാണെങ്കിൽ, ഈ വിഷയത്തിൽ അഭിപ്രായങ്ങൾ ഇടുക, നിങ്ങളുടെ സ്വന്തം അഭിപ്രായം പങ്കിടുക. വെബ് ഡിസൈൻ 2.0 മാസ്റ്റേഴ്സിൽ നിന്നുള്ള പോസിറ്റീവ് ഫീഡ്ബാക്കും വിദഗ്ധ അഭിപ്രായങ്ങളും ഞാൻ അഭിനന്ദിക്കുന്നു. കൂടുതൽ രസകരവും നഷ്‌ടപ്പെടാതിരിക്കാൻ ബ്ലോഗ് സബ്‌സ്‌ക്രൈബ് ചെയ്യുക ഉപകാരപ്രദമായ വിവരം.
എനിക്ക് അത്രയേയുള്ളൂ, ഉടൻ കാണാം!
വെബ് വികസനത്തിലെ ആധുനിക പ്രവണതകളും സമീപനങ്ങളും
വെബ്സൈറ്റ് നിർമ്മാണത്തിൽ ആദ്യം മുതൽ ദ്രുതഗതിയിലുള്ള വളർച്ചയ്ക്കുള്ള അൽഗോരിതം പഠിക്കുക
ഇന്ന് സമർപ്പിക്കുന്ന അടുത്ത പാഠത്തിലേക്ക് ഞാൻ നിങ്ങളെ സ്വാഗതം ചെയ്യുന്നു CSS ഭാഷ. സൈറ്റിനായി ഞങ്ങൾ നിങ്ങളോടൊപ്പം മൂന്ന് നിരകളുള്ള റബ്ബർ ലേഔട്ട് നടപ്പിലാക്കും. ഭാവിയിൽ, നിങ്ങൾക്ക് ഈ ഫ്രെയിം പകർത്തി ഒരു വെബ്സൈറ്റ് സൃഷ്ടിക്കാൻ ആരംഭിക്കാം. ലേഔട്ടിൽ അത്തരം ബ്ലോക്കുകൾ അടങ്ങിയിരിക്കും: സൈറ്റ് ഹെഡർ, ഇടത് സൈഡ്‌ബാർ, വലത് സൈഡ്‌ബാർ, ഉള്ളടക്ക ഏരിയ, അടിക്കുറിപ്പ്. സങ്കീർണ്ണമായ ഒന്നുമില്ല, ലളിതവും വളരെ ലളിതവുമായ ടെംപ്ലേറ്റ്. ശരി, അത് നടപ്പിലാക്കാൻ സമയമായി. ആരംഭിക്കുന്നതിന്, നമുക്ക് എഴുതാം താഴെ ഘടന html കോഡ്:
ഞങ്ങൾ ഘടന നടപ്പിലാക്കി. ശൈലികൾ പ്രയോഗിക്കാനുള്ള സമയമാണിത്, അതിന് നന്ദി ഞങ്ങൾ മൂന്ന് നിര ലേഔട്ട് നടപ്പിലാക്കും.
ഇപ്പോൾ ഞങ്ങൾ എഴുത്ത് ശൈലികൾ പൂർത്തിയാക്കി, നമുക്ക് അവ കുറച്ച് നോക്കാം.
ഒരു അടിസ്ഥാനമെന്ന നിലയിൽ, ഞങ്ങൾ മറ്റെല്ലാ ബ്ലോക്കുകളും സ്ഥാപിക്കുന്ന ബ്ലോക്ക് എടുത്ത് അതിനായി പരമാവധി വീതി, മധ്യ വിന്യാസം, നൂറ് ശതമാനത്തിന് തുല്യമായ വീതി എന്നിവ സജ്ജമാക്കി (ഇത് നിർബന്ധമല്ല, പക്ഷേ ഇത് അമിതമായിരിക്കില്ല. ).
സൈറ്റിൻ്റെ തലക്കെട്ടിന് ഉത്തരവാദികളായ ബ്ലോക്കിൽ ഒരു ശീർഷകം സ്ഥാപിച്ചു, കൂടാതെ ബ്ലോക്കിന് തന്നെ പശ്ചാത്തല നിറവും കേന്ദ്രീകൃതമായ വാചക വിന്യാസവും ഉണ്ടായിരിക്കും. അതിനുശേഷം ഞങ്ങൾ ഏറ്റവും പ്രധാനപ്പെട്ട ഭാഗത്തേക്ക് നീങ്ങി, ഞങ്ങളുടെ റബ്ബർ സ്പീക്കറുകൾ.
ഇടത് സൈഡ്‌ബാറിനായി, ഞങ്ങൾ ഒരു പശ്ചാത്തല നിറവും ഒരു നിശ്ചിത ഉയരവും സജ്ജീകരിച്ചു, അതുവഴി ഭാവിയിൽ സൈറ്റ് എങ്ങനെയായിരിക്കുമെന്ന് നമുക്ക് കാണാൻ കഴിയും. ഞങ്ങൾ വീതി ഇരുപത് ശതമാനമായി സജ്ജീകരിച്ചു, കൂടാതെ മൂലകങ്ങളുടെ ഒഴുക്ക് ഇടതുവശത്തേക്ക് സജ്ജമാക്കുകയും ചെയ്യുന്നു.
വലത് സൈഡ്‌ബാറിൻ്റെ അവസ്ഥ സമാനമാണ്, ഞങ്ങൾ മാത്രം അയയ്ക്കുന്നു ഈ ഘടകംവി വലത് വശംസ്ക്രീൻ, വലതുവശത്തുള്ള മൂലകങ്ങളുടെ ഒഴുക്ക് ക്രമീകരിക്കുക. ഈ രീതിക്ക് ശേഷം, ഈ രണ്ട് സൈഡ്ബാറുകൾക്കിടയിലുള്ള സ്ക്രീനിൽ ഉള്ളടക്കം യാന്ത്രികമായി കേന്ദ്രീകരിക്കപ്പെടും.
എന്നാൽ ഉള്ളടക്കത്തിനായി, ഞങ്ങൾ പശ്ചാത്തല വർണ്ണം, ഉയരം, ഇടത്, വലത് മാർജിനുകൾ എന്നിവയും സജ്ജീകരിച്ചിരിക്കുന്നു, അവ 21 ശതമാനത്തിന് തുല്യമാണ്, അതനുസരിച്ച് വീതി 58 ശതമാനമായി. എന്തുകൊണ്ടാണ് 58 ശതമാനം എന്ന് നിങ്ങൾ ചിന്തിച്ചേക്കാം. നൂറ് ശതമാനത്തിന് തുല്യമായ വീതിയെ അടിസ്ഥാനമാക്കി, ഞങ്ങൾ ഇടതുവശത്ത് നിന്ന് പാഡിംഗ് കുറയ്ക്കുന്നു വലത് വശം, അത് 21 ശതമാനത്തിന് തുല്യമാണ്, ആകെ 100 - 21 - 21 = 58. അവിടെയാണ് ഈ കണക്ക്. എല്ലാം, റബ്ബർ ബ്ലോക്കുകൾതയ്യാറാണ്, അടിക്കുറിപ്പ് നടപ്പിലാക്കുക മാത്രമാണ് അവശേഷിക്കുന്നത്.
സൈറ്റിൻ്റെ തലക്കെട്ടിൻ്റെ തത്വമനുസരിച്ച് ഇത് നടപ്പിലാക്കുന്നു; ഉള്ളിൽ ഒരു തലക്കെട്ട് ഉള്ള ഒരു ബ്ലോക്ക് ഞങ്ങൾ സൃഷ്ടിക്കുന്നു, പശ്ചാത്തലം, ടെക്സ്റ്റ് വർണ്ണം, കേന്ദ്രീകൃതമായ ടെക്സ്റ്റ് വിന്യാസം എന്നിവ സജ്ജമാക്കുക.
ഫലം നോക്കുമ്പോൾ, എല്ലാം വളരെ ലളിതമാണെന്ന് നമുക്ക് പറയാൻ കഴിയും, കൂടാതെ സൈറ്റ് പരിധിയിലേക്ക് ചുരുക്കുകയും ഞങ്ങൾ വ്യക്തമാക്കിയ പരമാവധി വീതിയിലേക്ക് നീട്ടുകയും ചെയ്യും. നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നിങ്ങളുടെ സൈറ്റ് ചുരുങ്ങുന്ന ഏറ്റവും കുറഞ്ഞ വീതി നിങ്ങൾക്ക് വ്യക്തമാക്കാം. സൂചിപ്പിച്ചു ഈ സ്വത്ത്ഐഡി കണ്ടെയ്‌നറുള്ള ബ്ലോക്കിനായി, അത് മറ്റ് ബ്ലോക്കുകളുടെ രക്ഷിതാവായതിനാൽ. അതിനാൽ നിങ്ങളും ഞാനും ഒരു മൂന്ന് നിരകളുള്ള റബ്ബർ വെബ്സൈറ്റ് സൃഷ്ടിക്കുന്നതിനുള്ള സാധ്യത പരിഗണിച്ചു, ഇതോടെ ഞാൻ നിങ്ങളോട് വിടപറയുന്നു. നിങ്ങൾക്ക് എല്ലാ ആശംസകളും, വിജയം!
റബ്ബർ വെബ്സൈറ്റ് ലേഔട്ട്. റബ്ബർ വെബ് ഡിസൈൻ. എന്ത്, എവിടെ നീട്ടും?സവിശേഷതകൾ, ഗുണങ്ങളും ദോഷങ്ങളും
വെബ്സൈറ്റ് ലേഔട്ടിൻ്റെ ഏറ്റവും ജനപ്രിയമായ തരങ്ങളിലൊന്നാണ് റബ്ബർ ലേഔട്ട്. പ്രധാന ഗുണംവ്യത്യസ്‌ത സ്ക്രീൻ റെസല്യൂഷനുകളിലേക്കും ബ്രൗസർ വിൻഡോ വലുപ്പങ്ങളിലേക്കും പൊരുത്തപ്പെടാനുള്ള കഴിവാണ് ഫ്ലൂയിഡ് ലേഔട്ട്.
എല്ലാത്തിലും html തരങ്ങൾവെബ്സൈറ്റ് ലേഔട്ടുകളെ മൂന്നായി തിരിക്കാം - ഫിക്സഡ്, ഫ്ലൂയിഡ്, അഡാപ്റ്റീവ്.
റബ്ബർ ലേഔട്ടിൻ്റെ സവിശേഷതകൾ
സ്ഥിരമായ ലേഔട്ടിൽ നിന്ന് വ്യത്യസ്തമായി, ഫ്ലൂയിഡ് ലേഔട്ട് ബ്രൗസർ വിൻഡോയുടെ വലുപ്പത്തിൽ മാറ്റങ്ങൾ വരുത്താൻ അനുവദിക്കുന്നു കൂടാതെ വ്യത്യസ്ത സ്ക്രീൻ റെസല്യൂഷനുകൾക്കായി രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു. ആധുനികതയോടെ എന്നതാണ് വസ്തുത ദ്രുതഗതിയിലുള്ള വികസനംസാങ്കേതികവിദ്യകളും കൂടുതൽ കൂടുതൽ നൂതനമായ സാങ്കേതികവിദ്യയുടെ നിരന്തരമായ ആവിർഭാവവും, വെബ്സൈറ്റ് ലേഔട്ടിൽ ഒരു പ്രശ്നം ഉയർന്നുവരുന്നു. സാധാരണ സ്ഥിരമായ ലേഔട്ട് ഇനി എല്ലാവരോടും പ്രതികരിക്കില്ല ആവശ്യമായ ആവശ്യകതകൾക്രമേണ കാലഹരണപ്പെട്ടു. ഇപ്പോൾ പഴയ രീതികളുടെ ഉപയോഗം നിയമത്തേക്കാൾ അപവാദമാണ്, ഇത് തികച്ചും സ്വാഭാവികമാണ്.
അത്തരമൊരു ലളിതമായ ഉദാഹരണം സങ്കൽപ്പിക്കുക - ഒരു ഉപയോക്താവ് സബ്‌വേ കാറിൽ കയറുകയും ജോലി കഴിഞ്ഞ് വീട്ടിലേക്ക് മടങ്ങുകയും നിങ്ങളുടെ സൈറ്റിലേക്ക് വരികയും ചെയ്തു മൊബൈൽ ഫോൺ, സ്ക്രീൻ റെസലൂഷൻ 320x480 പിക്സൽ ആണ്, തുടർന്ന് അയാൾ വീട്ടിലേക്ക് പോയി ഡെസ്ക്ടോപ്പ് കമ്പ്യൂട്ടർ 1920x1200 പിക്സൽ റെസല്യൂഷനുള്ള 24″ ഡയഗണൽ മോണിറ്ററിൽ നിങ്ങളുടെ സൈറ്റ് കണ്ടു (ഇത് പരിധിയിൽ നിന്ന് വളരെ അകലെയാണ്). സ്‌മാർട്ട്‌ഫോണിലും ഓണിലും ഒരേ ഫലങ്ങൾ നേടുന്നതിന് ഒരു നിശ്ചിത ലേഔട്ട് എങ്ങനെ ഉപയോഗിക്കാം എന്നതാണ് ചോദ്യം വലിയ മോണിറ്റർ(ഞങ്ങൾ ഓട്ടോമാറ്റിക് സ്കെയിലിംഗ് മാറ്റിവെച്ചാൽ). അതായത്, മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, അത് ഫോണിൽ ദൃശ്യമാകാതിരിക്കേണ്ടത് ആവശ്യമാണ് തിരശ്ചീന സ്ക്രോളിംഗ്അതേ സമയം, മോണിറ്ററിൽ സൈറ്റ് വെള്ളയുടെ നടുവിൽ നിർഭാഗ്യകരമായ ഇടുങ്ങിയ വരയായി കാണപ്പെട്ടില്ല ശൂന്യമായ സ്ക്രീൻ. ഇല്ല എന്നാണ് ഉത്തരം.
ഇവിടെ റബ്ബർ ലേഔട്ട് ഞങ്ങളുടെ സഹായത്തിലേക്ക് വരുന്നു, അത് ചുമതലയെ എളുപ്പത്തിൽ നേരിടുന്നു. ഒരു വലിയ മോണിറ്ററിൽ, മുഴുവൻ സ്‌ക്രീനിലുടനീളം സൈറ്റ് നീട്ടുകയോ അല്ലെങ്കിൽ ഒരു നിശ്ചിത ടെംപ്ലേറ്റ് വീതിയിലേക്ക് സ്വയം പരിമിതപ്പെടുത്തുകയോ ചെയ്യുന്നത് പാപമല്ല, ഉദാഹരണത്തിന്, സ്ക്രീൻ വീതിയുടെ 75%. ഈ ദൗത്യത്തിന് മഹത്തായവർ ഉണ്ട് CSS പ്രോപ്പർട്ടികൾ പരമാവധി വീതിഒപ്പം മിനിട്ട് വീതി, സൈറ്റിൻ്റെ വീതി ചില പരിധിക്കുള്ളിൽ നിലനിർത്താൻ നിങ്ങളെ അനുവദിക്കും, ഇത് ഏറ്റവും ശരിയായതും സൗന്ദര്യാത്മകവുമായ പരിഹാരമാണ്.
റബ്ബർ ലേഔട്ടിൻ്റെ ഗുണങ്ങളും ദോഷങ്ങളുംഫ്ലൂയിഡ് ലേഔട്ടിൻ്റെ പ്രധാന നേട്ടം ബ്രൗസർ വിൻഡോയുടെ വലുപ്പം മാറ്റുമ്പോഴും വ്യത്യസ്ത സ്ക്രീൻ റെസല്യൂഷനുകളുള്ള മോണിറ്ററുകളിലും അതിൻ്റെ വൈവിധ്യമാണ്, ഇതിൻ്റെ വ്യത്യാസം വളരെയധികം വ്യത്യാസപ്പെടാം. നന്നായി രൂപകൽപ്പന ചെയ്ത വെബ്സൈറ്റ് ഒരു വലിയ മോണിറ്ററിൽ മികച്ചതായി കാണപ്പെടും, ആവശ്യത്തിന് സ്ക്രീൻ സ്‌പെയ്‌സ് എടുക്കും, എന്നാൽ ഒരു വ്യക്തി വളരെയധികം മനസ്സിലാക്കുന്നില്ല എന്നത് ഓർമിക്കേണ്ടതാണ്. നീണ്ട വരികൾടെക്‌സ്‌റ്റ് ചെയ്‌ത് സൈറ്റിൻ്റെ വീതി യുക്തിസഹമായും ന്യായമായ പരിധിക്കുള്ളിലും കണക്കാക്കുക. ശരി, വളരെ ഇടുങ്ങിയ ഒരു വെബ്സൈറ്റ് ഒരു വലിയ മോണിറ്ററിൽ ദയനീയമായി കാണപ്പെടും എന്നത് ആർക്കും രഹസ്യമല്ല, അത് എല്ലായ്പ്പോഴും ഒഴിവാക്കേണ്ടതാണ്.
റബ്ബർ ലേഔട്ടിന് ധാരാളം ദോഷങ്ങളൊന്നുമില്ല, അതിനാൽ അതിൻ്റെ ജനപ്രീതിയും സർവ്വവ്യാപിയും. ഒരു നിശ്ചിത വെബ്‌സൈറ്റിനേക്കാൾ ഒരു ഫ്ലെക്സിബിൾ വെബ്സൈറ്റ് സൃഷ്‌ടിക്കുന്നത് വളരെ ബുദ്ധിമുട്ടാണ് എന്നതാണ് പ്രധാന പോരായ്മ. വലിയ ചിത്രങ്ങളുടെയോ പശ്ചാത്തലങ്ങളുടെയോ കാര്യത്തിൽ, ചിത്രത്തിൻ്റെ പര്യാപ്തത നിലനിർത്തിക്കൊണ്ട് വലിച്ചുനീട്ടാൻ കഴിയുന്ന ചിത്രങ്ങളിൽ നിങ്ങൾ സ്ഥലങ്ങൾ നോക്കേണ്ടതുണ്ട്. ലേഔട്ടിലെ മിക്കവാറും എല്ലാ അളവുകളും ശതമാനത്തിൽ സൂചിപ്പിക്കേണ്ടതുണ്ട്, അത് തീർച്ചയായും വിവേകപൂർവ്വം കണക്കാക്കേണ്ടതുണ്ട്. യഥാർത്ഥ ചിത്രം വളരെ ചെറുതാണെങ്കിൽ, സ്കെയിലിംഗ് ചെയ്യുമ്പോൾ വലിയ വശംഅത് വളരെ ഗുണമേന്മ നഷ്ടപ്പെടും.
മറുവശത്ത്, നിങ്ങൾ കൂടി എടുക്കുകയാണെങ്കിൽ വലിയ ചിത്രംഒരു കരുതൽ ഉണ്ടെങ്കിൽ, അത് വളരെയധികം ഭാരമുള്ളതായിരിക്കും, കൂടാതെ ദുർബലമായ ഇൻ്റർനെറ്റ് ഉള്ള മൊബൈൽ ഉപകരണങ്ങളിൽ നിന്ന് സൈറ്റ് ആക്സസ് ചെയ്യുന്ന ഉപയോക്താക്കൾ വളരെയധികം അധിക ബൈറ്റുകൾ ഡൗൺലോഡ് ചെയ്യും.
ഒരു റബ്ബർ വെബ്സൈറ്റ് സ്ഥാപിക്കുമ്പോൾ, വ്യത്യസ്ത സ്ക്രീൻ റെസല്യൂഷനുകളിൽ ഫലം പരിശോധിക്കുന്നതിന് ധാരാളം സമയം ചെലവഴിക്കുന്നു, മാത്രമല്ല, ഇതിന് മാന്യമായ ഡയഗണലുള്ള ഒരു മോണിറ്റർ ആവശ്യമാണ്, അല്ലാത്തപക്ഷം ഇത് എങ്ങനെ പരിശോധിക്കാം. എന്നാൽ റബ്ബർ വെബ്സൈറ്റ് ലേഔട്ടിൻ്റെ ഗുണങ്ങളുമായി താരതമ്യം ചെയ്യുമ്പോൾ ഈ ദോഷങ്ങളൊന്നും ഒന്നുമല്ല. HTML ലേഔട്ട് ഒരു യഥാർത്ഥ കലയാണ്, അത് എല്ലാ ലേഔട്ട് ഡിസൈനർക്കും മനസ്സിലാകുന്നില്ല. ഏത് തരത്തിലുള്ള ലേഔട്ടും ഉചിതമായിടത്ത് ഉപയോഗിക്കണം, മാത്രമല്ല എവിടെയും.
HTML ലേഔട്ട്
ഉദാഹരണം - റബ്ബർപുറം 1
ആവർത്തിച്ചുള്ള വളയലിന് ഉയർന്ന പ്രതിരോധമുള്ള റബ്ബറുകളുടെ ഉദാഹരണങ്ങൾ, ഡിഫെനൈൽഗുവാനിഡിൻ അടങ്ങിയിരിക്കുന്നു, പട്ടികയിൽ നൽകിയിരിക്കുന്നു. 4.15 മോഡുലസിൻ്റെ അല്ലെങ്കിൽ ക്രോസ്-ലിങ്കിംഗിൻ്റെ ഓരോ മൂല്യത്തിലും, DPG റബ്ബറുകൾ ഏറ്റവും വലിയ ക്ഷീണ പ്രതിരോധം പ്രദർശിപ്പിച്ചു.
ഒരു ഉദാഹരണമായി ടയർ സൈഡ്‌വാളുകൾക്കായി റബ്ബർ ഉപയോഗിക്കുന്നത്, നൈട്രജൻ പരിതസ്ഥിതിയിൽ സാമ്പിളുകൾ വിഘടിപ്പിക്കുമ്പോൾ DSC, DTG രീതികൾ NC, SBR, EPDM, ഹാലോബ്യൂട്ടിൽ റബ്ബർ എന്നിവയുടെ കോമ്പോസിഷനുകൾ തിരിച്ചറിയുന്നതിൽ മികച്ച ഫലങ്ങൾ നൽകുന്നുവെന്ന് കാണിക്കുന്നു.
ഒരു ഓക്സിജൻ പരിതസ്ഥിതിയിൽ വിഘടിപ്പിക്കുമ്പോൾ, വളവുകൾ വിവരദായകമല്ല, പക്ഷേ നൈട്രജൻ പരിതസ്ഥിതിയിൽ ലഭിക്കുന്ന വക്രങ്ങളുമായി പൊരുത്തപ്പെടുന്നു.
ക്രിസ്റ്റലൈസിംഗ് റബ്ബറുകളെ അടിസ്ഥാനമാക്കിയുള്ള റബ്ബറുകളുടെ ഉദാഹരണം ഉപയോഗിച്ച് ഈ ഇഫക്റ്റുകൾ നമുക്ക് പരിഗണിക്കാം, അവിടെ അവ വളരെ വ്യക്തമായി പ്രകടമാകുന്നു.
കെ.എ.കെരിമോവിൻ്റെ (1965) കൃതിയിൽ, റബ്ബറിൻ്റെയും പോളി വിനൈലിൻ്റെയും ഉദാഹരണം ഉപയോഗിച്ച്, ചലനാത്മക സ്ട്രെസ്-സ്ട്രെയിൻ കർവുകൾ, നേർരേഖകളോട് ചേർന്ന്, നിശ്ചലമായവയ്ക്ക് മുകളിലാണെന്നും, പൂജ്യത്തിനടുത്തുള്ള സമ്മർദ്ദങ്ങളുടെ മേഖലയിൽ, ശേഷിക്കുന്ന രൂപഭേദം സംഭവിക്കുമെന്നും കാണിച്ചു. ഡൈനാമിക് ലോഡുകളിൽ നിന്ന് മൂന്നിരട്ടി ഉയർന്ന സ്റ്റാറ്റിക് ആകാം.
ഓസോൺ വിള്ളൽ സമയത്ത് രാസപ്രവർത്തനങ്ങളിൽ ഈർപ്പത്തിൻ്റെ സ്വാധീനം സമാനമായ രാസഘടനയുടെ റബ്ബറുകളിൽ നിന്ന് തുല്യമായി പ്രകടമാകണം, എന്നാൽ ഇത് നിരീക്ഷിക്കപ്പെടുന്നില്ല, NK, SKI എന്നിവയിൽ നിന്നുള്ള റബ്ബറുകളുടെ ഉദാഹരണത്തിൽ കാണാൻ കഴിയും.
അഡാപ്റ്റീവ് വെബ്സൈറ്റ് ലേഔട്ട്, പാഠം ഒന്ന്. ഹോം പേജ് ലേഔട്ട്P.A. Rebinder, V. V. Margaritov എന്നിവർ നേടിയ ഫലങ്ങൾ ഫില്ലർ ധാന്യങ്ങളുടെ ഉപരിതലത്തിൻ്റെ സ്വഭാവത്തിൻ്റെ സ്വാധീനത്തിൽ അതിൻ്റെ ശക്തിപ്പെടുത്തൽ ഫലത്തിൽ വലിയ അടിസ്ഥാന പ്രാധാന്യമുള്ളതാണ്. റബ്ബർ ഒരു ഉദാഹരണമായി ഉപയോഗിച്ച്, ഉപരിതലങ്ങളുടെ തന്മാത്രാ സ്വഭാവമനുസരിച്ച് ഫില്ലറുകൾ മൂന്ന് ഗ്രൂപ്പുകളായി തിരിച്ചിരിക്കുന്നുവെന്ന് അവർ കാണിച്ചു.
റബ്ബറിന് വ്യത്യസ്ത ആവശ്യകതകളുണ്ട്. ഒരു ഉദാഹരണമായി, ഡ്രില്ലിംഗിലും ഓയിൽഫീൽഡ് ഉപകരണങ്ങളിലും ഉപയോഗിക്കുന്ന റബ്ബർ എടുക്കാം.
എന്നിരുന്നാലും, പോളിമറും ലായകങ്ങളും തമ്മിലുള്ള പ്രതിപ്രവർത്തനത്തിൻ്റെ ഇൻ്റർമോളിക്യുലർ ശക്തികളുടെ വ്യത്യസ്ത സ്വഭാവം ഈ മീഡിയകൾക്കുള്ള സോളിബിലിറ്റി പാരാമീറ്ററുകളുടെ സമാന മൂല്യങ്ങളിൽ പോളിമറിൻ്റെ തികച്ചും വ്യത്യസ്തമായ വീക്കത്തിലേക്ക് നയിച്ചേക്കാം. റബ്ബറിൻ്റെ ഉദാഹരണം ഉപയോഗിച്ച് ഈ പ്രശ്നം കൂടുതൽ വിശദമായി പഠിച്ചു.
മാലിന്യങ്ങൾക്കും ഫില്ലറുകൾക്കും മൊത്തം ഭാരത്തിൻ്റെ ഒരു പ്രധാന ഭാഗം ഉണ്ടാക്കാൻ കഴിയും, മാത്രമല്ല പലപ്പോഴും റബ്ബറിൻ്റെ ഭാരത്തേക്കാൾ കൂടുതലാണ്. അസംസ്കൃത റബ്ബറിൽ ചേർക്കുന്ന മാലിന്യങ്ങൾ എത്ര വൈവിധ്യവും സങ്കീർണ്ണവുമാണെന്ന് റബ്ബറിൻ്റെ ഉദാഹരണത്തിൽ കാണാൻ കഴിയും. കാർ ടയറുകൾ.
രാസവസ്തുക്കൾക്കുള്ള പോളിമറുകളുടെ പ്രതിരോധം വർദ്ധിപ്പിക്കുന്നതിന് സജീവ മാധ്യമങ്ങൾക്രോസ്-ലിങ്കുകൾ ഈ പരിതസ്ഥിതികളെ പ്രതിരോധിക്കുന്നതായിരിക്കണം. നിലവിൽ ഉപയോഗിക്കുന്നവയിൽ ഏറ്റവും പ്രതിരോധം ക്രോസ്-ലിങ്കുകളാണ് തരം എസ്-എസ്, ഫ്ലൂറിൻ റബ്ബറിൻ്റെയും ക്ലോറോപ്രീൻ റബ്ബറിൻ്റെയും ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ (അധ്യായം കാണുക.
റബ്ബർ സ്ലൈഡുചെയ്യുന്ന വസ്ത്രധാരണ പ്രക്രിയയുടെ ഒരു പ്രധാന സ്വഭാവം മെറ്റൽ ഉപരിതലംകൂടെ ഉയർന്ന വേഗത, ആണ് ഗുരുതരമായ താപനിലഘർഷണത്താൽ അതിൻ്റെ നാശം. സാഹചര്യങ്ങളിൽ റബ്ബർ ഒരു ലോഹ പ്രതലത്തിൽ സ്ലൈഡ് ചെയ്യുമ്പോൾ ഉയർന്ന താപനിലഎക്സ്പോഷർ (200 - 400 സി), അതിൻ്റെ നാശത്തിൻ്റെ ഇനിപ്പറയുന്ന പ്രധാന തരങ്ങൾ സാധ്യമാണ്: ഘർഷണ പ്രതലത്തിൽ വിള്ളലുകളുടെ രൂപം, ഘർഷണ ജോഡിയുമായി ബന്ധപ്പെടുന്ന രണ്ട് ഉപരിതലങ്ങളിലും റബ്ബർ പൊതിഞ്ഞ പാളികളുടെ രൂപീകരണം, വിനാശകരമായ വസ്ത്രധാരണ പ്രക്രിയയുടെ സംഭവം. നൈട്രൈൽ-ബ്യൂട്ടാഡൈൻ, എഥിലീൻ-പ്രൊപിലീൻ റബ്ബർ എന്നിവയെ അടിസ്ഥാനമാക്കിയുള്ള റബ്ബർ ഒരു ഉദാഹരണമായി ഉപയോഗിച്ച്, ഈ വസ്തുക്കളുടെ നാശത്തിന് കാരണമാകുന്ന കാരണങ്ങൾ ഞങ്ങൾ വിശകലനം ചെയ്യും.
ഫില്ലറുകളുടെ ആമുഖം റബ്ബർ മൃദുലമാക്കൽ പ്രഭാവം വർദ്ധിപ്പിക്കുന്നു. ഒരു ഫില്ലറിൻ്റെ സാന്നിധ്യത്തിൽ മൃദുലമാക്കൽ പ്രഭാവം കൂടുതലാണെന്ന നിഗമനം പ്രകടമാണ്, റബ്ബറുകളുടെ താരതമ്യം റബ്ബർ ഘട്ടത്തിൻ്റെ വ്യത്യസ്ത യഥാർത്ഥ രൂപഭേദങ്ങളിൽ നടത്തുന്നു എന്ന വസ്തുതയുമായി മാത്രം ബന്ധപ്പെട്ടിരിക്കുന്നു. സ്വകാര്യ സ്വഭാവം. എൻസി റബ്ബറുകളുടെ പഠനസമയത്ത് ശേഖരിച്ച വിപുലമായ വസ്തുക്കളുടെ അടിസ്ഥാനത്തിലാണ് ഈ നിഗമനം. എന്നിരുന്നാലും, മറ്റ് റബ്ബറുകളിൽ നിന്നുള്ള റബ്ബറിൻ്റെ ഉദാഹരണങ്ങൾ ഉപയോഗിച്ച് കൂടുതൽ വിശദമായ വിശകലനം വ്യത്യസ്തമായ ഒന്ന് കാണിക്കുന്നു.
പേജുകൾ: ..... 1
ഓൺ ഈ നിമിഷംസ്വയം ഒരു വെബ്സൈറ്റ് എങ്ങനെ നിർമ്മിക്കാം എന്നത് ഒരു തീവ്രമായ ഫാൻ്റസി അല്ല, 2000 കളുടെ തുടക്കത്തിൽ അത് സങ്കീർണ്ണമായ ഒന്നിനെ പ്രതിനിധീകരിക്കുന്നില്ല.
ഇൻ്റർനെറ്റിൽ നിങ്ങളുടെ അത്ഭുതം സൃഷ്ടിക്കാൻ, നിങ്ങൾക്ക് തീർച്ചയായും, റെഡിമെയ്ഡ് ഉപയോഗിക്കാം സ്വതന്ത്ര എഞ്ചിനുകൾവെബ്‌സൈറ്റുകൾക്കും പ്രോഗ്രാമുകൾക്കുമായി (വെബ്സൈറ്റ് നിർമ്മാതാക്കൾ) അതിൻ്റെ സഹായത്തോടെ, html, css എന്നിവയെ കുറിച്ചുള്ള അടിസ്ഥാന അറിവ് പോലുമില്ലാതെ, ഒപ്റ്റിമൈസേഷൻ്റെയും SEOയുടെയും അടിസ്ഥാനത്തിൽ നിങ്ങൾക്ക് കുറച്ച് സമയത്തിനുള്ളിൽ ആദ്യം മുതൽ ഒരു വെബ്സൈറ്റ് നിർമ്മിക്കാൻ കഴിയും.
അല്ലെങ്കിൽ നിങ്ങൾക്ക് മറ്റൊരു, കൂടുതൽ ശരിയായ വഴിക്ക് പോകാം: പഠനം പ്രോഗ്രാം കോഡ് html ഒപ്പം സ്റ്റൈലിംഗ് css-ലെ ഘടകങ്ങൾ. ഈ ദിശയിൽ, നിങ്ങൾക്ക് ഏത് ഡിസൈനിൻ്റെയും വെബ്സൈറ്റ് നിർമ്മിക്കാനും അതിന് സവിശേഷമായ രൂപം നൽകാനും കഴിയും.
ഓൺലൈൻ HTML പരിശീലനം
നിങ്ങൾ കുറച്ച് സമയം ചിലവഴിക്കാനും html, css എന്നിവയുടെ അടിസ്ഥാനകാര്യങ്ങൾ പഠിക്കാനും ഞാൻ ശക്തമായി ശുപാർശ ചെയ്യുന്നു, കാരണം ഇവയൊന്നും അറിയാതെ, നിങ്ങൾക്ക് ഒരിക്കലും ഒരു ശകലവും സ്വയം ശരിയാക്കാൻ കഴിയില്ല, നിങ്ങൾ ആഗ്രഹിക്കുന്നതുപോലെ, വളരെ കുറച്ച് പുതിയത് ചേർക്കുക അത് ടെംപ്ലേറ്റിനുള്ളിൽ.
കമ്പ്യൂട്ടർ സയൻസ് ലാബുകൾ, പരീക്ഷഇൻ്റർനെറ്റിൽ ഈ വിഷയത്തിൽ ധാരാളം വിദ്യാഭ്യാസ സാമഗ്രികൾ ഉണ്ട്.
സൈറ്റിനായുള്ള ഘടകങ്ങൾ
ഒരു വെബ്സൈറ്റ് നിർമ്മിക്കുന്നതിന്, എങ്ങനെ ഉൾച്ചേർക്കണമെന്ന് നിങ്ങൾ അറിഞ്ഞിരിക്കണം html പേജുകൾ മെനു css, ലിങ്കുകൾ, ചിത്രങ്ങൾ, വീഡിയോകൾ, സൈറ്റ് ശരിയായി ഒപ്റ്റിമൈസ് ചെയ്യാനും മെറ്റാ ടാഗുകൾ ശരിയായി സജ്ജീകരിക്കാനും കഴിയും. ഇൻ്റർനെറ്റിൽ ഒരു വെബ്സൈറ്റ് എവിടെ, എങ്ങനെ സ്ഥാപിക്കണം, ഒരു പുതിയ പോർട്ടലിനായി എന്ത് പേര് വരണം, സഹായത്തോടെ ഒരു വെബ്സൈറ്റ് എങ്ങനെ നിർമ്മിക്കാം എന്നിവ പഠിക്കുന്നത് ഉപയോഗപ്രദമാകും. വിവിധ പരിപാടികൾഉപകരണങ്ങളും.
എന്തുകൊണ്ട് അത് ആവശ്യമാണ്? അഡാപ്റ്റീവ് ഡിസൈൻ? ഞാൻ സ്ഥിതിവിവരക്കണക്കുകളിൽ നിന്ന് ആരംഭിക്കും. 2013 മാർച്ചിലെ TNS ഡാറ്റ ചുവടെയുള്ള സ്ലൈഡിൽ നിങ്ങൾക്ക് കാണാൻ കഴിയും.
നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഏകദേശം മൂന്നിലൊന്ന് പ്രേക്ഷകരും സ്മാർട്ട്‌ഫോണുകളിലും ടാബ്‌ലെറ്റുകളിലും നിന്നാണ് വരുന്നത്. ഈ ശതമാനം എല്ലാ മാസവും മാത്രം വളരുന്നു. നിങ്ങൾ മനസ്സിലാക്കുന്നതുപോലെ, നിങ്ങളുടെ മൂക്ക് കാറ്റിൽ സൂക്ഷിക്കുന്നതാണ് നല്ലത്!)
പ്രശ്നം പരിഹരിക്കാൻ CSS മാത്രം മതിയാകാത്തതിനാൽ (ശൈലികൾ മാത്രമല്ല, ബ്ലോക്കുകളുടെ ഘടനയും ഉള്ളടക്കവും മാറ്റേണ്ടതുണ്ട്), ഞങ്ങൾ jQuery ഉപയോഗിക്കും. പലപ്പോഴും, ഒരു വെബ്സൈറ്റിൽ നിരവധി ബ്ലോക്കുകൾ അടങ്ങിയിരിക്കുന്നു: പ്രധാനവും സൈഡ്ബാറുകളും. നിങ്ങൾ സൈറ്റിനെ പൊരുത്തപ്പെടുത്തുകയാണെങ്കിൽ മൊബൈൽ ഉപകരണങ്ങൾ, അപ്പോൾ ഇത് 2 ബ്ലോക്കുകളിൽ കൂടുതലല്ല (ഇടത്തും വലത്തും).
അഡാപ്റ്റീവ് ലേഔട്ട് കോഡിൻ്റെ ഒരു ഉദാഹരണം ചുവടെയുണ്ട്. ഇതിൽ അടിസ്ഥാനകാര്യങ്ങൾ അടങ്ങിയിരിക്കുന്നു - ബാക്കിയുള്ളവ നിങ്ങളുടെ വിവേചനാധികാരത്തിൽ ചേർക്കാം. ഒപ്പം ബന്ധിപ്പിക്കാനും മറക്കരുത് jQuery ലൈബ്രറി! (jQuery ലൈബ്രറി എങ്ങനെ ഉൾപ്പെടുത്താമെന്ന് കാണുക?)
JS കോഡ് (jQuery)
$(പ്രമാണം).റെഡി(ഫംഗ്ഷൻ() (
var w = $(വിൻഡോ).വീതി(); // വിൻഡോ വീതി
var h = $(വിൻഡോ).ഉയരം(); // വിൻഡോ ഉയരം. ഞങ്ങൾ അത് ഉപയോഗിക്കുന്നില്ല. റഫറൻസിനായി
എങ്കിൽ (w
