CSS3 გენერატორები. Საუკეთესო

CSS კოდების გენერატორი არის ძალიან მოსახერხებელი ინსტრუმენტი, რომელსაც შეუძლია დაზოგოს ვებ დეველოპერს ბევრი დრო და თავიდან აიცილოს ზედმეტი შეცდომები. ასევე, თქვენი კოდი უფრო იკითხებადი გახდება. ამ სტატიაში ჩვენ შევარჩიეთ CSS კოდების გენერატორების რაოდენობა, რომლებიც ჩვენი აზრით სასარგებლოა.

CSS დააწკაპუნეთ დიაგრამაზე

CSS მოტყუების ფურცელი

სპრაიტბოქსი

პიქსელის რუქის გენერატორი

გაასუფთავეთ CSS

CSS ანიმაცია

ბიჭებო, ანიმაცია? გამოიყენეთ და ითამაშეთ CSS გადასვლებით.

UI გრადიენტები

დაელოდე! გააცოცხლეთ

CSS ანიმაციებს შორის პერსონალური განმეორებითი პაუზების შექმნა არასოდეს ყოფილა ადვილი ამოცანა. მაგრამ ამ აპლიკაციით, პროცედურის სირთულე ნულამდე მცირდება.

CSS3 გენერატორი

CSS ტიპის ნაკრები

გინდოდა გენახათ, როგორ გამოიყურება სხვადასხვა შრიფტები? შეამოწმეთ CSS Type Set. თქვენ მხოლოდ უნდა შეიყვანოთ ტექსტი და აირჩიოთ შრიფტის პარამეტრები.

ისიამოვნეთ CSS

მოქნილი ყუთები

თუ თქვენ უჭირთ flexbox, მაშინ უნდა სცადოთ Flexy Boxes. ამ დანართში შეგიძლიათ შეადაროთ flexbox-ისა და სინტაქსის ინტერპრეტაციების სხვადასხვა ვერსია.

CSS დააწკაპუნეთ დიაგრამაზე

CSS მოტყუების ფურცელი

სპრაიტბოქსი

პიქსელის რუქის გენერატორი

გაასუფთავეთ CSS

CSS ანიმაცია

ბიჭებო, ანიმაცია? გამოიყენეთ და ითამაშეთ CSS გადასვლებით.

UI გრადიენტები

დაელოდე! გააცოცხლეთ

CSS3 გენერატორი

CSS ტიპის ნაკრები

ისიამოვნეთ CSS

მოქნილი ყუთები

ა! გენერატორებს იყენებ? CSS3ან HTML5? თუ არა, მაშინ იქნებ ღირდეს ცდა 🙂 წარმოიდგინეთ, შეგიძლიათ უარი თქვათ სტილის ხელით აღწერაზე ღილაკებისთვის, კუთხეებში ბლოკებში, ჩრდილებში, გრადიენტებზე, თუ ვინმე იყენებს და ასე შემდეგ, ასევე HTML5. რატომ წერთ ერთსა და იმავე კოდს ყოველ ჯერზე, როცა ქმნით ახალ პროექტს, როცა შეგიძლიათ „შეავსოთ“ უჯრებში არსებული პარამეტრები, დააჭიროთ ღილაკს და მიიღოთ მზა კოდი და საჭიროების შემთხვევაში გაასწოროთ!
ამ სტატიაში მე გაჩვენებთ ასეთი გენერატორების არჩევანს. ძირითადად ეს იქნება CSS3 გენერატორები და წყვილი HTML5-ისთვის. სერვისის საიტზე გადასასვლელად - დააწკაპუნეთ სერვისის სახელზე!

CSS3 გენერატორები:

CSS3.me

ერთ-ერთი საუკეთესო გენერატორი. ავტორი არის ერიკ ჰოფმანი. შესაძლებელია დამრგვალების, ჩრდილის, გრადიენტის და გამჭვირვალობის შეცვლა და დაყენება - ყველაზე ხშირად გამოყენებული ეფექტები.

CSS3 Maker

თითქმის ყველაფერია და ცოტა მეტიც. შეგიძლიათ დააკონფიგურიროთ @font face, ანიმაცია, ბლოკის ჩრდილი, ტექსტის ჩრდილი, ტექსტის როტაცია, ტრანსფორმაცია, გრადიენტები, დამრგვალება და სხვა.

CSS3 გენერატორი

მას აქვს დაახლოებით იგივე ფუნქციონირება, რაც წინა გენერატორს. თქვენ უნდა აირჩიოთ საინტერესო ნივთი ჩამოსაშლელი სიიდან და შეიყვანოთ პირველადი მონაცემები.

Webestools Shadow გენერატორი

ჩრდილების გენერატორი. რეგულირდება მხოლოდ ჩრდილები: ფერი, ოფსეტური, ბუნდოვანი, შიდა ან გარე ჩრდილი და ა.შ.

ღილაკების გენერატორები

CSS3 ღილაკების გენერატორი

მხიარული გენერატორი. მარჯვნივ არის ერთი დიდი ღილაკი - მანიპულაციების შედეგი, მარცხნივ კი პარამეტრები. თქვენ შეგიძლიათ მანიპულირება ჩრდილებით, საზღვრები, ფერი და ასე შემდეგ. გადაათრიეთ და ჩამოაგდეთ სლაიდერები შესანიშნავია მათთვის, ვინც ახალია ვებსაიტის მშენებლობაში. კარგია, რომ თქვენ დაუყოვნებლივ ხედავთ რეაქციას თქვენს ქმედებაზე, აქედან მიხვდებით, რომელი პარამეტრი რაზეა პასუხისმგებელი.

CSS3-Tricks Button Maker

ეს ღილაკების გენერატორი ცოტა უფრო მარტივია. ღილაკის შექმნის მთელი პროცესი ეფუძნება სლაიდერების გადათრევას. აქ ფსონი არის ფონზე, ანუ თამაში ღილაკების ფერებით.

CSS3 Button.net

აქ არის კიდევ ერთი ცუდი ღილაკის გენერატორი. შეგიძლიათ დააკონფიგურიროთ ღილაკის ფონი, საზღვარი, გარე ჩრდილი, შიდა ჩრდილი, ზომა, ტექსტის ფერი და ტექსტის ჩრდილი. როდესაც ცვლილებებს ახორციელებთ ბლოკში მარჯვნივ, კოდი მაშინვე იცვლება.

სასაზღვრო გამოსახულების და რადიუსის გენერატორი

საზღვარი-რადიუსი

საკმაოდ მოკრძალებული ფუნქციონირება: შეგიძლიათ მხოლოდ კუთხეების დამრგვალების მორგება, მაგრამ თითოეული კუთხის ცალკე.

საზღვარი-გამოსახულება

სწავლა ცოტა რთულია, მაგრამ თუ გჭირდებათ საზღვრის (საზღვრის) სურათის გაკეთება, მაშინ ეს ინსტრუმენტი სწორია! აირჩიეთ თქვენი სურათი, აირჩიეთ სლაიდერების საზღვრების ზომა, თქვენ შეგიძლიათ გაზარდოთ ფონი თითოეული საზღვრისთვის ... ასევე გამოსახულების გამეორების გზა. და კოდი იქმნება ქვემოდან.

CSS3 გრადიენტის გენერატორი

Colorzilla გრადიენტის რედაქტორი

აქ არის ძალიან მაგარი გრადიენტის გენერატორი. არსებობს დიდი რაოდენობით მზა ფერების ნაკრები, მაგრამ თქვენ ასევე შეგიძლიათ აირჩიოთ საკუთარი. ადგენს გრადიენტის ტიპს: ჰორიზონტალური, ვერტიკალური და ა.შ. IE-ს მხარდაჭერაც კი არსებობს.

HTML5 გენერატორები

HTML5 ★ ქვაბის ფირფიტა

ამ გენერატორის დახმარებით თქვენ მიიღებთ ცარიელ შაბლონს, სრულად ოპტიმიზირებული სხვადასხვა ბრაუზერებისთვის. ძალიან მომეწონა ეს გენერატორი, ახლა გამოვიყენებ. ყველა "ჩიპის" გასაცნობად ეწვიეთ ამ პროექტს, მით უმეტეს, რომ ყველაფერი რუსულ ენაზეა.

Shikiryu HTML5 გენერატორი ცოტა უფრო რთულია, ვიდრე წინა. საშუალებას გვაძლევს შევიტანოთ გვერდის სათაური და აღწერა, დავაკავშიროთ css ჩარჩო, css ღილაკის სტილები, ბიბლიოთეკა, ანალიტიკა და ა.შ.

Initializr არის HTML5 შაბლონის გენერატორი, რომელიც დაგეხმარებათ ახალი პროექტის დაწყებაში. Initializr ქმნის სუფთა მორგებულ შაბლონს თქვენთვის. ასარჩევი ვარიანტებია: პირველადი ფრეიმვორი, სერვერის ოფციები (.htaccess, nginx.conf, web.config), jquery კავშირი, google analytics, არჩევანი შორის და ა.შ.

ეს არის მარტივი გენერატორი. ჩვენ გვთავაზობენ ავირჩიოთ რომელი ელემენტები იქნება გვერდზე და ასევე მიუთითოთ რამდენიმე ვარიანტი.

სულ ესაა, თუ იცით კარგი HTML5 ან CSS3 გენერატორები, მოგერიდებათ დაწეროთ მათ შესახებ კომენტარებში 🙂

იმისათვის, რომ იყოთ უახლესი სტატიებისა და გაკვეთილების შესახებ, გამოიწერეთ

ეს მარტივი ონლაინ ვებსაიტის გვერდის გენერატორი საშუალებას გაძლევთ შექმნათ თქვენი ვებგვერდის გვერდები ისევე, როგორც ამას გააკეთებდით ჩვეულებრივი ტექსტური რედაქტორით. მას შეუძლია შექმნას ყველა ყველაზე საჭირო html ტეგი ვებ გვერდის სხეულში. საიტის გვერდების სხეულის ეს html კოდის გენერატორი ბევრჯერ დააჩქარებს საიტის გვერდების შექმნას.

ზოგიერთი შენიშვნა ვებსაიტის გვერდის გენერატორის გამოყენების შესახებ

საიტის გვერდის ეს გენერატორი ვიზუალურია იმ გაგებით, რომ ის აგენერირებს გვერდის ასეთ html კოდს, ისე რომ ბრაუზერში, რომელშიც თქვენ მუშაობთ ამ გენერატორთან, გვერდი გამოჩნდება ზუსტად ისე, როგორც ხედავთ რედაქტორის ფანჯარაში. ეს რედაქტორი-გენერატორი ქმნის მხოლოდ მარკირების კოდებს, ანუ მხოლოდ HTML-ს. ის არ არის განკუთვნილი პროგრამირების ენებზე სკრიპტირებისთვის, როგორიცაა JavaScript ან PHP.

ეს რედაქტორი განკუთვნილია დამწყები ვებოსტატებისთვის, რომლებიც ახლახან იწყებენ HTML მარკირების ენის შესწავლას. მაგრამ ასევე სასარგებლო იქნება გამოცდილი საიტის შემქმნელებისთვის მცირე გვერდების ან გვერდების შაბლონების სწრაფად შექმნა. დამწყები ვებმასტერები აქ მოზიდული იქნებიან გვერდის დიზაინში შეტანილი ცვლილებების სწრაფად შედარების შესაძლებლობით, თუ როგორ არის ნაჩვენები გვერდის html მარკირების ცვლილებაზე. ეს ონლაინ შედარება საშუალებას გაძლევთ ისწავლოთ HTML რაც შეიძლება სწრაფად და ეფექტურად.

ეს რედაქტორი არ არის შექმნილი იმისთვის, რომ იმუშაოს ძალიან დიდი ტექსტით და დიდი რაოდენობით "მძიმე" სურათებით. თუ გსურთ შექმნათ ვებ გვერდი ძალიან დიდი ტექსტით და/ან დიდი სურათებით ამ რედაქტორში, მაშინ უმჯობესია ჯერ შექმნათ ვებ გვერდის სრული შაბლონი, დააკოპირეთ მიღებული html კოდი ვებ გვერდის ფაილში და მხოლოდ ამის შემდეგ ჩასვით იქ გრძელი ტექსტი და სურათების ბმულები. გახსოვდეთ, რომ ეს რედაქტორი არ არის პროფესიონალი რედაქტორი და განკუთვნილია ძირითადად მოყვარულთა და დამწყები ვებოსტატებისთვის. მისი მთავარი მიზანია დამწყებთათვის დაეხმაროს ვებსაიტების შესწავლაში.

Ინსტრუქცია გამოსაყენებლად

თუ თქვენ ოდესმე გამოგიყენებიათ ტექსტური რედაქტორები, როგორიცაა MS Word, მაშინ არ გაგიჭირდებათ ამ ვებ გვერდის გენერატორის დაუფლება. ეს რედაქტორი შეიძლება გამოყენებულ იქნას როგორც ვებ გვერდის ძირითადი ნაწილის ნულიდან შესაქმნელად, ასევე არსებული ვებ გვერდის დასაყენებლად, რათა განახორციელოთ საკუთარი ცვლილებები.

თუ თქვენ დაიწყებთ თქვენი გვერდის შექმნას ნულიდან, მაშინ თქვენ უნდა წაშალოთ ჩემი საწყისი ტექსტი რედაქტორის ფანჯარაში და დაიწყოთ თქვენი ტექსტის, სურათების და ფორმატირება იქ. სამუშაოს დასრულების შემდეგ, თქვენ უნდა დააჭიროთ ღილაკს "კოდი" რედაქტორის ეკრანის ბოლოში და დააკოპიროთ მიღებული კოდი თქვენს ვებ გვერდის ფაილში. და შეინახეთ ეს ფაილი. გთხოვთ გაითვალისწინოთ, რომ თქვენ უნდა დააკოპიროთ მიღებული კოდები მხოლოდ ვებ გვერდის ნაწილზე, ანუ მხოლოდ ტეგებს შორის და

. თავად ტეგები სხეულიარ არის შექმნილი რედაქტორის მიერ.

თუ გსურთ შეცვალოთ მზა ვებ გვერდი, მაგალითად, ის, რომელიც თქვენ არ შექმნით ან დიდი ხნის წინ შექმენით, მაშინ უნდა დააჭიროთ ღილაკს „კოდი“ რედაქტორის ეკრანის ბოლოში. წაშალეთ ჩემი ყველა საწყისი კოდი რედაქტორის ფანჯრიდან და დააკოპირეთ იქ კოდები ვებ გვერდის ფაილიდან. გთხოვთ გაითვალისწინოთ, რომ თქვენ გჭირდებათ მხოლოდ კოდების კოპირება არსებული ვებ გვერდის კორპუსიდან, ანუ მხოლოდ ის, რაც არის ტეგებს შორის და

. თავად ტეგები სხეულითქვენ არ გჭირდებათ მისი კოპირება რედაქტორში. შემდეგ თქვენ უნდა გადახვიდეთ ვიზუალური რედაქტირების რეჟიმში. ამისათვის დააწკაპუნეთ ღილაკზე „დიზაინი“ რედაქტორის ფანჯრის ბოლოში და დაიწყეთ ცვლილებების შეტანა გვერდის იერსახეში.

ნათელია, რომ ამ რედაქტორში შეგიძლიათ ვებ გვერდის სხეულის რედაქტირება ორი გზით. ან "დიზაინის" რეჟიმში ვიზუალურად რედაქტირებისთვის ან "კოდის" რეჟიმში პირდაპირ კოდებში რედაქტირებისთვის. ამიტომ, დამწყები ვებოსტატებისთვის, ეს რედაქტორი ძალიან სასარგებლოა სწავლისთვის. თქვენ შეგიძლიათ შეიტანოთ მცირე ცვლილებები ვებ გვერდზე ვიზუალურ რეჟიმში და დაუყოვნებლივ ნახოთ როგორ შეიცვალა კოდი კოდის რედაქტირების რეჟიმში გადასვლით. ან, პირიქით, შეგიძლიათ შეიტანოთ მცირე ცვლილებები ვებ გვერდის კოდში კოდების რედაქტირების რეჟიმში და დაუყოვნებლივ ნახოთ, თუ როგორ იცვლება თქვენი ვებ გვერდი ვიზუალური რედაქტირების რეჟიმში გადასვლით (ან გადახედვის რეჟიმში ღილაკის "Preview" გამოყენებით).

ძირითადი ტექსტის რედაქტირება

ზედა მენიუს ზოლი შეიცავს ზოგადი ტექსტის რედაქტირების ღილაკებს. მათ აქვთ სტანდარტული აღნიშვნები, რომლებიც მიღებულია ნებისმიერ სხვა ტექსტურ რედაქტორში. ამიტომ, ჩვენ მხოლოდ მოკლედ ვისაუბრებთ მათზე.

ყველაფერი მუშაობს ძალიან მარტივად. თქვენ ან ირჩევთ ტექსტის ზოგიერთ ნაწილს და დააჭირეთ ზედა მენიუს ღილაკს ისე, რომ ტექსტის ეს ნაწილი დაფორმატდეს შესაბამისად. ან, თუ არაფერი არ არის შერჩეული, მაშინ გადადის შესაბამისი ღილაკის რეჟიმზე, ანუ თუ გააგრძელებთ ტექსტის აკრეფას, ტექსტი დაიწერება იმ ღილაკის რეჟიმში, რომელიც ახლახან ჩართეთ.

ასევე, როგორც ნებისმიერ ტექსტურ რედაქტორში, არის რეჟიმები, რომლებიც ვრცელდება მხოლოდ აბზაცზე მთლიანობაში და რეჟიმები, რომლებიც შეიძლება გამოყენებულ იქნას აბზაცის ნაწილზე.

ყველა ღილაკის მოკლე აღწერა მენიუს ზედა ნაწილში მათი ადგილმდებარეობის მიხედვით:

აბზაცი. ირჩევს სათაურის დონეს. ვრცელდება მთლიან აბზაცზე.
შრიფტები.
Შრიფტის ზომა.
Შრიფტის ფერი.
თამამი შრიფტი.
დახრილი შრიფტი.
ხაზგასმული შრიფტი.
Strikethrough შრიფტი.
მარცხნივ გასწორება. ვრცელდება მთლიან აბზაცზე.
ცენტრირება. ვრცელდება მთლიან აბზაცზე.
მარჯვენა გასწორება. ვრცელდება მთლიან აბზაცზე.
ორმხრივი განლაგება. ვრცელდება მთლიან აბზაცზე.
Ჰორიზონტალური ხაზი. ეს არ არის აბზაცის საკითხი და არც აბზაცის ნაწილია. ეს მხოლოდ სრული სიგანის ჰორიზონტალური ხაზის ჩასმაა.
ზედნაწერი.
ხელმოწერა.

ძირითადი html რედაქტირება

მენიუს შუა ზოლი შეიცავს ორივე ღილაკს ვებ გვერდის ტიპიური რედაქტირებისთვის და სერვისის ღილაკებს საერთო რედაქტორებისთვის.

ყველა ღილაკის აღწერა მენიუს ზედა ნაწილში მათი ადგილმდებარეობის მიხედვით:

შექმენით ჰიპერბმული. დარწმუნდით, რომ აირჩიეთ მაუსით ტექსტი ან სურათი, როდესაც დააწკაპუნებთ, რომელზეც გსურთ სხვა ვებ გვერდზე გადასვლა. შერჩევის შემდეგ დააჭირეთ მენიუს ღილაკს და გახსენით ფანჯარა, რომელშიც უნდა მიუთითოთ მისამართი, სადაც გადადის გადასვლა (URL) და გადასვლის პირობები (სამიზნე). შეგიძლიათ დააყენოთ შემდეგი პირობები:
- ცარიელი. ნაგულისხმევად, იმავე ფანჯარაში გაიხსნება ახალი გვერდი.
- _ ცარიელი. ახალი გვერდი გამოჩნდება ბრაუზერის ახალ ფანჯარაში (ან ბრაუზერის ახალ ჩანართში, თქვენი კონკრეტული ბრაუზერის პარამეტრებიდან გამომდინარე).
- _ მშობელი. ახალი გვერდი გამოჩნდება ბრაუზერის მშობლის ფანჯარაში (ან ჩანართში). თუ არ არის მშობლის ფანჯარა (ან ჩანართი), მაშინ ეს არის _self მდგომარეობის ანალოგი.
- _თვითონ. ახალი გვერდი გამოჩნდება იმავე ფანჯარაში, როგორც ბმული. ეს არის "ცარიელი" რეჟიმის ანალოგი.
- _ზემო. თუ საიტის გვერდს აქვს ჩარჩოები (ანუ ის დაყოფილია რამდენიმე ფანჯარად), მაშინ ახალი გვერდი გამოჩნდება მთელ ბრაუზერის ფანჯარაში. ჩვეულებრივ შემთხვევაში, ესეც _self რეჟიმის ანალოგია.
გთხოვთ გაითვალისწინოთ, რომ თქვენ უნდა მიუთითოთ ახალი გვერდის მისამართი, სადაც ჰიპერბმული მიდის სრულად, მაგ. "http://site.ru"ან "http://site.ru/page.html". წინააღმდეგ შემთხვევაში, როდესაც კვლავ ცდილობთ ამ ჰიპერბმულის რედაქტირებას, ეს რედაქტორი ვერ იპოვის საიტის მისამართს და ჩაანაცვლებს ჩემი საიტის მისამართს ნაგულისხმევად "http://site"თქვენი გვერდის სახელის წინ.
გააუქმეთ ჰიპერბმული. მონიშნეთ ჰიპერბმულის ტექსტი მთლიანად. თუ ჰიპერბმულის ტექსტის მხოლოდ ნაწილს აირჩევთ, არჩეული ნაწილი ჰიპერბმულად დარჩება. მაგალითად, თუ არჩეულია ჰიპერბმულის ტექსტის მხოლოდ ცენტრალური ნაწილი, მაშინ არჩეულ ტექსტებზე იქმნება ორი ჰიპერბმული ერთი და იგივე მისამართით.
სურათის ჩასმა. მოათავსეთ კურსორი იმ ადგილას, სადაც სურათი უნდა იყოს და დააჭირეთ ღილაკს. ფანჯარაში, რომელიც იხსნება, მიუთითეთ გამოსახულებისკენ მიმავალი გზა (Image URL), სურათის აღწერა (Image Description), გამოსახულების გასწორება გვერდზე (Alignment), საზღვრის სიგანე (Border) და გამოსახულების შეწევა ტექსტიდან ( ან გვერდზე სხვა ელემენტები ჰორიზონტალურად და ვერტიკალურად (HSpace, VSpace) გამოსახულების გასწორება შეიძლება დაყენდეს შემდეგნაირად:
- ცარიელი. ნაგულისხმევად, ეს არის მარცხნივ გასწორებული.
- საბაზისო. ტექსტი (და გვერდის სხვა ელემენტები), რომელიც განთავსებულია სურათთან ერთად ერთ აბზაცში, დალაგდება ისე, როგორც თქვენი ბრაუზერის შემქმნელებმა გადაწყვიტეს.
- ზედა. ტექსტი (და გვერდის სხვა ელემენტები) იმავე აბზაცში გამოსახულებით იქნება გასწორებული სურათის ზედა ნაწილში.
- Შუა. ტექსტი (და გვერდის სხვა ელემენტები) იმავე აბზაცში გამოსახულებით იქნება გასწორებული სურათის ცენტრში.
- წერტილი. ტექსტი (და გვერდის სხვა ელემენტები), რომლებიც იმავე აბზაცშია, როგორც სურათი, გასწორდება სურათის ბოლოში.
- ტექსტის ზედა. ტექსტი (და გვერდის სხვა ელემენტები), რომლებიც იმავე აბზაცშია, როგორც სურათი, განთავსდება სურათის ზემოთ. (არ არის მხარდაჭერილი ყველა ბრაუზერის მიერ.)
- აბსოლუტური შუა. (არ არის მხარდაჭერილი ყველა ბრაუზერის მიერ.)
- აბსოლუტური ქვედაბოლო. (არ არის მხარდაჭერილი ყველა ბრაუზერის მიერ.)
- მარცხენა. სურათი განთავსდება ტექსტის (და გვერდის სხვა ელემენტების) მარცხნივ, რომელიც მდებარეობს იმავე აბზაცში სურათთან ერთად.
- უფლება. სურათი განთავსდება ტექსტის (და გვერდის სხვა ელემენტების) მარჯვნივ იმავე აბზაცში არსებულ სურათთან ერთად.
ჩასმული სურათის რედაქტირება შეუძლებელია ვიზუალურ რედაქტორში. ამიტომ სურათის შემდგომი რედაქტირებისთვის გადადით კოდის რედაქტირების რეჟიმში. სურათის წასაშლელად დააწკაპუნეთ მასზე მაუსით და დააჭირეთ ღილაკს Delete (Del) კლავიატურაზე.
გააუქმეთ ფორმატირება. ხსნის ფორმატირებას, რომელიც გაკეთდა მენიუს ზედა ზოლის ღილაკების გამოყენებით, რომლებიც დაკავშირებულია აბზაცის ნაწილის ფორმატირებასთან. ის მუშაობს ზუსტად ისევე, როგორც ზედა მენიუს ღილაკებში, როცა უნდა გააუქმოთ ფორმატირება, ანუ აირჩიეთ ტექსტის სასურველი ნაწილი და დააწკაპუნეთ ამ ღილაკზე. ამ ღილაკის მოხერხებულობა იმაში მდგომარეობს, რომ ერთი დაწკაპუნებით ის დაუყოვნებლივ აშორებს ყველა ფორმატირებას, ყველა ტიპის, რომელიც იყო შერჩეულ ფრაგმენტში.
ცხრილის შექმნა და რედაქტირება. ღილაკი გამოიყენება ცხრილის შესაქმნელად კურსორის ადგილას ან შერჩეული ცხრილის რედაქტირებისთვის. ცხრილის შექმნისას უნდა მიუთითოთ შემდეგი პარამეტრები:
- რიგები - რიგების რაოდენობა.
- სვეტები - სვეტების რაოდენობა.
- სიგანე - მაგიდის სიგანე. მითითებულია ეკრანის სიგანის პროცენტულად ან პიქსელებში.
- Border - უჯრედის საზღვრის სიგანე. თუ დატოვებთ მნიშვნელობას 0, მაშინ უჯრედების საზღვრები არ ჩანს.
- CellSpacing - მანძილი პიქსელებში ცხრილის უჯრედებს შორის.
- CellPadding - პიქსელებში მანძილი უჯრედის საზღვრიდან უჯრედის შიგნით ტექსტამდე.
- გასწორება - ცხრილის გასწორება გვერდებზე:
  - ნაგულისხმევი. ნაგულისხმევად, როგორც მითითებულია თქვენი ბრაუზერის დეველოპერების მიერ.
  - მარცხენა. ცხრილი დაჭერილია გვერდის მარცხენა კიდეზე.
  - ცენტრი. ცხრილი განთავსებულია ვებ გვერდის ცენტრში.
  - უფლება. ცხრილი დაჭერილია გვერდის მარჯვენა კიდეზე.
ცხრილის წასაშლელად აირჩიეთ მისი საზღვრები მაუსის საზღვრებზე დაწკაპუნებით და დააჭირეთ ღილაკს Delete (Del) კლავიატურაზე. ცხრილის რედაქტირებისთვის მოათავსეთ კურსორი ცხრილის ნებისმიერ ადგილას (ან აირჩიეთ ცხრილის ნაწილი ან მთელი ცხრილი) და კვლავ დააჭირეთ მენიუს ღილაკს. ამავდროულად, ყველა პარამეტრი ხელმისაწვდომია რედაქტირებისთვის, გარდა მწკრივების რაოდენობისა და სვეტების რაოდენობისა. შემდეგი 6 ღილაკი შუა მენიუს ზოლზე არის უკვე შექმნილი ცხრილის რიგებისა და სვეტების რაოდენობის რედაქტირებისთვის. როდესაც კურსორი მაგიდაზეა, ეს ექვსი ღილაკი ხელმისაწვდომია დასაჭერად.
შექმენით ერთი სვეტი კურსორის მარცხნივ. თუ არჩეულია რამდენიმე სვეტი, კურსორი ითვლება ბოლო სვეტზე, რომელიც არჩეულია.
შექმენით ერთი სვეტი კურსორის მარჯვნივ. თუ არჩეულია რამდენიმე სვეტი, კურსორი ითვლება ბოლო სვეტზე, რომელიც არჩეულია.
შექმენით ერთი ხაზი კურსორიდან. თუ არჩეულია რამდენიმე ხაზი, კურსორი ითვლება ბოლო სტრიქონზე, რომელიც არჩეულია.
შექმენით ერთი ხაზი კურსორის ქვემოთ. თუ არჩეულია რამდენიმე ხაზი, კურსორი ითვლება ბოლო სტრიქონზე, რომელიც არჩეულია.
წაშალეთ ერთი სვეტი კურსორიდან. თუ არჩეულია რამდენიმე სვეტი, კურსორი ითვლება ბოლო სვეტზე, რომელიც არჩეულია.
წაშალეთ ერთი ხაზი კურსორიდან. თუ არჩეულია რამდენიმე ხაზი, კურსორი ითვლება ბოლო სტრიქონზე, რომელიც არჩეულია.
შექმენით დანომრილი სია. ან აირჩიეთ რამდენიმე აბზაცი და დააჭირეთ მენიუს ღილაკს. ამ შემთხვევაში, ყველა ეს აბზაცი ხდება დანომრილი სიის ელემენტები. ან დააყენეთ კურსორი სწორ ადგილას, დააჭირეთ მენიუს ღილაკს და შემდეგ ყველა აბზაცი, რომელიც შეიყვანეთ, ავტომატურად გახდება დანომრილი სიის ელემენტები.
შექმენით მარტივი სია. მონიშნეთ რამდენიმე აბზაცი და დააჭირეთ მენიუს ღილაკს. ამ შემთხვევაში, ყველა ეს აბზაცი ხდება მარტივი სიის ელემენტები ნუმერაციის გარეშე.
შეწევის ამოღება. კურსორი უნდა იყოს იმ აბზაცზე, რომლის აბზაცების ამოღება გვინდა. თქვენ შეგიძლიათ აირჩიოთ მთელი აბზაცი ან მხოლოდ მისი ნაწილი.
შექმენით შეწევა. კურსორი უნდა იყოს იმ აბზაცზე, რომლისთვისაც გვინდა შევქმნათ შეწევა მარცხნივ. თქვენ შეგიძლიათ აირჩიოთ მთელი აბზაცი ან მხოლოდ მისი ნაწილი. შეწევა იქმნება მთლიანი აბზაცისთვის (არა მხოლოდ პირველი სტრიქონისთვის).
უკან დააბრუნეთ ყველა ცვლილება. სანამ არ დააწკაპუნებთ ღილაკზე „კოდი“ ან „გადახედვა“, შეგიძლიათ წაშალოთ შეტანილი ყველა ცვლილება და დაუბრუნდეთ იმ მდგომარეობას, როდესაც ბოლოს იხილეთ კოდი ან იხილეთ გვერდი.
აღადგინეთ ყველა წაშლილი ცვლილება წინ. თუ თქვენ დააბრუნეთ მეტი ცვლილება, ვიდრე გჭირდებათ, შეგიძლიათ აღადგინოთ დაბრუნებული ცვლილებები. ანალოგიურად, თუ ცვლილებების უკან დაბრუნების შემდეგ გადახვიდეთ „კოდის“ ან „წინასწარი გადახედვის“ რეჟიმში, მაშინ ცვლილებების აღდგენას ვერ შეძლებთ.
გაანადგურეთ არჩევანი Windows-ის ჯიბეში შერჩევის კოპირებისას. (Ctrl+X)
დააკოპირეთ არჩევანი Windows ჯიბეში. (Ctrl+C)
ჩასვით "ჯიბის" ვინდოუსის შიგთავსი იმ ადგილას, სადაც არის კურსორი. (Ctrl+V)

დამატებითი html რედაქტირება

მენიუს მესამე ზოლი ძირითადად შეიცავს ღილაკებს ფორმების შესაქმნელად და რედაქტირებისთვის, ასევე ნებისმიერი რედაქტორის ჩვეულებრივ დამატებით მახასიათებლებს.

მენიუს მესამე ხაზის ღილაკების სია მათი ადგილმდებარეობის მიხედვით:

შექმენით ფორმა. ღია ფანჯარაში აუცილებელია შეიყვანოთ ფორმის დასახელება, სკრიპტის მისამართი, რომელიც დაამუშავებს ამ ფორმის მონაცემებს და მონაცემთა გადაცემის მეთოდის (post ან get).
შექმენით გამშვები ყუთი. ღია ფანჯარაში შეიყვანეთ ამ შერჩევის ფორმის სახელი, მნიშვნელობა, რომელიც უნდა იქნას მიღებული შერჩევისას და მიუთითეთ, არის თუ არა შერჩევის ველი თავდაპირველად მონიშნული ამ ფორმაში.
შექმენით რადიო ღილაკი. ღია ფანჯარაში შეიყვანეთ ამ შერჩევის ფორმის სახელი, მნიშვნელობა, რომელიც მიიღება შერჩევისას და მიუთითეთ, არის თუ არა ეს ღილაკი თავდაპირველად არჩეული. რადიო ღილაკებიდან მენიუს შექმნისას გახსოვდეთ, რომ ერთი და იმავე მენიუს ყველა რადიო ღილაკს უნდა ჰქონდეს იგივე სახელი.
შექმენით ტექსტის შეყვანის არეალი. ღია ფანჯარაში შეიყვანეთ საიტის სახელი ტექსტის შესაყვანად, საიტის სიგანე სიმბოლოების რაოდენობაში, საიტის ხაზების რაოდენობა, აბზაცებისა და გადახვევის ზოლების მდებარეობა და საწყისი ტექსტი ამ ველში.
შექმენით Run ღილაკი. ფანჯარაში, რომელიც იხსნება, ჩაწერეთ ღილაკის სახელი და ტექსტი, რომელიც დაიწერება ამ ღილაკზე.
შექმენით ღილაკი "Run" სურათის სახით. ფანჯარაში, რომელიც იხსნება, ჩაწერეთ ღილაკის სახელი და გამოსახულების მისამართი, რომელიც შეასრულებს ღილაკის როლს.
შექმენით ღილაკი შევსებული ფორმის გასასუფთავებლად და ყველა ნაგულისხმევი მნიშვნელობის დასაბრუნებლად. ფანჯარაში, რომელიც იხსნება, ჩაწერეთ ღილაკის სახელი და ტექსტი, რომელიც დაიწერება ამ ღილაკზე.
შექმენით ფარული ველი. ფანჯარაში, რომელიც იხსნება, ჩაწერეთ ფარული ველის სახელი და მისი მნიშვნელობა.
შექმენით პაროლის ველი ვარსკვლავით. ფანჯარაში, რომელიც იხსნება, ჩაწერეთ პაროლის ველის სახელი, ველის სიგრძე და პაროლის სიმბოლოების მაქსიმალური რაოდენობა, რომელიც მომხმარებელს შეუძლია შეიყვანოს პაროლის შეყვანისას.
შექმენით ტექსტური ველი. ფანჯარაში, რომელიც იხსნება, ჩაწერეთ ტექსტის ველის სახელი, მისი ზომა სიმბოლოებით, რამდენი სიმბოლოს შეყვანა შეუძლია მომხმარებელს და ამ ველში საწყისი ტექსტი.
გაგზავნეთ დასაბეჭდად.
Მონიშნე ყველა.

Კარგი დღე! მე მაშინვე აგიხსნით პოსტის დიზაინს: ერთხელ, როცა წავაწყდი, არ გამიხარდა წარმოდგენილი გენერატორების ინფორმაციისა და ნავიგაციის ელემენტების უზარმაზარი რაოდენობა და კიდევ უფრო მეტი - მათი მომხმარებლის ინტერფეისი! აღშფოთებული, რომ ინსტრუმენტები მუშაობა სტილები- ისინი თვითონ არ არიან შენარჩუნებული იმ შესაძლებლობების ფარგლებში, რასაც წარმოადგენენ... როგორ ასე?!

როცა შემოქმედებითად ხარ დაკავებული, გსურს გქონდეს იმპროვიზირებული საშუალებები და ინსტრუმენტები დაუფლებისა და მუშაობისთვის, რომლებთანაც ხარჯავ. მინიმალურიძალისხმევა და დრო. ამ ყველაფრის შედეგად გაჩნდა აზრი: აირჩიეთ საუკეთესოიარაღები და ორგანიზებაისინი ხშირი გამოყენებისთვის (a la ნავიგაციის მენიუ, ასე რომ: სწრაფი გაშვება).

ვიმედოვნებ, რომ ბევრისთვის ნოუ-ჰაუ კარგი დამხმარე იქნება ვებ განვითარების პროცესში.

CSS გენერატორები:

CSS3.me- მარტივი, ელეგანტური და ამავდროულად მრავალფუნქციური CSS გენერატორი, ლამაზი დომენით
CSS3Maker.com- ძალიან ფართო ფუნქციონირება ახალ CSS3 ფუნქციებთან მუშაობისთვის, ბრაუზერის ჯვარედინი თავსებადობა, მოქნილობა და ყველაფრის სრული ნაკრები, რაც გჭირდებათ;
CSS3Generator.com– მეტი არაფერი, კლასიკისა და სიმარტივის მოყვარულთათვის, ერთი სიტყვით „ძველი სკოლა“;
colorzilla.com- გრადიენტის გენერატორი ლამაზი ფონის სურათების შესაქმნელად, ბრაუზერების უმეტესობის მხარდაჭერით და სურათების გამოყენების გარეშე (სუფთა CSS).

ვებ ინსტრუმენტები:

ღილაკების შემქმნელი- ღილაკების დიზაინის ხელსაწყო, ვებ 2.0-ის რიტმის ზემოქმედებით. ფუნქციონალებს შორის შეიძლება აღინიშნოს მორგების შესაძლებლობა: ჩაღრმავები, ტექსტის ზომა, მომრგვალებული კუთხეები და გრადიენტური ფერების არჩევანი;
ფორმის შემქმნელი- ფორმის კონსტრუქტორი, რომელიც საშუალებას გაძლევთ დააკონფიგურიროთ როგორც ფორმის მთლიანი, ისე მისი ცალკეული ელემენტების გარეგნობა;
ხატის შემქმნელი- იგრძენით თავი თავისუფალ მხატვრად თქვენი ღილაკების, მენიუებისა და ფავიკონებისთვის ახალი ხატების შექმნით;
ლენტის მშენებელი- ელეგანტური სუფთა CSS ლენტების შესაქმნელად, გამოიყენეთ ეს ინსტრუმენტი პარამეტრებისა და პარამეტრების ფართო სპექტრით.

სურათები ღილაკების (ხატების) სახით სტატიის დასაწყისში - დაწკაპუნებადი!

თუ თქვენ გაქვთ წინადადებები ან იცით საინტერესო ინსტრუმენტები, რომლებსაც შეუძლიათ მხარი დაუჭირონ ამ იდეას, გთხოვთ, კომენტარი გააკეთოთ. გთხოვთ, არ გადაყაროთ ნაგავი, ნადირობა მხოლოდ ექსკლუზიური შეკრების დასამატებლად. Გმადლობთ.