como hacer un texto en negrita con contentEditable

Foro de elhacker.net

Programación

Desarrollo Web (Moderador: #!drvy)

como hacer un texto en negrita con contentEditable

0 Usuarios y 1 Visitante están viendo este tema.

Páginas: [1]

Autor

Tema: como hacer un texto en negrita con contentEditable (Leído 4,339 veces)

tecasoft

Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com

como hacer un texto en negrita con contentEditable

« en: 22 Marzo 2013, 17:33 pm »

wenass ante todo gente del foro, necesito que al seleccionar un boton me ponga el texto en negrita, es decir que si selecciono:

Código:

<div id="negrita" contentEditable="true">
    Acá puedes escribir
</div>

pueda escribir y que luego aprete un boton y lo que yo quiera me lo cambie a negrita y otro para cursiva que proximamente lo pondre,etc, con esto que no esta terminado:

Código:

<script type="text/javascript" >
$('#negrita').css('font-weight','bold');
</script>

muchas gracias x saber la respuesta


« Última modificación: 22 Marzo 2013, 18:13 pm por tecasoft »	En línea

http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits

kalvinman

Desconectado

Mensajes: 25

Lorem ipsum dolor sit amet...

Re: como hacer un texto en negrita con contentEditable

« Respuesta #1 en: 22 Marzo 2013, 23:58 pm »

Si lo que estas buscando es un editor en pantalla deberias probar con algun editor WYSIWYG (What You See Is What You Get) como CKEditor, Tiny MCE, etc


	En línea

Recolector de contenidos Hackers, Gamers, Webmasters y mas...
Peliculas online Gratis

tecasoft

Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com

Re: como hacer un texto en negrita con contentEditable

« Respuesta #2 en: 24 Marzo 2013, 00:31 am »

me gustaria hacer 1 yo mismo nada de codigo de terceros, me podrias ayudar un poco, gracias


	En línea

dank_

Desconectado

Mensajes: 21

Re: como hacer un texto en negrita con contentEditable

« Respuesta #3 en: 24 Marzo 2013, 04:43 am »

Mira este tutoríal.

http://www.youtube.com/watch?v=SSAQK4Nwkm4

Obviamente puedes usar un div con contentEditable en lugar del iFrame como se ve en el vídeo. La vedad yo también tenía mucha curiosidad por saber como se hacen estas cosas y parece que resultó más sencillo de lo que imaginé.


	En línea

tecasoft

Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com

Re: como hacer un texto en negrita con contentEditable

« Respuesta #4 en: 24 Marzo 2013, 16:42 pm »

gracias un 10 ;-)

pero ahora viene un problemilla que tengo con publicar y vista previa, alguien que me sepa del tema y me pueda ayudar:

editor.php

Código:

<html>
<head>

<meta charset="utf-8">
	<title>Tecasoft.com | Editor</title>
<link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>

<link rel="shortcut icon" type="image/x-icon" href="http://www.tecasoft.com/imagenes/favicon.ico" />

<link rel="StyleSheet" type="text/css" href="css/estilos_clientes.css">

</head>
<body>

<div id="editor_contenido">

<a href="editor.php" title="Vas a la pagina principal del editor"><b>Inicio</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" class="boton_publicar" title="Publicar la web en la que estas" value="Publicar">&nbsp;&nbsp;&nbsp;
<input type="button" class="boton_vista_previa" title="Vista previa de la pagina web en la que estas" value="Vista previa">&nbsp;&nbsp;&nbsp;

<a id="negrita" href=""><img src="imagenes_clientes/button-bold.png" alt="Negrita" title="Negrita" class="negrita"></a>&nbsp;
<a id="cursiva" href=""><img src="imagenes_clientes/button-italic.png" alt="Cursiva" title="Cursiva" class="cursiva"></a>&nbsp;
<a id="tachado" href=""><img src="imagenes_clientes/button-strikethrough.png" alt="Tachado" title="Tachado" class="tachado"></a>&nbsp;
<a id="subrayar" href=""><img src="imagenes_clientes/button-underline.png" alt="Subrayar" title="Subrayar" class="subrayar"></a>&nbsp;

<img src="imagenes_clientes/calendar.gif" alt="Maquetacion" title="Maquetacion" class="maquetacion">&nbsp;

<a id="color" href=""><img src="imagenes_clientes/check-green.gif" alt="Color" title="Color" class="color"></a>&nbsp;

<a id="lista_con_vinetas" href=""><img src="imagenes_clientes/Text-List-Bullets-32.png" alt="Lista con viñetas" title="Lista con viñetas" width="20" height="20" class="lista_con_vinetas"></a>&nbsp;
<a id="lista_numerada" href=""><img src="imagenes_clientes/Text-List-Numbers-32.png" alt="Lista numerada" title="Lista numerada" width="20" height="20" class="lista_numerada"></a>&nbsp;

<a id="alinear_izquierda" href=""><img src="imagenes_clientes/Text-Align-Left-32.png" alt="Alinear a la izquierda" title="Alinear a la izquierda" width="20" height="20" class="alinear_izquierda"></a>&nbsp;
<a id="centrar" href=""><img src="imagenes_clientes/Text-Align-Center-32.png" alt="Centrar" title="Centrar" width="20" height="20" class="centrar"></a>&nbsp;
<a id="alinear_derecha" href=""><img src="imagenes_clientes/Text-Align-Right-32.png" alt="Alinear a la derecha" title="Alinear a la derecha" width="20" height="20" class="alinear_derecha"></a>&nbsp;

<a id="h1" href=""><img src="imagenes_clientes/Text-Heading-1-32.png" alt="H1" title="H1" width="20" height="20" class="h1"></a>&nbsp;
<a id="h2" href=""><img src="imagenes_clientes/Text-Heading-2-32.png" alt="H2" title="H2" width="20" height="20" class="h2"></a>&nbsp;
<a id="h3" href=""><img src="imagenes_clientes/Text-Heading-3-32.png" alt="H3" title="H3" width="20" height="20" class="h3"></a>&nbsp;
<a id="h4" href=""><img src="imagenes_clientes/Text-Heading-4-32.png" alt="H4" title="H4" width="20" height="20" class="h4"></a>&nbsp;
<a id="h5" href=""><img src="imagenes_clientes/Text-Heading-5-32.png" alt="H5" title="H5" width="20" height="20" class="h5"></a>&nbsp;
<a id="h6" href=""><img src="imagenes_clientes/Text-Heading-6-32.png" alt="H6" title="H6" width="20" height="20" class="h6"></a>&nbsp;

<a id="insertar_enlace" href=""><img src="imagenes_clientes/Textfield-Add-32.png" alt="Insertar enlace" title="Insertar enlace" width="20" height="20" class="insertar_enlace"></a>&nbsp;
<a id="eliminar_enlace" href=""><img src="imagenes_clientes/Textfield-Delete-32.png" alt="Eliminar enlace" title="Eliminar enlace" width="20" height="20" class="eliminar_enlace"></a>&nbsp;

<a id="hr" href=""><img src="imagenes_clientes/Text-Horizontalrule-32.png" alt="Barra horizontal" title="Barra horizontal" width="20" height="20" class="hr"></a>&nbsp;

<a id="insertar_imagen" href=""><img src="imagenes_clientes/lightning.png" alt="Insertar imagen" title="Insertar imagen" class="insertar_imagen"></a>&nbsp;

<input type="button" class="boton_opciones" title="Cambia el diseño de la web y demas opciones" value="Opciones">

<br>

<hr>
</div>


<div id="contenedor">
	<center>

		<div id="cabecera">
		
			<div id="logo">
			
			<a href="http://www.tecasoft.com"><img src="http://www.tecasoft.com/imagenes/logotipo.png" border="0" width="270" height="90" alt="Tecasoft.com, servicio informatico"></a>
			
			</div>
		
			<div id="anexo">
			
			<img src="imagenes_clientes/flag-spain.png">&nbsp;&nbsp;<a href="http://www.tecasoft.com/clientes/anexo.php" class="anexo" title="Cambiar idioma">Spanish (Cambiar ▼)</a>			
			
			</div>
				
		</div>

<!-- Menu navegador -->

		<div id="navegador">
		
		
		
		
		
		
		</div>

<!-- El contenido central -->

	<div id="contenido">
	
		<h1 class="naranja">Inicie Sesión</h1>

		<form action="login.php" method="post" name="form1">
		
		<label for="usuario">Usuario:</label>
		<input type="text" name="usuario" id="tv_3" class="tv_box text ui-widget-content ui-corner-all">
		&nbsp;&nbsp;&nbsp;
		<label for="contrasena">Contraseña:</label>
		<input type="password" name="contrasena" id="tv_4" class="tv_box text ui-widget-content ui-corner-all"><br><br>



		<input type="button" class="tv_sim" value="1">
		<input type="button" class="tv_sim" value="2">
		<input type="button" class="tv_sim" value="3">
		<input type="button" class="tv_sim" value="4">
		<input type="button" class="tv_sim" value="5">
		<input type="button" class="tv_sim" value="6">
		<input type="button" class="tv_sim" value="7">
		<input type="button" class="tv_sim" value="8">
		<input type="button" class="tv_sim" value="9">
		<input type="button" class="tv_sim" value="0">
		
		<input type="button" id="backspace" value="←">
		<br>

<!-- Cambia a mayusculas y minusculas -->
		<input type="button" id="caps" value="Bloq.Mayus">
<!-- End -->

		<input type="button" class="tv_let" value="q">
		<input type="button" class="tv_let" value="w">
		<input type="button" class="tv_let" value="e">
		<input type="button" class="tv_let" value="r">
		<input type="button" class="tv_let" value="t">
		<input type="button" class="tv_let" value="y">
		<input type="button" class="tv_let" value="u">
		<input type="button" class="tv_let" value="i">
		<input type="button" class="tv_let" value="o">
		<input type="button" class="tv_let" value="p">
		<br>
		<input type="button" class="tv_let" value="a">
		<input type="button" class="tv_let" value="s">
		<input type="button" class="tv_let" value="d">
		<input type="button" class="tv_let" value="f">
		<input type="button" class="tv_let" value="g">
		<input type="button" class="tv_let" value="h">
		<input type="button" class="tv_let" value="j">
		<input type="button" class="tv_let" value="k">
		<input type="button" class="tv_let" value="l">
		<input type="button" class="tv_let" value="ñ">
		<br>
		<input type="button" class="tv_let" value="z">
		<input type="button" class="tv_let" value="x">
		<input type="button" class="tv_let" value="c">
		<input type="button" class="tv_let" value="v">
		<input type="button" class="tv_let" value="b">
		<input type="button" class="tv_let" value="n">
		<input type="button" class="tv_let" value="m">
		
		<input type="button" class="tv_sim" value="-">
		<input type="button" class="tv_sim" value="_">
		<input type="button" class="tv_sim" value="@">
		<input type="button" class="tv_sim" value="#">


		<br><br>
		<a href="" class="anexo">¿Has olvidado tu contraseña?</a>
		&nbsp;&nbsp;&nbsp;		
		<input type="submit" class="boton" value="Iniciar sesión">
		</form>
	</div>
		
<!-- Pie Pagina -->	
		
		<div id="pie">

		<hr>

		<div id="pie-izq">
		
		<a href="http://www.tecasoft.com/legal.html" class="pie-izq" title="Condiciones Generales de Contratación">Legal &nbsp;|&nbsp;</a> 
		<a href="http://www.tecasoft.com/proteccion-de-datos.html" class="pie-izq" title="Protección de datos personales">Proteccion de datos &nbsp;|&nbsp;</a>
		<a href="http://www.tecasoft.com/central-de-soporte.html" class="pie-izq" title="Documentación de ayuda">Central de soporte &nbsp;|&nbsp;</a>
		<a href="http://www.tecasoft.com/sitemap.html" class="pie-izq" title="Todos los enlaces web">Mapa web &nbsp;|&nbsp;</a>
		<span class="pie-izq">Rotacion soporte:  &nbsp;|&nbsp;</span>
		<span class="pie-izq">Hora: </span>
			
		
		</div>

		<div id="pie-der">

		<a href="http://www.tecasoft.com/empresas-grupo.html" class="pie-der" title="Nuestro grupo empresarial">Empresas del grupo: anonimo S.L</a>
		
		
		</div>
	
	<br><br>	
	
	</div>
		
	
	</center>

</div>

<script type="text/javascript" >

$(".tv_sim").button();
$(".tv_let").button();
$("#backspace").button();
$("#caps").button();
$(".boton").button();
</script>

<script type="text/javascript" src="js/wysiwyg.js"></script>

</body>
</html>

quiero que se vea el "contenedor"

estilos_clientes.css

Código:

:link,:visited { text-decoration:none } :focus,:active { outline: 0 }
a { color: black; }

/* Contenedor contiene todo */
#contenedor { text-align:left; width: 1000px; margin: auto; margin-top: 10px; float: center; }


/* Cabecera */
#cabecera { width: 1000px; }

#logo { float: left; width: 150px; }

#anexo { float: right; width: 350px; }

.anexo { color: gray; font-size: 70%; }

/* Navegador */
#navegador { float: left; width: 1000px; height: 40px; background-color: black; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */
opacity: 0.7; filter: alpha(opacity=70); /* Transparencias */}


#nav-izq { float: left; width: 600px; margin-top: 10px; }

.nav-izq { color: white; font-size: 90%; margin-right: 1%; font-weight: bold; }


#nav-der { float: right; width: 300px; margin-top: 10px; }

.nav-der { color: white; font-size: 90%; margin-right: 1%; font-weight: bold; }


/* Contenido */
#contenido { float: left; width: 1000px; margin-top: 10px; }

#columna1, #columna2, #columna3, #columna4, #columna1-votaciones, #columna1-sitemap {border-top: 2px solid orange;
border-right: 2px solid orange;
border-bottom: 2px solid orange;
border-left: 2px solid orange; }

#columna1 { float: left; width: 680px; background-color: Gainsboro;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna1-1 { float: left; width: 300px; background-color: orange; margin-left: 20px; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna1-2 { float: right; width: 300px; background-color: orange; margin-right: 20px; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna1-3 { float: left; width: 300px; background-color: orange; margin-left: 20px; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna1-4 { float: right; width: 320px; background-color: orange; margin-right: 20px; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}



#columna2 { float: right; width: 300px; background-color: Gainsboro;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna3 { float: right; width: 300px; background-color: Gainsboro; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

/* tablas diseÃƒ±o web */
#table-1 { float: left; margin-left: 80px; margin-top: 10px; }

#table-2 { float: right; margin-right: 80px; margin-top: 10px; }



/* sitemap */
#contenido-sitemap { float: left; width: 1000px; margin-top: 10px; }

#columna1-sitemap { float: left; width: 1000px; background-color: Gainsboro;
-moz-border-radius: 100px 100px; /* Redondeado */
-webkit-border-radius: 100px 100px; /* Redondeado */}

/* margin-top*/

#margen-superior { margin-top: 10px; } 

/* pie */
#pie { float: left; width: 1000px; }

#pie-izq { float: left; width: 700px; }

.pie-izq { color: gray; font-size: 70%; }


#pie-der { float: right; width: 200px; }

.pie-der { color: gray; font-size: 70%; }

/* Contenido-votaciones */

#columna1-votaciones { float: left; width: 1000px; background-color: Gainsboro;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

/* Contenido clientes */
.naranja { color: orange; }

/* Contenido clientes Botones Menu Editar */
.boton_publicar , .boton_vista_previa , .boton_opciones { font-size: 10px; }

wysiwyg.js

Código:

// Botones del menu Editor
$(".boton_publicar").button(); $(".boton_vista_previa").button();

$(".negrita").button(); $(".cursiva").button(); $(".tachado").button(); $(".subrayar").button();

$(".maquetacion").button();

$(".color").button();

$(".lista_con_vinetas").button(); $(".lista_numerada").button();

$(".alinear_izquierda").button(); $(".centrar").button(); $(".alinear_derecha").button(); $(".justificado").button();

$(".h1").button(); $(".h2").button(); $(".h3").button(); $(".h4").button(); $(".h5").button(); $(".h6").button();

$(".insertar_enlace").button(); $(".eliminar_enlace").button();

$(".hr").button();

$(".insertar_imagen").button();

$(".boton_opciones").button();
// End Botones del menu Editor

// ContentEditable cabecera
$("#contenedor").get(0).contentEditable = "true";
// End ContentEditable cabecera

// Negrita
$('#negrita').click(function(){
		document.execCommand('bold',false,null);
		return false;
});
// End Negrita

// Cursiva
$('#cursiva').click(function(){
		document.execCommand('italic',false,null);
		return false;
});
// End Cursiva

// Tachado
$('#tachado').click(function(){
		document.execCommand('strikethrough',false,null);
		return false;
});
// End Tachado

// Subrayar
$('#subrayar').click(function(){
		document.execCommand('underline',false,null);
		return false;
});
// End Subrayar







// Maquetacion
// calendar.gif
// End maquetacion 

// Color
$('#color').click(function(){
	var color = prompt("Introduzca el nombre del color deseado buscando los colores en ingles en la siguiente direccion: http://es.wikipedia.org/wiki/Colores_web#Tabla_de_colores","");
		document.execCommand('ForeColor',false,color);
		return false;
});
// End color








// Lista con viñetas
$('#lista_con_vinetas').click(function(){
		document.execCommand('InsertUnorderedList',false,"newUL");
		return false;
});
// End Lista con viñetas

// Lista Numerada
$('#lista_numerada').click(function(){
		document.execCommand('InsertOrderedList',false,"newOL");
		return false;
});
// End Lista Numerada

// Alinear a la izquierda, centrar, alinear a la derecha, justificado
$('#alinear_izquierda').click(function(){
		document.execCommand('JustifyLeft',false,null);
		return false;
});
$('#centrar').click(function(){
		document.execCommand('JustifyCenter',false,null);
		return false;
});
$('#alinear_derecha').click(function(){
		document.execCommand('JustifyRight',false,null);
		return false;
});
// End alinear a la izquierda, centrar, alinear a la derecha, justificado

// h1,h2,h3,h4,h5,h6
$('#h1').click(function(){
		document.execCommand('FontSize',false,1);
		return false;
});
$('#h2').click(function(){
		document.execCommand('FontSize',false,2);
		return false;
});
$('#h3').click(function(){
		document.execCommand('FontSize',false,3);
		return false;
});
$('#h4').click(function(){
		document.execCommand('FontSize',false,4);
		return false;
});
$('#h5').click(function(){
		document.execCommand('FontSize',false,5);
		return false;
});
$('#h6').click(function(){
		document.execCommand('FontSize',false,6);
		return false;
});
// End h1,h2,h3,h4,h5,h6

// Insertar enlace, eliminar enlace
$('#insertar_enlace').click(function(){
	var linkURL = prompt("Introduzca la URL en este enlace:","http://");
		document.execCommand('CreateLink',false,linkURL);
		return false;
});
$('#eliminar_enlace').click(function(){
		document.execCommand('Unlink',false,null);
		return false;
});
// End Insertar enlace, eliminar enlace

// hr
$('#hr').click(function(){
		document.execCommand('inserthorizontalrule',false,null);
		return false;
});
// End hr

// Insertar imagen
$('#insertar_imagen').click(function(){
	var imgSrc = prompt("Introduzca la localizacion de la imagen: ej. imagenes/logotipo.png","");
	if(imgSrc != null){
		document.execCommand('insertimage',false, imgSrc);
	}
		return false;
	
});
// End Insertar imagen







// Vista previa
$('.boton_vista_previa').click(function(){
	
//var theForm = document.getElementById("contenedor");
theForm2 = document.getElementById('contenedor').innerHTML;
theForm2.submit();

});
//

aqui al final esta el problema^^^^^^^^^^^^^^


« Última modificación: 27 Marzo 2013, 20:57 pm por tecasoft »	En línea

tecasoft

Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com

Re: como hacer un texto en negrita con contentEditable

« Respuesta #5 en: 27 Marzo 2013, 21:51 pm »

alguien que pueda hecharle un vistazo


	En línea

#!drvy

Moderador

Desconectado

Mensajes: 5.855

Re: como hacer un texto en negrita con contentEditable

« Respuesta #6 en: 28 Marzo 2013, 01:11 am »

@tecasoft, bien por utilizar [code] pero por favor utiliza el lenguaje indicado: [code=php] [code=javascript] [code=html4strict] [code=css]

Y pon solo el código conflictivo. Lo que pones (editor.php.. estilos_clientes.css)... es codigo que no sirve para ver tu problema (requiere login...)

Saludos


	En línea

https://www.youtube.com/watch?v=oqKsrSXLR98

tecasoft

Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com

Re: como hacer un texto en negrita con contentEditable

« Respuesta #7 en: 28 Marzo 2013, 19:00 pm »

no te entendi mucho pero me parece que ahora si que lo he puesto con el numero de linea.

Estaba pensando en enviarlo x medio de <hidden o campo oculto, pero no se como hacerlo o si es la forma correcta...AHORA ESTA MODIFICADO EL ARCHIVO DE ABAJO

pasar el codigo html siguiente que suelta "theForm2" mediante un input via post o se deberia pasar via ftp?¿?o como para visualizarlo, no guardarlo, en una web independiente:

piensa que para editor.php carga una pagina web y esa tiene que tener "vista previa" y un boton para "guardar" la web que se administra.

wysiwyg.js

Código

 
// Vista previa
$('.boton_vista_previa').click(function(){
 
//var theForm = document.getElementById("contenedor");
theForm2 = document.getElementById('contenedor').innerHTML;
 
form_editor.submit();
 
});
//

editor.php

Código

<html>
<head>
 
<meta charset="utf-8">
	<title>Tecasoft.com | Editor</title>
<link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
 
<link rel="shortcut icon" type="image/x-icon" href="http://www.tecasoft.com/imagenes/favicon.ico" />
 
<link rel="StyleSheet" type="text/css" href="css/estilos_clientes.css">
 
</head>
<body>
 
<div id="editor_contenido">
 
<form action="editor12.php" method="post" target="_blank" name="form_editor">
 
<a href="editor.php" title="Vas a la pagina principal del editor"><b>Inicio</b></a>&nbsp;&nbsp;&nbsp;
 
<input type="button" class="boton_publicar" title="Publicar la web en la que estas" value="Publicar">&nbsp;&nbsp;&nbsp;
<input type="button" class="boton_vista_previa" title="Vista previa de la pagina web en la que estas" value="Vista previa">&nbsp;&nbsp;&nbsp;
 
<a id="negrita" href=""><img src="imagenes_clientes/button-bold.png" alt="Negrita" title="Negrita" class="negrita"></a>&nbsp;
<a id="cursiva" href=""><img src="imagenes_clientes/button-italic.png" alt="Cursiva" title="Cursiva" class="cursiva"></a>&nbsp;
<a id="tachado" href=""><img src="imagenes_clientes/button-strikethrough.png" alt="Tachado" title="Tachado" class="tachado"></a>&nbsp;
<a id="subrayar" href=""><img src="imagenes_clientes/button-underline.png" alt="Subrayar" title="Subrayar" class="subrayar"></a>&nbsp;
 
<img src="imagenes_clientes/calendar.gif" alt="Maquetacion" title="Maquetacion" class="maquetacion">&nbsp;
 
<a id="color" href=""><img src="imagenes_clientes/check-green.gif" alt="Color" title="Color" class="color"></a>&nbsp;
 
<a id="lista_con_vinetas" href=""><img src="imagenes_clientes/Text-List-Bullets-32.png" alt="Lista con viñetas" title="Lista con viñetas" width="20" height="20" class="lista_con_vinetas"></a>&nbsp;
<a id="lista_numerada" href=""><img src="imagenes_clientes/Text-List-Numbers-32.png" alt="Lista numerada" title="Lista numerada" width="20" height="20" class="lista_numerada"></a>&nbsp;
 
<a id="alinear_izquierda" href=""><img src="imagenes_clientes/Text-Align-Left-32.png" alt="Alinear a la izquierda" title="Alinear a la izquierda" width="20" height="20" class="alinear_izquierda"></a>&nbsp;
<a id="centrar" href=""><img src="imagenes_clientes/Text-Align-Center-32.png" alt="Centrar" title="Centrar" width="20" height="20" class="centrar"></a>&nbsp;
<a id="alinear_derecha" href=""><img src="imagenes_clientes/Text-Align-Right-32.png" alt="Alinear a la derecha" title="Alinear a la derecha" width="20" height="20" class="alinear_derecha"></a>&nbsp;
 
<a id="h1" href=""><img src="imagenes_clientes/Text-Heading-1-32.png" alt="H1" title="H1" width="20" height="20" class="h1"></a>&nbsp;
<a id="h2" href=""><img src="imagenes_clientes/Text-Heading-2-32.png" alt="H2" title="H2" width="20" height="20" class="h2"></a>&nbsp;
<a id="h3" href=""><img src="imagenes_clientes/Text-Heading-3-32.png" alt="H3" title="H3" width="20" height="20" class="h3"></a>&nbsp;
<a id="h4" href=""><img src="imagenes_clientes/Text-Heading-4-32.png" alt="H4" title="H4" width="20" height="20" class="h4"></a>&nbsp;
<a id="h5" href=""><img src="imagenes_clientes/Text-Heading-5-32.png" alt="H5" title="H5" width="20" height="20" class="h5"></a>&nbsp;
<a id="h6" href=""><img src="imagenes_clientes/Text-Heading-6-32.png" alt="H6" title="H6" width="20" height="20" class="h6"></a>&nbsp;
 
<a id="insertar_enlace" href=""><img src="imagenes_clientes/Textfield-Add-32.png" alt="Insertar enlace" title="Insertar enlace" width="20" height="20" class="insertar_enlace"></a>&nbsp;
<a id="eliminar_enlace" href=""><img src="imagenes_clientes/Textfield-Delete-32.png" alt="Eliminar enlace" title="Eliminar enlace" width="20" height="20" class="eliminar_enlace"></a>&nbsp;
 
<a id="hr" href=""><img src="imagenes_clientes/Text-Horizontalrule-32.png" alt="Barra horizontal" title="Barra horizontal" width="20" height="20" class="hr"></a>&nbsp;
 
<a id="insertar_imagen" href=""><img src="imagenes_clientes/lightning.png" alt="Insertar imagen" title="Insertar imagen" class="insertar_imagen"></a>&nbsp;
 
<input type="button" class="boton_opciones" title="Cambia el diseño de la web y demas opciones" value="Opciones">
 
</form>
 
 
<hr>
</div>
 
 
<div id="contenedor">
	<center>
 
		<div id="cabecera">
 
			<div id="logo">
 
			<a href="http://www.tecasoft.com"><img src="http://www.tecasoft.com/imagenes/logotipo.png" border="0" width="270" height="90" alt="Tecasoft.com, servicio informatico"></a>
 
			</div>
 
			<div id="anexo">
 
			<img src="imagenes_clientes/flag-spain.png">&nbsp;&nbsp;<a href="http://www.tecasoft.com/clientes/anexo.php" class="anexo" title="Cambiar idioma">Spanish (Cambiar &#9660;)</a>			
 
			</div>
 
		</div>
 
<!-- Menu navegador -->
 
		<div id="navegador">
 
 
 
 
 
 
		</div>
 
<!-- El contenido central -->
 
	<div id="contenido">
 
		<h1 class="naranja">Inicie Sesión</h1>
 
		<form action="login.php" method="post" name="form1">
 
		<label for="usuario">Usuario:</label>
		<input type="text" name="usuario" id="tv_3" class="tv_box text ui-widget-content ui-corner-all">
		&nbsp;&nbsp;&nbsp;
		<label for="contrasena">Contraseña:</label>
		<input type="password" name="contrasena" id="tv_4" class="tv_box text ui-widget-content ui-corner-all"><br><br>
 
 
 
		<input type="button" class="tv_sim" value="1">
		<input type="button" class="tv_sim" value="2">
		<input type="button" class="tv_sim" value="3">
		<input type="button" class="tv_sim" value="4">
		<input type="button" class="tv_sim" value="5">
		<input type="button" class="tv_sim" value="6">
		<input type="button" class="tv_sim" value="7">
		<input type="button" class="tv_sim" value="8">
		<input type="button" class="tv_sim" value="9">
		<input type="button" class="tv_sim" value="0">
 
		<input type="button" id="backspace" value="&#8592;">
		<br>
 
<!-- Cambia a mayusculas y minusculas -->
		<input type="button" id="caps" value="Bloq.Mayus">
<!-- End -->
 
		<input type="button" class="tv_let" value="q">
		<input type="button" class="tv_let" value="w">
		<input type="button" class="tv_let" value="e">
		<input type="button" class="tv_let" value="r">
		<input type="button" class="tv_let" value="t">
		<input type="button" class="tv_let" value="y">
		<input type="button" class="tv_let" value="u">
		<input type="button" class="tv_let" value="i">
		<input type="button" class="tv_let" value="o">
		<input type="button" class="tv_let" value="p">
		<br>
		<input type="button" class="tv_let" value="a">
		<input type="button" class="tv_let" value="s">
		<input type="button" class="tv_let" value="d">
		<input type="button" class="tv_let" value="f">
		<input type="button" class="tv_let" value="g">
		<input type="button" class="tv_let" value="h">
		<input type="button" class="tv_let" value="j">
		<input type="button" class="tv_let" value="k">
		<input type="button" class="tv_let" value="l">
		<input type="button" class="tv_let" value="ñ">
		<br>
		<input type="button" class="tv_let" value="z">
		<input type="button" class="tv_let" value="x">
		<input type="button" class="tv_let" value="c">
		<input type="button" class="tv_let" value="v">
		<input type="button" class="tv_let" value="b">
		<input type="button" class="tv_let" value="n">
		<input type="button" class="tv_let" value="m">
 
		<input type="button" class="tv_sim" value="-">
		<input type="button" class="tv_sim" value="_">
		<input type="button" class="tv_sim" value="@">
		<input type="button" class="tv_sim" value="#">
 
 
		<br><br>
		<a href="" class="anexo">¿Has olvidado tu contraseña?</a>
		&nbsp;&nbsp;&nbsp;		
		<input type="submit" class="boton" value="Iniciar sesión">
		</form>
	</div>
 
<!-- Pie Pagina -->	
 
		<div id="pie">
 
		<hr>
 
		<div id="pie-izq">
 
		<a href="http://www.tecasoft.com/legal.html" class="pie-izq" title="Condiciones Generales de Contratación">Legal &nbsp;|&nbsp;</a> 
		<a href="http://www.tecasoft.com/proteccion-de-datos.html" class="pie-izq" title="Protección de datos personales">Proteccion de datos &nbsp;|&nbsp;</a>
		<a href="http://www.tecasoft.com/central-de-soporte.html" class="pie-izq" title="Documentación de ayuda">Central de soporte &nbsp;|&nbsp;</a>
		<a href="http://www.tecasoft.com/sitemap.html" class="pie-izq" title="Todos los enlaces web">Mapa web &nbsp;|&nbsp;</a>
		<span class="pie-izq">Rotacion soporte:  &nbsp;|&nbsp;</span>
		<span class="pie-izq">Hora: </span>
 
 
		</div>
 
		<div id="pie-der">
 
		<a href="http://www.tecasoft.com/empresas-grupo.html" class="pie-der" title="Nuestro grupo empresarial">Empresas del grupo: anonimo S.L</a>
 
 
		</div>
 
	<br><br>	
 
	</div>
 
 
	</center>
 
</div>
 
<script type="text/javascript" >
 
$(".tv_sim").button();
$(".tv_let").button();
$("#backspace").button();
$("#caps").button();
$(".boton").button();
</script>
 
<script type="text/javascript" src="js/wysiwyg.js"></script>
 
</body>
</html>


	En línea

Páginas: [1]

Ir a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	Como hacer enviar un texto a un ftp Programación Visual Basic	rodimus	1	1,890	23 Mayo 2005, 12:45 pm por Ertai
	Hacer CD con jpg, mp3, vídeos y texto para reproductor. Multimedia	helejagy	3	2,182	12 Marzo 2006, 18:35 pm por Songoku
	Como hacer que guarde los archivos de texto en pipes en vez de comas? Programación Visual Basic	Onizuka	6	4,401	26 Mayo 2006, 11:18 am por SheKeL_C$
	El panel para poner negrita, etc... como en el wordpress Desarrollo Web	dimitrix	3	4,892	18 Agosto 2010, 11:33 am por dimitrix
	Editor de texto / negrita / cursiva / ... Programación Visual Basic	ltbl	2	14,416	30 Octubre 2010, 11:44 am por ltbl