• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

alexandreperei

Novo website

18 mensagens neste tópico

Ok, pessoal, ando a tentar criar o meu website pessoal, mas surgiu umas certas dúvidas, conto com a vossa ajuda, aqui vai:

1º questão - Com que dimensões devo fazer o website?

As questões irão sendo colocadas aqui à medida que são respondidas e da minha necessidade, ok. Obrigado a  todos pela possível ajuda.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O ideal era as dimensões se adaptarem ao tamanho da janela. É claro que isso dificulta bastante a criação de um site...

Para dimensões fixas, eu não usaria largura superior a 1000px.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

1024x768 suponho que seja o mais adequado. Acho que já não faz sentido manter os 800x600.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

POis, por acaso também pensei nisso. OK Vou lá por os dedos a trabalhar no dreamweaver e ver o que saí. Logo mostro o resultado, quando tiver pronto ou surgir alguma dúvida. OBrigado

Aqui está o resultado:

portfolioimagewv3.png

width=750 height=14http://img515.imageshack.us/img515/8071/portfolioimagewv3.754fc652bc.jpg[/img]

Não se assustem, foi a primeira vez. Na realidade o que quero é basicamente isto, mas com essa imagem, o header  e o footer fora do sitio onde esta e um fundo branco para escrever o texto pretendido.

Ah, aceito ideias.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Eu até há uns dias que fazia os sites sempre a suporta 800x600 no mínimo, mas hoje em dia, sugiro 1024x768. Uma resolução como 800x600 já começa a limitar muito e quem ainda usa essa resolução está na altura de fazer upgrade e deixar de viver no passado.

Mas também depende do design, se calhar o teu design pode ficar melhor num tamanho fixo que outro, não sei...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Como o Rui Carlos disse, não faças com largura de 1024px se vais fazer para desktops com essa dimensão, porque tens que contar com as barras laterais ( aquela de ir para cima e para baixo ), que ainda te comem uns 10-15px, o que torna os 1000px o mais acertado.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Sim, eu quando falei em resoluções não estava a dizer para usar aquela tamanho especifico, mas sim, fazer o site funcional para essa resolução. Agora, se é 1000px ou 950px, cada um sabe de si.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

PEssoal vamos imaginar que faço o website em photoshop, numa das partes do texto vou colocar o e-mail, ou seja, gostava que esse texto tivesse a função "mailto:", como faço isto? Obrigado

Aqui está uma imagem do website:

portfolioteste.png

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Isso não fazes no Photoshop, faz no HTML. Ao fazeres o link em vez de pores algo como http://www.blabla.com fazes com mail to, ou seja, mailto:eu@dominio.com. Mas isto talvez não seja a melhor opção, porque os bots vão sacar o teu e-mail e usa-lo para spamar.

Eu cometi esse erro há muitos anos atrás pelo que hoje em dia optei por ter um formulário de contacto (protegido por CAPTCHA) em vez de ter o e-mail directo, desta forma os bots não me spamam a caixa de correio.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Pessoal estou com um pequeno problema, não sou pro nenhum nsito, mas quando tento posicionar o texto (body) onde quero, altera tudo, o header, body e footer.

Outra questão, reparei que o dreamweaver coloca o css utilizado na mesma pagina do website, não pode ser colocado noutro ficheiro á parte? Espero ter sido claro

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Aconselho-te a usares div's para isso não acontecer. Podes formatar as div's no teu css.

Para usares uma folha css, basta criares um arquivo .css e colocares lá o teu código, por exemplo:

@charset "utf-8";
/* CSS Document */

html, body {width:100%;}

Depois na página onde queres que essa folha seja utilizada colocas o seguinte:

<link rel="stylesheet" type="text/css" href="folha.css" />  <!-- Isto chama o teu css -->

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Pessoal tive a ver e o código já tens as divs, e mesmo assim tem algum erro, vejam aqui o código:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100% Agency FB, Arial, Helvetica, sans-serif;
background: #ffffff url('../Os meus documentos/portfolio2/Templates/Ambiente de trabalho/Arts2/some_Grunge_by_Solea_ru copy.png') repeat-x;
margin: 0px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
background-image: url(../Os%20meus%20documentos/portfolio2/some_Grunge_by_Solea_ru%20copy.png);
margin-bottom: 250px;
}

/* Tips for Elastic layouts 
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
.oneColElsCtrHdr #container {
width: 46em;  /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColElsCtrHdr #header { 
padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
.oneColElsCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColElsCtrHdr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */}
padding-top: 150px;
}
.oneColElsCtrHdr #footer { 
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
} 
.oneColElsCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
-->
</style></head>

<body class="oneColElsCtrHdr">

<div id="container">
  <div id="header">
    <h1><img src="../Os meus documentos/portfolio2/header.png" width="600" height="176" />
      <!-- end #header -->
    </h1>
  </div>
  <div id="mainContent">
    <h2> Bem vindo </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
<!-- end #mainContent --></div>
  <div id="footer">
    <p>Footer</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O memo, quando tento posicionar o main content, ele mexe-me com o header, body e footer

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Como o queres posicionar ?

Como é que o header e o footer ficam ?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Basicamente no sitio delse o header em cima e o footer em baixo, mas quando tento colocar o texto principal mais para baixo e muda o header, body e footer.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não estou a perceber bem o que queres, senão for pedir muito, ficava mais fácil de entender se fizesses um "modelo" à pressão nem que seja no paint (LOOL), só para perceber a ideia que queres...

Desculpa, a minha incompetência :S

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora