Использование HTML для определения частей веб-страницы
Веб-страница обычно состоит из нескольких разных частей - разумеется, это может варьироваться в зависимости от контента и дизайна, но почти на каждой странице есть заголовок, навигация, контент и нижний колонтитул. Мы уже обсуждали красоту внешней таблицы стилей, чтобы определить внешний вид и расположение всего веб-сайта. По этой причине очень полезно провозгласить конкретные детали в html, поэтому мы можем адресовать их в таблице стилей.
- Просмотров |
Веб-страница обычно состоит из нескольких разных частей — разумеется, это может варьироваться в зависимости от контента и дизайна, но почти на каждой странице есть заголовок, навигация, контент и нижний колонтитул. Мы уже обсуждали красоту внешней таблицы стилей, чтобы определить внешний вид и расположение всего веб-сайта. По этой причине очень полезно провозгласить конкретные детали в html, поэтому мы можем адресовать их в таблице стилей.
Таким образом, HTML для простого макета страницы может выглядеть так:
<body> <div id="wrapper"> <div id="header"> <h1>The Company Name</h1> </div> <div id="navigation"> <ul> <li>Home</li> <li>Home</li> <li>Home</li> <li>Home</li> </ul> </div> <div id="content"> <h2>The Content</h2> <p>This is where all the important info goes. Pictures, too - pictures are good.</p> </div> <div id="header"> <p>The copyright stuff and some basic contact info - or whatever </p> </div> </div> </body>
Большинство из вышеперечисленных частей довольно понятны. И опять же, фактическое имя не имеет значения, но в конечном итоге это облегчит вам жизнь, если вы используете описательные имена. В конце концов, «заголовок» в значительной степени говорит обо всем, в то время как вы можете не помнить точно, на какую часть <div id = «style1»> ссылается, когда вы вернетесь на свою веб-страницу позднее. Или после обеда.
Единственное подразделение, которое я использовал, может потребовать немного больше объяснений — это «обертка». Технически тег body уже является основным контейнером всего вашего HTML-кода, но тег тела охватывает каждый бит недвижимости, который вы видите на своем мониторе. Бросив еще одну оболочку в тело, она позволяет нам лучше определять фактическую область содержимого. Это не обязательно, это не «вы должны», но это всего лишь очень полезный инструмент для создания практически любого веб-сайта — я не создал сайт без него и, вероятно, никогда не буду.
И теперь, когда основные части страницы определены в HTML, мы можем использовать эти определения — или деления — для создания связи между HTML и CSS.
body { background-color: #ffffff; color: #000000; } #wrapper { background-color: #FFDD33; width: 1050px; } #header {whatever;} #navigation {whatever;} #content {whatever;} #footer {whatever;}
Имеют смысл?
