በብዙ የፕሮግራም አወጣጥ ፣ ዘይቤ እና ምልክት ማድረጊያ ቋንቋዎች ልማት ፣ የድር ዲዛይን መማር ከመቼውም ጊዜ ይበልጥ የተወሳሰበ እየሆነ መጥቷል። እንደ እድል ሆኖ ፣ ለመጀመር እንዲረዱዎት ብዙ ቶን መሣሪያዎች አሉ። እንደ የመስመር ላይ ትምህርቶች ወይም በድር ዲዛይን ላይ ወቅታዊ መጽሐፍ ያሉ ጥቂት መሠረታዊ ሀብቶችን ይፈልጉ። ለመጀመር ዝግጁ ከሆኑ በኋላ የኤችቲኤምኤል እና የሲኤስኤስ መሰረታዊ ነገሮችን በማወቅ ይጀምሩ። ከዚያ እንደ ጃቫስክሪፕት ያሉ የበለጠ የላቁ የድር ዲዛይን ቋንቋዎችን ማሰስ መጀመር ይችላሉ!
ደረጃዎች
ዘዴ 1 ከ 4: የድር ዲዛይን መርጃዎችን ማግኘት
ደረጃ 1. ለድር ዲዛይን ኮርሶች እና ትምህርቶች በመስመር ላይ ይመልከቱ።
በይነመረቡ ስለ ድር ንድፍ ዝርዝር መረጃ ተሞልቷል ፣ እና ብዙዎቹ በነፃ ይገኛሉ። በ Udemy ወይም CodeCademy ላይ አንዳንድ ነፃ የመስመር ላይ ኮርሶችን በመውሰድ ፣ ወይም እንደ ነፃ ኮዴክፕምን የኮድ ማህበረሰብን በመቀላቀል ሊጀምሩ ይችላሉ። እንዲሁም በ YouTube ላይ የድር ዲዛይን ቪዲዮ ትምህርቶችን ማግኘት ይችላሉ።
- የሚፈልጉትን በትክክል ካወቁ ፣ የተወሰኑ ውሎችን በመጠቀም (ለምሳሌ ፣ “በ CSS አጋዥ ስልጠና ውስጥ የክፍል መምረጫዎች”) ፍለጋ ለማድረግ ይሞክሩ።
- ምንም የድር ዲዛይን ተሞክሮ ከሌለዎት ጀማሪ ከሆኑ በኤችቲኤምኤል እና በሲኤስኤስ ውስጥ ስለ ኮድ መሰረታዊ ነገሮች በመማር ይጀምሩ።
ደረጃ 2. በአካባቢያዊ ኮሌጅ ወይም ዩኒቨርሲቲ ውስጥ ትምህርት ለመውሰድ ይመልከቱ።
ኮሌጅ ወይም ዩኒቨርሲቲ የሚማሩ ከሆነ ፣ የትኛውም የድር ዲዛይን ኮርሶች መኖራቸውን ለማወቅ ከት / ቤትዎ የኮምፒተር ሳይንስ ክፍል ጋር ያረጋግጡ ወይም የኮርስ ካታሎግዎን ያማክሩ። እርስዎ ትምህርት ቤት ውስጥ ካልሆኑ ፣ በአቅራቢያዎ ያሉ ማናቸውም ኮሌጆች ወይም ዩኒቨርሲቲዎች በድር ዲዛይን ቀጣይ ትምህርት ትምህርቶችን የሚያቀርቡ ከሆነ ይመልከቱ።
አንዳንድ ዩኒቨርሲቲዎች ለመመዝገብ ለሚፈልግ ለማንኛውም ሰው ክፍት የሆኑ የመስመር ላይ የድር ዲዛይን ትምህርቶችን ይሰጣሉ። በዩኒቨርሲቲ መምህራን የሚማሩትን ነፃ ወይም ተመጣጣኝ የድር ዲዛይን ትምህርቶችን ለማግኘት እንደ Coursera.org ያሉ ድር ጣቢያዎችን ይመልከቱ።
ደረጃ 3. ከመጽሐፍት መደብር ወይም ከቤተመጽሐፍት የተወሰኑ የድር ዲዛይን መጽሐፎችን ያግኙ።
የእጅ ሥራዎን ሲማሩ እና ሲተገብሩ በድር ዲዛይን ላይ ጥሩ መጽሐፍ በዋጋ ሊተመን የማይችል ማጣቀሻ ሊሆን ይችላል። በአጠቃላይ የድር ዲዛይን ወይም ሊማሩዋቸው በሚፈልጓቸው የተወሰኑ የኮድ ቅርጸቶች እና ቋንቋዎች ላይ ወቅታዊ መጽሐፍትን ይፈልጉ።
ስለ ድር ዲዛይን መጽሔቶችን እና የጦማር መጣጥፎችን ማንበብ እንዲሁ አዳዲስ ቴክኒኮችን ለመማር ፣ መነሳሳትን ለማግኘት እና የቅርብ ጊዜዎቹን አዝማሚያዎች ለመከታተል ጥሩ መንገድ ነው።
ደረጃ 4. አንዳንድ የድር ዲዛይን ሶፍትዌሮችን ያውርዱ ወይም ይግዙ።
ጥሩ የድር ዲዛይን ሶፍትዌር ድር ጣቢያዎችን በበለጠ በብቃት እና በብቃት እንዲገነቡ ሊያግዝዎት ይችላል ፣ እንዲሁም ኮድን ፣ ስክሪፕት እና ሌሎች ቁልፍ የንድፍ አካላትን የመተግበር ውስጠ -ትምህርቶችን እንዲማሩ እርስዎን ለማገዝ በጣም ጥሩ ነው። እንደነዚህ ያሉ መሣሪያዎችን በመጠቀም ተጠቃሚ ሊሆኑ ይችላሉ-
- እንደ Adobe Photoshop ፣ GIMP ወይም Sketch ያሉ የግራፊክ ዲዛይን ፕሮግራሞች።
- እንደ WordPress ፣ Chrome DevTools ፣ ወይም Adobe Dreamweaver ያሉ የድር ጣቢያ ግንባታ መሣሪያዎች።
- የተጠናቀቁ ፋይሎችዎን በአገልጋይዎ ላይ ለማስተላለፍ የኤፍቲፒ ሶፍትዌር።
ደረጃ 5. ሲጀምሩ ለመጫወት አንዳንድ የድር ጣቢያ አብነቶችን ያግኙ።
የድር ንድፍ መሰረታዊ ነገሮችን ሲማሩ አብነቶችን መጠቀም ምንም ስህተት የለውም። የሚወዱትን የድረ -ገጽ አብነቶች ፍለጋ ያድርጉ ፣ እና ንድፍ አውጪው ገጹን እንዴት እንዳስቀመጠ ሀሳብ ለማግኘት ኮዱን በጥልቀት ይመልከቱ። እንዲሁም ኮዱን በመለወጥ እና የራስዎን አካላት ወደ አብነት በማከል ሙከራ ማድረግ ይችላሉ።
ለመጀመር ነፃ የድር ጣቢያ አብነቶችን ፍለጋ ያድርጉ ፣ ወይም ከድር ዲዛይን ሶፍትዌርዎ ጋር በሚመጡ አብነቶች ሙከራ ያድርጉ።
ዘዴ 2 ከ 4 - ኤችቲኤምኤልን ማስተዳደር
ደረጃ 1. በመሠረታዊ የኤችቲኤምኤል መለያዎች እራስዎን ያውቁ።
ኤችቲኤምኤል የድር ጣቢያዎችን መሠረታዊ ነገሮች ለመቅረጽ የሚያገለግል ቀላል ምልክት ማድረጊያ ቋንቋ ነው። መለያዎችን በመጠቀም የድር ጣቢያዎን የተለያዩ አካላት መቅረጽ ይችላሉ። መለያዎች ከእያንዳንዱ አካል በፊት እና በኋላ በማዕዘን ቅንፎች ውስጥ ይታያሉ ፣ እና ያ አካል በገጹ ላይ እንዴት እንደሚሠራ መመሪያዎችን ያቅርቡ። መለያውን ለመዝጋት ፣ በማዕዘኑ ቅንፎች ውስጥ ከመጨረሻው መለያ ፊት / ፊት ለፊት ያስቀምጡ።
- ለምሳሌ ፣ አንዳንድ ጽሑፍዎ እንዲሆን ከፈለጉ ደፋር ፣ ኤለመንቱን በመለያው ይከብቡታል ፣ እንደዚህ ይህ ጽሑፍ ደፋር ነው።
- ጥቂት የተለመዱ መለያዎች (አንቀጽ) ፣ (የተገናኘ ጽሑፍን የሚገልጽ መልህቅ) ፣ እና (ቅርጸ -ቁምፊ ፣ እንደ የጽሑፉ የተለያዩ ባህሪዎች ለመግለጽ ሊረዳ የሚችል ፣ እንደ መጠን እና ቀለም)።
- ሌሎች መለያዎች የኤችቲኤምኤል ሰነዱን የተለያዩ ክፍሎች ራሱ ይገልፃሉ። ለምሳሌ ፣ እንደ ቁልፍ ቃላት ወይም በፍለጋ ሞተር ውጤቶች ውስጥ እንደሚታየው የገጽ መግለጫ ለተመልካቹ የማይታይ ስለ ገጹ መረጃን ለመያዝ ያገለግላል።
ደረጃ 2. የመለያ ባህሪያትን መጠቀም ይማሩ።
አንዳንድ መለያዎች እንዴት መሥራት እንዳለባቸው ለመግለጽ ተጨማሪ መረጃ ያስፈልጋቸዋል። ይህ ተጨማሪ መረጃ በመክፈቻው መለያ ውስጥ ይታያል ፣ እናም እሱ “ባህርይ” ይባላል። የባህሪው ስም ከመለያው ስም በኋላ ወዲያውኑ በቦታ ተለይቶ ይታያል። የባህሪው እሴት ከባህሪው ስም በ = ምልክት ተያይ attachedል እና በጥቅስ ምልክቶች የተከበበ ነው።
- ለምሳሌ ፣ አንዳንድ ጽሑፍዎን ቀይ ለማድረግ ከፈለጉ መለያውን እና ተገቢውን የቅርጸ -ቁምፊ ቀለም ባህሪን በመጠቀም ይህንን ማድረግ ይችላሉ - ይህ ጽሑፍ ቀይ ነው።
- በኤችቲኤምኤል መለያ ባህሪዎች በመደበኛነት የተገኙት ብዙ ውጤቶች ፣ ለምሳሌ የተለያዩ የቅርጸ -ቁምፊ ቀለሞችን ማቀናበር ፣ አሁን በተለምዶ በ CSS ኮድ ኮድ ይፈጸማሉ።
ደረጃ 3. ከጎጆ አካላት ጋር ሙከራ ያድርጉ።
ኤችቲኤምኤል እንዲሁ የበለጠ ውስብስብ ቅርጸት ለመፍጠር ሌሎች ንጥረ ነገሮችን ውስጥ እንዲያስቀምጡ ያስችልዎታል። ለምሳሌ ፣ አንድን አንቀጽ መግለፅ ከፈለጉ እና ከዚያ በአንቀጹ ውስጥ የተወሰኑትን ጽሑፎች ኢታሊክ ማድረግ ከፈለጉ ፣ እንደዚህ ማድረግ ይችላሉ-
ኮድ መስጠትን እወዳለሁ!
ደረጃ 4. ከባዶ አካላት ጋር ይተዋወቁ።
በኤችቲኤምኤል ውስጥ ያሉ አንዳንድ አካላት የመክፈቻ እና የመዝጊያ መለያዎች አያስፈልጉም። ለምሳሌ ፣ አንድ ምስል ካስገቡ ፣ የመለያውን ስም እና ማንኛውንም ሌሎች አስፈላጊ ባህሪያትን (እንደ የምስል ፋይል ስም እና ለተደራሽነት ዓላማዎች ማከል የሚፈልጉት ማንኛውም አማራጭ ጽሑፍ) አንድ “img” መለያ ብቻ ያስፈልግዎታል። ለምሳሌ:
ደረጃ 5. የኤችቲኤምኤል ሰነድ መሠረታዊ አቀማመጥ ያስሱ።
በኤችቲኤምኤል ላይ የተመሠረተ ድር ጣቢያዎ በትክክል እንዲሠራ ፣ መላውን ገጽ እንዴት እንደሚቀረጹ ማወቅ ያስፈልግዎታል። ይህ የእርስዎ የኤችቲኤምኤል ኮድ የት እንደሚጀመር እና እንደሚጠናቀቅ መግለፅን ያካትታል ፣ እንዲሁም የትኞቹ የኮዱ ክፍሎች እንደሚታዩ እና የተደበቀ የጀርባ መረጃን ለመስጠት እዚያ ያሉትን መለያዎች መጠቀምን ያካትታል። ለምሳሌ:
- ገጽዎን እንደ ኤችቲኤምኤል ሰነድ ለመለየት መለያውን ይጠቀሙ።
- በመቀጠል ኮድዎ የሚጀመርበትን እና የሚጨርስበትን ለመለየት መላውን ገጽዎን በመለያዎቹ ውስጥ ይያዙ።
- ለተመልካቹ የማይታይ ማንኛውንም መረጃ ፣ እንደ የገጽ ርዕስ ፣ ቁልፍ ቃላት እና የገጽ መግለጫዎ ፣ በመለያዎቹ ውስጥ ያስቀምጡ።
- ከመለያዎች ጋር የገጽዎን አካል (ማለትም ፣ ማንኛውም ጽሑፍ እና ተመልካቹ እንዲያይ የሚፈልጓቸውን ምስሎች) ይግለጹ።
ዘዴ 3 ከ 4 ከሲኤስኤስ ጋር መተዋወቅ
ደረጃ 1. በኤችቲኤምኤል ሰነዶችዎ ላይ ቅጦችን ለመተግበር CSS ን ይጠቀሙ።
CSS የተለያዩ ዘይቤዎችን እና የንድፍ አባሎችን ወደ ድር ገጽዎ ለመተግበር የሚያስችል የቅጥ ሉህ ቋንቋ ነው። ለምሳሌ ፣ በገጽዎ ላይ ላሉት አንዳንድ የጽሑፍ ክፍሎች አንድ የተወሰነ ቅርጸ -ቁምፊ ወይም የጽሑፍ ቀለም በመምረጥ ለመተግበር ከፈለጉ ፣ ይህንን ለማድረግ የ CSS ፋይል መፍጠር ይችላሉ። ከዚያ ፣ በፈለጉበት ቦታ ሁሉ የኤችቲኤምኤል ሰነድዎን የ CSS ፋይል ማስገባት ይችላሉ።
-
ለምሳሌ ፣ በኤችቲኤምኤል ሰነድዎ ውስጥ ያሉትን ሁሉንም የአንቀጽ ክፍሎች አረንጓዴ (CSS) ፋይል እንዲያደርግ ከፈለጉ ፣ መስመሮቹን የያዘ የ.css ፋይል መፍጠር ይችላሉ-
- ገጽ {
- ቀለም: አረንጓዴ;
- }
- ከዚያ እንደ style.css በሚለው ስም ፋይሉን ያስቀምጡታል።
- የቅጥ ሉህ በኤችቲኤምኤል ሰነድዎ ላይ ለመተግበር በመለያዎቹ ውስጥ እንደ ባዶ አገናኝ አካል አድርገው ያስገባሉ። ለምሳሌ:
ደረጃ 2. ከ CSS ደንብ ስብስብ አካላት ጋር ይተዋወቁ።
የግለሰብ የ CSS ኮድ “ደንብ ስብስብ” ይባላል። የደንቡ ስብስብ ኮድዎ ምን ማድረግ እንደሚፈልጉ የሚገልጹትን የተለያዩ አካላት ይ containsል። እነዚህም የሚከተሉትን ያካትታሉ:
- እርስዎ ለመቅረጽ የሚፈልጉትን የኤችቲኤምኤል አባል የሚገልፀው መራጭ። ለምሳሌ ፣ የእርስዎ ደንብ በአንቀጽ አባሎች ላይ ተጽዕኖ እንዲያሳድር ከፈለጉ ፣ “ፒ” በሚለው ፊደል የእርስዎን ደንብ ያዘጋጁ።
- እርስዎ ለመቅረፅ የሚፈልጓቸውን ንብረቶች (እንደ ቅርጸ ቁምፊ ቀለም) የሚገልጽ መግለጫ። መግለጫው በተጣበቁ ቅንፎች ውስጥ ተይ {ል {}።
- የኤችቲኤምኤል ኤለመንት (ኤችቲኤምኤል) ምን ዓይነት ቅጥ ማድረግ እንደሚፈልጉ የሚገልጽ ንብረት። ለምሳሌ ፣ በትር ውስጥ ፣ የጽሑፉን ቀለም መቀረፅ እንደሚፈልጉ መግለፅ ይችላሉ።
- የንብረቱ እሴት ንብረቱን እንዴት መለወጥ እንደሚፈልጉ (ለምሳሌ ፣ ንብረቱ የቅርጸ -ቁምፊ ቀለም ከሆነ ፣ የንብረቱ እሴት “አረንጓዴ” ይሆናል) ይገልጻል።
- በአንድ መግለጫ ውስጥ በርካታ የተለያዩ ንብረቶችን መለወጥ ይችላሉ።
ደረጃ 3. የእርስዎ የጽሕፈት ጽሑፍ ጥሩ ሆኖ እንዲታይ CSS ን ወደ ጽሑፍዎ ይተግብሩ።
በኤችቲኤምኤል ውስጥ እያንዳንዱን ንብረት በግለሰብ ደረጃ ኮድ ሳያስቀምጥ CSS በጽሑፍዎ ላይ የተለያዩ ውጤቶችን ለመተግበር ጠቃሚ ነው። በሲኤስኤስ ውስጥ የተለያዩ የጽሕፈት መገልገያ ባህሪያትን በመቀየር ሙከራ ፣ የሚከተሉትንም ጨምሮ ፦
- የቅርጸ -ቁምፊ ቀለም
- የቅርጸ -ቁምፊ መጠን
- የቅርጸ -ቁምፊ ቤተሰብ (ለምሳሌ ፣ በጽሑፍዎ ውስጥ ሊጠቀሙባቸው የሚፈልጓቸው የቅርጸ -ቁምፊዎች ክልል)
- የጽሑፍ አሰላለፍ
- የመስመር ቁመት
- የደብዳቤ ክፍተት
ደረጃ 4. በሳጥኖች እና በሌሎች የሲኤስኤስ አቀማመጥ መሣሪያዎች ሙከራ።
CSS እንደ የጽሑፍ ሳጥኖች እና ሰንጠረ suchች ያሉ ማራኪ የእይታ ክፍሎችን ወደ ገጽዎ ለመጨመር ጠቃሚ ነው። በተጨማሪም ፣ የገጽዎን አጠቃላይ አቀማመጥ ለመለወጥ እና የተለያዩ አካላት እርስ በእርስ የሚዛመዱበትን ለመግለጽ ሊጠቀሙበት ይችላሉ።
ለምሳሌ ፣ የአንድ ንጥረ ነገር ስፋት እና የጀርባ ቀለም ያሉ ባህሪያትን መግለፅ ፣ ድንበር ማከል ወይም በገጽዎ ላይ ባሉ የተለያዩ አካላት መካከል ክፍተት የሚፈጥሩ ጠርዞችን ማዘጋጀት ይችላሉ።
ዘዴ 4 ከ 4 - ከሌሎች የንድፍ ቋንቋዎች ጋር መሥራት
ደረጃ 1. በገጾችዎ ላይ በይነተገናኝ አባሎችን ማከል ከፈለጉ ጃቫስክሪፕትን ይማሩ።
እንደ እነማዎች እና ብቅ -ባዮች ያሉ በድር ጣቢያዎችዎ ላይ የበለጠ የላቁ ባህሪያትን ለመጨመር ፍላጎት ካለዎት ለመማር ጥሩ ቋንቋ ነው። በጃቫስክሪፕት ውስጥ እንዴት ኮድ ማድረግ እንደሚችሉ እና እነዚያን ኮድ የተደረገባቸውን ንጥረ ነገሮች በድር ገጾችዎ ውስጥ ማካተት / ኤችቲኤምኤልን በመጠቀም እንዴት እንደሚማሩ ኮርስ ይውሰዱ ወይም የመስመር ላይ ትምህርቶችን ይፈልጉ።
በጃቫስክሪፕት ከመመቸትዎ በፊት በኤችቲኤምኤል እና በሲኤስኤስ ውስጥ ገጾችን የመገንባት መሰረታዊ ነገሮችን ማወቅ ያስፈልግዎታል።
ደረጃ 2. የጃቫስክሪፕት ኮድ ቀላል ለማድረግ እራስዎን በ jQuery ይተዋወቁ።
jQuery የተለያዩ ቅድመ-ኮድ የተሰጣቸው የጃቫስክሪፕት አባሎችን እንዲያገኙ በመፍቀድ የጃቫ ፕሮግራምን ማቃለል የሚችል የጃቫስክሪፕት ቤተ-መጽሐፍት ነው። የጃቫስክሪፕት ኮድ መሰረታዊ ነገሮችን አስቀድመው የሚያውቁ ከሆነ jQuery ጥሩ መሣሪያ ነው።
በ jQuery.org ድርጣቢያ በ jQuery.org በኩል የ jQuery ቤተ -መጽሐፍትን እና ሌሎች ብዙ ጠቃሚ ሀብቶችን መድረስ ይችላሉ።
ደረጃ 3. የኋላ-መጨረሻ ልማት ፍላጎት ካለዎት ከአገልጋይ ጎን-ቋንቋዎችን ያጠኑ።
ኤችቲኤምኤል ፣ ሲኤስኤስ እና ጃቫስክሪፕት ተጠቃሚው በድር ጣቢያው ላይ በሚያየው እና በሚሰራው ላይ ያተኮሩ ለድር ዲዛይነሮች ተስማሚ ቢሆኑም ፣ ከበስተጀርባ ትዕይንቶች ሥራ የበለጠ ፍላጎት ካሎት በአገልጋይ-ጎን ቋንቋዎች ጠቃሚ ናቸው። ስለ ኋላ-ልማት ልማት ለማወቅ ከፈለጉ እንደ Python ፣ PHP እና Ruby on Rails ባሉ ቋንቋዎች በመማር ላይ ያተኩሩ።
እነዚህ ቋንቋዎች ተጠቃሚው የማያየውን ውሂብ ለማስተዳደር እና ለማቀናበር ጠቃሚ ናቸው። ለምሳሌ ፣ PHP መግቢያ በሚፈልጉ ድር ጣቢያዎች ላይ ደህንነቱ የተጠበቀ የይለፍ ቃል ፈጠራ መሳሪያዎችን ለመገንባት ሊያገለግል ይችላል።
የእገዛ ፋይሎች
የኤችቲኤምኤል ማጭበርበሪያ ሉህ
CSS የማጭበርበሪያ ሉህ
