Primer heu de crear una carpeta-mare
de tota la feina que fareu, al C: de
l'ordinador. Que tingui un nom fàcil d'identificar : "la
meva web", "Carolinaweb" , "futbolweb" ,
etc.
A
dins, HEU D'ANAR CREANT TANTES CARPETES COM
PÀGINES TINGUI LA VOSTRA WEB: CADA PÀGINA, UNA CARPETA.
Hem de ser organitzats, perquè s'omplirà
d'un munt de material de molts tipus, i hem de saber on trobar cada
cosa, si la volem modificar, eliminar... A dins de la carpeta-mare,
per exemple, podríeu
crear una carpeta de "deixalles" o "arxiu", per
a les coses que anireu gravant per Internet i no sabeu si utilitzareu
o no.
EL
FONS I LA LLETRA
Obriu el Dreamweaver . Aneu a Modificar-Propiedades
de la página:
Primer de tot, li donem títol (és el que sortirà
a la barra blau fosc de dalt del navegador), relacionat amb el tema
de la pàgina o, fins i tot , el mateix títol de la pàgina.
Millor si és una sola paraula i sense
accents.
Imagen de fondo: serveix per seleccionar una imatge de fons
de la pantalla, seleccionant-la d'un arxiu nostre, que
ha d'estar dins la carpeta de la web que estem fent ( si no, no es
veurà!). Si en seleccioneu una que no hi és, el mateix
programa us preguntarà si la hi voleu guardar. Heu de dir que
sí i fer-ho.
Consells: La
imatge de fons ha de ser clara, perquè no entorpeixi la lectura
del text. Si en trieu una de molt fosca, llavors el text ha de ser
blanc o molt clar. Si la imatge és més petita de 600
x 800 (mida més universal de pantalla) apareixerà reproduïda
molts cops, formant un mosaic. Si és més gran, la imatge
no es veurà completa. Com més gran sigui, més
trigarà a descarregar-se la vostra pàgina a Internet
quan algú hi vulgui entrar. Compensa? Ja sabeu que els internautes
som impacients:si una pàgina triga a descarregar-se, "passem"
d'ella.
Fondo: si cliqueu sobre el quadre de color, podeu seleccionar
un fons de pàgina de color llis. El color s'expressa amb una
combinació de 6 signes, lletres o números o ambdós.
D'això se'n diu un codi hexadecimal.
Texto:
també podeu seleccionar el color de la lletra. O esperar-vos,
i fer-ho des de la finestra PROPIETATS del text.
Vinculos: serveix per seleccionar el color de les paraules
que són ENLLAÇOS, abans de clicar a sobre.
Vinc. activos: per seleccionar el color de les paraules que
són ENLLAÇOS, quan es passa el cursor per sobre.
Vinc. visitados: per seleccionar el color de les paraules que
són ENLLAÇOS, després d'haver clicat a sobre.
Margen izquierdo i superior i Alto i Ancho del margen: serveix
per a establir distàncies de marges respecte a imatges o taules
i el final de la pantalla. Si voleu que tot quedi ben arran, S'HA
DE POSAR el número 0 a tots quatre llocs. Això va bé
quan es fan pàgines amb marcs.
La resta de coses, no interessen,
en principi.
|
A Internet es poden trobar
molts fons de pàgina ben bonics (background textures).
Aquí teniu algunes adreces on buscar-ne. La majoria estan
ordenats per colors. N'hi ha del tipus "rajola" (que
es repeteixen com a mosaic, en forma quadrada o rectangular),
"barres laterals" (o "borders" , que fan
un dibuix, repetit, a l'esquerra o a la dreta de la pantalla
i la resta sol ser llis) " horitzontals i verticals"
(solen fer un gradat de colors en horitzontal o vertical) .
Algunes adreces permeten
fins i tot veure com queden en la pàgina, abans de gravar-te'ls,
o bé canviar-los els colors,etc.
Graveu-los a partir del
botó dret del ratolí dins de la vostra carpeta-arxiu.
http://www.grsites.com/textures/
(moltíssims)
http://textures.forrest.cz
(realistes)
http://www.webpersonal.net/fym/fondos_web.htm
(senzills)
http://www.areas.net/colorvivo/fondos.htm
(moltíssims)
http://windyweb.com/cgibin/imageFolio.cgi?direct=Backgrounds&x=3&y=10
( per trobar-ne
més, useu un buscador, com ara el Google, i escriviu,
"fondos de páginas web" o "textures",
o "background")
|
Una
curiositat: ja sabeu que, sempre que voleu imprimir una
pàgina web, mai surt el color de fons o la imatge de fons,
impresa en el foli, i només surt el text i les imatges aïllades.
Si voleu IMPRIMIR LA IMATGE DEL FONS DE LA PÀGINA, cal
"dir-li-ho" als navegadors:
A
Explorer es fa a través de Herramientas/ Opciones Internet/Impresión/Imprimir
colores e imágenes de fondo.
A
Netscape es pot fer amb Fitxer/Configura la pàgina/Opcions
de la pàgina/ Imprimeix el fons.
Proveu ara de fer
una pàgina qualsevol, escrivint el que us sembli, o copiant-ho
d'un altre lloc, i jugueu a canviar coses de la lletra, a partir de
la finestra FLOTANT PROPIETATS (només mirant la línia
de dalt, teniu el formato, tipus de font, tamany, color de la lletra,
negreta, cursiva, alineada a l'esquerra, la dreta, o al centre)
(Una
altra curiositat: FIXEU-VOS
QUE NO EXISTEIX EL "SUBRATLLAT". Això és perquè
quan fem els enllaços, queden subratllats , i els navegants
d'Internet ja sabem que els textos subratllats són sempre enllaços)
Si no sabeu què
posar, per exemple, trieu : párrafo-verdana-2-000000-negreta-cursiva-centrat
i escriviu "PÀGINA DE PROVA"
Atenció:
quan feu la primera pàgina de la vostra web, SEMPRE, SEMPRE
SEMPRE li heu de dir index.html (sense accent)
perquè el navegador la reconegui com la primera. Ara no cal,
perquè esteu fent provatures, però quan us poseu a treballar
de debò, la primera pàgina, que és la que tothom
fa servir com una mena de presentació del tema i de guia de
navegació, que dirigeix cap a les altres pàgines, SEMPRE
S'HA DE DIR INDEX.HTM (HTM
I HTML són el mateix)
EL
LLENGUATGE HTML
Si heu seguit les
indicacions de text que us he donat més amunt, i cliqueu la
icona del codi, 
, de dalt
de la pàgina , veureu en quin "llenguatge" el Dreamweaver
ha transformat el que heu fet:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><b><i><font face="Verdana,
Arial, Helvetica, sans-serif" size="2" color="#000000">PÀGINA
DE PROVA</font></i></b></div>
</body>
</html>
Això són les "etiquetes"
que es fan servir, i totes tenen parella (una d'inici, entre <
>, i una altra de final, entre </ > ) . Ara només
assenyalarem les més importants:
<head>: encapçalament
de la pàgina (nom que li dóna títol, a la finestra
propiedades: nosaltres no n'hi hem donat, per això posa "Untitled
Document"). Acaba a </head>
<body> : cos del document,
on hi ha la lletra, el fons, les imatges, etc. Acaba a </body>
La resta són les indicacions
de lletra, color, alineació... Fixeu-vos que el programa, per
dir que la primera A de PÀGINA duu accent greu,
posa "&A".
Per això, cal evitar els accents als títols de les pàgines,
perquè poden sortir així en el navegador.
Saber el codi -o entendre'l- serveix
per a fer coses que veurem més endavant, com inserir applets
o javascripts. Si no es posen bé, al lloc on indica el programador,
no surten. I la frustració és total!
VISUALITZAR
LA PÀGINA EN UN NAVEGADOR
Si
cliqueu aquesta icona, 
,
a dalt, podreu visualitzar com està la pàgina en un
navegador (Explore o Nestcape, segons quin tingueu: si els voleu tots
dos, els heu de tenir -evidentment!- i ho haureu de configurar). També
es pot fer F12. Aniria bé tenir Internet en funcionament, però
no cal, perquè els navegadors permeten "trabajar sin
conexión".
Veureu
que, de vegades, la pàgina no es veu ben bé tal com
l'heu creat, o que en l'Explore es veu d'una manera diferent que en
el Nestcape. Això és inevitable. Si la comproveu en
els dos navegadors, podreu fer-hi els reajustaments necessaris,fins
que quedi del vostre gust.
EL
TEXT I LA TIPOGRAFIA
Abans
de continuar endavant, convé que llegiu uns quants consells
sobre l'ESTÈTICA de la web, que fan referència al text:
La
lletra de la nostra pàgina ha de ser llegible i no hi podem
escriure molt, perquè la gent es cansa de llegir: millor si
usem frases curtes i llistes amb números o vinyetes, per facilitar
la lectura.
Si
es vol posar més informació, es pot fer un text curt,
com de presentació, i un enllaç a sota que digui "Més
informació" i enllaci amb una altra pàgina on estigui
el text llarg. Així hi anirà qui realment estigui més
interessat.
El
text ha d'estar dividit en apartats, amb subtítols. Títols
i subtítols poden cridar l´atenció, si estan fets
amb un programa de dibuix o contenen gifs animats, per exemple. Mireu
quina diferència entre el de dalt, fet només amb el
Dreamweaver, i els altres dos, fets amb el Paint Shop Pro:
Els
paràgrafs també es poden alinear a la dreta, a l'esquerra
o al centre. Just a sota de les icones d'alineació , a la finestra
PROPIETATS, hi ha dues icones de sagnia, per centrar el text
o descentrar-lo. El Dreamweaver 4 no permet justificar per tots dos
cantons.
Sempre
que sigui possible, hem de posar dibuixos, fotos, gràfiques,
taules, vídeos... i si serveixen per estalviar text, millor.
No cal posar gifs animats que no tinguin relació amb el contingut,
només per decorar. El que és important, ha d'estar quiet.
Cal posar enllaços
a pàgines de la competència: és signe de "fairplay"
i professionalitat.
Sempre
que s'agafa text d'un altre lloc, sigui web, llibre, etc. cal citar
la font.
Haureu vist que el Dreamweaver
té poques "fonts" -tipus de lletres- . Això
és perquè són les més internacionals
i tothom les té als seus navegadors. Però podem
incorporar-hi noves fonts, traient-les d'Internet. Per exemple,
de:
http://recursosgratis.com/fuentesgratis/
http://www.algonuevo.com/fuentes.htm
http://www.fontreactor.com/en.php
En podeu buscar pel vostre compte, amb un cercador, i posant
"fuentes", "fonts" etc. Un cop triades,
fem download i les gravem al nostre disc dur.
Per incorporar-les al catàleg dels textos:
Inicio-Configuración-Tauler/ Panel de control-Fuentes
o Tipus de Lletra-Archivo-Instalar nueva fuente-(Seleccionar-la
d'allà on l'hem guardat i Acceptar)
Per entrar-les al Dreamweaver,
heu de fer el següent:
Aneu a la finestra PROPIETATS
i cliqueu la fletxa que hi ha al costat del nom
de la font. Surt la llista de les que teniu i a sota posa
"Editar lista de fuentes". Ho cliqueu i a
"Fuentes disponibles" seleccioneu la que
volgueu (han de sortir totes les que teniu a l'ordinador,
o al word, per exemple) . Feu fletxa cap a l'esquerra i queda
seleccionada i s'afegeix al final de la llista del Dreamweaver.
Si la voleu en un altre ordre, heu de clicar la fletxa cap
amunt. I si voleu entrar més fonts, heu de clicar el
+. I després, ACCEPTAR.
Cura!:
si agafem fonts molt estranyes, l'ordinador receptor de la
nostra web no les tindrà i això farà
aque les reconverteixi en una font pròpia, provocant
la desconfiguració general de la pàgina i que
determinades lletres quedin convertides en rodones, quadrats,
etc. El millor és
usar-les per fer els títols, amb un programa de dibuix,
que les guardarà com a imatges, i així serà
com les incorporarem a la pàgina (les lletres de les
imatges no es desconfiguren).
|
L'ORTOGRAFIA
No
hi ha res pitjor que una pàgina mal escrita, oi? I més
quan totes les pàgines tenen "autor", que surt el
seu e-mail, i les poden llegir de la Xina a Tombuctú.
Instal.lem-nos
el corrector ortogràfic de català al Dreamweaver:
|
Heu d'obtenir l'arxiu catalan.dat
que trobareu en format zip a l'adreça: http://www.macromedia.com/support/dreamweaver/documentation/dictionary.html,
Necessiteu tenir el programa
ZIP (compressió i descompressió de fitxers). Llavors
heu de
deszipar-lo, i guardar-lo a Archivos de Programa / Macromedia
/ Dreamweaver4 / Configuration / Dictionaries . Tot seguit
anem al Dreamweaver i cliquem Edición> Preferencias>General
i seleccionem el diccionari català.
|
De vegades, com
ja hem dit, convé fer llistes. Es poden fer a través
de la finestra PROPIETATS de text i les icones de les llistes
numerades i sense numerar, que estan sota de la negreta
i la cursiva.
- Si aneu al
menú superior, TEXTO>LISTA>PROPIEDADES, podreu
triar si voleu quadrets o rodones o números.
- Si
feu servir les icones de sagnia, podreu anar fent subdivisions cap
a la dreta:
- I per tornar
a la posició inicial, cap tornar a fer servir la sagnia de
retrocés.
EDITAR
"SITIO"
Fins
ara hem creat una pàgina de prova, però , per poder
començar a treballar seriosament, hem de crear les ordres perquè
el nostre ordinador reconegui que estem treballant en una web. Cliqueu
Sitio-Sitio nuevo i a Datos locales, doneu el nom de
la carpeta-web que ja teniu creada al C: i a Carpeta raíz
local seleccioneu la vostra carpeta-web. La resta ho deixeu tal
qual. A partir d'aquí, podeu posar una icona d'accés
directe a l'escriptori, si voleu , i treballar sempre des d'aquí,
perquè sigui més fàcil.
*********************
Uf! Com a primera lliçó
ha estat massa! I encara no teniu cap pàgina web, com aquell
qui diu. A veure si posem fil a l'agulla...Passa al tema següent!
