Учебники

Microsoft Expression Web — макет веб-страницы

Март 21, 2019

В этой главе мы рассмотрим основные макеты ваших веб-страниц. Прежде чем создавать макет нашей веб-страницы, нам нужно подумать о нашем контенте, а затем спроектировать, как мы хотим представить этот контент, так как именно контент будет отображаться на нашем сайте.

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

Ранее разработчики использовали таблицы для достижения этого вида. Таблицы создали группу блоков, которые использовались для создания строк и столбцов. Теперь веб-дизайнеры используют <div> для формирования блоков и CSS для размещения этих блоков на странице.

тег <div>

Ниже приведены некоторые особенности тега <div>.

  • Тег <div> определяет раздел или раздел в документе HTML и упрощает управление, стилизацию и управление этими разделами или разделами.

  • Он используется для группировки элементов блока, чтобы отформатировать их с помощью CSS.

  • Браузеры обычно помещают разрыв строки до и после элемента div.

  • Тег <div> является элементом уровня блока.

  • Тег <div> может содержать практически любой другой элемент.

  • Тег <div> не может быть внутри тега <p>.

Тег <div> определяет раздел или раздел в документе HTML и упрощает управление, стилизацию и управление этими разделами или разделами.

Он используется для группировки элементов блока, чтобы отформатировать их с помощью CSS.

Браузеры обычно помещают разрыв строки до и после элемента div.

Тег <div> является элементом уровня блока.

Тег <div> может содержать практически любой другой элемент.

Тег <div> не может быть внутри тега <p>.

пример

Давайте рассмотрим простой пример, в котором мы будем использовать теги <div> </ div> для создания различных блоков и правил стиля.

Шаг 1 — Откройте Expression Web, а затем страницу index.html, которую мы создали в предыдущей главе.

страница index.html

Шаг 2 — Как видно на скриншоте выше, представление кода выделено по умолчанию. Вы можете работать в представлении « Код» или в представлении « Дизайн» , но вы также можете увидеть разделенное представление, которое откроет как представление «Код», так и представление «Дизайн». Итак, давайте выберем опцию Split View .

Разделенный вид

Шаг 3 — Элемент body определяет тело документа. Чтобы стилизовать тег <body>, нам нужно создать новый стиль. Сначала выберите тег body в представлении «Дизайн», а затем нажмите « Новый стиль» на панели «Применить стили», чтобы открыть диалоговое окно «Новый стиль». Здесь вы можете определить различные параметры для вашего стиля.

страница index.html

Шаг 4 — Первый шаг — выбрать тело из раскрывающегося списка « Селектор», а затем выбрать существующую таблицу стилей из «Определить в» в раскрывающемся списке. Из URL выберите файл CSS, который мы создали в предыдущей главе.

С левой стороны находится список категорий, например «Шрифт», «Фон» и т. Д., А текущий шрифт выделяется. Установите информацию о шрифтах в соответствии с вашими требованиями, как показано на скриншоте выше.

категория

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

Фоновый цвет

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

Двойная линия

Шаг 7 — Теперь вы можете видеть в режиме конструктора, что цвет фона меняется на тот, который мы выбрали. Если вы откроете файл sample.css, вы увидите, что вся информация автоматически сохраняется в файле CSS.

Изменить цвет фона

Шаг 8 — Снова перейдите на страницу index.html и перетащите элемент <div> с панели «Инструменты» и поместите его на открытой странице.

<DIV>

Шаг 9. Над представлением кода вы увидите теги <body> и <div> , щелкните тег <div>, а затем на панели «Применить стили» нажмите «Новый стиль». который откроет диалог New Style.

Введите «#container» в поле «Селектор». Хеш-знак # является селектором идентификатора. В раскрывающемся списке «Определить в» выберите «Существующая таблица стилей» и установите флажок «Применить новый стиль к выбору документа». Перейти в категорию фона.

Вид кода

Шаг 10 — Выберите цвет фона, давайте выберем белый цвет и затем перейдем в категорию Box.

Коробка Категория

Шаг 11 — Определите отступы и маржу, а затем перейдите в категорию Position

Позиция

Шаг 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>

Выход

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

44
Share: