Project

General

Profile

Revision a4a71b59

IDa4a71b597e7142fa885e172d12cb2ce6e8135869
Parent e0e525ba
Child 6fed7d20

Added by Manuel Costa almost 7 years ago

Secções com headers formatados. Não deslizam com a página.

View differences:

proj1/ant.html
1
<!DOCTYPE html>
2
<html>
3
	<head>
4
		<meta hhtp-equiv="Content-Type" content="text/html; charset=UTF-8">
5
		<title>Ferramentas de automação - ANT Tools</title>
6
		<link rel="stylesheet" type="text/css" href="style.css">
7
		<link rel="stylesheet" href="css/bootstrap.min.css">
8
	</head>
9
	
10
	<body>
11
		<div id="header">
12
			<img src="images/ua.png" style="width:55%">
13
			</br>
14
			<h1>Ferramentas de automação</h1>
15
			</br>
16
			<img src="images/banner1.jpg" style="border:1px solid black;">
17
			<img src="images/banner2.jpg" style="border:1px solid black;">
18
			<img src="images/banner3.jpg" style="border:1px solid black;">
19
			<img src="images/banner4.jpg" style="border:1px solid black;">
20
		</div>
21

  
22
		<div id="nav" class="col-md-3 column margintop20">
23
    		<ul class="nav nav-pills nav-stacked">
24
  				<li><a href="index.html"><span class="glyphicon glyphicon-chevron-right"></span> Home</a></li>
25
 		 		<li><a href="gnu.html"><span class="glyphicon glyphicon-chevron-right"></span> GNU Make</a></li>
26
  				<li class="active"><a href="ant.html"><span class="glyphicon glyphicon-chevron-right"></span> ANT Tools</a></li>
27
  				<li><a href="cmake.html"><span class="glyphicon glyphicon-chevron-right"></span> CMake</a></li>
28
  				<li><a href="table.html"><span class="glyphicon glyphicon-chevron-right"></span> Comparativo</a></li>
29
  				<li><a href="biblio.html"><span class="glyphicon glyphicon-chevron-right"></span> Bibliografia</a></li>
30
			</ul>
31
		</div>
32
	</body>
33
</html>
proj1/biblio.html
1
<!DOCTYPE html>
2
<html>
3
	<head>
4
		<meta hhtp-equiv="Content-Type" content="text/html; charset=UTF-8">
5
		<title>Ferramentas de automação - Bibliografia</title>
6
		<link rel="stylesheet" type="text/css" href="style.css">
7
		<link rel="stylesheet" href="css/bootstrap.min.css">
8
	</head>
9
	
10
	<body>
11
		<div id="header">
12
			<img src="images/ua.png" style="width:55%">
13
			</br>
14
			<h1>Ferramentas de automação</h1>
15
			</br>
16
			<img src="images/banner1.jpg" style="border:1px solid black;">
17
			<img src="images/banner2.jpg" style="border:1px solid black;">
18
			<img src="images/banner3.jpg" style="border:1px solid black;">
19
			<img src="images/banner4.jpg" style="border:1px solid black;">
20
		</div>
21

  
22
		<div id="nav" class="col-md-3 column margintop20">
23
    		<ul class="nav nav-pills nav-stacked">
24
  				<li><a href="index.html"><span class="glyphicon glyphicon-chevron-right"></span> Home</a></li>
25
 		 		<li><a href="gnu.html"><span class="glyphicon glyphicon-chevron-right"></span> GNU Make</a></li>
26
  				<li><a href="ant.html"><span class="glyphicon glyphicon-chevron-right"></span> ANT Tools</a></li>
27
  				<li><a href="cmake.html"><span class="glyphicon glyphicon-chevron-right"></span> CMake</a></li>
28
  				<li><a href="table.html"><span class="glyphicon glyphicon-chevron-right"></span> Comparativo</a></li>
29
  				<li class="active"><a href="biblio.html"><span class="glyphicon glyphicon-chevron-right"></span> Bibliografia</a></li>
30
			</ul>
31
		</div>
32
	</body>
33
</html>
proj1/cmake.html
1
<!DOCTYPE html>
2
<html>
3
	<head>
4
		<meta hhtp-equiv="Content-Type" content="text/html; charset=UTF-8">
5
		<title>Ferramentas de automação - CMake</title>
6
		<link rel="stylesheet" type="text/css" href="style.css">
7
		<link rel="stylesheet" href="css/bootstrap.min.css">
8
	</head>
9
	
10
	<body>
11
		<div id="header">
12
			<img src="images/ua.png" style="width:55%">
13
			</br>
14
			<h1>Ferramentas de automação</h1>
15
			</br>
16
			<img src="images/banner1.jpg" style="border:1px solid black;">
17
			<img src="images/banner2.jpg" style="border:1px solid black;">
18
			<img src="images/banner3.jpg" style="border:1px solid black;">
19
			<img src="images/banner4.jpg" style="border:1px solid black;">
20
		</div>
21

  
22
		<div id="nav" class="col-md-3 column margintop20">
23
    		<ul class="nav nav-pills nav-stacked">
24
  				<li><a href="index.html"><span class="glyphicon glyphicon-chevron-right"></span> Home</a></li>
25
 		 		<li><a href="gnu.html"><span class="glyphicon glyphicon-chevron-right"></span> GNU Make</a></li>
26
  				<li><a href="ant.html"><span class="glyphicon glyphicon-chevron-right"></span> ANT Tools</a></li>
27
  				<li class="active"><a href="cmake.html"><span class="glyphicon glyphicon-chevron-right"></span> CMake</a></li>
28
  				<li><a href="table.html"><span class="glyphicon glyphicon-chevron-right"></span> Comparativo</a></li>
29
  				<li><a href="biblio.html"><span class="glyphicon glyphicon-chevron-right"></span> Bibliografia</a></li>
30
			</ul>
31
		</div>
32
	</body>
33
</html>
proj1/css/style.css
1
a.home {
2
	color:red;
3
	font-size:300%;
4
	font-weight:bold;
5
}
1
.nav-pills > li.active > a, .nav-pills > li.active > a:focus {  <!-- seleccionada-->
2
            color: #d8d8d8;
3
            background-color: #a8d878;
4
        }
5
        .nav-pills > li.active > a:hover { <!-- seleccionada passar por cima-->
6
        background-color: red;
7
        color:white;
8
        }
9
        .nav-pills{                    <!-- Não seleccionada -->
10
            background-color: green;
11
            color:#d8d8d8;
12
        }
13
        #img_principal{
14
            width: 35%;
15
            position: fixed;
16
            bottom: 0;
17
            right: 0;
18
        }
19
        body{
20
            background-color: #d8d8d8;
21
        }
22
        #header {
23
            padding-left:40px;
24
            background-color: #d8d8d8;
25
        }
26
        #navbar{
27
            position: fixed;
28
            background-color: white;
29

  
30
        }
31
        .tab-pane{
32
            padding-left: 40px;
33
        }
6 34

  
7
#header {
8
    background-color:black;
9
    color:white;
10
    text-align:center;
11
    padding:5px;
12
}
13
#nav {
14
    line-height:30px;
15
    background-color:#eeeeee;
16
    height:500px;
17
    width:100px;
18
    float:left;
19
    padding:5px;
20
}
21
#content {
22
    width:350px;
23
    float:left;
24
    padding:10px;
25
}
26
#rodape {
27
    background-color:black;
28
    color:white;
29
    clear:both;
30
    text-align:center;
31
    padding:5px;
32
}
proj1/example.html
32 32
			background-color: #d8d8d8;
33 33
		}
34 34
		#rodape{
35
			bottom: 0;
35
			position: fixed;
36
			bottom:0;
37
			background-color: white;
36 38
		}
37 39
		#img_principal{
38 40
			width: 35%;
39 41
			position: fixed;
40 42
			right: 0;
41 43
			bottom: inherit;
44
			
42 45
		}
43 46
		#time{
44 47
			bottom: inherit;
45 48
			position: fixed;
46 49
			left: 0;
50
			
47 51
		}
48 52

  
49 53

  
......
75 79
			font-size: 50px;
76 80

  
77 81
		}
82
		
83
		h2{
84
			font-family: 'Garamond';
85
			font-weight: bold;
86
			font-size: 35px;
87
			position: fixed;
88
			margin-left: 20%;
89
			margin-top: 0;
90
		}
91
		p{
92
			margin-left: inherit;
93
		}
78 94
		@font-face {
79 95
			font-family: 'Garamond';
80 96
			font-style: normal;
......
89 105
</head>
90 106
<body>		
91 107

  
92

  
93
	
94

  
95

  
96
	
97

  
98

  
99

  
100
	
101 108
	<div id="navbar" class="col-md-2 column margintop20"> <!-- Barra lateral de navegação-->
102 109
		<ul class="nav nav-pills nav-stacked">
103 110
			<li class="active"><a href="#home" data-toggle="pill">Home</a></li>
......
137 144
		</div>
138 145

  
139 146
		<div id="gnu" class="tab-pane fade">
147
			
148
			<p>
149
				<h2>GNU MAKE</h2>
150
			</p>
140 151

  
141
			<p>Some content in menu 1.</p>
152
			
142 153
		</div>
143 154
		<div id="cmake" class="tab-pane fade">
144 155

  
145
			<p>Some content in menu 2.</p>
156
			<p>
157
				<h2>CMake</h2>
158
			</p>
146 159
		</div>
147 160
		<div id="ant" class="tab-pane fade">
148 161

  
149
			<p>Some content in menu 2.</p>
162
			<p>
163
				<h2>Apache Ant</h2>
164
			</p>
150 165
		</div>
151 166
		<div id="comparativo" class="tab-pane fade">
152 167

  
153
			<p>Some content in menu 2.</p>
168
			<p>
169
				<h2>Comparativo</h2>
170
			</p>
154 171
		</div>
155 172
		<div id="bibliografia" class="tab-pane fade">
156 173

  
157
			<p>Some content in menu 2.</p>
174
			<p>
175
				<h2>Bibliografia</h2>
176
			</p>
158 177
		</div>
159 178
		<div id="acerca" class="tab-pane fade">
160 179

  
161
			<p>Some content in menu 2.</p>
180
			<p>
181
				<h2>Acerca</h2>
182
			</p>
162 183
		</div>
163 184
	</div>
164 185

  
proj1/gnu.html
1
<!DOCTYPE html>
2
<html>
3
	<head>
4
		<meta hhtp-equiv="Content-Type" content="text/html; charset=UTF-8">
5
		<title>Ferramentas de automação - GNU Make</title>
6
		<link rel="stylesheet" type="text/css" href="style.css">
7
		<link rel="stylesheet" href="css/bootstrap.min.css">
8
	</head>
9
	
10
	<body>
11
		<div id="header">
12
			<img src="images/ua.png" style="width:55%">
13
			</br>
14
			<h1>Ferramentas de automação</h1>
15
			</br>
16
			<img src="images/banner1.jpg" style="border:1px solid black;">
17
			<img src="images/banner2.jpg" style="border:1px solid black;">
18
			<img src="images/banner3.jpg" style="border:1px solid black;">
19
			<img src="images/banner4.jpg" style="border:1px solid black;">
20
		</div>
21

  
22
		<div id="nav" class="col-md-3 column margintop20">
23
    		<ul class="nav nav-pills nav-stacked">
24
  				<li><a href="index.html"><span class="glyphicon glyphicon-chevron-right"></span> Home</a></li>
25
 		 		<li class="active"><a href="gnu.html"><span class="glyphicon glyphicon-chevron-right"></span> GNU Make</a></li>
26
  				<li><a href="ant.html"><span class="glyphicon glyphicon-chevron-right"></span> ANT Tools</a></li>
27
  				<li><a href="cmake.html"><span class="glyphicon glyphicon-chevron-right"></span> CMake</a></li>
28
  				<li><a href="table.html"><span class="glyphicon glyphicon-chevron-right"></span> Comparativo</a></li>
29
  				<li><a href="biblio.html"><span class="glyphicon glyphicon-chevron-right"></span> Bibliografia</a></li>
30
			</ul>
31
		</div>
32
	</body>
33
</html>
proj1/index.html
26 26
  				<li><a href="ant.html"><span class="glyphicon glyphicon-chevron-right"></span> ANT Tools</a></li>
27 27
  				<li><a href="cmake.html"><span class="glyphicon glyphicon-chevron-right"></span> CMake</a></li>
28 28
  				<li><a href="table.html"><span class="glyphicon glyphicon-chevron-right"></span> Comparativo</a></li>
29
  				<li><a href="biblio.html"><span class="glyphicon glyphicon-chevron-right"></span> Bibliografia</a></li>
29
  				<li><a href="biblio.html"><span class="glyphicon glyphicon-chevron-right"></span> Bibliografia</a></li>z
30 30
			</ul>
31 31
		</div>
32 32
	</body>
proj1/scripts_java.js
14 14
    if (i < 10) {i = "0" + i}; 
15 15
    return i;
16 16
}
17

  
proj1/style.css
1
h1 {
2
    font-size: 43pt;
3
}
4

  
5
a.home {
6
	color:red;
7
	font-size:300%;
8
	font-weight:bold;
9
}
10

  
11
#header {
12
    text-align:center;
13
    background-color:#eeeeee;
14
    padding: 10px;
15
    
16
}
17
#nav {
18
    line-height:30px;
19
    background-color:#eeeeee;
20
    height:500px;
21
    width:250px;
22
    float:left;
23
    padding: 10px;
24
    
25
}
26
#content {
27
    width:350px;
28
    float:left;
29
    padding:10px;
30
}
31
#rodape {
32
    background-color:black;
33
    color:white;
34
    clear:both;
35
    text-align:center;
36
    padding:5px;
37
}
38

  
39
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
40
color: #fff;
41
background-color: #428bcak;
42
}
43

  
44
.nav-pills>li>a {
45
border-radius: 0px;
46
}
47

  
48
a {
49
color: #000;
50
text-decoration: none;
51
border-top: 1px solid #dadada;
52
border-bottom:1px solid #dadada;
53
border-left:1px solid #dadada;
54
border-right:1px solid #dadada;
55
}
56

  
57
a:hover {
58
color: #000;
59
text-decoration: none;
60
}
61

  
62

  
63
.nav-stacked>li+li {
64
margin-top: 0px;
65
margin-left: 0;
66
border-top: 1px solid #dadada;
67
border-bottom:1px solid #dadada;
68
border-left:1px solid #dadada;
69
border-right:1px solid #dadada;
70
}
71

  
72
.active2 {
73
    border-right:4px solid #428bca;
74
}
proj1/table.html
1
<!DOCTYPE html>
2
<html>
3
	<head>
4
		<meta hhtp-equiv="Content-Type" content="text/html; charset=UTF-8">
5
		<title>Ferramentas de automação - Comparativo</title>
6
		<link rel="stylesheet" type="text/css" href="style.css">
7
		<link rel="stylesheet" href="css/bootstrap.min.css">
8
	</head>
9
	
10
	<body>
11
		<div id="header">
12
			<img src="images/ua.png" style="width:55%">
13
			</br>
14
			<h1>Ferramentas de automação</h1>
15
			</br>
16
			<img src="images/banner1.jpg" style="border:1px solid black;">
17
			<img src="images/banner2.jpg" style="border:1px solid black;">
18
			<img src="images/banner3.jpg" style="border:1px solid black;">
19
			<img src="images/banner4.jpg" style="border:1px solid black;">
20
		</div>
21

  
22
		<div id="nav" class="col-md-3 column margintop20">
23
    		<ul class="nav nav-pills nav-stacked">
24
  				<li><a href="index.html"><span class="glyphicon glyphicon-chevron-right"></span> Home</a></li>
25
 		 		<li><a href="gnu.html"><span class="glyphicon glyphicon-chevron-right"></span> GNU Make</a></li>
26
  				<li><a href="ant.html"><span class="glyphicon glyphicon-chevron-right"></span> ANT Tools</a></li>
27
  				<li><a href="cmake.html"><span class="glyphicon glyphicon-chevron-right"></span> CMake</a></li>
28
  				<li class="active"><a href="table.html"><span class="glyphicon glyphicon-chevron-right"></span> Comparativo</a></li>
29
  				<li><a href="biblio.html"><span class="glyphicon glyphicon-chevron-right"></span> Bibliografia</a></li>
30
			</ul>
31
		</div>
32
	</body>
33
</html>

Also available in: Unified diff