|
Скачать для фотошопа и сайта Вебмастеру Уроки и видео уроки Новостной блок своими руками |
Новостной блок своими руками |
Offline
В этом уроке мы с Вами будем учиться делать блок с прокручивающимися в нем новостями. Вот как он выглядит:
Блок новостей Итак, по шагам. Шаг 1. Создайте основу навигации в таком формате: Code <div> <div> <div id="vscroll0" style="display:none;z-index:0;"> <ul> <li delay=2>3/14/08 - <a href="sample_link.html">Наша компания открыла новый офис в Уфе. Он находится на ул. Шашина 5.</a><br><br></li> <li delay=2>3/15/08 - <a href="sample_link.html">Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!</a><br><br></li> <li delay=2>3/16/08 - <a href="sample_link.html">Наша компания представила новый образец робота Willi 6ex.</a><br><br></li> <li delay=2>3/18/08 - <a href="sample_link.html">В ближайшие дни планируется промоакция по продаже дешевых роботов!</a><br><br></li> <li delay=2>3/19/08 - <a href="sample_link.html">Новые возможности для частных инвесторов! Небывалые процентные ставки!.</a><br><br></li> </ul> </div> </div> </div> Если у Вас будет больше пунктов в новостях, то просто добавляйте их в новые контейнеры Code <li></li> Шаг 2. После основного кода, вставьте следующий скрипт: Code <script language="JavaScript"> function vscroll_data0() { this.enable_visual_design_mode = false; this.container_width = 160 this.container_height = 190 this.top_pause_offset = 10 this.initial_scroll_delay = 0 this.animation_delay = 20 this.animation_jump = 2 this.animation_delay_mac = 100 this.animation_jump_mac = 10 this.container_styles = "background-color:#f5f5f5; background-image:; border-style:solid; border-color:#000000; border-width:1px; padding-right:10px; padding-left:10px; " this.item_link_styles = "margin-bottom:0px; background-color:; background-image:; color:#1e51c8; text-align:; font-family:Arial; font-size:13px; font-weight:; text-decoration:none; border-style:none; border-color:; border-width:0px; padding-top:; padding-right:; padding-bottom:; padding-left:; " this.item_link_hover_styles = "background-color:; background-image:; color:; text-align:; font-family:Arial; font-size:; font-weight:; text-decoration:underline; " this.item_styles = "margin-bottom:15px; background-color:; background-image:; color:#212e43; text-align:; font-family:Arial; font-size:13px; font-weight:; text-decoration:none;"} </script> Здесь Вы можете эксперементировать со значениями и стилями, добиваясь того внешнего вида, который Вам нужен. Code </body> На этом процесс закончен, проверяйте результат во всех браузерах, всё должно работать как надо. Если вдруг блок будет отображаться, а новости не побегут, то скачайте фаил с образцом исходного кода и попробуйте вставить код из него вместо своего. |
| |||
| |||