CAPITOLO 16 Creazione di pagine Web interattive Nel capitolo precedente, abbiamo studiato la libreria Ext Core. Dall'abbondanza di oggetti, proprietà, metodi ed eventi, la testa gira... Come applicare in pratica tutta questa ricchezza?Questo capitolo sarà interamente dedicato a questo. Impareremo

Crea sequenze di pagine: Che cos'è una sequenza di pagine? Si tratta di una serie di pagine con le stesse caratteristiche (ad esempio un capitolo di un libro), che, volendo, possono essere formattate allo stesso modo. Pagine nel documento risultante in

Crea numeri di pagina: Oggetto di formattazione integrato crea un'area in linea che mostra il numero di pagina corrente. Per esempio: Stai leggendo la pagina .Con elemento si può applicare quanto segue

Creazione, apertura e salvataggio di pagine Web Utilizzando il programma è possibile creare nuove pagine Web, nonché modificare quelle create in precedenza Per creare una nuova pagina Web, è necessario eseguire il comando del menu principale File?

Capitolo 1 Mondo moderno. L'era della tecnologia dell'informazione Uno dei paradossi dello sviluppo dell'umanità è che durante tutto il suo sviluppo, una persona ha utilizzato, accumulato, trasmesso informazioni senza capirle o nemmeno pensarci.La vera civiltà

Capitolo 6 Creazione di pagine di accesso ai dati Una pagina di accesso ai dati è un tipo speciale di file progettato per essere visualizzato e manipolato su Internet o Intranet con i dati archiviati nei database di Microsoft Access o Microsoft SQL Server. Una pagina di accesso ai dati viene caricata in un database di Access 2002

Il manuale può essere utilizzato per l'apprendimento stazionario ea distanza nello studio delle seguenti discipline: Programmazione in un linguaggio di alto livello. Interazione uomo-macchina. Programmazione orientata agli oggetti.
Il focus del manuale è sul linguaggio di programmazione HTML, la tecnologia CSS, il linguaggio di programmazione JavaScript, l'editor grafico Adobe Photoshop e la tecnologia multimediale.
Il manuale di formazione è accompagnato da un libro di testo elettronico su CD, che contiene materiale teorico, esempi di attuazione di vari compiti (sito di formazione) e una parte pratica (compiti, domande di controllo e linee guida per l'esecuzione del lavoro di laboratorio). Inoltre, sul disco è presente un programma di test, con l'aiuto del quale l'insegnante può valutare in modo rapido e oggettivo il grado di assimilazione del materiale.
Una caratteristica curiosa del libro di testo elettronico è che ogni sezione è accompagnata da una musica strumentale calma che crea un buon umore.
Questo libro di testo è destinato agli studenti della specialità 220400 (230105) - Software per tecnologie informatiche e sistemi automatizzati. La presenza di un libro di testo elettronico consente agli insegnanti di risolvere semplicemente il problema della replica delle linee guida.
Il libro è insostituibile per tutti i principianti per studiare Web-design.

1. Reti informatiche globali.

Le reti globali (oltre a quelle locali) sono costituite da computer collegati da canali di comunicazione. Le reti globali (WAN) in tutto il mondo sono interconnesse tramite Internet.
Per poter operare sull'acqua sanitaria, l'utente deve disporre di hardware e software adeguati. Nel caso più semplice, è necessario installare un modem aggiuntivo dall'hardware, con l'aiuto del quale la comunicazione viene effettuata tramite una linea telefonica (ad esempio da un appartamento). Si noti che i computer moderni sono dotati di schede di rete e, quando sono collegati a una rete su un canale dedicato, non è necessario hardware aggiuntivo.
Il software è diviso in due classi:
programmi server situati sul nodo di rete che serve il computer dell'utente;
programmi client che si trovano sul computer dell'utente e utilizzano i servizi del server.
Le reti globali forniscono agli utenti una varietà di servizi. Le WAN consentono di lavorare con database distribuiti, scambiare lettere via e-mail, messaggi tramite teleconferenza, chattare in tempo reale, inviare file, ecc. Ogni servizio (a volte si dice: servizio, servizio) funziona secondo determinate regole (protocolli).

introduzione
1. Reti informatiche globali
2. Modi per connettersi a Internet
3. Cambio di canali, messaggi e pacchetti
4. Protocolli, servizi, servizi
5. Browser
6. Motori di ricerca e directory
7. Concetti di base del web design
8. Struttura della pagina web
9. Tecnologie per il web design
10. Linguaggio HTML
10.1. Formattazione del testo
10.2. tavoli
10.3. Arti grafiche
10.4. Collegamenti ipertestuali
10.5. Meta tags
10.6. Schede di collegamento
10.7. Multimedia
10.8. Cornici
10.9. Fogli di stile CSS a cascata
11. Linguaggio JavaScript
11.1. Ordine di esecuzione dello script
11.2. Metodi di input
11.2.1. Immissione di informazioni utilizzando il metodo con-firm()
11.2.2. Immissione di informazioni utilizzando il metodo promt()
11.2.3. Immissione di informazioni utilizzando una casella di testo
11.2.4. Immissione e visualizzazione delle informazioni utilizzando l'area di testo tcxtarca
11.2.5. forme interattive
11.3. Metodi di output delle informazioni
11.3.1. Visualizzazione delle informazioni utilizzando il metodo alert()
11.3.2. Emissione di informazioni utilizzando il metodo write()
11.3.3. Visualizzazione delle informazioni utilizzando un campo di testo
11.3.4 Visualizzazione delle informazioni utilizzando le finestre create
11.4. Sviluppi
11.5. Operazioni aritmetiche
11.6. Operazioni booleane e di turni
11.7. Operazioni con variabili stringa
11.7.1. Conversione di numeri da un sistema numerico a un altro.
11.8. Funzioni e costanti matematiche
11.9. cicli regolari
11.10 Dichiarazioni di trasferimento condizionale if-else(cond) e switch(x)
11.11 Esempi di script
11.11.1 Animazione nella barra del titolo del browser
11.11.2 Pulsante luminoso
11.11.3 Implementazione di cicli di iterazione
Appendice 1: Elenco dei laboratori e incarichi su disco ottico
Appendice 2: Come eseguire il programma di test
Allegato 3: Sito "Samara this - Russia stessa"
Conclusione
Bibliografia

Scarica gratuitamente l'e-book in un formato conveniente, guarda e leggi:
Scarica il libro Introduzione al Web Design, tutorial, Alekseev A.P., 2008 - fileskachat.com, download veloce e gratuito.

Introduzione al web design

• Che cos'è il web design?
• Perché è necessario?
• Strumenti necessari
• I "postulati" di base del web design

• Tecnologie di progettazione web
• Struttura logica e fisica del sito
• Pagina principale
• Layout del sito dinamico e statico
• Impaginazione statica
• Impaginazione dinamica

• Elementi della pagina web
• Da dove cominciare?

Che cos'è il web design?

Qualsiasi risorsa pubblicata sul World Wide Web, da un portale di informazioni globale con decine di migliaia di visitatori al giorno a una modesta home page dove solo due persone la visitano al mese, compreso il suo autore, è principalmente un'opera d'arte, un complesso insieme di soluzioni ingegneristiche e progettuali. Il processo di creazione di un tale lavoro è chiamato web-design.

Il web design è creatività e la creatività è pronunciata. È nel campo del web design che puoi mostrare appieno tutte le tue capacità, perché qui tu e i visitatori della tua pagina siete il censore dei risultati del vostro lavoro. Nessuno ti limita né nel volume, né nel contenuto, né nel layout della risorsa che stai sviluppando, nessuno ti spinge in una struttura rigida. Crea, e prima o poi il progetto che hai creato troverà il meritato riconoscimento del pubblico multimilionario di utenti Internet.

Pagina iniziale della sezione;la mia famiglia

Storia di mia moglie

Storia di mio figlio

La mia foto sulla spiaggia di Sochi

Da tutto ciò che è stato detto, diventa ovvio che la struttura fisica del sito è nascosta ai visitatori della tua risorsa: possono solo osservare la struttura logica, ed esattamente come viene presentata con l'aiuto degli elementi di navigazione. Ne deriva una conclusione del tutto logica: la struttura del sistema di navigazione dovrebbe, se non completamente ripetuta, almeno corrispondere il più possibile alla struttura logica del sito da te sviluppata.

Pagina principale

Uno dei criteri con cui i diversi siti web possono essere suddivisi in due categorie principali è la presenza o assenza di una pagina principale (splash).

La pagina del titolo è un documento html che non include alcun contenuto o elemento di navigazione. Il nome del file della pagina principale è index.html, mentre la pagina iniziale ha un nome diverso e viene richiamata organizzando un collegamento ipertestuale dalla pagina principale, che viene caricato per primo all'accesso al sito. La pagina principale contiene, di norma, il logo dell'azienda proprietaria di questa risorsa, un contatore di visite e un suggerimento per scegliere la codifica cirillica, oppure una scelta tra la versione inglese e russa del sito. Un esempio di risorsa web dotata di tale pagina è mostrato in Fig. 3.2.

Quando si accede a siti che non sono dotati di pagina principale, viene visualizzato per primo il documento di avvio, comprensivo di eventuali contenuti, elementi di navigazione e talvolta annunci delle intestazioni tematiche che compongono questa risorsa. Sulla fig. La Figura 3.3 mostra un esempio di un sito senza una home page.

Se utilizzare o meno la home page quando si crea il proprio progetto su Internet è una questione di gusti per ogni webmaster. È difficile dare consigli esaurienti su questo argomento, poiché la decisione finale dipende principalmente dalle tue preferenze artistiche e talvolta dal desiderio del cliente che paga per il tuo lavoro.

Layout del sito dinamico e statico

Le moderne schede video supportano diverse modalità video impostate arbitrariamente, caratterizzate dalla risoluzione dello schermo e dal numero di colori utilizzati durante la visualizzazione delle informazioni sullo schermo di un computer. Utilizzando le funzioni integrate del sistema operativo, l'utente può impostare diversi valori di risoluzione dello schermo standard, come 640x480, 800x600, 1024x768, 1152x864, 1280x1024 o 1600x1200 pixel. Naturalmente, quando si apre una pagina Web nello stesso browser, potrebbe non essere visualizzata allo stesso modo a seconda della risoluzione dello schermo utilizzata dal visitatore del sito.

Per evitare che gli elementi del documento html si muovano l'uno rispetto all'altro e, di conseguenza, la deformazione della pagina web nel suo insieme quando si cambiano i parametri dello schermo, viene utilizzata una tecnica abbastanza semplice ed efficace: tutti i componenti del pagine web sono racchiuse nelle celle corrispondenti di una tabella invisibile, a ciascuna dell'oggetto viene assegnata una posizione rigorosamente definita. Appare così un secondo criterio, secondo il quale tutti i siti web esistenti possono essere suddivisi in due categorie condizionali. A questa tabella può essere assegnata una larghezza in pixel rigorosamente definita, ad esempio 640 pixel, quindi posizionarla rigidamente al centro dello schermo o premerla sul bordo sinistro. Questo layout del sito può essere definito statico, perché la larghezza della tabella non cambia a seconda della risoluzione dello schermo. Ovviamente, quando modifichi le impostazioni dello schermo, non c'è il minimo cambiamento negli elementi di design della pagina.

Un altro approccio è quando la larghezza di una tabella invisibile contenente frammenti di una pagina Web viene impostata come percentuale della larghezza dello schermo corrente. Quando la risoluzione dello schermo viene aumentata, la tabella viene allungata orizzontalmente e tutti gli elementi posizionati nelle sue celle, posizionati al centro o lungo i bordi delle colonne, vengono spostati secondo l'algoritmo stabilito. A causa del fatto che i parametri della tabella cambiano a seconda delle impostazioni dello schermo, questo principio di layout del documento html può essere chiamato dinamico. Entrambi gli approcci presentano vantaggi e svantaggi, che sono elencati di seguito.

Impaginazione statica

Vantaggi. La semplicità dell'algoritmo di layout del documento. Ottimizzando la pagina in modo che venga visualizzata con una risoluzione dello schermo di 640x480 pixel, puoi essere sicuro che quando modifichi le impostazioni dello schermo dell'utente, gli elementi di design non oscilleranno. Inoltre, questa versione del layout del sito nella maggior parte dei casi (soggetto a una serie di condizioni aggiuntive) consente di ottenere una visualizzazione identica del documento html nei browser Microsoft Internet Explorer e Netscape Navigator.

Screpolatura. Quando un documento viene visualizzato su un computer con una risoluzione dello schermo elevata, è presente uno spazio vuoto notevole attorno ai bordi dello schermo o sul lato destro dello schermo.

Impaginazione dinamica

Vantaggi. Il documento viene allungato per l'intera larghezza dello schermo, senza lasciare margini vuoti inutilizzati.

Screpolatura. Molto spesso si manifesta la complessità del layout e del debug della pagina, l'inadeguatezza della visualizzazione di tali documenti nei browser Microsoft Internet Explorer e Netscape Navigator.

NOTA I valori dei pixel (punto) utilizzati nei comandi HTML si riferiscono alle dimensioni fisiche del punto sullo schermo dell'utente e dipendono dal tipo di monitor dell'utente.

Esempi di realizzazione di siti con impaginazione statica e dinamica sono riportati in fig. 3.4 e 3.5. Queste immagini vengono acquisite con una risoluzione dello schermo fissa di 800x600 pixel.

Elementi della pagina web

Ogni pagina web contiene un certo insieme di elementi standard che sono componenti obbligatori di ogni risorsa Internet. Naturalmente, la gamma e il numero di tali oggetti possono variare a seconda del focus tematico del sito, del volume dei materiali pubblicati su di esso, nonché degli obiettivi e degli obiettivi che il creatore di questa risorsa si prefigge. Il layout di tali elementi, la progettazione della loro posizione relativa è uno dei compiti principali del webmaster.

Il primo elemento di una pagina web che dobbiamo considerare è il suo titolo. Può essere realizzato sia in versione testuale che grafica, tuttavia, in entrambi i casi, dovrebbe trovarsi nella parte superiore del documento. A volte l'intestazione è combinata con un menu di selezione della codifica cirillica e pulsanti per passare dalla versione in lingua russa a quella in lingua inglese del sito, se questa risorsa Web è presentata in due lingue. Di norma, lo spazio assegnato per l'inserimento di un banner pubblicitario si trova direttamente nel sottotitolo del documento. L'inserimento di un banner nella parte superiore della pagina web nella maggior parte dei casi è un prerequisito per la registrazione del sito ai servizi di scambio banner - sistemi che pubblicizzano la risorsa che hai creato in cambio della visualizzazione di annunci di altri membri del network di scambio banner sul tuo pagine del sito. La dimensione standard dei banner pubblicati sotto il titolo di un documento è solitamente di 468x60 pixel. Se stai utilizzando un layout di pagina statico, la larghezza del titolo del tuo documento sarà di circa 640 pixel: questo valore è dovuto principalmente alla necessità di garantire che il documento venga visualizzato correttamente su monitor con una risoluzione dello schermo di 640x480 pixel e di evitare barre di scorrimento orizzontali che è difficile da visualizzare. Ovviamente la larghezza del banner in questo caso sarà molto inferiore alla larghezza dell'intestazione, così che nella parte della pagina in cui si prevede di destinare spazio alla pubblicità si formi uno spazio inutilizzato che può essere riempito con il logo della società proprietaria di questo sito o un collegamento al server che implementa il sito web hosting. Certo, il logo non è sempre necessario: di norma viene inserito nella pagina web solo se il sito ha un focus commerciale.

La parte principale del documento è occupata dal cosiddetto campo di testo, l'area in cui è posizionato il contenuto semantico della pagina: testo informativo e illustrazioni significativi. Gli elementi elencati sono anche chiamati contenuto (dall'inglese, contenuto - contenuto). La posizione del campo di testo dipende principalmente da come il web designer posizionerà il resto degli elementi del documento.

Il successivo componente obbligatorio di una pagina web sono gli elementi di navigazione - collegamenti ipertestuali che collegano questo documento con altre sezioni del sito. Gli elementi di navigazione possono essere sotto forma di stringhe di testo, oggetti grafici, ad es. pulsanti, o componenti attivi, come applet Java. Questi ultimi sono gli stessi pulsanti che, a differenza delle loro sorelle tradizionali, sono in grado di rispondere ai movimenti del mouse, compiendo alcune semplici azioni passandoci sopra (accendere la retroilluminazione, creare un effetto clic, cambiare la forma, ecc.). Come ho già accennato nella sezione "Postulati" di base del web design, gli elementi di navigazione dovrebbero essere posizionati in modo tale che siano sempre in vista, a portata di mano, cioè in modo che l'utente non debba riavvolgere la pagina all'indietro se il campo di testo occupa diverse schermate fisiche, quindi cerca a lungo i collegamenti ad altre sezioni. L'approccio più consolidato consiste nel posizionare gli elementi di navigazione sul bordo sinistro della pagina.

Nella parte inferiore del documento, è consuetudine pubblicare informazioni sugli sviluppatori del sito e un indirizzo e-mail tramite il quale i visitatori della risorsa possono inviare feedback, suggerimenti e desideri ai proprietari della pagina. Se la pagina Web è un documento iniziale, in fondo alla pagina Web viene posizionato anche un contatore delle visite: un piccolo script che richiama uno script CGI installato sul server, che cattura ogni volta che il documento viene aperto nel browser dell'utente, modificando il valore dell'indicatore del contatore. Grazie a ciò, il webmaster può facilmente determinare il numero di visitatori che hanno visitato la sua pagina in qualsiasi momento. Prendo atto che il contatore delle visite è impostato solo sulla prima pagina chiamata quando si accede al sito, è assente in altri documenti di risorsa. Inoltre, non è consigliabile posizionare più contatori diversi su una pagina.

Quindi, abbiamo analizzato tutti i componenti principali di una pagina web e la loro possibile posizione l'uno rispetto all'altro.

In pratica ci sono spesso dei siti web nella cui progettazione gli elementi di navigazione sono posizionati lungo il bordo destro dello schermo. In questo caso, il campo di testo viene spostato a sinistra, il resto dei componenti del documento è disposto in base al principio della massima estetica della loro combinazione.

Come si vede dalla figura, il logo in questo caso è posto allo stesso livello del titolo del documento, e il banner pubblicitario è posizionato rispetto al centro della pagina. Con questo approccio, si consiglia di mantenere il design grafico del titolo, del logo e del campo pubblicitario in un unico colore e stile artistico - quindi l'asimmetria della posizione di questi oggetti non sarà così evidente e non danneggerà gli occhi dei sostenitori di un design estetico rigoroso e tabulare.

Gli elementi di navigazione possono essere posizionati non solo vicino ai bordi destro e sinistro della pagina, ma anche nella parte superiore del documento. Questa opzione di layout è più adatta, secondo me, durante la creazione di home page: in questo caso, tutti gli oggetti della pagina si adattano armoniosamente alla larghezza specificata della tabella invisibile, mentre la preparazione della tabella stessa è notevolmente semplificata. L'unico inconveniente di questo approccio è la necessità di duplicare gli elementi di navigazione nella parte inferiore del documento, perché scorrendo verticalmente la pagina scompaiono oltre la parte superiore dello schermo e per raggiungerli l'utente dovrà riavvolgere lo schermo, che, vedete, è molto scomodo.

Naturalmente, tutto ciò che è stato detto in questa sezione non è una panacea, ma una guida all'azione. Sto solo cercando di delineare i principi generali che si applicano quando si definisce la struttura di un sito, ma la decisione finale è sempre lasciata al webmaster. In definitiva, indipendentemente dal design che utilizzi come base del tuo progetto futuro, il risultato del tuo lavoro sarà comunque corretto: non c'è né censura su Internet, né alcun regolamento che costringa il creatore del sito in uno o nell'altro quadro rigido. Un esempio di soluzione progettuale che non rientra in nessuna delle categorie di cui sopra è il cosiddetto layout misto.

Come si può vedere dalla figura, in questo esempio parte dei controlli è incorporata direttamente nell'intestazione della pagina: si tratta di pulsanti per passare dalla versione russa a quella inglese del sito, nonché di pulsanti di navigazione: questo può essere un collegamento all'indirizzo e-mail dei creatori della risorsa, duplicato in fondo al documento, e un collegamento a una delle sezioni tematiche, ad esempio una pagina di notizie. Il blocco principale degli elementi di navigazione è posizionato rispetto al bordo sinistro del documento, tuttavia, il menu di selezione della codifica cirillica si trova direttamente sotto il banner pubblicitario nella parte superiore della pagina. Il campo di testo è diviso in due colonne non simmetriche, e quella di destra contiene brevi annunci delle intestazioni tematiche che compongono la risorsa, compresi i link a queste sezioni.

Ovviamente, ci può essere una grande varietà di opzioni di layout miste per una pagina web: le soluzioni specifiche dipendono dal numero di sezioni che compongono la risorsa, dalla quantità di testo preparato per il posizionamento sul sito e, infine, dall'immaginazione di lo stesso progettista. È importante solo che l'aspetto del sito non causi lamentele da parte dei visitatori. Alla fine, solo tu come sviluppatore, tu e nessun altro, hai il diritto di usare tutte le tue capacità e talenti e comporre la pagina a tuo piacimento. I creatori di alcune home page, senza esitazione, posizionano un contatore delle visite nell'angolo in alto a destra del documento, scrivono il nome del sito in caratteri piccoli e piccoli e lo pubblicano sotto un banner pubblicitario, e per qualche motivo gli elementi di navigazione si trovano inaspettatamente a destra al centro del blocco di testo, tra il racconto di se stessi e le foto del cane preferito dell'autore del progetto. Per gusto e colore, come si suol dire, non ci sono compagni. Ma personalmente, questa malattia mi sembra incurabile.

Da dove cominciare?

È tempo di passare agli aspetti pratici del web design. E la domanda più urgente che di solito si pone quando si crea il primo progetto indipendente è posta nel titolo di questa sezione. Allora da dove cominciare? Certo, dall'inizio.

La prima cosa da fare prima di iniziare a sviluppare qualsiasi sito Web è prepararsi una tazza di caffè o tè aromatico forte, sedersi a tavola e riflettere attentamente. Non sto scherzando. Dovresti pensare agli obiettivi che ti sei prefissato quando crei un nuovo progetto. I metodi per raggiungerli, compreso il design stesso, dipenderanno dalla scelta degli obiettivi. Il successo dell'intera impresa dipenderà dalla corretta impostazione delle attività. Vuoi una home page? Meraviglioso. Prendi una penna, un foglio di carta e scopri quali sezioni tematiche dovrebbe includere la tua futura creazione, cosa esattamente vorresti raccontare al pubblico progressista con esso. Hai deciso di creare un sito di informazione non commerciale? Meraviglioso. Decidi di cosa si tratterà. Se si tratta di un progetto di intrattenimento, dopo aver creato un elenco di titoli rilevanti (ad esempio aneddoti, cartoni animati o storie umoristiche), è necessario scegliere una soluzione progettuale adatta, più o meno corrispondente al contenuto. È probabile che i visitatori siano un po' sconcertati da un progetto di intrattenimento realizzato nello stile di un serio portale di informazioni o notizie. Forse vuoi pubblicare una risorsa dedicata alla produzione di vini fatti in casa? Fai un giro in Internet, guarda cosa hanno già creato i tuoi colleghi, quali sezioni si trovano su siti simili, valuta quali informazioni mancano e qual è, al contrario, una sovrabbondanza, come queste informazioni vengono presentate al consumatore, se è noioso leggerlo o, al contrario, interessante e affascinante.

Hai bisogno di sviluppare un sito web commerciale? In questo caso, sia l'elenco delle sezioni tematiche che la decisione finale in merito alle tecniche di progettazione utilizzate, come l'uso di colori aziendali, caratteri speciali o pulsanti stilizzati secondo il concetto generale del progetto, sarà molto probabilmente presa dal cliente del sito web. Tuttavia, in ogni caso, dovrai fornirgli diverse opzioni di prova, i cosiddetti progetti di design, che mostrano le possibili implementazioni della risorsa futura. Fare riferimento ai siti delle organizzazioni concorrenti, nazionali ed estere, vedere quali intestazioni compongono il loro sito Web, quali dati vengono offerti in ciascuna sezione tematica.

Dopo aver deciso il numero, i nomi e il contenuto di tutte le sezioni del tuo progetto, puoi procedere alla fase successiva della creazione di un sito, progettandone la struttura logica e fisica. Va ricordato che l'elenco delle intestazioni, il numero di materiali in esse presentati e il contenuto dei documenti stessi saranno molto probabilmente modificati e integrati molte volte. Alcune sezioni verranno cancellate nel tempo in quanto non necessarie, altre - al contrario, aggiunte, alcune pagine web che riterrete irrilevanti e alcuni documenti, al contrario, dovranno essere rielaborati. Le strutture logiche e fisiche del tuo progetto dovrebbero soddisfare questi requisiti di portabilità e non dovresti avere il minimo problema a organizzare o riorganizzare i collegamenti ipertestuali all'interno di un progetto se uno qualsiasi dei suoi documenti costitutivi cessa improvvisamente di esistere. Inoltre, non dovrebbe essere necessario riprogettare tutte le pagine Web quando si aggiunge una nuova categoria al progetto solo perché i collegamenti ipertestuali esistenti non consentono tali modifiche e non c'è nessun posto dove premere il nuovo pulsante di navigazione. Pensa in dettaglio a tutti i collegamenti ipertestuali tra le pagine delle risorse, sviluppa la struttura delle directory e delle sottodirectory in cui collocherai i documenti. Solo allora possiamo rivolgerci direttamente ai problemi di progettazione.

Stima e abbozza il layout delle tue future pagine web. Matita. Sulla carta. Tieni presente che se la struttura logica del tuo sito prevede la presenza di pagine iniziali di sezione, o, come vengono anche chiamate, file di indice, il design di queste pagine, così come il documento di inizio del sito stesso, molto probabilmente differiranno in qualche modo dal design delle pagine informative che compongono la rubrica. I file di indice di solito contengono collegamenti ai documenti che compongono questa rubrica, a volte brevi annunci di questi documenti. Il contenuto principale delle stesse pagine informative è il testo informativo e, se necessario, le illustrazioni.

Dopo aver immaginato il layout complessivo delle pagine web, si consideri la struttura di una tabella invisibile, nella quale verranno poi inseriti i loro componenti. Quando si progetta una tabella, è necessario tenere conto del fatto che tra le sue colonne contenenti vari elementi del documento, è preferibile lasciare colonne vuote con una larghezza di uno o due pixel. Questo viene fatto per evitare l'effetto di colonne che si attaccano l'una all'altra, che si osserva quando non c'è un rientro orizzontale tra gli elementi di una pagina web, che rovina notevolmente l'aspetto del documento.

La creazione di una tabella di layout è forse una delle procedure più complesse durante lo sviluppo di un nuovo progetto. È quasi impossibile disegnare correttamente un tavolo al primo tentativo. L'abilità, grazie alla quale il webmaster disegna ad occhio in pochi secondi tutte le righe e le colonne necessarie, arriva solo con l'esperienza. Qui è difficile dare consigli specifici per aiutare un designer alle prime armi. C'è solo un modo per imparare a progettare rapidamente una tabella di layout per un nuovo sito: caricare diverse pagine Web create da altri autori in FrontPage Express, vedere quali tabelle utilizzano per visualizzare questi documenti, studiarli attentamente e quindi provare a creare un paio di tuoi. .

Per costruire tabelle complesse, puoi usare l'annidamento di una tabella nell'altra: ad esempio, una tabella primaria con una larghezza di 640 pixel imposta un'interruzione di pagina orizzontale, ciascuna delle sue celle è nidificata con un'altra tabella invisibile di larghezza uguale ad essa, fornendo un rottura verticale. Questo approccio consente di suddividere diverse sezioni della pagina Web indipendentemente l'una dall'altra, creando, ad esempio, quattro colonne verticali di larghezza diversa in uno dei suoi campi e due nell'altro, operando con parametri diversi di tabelle nidificate all'interno lo stesso documento: la dimensione dello spazio tra le colonne, lo spessore dei bordi, ecc.

Dopo che gli elementi principali del documento sono stati organizzati e la tabella invisibile è stata contrassegnata, dovresti avere uno schizzo approssimativo del sito futuro. Ora è il momento di preparare il contenuto.

Innanzitutto, ti consiglio di digitare tutti i testi necessari in qualsiasi editor ed è meglio salvarli in formato testo normale, ovvero in un file con estensione .txt. Quindi devi disegnare gli elementi grafici necessari in un editor vettoriale (ad esempio in Corel-Draw), esportarli in un formato raster, elaborarli in un editor di grafica raster (nel nostro caso, stiamo parlando di Adobe Photoshop), dando alle immagini la dimensione e la risoluzione richieste, e poi come la necessità di ottimizzarle con compressori speciali o altri mezzi simili. Una storia dettagliata sulla preparazione delle immagini grafiche verrà fornita nella quinta lezione, ma per ora stiamo parlando solo della sequenza di azioni.

Solo dopo tutte le procedure sopra descritte, si può procedere direttamente all'assemblaggio della pagina: creando il suo layout in un editor HTML, scrivendo e mettendo a punto il codice.

Poiché è probabile che il design di tutti i documenti che compongono il tuo futuro sito sia quasi identico, si consiglia di creare prima un cosiddetto modello. Un modello è un documento html contenente una tabella invisibile, un'intestazione, tutta la grafica, gli elementi di navigazione, in altre parole, quasi tutto tranne il contenuto effettivo. Se in seguito devi includere un nuovo documento nel progetto, ti basterà aprire il modello già pronto nell'editor html e importare in esso il testo e tutte le illustrazioni necessarie. Ti consiglio di sviluppare e salvare su disco due diversi template: per la pagina delle informazioni e per il file indice. Quando la pagina è pronta, dovrebbe essere verificata la visualizzazione identica in diversi browser con risoluzioni dello schermo e tavolozze di colori diverse. Carica il documento html che hai creato in Microsoft Internet Explorer, imposta la tavolozza dei colori dello schermo su 256 colori, quindi modifica successivamente la risoluzione dello schermo su 640x480, 800x600 e infine su 1024x768 pixel. Controlla se il layout della pagina cambia, se i suoi elementi si spostano l'uno rispetto all'altro. Segui la stessa procedura per Netscape Navigator. Se non noti cambiamenti significativi, puoi essere certo che altri documenti creati utilizzando lo stesso modello verranno visualizzati correttamente con una probabilità del 95%.

Di conseguenza, la sequenza di azioni per lo sviluppo di un sito Web si riduce al seguente semplice algoritmo:

• Fissare obiettivi e definire i compiti principali.
• Creazione di un elenco di future sezioni tematiche.
• Sviluppo della struttura logica e fisica della risorsa.
• Preparazione di uno schizzo progettuale, layout del sito, tabella layout invisibile.
• Preparazione del materiale testuale.
• Preparazione di materiali grafici in forma vettoriale.
• Esportazione di disegni vettoriali in formato raster, ottimizzazione delle immagini.
• Creazione di modelli di pagine web.
• Creazione di pagine Web e codice di debug.
• Verifica dell'identità della visualizzazione di pagine Web con diverse risoluzioni dello schermo e tavolozze di colori e in diversi browser.

M.: SOLON-PRESS, 2008. - 192 p. (Serie "Biblioteca per studenti")

Il manuale può essere utilizzato per l'apprendimento stazionario ea distanza nello studio delle seguenti discipline: Programmazione in un linguaggio di alto livello, Interazione uomo-macchina, Programmazione orientata agli oggetti.

Il focus del manuale è sul linguaggio di programmazione HTML, la tecnologia CSS, il linguaggio di programmazione JavaScript, l'editor grafico Adobe Photoshop e la tecnologia multimediale.

Il manuale di formazione è accompagnato da un libro di testo elettronico su CD, che contiene materiale teorico, esempi di attuazione di vari compiti (sito di formazione) e una parte pratica (compiti, domande di controllo e linee guida per l'esecuzione del lavoro di laboratorio). Inoltre, sul disco è presente un programma di test, con l'aiuto del quale l'insegnante può valutare in modo rapido e oggettivo il grado di assimilazione del materiale.
Una caratteristica curiosa del libro di testo elettronico è che ogni sezione è accompagnata da una musica strumentale calma che crea un buon umore.

Questo libro di testo è destinato agli studenti della specialità 220400 (230105) - Software per tecnologie informatiche e sistemi automatizzati. La presenza di un libro di testo elettronico consente agli insegnanti di risolvere semplicemente il problema della replica delle linee guida.
Il libro è insostituibile per tutti i principianti per studiare Web-design.

Formato: djvu

La dimensione: 5,7 MB

Scarica: yandex.disk

CONTENUTO
Introduzione 3
1. Reti informatiche globali 6
2. Modalità di connessione a Internet 11I
3. Cambiare canale, messaggi e pacchetti. 13
4. Protocolli, servizi, servizi 15
5. Browser 18
6. Motori di ricerca e directory. 24
7. Concetti di base del Web Design 31
8. Struttura della pagina web 37
9. Tecnologie di rete del Web-design 39
10. Linguaggio HTML 46
10.1. Formattazione del testo 51
10.2. Tabelle.. 55
10.3. Grafica 61
10.4. Collegamenti ipertestuali 67
10.5. Meta tag 71
10.6. Schede di collegamento 73
10.7. Multimediale 77
10.8. Cornici 81
10.9. Fogli di stile CSS CSS 85
11. Linguaggio JavaScript 91
11.1. Ordine di esecuzione dello script 95
11.2. Metodi di input 98
11.2.1. Immissione delle informazioni utilizzando il metodo cop-firmO 99
11.2.2. Immissione di informazioni utilizzando il metodo promt().. 101
11.2.3. Immissione di informazioni utilizzando una casella di testo 103
11.2.4. Immissione e visualizzazione delle informazioni mediante l'area di testo textarca 106
11.2.5. Moduli interattivi 108
11.3. Metodi di output delle informazioni 124
11.3.1. Visualizzazione delle informazioni utilizzando il metodo alert() 125
11.3.2. Emissione di informazioni utilizzando il metodo write() 126
11.3.3. Visualizzazione delle informazioni utilizzando un campo di testo 127
11.3.4 Visualizzazione delle informazioni utilizzando le finestre create 129
11.4. Eventi 132
11.5. Operazioni aritmetiche., 141
11.6. Operazioni logiche e di turno 143
11.7. Operazioni con variabili stringa. 147
11.7.1. Traduzione di numeri da un sistema numerico a un altro 150
11.8. Funzioni matematiche e costanti 152
11.9. Cicli regolari 158
11.10 Dichiarazioni di trasferimento condizionale if-else(cond) Hswitch(x) 160
11.11 Esempi di script 167
11.11.1 Animazione nella barra del titolo del browser 168
11.11.2 Pulsante luminoso 169
11.11.3 Implementazione di cicli di iterazione 171
Appendice 1: Elenco dei laboratori e incarichi su disco ottico 174
Appendice 2: Come avviare il programma di test 176
Allegato 3: Sito "Samara this - Russia stessa"
Conclusione 180
Riferimenti 181