Microsoft Expression Web - макет веб-страницы
В этой главе мы рассмотрим базовую компоновку ваших веб-страниц. Перед созданием макета нашей веб-страницы нам нужно подумать о нашем контенте, а затем спроектировать, как мы хотим представить этот контент, поскольку это контент будет отображаться на нашем веб-сайте.
Мы сами решаем, как мы представляем наш контент, чтобы наши зрители нашли наш сайт, а затем остались, чтобы проверить его. Макет, вероятно, будет включать логотип компании или баннер вверху, меню навигации, область содержимого, которая может включать несколько столбцов, и нижний колонтитул внизу страницы.
Раньше разработчики использовали таблицы для достижения такого вида. Таблицы создали группу блоков, которые использовались для создания строк и столбцов. Теперь веб-дизайнеры используют<div>s для формирования блоков и CSS для размещения этих блоков на странице.
<div> тег
Ниже приведены некоторые особенности тега <div>.
Тег <div> определяет раздел или раздел в документе HTML и упрощает управление, стиль и манипулирование этими разделами или разделами.
Он используется для группировки элементов блока для их форматирования с помощью CSS.
Браузеры обычно помещают разрыв строки до и после элемента div.
Тег <div> - это элемент уровня блока.
Тег <div> может содержать практически любой другой элемент.
Тег <div> не может находиться внутри тега <p>.
пример
Давайте рассмотрим простой пример, в котором мы будем использовать теги <div> </div> для создания различных блоков и правил стиля.
Step 1 - Откройте Expression Web, а затем index.html страницу, которую мы создали в предыдущей главе.
Step 2- Как видно на приведенном выше снимке экрана, представление кода выделено по умолчанию. Вы можете работать вCode View или же Design View, но вы также можете увидеть разделенное представление, которое откроет как представление кода, так и представление дизайна. Итак, давайте выберемSplit View вариант.
Step 3 - The bodyэлемент определяет тело документа. Чтобы стилизовать тег <body>, нам нужно создать новый стиль. Сначала выберите тег тела в представлении «Дизайн», а затем нажмите кнопкуNew Style…на панели «Применить стили», которая откроет диалоговое окно «Новый стиль». Здесь вы можете определить различные варианты вашего стиля.
Step 4 - Первый шаг - выбрать body из Selectorраскрывающийся список, а затем выберите Существующую таблицу стилей в раскрывающемся списке «Определить в». Из URL-адреса выберите файл CSS, который мы создали в предыдущей главе.
С левой стороны есть Categoryсписок, например Шрифт, Фон и т. д., и текущий шрифт будет выделен. Установите информацию о шрифте в соответствии с вашими требованиями, как показано на скриншоте выше.
Step 5 - Выберите Background colorвы хотите. Вы также можете выбрать изображение для фона с помощью кнопки браузера. Как только вы закончите с фоном, определите ваши границы, если хотите.
Step 6 - Выберем double lineвариант для границы и выберите ширину и цвет также из раскрывающихся списков. Когда вы закончите со стилем, нажмите ОК.
Step 7- Теперь вы можете видеть в представлении дизайна, что цвет фона изменился на тот, который мы выбрали. Если вы откроете файл sample.css, вы увидите, что вся информация автоматически сохраняется в файле CSS.
Step 8 - Перейти к index.html страницу снова и перетащите <div> на панели «Панель инструментов» и перетащите его на открытую страницу.
Step 9 - Выше code view, ты увидишь <body> и <div> теги, щелкните <div>и затем на панели «Применить стили» нажмите «Новый стиль…». который откроет диалог New Style.
Введите «#container» в поле «Селектор». Хэш-метка # - это селектор идентификатора. В раскрывающемся списке «Определить в» выберите Существующую таблицу стилей и установите флажок «Применить новый стиль к выделенному документу». Перейдите в категорию "Фон".
Step 10 - Выберите цвет фона, давайте выберем белый цвет и затем перейдем в категорию Box.
Step 11 - Определить padding и margin а затем перейдите к Position категория
Step 12- Установите ширину на 90%. Однако не указывайте высоту, поскольку здесь мы хотим, чтобы контейнер расширялся при вводе содержимого. Щелкните кнопку ОК.
Точно так же давайте добавим стили для заголовка, верхней навигации, левой навигации, основного содержимого и нижнего колонтитула.
sample.css
Ниже приведен код в sample.css таблица стилей после добавления всех вышеупомянутых стилей.
body {
font-family: Calibri;
font-size: medium;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
color: #0000FF;
background-color: #CCFFFF;
background-image: none;
border: medium double #FF0000;
}
#container {
background-color: #FFFFFF;
padding: 8px;
margin: 8px;
width: 90%;
}
#header {
background-color: #54B431;
background-repeat: no-repeat;
background-position: right center;
height: 170px;
}
#top-nav {
height: 50px;
border-top: solid medium #006600;
border-bottom: solid medium #006600;
background-color: #FFFFFF;
}
#left-nav {
margin: 20px 0px 10px 0px;
width: 180px;
float: left;
border: thin dashed #006600;
}
#main-content {
margin: 20px 10px 10px 200px;
background-color: #CCFFCC;
}
#footer {
border-top: 2px solid #006600;
clear: both;
padding: 10px 0px;
text-align: center;
}index.html
Ниже приведен код в файле index.html после добавления всех тегов <div>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<style type = "text/css"></style>
<link href = "sample.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"></div>
<div id = "top-nav"></div>
<div id = "left-nav"></div>
<div id = "main-content"></div>
<div id = "footer"></div>
</div>
</body>
</html>Вывод
Макет вашей страницы в режиме просмотра будет выглядеть, как показано на следующем снимке экрана.
