Перейти к содержимому

Реферальная программа Мегаплана

Выбрать шаблон и создать сайт

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

#1 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180
6

Отправлено 11 Апрель 2015 - 14:14

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

 

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

 

Основа основ - это файл 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 Апрель 2015 - 14:14

  • 3

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#2 Rexxar

Rexxar
  • Пользователь
  • 590 сообщений
  • Репутация: 36

Отправлено 11 Апрель 2015 - 14:24

Удобно было бы если бы на уроках были ссылки на другие связанные уроки. 

 

Слабо работал с пятым, есть уже урок о применении стилей к таким разметкам как header, article. Хотя могу конечно и в интернете поискать, пока не занимался такими изысками. 


  • 0


#3 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405

Отправлено 12 Апрель 2015 - 13:38

@TimurR, спасибо за Ваши уроки! Как раз собираюсь делать ре-дизайн сайта с учетом грядущих изменений Гоши, планирую сделать его на html5, с которым ранее не работал, поэтому все Ваши "уроки" читаю с интересом и жду новые всегда с нетерпением... =)


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#4 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 12 Апрель 2015 - 14:49

@ShowPrint, рад, что не зря пишу.  :)


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#5 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405

Отправлено 12 Апрель 2015 - 23:15

@TimurR, точно не зря!


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#6 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405

Отправлено 23 Апрель 2015 - 11:31

@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 абзаца...

 

Подскажите, плз, в каком месте моя логика дала сбой?


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#7 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 23 Апрель 2015 - 11:58

@ShowPrint, для главной страницы сайта, куда стекается превью статей, я использую именно приведенный мною пример. Можете посмотреть самые различные комбинации вот хорошая статья на данную тему: http://habrahabr.ru/post/214407/


  • 1

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#8 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405

Отправлено 23 Апрель 2015 - 12:32

для главной страницы сайта, куда стекается превью статей
 В этом месте моя логика и дала сбой...  B)

Точнее в попытке "натянуть" Вашу схему на своё содержимое... )))

 

Спасибо за ссылку - очень полезно...

@TimurR, правильно я понимаю, что для основного контента моей главной страницы (www.ShowPrint.ru) следует прописать <main> внутри которого два <section>, один за другим?

Заранее признателен.
 
P.S. Сорри за оффтоп, не получилось отправить вопрос ЛС, я пытался - чесссно...  :(

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#9 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405

Отправлено 23 Апрель 2015 - 21:43

Еще 5 копеек... Для разбираемого макета внутри <header> (по всей видимости) просится наличие <nav>...</nav>...


Сообщение отредактировал ShowPrint: 23 Апрель 2015 - 21:43

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#10 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 24 Апрель 2015 - 09:14

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


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru