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


Уникальная система заработка в сети Интернет!

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





Урок№7. Как поменять контур сайта на okis.ru

Некоторые шаблоны конструктора сайтов Окис имеют контур вокруг всей области сайта, и наш шаблон в их числе. В этом уроке Вы узнаете, как поменять контур сайта на okis.ru.

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

.art-sheet-tr, .art-sheet-tl, .art-sheet-br, .art-sheet-bl {background-image: url(ПУТЬ_К_ФАЙЛУ/sheet_s.png);}

Сохраните изменения.

Обновив страницу сайта, Вы увидите, что в четырёх углах нашего сайта появились частицы нашего контура.

Урок№7. Как поменять контур сайта на okis.ru

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

Для того чтобы контур поменялся слева и справа нам нужно, для начала, загрузить на сайт изображение sheet_v.png. Затем в редакторе CSS нужно написать следующий код:

.art-sheet-cr, .art-sheet-cl {background-image: url(ПУТЬ_К_ФАЙЛУ/sheet_v.png);}

Сохраните изменения в CSS и обновите страницу нашего сайта. Как видите, контур поменялся слева и справа.

Урок№7. Как поменять контур сайта на okis.ru <-> Урок№7. Как поменять контур сайта на okis.ru

Давайте также поменяем верхний и нижний контур. Загрузите файл sheet_h.png, затем в редакторе CSS пропишите следующий код:

.art-sheet-tc, .art-sheet-bc {background-image: url(ПУТЬ_К_ФАЙЛУ/sheet_h.png);}

Сохраните изменения и обновите главную страницу сайта. Верхний и нижний контуры поменялись.

Поздравляю! Вы дошли до завершающего урока по изменению дизайна сайта на ОКИСе. Теперь Вы знаете, как сделать бесплатный сайт на okis.ru, и, как поменять основные составляющие дизайна сайта на ОКИСе. В следующем уроке мы подведём итоги и обсудим все самые важные моменты, связанные с созданием, ведением и продвижением сайта.

Урок№8. Всё, что нужно знать новичку об ОКИС.РУ (OKIS.RU)
Изменение дизайна на ОКИС.РУ (OKIS.RU). Общий список CSS-кодов

Дополнительные уроки по созданию и ведению сайта на OKIS:
Урок№9. Как организовать общение на сайте, сделанном на okis.ru
Урок№10. Как активировать сайт на okis.ru с помощью WebMoney
Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы

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

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

Опубликовал admin 10 июля, 2011 | 13 комментариев | Просмотров: 5,570

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

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

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

Метки:

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

13 комментариев к заметке «Урок№7. Как поменять контур сайта на okis.ru»

  • Алексей
    25 марта, 2012, 10:11
    Цитировать

    у меня слева только меню...а как сделать чтоб меню еще было под шапкой??? я совсем еще новичок в этом деле

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

    Цитата:

    у меня слева только меню...а как сделать чтоб меню еще было под шапкой??? я совсем еще новичок в этом деле

    У ОКИСА нет возможности создания меню под шапкой. Разве что можно вставить код пунктов меню там, где должна быть реклама, но смотреться будет не очень хорошо.

  • Алексей
    25 марта, 2012, 15:40
    Цитировать

    forexman.okis.ru вот мой блог, в шапке хотел увеличить текст но увеличилось только слово «форекс» а остальное осталось без изменений , как увеличить остальное?

  • Алексей
    25 марта, 2012, 15:50
    Цитировать

    память моего блога всеволишь 2 мегабайта, каким образом можно увеличить память? может что то купить надо?

  • admin
    25 марта, 2012, 16:46
    Цитировать

    Цитата:

    forexman.okis.ru вот мой блог, в шапке хотел увеличить текст но увеличилось только слово «форекс» а остальное осталось без изменений , как увеличить остальное?

    Если у Вас есть какой-то вопрос по Окис, то задавайте, пожалуйста, его в соответствующем уроке. Данный урок посвящён изменению контура сайта, сделанного на окисе. Все уроки можно посмотреть на странице webcaum.ru/sozdanie-sajta...ajt-na-okis.html — если подходящего урока нет, то вопрос можно задать на данной странице, либо на странице «Изменение дизайна на ОКИС.РУ (OKIS.RU). Общий список CSS-кодов» — webcaum.ru/uroki-sajtostr...k-css-kodov.html

    Если Вы хотите поменять размер текста под заголовком Форекс (h1), т.е. размер слогана, который на данный момент звучит «Приветствую Вас на моем сайте!!!», то нужно указать стили:

    .art-logo-text {color: #код_цвета_слогана !important; font-size: нужный размер;}

    Как увеличить всё остальное можно также посмотреть на странице webcaum.ru/uroki-sajtostr...k-css-kodov.html или на форуме ОКИС

  • admin
    25 марта, 2012, 16:52
    Цитировать

    Цитата:

    память моего блога всеволишь 2 мегабайта, каким образом можно увеличить память? может что то купить надо?

    ОКИС в админке по этому поводу пишут следующее: «Максимальный размер загружаемых файлов — 2 мб. Если нужно загрузить больше, то советуем закачать их на DepositFiles. На сайте достаточно будет поставить ссылку на загруженный файл.»

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

  • Яна
    28 декабря, 2012, 11:24
    Цитировать

    Здравствуйте!

    Контур на моем сайте выглядит как бы смещенным на правый бок и вниз, толщина контура получается не одинаковой, выглядит очень не красиво...( Подскажите пожалуйста как это можно исправить.

    Заранее спасибо и с наступающем Вас!

    Мой сайт kaktusenok-ru.okis.ru

  • admin
    30 декабря, 2012, 20:01
    Цитировать

    Цитата:

    Здравствуйте!

    Контур на моем сайте выглядит как бы смещенным на правый бок и вниз, толщина контура получается не одинаковой, выглядит очень не красиво...( Подскажите пожалуйста как это можно исправить.

    Заранее спасибо и с наступающем Вас!

    Мой сайт kaktusenok-ru.okis.ru

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

    А так Ваш сайт хорошо смотрится и без всякого контура.

  • Яна
    30 декабря, 2012, 20:11
    Цитировать

    Спасибо, что нашли время ответить в предпраздничной суете)

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

  • admin
    30 декабря, 2012, 20:31
    Цитировать

    Цитата:

    Спасибо, что нашли время ответить в предпраздничной суете)

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

    Я бы на Вашем месте попробовал убрать контуры вообще, чтобы посмотреть, как будет сайт выглядеть.

    Сделать это можно, прописав следующие коды:

    .art-sheet-tr, .art-sheet-tl, .art-sheet-br, .art-sheet-bl {background: none;}

    .art-sheet-cr, .art-sheet-cl {background: none;}

    .art-sheet-tc, .art-sheet-bc {background: none;}

    А если Вы хотите поменять всё-таки контур, то его нужно для начала нарисовать.

    Можно скачать ниже представленные картинки и обработать их, не меняя размеров, слегка в фотошопе, чтобы контур подходил по дизайну:

    kaktusenok-ru.okis.ru/shablons/343/images/sheet_s.png — это контур уголков по умолчанию

    kaktusenok-ru.okis.ru/shablons/343/images/sheet_v.png — это контур слева и справа по умолчанию

    kaktusenok-ru.okis.ru/shablons/343/images/sheet_h.png — это контур снизу и сверху по умолчанию

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

    У Вашего сайта поехал контур, потому что Вы его взяли из этого урока. Но у меня совершенно другой шаблон и размеры контура моего сайта отличаются от размеров контура Вашего сайта.

    Например, в данном уроке размер файла sheet_s.png — 76×76. В Вашем же случае размер квадратика должен быть 64×64 (это размер по умолчанию для уголков kaktusenok-ru.okis.ru/shablons/343/images/sheet_s.png). Вам нужно придерживаться тех размеров, которые установлены по умолчанию в Вашем шаблоне.

  • Яна
    30 декабря, 2012, 23:00
    Цитировать

    Огромное спасибо за столь подробные разъяснения. Опробую оба варианта.

    С Новым годом Вас! Пусть в новом году сбудутся все Ваши желания!!

  • Михаил
    23 июля, 2013, 21:15
    Цитировать

    Все так и сделал, НО... Торчат уголки серого цвета, а обводки вообще не видно((( (7nebo.okis.ru)

  • admin
    27 июля, 2013, 16:47
    Цитировать

    Цитата:

    Все так и сделал, НО... Торчат уголки серого цвета, а обводки вообще не видно((( (7nebo.okis.ru)

    На данный момент на Вашем сайте не вставлены те стили, которые представлены в уроке, поэтому я не могу пока ничего сказать по поводу того, где ошибка. Сохраните у себя в стилях все стили, и я посмотрю, что не так.

    Также не забывайте, что у нас с Вами разный шаблон, поэтому могут отличаться размеры картинок. Это тоже нужно учитывать.

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

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