Зургийн талаархи текстийг яаж устгах вэ?

Вэб хуудсыг хараарай. Текстийн агуулга болон зураглалын хослолыг харах болно. Эдгээр элементүүд нь вэбсайтын амжилтанд чухал үүрэг гүйцэтгэдэг. Текстийн агуулга нь сайтын уншигчид, тэдгээрийн эрэмбийн алгоритмын нэг хэсэг болгон хайлтын системийг ашиглахад юуг текстийн агуулгыг хэлнэ. Зургууд нь сайтад харагдах сонирхлыг нэмэгдүүлж, текст агуулгыг улам сайжруулахад тусална.

Вэбсайтад текст болон зургийг нэмж оруулах нь хялбар байдаг. Текстийг догол мөр, гарчиг, жагсаалт гэх мэт стандарт HTML тагуудаар нэмж оруулсан бол зургууд нь элементтэй хуудсан дээр байрлуулсан байна. Хэдийгээр та вэб хуудсандаа зураг нэмж оруулсаны дараа та доорх зургийг сонгохын оронд текстийн урсгалын урсгалыг оруулахыг хүсч болох юм (энэ нь анх HTML корруп дээр нэмсэн зураг нь браузерт гарах болно). Техникийн хувьд, та CSS-г (зөвлөсөн) ашиглан эсвэл харааны зааврыг HTML-д шууд холбох хоёр арга бий (таны вебсайтын хэв маяг, бүтэцийг тусгаарлахыг хүсдэг тул та үүнийг зөвлөдөггүй).

CSS ашиглах

Хуудасны текст, зургуудын байршлыг хэрхэн өөрчлөх, зөв ​​харагдах байдал нь хөтөчид CSS- тэй хэрхэн харагдах арга замыг өөрчлөх зөв арга юм. Зүгээр л бид хуудас дээр харагдах өөрчлөлтийн талаар ярьж байгаа тул (зураг дээр текстийн урсгалыг гаргах), энэ нь Cascading Style Sheets-ийн домэйн гэсэн үг юм.

1. Эхлээд өөрийн зургийг өөрийн вэб хуудсанд нэмнэ үү. Вэбсайтаас үзүүлж буй аливаа харагдах шинж чанарыг (өргөн, өндөр утгатай) хасахыг санаарай. Энэ нь ялангуяа вэбсайтын хөтөч дээр тулгуурлан зурагны хэмжээ өөр өөр байх болно. Adobe Dreamweaver гэх мэт тодорхой програм хангамж нь тухайн хэрэгсэлд оруулсан зургийн өргөн, өндөр мэдээллийг нэмэх болно. Ийм мэдээллийг HTML кодоос хасахаа мартуузай! Гэхдээ зохих текстийг оруулаарай. Таны HTML код хэрхэн харагдах жишээ энд байна:
2. Сандлуулах зориулалтаар та анги дээрээ анги нэмж болно. Энэ ангийн үнэ цэнэ нь бидний CSS файл дээр ашиглах болно. Энд хэрэглэж буй утга нь дур зоргын хувьд, энэ хэв маягийн хувьд бид өөрсдийн зургийг ямар аргаар холбохыг хүсэж байгаагаас шалтгаалан "зүүн" эсвэл "баруун" утгуудыг ашиглах хандлагатай байдаг. Энэхүү энгийн синтакс нь сайн ажиллаж, ирээдүйд сайтыг удирдаж болох бусад хүмүүст амархан байх болно, гэхдээ та хүссэн хичээлийнхээ утгыг өгч чадна.
   2. Өөрөөр хэлбэл, энэ ангийн үнэ цэнэ нь юу ч хийхгүй. Зурган текстийн зүүн талд автоматаар холбогдохгүй болно. Үүний тулд бид одоо CSS файлаа хандах хэрэгтэй.

1. Таны загварын хуудсанд та дараах загварыг нэмж болно:
   1. .left {
   2. float: left;
   3. padding: 0 20px 20px 0;
   4. }
   5. Таны хийсэн зүйл бол CSS "float" өмчийг ашигладаг бөгөөд энэ нь дүрсийг энгийн хэвийн урсгалаас (зураг нь ихэвчлэн харуулах текстийг ашиглан доорх тексттэй хамт) зурж, түүний савны зүүн талд байрлуулна . HTML тэмдэглэгээнд оруулсны дараа текстийг эргэн тойронд нь оруул. Бид мөн зарим хэсэглэлийг нэмсэн тул энэ текст нь зурагтай шууд холбогдохгүй. Үүний оронд хуудсын дизайны үзэгдэхүйц сонирхолтой байх болно. CSS дээр түргэн бичиж байхдаа бид зургийн дээд болон зүүн талд 0 утгыг нэмж, зүүн, доод тал нь 20 пикселийг нэмсэн. Зүүн талд байрласан зурган дээр баруун талыг нэмэх хэрэгтэй. Баруун талд байрласан зураг (бид түр зуур харах болно) зүүн талд нь дэвсэх боломжтой.
2. Хэрэв та вэбсайтыг браузер дээр харах юм бол таны зургийг хуудасны зүүн талуудтай холбож, текстийг эргэн тойронд нь буулгах болно. Өөрөөр хэлбэл энэ зураг нь "зүүн тийш хөвж яваа" гэсэн үг юм.

1. Хэрэв та энэ зургийг баруун тийш нь холбохыг хүсвэл (энэ өгүүллийг дагалдаж байгаа жишээ зургийн жишээнд) энэ нь энгийн байх болно. Нэгдүгээрт, бид "зүүн" ангилалын үнэ цэнэд зориулж CSS дээрээ нэмсэн хэв маягаас гадна бид бас баруун тийшээ нэгийг ашиглах хэрэгтэй. Энэ нь иймэрхүү харагдах болно:
   1. .right {
   2. float: right;
   3. Суурин: 0 0 20px 20px;
   4. }
   5. Энэ нь бидний бичсэн анхны CSSтэй бараг адилхан болохыг та харж болно. Зөвхөн ялгаа нь "float" өмч болон бидний хэрэглэдэг дэвсгэр хэмжээнүүдийн утга юм (заримыг нь бидний зургийг зүүн тал дээр нь нэмнэ).
2. Эцэст нь, та зургийн дүрмийн утгыг "зүүн" гэдгээс HTML рүү "баруун" болгож өөрчлөх болно:
3. Одоо вэб хөтчийнхөө хуудсыг хараарай, таны зургийг баруун тийш нь холбох хэрэгтэй. Вэбсайтуудыг үүсгэх үед эдгээр загварыг ашиглахдаа бид эдгээр хэв маяг, "зүүн", "баруун" хоёрын аль алийг нь хэвлэмэл хэлбэрээр байрлуулах хандлагатай байдаг. Эдгээр хоёр загвар нь бидэнд эргэн тойрон дахь текстийг буулгахад зургийг хэв загвар болгон хувиргахад хэрэгтэй, дахин дахин ашиглах боломжийг олгодог.

HTML-ийг оронд CSS (болон үүнийг яагаад хийх ёсгүй)

Хэдийгээр HTML-тэй ойролцоох HTML текстийг боосон текст хийх боломжтой боловч вэбийн стандартууд нь CSS (мөн дээр дурдсан алхамууд) нь бүтцийг (HTML) болон хэв маягийг (CSS) тусгаарлах байлгахын тулд хийх арга юм. Үүнийг зарим нэг төхөөрөмж, байршлын хувьд энэ текст зураг дээр тойрон гарах шаардлагагүй гэж үзэхэд энэ нь чухал юм. Жижиг дэлгэцийн хувьд, хариу вэб сайтын байршил нь текст нь зурагны доор яг тохирсон байх ёстой бөгөөд зураг нь дэлгэцийн өргөнийг сунгадаг болохыг шаардаж болно. Хэрэв таны хэв маягийн HTML тэмдэглэгээнээс тусдаа байвал медиа асуулга ашиглан үүнийг хялбархан хийж болно. Өнөөгийн олон төхөөрөмж, зураг, текст нь өөр өөр зочдод болон өөр өөр дэлгэц дээр өөр өөр харагдах болно. Энэ тусгаарлалт нь урт хугацааны амжилт болон вэб хуудасны менежментэнд чухал юм.