Microsoft Expression Web - układ strony internetowej

W tym rozdziale zajmiemy się podstawowym układem Twoich stron internetowych. Przed stworzeniem layoutu naszej strony musimy pomyśleć o naszych treściach, a następnie zaprojektować sposób, w jaki chcemy ją zaprezentować, ponieważ to treść będzie widoczna na naszej stronie.

To od nas zależy, w jaki sposób przedstawimy nasze treści, aby nasi widzowie znaleźli naszą witrynę, a następnie ją odwiedzili. Układ prawdopodobnie będzie zawierał logo lub baner firmy u góry, menu nawigacyjne, obszar zawartości, który może zawierać wiele kolumn, oraz stopkę u dołu strony.

Wcześniej programiści używali tabel, aby uzyskać taki wygląd. Tabele tworzyły grupę pól, które były używane do tworzenia wierszy i kolumn. Teraz projektanci stron internetowych używają<div>s aby utworzyć pola i CSS, aby umieścić te pola na stronie.

tag <div>

Poniżej przedstawiono niektóre funkcje tagu <div>.

Znacznik <div> definiuje dział lub sekcję w dokumencie HTML i ułatwia zarządzanie, stylizowanie i manipulowanie tymi podziałami lub sekcjami.
Służy do grupowania elementów blokowych w celu formatowania ich za pomocą CSS.
Przeglądarki zwykle umieszczają podział wiersza przed i po elemencie div.
Znacznik <div> jest elementem blokowym.
Znacznik <div> może zawierać prawie każdy inny element.
Tag <div> nie może znajdować się wewnątrz tagu <p>.

Przykład

Spójrzmy na prosty przykład, w którym będziemy używać tagów <div> </div> do tworzenia różnych ramek i reguł stylów.

Step 1 - Otwórz Expression Web, a następnie index.html stronę, którą stworzyliśmy w poprzednim rozdziale.

Step 2- Jak widać na powyższym zrzucie ekranu, widok kodu jest domyślnie podświetlony. Możesz pracowaćCode View lub Design View, ale możesz również zobaczyć widok podzielony, który otworzy zarówno widok kodu, jak i widok projektu. Więc wybierzmySplit View opcja.

Step 3 - The bodyelement definiuje treść dokumentu. Aby stylizować tag <body>, musimy utworzyć nowy styl. Najpierw wybierz znacznik body w widoku projektu, a następnie kliknijNew Style…w panelu Zastosuj style, który otworzy okno dialogowe Nowy styl. Tutaj możesz zdefiniować różne opcje dla swojego stylu.

Step 4 - Pierwszym krokiem jest wybranie pliku body z Selectorrozwijanej listy, a następnie wybierz Istniejący arkusz stylów z listy „Zdefiniuj w”. Z adresu URL wybierz plik CSS, który utworzyliśmy w poprzednim rozdziale.

Po lewej stronie znajduje się Categorylisty, takich jak czcionka, tło itp., a bieżąca czcionka zostanie podświetlona. Ustaw informacje związane z czcionką zgodnie ze swoimi wymaganiami, jak pokazano na powyższym zrzucie ekranu.

Step 5 - Wybierz plik Background colorchcesz. Możesz także wybrać obraz jako tło za pomocą przycisku przeglądarki. Gdy skończysz z tłem, zdefiniuj granice, jeśli chcesz.

Step 6 - Wybierzmy double lineopcję obramowania i wybierz szerokość i kolor również z list rozwijanych. Gdy skończysz ze stylem, kliknij OK.

Step 7- Teraz możesz zobaczyć w widoku projektu, że kolor tła został zmieniony na wybrany przez nas. Jeśli otworzysz plik sample.css, zobaczysz, że wszystkie informacje są automatycznie zapisywane w pliku CSS.

Step 8 - Idź do index.html stronę ponownie i przeciągnij plik <div> z panelu „Przybornik” i upuść go na otwartej stronie.

Step 9 - Powyżej code view, zobaczysz <body> i <div> tagi, kliknij <div>a następnie w panelu Zastosuj style kliknij przycisk Nowy styl…. co otworzy okno dialogowe Nowy styl.

Wpisz „#container” w polu Selector. Znak skrótu # to selektor identyfikatora. Z rozwijanej listy „Zdefiniuj w” wybierz Istniejący arkusz stylów i zaznacz opcję „Zastosuj nowy styl do wyboru dokumentu”. Przejdź do kategorii Tło.

Step 10 - Wybierz kolor tła, wybierzmy kolor biały, a następnie przejdź do kategorii Box.

Step 11 - Zdefiniuj padding i margin a następnie przejdź do Position Kategoria

Step 12- Ustaw szerokość na 90%. Nie określaj jednak wysokości, ponieważ tutaj chcemy, aby kontener rozwijał się po wejściu do zawartości. Kliknij przycisk OK.

Podobnie dodajmy style dla nagłówka, górnej nawigacji, lewej nawigacji, głównej treści i stopki.

sample.css

Poniżej znajduje się kod w sample.css arkusz stylów po dodaniu wszystkich wyżej wymienionych stylów.

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

Poniżej znajduje się kod w pliku index.html po dodaniu wszystkich tagów <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>

Wynik

Układ strony w widoku projektu będzie wyglądał tak, jak pokazano na poniższym zrzucie ekranu.