Ir ao conteúdo
  • Cadastre-se

Target no CSS


Posts recomendados

Olá,

Tenho algum conhecimento em html, o bastante para copiar e colar alguns códigos de Experts dos Vários Fóruns da Net e adaptá-los à minha HP. Desculpe o linguajar, pois, claro, sou leigo no assunto.

 

Fiz uma busca nos Tópicos CSS, deste Fórum, mas não encontrei algo específico que pudesse eliminar minhas dúvidas.

A minha Página é bem antiga e ainda usa o Frameset, com dois frames :

1) Uma Coluna, com pequena largura, à esquerda com os links de navegação - É fixa.
2) Outra Coluna, com a largura restante e bem maior, com os conteúdos que são chamado pelos links, acima mencionados - Muda os conteúdos de acordo com a URL que o usuário clicar.

Bom, como muitos sabem, o tal Frameset e também os Iframes estão praticamente em desuso, pelo fato da dificuldade de idexação dos buscadores, o HTML5 já não admite isso e por vários outros motivos, e então fui aconselhado a mudar tudo para CSS, que é mais atual e deixa a página com fácil navegação.

Para ser ter uma ideia da minha página ( ainda com Framesets ), é só acessar : http://jefferson.freetzi.com

Muito bem, para abandonar o Frameset de vez, e manter, mais ou menos, o mesmo jeito dessa página antiga, estou tentando adaptar tudo para alguns scripts CSS ( posso chamá-los de scripts? ) que copiei de vários fóruns. O rascunho está assim :

 

Renov-Div.jpg

 

Vejam, gostaria de não ter que usar o javascript, pois é outro conselho que recebi de usar o mínimo possível pois alguns navegadores tem seu javascript desligado de propósito pelo próprio usuário, por uma questão de segurança.

Pelo pouco que sei, acho que a chave de tudo é o "TARGET", mas não sei configurá-lo, tanto na folha de estilos ( antes da tag </head> ) como também dentro da tag <body>, normalmente após cada link, como tem funcionado na antiga página dos Framesets, ou seja :

<a href="prin.html" target="1">Introdução</a>

O número "1", tem origem em : <frame src="prin.html" name="1" noresize>.

Já tentei várias dicas de configurar o CSS e o Target, mas só DUAS coisas aconteceram até agora :

- OU o link clicado faz abrir uma nova aba ou navegador ;

- OU o link clicado cobre toda a página, inclusive o Menu que deveria ficar FIXO à esquerda.

Será que alguém pode me ajudar?

Muito grato desde já.
Jeff

 

Link para o comentário
Compartilhar em outros sites

  • 2 semanas depois...
  • Moderador

@Jeff54

 

Tu quer modernizar o site, mas manter o visual certo?

Nesse caso, podes utilizar jQuery  com ajax... e fazer requisições assíncronas para carregar o conteúdo no lugar que quer... com isso não precisa usar frameset, target.. e etc, basta estruturar ou restruturar com a técnica tableless

 

Ou adote a tendência de 2015, que é ter todo o conteúdo em uma única página... e os links do menu apenas utilizam a âncora para ir até o setor onde está o conteúdo desejado.

Link para o comentário
Compartilhar em outros sites

@Jeff54



pelo o que você disse:

HTML5 já não admite isso e por vários outros motivos, e então fui aconselhado a mudar tudo para CSS, que é mais atual e deixa a página com fácil navegação.


o CSS nao vai te dar o que voce esta esperando - clicar no menu do lado e mudar o conteudo do lado
o PHP é bem fácil e seu host suporta, se voce aprender o minino de PHP e como usar o include vai te resolver a parte do menu

outros pontos que nao pertence ao html5

  • estruturar parte da pagina com <table>
  • centralizar com <center>,
  • definir fonte com <font>
  • espaçar paragrafos com <br>
  • itens de menu feito de <p>


o layout do seu site e simples nao vai ser difícil pra voce
é so pedir ajuda no forum

Link para o comentário
Compartilhar em outros sites

@Jeff54

 

Tu quer modernizar o site, mas manter o visual certo?

Nesse caso, podes utilizar jQuery  com ajax... e... com isso não preci fazer requisições assíncronas para carregar o conteúdo no lugar que quersa usar frameset, target.. e etc, basta estruturar ou restruturar com a técnica tableless

 

Ou adote a tendência de 2015, que é ter todo o conteúdo em uma única página... e os links do menu apenas utilizam a âncora para ir até o setor onde está o conteúdo desejado.

 

 

Olá Dif,

 

Valeu pela ajuda!

 

Massss,,, como sou leigo no assunto ( Só conheço o básico do HTML e...quase nada de PHP ). Então peço sua gentileza de um pouquinho da sua paciência de professor para ensinar esse aluno aqui.

 

Veja, pode corrigir à vontade os termos que usarei, mas sei que vai ser fácil me ajudar, com seus conhecimentos e compreensão. O que tenho de scripts e que dão a aparencia da figura que postei acima são :

 

<html><head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">		<title>2 Column Frames Layout — Left Menu</title>		<style type="text/css">                                  div {                       list-style: none;                       margin: 0;                       padding: 0;}				body{			margin: 0;			padding: 0;			overflow: hidden;			height: 100%; 			max-height: 100%; 			font-family:Sans-serif;			line-height: 1.5em;		}		#nav{			position: fixed;          width:16%; /* width of the menu div */     top: 0px; /* distance to the top of the menu div from the top of the page */     bottom: 0px; /* distance to the Bottom of the menu div from the Bottom of the page */     margin: 0px;     padding: 5px;     background: #4682B4;          text-decoration: none;     border-right: 10px solid #696969;}#nav a{     width: 90%;     font: 15px 'verdana', helvetica, sans-serif;     font-weight:bold;     color: #0000FF;     background: #FF9900;     text-align: center;     text-decoration: none;     padding: 5px 5px;     margin: 5px 5px;        border-radius: 10px; /* border-radius */     float: left;        z-index:999;}#nav a:hover {color: #FFFFFF}#Conteudo {             position: rigt;          top: 35px; /* distance to the top of the menu div from the top of the page */     text-align: left;     }				</style><!-- A linha abaixo importa a biblioteca jQuery que facilita muito a execução de requisições AJAX --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" charset="iso-8859-1"></script> <!-- O código abaixo é o que fará as requisições e preencherá o conteúdo --><script>function carregaPagina(pagina) {	$.ajax({		type: 'GET',                url: pagina	}).done(function(resposta) {		$("#Conteudo").html(resposta);	});}</script>	</head>	<body>			<div id="nav">            <br><a href="javascript:carregaPagina('prin.html');">Introdução</a><a href="javascript:carregaPagina('textos.html');">Textos</a><a href="javascript:carregaPagina('chico-xavier.html');">Chico Xavier</a><a href="javascript:carregaPagina('Materias-Especiais.html');">Matérias Especiais</a><a href="javascript:carregaPagina('Videos2.html');">Vídeos</a><a href="javascript:carregaPagina('Livros.html');">Livros para Download</a><a href="javascript:carregaPagina('faq.html');">Perguntas Frequentes</a><a href="javascript:carregaPagina('Pesquisa-no-Site.html');">Pesquisa no Site</a><a href="javascript:carregaPagina('link.html');">Links</a><a href="javascript:carregaPagina('Click-Doe-Gratis.html');">Doações Grátis</a><a href="javascript:carregaPagina('Agradec.html');">Agradecimentos</a><a href="javascript:carregaPagina('Guestb302.shtml');">Livro de Visitas</a><a href="javascript:carregaPagina('Mapa-Site-Extenso.html');">Mapa do Site</a><a href="javascript:carregaPagina('noticias.html');">Notícias</a>            </div>   <div id="Conteudo" margin: 0px; float:right;"></div>	</body></html>

Bom, dessa forma e, traduzindo  para uma linguagem simples e aplicada aos scripts que Eu postei, e conforme Você disse, que agora vai entre aspas, como Eu deveria colocar o ..."jQuery  com ajax..." "...fazer requisições assíncronas para carregar o conteúdo no lugar que quersa usar frameset, target.. e etc, basta estruturar ou restruturar com a técnica tableless..."

 

E o que achei mais interessante, no que Você falou, ou seja : "Ou adote a tendência de 2015, que é ter todo o conteúdo em uma única página... e os links do menu apenas utilizam a âncora para ir até o setor onde está o conteúdo desejado."

 

Ou seja, apenas me diga um pequeno exemplo de como e onde devo colocar os scripts indicados por Você no meu código acima. Veja, não precisa ter um trabalhão com as minhas questões, mas achei que, se Eu pudesse aplicar a sua recomendação, tudo ficaria mais fácil, atual e leve na minha página.

 

Desde já e, mais uma vez, agradeço pela colaboração.

 

Abs.

Jeff

 

 

======

 

@Jeff54

pelo o que você disse:

o CSS nao vai te dar o que voce esta esperando - clicar no menu do lado e mudar o conteudo do lado

o PHP é bem fácil e seu host suporta, se voce aprender o minino de PHP e como usar o include vai te resolver a parte do menu

outros pontos que nao pertence ao html5

  • estruturar parte da pagina com <table>
  • centralizar com <center>,
  • definir fonte com <font>
  • espaçar paragrafos com <br>
  • itens de menu feito de <p>
para usar CSS no seu site tera mudar/eliminar/adicionar/ quase todas as tags dele 

o layout do seu site e simples nao vai ser difícil pra voce

é so pedir ajuda no forum

 

 

 

Olá Hedhorse,

Mas a minha página é antiga mesmo. Comecei em 2000, na antiga Geocities, depois passou para Yahoo-Geocities até 2009, quando a Yahoo parou de hospedar sites free. Então, pesquisando na net, achei o provedor Freetzi.com, que oferece mais espaço, dá suporte a muita coisa, como PHP ( embora Eu só use PHP no livro de visitas   ... isso é bem antigo, mas na época era atual e Eu acabei deixando ficar ). Ou seja, se a minha página tivesse mais 5 anos, teria nascido junto com a internet no Brasil ...rsrsrs.

Bom, como Eu disse, para não dizer nada, conheço quase nada de PHP. A única página em PHP do meu site é a do velho e bom "Livro de Visitas". Os Scripts em PHP que estão lá, Eu copiei de vários fóruns, e fui adaptando-os à minha página pelo método de tentativas, erros e acertos. Levei um tempão até deixá-la funcionando razoavelmente.

Olha, se Você pudesse me explicar como mudar o CSS que Eu já conseguir montar e me passar os ajustes necessários, creio que a moderação irá entender que Você está também ensinando alguém que quer apenas aprender o mínimo necessário para atualizar a minha página ( que lembra mesmo os anos 90...rs ).

 

Bom é isso. Agradeço a Você também pela boa vontade em me ajudar. Mas como disse antes, peço sua paciência e compreensão, pois não sou versado em nenhuma linguagem e estrututa xml. Na verdade, nem pretendo ser. Gostaria apenas de aprender só o suficiente para dar um upgrade na minha jurássica HP...rsrsrs.

Valeu.

Abs!

Jeff

Link para o comentário
Compartilhar em outros sites

  • Moderador

@Jeff54

 

Estamos aqui para ajudar!

 

Você pode ler sobre uso de âncoras aqui: http://chocoladesign.com/ancora-html

 

Na verdade é uma técnica bem simples, onde você define uma ID em um elemento div, e no lugar do endereço de link você põe o nome da ID... assim levando o usuário até a área onde está o conteúdo.

 

exemplo simples:

<body>   <header>   <nav>     <a href="#conteudo1">Link 1</a>     <a href="#conteudo2">Link 2</a>     <a href="#conteudo3">Link 3</a>     <a href="#conteudo4">Link 4</a>   </nav>    </header>    <div class="container">       <section id="conteudo1"></div>       <section id="conteudo2"></div>       <section id="conteudo3"></div>       <section id="conteudo4"></div>   </div>   

As tags utilizadas são do html 5, onde o <nav> é designado para menus, e section são designados para definir setores dentro de um elemento.

Veja que cada setor tem uma ID distinta, que é linkado no menu. Quando a pessoa clica nele,  é levada até o local do conteúdo designado. Esta é a tendência 2015 dos websites... ou seja, apenas uma página, sem uso de php( veja que as páginas mais modernas utilizam esta técnica.. e atualmente estou desenvolvendo uma página utilizando ela também)

 

Então se você deseja aprender o suficiente para re-fazer seu site utilizando as técnica atuais,  foque no Front-end( html, css  e javascript), e deixe de lado o php por enquanto.. já que você não vai disponibilizar  login, não vai utilizar banco de dados.. e etc.. 

 

Primeiramente, leia sobre as tags do html do modelo tableless( sem tabelas), no caso o uso de DIV... depois aprenda um pouco sobre o css e como estilizar ele, sites indicados para leitura:

http://www.w3schools.com/

codeacademy(ensina o básico e é bom)

e o google! 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

@Jeff54

 

Estamos aqui para ajudar!

 

Você pode ler sobre uso de âncoras aqui: http://chocoladesign.com/ancora-html

 

Na verdade é uma técnica bem simples, onde você define uma ID em um elemento div, e no lugar do endereço de link você põe o nome da ID... assim levando o usuário até a área onde está o conteúdo.

 

exemplo simples:

<body>   <header>   <nav>     <a href="#conteudo1">Link 1</a>     <a href="#conteudo2">Link 2</a>     <a href="#conteudo3">Link 3</a>     <a href="#conteudo4">Link 4</a>   </nav>    </header>    <div class="container">       <section id="conteudo1"></div>       <section id="conteudo2"></div>       <section id="conteudo3"></div>       <section id="conteudo4"></div>   </div>   

As tags utilizadas são do html 5, onde o <nav> é designado para menus, e section são designados para definir setores dentro de um elemento.

Veja que cada setor tem uma ID distinta, que é linkado no menu. Quando a pessoa clica nele,  é levada até o local do conteúdo designado. Esta é a tendência 2015 dos websites... ou seja, apenas uma página, sem uso de php( veja que as páginas mais modernas utilizam esta técnica.. e atualmente estou desenvolvendo uma página utilizando ela também)

 

Então se você deseja aprender o suficiente para re-fazer seu site utilizando as técnica atuais,  foque no Front-end( html, css  e javascript), e deixe de lado o php por enquanto.. já que você não vai disponibilizar  login, não vai utilizar banco de dados.. e etc.. 

 

Primeiramente, leia sobre as tags do html do modelo tableless( sem tabelas), no caso o uso de DIV... depois aprenda um pouco sobre o css e como estilizar ele, sites indicados para leitura:

http://www.w3schools.com/

codeacademy(ensina o básico e é bom)

e o google! 

 

Bom dia Dif,

 

Cara, Você deu uma AULA!

Estou agora no trabalho, mas quando chegar em casa vou ler tudo com muita atenção e vou aplicar na minha HP.

Você explicou com esmero combinado com simplicidade. Até um leigo como Eu entendi tudo e achei fácil migrar o meu velho Html simples para CSS.

É de pessoas assim que os demais Fóruns precisam! Explicação simples e direta, pois outras pessoas como Eu poderão se beneficiar com tudo isso.

 

Abraços e tudo de Bom!

Jeff

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Olá Dif,
 
Na hora do almoço, li melhor seus links, mas admito que me ative mais no exemplo deixado por Você, por achar que conseguiria mais rápido atingir meus objetivos.
 
Bom, gostaria que o Menu vertical fique fixo à esquerda e os conteúdos, à direita, mudando a cada click.  Substituindo o seu exemplo com o que tenho, fiz vários testes, mas não sei o que não está certo.
 
Sendo bem objetivo, o script ficou, resumidamente, assim :

    <body>       <header>       <nav>         <a href="#prin.html">Introdução</a>         <a href="#textos.html">Textos</a>         <a href="#chico-xavier.html">Chico Chavier</a>         <a href="#Materias-Especiais.html">Matérias Especiais</a>       </nav>        </header>        <div class="container">           <section id="prin.html"></div>           <section id="textos.html"></div>           <section id="chico-xavier.html"></div>           <section id="Materias-Especiais.html"></div>       </div>       

Como Você sabe que minha experiência é muito pouca, então enumero minhas dúvidas :

 

1) O que fiz acima tem sentido?

2) A Tag <header> é o mesmo que a tag <head> ?

3) Imagino que depois do fechamento da tag </header>, o conteúdo seguinte que Você colocou DEVE estar dentro da Tag <body>  e  </body>. Isso tem sentido?

4) Tentei o que está acima, mas sempre que clicava em um link, por exemplo :"prin.html" ( ou "Introdução" ), a página correspondente cobria TODA a tela, fazendo o Menu vertical sumir, pois estava encoberto pela página "Introdução".

5) Como fazer para o conteúdo de cada item ou link obedeça a um comando que deixe o Menu vertical fixo e visível e faça o conteúdo correspondente ficar sempre do lado DIREITO da tela, que tem um espaço maior, conforme a figura que postei no meu primeiro post?

6) Se o Script que eu fiz acima, substituindo as palavras exemplos que Você deixou, estiver errado ( e DEVE estar mesmo ), como seria o Script correto, tendo por base parte dos comandos que postei no meu segundo post?

 

Acho que falta pouco, pois pelas suas palavras, a coisa é simples, Eu é que não substitui certo as palavras do seu exemplo.

 

Desculpe tanta pergunta.

 

Abs.

Jeff

Link para o comentário
Compartilhar em outros sites

  • Moderador

@Jeff54

 

Não tem problema perguntar.. até deve!

Então, o meu exemplo foi extremamente simples, que seria só para retratar o objetivo. 

 

Vamos as perguntas por partes.

 

 

1) O que fiz acima tem sentido?

 

Sim, tem!, mas era só um exemplo. Você pode fazer de outra maneira apenas respeitando alguns detalhes como ID  e chamada do ID no link.

 

 

 

2) A Tag <header> é o mesmo que a tag <head> ?

 

Não. a tag header é uma tag nova implementado no HTML 5, que é designado para cabeçalhos, isso significa que podes ter mais de um cabeçalho na sua página.

A tag head, é designada para incorporar os meta-tags e chamada de scripts css, javascript e etc.

 

 

 

3) Imagino que depois do fechamento da tag </header>, o conteúdo seguinte que Você colocou DEVE estar dentro da Tag <body>  e  </body>. Isso tem sentido?

Mais ou menos isso. Na verdade o elemento header também está dentro de body. ali no exemplo só esqueci de fechar a tag.. porque era só um exemplo rsrs

 

 

 

4) Tentei o que está acima, mas sempre que clicava em um link, por exemplo :"prin.html" ( ou "Introdução" ), a página correspondente cobria TODA a tela, fazendo o Menu vertical sumir, pois estava encoberto pela página "Introdução".

 

Está errado. neste tipo de técnica,  não se usa outras páginas para o conteúdo e nos links, ele é controlado pelo valor ID, que não deve ser um arquivo html.

 

 

 

5) Como fazer para o conteúdo de cada item ou link obedeça a um comando que deixe o Menu vertical fixo e visível e faça o conteúdo correspondente ficar sempre do lado DIREITO da tela, que tem um espaço maior, conforme a figura que postei no meu primeiro post?

 

Isto é o resultado da pergunta 4!, os conteúdos de cada "página" na verdade ficam todos na mesma, separados por seções.  a técnica consiste em navegar entre os elementos em uma mesma página.

Vou postar um novo exemplo funcional para você ver o código e ver o funcionamento ao mesmo tempo.

 

 

 

6) Se o Script que eu fiz acima, substituindo as palavras exemplos que Você deixou, estiver errado ( e DEVE estar mesmo ), como seria o Script correto, tendo por base parte dos comandos que postei no meu segundo post?

Sim, de fato o código possui erros,  e é bem simples de arrumar,  mais tarde, vou elaborar um exemplo funcional parecido com que você quer fazer, e vou por comentários no código para que você leia e entenda o que esta acontecendo em cada parte do código.  Peço por gentileza que aguarde, que logo vou atualizar este post com o exemplo digo acima.

 

Não tenha medo de perguntar, o fórum é feito para trocarmos ideias e conhecimentos.

att,

Dif

Link para o comentário
Compartilhar em outros sites

Bom dia Dif,

 

Começo agradecendo sua boa intenção em me ajudar e também, quem sabe, ajudar a outros que poderão ler e se beneficiar dos seus conhecimentos.

 

Vi a página que Você indicou. Vou ler depois de novo, aplicando os critérios para a minha página.

Aguardo também a sua gentileza de deixar aqui um exemplo funcional parecido com que eu quero fazer, com comentários nos códigos para entender o que está acontecendo em cada parte do código.

 

Valeu Dif!

Jeff

Link para o comentário
Compartilhar em outros sites

Bom dia Dif,

 

Foi ótimo o nosso diálogo.

Vou ler com atenção a página indicada e adaptar tudo para a minha HP.

Continue assim, ajudando os menos experientes. A sua didática ( e paciência também...rsrs ) estimulam a aprender.

 

Abraços, muito sucesso e tudo de bom!

Jeff.

Link para o comentário
Compartilhar em outros sites

Boa noite Dif,

Gostaria de voltar ao assunto, pois estou aprendendo um pouquinho.

Suas explicações são claras, ou seja : "...Isto é o resultado da pergunta 4!, os conteúdos de cada "página" na verdade ficam todos na mesma, separados por seções.  a técnica consiste em navegar entre os elementos em uma mesma página...."

Fiz um teste com o exemplo dado na url que Você deixou aqui, ou seja, copiei e colei num bloco de notas e salvei respectivamente duas páginas com extensão "html" e  outra com extensão "css", linkando a página de estilos (css) à página principal  ( html ) do Menu, e a cada link chamado, vinha a página correspondente.

Tudo ficava na MESMA página, com extensão "html".

Mas, no caso  sob análise, o meu site tem 94 páginas distintas, BEM extensas e algumas com grandes figuras que ocupariam um espaço considerável ( todas estão no diretório raiz do meu Servidor ).

Bom, existiria um método para o CSS codificar UMA página com o "Menu" fixo à esquerda e chamar CADA uma das NOVENTA E QUATRO  páginas que ficariam à direita da tela, cada uma sobrepondo-se a outra, a cada vez que for chamada uma página específica, à medida que o usuário quiser ver ou rever a página de sua preferência?

Se caso isso não for possível com o CSS, haveria um jeito de colocar um comando do PHP ( Acho que é o include ), na página principal ( html ) que contém o Menu?

Se nada disso for possível, então só restaria usar o javascript?


Muito grato.
Jeff

Link para o comentário
Compartilhar em outros sites

  • Moderador

@Jeff54

 

Vou direto ao ponto da pergunta depois comentarei sobre lance da técnica anterior.

Dá para fazer com php ou javascript.. eu prefiro o javascript(jQuery)

 

Bem, pelo que eu vi no seu site, no menu possui 14 links, onde cada um tem uma página diferente.( os 94 links devem ser contando propagandas  outras coisas que estão dentro de um dos 14 links do  menu.

 

 

Tu podes, fazer isso com jQuery, usando ajax.. a função load. ... tu cria por exemplo uma página para cada link do menu e coloca seus conteúdos ali dentro.. e usa o jquery para chama-los onde quiser exemplo:

 

Menu:

<nav>    <a href="home.html">home</a>     <a href="link1.html">Link 1</a>     <a href="link2.html">Link 2</a></nav>

Lugar onde será carregado:

<article id="conteudo"></article>

Jquery para inserir as páginas:

$(document).ready(function(){       //carrega a primeira página a ser exibida	$('#conteudo').load("home.html");	        //define que o elemento que será clicado	$('a').click(function(event) {                 //o mesmo que return false, previne erros                  event.preventDefault();                                  //carrega no div a página clicada controlada pelo valor do  href 		 $('#conteudo').load($(this).attr('href'));		       });});

As páginas que serão criadas para o conteúdo, não precisam ter todos os elementos da estrura HTML... pois isso você já incluiu no arquivo index.html.

 

então por exemplo a pagina home.html por exemplo  seria:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.			Curabitur nec neque nisi. Sed vulputate dui est, ac euismod magna			imperdiet sit amet. Curabitur cursus ante ac turpis auctor, at			scelerisque augue dictum. Aenean elit quam, gravida ut efficitur			quis, aliquet in leo. Praesent sed egestas ex. Curabitur sit amet			libero vitae erat fringilla efficitur id non orci. Aliquam enim leo,			pellentesque eu feugiat in, malesuada ac dui. Donec at arcu nec ipsum			cursus tristique. Quisque ac molestie tortor. Nulla ultricies arcu			sit amet turpis dictum, id sollicitudin nulla consequat. Pellentesque			in porttitor libero. Nulla quis magna eget felis dapibus mollis.			Donec lectus risus, sollicitudin sed ultricies eu, feugiat commodo			turpis. Quisque faucibus elit ac suscipit vulputate. Aenean nec			efficitur libero. Ut auctor egestas ipsum, facilisis congue diam			finibus ut. Ut varius at neque ac pharetra. Proin vehicula tristique			dui sit amet facilisis. Nunc sollicitudin nisl ac nisi dapibus			rutrum. In id nibh ac metus hendrerit blandit sed at tortor. Nunc			eget nisl at nisl iaculis imperdiet id id odio. Vestibulum risus leo,			ultrices volutpat eros non, suscipit varius justo. Cum sociis natoque			penatibus et magnis dis parturient montes, nascetur ridiculus mus.			Pellentesque vel sodales risus, tincidunt maximus purus. In aliquam			erat mattis imperdiet dictum. Aenean nec efficitur libero. Ut auctor			egestas ipsum, facilisis congue diam finibus ut. Ut varius at neque			ac pharetra. Proin vehicula tristique dui sit amet facilisis. Nunc			sollicitudin nisl ac nisi dapibus rutrum. In id nibh ac metus			hendrerit blandit sed at tortor. Nunc eget nisl at nisl iaculis			imperdiet id id odio. Vestibulum risus leo, ultrices volutpat eros			non, suscipit varius justo. Cum sociis natoque penatibus et magnis			dis parturient montes, nascetur ridiculus mus. Pellentesque vel			sodales risus, tincidunt maximus purus. In aliquam erat mattis			imperdiet dictum. Aenean nec efficitur libero. Ut auctor egestas			ipsum, facilisis congue diam finibus ut. Ut varius at neque ac			pharetra. Proin vehicula tristique dui sit amet facilisis. Nunc			sollicitudin nisl ac nisi dapibus rutrum. In id nibh ac metus			hendrerit blandit sed at tortor. Nunc eget nisl at nisl iaculis			imperdiet id id odio. Vestibulum risus leo, ultrices volutpat eros			non, suscipit varius justo. Cum sociis natoque penatibus et magnis			dis parturient montes, nascetur ridiculus mus. Pellentesque vel			sodales risus, tincidunt maximus purus. In aliquam erat mattis			imperdiet dictum. Aenean nec efficitur libero. Ut auctor egestas			ipsum, facilisis congue diam finibus ut. Ut varius at neque ac			pharetra. Proin vehicula tristique dui sit amet facilisis. Nunc			sollicitudin nisl ac nisi dapibus rutrum. In id nibh ac metus			hendrerit blandit sed at tortor. Nunc eget nisl at nisl iaculis			imperdiet id id odio. Vestibulum risus leo, ultrices volutpat eros			non, suscipit varius justo. Cum sociis natoque penatibus et magnis			dis parturient montes, nascetur ridiculus mus. Pellentesque vel			sodales risus, tincidunt maximus purus. In aliquam erat mattis			imperdiet dictum.</p>

Veja que dentro de home só coloquei um elemento  <p> contendo alguma escrita...  o código jquery, faria incluir o home.html  dentro do elemento designado.

Tentei ser o mais objetivo possível.

Link para o comentário
Compartilhar em outros sites

Olá Dif,
 
Apenas para mostrar alguns links escondidos da minha HP, temos no Menu :
 
* No Link Textos > Há 23 páginas, sendo que, no Texto 1, há duas sub-páginas ( Parte 1 e Parte 2 )  e no Texto-12, há 20 sub-páginas.
 
* No Link Matérias Especiais, há 40 sub-páginas.
 
Ou seja, só até aqui, temos Menu ( 15 páginas ) + Textos ( 23 +2 + 20 páginas ) + Matérias Especiais ( 40 Páginas ) = 100 páginas.
 
Isso fora os outros links indicados nessas páginas espalhadas na HP.
 
Daí a minha dificuldade em ter um Menu Fixo no lado esquerdo e mais de 100 páginas ( no post anterior, admito que Eu chutei 94 Páginas, com preguiça de ficar somando tudo ) que, no Menu, vão mudando a cada click do usuário, na parte direita ( Conteúdo ) e maior da tela, que podem ser chamadas não só pelo Menu, mas também pelas páginas Pai, filhos e "netos", escondidas visualmente, conforme comentado acima.
 
Bom, pela sua explicação, tenho que fazer uma outra página com extensão ".js", tipo "Jquery.js" contendo o script que parece ser um comando PHP ( só estou usando essa linguagem porque Você sabe que sou iniciante em tudo ).
 
E a tag <article id="conteudo"></article> deve ficar em cada página que já existe ( as 100 páginas que Eu citei ) ou ficaria na própria Página do Menu, um pouco mais embaixo dos links ? Além disso, Eu teria que adicionar um comando do tipo :

<script src="JQuery.js"></script> ?

 

Ou seja, penso que a Página do Menu poderia ficar, resumidamente, assim :
 

<html><body><head><script src="JQuery.js"></script></head><nav><a href="prin10.html">Introdução</a><a href="textos10.html">Textos</a><a href="chico-xavier10.html">Chico Xavier</a><a href="Materias-Especiais10.html">Matérias Especiais</a><a href="Videos10.html">Vídeos</a><a href="Livros10.html">Livros para Download</a><a href="faq10.html">Perguntas Frequentes</a><a href="Pesquisa-no-Site10.html">Pesquisa no Site</a><a href="link10.html">Links</a><a href="Click-Doe-Gratis10.html">Doações Grátis</a><a href="Agradec10.html">Agradecimentos</a><a href="Guestb302-10.shtml">Livro de Visitas</a><a href="Mapa-Site-Extenso10.html">Mapa do Site</a><a href="noticias10.html">Notícias</a>           </nav> <article id="conteudo"></article>.........</body></html> 

Acho que falta bem pouco para Eu conseguir largar os Framesets que vinham funcionando até hoje, mas creio que num futuro breve, até os navegadores deixarão de reconhecê-los.

 

Obrigado pela ajuda e paciência.

Jeff

Link para o comentário
Compartilhar em outros sites

  • Moderador

@Jeff54

 

Este é o caminho.

 

A estrutura, é isso que mostrou mesmo. o article é  uma nova tag no html 5 especial para conteúdos, assim como o nav para menu.

O jquery, você só precisa chamar do CDN oficial e criar algo como funcoes.js  que englobará tudo o código javascript que vai usar. até aí OK!

 

Note que o <article id="conteudo"></article>  vai estar sempre vazio, ou seja, o conteúdo dos arquivos html do menu serão inseridos dentro desta tag article.

 

Como você disse que também tem vários outros links em cada arquivo html do menu, você vai criar um novo elmento nav em cada um destes arquivos html contendo seus próprios menus.. e outra tag do tipo article...  sendo assim vai usar novamente o javascript para inserir o conteúdo.

 

É desta forma que você vai contornar o problema de substituição dos framesets. 

 

Contudo, Hj em dia, seria mais interessante você remodelar seu site, ou seja, com outra aparência, deixando mais moderno. e etc..

Posso recomendar o uso do wordpress que é bem fácil de entender como mexer como iniciante.. ou até mesmo profissional.

 

Dá trabalho ter que migrar os conteúdos quase que manualmente... mas no final o resultado seria até melhor. pois o wordpress permite gerenciar os conteúdos.(veja q isso é só uma sugestão)

 

Em suma,  você vai ter o seu menu principal fixo do lado esquerdo, em cada página do menu, você vai criar um sub menu não fixo(aquele que aparece apenas dentro daquela página) que irá abrir o conteúdo dentro da tag article.

 

Um detalhe, as páginas de conteúdo, não precisam ter as todas as tags do html ... tipo  o <html>, <body> e etc... podes criar um arquivo html que contenha só um DIV ou um section... ou um <p> ... ou contendo um <nav> em conjunto com o DIV...

 

e por ai vai.

 

O que eu posso recomendar: 

 

deixe intacto seu site atual,  crie uma pasta dentro do seu servidor e faça uma outra versão de testes e vai testando!

é assim que eu trabalho.. crio uma pasta com o nome de previa e vou testando ali, no final quando tiver pronto, eu substituo o antigo pelo novo!

 

Boa sorte o seu trabalho

Link para o comentário
Compartilhar em outros sites

Boa tarde Dif,

 

Baixei o CDN da Microsoft. Tinha a opção de baixar de um site do Google, mas vi que os conteúdos eram iguais ( Um monte de comandos, tudo em linha e deve ter umas 200 linhas ), mas foi só copiar, colar no Bloco de Notas e formar o meu arquivo Jquery.js

 

Vou tentar remodelar a página, mas primeiro fazendo-a funcionar de modo que o Menu chame as principais páginas e depois, colocar os sub-Menus nas páginas secundárias, conforme Você disse. Aí me sentirei seguro para dar um upgrade na HP.

 

Grato pela ajuda, paciência e consideração com o meu problema.

 

Um dia Eu aprendo a mexer direito com tudo isso ..rsrsrs...

 

Abs.

Jeff

Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...