// სექციის შინაარსის შესახებ აქ // მცირე ფონის განყოფილების შინაარსი აქ

მე გამოვიყენე შრიფტი Font Awesome სოციალური ხატებისთვის, რომელიც ნაჩვენები იქნება განყოფილებაში მცირე ფონის განყოფილება. შემდეგ ჩვენ დავამატებთ შაბლონს ჩვენი ვიდეოსთვის, vikoryst მოდულისთვის jQuery.mb.YTPplayer. დაუყოვნებლივ მოათავსეთ შესაბამისი კოდი .

ღერძი, რომელიც ჩვენ დავაყენეთ ვიდეოს დასაყენებლად:

• კლასი მოთამაშე- ამ კლასს აქვს მოდული მხარდაჭერა mb.YTPplayer
• ვიდეო URL- გამოქვეყნებულია ვიდეოზე
• შეკავება- CSS სელექტორი, რომელშიც უნდა შექმნათ ვიდეო
• ავტომატური ჩართვა- ავტომატურად შექმნილი ვიდეო
• მუნჯი- ხმის არსებობა
• დაწყებაზე- საათი, საიდანაც უნდა დაიწყოთ შექმნილი ვიდეო
• გაუმჭვირვალობა- ვიდეო ინსაითი

CSS

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

Html (სიმაღლე: 100%) ტექსტი (შრიფტი: 15px / 23px "Raleway", sans-serif; ზღვარი: 0; padding: 0; სიმაღლე: 100%; სიგანე: 100%; -webkit-font-smoothing: antialiased; - webkit-text-size-adjust: 100%) p (შრიფტის ზომა: 20 პიქსელი; ხაზის სიმაღლე: 140%; ტექსტის გასწორება: ცენტრში) ul li (ჩვენება: inline-block; list-style: none; padding-right : 10 პიქსელი;)

Wrapper(z-ინდექსი: 600; პოზიცია: შედარებითი). ნიმუში (ფონური სურათი: url(../images/pattern.png); ფონი-გამეორება: გამეორება; ფონის დანართი: გადახვევა; სიგანე: 100%; სიმაღლე: 100%; პოზიცია: აბსოლუტური; ზევით: 0; მარცხნივ: 0). გამყოფი (ფონური სურათი: url (../images/divider.png); ეკრანი: ბლოკი; სიგანე: 300 პიქსელი; სიმაღლე: 35 პიქსელი; ზღვარი: 10 პიქსელი ავტო ) #colorize (ფერი: #f1c40f; font-family: "Lato", sans-serif; შრიფტის ზომა: 40px)

დროა დიდი ფონის განყოფილების სტილი. დასაყენებელი z-ინდექსი on 550 і პარამეტრი გადინებადამალვა. ეს აუცილებელია იმის უზრუნველსაყოფად, რომ YouTube კონტენტი (სუბტიტრები, ანოტაციები) არ იყოს ნაჩვენები ჩვენს ვებსაიტზე. სხვა სტილები საჭიროა სათაურებისთვის, ღილაკებისთვის და სურათებისთვის (უფრო მოგვიანებით).

დიდი ფონი (z-ინდექსი: 550; ტექსტის გასწორება: ცენტრში; სიმაღლე: 100%; მინ-სიმაღლე: 100%; პოზიცია: შედარებითი; გადინება: დამალული) .big-background .big-background-container (სიგანე: 830px ; მაქსიმალური სიგანე: 100%; ეკრანი: inline-block; პოზიცია: აბსოლუტური; ზედა: 50%; მარცხნივ: 50%; -webkit-transform: translate (-50%, - 50%); -moz-transform: translate (-50%, - 50%); -ms-transform: translate (-50%, - 50%); -o-transform: translate (-50%, - 50%); ტრანსფორმაცია: translate (-50%, -50%)) .big-background-სათაური (შრიფტი-ოჯახი: "Raleway", sans-serif; შრიფტის ზომა: 78 პიქსელი; ფერი: #fff; შრიფტის წონა: 300; ტექსტის ტრანსფორმაცია: დიდი; ტექსტის გასწორება : ცენტრი; ზღვარი ქვედა: 22 პიქსელი; padding-top: 20 px; ეკრანი: inline-block; background-tachment: scroll; background-repeat: repeat-x; background-position: top center) a.big-background-btn ( font-family: "Lato", sans-serif; შრიფტის ზომა: 13px; ტექსტის ტრანსფორმაცია: დიდი; ტექსტის დეკორაცია: არცერთი; ფერი: #fff; ფონი: გამჭვირვალე; საზღვარი: 2px მყარი #fff; padding: 10px 14px კურსორი: მაჩვენებელი ასოების დაშორება: 2 პიქსელი; ტექსტის გასწორება: ცენტრში; ჩვენება: inline-block; -webkit-გარდამავალი: .4s ფონის სიმარტივე; -moz-გარდამავალი: .4s ფონის სიმარტივე; -o-გარდამავალი: .4s ფონის სიმარტივე; გარდამავალი: .4s ფონის სიმარტივე; ) .Big-background-btn: hover (ფერი: #fff; ფონი: rgba (255,255,255,0.20)) .big-background-default-image (ფონი: url (../images/sunset.jpg); ფონი-გამეორება : გამეორების გარეშე; ფონის პოზიცია: ცენტრში; ფონის ზომა: საფარი; სიგანე: 100%; სიმაღლე: 100%; z-ინდექსი: 0; უკანა მხარეს ხილვადობა: დამალული)

ახლა გადავიდეთ განყოფილებაზე განყოფილების შესახებ. რეგულირებადი პარამეტრი ფონის ფერითეთრზე და padding 60 პიქსელი ქვემოდან და 20 პიქსელი მარცხნივ და მარჯვნივ.

განყოფილების შესახებ (შრიფტი-ოჯახი: "Lato", sans-serif; ფერი: #7f8c8d; ფონი: #fff; padding: 60px 20px).about-section-container (ტექსტის გასწორება: ცენტრში; padding-ქვედა: 50px) .about-section-title (font-family: "Raleway", sans-serif; შრიფტის ზომა: 40px; ფონი: #fff; ფერი: #3d566e; padding: 0 35px; margin-bottom: 22px; background-tachment: გადახვევა; ფონი-გამეორება: გამეორება-x; ფონის პოზიცია: ცენტრი ცენტრი; ტექსტის ტრანსფორმაცია: დიდი ასოებით) a.about-section-btn (შრიფტი-ოჯახი: "Lato", sans-serif; შრიფტის ზომა: 13px; ტექსტი -ტრანსფორმა: დიდი; ტექსტის დეკორაცია: არცერთი; ფერი: #34495e; ფონი: გამჭვირვალე; კონტური: 2px მყარი #34495e; ბალიშები: 10px 14px; კურსორი: მაჩვენებელი; ასოების დაშორება: 2px; ტექსტის გასწორება: ცენტრში; ეკრანი: inline-block; -webkit-transition: .4s ფონური სიმარტივე; -moz-transition: .4s ფონური სიმარტივე; -o-transition: .4s ფონური სიმარტივე; გარდამავალი: .4s ფონური სიმარტივე;) .about-section-btn: hover (ფერი: #fff; ფონი: #34495e;)

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

მცირე ფონის განყოფილება (შრიფტი-ოჯახი: "Raleway", sans-serif; padding: 100px 0; პოზიცია: შედარებითი; სიგანე: 100%; გადინება: დამალული) .small-background-container (პოზიცია: შედარებითი; ტექსტის გასწორება : ცენტრი) .small-background-სათაური (შრიფტის ზომა: 40px; ფერი: #f1c40f; შრიფტის წონა: 300; z-ინდექსი: 10; ეკრანი: inline-block; ტექსტის ტრანსფორმაცია: დიდი; ზღვარი ქვედა: 20 px ; ზღვარი ზედა: 20 პიქსელი; პოზიცია: ფარდობითი; ფონი-დანართი: გადახვევა; ფონი-გამეორება: გამეორება-x; ფონის პოზიცია: ზედა ცენტრი) bdc3c7)

მედიის შეკითხვები

ჩვენი საიტის ადაპტირებისთვის, დაამატეთ რამდენიმე მედია მოთხოვნა.

@media ეკრანი და (max-width: 768px) (.about-section-title (line-height: 1)) @media ეკრანი და (max-width: 480px) (.big-background-title (font-size: 58px) ) .small-background-title (ხაზის სიმაღლე: 1) / *.პლეერი (ჩვენება: არ არის;) -> თუ გსურთ წაშალოთ ვიდეო bg კონკრეტულ ხედვის პორტზე, მოდულის გარეშე * /) @media ეკრანზე და ( max-width: 360px) (.big-background-title, # colorize (ხაზის სიმაღლე: 1)) @media ეკრანი და (max-width: 320px) (.small-background-title (font-size: 30px))

jQuery

ახლა მოდით ჩავრთოთ ჩვენი YouTube ვიდეო. ვიკლიჩემო კლასი მოთამაშე jQuery კოდის შუაში. მოათავსეთ მიახლოების კოდი დახურვის სხეულის ტეგამდე და თეგების შუაში .
$(Function()($(".Player").Mb_YTPplayer();));

სარეზერვო ვარიანტი

YouTube ვიდეოების ფონზე შეიძლება არ იყოს ნაჩვენები მობილური მოწყობილობებიტაბლეტებზე, რადგან YouTube-ის წესები ამის საშუალებას არ იძლევა.

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

ხელით მიღებული გადაწყვეტილება

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

@media ეკრანი და (მაქს. სიგანე: 480 პიქსელი) (.პლეერი (ეკრანი: არცერთი;))

რა ჭირს jQuery-ს, აქ დავაინსტალირებთ არის_მობილურიყალბი პარამეტრით. შემდეგ ჩვენ ხელახლა დავაკონფიგურირებთ რა არის მაგარი მოთამაშე Volodya პარამეტრების ჩვენება: არცერთი. თუ ასეა, მაშინ დოდამოს კლასი big-background-default-imageგანყოფილებამდე დიდი ფონიі მცირე ფონის განყოფილებაფონის სურათის ვიკისთვის. არაფერი შეიცვლება გარდამტეხი მომენტისთვის.

(ფუნქცია ($) ($(დოკუმენტი).ready(function() (var is_mobile = false; if ($(". Player"). Css("display") == "none") (is_mobile = true;) if (is_mobile == true) (// პირობითი სკრიპტი აქ $(". big-background, .small-background-section"). addClass("big-background-default-image");) else ($(". მოთამაშე "). mb_YTPplayer ();)));)) (jQuery);

გამოსავალი დამატებითი jQuery მოდულისთვის

გამოსახულების კულისებში დაყენების კიდევ ერთი გზაა დახმარება. jQuery მოდული მოწყობილობა.js(Http://matthewhudson.me/projects/device.js/). ეს გაამარტივებს გონების აღწერის პროცესს მობილური მოწყობილობების სხვადასხვა ზომის ეკრანის ქვეშ. ამ მოდულით ჩვენ შეგვიძლია უბრალოდ დავწეროთ შემდეგი კოდი:

(ფუნქცია ($) ($ (დოკუმენტი).ready (ფუნქცია () (//Device.js შეამოწმებს არის თუ არა ეს ტაბლეტი თუ მობილური - http://matthewhudson.me/projects/device.js/ თუ (! მოწყობილობა. tablet() &&! device.mobile()) ($( ". player"). mb_YTPplayer();) else (// jQuery დაამატებს ნაგულისხმევ ფონს სასურველ კლასს $( ". big-background, .small- ფონის განყოფილება"). addClass(" big-background-default-image");)));)) (jQuery);

აი მე მეთოდით ვიკორისტი ვარ device.mobile()і device.tablet()გადამოწმებისთვის ამას მოვაწყობ ზაიშოვ კორისტუვაჩის გულისთვის. როგორც კი დაფიქრდები, კლასს მიიღებ big-background-default-imageგანყოფილებამდე დიდი ფონიі მცირე ფონის განყოფილება. წინააღმდეგ შემთხვევაში კლასი მოთამაშედაიკარგება და ვიდეო შეიქმნება.

ნივთების მოწესრიგება

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

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

თარგმანის ტიპი.მთელი ჩემი პატივისცემით და დისკის გადაცემისადმი პატივისცემით, გთხოვთ დამიკავშირდეთ პირად შეტყობინებაში. Გმადლობთ!

ავტორის შეხედულება:ამ თავდაპირველ სტატიაში ჩვენ განვიხილავთ ფონის სურათის შექმნის მარტივ ტექნიკას, რომელიც გადაჭიმული იქნება ბრაუზერის ხედის მთელ სიგანეზე. რატომ გვჭირდება CSS power background-size; JavaScript საჭირო არ არის.

გამოიყენეთ ადაპტური მთლიანი ფონის სურათები

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

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

ძირითადი პრინციპები

ღერძი ჩვენი გეგმაა.

Vikorist დენის ფონის ზომა, რათა უზრუნველყოთ ყველაფრის სრულად ნახვა

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

გამოიყენეთ მედიის მოთხოვნა მობილური მოწყობილობებისთვის მცირე ფონის სურათების გამოსატანად

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

სურათი, როგორც მე გამოვიყენე დემო აპლიკაციაში, შეიძლება დაყენდეს 5500x3600 პიქსელზე. ვის საშუალებას გაძლევთ დაბეჭდოთ ყველაზე ფართოფორმატიანი კომპიუტერის მონიტორებისთვის, რომლებიც ამჟამად იყიდება. ამ მიზნით მე მქონდა შესაძლებლობა დამემზადებინა 1.7 მბ ზომის ფაილი.

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

HTML

მარკირებისთვის საჭიროა მხოლოდ:

ჩვენ ვირჩევთ სხეულის ელემენტისთვის ფონის სურათის დაყენებას ისე, რომ სურათმა დაიკავოს ბრაუზერის ხედის უმეტესი ნაწილი.

თუმცა, ეს ტექნიკა ასევე იმუშავებს ნებისმიერი ბლოკის ელემენტისთვის (მაგალითად, div ან ფორმა). იმის გამო, რომ თქვენი ბლოკის ელემენტის სიგანე და სიმაღლე არის „ღრძილები“, ფონის სურათების მასშტაბირება მოხდება მთელი კონტეინერის შესავსებად.

CSS

ჩვენ ვაყენებთ შემდეგ სტილებს სხეულის ელემენტისთვის:

body (/ * გამოსახულებისკენ მიმავალი გზა * / ფონის სურათი: url (images / background-photo.jpg); / * ფონის სურათები ყოველთვის არის ვერტიკალურად და ჰორიზონტალურად ცენტრში * / ფონის პოზიცია: ცენტრში; / * ფონის სურათები არ მეორდება * / ფონური გამეორება: არა-გამეორება; / * ფონის სურათი ფიქსირდება ხედვის პორტში, ასე რომ, ის არ არის გადაადგილებული, თუ შინაარსის სიმაღლე მეტია სურათის სიმაღლეზე * / ფონის დანართი: დაფიქსირებულია; / * ღერძი საშუალებას აძლევს ფონის სურათს მოერგოს კონტეინერის ზომას * / ფონის ზომა: საფარი; / * ჩანართები ფონის ფერი, რომელიც გამოჩნდება ფონის სურათის ჩვენებისას * / background-color: # 464646; )

სხეული ( / * გზა გამოსახულებისკენ * / ფონი - სურათი: url (სურათები / ფონი - ფოტო. jpg); / * ფონის სურათები ყოველთვის ცენტრშია ვერტიკალურად და ჰორიზონტალურად * / / * ფონის სურათები არ მეორდება * / ფონი - გამეორება: არა - გამეორება; / * ფონის სურათი ფიქსირდება ხედვის პორტში, ასე რომ, ის არ არის გადაადგილებული, თუ შინაარსის სიმაღლე მეტია სურათის სიმაღლეზე * / / * ღერძი საშუალებას აძლევს ფონის სურათს მოერგოს კონტეინერის ზომას * / ფონი - ზომა: საფარი; / * ადგენს ფონის ფერს, რომელიც გამოჩნდება ფონის სურათის არჩევისას * / ფონი - ფერი: #464646;

ყველაზე მნიშვნელოვანი წყვილია ძალა/მნიშვნელობა, პატივისცემის მოსაპოვებლად:

ფონის ზომა: საფარი;

ფონი - ზომა: საფარი;

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

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

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

ფონი-პოზიცია: ცენტრი ცენტრი;

ფონი - პოზიცია: ცენტრი ცენტრი;

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

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

ფონი-დანართი: ფიქსირებული;

ფონი - დანართი: ფიქსირებული;

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

შემცირებული CSS ჩანაწერი

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

სხეული (ფონი: url (background-photo.jpg) ცენტრალური ყდა, გამეორება არ არის დაფიქსირებული;)

სხეული ( ფონი: url (ფონი - ფოტო. jpg) ცენტრი ცენტრალური საფარი არა - გამეორება ფიქსირდება;

ყველაფერი რაც თქვენ გჭირდებათ არის შეცვალოთ URL-ის მნიშვნელობა, რათა მიუთითოთ თქვენი ფონის სურათი.

Dodatkovo: მედია შეყვანა მცირე ეკრანებისთვის

პატარა ეკრანებისთვის ვიკორი გამოვიყენე Photoshop პროგრამაგამომავალი ფონის სურათის პროპორციულად შესაცვლელად ზომით 768x505 პიქსელით და მე ასევე გამოვიყენე Smush.it სერვისი ზომის შესაცვლელად. ახლა ფაილის ზომა შეიცვალა 1741 კბ-დან 114 კბ-მდე. შემდეგ სურათის ზომა 93%-ით შეიცვალა.

გთხოვთ, არასწორად არ გამიგოთ, 114 კბ მაინც საკმარისია წმინდა ესთეტიკური დიზაინის ელემენტისთვის. 114KB დამატებითი სივრცის დათვალიერებისას, მე გავხდებოდი ასეთი ფაილის ვიკორისტი, მხოლოდ იმ შემთხვევაში, თუ ეს გაზრდის მომხმარებლისა და საიტის (UX) ურთიერთქმედების შესახებ ინფორმაციის საგრძნობლად შედგენის შესაძლებლობას. დღევანდელი მომენტიინტერნეტ ტრაფიკის მნიშვნელოვანი ნაწილი მოდის მობილური მოწყობილობების ფონზე - სურათი: url (სურათები / ფონი - ფოტო - მობილური - მოწყობილობები. jpg);

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

ამ მედიის მოხმარების მცირე უპირატესობა ის არის, რომ თუ შეცვლით თქვენი ბრაუზერის ფანჯრის სიგანეს, მაგალითად, 1200 პიქსელიდან 640 პიქსელამდე (ან იგივე), მაშინვე მიიღებთ მოხიბვლის მომენტს მცირე ან დიდი ფონის სურათით.

გარდა ამისა, იმის გამო, რომ პატარა ეკრანის მქონე მოწყობილობებს შეუძლიათ უფრო დიდი რაოდენობის პიქსელების ჩვენება - მაგალითად, iPhone 5-ს ბადურის დისპლეით შეუძლია აჩვენოს 1136x640 პიქსელი - პატარა ფონის სურათი იქნება პიქსელი ე.წ.

მიწოდების ჩანთები

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

როგორ დავაყენოთ ვებ გვერდი თქვენს დესკტოპის მონიტორზე?

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

მოდით წავიდეთ მარცხნიდან მარჯვნივ. ვებ გვერდის ინსტალაცია სამუშაო მაგიდაზე

• დააწკაპუნეთ მარჯვენა ღილაკიდათვი ერთი თავისუფალი ადგილით სამუშაო მაგიდაზე

• რაც გამოჩნდა სამუშაო მაგიდაზე დამატებით მენიუში, აირჩიეთ ელემენტი ძალა.

• მოდით ავირჩიოთ Worktable ჩანართი და დავაჭიროთ სამუშაო მაგიდის მორგება...

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

ფანჯარაში უბრალოდ შეიყვანეთ თქვენი საყვარელი საიტის ასლის მისამართი თქვენი ბრაუზერის მისამართის ზოლიდან.

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

Შენიშვნა.

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

ვებ დანამატების შესახებ

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

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

ვებ დანამატების ტიპიური სტაგნაცია

ვებ დამატებების ზრდა დიდ მნიშვნელობას ანიჭებს როგორც ვებსაიტების პროვაიდერებს, ასევე მათ გამომცემლებს.

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

ამ ტიპის ვებ დანამატი საშუალებას გაძლევთ შექმნათ ძიებები ერთად, მოაწყოთ ისინი და იმოძრაოთ ახალი სახელმძღვანელო გზით. ასეთი დანამატების მაგალითები შეიძლება იყოს კომპანიების შიდა ქსელები - Microsoft MSDN (www.msdn.microsoft.com) და Amazon.com (www.amazon.com).

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

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

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

ვებ დანამატი ათავისუფლებს ვებ დიზაინერს რუტინული სამუშაოსგან სტაბილური განახლებასაიტის HTML მხარე. პლაკატები, მაგალითად, ახალი ამბების რედაქტორები, ახალი მასალის ხელმისაწვდომობის გარანტია და ვებ დამატებების მონიტორინგს ავტომატური განახლებებივებგვერდი. მაგალითად, შეგიძლიათ მოიყვანოთ ჟურნალის The Economist-ის ვებ ვერსია (www.economist.com) და CNN-ის ახალი ამბების სერვისი (www.cnn.com).

ვებ აპლიკაციის კონდახი

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

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

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

მოთამაშეები შეიყვანენ მონაცემებს მათი სპორტული მიღწევების შესახებ მარტივი HTML ფორმით.

მოპოვებული მონაცემები შეინახება მონაცემთა ბაზაში.

ქულების განაწილება გამოკლებული მონაცემების საფუძველზე გამოითვლება.

კანის მოვლის სპეციალისტებს შეუძლიათ ნახონ მონაცემები მათი შედეგების შესახებ.

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

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

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

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

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

სტატიკური ვებ გვერდების დამუშავება

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

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

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

Trio Motors-ის შესახებ

ყველა HTML კოდი იქმნება დეველოპერის მიერ სერვერზე გვერდის განთავსების მომენტამდე. HTML კოდი უცვლელი რჩება სერვერზე გვერდის განთავსების შემდეგ; ამ გვერდს სტატიკური ეწოდება.

Შენიშვნა.

თუ ამას მკაცრად მივუდგებით, "სტატიკური" გვერდი შეიძლება ნამდვილად არ იყოს ასეთი. მაგალითად, სურათების ან Flash ჩანაცვლება (SWF ფაილში) საშუალებას გაძლევთ „აღორძინოთ“ სტატიკური გვერდი. თუმცა, ამ კონტექსტში, გვერდი სტატიკურია, რამდენადაც მას იყენებს ბრაუზერი ცვლილებების გარეშე.

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

ა.ვებ ბრაუზერი იტვირთება სტატიკური გვერდი. ბ.ვებ სერვერმა იცის მხარე. C.ვებ სერვერი აგზავნის მოთხოვნის გვერდს ბრაუზერში.

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

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

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

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

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

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

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

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

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

SELECT გვარი, სახელი, fitpoints FROM თანამშრომლებისგან

შემდეგი მაგალითი გვიჩვენებს მონაცემთა ბაზაში შესვლისა და მოძიებული მონაცემების ბრაუზერში დაბრუნების პროცესს.

ა.ვებ ბრაუზერი იტვირთება დინამიური გვერდი. ბ.ვებ სერვერი იცნობს საიტს და გადასცემს მას დამატებით სერვერზე. C.დამატებითი სერვერი ამოწმებს გვერდს ინსტრუქციების არსებობისთვის და ასრულებს მათ მომზადებას. დ.დამატებითი სერვერი აგზავნის მოთხოვნებს მონაცემთა ბაზის დრაივერზე. ე.დრაივერი შენახულია მონაცემთა ბაზაში. ფ.მძღოლი ატრიალებს ჩანაწერების კომპლექტს. გ.დრაივერი აგზავნის ჩანაწერების ერთობლიობას დამატებით სერვერზე. ჰ.დამატებითი სერვერი ათავსებს მონაცემებს გვერდზე და გადასცემს გვერდს ვებ სერვერზე. ᲛᲔ.ვებ სერვერი აგზავნის მომზადებულ მოთხოვნის გვერდს ბრაუზერში.

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

დაბალბიუჯეტიანი დანამატების შესაქმნელად შეგიძლიათ გამოიყენოთ ფაილების მონაცემთა ბაზა, მაგალითად, დახმარებისთვის შექმნილი მონაცემთა ბაზა Microsoft Access. თუ თქვენ გეგმავთ საიმედო კორპორატიული დანამატების შექმნას, რეკომენდებულია სერვერის მონაცემთა ბაზის გამოყენება, მაგალითად, Microsoft SQL Server, Oracle 9i ან MySQL სერვერებზე დაყრდნობით.

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

დინამიური გვერდების განვითარება

დინამიური გვერდების შემუშავების პროცესი შედგება ძირითადი HTML კოდის დაწერისგან და შემდეგ სერვერის სკრიპტების ან HTML გვერდის ტეგების შექმნასგან, რაც ხელს უწყობს გვერდის დინამიურობას. თუ გადახედავთ დარჩენილ კოდს, ხედავთ, რომ არსებობს მრავალი სკრიპტი გვერდითი გვერდის HTML კოდში ჩასართავად. როგორც ჩანს, ასეთ ენობრივ სკრიპტებს HTML ენას უწოდებენ. მიმდინარე აპლიკაცია იყენებს ColdFusion მარკირების ენას (CFML).

შენიშვნა. Dreamweaver CC და უფრო გვიან ვერსიებს აქვთ CFML მხარდაჭერა ყოველდღე.

Trio Motors-ის შესახებ

Trio Motors არის წამყვანი ავტომობილების მწარმოებელი.

აუცილებლად ეწვიეთ ჩვენს # დეპარტამენტის # გვერდს.

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

მათთან ხდება ცვლილება დეპარტამენტი, რის შემდეგაც მას ენიჭება "გაყიდვების" მწკრივის მნიშვნელობა.

"გაყიდვების" მნიშვნელობა მოთავსებულია HTML კოდში.

დამატებითი სერვერი აბრუნებს წინა გვერდს ვებ სერვერზე:

Trio Motors-ის შესახებ

Trio Motors არის წამყვანი ავტომობილების მწარმოებელი.

აუცილებლად ეწვიეთ ჩვენს გაყიდვების გვერდს.

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

Trio Motors-ის შესახებ

Trio Motors არის ავტომობილების ერთ-ერთი წამყვანი მწარმოებელი.

არ დაგავიწყდეთ ჩვენი გაყიდვების განყოფილების ბმული.

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

სერვერის ტექნოლოგია
	ColdFusion მარკირების ენა (CFML)
ASP გვერდები

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

ვებ დანამატების ტერმინოლოგია

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

დამატებითი სერვერი

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

ყველაზე ფართო გაფართოების სერვერები მხარს უჭერენ ColdFusion და PHP ენებს.