Главная » Бизнес в Интернете

Дерни веревочку или необычный уголок для сайта

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

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

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

Ну просто так и хочется за него потянуть!

Как это выглядит, можете посмотреть по ссылке:

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

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

<!-- содержимое Вашей страницы -->
здесь будет содержимое Вашего одностраничного сайта
<!-- конец содержимого -->
и

<!-- Содержимое выпадающего окна -->
а здесь должно быть то, что выпадет после нажатия на уголок
<!-- конец содержимого -->

Ставите то, что Вам нужно: картинки в папку img и указание на них в коде, текст и ссылки на Ваш продукт.


Если Вы плохо разбираетесь в коде, ничего страшного: необязательно прописывать код руками. Откройте Dreamweaver или другой html редактор, и пропишите то, что Вам нужно, сначала для одной части, а затем вставьте код, а потом для другой части, и тоже вставьте код.

Если нужно, пропишите свои стили, или в файлах CSS, или прямо в коде файла index.html. Первый вариант, конечно, будет более профессиональным. Прописать можно фон, шрифт, цвет и размер текста, ссылок и заголовков, и многое другое.

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

красочный уголок для сайтаМы рассмотрели, как сделать одностраничный html сайт с таким уголком, но, думаю, такой уголок можно поставить и на блоге. В этом случае все будет немного сложнее. Нужно знать коды html и CSS, чтобы прописать правильно все ссылки и связи между картинками и стилями. Думаю, это будет неплохой задачей для продвинутого вебмастера. Оставляю эту задачу тем, кому это интересно. В мои планы такой уголок на блог ставить не входит, и в любом случае, даже если я его и поставлю. вряд ли я смогу просто все это описать.

А на одностраничном сайте такой уголок, действительно, хорошо смотрится. Желаю удачи в его установке.


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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:


Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

4 комментария »

  • Вера пишет:

    Понравился столь необычный способ попасть на новую страничку. Мне такое очень нужно. Вот только, как правильно делать, я не поняла. Может быть вы для таких, как я чайников, все расскажете в скриншотах?

  • Александр Ризун (автор) пишет:

    На самом деле, там все не так уж и сложно. Просто пошагово все делайте.

  • Вера пишет:

    «Если нужно, пропишите свои стили, или в файлах CSS, или прямо в коде файла index.html. Первый вариант, конечно, будет более профессиональным. Прописать можно фон, шрифт, цвет и размер текста, ссылок и заголовков, и многое другое.» Вот это особо не сложно, просто надо пошагово делать!

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

  • Александр Ризун (автор) пишет:

    Желаю успеха в поисках! Даю готовое — и все равно возмущения. То, что Вы процитировали — это для тех, кто хоть чуть-чуть разбирается в HTML и CSS, или для тех, кому это интересно. Если Вы заметили, там написано «если нужно». То есть, это не обязательно. А то, что я даю в архиве, достаточно установить на хостинг, и оно будет работать. Даже новичку, понимающему, что такое хостинг, и умеющему заливать туда сайты, это должно быть понятно.

    Впрочем, подозреваю, что Вы ничего и не пытались делать, а просто прочли статью. Если хотите пошагово то, что Вы процитировали — изучайте HTML и CSS, в одной статье у меня все это не уместится.

Оставьте свой комментарий и ответный визит Вам обеспечен