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 (его, конечно, можно изменить) и нажмем ОК. Убедимся в появлении характерного обозначения якоря (закладки) на странице.

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

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

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

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

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

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

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

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

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

Созидание четвертое: Публикация сайта и немножко кода

> Рис. 11. Панель инструментов KompoZer.

> Рис. 12. Кнопка Опубликовать откроет окно Публикация страницы.

> Рис. 13. Наша работа по публикации почти завершена...

> Рис. 14. ...и все же лучше будет лишний раз убедиться в корректности введенных параметров.

1 Для публикации страницы на внешнем сервере (host) в Панели инструментов есть кнопка Опубликовать (рис. 11).

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

2 После нажатия на эту кнопку нужно внести необходимые настройки в диалоговом окне. Они должны быть известны после регистрации сайта.

На вкладке Опубликовать (рис. 12) введите:

» имя папки сайта; » заголовок страницы (то, что будет написано в верхней строке окна при открытии страницы в интернет-обозревателе); » имя файла; » если на странице внедрена графика, то включить соответствующий флажок и установить переключатель в нужное положение. На вкладке Параметры (рис. 13) вводятся:

» имя сайта; » http-адрес домашней страницы; » ftp-адрес (URL публикации), формула которого такова: ftp://<логин>:<пароль>@<имя домена> (например, ftp://exuperi:123123@site.ru); » логин и пароль доступа (можно сохранить постоянно, если эта информация – в единоличном пользовании). 3 Затем нажать кнопку диалогового окна Публикация.

4 Можно и желательно провести предварительную настройку публикации с помощью пунктов меню Правка / Параметры сайта публикации..., где видим все те же перечисленные инструменты (рис. 14).

5 Надо добавить, что публикацию сайта или отдельных страниц сайта многие предпочитают выполнять с использованием специальных программ – FTP-клиентов. Этот сервис также встроен в популярные файловые менеджеры. Ну, а проще всего использовать адресную строку Konqueror (или «Проводника» в Windows). Конечно, не забудем, что выполнение публикации страниц и файлов сайта осуществляется при работающем соединении с Интернетом.

6 При всей визуальности (наглядности) работы в KompoZer нельзя забывать, что мы работаем с HTML-кодом. Правда, это другая тема, которая должна предшествовать знакомству с конструктором, но не коснуться ее нельзя. Ведь это очень важный инструмент каче­ства сайта, контроля и исправления ошибок и, кратко говоря, основа всего нашего дела.

Внизу рабочего поля увидим три кнопки: Дизайн, Объединенный, Код. Это режимы нашей работы в конструкторе. В первом мы и трудились до сих пор. Нажмем вторую и третью кнопки – и все увидим сами. Думается, что Объединенный режим наиболее предпочтителен, поскольку дает возможность править код и одновременно видеть картинку.

7 В верхней, визуальной, части рабочего поля установим текстовый курсор в первой строке. В нижней части сразу будет показан соответствующий фрагмент кода. Допустим, нам захотелось поменять цвет заголовка. Сотрем атрибут цвета RGB (0, 0, 102) и вместо этого наберем #770077. Значение нужного цвета легко определить в графиче­ском редакторе, например, KolourPaint.

8 Щелкнем мышью в верхней части и убедимся в смене цвета. Убедимся также, что в кодовой части наш набор преобразовался в RGB(119, 0, 119) – произошел перевод из шестнадцатеричной системы счисления в десятичную (# – признак шестнадцатеричной системы). Правда, изменился размер шрифта. Поправим это, выделив текст заголовка и дважды нажав кнопку Увеличить размер шрифта в Панели инструментов. Это и будет иллюстрацией сочетания использования визуальных инструментов и редак­туры нашего кода.

Вывод: несмотря на все рекламные заклинания разработчиков CMS и online-систем сайтостроения о необязательности знания кода, владение им не только помогает, но часто значительно улучшает каче­ство результата.

Если решишь горделиво, что можешь теперь безупречных

Ты результатов достичь – значит, пустым был мой труд.

Несовершенство рождает развитие нашего мира,

Он потому и живет, полон открытий людских. |