Подписка
Email
Fb
RSS
Twitter
Email

Уроки верстки сайта — заканчиваем с html

PSD в HTMLПриветствую в очередном уроке по верстке сайтов из PSD! Сегодня, как я и обещал в прошлый раз, мы закончим верстать наш html каркас будущего шаблона.

В данном уроке сверстаем блок контента, сайдбар и футер. Повторим то, как применять классы и идентификаторы. Поэтапно все объяснено на видео, а после него приведен код, получившейся html страницы.

Сегодня мы получили:

<!DOCTYPE html>
<html lang="ru-RU">
	<head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title>Тестовый блог</title>
    </head>

	<body>

		<div id="wrap">
			<div id="header">
				<div id="header_top">
					<ul id="navigation">
						<li><a href="#">Главная</a></li>
						<li><a href="#">О нас</a></li>
						<li><a href="#">Сервисы</a></li>
						<li><a href="#">Портфолио</a></li>
						<li><a href="#">Контакты</a></li>
					</ul>

					<div id="RSS">
						<a href="#"><span>RSS блога</span><img src="img/rss_button.png" alt="RSS блога" /></a>
					</div><!--end RSS-->
					<div id="search">
						<img src="img/search_bg.png" alt="Форма поиска по сайту"/>
					</div><!--end search-->
				</div><!--end header_top-->
				<div id="header_bottom">
					<h1>Наш новый блог</h1>
					<p id="slogan">Здесь будет слоган!</p>
					<p id="discription">Здесь будет интересное описание для нашего блога!</p>
				</div><!--end header_bottom-->

			</div><!--end header-->

			<div id="slider">
				<img src="img/slider_bg.jpg" alt="Слайдер" />
			</div><!--end slider-->
			<div id="conteiner">
				<div id="content">
					<p id="content_header">Последние записи</p>
					<div class="post">
						<div class="phead">
							<h2><a href="#">Заголовок поста1</a></h2>
							<div class="meta_top">
								<span class="cat">Категории: <a href="#">Категория один, категория два</a></span>
								<span class="date">Дата: 12 октября 2011г.</span>
							</div>
						</div>
						<div class="entry">
							<img src="img/post_img_one.jpg" alt="изображение поста" />
							<p>
								Комплексное число, следовательно, непредсказуемо. Критерий интегрируемости выведен. Связное
								множество масштабирует эмпирический ряд Тейлора, откуда следует доказываемое равенство. Функция
								выпуклая книзу охватывает аксиоматичный интеграл от функции комплексной переменной, что
								неудивительно. До недавнего времени считалось, что рациональное число охватывает детерминант,
								явно демонстрируя всю чушь вышесказанного.
							</p>
							<a href="#">Читать далее</a>
						</div>
						<div class="meta_bottom">
							<span class="author">Автор: admin</span>
							<span class="com">Комментариев: 10</span>
						</div>
					</div><!--end post-->
					<div class="post">
						<div class="phead">
							<h2><a href="#">Заголовок поста2</a></h2>
							<div class="meta_top">
								<span class="cat">Категории: <a href="#">Категория один, категория два</a></span>
								<span class="date">Дата: 12 октября 2011г.</span>
							</div>
						</div>
						<div class="entry">
							<img src="img/post_img_two.jpg" alt="изображение поста" />
							<p>
								Комплексное число, следовательно, непредсказуемо. Критерий интегрируемости выведен. Связное
								множество масштабирует эмпирический ряд Тейлора, откуда следует доказываемое равенство. Функция
								выпуклая книзу охватывает аксиоматичный интеграл от функции комплексной переменной, что
								неудивительно. До недавнего времени считалось, что рациональное число охватывает детерминант,
								явно демонстрируя всю чушь вышесказанного.
							</p>
							<a href="#">Читать далее</a>
						</div>
						<div class="meta_bottom">
							<span class="author">Автор: admin</span>
							<span class="com">Комментариев: 10</span>
						</div>
					</div><!--end post-->
					<div class="post">
						<div class="phead">
							<h2><a href="#">Заголовок поста3</a></h2>
							<div class="meta_top">
								<span class="cat">Категории: <a href="#">Категория один, категория два</a></span>
								<span class="date">Дата: 12 октября 2011г.</span>
							</div>
						</div>
						<div class="entry">
							<img src="img/post_img_three.jpg" alt="изображение поста" />
							<p>
								Комплексное число, следовательно, непредсказуемо. Критерий интегрируемости выведен. Связное
								множество масштабирует эмпирический ряд Тейлора, откуда следует доказываемое равенство. Функция
								выпуклая книзу охватывает аксиоматичный интеграл от функции комплексной переменной, что
								неудивительно. До недавнего времени считалось, что рациональное число охватывает детерминант,
								явно демонстрируя всю чушь вышесказанного.
							</p>
							<a href="#">Читать далее</a>
						</div>
						<div class="meta_bottom">
							<span class="author">Автор: admin</span>
							<span class="com">Комментариев: 10</span>
						</div>
					</div><!--end post-->
				</div><!--end content-->

				<div id="sidebar">
					<div class="section">
						<h3>Об авторе блога</h3>
						<img src="img/author_photo.jpg" alt="фото автора блога" />
						<p>
							Критерий интегрируемости программирует лист Мёбиуса, как и предполагалось. Интеграл по
							ориентированной области в качестве несложной домашней работы.
						</p>
					</div>
					<div class="section">
						<h3>Спонсоры</h3>
						<img src="img/adsense_block.jpg" alt="реклама на блоге"/>
						<img src="img/adsense_block.jpg" alt="реклама на блоге"/>
					</div>
					<div class="section">
						<h3>Рубрики блога</h3>
						<ul>
							<li><a href="#">Рубрика1</a></li>
							<li><a href="#">Рубрика2</a></li>
							<li><a href="#">Рубрика3</a></li>
							<li><a href="#">Рубрика4</a></li>
							<li><a href="#">Рубрика5</a></li>
							<li><a href="#">Рубрика6</a></li>
						</ul>
					</div>
				</div><!--end sidebar-->
				<div id="footer">
					<div id="footer_top">
						<div class="footer_block">
							<h3>Ссылки</h3>
							<ul>
								<li><a href="#">Ссылка1</a></li>
								<li><a href="#">Ссылка2</a></li>
								<li><a href="#">Ссылка3</a></li>
								<li><a href="#">Ссылка4</a></li>
								<li><a href="#">Ссылка5</a></li>
								<li><a href="#">Ссылка6</a></li>
							</ul>
						</div>
						<div class="footer_block">
							<h3>Найти меня на:</h3>
							<a href="#"><img src="img/facebook_button.png" alt="facebook" /></img></a>
							<a href="#"><img src="img/last_button.png" alt="music" /></img></a>
							<a href="#"><img src="img/twitter_button.png" alt="twitter" /></img></a>
							<a href="#"><img src="img/mySpace_button.png" alt="mySpace" /></img></a>
							<a href="#"><img src="img/rss_bg.png" alt="rss" /></img></a>
						</div>
						<div class="footer_block">
							<h3>Новое на сайте</h3>
							<ul>
								<li><a href="#">Ссылка1</a></li>
								<li><a href="#">Ссылка2</a></li>
								<li><a href="#">Ссылка3</a></li>
								<li><a href="#">Ссылка4</a></li>
								<li><a href="#">Ссылка5</a></li>
								<li><a href="#">Ссылка6</a></li>
							</ul>
						</div>
					</div><!--end footer_top-->
					<div id="footer_bottom">
						<ul id="footer_nav">
							<li><a href="#">Главная</a></li>
							<li><a href="#">О нас</a></li>
							<li><a href="#">Сервисы</a></li>
							<li><a href="#">Портфолио</a></li>
							<li><a href="#">Контакты</a></li>
						</ul>
						<p>Copyright 2011 - <a href="#">Brilliante</a> - All rights reserved</p>
					</div>
				</div><!--end footer-->
			</div><!--end conteiner-->
		</div><!--end wrap-->
	</body>
</html>

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

Вы можете оставить комментарий.

47 комментариев к записи “Уроки верстки сайта — заканчиваем с html”

  1. Сложновато как для меня... Спасибо за урок. Буду разбираться.

  2. Антон:

    иногда пересматривал несколько моментов. Но в конце концов доделал макет!!! осталось css ждем с нетерпением

  3. evjikshu:

    Глупый вопрос по notepad++:Как сбоку настроить сайд-бар для перемещения по папкам. Наткнулся на варианты «проект» и «список документов», но не то. 

  4. Антон:

    Какую литература посоветуете прочитать???

    • Из литературы — html и css справочники. Чтобы хорошо освоить верстку нужно просто практиковаться как-можно больше. 

  5. Dmitry:

    DenWeb, спасибо большое за уроки!у меня к тебе просьба: не мог бы ты сделать отдельный урок или включить в следующий, такую вещь как CSS Shaders. Или хотя бы CSS Filter Effects.Желательно поподробнее, со всеми возможностями и подводными камнями.Заранее спасибо! Надеюсь не проигнорируешь просьбу.

  6. Сергей:

    Доброго времени суток. Меня интерисует вопрос. Остановитесь на HTML или будут уроки по PHP программированию?

  7. Здравствуйте, очень нравится ваш сайт и ваши уроки) А где найти такие справочники по html и css... Какие сайты посоветуете?

    • Могу посоветовать пару книг:

      "HTML и XHTML" —  Чак Муссиано и Билл Кеннеди,
      "CSS — каскадные таблицы стилей" - Майер Э.

  8. Skif:

    Спасибо большое за уроки, основы html я знаю,  а вот css и саму верстку начинаю постигать ... мне нравится, что в твоих видео все четко и не размусолено :) так, что смотрю с интересом!

  9. Ali:

    Всё супер! всё внятно и понятно! Спс!

  10. ser9ee:

    тэг /img в коде лишние, в строках 159 — 162

  11. Oleg:

    Спасибо,все понятно,но в Notpad++ не смог сделать такой блок как у вас,делал в Dreamwever'е,так-же чуть чуть добавил php(Для даты)

  12. Oleg:

    Кстати давно хотел узнать,чем отличается HTML от XHTML?Заранее спасибо

    • Главное отличие в синтаксисе, xhtml — более строгий. Например: все теги должны быть закрыты —  не <br>, а <br />, имена тегов должны быть в нижнем регистре и тд.

  13. Ильдар:

    Здравствуйте Ден. А можно узнать в каких случаях следует нарезать изображения как у вас, а в каких с помощью slicer(раскройка)?

  14. Дмитрий:

    Как не пробую просмотреть в браузере css на вашем примере всегда показывает!!!!!!что не так делаю????????НЕТ ни цвета, ни фона...:(

    /*
    Test Theme
    Version: 1.0.0
    Author Site: denweb.ru
    */
    @import url("reset.css");
    /*General Styles*/
    html {
    	height: 100%
    }
    
    body {
    	background: #d8d8d8;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size:14px;
    	color: #4f5259;
    	min-height: 100%;
    	padding-top: 25px;
    }
    
    p {
    	font-size: 14px;
    	color:#4f5259;
    }
    
    a {
    	text-decoration: none;
    	outline:none;
    	color: #868686;
    	font-size:14px;
    }
    
    a:hover {
    	text-decoration: underline;
    	outline:none;
    	color: #fff;
    	font-size:14px;
    }
    
    code {
    	font-family:"Courier New", Courier, monospace;
    	color:#000;
    }
    
    blockquote {
    	font-style:italic;
    	background:#ccc;
    	margin-left: 20px;
    }
    
    #wrap {
    	width: 960px;
    	background: #ededed;
    	margin: 0 auto;
    }
    
    /*Header*/
    #header {
    	height: 205px;
    }
    
    #header_top {
    	height:64px;
    	background: #1a1e27;
    }
    
    #header_bottom {
    	height:141px;
    }
     /*Top navigation*/
     #header ul {
    	 float:left;
    	 margin: 23px 244px 0 34px;
    }
    
    #header ul li {
    	float:left;
    	padding-left: 10px;
    }
    
    #header ul li a {
    	height: 41px;
    	display:block;
    }
    
    #header ul li a:hover {
    	height: 41px;
    	display:block;
    	text-decoration: none;
    	background: url(img/nav_arrow.png) no-repeat bottom;
    }
    
    .select {
    	color:#fff;
    	height: 41px;
    	display:block;
    	text-decoration: none;
    	background: url(img/nav_arrow.png) no-repeat bottom;
    }
    
    /*Search Form*/
    #search {
    	float:right;
    	margin: 14px 32px 0 0;
    	width: 191px;
    	height:35px;
    	background:url(img/search_bg.png) no-repeat;
    }
    
    .search_text {
    	width: 137px;
    	padding: 6px 0 0 25px;
    	background:none;
    	border: none;
    	outline: none;
    }
    
    .go {
    	width: 15px;
    	padding: 6px 0 0 25px;
    	background:none;
    	border: none;
    	cursor: pointer;
    }
    
    #rss {
    	margin: 24px 15px 0 0;
    	float: right;
    }
    
    #rss span {
    	margin-right: 7px;
    	position:relative;
    	top: -5px;
    }
    
    /*Logo*/
    #header_bottom h1 {
    	font-size: 28px;
    	text-transform:uppercase;
    	float:left;
    	display:inline-block;
    	font-weight:700;
    	color: #2f333b;
    	margin: 60px 25px 0 74px;
    }
    
    #discription {
    	width:218px;
    	font-style:italic;
    	display:inline-block;
    	background:url(img/logo_line.png) no-repeat left;
    	padding-left: 25px;
    	margin-top: 68px;
    	clear:both;
    	color: #646464;
    }
    
    #slogan {
    	margin: -5px 0 0 74px;
    	color: #646464;
    }
    /*Slider*/
    #slider {
    	width:900px;
    	margin: 0 auto;
    }
    

  15. Дмитрий:

    Обьясните поскорее весь извёлся уже, браузер только текст показывает и всё!!!

  16. гип:

    Спасибо супер уроки!

  17. Игорь:

    Доброго времени суток! У меня в sadebar планируется регистрация пользователя и соответственно как мне прописать ввод логина и пароля, кнопка регистрации то это понятно просто ссылка на форму регистрации, а вот сами поля мне не понятно, кстати подскажите такую вещь, а то я не нашел по поиску, есть ли где то у Вас урок по созданию формы регистрации пользователя или где ее можно взять? Спасибо.

  18. Артем:

    Спасибо тебе за уроки. Продолжаю дальше практиковаться.

  19. Александр:

    Почему последний заголовок вы сделали тегом <p> а не <h2>?

  20. ret52:

    А зачем мы обернули content, sidebar и  footer  в div id conteiner? На данном этапе не понятен этот шаг.

  21. Александр:

    Спасибо за уроки. После ваше первого урока, я понял что давно знал html но не мог понять связей между картинками и ссылками. Теперь у меня прозрение )я бы посоветовал phpDesigner7 намного продвинутая программа для верстки и других серьезных вещей.

  22. Спасибо огромное, очень крутые уроки смотрю не могу оторваться как губка пытаюсь впитать всю информацию! ;)

  23. Роман:

    Все доступно изложено, автор хорошо и доходчиво все объясняет. Огромное спасибо за такие уроки!

  24. Elena:

    Привет, Ден!Являюсь рядовым пользователем ПК (преподаю английский). Хочу отдать тебе должное — уроки отличные, все логично и просто! Раньше даже что такое ip не знала, а теперь готова страница в html)) Спасибо огромное!

  25. Дмитрий:

    Доброго времени суток!Денис, подскажите пожалуйста :<a href="#"><img src="img/facebook_button.png" alt="facebook" /></img></a>зачем мы здесь использовали закрывающий тег </img> , нотепад в данном случае вообще не видит его как закрывающий ... ??????Заранее спасибо!

  26. Влад:

    Почему ты не продаешь ссылки с этого сайта в сапе, с главной хотябы 1−2 ссылки? Это же деньги.

  27. Василий:

    клевый урок, система вложенных блоков раскрыта очень доходчиво. спасибо огромное. у меня вопрос, скорее, не по уроку, а по работе notepad++. не знаю почему но последний блок <div id="footer_botom"> с вложенным меню и копирайтом полностью подсвечивается зеленым и, соответственно, не отображается в браузере.ошибки нет, так как части кода скопированы из предыдущих кодов. как быть? помогите.спсб

  28. Привет Ден! Спасибо за уроки, из всех, что пересмотрел понравились именно твои :) 

  29. хороший голос, приятно слушать 

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика