Ir ao conteúdo
  • Cadastre-se

Criação de Site Pessoal


Cora Coralina

Posts recomendados

Tenho procurado informações pela internet mesmo para tentar aprender um pouco de HTML e CSS. Minha intenção é desenvolver um site pessoal de página única com menus: Home, Sobre, Galeria e Contato. Na <div> galeria obviamente irei necessitar de algo em flash talvez.

Gostaria mesmo de fazer um curso... Mas não tenho recursos para pagar um por enquanto...

O que vocês me recomendam? Sou iniciante... Estou com algo muito básico montado (tudo desenvolvido em bloco de notas com HTML e CSS) e vejo que necessito melhorar a interface...

Alias, qual a diferença entre HTML e HTML5? E qual a diferença entre CSS e CSS3?

Alguma ajuda? Alguma indicação de site que possa me ajudar? Ou alguém de boa vontade que possa me dar dicas?

Link para o comentário
Compartilhar em outros sites

  • Moderador

Olá Cora Coralina,

Vamos por partes, como já dizia nosso famoso jack!

Você não precisa fazer um curso.. a internet dispõe muitas informações.. basta saber procurar!

A principal diferença do HTML e HTML 5 é a adição de novos recursos.. como por exemplo adição de novos elementos, novos atributos, total suporte ao CSS3, integração com vídeos e audios.. graficos em 2D e 3D, e etc..

Como a maioria( senão todos) ainda não suportam totalmente os recursos do html 5.. seu uso fica um pouco limitado.. mas isso não quer dizer que não possa usare até recomendo para certas ocasiões.

para saber mais sobre o HTML 5 veja este site: http://www.w3schools.com/html/html5_intro.asp

A distinção entre CSS e CSS 3 está nos novos atributos e a possibilidade de animações em keyframes.. Com css3 é possivel fazer coisas que antes só com action script( flash) daria para fazer.

Portanto, podemos abolir o flash pois é um plugin muito pesado..e trava constantemente. além disso, depende que, o usuário o tenha instalado..

Sobre onde estudar.. existem inúmeros sites bons de video aulas como por exemplo:

http://www.videoaulasbrasil.com.br/

http://www.mxmasters.com.br/

http://www.upinside.com.br/

Sites de apostilas

http://www.apostilando.com/

http://www.w3schools.com(inglês)

Link para o comentário
Compartilhar em outros sites

Existe outra dúvida... Estou usando bloco de notas para fazer as marcações html e os estilos css. E no momento em que renderizo a página o Internet Explorer 9 a interface não segue os comandos definidos no bloco de notas. Ou seja, um dos principais problemas são as colunas desalinhadas. O que posso fazer para solucionar o problema?

abraços.

Link para o comentário
Compartilhar em outros sites

  • Moderador

Recomendo você utilizar uma IDE boa para desenvolver seus códigos. alguns exemplos:

Eclipse for php( helios)

Notpad++

Komodo Edit

Sobre o erro.. o IE é um pouco problemático... no caso é só criar um css específico para o ie e coloca-lo em um comentário condicional.

uma dica é colocar no css do ie somente aquilo que quer arrumar no ie.

Link para o comentário
Compartilhar em outros sites

Olá,

Valeu pela dica dos programas. Antes de baixar o Komodo tive contato com o Dreamweaver. Gostaria de confirmar se o Komodo, assim como o Dreamweaver, possui visualizador de interface. Ao mesmo tempo em que se programa é possível visualizar as entidades de interface no Komodo?

Obrigada de novo =D.

Link para o comentário
Compartilhar em outros sites

  • Moderador

Olá, Acredito que não.

Tanto como eclipse, notepad++ e komodo usam apenas o editor em código. De qualquer forma sugiro que abandone a ideia de fazer visualizar no programa.. geralmente eles dão resultados diferentes do que no navegador. A melhor maneira de visualizar é no navegador mesmo.

Agora minha opinião pessoal:

Dentro desses que citei, o eclipse dá de 10 a zero. sem contar que podes instalar extensões. Atualmente uso a versão mais recente do Eclipse(juno) com o plugin PDT que serve para o desenvolver em php.

A melhor coisa você já está fazendo que é praticar seus códigos! A diferença é usar uma IDE só para agilizar o que você já sabe.. bem diferente do dreamweaver que FAZ as coisas por você e incentiva os usuários a dependerem de seus recursos.

Link para o comentário
Compartilhar em outros sites

  • Moderador

Bom nesse caso, recomendo que poste aqui o código que está tentando fazer os navegadores interprertarem.

Ps: Não esqueça de usar a tag CODE. Podes encontrar no painel de responder em modo avançado o botão é com o simbolo de "# " entre o QUOTE e o SPOILER

Link para o comentário
Compartilhar em outros sites

coloquei entre as tags <head></head> o seguinte:


<style type="text/css" media="screen">
@import "../_Resource/Css/topo.css";
@import "../_Resource/Css/conteudo.css";
@import "../_Resource/Css/coluna_relacional.css";
@import "../_Resource/Css/coluna_menu.css";
@import "../_Resource/Css/rodape.css";
@import "../_Resource/Css/outros.css";
</style>

<!--[if lte IE 6]>
<style type="text/css" media="screen">
@import "../_Resource/Css/hacks_ie6.css";
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css" media="screen">
@import "../_Resource/Css/hacks_ie7.css";
</style>
<![endif]-->

Mas não adiantou muita coisa :/.

Achei um outro link que usa outros tipos de Hacks:

http://www.cssnolanche.com.br/css-hacks-para-ie-firefox-opera-safari-konqueror/

Se puderem dar uma olhada ;).

Obrigada de novo =D

Link para o comentário
Compartilhar em outros sites

  • Moderador

experimente trocar o import pelo caminho completo. exemplo:

<link rel=StyleSheet href="arquivo.css" type="text/css" media="all">

faça isso com todos seus arquivos css externos.

Outra coisa, não recomendo você picotar seu css como está fazendo.. isso leva mais tempo para ser lido.. pois ele teria que carrega cada arquivo.. junte todos os css em um só que ficará melhor.. para questão de organização adote o uso dos comentários dentro do css.

já para o IE está certo em utilizar comentários condicionais. Lembre-se de colocar apenas os atributos que quer que o IE renderize. deixe o resto para o CSS principal.

seria interessante você postar o código html pode haver erros de sintaxe.. fazendo que o navegador não renderize completamente

Link para o comentário
Compartilhar em outros sites

Agrupei todos os CSS em uma única referência externa. E para a renderização coloquei desta forma agora:



<link rel=StyleSheet href="css/layout.css" type="text/css" media="all">/_Resource/Css/layout.css";


<!--[if lte IE 6]>
<style type="text/css" media="screen">
<link rel=StyleSheet href="layout.css" type="text/css" media="all">/_Resource/Css/hacks_ie6.css";
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css" media="screen">
<link rel=StyleSheet href="layout.css" type="text/css" media="all"> /_Resource/Css/hacks_ie7.css";
</style>
<![endif]-->

Mas não funcionou... Será que fiz alguma besteira?!:confused:

Link para o comentário
Compartilhar em outros sites

  • Moderador

esta linha:

<link rel=StyleSheet href="css/layout.css" type="text/css" media="all">/_Resource/Css/layout.css";

isso não existe. retire a parte de: /_Resource/Css/layout.css";

Acredito que você precisa estudar um poquinho mais sobre CSS externo, sintaxe html da chamada.. e etc.

Outra coisa que está errada:


<!--[if lte IE 6]>
<style type="text/css" media="screen">
<link rel=StyleSheet href="layout.css" type="text/css" media="all">
</style>
<![endif]-->

se você já está chamando um css externo... não há necessidade de colocar o <style>

se estas usando media="screen", não use media="all" juntos.. ou é um ou é outro..

tente deixar desta forma:


<link rel=StyleSheet href="css/layout.css" type="text/css" media="all">


<!--[if lte IE 6]>
<link rel=StyleSheet href="layout_ie6.css" type="text/css" media="all">
<![endif]-->

<!--[if IE 7]>
<link rel=StyleSheet href="layout_ie7.css" type="text/css" media="all">
<![endif]-->

note que eu nomei os css de acordo com o comentário condicional.. nesse caso, como se trata de navegadores diferentes.. podes usar mais de um css.

Lembre que no layout.css vai TODO seu css. e no layout_ie6.css contém apenas as linhas de atributos para arrumar o layout para o IE 6.. e por aí vai..

Recomendo postar seu código HTML para obter respostas mais eficientes.

Link para o comentário
Compartilhar em outros sites

Aí vai o HTML:


<html>

<head>

<link rel=StyleSheet href="css/layout.css" type="text/css" media="all">/_Resource/Css/layout.css";

<!--[if lte IE 6]>
<style type="text/css" media="screen">
<link rel=StyleSheet href="layout.css" type="text/css" media="all">/_Resource/Css/hacks_ie6.css";
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css" media="screen">
<link rel=StyleSheet href="layout.css" type="text/css" media="all"> /_Resource/Css/hacks_ie7.css";
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
$('a[href*=#]').each(function() {
if ( filterPath(location.pathname) == filterPath(this.pathname)
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$('html, body').animate({scrollTop: targetOffset}, 300);
return false;
});
}
}
});
});
// ]]></script>


<title>Aba Exemplo • Portifolio</title>

<meta name="author" content="Nome do Autor">
<meta name="description" content="Meta Tags - assunto">
<meta name="keywords" content="palavras">
<meta http-equiv="content-language" content="pt-br">
<meta name="reply to" content="[email protected]">

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

</head>



<body>

<section id="menu centro">

<div id="menu">

<ul>
<li><a href="#index.html">home</span></a></li>
<li><a href="#sobre.html">sobre</span></a></li>
<li><a href="#galeria.html">galeria</span></a></li>
<li><a href="#contato.html">contato</span><a/></li>
</ul>

</div>



<div id="principalA">

<h2>

<a name="home.html">Home</a>


</h2>

<p>All human beings are born free and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood. ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood.ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood. ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood.ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>

</div>



<div id="principalA">

<h2>

<a name="sobre.html">Sobre</a>


</h2>

<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood. nd should act towards one another in a
spirit of brotherhood. ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood.ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood. ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood.ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>
</div>



<div id="principalA">

<h2>

<a name="galeria.html">Galeria</a>


</h2>

<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood. nd should act towards one another in a
spirit of brotherhood. ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood.ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood. ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood.ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>

</div>



<div id="principalA">

<h2>

<a name="contato.html">Contato</a>

</h2>

<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood. nd should act towards one another in a
spirit of brotherhood. ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood.ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood. ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood.ll human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>

</div>



<div id="principalA">
<h4>Copyright © Autor </h4>
</div>

</section>

</body>



</html>

Espero que não esteja tão ruim assim... rs...

Obrigada de novo! :wacko:

Link para o comentário
Compartilhar em outros sites

  • Moderador

Então. os erros estão nas chamadas do CSS como já comentei no meu post #12. ( importante) reforçando:

retire:

/_Resource/Css/layout.css"; da chamada dos CSS.

Fora isso ainda existe mais um erro e uns detalhes:

<section id="menu centro">

não podes por espaço ali. Junte as palavras ou elimine uma.

Outra coisa importante, é que não se usa dois ID, mas class pode ter mais de uma.

Está faltando o DOCTYPE do HTML5 para isso adicione esta linha logo acima de tudo:

<!DOCTYPE HTML>

e falta o charset que podes adicionar esta linha:

<meta charset="UTF-8"> pode ser adicionado dentro de <head>

A respeito do charset, ao invés de ISO-8859-1, utlize o padrão universal é UTF-8 e acostume-se a usar sempre... evita muitos problemas de caracteres.. ainda mais se usar um banco de dados!

Link para o comentário
Compartilhar em outros sites

Nossa! que legal! Muito obrigada mesmo!!!:D

Só o fato de acertar os códigos já fez os navegadores (IE9 e Firefox) lerem a interface do mesmo jeito!

Ficaram algumas dúvidas:

- Por que será que o IE9 não lê o meu "favicon" na abinha la de cima? Só o Firefox está fazendo isso.. rs...

- De acordo com sua explicação (dif) tentei alterar as ID para CLASS, mas acontece que os menus perdem as propriedades visuais do CSS, mesmo estando referenciado a partir do layout.css. Ao alterar para CLASS se estabelece uma listagem de links com marcadores. Você recomenda que eu realmente altere ID para CLASS? E se eu fizer isso, como fica a interface dos menus? Ela deve ser perdida mesmo?

Muito obrigada. Beijos!:)

Link para o comentário
Compartilhar em outros sites

  • Moderador

Cora, em momento algum sugeri para trocar de ID para class!.

Só alertei que com ID não é possivel ter duas palavras separadas. Já com class pode.

No seu caso, se quiser não precisa trocar para class, basta juntar as duas palavras: <section id="menuCentro"> e no CSS fazer o mesmo:

#menuCentro{ }

Agora se tiver interesse em trocar para class, no CSS deve-se por ponto(.) ao invés de tralha(#). exemplo: .menuCentro{ }

Explicação sobre classes:

Quando se usa class, permitimos que o elemento possa assumir vários atributos. exemplo:

css:


.paragrafo{
font-family: Arial;
color: blue;
}

.diferente{
font-size: 16pt;
font-weight: bold;
color: red !important;
}

html:


<p class="paragrafo"> este é um parágrafo</p>
<p class="paragrafo diferente"> este é mais um parágrafo, mas é diferente</p>

Perceba no código html, que ambos paragrafos possuem a class paragrafo e o segundo possui além da classe paragrafo, possui a classe diferente.

O resultado da renderização do exemplo seria:

o paragrafo com apenas uma classe, mostraria a frase em azul com a letra arial.

Já o segundo paragrafo, inicialmente teria a letra arial e seria azul. Mas como possui uma segunda class, ela recebe também o tamanho de letra em 16pt, negrito e sua cor ficaria vermelho, por causa do atributo !important que serve para sobrescrever uma regra padrão.

De nada, sempre as ordens!

Beijo para você.

Link para o comentário
Compartilhar em outros sites

Olá de novo! :confused:

Estou concentrada em uma parte da marcação HTML. Mas não sei o que há errado com o menu. No final do link contato sobra um retângulo sem função, que deixa a delimitação do último link diferente dos demais. O editor de texto não esta marcando erros nem para o HTML e nem para o CSS. Será ainda um problema de decodificação do navegador?

Linhas de código:



<div id="menu">

<ul>
<li><a href="#index.html">home</span></a></li>
<li><a href="#sobre.html">sobre</span></a></li>
<li><a href="#galeria.html">galeria</span></a></li>
<li><a href="#contato.html">contato</span><a/></li>
</ul>

</div>

Desculpe a falta de entendimento em alguns momentos ;). Obrigada de novo!:)

Link para o comentário
Compartilhar em outros sites

Olá!

Desculpe de novo.. Sou nova no fórum... e também estou tentando aprender um pouco da linguagem agora... algo que ainda tenho muita dificuldade... e que o fórum está me ajudando muito mesmo. :D

Eu fiz o print do menu... E tentei anexar a imagem aqui... Achei que seria igual ao que se faz em um e-mail comum... Mas o "Inserir uma Imagem" pede uma URL... Não sei como fazer isso :(.

Obrigada! Beijos!

Link para o comentário
Compartilhar em outros sites

  • Moderador

Este tipo de anexo que estás tentando fazer, é para quando você hospedar suas imagens em site de terceiros como imageshack, picassa, photobucket.. então é necessário da url hospedada neles!

Recomendo anexar aqui pelo nosso fórum que é mais fácil e melhor!

Para anexar uma imagem, use painel no modo Avancado que fica do lado do "Enviar Resposta Rápida".

Procure um ícone de "clips", depois quando abrir a janelinha, procure a imagem e clique em enviar, depois que terminar enviar podes fechar a janela e submeter sua resposta.

Link para o comentário
Compartilhar em outros sites

O retângulo que "sobra" no menu está em cor marrom na imagem anexa.

Encaminho também a parte do css que marca o estilo do menu. Caso seja necessário, posso encaminhar o código css inteiro.



#menu{
overflow:hidden;
}

#menu ul{
list-style: none;
float: left;
position: relative;
left: 50%;

}

#menu ul li{
float: left;
position: relative;
right: 50%;
margin: 0 1px;
background:orange right top no-repeat;
}

#menu ul li a{
font-family: 'Verdana';
font-size: 12px;
color: #000;
padding: 10px 50px;
display: block;
}

#menu ul li a:hover{
background: #8B5A00;
color: #fff;
}

#menu li a.active{background-color: #8B6914; color: #fff;}

Obrigada!

post-1023767-13884964653056_thumb.jpg

Link para o comentário
Compartilhar em outros sites

  • Moderador

Então,

Analisando seus códigos e fazer um teste, aqui funcionou bem.

Seu css está correto.

Provavelmente seu erro está na estrutura do menu no html.

Perceba que esqueceu de colocar a abertura da tag span em todas as Li's e a barra de fechamento da tag a em contato está invertida.

Veja, em destaque em vermelho onde foi que você errou.


<li><a href="#index.html">[COLOR="Red"]<span>[/COLOR]home</span></a></li>
<li><a href="#sobre.html">[COLOR="red"]<span>[/COLOR]sobre</span></a></li>
<li><a href="#galeria.html">[COLOR="red"]<span>[/COLOR]galeria</span></a></li>
<li><a href="#contato.html">[COLOR="red"]<span>[/COLOR]contato</span>[COLOR="red"]</a>[/COLOR]</li>

Ps: Na primeira vez que vi o código html me passou desapercebido.. notei quando coloquei na minha IDE que logo acusou o erro! rsrs

Link para o comentário
Compartilhar em outros sites

Olá de novo :)

Tenho outra dúvida sobre o mesmo site. Encontrei um jQuery em um tutorial, que proporciona a rolagem suave do site de página única. Mas verifiquei que mesmo tendo-o inserido no código o efeito não aparece. Neste caso a programação já estava pronta. Será que existe algum problema com o código?

Não consigo entender nada deste tipo de linguagem.:wacko:



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
$('a[href*=#]').each(function() {
if ( filterPath(location.pathname) == filterPath(this.pathname)
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$('html, body').animate({scrollTop: targetOffset}, 300);
return false;
});
}
}
});
});
// ]]></script>

Obrigada. Bjos!

Link para o comentário
Compartilhar em outros sites

Arquivado

Este tópico foi arquivado e está fechado para 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...