LXF164: Шко­ла LXF

Версия 01:14, 30 октября 2018

KompoZer: Конструктор Html страниц

Ос­нов­ные воз­мож­но­сти и внеш­ний вид

Обмен опытом и передовые идеи по использованию свободного ПО в образовании

Ми­ха­ил Вы­гранен­ко за­нял­ся Со­зи­дания­ми, с фи­ло­соф­ским вве­дением и ли­­ри­­че­­­ски­­­­ми от­сту­п­ления­ми. Со­зи­дание пер­вое из че­ты­рех...

Вве­дение

[[Файл: |left |100px |thumb|Наш эксперт Ми­ха­ил Вы­гра­нен­ко – идео­лог сво­бо­ды в мыс­лях и по­ряд­ка в де­лах на ни­ве про­све­ще­ния, ка­ким бы па­ра­док­саль­ным ни ка­за­лось это со­че­та­ние. В ми­ру – учи­тель-методист.]] – KompoZer? Ос­ко­лок древнего сай­то­ст­роя? Ка­кой смысл ис­поль­зо­вать эту про­грам­му в на­ши дни? Ко­му и за­чем она нуж­на? – пред­ви­жу, что так, скеп­ти­че­­ски усмех­нув­шись, вы­ска­жет­ся по­верх­но­ст­но-про­дви­ну­тый обо­зре­ва­тель Ин­тернета, меч­таю­щий о карь­е­ре фри­лан­се­ра. Что ж, эти фи­ло­соф­ские во­про­сы име­ют ме­сто быть. Дей­ст­ви­тель­но, при­ло­жение ис­то­ри­че­­ское, по­след­няя вер­сия от­кры­та го­да три на­зад. Прав­да и то, что нын­че не в мо­де соз­дание ста­тич­ных ин­фор­ма­ци­он­ных html-страниц, и про­грам­ме, пред­на­зна­чен­ной для их кон­ст­руи­ро­вания, в со­вре­мен­ных пор­таль­но-об­лач­ных реа­ли­ях жить не про­сто. Но вся­ко­му фи­ло­соф­ско­му во­про­су дол­жен най­тись фи­ло­соф­ский от­вет, пусть да­же и субъ­ек­тив­ный. Здесь и сей­час я тот, кто сде­ла­ет это для про­грам­мы KompoZer.

Я ут­вер­ждаю, что ей са­мое ме­сто в шко­ле, в ка­че­­ст­ве учеб­но­го сред­ст­ва, и по­яс­ню по­че­му.

По дей­ст­вую­щим фе­де­раль­ным учеб­ным про­грам­мам 2004 г. (http://www.websib.ru/noos/informatika/progr.htm) в ба­зо­вом кур­се ин­фор­ма­ти­ки средней сту­пени прак­ти­че­­ско­­го сай­то­строения нет во­об­ще, а в ба­зо­вом кур­се стар­шей шко­лы на него от­ве­де­но при­мер­но 10 уро­ков. По­нят­но, что раз­гу­лять­ся в деб­рях web-кон­ст­руи­ро­вания учи­те­лю нет воз­мож­но­сти. Вряд ли по­ло­жение кар­ди­наль­но улуч­шит­ся со вво­дом учеб­ных про­грамм по но­вым стан­дар­там. Си­туа­цию мо­гут под­дер­жать до­полнитель­но вы­де­лен­ные ру­ко­во­дством учеб­ные ча­сы из ре­гио­наль­но­го и школь­но­го ком­понен­тов или элек­тив­ные кур­сы, но это уж где ка­кой ме­ст­ный рас­клад ин­те­ре­сов. Я ис­хо­жу из то­го, что есть га­ран­ти­ро­ван­но у всех.

Итак, что же нуж­но учи­те­лю, ис­поль­зую­ще­му школь­ную плат­фор­му Linux в учеб­ном про­цес­се, от про­грамм­но­го при­ло­жения для та­ких за­ня­тий?

» Ар­хив или па­кет с мак­си­маль­ной про­сто­той уста­нов­ки

» Сво­бод­ная вер­сия win-ди­ст­ри­бу­ти­ва (же­ла­тель­но)

» Со­че­тание ви­зу­аль­но­го кон­ст­руи­ро­вания с ра­бо­той в ко­де

» По­нят­ный и удоб­ный ин­ст­ру­мен­та­рий

» Русскоя­зыч­ный ин­тер­фейс (же­ла­тель­но)

И хо­тя в школь­ных Linux-сбор­ках име­ют­ся сред­ст­ва web-раз­ра­бот­ки, по­лу­ча­ет­ся, что KompoZer – един­ст­вен­ная про­грам­ма, удов­ле­тво­ряю­щая этим усло­ви­ям, по­зво­ляю­щая вес­ти за­ня­тия прак­ти­че­­ски с ну­ля. Ведь KDevelop и Quanta Plus, ко­то­ры­ми осна­щен, на­при­мер, Альт Ли­нукс 5.0 Школь­ный Мас­тер (ПСПО 5, http://www.altlinux.ru/products/5th-platform/school-box/) – это толь­ко ре­дак­то­ры ко­да, ра­бо­та в них в прин­ци­пе не от­ли­ча­ет­ся от соз­дания html-страниц в «блок­но­те». По­ня­тие web-ди­зай­на при этом прак­ти­че­­ски те­ря­ет смысл, а ведь ви­деть кар­тин­ку сра­зу – очень важ­но для школьника и во­об­ще но­вич­ка. А KompoZer – объ­ект­но-ви­зу­аль­ный ре­дак­тор сай­то­строения (WYSIWYG-ре­дак­тор [What You See Is What You Get, «что ви­дишь, то и по­лу­чишь», см. страницу Википедии]), сво­бод­ный, от­кры­тый и кросс­плат­фор­мен­ный. И очень дру­же­ст­вен­ный по от­но­шению к поль­зо­ва­те­лю. Так что в нем не нуж­но ис­кать недостат­ки в сравнении с про­прие­тар­ны­ми ли­де­ра­ми та­ко­го ро­да от Microsoft (SharePoint Designer в со­ста­ве Office 2007 и 2010, Expression Web в со­ста­ве па­ке­та Expression Studio, FrontPage в со­ста­ве па­ке­та Office 2003) и Adobe (Dreamweaver, ранее при­над­ле­жав­ший Macromedia). Он яв­ля­ет­ся за­ме­ча­тель­ной стар­то­вой пло­щад­кой для дальней­ше­го лю­би­тель­ско­го и про­фес­сио­наль­но­го сай­то­строения как с ис­поль­зо­ванием на­зван­ных поч­тен­ных про­грамм, так и ди­на­ми­че­­ских сис­тем управ­ления кон­тен­том (CMS-сис­те­мах, см. в Википедии), и online-кон­ст­рук­то­ров (см., на­при­мер, кон­ст­рук­тор ВебСтолица.ру или со­от­вет­ст­вую­щий сер­вис Google), в ко­то­рых так или ина­че со­хра­ня­ет­ся пре­ем­ст­вен­ность ба­зо­вых ин­ст­ру­мен­тов и на­вы­ков.

> Рис. 1. Ин­тер­фейс ок­на про­грам­мы KompoZer.

Сайт про­грам­мы – http://kompozer.net/, где мож­но по­лу­чить все необ­хо­ди­мые ди­ст­ри­бу­ти­вы и па­ке­ты. Я бу­ду ис­поль­зо­вать в пред­ла­гае­мом по­со­бии по на­чаль­но­му сай­то­строению по­след­нюю, раз­ви­ваю­щую­ся [development], русскоя­зыч­ную вер­сию 0.8b3 (2010-02-28) на плат­фор­ме ПСПО 5.

Для уста­нов­ки lin-ди­ст­ри­бу­ти­ва нуж­но:

1 За­пи­сать его ар­хив в До­маш­нюю пап­ку поль­зо­ва­те­ля.

2 Вы­звать для ар­хи­ва кон­тек­ст­ное ме­ню и вы­брать пункт «Рас­па­ко­вать в эту пап­ку».

3 От­крыть поя­вив­шую­ся в До­машней пап­ке ди­рек­то­рию Kompozer и за­пустить файл kompozer.

4 При же­лании мож­но соз­дать яр­лык для про­грам­мы на Ра­бо­чем Сто­ле.

Счи­таю, что это тот слу­чай, когда на­чать на­до сра­зу с прак­ти­ки. Тео­рия – по хо­ду де­ла, в за­ви­си­мо­сти от тех­но­ло­ги­че­­ских пе­ре­ры­вов, празд­но­го лю­бо­пыт­ст­ва и Ви­ки­пе­дии. Для вы­полнения Со­зи­даний (в про­сто­на­ро­дье – прак­ти­че­­ских за­даний, уп­ражнений) тре­бу­ет­ся ис­прав­ное ин­тернет-со­единение и учеб­ные фай­лы в пап­ке pict (см. LXFDVD).

Вот и все для на­ча­ла. Но нет, че­го-то не хва­та­ет. Че­го? Мне ка­жет­ся, ли­ри­че­­ско­­го от­сту­п­ления. По­эти­че­­ские стро­ки спо­соб­ст­ву­ют ин­те­ре­су и сти­му­ли­ру­ют мыш­ление, на­страи­ва­ют на проник­но­вен­ность и воз­вы­шен­ность. На­при­мер, гек­за­мет­ры. Они вы­со­ко­куль­тур­ны, как все эл­лин­ское, на­деж­ны и про­ве­ре­ны вре­менем – как раз под стать про­грам­ме KompoZer. Да, имен­но гек­за­мет­ры.

Так при­го­товь­ся вникать, о пыт­ли­вый и вдум­чи­вый юзер,

Что­бы в бе­се­де с со­бой смог бы достой­но пред­стать,

Не го­во­ря про лю­дей, и вер­шин мас­тер­ст­ва сай­то­ст­роя

Свет­лых хо­тя бы достичь, ес­ли уж не по­ко­рить.

Ус­та­но­вим KompoZer

Пе­ред тем, как на­чать со­зи­дать, про­ясним сле­дую­щее.

KompoZer по­зво­ля­ет:

» ра­бо­тать в трех ре­жи­мах: ре­жи­ме ди­зай­на (объ­ект­но-ви­зу­аль­но­го кон­ст­руи­ро­вания), ре­жи­ме ко­да и объ­е­динен­ном ре­жи­ме, а так­же вклю­чать пред­ва­ри­тель­ный про­смотр;

» от­кры­вать несколь­ко страниц и вес­ти об­ра­бот­ку сло­ев на странице;

» управ­лять фай­ла­ми и пап­ка­ми сай­та (менедж­мент сай­та);

» пуб­ли­ко­вать сайт (об­нов­ления) в Ин­тернет и кон­тро­ли­ро­вать этот про­цесс в кон­со­ли про­то­ко­ла FTP;

» вы­пол­нять фор­ма­ти­ро­вание сим­во­лов, аб­за­цев и страниц, соз­да­вать таб­ли­цы и фор­мы;

» от­кры­вать те­ку­щую страницу во внешнем тек­сто­вом ре­дак­то­ре в ви­де html-ко­да;

» вес­ти CSS-ре­дак­ти­ро­вание (ре­дак­ти­ро­вание сти­ля);

» вы­пол­нять встав­ку объ­ек­тов (изо­бра­жения, таб­ли­цы, ссыл­ки, сим­во­лы и др.).

Внешне (рис. 1) про­грам­ма близ­ка к Microsoft SharePoint Designer со всем при­выч­ны­ми со­став­ляю­щи­ми ок­на. Эле­мен­ты лег­ко на­хо­дят­ся по под­пи­сям и всплы­ваю­щим под­сказ­кам.

В ра­бо­чем по­ле ка­ж­дая страница вы­гля­дит в ви­де вклад­ки. Име­ют­ся из­ме­ри­тель­ные линей­ки, по­ло­сы про­крут­ки, вклад­ки ре­жи­мов и рас­кры­ваю­щий­ся спи­сок про­смот­ра. В ле­вой час­ти ок­на про­грам­мы рас­по­ла­га­ет­ся менед­жер сай­та и его ин­ст­ру­мен­ты. Ввер­ху – как обыч­но: ме­ню и панели ин­ст­ру­мен­тов.

Со­зи­дание пер­вое: Про­стая на­чаль­ная страница сай­та

За­мер ком­пь­ю­тер­ный мир: ка­ж­дый пик­сель за­стыл на эк­ране.

Кла­виа­ту­ра мол­чит – что она мо­жет без рук?

Да­же за­тих как-то ку­лер во чре­ве сис­тем­но­го бло­ка...

Этот ма­ги­че­­ский мир дей­ст­вий осмыс­лен­ных ждет.

Мы соз­да­дим сайт, по­свя­щен­ный от­важ­но­му лет­чи­ку и за­ме­ча­тель­но­му фран­цуз­ско­му пи­са­те­лю Ан­туа­ну де Сент-Эк­зю­пе­ри.

Пред­ва­ри­тель­но сле­ду­ет:

» При­го­то­вить (взять с LXFDVD, про­ве­рить в пап­ке pict) учеб­ные фай­лы pict.jpg, plume.png.

» Убе­дить­ся в ис­прав­но­сти ин­тернет-со­единения.

Те­перь мож­но брать­ся за де­ло.

1 За­пустим про­грам­му с по­мо­щью ме­ню сис­те­мы или яр­лы­ка на Ра­бо­чем Cтоле.

2 Но­вая страница от­кры­ва­ет­ся ав­то­ма­ти­че­­ски, и ее сле­ду­ет сра­зу со­хранить. При этом в диа­ло­го­вом окне нуж­но на­брать имя на­чаль­ной страницы сай­та index (это универ­саль­ное пра­ви­ло для сай­то­строения) – см. рис. 2.

Сле­ду­ет иметь в ви­ду, что фай­лы сай­та долж­ны иметь в име­нах толь­ко строч­ные ла­тин­ские бу­к­вы и циф­ры без про­бе­лов и зна­ков пре­пи­нания.

3 На­жа­тие на кноп­ку ОК при­ве­дет в диа­ло­го­вое ок­но (рис. 3), за­пра­ши­ваю­щее имя пап­ки для со­хранения. Ее мож­но соз­дать пря­мо сей­час (или за­бла­го­вре­мен­но) с по­мо­щью со­от­вет­ст­вую­щей кноп­ки диа­ло­го­во­го ок­на. На­ше имя пап­ки – Эк­зю­пе­ри. Стан­дарт­ный тип фай­ла html для страницы сай­та за­да­ет­ся ав­то­ма­ти­че­­ски.

4 На­бе­рем в пер­вых стро­ках страницы текст с именем на­ше­го ге­роя, по-русски и по-фран­цуз­ски, и да­та­ми его жизни:

Ан­ту­ан Ма­ри Жан-Ба­тист Ро­же де Сент-Эк­зю­пе­ри Antoine Marie Jean-Baptiste Roger de Saint-Exupe´ry (1900 –1944)

Текст мож­но ко­пи­ро­вать из внеш­них ис­точников (до­ку­мент, Ин­тернет), но обя­за­тель­но спер­ва по­мес­ти­те (со­храните) его в про­стой тек­сто­вый файл и пе­ре­но­си­те на страницу уже от­ту­да. Про­ме­жу­точ­ное раз­ме­щение осво­бо­дит нас от фор­ма­ти­ро­вания ис­точника, ко­то­рое пор­тит код соз­да­вае­мой страницы и неред­ко при­во­дит к неже­ла­тель­ным по­след­ст­ви­ям.

Раз­мес­тим текст по цен­тру и при­меним к нему ин­ст­ру­мен­ты фор­ма­ти­ро­вания по сво­ему усмот­рению (вид шриф­та, раз­мер, на­чер­тание и цвет сим­во­лов). Об­ра­ти­ли внимание на пунк­тир­ную крас­ную рам­ку? Она обо­зна­ча­ет блок еди­но­го фор­ма­ти­ро­вания и никак не ог­раничи­ва­ет сво­бо­ды внесения из­менений.

Един­ст­вен­ное, что тре­бу­ет по­яснения – это сим­вол e´: на кла­виа­ту­ре он от­сут­ст­ву­ет. Для его встав­ки в ме­ню про­грам­мы вы­би­ра­ем пунк­ты Встав­ка/Бу­к­вы и сим­во­лы... и в диа­ло­го­вом окне за­да­ем по­ло­жение:

Не за­бу­дем за­крыть по­сле встав­ки сим­во­ла диа­ло­го­вое ок­но.

5 На оче­ре­ди – встав­ка изо­бра­жения. Все кар­тин­ки (эле­мен­ты оформ­ления), раз­ме­щае­мые на страницах сай­та, долж­ны на­хо­дить­ся в его струк­ту­ре в от­дель­ной пап­ке (или пап­ках). По­это­му об­ра­тим­ся к Менед­же­ру сай­та, рас­по­ла­гаю­ще­му­ся в ле­вой час­ти ок­на про­грам­мы, и на­жмем его кноп­ку Ре­дак­ти­ро­вать сай­ты.

6 Вы­бе­рем пап­ку Эк­зю­пе­ри, соз­дан­ную в п. 3, и на­жмем ОК.

7 Убе­дим­ся в по­яв­лении имени пап­ки в по­ле ие­рар­хи­че­­ской схе­мы сай­та и вы­бе­рем ее. За­тем на­жмем кноп­ку Но­вая пап­ка Менед­же­ра сай­та и за­да­дим имя pict. Важ­но за­помнить: все име­на па­пок и фай­лов в струк­ту­ре сай­та оп­ре­де­ля­ют­ся строч­ны­ми бу­к­ва­ми ла­тин­ско­го ал­фа­ви­та.

8 Рас­кро­ем струк­ту­ру сай­та, на­жав на + сле­ва от имени, и убе­дим­ся в по­яв­лении пап­ки pict.

9 Для по­ме­щения в пап­ку pict учеб­ных фай­лов pict.jpg и plume.png свер­нем ок­но KompoZer и восполь­зу­ем­ся лю­бы­ми доступ­ны­ми для это­го сред­ст­ва­ми. За­тем вер­нем­ся в ок­но про­грам­мы и на­жмем кноп­ку Об­но­вить Менед­же­ра сай­та. Убе­дим­ся в по­яв­лении в схе­ме сай­та фай­лов изо­бра­жений.

10 Ус­та­но­вим те­перь тек­сто­вый кур­сор в кон­це тек­ста на странице и на­жмем кла­ви­шу Enter, оп­ре­де­лив ме­сто для встав­ки. С по­мо­щью прие­ма пе­ре­тас­ки­вания кур­со­ром мы­ши раз­мес­тим файл из схе­мы сай­та pict.jpg (порт­рет на­ше­го ге­роя) в за­дан­ном мес­те. Убе­дим­ся в по­яв­лении изо­бра­жения на странице. Это са­мый про­стой и удоб­ный спо­соб встав­ки кар­тин­ки. Од­на­ко ес­ли восполь­зо­вать­ся пунк­та­ми ме­ню Встав­ка/Изо­бра­жение..., мы по­лу­ча­ем воз­мож­ность ис­поль­зо­вать важ­ные на­строй­ки – до­бав­ление всплы­ваю­щей под­сказ­ки, аль­тер­на­тив­но­го тек­ста, ги­пер­ссыл­ки; из­менение раз­ме­ров, по­ло­жения на странице для вы­бран­ного изо­бра­жения.

11 Вы­зо­вем для изо­бра­жения на странице кон­тек­ст­ное ме­ню и вы­бе­рем пункт Свой­ст­ва изо­бра­жения... В диа­ло­го­вом окне вы­бе­рем вклад­ку Внешний вид и уста­но­вим тек­сто­вый кур­сор в по­ле вво­да Сплош­ная рам­ка:. Вве­дем зна­чение 1 и на­жмем ОК. Убе­дим­ся в по­яв­лении за­дан­но­го эле­мен­та оформ­ления для изо­бра­жения.

12 Мы хо­тим, что­бы по­се­ти­те­ли на­ше­го сай­та при же­лании мог­ли об­ра­тить­ся к спра­воч­ной ин­фор­ма­ции и уз­нать о на­шем ге­рое по­подробнее. Тут как нель­зя бо­лее при­го­дит­ся Ви­ки­пе­дия – вста­вим на нее ги­пер­ссыл­ку. Для это­го опять при­дет­ся «от­ло­жить в сто­ро­ну» (свер­нуть) ок­но про­грам­мы и восполь­зо­вать­ся ин­тернет-обо­зре­ва­те­лем (брау­зе­ром). С по­мо­щью лю­бо­го по­ис­ко­ви­ка по­лу­чим ре­зуль­тат за­про­са на сло­во «Эк­зю­пе­ри» и от­кро­ем со­от­вет­ст­вую­щий ре­сурс Ви­ки­пе­дии.

13 Ско­пи­ру­ем ад­рес ре­сур­са в опе­ра­тив­ную па­мять (бу­фер об­ме­на) и вер­нем­ся в ок­но KompoZer. На сле­дую­щей стро­ке по­сле изо­бра­жения, со­хра­няя раз­ме­щение по цен­тру, на­бе­рем текст Страница Ви­ки­пе­дии. Вы­бе­рем его и вы­зо­вем во встро­ен­ном ме­ню пункт Соз­дать ссыл­ку...

14 В окне диа­ло­га вста­вим ад­рес из па­мя­ти в со­от­вет­ст­вую­щем по­ле. Ус­та­но­вим фла­жок От­кры­тие ссы­лок и по­ло­жение спи­ска вы­бо­ра в но­вом окне. На­жмем ОК и убе­дим­ся в по­яв­лении ги­пер­ссыл­ки.

15 Вы мо­же­те са­мо­стоя­тель­но оп­ре­де­лить и до­ба­вить еще 2 – 4 ссыл­ки на ре­сур­сы по те­ме сай­та. За­тем на но­вой стро­ке вста­вим раз­де­ляю­щую чер­ту с по­мо­щью пунк­тов ме­ню Встав­ка/Раз­де­ли­тель.

16 Со­храним те­ку­щее со­стояние страницы.

17 Про­пустим па­ру строк и пе­рей­дем на тре­тью, рас­по­ло­жив тек­сто­вый кур­сор по ле­во­му краю. Три раза на­жмем кноп­ку Панели фор­ма­ти­ро­вания Уве­ли­чить от­ступ (сдвиг впра­во).

18 По­мес­тим на странице на­звания са­мых из­вест­ных книг Эк­зю­пе­ри. На­бе­рем сле­дую­щее:

*Ноч­ной по­лет (1931)

• Планета лю­дей (1938)
• Ма­лень­кий принц (1943)

Стро­ки с на­звания­ми мож­но по­ме­тить сим­во­лом пи­са­тель­ской дея­тель­но­сти – гу­си­ным пе­ром (plume.png).

19 Сле­дую­щий шаг – фон страницы и уста­нов­ка цве­тов. Вы­полним пунк­ты ме­ню Фор­мат/Цве­та и фон страницы...

20 В диа­ло­го­вом окне уста­но­вим пе­ре­клю­ча­тель в по­ло­жение Ис­поль­зо­вать цве­та:. Об­ра­тим внимание, что мож­но из­менить стан­дарт­ное цве­то­вое оформ­ление шриф­тов по сво­ему усмот­рению, но вы­бе­рем толь­ко кноп­ку Фон:. За­да­дим цвет страницы, ру­ко­во­дству­ясь при этом пра­ви­ла­ми ди­зай­на и здра­вым смыс­лом. Так­же за­ме­тим, что в ка­че­­ст­ве фо­на мож­но ис­поль­зо­вать внешнее изо­бра­жение. На­жмем ОК.

218431.png Не за­бу­дем упо­мя­нуть и се­бя. В кон­це страницы по цен­тру соз­да­дим «слу­жеб­ный ко­лон­ти­тул» в со­от­вет­ст­вии с пра­во­вы­ми нор­ма­ми и пра­ви­ла­ми «нети­ке­та» (см. Ви­ки­пе­дию) при­мер­но та­ко­го ви­да:

Знак © по­лу­чим с по­мо­щью пунк­тов ме­ню Встав­ка/Бук­вы и сим­во­лы..., при по­ло­жении пе­ре­клю­ча­те­ля Об­щие сим­во­лы в со­от­вет­ст­вую­щем окне диа­ло­га. Фа­ми­лию и поч­то­вый ад­рес, конеч­но, на­пи­шем свои.

Баннер (кар­тин­ку-ссыл­ку) про­грам­мы вста­вим с по­мо­щью пунк­тов ме­ню Встав­ка/Ук­ра­шения/Кноп­ка «Соз­да­но в Kompo­Zer». При этом встав­ка про­изой­дет че­рез несколь­ко се­кунд (в за­ви­си­мо­сти от со­единения). Мож­но осна­стить баннер всплы­ваю­щей под­сказ­кой Соз­да­но в KompoZer с по­мо­щью пунк­та встро­ен­но­го ме­ню Свой­ст­ва изо­бра­жения и ссыл­ки...

218453.png В ре­зуль­та­те пер­во­го на­ше­го Со­зи­дания долж­но по­лу­чить­ся при­мер­но то, что по­ка­за­но на рис. 10.

> Вот что у нас по­лу­чи­лось!