[HTML - CSS - ASP(?)] Sito Web / Master Page [Archivio]

View Full Version : [HTML - CSS - ASP(?)] Sito Web / Master Page

cenarius_88

18-02-2012, 22:32

Salve. Allora ho da poco intrapreso la via del WebDevelopment, come software uso VisualWebDeveloper 2010, su Windows 7.

Innanzitutto mi sono fatto una "idea" generale dei costrutti html/css base per cui ad esempio la pagina deve essere composta da certi elementi base

<!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" lang="it">
<head>
<title>Titolo pagina</title>
/*eventuali link stili CSS */
</head>
<body>
/* contenuto*/
</body>
</html>

In linea di massima così. Vorrei progettare un sito intero, composto in più pagine, nel seguente schema (http://i40.tinypic.com/10s4shg.png)

Ora l'impaginazione l'ho creata, ho creato i vari elementi del menu, con i collegamenti alle varie pagine.

Il mio quesito è:
Come faccio a fare in modo che la struttura sia UGUALE in tutte le pagine
[Header,Menu,Footer] mentre la parte pages cambiare al click della voce di menù, senza doverla ripetere? E' necessario l'ASP (soluzione che ho momentaneamente usato)?

(volendo posso farvi vedere fisicamente come sono messo aggiungendovi i file xD)

PS: scusate se mi sono dilungato, è per esser chiaro. Sono utili tutti i consigli, critiche, insulti poichè sono alle prime armi e spero di capirci qualcosa e magari farne un futuro ç.ç

ESSE-EFFE

19-02-2012, 12:45

Il mio quesito è:
Come faccio a fare in modo che la struttura sia UGUALE in tutte le pagine
[Header,Menu,Footer] mentre la parte pages cambiare al click della voce di menù, senza doverla ripetere? E' necessario l'ASP (soluzione che ho momentaneamente usato)?

Come hai accennato nel titolo, per fare quello che ti serve in ASP.NET (non ASP) la soluzione ideale è l'utilizzo di una o più master page. Puoi trovare parecchi tutorial su questo e simili argomenti sul portale asp.net (ad esempio http://www.asp.net/web-forms/tutorials/master-pages).

cenarius_88

19-02-2012, 13:46

In linea di massima la suluzione che ho al momento è questa

<%@ Master Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script>
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>title</title>
<link href="css/Menu.css" rel="stylesheet" type="text/css" />
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="css/slider.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<a href="Home.aspx"><img src="Immagini/logo.png" alt="Logo" title="HomePage" /></a></div>
<div id="menu">
<ul class="menu">
<li><a href="Home.aspx"><span>Home</span></a></li>
<li><a href="Staff.aspx"><span>Staff</span></a></li>
<li><a href="Galleria.aspx"><span>Galleria</span></a></li>
<li><a href="Contacts.aspx"><span>Contatti</span></a></li>
<li><a href="Links.aspx"><span>Links Utili</span></a></li>
</ul>
</div>
<div id="pages">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

<%-- Qui va il contenuto (viene dalle altre pagine)--%>

</asp:ContentPlaceHolder>
</div>
<div id="footer">
<%-- Qui va il contenuto del footer--%> </div>
</div>
</body>
</html>

e nelle altre pagine ho similmente

<%@ Page Title="/*titolo*/" Language="C#" MasterPageFile="~/Site.master" %>

<script runat="server">

</script>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div class="quadrato">
<h2>
/*titolo*/</h2>
<h4>
/*sottotitolo*/.</h4>
</div>

/*info sui contatti */

</asp:Content>

Solo che essendo che non lavoro esattamente con i costrutti ASP, ma semplice HTML/CSS volevo evitare l'uso del ASP.

Altre fonti mi hanno detto di provare con le inclusioni (al più virtuali)
ma essendo di "prima mano" non sono molto pratico :S

ESSE-EFFE

19-02-2012, 14:33

Solo che essendo che non lavoro esattamente con i costrutti ASP, ma semplice HTML/CSS volevo evitare l'uso del ASP.

Dipende tutto da cosa devi realizzare, da cosa ti serve, da quale webserver verrà utilizzato. La soluzione con master page è comoda, funziona con ASP.NET (ribadisco non ASP) e inoltre hai a disposizione un linguaggio lato server in caso di necessità. Se vuoi evitare ASP.NET devi appoggiarti su altre soluzioni, ma allora non capisco perchè partire con le master page.

cenarius_88

19-02-2012, 14:48

Ho scritto Master Page per far capire l'effetto che voglio creare:

3 elementi strettamente UGUALI in tutte le pagine, 1 elemento diverso pagina per pagina!

dato che la mia connessione non è del tipo alice/libero/fastweb ma è satellitare, dunque non credo di avere uno spazio web tutto mio per cui seguendo un tutorial consigliava di mettere tutto su : 000webhost.com

Io ho caricato i miei file, ma credo che non si prende l'ASP.net, difatti mi ritorna la pagina col codice, senza interpretare nulla :S

ESSE-EFFE

19-02-2012, 15:21

Ho scritto Master Page per far capire l'effetto che voglio creare:
Sì, ma hai anche scritto e provato il codice... ma se poi l'hosting non supporta ASP.NET o tu vuoi evitarlo non aveva senso...

dato che la mia connessione non è del tipo alice/libero/fastweb ma è satellitare, dunque non credo di avere uno spazio web tutto mio per cui seguendo un tutorial consigliava di mettere tutto su : 000webhost.com
Che c'entra il tipo di connessione con l'hosting? Hosting gratuiti ce ne sono parecchi...

Io ho caricato i miei file, ma credo che non si prende l'ASP.net, difatti mi ritorna la pagina col codice, senza interpretare nulla :S
Infatti non è supportato, però vedo che supporta PHP, puoi quindi provare tecniche di inclusione che funzionano con tale linguaggio.

cenarius_88

19-02-2012, 15:43

Come ho scritto nel primo post, ho appena iniziato, ho letto un paio di guide, mi hanno consigliato il software Visual Web Developer, il che al primo avvio mi ha fatto creare un progetto di tipo ASP.net "C#" che comunque sia accetta l'html, per cui mi sono messo a fare delle prove, e provandolo in locale, la cosa "funziona".

Il problema è l'hosting: se non riconosce l'ASP.net ho fatto lavoro inutile, e devo cambiare. Quindi visto che altervista (esempio) conosce php (che io ignoro) e conosce html, avevo pensato di tradurre lo schema MasterPage di ASP.net in semplice HTML.

Mi è stato consigliato di provare con le inclusioni lato server (#include) e non con quelle lato client (javascript).

Un esempio è:

<!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" lang="it">
<head>
<title>Titolo pagina</title>

</head>
<body>


<div id="pages">
/*contenuto */
</div>



</body>
</html>

E fin qui l'ho capito, all'esecuzione il server interpreta gli include sostituendovi il contenuto delle parti. Ma siamo sempre li... ossia che è fatto in asp.net, ho tramutato i vari .asp in .html datogli in pasto i files miei, ma non li richiama ._.
penso sia dovuto al server host, che non so se sia Windows NT o Unix mode, che so che c'è una sostanziale differenza negli include.

Quindi non so come procedere... consigli?

ESSE-EFFE

19-02-2012, 16:19

mi hanno consigliato il software Visual Web Developer, il che al primo avvio mi ha fatto creare un progetto di tipo ASP.net "C#" che comunque sia accetta l'html
Il software non è un problema, ma non volendo usare ASP.NET dovresti creare un progetto vuoto e includere solo pagine HTML (oltre ai vari CSS, Javascript, ecc.).

Il problema è l'hosting: se non riconosce l'ASP.net ho fatto lavoro inutile, e devo cambiare. Quindi visto che altervista (esempio) conosce php (che io ignoro) e conosce html, avevo pensato di tradurre lo schema MasterPage di ASP.net in semplice HTML.
Adesso sei passato ad Altervista... puoi anche cercare un hosting ASP.NET a 'sto punto...

Mi è stato consigliato di provare con le inclusioni lato server (#include) e non con quelle lato client (javascript).
Sì però le SSI non c'entrano con PHP. Stai facendo un po' di confusione. Inoltre vedo che includi ancora pagine ASP (strano non ASPX), mentre dovrebbero essere semplici HTML.

E fin qui l'ho capito, all'esecuzione il server interpreta gli include sostituendovi il contenuto delle parti. Ma siamo sempre li... ossia che è fatto in asp.net, ho tramutato i vari .asp in .html datogli in pasto i files miei, ma non li richiama ._.
Che significa non li richiama? Se gli include sono sostituiti con i relativi file sei a posto. Solo che devono essere file HTML, senza codice o tag di nessun linguaggio lato server, tutto qui.

cenarius_88

19-02-2012, 16:25

Quello era un esempio. La mia pagina è così

file index.html

<!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" lang="it">
<head>
<title>Titolo pagina</title>
<link href="css/Menu.css" rel="stylesheet" type="text/css" />
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="css/anythingslider.css" rel="stylesheet" type="text/css" />
</head>
<body>


<div id="pages">
/*contenuto */
</div>



</body>
</html>

file header.html

<div id="header">
<a href="index.html"><img src="Immagini/logo.png" alt="Logo" title="HomePage" /></a></div>

file menu.html

<div id="menu">
<ul class="menu">
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="Staff.html"><span>Staff</span></a></li>
<li><a href="Galleria.html"><span>Galleria</span></a></li>
<li><a href="Contacts.html"><span>Contatti</span></a></li>
<li><a href="Links.html"><span>Links Utili</span></a></li>
</ul>
</div>

file footer.html

<div id="footer">
<h4>Testato su: Google Chrome, Internet Explorer, Mozilla Firefox, Opera, Safari</h4> /*qualora riuscissi a farlo fuzionare */
</div>

E così facendo ottengo una pagina *vuota*, nemmeno formattata per bene (come invece vedo sul software)

PS: se hai qualche consiglio su un hosting che capisce ASP.net ._.

ESSE-EFFE

19-02-2012, 16:41

Quello era un esempio. La mia pagina è così
Sarà stato un esempio, ma era sbagliato.

E così facendo ottengo una pagina *vuota*, nemmeno formattata per bene (come invece vedo sul software)
E' probabile che devi seguire delle regole precise per sfruttare SSI, ma devi informarti sul caso specifico. Ad esempio leggi qui: http://forum.it.altervista.org/how/69356-ssi-includere-un-documento-html-una-pagina-senza-usare-php.html

cenarius_88

20-02-2012, 19:08

Allora seguendo i tuoi consigli... ho formattato per bene la pagina (tutto HTML, addio ASP.net) ho inserito gli include come consigliato in quella pagina, tutto funziona perfettamente.

Ovviamente sto testando con vari browser la visualizzazione:

con chrome non ho avuto particolari problemi...

con internet explorer si, posto un Immagine (http://i39.tinypic.com/wlq0d2.png) per capire

Ho oscurato alcune parti, per motivi personali...

Dunque:
1) In alto, sull header va il logo, ancora da settare bene margine ecc ecc... il logo ha un riferimento alla pagina Home stessa, quindi è come dire un LINK... solo su internet explorer si vede quel quadrato "blu" di contorno. Si può togliere?

2) Tra l'header e il corpo, noterai che c'è una fessura bianca... voluta si, ma su chrome ha un ampiezza molto fine, li è esagerata... è stata fatta giocando sul padding dell header, probabilmente dovrò sostituirla con un <div> al cui interno metterò un immagine 2x2 px che si estende lateralmente a creare la linea

Se hai consigli da darmi, sono aperto a ogni critica :D

ESSE-EFFE

21-02-2012, 08:06

Allora seguendo i tuoi consigli... ho formattato per bene la pagina (tutto HTML, addio ASP.net) ho inserito gli include come consigliato in quella pagina, tutto funziona perfettamente.
Bene.

1) In alto, sull header va il logo, ancora da settare bene margine ecc ecc...

2) Tra l'header e il corpo, noterai che c'è una fessura bianca... voluta si, ma su chrome ha un ampiezza molto fine, li è esagerata...

Se hai consigli da darmi, sono aperto a ogni critica :D
In questo caso il primo consiglio è quello di aprire una nuova discussione specifica per i problemi che hai adesso, che non c'entrano con il discorso iniziale. Comunque puoi sistemare entrambe le cose con semplici regole nel CSS. Di certo eviterei l'immagine per distanziare l'header, però è probabile che servirà vedere un po' di codice per capire come mai il risultato è diverso sui due browser.