http://wiki.linuxformat.ru/wiki/index.php?action=history&feed=atom&title=LXF167%3A%D0%A8%D0%BA%D0%BE%C2%AD%D0%BB%D0%B0_LXF 2026-05-13T18:16:47Z История изменений этой страницы в вики MediaWiki 1.19.20+dfsg-0+deb7u3 http://wiki.linuxformat.ru/wiki/index.php?title=LXF167:%D0%A8%D0%BA%D0%BE%C2%AD%D0%BB%D0%B0_LXF&diff=19360&oldid=prev 2018-11-09T10:44:26Z

<p>‎<span dir="auto"><span class="autocomment">Созидание четвертое: Публикация сайта и немножко кода</span></span></p> <table class='diff diff-contentalign-left'> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr valign='top'> <td colspan='2' style="background-color: white; color:black;">← Предыдущая</td> <td colspan='2' style="background-color: white; color:black;">Версия 10:44, 9 ноября 2018</td> </tr><tr><td colspan="2" class="diff-lineno">Строка 151:</td> <td colspan="2" class="diff-lineno">Строка 151:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>Вывод: несмотря на все рекламные заклинания разработчиков CMS и online-систем сайтостроения о необязательности знания кода, владение им не только помогает, но часто значительно улучшает каче­ство результата.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>Вывод: несмотря на все рекламные заклинания разработчиков CMS и online-систем сайтостроения о необязательности знания кода, владение им не только помогает, но часто значительно улучшает каче­ство результата.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>Если решишь горделиво, что можешь теперь безупречных</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">''</ins>Если решишь горделиво, что можешь теперь безупречных<ins class="diffchange diffchange-inline">''</ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>Ты результатов достичь – значит, пустым был мой труд.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">''</ins>Ты результатов достичь – значит, пустым был мой труд.<ins class="diffchange diffchange-inline">''</ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>Несовершенство рождает развитие нашего мира,</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">''</ins>Несовершенство рождает развитие нашего мира,<ins class="diffchange diffchange-inline">''</ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>Он потому и живет, полон открытий людских. |</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">''</ins>Он потому и живет, полон открытий людских<ins class="diffchange diffchange-inline">''</ins>. |</div></td></tr> </table>

Olkol http://wiki.linuxformat.ru/wiki/index.php?title=LXF167:%D0%A8%D0%BA%D0%BE%C2%AD%D0%BB%D0%B0_LXF&diff=19359&oldid=prev 2018-11-09T10:42:28Z

<p>‎<span dir="auto"><span class="autocomment">Со­зи­дание третье: Ги­пер­ссыл­ки и на­ви­га­ция сай­та</span></span></p> <table class='diff diff-contentalign-left'> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr valign='top'> <td colspan='2' style="background-color: white; color:black;">← Предыдущая</td> <td colspan='2' style="background-color: white; color:black;">Версия 10:42, 9 ноября 2018</td> </tr><tr><td colspan="2" class="diff-lineno">Строка 92:</td> <td colspan="2" class="diff-lineno">Строка 92:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>9 В окне диалога оставим имя I (его, конечно, можно изменить) и нажмем ОК. Убедимся в появлении характерного обозначения якоря (закладки) на странице.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>9 В окне диалога оставим имя I (его, конечно, можно изменить) и нажмем ОК. Убедимся в появлении характерного обозначения якоря (закладки) на странице.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">� </del>Проделаем те же действия для главы II (и по желанию – далее).</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">10 </ins>Проделаем те же действия для главы II (и по желанию – далее).</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">� </del>Перейдем в начало страницы и под картинкой наберем ряд чисел римскими цифрами (формат текста – на выбор). У нас получится нечто подобное рис. 9.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">11 </ins>Перейдем в начало страницы и под картинкой наберем ряд чисел римскими цифрами (формат текста – на выбор). У нас получится нечто подобное рис. 9.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">� </del>Выберем первое число I и нажмем кнопку Ссылка в Панели инструментов.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">12 </ins>Выберем первое число I и нажмем кнопку Ссылка в Панели инструментов.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">� </del>В окне диалога (рис. 10) зададим соответствующий якорь и другие настройки как на рисунке. Нажмем ОК и убедимся в появлении текстовой гиперссылки. Зададим еще 1-2 ссылки на якоря (закладки).</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">13 </ins>В окне диалога (рис. 10) зададим соответствующий якорь и другие настройки как на рисунке. Нажмем ОК и убедимся в появлении текстовой гиперссылки. Зададим еще 1-2 ссылки на якоря (закладки).</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">� </del>Нажав кнопку Просмотр в Панели инструментов, убедимся в работоспособности локальных ссылок на странице.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">14 </ins>Нажав кнопку Просмотр в Панели инструментов, убедимся в работоспособности локальных ссылок на странице.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">� </del>Выполним текущее сохранение страниц учебного сайта.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">15 </ins>Выполним текущее сохранение страниц учебного сайта.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">� </del>Теперь освободим первую строку на странице и по центру разместим изображение home.png из папки pict.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">16 </ins>Теперь освободим первую строку на странице и по центру разместим изображение home.png из папки pict.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">� </del>Определим это изображение как гиперссылку на страницу сайта index.html со всплывающей подсказкой Начальная страница.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">17 </ins>Определим это изображение как гиперссылку на страницу сайта index.html со всплывающей подсказкой Начальная страница.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">� </del>Скопируем это изображение-ссылку на однотипные страницы. Таким образом организовывается взаимосвязь страниц сайта.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">18 </ins>Скопируем это изображение-ссылку на однотипные страницы. Таким образом организовывается взаимосвязь страниц сайта.</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">===Созидание четвертое: Публикация сайта и немножко кода===</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">[[Файл:Puc11_opt.jpeg |left |200px |thumb|&gt; Рис. 11. Панель инструментов KompoZer.]] </ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">[[Файл:Puc12_opt.jpeg|right|300px |thumb|&gt; Рис. 12. Кнопка Опубликовать откроет окно Публикация страницы.]] </ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">[[Файл:Puc13_opt.jpeg|left |300px |thumb|&gt; Рис. 13. Наша работа по публикации почти завершена...]] </ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">[[Файл:Puc14_opt.jpeg |right |300px |thumb|&gt; Рис. 14. ...и все же лучше будет лишний раз убедиться в корректности введенных параметров.]] </ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">1 Для публикации страницы на внешнем сервере (host) в Панели инструментов есть кнопка Опубликовать (рис. 11).</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">Следует отметить, что к моменту публикации сайт уже должен быть зарегистрирован на внешнем сервере.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">2 После нажатия на эту кнопку нужно внести необходимые настройки в диалоговом окне. Они должны быть известны после регистрации сайта.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">На вкладке Опубликовать (рис. 12) введите:</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">» имя папки сайта;</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">» заголовок страницы (то, что будет написано в верхней строке окна при открытии страницы в интернет-обозревателе);</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">» имя файла;</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">» если на странице внедрена графика, то включить соответствующий флажок и установить переключатель в нужное положение.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">На вкладке Параметры (рис. 13) вводятся:</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">» имя сайта;</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">» http-адрес домашней страницы;</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">» ftp-адрес (URL публикации), формула которого такова: ftp://&lt;логин&gt;:&lt;пароль&gt;@&lt;имя домена&gt; (например, ftp://exuperi:123123@site.ru);</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">» логин и пароль доступа (можно сохранить постоянно, если эта информация – в единоличном пользовании).</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">3 Затем нажать кнопку диалогового окна Публикация.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">4 Можно и желательно провести предварительную настройку публикации с помощью пунктов меню Правка / Параметры сайта публикации..., где видим все те же перечисленные инструменты (рис. 14).</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">5 Надо добавить, что публикацию сайта или отдельных страниц сайта многие предпочитают выполнять с использованием специальных программ – FTP-клиентов. Этот сервис также встроен в популярные файловые менеджеры. Ну, а проще всего использовать адресную строку Konqueror (или «Проводника» в Windows). Конечно, не забудем, что выполнение публикации страниц и файлов сайта осуществляется при работающем соединении с Интернетом.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">6 При всей визуальности (наглядности) работы в KompoZer нельзя забывать, что мы работаем с HTML-кодом. Правда, это другая тема, которая должна предшествовать знакомству с конструктором, но не коснуться ее нельзя. Ведь это очень важный инструмент каче­ства сайта, контроля и исправления ошибок и, кратко говоря, основа всего нашего дела.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">Внизу рабочего поля увидим три кнопки: Дизайн, Объединенный, Код. Это режимы нашей работы в конструкторе. В первом мы и трудились до сих пор. Нажмем вторую и третью кнопки – и все увидим сами. Думается, что Объединенный режим наиболее предпочтителен, поскольку дает возможность править код и одновременно видеть картинку.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">7 В верхней, визуальной, части рабочего поля установим текстовый курсор в первой строке. В нижней части сразу будет показан соответствующий фрагмент кода. Допустим, нам захотелось поменять цвет заголовка. Сотрем атрибут цвета RGB (0, 0, 102) и вместо этого наберем #770077. Значение нужного цвета легко определить в графиче­ском редакторе, например, KolourPaint.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">8 Щелкнем мышью в верхней части и убедимся в смене цвета. Убедимся также, что в кодовой части наш набор преобразовался в RGB(119, 0, 119) – произошел перевод из шестнадцатеричной системы счисления в десятичную (# – признак шестнадцатеричной системы). Правда, изменился размер шрифта. Поправим это, выделив текст заголовка и дважды нажав кнопку Увеличить размер шрифта в Панели инструментов. Это и будет иллюстрацией сочетания использования визуальных инструментов и редак­туры нашего кода.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">Вывод: несмотря на все рекламные заклинания разработчиков CMS и online-систем сайтостроения о необязательности знания кода, владение им не только помогает, но часто значительно улучшает каче­ство результата.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">Если решишь горделиво, что можешь теперь безупречных</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">Ты результатов достичь – значит, пустым был мой труд.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">Несовершенство рождает развитие нашего мира,</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">Он потому и живет, полон открытий людских. |</ins></div></td></tr> </table>

Olkol http://wiki.linuxformat.ru/wiki/index.php?title=LXF167:%D0%A8%D0%BA%D0%BE%C2%AD%D0%BB%D0%B0_LXF&diff=19354&oldid=prev 2018-11-09T10:29:30Z

<p>‎<span dir="auto"><span class="autocomment">Со­зи­дание третье: Ги­пер­ссыл­ки и на­ви­га­ция сай­та</span></span></p> <table class='diff diff-contentalign-left'> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr valign='top'> <td colspan='2' style="background-color: white; color:black;">← Предыдущая</td> <td colspan='2' style="background-color: white; color:black;">Версия 10:29, 9 ноября 2018</td> </tr><tr><td colspan="2" class="diff-lineno">Строка 72:</td> <td colspan="2" class="diff-lineno">Строка 72:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>2 В на­ча­ле ка­ж­дой стро­ки пе­реч­ня про­из­ве­дений раз­мес­тим из пап­ки pict изо­бра­жение plume.png и от­де­лим его от тек­ста про­бе­лом (рис. 6).</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>2 В на­ча­ле ка­ж­дой стро­ки пе­реч­ня про­из­ве­дений раз­мес­тим из пап­ки pict изо­бра­жение plume.png и от­де­лим его от тек­ста про­бе­лом (рис. 6).</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">[[Файл: Puc8_opt.jpeg|left |300px |thumb|Рис. 8. Текст подсказки вводится здесь.]] </ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">[[Файл:Puc9_opt.jpeg |right|300px |thumb|&gt; Рис. 9. Ссылки на главы — это удобно.]] </ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">[[Файл:Puc10_opt.jpeg |left |300px |thumb|&gt; Рис. 10. Задаем якорь и прочее.]] </ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>3 Вы­бе­рем текст «Ма­лень­кий принц» и на­жмем кноп­ку Ссыл­ка в Панели ин­ст­ру­мен­тов. В окне диа­ло­га (рис. 7) уста­но­вим путь к фай­лу prince.html и на­жмем ОК. Убе­дим­ся в том, что текст при­нял вид ги­пер­ссыл­ки.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>3 Вы­бе­рем текст «Ма­лень­кий принц» и на­жмем кноп­ку Ссыл­ка в Панели ин­ст­ру­мен­тов. В окне диа­ло­га (рис. 7) уста­но­вим путь к фай­лу prince.html и на­жмем ОК. Убе­дим­ся в том, что текст при­нял вид ги­пер­ссыл­ки.</div></td></tr> </table>

Olkol http://wiki.linuxformat.ru/wiki/index.php?title=LXF167:%D0%A8%D0%BA%D0%BE%C2%AD%D0%BB%D0%B0_LXF&diff=19350&oldid=prev 2018-11-09T10:09:54Z

<p>‎<span dir="auto"><span class="autocomment">Со­зи­дание вто­рое: Таб­лич­ное раз­ме­щение информации</span></span></p> <table class='diff diff-contentalign-left'> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr valign='top'> <td colspan='2' style="background-color: white; color:black;">← Предыдущая</td> <td colspan='2' style="background-color: white; color:black;">Версия 10:09, 9 ноября 2018</td> </tr><tr><td colspan="2" class="diff-lineno">Строка 32:</td> <td colspan="2" class="diff-lineno">Строка 32:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Файл: Puc3_opt.jpeg|left |400px |thumb| Рис. 3. У нас получилась страница с иллюстрацией.]] &#160;</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Файл: Puc3_opt.jpeg|left |400px |thumb| Рис. 3. У нас получилась страница с иллюстрацией.]] &#160;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Файл:Puc5_opt.jpeg |right|100px |thumb|&gt; Рис. 5. Посетители будут знать, кто потрудился над созданием сайта.]] &#160;</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Файл:Puc5_opt.jpeg |right|100px |thumb|&gt; Рис. 5. Посетители будут знать, кто потрудился над созданием сайта.]] &#160;</div></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>[[Файл: Puc4_opt.jpeg|left |<del class="diffchange diffchange-inline">100px </del>|thumb|&gt; Рис. 4. Вторую страницу делать уже легче! ]] &#160;</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>[[Файл: Puc4_opt.jpeg|left |<ins class="diffchange diffchange-inline">400px </ins>|thumb|&gt; Рис. 4. Вторую страницу делать уже легче! ]] &#160;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>При этом для фор­ма­ти­ро­вания по­свя­щения ис­поль­зо­ва­лись кноп­ки Панели ин­ст­ру­мен­тов Уве­ли­чить от­ступ и Вы­ров­нять по ши­рине, Вы­ров­нять по цен­тру.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>При этом для фор­ма­ти­ро­вания по­свя­щения ис­поль­зо­ва­лись кноп­ки Панели ин­ст­ру­мен­тов Уве­ли­чить от­ступ и Вы­ров­нять по ши­рине, Вы­ров­нять по цен­тру.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td colspan="2" class="diff-lineno">Строка 51:</td> <td colspan="2" class="diff-lineno">Строка 51:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>Сле­ду­ет иметь в ви­ду, что этот внешний вид страницы не сов­па­да­ет с тем, что по­ка­жет ин­тернет-обо­зре­ва­тель, из-за на­ли­чия сле­ва об­лас­ти Менед­же­ра сай­та (ши­ри­ну ко­то­рой мож­но, кста­ти, умень­шить, «це­п­ляя» мы­шью вер­тикаль­ную границу). Ис­тин­ное «по­ло­жение ве­щей» луч­ше про­смат­ри­вать неза­ви­си­мо от про­грам­мы, поль­зу­ясь кноп­кой Про­смотр в Панели ин­ст­ру­мен­тов.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>Сле­ду­ет иметь в ви­ду, что этот внешний вид страницы не сов­па­да­ет с тем, что по­ка­жет ин­тернет-обо­зре­ва­тель, из-за на­ли­чия сле­ва об­лас­ти Менед­же­ра сай­та (ши­ри­ну ко­то­рой мож­но, кста­ти, умень­шить, «це­п­ляя» мы­шью вер­тикаль­ную границу). Ис­тин­ное «по­ло­жение ве­щей» луч­ше про­смат­ри­вать неза­ви­си­мо от про­грам­мы, поль­зу­ясь кноп­кой Про­смотр в Панели ин­ст­ру­мен­тов.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">� </del>Вер­нем обыч­ный ре­жим для страницы. Раз­мес­тим са­мо­стоя­тель­но сле­дую­щие 2-3 аб­за­ца тек­ста и изо­бра­жение prince3.jpg так­же в таб­ли­це, но по­ме­ня­ем их мес­та­ми по от­но­шению к пер­вой таб­ли­це. Не за­бы­ва­ем вы­пол­нять те­ку­щее со­хранение и про­смотр страницы. При­мер­ный вид ре­зуль­та­та по­ка­зан на рис. 4.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">12 </ins>Вер­нем обыч­ный ре­жим для страницы. Раз­мес­тим са­мо­стоя­тель­но сле­дую­щие 2-3 аб­за­ца тек­ста и изо­бра­жение prince3.jpg так­же в таб­ли­це, но по­ме­ня­ем их мес­та­ми по от­но­шению к пер­вой таб­ли­це. Не за­бы­ва­ем вы­пол­нять те­ку­щее со­хранение и про­смотр страницы. При­мер­ный вид ре­зуль­та­та по­ка­зан на рис. 4.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">� </del>Ду­ма­ет­ся, уже по­нят­но, что для же­ст­ко­го за­кре­п­ления ин­фор­ма­ци­он­ных объ­ек­тов на странице сай­та пред­поч­ти­тельней ис­поль­зо­вать их раз­ме­щение имен­но в таб­ли­цах. Пе­ре­мес­тим­ся к нижней границе страницы и до­ба­вим ав­тор­скую со­став­ляю­щую (рис. 5), ско­пи­ро­вав ее с на­чаль­ной страницы сай­та, см. Со­зи­дание пер­вое.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">13 </ins>Ду­ма­ет­ся, уже по­нят­но, что для же­ст­ко­го за­кре­п­ления ин­фор­ма­ци­он­ных объ­ек­тов на странице сай­та пред­поч­ти­тельней ис­поль­зо­вать их раз­ме­щение имен­но в таб­ли­цах. Пе­ре­мес­тим­ся к нижней границе страницы и до­ба­вим ав­тор­скую со­став­ляю­щую (рис. 5), ско­пи­ро­вав ее с на­чаль­ной страницы сай­та, см. Со­зи­дание пер­вое.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">� </del>Вы­зо­вем в ме­ню ок­на про­грам­мы пунк­ты Фор­мат/За­го­ло­вок и свой­ст­ва страницы... В диа­ло­го­вом окне на­бе­рем за­го­ло­вок «Ма­лень­кий принц». Он бу­дет по­ка­зы­вать­ся ин­тернет-обо­зре­ва­те­лем в за­го­лов­ке ок­на при про­смот­ре. За­полним ав­тор­ское по­ле сво­ей фа­ми­ли­ей. За­тем на­жмем ОК.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">14 </ins>Вы­зо­вем в ме­ню ок­на про­грам­мы пунк­ты Фор­мат/За­го­ло­вок и свой­ст­ва страницы... В диа­ло­го­вом окне на­бе­рем за­го­ло­вок «Ма­лень­кий принц». Он бу­дет по­ка­зы­вать­ся ин­тернет-обо­зре­ва­те­лем в за­го­лов­ке ок­на при про­смот­ре. За­полним ав­тор­ское по­ле сво­ей фа­ми­ли­ей. За­тем на­жмем ОК<ins class="diffchange diffchange-inline">.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">===Со­зи­дание третье: Ги­пер­ссыл­ки и на­ви­га­ция сай­та===</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">''Слу­шай на­ставника речь, тер­пе­ли­во тво­ри со­зи­да­нья,</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">''</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">''Нрав свой по­ка усми­ри твер­до, но помни всегда:''</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">''«Жал­ким слы­вет ученик, – за­ве­щал нам муд­рец Ле­о­нар­до, –''</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">''Ес­ли учи­те­ля он так и не смог пре­взой­ти».''</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">[[Файл:Puc6_opt.jpeg |left |200px |thumb|&gt; Рис. 6. Ссылки у нас помечены гусиным пером.]] </ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">[[Файл:Puc7_opt.jpeg |right|300px |thumb|&gt; &gt; Рис. 7. Диалоговое окно, где устанав­ливаются свой­ства ссылки.]] </ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">1 За­пустим про­грам­му с по­мо­щью ме­ню сис­те­мы или яр­лы­ка на Ра­бо­чем сто­ле. В Менед­же­ре сай­та раз­вернем пап­ку Эк­зю­пе­ри и от­кро­ем страницу index.html.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">2 В на­ча­ле ка­ж­дой стро­ки пе­реч­ня про­из­ве­дений раз­мес­тим из пап­ки pict изо­бра­жение plume.png и от­де­лим его от тек­ста про­бе­лом (рис. 6).</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">3 Вы­бе­рем текст «Ма­лень­кий принц» и на­жмем кноп­ку Ссыл­ка в Панели ин­ст­ру­мен­тов. В окне диа­ло­га (рис. 7) уста­но­вим путь к фай­лу prince.html и на­жмем ОК. Убе­дим­ся в том, что текст при­нял вид ги­пер­ссыл­ки.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">4 Вы­бе­рем те­перь кар­тин­ку сле­ва от тек­ста и опять на­жмем кноп­ку Ссыл­ка в Панели ин­ст­ру­мен­тов. В окне диа­ло­га на вклад­ке Ссыл­ка так­же установим путь к файлу prince.html. При этом должен быть установлен флажок Относительный URL.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">5 Перейдем на вкладку Адрес (рис. 8) и наберем в поле Всплывающая подсказка: текст «Маленький принц». Переключатель установим в положение Не использовать альтернативный текст и нажмем ОК.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">Следует отметить, что это обычная практика – дублировать текстовую гиперссылку графиче­ской, хотя на первый взгляд такое и кажется избыточным. Правило тут одно: все в интересах будущего посетителя и ему в угоду.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">6 Сохраним текущее состояние страницы и проверим работоспособность ссылок в интернет-обозревателе с помощью кнопки Просмотр в Панели инструментов.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">7 Аналогично установим ссылки на произведения Экзюпери, размещенные вами на отдельной странице в первом Созидании.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">8 Откроем страницу сайта prince.html. Выберем обозначение первой главы I и нажмем кнопку Якорь в Панели инструментов.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">9 В окне диалога оставим имя I (его, конечно, можно изменить) и нажмем ОК. Убедимся в появлении характерного обозначения якоря (закладки) на странице.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">� Проделаем те же действия для главы II (и по желанию – далее).</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">� Перейдем в начало страницы и под картинкой наберем ряд чисел римскими цифрами (формат текста – на выбор). У нас получится нечто подобное рис. 9.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">� Выберем первое число I и нажмем кнопку Ссылка в Панели инструментов.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">� В окне диалога (рис. 10) зададим соответствующий якорь и другие настройки как на рисунке. Нажмем ОК и убедимся в появлении текстовой гиперссылки. Зададим еще 1-2 ссылки на якоря (закладки).</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">� Нажав кнопку Просмотр в Панели инструментов, убедимся в работоспособности локальных ссылок на странице.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">� Выполним текущее сохранение страниц учебного сайта.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">� Теперь освободим первую строку на странице и по центру разместим изображение home.png из папки pict.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">� Определим это изображение как гиперссылку на страницу сайта index.html со всплывающей подсказкой Начальная страница.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>&#160;</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">� Скопируем это изображение-ссылку на однотипные страницы. Таким образом организовывается взаимосвязь страниц сайта</ins>.</div></td></tr> </table>

Olkol http://wiki.linuxformat.ru/wiki/index.php?title=LXF167:%D0%A8%D0%BA%D0%BE%C2%AD%D0%BB%D0%B0_LXF&diff=19347&oldid=prev 2018-11-09T10:00:09Z

<p>‎<span dir="auto"><span class="autocomment">Со­зи­дание вто­рое: Таб­лич­ное раз­ме­щение информации</span></span></p> <table class='diff diff-contentalign-left'> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr valign='top'> <td colspan='2' style="background-color: white; color:black;">← Предыдущая</td> <td colspan='2' style="background-color: white; color:black;">Версия 10:00, 9 ноября 2018</td> </tr><tr><td colspan="2" class="diff-lineno">Строка 30:</td> <td colspan="2" class="diff-lineno">Строка 30:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Файл:Puc2_opt.jpeg |right|300px |thumb|&gt; Рис. 2. За­да­ние па­ра­мет­ров таб­ли­цы.]]&#160; &#160;</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Файл:Puc2_opt.jpeg |right|300px |thumb|&gt; Рис. 2. За­да­ние па­ра­мет­ров таб­ли­цы.]]&#160; &#160;</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>4 Вы­полним фор­ма­ти­ро­вание тек­ста по сво­ему усмот­рению, не за­быв ука­зать ис­точник. Ре­зуль­тат, который получится в верх­ней час­ти страницы, мо­жет вы­гля­деть при­близитель­но так, как показано на рис. 1.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>4 Вы­полним фор­ма­ти­ро­вание тек­ста по сво­ему усмот­рению, не за­быв ука­зать ис­точник. Ре­зуль­тат, который получится в верх­ней час­ти страницы, мо­жет вы­гля­деть при­близитель­но так, как показано на рис. 1.</div></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>&#160;</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">[[Файл: Puc3_opt.jpeg|left |400px |thumb| Рис. 3. У нас получилась страница с иллюстрацией.]] </ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">[[Файл:Puc5_opt.jpeg |right|100px |thumb|&gt; Рис. 5. Посетители будут знать, кто потрудился над созданием сайта.]] </ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">[[Файл: Puc4_opt.jpeg|left |100px |thumb|&gt; Рис. 4. Вторую страницу делать уже легче! ]] </ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>При этом для фор­ма­ти­ро­вания по­свя­щения ис­поль­зо­ва­лись кноп­ки Панели ин­ст­ру­мен­тов Уве­ли­чить от­ступ и Вы­ров­нять по ши­рине, Вы­ров­нять по цен­тру.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>При этом для фор­ма­ти­ро­вания по­свя­щения ис­поль­зо­ва­лись кноп­ки Панели ин­ст­ру­мен­тов Уве­ли­чить от­ступ и Вы­ров­нять по ши­рине, Вы­ров­нять по цен­тру.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> </table>

Olkol http://wiki.linuxformat.ru/wiki/index.php?title=LXF167:%D0%A8%D0%BA%D0%BE%C2%AD%D0%BB%D0%B0_LXF&diff=19343&oldid=prev 2018-11-09T09:50:30Z

<p>‎<span dir="auto"><span class="autocomment">Со­зи­дание вто­рое: Таб­лич­ное раз­ме­щение информации</span></span></p> <table class='diff diff-contentalign-left'> <col class='diff-marker' /> <col class='diff-content' /> <col class='diff-marker' /> <col class='diff-content' /> <tr valign='top'> <td colspan='2' style="background-color: white; color:black;">← Предыдущая</td> <td colspan='2' style="background-color: white; color:black;">Версия 09:50, 9 ноября 2018</td> </tr><tr><td colspan="2" class="diff-lineno">Строка 14:</td> <td colspan="2" class="diff-lineno">Строка 14:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>''Прой­ден был пер­вый ру­беж по пу­ти, что при­во­дит к по­зна­нью.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>''Прой­ден был пер­вый ру­беж по пу­ти, что при­во­дит к по­зна­нью.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>Важ­ность его ве­ли­ка, спо­рит пускай де­ма­гог<del class="diffchange diffchange-inline">.</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">''</ins>Важ­ность его ве­ли­ка, спо­рит пускай де­ма­гог.''</div></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>&#160;</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">Мо­жет те­бе по­ка­зать­ся непре­одо­ли­мой до­ро­га.</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>&#160;</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">Мыс­ли та­кие от­брось: ждет она ка­ж­дый твой шаг</del>.''</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">''Мо­жет те­бе по­ка­зать­ся непре­одо­ли­мой до­ро­га.</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">''</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">''Мыс­ли та­кие от­брось: ждет она ка­ж­дый твой шаг.''</ins></div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">''</ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>Итак, мы ре­ши­ли соз­дать сайт, по­свя­щен­ный Ан­туа­ну де Сент-Эк­зю­пе­ри, и уже нема­ло в этом преуспе­ли (см. LXF164 – Со­зи­дание пер­вое). По пу­ти мы об­росли неко­то­рым ба­га­жом: у нас есть пап­ка Эк­зю­пе­ри и учеб­ные фай­лы во вло­жен­ной пап­ке pict – это кир­пи­чи­ки для по­строения на­ше­го сай­та. До­ба­вим в пап­ку pict фай­лы из од­но­имен­ной пап­ки на LXFDVD. Не за­бу­дем, что для Со­зи­даний тре­бу­ет­ся ис­прав­ное ин­тернет-со­единение.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>Итак, мы ре­ши­ли соз­дать сайт, по­свя­щен­ный Ан­туа­ну де Сент-Эк­зю­пе­ри, и уже нема­ло в этом преуспе­ли (см. LXF164 – Со­зи­дание пер­вое). По пу­ти мы об­росли неко­то­рым ба­га­жом: у нас есть пап­ка Эк­зю­пе­ри и учеб­ные фай­лы во вло­жен­ной пап­ке pict – это кир­пи­чи­ки для по­строения на­ше­го сай­та. До­ба­вим в пап­ку pict фай­лы из од­но­имен­ной пап­ки на LXFDVD. Не за­бу­дем, что для Со­зи­даний тре­бу­ет­ся ис­прав­ное ин­тернет-со­единение.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td colspan="2" class="diff-lineno">Строка 27:</td> <td colspan="2" class="diff-lineno">Строка 27:</td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>3 Те­перь восполь­зу­ем­ся ин­тернет-обо­зре­ва­те­лем и по­ис­ко­вой сис­те­мой для по­лу­чения тек­ста сказ­ки «Ма­лень­кий принц» (на­при­мер, в биб­лио­те­ке М. Мош­ко­ва, http://lib.ru/EKZUPERY/mprinc.txt). Для уда­ления фор­ма­ти­ро­вания ис­точника раз­мес­тим текст пред­ва­ри­тель­но в до­ку­мен­те про­сто­го тек­сто­во­го ре­дак­то­ра (KWrite), а за­тем пе­ренесем его на страницу сай­та. Об­ра­ща­ем внимание, что встав­ка из опе­ра­тив­ной па­мя­ти (бу­фе­ра об­ме­на) че­рез пункт кон­тек­ст­но­го ме­ню не ра­бо­та­ет; поль­зу­ем­ся со­че­танием кла­виш Ctrl + C и Ctrl + V или ме­ню ок­на.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>3 Те­перь восполь­зу­ем­ся ин­тернет-обо­зре­ва­те­лем и по­ис­ко­вой сис­те­мой для по­лу­чения тек­ста сказ­ки «Ма­лень­кий принц» (на­при­мер, в биб­лио­те­ке М. Мош­ко­ва, http://lib.ru/EKZUPERY/mprinc.txt). Для уда­ления фор­ма­ти­ро­вания ис­точника раз­мес­тим текст пред­ва­ри­тель­но в до­ку­мен­те про­сто­го тек­сто­во­го ре­дак­то­ра (KWrite), а за­тем пе­ренесем его на страницу сай­та. Об­ра­ща­ем внимание, что встав­ка из опе­ра­тив­ной па­мя­ти (бу­фе­ра об­ме­на) че­рез пункт кон­тек­ст­но­го ме­ню не ра­бо­та­ет; поль­зу­ем­ся со­че­танием кла­виш Ctrl + C и Ctrl + V или ме­ню ок­на.</div></td></tr> <tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>[[Файл:Puc1_opt.jpeg |left |<del class="diffchange diffchange-inline">100px </del>|thumb|&gt; Рис. 1. Поместим на нашу страницу текст]] &#160;</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>[[Файл:Puc1_opt.jpeg |left |<ins class="diffchange diffchange-inline">300px </ins>|thumb|&gt; Рис. 1. Поместим на нашу страницу текст]]</div></td></tr> <tr><td colspan="2">&#160;</td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">[[Файл:Puc2_opt.jpeg |right|300px |thumb|&gt; Рис. 2. За­да­ние па­ра­мет­ров таб­ли­цы.]]&#160; </ins></div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>4 Вы­полним фор­ма­ти­ро­вание тек­ста по сво­ему усмот­рению, не за­быв ука­зать ис­точник. Ре­зуль­тат, который получится в верх­ней час­ти страницы, мо­жет вы­гля­деть при­близитель­но так, как показано на рис. 1.</div></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"><div>4 Вы­полним фор­ма­ти­ро­вание тек­ста по сво­ему усмот­рению, не за­быв ука­зать ис­точник. Ре­зуль­тат, который получится в верх­ней час­ти страницы, мо­жет вы­гля­деть при­близитель­но так, как показано на рис. 1.</div></td></tr> <tr><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'>&#160;</td><td style="background: #eee; color:black; font-size: smaller;"></td></tr> </table>

Olkol http://wiki.linuxformat.ru/wiki/index.php?title=LXF167:%D0%A8%D0%BA%D0%BE%C2%AD%D0%BB%D0%B0_LXF&diff=19341&oldid=prev 2018-11-09T09:46:07Z

<p>Новая страница: «<a href="/wiki/index.php?title=%D0%9A%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D1%8F:%D0%9F%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%BD%D1%8B%D0%B5_%D1%80%D1%83%D0%B1%D1%80%D0%B8%D0%BA%D0%B8&amp;action=edit&amp;redlink=1" class="new" title="Категория:Постоянные рубрики (страница не существует)">Категория:Постоянные рубрики</a> &#039;&#039;&#039;Шко­ла LXF&#039;&#039;&#039; == KompoZer – шко­ле == &#039;&#039;Обмен опытом и передовы…»</p> <p><b>Новая страница</b></p><div>[[Категория:Постоянные рубрики]] <br /> '''Шко­ла LXF'''<br /> == KompoZer – шко­ле ==<br /> ''Обмен опытом и передовые идеи по использованию свободного ПО в образовании''<br /> <br /> ''Ми­ха­ил Вы­гра­нен­ко неуклонно движется по тер­ни­сто­му пу­ти Со­зи­да­ний –по­сле­ду­ем за ним, про­дол­жив де­ло по­строе­ния соб­ст­вен­но­го сай­та...''<br /> <br /> [[Файл:VygranenkoMikhail_opt.png |left |100px |thumb| '''Наш эксперт''' Ми­ха­ил Вы­гра­нен­ко – идео­лог сво­бо­ды в мыс­лях и по­ряд­ка в де­лах на ни­ве про­све­ще­ния, ка­ким бы па­ра­док­саль­ным ни ка­за­лось это со­че­та­ние. В ми­ру – учи­тель-методист.]]<br /> <br /> &gt; Рис. 1. По­мес­тим на на­шу стра­ни­цу текст.<br /> <br /> ===Со­зи­дание вто­рое: Таб­лич­ное раз­ме­щение информации===<br /> <br /> ''Прой­ден был пер­вый ру­беж по пу­ти, что при­во­дит к по­зна­нью.<br /> <br /> Важ­ность его ве­ли­ка, спо­рит пускай де­ма­гог.<br /> <br /> Мо­жет те­бе по­ка­зать­ся непре­одо­ли­мой до­ро­га.<br /> <br /> Мыс­ли та­кие от­брось: ждет она ка­ж­дый твой шаг.''<br /> <br /> Итак, мы ре­ши­ли соз­дать сайт, по­свя­щен­ный Ан­туа­ну де Сент-Эк­зю­пе­ри, и уже нема­ло в этом преуспе­ли (см. LXF164 – Со­зи­дание пер­вое). По пу­ти мы об­росли неко­то­рым ба­га­жом: у нас есть пап­ка Эк­зю­пе­ри и учеб­ные фай­лы во вло­жен­ной пап­ке pict – это кир­пи­чи­ки для по­строения на­ше­го сай­та. До­ба­вим в пап­ку pict фай­лы из од­но­имен­ной пап­ки на LXFDVD. Не за­бу­дем, что для Со­зи­даний тре­бу­ет­ся ис­прав­ное ин­тернет-со­единение.<br /> <br /> 1 За­пустим про­грам­му с по­мо­щью ме­ню сис­те­мы или яр­лы­ка на Ра­бо­чем сто­ле. В Менед­же­ре сай­та раз­вернем пап­ку Эк­зю­пе­ри.<br /> <br /> 2 Но­вую страницу со­храним (соз­да­дим) с именем prince в пап­ке Эк­зю­пе­ри. В Менед­же­ре сай­та на­жмем кноп­ку Об­но­вить и убе­дим­ся в по­яв­лении но­вой страницы в струк­ту­ре сай­та.<br /> <br /> 3 Те­перь восполь­зу­ем­ся ин­тернет-обо­зре­ва­те­лем и по­ис­ко­вой сис­те­мой для по­лу­чения тек­ста сказ­ки «Ма­лень­кий принц» (на­при­мер, в биб­лио­те­ке М. Мош­ко­ва, http://lib.ru/EKZUPERY/mprinc.txt). Для уда­ления фор­ма­ти­ро­вания ис­точника раз­мес­тим текст пред­ва­ри­тель­но в до­ку­мен­те про­сто­го тек­сто­во­го ре­дак­то­ра (KWrite), а за­тем пе­ренесем его на страницу сай­та. Об­ра­ща­ем внимание, что встав­ка из опе­ра­тив­ной па­мя­ти (бу­фе­ра об­ме­на) че­рез пункт кон­тек­ст­но­го ме­ню не ра­бо­та­ет; поль­зу­ем­ся со­че­танием кла­виш Ctrl + C и Ctrl + V или ме­ню ок­на.<br /> [[Файл:Puc1_opt.jpeg |left |100px |thumb|&gt; Рис. 1. Поместим на нашу страницу текст]] <br /> 4 Вы­полним фор­ма­ти­ро­вание тек­ста по сво­ему усмот­рению, не за­быв ука­зать ис­точник. Ре­зуль­тат, который получится в верх­ней час­ти страницы, мо­жет вы­гля­деть при­близитель­но так, как показано на рис. 1.<br /> <br /> При этом для фор­ма­ти­ро­вания по­свя­щения ис­поль­зо­ва­лись кноп­ки Панели ин­ст­ру­мен­тов Уве­ли­чить от­ступ и Вы­ров­нять по ши­рине, Вы­ров­нять по цен­тру.<br /> <br /> 5 Раз­мес­тим на сле­дую­щей стро­ке от за­го­лов­ка изо­бра­жение prince1.jpg из пап­ки pict.<br /> <br /> 6 Пе­рей­дем соб­ст­вен­но к тек­сту сказ­ки и уста­но­вим тек­сто­вый кур­сор в на­ча­ле аб­за­ца. На­жмем кла­ви­шу Enter для осво­бо­ж­дения стро­ки и кноп­ку Таб­ли­ца в Панели ин­ст­ру­мен­тов.<br /> <br /> 7 Пе­рей­дем в окне Встав­ка таб­ли­цы на вклад­ку Точ­ная и за­да­дим па­ра­мет­ры со­глас­но рис. 2.<br /> <br /> 8 Пе­рей­дем в пра­вую ячей­ку таб­ли­цы и вы­бе­рем в кон­тек­ст­ном ме­ню для нее пункт Свой­ст­ва ячей­ки таб­ли­цы...<br /> <br /> 9 В окне диа­ло­га Свой­ст­ва таб­ли­цы на вклад­ке Ячей­ки уста­но­вим: раз­мер по ши­рине – 30 % от раз­ме­ра таб­ли­цы; вы­равнивание со­дер­жи­мо­го – го­ри­зон­таль­ное по цен­тру. На вклад­ке Таб­ли­ца уста­но­вим вы­равнивание таб­ли­цы по цен­тру. Ос­та­вив осталь­ные па­ра­мет­ры неиз­мен­ны­ми, на­жмем ОК.<br /> <br /> 10 Раз­мес­тим в пра­вой ячей­ке таб­ли­цы изо­бра­жение prince2.jpg.<br /> <br /> 11 Пе­рей­дем в ле­вую ячей­ку таб­ли­цы и уста­но­вим та­ким же об­ра­зом раз­мер по ши­рине – 70 % от раз­ме­ра таб­ли­цы. Раз­мес­тим пер­вые три аб­за­ца тек­ста в этой ячей­ке. У нас долж­но по­лу­чить­ся при­мер­но то, что изо­бра­же­но на рис. 3.<br /> <br /> Сле­ду­ет иметь в ви­ду, что этот внешний вид страницы не сов­па­да­ет с тем, что по­ка­жет ин­тернет-обо­зре­ва­тель, из-за на­ли­чия сле­ва об­лас­ти Менед­же­ра сай­та (ши­ри­ну ко­то­рой мож­но, кста­ти, умень­шить, «це­п­ляя» мы­шью вер­тикаль­ную границу). Ис­тин­ное «по­ло­жение ве­щей» луч­ше про­смат­ри­вать неза­ви­си­мо от про­грам­мы, поль­зу­ясь кноп­кой Про­смотр в Панели ин­ст­ру­мен­тов.<br /> <br /> � Вер­нем обыч­ный ре­жим для страницы. Раз­мес­тим са­мо­стоя­тель­но сле­дую­щие 2-3 аб­за­ца тек­ста и изо­бра­жение prince3.jpg так­же в таб­ли­це, но по­ме­ня­ем их мес­та­ми по от­но­шению к пер­вой таб­ли­це. Не за­бы­ва­ем вы­пол­нять те­ку­щее со­хранение и про­смотр страницы. При­мер­ный вид ре­зуль­та­та по­ка­зан на рис. 4.<br /> <br /> � Ду­ма­ет­ся, уже по­нят­но, что для же­ст­ко­го за­кре­п­ления ин­фор­ма­ци­он­ных объ­ек­тов на странице сай­та пред­поч­ти­тельней ис­поль­зо­вать их раз­ме­щение имен­но в таб­ли­цах. Пе­ре­мес­тим­ся к нижней границе страницы и до­ба­вим ав­тор­скую со­став­ляю­щую (рис. 5), ско­пи­ро­вав ее с на­чаль­ной страницы сай­та, см. Со­зи­дание пер­вое.<br /> <br /> � Вы­зо­вем в ме­ню ок­на про­грам­мы пунк­ты Фор­мат/За­го­ло­вок и свой­ст­ва страницы... В диа­ло­го­вом окне на­бе­рем за­го­ло­вок «Ма­лень­кий принц». Он бу­дет по­ка­зы­вать­ся ин­тернет-обо­зре­ва­те­лем в за­го­лов­ке ок­на при про­смот­ре. За­полним ав­тор­ское по­ле сво­ей фа­ми­ли­ей. За­тем на­жмем ОК.</div>

Olkol