[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

Codice:

<!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

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

Quote:

Originariamente inviato da cenarius_88

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

Codice:

<%@ 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

Codice:

<%@ 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

Quote:

Originariamente inviato da cenarius_88

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

Quote:

Originariamente inviato da cenarius_88

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...

Quote:

Originariamente inviato da cenarius_88

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...

Quote:

Originariamente inviato da cenarius_88

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 è:

Codice:

<!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>
              <!-- #include file="header.asp" -->
              <!-- #include file="menu.asp" -->
                <div id="pages"> 
                 /*contenuto */  
                </div>

              <!-- #include file="footer.asp" -->

      </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

Quote:

Originariamente inviato da cenarius_88

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.).

Quote:

Originariamente inviato da cenarius_88

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...

Quote:

Originariamente inviato da cenarius_88

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.

Quote:

Originariamente inviato da cenarius_88

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

Codice:

<!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>
              <!-- #include file="header.html" -->
              <!-- #include file="menu.html" -->
                <div id="pages"> 
                 /*contenuto */  
                </div>

              <!-- #include file="footer.html" -->

      </body>
</html>

file header.html

Codice:

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

file menu.html

Codice:

<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

Codice:

<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

Quote:

Originariamente inviato da cenarius_88

Quello era un esempio. La mia pagina è così

Sarà stato un esempio, ma era sbagliato.

Quote:

Originariamente inviato da cenarius_88

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/6...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 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

ESSE-EFFE · 21-02-2012, 08:06

Quote:

Originariamente inviato da cenarius_88

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.

Quote:

Originariamente inviato da cenarius_88

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

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.

18-02-2012, 22:32	#1
cenarius_88 Member Iscritto dal: Nov 2007 Città: Alcamo Messaggi: 103	[HTML - CSS - ASP(?)] Sito Web / Master Page 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 Codice: <!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 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 ç.ç

19-02-2012, 15:43	#7
cenarius_88 Member Iscritto dal: Nov 2007 Città: Alcamo Messaggi: 103	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 è: Codice: <!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> <!-- #include file="header.asp" --> <!-- #include file="menu.asp" --> <div id="pages"> /contenuto / </div> <!-- #include file="footer.asp" --> </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?

19-02-2012, 14:48	#5
cenarius_88 Member Iscritto dal: Nov 2007 Città: Alcamo Messaggi: 103	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

20-02-2012, 19:08	#11
cenarius_88 Member Iscritto dal: Nov 2007 Città: Alcamo Messaggi: 103	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 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

Strumenti
Mostra una versione stampabile Invia questa pagina per email