Што такое модульная сетка. Як зрабіць модульную сетку?

Модульная сетка - гэта асаблівы шаблон, па якім і будуецца дызайн сайта. Па сутнасці, гэта сістэма прадстаўлення візуальнай інфармацыі наведвальніку на аснове асобных блокаў, званых модулямі. Сайт, распрацаваны з выкарыстаннем такога шаблону, значна зручней для ўспрымання і навігацыі.

Як прымяняецца сетка

Модульная сетка выкарыстоўваецца пры распрацоўцы дызайнаў кніг, візітовак, таварных знакаў, лагатыпаў і т. Д. Абавязкова яе прымяненне і пры стварэнні сайтаў. Правільна зробленая сетка гарманічна кампануе сераду для ўсіх элементаў рэсурсу - графічных і тэкставых. З яе выкарыстаннем значна прасцей размясціць іх усё на старонцы і стварыць паміж імі выразныя межы. Размясціўшы пэўным чынам элементы, можна зрабіць кожны з іх прыкметным і пры гэтым звязаць разам усю інфармацыю аб самім сайце.

Віды модульных сетак

Самая распаўсюджаная модульная сетка ў дызайне старонак - гэта тры базавыя калонкі вочка. Пры гэтым верхні і ніжні калантытула маюць шырыню, роўную іх памерах. Гэты стандартны варыянт звычайна выкарыстоўваюць аматары пры стварэнні сайтаў. Часам пры гэтым шырыня аднаго вочка павялічваецца за кошт шырыні іншы.

Стварэнне другога варыянту модульных сетак - нестандартных - пад сілу толькі людзям, якія займаюцца вэб-дызайнам прафесійна. У гэтым выпадку дакладна вызначаны толькі шырыня калонак і адлегласць паміж асобнымі элементамі. Модульная сетка ў дызайне рознага роду навінавых рэсурсаў і інтэрнэт-часопісаў распрацоўваецца звычайна наступным чынам:

1. Ствараецца калантытул. Тут павінны быць размешчаны назву сайта, навігацыйнае меню, рознага роду відэаматэрыялы.
2. Старонка разбіваецца на тры калонкі. Пры гэтым дзве з іх маюць аднолькавыя памеры. Трэцяя калонка дзеліцца на дзве часткі вертыкальнай лініяй. Такім чынам, атрымліваюцца чатыры раздзелы (навіннай, фотагалерэя, месца для рэкламы, апошнія інфармацыйныя змены на сайце).

Модульная сетка для інтэрнэт-крам рознай спецыялізацыі ствараецца некалькі па-іншаму. У гэтым выпадку вельмі важна забяспечыць зручнасць навігацыі наведвальнікам. Групуюцца пры гэтым элементы стандартна і аднастайна. Для кожнага з аб'ектаў у сетцы вылучаецца важная інфармацыя, якая характарызуе яго.

Лінейка ў рэдактары «Фотошоп»

Сайты ствараюцца з выкарыстаннем растравых ці вектарных графічных рэдактараў. Сетку ў іх ствараць вельмі зручна. Разгледзім, як гэта робіцца ў папулярным рэдактары Photoshop. Ствараецца модульная сетка ў «Фотошопе» вельмі проста.

Для таго каб па перыметры працоўнага акна малюнкі з'явіліся лінейкі, варта прайсці ў пункт галоўнага меню «Прагляд» (View) і націснуць на радок «Лінейкі» (Rulers). У гэтым рэдактары можна выкарыстоўваць самыя розныя элементы - з дзяленнямі ў сантыметрах, міліметрах, цалях або пікселях. Для таго каб выканаць неабходную наладу, варта прайсці ў пункт галоўнага меню «Рэдагаванне» (Edit). Далей выбраць радок «Усталёўкі» (Preferences) - «Адзінкі вымярэння & Лінейкі» (Units & Rulers). Пасля гэтага высвяціцца акенца, у якім і можна змяніць выгляд лінейкі. У верхнім выпадальным меню выбіраюць сантыметры, міліметры, пікселі і т. Д.

Аднак звычайна пры працы ў рэдактары «Фотошоп» выкарыстоўваюць крыху іншы, больш просты спосаб. Для змены адзінак вымярэння варта проста націснуць на саму лінейку ў акне малюнка правай кнопкай мышы. Пасля гэтага ў якое з'явілася меню можна будзе вырабіць патрэбнае дзеянне. Звычайна пры стварэнні сайта выкарыстоўваецца сетка ў пікселях.

сетка Photoshop

Сама модульная сетка праграмы «Фотошоп» стане бачнай пасля таго, як вы пяройдзеце па пункце галоўнага меню «Прагляд» - «Паказаць» (Show) - «Сетка» (Grid). Крок паміж лініямі сеткі можна наладжваць. Для гэтага варта выканаць каманду «Рэдагаванне» - «Усталёўкі» - «Накіравальныя, сеткі і фрагменты» (Guides, Grid, Slices). Тут можна змяніць не толькі крок паміж лініямі, але і іх колер. Выкарыстоўваючы гэтую сетку, хутка і дакладна размяшчаць па працоўным полі ўсе аб'екты будучага сайта будзе зусім нескладана.

Праца з курсорам

Модульная сетка сайта ствараецца такім чынам вельмі проста. Курсор пры працы прыліпае да ліній. Гэта можа быць зручным у тым выпадку, калі неабходна зрабіць блокі дакладных, вызначаных памераў. Калі ж гэтая функцыя па якіх-небудзь прычынах апынецца непатрэбнай, яе можна адключыць. Па змаўчанні пачатак каардынатаў сеткі ў «Фотошопе» размяшчаецца ў верхнім левым куце акна. Пры жаданні яго можна перамясціць у любое іншае месца палатна. Для гэтага наводзяць курсор на квадрацік пачатку каардынатаў і проста перацягваюць яго, утрымліваючы кнопку мышы. Для вяртання пункту адліку на месца варта двойчы клікнуць на тым жа квадраціку у куце.

Акрамя ўсяго іншага, маюцца рознага роду убудовы для рэдактара «Фотошоп», якія дазваляюць зрабіць стварэнне сайта з выкарыстаннем модульнай сеткі яшчэ больш зручным. Запампоўваюць іх у сеткі. З выкарыстаннем гэтых убудоў можна ствараць сеткі з зададзенымі параметрамі.

Сетка ў CorelDraw

Цяпер паглядзім, як зрабіць модульную сетку ў вектарным рэдактары CorelDraw. Тут яна ствараецца прыкладна гэтак жа, як і ў «Фотошопе». Абразок яе размешчана на верхняй панэлі (вачэй у сетцы). Пасля націску на яе можна будзе выканаць усе неабходныя налады. Дапускаецца выбар адлегласці паміж лініямі, змена адзінкі вымярэння і т. Д. Размяжоўваюць працоўнае поле ў акне выявы ў CorelDraw і з дапамогай накіроўвалых. Іх пры неабходнасці можна зрабіць бачнымі або нябачнымі.

Модульная сетка ў дызайне сайта - асноватворны элемент, да распрацоўкі якога варта падыходзіць з максімальнай адказнасцю. Бо ад таго, наколькі правільна будзе структураваны рэсурс, залежыць зручнасць яго наведвальнікаў, а значыць і час, праведзенае імі на яго старонках.