Чаму ўсе сайты пабудаваны з спалучэннем структуры, стыль і паводзіны
Распаўсюджаная аналогія, якая выкарыстоўваецца для апісання развіцця інтэрфейсных вэб-сайта з'яўляецца тое, што ён падобны на 3 ножках крэсла. Гэтыя 3 ногі, якія таксама вядомыя як 3-х слаёў вэб-распрацоўкі, з'яўляюцца структура, стыль і Паводзін.
Тры пласта вэб-распрацоўкі
- Структура і змест пласта
- Структура або ўтрыманне пласта вэб-старонкі з'яўляецца асноўнай HTML-код гэтай старонкі. Як кадр дома, стварае трывалы падмурак, на якім будуюцца ўсе астатнія дома, так што робіць трывалы падмурак HTML стварыць платформу, на якой вэб-сайт можа быць створаны. HTML структура можа складацца з тэксту або малюнкаў, і ўключае ў сябе гіперспасылкі, наведвальнікі будуць выкарыстоўваць для навігацыі па гэтым вэб-сайце.
- Стыль або прэзентацыі пласт
- Стыль або прэзентацыя пласт вызначае, як структураваны HTML дакумент будзе выглядаць для наведвальнікаў сайта. Гэты пласт вызначаецца CSS (каскадныя табліцы стыляў). Гэтыя файлы ўтрымліваюць стылі, якія паказваюць, як дакумент павінен адлюстроўвацца ў вэб-браўзэры. На сённяшнім Web пласт стылю можа таксама ўключаць у сябе медыя - запыты , якія могуць змяніць адлюстраванне на сайце, заснаванае на розных памерах экрана і прыладах .
- паводзіны
- Пласт паводзін з'яўляецца пласт вэб-старонкі, якія могуць рэагаваць на розныя дзеянні карыстальніка або ўносіць змены ў старонкі на аснове набору умоў. Для большасці вэб - старонак, узровень паводзін будзе ўзаемадзеянне JavaScript на гэтай старонцы.
Чаму Вы павінны Аддзяліць Пласты?
Пры стварэнні вэб-старонкі, то пажадана, каб пласты аддзеленым, наколькі гэта магчыма. Структура павінна быць даверна да вашага HTML, візуальныя стылі да CSS, і паводзіны любых сцэнарыяў, якія выкарыстоўвае сайт.
Некаторыя з пераваг падзелу слаёў з'яўляюцца:
- агульныя рэсурсы
- Калі вы пішаце знешні файл CSS ці JavaScript-файл, вы можаце выкарыстаць гэты файл на любой старонцы вашага вэб-сайта. Калі вам неабходна ўнесці змены ў гэты файл, магчыма , абнавіць некаторыя друкарскія стылі на вэб - сайце, на кожнай старонцы , якая выкарыстоўвае гэтую табліцу стыляў атрымае змены. Там няма неабходнасці рэдагаваць кожную старонку сайта паасобку, што для павелічэння сайта можа быць знясільваючым справай.
- хутчэй загрузкі
- Пасля таго, як скрыпт або табліца стыляў была загружана вашым кліентам у першы раз, ён кэшуецца іх вэб-браўзэр. Паколькі гэтыя агульныя рэсурсы ў цяперашні час утрымліваецца ў кэшы, іншыя старонкі, якія запытваюцца ў загрузцы браўзэра хутчэй, што павышае агульную хуткасць старонкі і прадукцыйнасць.
- Multi-чалавек каманды
- Калі ў Вас ёсць больш чым адзін чалавек, які працуе на вэб-сайце адзін раз, вы можаце выкарыстаць сістэмы, якія для «праверкі ў» і «праверыць» файлаў, каб гарантаваць, што ўсё ў камандзе працуе з апошнімі версіямі гэтых файлаў. Гэта значна складаней зрабіць, калі стылі і паводзіны пераплецены структуры дакументаў.
- SEO
- Сайт , які мае выразны падзел стылю і структуры, хутчэй за ўсё, выконваць лепш для пошукавых сістэм , так як гэтыя сайты могуць больш эфектыўна сканаваць , што змест і зразумець старонку , не загразнуў з візуальным стылем або інфармацыяй паводзін.
- даступнасць
- Знешнія табліцы стыляў і файлы сцэнары з'яўляюцца больш даступнымі для людзей і браўзэры. Таму што падзел стылю і структуры, праграмнага забеспячэння, як для чытання з экрана можна лёгка апрацоўваць змесціва з структуры пласта без загразнуць стылямі, што яны не могуць выкарыстоўваць у любым выпадку.
- зваротная сумяшчальнасць
- Калі ў вас ёсць сайт, які распрацаваны з пластамі развіцця, ён будзе больш зваротнай сумяшчальнасцю, так як браўзэры або прылады, якія не могуць выкарыстоўваць пэўныя стылі CSS, або якія могуць мець JavaScript адключана ўсё яшчэ можа праглядаць HTML. Ваш вэб-сайт можа быць паступова павышаны з функцыямі для браўзэраў, якія падтрымліваюць іх.
HTML - Слаістая структура
Слаістая структура, дзе вы захоўваеце ўсе змесціва, што вашы кліенты хочуць, каб чытаць ці глядзець. Гэта будзе кадавацца ў адпаведнасці з патрабаваннямі стандарту HTML5, і ён можа ўключаць у сябе тэкст і малюнкі, а таксама мультымедыя (відэа, аўдыё і г.д.). Вельмі важна, каб пераканацца, што кожны аспект зместу вашага сайта прадстаўлена ў структурным пласце. Гэта дазваляе якім-небудзь кліентам, якія маюць JavaScript адключана ці не можа праглядаць CSS па-ранейшаму мець доступ да ўсяго вэб-сайт, калі не ўсе функцыянальныя магчымасці гэтага сайта.
CSS - стылі пласта
Вы будзеце ствараць усе візуальныя стылі для вашага вэб-сайта ў вонкавым стыляў. Вы можаце выкарыстоўваць некалькі табліц стыляў, але памятайце, што кожны асобны файл CSS патрабуе запыту HTTP для здабывання, якое ўплывае на прадукцыйнасць сайта.
JavaScript - Паводзіны пласта
JavaScript з'яўляецца найбольш шырока выкарыстоўваным мовай для паводзін пласта, але, як я ўжо згадваў раней, CGI і PHP таксама могуць генераваць старонкі паводзін Web. Гэта, як гаворыцца, калі большасць распрацоўнікаў ставяцца да паводзін пласта, яны азначаюць, што пласт, які актывуецца непасрэдна ў вэб-браўзэры - так JavaScript амаль заўсёды мова выбару. Вы можаце выкарыстоўваць гэты пласт, каб ўзаемадзейнічаць непасрэдна з DOM або Document Object Model. Напісанне правільнага HTML ў пласце змесціва таксама мае важнае значэнне для DOM - узаемадзеянняў ў паводзінах пласта.
Калі вы будуеце ў паводзінах пласта, вы павінны выкарыстоўваць знешнія файлы сцэнарыяў, гэтак жа, як з дапамогай CSS. Вы атрымліваеце усё тое ж перавага выкарыстання знешняй табліцы стыляў.