Как создать свой сайт
Блог сайтостроителя


Курс Money Master 3 – продвижение сайтов и обучение заработку в Интернете

Рубрика «Вопрос? Ответ!»





Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы

В данном уроке мы узнаем, как добавить новую страничку на okis.ru, как делать ссылки в статье, помещать фотографии, менять оформление текста и многое другое, связанное с работой с содержимым страницы.


Для начала давайте создадим тестовую страничку.

Зайдите в раздел > Страницы сайта и нажмите на кнопку + Добавить страницу

Заполните поля  «Заголовок страницы», «Название», «Ключевые слова», «Описание страницы» и «Заголовок», как мы это делали в уроке по наполнению сайта, сделанного на okis.ru.

Лично я поставил везде фразу «Тест страница», а для адреса страницы дал название test.

Теперь обратите внимание на кнопки, которые находятся под заголовком «Содержимое страницы» — вот их мы и будем подробно рассматривать в этом уроке.

OKIS.RU: Кнопки для работы с текстом

Но, перед тем как продолжить, добавьте немного текста в содержимое страницы для дальнейшей работы и сохраните страничку. Текст можно взять с главной страницы сайта coctail60.okis.ru, на примере которого мы проходили уроки по созданию сайта на ОКИСЕ, или любой другой.

Предлагаю разобраться с основными кнопками в панели редактирования текста, которые чаще всего используются в работе. Все кнопки мы рассматривать не будем, т.к. их достаточно много. Если Вам интересно изучить всю панель, то Вы можете навести курсор на любую кнопку, и в этом месте появится подсказка, которая показывает краткую информацию о ней. В общем, экспериментируйте! ;)

OKIS.RU: Наведите курсор на любую кнопку, и Вы увидите подсказку

Пойдём по порядку...

Сохранить — при нажатии этой кнопки страница будет сохранена.

Новый документ — при нажатии этой кнопки содержимое страницы будет стёрто.

Идём далее...

Прежде чем использовать нижеперечисленные кнопки, нужно сначала выделить текст и нажать на любую из них.

Выделение

Полужирный (Ctrl+B) — выделяет текст полужирным шрифтом.

Курсив (Ctrl+I) — выделяет текст курсивом.

Подчёркнутый (Ctrl+U) — подчёркивает текст.

Перечёркнутый — зачёркивает текст.

Выравнивание текста

Выровнять слева, по центру, вправо и равномерно по ширине  — данные кнопки выравнивают текст слева, по центру, справа и равномерно по ширине.

Форматирование текста

Абзац
Здесь Вы можете выбрать заголовки разных уровней (h1,h2,h3,h4,h5,h6), а также различные форматы текста.

Внимание: Не рекомендуется использовать «Заголовок 1 (h1)», т.к. он уже есть в шапке сайта, а повторное использования этого заголовка плохо сказывается на продвижении сайта в поисковых системах.

Шрифт
Задаёт шрифт текста

Размер шрифта
Задаёт размер шрифта. Эту кнопку мы использовали в уроке по наполнению сайта, сделанного на okis.ru.

Списки

Маркированный список — с помощью этой кнопки можно делать маркированные списки.

Пример:

  • Строка 1
  • Строка 2
  • Строка 3

Нумерованный список — с помощью этой кнопки можно делать пронумерованные списки.

Пример:

  1. Строка 1
  2. Строка 2
  3. Строка 3

Как сделать ссылку на другую страничку

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

Выделите текст и нажмите значок «Вставить/редактировать ссылку»

Выделите текст и нажмите значок «Вставить/редактировать ссылку»

В поле «Адрес ссылки» укажите ссылку и нажмите «Вставить»

В поле «Адрес ссылки» укажите ссылку и нажмите «Вставить»

Мы уже говорили о том, что index.html является ссылкой на главную страницу. Но я не упомянул, что вместо index.html можно просто поставить символ слеш (/). Я даже рекомендую Вам ставить ссылку на главную страницу не index.html, а именно / — так будет правильнее и проще.

Ссылка на главную страницу сайта

Если Вы хотите убрать ссылку, то Вам нужно выделить текст, который Вы сделали ссылкой и нажать на значок Удалить ссылку.

Как помещать фотографии в тест

Прежде чем помесить фотографию в текст её нужно загрузить.

Давайте сделаем небольшое задание: загрузим фотографию на сайт, после чего, вставим её слева от текста.

Перед выполнением задания скачайте фото и разархивируй его, если у Вас нет своего фото.

Внимание: размер фотографии не должен быть большим (желательно не более 300 Кб.), иначе страница сайта может очень долго грузиться. Если Вы не знаете, как уменьшить размер фотографии и не умеете работать с программой Photoshop , то рекомендую Вам изучить курс по web-дизайну для начинающих Money Master 2, с помощью которого Вы станете дизайнером средней руки буквально за несколько вечеров!

Продолжим...

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

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

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

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

OKIS.RU: Учимся вставлять фото

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

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

OKIS.RU: Адрес изображения, Описание изображения, Название

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

OKIS.RU: Вставляем картинку слева

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

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

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

Перейти в начало к урокам по созданию сайта на OKIS>>>

Популярность заметки: 3%

Опубликовал admin 23 октября, 2011 | 30 комментариев | Просмотров: 10,519

Рейтинг заметки:

1 звезда2 звезды3 звезды4 звезды5 звезд (5 голосов, средний: 5.00 из 5)
Loading ... Loading ...

Размещено в рубрике: Сайт на OKIS

Метки:

Если Вам понравились материалы сайта http://webcaum.ru, и Вы хотите отблагодарить автора данного ресурса, то скопируйте код баннера, который представлен ниже, и вставьте его на любой странице Вашего сайта.

30 комментариев к заметке «Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы»

  • Кэтрин
    2 ноября, 2011, 11:41
    Цитировать

    Большое спасибо за уроки благодаря вам Я очень многому научилась!!

  • admin
    4 ноября, 2011, 8:17
    Цитировать

    Цитата:

    Большое спасибо за уроки благодаря вам Я очень многому научилась!!

    Рад, что мои уроки Вам помогли ;)

  • Svetlana
    2 февраля, 2012, 18:14
    Цитировать

    Мне очень помогают Ваши уроки, но проблемы неизбежны. Почему-то после загрузки первой фотографии у меня не загружается следующая,надо ли удалять с сервера предыдущую, почему невозможно установить курсор рядом с первой фотографией, т.е. я хочу установить несколько фотографий на одной странице. Помогите!

  • admin
    4 февраля, 2012, 11:57
    Цитировать

    Цитата:

    Почему-то после загрузки первой фотографии у меня не загружается следующая,надо ли удалять с сервера предыдущую

    Ничего удалять не надо. Перед загрузкой фото следите за тем, чтобы названия файлов отличались друг от друга, иначе одна фотография будет просто заменена на другую. Также желательно, чтобы размер каждой фотографии при загрузке не превышал 500 KБ (и то это слишком много для загружаемой фотографии на сайт). Самый оптимальный вариант, чтобы фотография нормально показывалась на сайте — 20−150 KБ.

    Цитата:

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

    Немного не понятно, что Вы имеете в виду. Если Вы хотите размесить несколько фотографий на одной странице, то в этом не должно возникать проблем. Просто вставляете сначала одну фотографию, затем ставите курсор в другом месте и также нажимаете на кнопку для вставки изображения, где нужно указать ссылку на фотографию. Если Вы не можете вставить фотографию рядом с другой, то нужно сначала щёлкнуть курсором мышки на ту фотографию, рядом с которой хотите разместить другую фотографию и нажать стрелку влево (< -) или вправо (->), в зависимости от того с какой стороны Вы хотите разместить фотографию.

  • Алекс
    6 февраля, 2012, 21:49
    Цитировать

    Спасибо за урок! Вопрос: как удалить из фотогалереи несколько ненужных фото. Спасибо.

  • admin
    7 февраля, 2012, 9:40
    Цитировать

    Цитата:

    как удалить из фотогалереи несколько ненужных фото

    Заходим в раздел «> Загрузка фото» и нажимаем по ссылке «Удалить», находящейся справа от ссылки на изображение, которое Вы хотите удалить. Сразу несколько фотографий, к сожалению, нельзя удалить.

  • Алекс
    7 февраля, 2012, 16:37
    Цитировать

    Спасибо, но то, что в разделе загрузка фото, можно удалить по одному, я знаю, а вот, в разделе фото альбом? Там, если нажать «изменить», то удалить можно только весь альбом, а хотелось удалить только несколько лишних фото. Может быть есть такая возможность?

  • Алекс
    7 февраля, 2012, 16:58
    Цитировать

    Все поняла))) Не сообразила, что можно альбом открыть и там удалять! Спасибо, навели на мысль)) «Не стыдно — родится глупым, стыдно- умереть глупцом!» Ваши уроки очень помогают. Не бросайте нас-новичков в этом море интернет-жизни!)))

  • admin
    8 февраля, 2012, 9:41
    Цитировать

    Цитата:

    как удалить из фотогалереи несколько ненужных фото

    Не сразу понял вопроса))))

    Цитата:

    Все поняла))) Не сообразила, что можно альбом открыть и там удалять! Спасибо, навели на мысль)) «Не стыдно — родится глупым, стыдно- умереть глупцом!» Ваши уроки очень помогают. Не бросайте нас-новичков в этом море интернет-жизни!)))

    Рад что разобрались сами. Только сегодня зашёл в админку сайта и обнаружил, что у окис она обновилась. Надо на днях обновить уроки...)))))

  • Лёха
    19 февраля, 2012, 15:24
    Цитировать

    вот у меня сайт.

    мне понадобилось вставить мета тег и загрузить файл в каталог сайта ==допустим fuga.okis.ru/robots.txt

    вот так... а где поле для мета тегов? я его не найду. счётчик вставил...

  • admin
    21 февраля, 2012, 21:33
    Цитировать

    Цитата:

    а где поле для мета тегов

    Параметры сайта -> Метатэги

  • Дмитрий
    22 марта, 2012, 12:24
    Цитировать

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

  • Дмитрий
    22 марта, 2012, 12:26
    Цитировать

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

  • admin
    22 марта, 2012, 23:25
    Цитировать

    Цитата:

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

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

  • Дмитрий
    23 марта, 2012, 14:31
    Цитировать

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

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

  • admin
    24 марта, 2012, 15:39
    Цитировать

    Цитата:

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

    Заходите в «Страницы сайта» и нажимаете «+Добавить страницу». Название адреса страницы даёте такое же, как в меню, т.е., если, например, пункт меню ведёт на страницу public.html, то при создании страницы нужно указывать в название адреса public, а окончание .html автоматически добавится. Далее в содержимое страницы добавляете следующую информацию:

    Заголовок статьи — сделайте побольше размер шрифта и поставьте ссылку на статью.

    Далее со следующей строки — дату добавления, например, так: Добавлено: 24.03.2012 г.

    Далее со следующей строки — анонс статьи.

    Далее со следующей строки — Читать далее… или Подробнее… (также сделайте ссылкой на статью)

    После чего сделайте ещё несколько анонсов на той же странице, ведущих на разные статьи.

    Затем в начале и в конце страницы сделайте нумерацию: 1 2 3 4 5 6 7 8

    Отцентруйте нумерацию и сделайте ссылки на все страницы, которые содержат анонсы

    Это один из способов сделать страницу с анонсами. Если Вы хотите научиться делать более красивые анонсы, то Вам нужно изучить HTML и CSS — и данная задача для Вас не будет представляться сложной.

    Могу порекомендовать следующие курсы:

    Бесплатный курс по HTML — webcaum.ru/kursy-sajtostr... -videouroka.html

    Бесплатный курс по CSS — webcaum.ru/kursy-sajtostr...videourokov.html

  • Дмитрий
    24 марта, 2012, 22:51
    Цитировать

    Огромное человеческое спасибо за понятный ответ!!!=)=)=)

  • Дмитрий
    24 марта, 2012, 23:43
    Цитировать

    И последний пока вопрос, при переходе на домен второго уровня, созданный на ОКИС ранее сайт сохранится и поменяется только адрес, или нужно будет делать все по новому?

  • admin
    25 марта, 2012, 14:26
    Цитировать

    Цитата:

    И последний пока вопрос, при переходе на домен второго уровня, созданный на ОКИС ранее сайт сохранится и поменяется только адрес, или нужно будет делать все по новому?

    Лично я на окисе не покупал домен 2-ого уровня, поэтому точно сказать не могу. На форуме Окис должна быть об этом информация. Вообще, скорее всего, при покупке домена 2-ого уровня сайт автоматически перенесётся полностью. На 99,9% я в этом уверен.

  • Дмитрий
    29 марта, 2012, 9:07
    Цитировать

    Подскажите пожалуйста, как сделать так, чтобы посетители сайта могли оставлять комментарии к материалам (в настоящий момент у меня стоит виджет комментариев от ВКонтакте, но хотелось бы, чтобы были простые комментарии), а также как организовать форум на сайте? Заранее спасибо

  • admin
    29 марта, 2012, 12:08
    Цитировать

    Цитата:

    Подскажите пожалуйста, как сделать так, чтобы посетители сайта могли оставлять комментарии к материалам (в настоящий момент у меня стоит виджет комментариев от ВКонтакте, но хотелось бы, чтобы были простые комментарии), а также как организовать форум на сайте? Заранее спасибо

    На окисе нет возможности оставлять комментарии. Виджет комментариев — это пока единственная альтернатива, которую может предложить окис. Также нельзя организовать форум на окисе.

    Форум можно организовать на ucoz.ru. Также на юкозе есть возможность организовать общение посредством комментирования — и никаких виджетов не надо будет устанавливать.

    Остаётся только выбирать

  • 123
    21 апреля, 2013, 12:56
    Цитировать

    Спасибо, уроки мне очень помогли, но объясните, как добавит ссылку на другой сайт

  • admin
    21 апреля, 2013, 19:52
    Цитировать

    Цитата:

    Спасибо, уроки мне очень помогли, но объясните, как добавит ссылку на другой сайт

    Если Вы хотите сделать ссылку на сайт webcaum.ru, например, то в поле «Адрес ссылки» нужно указать следующий адрес: http://webcaum.ru. Если Вы хотите делать ссылку не на главную страницу, а на какую-то другую, например, на страницу http://webcaum.ru/uroki_sajtostroeniya, то так и указываем в поле «Адрес ссылки» полную ссылку: http://webcaum.ru/uroki_sajtostroeniya

    Точно также обстоят дела с другими сайтами.

  • mila
    23 апреля, 2013, 20:50
    Цитировать

    Спасибо за уроки! Удалила предыдущие фото, но когда открываю сайт заново, вместо удалённых фото осталась рамочка с крестиком. Что-то сделала неверно?

  • Юлия
    25 апреля, 2013, 17:24
    Цитировать

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

  • admin
    27 апреля, 2013, 11:53
    Цитировать

    Цитата:

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

    Скорее всего, это происходит из-за того, что Вы долго занимались редактированием страницы. Когда долгое время не происходит каких-то действий (то, что Вы проводите работу в визуальном редакторе, админка не воспринимает, как действие, админка воспринимает действие в случае, если Вы нажмёте «Сохранить» или переходите по разделам админки), то админка через какое-то время выкидывает и нужно заново вводить пароль. Слишком большой промежуток времени, по всей видимости, прошёл межу началом редактирования страницы и нажатием кнопки «Сохранить». Попробуйте заново добавить текст и, не проводя никакого оформления текста, сразу сохраните страницу, и у Вас всё получится. Если Вы долго редактируете страницу, то просто периодически сохраняйте её, нажимая кнопку в виде дискеты в левом верхнем углу визуального редактора, и продолжайте работу.

  • admin
    27 апреля, 2013, 11:55
    Цитировать

    Цитата:

    Спасибо за уроки! Удалила предыдущие фото, но когда открываю сайт заново, вместо удалённых фото осталась рамочка с крестиком. Что-то сделала неверно?

    Удаляя фото, нужно ещё удалять код картинки. Зайдите в админку, выделите рамку с крестиком и нажмите delete, после чего сохраните изменения. Рамки с крестиком больше не наблюдается.

  • 123
    27 апреля, 2013, 21:38
    Цитировать

    Здравствуйте, уроки мне очень помогли.

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

  • Юлия
    28 апреля, 2013, 20:00
    Цитировать

    Цитата:

    Скорее всего, это происходит из-за того, что Вы долго занимались редактированием страницы. Когда долгое время не происходит каких-то действий (то, что Вы проводите работу в визуальном редакторе, админка не воспринимает, как действие, админка воспринимает действие в случае, если Вы нажмёте «Сохранить» или переходите по разделам админки), то админка через какое-то время выкидывает и нужно заново вводить пароль.

    Спасибо за ответ, помогло!!!

  • admin
    1 мая, 2013, 13:19
    Цитировать

    Цитата:

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

    Заходите на страницу api.yandex.ru/share/, ставите галочки на нужные кнопки, копируете код и вставляете его на всех страницах сайта по такому же принципу, как мы организовывали общение на сайте, сделанном на okis.ru, в уроке webcaum.ru/kak-organizova...m-na-okisru.html. Т.е. нужно зайти в раздел «Размещение рекламы», после чего вставить код в то место, где Вы хотите поместить кнопки.

    С кнопкой Google +1 тот же самый принцип — заходите на страницу www.google.com/+1/button/, нажимаете «Получите код», настраиваете кнопку и копируете код, после чего также вставляете в разделе «Размещение рекламы».

Внимание! На данный момент возможность комментирования на сайте закрыта по причине нехватки времени у автора отвечать на вопросы посетителей сайта. Как только у автора блога появится время, форма с отправкой комментариев обязательно будет установлена обратно.

© 2011 Все права защищены законодательством РФ.
Автор разрешает использовать материалы сайта только при одном условии – на страницу сайта webcaum.ru, от куда был скопирован материал (или частично скопирован), должна быть проставлена индексируемая ссылка Поднять страницу вверх