Веб-сайттағы суретке суретті қалай енгізу керек

Мазмұны:

Веб-сайттағы суретке суретті қалай енгізу керек
Веб-сайттағы суретке суретті қалай енгізу керек

Бейне: Веб-сайттағы суретке суретті қалай енгізу керек

Бейне: Веб-сайттағы суретке суретті қалай енгізу керек
Бейне: HTML сабақтары #9 - Сурет қоюдың жолдары 2024, Мамыр
Anonim

Белгілеу тілінің мүмкіндіктері - HTML - және каскадтық стильдер кестесі - CSS - бір суретті екіншісінің ішіне көптеген тәсілдермен орналастыруға мүмкіндік береді. Әрине, бұл үшін веб-бетті орналастыруда біраз дағдылар қажет, және сіз қолданыстағы кодқа негізделген нақты әдісті таңдауыңыз керек. Алайда, кейбір жағдайларда сіз бастапқы кодты өңдемей-ақ жасай аласыз.

Веб-сайттағы суретке суретті қалай енгізу керек
Веб-сайттағы суретке суретті қалай енгізу керек

Нұсқаулық

1-қадам

Сайт беттерінде өзгеріссіз бір суретті екінші суретке салудың тәсілі бар. Ол үшін серверде сақталған фондық суретті редакциялау жеткілікті - оған алдыңғы суретті орналастыру үшін кез-келген графикалық редакторды қолданыңыз. Егер бұл әдіс сізге сәйкес келсе, фондық кескін файлын сақтау орны мен атауын анықтаудан бастаңыз. Мұны парақтың бастапқы кодынан табу немесе бөлек қойындыда ашып, шолушының мекенжай жолындағы толық жолды қарау арқылы жасауға болады.

2-қадам

Мазмұнды басқару жүйесінің файл менеджерін немесе FTP клиентін пайдаланып, қажетті файлды компьютеріңізге жүктеп, кез-келген графикалық редакторда ашыңыз - мысалы, Windows жүйесінде орнатылған Paint қосымшасында.

3-қадам

Алдыңғы суретті фонға қойыңыз - бұл үшін Paint-те «Үй» қойындысындағы «Кірістіру» ашылмалы тізімінен «Кірістіру» элементін таңдап, ашылған тілқатысу терезесінде қажетті файлды табу керек. Содан кейін енгізілген кескіннің бар фонда орналасуын реттеңіз (оны тышқанмен сүйреңіз) және нәтижені сақтаңыз (Ctrl + S).

4-қадам

Ескі суреттің орнына қайта өңделген суретті салыңыз. Бұл процедураны аяқтайды.

5-қадам

Сипатталған әдіс енгізілген суреттерді мезгіл-мезгіл өзгерту қажет болған жағдайда ыңғайсыз. Содан кейін HTML тілінің мүмкіндіктерін пайдаланыңыз - мысалы, фондық кескінді алдыңғы сурет орналастырылатын бет элементінің фонына айналдырыңыз. Мұндай контейнер элементі, мысалы, қабат (div) болуы мүмкін. Суреттердің үлкен бөлігін фонға айналдыру үшін стиль сипаттамасын - div тегінің стиль атрибутын қолдану керек. HTML кодындағы бос контейнер келесідей болуы мүмкін:

Жақшаның ішінде өзіңіздің сайтыңыздағы фондық сурет файлының мекен-жайы мен атын көрсетіңіз.

6-қадам

Фондық контейнердің шеттерінен толтырғыш мөлшерін белгілеу үшін бірдей стиль төлсипатын пайдаланып, алдыңғы кескін (img) тегін жасаңыз. Мысалға:

Мұнда ені мен биіктігі атрибуттары кескіннің өлшемдерін орнатады, ал төсемнен кейінгі төрт сан контейнердің шеттерінен бастап пиксельмен толтыруды көрсетеді, жоғарғы жағынан (50) және одан әрі сағат тілімен (60 - оңға, 70 -) төменгі, 80 - сол жақта).

7-қадам

Img тегін контейнерге салыңыз:

8-қадам

Құрылған жолдарды парақтың бастапқы кодына қосыңыз, содан кейін шегіністерді өзгертіп, фондық кескіннің фонына енгізілген кескіннің орнын реттеңіз.

Ұсынылған: