Aula 4: Estilizando o Site com CSS Parte 1
Estamos de volta com o curso criando um site profissional e nesta quarta aula vamos estilizar nosso site com CSS. Lembrando que os padrões que estamos criando o site são os padrões web utilizados para sites profissionais.
Esta aula foi dividida em partes pois e muito extensa e o Youtube só aceita vídeos de ate 10 minutos então fiquem com a primeira parte enquanto gravamos as outras. Espero que gostem e boa aula!
Leave a comment
Sobre o Autor
Robson V. Leite23 Anos, Residente da cidade de Florianopolis SC. Trabalha com web desde 2006, sempre busca aprender novas tecnologias.
Dados do Artigo
OPNIÕES
Loading ...
Publicidade
Notícias
-
Semana 10 UpStore – Todos os cursos com 10% de desconto! Adquira o seu.
Todos os cursos com 10% de desconto! Adquira o seu CLIQUE AQUI!
- Nova tecnologia do MIT pode tornar internet até mil vezes mais rápida
- Concurso UpInside. Vote na melhor aula e veja os resultados aqui!
- Concurso UP finalizado!
- Corrigido envio Gratuito para o Pacotão UP
Djalma Falou
Em: 10 de fevereiro de 2010 as 23:04Cara, adorei as 4 aulas, mas na hora que eu queria ver o final, que talvez seja a aula 5 acabou.
Quando vc publicará a aula 5?
Obrigado
Sds
Djalma
Robson V. Leite Falou
Em: 10 de fevereiro de 2010 as 23:08Olá Djalma. provavelmente amanha saia a próxima, estou com visitas em casa e o barulho e muito pra gravar. Mas amanha eles vão dar umas saída ai rola. Acho que mais umas 2.
PS. Estamos longe do final, pois vou mostrar a programação do site e ainda faremos um painel em PHP para publicação de novidades com sistema de login e tudo mais. Espero que esteja gostando das aulas.
Qualquer duvida fique a vontade para perguntar.
David Deizepi Rocha Falou
Em: 11 de fevereiro de 2010 as 23:41Olá…
Desculpe o abuso,
mas…
tem como ensinar esses códigos que você faz?
Estou iniciando o curso de Web Designer,
e pulei o curso de fireworks…e ainda vou para a primeira aula de DreamWeaver,
essas aulas estão me ajudando muito,
desde já agradeço!
Robson V. Leite Falou
Em: 12 de fevereiro de 2010 as 11:45Ola David. hoje teremos mais vídeo aulas. mas a qual código vc se refere?
Rodrigo Falou
Em: 12 de fevereiro de 2010 as 19:04Mano, muito legal suas vídeo-aulas. Parabéns!!
Sou iniciante no WebDesign, mas depois dessas vídeo-aulas deu pra abrir muito a minha mente, principalmente na parte do CSS.
Fiquei curioso em vê a implementação do CSS completa.
Estou no aguardo das próximas aulas.
Abraço
David Deizepi Rocha Falou
Em: 12 de fevereiro de 2010 as 19:13Você fez o site inteiro (no Dreamweaver) usando códigos…
gostaria de lhe implorar que me ensinasse aquilo,
meu professor disse que Web Designer que não sabe usar aqueles códigos não tem futuro…
e que ele iria ensinar só os mais necessários…
e também gostaria de lhe pedir para me ensinar…
ou me dizer como que faço para colocar um Banner animado (flash CS3) no site que já mandei fatiado para o Dreamweaver(CS4)
Obrigado…
gostei muito do site,
e as aulas ensinam muito bem…
(aprendi a fatiar com a vídeo aula)
Robson V. Leite Falou
Em: 12 de fevereiro de 2010 as 20:57Boa pessoal estamos com a próxima aula pronta para postar. Porem a mesma ficou com 23 minutos, e como o youtube tem apenas 10 minutos de upload estamos passando nossas aulas para o vimeo.
Em no Maximo 2 horas a próxima aula estará publicada, nela configuramos o corpo e demos uma pequena estilizada.
@Rodrigo: vlw Rodrigo. Essa semana vamos pegar pesado nas aulas
Robson V. Leite Falou
Em: 12 de fevereiro de 2010 as 20:59@David Deizepi Rocha: todo o site será desenvolvido usando o código, só usaremos as ferramentas para pequenas colas.
desde o site até o sistema de publicação em PHP será feito na mão! basta acompanhar as aulas.
@all qualquer dúvida postem!
Renan Falou
Em: 20 de fevereiro de 2010 as 16:39Cara parabéns pelo excelente trabalho estava na dúvida de como estruturar o site em tableless aí um colega me indicou o upinside que por sinal ajudou e ajudou muito! agradeço a você pela iniciativa de está passando estas maravilhosas videoaulas para a galera que se interessa por programação vlw forte abraço!
Renan Falou
Em: 21 de fevereiro de 2010 as 14:37Olá cara estou de volta aqui pedindo uma ajuda eu estou utilizando o dreamweaver mx e o fireworks mx, e a minha dúvida é a seguinte eu não estou conseguindo chamar a imagem de fundo do meu menu eu faço tudo com está aí na folha de estilo mais não aparece nada se você puder me ajudar add meu msn sr.renanzinho@hotmail.com vlw
Robson V. Leite Falou
Em: 21 de fevereiro de 2010 as 19:41@Renan: Olá, Renan preciso que poste copmo esta a estrutura do seu site e a folha de estilo para que eu veja, só assim poderei te ajudar. você pode tbm tentar descrever melhor. pois a versão do DW e do FW não interferem no resultado quando se usa tablelles e CSS!
Renan Falou
Em: 22 de fevereiro de 2010 as 10:54Cara seguinte, eu fatiei o layout em 5 partes que corresponde ao meu header, meu espaço onde ficará meu menu de navegação a coluna lateral direita separador do menu e o corpo em sim que foi um área que eu fatiei do meio do layout então minha estrutura ficou desse jeito: (OBS : apenas estou enviando o tableless)
Home-Page Cadastro
Episódios Contato
Lorem ipsum dolor sit amet, nibh viverra fringilla bibendum litora, fermentum convallis eros ultrices aliquet, metus duis vitae elit tellus. Nec pellentesque a consequat, suspendisse etiam sed facilisis molestie adipiscing enim. Varius sit eget elit in vitae, hendrerit urna pulvinar id, diam sapien massa varius porttitor, magna augue montes lectus. Class pellentesque. Erat hendrerit eros, sem vivamus vitae sit, pharetra sed amet volutpat accumsan lacinia ultricies, massa scelerisque donec ac, lacus nunc sollicitudin. Parturient vestibulum maecenas, a dolor vestibulum tincidunt, felis dignissim, diam odio a nunc, ut at ut dignissim vehicula lectus. Elit varius hendrerit cum dis, dignissim tellus at ipsum tristique tempor venenatis. Orci libero sollicitudin nibh aliquam nulla, sed magna aliquam consectetuer nonummy velit, urna massa accumsan feugiat diam enim lorem, vivamus nam. Metus quisque et faucibus nunc, mattis dui sed lectus eros interdum maecenas, turpis maxime taciti tristique nec at.
eu acho que foi pq eu fiz pelo tutorial ao invés de chamar a minha estrutura eu tava criando pela sua ou será que não tem nada a ver espero que me ajude vlw
Renan Falou
Em: 22 de fevereiro de 2010 as 10:58opa o site está executando as linhas de comando rsrsrs aí caraa eu vou te mandar por arquivo zipado aí vc ver como está tudo vlw
Robson V. Leite Falou
Em: 22 de fevereiro de 2010 as 11:00@Renan: Olá. me mande os arquivos do site no e-mail contato@upinside.com.br.
Renan Falou
Em: 22 de fevereiro de 2010 as 11:02aí amigo esse é o link do meu site todos os arquivos estão aí a folha de estilo e a index vlw!
http://www.mediafire.com/?unwndxhttyz
Robson V. Leite Falou
Em: 22 de fevereiro de 2010 as 11:40@Renan: Ola Renan, analisei suas paginas e os erros são:
Você tem 2 chamadas para o arquivo estilo.css. Exclua a chamada que requer o Estilo.css (“E“ maiúsculo)
Em varias formatações você usa acentos e cedilha. Não pode por exemplo você criou uma ‘div id=”navegação”’, o correto ai seria “navegacao” e no css quando você abre a formatação ela tem que ter o mesmo nome da div. (Div =navegacao logo #navegacao)
Você esqueceu algumas formatações ao longo de seu script, e criou “strongs” nos menus que são desnecessárias, afinal você esta dentro de uma div e pode formatar com um “font-weight:bold;”
Meu conselho e que você comece novamente seguindo as VAs para melhorar seu aprendizado e entendimento dos códigos.
Qualquer duvida estamos ai!
Renan Falou
Em: 22 de fevereiro de 2010 as 11:51vlw cara obrigado mais uma vez vou tentar corrigir meu erro e prestar mais atenção nas linhas de comando muito obrigado mais uma vez!
Alessandro Falou
Em: 2 de abril de 2010 as 9:28Olá;
Parabéns pelas video-aulas, gostaria que você ensinasse a desenvolver um banco de dados para imobiliária e configurar com o site, sabe aquelas pequisas de imobiliárias, que você entra no site e pesquisa por imóveis ? ( POR VALOR, CIDADE, ESTADO, TIPO DO IMÓVEL, ETC…)
Desde já meu muito obrigado !
rafa Falou
Em: 4 de abril de 2010 as 3:57ja lembrei oq eu tava errando *-*
Ennio Perez Jr. Falou
Em: 14 de abril de 2010 as 10:50Caro Robson,
Muito legal a iniciativa das video-aulas, acompanho e realmente ajuda bastante. Quero te fazer duas perguntas:
(1) Estou tentando utilizar as video aulas “criando um web site profissional” só que além dos erros que estou tentando corrigir, não consigo configurar o site no início, sempre dá um erro porque ele não encontra o tal de http://localhost/meu site, o que eu faço?
(2) Ainda não consegui o Fireworks e estou tentando desenvolver e fatiar o layout no Photoshop, você tem algumas dicas pro Photoshop ou poderia desenvolver uma video aula criando e fatiando um layout no Photoshop?
Desde já agradeço
Abração
Ennio
Reinaldo Moreira Falou
Em: 15 de abril de 2010 as 18:50Fala Robson, tudo bem?
Venho acompanhando suas video-aulas pra poder desenvolver um site legal e estou gostando muito (tá me ajudando demais!)
Estou com uma dúvida: Assisti uma aula sua no site do Mx Masters de “COMO APLICAR UM EFEITO NO MENU ATIVO USANDO PHP” e queria saber como eu faço pra criar uma barra embaixo do menu selecionado, mostrando outros links relativos a minha página.
Entendeu? Não? Tipo assim eu coloco o cursor do mouse em cima do menu (que estão todos na horizontal) e aparece embaixo uma barra da mesma cor do menu mostrando outros links para acesso interno da minha página.
Esse é um efeito muito legal que vi em alguns sites e queria fazer o mesmo com o meu, mas não sei fazer.
Desculpe escrever uma bíblia pra explicar minha dúvida mas espero suprir a dúvida de outra pessoa também.
Um abraço e continue postando suas aulas (futuros profissionais autônomos da net agradacem)!
Robson V. Leite Falou
Em: 15 de abril de 2010 as 21:37Fala Reinaldo Moreira, tudo bene meu querido? teria como postar um site com o efeito? grato!
Reinaldo Moreira Falou
Em: 16 de abril de 2010 as 17:04Fala Robson…
Como você pediu um exemplo…ta aí…
Mas com uma observação: Esse menu, apenas de colocar o cursor sobre ele, já mostra os sub menus logo abaixo…eu queria que eles ativassem somente quando eu clicasse….Undertand me?
Abração…
)
Reinaldo Moreira Falou
Em: 16 de abril de 2010 as 17:07Desculpa…
(o exemplo ta aí….mas não tem nada né) to voltando aqui pra postar o site também, senão não funciona, né…haha
site: http://woork.bravehost.com/pastelmenu/index.html
Obs 2: Eu queria que os menus fossem coloridos..e os sub menus (a barra abaixo) correspondesse a cor quando fosse clicada…
Valeu..Brigadão…Abraço!
Lucio Oliver Falou
Em: 24 de abril de 2010 as 21:28Olá Robson, em primeiro lugar, gostaria de parabenizar pelo seu trabalho. Não é todo mundo que tem a boa vontade de tá passando seus próprios conhecimentos sem nenhum custo na net.
Bom, é o seguinte, eu começei a acompanhar essas videosaulas de sites profissional a pouco tempo, e ao decorrer do curso, me deparei logo cim um problema que não estou conseguindo resolver.
É na parte do menu, a imagem “spacer” está ficando afastada do menu.
Vou deixar aqui o link pra vc dá uma olhada.
http://www.radiocentrodemaceio.com.br/teste/
E aqui está o css:
*{margin:0; padding:0;}
#box {width:960px; margin:0 auto;}
#header {height:125px; background:#FFFFFF;}
#logo {float:left; margin:15px 30px;}
#headersp {height:25px; background:url(imagens/header.jpg) no-repeat;}
/*MENU*/
#menu {height:30px; background:url(imagens/menu.jpg) no-repeat;}
#menu a {float:left; text-decoration:none; color:#FFFFFF; font:16px “Trebuchet MS”, Verdana, serif; padding:5px 15px;}
#search {float:right;}
#spacer {height:25px; background:url(imagens/spacer.jpg) no-repeat;}
TRAKE Falou
Em: 3 de maio de 2010 as 2:14PUUUTZ CARA!!! .. Ée VICIANTEE SUAS VIDEO AULAS!!! E VICIANTE APRENDER COM VC!!!! è LEGAL COMO VC FALA A PALAVRA “HEADER” ^^… EE MTU MANERO!!! PUUTZ .. MUITO OBRIGADO!! TU EE SHOW!!!
TRAKE Falou
Em: 4 de maio de 2010 as 21:28puuxa.. eu estou vendo e corrigindo alguns erros meus q eventualmente cometo… Mas tipo ” * {margin:0; padding:0;}” não está se aplicando a div spacer.. ela continua no canto… e fica estranhao… e tambem nao se aplica ao texto… oq faço???
Renan Falou
Em: 7 de maio de 2010 as 16:04Robson,
estive assistindo a 4ª aula e vc “adiantou” o assunto…
poderia colocar o codigo pronto por aqui?
afinal, não sei o que fez antes de aplicar o css.
Abraço
RafaBaller Falou
Em: 12 de maio de 2010 as 2:02olá Robson, pow adorei suas videos aulas cara…que maravilha, continue assim pois, ta me ajudando bastante e abrindo minha mente nos conhecimentos abordados…agradeço pela interatividade desse site!
mais um seguidor do site =D
abraço! Jesus te abençoe!
Elberson games Falou
Em: 14 de maio de 2010 as 16:01Òtima video aulas em parabéns……..
Elberson games Falou
Em: 14 de maio de 2010 as 16:02Parabens
Leonardo Falou
Em: 19 de maio de 2010 as 23:26Olá, parabens pelos videos… quando sai a proxima aula? ou se ela saiu me manda o link…
Robson V. Leite Falou
Em: 20 de maio de 2010 as 1:30Olá Leonardo, Todas as aulas deste curso estão em http://www.upinside.com.br/categoria/cursos-upinside/curso-criando-um-site-profissional
Todos os Cursos onlline da Up Estão relacionados no menu cursos!
Leonardo Falou
Em: 23 de maio de 2010 as 15:05cara parabens pelas video aulas… nao tava encontrando da 5 em diante, vou começar a ve-las.Vlw.
luiz fernando Falou
Em: 31 de maio de 2010 as 16:44e ajuda aki
ta dando um erro o menu não se alinha corretamente o spacer fica mais avançado que o menu olha meu css:
*{ margin:0; padding:0;}
#box{ width:960px; margin:0 auto;}
#header{ height:375px; background:#fff;}
#logo{ flat:left; margin:5px 30px;}
#headersp{ height:25px; background:url(imagens/header.jpg) no-repeat;}
/*menu*/
#menu{ float:left; height:30px; background:url(imagens/menu.jpg) no-repeat;}
#menu a{ float:left; text-decoration:none; color:#fff; font:16px “Trebuchet MS”, Arial, Helvetica, sans-serif; padding:5px 15px; }
#search {float:right;}
#spacer{ height:25px; background:url(imagens/spacer.jpg) no-repeat;}
ajuda ai por favor
lucas Falou
Em: 4 de junho de 2010 as 10:45ae robson… teria como voce disponibilizar as aulas para download ou colocalas em outro site de videos?
o vimeo aqui em casa nao carrega os video nao sei porque.. se tiver como eu agradeço!
Giovani Antunes Falou
Em: 11 de junho de 2010 as 14:22Robson, estou acompanhando tuas vídeo aulas com muito interesse, uma duvida, nessa vídeo aula você coloca o menu a esquerda, como fazer para centraliza-lo na pagina? Estou montando um site só que nele na pagina inicial só terá uma abertura em Flash no centro da pagina o cabeçalho em cima e o rodapé em baixo e quero deixar o menu centralizado logo abaixo do cabeçalho, obrigado.
Muito show teu modo de ensinar e de fácil assimilação.
Elberson Falou
Em: 19 de junho de 2010 as 2:03Óla não estou conseguindo centralizar o layout ..
porque será…
* { margin:0; padding:0;}
#body {width:960px; margin:0 auto;}
#header {width:125px; background:#FFFFFF;}
#logo {float:left; margin:5px 30px;}
Leonardo Nogueira Falou
Em: 9 de julho de 2010 as 10:35Cara..muito boa suas aulas, está me quebrando um galho enorme! To com um probleminha aqui, meu header.jpg nao quer aparecer no “desing” nem quando exporto pro http://ftp…estou vendo se tem algo haver com o tamanho da minha logo! qualquer coisa posto aqui ou entro em contato por e-mail! abraço
Valdir Marques Falou
Em: 29 de julho de 2010 as 16:17Oloco amigo, me ajuda.
Não consegui repetir o passo em que vc abre o fireworks novamente nesta aula, com a imagem do menu.
Quando eu coloco em 30 x 30 o Canvan Size, a imagem do menu some…
O que é para ser feito?
Valeu