• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Funktionen wie bei blymp.com.br

Status
Für weitere Antworten geschlossen.
W

WeMa

Neues Mitglied
Hallo,
Mein Freund hat mich neulich gebeten eine Webseite für ihn zu erstellen.
Jetzt möchte ich deshalb auch eine ansprechende Seite gestalten.
Ich hab mich auf diversen Template seiten umgeschaut aber nichts passendes gefunden.
Aber auf das design von blymp.com.br wäre genau das was ich bräuchte. Nur, wie realisiere ich das auf meiner Webseite(ich bin noch ziemlicher Anfänger)?
Genauer:

Seiten%20Hintergrund%20wenns%20gut%20aussieht.jpg


Ich hätte gerne das auf dem schwarzen balken z.B. steht "Home" oder "Kontakt" . Wenn man dann auf so ein Wort klickt erscheint rechts ein Text oder sogar eine ganze andere Seite wenn möglich(siehe Blymp Hospedagem - O seu site no ar! ).

Könnt ihr mir helfen????

Danke im Voraus!!

PS: ich weiss so ähnlich könnte man das mit frames usw. realisieren, aber ich möchte keine frames verwenden...
 
Zuletzt bearbeitet:
Nichts gegen dich, aber findest du nicht, wenn du eine Homepage über dich erstellst, das sie auch über deine Person sein soll und nicht eine Kopie von etwas anderem.

Was du machen kannst ist, dass du den Rand links wegschneidest und einfach den Hintergrund deines Menus schwarz färbst. (schwarz ist Farbcode #000000)

Das hat den Vorteil, dass du keine Grafik laden musst. Im Prinzip baust du deine Homepage so auf:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>test</title>
<style type="text/css">

        body   { 
            background-color: #000000;
            color: #FFFFFF;
            }

        #over     {
            height: 30em;
            width: 55em;
            margin: 10px auto;
            border: #FFFFFF 2px solid;
            }

        #main   {
            float: left;
            height: 100%;
            width: 35em;
            border: #FFFFFF 2px solid;
            background-image: url("deinbild.png") no-repeat;
            }


        #navi {
            float: left;
            margin: 0px 5px;
              width: 15em;
              height: 100%;
            
            border: #FFFFFF 2px solid;
            }


</style>
</head>

<body>



<div id="over">


    <div id="navi">
      <ul style="list-style: none;">
            <li> Home </li>
            <li> Kontakt </li>
            <li> ... </li>
     </ul>
    </div>



    <div id="main"> mainfenster 
    </div>

</div>

</body>

</html>
Grüße..
 
ich will doch keine Seite kopieren, ich wollte nur wissen, wie ich es mach, dass Ich z.B. auf kontakt klicke und es dann rechts eine Webseite anzeigt und das ohne frames und ohne, das auf jeder Seite ein menü sein muss. Eben VOM SYSTEM HER wie bei Blymp Hospedagem - O seu site no ar!. Aber sonst will ich nix so haben wie dort!!!!
So in etwa(Fotomontage):
beispiel.jpg
 
Zuletzt bearbeitet:
Das Menu ist immer so aufgebaut:

Code: 
<ul>
 <li><a href="kontakt.htm"> Kontakt </a> </li>
</ul>
oder bei verwendung eines buttons:

Code: 
<ul>
 <li><a href="kontakt.htm"> <img src="button.png" alt=" " /> </a></li>
</ul>
beim Klicken auf das Wort / den Button wird dann die Seite neu geladen und es erscheint z.B. die Datei "kontakt.htm" im Browserfenster.

Edit: Natürlich musst du das Menu in jeder Datei mit stehen haben, oder unter verwendung von php includen. (Hat den Vorteil, dass du es nur 1x änderst und dann in allen Datein reingesetzt wird, aber dazu später mehr, wenn du soweit bist. Würde dich wohlmöglich jetzt nur durcheinander bringen.)
 
<Thor> schrieb:
Dann lies mal nach dem Komma weiter, da steht die Alternative.
Zum Vergrößern anklicken....

Dann lies du mal mein kommentar:
Ich wills eben so wie bei Blymp Hospedagem - O seu site no ar!
Zum Vergrößern anklicken....
Also mit JavaScript oder flash oder was das ist...
Zum Vergrößern anklicken....
Entschuldigung das ich da so bockig bin, aber das ist einfach DAS was mir wirklich zusagen würde. Weil es auch so n bissel Animiert ist und so....
oder gibts auch Alternativen die in die Richtung ein bissel gehen???
 
Ist javascript
Anbei die Navi:
Code: 
<div id="my-glider" class="fit">
            <div id="vantagens-grid-1" class="controls">
            <ul>
            <li><a href="#section1" id="link1" onclick="marcar('1');" class="active"><span>1</span> <strong>hospedagem<br/> simplificada</strong></a></li>
            <li><a href="#section2" id="link2" onclick="marcar('2');"><span>2</span> <strong>tecnologia de<br/> ponta</strong></a></li>
            <li><a href="#section3" id="link3" onclick="marcar('3');"><span>3</span> <strong>aplicativos<br/> web 2.0</strong></a></li>
            <li><a href="#section4" id="link4" onclick="marcar('4');"><span>4</span> <strong>suporte<br/> dedicado</strong></a></li>
            <li><a href="#section5" id="link5" onclick="marcar('5');"><span>5</span> <strong>seja nosso<br/> parceiro</strong></a></li>
            </ul>
            </div>
            <div id="vantagens-grid-2">
            <h2>Vantagens de ser um cliente Blymp</h2>
            <div class="scroller">
            <div class="content">

<div class="section" id="section1">
                    <h3>hospedagem <span>simplificada!</span></h3>
                    <ul>
                    <li>200 mb de espaço</li>
                    <li>700 emails</li>
                    <li>5 gb de transferência</li>
                    <li><strong>hospede até 3 sites!</strong></li>
                    </ul>
                    <p><span class="price">15</span> <span class="time">'00 <em>reais mensais</em></span> <img src="img/opcoes.gif" alt="outras opções de pagamento com descontos"/></p>
                </div>
                <div class="section" id="section2">
                    <h3>tecnologia <span>blymp</span></h3>
                    
                    <div class="third">
                    <h4>linguagens e banco de dados</h4>
                    <p>Oferecemos todos os recursos de servidor que você precisa para ter um site dinâmico e robusto <strong>CGI, PHP 4 & 5, Ruby
on Rails, Perl, MySQL</strong></p>
                    </div>

                    <div class="third">
                    <h4>servidores de email</h4>
                    <p>Sincronize suas contas de e-mail com o seu <em>Outlook Express</em> ou qualquer outro software de email <strong>POP3 e IMAP + Webmail em AJAX!</strong></p>
                    </div>
                    
                    <div class="third last">
                    <h4>controle e estatísticas</h4>
                    <p>Um painel simplificado para gerenciar o seu site, acompanhar tráfego de dados e número de visitas<strong>Cpanel, AwStats, PHPmyAdmin</strong></p>
                    </div>

                </div>
                <div class="section" id="section3">
                    <h3>aplicativos <span>web 2.0</span></h3>
                    <h4 class="line">criador de sites, blogs, galeria de imagens, gerenciadores de conteúdo e muito mais!</h4>
                    <p>Instalador automático de aplicativos:</p>
                    <div class="sec one"><h4>wordpress</h4>
                    <p><img src="/img/wp.gif" alt="wordpress" class="wp"/> O aplicativo de criação de blogs mais robusto e conhecido do mundo, disponível para você com apenas 1 clique.</p></div>
                    <div class="third last"><h4>phpBB</h4>
                    <p>Crie rapidamente uma comunidade para os seus visitantes usando o sistema de fórum!</p></div>
                </div>
                <div class="section" id="section4">
                    <h3>suporte via <span>email</span></h3>
                    <h4 class="line">atendimento durante 24hs por dia, com nossos funcionários à sua disposição.</h4>
                    <p>Atendimento com a responsabilidade que nossos clientes merecem.</p>
                    
                    
                    <div class="sec"><h4>rapidez</h4>
                    <p><strong>respondemos a sua solicitação em poucas horas</strong></p>
                    </div>
                    
                    <div class="sec last"><h4>dedicação</h4>
                    <p><strong>sempre a melhor solução para suas dúvidas</strong></p>
                    </div>
                    
                </div>
                <div class="section" id="section5">
                    <h3>ganhe <span>descontos!</span></h3>    
                    <h4>hospedagem cortesia</h4>
                    <p class="line">A cada 5 novos clientes que indicar, você ganha um plano de hospedagem de cortesia <em>totalmente gratuito</em>, sem mensalidade alguma!</p>
                    
                    <div class="sec"><h4>indique e ganhe</h4>
                    <p>Para cada cliente indicado que contratar a blymp: <strong>2 meses grátis!</strong> </p></div>
                    
                    <div class="sec last"><h4>anualidade</h4>
                    <p>Basta optar pelo pagamento anual para ganhar a cada 12 meses: <strong>2 meses grátis!</strong></p></div>
                </div>
</div>
Und hier das Script das damit arbeitet:
Code: 
<script src="/js/glider.js" type="text/javascript" charset="utf-8"></script>
 
Danke

DANKE, endlich eine brauchbare Antwort! Aber kann ich einfach so den Script Text usw. von denen ihrer Seite nehmen und auf meiner verwenden??
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben