Урок №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, с помощью которого Вы станете дизайнером средней руки буквально за несколько вечеров!

Чтобы загрузить фотографию нужно зайти в пункт « Загрузка фото »

Затем нажмите «Обзор», выберите фотографию на своём компьютере и загрузите её на сервер.

После загрузки фото Вы увидите ссылку, которую мы будем использовать для вставки фото в статью.

Теперь зайдите в редактор нашей тест-странички и кликните левой кнопкой мыши вначале текста (в это место мы вставим фото слева), после чего нажмите на кнопку

После проделанных действий перед Вами появится всплывающее окно с открытой вкладкой «Общие», где:

В поле «Адрес изображения» нужно указать ссылку на изображение, которое было загружено;
В поле «Описание изображения» нужно указать замещающий текст, который будет показываться при отсутствии изображения;
В поле «Название» нужно указать текст, который будет показываться при наведении на картинку курсора мишки.

Перейдите на вкладку «Внешний вид» и поставьте выравнивание «Влево», после чего нажмите «Вставить».

Как видите, фотография разместилась слева. Таким же образом фото можно размещать справа, по центру, по основанию, по верху текста и по низу текста.

Пожалуй, я на этом остановлюсь. Дальше Вы уже сами можете изучить все оставшиеся кнопки.

Желаю Вам успехов в учёбе!

Цитата: А как сделать yadi.sk/d/knGqEExH4Olho?

Заходите на страницу 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

— На окисе для этого нужно создавать отдельные странички и вручную оформлять на них анонсы статей и нумерацию.

Где можно подробнее ознакомиться с этим, чтобы сразу стало понятно. У меня на сайте есть подменю, нажимая на строку меню, выскакивает список подменю, мне надо чтобы нажимая на каждую строку появлялась страница со списком материалов и кратким анонсом на них, нажимая на которые статьи представлялись уже целиковые…Очень надо, помогите! Заранее спасибо

Цитата: Добрый день, как сделать так, чтобы на главной странице сверху вниз распологались анонсы всех статей, с возможностью перехода на 2,3,4,5 и так далее страницы, а при выборе статьи она открывалась целиком, как в принципе на всех сайтах и делается.

На окисе для этого нужно создавать отдельные странички и вручную оформлять на них анонсы статей и нумерацию. Дату опубликования также придётся делать вручную. По поводу комментирования записей на ОКИС я писал ранее в публикации: https://webcaum.ru/uroki-sajtostroeniya/kak-organizovat-obshhenie-na-sajte-sdelannom-na-okisru.html

Короче грубо говоря, хочу чтобы главная страница была схожа с новостной лентой, где можно сперва прочитать анонс, а при нажатии статья открывается целиком

Добрый день, как сделать так, чтобы на главной странице сверху вниз распологались анонсы всех статей, с возможностью перехода на 2,3,4,5 и так далее страницы, а при выборе статьи она открывалась целиком, как в принципе на всех сайтах и делается.Как создавать страницы понял, а как это делать нет.И чтобы материалы имеющиеся на сайте ставились с датой опубликования, возможно ли это на окис? И еще вопрос, возможно ли здесь ставить пункт комментарии, чтобы люди оставляли свои мнения о материалах. Надеюсь мои вопросы понятны, заранее спасибо!

📎📎📎📎📎📎📎📎📎📎