[Урок 4] Часть 1. Верстка макета HTML5/CSS3

[Урок 4] Часть 1. Верстка макета HTML5/CSS3

Опции

TimurR

Topic Starter сообщение

11.4.2015, 15:14; Ответить: TimurR

Сообщение #1

Старожил

Группа: Active User
Сообщений: 1166
Регистрация: 6.11.2014
Поблагодарили: 3 раза
Репутация:

274

В предыдущем уроке мы определили несколько основных параметров макета, вырезали некоторые логотипы и другие элементы. Также мы определились с некоторыми основными тегами, которые мы будем использовать.

Кстати, наша валидная верстка будет также и семантической. Это модное слова семантика означает, что мы будем правильно использовать теги и не будем использовать одни теги в других, если это запрещено спецификацией языка. О семантике кода можно почитать в интернете, благо есть много статей.

Основа основ - это файл index.html и style.css. Создайте эти файлы и за одно добавьте папку image. В этой папке мы будет хранить изображения, которые используются в шаблоне. Давайте накидаем наш скелет, откройте файл index.html и запишите там следующий код:


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">	
	<title>Название сайта</title>
</head>
<body>
	<header>
		<div id="first-div">
			Первый блок
		</div>
		<div id="second-div">
			Второй блок
		</div>
		div#
	</header>
	<main role="main">
		<section>
			<h1>Заголовок</h1>
			<article>
				<h2>Заголовок статьи</h2>
				<p>Текст статьи.</p>
			</article>
		</section>
	</main>
	<aside>
		<div class="widget">
			<span class="widget-title">Заголовок виджета</span>
		</div>
	</aside>
	<footer>
		
	</footer>
</body>
</html>

В этом примере кода, мы набросали "скелет" нашего документа, в котором есть уже некоторые CSS классы и идентификаторы, которые мы будем использовать для написания стилей.

Сообщение отредактировал TimurR - 11.4.2015, 15:14

0

Ответить с цитированием данного сообщения

Rexxar Rexxar 11.4.2015, 15:24; Сообщений: 603 Поблагодарили: 1 раз Репутация: 36 Просмотр профиля	11.4.2015, 15:24; Ответить: Rexxar Сообщение #2
0000000000xxxxxxxxxxxxx Группа: Active User Сообщений: 603 Регистрация: 12.11.2012 Поблагодарили: 1 раз Репутация: 36	Удобно было бы если бы на уроках были ссылки на другие связанные уроки. Слабо работал с пятым, есть уже урок о применении стилей к таким разметкам как header, article. Хотя могу конечно и в интернете поискать, пока не занимался такими изысками.

ShowPrint ShowPrint 12.4.2015, 14:38; Сообщений: 3412 Поблагодарили: 5 раз Репутация: 965 Просмотр профиля	12.4.2015, 14:38; Ответить: ShowPrint Сообщение #3
Топовый постер Группа: Active User Сообщений: 3412 Регистрация: 21.3.2015 Из: Москва Поблагодарили: 5 раз Репутация: 965	TimurR, спасибо за Ваши уроки! Как раз собираюсь делать ре-дизайн сайта с учетом грядущих изменений Гоши, планирую сделать его на html5, с которым ранее не работал, поэтому все Ваши "уроки" читаю с интересом и жду новые всегда с нетерпением... =)

TimurR Topic Starter TimurRTopic Starter 12.4.2015, 15:49; Сообщений: 1166 Поблагодарили: 3 раза Репутация: 274 Просмотр профиля	Topic Starter 12.4.2015, 15:49; Ответить: TimurR Сообщение #4
Старожил Группа: Active User Сообщений: 1166 Регистрация: 6.11.2014 Поблагодарили: 3 раза Репутация: 274	ShowPrint, рад, что не зря пишу. :)

ShowPrint ShowPrint 13.4.2015, 0:15; Сообщений: 3412 Поблагодарили: 5 раз Репутация: 965 Просмотр профиля	13.4.2015, 0:15; Ответить: ShowPrint Сообщение #5
Топовый постер Группа: Active User Сообщений: 3412 Регистрация: 21.3.2015 Из: Москва Поблагодарили: 5 раз Репутация: 965	TimurR, точно не зря!

ShowPrint ShowPrint 23.4.2015, 12:31; Сообщений: 3412 Поблагодарили: 5 раз Репутация: 965 Просмотр профиля	23.4.2015, 12:31; Ответить: ShowPrint Сообщение #6
Топовый постер Группа: Active User Сообщений: 3412 Регистрация: 21.3.2015 Из: Москва Поблагодарили: 5 раз Репутация: 965	TimurR, дошел таки до верстки контента, посмотрел Ваш урок, почитал всеми нами любимый сайт... Возник у меня вопрос относительно логичности следующей конструкции: <main role="main"> <section> <h1>Заголовок</h1> <article> <h2>Заголовок статьи</h2> <p>Текст статьи.</p> </article> </section> </main> Читаю в HTML Book: Тег <article> задает содержание сайта вроде новости, статьи, записи блога, форума или др. Тег <section> - задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один тег <section> внутрь другого Логически рассуждая (не читая Вашего урока) сделал бы аналогичную конструкцию следующим образом: <main role="main"> <article> <h1>Заголовок статьи</h1> <section> <h2>Заголовок раздела 1</h2> <p>Текст статьи.</p> </section> <section> <h2>Заголовок раздела 2</h2> <p>Текст статьи.</p> </section> </article> </main> Вроде по логике должно быть именно так: статья, внутри которых несколько секций. Может теоретически быть и секция внутри которой несколько статей, но тогда это либо многостраничная "простынь", либо статьи по 2 абзаца... Подскажите, плз, в каком месте моя логика дала сбой?

TimurR Topic Starter TimurRTopic Starter 23.4.2015, 12:58; Сообщений: 1166 Поблагодарили: 3 раза Репутация: 274 Просмотр профиля	Topic Starter 23.4.2015, 12:58; Ответить: TimurR Сообщение #7
Старожил Группа: Active User Сообщений: 1166 Регистрация: 6.11.2014 Поблагодарили: 3 раза Репутация: 274	ShowPrint, для главной страницы сайта, куда стекается превью статей, я использую именно приведенный мною пример. Можете посмотреть самые различные комбинации вот хорошая статья на данную тему: http://habrahabr.ru/post/214407/

ShowPrint ShowPrint 23.4.2015, 13:32; Сообщений: 3412 Поблагодарили: 5 раз Репутация: 965 Просмотр профиля	23.4.2015, 13:32; Ответить: ShowPrint Сообщение #8
Топовый постер Группа: Active User Сообщений: 3412 Регистрация: 21.3.2015 Из: Москва Поблагодарили: 5 раз Репутация: 965	(TimurR @ 23.4.2015, 14:58) для главной страницы сайта, куда стекается превью статей В этом месте моя логика и дала сбой... B) Точнее в попытке "натянуть" Вашу схему на своё содержимое... ))) Спасибо за ссылку - очень полезно... TimurR, правильно я понимаю, что для основного контента моей главной страницы (www.ShowPrint.ru) следует прописать <main> внутри которого два <section>, один за другим? Заранее признателен. P.S. Сорри за оффтоп, не получилось отправить вопрос ЛС, я пытался - чесссно... :(

ShowPrint ShowPrint 23.4.2015, 22:43; Сообщений: 3412 Поблагодарили: 5 раз Репутация: 965 Просмотр профиля	23.4.2015, 22:43; Ответить: ShowPrint Сообщение #9
Топовый постер Группа: Active User Сообщений: 3412 Регистрация: 21.3.2015 Из: Москва Поблагодарили: 5 раз Репутация: 965	Еще 5 копеек... Для разбираемого макета внутри <header> (по всей видимости) просится наличие <nav>...</nav>... Сообщение отредактировал ShowPrint - 23.4.2015, 22:43

TimurR

Topic Starter сообщение

24.4.2015, 10:14; Ответить: TimurR

Сообщение #10

Старожил

Группа: Active User
Сообщений: 1166
Регистрация: 6.11.2014
Поблагодарили: 3 раза
Репутация:

274

ShowPrint, да, если будет меню.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Качественный современный дизайн сайтов, логотипов, печатной продукции. Верстка.	27	zaiko	17579	2.4.2024, 14:00 автор: zaiko
Верстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP Разработка на профессиональном уровне	144	Gerga	92140	11.3.2024, 19:59 автор: anchous
Верстка шаблона Битрикс	0	bat	1420	26.9.2023, 6:22 автор: bat
Веб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)	56	qpPeW	44925	19.7.2023, 10:03 автор: qpPeW
Верстка электронных писем бесплатно	0	Gidemopassan	1530	23.6.2023, 10:12 автор: Gidemopassan