Como construir um site (conceitos)

divertoso · Setembro 27, 2010

pessoal!!!

vejam a img:

basicamente o site possui um topo um menu lateral e um rodape.

a unica coisa que 'muda' é o conteudo , que vai variar entre as pgs 01, 02 e 03.

esse seria o esqueleto da pagina:

<!DOCTYPE HTML>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <!-- chamada do css e Jquery -->
        
    </head>
    
    <body>
        
        <header>
                <!-- topo -->
        </header>
        
        <aside>
                <!-- topo -->
        </aside>
        
        <section>
                <!-- topo -->
        </section>
        
        <footer>
                <!-- rodapé -->
        </footer>
        
    </body>
    
    
</html>

minha duvida é quanto as paginas auxiliares(pg01, 02, 03), o que eu devo fazer?? um '.html' para cada pg0x ??

e incluir e excluir ele no lugar do conteudo em vermelho via jquery??

como se faz??

vlwss

+.jr_Designer.+ · Setembro 27, 2010

Olha se é uma solução pra carregar as páginas auxiliares "01, 02 e 03..." no espaço "conteúdo", basta utilizar um <iframe>.

Abraço.

divertoso · Setembro 27, 2010

é isso mesmo jr... quero uma solução para as pgs auxiliares!!

usar um iframe é o 'jeito certo de se fazer?' é assim que as empresas fazem no 'mundo real' ??

vlwss

vini_loock · Setembro 27, 2010

Utilizar frames já está um pouco fora dos padrões.

Agora o certo a se fazer é utilizar javascript.

Dependendo do seu site, se não tiver muitas páginas, você pode apenas mostrar e esconder camadas(div), mas se tiver muitas página para carregar de uma só vez, utilize axaj.

divertoso · Setembro 27, 2010

vlws vini!!!

é possivel fazer 'apenas com jquery'????

(eu estou estudando jquery mas ainda não peguei nada sobre ajax para ler)

Toze · Setembro 27, 2010

caso não queira ir pro lado do ajax, pode-se utilizar tags como require ou include, presente em varias linguagens, como php ou asp.

facilita sensivelmente o projeto, entretanto ajax seria a saída mais, como posso dizer... , elegante.

ps: iframe funciona tambem, mais é uma tag depreciada e desencorajada.

divertoso · Setembro 28, 2010

mas como fica a sintaxe +- ??

faço um documento .html para cada pg; mas essas pgs vao ter apenas um <div>

ai no menu do html principal eu vou ter uma açao para cada botão :

<button id="id_but" value="teste"></button>

e no script:

$(document).ready
        (
            function(){
                $("#id_but").click(
                    function()
                    {
                        //codigo para excluir a <div> atual e adicionar a <div> do documento pg02.html
                    }
                );
            
            
        });

como seria esse 'miolo' da função??

vlws

Stoma · Setembro 30, 2010

ps: iframe funciona tambem, mais é uma tag depreciada e desencorajada.

A tag iframe está realmente depreciada? Pelo menos no W3C não achei nada sobre isso... lá só diz que o atributo align da tag iframe esté depreciada. Você possui algum link com mais informações sobre isto??

Editado Setembro 30, 2010 por Stoma

_Vinny_ · Outubro 3, 2010

Um bom negocio seria usar esse tutorial: http://scriptbrasil.com.br/forum/index.php?showtopic=89161

Facilita demais, porém necessita PHP, não sei se você usar.

Esse outro tutorial: http://scriptbrasil.com.br/forum/index.php?showtopic=129879

Usando javascript com ajax, é bem funcional.

divertoso · Outubro 4, 2010

como fica para eu inserir o meu html externo na minha div apenas por dom?

index.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        
        <script type="text/javascript" src="principal.js"></script>
        
    </head>
    
    <body>
        
        
        <div id="id_01">
            <p>div01</p>
        </div>
        
        <br />
        
        <div id="id_02">
            <p>div02</p>
        </div>
        
        <br />
        
        <input type="button" onClick="addCompemento()"  value="aperta ae mano!" />
        
        
        
    </body>
    
</html>

principal.js

// JavaScript Document

function addCompemento(){
    
    //document.getElementById('id_02').appendChild('complemento.html');
    
    //document.getElementById('id_02').innerHTML('complemento.html');
    
    //var temp = document.getElementById('id_02');
    
    
    //O q vai aqui para add o complemento.html na minha div02 ????
    
    
    }

complemento.html

<p> complemento</p>
<br />
<p> complemento</p>
<br />
<p> complemento</p>
<br />
<p> complemento</p>
<br />

*FIT* · Outubro 5, 2010

Movendo de HTML para Javascript, XML, DOM!

Entrar

Como construir um site (conceitos)

Pergunta

Link para o comentário

Compartilhar em outros sites

10 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns