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을 통해 제작된 강좌입니다.


      저작자표시

      'Web > Web Building' 카테고리의 다른 글

      [Web Building] 9. Web DaaS - 웹 페이지 제작 강좌  (0) 2015.06.12
      [Web Building] 8. Web AppML - 웹 페이지 제작 강좌  (0) 2015.06.12
      [Web Building] 7. Web Http - 웹 페이지 제작 강좌  (0) 2015.06.12
      [Web Building] 5. Web Data Page - 웹 페이지 제작 강좌  (0) 2015.06.12
      [Web Building] 4. Web JavaScript - 웹 페이지 제작 강좌  (0) 2015.06.12
      [Web Building] 3. Web CSS - 웹 페이지 제작 강좌  (0) 2015.06.12

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바