ስለአንድ ምስል ዙሪያ ምስሎችን እንዴት እንደሚጨርሱ

ማንኛውንም ድረ-ገጽ ይመልከቱና የፅሁፍ ይዘት እና ምስሎችን ጥምረት ታያለህ. እነዚህ ሁለት ነገሮች በአንድ ድር ጣቢያ ስኬት ውስጥ አስፈላጊ ናቸው. የጽሁፍ ይዘት የትኛው የጣቢያ ጎብኚዎች እንደሚነበቡ እና የትኞቹ የፍለጋ ፕሮግራሞች እንደ የደረጃ አሰጣጥ ስልተ ቀመርቸው አካላት እንደሚጠቀሙበት ነው . ምስሎች ለጣቢያው የመታየት ፍላጎት እና የፅሁፍ ይዘትን ለማጎልበት ያግዛሉ.

ጽሑፍን እና ምስሎችን ወደ ድርጣቢያ ማከል ቀላል ነው. ጽሁፎች በ ኤለ ኤሉ ላይ ባሉ ምስሎች ላይ በሚቀመጡ ደረጃዎች ላይ እንደ መስመሮች, ርዕሶች እና ዝርዝሮች በመደበኛ መስመሮች ላይ ይታከላል. አንዴ ምስል ወደ ድረ ገጽዎ ካከሉ በኋላ ከእሱ በታች ያለውን የጽሑፍ ፍሰት ሊፈልጉት ይችላሉ (ይህም ወደ ኤች ቲዩኤል ኮድ የታከለበት ምስል ነባሪ መንገድ ነው). ቴክኒካዊ, CSS (የሚመከር) በመጠቀም ወይም ቀጥ ያለ መመሪያዎችን ወደ ኤችቲኤምኤል በማከል (ይህን ለመምረጥ የሚያስችሉዎት ሁለት መንገዶች አሉ), ይህም ቅጥያውን እና ለድር ጣቢያዎ ያለውን መዋቅር ለመጠበቅ ስለሚፈልጉ ነው.

ሲኤስኤስ በመጠቀም

የአንድ ገጽ ጽሑፍ እና ምስሎችን አቀማመጥ የሚቀይር እና የአሳሽ ቅጦቻቸው በአሳሹ ውስጥ እንዴት እንደሚታይ ለመለወጥ ትክክለኛው መንገድ ከሲኤስኤል ጋር ነው . ማስታወስ ያለብዎት, በገጹ ላይ ስዕላዊ ለውጥ ስለምንናገር (በምስሉ ዙሪያ የጽሑፍ ፍሰት በማድረግ), ይህ ማለት የውስጣዊ የፅሁፍ ሉሆች ጎራ ነው.

1. በመጀመሪያ የእርስዎን ምስል ወደ ድረ ገጽዎ ያክሉ. ማንኛውም የንድፍ ባህሪዎችን (ልክ እንደ ስፋትና ቁመት) ከእዚያ ኤችቲኤምኤል ውስጥ ማስወገድን ያስታውሱ. ይሄ አስፈላጊ ነው, በተለይ በአሳሽ ላይ በመመስረት የምስል መጠኑ ሊለያይ በሚችልበት ለገቢያው ድር ጣቢያ . እንደ Adobe Dreamweaver ያሉ የተወሰኑ ሶፍትዌሮች በዚህ መሣሪያ ውስጥ የተካተቱ ምስሎች ስፋትና ቁመት መረጃ ያካትታሉ, ስለዚህ ይህን መረጃ ከኤች.ኤል.ኤል ኮድ ለማስወገድ እርግጠኛ ይሁኑ! ይሁን እንጂ ተገቢውን የመጠምቂያ ጽሑፍን ለማካተት እርግጠኛ ይሁኑ. የኤችቲኤምኤል ኮድ እንዴት እንደሚመስል የሚያሳይ ምሳሌ ይኸውና:
2. ለቅየሳ ዓላማዎች, አንድ ክፍል ወደ ምስል መጨመር ይችላሉ. ይህ የክፍል እሴት በኛ CSS ፋይላችን የምንጠቀምበት ነው. እዚህ የምንጠቀመው እሴት አመንጭ ነው, ምንም እንኳን, ለእዚህ የተለየ ስልት, የእኛን ምስል እንዲይዝ በምንፈልገው መንገድ ላይ በመመስረት "የግራ" ወይም "ቀኝ" እሴቶችን የመጠቀም አዝማሚያ እንዳለን ልብ ይበሉ. ያ ቀለል ያለ አገባብ በትክክል እንዲሠራ እና ወደፊት ሊታወቅ ለሚችለው ጣቢያ ማስተዳደር ለሚፈልጉ ሌሎች ሰዎች ቀላል ሆኖ እናገኘዋለን, ነገር ግን ይህን የፈለጉትን የክፍል እሴት መስጠት ይችላሉ.
   2. በራሱ, ይህ የክፍል ዋጋ ምንም ነገር አያደርግም. ምስሉ ከጽሁፍ ግራው ጋር በቀጥታ አልተጣመረም. ለዚህ, አሁን ወደ የ CSS ፋይላችን ማዞር ያስፈልገናል.

1. በእርስዎ የቅሎከርት ሉህ ውስጥ አሁን የሚከተለውን ቅጥ ማከል ይችላሉ:
   1. .ግራ {
   2. ተንሳፈው: ግራ;
   3. ጥቅል: 0 20px 20px 0;
   4. }
   5. እዚህ ላይ ያደረጉት ነገር የ CSS "float" ንብረቱን ነው , ይህም ምስሉን ከመደበኛ ሰነድ ፍሰት (ነባሩ ምስል እንደሚታየው, ከሱ በታች ካለው ጽሑፍ ጋር እንደሚጎዳበት) የሚወስድ ሲሆን ወደ መያዣው በግራ በኩል ይደርሳል . አሁን በኤል ኤች ቲ ኤም ኤል ማርክ ውስጥ የሚጨምረውን ጽሁፍ በዙሪያው ይንጠባጠቡ. እንዲሁም ይህ ጽሑፍ በምስሉ ላይ በቀጥታ ሳይሆን በምስሉ እንዲገባ አንዳንድ የማረፊያ ዋጋዎችን አክለናል. በምትኩ, በገፁ ንድፍ ውስጥ የሚስብ እና የሚያምር የሆነ አንዳንድ ክፍተት ይኖረዋል. በ CSS መሸጋገር ለፓድሺንግ, በምስሉ ላይኛው እና ግራ ጎን 0 ዋጋዎችን, እና በግራ እና ከታች 20 ፒክሰሎች ጋር አክለናል. ያስታውሱ, በግራ በኩል የተሰራውን ምስል ቀኝ ጎን ማከል ያስፈልግዎታል. በትክክለኛው የተሰየመ ምስል (በአፍታ ውስጥ የምናየው) በግራ በኩል እንዲተገበር ያደርገዋል.
2. የድር ገጽዎን በአሳሽ ውስጥ ከተመለከቱ, ምስልዎ ከገጹ ግራ በኩል ጋር የተጣጣመ መሆኑን እና ጽሁፉን በጥሩ ሁኔታ በጥብቅ ተጠንጥሯል ማለት ነው. ይህን ለመናገር ሌላኛው ምስል ምስሉ "ወደ ግራ ተንሳፈፈ" ነው.

1. ይህን ምስል ከቀኝ ጋር እንዲመጣ ለማድረግ መለወጥ ከፈለጉ (ይሄንን መጣጣፍ በተጠቀሰው የፎቶ ምሳሌ ላይ), ቀላል ይሆናል. በመጀመሪያ, ለ "ከክፍያ" የክፍል እሴቱ ውስጥ ለሲህኤስ ያክል እንደጨመረልን, በተጨማሪ ለትክክለኛ አቀማመጥም እንዲሁ አለን. ይሄ የሚመስለው:
   1. .ቀኝ {
   2. float: right;
   3. ድብድብ: 0 0 20px 20px;
   4. }
   5. ይሄ እኛ ከምንፃፍ የመጀመሪያው የሲሲኤስ ሲቀር ጋር ተመሳሳይ ነው. ብቸኛው ልዩነት ለ «float» ን የምንጠቀመው እሴት እና የምንጠቀምባቸው የመሸሸጊያ እሴቶች (አንዳንዴ በቀኝ በኩል ወደ የኛ ምስል በስተግራ በኩል ማከል).
2. በመጨረሻም የምስል ክፍሉን ዋጋ ከ "ግራ" ወደ "ቀኝ" በ HTML ውስጥ ይለውጡታል.
3. አሁን ገጽዎን በአሳሽ ውስጥ ተመልከቱ, እና ጽሁፍዎ በጥሩ ሁኔታ ለመያዝ ከመልዕክቱ ጋር የተገጣጠመ መሆን አለበት. የድር ገጾችን ስንፈጥር እነዚህን የእይታ ቅጦች መጠቀም እንድንችል ሁለቱንም እነዚህን ቅጦች, "ቀረ" እና "ቀኝ" ወደ ሙሉ ቅጦችዎ እንጨምራለን. እነዚህ ሁለቱ ቅጦች ጥሩ, ተደጋጋሚ ባህሪያት, በአካባቢያቸው ዙሪያ ጽሑፍን ለመጠቅለል ስዕሎችን ለመቅረጽ በየትኛውም ጊዜ ልንሄድ እንችላለን.

በ CSS ምትክ የኤችቲኤምኤል በመጠቀም (እና ለምን እንደማያደርጉት)

ምንም እንኳን በኤችቲኤም ምስል ዙሪያ ጽሑፍን ማሸብለብ ቢቻልም, የዌብ ደረጃዎች የ CSS (እና ከላይ የተመለከቱት ደረጃዎች) የሚሄዱበት መንገድ ነው, ይህም መዋቅር (ኤች ቲ ኤም ኤል) እና ቅጥ (ሲኤስኤስ) መለየት እንችላለን. ይህ ለአንዳንድ መሳሪያዎች እና አቀማመጦች ይህ በሚያስብዎት ጊዜ ይህ ጽሑፍ በጣም አስፈላጊ ነው, ይህ ጽሑፍ በምስሉ ዙሪያ መሄድ አይኖርበትም. ለትንሽ ማያ ገጾች, ምላሽ ሰጪው የድር ጣቢያ አቀማመጥ የጽሑፉ ምስሉ ከምስሉ በታች እንዲመስለው እና ምስሉ ሙሉ ማያውን ስፋት የሚያስተላልፍ መስሎታል. የእርስዎ ቅጥ ከኤች ቲ ኤች ቲ ኤም ኤል መለያዎ የተለየ ከሆነ ይህ በቀላሉ በሚዲያ ጥያቄዎች ይከናወናል. ዛሬ በተለያዩ የመሣሪያዎች ዓለም ውስጥ, ምስሎች እና ጽሁፎች ለተለያዩ ጎብኚዎች እና በተለያዩ ማያ ገጾች በተለየ ሁኔታ የሚታዩበት ቦታ, ይህ መለየት ለድረ-ገጾች ለረጅም ጊዜ ስኬታማነትና አስተዳደር አስፈላጊ ነው.