Верстка сайта с нуля. Часть 3}
Приветствую! Наконец-то мы добрались до третьего (заключительного) урока из серии статей по созданию 5 страничного сайта с нуля. Сегодня нам предстоит создать 4 внутренние страницы нашего сайта.
ОК, приступим к верстке. Откройте папку с файлами, которые мы создали в предыдущем уроке, скопируйте файл index.html. Переименуйте index.html в services.html и сохраните в той же директории, где лежат остальные файлы. Затем откройте файл в программе, которую вы используете для написания кода. Выделите код текстового содержания и удалите. Нам нужно удалить весь контент страницы и оставить только код шапки и подвала сайта. После удаления у вас должен остаться следующий код:
Html
<div id="header"> <!—Код заголовка-->
<div id="top-elements"><!—Элементы заголовка-->
<div id="logo"><!—Код логотипа-->
<img src="images/logo.png" alt="Welcome To Your PROject" /> </div> <!—Конец кода логотипа-->
<div id="nav-bar"><!—Код навигационной панели-->
<ul class="navlinks">
<li class="current"><a href="index.php">Home</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="products.php">Products</a></li>
<li><a href="testimonials.php">Testimonials</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div><!—Конец кода навигационной панели -->
</div><!—Конец кода элементов заголовка-->
<div id="featured"><!—Код первого текстового блока-->
<div class="featured-text"><!—Текст первого текстового блока-->
<h1 class="featured">featured text here 01</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor est et ante euismod vel euismod tortor ornare. Quisque turpis augue, iaculis vel luctus non, dapibus a ante. Quisque vitae turpis augue. Nulla facilisi. Continue Reading...</p>
</div><!—Конец текста текстового блока-->
<div id="featured-image01"> <!—Изображение первого текстового блока-->
<div class="featured-buttons"> <!—Код кнопок вперед/Назад текстового блока-->
<div class="featured-btn"> <img src="images/next_btn.png" alt="Next" />
<div class="featured-btn"><img src="images/prev_btn.png" alt="Previous" /> </div>
</div>
</div><!—Конец кода кнопок вперед/Назад текстового блока-->
</div><!—Конец кода изображения-->
</div><!—Конец кода первого текстового блока-->
</div><!—Конец кода заголовка сайта-->
Здесь будет располагаться код, который мы будем добавлять
</div><!—Конец контейнера-->
<div id="footer"><!—Подвал сайта-->
<div id="footer-content"><!—Контент подвала-->
<p>Copyright © your project | All Rights Reserved</p>
<p>Design By <a href="http://www.richard-carpenter.co.uk">Richard Carpenter</a></p>
<p> </p>
<p> <a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" /> </a><a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> </p>
</div><!—Конец контента-->
</div><!—Конец подвала-->
Теперь можно добавить изменения в первоначальный код для создания страницы «Услуги». Мы будем добавлять код подобно тому, как мы ранее добавляли текстовые блоки на главной странице нашего сайта, только на этот раз ширина блока будет составлять 900 пикселей. Для этого добавим следующий код:
<div class="services"><!—Начало блока-->
<div class="services-inside">
<h2>a content title here</h2>
<h2 class="boxtitle2">May 20, 2009</h2>
<p>SOME TEXT HERE</p>
</div>
</div><!—Конец блока-->
Как видите, код очень похож на код главной страницы, отличие состоит только в названии слоев. Стили CSS будут тоже весьма похожими:
Css
.services {
float: left;
border: 1px solid #121212;
margin-bottom: 15px;
float: left;
width: 898px;
}
.services-inside {
background-color: #0c0c0c;
border: 1px solid #030303;
float: left;
width: 876px;
padding: 10px;
}
.services-inside p {
padding-top: 10px;
}
В зависимости от того, что вы хотите разместить на странице «Услуги», вам, возможно, придется добавить ряд дополнительных стилей. Например, если нам нужно добавить список предоставляемых услуг и несколько изображений, нам придется добавить стили для списка и изображений к стилям страницы услуги файла style.css. Ниже представлен код для моей страницы «Услуги», на которой расположен простой список и несколько изображений.
Html
<div class="services-inside"> 03
<h2>a content title here</h2>
<h2 class="boxtitle2">May 20, 2009</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit. <strong><em><a href="#">Etiam tellus ipsum, posuere nec molestie in, ultrices vel enim</a></em></strong><a href="#">.</a> Donec vel est orci. Donec diam leo, fringilla sit amet vehicula eu, dictum quis elit.</p>
<p> </p>
<h2>Services</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis.</p>
<ul class="service-list">
<li>Service #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #5 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
<h2> </h2>
<h2>another header goes here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis.</p>
<img src="thumbnails/01.gif" alt="01" width="200" height="170" class="service-img" /><img src="thumbnails/02.gif" alt="02" width="200" height="170" class="service-img" /><img src="thumbnails/03.gif" alt="03" width="200" height="170" class="service-img" /><img src="thumbnails/04.gif" alt="04" width="200" height="170" class="service-img" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis.</p>
</div>
</div><!—Конец блока-->
Теперь осталось только определить стили для тегов списка и изображений внутри файла стилей.
Css
padding-left: 10px;
font-size: 0.7em;
color: #FFFFFF;
margin-left: 40px;
line-height: 18px;
margin-top: 10px;
margin-bottom: 10px;
}
.service-img {
padding: 5px;
background-color: #000000;
border: 1px solid #383838;
margin-left: 6px;
margin-top: 10px;
margin-bottom: 5px;
}
Теперь наша страница с услугами будет выглядеть следующим образом:
Таким образом, при создании новых страниц мы используем стили в зависимости от того, что мы будем размещать на данной странице, кроме того, мы можем использовать уже определенные стили. Мы закончили верстку страницы «Услуги», теперь можно перейти к странице «Продукты». Скопируйте файл services.html и, переименовав его в products.html, вставьте в директорию, в которой мы храним все файлы сайта. Затем откройте файл products.html в программе, которую вы используете для написания кода. Сохраните все классы, которые использовались при создании страницы «Услуги», просто удалите все содержание классов.
После удаления всего ненужного кода из классов, вы должны получить подобный код. (Теперь нужно уяснить себе, что при изменении css-стилей страницы «Услуги», изменения скажутся и на странице «Продукты». Мы можете обойти это ограничение, используя те же стили, но изменив ID класса).
Html
<div class="services-inside">
<h2>product #1 here</h2>
<h2 class="boxtitle2">product short info</h2>
Здесь расположен контент страницы
</div>
</div><!—Конец блока-->
Наша страница «Продукты» будет включать три блока, т.е нам нужно создать один блок, а затем скопировать код дважды для создания еще двух блоков.
<div class="services"><!—Код блока №1-->
<div class="services-inside">
<h2>product #1 here</h2>
<h2 class="boxtitle2">Короткое описание продукта</h2>
Контент
</div>
</div><!—Конец блока №1-->
<div class="services"><!—Код блока №2-->
<div class="services-inside">
<h2>product #1 here</h2>
<h2 class="boxtitle2">Короткое описание продукта</h2>
Контент
</div>
</div><!—Конец блока №2-->
<div class="services"><!--Код блока №3-->
<div class="services-inside">
<h2>product #1 here</h2>
<h2 class="boxtitle2">Короткое описание продукта</h2>
Контент
</div>
</div><!--Конец блока №3-->
Теперь остается только вставить код для отображение контента текстовых блоков. В зависимости от типа контента и способа его отображения мы будет использовать соответствующие css-стили. Посмотрите на код ниже. В данном коде уже вставлен весь необходимы контент.
Html
<div class="services-inside">
<h2>product #1 here</h2>
<h2 class="boxtitle2">Короткое описание продукта</h2>
<p><img src="thumbnails/03.gif" alt="Product Sample" width="200" height="170" class="imgfloat-right" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit. <strong><em><a href="#">Etiam tellus ipsum, posuere nec molestie in, ultrices vel enim</a></em></strong><a href="#">.</a> Donec vel est orci. Donec diam leo, fringilla sit amet vehicula eu, dictum quis elit.</p>
<ul class="service-list">
<li>Service #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div><!--Конец блока №1-->
<div class="services"><!--Код блока №2-->
<div class="services-inside">
<h2>product #2 here</h2>
<h2 class="boxtitle2">Короткое описание продукта</h2>
<p><img src="thumbnails/01.gif" alt="Product Sample" width="200" height="170" class="imgfloat-left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit. <strong><em><a href="#">Etiam tellus ipsum, posuere nec molestie in, ultrices vel enim</a></em></strong><a href="#">.</a> Donec vel est orci. Donec diam leo, fringilla sit amet vehicula eu, dictum quis elit.</p>
<ul class="service-list">
<li>Service #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div><!--Конец блока №2-->
<div class="services"><!--Код блока №3-->
<div class="services-inside">
<h2>product #1 here</h2>
<h2 class="boxtitle2">Короткое описание продукта</h2>
<p><img src="thumbnails/03.gif" alt="Product Sample" width="200" height="170" class="imgfloat-right" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit. <strong><em><a href="#">Etiam tellus ipsum, posuere nec molestie in, ultrices vel enim</a></em></strong><a href="#">.</a> Donec vel est orci. Donec diam leo, fringilla sit amet vehicula eu, dictum quis elit.</p>
<ul class="service-list">
<li>Service #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div><!--Конец блока №3-->
Каждый текстовый блок включает текстовый параграф, рядом с которым справа или слева расположено изображение, ниже мы расположили небольшой список. Мы можем использовать стили тега, которые мы уже определили ранее, а также стили для выведения списков, определенные ранее. Все, что нам остается сделать, это определить стили расположения изображений внутри текстового блока (справа или слева от текста). Мы сделаем это с помощью следующих css стилей с файл style.css:
Css
.imgfloat-left {
float:left;
padding: 5px;
background-color: #000000;
border: 1px solid #383838;
margin-right: 6px;
margin-bottom: 6px;
margin-top: 6px;
margin-left: 6px;
}
.imgfloat-right {
float:right;
padding: 5px;
background-color: #000000;
border: 1px solid #383838;
margin-left: 6px;
margin-bottom: 6px;
margin-top: 6px;
margin-right: 6px;
}
Сохраните документы и протестируйте получившиеся результаты в браузере. Ниже представлен результат, полученный мной.
Как вы уже поняли, верстка страницы «Продукты» закончена. Теперь перейдем к верстке страницы «Отзывы». Скопируйте файл services.html, переименуйте его в testimonials.html и вставьте в директорию с файлами нашего сайта. Опять же не забудьте удалить код между заголовком и подвалом сайта. На странице «Отзывы» мы создадим текстовые блоки, подобные блокам на странице «Продукты», однако сверху каждого блока мы добавим рейтинг отзыва в виде звездочек. Код будет выглядеть следующим образом:
Html
<div class="testimonial-inside">
<h2>customer #1</h2>
<h2 class="boxtitle2">Thomas davis</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit. </p>
<div class="rating">
<img src="images/star.png" alt="1" /><img src="images/star.png" alt="2" /><img src="images/star.png" alt="3" /><img src="images/star.png" alt="4" /><img src="images/star.png" alt="5" />
</div>
</div>
</div><!—Конец блока-->
Теперь нам нужно задать стили для использованных элементов. Мы будем использовать те же стили, что и для страницы «Услуги», но создадим специальный класс testimonial. Кроме того, нам придется создать специальный класс rating, предназначенный для звездочек-рейтинга. CSS код для нашей странички «Отзывы» будет выглядеть следующим образом:
Css
.testimonial {
float: left;
border: 1px solid #121212;
margin-bottom: 15px;
float: left;
width: 898px;
margin-right: 25px;
background-color: #0c0c0c;
}
.testimonial-inside {
background-color: #0c0c0c;
border: 1px solid #030303;
float: left;
width: 876px;
padding: 10px;
}
.testimonial-inside p {
padding-top: 10px;
}
.rating {
float: left;
height: 18px;
width: 876px;
margin-top: 10px;
}
.rating img{
float: right;
}
Теперь можно скопировать и вставить код блока, создав таким образом необходимое число блоков-отзывов. После этого вам останется только поменять текст отзыва внутри блока. Моя страница «Отзывы» выглядит следующим образом:
Отлично! Мы сверстали 3 дополнительные страницы. Осталось сверстать только страницу "Контакты" и в вашем распоряжении будет рабочий 5-страничный сайт. Как всегда копируем файл services.html и, переименовав его в contact.html, и сохраняем в директорию с сайтом. Для страницы "Контакты" мы не будем создавать новые классы, а просто используем классы страницы «Услуги».
Html
<div class="services-inside">
<h2>contact us</h2>
<h2 class="boxtitle2">get in touch using the contact form below</h2>
Контент
</div>
</div><!—Конец блока-->
На странице «Контакты» мы создадим контактную форму, плюс небольшой текстовый блок. Для создания полей для ввода данных контактной формы нам нужно будет использовать специальные классы. Определять классы мы будем в файле style.css.
Html
<div class="services-inside">
<h2>contact us</h2>
<h2 class="boxtitle2">get in touch using the contact form below</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit. Donec vel est orci. Donec diam leo, fringilla sit amet vehicula eu, dictum quis elit. </p>
<form id="contact" name="contact" method="post" action="">
<label>
<input name="textfield" type="text" class="textfield" id="textfield" value="Name:" size="45" />
</label>
<br />
<label>
<input name="textfield2" type="text" class="textfield" id="textfield2" value="E-Mail:" size="45" />
</label>
<br />
<label>
<input name="textfield3" type="text" class="textfield" id="textfield3" value="Subject:" size="45" />
</label>
<br />
<label>
<textarea name="textarea" cols="45" rows="10" class="textbox" id="textarea">Information:</textarea>
</label>
<br />
<label>
<input name="button" type="submit" class="form-button" id="button" value="Submit" />
</label>
<label>
<input name="button2" type="reset" class="form-button" id="button2" value="Reset" />
</label>
</form>
</div>
</div><!—Конец блока-->
CSS стили страницы «Контакты» будут выглядеть следующим образом:
Css
.textfield, .textbox {
background-color: #000000;
border: 1px solid #383838;
padding: 2px;
margin-top: 5px;
margin-bottom: 5px;
color: #CCCCCC;
font-style: italic;
}
.form-button {
background-color: #000000;
border: 1px solid #383838;
padding: 4px;
color: #CCCCCC;
margin-right: 5px;
font-size: 0.8em;
}
#contact {
margin-top: 10px;
width: 300px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
Наша страница контакты после определения CSS стилей будет выглядеть следующим образом:
Итак, наш сайт готов. Прежде чем сайт заработает, вам нужно подредактировать ссылки панели навигации, кроме того, не забудьте задать ID "current" для каждой страницы (это нужно сделать для того, чтобы при нахождении на странице «Контакты», например, ссылка «Контакты» отображалась внутри круга, т.е грубо говоря, чтобы пользователь мог понять, на какой странице сайта он находится).
Вот и все! Надеюсь эта серия уроков была Вам полезна и теперь вы сможете самостоятельно создать макет в Фотошопе и сверстать несложный сайт с внутренними страницами. Это не так сложно, как многие думают. Если вы смогли сверстать главную страницу, верстка внутренних страниц не составит труда. Ну что же, до свидания. Следите за обновлениями на сайте.
Комментарии:
 admin |
22 06 11 |
НАША 