WebsiteNTC

From Labmm2

(Difference between revisions)
Jump to: navigation, search
(→Folhas de estilos (CSS))
(→Folhas de estilos (CSS))
Line 203: Line 203:
<br>
<br>
Este código estabelece as propriedades necessárias a cada uma das divs que permanecem iguais em todas as páginas, desde a cor do background, tipo de letra, cantos arredondados, posições, tamanhos, entre outros.
Este código estabelece as propriedades necessárias a cada uma das divs que permanecem iguais em todas as páginas, desde a cor do background, tipo de letra, cantos arredondados, posições, tamanhos, entre outros.
 +
<br>
 +
Optamos por ter 4 ficheiros CSS, um para cada página HTML, porque assim é possível apenas colocar código útil para essa certa página, e não ficaria um ficheiro com bastante classes que são aplicadas noutras páginas mas não na página pretendida, ficando assim um ficheiro maior e mais desorganizado.
 +
<br>
== Principais scripts desenvolvidas (JavaScript) ==
== Principais scripts desenvolvidas (JavaScript) ==

Revision as of 18:30, 21 June 2011



NTC
Descobre o teu curso
 Novas Tecnologias da Comunicação


Elementos grupo.jpg



Contents

Apresentação e contextualização do tema

Website que fornece informações e algumas curiosidades sobre o curso de ensino superior no qual estudamos: Novas Tecnologias da Comunicação da Universidade de Aveiro.

Fluxograma

Fluxograma

Layouts

Home Galeria Projectos Plano

Estrutura XHTML implementada

A estrutura implementada foi uma estrutura muito básica e simples de maneira a facilitar a navegação do utilizador, com uma div onde tem o banner, outra onde tem o menu lateral, e outra onde tem todo o conteúdo de cada página: 

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="description" content="Website sobre o curso de Novas Tecnologias da Comunicação na Universidade de Aveiro" />
	<meta name="keywords" content="NTC, Novas, Tecnologias, Comunicação, Novas Tecnologias da Comunicação, Universidade, Aveiro... />
	<meta name="author" content="Gil Millasseau, Luís Almeida, Tiago Andrade, Ivan Fernandes" />
    
<title>NTC | UA</title>

</head>
<body>
    <div id="banner">
    </div>
    <div id="side_menu">
    <h1>NTC | UA</h1>
    	<div id="linksmenu">
    		<ul>
            	<li class="menulink"><a href="index.html">Home</a></li>
    			<li class="menulink"><a href="plano.html">Plano Curricular</a></li>
        		<li class="menulink"><a href="saidas.html">Saídas Profissionais</a></li>
        		<li class="menulink"><a href="projectos.html">Projectos Anteriores</a></li>
        	</ul>
        </div>
        <hr>
        <div class="socials">
		<ul class="reset">
			<li><a href="http://www.ntc-ua.com/" target="_blank"><img src="imgs/simbolos/blog_hover-01.png" /></a></li>
			<li><a href="http://www.facebook.com/ntcua" target="_blank"><img src="imgs/simbolos/facebook_hover-01.png" /></a></li>
			<li><a href="http://www.twitter.com/#!/fainaNTC" target="_blank"><img src="imgs/simbolos/twitter_hover-01.png" /></a></li>
			<li><a href="http://www.ua.pt/" target="_blank"><img src="imgs/simbolos/ua_hover-01.png" /></a></li>
		</ul>
		</div>
     </div>
     <div id="content">
              Conteúdo de cada página
     </div>
</body>
</html>


div banner corresponde à div que tem o banner de cada página, aplicado no CSS;
div side_menu corresponde à div que tem todo o conteúdo da barra lateral que contém os links todos;
div linksmenu corresponde à div que tem todos os links das outras páginas;
div socials corresponde à div que tem todos os links para as redes sociais e para o site da UA;
div content corresponde à maior div da página que tem todo o conteúdo de cada uma das páginas.

Folhas de estilos (CSS)

As folhas de estilo que foram incorporadas no nosso projecto são 5 , uma para cada página.
Cada uma dessas folhas de estilo têm apenas o estilo do layout que assegura a coerência entre as várias estruturas em comum: 

body {
    color: #FFF;
	background: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
}

#banner {
	margin-left:auto;
	margin-right:auto;
	height:100px;
	width:1340px;
	margin-bottom:20px;
	background-image:url(../imgs/banners/plano_curricular_banner-01.png);
	background-repeat:no-repeat;
}

#side_menu {
	float:left;
	width:170px;
	padding-right:25px;
	padding-top:40px;
	padding-bottom:40px;
	margin-left:100px;
	border-right:1px solid #999;
	position:fixed;
}

#linksmenu ul {
	list-style:none
}

#side_menu h1 {
	padding:5px;
	font-size:20px;
	font-weight:bold;
	text-align:right;
	font-style:italic;
}

#linksmenu a:link, a:visited {
	color:#FFF;
	text-decoration:none;
	margin-left:4px;
}

#linksmenu a:hover, a:active {
	color:#FFF;
	text-decoration:none;
	margin-left:4px;
}

#linksmenu li {
	border:1px;
	border-radius: 7px;
	-moz-border-radius: 7px; /*Mozilla Firefox */
	-webkit-border-radius: 7px; /* Safari & Chrome */
	-o-border-radius: 7px; /* Opera */
	background:#666;
	width:120px;
	padding:3px;
	margin:3px;
}

#linksmenu li:hover {
	border:1px;
	border-radius: 7px;
	-moz-border-radius: 7px; /*Mozilla Firefox */
	-webkit-border-radius: 7px; /* Safari & Chrome */
	-o-border-radius: 7px; /* Opera */
	background-color:#CCC;
	color:#000;
	padding:3px;
	margin:3px;
}

.socials {
	display:block;
	width:32px;
	height:32px;
	background:url(../imgs/simbolos/links.png) no-repeat;
	cursor:pointer;
	position:relative;
	margin:0 auto;
	margin-top:50px;
	margin-bottom:20px;
}	

ul.reset,
ul.reset li {
	display:block;
	list-style:none;
	padding-left:6px;
	padding-top:6px;
	margin:0;
	border:none;
}

ul.reset li {
	position:absolute;
}

ul.reset li a {
	outline:none;
}

#content {
	width:650px;
	height:750px;
	margin-right:auto;
	margin-left:auto;
	background:#1A1A1A;
	border:#1A1A1A;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	-webkit-border-radius:10px;
}



Este código estabelece as propriedades necessárias a cada uma das divs que permanecem iguais em todas as páginas, desde a cor do background, tipo de letra, cantos arredondados, posições, tamanhos, entre outros.
Optamos por ter 4 ficheiros CSS, um para cada página HTML, porque assim é possível apenas colocar código útil para essa certa página, e não ficaria um ficheiro com bastante classes que são aplicadas noutras páginas mas não na página pretendida, ficando assim um ficheiro maior e mais desorganizado.

Principais scripts desenvolvidas (JavaScript)

Integração com outras tecnologias (frameworks, linguagens, etc...)

Soluções técnicas para problemas encontrados

Melhoramentos futuros

Conclusões

Referências bibliográficas


ACORDEÃO - Plano Curricular
MENU
[ACORDEÃO - Saídas Profissionais]
[SLIDER - Saídas Profissionais]
THUMBNAILS ELÁSTICAS - Projectos Anteriores
BOTÃO LINK
[BOLAS]

Anexos

Retrieved from "http://wikis.ua.pt/labmm2/index.php?title=WebsiteNTC"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox