Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы
В данном уроке мы узнаем, как добавить новую страничку на okis.ru, как делать ссылки в статье, помещать фотографии, менять оформление текста и многое другое, связанное с работой с содержимым страницы.
Для начала давайте создадим тестовую страничку.
Зайдите в раздел > Страницы сайта и нажмите на кнопку + Добавить страницу
Заполните поля «Заголовок страницы», «Название», «Ключевые слова», «Описание страницы» и «Заголовок», как мы это делали в уроке по наполнению сайта, сделанного на okis.ru.
Лично я поставил везде фразу «Тест страница», а для адреса страницы дал название test.
Теперь обратите внимание на кнопки, которые находятся под заголовком «Содержимое страницы» – вот их мы и будем подробно рассматривать в этом уроке.
Но, перед тем как продолжить, добавьте немного текста в содержимое страницы для дальнейшей работы и сохраните страничку. Текст можно взять с главной страницы сайта coctail60.okis.ru, на примере которого мы проходили уроки по созданию сайта на ОКИСЕ, или любой другой.
Предлагаю разобраться с основными кнопками в панели редактирования текста, которые чаще всего используются в работе. Все кнопки мы рассматривать не будем, т.к. их достаточно много. Если Вам интересно изучить всю панель, то Вы можете навести курсор на любую кнопку, и в этом месте появится подсказка, которая показывает краткую информацию о ней. В общем, экспериментируйте! 😉
Пойдём по порядку…
– при нажатии этой кнопки страница будет сохранена.
– при нажатии этой кнопки содержимое страницы будет стёрто.
Идём далее…
Прежде чем использовать нижеперечисленные кнопки, нужно сначала выделить текст и нажать на любую из них.
Выделение
– выделяет текст полужирным шрифтом.
– выделяет текст курсивом.
– подчёркивает текст.
– зачёркивает текст.
Выравнивание текста
– данные кнопки выравнивают текст слева, по центру, справа и равномерно по ширине.
Форматирование текста
Здесь Вы можете выбрать заголовки разных уровней (h1,h2,h3,h4,h5,h6), а также различные форматы текста.
Внимание: Не рекомендуется использовать «Заголовок 1 (h1)», т.к. он уже есть в шапке сайта, а повторное использования этого заголовка плохо сказывается на продвижении сайта в поисковых системах.
Задаёт шрифт текста
Задаёт размер шрифта. Эту кнопку мы использовали в уроке по наполнению сайта, сделанного на okis.ru.
Списки
– с помощью этой кнопки можно делать маркированные списки.
Пример:
- Строка 1
- Строка 2
- Строка 3
– с помощью этой кнопки можно делать пронумерованные списки.
Пример:
- Строка 1
- Строка 2
- Строка 3
Как сделать ссылку на другую страничку
Очень просто! Необходимо выделить текст, который Вы хотите сделать ссылкой и нажать на значок 
, после чего перед Вами появится всплывающее окно, где в поле «Адрес ссылки» нужно указать ссылку.
Выделите текст и нажмите значок «Вставить/редактировать ссылку»
В поле «Адрес ссылки» укажите ссылку и нажмите «Вставить»
Мы уже говорили о том, что index.html является ссылкой на главную страницу. Но я не упомянул, что вместо index.html можно просто поставить символ слеш (/). Я даже рекомендую Вам ставить ссылку на главную страницу не index.html, а именно / – так будет правильнее и проще.
Если Вы хотите убрать ссылку, то Вам нужно выделить текст, который Вы сделали ссылкой и нажать на значок 
.
Как помещать фотографии в тест
Прежде чем помесить фотографию в текст её нужно загрузить.
Давайте сделаем небольшое задание: загрузим фотографию на сайт, после чего, вставим её слева от текста.
Перед выполнением задания скачайте фото и разархивируй его, если у Вас нет своего фото.
Внимание: размер фотографии не должен быть большим (желательно не более 300 Кб.), иначе страница сайта может очень долго грузиться. Если Вы не знаете, как уменьшить размер фотографии и не умеете работать с программой Photoshop , то рекомендую Вам изучить курс по web-дизайну для начинающих Money Master 2, с помощью которого Вы станете дизайнером средней руки буквально за несколько вечеров!
Продолжим…
Чтобы загрузить фотографию нужно зайти в пункт «Загрузка фото»
Затем нажмите «Обзор», выберите фотографию на своём компьютере и загрузите её на сервер.
После загрузки фото Вы увидите ссылку, которую мы будем использовать для вставки фото в статью.
Теперь зайдите в редактор нашей тест-странички и кликните левой кнопкой мыши вначале текста (в это место мы вставим фото слева), после чего нажмите на кнопку 
После проделанных действий перед Вами появится всплывающее окно с открытой вкладкой «Общие», где:
- В поле «Адрес изображения» нужно указать ссылку на изображение, которое было загружено;
- В поле «Описание изображения» нужно указать замещающий текст, который будет показываться при отсутствии изображения;
- В поле «Название» нужно указать текст, который будет показываться при наведении на картинку курсора мишки.
Перейдите на вкладку «Внешний вид» и поставьте выравнивание «Влево», после чего нажмите «Вставить».
Как видите, фотография разместилась слева. Таким же образом фото можно размещать справа, по центру, по основанию, по верху текста и по низу текста.
Пожалуй, я на этом остановлюсь. Дальше Вы уже сами можете изучить все оставшиеся кнопки.
Желаю Вам успехов в учёбе!
30 comments
Заходите на страницу http://api.yandex.ru/share/, ставите галочки на нужные кнопки, копируете код и вставляете его на всех страницах сайта по такому же принципу, как мы организовывали общение на сайте, сделанном на okis.ru, в уроке https://webcaum.ru/kak-organizovat-obshhenie-na-sajte-sdelannom-na-okisru.html. Т.е. нужно зайти в раздел «Размещение рекламы», после чего вставить код в то место, где Вы хотите поместить кнопки.
С кнопкой Google +1 тот же самый принцип – заходите на страницу http://www.google.com/+1/button/, нажимаете «Получите код», настраиваете кнопку и копируете код, после чего также вставляете в разделе «Размещение рекламы».
Спасибо за ответ, помогло!!!
Здравствуйте, уроки мне очень помогли.
А как сделать yadi.sk/d/knGqEExH4Olho?
Удаляя фото, нужно ещё удалять код картинки. Зайдите в админку, выделите рамку с крестиком и нажмите delete, после чего сохраните изменения. Рамки с крестиком больше не наблюдается.
Скорее всего, это происходит из-за того, что Вы долго занимались редактированием страницы. Когда долгое время не происходит каких-то действий (то, что Вы проводите работу в визуальном редакторе, админка не воспринимает, как действие, админка воспринимает действие в случае, если Вы нажмёте «Сохранить» или переходите по разделам админки), то админка через какое-то время выкидывает и нужно заново вводить пароль. Слишком большой промежуток времени, по всей видимости, прошёл межу началом редактирования страницы и нажатием кнопки «Сохранить». Попробуйте заново добавить текст и, не проводя никакого оформления текста, сразу сохраните страницу, и у Вас всё получится. Если Вы долго редактируете страницу, то просто периодически сохраняйте её, нажимая кнопку в виде дискеты в левом верхнем углу визуального редактора, и продолжайте работу.
Помогите, пожалуйста!!! Мы не можем добавить текст на страницу. После нажатия кнопки сохранить выкидывает со страницы и просит авторизоваться, а текст не сохраняется.
Спасибо за уроки! Удалила предыдущие фото, но когда открываю сайт заново, вместо удалённых фото осталась рамочка с крестиком. Что-то сделала неверно?
Если Вы хотите сделать ссылку на сайт webcaum.ru, например, то в поле «Адрес ссылки» нужно указать следующий адрес:
https://webcaum.ru. Если Вы хотите делать ссылку не на главную страницу, а на какую-то другую, например, на страницуhttps://webcaum.ru/uroki_sajtostroeniya, то так и указываем в поле «Адрес ссылки» полную ссылку:https://webcaum.ru/uroki_sajtostroeniyaТочно также обстоят дела с другими сайтами.
Спасибо, уроки мне очень помогли, но объясните, как добавит ссылку на другой сайт
На окисе нет возможности оставлять комментарии. Виджет комментариев – это пока единственная альтернатива, которую может предложить окис. Также нельзя организовать форум на окисе.
Форум можно организовать на ucoz.ru. Также на юкозе есть возможность организовать общение посредством комментирования – и никаких виджетов не надо будет устанавливать.
Остаётся только выбирать
Подскажите пожалуйста, как сделать так, чтобы посетители сайта могли оставлять комментарии к материалам (в настоящий момент у меня стоит виджет комментариев от ВКонтакте, но хотелось бы, чтобы были простые комментарии), а также как организовать форум на сайте? Заранее спасибо
Лично я на окисе не покупал домен 2-ого уровня, поэтому точно сказать не могу. На форуме Окис должна быть об этом информация. Вообще, скорее всего, при покупке домена 2-ого уровня сайт автоматически перенесётся полностью. На 99,9% я в этом уверен.
И последний пока вопрос, при переходе на домен второго уровня, созданный на ОКИС ранее сайт сохранится и поменяется только адрес, или нужно будет делать все по новому?
Огромное человеческое спасибо за понятный ответ!!!=)=)=)
Заходите в «Страницы сайта» и нажимаете «+Добавить страницу». Название адреса страницы даёте такое же, как в меню, т.е., если, например, пункт меню ведёт на страницу public.html, то при создании страницы нужно указывать в название адреса public, а окончание .html автоматически добавится. Далее в содержимое страницы добавляете следующую информацию:
Заголовок статьи – сделайте побольше размер шрифта и поставьте ссылку на статью.
Далее со следующей строки – дату добавления, например, так: Добавлено: 24.03.2012 г.
Далее со следующей строки – анонс статьи.
Далее со следующей строки – Читать далее… или Подробнее… (также сделайте ссылкой на статью)
После чего сделайте ещё несколько анонсов на той же странице, ведущих на разные статьи.
Затем в начале и в конце страницы сделайте нумерацию: 1 2 3 4 5 6 7 8
Отцентруйте нумерацию и сделайте ссылки на все страницы, которые содержат анонсы
Это один из способов сделать страницу с анонсами. Если Вы хотите научиться делать более красивые анонсы, то Вам нужно изучить HTML и CSS – и данная задача для Вас не будет представляться сложной.
Могу порекомендовать следующие курсы:
Бесплатный курс по HTML – https://webcaum.ru/kursy-sajtostroeniya/besplatnyj-kurs-po-html-ot-evgeniya-popova-33-videouroka.html
Бесплатный курс по CSS – https://webcaum.ru/kursy-sajtostroeniya/besplatnyj-kurs-po-css-ot-evgeniya-popova-45-videourokov.html
— На окисе для этого нужно создавать отдельные странички и вручную оформлять на них анонсы статей и нумерацию.
Где можно подробнее ознакомиться с этим, чтобы сразу стало понятно. У меня на сайте есть подменю, нажимая на строку меню, выскакивает список подменю, мне надо чтобы нажимая на каждую строку появлялась страница со списком материалов и кратким анонсом на них, нажимая на которые статьи представлялись уже целиковые…Очень надо, помогите! Заранее спасибо
На окисе для этого нужно создавать отдельные странички и вручную оформлять на них анонсы статей и нумерацию. Дату опубликования также придётся делать вручную. По поводу комментирования записей на ОКИС я писал ранее в публикации: https://webcaum.ru/uroki-sajtostroeniya/kak-organizovat-obshhenie-na-sajte-sdelannom-na-okisru.html
Короче грубо говоря, хочу чтобы главная страница была схожа с новостной лентой, где можно сперва прочитать анонс, а при нажатии статья открывается целиком
Добрый день, как сделать так, чтобы на главной странице сверху вниз распологались анонсы всех статей, с возможностью перехода на 2,3,4,5 и так далее страницы, а при выборе статьи она открывалась целиком, как в принципе на всех сайтах и делается.Как создавать страницы понял, а как это делать нет.И чтобы материалы имеющиеся на сайте ставились с датой опубликования, возможно ли это на окис? И еще вопрос, возможно ли здесь ставить пункт комментарии, чтобы люди оставляли свои мнения о материалах. Надеюсь мои вопросы понятны, заранее спасибо!
Параметры сайта -> Метатэги
вот у меня сайт.
мне понадобилось вставить мета тег и загрузить файл в каталог сайта ==допустим fuga.okis.ru/robots.txt
вот так.. а где поле для мета тегов? я его не найду. счётчик вставил…
Не сразу понял вопроса))))
Рад что разобрались сами. Только сегодня зашёл в админку сайта и обнаружил, что у окис она обновилась. Надо на днях обновить уроки…)))))
Все поняла))) Не сообразила, что можно альбом открыть и там удалять! Спасибо, навели на мысль)) «Не стыдно — родится глупым, стыдно- умереть глупцом!» Ваши уроки очень помогают. Не бросайте нас-новичков в этом море интернет-жизни!)))
Спасибо, но то, что в разделе загрузка фото, можно удалить по одному, я знаю, а вот, в разделе фото альбом? Там, если нажать «изменить», то удалить можно только весь альбом, а хотелось удалить только несколько лишних фото. Может быть есть такая возможность?
Заходим в раздел «> Загрузка фото» и нажимаем по ссылке «Удалить», находящейся справа от ссылки на изображение, которое Вы хотите удалить. Сразу несколько фотографий, к сожалению, нельзя удалить.
Спасибо за урок! Вопрос: как удалить из фотогалереи несколько ненужных фото. Спасибо.
Ничего удалять не надо. Перед загрузкой фото следите за тем, чтобы названия файлов отличались друг от друга, иначе одна фотография будет просто заменена на другую. Также желательно, чтобы размер каждой фотографии при загрузке не превышал 500 KБ (и то это слишком много для загружаемой фотографии на сайт). Самый оптимальный вариант, чтобы фотография нормально показывалась на сайте – 20-150 KБ.
Немного не понятно, что Вы имеете в виду. Если Вы хотите размесить несколько фотографий на одной странице, то в этом не должно возникать проблем. Просто вставляете сначала одну фотографию, затем ставите курсор в другом месте и также нажимаете на кнопку для вставки изображения, где нужно указать ссылку на фотографию. Если Вы не можете вставить фотографию рядом с другой, то нужно сначала щёлкнуть курсором мышки на ту фотографию, рядом с которой хотите разместить другую фотографию и нажать стрелку влево (<-) или вправо (->), в зависимости от того с какой стороны Вы хотите разместить фотографию.
Мне очень помогают Ваши уроки, но проблемы неизбежны. Почему-то после загрузки первой фотографии у меня не загружается следующая,надо ли удалять с сервера предыдущую, почему невозможно установить курсор рядом с первой фотографией, т.е. я хочу установить несколько фотографий на одной странице. Помогите!
Рад, что мои уроки Вам помогли 😉
Большое спасибо за уроки благодаря вам Я очень многому научилась!!