LXF167:Шко­ла LXF

Подписка на печатную версию Весь 2015 год (12 номеров) Первое полугодие (6 номеров) Второе полугодие (6 номеров)

Подписка на электронную версию Весь 2015 год (12 номеров) Первое полугодие (6 номеров) Второе полугодие (6 номеров)

Подшивки старых номеров журнала (печатные версии) Весь 2014 год (12 номеров) Первое полугодие (6 номеров) Второе полугодие (6 номеров)

Шко­ла LXF

KompoZer – шко­ле

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

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

Наш эксперт Ми­ха­ил Вы­гра­нен­ко – идео­лог сво­бо­ды в мыс­лях и по­ряд­ка в де­лах на ни­ве про­све­ще­ния, ка­ким бы па­ра­док­саль­ным ни ка­за­лось это со­че­та­ние. В ми­ру – учи­тель-методист.

> Рис. 1. По­мес­тим на на­шу стра­ни­цу текст.

Со­зи­дание вто­рое: Таб­лич­ное раз­ме­щение информации

Прой­ден был пер­вый ру­беж по пу­ти, что при­во­дит к по­зна­нью.

Важ­ность его ве­ли­ка, спо­рит пускай де­ма­гог.

Мо­жет те­бе по­ка­зать­ся непре­одо­ли­мой до­ро­га. Мыс­ли та­кие от­брось: ждет она ка­ж­дый твой шаг. Итак, мы ре­ши­ли соз­дать сайт, по­свя­щен­ный Ан­туа­ну де Сент-Эк­зю­пе­ри, и уже нема­ло в этом преуспе­ли (см. LXF164 – Со­зи­дание пер­вое). По пу­ти мы об­росли неко­то­рым ба­га­жом: у нас есть пап­ка Эк­зю­пе­ри и учеб­ные фай­лы во вло­жен­ной пап­ке pict – это кир­пи­чи­ки для по­строения на­ше­го сай­та. До­ба­вим в пап­ку pict фай­лы из од­но­имен­ной пап­ки на LXFDVD. Не за­бу­дем, что для Со­зи­даний тре­бу­ет­ся ис­прав­ное ин­тернет-со­единение.

1 За­пустим про­грам­му с по­мо­щью ме­ню сис­те­мы или яр­лы­ка на Ра­бо­чем сто­ле. В Менед­же­ре сай­та раз­вернем пап­ку Эк­зю­пе­ри.

2 Но­вую страницу со­храним (соз­да­дим) с именем prince в пап­ке Эк­зю­пе­ри. В Менед­же­ре сай­та на­жмем кноп­ку Об­но­вить и убе­дим­ся в по­яв­лении но­вой страницы в струк­ту­ре сай­та.

3 Те­перь восполь­зу­ем­ся ин­тернет-обо­зре­ва­те­лем и по­ис­ко­вой сис­те­мой для по­лу­чения тек­ста сказ­ки «Ма­лень­кий принц» (на­при­мер, в биб­лио­те­ке М. Мош­ко­ва, http://lib.ru/EKZUPERY/mprinc.txt). Для уда­ления фор­ма­ти­ро­вания ис­точника раз­мес­тим текст пред­ва­ри­тель­но в до­ку­мен­те про­сто­го тек­сто­во­го ре­дак­то­ра (KWrite), а за­тем пе­ренесем его на страницу сай­та. Об­ра­ща­ем внимание, что встав­ка из опе­ра­тив­ной па­мя­ти (бу­фе­ра об­ме­на) че­рез пункт кон­тек­ст­но­го ме­ню не ра­бо­та­ет; поль­зу­ем­ся со­че­танием кла­виш Ctrl + C и Ctrl + V или ме­ню ок­на.

> Рис. 1. Поместим на нашу страницу текст

> Рис. 2. За­да­ние па­ра­мет­ров таб­ли­цы.

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

Рис. 3. У нас получилась страница с иллюстрацией.

> Рис. 5. Посетители будут знать, кто потрудился над созданием сайта.

> Рис. 4. Вторую страницу делать уже легче!

При этом для фор­ма­ти­ро­вания по­свя­щения ис­поль­зо­ва­лись кноп­ки Панели ин­ст­ру­мен­тов Уве­ли­чить от­ступ и Вы­ров­нять по ши­рине, Вы­ров­нять по цен­тру.

5 Раз­мес­тим на сле­дую­щей стро­ке от за­го­лов­ка изо­бра­жение prince1.jpg из пап­ки pict.

6 Пе­рей­дем соб­ст­вен­но к тек­сту сказ­ки и уста­но­вим тек­сто­вый кур­сор в на­ча­ле аб­за­ца. На­жмем кла­ви­шу Enter для осво­бо­ж­дения стро­ки и кноп­ку Таб­ли­ца в Панели ин­ст­ру­мен­тов.

7 Пе­рей­дем в окне Встав­ка таб­ли­цы на вклад­ку Точ­ная и за­да­дим па­ра­мет­ры со­глас­но рис. 2.

8 Пе­рей­дем в пра­вую ячей­ку таб­ли­цы и вы­бе­рем в кон­тек­ст­ном ме­ню для нее пункт Свой­ст­ва ячей­ки таб­ли­цы...

9 В окне диа­ло­га Свой­ст­ва таб­ли­цы на вклад­ке Ячей­ки уста­но­вим: раз­мер по ши­рине – 30 % от раз­ме­ра таб­ли­цы; вы­равнивание со­дер­жи­мо­го – го­ри­зон­таль­ное по цен­тру. На вклад­ке Таб­ли­ца уста­но­вим вы­равнивание таб­ли­цы по цен­тру. Ос­та­вив осталь­ные па­ра­мет­ры неиз­мен­ны­ми, на­жмем ОК.

10 Раз­мес­тим в пра­вой ячей­ке таб­ли­цы изо­бра­жение prince2.jpg.

11 Пе­рей­дем в ле­вую ячей­ку таб­ли­цы и уста­но­вим та­ким же об­ра­зом раз­мер по ши­рине – 70 % от раз­ме­ра таб­ли­цы. Раз­мес­тим пер­вые три аб­за­ца тек­ста в этой ячей­ке. У нас долж­но по­лу­чить­ся при­мер­но то, что изо­бра­же­но на рис. 3.

Сле­ду­ет иметь в ви­ду, что этот внешний вид страницы не сов­па­да­ет с тем, что по­ка­жет ин­тернет-обо­зре­ва­тель, из-за на­ли­чия сле­ва об­лас­ти Менед­же­ра сай­та (ши­ри­ну ко­то­рой мож­но, кста­ти, умень­шить, «це­п­ляя» мы­шью вер­тикаль­ную границу). Ис­тин­ное «по­ло­жение ве­щей» луч­ше про­смат­ри­вать неза­ви­си­мо от про­грам­мы, поль­зу­ясь кноп­кой Про­смотр в Панели ин­ст­ру­мен­тов.

12 Вер­нем обыч­ный ре­жим для страницы. Раз­мес­тим са­мо­стоя­тель­но сле­дую­щие 2-3 аб­за­ца тек­ста и изо­бра­жение prince3.jpg так­же в таб­ли­це, но по­ме­ня­ем их мес­та­ми по от­но­шению к пер­вой таб­ли­це. Не за­бы­ва­ем вы­пол­нять те­ку­щее со­хранение и про­смотр страницы. При­мер­ный вид ре­зуль­та­та по­ка­зан на рис. 4.

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

14 Вы­зо­вем в ме­ню ок­на про­грам­мы пунк­ты Фор­мат/За­го­ло­вок и свой­ст­ва страницы... В диа­ло­го­вом окне на­бе­рем за­го­ло­вок «Ма­лень­кий принц». Он бу­дет по­ка­зы­вать­ся ин­тернет-обо­зре­ва­те­лем в за­го­лов­ке ок­на при про­смот­ре. За­полним ав­тор­ское по­ле сво­ей фа­ми­ли­ей. За­тем на­жмем ОК.

Со­зи­дание третье: Ги­пер­ссыл­ки и на­ви­га­ция сай­та

Слу­шай на­ставника речь, тер­пе­ли­во тво­ри со­зи­да­нья, Нрав свой по­ка усми­ри твер­до, но помни всегда:

«Жал­ким слы­вет ученик, – за­ве­щал нам муд­рец Ле­о­нар­до, –

Ес­ли учи­те­ля он так и не смог пре­взой­ти».

> Рис. 6. Ссылки у нас помечены гусиным пером.

> > Рис. 7. Диалоговое окно, где устанав­ливаются свой­ства ссылки.

1 За­пустим про­грам­му с по­мо­щью ме­ню сис­те­мы или яр­лы­ка на Ра­бо­чем сто­ле. В Менед­же­ре сай­та раз­вернем пап­ку Эк­зю­пе­ри и от­кро­ем страницу index.html.

2 В на­ча­ле ка­ж­дой стро­ки пе­реч­ня про­из­ве­дений раз­мес­тим из пап­ки pict изо­бра­жение plume.png и от­де­лим его от тек­ста про­бе­лом (рис. 6).

Рис. 8. Текст подсказки вводится здесь.

> Рис. 9. Ссылки на главы — это удобно.

> Рис. 10. Задаем якорь и прочее.

3 Вы­бе­рем текст «Ма­лень­кий принц» и на­жмем кноп­ку Ссыл­ка в Панели ин­ст­ру­мен­тов. В окне диа­ло­га (рис. 7) уста­но­вим путь к фай­лу prince.html и на­жмем ОК. Убе­дим­ся в том, что текст при­нял вид ги­пер­ссыл­ки.

4 Вы­бе­рем те­перь кар­тин­ку сле­ва от тек­ста и опять на­жмем кноп­ку Ссыл­ка в Панели ин­ст­ру­мен­тов. В окне диа­ло­га на вклад­ке Ссыл­ка так­же установим путь к файлу prince.html. При этом должен быть установлен флажок Относительный URL.

5 Перейдем на вкладку Адрес (рис. 8) и наберем в поле Всплывающая подсказка: текст «Маленький принц». Переключатель установим в положение Не использовать альтернативный текст и нажмем ОК.

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

6 Сохраним текущее состояние страницы и проверим работоспособность ссылок в интернет-обозревателе с помощью кнопки Просмотр в Панели инструментов.

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

8 Откроем страницу сайта prince.html. Выберем обозначение первой главы I и нажмем кнопку Якорь в Панели инструментов.

9 В окне диалога оставим имя I (его, конечно, можно изменить) и нажмем ОК. Убедимся в появлении характерного обозначения якоря (закладки) на странице.

� Проделаем те же действия для главы II (и по желанию – далее).

� Перейдем в начало страницы и под картинкой наберем ряд чисел римскими цифрами (формат текста – на выбор). У нас получится нечто подобное рис. 9.

� Выберем первое число I и нажмем кнопку Ссылка в Панели инструментов.

� В окне диалога (рис. 10) зададим соответствующий якорь и другие настройки как на рисунке. Нажмем ОК и убедимся в появлении текстовой гиперссылки. Зададим еще 1-2 ссылки на якоря (закладки).

� Нажав кнопку Просмотр в Панели инструментов, убедимся в работоспособности локальных ссылок на странице.

� Выполним текущее сохранение страниц учебного сайта.

� Теперь освободим первую строку на странице и по центру разместим изображение home.png из папки pict.

� Определим это изображение как гиперссылку на страницу сайта index.html со всплывающей подсказкой Начальная страница.

� Скопируем это изображение-ссылку на однотипные страницы. Таким образом организовывается взаимосвязь страниц сайта.