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

Верстка из PSD — структура HTML

структура htmlПривет всем читателям DenWeb.Ru! Продолжаем изучать верстку сайта из PSD. В предыдущих уроках мы разрезали на графические элементы наш шаблон PSD, сегодня же начнем создавать html структуру документа.

Хочу напомнить, что это только начало курса, поэтому, чтобы не пропустить выход новых уроков, подписывайтесь на rss обновления.

Основной шаблон 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>
	</body>
</html>

Далее все я постарался объяснить в видео уроке:

В итоге, в данном уроке мы получили файл index.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><!--end wrap-->
	</body>
</html>

Обещаный доклад  Вадима Макеева — «Доктайп. Точка».

Доктайп. Точка from pepelsbey on Vimeo.

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

27 комментариев к записи “Верстка из PSD — структура HTML”

  1. Андрей:

    Отлично!!! жаль что уроки выходят редко. Но это терпимо! С нетерпение жду следующего урока! А в следующем уроке будем доделывать каркас сайта или еще начнем css прописывать к нему.=)

  2. мне кажется, что уроки слишком короткие.

    • Я не делаю длинные записи, чтобы не утомительно их было слушать. Конечно желательно почаще делать, но чаще просто не успеваю.

  3. Андрей:

    Мне интересно. Видел много сайтов которые выровнены по центру, а по бокам от центрального блока стоит либо реклама, либо же как-то делаютчасть дизайна сайта как на картинке=)

  4. Владислав:

    Хороший урок. Только маленький совет, поставте в настройках notepad++ кодировку для новых файлов utf-8. А то получается что документ кодируется в ANSI, а в meta задана кодировка utf-8. По крайней мере на видео так.

  5. Владислав:

    Упс, недоконца досмотрел и написал, извиняюсь)

  6. Fati:

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

  7. sparta:

    DenWeb, почитал ссылки приведенные Вами, так и не нашел, как сделать проводник.Можете расписать сами, у Вас это понятно получается)

  8. Minit:

    Как сделать такую же пиксельную сетку ?

  9. Ильяс:

    Какая горячая клавиша в нотепаде закрывает тег?

  10. Senya:

    Автор. В этом видео вы применяете слайдер, но непонятно как Вы его вырезали из макета.  В предыдущем уроке вы сказали, что объясните позже, как его резать... Так как его резать?Спасибо.

  11. Natali:

    Спасибо вам большое за интересный, а главное ПОНЯТНЫЙ урок. Надеюсь с вашей помощью закрыть пробелы в своем обучении верстке.

  12. G383G:

    А где продолжение этих уроков??не могу найти чё то

  13. Сергей:

    Здравствуйте Денис.Хочу спросить почему-то у меня перестали проигрываться ваши уроки. Пишет «ошибка попробуйте позже» и ничего не происходит. Но интернет у меня работает нормально (торренты и все такое). Это какая-то ошибка на youtube?

  14. Екатерина:

    Скажите пожалуйста, в каком году был доклад о доктайпе?

  15. elena:

    Уже был такой вопрос, но он стался без ответа.Как вы так закрываете тэг в Notepad++? 

  16. Антон:

    Подскажите пожалуйста...У меня папка img располагается на одном уровне что и файл index.html...Задаю путь на изображение аналогично примеру указывая название своего файла, но при просмотре в браузере изображений нет...они не отображаются...пример: <img src="img/search_bg.png" alt="Форма поиска"       <img src="img/slider.png" alt="Слайдер"</code><code>Уже даже все уровне перепробовал как вверх, так и вниз...</code><code>Что это может быть?</code><code>Спасибо

  17. Екатерина:

    Здравствуйте, еще раз спасибо за подробное разъяснение материала!Скажите пожалуйста, вы и используете короткий доктайп (<!DOCTYPE html>) — это подразумевает что используется HTML 5?А если через 1 год придумают HTML 6, то все перестроют свои сайты под HTML6?

  18. Григорий:

     Уроки обалденные! Строго по делу, без соплей и прочей лабуды! Всё как надо! Если кому-то что-то не понятно из уроков, то просто ставьте урок на паузу и смотрите справочную информацию где нибудь по интересующей вас проблеме. Именно такие уроки и должны быть

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

Spam Protection by WP-SpamFree

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