ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Web Building] 6. Web Navigation - 웹 페이지 제작 강좌
    Web/Web Building 2015. 6. 12. 14:37


    Web Building - Adding Navigation


    1. What We Will Do

     이번 장에서:
     - 네비게이션 메뉴를 추가합니다.


    2. Add a Navigation Menu

     demoweb 폴더에, script.js 파일을 수정합니다.

     
    1
    2
    3
    4
    5
    6
    document.getElementById("nav01").innerHTML =
    "<ul id='menu'>" +
    "<li><a href='index.html'>Home</a></li>" +
    "<li><a href='customers.html'>Data</a></li>" +
    "<li><a href='about.html'>About</a></li>" +
    "</ul>";
    cs



    3. Edit The Style Sheet

     demoweb 폴더에, site.css 파일을 수정합니다. 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    body {
        font-family: "Trebuchet MS", Verdana, sans-serif;
        font-size: 16px;
        background-color: dimgrey; 
        color: #696969;
        padding: 3px;
    }
    #main {
        padding: 5px;
        padding-left:  15px;
        padding-right: 15px;
        background-color: #ffffff;
        border-radius: 0 0 5px 5px;
    }
    h1 {
        font-family: Georgia, serif;
        border-bottom: 3px solid #cc9900;
        color: #996600;
        font-size: 30px;
    }
    ul#menu {
        padding: 0;
        margin-bottom: 11px;
    }
    ul#menu li {
        display: inline;
        margin-right: 3px;
    }
    ul#menu li a {
        background-color: #ffffff;
        padding: 10px 20px;
        text-decoration: none;
        color: #696969;
        border-radius: 4px 4px 0 0;
    }
    ul#menu li a:hover {
        color: white;
        background-color: black;
    }
    cs


    4. Edit the Home Page

     demoweb 폴더에, index.html 파일을 수정합니다. 


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
     
    <html>
    <head>
    <title>Our Company</title>
    <link href="site.css" rel="stylesheet">
    </head>
    <body>
     
    <nav id="nav01"></nav>
     
    <div id="main">
      <h1>Welcome to Our Company</h1
      <h2>Web Site Main Ingredients:</h2>
     
      <p>Pages (HTML)</p>
      <p>Style Sheets (CSS)</p>
      <p>Computer Code (JavaScript)</p>
      <p>Live Data (Files and Databases)</p>
     
      <footer id="foot01"></footer>
    </div>
     
    <script src="script.js"></script>
     
    </body>
    </html>
    cs

     








    5. Edit All Pages

     나머지 customers.html과 about.html에도 네비게이션을 추가해줍니다.


    about.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html>
    <head>
      <title>About</title>
      <link href="site.css" rel="stylesheet">
    </head>
     
    <body>
     
    <nav id="nav01"></nav>
     
    <div id="main">
      <h1>About Us</h1>
      <p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
      <footer id="foot01"></footer>
    </div>
     
    <script src="script.js"></script>
     
    </body>
    </html>
    cs



    customers.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    <!DOCTYPE html>
    <html>
     
        <head>
          <meta charset="utf-8"/>
          <title>Customers</title>
          <link href="site.css" rel="stylesheet">
        </head>
     
        <body>
            
            <nav id="nav01"></nav>
     
            <div id="main">
            <h1>Customers</h1>
     
            <table>
            <tr>
              <th>Name</th>
              <th>City</th>
              <th>Country</th>
            </tr>
            <tr>
              <td>Alfreds Futterkiste</td>
              <td>Berlin</td>
              <td>Germany</td>
            </tr>
            <tr>
              <td>Berglunds snabbkop</td>
              <td>Lulea</td>
              <td>Sweden</td>
            </tr>
            <tr>
              <td>Centro comercial Moctezuma</td>
              <td>Mexico D.F.</td>
              <td>Mexico</td>
            </tr>
            <tr>
              <td>Ernst Handel</td>
              <td>Graz</td>
              <td>Austria</td>
            </tr>
            <tr>
              <td>FISSA Fabrica Inter. Salchichas S.A.</td>
              <td>Madrid</td>
              <td>Spain</td>
            </tr>
            <tr>
              <td>Galeria del gastronomo</td>
              <td>Barcelona</td>
              <td>Spain</td>
            </tr>
            <tr>
              <td>Island Trading</td>
              <td>Cowes</td>
              <td>UK</td>
            </tr>
            <tr>
              <td>Koniglich Essen</td>
              <td>Brandenburg</td>
              <td>Germany</td>
            </tr>
            <tr>
              <td>Laughing Bacchus Wine Cellars</td>
              <td>Vancouver</td>
              <td>Canada</td>
            </tr>
            <tr>
              <td>Magazzini Alimentari Riuniti</td>
              <td>Bergamo</td>
              <td>Italy</td>
            </tr>
            <tr>
              <td>North/South</td>
              <td>London</td>
              <td>UK</td>
            </tr>
            <tr>
              <td>Paris specialites</td>
              <td>Paris</td>
              <td>France</td>
            </tr>
            <tr>
              <td>Rattlesnake Canyon Grocery</td>
              <td>Albuquerque</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>Simons bistro</td>
              <td>København</td>
              <td>Denmark</td>
            </tr>
            <tr>
              <td>The Big Cheese</td>
              <td>Portland</td>
              <td>USA</td>
              </tr>
            <tr>
              <td>Vaffeljernet</td>
              <td>Arhus</td>
              <td>Denmark</td>
            </tr>
            <tr>
              <td>Wolski Zajazd</td>
              <td>Warszawa</td>
              <td>Poland</td>
            </tr>
            </table>
     
            <footer id="foot01"></footer>
            </div>
     
            <script src="script.js"></script>
     
        </body>
    </html>
    cs




    * W3School을 통해 제작된 강좌입니다.


    댓글

Designed by Tistory.