Algunas veces se nos presenta la oportunidad en el cual se nos encarga realizar un sitio web, por ah todo bien, sin embargo tenemos el problema del DISEO, lo que hago es lgicamente pedir al diseador que lo elabore segn mis especificaciones, sin embargo a veces no se cuenta con uno y bueno pues manos a la obra a hacerlo solo ya que las empresas quieren soluciones para Ayer. Felizmente en internet hay cientos o miles de sitios que venden PLANTILLAS WEB, para toda necesidad y categoras (Educacin, negocios, ejecutivo, personal, comercio electrnico, etc), Ojo dije Plantillas (Templates) no CMS, muchas de ellas pagadas y gratuitas. La idea solo es buscar la apropiada, encontrarla, Comprar o descargrsela simplemente (si es gratuita), y listo a comenzar. A continuacin como acostumbro dar algunos pasos para migrar una plantilla web en HTML a una MASTER PAGE de ASP.NET y posteriormente heredarlos en todas las pginas. PASO 1: Buscar LA PLANTILLA APROPIADA En internet hay muchas pginas que ofrecen con y sin costo PLANTILLAS WEB WEB TEMPLATES, solo es cuestin de navegar, por ah busque y encontr la siguiente URL ( ojo solo es una hay miles de estas pginas)
PASO 2 : Descargar y verificar el contenido, como veremos, esta plantilla consta de 3 partes 1. Un archivo Index.html (donde se encuentra la plantilla con diseo final 2. Un archivo default.css,, que es la pagina de Estilos 3. Una carpeta de Imgenes
Bueno ms o menos archivos este es el estndar de una plantilla descargada por internet, ahora hay otras que incluyen archivos .psd y formatos para que los diseadores puedan modificar, pero no es el caso de este post.
PASO 3 : Abrir Visual Studio y crear una nueva Aplicacin WEB (Esto funciona con cualquier versionde Visual studio ej. 2005, 2008, 2010) Creamos una aplicacin
Le damos la direccin y nombre de carpeta a crear el sitio ASP.NET Web Site
PASO 4: Copiar Archivos de plantilla a aplicacin WEB ASP.NET Solo es cuestin de copiar los archivos dentro de la aplicacin
Abrimos el archivo index.html para comprobar
PASO 5 : Crear MasterPage y migrar contenido de plantilla En este paso soloe s necesario tener paciencia, y trasladar el codigo PERTINENTEde la plantilla a la Master Page. 5.1 Agregamos una Master Page: (Borremos el control contentplaceholder que viene por defecto al crear una Master Page)
5.2 Copiamos Lo que est dentro de la etiqueta <Body> de la plantilla al Master Page
5.3. Lo insertamos dentro del aetiqueta >form> de la Master Page
5.4 Lo mismo hacemos con lo que esta dentro de la equeta <HEAD>, la trasladamos de la plantilla a la pagina Maestra. Copiamos el contenido de la etiqueta >head>
Copiamos el contenido de la etiqueta >head> en el Master page
PASO 6. Agregar el control ContentPlaceholder Como veremos despus de transportar el contenido de las etiquetas head y Body de la plantilla a la MSTER PAGE, ahora nos encargaremos de hacerle un espacio para poner el control CONTENTPLACEHOLDER. Recuerden( en el paso 5.1 antes de transportar contenido de la plantilla al MASTER PAGE, elimine el control contentplaceholder que viene por defecto al crear una MASTER PAGE) 6.1 Seleccionamos donde ubicaramos nuestro control contentplaceholder (CPH)
6.2 Eliminamos el contenido y dejamos libre el estacin para el control CPH
6.2 Despus de agregar el CHP. Solo nos quedara modificar mens y crear paginas de nuestro sitio a partir de nuestra mster Page
FINALMENTE, ejecutamos y tenemos nuestro sitio WEB en ASP.NET terminado, el tema de logotipos y contenidos estaticos y dinamicos ya es un tema de programacin, con esto resolvemos el largo trabajo de intentar realizar un diseo desde 0, sin ser un diseador.