Pagina Web Parte 2
Hola esta es la segunda parte del tutorial WebSite desde 0
en imagen ready precionamos (k)y empesemos a hacer los cortes
cortamos el primer boton y le colocamso es nombre de boton_1
cortamos el segundo boton y le colocamso el nombre de boton_2
cortamos el tersero ycolocamos el nombre de boton_3
al terminar los corteste quedara algo asi
Lo guardamos como (Save optimized as)
Hasta Aqui es lo mas Facil.
Empezamos con algo un poco mas avanzado:
Recomendación Usar Dreamweaver.
lo primero que ahi que hacer es colocar el color de fondo similar o igual al color del fondo de nuestra web para eso
la siguiente linea
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
cambiamos el numero que viene dentro de las comillas del codigo bgcolor y colocamos el deseado
si no tienes dreamweaver y no te saves el numero del color que deseas puedes colocar el nombre del color en ingles
ejemplo
bgcolor="white" o bgcolor="#ffffff" que es lo mismo
para darse una idea pueden buscar en la web tablas con lo colores y sus respectivos numeros
ahora ay que identificar la linea
<table id="Table_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0">
al ultimo de esta linea agregaremso (align="center"
sin los parentesis tendremos algo asi
<table id="Table_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0" align="center">
ahora colocamos los links en los botones que creamos vamos a ver como
"boton 1"
busquemos la siguiente linea
<td colspan="2"><img src="images/boton_1.jpg" width="135" height="27" alt=""></td>
este link sera el que nos enlasa al principio de la pagina
el codigo a utilisar sera el siguiente
<td colspan="2"><a href="index.html"><img src="images/boton_1.jpg" width="135" height="27" border="0"></a></td>
"boton 2"
busquemos la siguiente linea
<td colspan="2"><img src="images/boton_2.jpg" width="135" height="25" alt=""></td>
este link nos manda a la pagina de la galeria de imagenes
este sera el codigo
<td colspan="2"><a href="galeria.html"><img src="images/boton_2.jpg" width="135" height="27" border="0"></a></td>
"boton 3"
busquemos la soguiente linea
<td><img src="images/boton_3.jpg" width="134" height="24" alt=""></td>
este link nos manda a la pagina de los tutoriales
<td><a href="tutoriales.html"><img src="images/boton_3.jpg" width="134" height="24" border="0"></a></td>
aa todas las de mas imagenes solo cambialas por fondo para que al momento de que cresca la tabla no se distocione, un ejemplo
<td colspan="5" rowspan="2"><img src="images/website-desede-0_24.jpg" width="144" height="286" alt=""></td>
si lo dejas como esta y escribes por encima de la imagen la imagen tiende a separarse y eso desfigura la tabla
para impedir eso solo es cuastion de colocarlo de esta manera
<td colspan="5" rowspan="2" width="144" height="286" background="images/website-desede-0_24.jpg"></td>
yo recomiendo que todas la imagenes esten de esta manera asi evitaras problemas con las tablas
y es es todo
Fuentes:
http://www.photoshop-designs.com/foro/viewtopic.php?t=9760
http://www.photoshop-designs.com/foro/viewtopic.php?t=9763
http://www.photoshop-designs.com/foro/viewtopic.php?t=9765