ESEMPIO CSS

Problemi con il Repeat-Y in CSS

August 13

La parola chiave repeat-y dei fogli di stile CSS, o CSS, dice il browser web per creare il maggior numero di copie di un'immagine di sfondo come sono necessari per riempire l'altezza di un elemento HTML. I problemi possono sorgere se non si usa la sintassi corretta per repeat-y, o omette gli altri ingredienti necessari per creare l'immagine di sfondo ripetuta. Esso contribuisce a creare una pagina Web semplice utilizzando repeat-y per richiamare gli elementi essenziali del verticalmente ripetono sfondi con i CSS.

Sintassi

Se non riesci a vedere una ripetizione immagine di sfondo in verticale, può essere perché hai utilizzato la sintassi sbagliata per la parola repeat-y, o la definizione di stile che utilizza la parola chiave. Considerate questa definizione CSS di esempio che utilizza repeat-y. Si noti ogni carattere nel testo della dichiarazione. Le parentesi indicano l'inizio e la fine di una definizione di stile. Le parole chiave "Background" dicono interprete CSS del browser per eseguire un'operazione stile. La porzione di "URL" ha inizio e fine bretelle e le virgolette per specificare un file di immagine. CSS richiede tutti questi componenti per fare una ripetizione immagine verticalmente. Se uno di questi componenti sono mancanti o non correttamente digitato, l'immagine non si ripeterà.

corpo
{
background-image: url ( 'bground.gif');
background-repeat: repeat-y;
}

I nomi non corretto percorso o il file

Quando stai avendo difficoltà a raggiungere un'immagine di ripetere in verticale sullo sfondo di un paragrafo, div, corpo, o altro elemento HTML, assicurarsi che l'immagine che si desidera ripetere esiste, e che è nella stessa cartella come la pagina Web. La seguente dichiarazione di esempio CSS definisce uno stile utilizzando un'immagine di sfondo verticale ripetizione di un elemento div HTML. Si noti che il percorso per l'immagine include una cartella ipotetica denominata "myimages." Se non si dispone di una tale cartella sul server, o se il file immagine "bground.gif" non è in quella cartella, la ripetizione dell'immagine verticale non funziona. Risolvere il problema facendo in modo i file di cui negli stili che utilizzano repeat-y esistono, e che sono nelle cartelle che le dichiarazioni di ripetizione-y specificano.

div
{
background-image: url ( '.. \ myimages \ bground.gif');
background-repeat: repeat-y;
}

corretto HTML

Anche se la tua definizione di stile CSS utilizzando repeat-y può essere privo di errori, il codice HTML errato che si applica tale definizione in modo errato può rendere l'immagine ripetuta non si presentano. La pagina Web estratto che segue mostra una definizione di stile e di un tag di paragrafo HTML. Si noti che il nome dello stile "myStile" che il tag p si riferisce a con il suo attributo class differisce dallo stile "myStyle" nel codice CSS, di un carattere. Questa differenza nei nomi significa che il tag p non mostrerà lo sfondo ripetuto come il programmatore previsto. Per risolvere questo problema, il programmatore può correggere l'errore di battitura attributo di classe del tag di paragrafo.

<Style type = "text / css">
p.myStyle
{
background-image: url ( 'bground.gif');
background-repeat: repeat-y;
}
</ Style>
</ Head>
<Body>
<P class = "myStile"> Alcuni di testo. </ P>
</ Body>

dimensione

Se stai cercando di ripetere verticalmente un'immagine in un elemento la cui altezza è più piccolo di due copie sovrapposti di l'immagine, l'immagine di ripetizione repeat-y non funziona. Per esempio, se si sta cercando di applicare uno stile repeat-y per un relativamente piccolo elemento della pagina come un paragrafo, è probabile che non si vedrà una qualsiasi immagine a tutti. La ragione è che l'altezza di un paragrafo è quasi sempre più piccolo di altezza di un'immagine, a meno che l'immagine è molto piccolo. È possibile eliminare questo ostacolo utilizzando la parola chiave CSS altezza per specificare una maggiore altezza per l'elemento. Nel brano che segue, uno stile CSS per un elemento paragrafo stabilisce l'altezza di quel elemento di una dimensione relativamente grande. L'altezza può consentire l'effetto repeat-y al lavoro.

P.myStyle
{
altezza: 300px;
background-image: url ( 'bground.gif');
background-repeat: repeat-y;
}

Caratteristiche di Adobe Dreamweaver CS 5

August 30

Dreamweaver è un'applicazione di sviluppo Web che fa parte del pacchetto Creative Suite di Adobe e utilizzato per sviluppare siti web. Dreamweaver CS5 ha aggiunto diverse nuove funzionalità e migliorato quelli esistenti dalle versioni precedenti per contribuire a rendere la costruzione di un sito web più facile per voi. Esso tiene conto del fatto che molti dei siti web di oggi devono essere compatibili con croce in diversi browser e piattaforme, inclusi i dispositivi mobili.

Supporto CMS

Dreamweaver CS5 consente di testare i contenuti si fanno per i sistemi di gestione dei contenuti come WordPress o Drupal. Si può attivare o disattivare vari tipi di file, come ad esempio CSS, file JavaScript e PHP e vedere il codice in ogni file, quindi visualizzare il codice e la pagina Web stesso in una finestra split screen che mostra come le pagine appaiono nel quadro CMS . Questo funziona anche con le pagine come blog che cambiano dinamicamente. Dreamweaver CS5 ha anche una funzione di completamento del codice che consente di utilizzare le funzioni specifiche di un CMS e includere nel codice Dreamweaver.

ispezione CSS

Dreamweaver CS5 aggiunge ispezione CSS, che, con il clic di un pulsante, consente di visualizzare il modello CSS nei dettagli completi e alternare varie regole e le proprietà per gli elementi di una pagina. Si fa clic su un elemento della pagina, come ad esempio una barra di navigazione o di un'immagine e le proprietà CSS che si applicano a tale elemento visualizzato in un menu a destra. Si può quindi accendere e spegnere tali proprietà per vedere quali cambiamenti che fanno per gli elementi a cui si applicano.

BrowserLab

BrowserLab consente di visualizzare un'anteprima ciò che il vostro sito sarà simile in uno dei diversi browser differenti. Si seleziona un elenco di browser da includere in BrowserLab e poi si può passare rapidamente tra di loro tramite un menu a discesa, o mostrare due browser side-by-side per vedere come il sito appare in modo diverso tra i due. L'elenco browser potrebbe anche includere diverse versioni dello stesso browser o anche browser come appaiono su diversi sistemi operativi.

Configurazione e convalida

Dreamweaver CS5 comprende diverse pagine di avviamento e modelli si possono utilizzare per iniziare a creare un sito web, inclusi i file HTML e CSS. Inoltre, consente di creare una struttura di directory utilizzando Definizione Dreamweaver del sito. Esso comprende anche il servizio di validazione del W3C come parte del software, in modo è possibile convalidare il tuo sito web in uno dei vari stili HTML e XML in Dreamweaver e non c'è bisogno di visitare il sito web del W3C e manualmente convalidare i file uno alla volta .

ID vs. Nome ingresso Con HTML

October 2

ID vs. Nome ingresso Con HTML


Le pagine Web HTML possono includere forme di catturare l'input dell'utente. All'interno di queste forme, vari elementi HTML possono acquisire i dati utilizzando le caselle di testo, pulsanti, caselle di controllo e gli elenchi a discesa. Quando un utente inserisce le informazioni in un modulo Web, quindi sottopone al sito, il browser sarà spesso inviare i dati acquisiti a un'altra pagina HTML o di uno script lato server in un linguaggio come PHP o ASP. Gli attributi per elementi di input, tra cui l'ID e il nome, possono influenzare la cattura dei dati e l'aspetto di una forma.

elemento di input

L'elemento di input HTML può presentare una varietà di controlli utente all'interno di una pagina Web. Il codice di esempio riportato di seguito illustra una casella di testo:

Nome utente: <input type = "text" name = "username" />

Questo codice di markup include un elemento di inserimento testo all'interno di un modulo Web. L'utente può immettere testo digitando nella casella di testo. L'attributo type è impostato come testo, che indica al browser di visualizzare l'elemento come una casella di testo, piuttosto che qualsiasi altro elemento di input. ad esempio un pulsante, casella di controllo o di discesa. L'elemento di ingresso è accompagnato da un breve pezzo di testo che indica quali informazioni la casella di testo è per, in modo che l'utente saprà cosa per entrare.

attributi

Elementi di input possono includere una varietà di attributi che determinano l'aspetto e funzione. Ad esempio, gli sviluppatori possono includere listener di eventi attributi determinare funzioni JavaScript da eseguire quando l'utente interagisce con un elemento di input, come nel seguente markup di esempio:

Indirizzo: <input type = "text" name = "indirizzo" onclick = "onTextbox ()" />

Gli sviluppatori utilizzano spesso questa tecnica per migliorare l'interattività con le parti in un modulo Web, alterare l'aspetto delle sezioni della pagina quando l'utente interagisce con elementi particolari. elementi di entrata comprendono generalmente il tipo e attributi nome, ma può opzionalmente comprendere altri attributi.

modulo di presentazione

Quando un modulo Web cattura l'input dell'utente, che include il codice istruire il browser per inviare l'utente ha inserito i dati ad una seconda pagina Web o ad uno script lato server. Quando questa seconda pagina o lo script riceve i dati, si utilizza il nome attributi per recuperare particolari elementi di dati dal modulo. Ciò significa che se uno sviluppatore vuole catturare l'input utente con un particolare elemento di forma in questo modo, essi devono includere l'attributo nome all'interno di tale elemento. Per il nome utente e indirizzo di esempio caselle di testo, qualsiasi script che riceve i dati possono utilizzare il nome specificato attributi per stabilire ciò che l'utente è entrato in questi elementi.

Presentazione

Le pagine Web possono implementare lo stile e l'interattività con Cascading Style Sheet codice e JavaScript. Entrambi questi spesso usano gli attributi di identificazione di elementi. Il seguente codice di esempio CSS dimostra l'identificazione di un elemento con un attributo ID specifico per lo styling:

nametext {color: # 333333; }

Il seguente esempio di JavaScript dimostra l'acquisizione di un riferimento a un elemento con lo stesso attributo ID, quindi applicando le proprietà di stile dinamiche ad esso:

var nameText = document.getElementById ( "nametext");

nameText.style.color = "# 330000";

Entrambi questi brani codice dovrebbe lavorare con l'elemento seguente:

<Input type = "text" name = "username" id = "nametext" />

La funzione JavaScript potrebbe eseguire su un evento specifico utente, creando un livello maggiore di interattività.

Come faccio margini influenzano pagine web?

December 15

Come faccio margini influenzano pagine web?


Le pagine Web visualizzano contenuto all'interno di elementi HTML. La maggior parte dei siti web anche usare i CSS codice (Cascading Style Sheet) per determinare il layout e l'aspetto di questi elementi. dichiarazioni CSS determinano le dimensioni degli elementi, così come le zone di imbottitura e margini intorno a loro. L'imbottitura è una zona più all'interno di un elemento, intorno al suo contenuto, mentre un margine si trova al di fuori dei limiti dell'elemento. I margini appaiono all'interno maggior parte dei siti, permettendo agli sviluppatori di creare layout chiaro con lo spazio tra gli elementi visibili.

istruzione

1 Creare una pagina Web HTML di esempio. Come la maggior parte argomenti tecnici, il modo più semplice per capire i concetti di sviluppo Web è da provare da soli. Per fare questo, creare una pagina HTML di esempio contorno utilizzando la seguente sintassi:

<Html>

<Head>

</ Head>

<Body>

</ Body>

</ Html>

Questa è la struttura di base di una pagina Web in markup HTML. Copiare il codice in un nuovo file in un editor di testo e salvarlo con estensione ".html".

2 Aggiungete un po 'di contenuti alla tua pagina. Utilizzando elementi HTML, aggiungere qualche contenuto della pagina tra l'apertura e chiusura tag body nel file. Il codice di esempio riportato di seguito illustra l'aggiunta di due elementi con un testo in esse:

<Div id = "primo"> Ecco alcuni contenuti. </ Div>

<Div class = "altro"> Un po 'di più. </ Div>

Il primo elemento ha un attributo ID, mentre la seconda ha un attributo di classe. Questo permetterà al codice CSS per identificare gli elementi, fornendo regole di stile specifiche per ciascuno di essi.

3 Creare una sezione per il codice CSS. Aggiungere il seguente schema per un'area CSS tra l'apertura e chiusura tag head nella tua pagina:

<Style type = "text / css">

</ Style>

Il tuo codice CSS andrà tra i tag di stile. Per dichiarare le proprietà di stile per un elemento utilizzando il suo attributo ID, è possibile utilizzare la seguente sintassi:

primo{

/

Stili per elemento "prima" qui /

}

Per dichiarare stile per un elemento con un attributo di classe, è possibile utilizzare il seguente codice:

div.other {

/ Stili per elementi "altri" qui /

}

4 Aggiungere proprietà dei margini per gli elementi. Inserire il seguente codice CSS all'interno della sezione per il vostro elemento "prima":

margin: 10px;

background-color: # FFFF00;

L'impostazione del colore di sfondo non è necessario, ma vi permetterà di vedere l'effetto della dichiarazione di proprietà margine a colpo d'occhio. Aggiungere la seguente all'interno della sezione per il vostro "altro" di classe:

width: 200px;

altezza: 400px;

margin: 10%;

background-color: # 0000FF;

Questo codice applica una larghezza fissa e altezza dell'elemento, con una proprietà relativo margine. Il margine è espressa utilizzando un valore percentuale, che rappresenta una percentuale delle dimensioni dell'elemento. Salvare il file e aprirlo in un browser Web per vedere l'effetto delle proprietà dei margini.

5 Modificare il codice per applicare diverse proprietà dei margini per ciascun lato di un elemento. Piuttosto che applicare le stesse proprietà dei margini per tutti e quattro i lati di un elemento, è possibile applicarli singolarmente. Il seguente codice di esempio CSS dimostra l'applicazione di tutti e quattro i lati in una sola riga:

margin: 5px 10px 15px 20px;

In alternativa, il codice può specificare due valori, uno per i lati e una per sia superiore e inferiore:

margin: 10px 20px;

È inoltre possibile specificare ogni linea singolarmente come segue:

margin-top: 10px;

Esperimento con la tua pagina modificando i valori nel codice CSS, e la visualizzazione dei risultati nel tuo browser.

Consigli e avvertenze

  • La proprietà margine di un elemento HTML funziona in congiunzione con le proprietà padding e border come parte del CSS box model.
  • Valori fissi per gli elementi CSS possono ridurre la capacità di una pagina per far fronte bene con diverse dimensioni dello schermo dell'utente.

Esempi di base di jQuery

January 20

Esempi di base dell'applicazione jQuery includono quelli per nascondere e animare gli elementi della pagina Web, e anche cambiando il contenuto e l'aspetto di un elemento. Prima di lavorare attraverso questi esempi, imparare a selezionare gli elementi con jQuery. In questo modo assicura i metodi jQuery si esegue lavorerà sugli elementi previsti.

occultamento

È possibile nascondere gli elementi della pagina Web, come i paragrafi e intestazioni utilizzando Nascondi il metodo di CSS. Ripristinare la visibilità del elemento con il metodo Show. Ad esempio, l'istruzione "(" #someelement "). Nascondere ()" si nasconde l'elemento HTML con il tag "#someelement." Il programma di esempio che segue crea una pagina Web con un pulsante per mostrare come nascondere dinamicamente un paragrafo.

<Html>
<Head>
<Script type = "text / javascript" src = "jquery.js"> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
$ ( "# MyButton"). Clic (function () {

$(&quot;#someelement&quot;).hide();

});
});
</ Script>
</ Head>
<Body>
<Button id = "myButton"> Si prega di cliccare qui. </ Button>
<P id = "someelement"> Guarda questo scomparire. </ P>
</ Body>
</ Html>

Animazione

Con il metodo Animate di jQuery si può fare un punto o un altro elemento HTML cambiano dinamicamente la posizione e le dimensioni, che consente di eseguire semplici animazioni. Specificare l'attributo da animare, insieme al valore con cui si desidera che l'attributo di cambiare, come primo argomento da animare. Circondati questo argomento con bretelle. Specificare la velocità con cui si desidera l'animazione a verificarsi in secondo argomento di Anima. Utilizzare il programma di esempio che segue per imparare a fare una mossa punto sullo schermo.

<Html>
<Head>
<Script type = "text / javascript" src = "jquery.js"> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
$ ( "# MyButton"). Clic (function () {

$(&quot;#someelement&quot;).animate( {marginLeft:&quot;500px&quot;}, &quot;slow&quot;);

});
});
</ Script>
</ Head>
<Body>
<Button id = "myButton"> Si prega di cliccare qui. </ Button>
<P id = "someelement"> Guardate questa mossa. </ P>
</ Body>
</ Html>

Modifica contenuti

Utilizzare jQuery per modificare il contenuto HTML utilizzando un metodo come HTML, aggiungere, o prima. Ad esempio, se si desidera aggiungere del testo esistente a un particolare punto il cui ID è "myparagraph", scrivere la seguente dichiarazione.

$ ( "# Myparagraph") aggiungere ( "Nuovo testo.");

Ecco un programma di esempio che illustra il metodo Append.

<Html>
<Head>
<Script type = "text / javascript" src = "jquery.js"> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
$ ( "# MyButton"). Clic (function ()
{

$(&quot;#myparagraph&quot;).append(&quot;Hello world&quot;);

}
);
});
</ Script>
</ Head>

<Body>
<Button id = "myButton"> Clicca qui </ button>
<P id = "myparagraph"> Paragrafo 1 </ p>
</ Body>
</ Html>

Modifica CSS

Utilizzare il metodo CSS di jQuery per cambiare lo stile dei paragrafi, pulsanti, intestazioni e altri elementi HTML. Ad esempio, "CSS (" font-weight "," bold ")" farà il testo di un elemento HTML in grassetto. Identificare l'attributo CSS che si desidera modificare nel primo argomento del metodo CSS. Selezionare il valore per tale attributo con il secondo argomento del metodo di CSS. Ecco un esempio di programma che mette il metodo CSS nel contesto.

<Html>
<Head>
<Script type = "text / javascript" src = "jquery.js"> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
$ ( "# MyButton"). Clic (function () {

$(&quot;#someelement&quot;).css(&quot;font-weight&quot;,&quot;bold&quot;);

});
});
</ Script>
</ Head>
<Body>
<Button id = "myButton"> Clicca qui </ button>
<P id = "someelement"> Guarda questo turno grassetto. </ P>
</ Body>
</ Html>

Come Browser Web visualizzare i documenti HTML

April 9

Come Browser Web visualizzare i documenti HTML


Quando gli utenti navigano a una pagina Web, il contenuto HTML viene inviato dal server al browser, in cui viene visualizzato. I principali elementi che partecipano alla visualizzazione di una pagina Web sono markup HTML e CSS (Cascading Style Sheets). strutture HTML definiscono il contenuto del documento, che può includere testo, immagini, video e altri tipi di supporto. dichiarazioni CSS dettare come il browser deve visualizzare gli elementi HTML nel documento. Ci sono piccole differenze tra i diversi browser durante la visualizzazione HTML.

disposizione

HTML e CSS definiscono come elementi della pagina web devono essere disposte l'una rispetto all'altra. Gli elementi HTML in una pagina sono contenuti all'interno dei tag:

<Div> Un elemento di pagina </ div>

Questi elementi possono essere disposti in vari modi. Il browser utilizza gli elementi stessi e le dichiarazioni CSS per decidere come la pagina deve essere presentata. regole CSS dichiarano larghezze e le posizioni degli elementi:

div {width: 80%; float: left;}

Ciò significa che il "div" occuperà 80% della larghezza del suo elemento di contenimento e siederà sullo stesso accesso orizzontale di qualsiasi elemento flottante alla sua sinistra, fornendo questi inseriscono all'interno dell'elemento di contenimento.

Testo

Un certo numero di tipi di elementi HTML può contenere testo per la visualizzazione per gli utenti, con CSS definire font, la dimensione del testo, lo stile del testo, allineamento e colore. L'esempio seguente mostra alcuni HTML testo contenuto all'interno di un paragrafo:

<P> Alcuni testo del paragrafo </ p>

Il browser visualizzerà automaticamente questo con nuove linee, in modo efficace le interruzioni di riga, prima e dopo l'elemento "p". Questo codice CSS definisce vari aspetti del testo per il browser in modo da riflettere quando la pagina viene presentato:

p {font-family: Arial, Helvetica, sans-serif; font-size: grande; font-weight: bold; color: # 00FFFF; text-align: center;}

Il Modello Box

Il Modello Box in CSS è un metodo per istruire il browser riguardante l'area ad essere occupata da elementi. Ogni elemento HTML può avere una larghezza specifica, un'area di padding aggiunto a ciascun lato, un bordo attorno all'elemento compresa la zona imbottita, quindi un margine esterno che, definendo un'area intorno all'elemento che non può contenere altri elementi. Le misurazioni utilizzati possono essere fissi, come il seguente esempio:

div {padding: 10px; margin: 5px;}

Le misurazioni possono essere alternativamente rispetto alle dimensioni dell'elemento, come in questo esempio:

div {width: 100px; padding: 5%; margin: 2%;}

immagini

Immagini in HTML possono essere visualizzati sia in primo piano e sfondo. immagini in primo piano sono compresi all'interno del codice HTML, dicendo al browser per visualizzarli insieme agli altri elementi nel documento, come segue:

<Img alt = "una foto" />

Alternativamente immagini possono essere visualizzate sullo sfondo, dietro alcuni elementi come nell'esempio CSS dicendo al browser l'immagine da visualizzare dietro uno specifico tipo di elemento, e come deve essere visualizzata:

div {background: # 000000 URL ( 'backpicture.jpg') repeat-x;}

L'immagine viene ripetuta lungo l'asse "x" e un colore nero visualizzato dietro qualsiasi altra parte visibile dell'elemento.

Tabella HTML Setting & dimensioni delle colonne

December 15

Tabella HTML Setting & dimensioni delle colonne


All'interno di una tabella HTML, gli sviluppatori possono elencare le righe, colonne e contenuti che il browser Web sarà visualizzata utilizzando un layout tabellare. Nel determinare la presentazione di tabelle e colonne di una tabella, gli sviluppatori possono scegliere di specificare le proprietà di stile all'interno del markup HTML o in codice Cascading Style Sheet separata. tabelle HTML, e le loro colonne, possono incorporare un sacco di possibili impostazioni e opzioni stilistiche.

Stile Tabella

Utilizzando dichiarazioni CSS, è possibile specificare le proprietà per le tabelle HTML, colonne e celle. Il seguente esempio markup HTML crea un semplice elemento di tabella:
<Table>
<Tr> <td> Un cellulare </ td> </ tr>
<Tr> <td> Un altro cellulare </ td> </ tr>
</ Table>

L'elemento "tr" rappresenta una riga della tabella, mentre l'elemento "td" è una singola cella all'interno di una riga. Il contenuto di ogni cella si trova tra l'apertura e chiusura tag "TD". Questa pagina può includere dichiarazioni CSS sia nella sezione di testa o in un file CSS separato collegato a da lì. Il seguente codice di esempio CSS dimostra impostando alcuni particolari elementi di stile di tabella:
table {border: 1px solid # 000000; width: 60%; }
td {padding: 3px; }

Questo codice imposta le proprietà della tabella, tra cui larghezza, rispetto al elemento padre della tabella, più larghezza del bordo, lo stile e il colore. La dichiarazione "td" per padding colpisce tutte le celle di una tabella nella pagina, aggiungendo spazio tra il contenuto di una cella e il suo bordo.

Elementi HTML

Le pagine Web possono utilizzare l'elemento HTML "col" per definire le proprietà delle colonne della tabella. La seguente tabella modificata markup illustrato l'utilizzo dell'elemento:
<Table>
<Col align = "left">
<Col align = "right">
<Tr> <td> Un cellulare </ td> <td> Un altro cellulare </ td> </ tr>
</ Table>

I tag "col" qui dettare allineamento per le due colonne all'interno della tabella. Altri attributi dell'elemento consentono agli sviluppatori di impostare le proprietà di allineamento verticale e per l'applicazione di styling per più colonne. L'elemento "colgroup" specifica la formattazione di un gruppo di colonne all'interno di una tabella come segue:
<Table>
<Span colgroup = "2" align = "right"> </ colgroup>
<Tr> <td> Un cellulare </ td> <td> Un altro cellulare </ td> </ tr>
</ Table>

Questo elemento impone allineamento per entrambe le colonne della tabella.

Stile colonna

Le pagine Web possono dettare lo stile per "col" e "elementi COLGROUP" utilizzando il codice CSS, sia in-line, come parte del markup HTML, o separatamente, all'interno di file CSS. Il seguente codice HTML di esempio mostra come aggiungere un attributo class ad un elemento:
<Class col = "maincol">

All'interno del codice CSS per questa pagina, il seguente codice di esempio potrebbe specificare regole di stile per le colonne con questo particolare valore di attributo di classe:
col.maincol {
color: # 330000;
background-color: # CCCCCC;
}

Per specificare gli elementi "col" all'interno di tabelle con un attributo particolare classe, CSS può utilizzare il seguente codice:
Col table.maintable {padding: 5px; }

attributi

elementi HTML per le tabelle, le celle e le colonne possono tutti includere alcuni attributi che determinano le proprietà di stile. Ad esempio, l'elemento di tabella può presentare un elemento larghezza come segue:
<Table width = "500px">

Alcuni dei styling attributi per le tabelle e le cellule sono diventati deprecato nelle ultime versioni di HTML, con gli sviluppatori incoraggiati ad usare i CSS, invece, anche se la maggior parte dei browser supportano ancora gli attributi. Ad esempio, l'elemento cella di tabella può includere larghezza e altezza attributi come segue:
<Td height = larghezza "50px" = "100px">

L'elemento tabella prende anche gli attributi opzionali per il colore di sfondo e l'allineamento, che sono entrambi deprecato. Quando una proprietà viene deprecato, questo significa che potrebbe non essere supportata nelle future versioni di HTML, quindi non è generalmente raccomandato per l'uso in siti attuali.

Come creare un modello di sito web con PHP

April 12

Come creare un modello di sito web con PHP


È possibile creare un modello di sito web con PHP, anche se non si ha molta esperienza sia con PHP o HTML. Lo scopo di un modello di sito web è generalmente quello di creare le strutture di un sito, ma senza aggiungere il contenuto effettivo. Un modello di sito web dovrebbe delineare gli elementi HTML per la visualizzazione di testo, immagini e altri contenuti. La maggior parte dei modelli includono anche Cascading Style Sheets per definire il layout e l'aspetto generale del codice HTML. Un modello di sito web può essere rivolto a particolari tipologie di sito web, o può essere generale.

istruzione

1 Disegnare un disegno di massima per il modello. Utilizzare un un programma di progettazione grafica per creare uno schizzo del vostro disegno modello di carta e penna o. Includi sezioni per ogni area e il tipo di contenuto che si desidera che il modello da contenere. In genere, un design modello di sito web includerà un'intestazione, un menu per la navigazione del sito, e le aree per la visualizzazione di testo e altri mezzi di comunicazione.

2 Creare un file PHP per ogni pagina del modello di sito web. Nome del file home page "index.php" e gli altri file con i nomi in modo da riflettere il loro contenuto. Si potrebbe, ad esempio, si desidera utilizzare "help.php" per una pagina di aiuto. Inserire elementi HTML all'interno dei file PHP per contenere ogni sezione del contenuto del sito web, ad esempio:

<? Php

$ SITE_TITLE = "Titolo del sito";

echo "<html> <head> </ head> <body>

<Div id = 'header'> ". $ SITE_TITLE." </ Div>

<Div id = 'menù'> Area Menu </ div>

<Div class = 'content'> Contenuto della pagina </ div>

</ Body> </ html> ";

?>

All'interno del codice HTML in PHP, includere elementi per contenere le aree di testo, immagini e altri contenuti.

3 Usare CSS per dettare come gli elementi del modello devono essere disposti. Nella tua sezione head pagina, un collegamento a un file esterno CSS (sostituire i tag testa vuota):

<Head> <link rel = "stylesheet 'type =' text / css 'href =' templatestyle.css '/> </ head>

Creare il file "templatestyle.css" in un editor di testo e inserire il codice per determinare come le sezioni di pagina saranno presentati:

body {width: 900px;}

intestazione {width: 100%; text-align: center; font-weight: bold;} menu {width: 100%;}

.content {width: 100%; color: # 333333;}

dichiarazioni CSS stabilire la posizione di ogni elemento, così come le caratteristiche visive, tra cui testo e colori di sfondo, font, bordi e molto altro ancora.

4 Usare le immagini all'interno del vostro modello per migliorare il design. La maggior parte dei modelli di siti web includono immagini da aggiungere l'esperienza dell'utente. A seconda dello scopo di un sito, può includere immagini nella sezione di intestazione e all'interno del contenuto di ciascuna pagina. Inoltre, le immagini possono essere utilizzate come sfondi per personalizzare l'aspetto degli elementi del sito, come in questo esempio CSS:

.content {background: URL ( "bgimg.jpg");}

Immagini rompere il testo e altri dati in una pagina Web, rendendo più facile e più piacevole da leggere.

5 Prova il tuo modello di PHP con il contenuto vero e proprio. Inserire il testo del campione e le immagini nel codice del modello per assicurarsi che il PHP, HTML e CSS sono tutti in modo efficace codificati. Caricare i file di modello a un server Web e sfogliare le pagine, controllando che funzionino correttamente e presentare il contenuto al meglio. Quando si inserisce il contenuto effettivo in un modello, ti capiterà spesso di venire a conoscenza di difetti e aree di miglioramento.

Consigli e avvertenze

  • Sebbene la natura di un modello è quello di adattarsi a diversi siti web, i modelli sono spesso progettati per particolari categorie di siti, come notizie, intrattenimento o di e-commerce.
  • Non basta testare il modello in un browser Web. CSS appare in modo diverso tra i vari browser, quindi un modello di successo sarà coerente in tutti loro.

Come progettare modelli Oscommerce

April 12

Come progettare modelli Oscommerce


osCommerce è una soluzione popolare di e-commerce. E 'open-source e scritto in PHP. La comunità osCommerce ha una cultura di estendere il prodotto alle sue esigenze, in modo plug-in ed estensioni sono abbastanza comuni. sistemi di template sono un comune, oltre a osCommerce. OsCommerce manca built-in strutture di template, e al modello, è necessario modificare la fonte principale. Ci sono una pienezza di sistemi di template disponibili che aggiungono i servizi necessari per osCommerce.

istruzione

1 Scarica un modello di sistema per osCommerce. Diversi esistono, ma uno dei più popolari è il sistema Simple template. Tutti loro funzionare in modo simile.

2 Segnare il tuo sito web utilizzando XHTML. Un sito di esempio semplice potrebbe essere simile a questo:

<Html>

<H1> Ciao Mondo <h2>

</ Html>

Le parentesi angolari, o tag, denotano "elementi" del documento HTML. Tutto deve essere allegata tag appropriati.

3 Stile il documento utilizzando i CSS. Un documento di esempio CSS potrebbe essere simile alla seguente:

h1 {color: red; }

Questo è usato per descrivere come la pagina dovrebbe apparire. È possibile "indirizzare" gli elementi da loro digitando fuori e poi li segue con proprietà racchiuso tra parentesi graffe. Nel codice precedente, il browser viene detto di rendere tutti gli elementi H1 come rosso.

4 Sostituire il contenuto che si è inserito in modo statico nel documento HTML con i tag appropriati. Per esempio, laddove si desidera inserire una "scatola carrello" inserire il tag "$ cartbox". Ci sono molti di questi tag. Utilizzare quelli che sono a seconda della situazione.

Sfondo vs. Colore di sfondo

September 10

Sfondo vs. Colore di sfondo


Gli sviluppatori possono dettare le proprietà di presentazione di elementi della pagina Web utilizzando una combinazione di linguaggio di programmazione Web HTML e le dichiarazioni Cascading Style Sheet. dichiarazioni CSS possono imporre varie proprietà di stile per gli sfondi degli elementi. Il colore di sfondo è solo una delle possibili opzioni di stile per gli elementi HTML, altri includono immagini di sfondo, così come le regole per la ripetizione e il posizionamento questi.

Elementi HTML

codice CSS in grado di identificare e dettare stile di sfondo per ogni elemento o gruppo di elementi in una pagina. Gli sviluppatori a volte strutturare gli elementi HTML in una pagina utilizzando attributi in modo che il codice CSS in grado di identificare gli elementi particolari per lo styling. Ad esempio, il seguente elemento include un attributo ID:
<Div id = "header"> L'intestazione del sito </ div>

Un unico valore di attributo ID deve comparire solo una volta all'interno di una pagina Web. Questo perché l'attributo ID identifica univocamente elementi. Per creare un gruppo di elementi di applicare le stesse proprietà di stile consente, HTML può includere un attributo di classe come segue:
<Div class = "centro"> un elemento centrale </ div>

Questa pagina può includere lo stesso valore di attributo classe per più elementi con elementi di diversi tipi.

identificatori CSS

Il codice CSS per una pagina Web in grado di identificare gli elementi HTML per tipologia, come segue:
div {
/ Proprietà CSS /
}

In alternativa, il codice CSS può identificare elementi con un particolare attributo ID, come segue:

intestazione {

/ Proprietà CSS /
}

Per identificare gli elementi con un attributo particolare classe, CSS può utilizzare il seguente codice:
.central {
/ Proprietà CSS /
}

Questo identifica elementi di qualsiasi tipo con l'attributo classe, ma per identificare elementi di un tipo particolare con l'attributo, CSS può utilizzare la seguente sintassi:
div.central {
/ Proprietà CSS /
}

Tutte queste strutture possono includere styling per gli sfondi degli elementi.

Colore di sfondo

dichiarazioni CSS possono specificare il colore di sfondo per gli elementi HTML usando valori di colore CSS, che può apparire come valori esadecimali, i nomi dei colori standard riconosciuto dai browser, colori RGB (rosso, verde, blu) o HSL valori (tonalità, saturazione, luminosità). Il seguente codice di esempio CSS dimostra l'impostazione colore elemento di sfondo utilizzando un valore esadecimale:
background-color: # FF0000;

Questo specifica che che tutta l'area dietro l'elemento dovrebbe essere un colore rosso brillante. I seguenti estratti CSS dimostrano usando gli altri tipi di valore per determinare i vari colori di sfondo:
background-color: black;
background-color: rgb (0,255,0);
background-color: HSL (180,80%, 55%);

I colori di sfondo nei CSS possono applicare a qualsiasi elemento HTML, o di un'intera pagina.

Proprietà dello sfondo

CSS fornisce varie proprietà aggiuntive per gli sfondi di elementi in HTML. Molte pagine Web sono le immagini di sfondo con i CSS. Con CSS, sviluppatori possono specificare l'URL per il browser per individuare un'immagine di sfondo, nonché specificare se deve ripetere, dove dovrebbe essere posizionato e se non si deve scorrere insieme al resto della pagina. Ciascuna di queste proprietà ha la propria dichiarazione CSS, ma utilizzando la proprietà background, sviluppatori possono includere alcuni o tutti in una sola linea, insieme con il colore di sfondo. Il codice di esempio riportato di seguito illustra la tecnica:
background: # 333333 url ( 'backpic.jpg') no-repeat left top;

Codice HTML per un menù ad albero

September 19

Codice HTML per un menù ad albero


Le pagine Web HTML possono usare le strutture gerarchiche, che sono particolarmente adatti per i menu del sito web. Se si dispone di un sito web con un sacco di sezioni e sottosezioni al suo interno, con un menu ad albero fornisce agli utenti un modo intuitivo per navigare sul suo sito web. Il markup HTML per un menù ad albero prevede normalmente le liste, con ogni elemento della lista che contiene un elemento di ancoraggio HTML collegamento a una pagina o un sito particolare. Molti siti usano anche Cascading Style Sheet e il codice JavaScript per migliorare l'aspetto e la funzionalità del menu ad albero.

contenuto

Quando si progetta un menu ad albero, gli sviluppatori hanno bisogno di catalogare le varie sezioni di contenuto all'interno di un sito. Per esempio, un sito di vendita di prodotti potrebbe avere sezioni per ciascun tipo di prodotto, con ulteriori sottosezioni all'interno di questi per dividere i prodotti in categorie. A volte, gli sviluppatori Web utilizzano le sottodirectory per organizzare i contenuti del sito, nel qual caso ogni directory potrebbe corrispondere a un elemento di livello superiore all'interno del menu ad albero. Ogni voce del menu alla fine sarà un link HTML, come nel seguente codice di esempio:
<a href="clothing/"> Abbigliamento </a>

Questo codice si collega a una cartella denominata "abbigliamento", che si trova nella directory root del sito. Dal momento che nessuna pagina è indicato, il link aprirà la pagina indice in quella directory. All'interno della sezione vestiti del menu dell'albero, articoli potrebbero collegare a pagine particolari, come segue:
<a href="clothing/trousers.html"> Pantaloni </a>

elenchi

menu ad albero HTML normalmente coinvolgono liste. Il seguente markup esempio illustra un menu usando liste non numerate:
<Ul>
<Li> <a href="clothing/"> Abbigliamento </a> </ li>
<Li> <ul>
<Li> <a href="clothing/trousers.html"> Pantaloni </a> </ li>
<Li> <a href="clothing/jackets.html"> Giacche </a> </ li>
</ Ul> </ li>
<Li> <a href="gifts/"> regalo </a> </ li>
<Li> <ul>
<Li> <a href="gifts/food.html"> alimentari </a> </ li>
<Li> <a href="gifts/novelty.html"> oggetti novità </a> </ li>
<Li> <a href="gifts/dvds.html"> DVD </a> </ li>
</ Ul> </ li>
</ Ul>

Questo menu contiene due sezioni principali per l'abbigliamento e regali. All'interno di ognuno di questi sono ulteriori voci di elenco. Ogni elemento della lista può contenere un altro elenco, quindi per i siti complessi, un menù ad albero può coinvolgere diversi livelli di profondità. Facendo clic su un elemento di primo livello avrà l'utente alla homepage quella sezione del sito, mentre si fa clic un particolare articolo li porterà ad una pagina specifica all'interno di una sezione.

Stile

La maggior parte dei siti utilizzano fogli di stile CSS per lo stile loro menu. All'interno del codice CSS per un sito, gli sviluppatori possono dettare vari aspetti della comparsa del menu, compreso il layout e le caratteristiche visibili di ogni elemento. I browser Web spesso mostrano elenchi puntati su voci di elenco per impostazione predefinita, che molti sviluppatori scelgono di non visualizzare. Il seguente codice di esempio CSS lo dimostra:
ul {list-style-type: none; }

Per scegliere uno stile particolare proiettile, il codice si applica quanto segue:
ul {list-style-type: square;}

Gli sviluppatori possono opzionalmente aggiungere attributi di classe per le liste a vari livelli all'interno di un menu ad albero, adattando il CSS a ciascuno di questi.

Scripting

Molti siti web utilizzano funzioni JavaScript per migliorare l'interattività con menu ad albero. L'utilizzo di questi, gli sviluppatori possono specificare che alcune voci non devono essere visibili per l'utente inizialmente. Ad esempio, facendo clic su un elemento della lista di livello superiore potrebbe causare sue sottosezioni a comparire in modo dinamico. funzioni JavaScript possono utilizzare la visualizzazione o la proprietà di visibilità di un elemento a dettare se il browser dovrebbe mostrare o nascondere. Il codice seguente illustra l'impostazione di un elemento dell'elenco per essere nascosto:
element.style.visibility = "hidden";

La seguente alternativa utilizza la proprietà di visualizzazione:
element.style.display = "none";

Come cambiare i caratteri in XHTML

November 18

Come cambiare i caratteri in XHTML


Impostazione e modifica di caratteri in formato HTML è stato un processo semplice che semplicemente richiesto l'involucro <font> tag intorno ad un elemento interno. Con l'elemento <font> deprecato in XHTML con lo scopo di separare contenuto e presentazione, specificando i font è ora più complicato. Come per le altre proprietà di stile, impostare e modificare tipi di font in XHTML richiede l'uso di Cascading Style Sheets (CSS).

istruzione

1 Identificare l'elemento che si desidera modificare. In questo esempio, CSS verrà utilizzato per impostare il tipo di carattere per il testo contenuto all'interno di una coppia di tag di paragrafo:

<P> paragrafo campione di testo. </ P>
<P> Una seconda riga di testo. </ P>

Sebbene questo esempio riguarda paragrafi, regole di stile possono essere applicati a qualsiasi elemento con CSS.

2 Aggiungere un foglio di stile alla tua pagina. Individuare il </ head>, che si trova vicino alla parte superiore del codice sorgente del documento. Inserire una riga vuota direttamente sopra questo tag. Copia e incolla il seguente codice sulla riga vuota:

<Style type = "text / css">
</ Style>

Queste righe di codice XHTML indicano al browser che tutte le regole di stile validi contenuti tra i tag <style> tag devono essere interpretate come regole di stile e applicate alla pagina.

3 Aggiungere una regola di stile per cambiare il tipo di carattere di tutti gli elementi selezionati. Le regole di stile contengono le proprietà che vengono interpretati dai browser web per controllare l'aspetto di una pagina web. Essi possono essere applicati a qualsiasi elemento XHTML valida. Modificare il carattere del paragrafo (<p>) gli elementi di cui al punto 1 copiando e incollando il seguente riga di codice in una nuova riga immediatamente sotto l'apertura tag <style> aggiunto nel passaggio 2:

p {font-family: Arial, Helvetica, sans-serif; font-size: 20px}

Questa regola di stile dice al browser web per visualizzare ogni elemento <p> in Arial, Helvetica o Arial, se non è installato sul computer di un utente, o in carattere sans-serif di default della macchina se nessuna opzione è disponibile. Si dice anche il browser per visualizzare <p> elementi in una dimensione del carattere di 20 pixel. Entrambe queste opzioni possono essere modificate per soddisfare le esigenze della vostra pagina.

4 Salvare la pagina e visualizzare le modifiche. Salvare la pagina Web appena modificato, quindi aprire la pagina nel browser Web. I tag di paragrafo che una volta è apparso nel font predefinito del browser, alla dimensione predefinita, ora appaiono in 20 pixel Arial o Helvetica.

La sintassi per evitare che un display in formato HTML

August 28

La sintassi per evitare che un display in formato HTML


Gli sviluppatori Web possono scegliere di nascondere gli elementi della pagina utilizzando una combinazione di codice HTML e Cascading Style Sheet. Per utilizzare questa tecnica, una pagina deve includere elementi che possono essere identificati all'interno del codice CSS associato al sito. Le proprietà CSS per la visualizzazione e la visibilità possono entrambi nascondere elementi HTML, ma lo fanno in modi leggermente diversi. Gli sviluppatori hanno bisogno di decidere come vogliono l'elemento nascosto incidere sugli elementi visibili rimanenti all'interno di una pagina quando si sceglie una tecnica.

CSS

Un sito web può implementare stile visivo utilizzando uno o più sezioni di codice CSS. Gli sviluppatori possono includere questo codice all'interno della pagina Web di markup, o all'interno di un file separato che è collegato alla all'interno della sezione head pagina come segue:

<Link rel = "stylesheet" type = "text / css" href = "mypagestyle.css" />

Questo codice collega un file salvato come "mypagestyle.css", che viene memorizzato nella stessa directory della pagina stessa. All'interno del file CSS, gli sviluppatori possono includere tutte le proprietà di stile che piace, che determinano l'aspetto e il layout degli elementi del markup HTML.

Identifiers

codice CSS utilizza identificatori per lo stile particolari elementi HTML. Il seguente codice HTML di esempio illustra la creazione di un elemento con un attributo di classe:

<Div class = "nascondere"> Ecco alcune parole per nascondere </ div>

All'interno del codice CSS associato a questa pagina, la seguente sintassi identifica eventuali elementi con l'attributo class specificato:

.nascondere {

/ Dichiarazioni CSS qui /

}

Per identificare solo gli elementi di tipo "div" con l'attributo, CSS può utilizzare il seguente codice:

div.hide {

/ Dichiarazioni CSS qui /

}

All'interno di questa sezione di codice CSS, uno sviluppatore può includere qualsiasi proprietà styling necessarie, compresa nascondere l'elemento se richiesto.

Display

La proprietà CSS display può prendere un certo numero di valori possibili. Il valore nessuno dice al browser di non visualizzare l'elemento in questione a tutti. Il seguente codice di esempio CSS illustra questa tecnica:

display: none;

Qualsiasi elemento che questo codice si applica a non apparirà all'interno del browser quando l'utente visualizza la pagina. La pagina renderà come se gli elementi nascosti non sono lì, con altri elementi che occupano lo spazio che gli elementi nascosti potrebbero altrimenti sono apparsi all'interno.

Visibilità

La proprietà di visibilità nei CSS nasconde anche elementi, ma senza intaccare il layout di pagina. Questo significa che quando la visibilità è impostato su "nascosto" una pagina sarà ancora rispecchiare il settore che gli elementi nascosti avrebbero occupato se fossero lì. Il codice CSS di seguito viene illustrato utilizzando la proprietà di visibilità:

visibility: hidden;

Questa proprietà è preferibile che il contenuto nascosto sta per essere reso visibile ad un certo punto, mentre l'utente visualizza la pagina. Alcuni sviluppatori implementare effetti come questa che utilizzano funzioni JavaScript. Se un elemento precedentemente nascosto diventa visibile quando la proprietà display è stato utilizzato, il layout di pagina dovrà adattarsi ad ospitare esso, che può rendere elementi visibili saltare intorno. Usando la proprietà di visibilità evita questo problema.

Come risolvere tutte lettere maiuscole su un sito web

August 30

Come risolvere tutte lettere maiuscole su un sito web


Gli sviluppatori web di siti web dinamici sono a volte ad affrontare la sfida di conversione del testo che contiene troppe lettere maiuscole. Gli strumenti sono disponibili per gli sviluppatori web per modificare il caso lettera in un formato più desiderabile. Questi strumenti potrebbero essere utilizzati in compiti di conversioni, come trasformare una vecchia sito web che ha troppe lettere maiuscole a un design più nuovo più professionale. In alternativa, potrebbero essere impiegati per elaborare le lettere maiuscole da un input dell'utente e convertire quelle lettere in un formato grammaticalmente corretto con solo la prima lettera di ogni frase rimanere in maiuscolo.

istruzione

Utilizzo di Cascading Style Sheets (CSS)

1 Scrivi una nuova regola di progettazione CSS utilizzando la proprietà text-transform. Il CSS text-transform proprietà contiene tre valori che trasformeranno il caso del testo del sito. Questi valori sono: lettere maiuscole, che visualizza il testo in stile in maiuscolo; minuscolo, che mostra tutto il testo in lettere minuscole; e, capitalizzare, che capitalizza solo la prima lettera di ogni parola. In questo esempio, i nuovi stili regola CSS un nuovo div. Si assegna il div con la classe di divWrapper e implementa la proprietà text-transform con un valore di minuscolo. Questo trasformerà tutto maiuscolo in minuscolo.

.divWrapper {
text-transform: minuscolo;
}

2 Scrivi una seconda regola CSS per lo stile la prima lettera di ogni frase. Ciò si ottiene mediante l'elemento pseudo-prima lettera. Questa regola trasformerà la prima lettera di ogni frase di nuovo in maiuscolo. In questo esempio, una nuova regola di stile è stabilito che trasformerà la prima lettera di ogni DIV assegnato un ambiente di classe della pena.

.sentence: first-letter {
text-transform: capitalizzare;
}

3 Posizionare le due regole all'interno del tag <style> e tra i tag <head> e </ head> della pagina HTML.

<Head>
<Style>
.divWrapper {
text-transform: minuscolo;
}
.sentence: first-letter {
text-transform: capitalizzare;
}
</ Style>
</ Head>

4 Applicare le due nuove regole per la vostra pagina web. Le regole sono assegnati a div elementi che sono posti su entrambi i lati del contenuto della pagina web. Nel seguente codice, il div divWrapper è assegnato a tutto il testo, mentre un div con la classe di frase è assegnato a ogni singola frase del testo. L'intero testo viene posizionato dopo il tag <body>.

<Body>
<Div class = "divWrapper">
<Div class = "frase"> Questa è la prima frase del testo tutto in maiuscolo che si sta tentando da convertire. </ Div>
<Div class = "frase"> Questo è il secondo frase del testo maiuscolo. </ Div>
</ Div>
</ Body>

Utilizzo di PHP

5 Assegnare il testo della tua pagina web per una variabile PHP. Questo codice di esempio utilizza la variabile $ uppercasetext.

$ TheText = "Questa è la prima frase del testo tutto in maiuscolo che si sta tentando di convertire questo è la seconda frase DEL TESTO maiuscolo..";

6 Convertire il testo in minuscolo utilizzando la funzione di PHP strtolower ().

$ TheText = strtolower ($ theText);

7 Utilizzare una funzione PHP per convertire il testo in minuscolo per il testo che ha una prima lettera maiuscola per ogni parola dopo un segno di punteggiatura. Questa funzione seguente prende il vecchio input di testo, partite con un segno di punteggiatura e capitalizza la lettera successiva. Lo fa utilizzando la funzione ucfirst di PHP che prende la prima lettera di una stringa e lo rende in una lettera maiuscola. Questa funzione si chiama converttext e può essere copiato nel file PHP.

Funzione converttext ($ convert2, $ splitter) {

$oldtext=explode($convert2, $splitter);
$destination = array();
foreach ($oldtext as $processedtext) {
$goodtext3=ucfirst($processedtext);
$destination[] = $goodtext3;
}
$newtext2 = implode($convert2, $destination);
return $newtext2;

}

8 Assegnare variabile di testo per la funzione converttext. Avviare un nuovo incarico per ogni segno di punteggiatura che si desidera verificare. L'esempio seguente utilizza la funzione converttext per verificare il marchio di punto, punto esclamativo e questione seguito da un singolo spazio e maiuscola la lettera successiva seguendo questi criteri.

$ TheText = converttext (, $ theText ".");
$ TheText = converttext (, $ theText "!");
$ TheText = converttext (, $ theText "?");

9 Stampa il nuovo testo con il comando php echo. Questo rende il nostro testo in una forma grammaticalmente corretto con la prima lettera di ogni frase in maiuscolo e tutte le altre lettere stampato in minuscolo. Questo metodo è molto più efficiente rispetto all'esempio CSS per convertire testo perché differenza dell'esempio CSS, ciascuna frase non ha bisogno di essere denotato con un nuovo div.

echo $ theText;

Come fare un foglio di stile in Dreamweaver

August 31

Cascading Style Sheets (CSS) è un linguaggio di stile usato per i siti web di formattazione. Essi sono utilizzati per migliorare l'aspetto, si sentono e lo stile delle pagine web individuali. modelli CSS sono utilizzati all'interno di linguaggi di markup come HTML, XHTML e XML. Vengono con le opzioni di essere incorporato all'interno di una pagina Web o si fa riferimento da un foglio di stile esterno. Dreamweaver è un programma di authoring Web che viene utilizzato per la creazione di pagine Web, e fornisce una serie di strumenti per la formattazione utilizzando fogli di stile.

istruzione

1 Aprite Adobe Dreamweaver.

2 Fai clic su "File" seguito da "Nuovo". Si apre la finestra di dialogo "Nuovo documento".

3 Selezionare "Pagina vuota" sotto "Categoria" nel riquadro di sinistra.

4 Selezionare "CSS" nel riquadro a destra della finestra.

5 Fare clic sul pulsante "Crea". Ora dovreste vedere una schermata vuota.

6 Iniziare a scrivere il codice CSS. Il seguente esempio CSS cambia lo sfondo della pagina Web al blu, l'intestazione di colore arancione e il tipo di carattere Times New Roman.

sintassi CSS Esempio:

corpo

{

background-color: # d0e4fe;

}

h1

{

colore arancione;

text-align: center;

}

p

{

font-family: "Times New Roman";

font-size: 20px;

}

7 Fai clic su "File", seguito da "Salva con nome". Salvarlo come "myexample.css."

8 Vai alla pagina Web che si desidera utilizzare il foglio di stile su. Incorpora il foglio di stile nel codice sorgente della pagina Web utilizzando il tag link HTML. Ad esempio: "<link rel =" "type =" stylesheet text / css href = "myexample.css"> ".

DIV: Vs. Classe ID

September 11

DIV: Vs. Classe ID


Gli sviluppatori Web creano pagine in HTML, scegliendo tra una gamma di elementi. elementi HTML, come "div" definire il contenuto delle pagine web, che possono includere testo, dati e altri media. Un elemento HTML ha un tag di apertura, un tag di chiusura, alcuni contenuti, e gli attributi opzionali. Questi attributi vengono visualizzati come parte del tag di apertura e indicano ulteriori informazioni su l'elemento, come la sua classe o ID designato.

Elementi HTML

Le pagine Web possono includere elementi "div" per definire la struttura e il contenuto. La seguente sintassi di esempio markup HTML dimostra tra cui un elemento semplice "div" con alcuni contenuti del testo:

<Div> Ecco il contenuto del testo. </ Div>

Tale struttura può comprendere anche altri elementi nidificate al suo interno, come il seguente codice di esempio, dove il "div" comprende un elemento dell'immagine con il testo:

<Div> Ecco il contenuto del testo. <Img alt = "immagine" /> </ div>

attributi

elementi HTML possono includere gli attributi all'interno dei loro tag di apertura. Per alcuni elementi, sono necessari alcuni attributi, mentre altri sono opzionali e possono essere incluse in ogni elemento. Classe e ID possono entrambi fornire ulteriori informazioni per gli elementi HTML all'interno della sezione corpo di una pagina. Gli sviluppatori utilizzano attributi ID per identificare gli elementi in modo univoco all'interno di una pagina. Ciò significa che un valore di attributo ID deve comparire solo una volta all'interno di una singola pagina. Il seguente codice HTML di esempio illustra tra cui un attributo ID per un elemento:

<Div id = "header"> contenuto di intestazione </ div>

Gli attributi di classe definiscono gruppi di elementi, così lo stesso valore di attributo classe possono apparire più volte all'interno di una pagina. Il seguente codice HTML di esempio illustra l'aggiunta di un attributo di classe per un elemento:

<Div class = "principale"> Contenuto principale </ div>

CSS

Id e class attributi consentono agli sviluppatori di definire regole di stile per le pagine Web utilizzando CSS dichiarazioni (Cascading Style Sheet). Il seguente codice di esempio CSS mostra elementi stilistici con un particolare ID:

intestazione {

color: # FF0000;

}

Il codice di esempio riportato di seguito illustra con un attributo class per lo stile elementi di un tipo particolare:

div.main {

width: 200px;

}

codice CSS può anche applicare styling elementi di qualsiasi tipo con un attributo particolare classe come segue:

.principale {

width: 200px;

}

JavaScript

Gli sviluppatori web possono utilizzare class e id attributi per identificare elementi specifici o gruppi di elementi all'interno di una pagina, utilizzando JavaScript. Questa tecnica consente ai siti web per includere gli effetti visivi, per esempio alterare l'aspetto delle sezioni della pagina, come l'utente interagisce con essi. Il seguente esempio di codice JavaScript dimostra l'acquisizione di un riferimento a un elemento HTML con un particolare ID attributo value:

var headElem = document.getElementById ( "header");

Per acquisire elementi con un particolare nome di classe il processo è leggermente più complicato, come segue:

var divElems = document.getElementsByTagName ( "div");

var i;

for (i = 0; i <divElems.length; i ++) {

var isMain = false;

if (divElems [i] .className == "principale") isMain = true;

}

Questa funzione controlla attraverso l'array di elementi "div" per quelli con il nome della classe desiderata.

Qual è il vantaggio di un tag div?

September 11

elementi HTML modellare gli elementi di contenuto all'interno di pagine Web. Utilizzando gli elementi, gli sviluppatori possono creare pagine con strutture logiche specifiche e le proprietà di presentazione. Il tag "div" è uno degli elementi più comuni nelle pagine Web. Un tag "div" rappresenta una sezione di una pagina e può contenere testo, dati, media o altri elementi, tra altri elementi nidificati "div". Utilizzando elementi "div", gli sviluppatori possono creare siti che siano coerenti per aspetto e suscettibili di sviluppo futuro.

Struttura

Le tecnologie coinvolte nella costruzione di un sito web di contenuti separato dalla formattazione. Gli elementi "div" in una pagina Web permettono agli sviluppatori di modellare ogni sezione elemento e pagina di contenuto, la creazione di una struttura logica per la pagina nel suo complesso. Il codice HTML markup seguente esempio illustra un elemento di "div" con ulteriori elementi annidati al suo interno:

<Div class = "esterno">

Ecco una parte di testo.

<Div class = "interna">

<Img alt = "un'immagine" />

Qui è più testo.

</ Div>

</ Div>

Quando gli sviluppatori web di creare inizialmente pagine, si può inserire il contenuto della pagina, con ogni sezione circondato da tag "div", permettendo loro di aggiungere più contenuti e lo stile del codice in modo incrementale.

HTML Varianti

Prima di XHTML, le versioni precedenti di markup HTML volte inclusi informazioni relative alla presentazione piuttosto che contenuti. XHTML mira a creare pagine in cui il contenuto e lo stile sono determinati in luoghi diversi all'interno del codice generale per una pagina web o un sito. Il tag "div" è un elemento importante in questo stile di sviluppo Web, perché l'elemento puramente è progettato per definire una sezione di una pagina, anziché applicare particolari proprietà aspetto ad esso. Ciò significa che gli elementi "div" possono aiutare gli sviluppatori a creare pagine che sono più alti di qualità e più affidabile tutti i browser web.

disposizione

Quando uno sviluppatore crea una pagina Web con una serie di elementi "div" in esso, lei può usare Cascading Style Sheet codice per determinare come queste sezioni di contenuti verranno visualizzati agli utenti la visualizzazione della pagina in un browser Web. CSS permette sviluppatori di applicare posizionamento e lay out proprietà agli elementi in una pagina, l'uno rispetto all'altro. Il seguente codice di esempio CSS impone che alcuni elementi dovrebbero essere galleggiare sulla stessa linea orizzontale come una dall'altra:

div.outer

{Width: 100%; }

div.inner

{Width: 400px; float: left; }

div.inner img

{Float: left; }

Quando viene applicato al contenuto HTML di esempio, tali dichiarazioni farà sì che il contenuto di apparire fianco a fianco, piuttosto che con interruzioni di riga tra gli elementi "div", che è il loro stile di default come elementi di blocco.

Stile

codice CSS può applicare varie proprietà di stile agli elementi "div" Oltre a determinare la loro disposizione all'interno della pagina. Utilizzando gli attributi class e id, gli sviluppatori possono creare stili simili in tutti i gruppi di elementi all'interno di un intero sito. Ad esempio, se un sito contiene un sacco di immagini con didascalie visualizzate accanto a loro e lo sviluppatore intende applicare le stesse proprietà di stile di queste sezioni voce, si può ottenere il risultato desiderato, ponendo ogni sezione del testo della didascalia all'interno di un elemento "div" con un particolare attributo di classe, come segue:

<Div class = "capitano"> Ecco il testo della didascalia. </ Div>

Il codice CSS può quindi identificare e lo stile queste sezioni per l'intero sito come segue:

div.capt {

font-size: small;

color: # 333333;

}

Come utilizzare e modificare Dreamweaver Pagine di esempio e layout CSS

December 15

Come utilizzare e modificare Dreamweaver Pagine di esempio e layout CSS


Conoscere un po 'di Dreamweaver e rendere i siti web? Non è necessario essere un professionista di utilizzare Dreamweaver per fare un sito semplice e sguardo piacevole quando si utilizza una pagina o layout di built-in.

istruzione

Selezionare un campione CSS o layout CSS

1 Preparare un nuovo sito e designare una cartella principale del sito. Quando si è pronti per iniziare la vostra prima pagina, ci sono diverse opzioni nel File> Nuovo menu. I prossimi passi spiegheranno le varie scelte. Nella sezione 2, imparerete sulla modifica del CSS per il layout di pagina di esempio o CSS selezionato.

2 Come utilizzare e modificare Dreamweaver Pagine di esempio e layout CSS

Selezionare File> Nuovo. Nell'immagine, si vede che Pagina Da Campione - Starter Pagina (Theme) - Health & Nutrition (pagina) è stato selezionato, insieme alla scelta di Doctype. La colonna di destra ti dà una miniatura di aspetto della pagina iniziale. Si tratta di un layout a due colonne con uno schema di colore verde-based.

Ogni campione pagina tema viene fornito con un layout di home page e altre quattro pagine di un disegno di corrispondenza. È possibile utilizzare e modificare qualsiasi di questi per creare il tuo sito.

3 Fare clic su Crea. Dreamweaver chiederà dove salvare i file HTML (cartella principale del sito), e ciò che dare un nome al file. Dal momento che questa una home page di esempio, il nome index.html. 4 Come utilizzare e modificare Dreamweaver Pagine di esempio e layout CSS


Dreamweaver mostra un'altra finestra di dialogo, che chiede di copiare gli altri file necessari per la pagina di esempio è stato selezionato. Fare clic su Copia.

5 Come utilizzare e modificare Dreamweaver Pagine di esempio e layout CSS


È anche possibile avviare il vostro sito da una pagina vuota con un layout CSS. Scegliete File> Nuovo. Quindi selezionare Pagina vuota> HTML> e uno dei layout. Nell'immagine, si vede 3 colonna liquida, intestazione e piè di pagina selezionata.

Sulla destra, si vede una miniatura del layout con i simboli indicato se il layout è bloccata (larghezza fissa) o elastico. Si noti che i layout sono solo di base nero, bianco e grigio. Sono scelte di colore sono tutti in palio.

Prima di fare clic su Crea ci sono diverse decisioni importanti. Scegliere un Doctype. Scegliere se mettere il CSS nell'intestazione del documento o in un nuovo file CSS, e scegliere se allegare o meno un altro file CSS oltre al CSS layout. Dreamweaver ha fogli di stile solo per il colore del testo nel File> Nuovo menu sotto la pagina dal campione - stile CSS categoria scheda che potrebbe essere attaccato, anche. In alternativa è possibile collegare qualsiasi altro foglio di stile si ha in questo momento.

Per trovare uno dei built-in fogli di stile per fissare insieme le regole di layout CSS, navigare verso la cartella di Dreamweaver nel programma Files (Applicazioni) e trovare Configurazione> BuiltIn> css per selezionare uno dei built-in combinazioni di colori.

6 Come utilizzare e modificare Dreamweaver Pagine di esempio e layout CSS


Fare clic su Crea. Viene chiesto dove salvare il layout CSS. Non cambiare il nome di Dreamweaver ha dato il file CSS a meno che non si desidera modificare ogni istanza di esso nel codice HTML e CSS che verrà creato.

Il nome thrColLiqHdr.css indicato il layout nell'esempio che sto utilizzando: 3 colonna liquida, intestazione e piè di pagina

7 Come utilizzare e modificare Dreamweaver Pagine di esempio e layout CSS


Dreamweaver si aprirà la pagina HTML in visualizzazione con il layout CSS si è scelto. Salva nella cartella principale tuo sito con un nome selezionato. È quindi possibile iniziare le modifiche.

Gli esempi sono tutti pieni di testo fittizio, che semplice scegliere di cambiare per i propri contenuti.

Modificare o aggiungere al CSS

8 Come utilizzare e modificare Dreamweaver Pagine di esempio e layout CSS


È possibile ottenere un sacco di aiuto da Dreamweaver quando si è pronti a modificare la nuova pagina per il proprio uso. Il CSS è riccamente commentato a spiegare ciò che ogni regola non alla tua pagina.

9 Come utilizzare e modificare Dreamweaver Pagine di esempio e layout CSS


Quando si seleziona una parte del documento che si desidera modificare, è facile vedere quali regole si applicano ad esso utilizzando il pannello Stili CSS e le osservazioni in Design View. Vedere gli ovali rosso nell'immagine mettendo in evidenza il H1 nell'intestazione, la struttura della pagina nel selettore di tag che conduce l'H1, e la regola CSS selezionato nel pannello Stili che corrisponda elemento della pagina. Vedere primi piani in Fase 3.

10 Come utilizzare e modificare Dreamweaver Pagine di esempio e layout CSS


Una visione più ravvicinata del selettore di tag e la regola corrispondente CSS mostrano come trovare la regola che si desidera modificare per fare una pagina progettare il proprio.

11 Come utilizzare e modificare Dreamweaver Pagine di esempio e layout CSS


Quando si ha la regola giusta evidenziato, fare clic sull'icona della matita nel pannello Stili CSS per modificare la regola di apportare eventuali modifiche, come cambiare il colore del carattere, come nell'immagine.

12 Come utilizzare e modificare Dreamweaver Pagine di esempio e layout CSS


Aggiungere nuove regole utilizzando un processo simile a capire un nuovo selettore. Ad esempio, per aggiungere una regola per immagini nell'area #mainContent, guardare la specificità del
.thrColLiqHdr #mainContent
Il nuovo selettore deve essere almeno il più specifico, ma deve aggiungere il selettore img alla miscela.

Fare clic sull'icona più per aggiungere una nuova regola, e utilizzare un selettore come
.thrColLiqHdr #mainContent img
per creare la nuova regola.

Consigli e avvertenze

  • Le opzioni del File> Nuovo del menu possono essere combinati, più di un foglio di stile può essere collegato a una nuova pagina. Esplora tutte le possibilità.
  • Una volta che hai finito di modificare i file CSS, rimuovere i commenti di risparmiare sulle dimensioni del file.
  • Se sei un utente di Windows, si noterà una leggera differenza di aspetto tra la versione di Dreamweaver e ciò che si vede in queste schermate fatte su un Mac. Non c'è da preoccuparsi, la versione di Windows funzionerà esattamente allo stesso modo, ma con uno sguardo di Windows.
  • Sappiate che alcuni dei pagina di esempio (Theme) progetta i layout di tabelle-based. Questa non è la scelta accessibile. Utilizzando uno dei layout CSS è più accessibile.

Javascript vs. Menu CSS

February 13

Javascript vs. Menu CSS


Dall'inizio di Internet, le pagine Web hanno usato i menu per la navigazione. Lontano dalle semplici liste di link orizzontali e verticali di un tempo, oggi i siti web utilizzano strutture di navigazione complesse con collegamento evidenziazione, menu a discesa, fly-out e altro ancora. La creazione di menu più complessi e interattivi richiede una combinazione di Cascading Style Sheet codice (CSS) e JavaScript. Piuttosto che pensare di JavaScript rispetto CSS, utilizzare JavaScript per integrare il codice CSS e, soprattutto, per fornire effetti speciali o massimizzare la compatibilità del browser.

CSS per i menu

Gli sviluppatori possono creare menu mozzafiato manipolando liste non ordinate con i CSS. Questa tecnica consente una grande varietà nei menu, così come gli effetti, come gli angoli arrotondati, gradienti, ombre e altro ancora. La maggior parte di questi effetti sono grazie Level CSS 3 (CSS3). Esistono alcuni problemi quando si cerca di fare questi menu funzionano con i vecchi browser che non supportano CSS3 o comprendono insetti che ostacolano la codifica CSS in generale. In particolare, quando lo styling un menu in CSS per Internet Explorer 6, non è possibile utilizzare la "hover" pseudo-classe di innescare uno stato hover per qualcosa di diverso collegamenti attuali. Questa limitazione del browser crea problemi quando i menu richiedono uno stato hover per un intero elemento della lista.

Compatibilità con il passato per i CSS

Al fine di affrontare il problema della compatibilità all'indietro quando i browser non supportano le proprietà CSS3, si può considerare una delle due opzioni. Il primo è chiamato anche "graceful degradation" e "progressive enhancement". Questi due termini sia significa che invece di creare siti web sembrano identici in tutti i browser, si dovrebbe concentrarsi solo su come mantenere il sito web utilizzabile in tutti i browser. In molte situazioni, sarà ancora bisogno per creare siti web che sembrano identici in tutti i browser. In tal caso, avvolgere i commenti condizionali intorno file CSS di Internet Explorer-specifici e creare non CSS3 per i menu. Sarà inoltre necessario per creare grafica appropriate per ricreare effetti CSS3.

JavaScript per i menu

Una volta che si codifica un menu in HTML e stile in CSS, è possibile manipolare ulteriormente con JavaScript. Ad esempio, molti script "plugin", scritto in jQuery - un quadro JavaScript spesso usato per animare gli elementi delle pagine Web - esistono che aggiungere due effetti elegante e compatibilità all'indietro a discesa o menu in stile "Suckerfish". Il fatto che gli utenti possono disattivare JavaScript nel proprio browser può presentare una sfida dal momento che la maggior parte degli sviluppatori vogliono mantenere navigazione del sito utilizzabile per ogni utente.

Hybrid CSS e JavaScript menu

Durante la creazione di menu per i Web, si dovrebbe sempre creare l'elenco dei collegamenti utilizzando una lista non ordinata in HTML, lo stile di menu per quanto è possibile in CSS e quindi utilizzare JavaScript solo se è assolutamente necessario per un'animazione o la compatibilità con Internet Explorer 6. non è necessario JavaScript per creare menu a discesa. Le cosiddette soluzioni a discesa "puro CSS" esistono che il lavoro nella maggior parte dei browser.

Come trattare con opacità CSS in Internet Explorer (IE)

May 26

È possibile utilizzare i fogli di stile (CSS) per impostare l'opacità di un'immagine o di una sezione di una pagina Web. Il browser Web Internet Explorer non riconosce la sintassi standard CSS per l'opacità. È necessario utilizzare una sintassi speciale per IE, se si desidera che l'immagine o la sezione di guardare trasparente. È possibile utilizzare la sintassi IE da solo, se desideri solo la trasparenza sia visibile in Internet Explorer. È inoltre possibile utilizzare la sintassi IE con la sintassi standard CSS per rendere la pagina identica su tutti i browser.

istruzione

1 Aprire il documento HTML che si desidera modificare in qualsiasi editor di testo.

2 Individuare l'immagine o la sezione per la quale si desidera impostare l'opacità.

3 Tipo "style =" Filtro:.. Alpha (opacità = 30) "tra i" < "e"> "caratteri per l'elemento Utilizzare qualsiasi numero compreso tra 0 e 100. Un valore basso rende l'immagine più trasparente, ad esempio, per rendere un'immagine trasparente, tipo:

<Img width = "150" height = "113" alt = "La mia immagine trasparente"

style = "Filtro: alpha (opacità = 40)" />

Per fare una sezione trasparente, tipo:

<Div style = "Filtro: alpha (opacità = 40)>

Contenuto della sezione

</ Div>

4 Salvare e chiudere il documento HTML.

5 Aprire il file HTML in Internet Explorer per visualizzare le modifiche.