Назад
Создание прибыльного бизнеспроекта на базе сайта

SEO + ASP.NET 4.0 + БИЗНЕСМОДЕЛЬ = ПРИБЫЛЬНЫЙ САЙТ

Инструмент быстрого построения прибыльного онлайн бизнеса своими силами без капиталовложений за 4 месяца все подробности на SEO + ASP.NET 4.0.

Подписка на рассылку

МАГИЯ C#!

Создание вебсайта с формой автоматического приема онлайн платежей по WebMoney!
Ваше имя
Ваш e-mail
Уроки по ASP.NET c# ADO.NET
     

18 видеоуроков
более 5 часов
по созданию сайта,
выполняющего
продажи ваших продуктов (физических/электронных) на полном автомате с личным оповещением на e-mail, а также ...
DVD-курс по C#, .NET

3 часть. Введение в ASP.NET. WebServices Профессиональная подготовка разработчика по языку C# на платформе .NET

asp.net webservices dvd c# gridview Гудок курс Более 65 подробных видео уроков по теоретическим основам технологии сайтостроения ASP.NET и процессу создания и использованию вебсервисов.

DVD-курс по C#, .NET

2А часть. XML/TXT в аспекте ADO.NET Профессиональная подготовка разработчика по языку C# на платформе .NET

xml txt dvd c# ADO ADO.NET Гудок курс 70 подробных видео уроков по работе с форматами xml, txt, по работе с файлами и директориями. Разработка высокоорганизованных свойств для значительного сокращения объема исходного кода и облегчения дальнейшей модификации и многое-многое другое...

DVD-курс по C#, .NET

1 часть. Windows Forms Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок

185 подробнейших уроков (70 часов) лекций в формате видеоуроков по теории языка c# и платформы .NET. Практическое закрепление теоретического материала на примере создания Windows Forms - приложения видеоигры "Tanks"

DVD-курс по C#, .NET

2 часть. ADO.NET/SQL Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок ADO.NET sql

165 подробных видео уроков по созданию приложений распределенных баз данных на примере разработки проектов с использований технологий ADO.NET (Connected model, Disconnected model, Typed DataSet, ...)

Бодибилдинг
Программы тренировок для занятий штангой, гантелями; описание тренажеров

Я записываю курсы!
  Курс валют

НБУ курс евро






Урок верстки из .psd



Приветствую Вас уважаемые читатели сайта http://skillcoding.com. В этом уроки мы будем с Вами верстать сайт в Div-элементах. Демо версию можно посмотреть на примере.

Для этого нам потребуется создать 3 папки: CSS, img, JS и, само собой, файл index.html. Хочу акцентировать ваше внимание на том, что блоки div идут последовательно друг за другом. Итак, начнём с html разметки.

Нам необходимо подключить JavaScript и CSS:





Далее мы будем по очерёдности делать разметку логотипа и поиска:

<div id="logo"></div>
<div id="poisk"><
form action="#" method="post" name="search">
<input name="search" 
type="text" id="search_text" 
title="Search">
<input name="submit" 
type="submit" value="Поиск" id="submit_search">
</form></div>

После чего реализуем шапку с меню:


Теперь разберёмся с туловищем сайта. Тут всё намного проще:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo, nunc in commodo fringilla, dolor ante cursus sapien, non vulputate ligula ante in neque. Suspendisse tellus felis, vestibulum ac aliquet et, faucibus vitae purus. Ut ullamcorper tincidunt diam, a suscipit mauris aliquam et. Cras ultrices augue nec odio congue hendrerit. Curabitur et nulla vel lectus placerat sodales. Etiam non ante augue. Donec in nunc sapien, sit amet sagittis lorem. Nam a arcu at leo iaculis condimentum. Phasellus auctor faucibus lectus, at viverra purus facilisis sed.

Вот мы и закончили с HTML разметкой. Вот что у нас пока получилось:

Теперь приступим к CSS правилам.Начнём с логотипа и поиска по сайту. Да не забываем про стили для тега body:

body { /* Создаём Фон*/
background:url(../images/bg.jpg) 
no-repeat center;/*Фон свечение*/
width:1280px;/*Ширина*/
height:683px;/*Высота*/
background-color:#191919;/*Фон всей страницы*/
margin:0;/*Внешний отступ*/
padding:0;/*Внутренний отступ*/
}

div#logo {/*Блок с логотипом*/
background:url(../images/logo.png) no-repeat;
width:344px;
height:62px;
/*Позиционируем и указываем кординату*/
position:absolute;
margin-top:50px;
margin-left:150px;
}
div#poisk {/*Блок с поиском*/
background:url(../images/bg_poisk.png) 
no-repeat;
width:268px;
height:48px;
position:absolute;
padding:5px;
margin-top:50px;
margin-left:800px;
}

/*CSS хак для Mozilla*/
input#search_text, x:-moz-any-link 
{ border:none;/*Убираем рамку*/
background:url(../images/text_search.png) 
no-repeat;
width:213px;
height:35px;
padding-left:5px;/*Внутренние отступы*/
padding-top:10px;
float:left;
color:#5b5b5b;
font-size:11px;
font-style:italic;/*курсив - в окошке поиска по сайту*/
}

/*Тоже самое, что указано выше*/
input#search_text {
border:none;
background:url(../images/text_search.png)
 no-repeat;
width:213px;
height:35px;
padding-left:5px;
float:left;
color:#5b5b5b;
font-size:11px;
font-style:italic;
}

/*Кнопка поиска*/
input#submit_search {
border:none;
background:url(../images/submit_search.png) 
no-repeat;
width:39px;
height:33px;
text-indent:-9999px;
margin-left:-7px;
margin-top:1px;
}

Теперь кодируем header c меню:

div#glav_blog { /*Блок с нашей шапкой*/
background:url(../images/header_3d.png);
margin-top:210px;
margin-left:150px;
width:951px;
height:58px;
position:absolute;
}

/*Навигационное меню ненумерованного списка*/

#nav-reflection {width: 890px;list-style: none;
margin-top:-42px; margin-left:6px;}
#nav-reflection li {width: 100px;height:200px;
float: left; margin-left:20px;}
#nav-reflection a, #nav-reflection a:visited,
#nav-reflection a:hover {
width: 100px;
height: 100px;
text-indent: -9999px;
overflow: hidden;
background: url(../images/menu.png) no-repeat;
display: block;
margin-bottom:-27px;
}

/*Тень от нашего меню*/
#nav-reflection span {
width: 100px;
height: 37px;
text-align: center;
background: url(../images/shadow.png) no-repeat;
display: block;
}

/*Двигаем наш спрайс*/
#nav-reflection li.button-color-1 a 
{background-position: 0px 0px;}
#nav-reflection li.button-color-2 a 
{background-position: -120px 0px;}
#nav-reflection li.button-color-3 a 
{background-position: -240px 0px;}
#nav-reflection li.button-color-4 a 
{background-position: -359px 0px;}
#nav-reflection li.button-color-5 a 
{background-position: -480px 0px;}
#nav-reflection li.button-color-6 a 
{background-position: -600px 0px;}
#nav-reflection li.button-color-7 a 
{background-position: -720px 0px;}

Теперь займёмся блоком content - каркасом туловища сайта:

div#content {
background:url(../images/bg_text.png) repeat-x;
background-color:#FFFFFF;
padding:0px 10px 0px 10px;
width:930px;
margin-top:268px;
margin-left:150px;
position:absolute;
}

Напоследок, чтобы закончить с CSS, расставим внутри блока "контент" всё по своим местам:


/*Вставляем title. Для динамичности лучше прописать текстом*/

p#title {
background:url(../images/title.png) no-repeat;
width:922px;
height:34px;
margin-top:45px;
}
p#title2 {
background:url(../images/title.png) no-repeat;
width:922px;
height:34px;
margin-top:45px;
}

/*Параграф с текстом*/
p#text {
color:#5a5a5a;
font:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
}

/*Последующие стили для контента*/
div#saitbar_1 {
padding:0px 30px 0px 0px;
margin-top:-10px;
float:left;
}
div#saitbar_2 {
margin-top:-10px;
padding:0px 40px 0px 0px;
float:left;
}
p#s1 a {
color:#323232;
text-decoration:none;
}
p#s1 a:hover {
color:#0b7fbd;
text-decoration:underline;
}
p#s1 img {
margin-top:-5px;
padding-right:5px;
}
div#saitbar_3 {
margin-top:-10px;
padding:0px 30px 0px 0px;
float:left;
}
div#saitbar_4 {
margin-top:-10px;
padding:0px 30px 0px 0px;
float:left;
}
div#saidbari {
width:930px;
margin-left:15px;
}
#slid_1 {
float:left;
margin-left:30px;
}
#slid_2 {
float:left;
margin-left:30px;
}
#slid_3 {
float:left;
margin-left:30px;
}

/*Вставляем блок с footer*/
div#footer {
width:930px;
height:50px;
position:absolute;
margin-top:450px;
}

/*Вставляем линию в footer*/

    
#line_footer {
background:url(../images/line_footer.png) no-repeat;
width:951px;
height:11px;
margin-left:-10px;
margin-top:15px;
}

/*Стили внутри footer*/
.style1 {
color:#0295da;
font-weight:bold;
}
.html {
color:#b4b4b4;
position:absolute;
margin-left:770px;
margin-top:0px;
}
.copir {
color:#b4b4b4;
position:absolute;
margin-top:0px;
}

Ну вот мы и закончили с CSS и у нас должно получится следующее:

Но ещё несовершенство, давайте добавим нашему меню JavaScript:

$(document).ready(function() {
// Выбираем идентификатор #nav-reflection
$("#nav-reflection li").append(""); 
// При наведении двигаем наше меню вверх, а тень вниз
$("#nav-reflection a").hover(function() 
{
$(this).stop().animate({ marginTop: "-10px" }, 200);
$(this).parent().find("span").stop().animate(
{ marginTop: "18px", opacity: 0.30 }, 200);
},function()
{
$(this).stop().animate({ marginTop: "0px" }, 300);
$(this).parent().find("span").stop().animate(
{ marginTop: "1px", opacity: 1 }, 300); });
});

И незабываем подключить библиотеку Jquery, как указано выше. И после чего мы добавили нашему меню немного оригинальности.

Напоследок доработаем поиск по сайту:

$(document).ready(function(){
$("input:text, textarea, input:password").each(function(){
if(this.value == '')
this.value = this.title;
});
$("input:text, textarea, input:password").focus(function(){
if(this.value == this.title)
this.value = '';
});
$("input:text, textarea, input:password").blur(function(){
if(this.value == '')
this.value = this.title;
});
$("input:image, input:button, input:submit").click(function(){
$(this.form.elements).each(function(){
if(this.type =='text' || 
    this.type =='textarea' || 
    this.type =='password' ){
if(this.value == this.title && this.title != ''){
this.value='';
}}});});
});

Теперь смотрим на наш результат работы.



Больше информации читайте по теме:



Оценить статью:

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

Частичное, или полное копирование материала данной статьи возможно лишь при размещении ссылки на данную страницу.


            
        


        Первый постирующий    22.03.2010 23:11:30
        

Еще б ресурс бы скачать с кодом примера


        2    13.08.2011 7:34:48
        

а что там вверху с цветом происходит ? При каждой перезагрузке меняется...

188.16.71.233




Имя:  


Текст комментариев (не больше 600 знаков):  
введите не более 600 знаков



Введите символы с картинки:
Капча имеет "срок годности". Поэтому, если необходимо обновите страницу.



Черный список покупателей
c# курс Гудок   курс по ASP.NET Гудок   курс по ADO.NET Гудок   курс по XML txt Гудок   курс по рефлексии и многопоточности Гудок