Pop-up ან pop-windows ფანჯრები სულ უფრო პოპულარული ხდება ინტერნეტში. ან, უფრო მარტივად, pop-up სურათები. საიტის ბევრ მფლობელს ხშირად უწევს მათი დამზადება სარეკლამო მიზნებისთვის, მაგრამ ყველამ არ იცის მათი შექმნის ალგორითმი.
Ეს აუცილებელია
- - HTML რედაქტორი;
- - რვეული;
- - მასპინძლობა.
ინსტრუქციები
Ნაბიჯი 1
შექმენით ან გახსენით ახალი ვებ – გვერდი HTML– ით ან ტექსტის რედაქტორი. ამ მიზნით შეგიძლიათ გამოიყენოთ ისეთი პოპულარული პროგრამები, როგორიცაა Dreamweaver, Expression Web და სხვა. თუ თქვენ უბრალოდ გადადგამთ პირველ ნაბიჯებს HTML პროგრამირების ენაში, გამოიყენეთ ჩვეულებრივი "ჩასაწერი წიგნი".
ნაბიჯი 2
ჩასვით შემდეგი კოდი "head" და "/ head" თეგებს შორის:
.thumbnail {პოზიცია: ნათესავი; z- ინდექსი: 0;}
.thumbnail: hover {background-color: transparent; z- ინდექსი: 50;}
.thumbnail span {/ * CSS გაფართოებული სურათისთვის * / პოზიცია: აბსოლუტური; ფონის ფერი: ღია ყვითელი; შევსება: 5px; მარცხნივ: -1000 პიქსელი; საზღვარი: 1px დატეხილი ნაცრისფერი; ხილვადობა: დამალული; ფერი შავი; ტექსტური გაფორმება: არცერთი;}
.thumbnail span img {/ * CSS გაფართოებული სურათისთვის * / საზღვრის სიგანე: 0; შევსება: 2px;}
.thumbnail: hover span {/ * CSS გაფართოებული სურათისთვის hover * / ხილვადობა: ხილულია; ზედა: 0; მარცხნივ: 65px; / * პოზიცია, სადაც გაფართოებული სურათი ჰორიზონტალურად უნდა გადაიტანოს * /}
ნაბიჯი 3
შეცვალეთ popup სურათის ჰორიზონტალური ოფსეტური კოდის ბოლო სტრიქონზე მნიშვნელობის შეცვლით. გამოყავით სივრცე "body" და "/ body" ნიშნებს შორის, სადაც გსურთ გამოსახულება გამოჩნდეს ვებ გვერდზე. შემდეგ დააკოპირეთ და ჩასვით შემდეგი კოდი:
ტექსტის სათაურის მაგალითი
ტექსტის სათაურის მაგალითი"
ნაბიჯი 4
შეცვალეთ "საქაღალდე / largepci1.jpg" ფაილით, რომელიც გამოიყენება ამოსაშლელი ფოტოსთვის. იგივე გააკეთე კოდის მეორე ბლოკთან ერთად. მასში შეცვალეთ სტრიქონი "ტექსტის სათაურის მაგალითი", რაც უნდა ჩაიწეროს pop-up გამოსახულებაში. ასევე შეცვალეთ კოდის სიმაღლისა და სიგანის მნიშვნელობები, რომ გამოხმაურებადი გამოსახულების ზომა შეცვალოთ. შექმენით კოდის დამატებითი ბლოკები, მეტი ესკიზების დასამატებლად. საჭიროებისამებრ, HTML დოკუმენტში შეიტანეთ სხვა ატრიბუტები, თეგები და ტექსტი. შეინახეთ HTML ფაილი და შემდეგ ატვირთეთ თქვენს სერვერზე.
