Олон шинэхэн загвар зохион бүтээгчид вэбсайт үүсгэхийн мөн чанарыг судалж байхдаа html дээр арын дэвсгэрийг хэрхэн дүрслэх талаар гайхдаг. Зарим хүмүүс энэ даалгаврыг шийдэж чадсан ч гэсэн зургийг дэлгэцийн бүхэл бүтэн өргөнөөр сунгахад асуудал гардаг. Үүний зэрэгцээ, би сайтыг бүх хөтөч дээр адилхан харуулахыг хүсч байна, тиймээс хөтчөөс хөтчийн шаардлагыг хангасан байх ёстой. Та арын дэвсгэрийг хоёр аргаар тохируулж болно: CSS загварыг ашиглан. Хүн бүр өөртөө хамгийн ихийг сонгодог хамгийн сайн сонголт. Мэдээж, CSS загварКод нь хадгалагдсан тул илүү тохиромжтой тусдаа файлмөн сайтын үндсэн шошго дээр нэмэлт багана авдаггүй, гэхдээ эхлээд бид сайтын дэвсгэр дээр зураг суулгах энгийн аргыг авч үзэх болно.

Арын дэвсгэр үүсгэх үндсэн HTML хаягууд

Тэгэхээр бүхэл бүтэн дэлгэц дээрх html-ийн фон гэсэн асуулт руу шилжье. Сайтыг үзэсгэлэнтэй харагдуулахын тулд та нэг чухал нарийн ширийн зүйлийг ойлгох хэрэгтэй: градиент дэвсгэр хийх эсвэл хатуу өнгөөр ​​будахад хангалттай, гэхдээ арын дэвсгэр дээр зураг оруулах шаардлагатай бол энэ нь сунадаггүй. мониторын нийт өргөнийг хамарна. Эхлээд та өөрийн сайтын хуудсыг харуулах өргөтгөлтэй зураг сонгох эсвэл дизайн хийх хэрэгтэй. Зөвхөн дэвсгэр зураг бэлэн болсны дараа "Зураг" нэртэй хавтас руу шилжүүлнэ үү. Үүнд бид ашигладаг бүх зураг, хөдөлгөөнт дүрс болон бусад график файлуудыг хадгалах болно. Энэ хавтас дотор байх ёстой үндсэн директорчиний бүх зүйлтэй html файлууд. Одоо та код руу шилжиж болно. Зургийн дэвсгэрийг өөрчлөх код бичих хэд хэдэн сонголт байдаг.

1. Тагийн шинж чанарыг бичих.
2. HTML кодын CSS хэв маягаар дамжуулан.
3. CSS загварыг тусдаа файлд бичнэ үү.

Хэрхэн арын дэвсгэрийг HTML дээр дүрс болгох нь танаас шалтгаална, гэхдээ энэ нь хэрхэн хамгийн оновчтой байх талаар хэдэн үг хэлмээр байна. Тагийн шинж чанараар бичихийг ашиглах эхний арга нь аль эрт хуучирсан. Хоёрдахь сонголтыг маш ховор тохиолдолд ашигладаг, учир нь олон тооны ижил кодыг олж авдаг. Гурав дахь сонголт нь хамгийн түгээмэл бөгөөд үр дүнтэй байдаг. Энд HTML жишээнүүдшошго:

1. Бичих эхний арга бол index.htm файл дахь tag атрибут (бие) юм. Энэ нь дараах хэлбэрээр бичигдсэн байна: (body background = "Folder_name/Image_name.extension")(/body). Өөрөөр хэлбэл, хэрэв бидэнд "Зураг" нэртэй JPG өргөтгөлтэй зураг байгаа бөгөөд бид хавтсыг "Зураг" гэж нэрлэсэн бол HTML кодын оруулга дараах байдлаар харагдах болно: (body background="Images/Picture.jpg") … (/ бие) .
2. Хоёрдахь бичлэгийн арга нь CSS загварт нөлөөлдөг боловч index.htm нэртэй ижил файлд бичигдсэн байдаг. (body style="background: url("../Images/Picture.jpg")").
3. Гурав дахь бичлэгийн аргыг хоёр файлаар хийсэн. Index.htm нэртэй баримт бичигт дараах мөрийг бичсэн байна: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). Мөн style.css гэж нэрлэгддэг загварын файлд бид аль хэдийн бичдэг: бие (арын дэвсгэр: url(Images/Picture.jpg")).

Бид HTML дээр дэвсгэр зураг хэрхэн хийх талаар ярилцсан. Одоо та зургийг бүхэлд нь дэлгэцийн өргөнөөр хэрхэн сунгахыг ойлгох хэрэгтэй.

Арын дэвсгэр зургийг цонхны өргөн хүртэл сунгах арга замууд

Дэлгэцээ хувь хэлбэрээр төсөөлье. Дэлгэцийн нийт өргөн, урт нь 100% x 100% байх болно. Бид зургийг энэ өргөн хүртэл сунгах хэрэгтэй. style.css файлын зургийн оруулгад зураасыг мониторын бүхэл бүтэн өргөн болон уртаар сунгах мөрийг оруулъя. Үүнийг CSS маягаар хэрхэн бичсэн бэ? Энэ бол энгийн!

дэвсгэр: url(Зураг/Зураг.jpg")

дэвсгэр хэмжээ: 100%; /* энэ оруулга нь ихэнх орчин үеийн хөтчүүдэд тохиромжтой */

Тиймээс бид дэлгэцийг бүхэлд нь дүүргэхийн тулд зургийг html дээр дэвсгэр болгон хэрхэн хийхийг олж мэдсэн. Мөн index.htm файлд бичих арга бий. Хэдийгээр энэ арга нь хуучирсан боловч эхлэгчдэд үүнийг мэдэж, ойлгох шаардлагатай. (head)(style) div ( background-size: cover; ) (/style) (/head) шошгонд энэ оруулга нь бид дэвсгэрийн бүхэл бүтэн өргөнд байрлах тусгай блокыг сонгож байгаа гэсэн үг юм. цонх. Бид вэбсайтын арын дэвсгэрийг HTML зураг болгох 2 аргыг авч үзсэн бөгөөд ингэснээр зураг нь орчин үеийн ямар ч хөтөч дээр дэлгэцийн бүхэл бүтэн өргөнийг хамарна.

Тогтмол дэвсгэрийг хэрхэн яаж хийх вэ

Хэрэв та зургийг ирээдүйн вэб эх сурвалжийн арын дэвсгэр болгон ашиглахаар шийдсэн бол уртыг нь сунгаж, гоо зүйн үзэмжийг алдагдуулахгүйн тулд үүнийг хэрхэн хөдөлгөөнгүй болгох талаар олж мэдэх хэрэгтэй. Тусламжийн тусламжтайгаар энэ жижиг нэмэлтийг бичихэд хялбар байдаг. Та style.css файлд арын дэвсгэрийн дараа нэг хэллэг нэмэх шаардлагатай: url(Images/Picture.jpg") fixed; эсвэл оронд нь цэгтэй таслал - байрлал: fixed-ийн ард тусдаа мөр нэмэх хэрэгтэй. Ингэснээр таны дэвсгэр зураг хөдөлгөөнгүй болно. Сайтын агуулгыг гүйлгэж үзэхэд та текстийн мөрүүд хөдөлж байгааг харах болно, гэхдээ арын дэвсгэр нь хэвээр байгаа тул арын дэвсгэрийг html дээр хэрхэн дүрслэх талаар хэд хэдэн аргаар сурсан.

HTML хэл дээрх хүснэгттэй ажиллах

Олон туршлагагүй вэб хөгжүүлэгчид хүснэгт, блокуудтай тулгарахдаа HTML дээр хэрхэн хүснэгтийн дэвсгэр болгохыг ойлгодоггүй. Бүх CSS загварын нэгэн адил энэ вэб програмчлалын хэл нь маш энгийн. Ийм асуудлыг шийдэх арга бол хоёр мөр код бичих явдал юм. Та энэ бичвэрийг аль хэдийн мэддэг байх ёстой хүснэгтийн эгнээба багануудыг (tr) ба (td) тэмдэг гэж тус тус тэмдэглэнэ. Хүснэгтийн арын дэвсгэрийг зураг хэлбэрээр хийхийн тулд та (хүснэгт), (tr) эсвэл (td) шошгон дээр зургийн холбоосыг харуулсан энгийн хэллэг нэмэх хэрэгтэй: дэвсгэр = зургийн URL. Тодорхой болгохын тулд хэд хэдэн жишээ хэлье.

Арын оронд зурагтай хүснэгтүүд: HTML жишээнүүд

2х3 хэмжээтэй хүснэгт зурж, дэвсгэрийг нь “Зураг” хавтсанд хадгалсан зураг болгоё: (хүснэгтийн дэвсгэр = “Зураг/Зураг.jpg”) (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/хүснэгт). Ингэснээр бидний ширээг зургийн арын дэвсгэр дээр будах болно.

Одоо 2х3 хэмжээтэй ижил хавтанг зуръя, гэхдээ 1, 4, 5, 6 дугаартай баганад зураг оруулна. (хүснэгт)(tr)(td background = “Images/Picture.jpg”)1(/td) (td) )2 (/td) (td)3(/td)(/tr) (tr)(td дэвсгэр = “Зураг/Зураг.jpg”)4(/td) (td дэвсгэр = “Зураг/Зураг.jpg”) 5( /td) (td дэвсгэр = “Зураг/Зураг.jpg”)6(/td) (/tr) (/хүснэгт). Үзсэний дараа дэвсгэр нь зөвхөн бидний бүртгүүлсэн нүднүүдэд гарч ирэхийг харж байна, гэхдээ бүх хүснэгтэд биш.

Сайтын хөтөч хоорондын нийцтэй байдал

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

Влад Мержевич

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

Вэб хуудасны дэвсгэр зураг

Вэб хуудсан дээр дэвсгэр зургийг тохируулах нь уламжлалт байдлаар шошгын дэвсгэр шинж чанараар хийгддэг. .

Энэ хэв маяг нь хэвтээ ба босоо байдлаар давтагддаг тул хөтчийн цонхыг бүхэлд нь дүүргэдэг. Энд бүтээлч байдлын тусгай сонголт байхгүй нь тодорхой тул хэв маяг руу эргэж, CSS ашиглан юу хийж болохыг харцгаая.

CSS нь дэвсгэр зургийг хянах таван шинж чанартай байдаг: нэмэлт, байрлал, давталт. Гэсэн хэдий ч эдгээр бүх параметрүүд нь бидний ирээдүйд ашиглах бүх нийтийн өмч болох дэвсгэрээр солигддог.

Дэлгэцийн зураг нэмж байна

Зураг нэмэх нь url түлхүүр үг ашиглан зургийн хаягийг тохируулах замаар хийгддэг. Зургийн давталтыг хянахын тулд давтагдахгүй, давтах-x (хэвтээ давтах) болон давтах-y (босоо давтах) аргументуудыг ашигладаг. Үүний ачаар та зурагт үзүүлсэн вэб хуудсыг авах боломжтой. 1.

Вэб хуудсанд зураг тохируулахын тулд 1-р жишээнд үзүүлсэн шиг BODY сонгогч дээр дэвсгэр загварын шинж чанарыг нэмэх шаардлагатай.

Дэвсгэр зураг INэнэ жишээнд

graphic target.gif нь зургийг давтахгүйгээр вэб хуудасны арын дэвсгэр гэж тодорхойлогддог. Зургийг хөтчийн ирмэг дээр нягт таарахгүйн тулд анхны байрлалаасаа 30 пикселээр баруун тийш, 20 пикселээр доош шилжүүлнэ.

Загварыг давтах

Та дэвсгэрийн хэв маягийг хэвтээ эсвэл босоо байдлаар давтах боломжтой тул вэб хуудасны дизайны хэд хэдэн сонголтыг хийх боломжтой. Жишээлбэл, зүүн ирмэгийн дагуу босоо тууз үүсгэхийн тулд (Зураг 2) Зураг дээр үзүүлсэн зураг хэрэгтэй болно. 3.

Загвар нь мэдэгдэхүйц оёдолгүйгээр босоо байдлаар бие биентэйгээ нийцэж байх ёстой бөгөөд вэб хуудасны арын дэвсгэр өнгөөр ​​нэг бүхэл бүтэн байх ёстой.

Үүний нэгэн адил та дэвсгэрийг хэвтээ байдлаар давтаж болно, жишээлбэл, градиент үүсгэж, дэвсгэр зураг болгон тохируулах (Зураг 4).

Зурагт үзүүлсэн вэб хуудсыг авахын тулд. 4, та эхлээд градиент шилжилттэй зураг хийх хэрэгтэй болно. Өргөн нь 20-40 пикселийг тодорхойлоход хангалттай бөгөөд зургийн өндөр нь баримт бичгийн зорилго, вэб хуудасны агуулгын хүлээгдэж буй өндрөөс хамаарна. Том зураг нь эзлэхүүнийг нэмэгдүүлэхэд хүргэдэг гэдгийг бүү мартаарай. график файл. Энэ нь түүний ачаалах хурдад сөргөөр нөлөөлж, эцэст нь арын дэвсгэр дэлгэц удаашрах болно. Энэ тохиолдолд 30x200 пикселийн зураг нэлээд тохиромжтой байсан (Зураг 5).

Жишээ 3 нь градиент дэвсгэр үүсгэх HTML кодыг харуулж байна.

Жишээ 3: Хэвтээ дэвсгэр давталт

Градиент дизайн нь хатуу өнгөт блоктой сайн зохицдог тул энэ жишээнд бид вэб хуудасны агуулгыг харуулах давхаргыг нэмж оруулав.

Текстэнд зураг нэмж байна

Дэвсгэр зургийг ашигласнаар та гарчиг гэх мэт тодорхой текстэнд график нэмэх үйл явцыг автоматжуулж болно. Үүнийг хийхийн тулд хүссэн сонгогч дээр хэрэглэгдэх арын дэвсгэрийн бүх нийтийн шинж чанарыг ашиглана уу. Утга нь зураг руу хүрэх зам бөгөөд дахин давтагдахгүйн тулд дахин давтагдахгүй аргумент юм (жишээ 4).

Жишээ 4: Зураг нэмэх

Гарчиг

Үндсэн текст

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

17.10.2015

Одоохондоо үгүй

Сайн уу!
HTML хэлний үндсийг үргэлжлүүлэн сурцгаая.
Энэ хичээл дээр би танд хэлж, жишээ үзүүлэх болно дэвсгэрийг хэрхэн хийх вэ HTML хуудасны өнгө эсвэл зургаас.
Энэ нь маш энгийн!
Өнгөөр ​​эхэлцгээе!
Би текстийн өнгийг хэрхэн өөрчлөх талаар хэлж, өгүүллийн төгсгөлд янз бүрийн өнгө, сүүдэрт зориулсан кодуудыг өгсөн тул та үүнийг алдаагүй гэж бодож байна. Би яагаад танд энэ хичээлийг сануулсан бэ? Тийм ээ, бэлэн өнгөний кодтой хүснэгт байгаа тул тэдгээрийг авч, энэ хичээл дээр шууд дадлага хий.
Тэгэхээр HTML дээр арын өнгийг хэрхэн хийх вэ...

HTML дээрх дэвсгэр өнгө

HTML баримт бичгийн үндсэн дэвсгэр өнгө нь цагаан байна. Хэрхэн өөрийн хүссэнээр өнгө тохируулах вэ?
Үүнд "bgcolor" шинж чанар тусална. Арын дэвсгэр дээр зурахын тулд энэ шинж чанарыг "body" шошгон дээр нэмнэ үү:

Эсвэл иймэрхүү:

Энд бүрэн HTML код байна:

Хуудасны текст ногоон өнгөтэй, дэвсгэр нь хар өнгөтэй байна.

Үр дүн нь иймэрхүү байх болно:

Хэрэв та зурган дээр арын дэвсгэр хийхийг хүсвэл "body" шошгон дээр "background" шинж чанарыг нэмнэ үү.

Таны вэб хуудасны аль ч зургийг бөглөнө үү (миний жишээнд энэ хуудсыг ".gif" өргөтгөлтэй "fon" гэж нэрлэдэг):

Энд бүрэн HTML код байна:

Үр дүн нь иймэрхүү байх болно:

Хэрэв дэвсгэр зураг нь зургийн хавтас эсвэл өөр хавтсанд байгаа бол дараах байдалтай харагдана.

Энд бүрэн HTML код байна:

Сайхан дэвсгэр дээр хуудасны текст.

Энэ бол өнөөдрийнх! Хичээл тийм ч хэцүү биш байсан тул та бүгдийг ойлгосон гэж бодож байна. Хэрэв танд асуулт байвал сэтгэгдэл дээр бичнэ үү.
Дараагийн хичээлүүдэд тантай уулзахыг тэсэн ядан хүлээж байна.

Өмнөх нийтлэл
Дараагийн оруулга

2 санал

Миний блогт тавтай морил. Бид үргэлжлүүлэн ойлгох болно html-ийн үндэс. Энэхүү заавар нь маш энгийн бөгөөд сонирхолтой байх тул та програмчлалын хэлний талаар илүү ихийг мэдэхийг хүсч байна гэж найдаж байна. Хэдхэн минутын дотор та HTML дээр зураг хэрхэн арын дэвсгэр болгох талаар суралцаж, маш сайн үр дүнд хүрэх болно.

Мөн арын дэвсгэрийг аль болох гөлгөр, үзэсгэлэнтэй болгох зарим нюансын талаар ярих болно. За, бид эхлэх үү?

Зураг сонгох

Би зураг сонгохоос эхэлмээр байна. Ингэснээр та хуудсан дээр илүү жигд, үзэсгэлэнтэй харагдахын тулд хэмжээ, зэрэгцүүлэх талаар санаа зовох хэрэггүй болно. Би нэн даруй үл үзэгдэх бүтцийг хайж олохыг санал болгож байна. Энэ юу вэ?

Харамсалтай нь дэлгэцийг бүхэлд нь дүүргэхийн тулд html дээр зургийг сунгах боломжгүй юм. Зургийг бодит хэмжээгээр ашигласан болно. Хэрэв зураг жижиг бол доорх дэлгэцийн зурган дээрх шиг бүхэл бүтэн хэсгийг хамарна. Зургийг сунгахын тулд та нэмэлт CSS баримт үүсгэх шаардлагатай бөгөөд үүнгүйгээр ажиллахгүй.

Хэдийгээр та системийг тойрч гарах боломжтой. Үүнийг хийхийн тулд Photoshop болон дэлгэцийн өргөн (1280x720) хүртэлх зургуудыг ашиглана уу. Хэдийгээр энэ тохиолдолд доош гүйлгэх үед зураг нь нөгөөгөөр солигдоно.

Хэрэв та css ашиглахыг хүсэхгүй байгаа бол илүү сайн сонголт бол үл үзэгдэх бүтэц ашиглах явдал юм. Тэдэнд харагдахуйц үе мөч байдаггүй. Эдгээр нь дизайны хувьд ханын цаас эсвэл орчин үеийн хавтан шиг юм. Нэг нь нөгөөгөө сольж, үе мөч харагдахгүй.

Хэрэв та тэдгээрийг ашиглахад хууль эрх зүйн үр дагавар гарахгүй байхыг сонирхож байгаа бол вэбсайтаас хайхыг зөвлөж байна Pixabay.com .

HTML

Одоо кодтой ажиллацгаая. Бид одоо html-тэй ажиллаж байгаа, өөрөөр хэлбэл бид бүхэл бүтэн сайтын хувьд биш, харин кодыг бичиж байгаа тодорхой нэг хуудсанд зориулж зургийг өөрчилсөн гэдгийг би даруй тэмдэглэх хэрэгтэй. Хэрэв та нөөцийг бүхэлд нь өөрчлөх сонирхолтой байгаа бол кодыг ашиглан кодлох хэрэгтэй css, гэхдээ энэ талаар дараа дэлгэрэнгүй.

Тиймээс та notepad дээр ажиллах боломжтой, би NotePad++-г илүүд үздэг. Үүн дээр ажиллахад илүү тохиромжтой: кодыг бөглөж, шошгыг тодруулсан болно. Хөтөлбөр нь үнэ төлбөргүй бөгөөд ойролцоогоор 3 MB жинтэй. Би үүнийг маш их зөвлөж байна, ялангуяа та эхлэгч бол.

Тиймээс, шошго руу биеТа атрибут нэмэх хэрэгтэй дэвсгэрмөн зургийг хаанаас авахыг зургийн холбоосыг зааж өгнө. Хөтөлбөрт иймэрхүү харагдаж байна.

Та зүгээр л тэмдэглэлийн дэвтэр нээж, энэ кодыг хуулж болно. Таалагдсан зургийнхаа линкийг хашилтанд оруулаарай.

<html > <толгой > <гарчиг >Арын дэвсгэр зураг</гарчиг> </толгой> <биеийн дэвсгэр = "https://pixabay.com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png"> </бие> </html>

Би эхлэгчдэд тэмдэглэхийг хүсч байна, энэ бол гол зүйл юм. Хэрэв та Pixabay-аас зураг авсан бол холбоосыг зурагтай хуудсан дээр биш харин дараагийн таб дээр нээх хэрэгтэй.

Яг энэ URL-г хуулна уу.

Баримт бичгийг хадгалах. Хэрэв та тэмдэглэлийн дэвтэр ашигладаг бол өргөтгөлийг ашиглах хэрэгтэй гэдгийг бүү мартаарай .html . Жишээлбэл, баримт бичгийг нэрлэ. back.html . Үгүй бол энэ нь хадгалагдах болно текст баримт бичигМөн хөтөч нь юу хийх ёстойгоо ойлгохгүй байх болно.

Дууссаны дараа хуудас өөр өнгөөр ​​дүүрсэн байна.

Хэрэв та html-ийн талаар илүү ихийг мэдэхийг хүсвэл татаж авахыг санал болгож байна Евгений Поповын үнэгүй сургалт . Үүнээс та илүү олон шошго, хэлний чадварыг сурч, зарим шинэ техникийг туршиж, илүү ихийг мэдэх болно.

Евгений Поповын сургалтууд маш их алдартай гэж би хэлэхгүй. Олон шинжээч түүнийг загнаж байгаа бөгөөд хэрэв та ийм мэдэгдэлтэй тулгарсан бол миний бодлоор энд байна. Эдгээр хичээлүүд нь үнэ төлбөргүй явагддаг бөгөөд үүнээс үл хамааран тэд үндсэн ажил болох эхлэгчдэд үндсийг нь харуулж, түүнийг шинэчлэхэд маш сайн ажилладаг.

Зохиолч бүр хэрхэн бичих талаар өөрийн гэсэн бодолтой байдаг шиг программистууд ч өөрийн гэсэн хэв маягтай байдаг. Та бүх амьдралаа вэбсайт хэрхэн бүтээх талаар сурахад зарцуулж болно, гэхдээ та хаа нэг газар эхлэх хэрэгтэй. Номноос уу? Энэ биш. Тийм ээ, тэдгээр нь илүү найдвартай мэдээлэл, хамгийн сүүлийн үеийн мэдээллийг агуулдаг боловч тэдгээрийг эзэмшихэд маш хэцүү байдаг.

Надтай санал нийлэхгүй байна уу? Би өөр хувилбар санал болгож чадна. Элизабет, Эрика Фриман нарын ном HTML, XHTML, CSS сурах " Энэ нь тийм ч уйтгартай бестселлер биш бөгөөд 2016 онд хэвлэгдсэн. Мэдээлэл нь хуучирсан болоогүй байна.

CSS

Хэрэв та сайтынхаа бүх хуудсан дээр арын дэвсгэрийг давтах шаардлагатай бол CSS заавал байх ёстой. Мэдээжийн хэрэг та өмнөх бүлэгт дурдсанчлан зам бүрийг зааж өгч болно. Гэхдээ цаг хугацаа өнгөрөхөд та үүнийг солих шаардлагатай эсэхийг төсөөлөөд үз дээ: холбоос хуучирсан эсвэл та зүгээр л дизайныг өөрчлөхийг хүсч байна. Хуудас бүр рүү ороод кодыг солих уу? Ингэж болохгүй.

CSS нь энэ асуудлыг шийдвэрлэхэд тусалдаг. Та css өргөтгөлтэй файл үүсгээд дараах кодыг оруулах шаардлагатай.

Кодын талаар бага зэрэг яръя. Хаалтанд, дараа нь url та гуравдагч талын эх сурвалжаас авсан зургийн линкийг оруулах эсвэл хэрэв зураг энэ файлтай нэг хавтсанд байгаа бол зүгээр л баримт бичгийн нэрийг оруулж болно.

Илүү сайн мэдэхийг хүссэн хүмүүст зориулав

At css тусламжчи сунгаж болно дэвсгэр зураг, энэ нь давтагдахгүй байгаа эсэхийг шалгаарай, GIF хөдөлгөөнт дүрс нэмээрэй гэх мэт.

Та бүгдийг нэг нийтлэлд бичиж чадахгүй. Би өөртөө ийм даалгавар тавиагүй. Маш олон нарийн ширийн зүйл байдаг бөгөөд хэрэв тэд бүгдийг нэг нийтлэлд хэлэх болно гэж амласан бол энэ нь хууран мэхлэлтээс өөр зүйл биш юм.

Та вэбсайтаа хэрхэн зөв бичиж сурахыг хүсч байна уу? Програмчлалын хэл сурахыг танд зөвлөж байна. Би Андрей Бернацкийн курсийг санал болгож чадна " HTML5 ба CSS3 тэгээс Pro хүртэл " Энэ зохиолч надад үнэхээр таалагдаж байна. Хэдэн жилийн өмнө би энэ сургалтанд хамрагдаагүй, гэхдээ үүнтэй төстэй зүйл байсан.

Зохиогч маш сайхан ярьдаг, бүх зүйл амархан, ойлгомжтой. Энэ сургалтын онцлох зүйл бол та зөвхөн суралцах биш, багштай хамтран тодорхой вэбсайт үүсгэдэг. Үүний үр дүнд та нэрийн хуудас, блог, тэр ч байтугай онлайн дэлгүүртэй болно. Маш дажгүй. Та HTML5-ийн эхний гурван онолын хичээлийг яг одоо эндээс үзэх боломжтой.

Дашрамд дурдахад, энэ курсын хамт та 7 урамшуулал авах болно: Андрей Бернацкийн бичсэн html болон css-ийн үндэс, эхлэгчдэд зориулсан загвар, оройн цагаар буух хуудас үүсгэх гэх мэт. Та ноцтой сургалтанд хамрагдахаасаа өмнө үнэгүй сургалтанд хамрагдаж үзээрэй " HTML5 болон CSS3 дадлага хийх ».

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

12/27/14 56.3K

Хэрэв шал нь үнэтэй Перс хивсээр бүрсэн бол ямар ч өрөө илүү сайхан харагдах болно. Тэгэхээр танай вэбсайт яагаад муу байна вэ? Магадгүй үнэтэй, гоёмсог гараар хийсэн хивсээр шалыг нь "бүрэх" цаг болсон байх. Вэб сайтын дэвсгэр зургийг хэрхэн яаж хийхийг нарийвчлан авч үзье.

Сайтын арын дэвсгэр

Хуучин вэбсайтын загвар нь уйтгартай болсон тохиолдол гардаг. Мөн би шинэ, амттай зүйлийг хүсч байна. А шинэ загварХэрэв та өөрийн гараар хоол хийвэл ийм болно.

Гэхдээ нөөцийн дизайныг бүхэлд нь бие даан өөрчлөх нь талархалгүй ажил юм. Мөн хүн бүрийн гар энэ ажилд зохих ёсоор бэлтгэгдсэн байдаггүй. Тиймээс хуучин загварыг сэргээх хамгийн хялбар арга бол нөөцийн дэвсгэр өнгө эсвэл түүний дэвсгэр зургийг өөрчлөх явдал юм.

Вэбсайт дээрх дэвсгэрийг өөрчлөх хэд хэдэн арга байдаг. Үүний тулд CSS эсвэл html-ийн чадварыг ашигладаг. Гэхдээ дэвсгэртэй ажиллах олон шинж чанарууд нь эдгээр вэб технологид ижил нэртэй, хэрэглэх аргатай байдаг.

html дээр дэвсгэртэй ажиллах үндсэн ойлголтууд

Хэд хэдэн элементийг дэвсгэр болгон ашиглаж болно:

• Өнгө;
• Дэвсгэр зураг;
• Бүтцийн зураг.

Тэдгээрийн хэрэглээг илүү нарийвчлан авч үзье.

Сайтын дэвсгэр өнгийг тохируулахын тулд загварын шинж чанарын background-color шинж чанарыг ашиглана уу. Өөрөөр хэлбэл, вэб хуудасны үндсэн өнгийг тохируулахын тулд та шошгон дотор бичих хэрэгтэй . Жишээ нь:

Вэб сайтын дэвсгэр №55D52B

Арван арвантын өнгөний кодоос гадна түлхүүр үг эсвэл RGB форматын утгыг дэмждэг. Жишээ нь:

Вэб сайтын дэвсгэр rgb(23,113,44)

Вэб сайтын дэвсгэр ногоон

Арын дэвсгэр өнгийг ашиглан тохируулна уу түлхүүр үгсбусад хоёр аргатай харьцуулахад хэд хэдэн хязгаарлалттай байдаг.

HTML нь өнгө тохируулахын тулд зөвхөн 16 түлхүүр үгийг дэмждэг. Тэдгээрийн заримыг энд дурдъя: цагаан, улаан, цэнхэр, хар, шарболон бусад.

Тиймээс, html вэбсайтын дэвсгэрийг тохируулахын тулд арван зургаатын тоо эсвэл RGB форматыг ашиглах нь дээр.

Өнгөний сонголтоос гадна өөр өөр тохируулга хийх боломжтой. Хэрэв background-color шинж чанарыг transparent гэж тохируулсан бол хуудасны арын дэвсгэр ил тод болно. Энэ утгыг анхдагчаар энэ өмчид оноодог.

Одоо сайтын дэвсгэр зургийг тохируулах гипертекст хэлний чадварыг харцгаая. Үүнийг background-image шинж чанарыг ашиглан хийж болно.

Кодоос харахад зураг нь хаалтанд заасан url замаар холбогдсон байна. Гэхдээ бүх зураг тийм ч том биш бөгөөд хэмжээ нь дэлгэцийн бүх хэсгийг дүүргэх болно. Жижиг зураг хэрхэн харагдахыг харцгаая.

Бид яруу найргийн тухай вэбсайтыг хөгжүүлж байна гэж бодъё, бид Pegasus-ийн зургийг арын дэвсгэр болгон ашиглах хэрэгтэй байна. Далавчтай морь нь яруу найрагчийн бүтээлч сэтгэлгээний эрх чөлөөг илэрхийлэх болно!

Дэлгэцийн голд нэг удаа харуулах зураг бидэнд хэрэгтэй. Гэвч харамсалтай нь хөтөч бидний өндөр хүслийг ойлгохгүй байна. Мөн энэ нь сайтын арын дэвсгэр дээр дэлгэцийн талбайн багтаамжаас хэд хэдэн удаа жижиг зургийг харуулдаг:

Дөрвөн далавчтай инээж буй морь яруу найрагчдад хэтэрхий их урам зориг өгөх байх. Тиймээс бид Pegasus-аа хувилахыг хориглодог. Бид үүнийг background-repete шинж чанарыг ашиглан хийдэг. Боломжит утгууд:

• давталт-x – дэвсгэр зургийг хэвтээ байдлаар давтах;
• давтах-y - босоо;
• давтах - хоёр тэнхлэг дээр;
• давтагдахгүй - давтахыг хориглоно.

Жагсаалтад орсон сонголтуудын дотроос бид сүүлчийнх нь сонирхолтой юм. Сайтын арын дэвсгэрийг өөрчлөхийн өмнө бид үүнийг коддоо ашигладаг.

Гэхдээ мэдээжийн хэрэг, манай сурталчилгааны хуудсыг дэлгэцийн дунд байрлуулсан бол илүү дээр байх болно. Background-position шинж чанар нь хуудсан дээрх дэвсгэр зургийг байрлуулахад зориулагдсан. Та байршлын координатыг хэд хэдэн аргаар тохируулж болно:

• Түлхүүр үг ( дээд, доод, төв, зүүн, баруун);
• Хувь – тоолох нь зүүн дээд булангаас эхэлнэ;
• Хэмжилтийн нэгжээр (пиксел).

Хамгийн энгийн төвлөрсөн сонголтыг ашиглая:

Гүйлгэх үед зургийн байрлалыг засах шаардлагатай болдог. Тиймээс, сайтын арын дэвсгэр болгон зураг хийхээсээ өмнө тусгай шинж чанарыг ашиглана уу дэвсгэр-хавсралт . Түүний хүлээн зөвшөөрсөн үнэт зүйлс нь:

• гүйлгэх;


• тогтмол.

Бидэнд сүүлчийн үнэ цэнэ хэрэгтэй. Одоо бидний жишээ код дараах байдлаар харагдах болно.

Вэб сайтын бүтэцтэй дэвсгэр

Эхний жишээн дээр бид том, үзэсгэлэнтэй цөлийн ландшафтыг арын дэвсгэр болгон ашигласан. Гэхдээ ийм гоо сайхныг бүрэн төлөх ёстой. Хийсэн зургийн жин өндөр чанартай, хэд хэдэн мегабайт хүрэх боломжтой.

Энэ хэмжээ нь өндөр хурдны интернет холболттой хөтөчийн хуудсыг ачаалах хурдад ямар ч байдлаар нөлөөлөхгүй. Гэхдээ яах вэ гар утасны интернет, хэд хэдэн "метр" ачаалахад удаан хугацаа шаардагдах вэ?