მთავარი თხოვნაა არ დაპოსტოთ ამ თემაში სანამ არ მოვრჩები.
პირველ რიგში ბოდიშს გიხდით სათაურისთვის "tip" ქართულად უბრალოდ ვერ მოვიფიქრე და ვერც ვნახე შესაბამისი ტერმინი. იმედია მიხვდებით რაც არის. ჩემი სტატიებიდან ყველაზე თუ არა ერთ-ერთი ყველაზე საჭირო სტატიაა ჩემი აზრით. ბლოგზე დევს ამის პატარა ნაწილი. შემოგთავაზებთ სრულად. ამ 5 ნაწილიანი სტატიის შემდეგ თქვენ შეძლებთ 0-დან თუ ვერა, დაწყებითი ეტაპის მქონე ჩონჩხიდან სერიოზული HTML-ის, CSS-ს, მქონე საიტის შექმნას. რამდენიმე ნაწილად ვაპირებდი სტატიის დადებას მაგრამ გადავწყვიტე გამეერთიანებინა, რადგან ერთი ნაწილი მეორისგან გამომდინარეობს, მეორე მესამისგან და ა.შ., ამიტომ გაგიჭირდებოდათ რათქმაუნდა ასე გადასვლა-გადმოსვლა თემებში.
გთხოვთ ყურადღებით წაიკითხოთ 5 ივე ნაწილი, სანამ ისეთ კითხვას დასვამთ, რომელიც სტატიაში არის. გაკვეთილები ეტაპობრივად რთულდება.
მაშ ასე. დავიწყოთ
ნაწილი პირველი - ობიექტების ზომების შეცვლა
როგორ შევცვალოთ ზომები სურათი/მაგიდის(table)/ან სხვა ობიექტების?
სურათების, მაგიდების (table) და სხვა ობიექტების ზომები ამ ატრიბუტების საშუალებით იცვლება:
ზომები შეიძლება მითითებული იყოს პიქსელებში, ან პროცენტებით.
როგორ შევცვალოთ ფონი (Background-ი)?
თქვენ შეგიძლიათ შეცვალოთ გვერდის ფონი თქვენით, მაგიდის ნაწილები და მთელი მაგიდა.
მთელი გვერდის ფერის შესაცვლელად იპოვეთ < body > ტეგი, შემდეგ აირჩიეთ საჭირო ფერი და დაამატეთ შემდეგი ზემოთ ხსენებულ ტაგს:
Code
<body bgcolor="ფერის კოდი">
მაგალითად
Code
<body bgcolor="#008000">
თუ ფონად ფერის ნაცვლად სურათის დაყენება გინდათ, ისევ იპოვეთ < body > ტეგი, აირჩიეთ საჭირო სურათი, ატვირთეთ სერვერზე და დაამატეთ შემდეგი კოდი მას:
Code
<body background="სურათის ლინკი">
მაგალითად
Code
<body background="http://www.ucoz.com/image/1.jpeg">
სურათის ფონად გამოყენებისას გვხვდება მეთოდი რომელსაც ეძახიან "substrate" ფონის დაფიქსირება.
ფონის სურათის დასამაგრებლად ჩაამატეთ შემდეგი კოდი ზემოთ ხსენებულს
მაგალითად
Code
<body background="http://www.ucoz.com/image/1.jpeg" bgproperties="fixed">
ნაწილი მეორე - Table - დიზაინის მთავარი ნაწილი:
ავიღოთ ნორმალური მაგიდის მაგალითი 3-3 ზე:
Code
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33%">მასალა</td>
<td width="33%">მასალა</td>
<td width="34%">მასალა</td>
</tr>
<tr>
<td width="33%">მასალა</td>
<td width="33%">მასალა</td>
<td width="34%">მასალა</td>
</tr>
<tr>
<td width="33%">მასალა</td>
<td width="33%">მასალა</td>
<td width="34%">მასალა</td>
</tr>
</table>
ესეც ასე, გვაქვს მაგიდა 3-3 ზე და გვინდა შევცვალოთ, მაგალითად 2-3 ზე. ჩვენ უნდა დავიმახსოვროთ რომ მწკრივები გამოსახულია <tr> ტეგებით, და უჯრედები <td> ტეგებით, ასე, რომ ჩვენს მაგიდაში გვაქვს 3 წყვილი <tr></tr> და 9 წყვილი <td><td> და როცა ჩვენ ვუყურებთ კოდს, ჩვენ შეგვიძლია ვთქვათ, რომ გვაქვს 3 მწკრივი, თითოეული 3 უჯრედით, და იმის მიხედვით, რომ ჩვენ მათ ვცვლით 2-3 ზე, უნდა ამოვიღოთ პირველი წყვილი <tr></tr> და მისი სამი წყვილი <td><td> და გავაგრძელოთ მოქმედება მეორე <tr></tr> წყვილიდან, სადაც ყველა ჩვენი შემდგომი მოქმედებას ექნება ადგილი.
ესეც წყვილი:
Code
<tr>
<td width="33%">მასალა</td>
<td width="33%">მასალა</td>
<td width="34%">მასალა</td>
</tr>
აქ ჩვენ ვიღებთ მესამე უჯრედს (<td width="34%">მასალა</td>) და ვცვლით ფონს როგორც ჩვენ ეს მოვახერხეთ < body > ტეგის შემთხვევაში - აირჩიეთ ფერის კოდი და მიჰყევით შემდეგს
მაგალითი
Code
<td width="34%" bgcolor="#FF0000">მასალა</td>
იგივე სურათის შემთხვევაში
Code
<td width="34%" background="link to the file">მასალა</td>
მაგალითი
<td width="34%" background="http://www.ucoz.com/image/1.jpeg">მასალა</td>
თუ გვსურს მთლიანი მაგიდის ფერის შეცვლა ნაცვლად სათითაოდ უჯრედებისა, მიჰყევით შემდეგს.
იპოვეთ მაგიდა, აი ისიც
Code
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33%">მასალა</td>
<td width="33%">მასალა</td>
<td width="34%">მასალა</td>
</tr>
<tr>
<td width="33%">მასალა</td>
<td width="33%">მასალა</td>
<td width="34%">მასალა</td>
</tr>
<tr>
<td width="33%">მასალა</td>
<td width="33%">მასალა</td>
<td width="34%">მასალა</td>
</tr>
</table>
და <table> ტეგს დავამატოთ შემდეგი
მაგალითი
Code
<table border="1" cellpadding="0" cellspacing="0" width="100%" bgcolor="#008000">
სურათის დასაყენებლად კი შეხედეთ მაგალითს
Code
<table border="1" cellpadding="0" cellspacing="0" width="100%" background="http://www.ucoz.com/image/1.jpeg">
ნაწილი მესამე - ლინკები, სურათები, სივრცეები, ღილაკების ჩასმა (ერთი შეხედვით წვრილმანები..)
როგორ შევქმნათ ლინკი?
ლინკის ტეგებია
“href” ატრიბუტი პასუხისმგებელია ლინკის მისამართზე
Code
<a href="http://ucoz.ru/">შექმენით თქვენი საიტი</a>
როგორ გავაკეთოთ მოძრავი სტრიქონი?
მოძრავი სტრიქონის ტეგებია:
მაგალითი
Code
<marquee>uCoz ვებ სერვისები</marquee>
ასევე არსებობს ასეთი ატრიბუტები
scrolldelay="" – შეჩერება
direction="" – მიმართულება
<marquee scrolldelay="80" direction="left">uCoz ვებ სერვისები</marquee>
თუ თქვენ გსურთ, რომ მაუსის მიტანისას გაჩერდეს, დაამატეთ შემდეგი კოდი:
Code
<marquee scrolldelay="80" direction="left" onmouseover='this.stop()' onmouseout='this.start()' >uCoz ვებ სერვისები</marquee>
როგორ ჩავსვათ სურათი?
გამოიყენეთ <img> ტეგი, რომელსაც აქვს ზომების და სურათის ლინკის მისათითებელი კოდები.
Code
<img src="http://ucoz.ru/image.jpg" width="775" height="328">
Code
როგორ მივუთითოთ ეკრანის რეზოლუციები.
თუ ეკრანის რეზოლუციებს მიუთითებთ პიქსელებში, ის იქნება ფიქსირებული ყველა გაფართოების ეკრანზე, მაგრამ თუ თქვენ მიუთითებთ პროცენტებში, ეკრანის ზომები მიხედვით შეიცვლება მაგალითად - width="100%" და არა width="100px"
როგორ შევცვალოთ ტექსტის ფერები?
ამისთვის არსებობს ორი გზა - CSS-ს გამოყენებით ან <font> ტეგით. 1. CSS-ს გამოყენებით:
2. <font> ტეგის გამოყენებით:
Code
<font color="#FF0000">ტექსტი</font>
მე შევცვალე საიტის დიზაინი, მაგრამ ფორუმის დიზაინი არ შეცვლილა, როგორ შევაკეთო?
ყოველი მოდულის დიზაინი განსხვავებულად, ცალ-ცალკე იცვლება თუ თქვენ არ გაქვთ მითითებული “apply to all pages”.
მე ჩავსვი მინი-ჩეთი მთავარ გვერდზე, როგორ დავამატო ის სხვა გვერდებზე ისე, რომ სათითაოდ ყველაზე კოდის კოპირება არ მომიწიოს?
Templates Builder-ის (ამ მოდულზე სტატია მაქვს უკვე).
როგორ ჩავსვათ სურათი ნაცვლად “Download”-ისა?
უბრალოდ მოათავსეთ <img> ტეგი <a></a>-ს შორის
Code
<a href="ლინკი"><img src="http://ucoz.com/image.jpg" width="775" height="328"></a>
როგორ ჩავსვათ ფლეშ საათი საიტზე?
თქვენ შეგიძლიათ გამოიყენოთ სერვისი: http://www.clocklink.com/ ლურჯი
Code
<embed src="http://www.clocklink.com/clocks/5010-blue.swf?TimeZone=GMT0300&" width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">
წითელი
Code
<embed src="http://www.clocklink.com/clocks/5010-red.swf?TimeZone=GMT0300&" width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">
მწვანე
Code
<embed src="http://www.clocklink.com/clocks/5010-green.swf?TimeZone=GMT0300&" width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">
ან თქვენ საათი
<embed src="საათის ლინკი" width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">
როგორ ჩავსვათ ფლეში?
Code
<object type="application/x-shockwave-flash"
data="flash.swf" width="300" height="100">
<param name="movie" value="flash.swf" />
<param name="quality" value="low" />
</object>
და უფრო ზუსტი ვერსია:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/ flash/swflash.cab#3,0,0,0" width="100%" height="100%"><param name="SRC" value="filename.swf"><embed src="filename.swf" pluginspage="http://www.macromedia.com/ shockwave/download/" type="application/x-shockwave-flash" width="100%" height="100%"></embed></object>
როგორ ვიპოვოთ და დავარედაქტიროთ CSS კლასი (ნაწილობრივ დარიპვა, uCoz-ის ადმინი წერს მე არაფერ შუაში ვარ
1) თქვენს ბრაუზერში დაკლიკეთ View -> Source.
2) იპოვეთ ელემენტი, რომლითაც დაინტერესდით.
3) დააკოპირეთ კლასის სახელი.
4) გახსენით Style Sheets (CSS) Control Panel პანელში და -> Customize Design
5) იპოვეთ ეს კლასი CSS-ში.
4) დაარედაქტირეთ პარამეტრები თქვენი სურვილის შესაბამისად.
თუ სხვა კლასია, დაამატეთ უბრალოდ თქვენს შაბლონს (Control Panel იდან) და CSS-ს საჭირო პარამეტრებით.
მაგალითი:
მომხმარებლებს ხშირად სურთ ფორუმზე პოსტებში ფონტის ზომის შევლა. გახსენით ფორუმის რომელიმე თემა და დააკოპირეთ რომელიმე ნაწილი ტექსტისა. გახსენით View -> Source და იპოვეთ ის ნაწილი. ნახეთ რომელ კლასს ეკუთვნის (პოსტის ტექსტი ეკუთვნის კლასს - "posttdmessage".)
გახსენით ფორუმის CSS და იპოვეთ "posttdmessage" შემდეგ სექციაში: /* Posts View */
Code
.posttdmessage {padding:5px;font-size:8pt;}
როგორც ვხედავთ მხოლოდ padding და ფონტის ზომა არის მითითებული. ჩვენ შეგვიძლია შევცვალოთ ისინი (ან უბრალოდ დავამატოთ დამატებითი კოდები წინა გაკვეთილებიდან მიღებული ცოდნის საშუალებით). შედეგი შემდეგია:
Code
.posttdmessage {padding:5px;font-size:10pt;color:#CCCCCC;}
რეკლამა
