Ұя сайт: фондық сурет HTML қалай жасауға

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

фонды жасау үшін негізгі HTML тегтер

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

1. тег төлсипаты жазу.
2. HTML коды CSS стиль арқылы.
3. бөлек файлда CSS мәнерлерін жазу.

HTML сияқты фондық суретті жасау үшін, сіз шешеді, бірақ менің ойымша, бұл ең оңтайлы болар еді қалай туралы бірер сөз айтқым келеді. Бірінші әдіс атрибуты ұзақ ескірген болды тегтің арқылы жазу арқылы табылады. ол сол код көп екен, себебі екінші опция, өте сирек қолданылады. Үшінші параметрі ең көп тараған және тиімді болып табылады. Мұнда HTML тегтер мысалдары болып табылады:

1. index.htm файлына тег атрибуты (орган) арқылы алғашқы жазба әдісі. Бұл нысанда сақталады: (дене фондық = «қалтасы / Nazvanie_kartinki.rasshirenie») (/ орган). (Дене фондық = «Images / Picture.jpg») ... (/ орган): Яғни, біз атағына «сурет» және кеңейту JPG, және біз «суреттер» деп аталатын қалта бірге суретке болса, онда HTML-кодын енгізу осы сияқты көрінеді, ол .
2. Екінші әдіс CSS стиль жазу қамтиды, бірақ ол аты index.htm бар сол файлда жазылған. (Дене стилі = «фондық: URL (» ../ Суреттер / Picture.jpg ') «).
3. жазу үшінші әдісі екі файлдар жүргізіледі. (Жетекшісі) (сілтеме REL = «стильдер кестесі» түрі = «мәтін / CSS» HREF = «HTTP: // сайт / мақала / 193110 /% D0% 9F атауы index.htm тегіне (жетекшісі) бар құжат осындай желісін жазылған % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu «) (/ бас). style.css мәнер өзінде жазу деп аталатын файлды: дене {фон: URL (Суреттер / Picture.jpg ')}.

Фондық суретті жасау үшін HTML сияқты, біз түсінеміз. Енді сіз бүкіл экранның ені бойынша имиджін созылып қалай анықтау керек.

терезенің ені фондық суретті созылып жолдары

Біз пайыздық түрінде біздің экранды білдіреді. Ол экранның бүкіл ені мен ұзындығы 100% × 100% болады екен. Біз осы ені суретті созылып керек. монитордың бүкіл ені және ұзындығы астам суретті созылады кескін файлы жазу style.css желісіне қосу. ол CSS стилінде жазылған? Бәрі оңай!

дене

{

фон: URL (Суреттер / Picture.jpg ')

өң-өлшемі: 100%; / * Бұл пост * ең заманауи браузерлер үшін қолайлы болып табылады /

}

Сондықтан біз экранда HTML сурет фонды қалай жасауға түсіндік. index.htm файлда жазу әдісі, сондай-ақ бар. Бұл әдістің Дегенмен мен ескірген, бірақ бастауыш ол білу және түсіну үшін қажет. тег (жетекшісі) (стиль) DIV {фондық-өлшемі: қақпақ; } (/ Style) (/ бас), осы жазба біз терезе бүкіл ені бойынша орналастырылады фон, үшін арнайы бөлімшелер бөледі дегенді білдіреді. Біз сурет заманауи браузерлердің кез келген экранның бүкіл ені бойынша созылып етіп, фондық сурет HTML Сайт жасауға қалай, екі нәрсені қарастырдық.

тұрақты фонды жасау үшін қалай

Егер сіз болашақ веб ресурс фон ретінде суретті пайдалануға шешсеңіз, онда сіз жай ғана ұзындығы созылып емес екенін, сондықтан, ол белгіленген қалай жасауға білу қажет және эстетикалық көрінісін құртып жоқ. Жай шағын қосымша тіркеуге HTML кодты пайдалану арқылы. Сіз фонда кейін сөз тіркесін қосу style.css файлды қажет: URL (Суреттер / Picture.jpg ') тіркелген; мынадай арақатынаста белгіледі: позиция - немесе орнына нүктелі жеке жолда кейін қосылады. Осылайша, сіздің тұсқағаз бекітілетін болады. сайтында мазмұнды айналдыру кезінде, Сіз мәтін сызықтар келе жатқандығын көруге болады, бірақ фондық орнында қалады. Сондықтан Сіз бірнеше жолмен, HTML фондық суретті қалай білдіңіз.

HTML тілінде кестелерде жұмыс істеу

кестелер мен блоктар тап Көптеген тәжірибесіз веб-әзірлеушілер, жиі HTML сурет фондық кестені жасауға қалай түсінбейді. барлық сияқты командалар HTML және CSS стильдер, веб бағдарламалау тілі өте қарапайым болып табылады. Және осы мәселені шешу кодын жолдарының жұбын жазу болып табылады. тегтер (TR) және (TD) көрсетілгендей Сіз қазірдің өзінде, тиісінше, жолдар мен бағандардың кесте жазбаша екенін білуі тиіс. өң = URL суреттер: сурет түрінде кестенің фонды жасау үшін, ол (TR) немесе (TD), тегінің (кесте) қосу сілтеме бейнесі сілтеме жасай отырып қарапайым фраза қажет. Түсінікті болуы үшін, біз бірнеше мысалдар келтіруге береді.

HTML мысалдар: орнына фондық сурет Кесте

а 2х3 үстел Draw және ол қалтасында сақталатын фондық сурет жасау «Суреттер»: (кесте фондық = «Images / Picture.jpg») (TR) (TD) 1 (/ TD) (TD) 2 (/ TD) (TD) 3) (/ TD) (/ TR) (TR) (TD) 4 (/ TD) (TD) 5 (/ TD) (TD) 6 (/ TD) (/ TR) (/ кесте). Сондықтан біздің үстел сурет фонында шығар- болады.

Енді 2x3 сол пластина мөлшерін аударғым, бірақ 1, 4, 5 және 6-(кесте) нөмірленген бағандарда сурет кірістіру (TR) (Т.Д. фондық = «Images / Picture.jpg») 1 (/ TD) (TD) 2 (/ TD) (TD) 3 (/ TD) (/ TR) (TR) (Т.Д. фондық = «Images / Picture.jpg») 4 (/ TD) (Т.Д. фондық = «Images / Picture.jpg») 5 ( / TD) (Т.Д. фондық = «Images / Picture.jpg») 6 (/ TD) (/ TR) (/ кесте). көріп кейін біз өң ғана біз бүкіл кестені тіркелген емес, онда сол жасушаларында пайда болатынын көруге болады.

Кросс-браузер үйлесімділік сайты

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