Anno Accademico ANT Html e Css

Transcript

1 Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico ANT Html e Css F. Pizza fpizza@deis.unibo.it

2 cos'è ANT tool di build indipendente dalla piattaforma, scritto in java utilizza file XML di configurazione per eseguire task (build.xml) Project Property (1 n) Target(1 n) Property(1 n) Path(1 n) Task(1 n) Path (1 n) Task definition(1 n)

3 ANT: property, target, path Un Project consiste di una serie di definizioni di property, target, path e task task = operazione atomica (creazione di un jar) property = coppie di nome,valore disponibili per tutto il progetto e tutti i target target=una serie di task path=riferimento cartella di sistema/librerie... può avere una serie di property, che possono sovrascrivere anche le proprietà di progetto può dipendere da altri target tutti i target da cui dipende andranno in esecuzione prima di lui

4 ANT: task Ant ha già diversi task incorporati, tra i quali: creazione di directory copiare file compilare file sorgenti Java creare jar/war/ear Task personalizzati (definiti come optional task) esempio task di tomcat per effettuare deploy delle applicazioni E' possibile definire elementi Path sia a livello di Project che di Target es. inclusione/esclusione di librerie/classi

5 Html & Css: concetti base uso di style interni all'head uso di <style type= text/css ></style> link a file css <link rel= stylesheet tyle= text/css href= style.css />

6 Selettori css selettori tag body { font family: sans serif;} h1{ font size: 10px;} selettori di tipo pseudo class a:link {color: #0000ff;} a:visited {color: #ff0000;} a:hover {color: #ff00ff;} a:active {color: #00ccff;} selettori di classe.menu{ color:#ffffff;} es: <p class= menu >prova</p>

7 Selettori css selettori contestuali p { color: #ff6600;} menu { color:#ffffff;} p.menu a:link, p.menu a:visited{font weight: bold;} selettori id (simile alla classe, ma si usa una sola volta nella pagina) #menu {color:#ffffff;} es <p id= menu >bla bla</p>

8 Formattare il testo color: #ffffff; font family: Verdana, sans.serif; font size: 6px; o 80%; font weight: bold; background color: #ff6600; text align: center/right/left/center; line height: 2.0;

9 Gestione dei Link gestione della sottolineatura: text decoration: none/overline/underline cambio colore: a:link, a:visited { text decoration: underline; color: #ff6600; background color: trasparent;} a:hover, a:active{ text decoration: underline overline; color: #191970; background color: #c9c3ed;}

10 Gestione dei paragrafi border/padding/margin gestire le distanze tra paragrafi gestire l'identazione del testo con padding Elenchi puntati <ul><li></li></ul> list style type: none/disc/circle/square.. list style image: url(foto.gif); rimuovere identatura: padding left:0;margin left:0px; menu orizzontali: display: inline; Centrare il contenuto di una pagina html,body{margin:0; padding:0; text align:center;}

11 Le immagini border: 1px solid #000000; body{ background image: url(foto.gif); background repeat: no repeat/repeat x/y; background position: center center; background attachement: fixed;

12 Navigabilità del sito creare barra dei menu gestione della pagina selezionata gestione dei tab

13 Posizionare elementi i div: gestione dei layout width/top/left posizionamento assoluto e relativo position absolute/relative uso della proprietà float:left/right uso della proprietà clear: both allineare il testo intorno ad una immagine

14 Links Utili Css Zen Garden Css su w3c html.it estensioni Firefox utili: EditCSS Web Developer Manuale consigliato Guida ai CSS Rachel Andrew hoepli.it