LXF167:Шко­ла LXF

Версия 13:42, 9 ноября 2018

Шко­ла 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-систем сайтостроения о необязательности знания кода, владение им не только помогает, но часто значительно улучшает каче­ство результата.

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

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

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

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