웹 사이트 - 중앙 위치에서 링크를 설정할 수 있습니까?

나는 웹 사이트를 다시 실행하는 과정에있어 내 모든 페이지 상단에 일반적인 탐색 모음을해야 할 것 :웹 사이트 - 중앙 위치에서 링크를 설정할 수 있습니까?

제가 이야기 코드의

작은 조각 :

<div id="logoNavContainer"> 
    <nav> 
     <ul> 
      <li><a href="contentPage.html" class="glow">Services</a></li> 
      <li><a href="contentPage.html" class="glow">Products</a></li> 
      <li><a href="contentPage.html" class="glow">Training</a></li> 
      <li><a href="contentPage.html" class="glow">Technology</a></li> 
      <li><a href="contentPage.html" class="glow">Clients</a></li> 
      <li><a href="publications.html" class="glow">Publications</a></li> 
      <li><a href="contentPage.html" class="glow">Contact Us</a></li> 
     </ul> 
    </nav> 
</div>

초기에 내가 이것을 코딩 할 때 각 페이지에 대해 내 mainTemplate.html을 가질 수 있고 각각의 콘텐츠에 대해 별도의 .html 페이지를 만들면 정말 편리 할 것이라고 생각했습니다 (여전히 가능하다면). mainTemplate의 올바른 영역 내에 표시됩니다.

그런 식으로 navBar, 링크, 배경 등을 변경할 수 있습니다. 한 위치에서 수행 할 수 있습니다. 이는 CSS의 목적 때문에 존재할 수 있다고 생각합니다.

그러나 Navbar의 각 페이지 시작 부분에 동일한 HTML 코드가 있지만 적어도 하나의 CSS 양식으로 모두 스타일이 지정되어 있습니다.

그래서 (나 미래의 프로그래머) 한 곳에서 모든 페이지의 스타일을 편집 할 수 있습니다.

각 페이지를 구현하고 있으므로 이제는 점점 더 많은 페이지를 탐색해야 navBar 링크를 변경해야하며 매번 같은 동작이 발생합니다.

모든 링크를 한 번에 스왑 아웃 할 수 있도록 한 위치에 설정된 각 HTML 파일 (예 : Java와 같은)에 변수 또는 무언가를 설정하는 것이 가능한지 궁금합니다.

변경을 쉽게하고 중복성을 제거하려고합니다. 나는 Html과 CSS에 대해 매우 익숙하다. 그래서 나는 아주 명백한 해결책을 놓칠 수있는 것처럼 느낀다.

원래 아이디어가 있다면 가능한 한 두 가지 이상의 문제를 해결하고 중복 코드 점수를 없애고이 솔루션을 선호합니다.

미리 감사드립니다.

출처

2012-02-07 Alex

이 똑 바른 클라이언트 쪽 HTML입니까, 아니면 이것을 관리하는 데 도움이되는 일종의 서버 쪽 기술을 사용하고 있습니까? –

나는 이것에 익숙하지 않기 때문에 나는 아주 간단하게하고있다. 하나의 중앙 CSS 스타일 시트로 스타일이 지정된 .html 파일 집합이 있습니다. 내가 실제로 한 가장 복잡한 일은 메인 페이지의 탭으로 된 콘텐츠를위한 자바 스크립트 함수를 만드는 것입니다. – Alex

좋아을, 나는이 잠시 동안 일했다; 각 답변을 조사하고이를 내 코드에 적용하려고합니다.

PHP 완전히 익숙하지 않기 때문에 어디서나 놀지는 못했고 자바 스크립트로 작업했지만 나도 포기했습니다.

내가 돌아와서 Rachel G의 업데이트 된 답변을 볼 때까지. 나는 javascript와 함께 html을 생성하는 것에 대한 논의와 함께 javascript의 내 자신의 조각과 함께 내가 원하는 것을 정확히 작동시키는 버전을 만들었다. 여기

은 어떻게 지금 모든 페이지의 시작 부분에 포함 HTML :

[링크 :

// Links 
var servicesPage = 'designAudit.html'; 
var productsPage = 'pageTemplate.html'; 
var trainingPage = 'pageTemplate.html'; 
var technologyPage = 'pageTemplate.html'; 
var clientsPage = 'pageTemplate.html'; 
var publicationsPage = 'publications.html'; 
var contactPage = 'pageTemplate.html';

다음은 네비게이션 바을 생성

<!doctype html> 
    <html lang="en"> 
     <head> 
      <meta charset="utf-8"> 
      <link href="styleSheet.css" rel="styleSheet" /> 
      <script src="pageFeatures.js" type="text/javascript"></script> 
     </head> 

<body onload="init('tabs')"> 

    <div id="main-container"> 
     <div id="navBar"> 
      <!-- Loaded through Javascript; eliminates repeated code and all navBar Links are now set in one place --> 
     </div> 
     .... All page specific code.

그리고 자바 스크립트 Init()

function init(tabs) { 
    initNavBar(); 
    if (tabs == 'tabs') { 
     initTabs(); 
    } 
}

InitNavBar()

// BEGIN NAVBAR GENERATING CODE 
function initNavBar() { 
    var navBar = document.getElementById("navBar"); 

    var navContainer = document.createElement("div"); 
    navContainer.setAttribute('id','logoNavContainer'); 
     var header = document.createElement("header"); 
      var h1 = document.createElement("h1"); 
       var logo = document.createElement("a"); 
       logo.setAttribute('href','index.html'); 
      h1.appendChild(logo); 

      var nav = document.createElement("nav"); 
      var ul = document.createElement("ul"); 
       var link1 = createLink(servicesPage, "Services"); 
       var link2 = createLink(productsPage, "Products"); 
       var link3 = createLink(trainingPage, "Training"); 
       var link4 = createLink(technologyPage, "Technology"); 
       var link5 = createLink(clientsPage, "Clients"); 
       var link6 = createLink(publicationsPage, "Publications"); 
       var link7 = createLink(contactPage, "Contact"); 

      ul.appendChild(link1); 
      ul.appendChild(link2); 
      ul.appendChild(link3); 
      ul.appendChild(link4); 
      ul.appendChild(link5); 
      ul.appendChild(link6); 
      ul.appendChild(link7); 
     nav.appendChild(ul); 
    header.appendChild(h1); 
    header.appendChild(nav); 
    navContainer.appendChild(header); 

    navBar.appendChild(navContainer); 
}

에서 CreateLink() 어쨌든

// Indented to Represent Html layering. 
function createLink(destPage, text) { 
    var link = document.createElement("li");  // <li> 
    var linkAnchor = document.createElement("a"); // <a> 
    linkAnchor.setAttribute('href', destPage);  // <a href=""> 
    linkAnchor.setAttribute('class','glow');  // <a href="" class="glow"> 
     var services = document.createTextNode(text); // <a href="" class="glow">Text 
    linkAnchor.appendChild(services);   // </a> 
    link.appendChild(linkAnchor);    // <li> 
    return link; 
}

, 도움을 주셔서 감사합니다. 나는 여기에 나온 것과 상당히 다른 점을 생각해 냈다.

누군가가 이것을 조사하면 내가 가지고있는 한 가지 질문은 클라이언트의 브라우저가 가지고 있지 않으면 내 사이트가 완전히 미적으로 죽을 것입니다. 이런 일이 일어날 가능성이 있습니까?

나는 개인적으로 자바 스크립트없이 컴퓨터를 사용한 적이 있지만 세상은 보통 그렇게 간단하지 않다는 것을 알고있다.

출처

2012-02-08 17:49:47 Alex

순수한 HTML에서는 불가능합니다. 현재 생각할 수있는 해결책은 두 가지가 있습니다.

전처리 PHP와 같은 프로세서를 사용하여 정적 HTML 페이지를 제공 할 수 있습니다. 이것은 내 생각에 가장 좋은 접근법입니다. include ('header.html') 만 호출하면 헤더가 포함됩니다. 이것이 모든 곳에서 이루어지는 방식입니다.

JavaScript JavaScript를 사용하여 다른 위치에서 navbar를로드 할 수도 있습니다. 여기에 단점은 페이지 당 두 개의 요청을 requiere 것이며 navbar가로드 될 때까지 어떤 종류의 애니메이션을로드해야합니다.

편집 : 그냥 프레임/iframes을 순수 HTML로 사용할 수 있다는 것을 깨달았습니다.

mymenu에서 나온 만들기 : 프레임 :

출처

2012-02-07 19:42:15 kaoD

또는 대부분의 웹 서버에서 지원하는대로 SSI (서버 측 포함) – KevinDTimm

@KevinDTimm SSI에 대해 잘 알지 못했습니다. – kaoD

매우 더러운 솔루션을 빨아, 음 ... 때문에 나는 처음에 프레임을 마련하지 않았다 명심하십시오.내용에 JS :

<script src="mymenu.js"></script>

는 희망이 도움이 : 당신이 네비게이션 바을 제공하려는 모든 HTML에서

document.write("<div id='logoNavContainer'><nav><ul><li><a href='contentPage.html' class='glow'>Services</a></li></ul></nav></div>");

이 포함! Peter

출처

2012-02-07 19:54:32 Peter

해결책을 얻으려고 노력해 왔지만 제대로 작동하고 있습니다. 문자열을 서식 지정하여 HTML처럼 보입니다. 가독성을 위해 newLines를 추가하여 인식을 중지합니다. 이 주위에 어떤 방법이 있습니까? 자바에서는 두 개의 따옴표 사이에있는 한 원하는대로 문자열을 포맷 할 수 있지만이 경우에는 나타나지 않습니다. – Alex

@Alex 내 대답에 코드 블록을 사용해보십시오. –

this article을 볼 수 있습니다. 순수 HTML은 포함을 지원하지 않습니다. 이 기사에는 사용할 수있는 JavaScript 솔루션이 포함되어 있습니다 (아래 발췌 부분 참조).

코드에 대한 그래서

One Option

, 당신이 할 수 있습니다 :

var navigationDiv = "<div id='logoNavContainer'>" + 
         "<nav>" + 
          "<ul>" + 
           "<li><a href='contentPage.html' class='glow'>Services</a></li>" + 
           "<li><a href='contentPage.html' class='glow'>Products</a></li>" + 
           "<li><a href='contentPage.html' class='glow'>Training</a></li>" + 
           "<li><a href='contentPage.html' class='glow'>Technology</a></li>" + 
           "<li><a href='contentPage.html' class='glow'>Clients</a></li>" + 
           "<li><a href='publications.html' class='glow'>Publications</a></li>" + 
           "<li><a href='contentPage.html' class='glow'>Contact Us</a></li>" + 
          "</ul>" + 
         "</nav>" + 
        "</div>"; 
document.write(navigationDiv);

출처

2012-02-07 19:54:39

Peter는 JavaScript 옵션의 예를 제시했습니다. –

결국 최종 솔루션이 상당히 달랐지 만 이것이 분명히 해결해주었습니다. 감사합니다. +1 – Alex

도와 주셔서 감사합니다 :) –

웹 사이트 - 중앙 위치에서 링크를 설정할 수 있습니까?

답변

관련 문제