28 replies to this topic

[TheoB]

Olá pessoal,

Estou começando a estudar um pouco de webdesign e estou tomando uma surra para saber como fazer a navegação do meu site.
Há muito tempo atrás eu fiz um site com frames, onde eu salvava um "index" e um monte de páginas que ia montando baseadas nesse "index".

Estou vendo que muita coisa mudou e que a galera não está usando mais os frames.
Adorei os lances de CSS.

Mas ainda não sei como estruturar o site para receber o conteúdo.
O que eu encontrei em layouts prontos foi isso:

<div id="navigation">
<a href="#">About us</a><br/>
<a href="#">The Partners</a><br/>
<a href="#">Areas of law</a><br/>
<a href="#">Contact us </a>
</div>

Minhas pergunta...
O que eu devo fazer com esses "#" ??? (endereços, neh?)
Essas DIVS estão substituindo os frames ?
Devo criar outras páginas e salvá-las com o mesmo padrão do index?

Desculpem-me se não estou explicando direito, é que entendo muito pouco deste assunto.


Abraço a todos, desde já.

Edição feita por: TheoB, 04/09/2008, 16:05.

[Railson Webmaster]

Vc ta com duvida em como fazer uma barra de navegação em css pro seu site???

[Nicholas Pufal]

Bem-vindo ao fórum.

O que eu devo fazer com esses "#" ??? (endereços, neh?)

# não significa nada. É apenas para testes, para não deixar o href="" vazio

Essas DIVS estão substituindo os frames ?

Não. Divs são outra coisa. Divs são a forma correta de se estruturar um layout, elas substituem as tabelas, pois antigamente era comum ver pessoas usando tabelas para estrutura de layout (o que é errado). Tabelas devem ser usadas apenas para exibir informação em dados tabulares.

Dá uma buscada por "sites em tableless" para você entender o que é uma DIV. No fórum tem muita coisa sobre o assunto.

Olha aqui tb: http://www.maujor.com.br/

Devo criar outras páginas e salvá-las com o mesmo padrão do index?

Não se insere mais uma página dentro da outra como se fazia antigamente... Frames e Iframes caíram em desuso. Se você quiser fazer tais inserções, o ideal é usar uma linguagem dinâmica (PHP, ASP, ASP.Net...).

Você pode simular o comportamento de frame (isto é, exibindo aquela barra de rolagem e mantendo o conteúdo como se fosse uma janela em separado) com o uso de overflow no CSS da sua div. Procura no fórum e em sites sobre CSS, que tem muita coisa sobre o assunto

Aproveitando, te recomendo a ler as regras do fórum.

Movi teu tópico para dentro de CSS & Semântica (Tableless). No fórum temos sub-categorias, procura sempre postar dentro delas quando é uma dúvida específica daquela linguagem

Edição feita por: Firehalk, 04/09/2008, 17:15.

[TheoB]

Então o lance é usar linguagem dinâmica, neh?

PHP ? Mas tô achando isso complexo demais... ou não?!

Vou dar um exemplo do que eu preciso fazer, assim as coisas vão ficar bem claras.

No meu site tem um menu.
No menu tem 4 opções.
Quando eu acesso a 2ª opção, o conteúdo da página muda, menos o próprio menu, o cabeçalho, etc..

É só isso que preciso fazer.
Mas quero fazê-lo de uma forma correta e atual.

Linguagem dinâmica seria mesmo a minha solução?

Vou dar uma conferida nas suas dicas, Firehalk.

Grande abraço.

[Nicholas Pufal]

Sim, no PHP tu pode usar includes para isso.

Se tiver alguma dúvida quanto à isso, dá uma conferida na seção PHP aqui do fórum! Tem vários exemplos lá disso também, é bem simples, não precisa se aprofundar na linguagem se não quiser.

O basicão é isso aqui:

<?php
require("menu.php");
?>

Isso vai chamar a página menu.php para dentro da página que faz o chamado.

Mas se tiver mais dúvidas quanto à includes, dá uma olhada lá que tem muita coisa

Edição feita por: Firehalk, 04/09/2008, 18:39.

[Railson Webmaster]

Se vc estiver falando de o menu quando vc mudar de pagina o menu ficar marcado como outra eh soh fazer isso
[codebox]id="current"[/codebox] antes do link. mais vc tem que tirar o mesmo codigo do outro link

[TheoB]

Fire,

Está parecendo que PHP é realmente uma linguagem muito mais eficiente.

Eu não sei se estou fazendo uma confusão dos diabos....

Vejo que a sintaxe do php é bem parecida com html.
Quando eu abro um código-fonte de uma página php, vejo que começa assim:

<!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/19...9/xhtml"><head>

Parece que o php é um upgrade do html.
Tá muito doido isso! ahuahua
Me corrijam se eu estiver errado.

E para encerrar...
Como a gente já havia falado anteriormente, os frames estão obsoletos.
Você citou o tal do "include", mas parece que isso é apenas uma função.
Então, qual é o nome do recurso que é usado hoje para dividir a página em "sessões" (tipo o uso dos frames)?

Edição feita por: TheoB, 05/09/2008, 06:55.

[Nicholas Pufal]

Você está confundindo as coisas

Aquilo ali não tem nada de PHP... Esse trecho aqui:

<!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">

Isso aí nada mais é que um cabeçalho apenas, usado para validar teu site pelas normas da W3C. W3C é o órgão que gerencia a internet, que disponibiliza as regras do que é semântico ou não na web. Você vai precisar estudar sobre isso também.

PHP é uma linguagem server-side, isto é, trabalha no lado do servidor... Assim como o ASP, CGI, ASP.NET... Javascript é client-side, trabalha no lado do cliente, no browser do cliente.

Conforme eu falei, não existem mais frames e iframes. Você pode usar, é claro, mas é uma prática extremamente não recomendada. Eles caíram em desuso. Não existe mais isso de frame. Conforme eu falei no post anterior, você pode simular o uso de frames com a propriedade overflow do CSS. Procura sobre isso que você vai entender.

Include é usado para determinar essa forma que te falei de inserir o conteúdo na página. Todo mundo se refere à include pois justamente você está incluindo o conteúdo de outra página na sua. Dá uma olhada no fórum de PHP, procura por include que você vai entender.

Pode ser feito includes com PHP, ASP.... Você decide que linguagem quer usar. PHP é mais robusta que o ASP, mas hoje em dia existe também o ASP.Net (evolução do ASP). Neste ponto opiniões divergem, sobre o uso das duas. Eu prefiro PHP.

Enfim, conforme eu disse, dúvidas sobre PHP por favor poste na seção de PHP aqui do fórum E dá uma procurada na seção, que tem muita coisa sobre o assunto!

[TheoB]

Agora as coisas deram uma clareada boa Fire.
Eu estava precisando saber por onde ia começar.

Muito obrigado pela ajuda.

Agora é correr atrás !!


Precisa fechar o tópico? Eu que faço isso?

[Nicholas Pufal]

Não precisa não.

Pode deixar aberto

Aqui no fórum não temos o costume de fechar, para o caso de alguém em uma busca futura encontrar a dúvida, e ter uma pergunta relacionada

Boa sorte!

Sobre a estruturação (CSS, Divs, etc), eu continuo te recomendando este site: http://www.maujor.com.br/

As dúvidas que tiver no caminho, dá uma buscada aqui no fórum. Se ainda não tiver resposta, é só postar

[TheoB]

Fire,

Tô ficando doido cara!!!

Não estou achando o material certo.

No site Maujor, encontrei isso:
http://www.maujor.co...sso-a-passo.php

Bem, aí ele mostra como montar o layout.
Mas o que eu realmente preciso saber é como funciona a navegação!

O resultado final do tutorial é este:
http://www.maxdesign...s/example23.htm

Então, quando eu clico na "section 2", por exemplo, não muda nada.
Como eu faço essa programação?
Como faço para linkar o diabo do conteúdo da "section 2"?
E onde que esse conteúdo estaria ?
(é claro que eu preciso criar o conteúdo, mas onde devo criar? e como linkar ele? entendeu?)

Estou exausto de procurar essa informação.
É algo muito fundamental, mas não estou sabendo fazer.

Edição feita por: TheoB, 05/09/2008, 12:27.

[Nicholas Pufal]

Cara, conforme eu falei antes, o # é para testes. Ele não tem função nenhuma.

Notou que todos os links daquele site tem o # ? Eles não apontam para lugar nenhum.

Para trocar de seção ao clicar em um link, é só linkar a página para a outra...

Ao invés de:

<a href="#">Teste</a>

Substitua o # (que não faz nada, apenas serve para preencher o espaço) pela página que você quer:

<a href="sua_pagina.html">Teste</a>

[TheoB]

Eu tinha entendido esse lance do #.

Mas, e agora?
Essa página Teste que vc colocou aí.
Como ela deve estar programada ?
Como faço para ela aparecer apenas em um determinado espaço do site? Que no caso seria um DIV ?

[Nicholas Pufal]

Cara, tu tá com muitas dúvidas, dúvidas bem básicas.

Te recomendo primeiro ler muito. Tu precisa de informação, precisa estudar mais.

Faz uma busca no Google sobre os seguintes temas:

- Diferenças XHTML e HTML
- Estrutura válida página
- Tableless
- W3C

Entre outros...

Pega uma palavra-chave e vai à luta! Só assim para aprender nessa área.

No próprio site do Maujor tem diversas explicações, como por exemplo sobre Divs -> http://www.maujor.co...divthinking.php

Você está com dúvida na estrutura básica de uma página HTML. Te recomendo a começar lendo (e fazendo testes) sobre as diferenças entre HTML e XHTML. Começa produzindo uma estrutura XHTML, e depois sim vai pro CSS.

Boa sorte.

[TheoB]

Você que me mandou pra cá (CSS e Semântica)

Eu sabia que minha dúvida era muito básica e não teria muito a ver com CSS. (Dá uma lida no meu primeiro post)

É sério, já li uma pancada de material e ainda não descobri como fazer esta simples operação.

Encontrei até uma vídeo-aula bem bacana sobre overflow, conforme vc me disse para pesquisar.
(o vídeo se encontra em "mais assistidos" em http://campus.visie.com.br/campus/)


Eu já havia lido esse tutorial do Maujor!

Ainda, assim, não esclarece minha dúvida.

Eu preciso de um exemplo usando mais de 1 página.
Mostrando o funcionamento dos links.


Fire,

Pelo o que eu tô vendo, os sites são montados assim:

Cria-se um index com todo o layout e tal.
Para criar páginas de conteúdo, eu preciso copiar todo o código do index e alterar apenas a div de conteúdo.
Em seguida, salvar com um nome diferente.
Daí, no menu do site, eu vou linkando estas páginas originadas do index.

Os problemas:
-Caso eu precisar alterar o menu, por exemplo, eu teria que modificar o código de todas as páginas criadas até então.
-O site será renderizado toda vez que eu abrir uma nova página de conteúdo. O que pode deixar a navegação mais lenta.

Só uma observação:
Eu lembro de quando usava frames, havia uma opçao TARGET, ela apontava para onde o conteúdo do link do menu deveria ser aberto.
É exatamente isso que preciso saber!! Qual é a "TARGET" usada no Web Standard de hoje? E não necessariamente usando scripts ou linguagem mais avançado como php.

Estou empenhado a tentar entender o funcionamento da navegação.

Abraço

Edição feita por: TheoB, 06/09/2008, 05:00.