Simple CSS: Creación de texto más legible
por David Rodríguez - 21 de abril 2008
La tipografía es una parte importante del diseño Web. Al igual que en el mundo de la impresión, su contenido debe ser legible por los espectadores para que pueda ser de alguna utilidad. Como regla general, usted quiere asegurarse de que su sitio web ofrece la menor resistencia posible al usuario y el sitio es más fácil de leer, mejor. CSS proporciona tres propiedades muy útiles para mejorar la legibilidad de su sitio: la fuente, la línea de altura, y la letra de espaciado.
Una página de muestra de
Ya tienes pagina web? Diseña tu sitio web facil y rapido con el programa mas novedoso y facil de usar, visita okhosting.com web hosts en mexico, dominios y paginas web, los planes completos con hospedaje web o host de 50 megas, pagina web y registro de tu nombre en internet, ejem: www.tu-dominio.com y MX, ademas te incluimos cuentas de correo electronico ilimitadas y ayuda para cualquier duda que tengas en la creacion de tu sitio web, visita ahora www.okhosting.com y sal a la luz de la internet.
Vamos a comenzar con una página web de muestra pequeños. Puedes verlo aquí. Esta página utiliza un diseño pequeño, bastante estándar con algunas bajas colores clave para ayudar a destacar el contenido. Este es un buen uso del diseño y el color si el sitio se inscribe en el "contenido es el rey" categoría (y la mayoría de los sitios lo hacen), especialmente si su contenido se compone de los artículos u otros bloques de texto largos, como un blog.
Lo que hay que notar aquí es que el texto hace su trabajo: se comunica un mensaje y el usuario puede abandonar después de haber consumido su contenido. Pero el texto es el mismo en toda la página, con la excepción de un cambio de color en la subpartida pequeñas por debajo del texto del encabezado y el posicionamiento de la misma. Aquí está la CSS que está siendo utilizado en la página de muestra.
body (
text-align: center;
margin: 0;
padding: 0;
background-color: # 363942;
color: # 382513;
)
# container (
margin: 15px auto;
text-align: left;
background-color: # D8CAA8;
border: 1px solid # 4B1E18;
padding: 0px;
width: 850px;
)
body (
height: 80px;
border-bottom: 1px solid # 284907;
margin-bottom: 15px;
padding: 15px;
)
# header h1 (
position: relative;
vertical-align: center;
color: # 382513;
margin-bottom:-10px;
)
. subpartida (
color: # 284907;
)
# sidebar (
border-left: 1px solid # 8FB65F;
margin: 0 0 15px 15px;
padding: 0px 15px 15px 15px;
float: right;
width: 175px;
)
# content (
padding: 0 15px;
)
# footer (
claro: los dos;
border-top: 1px solid # 284907;
padding: 15px;
margin-top: 15px;
)
Selección de las fuentes
Para facilitar la lectura, nos querrá elegir una fuente que se ve bien con los colores que hayas elegido y en el tamaño que planea realizar un texto. Típicamente, un no-serif es conveniente que el contenido principal, mientras que los encabezados se benefician de la vistosidad añadido de serif. Si usted viene de un fondo de impresión, esto puede sonar hacia atrás. Por lo general, en el mundo de la impresión, remates son los preferidos para los bloques de texto, porque el serifas ayudan al ojo distinguir cada línea. Sin embargo, los sistemas operativos modernos tienen opciones para suavizar los bordes de las fuentes de pantalla automáticamente, de manera no-serif salido mejor aspecto como el contenido principal y serif se ven bien en pequeñas dosis.
Con esto en mente, voy a utilizar una de mis frases favoritas cuando se trata de CSS y las fuentes:
font-family: Arial, Helvetica, sans-serif;
Estas fuentes son algunos de los más seguros que puede utilizar en su diseño, y si la compatibilidad entre navegadores es una preocupación, memorizarlas. Son buenos para usar por su cuenta, o puede utilizar como punto de partida para su texto no serif. En este caso, para simplificar, me voy a quedar con sólo estos tres para el contenido. La sección del cuerpo de la CSS ahora se ve así:
body (
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: # 363942;
color: # 382513;
)
Y con ese pequeño cambio, la legibilidad del conjunto de la página ha cambiado ligeramente a mejor: ver por sí mismo.
El ligero cambio es bueno, pero todos los de la fuente sigue siendo la misma familia y esto crea un mal tipo de uniformidad. Queremos una distinción pasando aquí, así que vamos a poner nuestras partidas y subpartidas del resto del contenido. Vamos a pasar por alto el H1 en la parte superior un poco, ya que querrá hacer algo un poco diferente con el que en un segundo.
Por el subtítulo y el título en el contenido, voy a estar utilizando un tipo serif. Al igual que anteriormente, esta línea siguiente es probablemente una de mis favoritas:
font-family: Georgia, "Times New Roman", Times, serif;
Una vez más, estas son algunas de las más seguras fuentes que puede utilizar en Diseño Web, incluso si es sólo un punto de inicio y planea expandir su tipografía un poco más tarde. Reserva de esta línea para los jefes y otros lugares en los que se vería bien en pequeñas dosis, el ojo tiene un tiempo de lectura más difícil serif en una pantalla que los no-serif para bloques enteros de texto serif puede ser impactante.
Así que ahora, nuestra clase subpartida se parece a esto:
. subpartida (
color: # 284907;
font-family: Georgia, "Times New Roman", Times, serif;
)
Y tenemos que crear una nueva regla para las etiquetas H2 en la sección de contenido. Lo hacemos de esta manera:
# content h2 (
font-family: Georgia, "Times New Roman", Times, serif;
)
Bien, ahora la información del encabezado es más separada del contenido, lo cual es bueno. Echa un vistazo aquí.
Ahora, ¿qué hay que h1 cabecera que tenemos en la parte superior de la página? Vamos a hacerlo más grande y le dan menos contraste con el fondo. Esto es para que los usuarios sepan lo que están en el sitio, pero no se distraiga con el encabezado.
Lo haremos con este código:
color: # 6B5846;
font-size: 48px;
Y el encabezado completo h1 regla dice lo siguiente:
# header h1 (
position: relative;
vertical-align: center;
color: # 6B5846;
margin-bottom:-10px;
font-size: 48px;
)
Usted puede ver el encabezado vez aquí.
Ahora dirigimos nuestra atención hacia la barra lateral y pie de página. El texto de la estos lugares es el mismo que el cuerpo del texto en el área de contenido principal. La barra lateral y el pie en general juega un papel secundario, por lo que les vamos a dar más pequeños de texto y una familia de fuentes diferentes, con una regla única fuente:
font: 12px Verdana;
Ahora, nuestra barra lateral y divs pie de página tiene la CSS:
# footer (
claro: los dos;
border-top: 1px solid # 284907;
padding: 15px;
font: 12px Verdana;
margin-top: 15px;
)
# sidebar (
border-left: 1px solid # 8FB65F;
margin: 0 0 15px 15px;
padding: 0px 15px 15px 15px;
float: right;
width: 175px;
font: 12px Verdana;
color: # 5A4735;
)
Ahora, el texto contenido se siente un poco abrumador. Vamos a reducir su tamaño con esto:
font-size: 15px;
Y lo pondremos en la norma de contenido, por lo que ahora se lee:
# content (
padding: 0 15px;
font-size: 15px;
)
Y ahora tenemos nuestra quinta iteración de la página CMRT. Hemos tomado algunos pasos en asegurarse de que las diferentes secciones de nuestro sitio cada uno tiene su propia mirada y sensación, mientras que todavía se sentía unificado. Ahora, podemos dar un paso más con la propiedad line-height.
line-height - Sé bueno con tus visitantes!
Sus visitantes están allí para ver cualquier contenido que tienen en su sitio web. Han venido a verte y que son tus invitados! Tratarlos bien. Usted no quiere forzar sus ojos al ver tu página. Utilice la línea de altura para que el texto más legible. Adición de altura más la línea a su texto aumenta la cantidad de espacio entre cada línea, y ayuda a los ojos hacen que saltan mientras se mueve por su contenido.
Nosotros le daremos el div contenido de una altura de línea de 160%, lo cual le da 60% de la altura más línea de lo que normalmente tiene, basado en el tamaño de la fuente. Esta es una cantidad decente de la altura de la línea y le da al texto un espacio para respirar. Para la barra lateral, ya que el texto es más pequeño, sólo voy a dar una altura de línea de 140%. Así que, ahora nuestro contenido y CSS barra lateral son los siguientes:
# content (
padding: 0 15px;
font-size: 15px;
line-height: 160%;
)
# sidebar (
border-left: 1px solid # 8FB65F;
margin: 0 0 15px 15px;
padding: 0px 15px 15px 15px;
float: right;
width: 175px;
font: 12px Verdana;
line-height: 140%;
color: # 5A4735;
)
Y con esto, el texto adquiere un aspecto mucho más agradable. Ver aquí. Los ojos no tienen que trabajar tan duro para leer el texto ahora, por lo que es más fácil para sus visitantes de consumir su contenido.
Ajuste de espacio entre las letras
Sólo hay un par de lugares donde espaciamiento de la letra entra en juego con esta página, pero también puede desempeñar un papel en el aumento de la legibilidad de su sitio y ayudar a que cada elemento de la página más clara. Los encabezados y las partidas suelen ser buenos candidatos para el espaciamiento de la letra. Desde un punto de vista del diseño, puede utilizar espacio en su carta el texto de cabecera para añadir algunas imágenes más adecuadas a la página, como vamos a hacer en el div encabezado con esto:
letter-spacing: 20px;
Esto aumenta el espacio entre las letras de su texto por 20px. 20px es un número grande de texto normales, pero para el encabezado en la parte superior de la página, que está a sólo 4 letras, que le ayuda a estirar a ser casi tan ancha como la subpartida debajo de ella, dándole más de un encabezado de sentir.
Para las partidas (de las etiquetas H2) en el contenido de la página, vamos a aumentar la carta de separación por sólo 2px. Esto dará los títulos más destacados se siente y separar aún más a partir del texto, y el ajuste es de menor importancia suficiente como para que no se distraiga de la lectura:
letter-spacing: 2px;
Así que la cabecera H1 y H2 CSS de nuestro contenido CSS de ahora este aspecto:
# header h1 (
position: relative;
vertical-align: center;
color: # 6B5846;
margin-bottom:-10px;
font-size: 48px;
letter-spacing: 20px;
)
# content h2 (
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: 2px;
)
Usted puede ver lo que todo parece cuando se hace bien aquí.
Ampliando este CSS
Hay un montón de maneras diferentes que usted puede aplicar estas propiedades, también. Para el diseño de la página a propósito utilizó un diseño sencillo y más intuitivo para poder centrarse en el texto, ya que cambió durante los pasos anteriores, pero aplicando este tipo de CSS en el diseño mucho más dinámico y elegante, puede mejorar drásticamente su efecto sobre la a sus visitantes. No tengo la intención de "embellecer" la página de ejemplo CMRT, y si lo hago, será por un artículo totalmente separados, pero si deseas tomar una grieta en lo que se vea más bonita, preservando la fuente y texto los ajustes, me golpeó y vamos a hablar de ello.
Manténgase sintonizado para más de la serie Simple CSS!
jueves, 26 de noviembre de 2009
El futuro del Diseño web y el software
Mañana de Diseño Web: Diseño de Software Popular Challenge
por David Rodríguez - 18 de abril 2008
Recientemente, tomé un proyecto. Un compañero de trabajo de la mina creado un sitio web completamente en estándares XHTML compatible desde el principio titulado HTML para principiantes, que será lanzado pronto. Su código fue escrito a mano y es elegante y funcional. En la página principal del sitio, se utilizó un diseño de tres columnas con un encabezado y pie de página, y en las páginas interiores del sitio se utilizó un diseño de dos columnas. Éstos son capturas de pantalla (la apariencia de la página final puede cambiar, por lo tanto, no hay enlaces directos HTML):
El diseño original; estricto, XHTML válido, página de nivel superior:
El diseño original; estricto, XHTML válido, página interior:
Mi proyecto iba a tener cuatro programas: CoffeeCup Visual Site Designer, Microsoft Expression Web, Adobe Dreamweaver y Microsoft FrontPage 2003 y el intento de recrear los dos diseños anteriores. Aquí está el truco: sólo podía utilizar la interfaz WYSIWYG (lo que ves es lo que obtienes) características de cada programa. Yo no podía modificar el código directamente a todos.
¿Por qué hacer esto?
Fui al sur de este año by Southwest Interactive Festival y asistió a un panel no titulado, "¿Tiene el mundo de mañana falta diseñadores?" El propósito detrás de todo el grupo era conseguir algunas reflexiones meta pasando. El enfoque y la idea general es que en el (posiblemente cerca) el futuro, los individuos las herramientas para crear de forma sencilla y "diseño" visual único para todas las cosas - Páginas web, calzado, automóviles, lo que sea - sin la necesidad de un diseñador profesional . Incluso fue educado que en una peor de los casos, incluso la inteligencia artificial podría conseguir tan avanzado que podría "aprender" de diseño y crear cosas como los únicos, sitios atractivos en el momento.
Yo no estoy tan seguro de que la última parte. Pero la parte sobre el Joe cotidiana contar con las herramientas que necesita para diseñar su sitio sin las habilidades y conocimientos de un diseñador (es decir, sin saber HTML, CSS, o tener el ojo entrenado de alguien que ha estado trabajando con la Web durante años y ha visto sus tendencias) me interesaba. Por lo tanto, armar a mí mismo con una serie de los editores WYSIWYG más populares, me puse a ver que tan cerca esta realidad que hemos llegado.
Primero: Inicio 2003
Entré en esta solicitud a sabiendas de que esto es viejo. Old aunque puede ser, todavía está en una buena circulación y sigue siendo uno de los programas más utilizados para la matanza de la Web con el código de hinchado y en el cuadro basado en diseños construcción de sitios web.
En general, la construcción del diseño WYSIWYG en modo de sólo con Frontpage fue un dolor de torpe en la parte trasera. Me vi obligado a señalar a las células de diseño de la mesa y el "estilo" con Microsoft Office herramientas de estilo, como, "Formato de la célula ..." y "Propiedades de Celda". Fue bastante torpe es todo lo que puedo decir, y muchas veces, las células no quería quedarme donde ponerlos. Cuando se agrega un nuevo diseño de la célula, todos los demás tratan de adivinar de dónde se supone que deben ir en relación, dejando a arrastrar manualmente de vuelta a sus puntos de destino, o el uso de la herramienta Borrador molesto (que a veces se borra en los puntos correctos , y, a veces no) para borrar las fronteras y las células que la disposición añadido por su cuenta cuando lo agregó a su celular deseado.
Ya tienes pagina web? Diseña tu sitio web facil y rapido con el programa mas novedoso y facil de usar, visita okhosting.com web hosts en mexico, dominios y sitios web, los planes completos con hospedaje web o host de 50 megas, pagina web y registro de tu nombre en internet, ejem: www.tu-dominio.com y MX, ademas te incluimos cuentas de correo electronico ilimitadas y ayuda para cualquier duda que tengas en la creacion de tu sitio web, visita ahora www.okhosting.com y sal a la luz de la internet.
Hubo algunas cosas que simplemente no podía hacer, como agregar la imagen de fondo a la cabecera, sin manual de codificación. Así que el fondo tuvo que quedarse fuera. Al final, sin embargo, el producto salió en busca muy aseado en el diseñador:
Inicio de 2003, en la vista de diseño:
Lamentablemente, sin embargo, en un explorador Web, el diseño no parecía ser el mismo:
Inicio de 2003, página superior, visto en un verdadero navegador (Firefox 2):
El diseño de página interior llegó muy cerca, sin embargo:
Inicio de 2003, página interior, visto en un verdadero navegador (Firefox 2):
FrontPage 2003 Pros:
* Porciones y porciones de características
* Sistema de ayuda decente
FrontPage 2003 Contras:
* El software de manera obsoleta
* Sin embargo prefiere utilizar tablas para maquetar
* Un montón de características, pero la mayoría nunca va a usar
* El número de características lanzado en usted puede ser abrumadora
* No es novato amistoso
* No veterano amistoso
* Apenas intermedios amistoso
* Una página puede buscar una manera en la vista de diseño, pero radicalmente diferente en la producción, y porque la vista de diseño se ve bien, ¿cómo se supone que tienes que arreglarlo?
Y en esta esquina: Adobe Dreamweaver CS3! (Mac version)
Yo sabía Inicio sería una pesadilla, por lo que decidí trabajar con él primero. Yo realmente no sabía qué esperar con Dreamweaver. Yo había oído cosas buenas, yo había oído cosas malas.
Tengo que decir que fue un buen cambio de ritmo de Inicio. Dibujar un esquema de una manera similar como lo hice en Inicio mucho más fácil, porque en realidad podría utilizar divs en lugar de tablas para el diseño. La forma más sencilla de hacerlo es utilizar el AP (posición absoluta) divs en lugar de los divs normal, porque para sacar el máximo provecho de un no-AP divs que tendría que hacer algo de codificación manual.
Dibujar el diseño fue un broche de presión. Lo redacté en cuestión de segundos, y sólo tomó unos minutos para ajustar las posiciones así lo fueron casi pixel-perfect. Puede seleccionar un div y moverla píxel por píxel con las teclas de flecha del teclado, de modo que era agradable. Entonces me llena cada div con el contenido que quería antes de que el estilo de divs.
Aquí es donde las cosas se pusieron un poco torpe. Hay muy pocas herramientas WYSIWYG para añadir los colores de fondo, cambiando el texto (excepto el tamaño y la cara), añadiendo márgenes / relleno, alineación de una imagen de fondo, etc busqué durante bastante tiempo la forma de estilo de mi página sin tener que teclear mi CSS propia, pero fue inútil. Con el tiempo me vino abajo y uso de la "CSS" botón, que parecía ser la única manera de estilo de estos divs hasta el punto de que serían capaces de imitar el diseño original que estaba trabajando. El botón CSS planteado un semi-diálogo intuitivo que me permitió añadir estilo al objeto seleccionado, y cuando terminé, el estilo fue hacia el panel en la parte derecha de la ventana.
Fue en este panel de poco que hice casi todos los de mi estilo, utilizando casi codificadas a mano CSS. Digo "casi" porque hay cuadros desplegables que le permiten elegir de una lista de elementos, como "cuerpo", "H1", "A", "a: hover", etc Dado que no estaba realmente en la archivo HTML primas y escribiendo mis estilos manualmente, pensé que esto era algo que podía "chirriar por" como WYSIWYG. Aunque en realidad, alguien que no conoces CSS tendría dificultades para construir un sitio atractivo, moderno de esta manera.
Dicho esto, creo que Dreamweaver CS3 es un gran programa en un sentido profesional. Si no estuviera limitada por este proyecto a modo de sólo el WYSIWYG y podría utilizar el editor de código, puedo ver Dreamweaver ser muy útil para aquellos que gustan de las aplicaciones profesionales para este tipo de cosas. (Sigo personalmente prefiero un editor de texto y una versión local de Apache / PHP / MySQL). Sin embargo, es un poco demasiado técnico, el texto de algunas de las opciones y los métodos de diseño que utilizan podría ser más intuitiva y eficiente.
Al final, esto es lo que el sitio parecía en vista de diseño de Dreamweaver:
Dreamweaver CS3, página superior, en vista del diseñador:
Y esto es lo que el resultado final se ve como en un navegador:
Dreamweaver CS3, página superior, en un navegador (Firefox 2):
Dreamweaver CS3, página interior, en un navegador (Firefox 2):
Observe en la página de nivel superior como Dreamweaver tenido un poco de dificultad para la conversión de algunos de los símbolos cuando el texto fue pegado en ella. En conjunto, sin embargo, el resultado final fue agradable y se acercó al diseño original. Lamentablemente, sin embargo, no puedo decir que Dreamweaver CS3 es una herramienta rápida y fácil-de construir un sitio si usted tiene poco conocimiento de CSS.
Pros Dreamweaver CS3:
* Puede hacer algunas cosas avanzadas con el editor visual si conoce la CSS
* Adición de las propiedades básicas de CSS para divs con un botón de CSS es rápido en la creación de
* Dibujo un diseño con divs AP es un buen guía de inicio rápido
Dreamweaver CS3 Contras:
* No muy novato amistoso
* Estilo mínimo que se puede hacer sin el conocimiento de CSS
* Gestión de su estilo y divs puede ser un dolor, una vez que ya ha creado
* Muchas de las funciones y herramientas en lugares ilógicos, obligando a cazar alrededor de ellos
* Es necesario tener conocimientos de HTML y CSS si va a ir solo y usar el programa, no hay herramientas para principiantes
¡Ah, Expression Web. Vamos a ver lo que tienes.
El sucesor de Microsoft para el Inicio de fecha muy próxima al escenario. Así es como se cayó.
Se me presentó con la interfaz de Expression Web y, al mismo tiempo que definitivamente hay mucho que hacer allí, se organizó muy bien. tag just sitting there on the right side of the window; in a neat little pane." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'">Sólo la interfaz de exploración con mis ojos, casi de inmediato vio la etiqueta
por David Rodríguez - 18 de abril 2008
Recientemente, tomé un proyecto. Un compañero de trabajo de la mina creado un sitio web completamente en estándares XHTML compatible desde el principio titulado HTML para principiantes, que será lanzado pronto. Su código fue escrito a mano y es elegante y funcional. En la página principal del sitio, se utilizó un diseño de tres columnas con un encabezado y pie de página, y en las páginas interiores del sitio se utilizó un diseño de dos columnas. Éstos son capturas de pantalla (la apariencia de la página final puede cambiar, por lo tanto, no hay enlaces directos HTML):
El diseño original; estricto, XHTML válido, página de nivel superior:
El diseño original; estricto, XHTML válido, página interior:
Mi proyecto iba a tener cuatro programas: CoffeeCup Visual Site Designer, Microsoft Expression Web, Adobe Dreamweaver y Microsoft FrontPage 2003 y el intento de recrear los dos diseños anteriores. Aquí está el truco: sólo podía utilizar la interfaz WYSIWYG (lo que ves es lo que obtienes) características de cada programa. Yo no podía modificar el código directamente a todos.
¿Por qué hacer esto?
Fui al sur de este año by Southwest Interactive Festival y asistió a un panel no titulado, "¿Tiene el mundo de mañana falta diseñadores?" El propósito detrás de todo el grupo era conseguir algunas reflexiones meta pasando. El enfoque y la idea general es que en el (posiblemente cerca) el futuro, los individuos las herramientas para crear de forma sencilla y "diseño" visual único para todas las cosas - Páginas web, calzado, automóviles, lo que sea - sin la necesidad de un diseñador profesional . Incluso fue educado que en una peor de los casos, incluso la inteligencia artificial podría conseguir tan avanzado que podría "aprender" de diseño y crear cosas como los únicos, sitios atractivos en el momento.
Yo no estoy tan seguro de que la última parte. Pero la parte sobre el Joe cotidiana contar con las herramientas que necesita para diseñar su sitio sin las habilidades y conocimientos de un diseñador (es decir, sin saber HTML, CSS, o tener el ojo entrenado de alguien que ha estado trabajando con la Web durante años y ha visto sus tendencias) me interesaba. Por lo tanto, armar a mí mismo con una serie de los editores WYSIWYG más populares, me puse a ver que tan cerca esta realidad que hemos llegado.
Primero: Inicio 2003
Entré en esta solicitud a sabiendas de que esto es viejo. Old aunque puede ser, todavía está en una buena circulación y sigue siendo uno de los programas más utilizados para la matanza de la Web con el código de hinchado y en el cuadro basado en diseños construcción de sitios web.
En general, la construcción del diseño WYSIWYG en modo de sólo con Frontpage fue un dolor de torpe en la parte trasera. Me vi obligado a señalar a las células de diseño de la mesa y el "estilo" con Microsoft Office herramientas de estilo, como, "Formato de la célula ..." y "Propiedades de Celda". Fue bastante torpe es todo lo que puedo decir, y muchas veces, las células no quería quedarme donde ponerlos. Cuando se agrega un nuevo diseño de la célula, todos los demás tratan de adivinar de dónde se supone que deben ir en relación, dejando a arrastrar manualmente de vuelta a sus puntos de destino, o el uso de la herramienta Borrador molesto (que a veces se borra en los puntos correctos , y, a veces no) para borrar las fronteras y las células que la disposición añadido por su cuenta cuando lo agregó a su celular deseado.
Ya tienes pagina web? Diseña tu sitio web facil y rapido con el programa mas novedoso y facil de usar, visita okhosting.com web hosts en mexico, dominios y sitios web, los planes completos con hospedaje web o host de 50 megas, pagina web y registro de tu nombre en internet, ejem: www.tu-dominio.com y MX, ademas te incluimos cuentas de correo electronico ilimitadas y ayuda para cualquier duda que tengas en la creacion de tu sitio web, visita ahora www.okhosting.com y sal a la luz de la internet.
Hubo algunas cosas que simplemente no podía hacer, como agregar la imagen de fondo a la cabecera, sin manual de codificación. Así que el fondo tuvo que quedarse fuera. Al final, sin embargo, el producto salió en busca muy aseado en el diseñador:
Inicio de 2003, en la vista de diseño:
Lamentablemente, sin embargo, en un explorador Web, el diseño no parecía ser el mismo:
Inicio de 2003, página superior, visto en un verdadero navegador (Firefox 2):
El diseño de página interior llegó muy cerca, sin embargo:
Inicio de 2003, página interior, visto en un verdadero navegador (Firefox 2):
FrontPage 2003 Pros:
* Porciones y porciones de características
* Sistema de ayuda decente
FrontPage 2003 Contras:
* El software de manera obsoleta
* Sin embargo prefiere utilizar tablas para maquetar
* Un montón de características, pero la mayoría nunca va a usar
* El número de características lanzado en usted puede ser abrumadora
* No es novato amistoso
* No veterano amistoso
* Apenas intermedios amistoso
* Una página puede buscar una manera en la vista de diseño, pero radicalmente diferente en la producción, y porque la vista de diseño se ve bien, ¿cómo se supone que tienes que arreglarlo?
Y en esta esquina: Adobe Dreamweaver CS3! (Mac version)
Yo sabía Inicio sería una pesadilla, por lo que decidí trabajar con él primero. Yo realmente no sabía qué esperar con Dreamweaver. Yo había oído cosas buenas, yo había oído cosas malas.
Tengo que decir que fue un buen cambio de ritmo de Inicio. Dibujar un esquema de una manera similar como lo hice en Inicio mucho más fácil, porque en realidad podría utilizar divs en lugar de tablas para el diseño. La forma más sencilla de hacerlo es utilizar el AP (posición absoluta) divs en lugar de los divs normal, porque para sacar el máximo provecho de un no-AP divs que tendría que hacer algo de codificación manual.
Dibujar el diseño fue un broche de presión. Lo redacté en cuestión de segundos, y sólo tomó unos minutos para ajustar las posiciones así lo fueron casi pixel-perfect. Puede seleccionar un div y moverla píxel por píxel con las teclas de flecha del teclado, de modo que era agradable. Entonces me llena cada div con el contenido que quería antes de que el estilo de divs.
Aquí es donde las cosas se pusieron un poco torpe. Hay muy pocas herramientas WYSIWYG para añadir los colores de fondo, cambiando el texto (excepto el tamaño y la cara), añadiendo márgenes / relleno, alineación de una imagen de fondo, etc busqué durante bastante tiempo la forma de estilo de mi página sin tener que teclear mi CSS propia, pero fue inútil. Con el tiempo me vino abajo y uso de la "CSS" botón, que parecía ser la única manera de estilo de estos divs hasta el punto de que serían capaces de imitar el diseño original que estaba trabajando. El botón CSS planteado un semi-diálogo intuitivo que me permitió añadir estilo al objeto seleccionado, y cuando terminé, el estilo fue hacia el panel en la parte derecha de la ventana.
Fue en este panel de poco que hice casi todos los de mi estilo, utilizando casi codificadas a mano CSS. Digo "casi" porque hay cuadros desplegables que le permiten elegir de una lista de elementos, como "cuerpo", "H1", "A", "a: hover", etc Dado que no estaba realmente en la archivo HTML primas y escribiendo mis estilos manualmente, pensé que esto era algo que podía "chirriar por" como WYSIWYG. Aunque en realidad, alguien que no conoces CSS tendría dificultades para construir un sitio atractivo, moderno de esta manera.
Dicho esto, creo que Dreamweaver CS3 es un gran programa en un sentido profesional. Si no estuviera limitada por este proyecto a modo de sólo el WYSIWYG y podría utilizar el editor de código, puedo ver Dreamweaver ser muy útil para aquellos que gustan de las aplicaciones profesionales para este tipo de cosas. (Sigo personalmente prefiero un editor de texto y una versión local de Apache / PHP / MySQL). Sin embargo, es un poco demasiado técnico, el texto de algunas de las opciones y los métodos de diseño que utilizan podría ser más intuitiva y eficiente.
Al final, esto es lo que el sitio parecía en vista de diseño de Dreamweaver:
Dreamweaver CS3, página superior, en vista del diseñador:
Y esto es lo que el resultado final se ve como en un navegador:
Dreamweaver CS3, página superior, en un navegador (Firefox 2):
Dreamweaver CS3, página interior, en un navegador (Firefox 2):
Observe en la página de nivel superior como Dreamweaver tenido un poco de dificultad para la conversión de algunos de los símbolos cuando el texto fue pegado en ella. En conjunto, sin embargo, el resultado final fue agradable y se acercó al diseño original. Lamentablemente, sin embargo, no puedo decir que Dreamweaver CS3 es una herramienta rápida y fácil-de construir un sitio si usted tiene poco conocimiento de CSS.
Pros Dreamweaver CS3:
* Puede hacer algunas cosas avanzadas con el editor visual si conoce la CSS
* Adición de las propiedades básicas de CSS para divs con un botón de CSS es rápido en la creación de
* Dibujo un diseño con divs AP es un buen guía de inicio rápido
Dreamweaver CS3 Contras:
* No muy novato amistoso
* Estilo mínimo que se puede hacer sin el conocimiento de CSS
* Gestión de su estilo y divs puede ser un dolor, una vez que ya ha creado
* Muchas de las funciones y herramientas en lugares ilógicos, obligando a cazar alrededor de ellos
* Es necesario tener conocimientos de HTML y CSS si va a ir solo y usar el programa, no hay herramientas para principiantes
¡Ah, Expression Web. Vamos a ver lo que tienes.
El sucesor de Microsoft para el Inicio de fecha muy próxima al escenario. Así es como se cayó.
Se me presentó con la interfaz de Expression Web y, al mismo tiempo que definitivamente hay mucho que hacer allí, se organizó muy bien. tag just sitting there on the right side of the window; in a neat little pane." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'">Sólo la interfaz de exploración con mis ojos, casi de inmediato vio la etiqueta
allí sentado en la parte derecha de la ventana, en un panel de bonito. tag five times." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'">Sabiendo que necesitaba cinco divs para el sitio, y ver cuánto tiempo tuvo que enviar a ajustar la posición y estilos en Dreamweaver cuando yo absolutamente posicionado-divs, me doble clic en la etiqueta
cinco veces. Cinco divs se dejó caer en mi ventana de diseño, indicado por un div pequeño "ficha" y un esquema de puntos, uno encima del otro en formato de bloque.
Dentro de cada div que podía escribir y editar texto o añadir imágenes / cuadros / lists / lo que sea, como si cada div era su propio documento de Word poco, utilizando todas las herramientas familiares de Microsoft Word. Esto hizo que añadir los divs y su contenido fácil. Así que en pocos minutos, yo tenía cinco divs en mi página en bloques, todos llenos de todo su contenido en 12-point Times New Roman. Ahora venía la parte difícil: todo un estilo. Si este iba a ser algo parecido a los programas WYSIWYG otros que he usado (ver arriba), esto sería un ejercicio de tropezar sin rumbo hasta que encontré lo que necesitaba.
Afortunadamente, Expression Web no son los otros programas. Me di cuenta de una "nueva" que aparece en la parte derecha de la ventana de Expresión Web. He hecho clic en él. Un diálogo apareció con un menú en el lado izquierdo con las modificaciones más comúnmente utilizadas CSS. Secciones como "Box" para rellenar el modelo de caja (y márgenes), "Diseño" para el posicionamiento y flotante, "List" (lista para cuando se desea que el estilo, no me hacen mucho uso de esto, pero hizo fácil cambiar el tipo de bala, cuando yo necesitaba, y pude ver que sea fácil de crear un flotaba-navbar lista con este), y otros como "Antecedentes", "Fuente", y así sucesivamente. Este diálogo fue bastante intuitivo, y como siempre que se sepa los fundamentos de la CSS, se puede tropezar en ella como en torno a un usuario intermedio y lograr lo que estás buscando. Fui capaz de usar este diálogo para asignar fondos, márgenes y el relleno, flotando, y el posicionamiento a todos mis divs, porque hay una marca poco clara en la parte superior del diálogo que dice "se aplican al objeto página seleccionada." Así que si seleccionar un div todo, se hace la CSS. Seleccione sólo una palabra o elemento li, y sólo el que consigue el estilo. Y yo no tenía a mano el código un poco de ella.
Como he añadido estilos para todos mis divs, saltaron por toda la página para encajar en su lugar. Cosas (como el pie de página) que se ajusta a "claro: tanto" (a través de la modalidad de diseño) saltó a la parte inferior de la página y llena todo el ancho de la ventana, como se pretendía. El texto que debe envolver envuelto en todos los lugares correctos, Expression Web manejado bastante bien.
En este punto, mi página fue esencialmente hecho. Sólo necesitaba para hacer algunos retoques a la página. Aquí es donde las cosas empezaron a ponerse un poco más difícil. Intuitivamente, yo sería capaz de seleccionar cualquiera de mis divs u otros elementos dentro de los divs y pulse el botón derecho, y luego editar el CSS en el mismo diálogo que he creado de entrada, sino que, al intentar algo como esto, le lanza Expression Web a la vista de Split, mostrando el HTML puro / CSS de la página en un panel superior y la vista de diseño en el panel inferior. Este fue estremecedora, yo no quería modificar el código (que no era el punto de mi proyecto), quería cambiar el CSS en el diseño.
Resulta que hay un "Administrar estilos" panel de la derecha que tiene una lista de todos los estilos que has creado. Si mouseover cualquier elemento de tu página, te dice qué estilo que está utilizando. A continuación, encontramos que el estilo en el Administrador de estilos, haga clic en él y, a continuación, haga clic en Modificar estilo. Creo que "Editar Estilo" habría sido una mejor redacción, y en segundo lugar, la búsqueda de esta característica fue estremecedora. Todo había salido tan bien hasta ese punto.
En cualquier caso, Modificar el estilo usando planteado que el diálogo mismo y hacer ajustes era bastante sencillo. Sin embargo, tuve que hacer varios ajustes (quería ir de nuevo a algunos divs y añadir un borde inferior, y yo también quería volver a un par de las listas y aplicar imágenes de bala costumbre; además, quería cambiar el vínculo colores sólo en un div). Hacer ajustes varios se consume demasiado tiempo, porque para cada uno de modificar, tuve que pasar el ratón el elemento que quería el cambio, averiguar qué nombre de estilo Expression Web había dado, y luego en el Administrador de estilos, haga clic en el estilo, Estilo y haga clic en Modificar y, a continuación, haga clic en Aplicar / Aceptar antes de que se hace el truco. Cuando tenga que hacer varios ajustes, esto no es la manera más intuitiva.
Después de realizar todos los ajustes necesarios, la página salió casi exactamente como yo quería en el diseñador.
Expression Web, página superior, en vista del diseñador:
Y los resultados en un navegador eran buenas también.
Expression Web, página superior, en un navegador (Firefox 2):
Expression Web, la página interior, en un navegador (Firefox 2):
Profesionales de Expression Web:
* Si usted conoce un poco de HTML / CSS, usted puede saltar adentro derecho
* Fácil de obtener el diseño de la página creada con divs varios.
* Grandes estilos de diálogo para ayudarle a estilo de una página entera o sólo un objeto individual.
* Casi todo lo que se explica por sí mismo.
* Fácil de escanear el programa con su ojo para encontrar la herramienta que necesitas.
* Cada div crear siente como un documento de Word mini, con texto de todas las herramientas de formato familiar.
* Software más fácil para alguien con un poco de conocimiento de HTML / CSS para sólo recoger y ejecutar con.
* Las páginas creadas en este software parecía prácticamente perfecta en los principales navegadores que probé en (IE7, Firefox 2, Safari, WebKit, Opera).
* De todos los programas, Expression Web y Visual Designer de la web fue la más cercana a la reproducción de la página tema exactamente. (Más información sobre la CIV en un poco).
Contras de Expression Web:
* Hacer ajustes menores es rápido ... Si desea hacer una pellizcar de menor importancia. Usted tiene que seguir una serie de pasos para cambiar algunas de las cosas más pequeñas, y si usted desea cambiar un montón de pequeñas cosas que se necesita más tiempo de lo que debería.
* El menú del botón derecho es semi-útil en vista de diseño, sino un "estilo" Edición "la opción que hacer maravillas para este programa, por lo que es correr suave como la seda en lugar de" muy bien ".
* Un gran programa, un poco de un alto precio. No es bueno para los principiantes.
Verdaderamente WYSIWYG: Diseñador web Visual
Ya he indicado que por encima de: Expression Web y Visual Designer de la web fue la más cercana a reproducir exactamente la página de tema exactamente. Pero, ¿cómo diseñador visual de la web realizar?
Si se me permite expresar la respuesta en una palabra: "realmente bien". (Bueno, dos palabras.) Al abrir el programa, me presentó con tres opciones: Nuevo Sitio Web, Open Web y uso de plantillas. Tentados como yo a navegar por las plantillas, no era mi objetivo. He hecho clic en Nuevo Sitio Web, y tengo un pequeño diálogo que me pide los fundamentos de mi diseño. Título, altura, anchura, color de fondo y de enlace / colores de los enlaces visitados. Después de llenar estos ajustes, hice clic en Aceptar y la vista del diseñador apareció. Una pantalla en blanco con las herramientas en el lado izquierdo y en la parte superior de la ventana.
Sólo se tomó un breve momento para familiarizarme con las herramientas que estaban allí, y era fácil saber lo que cada instrumento tenía un vistazo gracias por los iconos de colores. Todas las herramientas que no fueron etiquetados de forma directa (como la página, de relleno, efectos, Link, y las herramientas de Estilos) había tooltips mouseover y un diálogo útil explicar lo que hacen cuando se utilizan las primeras veces que se puede desactivar a través de un "no No mostrar este diálogo la próxima vez "casilla de verificación.
No hubo divs, sin etiquetas HTML, no estilos CSS, el diseñador de todo es verdaderamente WYSIWYG. Crear el diseño de mi página fue Braindead simple: elegir la forma de rectángulo de herramientas, le dan un color, dibujar. Me llamó la cabecera, barras laterales, y pie de página en cuestión de segundos, y fue capaz de ajustar sus formas, colores y tamaños en la ventana de objeto. La ventana de objeto es una característica poco clara, sino que flota como una pequeña ventana separada, y cambia para representar la configuración de cualquier herramienta que usted ha seleccionado. De esta manera, usted nunca tiene que mirar alrededor para su configuración de la herramienta, que siempre están en la ventana de objeto de modo que siempre sabe dónde buscar.
Después de dibujar el diseño de la página, que era el momento de añadir el texto. Al hacer clic en la herramienta de texto cambió la ventana de objeto que me cambie la fuente y el tamaño de la familia, y pude ver que hay otras opciones que me permite hacer cosas como añadir sombras, o incluso girar texto si quería. Lamentablemente, este diseño no convocatoria de estas características en busca de diversión así que tuve que descartar por ahora y sólo de tipo normal, de color de texto.
Cuando hace clic en mi página con la herramienta de texto, un cuadro de texto en rojo apareció con una pequeña asa en la parte superior que podría utilizar para arrastrar, y las flechas izquierda / derecha en ambos lados de la caja, así que podría ampliar / reducirla. Me estiré el cuadro a un tamaño decente y escrito en el contenido, a continuación, puso de relieve el texto y el formato con los colores correctos / tamaño en la ventana de objeto. Repitiendo este proceso para cada sección de mi página, se hizo con el contenido de la página en cuestión de minutos.
Del mismo modo, cayendo en las imágenes fue una brisa. Haga clic en la herramienta de imagen, busque la imagen, haga clic en Aceptar. Ahora usted puede arrastrar libremente en cualquier lugar de tu página. Una vez más, en la herramienta de objeto, lo vi más características que yo necesitaba, como agregar una luz / sombra, o la configuración de la imagen (esquinas redondeadas, pentágono, círculo, etc), pero una vez más mi diseño no convocatoria de este modo que tuve que jugar con los que más tarde.
En el momento en que tenía mi página expuesto todo el asunto era del 95% hecho, tuve un montón de objetos en la página. Barras laterales, una cabecera, un pie de página, una imagen de fondo para el encabezado, un pocos cuadros de texto, un par de imágenes ... ninguno de estos por sí mismos era ningún problema en absoluto para crear. Sin embargo, cuando tenía que volver atrás y cambiar algo, me encontré teniendo que vigilar cuidadosamente cuando hice clic en el ratón. No hay forma de "bloquear" los objetos en el lugar en el diseñador visual de la web, así que cuando yo quería para seleccionar el texto en una barra lateral, por ejemplo, tuve que tener cuidado para seleccionar el texto en lugar de la barra lateral, o bien yo podría terminar arrastrando la barra lateral por accidente o, peor aún, cambiando algunos de sus atributos. Esta no fue una falla importante, porque no es un multi-paso de deshacer en caso de que accidentalmente hacer algo como esto, pero toda la operación en el diseñador visual de la web parecía diseñado para ser rápido y suave, y en su mayor parte, se trataba, pero este pedacito de tecnicismo obstaculizado el "buen diseño sin preocupaciones" sensación de que cuando se utiliza el software.
Un tiempo muy grande en función de ahorro de diseñador visual de la web es su página de "copia" la función. Al hacer clic en "Añadir página" para crear una segunda página (que tenía que hacer para el interior), me dieron la opción de copiar una página existente. He copiado la página principal, y se creó una réplica exacta de la página que acababa de crear. Ahora, todo lo que tenía que hacer era ajustar la barra lateral izquierda y quitar la barra lateral sobre la derecha, a continuación, cambiar el contenido y se hizo con la segunda página. Si quisiera crear más páginas, definitivamente sería utilizar la función de copia de la página para mantener mi diseño y mantener intactas todas las páginas de uniforme.
Ni una vez tuvieron que escribir una línea de código HTML o CSS para hacer esto. De hecho, yo no podía: Diseñador web visual es totalmente WYSIWYG, que no tienen acceso directo a la página HTML / CSS. Diseñador web Visual maneja todo por ti en el fondo. Sin embargo, esto no quiere decir que si usted desea utilizar HTML no se puede, el diseñador de la web de Visual dispone de una herramienta de HTML que le permitirá insertar un objeto en HTML. Básicamente, esto crea un div de cualquier tamaño / forma / posición que desea, y usted puede insertar escrito a mano HTML, CSS, JavaScripts, lo que sea. Lamentablemente, por el bien de este proyecto, no pude usarla.
Así que, al final, esto es lo que la página que parecía de diseñador visual de la web:
Diseñador web Visual, página superior, en vista de diseño:
Y en un navegador, los diseños parecen bastante cerca de la página original.
Diseñador web Visual, página superior, en un navegador (Firefox 2):
Diseñador web Visual, página interior, en un navegador (Firefox 2):
Visual Designer ventajas de la web:
* Realmente rentable. A sólo $ 49.00 USD, en comparación con $ 399 (Dreamweaver), $ 299 (Expression Web) o $ 129 (Inicio, a través de Amazon.com).
* Realmente fácil de usar.
* De todos los programas, diseñador visual del sitio Web y de Expresión fue el más cercano a la reproducción de la página exactamente.
* En verdad WYSIWYG, sin necesidad de conocimientos de HTML o CSS. Extremadamente los principiantes.
* Más rápido de todos los editores de Web para completar el trabajo.
* Construida en un solo clic en Cargar.
* Maneja todos sus archivos para usted.
* Todas las herramientas de la sensación de exclusividad, que comparten la misma ventana de propiedades para que siempre sepa dónde buscar para cambiar la configuración.
* Muchas formas para elegir, y guías irremplazables con coordenadas XY hacer más fácil el diseño de un diseño.
* Creación de nuevas páginas de su sitio, manteniendo el mismo diseño que es fácil, basta con crear una nueva página, y seleccionar la página de "copia" la función para copiar una página ya existente y simplemente cambia el contenido.
Visual Designer contras de la web:
* No se vista de código, no se puede editar el código HTML directamente (sin embargo, hay una herramienta de HTML que le permitirá un uso avanzado de HTML y scripts en su página en una forma basada en objetos).
* No se puede editar las páginas que ya existen. CIV sólo pueden crear nuevos sitios, o modificar los sitios web que ha creado.
* Haga clic con cuidado, usted no quiere mover accidentalmente algunos de los elementos de la página si tiene varios apilados uno encima del otro. Esto no es un defecto importante, porque siempre se puede deshacer, pero si estás en un apuro de forma accidental, puede seleccionar un objeto que no desea seleccionado.
Entonces, ¿el mundo de mañana los diseñadores necesitan?
Diablos, sí. En pocas palabras, yo no recomendaría a nadie Frontpage 2003 para cualquier propósito, para ser perfectamente honesto. Dreamweaver CS3, sin embargo, podría ser una buena aplicación para el desarrollo web graves para aquellos que ya conocen la parte técnica de las cosas, y realmente creo que podría ser bueno para los desarrolladores web en un entorno profesional, pero debido a su alta "técnico-ness , "definitivamente no es una herramienta que podría permitir que el Joe medio crear una" Web 2.0 "del sitio.
Expression Web y Visual Designer de la web, sin embargo, son pasos en la dirección correcta, si ofrece fácil de utilizar las herramientas WYSIWYG es el futuro del diseño web. En una revisión de la realidad, sin embargo, en la mayoría de estos programas, no podría haber creado algo cercano a los diseños que hice anteriormente, si no estaba familiarizada con el diseño web. Si yo fuera a desafiar el Joe promedio con el proyecto anterior (exactamente a copiar un diseño ya existente a partir de cero), que tendría que sentarse a hacer algunas investigaciones en primer lugar, y me imagino que es razonable pensar que eso podría tomar días para llevar a cabo la tarea.
La única excepción es diseñador visual de la web, en la que básicamente se puede simplemente llamar la página. Pero incluso con este software intuitivo y rápido-a-maestro, las herramientas no son un substituto para el conocimiento y habilidad en el campo del diseño.
Expression Web y diseñador visual de la web son dos herramientas de Grado A, pero profesionales y aficionados, incluso los diseñadores Web están muy lejos de ser sustituidos por tales instrumentos, aunque los principiantes, intermedios y veteranos pueden encontrar algo que como en estos dos programas.
El siniestro, levantamiento inminente de la inteligencia artificial que diseña sitios web maníaca, por el contrario, puede ser algo de qué preocuparse ...
Dentro de cada div que podía escribir y editar texto o añadir imágenes / cuadros / lists / lo que sea, como si cada div era su propio documento de Word poco, utilizando todas las herramientas familiares de Microsoft Word. Esto hizo que añadir los divs y su contenido fácil. Así que en pocos minutos, yo tenía cinco divs en mi página en bloques, todos llenos de todo su contenido en 12-point Times New Roman. Ahora venía la parte difícil: todo un estilo. Si este iba a ser algo parecido a los programas WYSIWYG otros que he usado (ver arriba), esto sería un ejercicio de tropezar sin rumbo hasta que encontré lo que necesitaba.
Afortunadamente, Expression Web no son los otros programas. Me di cuenta de una "nueva" que aparece en la parte derecha de la ventana de Expresión Web. He hecho clic en él. Un diálogo apareció con un menú en el lado izquierdo con las modificaciones más comúnmente utilizadas CSS. Secciones como "Box" para rellenar el modelo de caja (y márgenes), "Diseño" para el posicionamiento y flotante, "List" (lista para cuando se desea que el estilo, no me hacen mucho uso de esto, pero hizo fácil cambiar el tipo de bala, cuando yo necesitaba, y pude ver que sea fácil de crear un flotaba-navbar lista con este), y otros como "Antecedentes", "Fuente", y así sucesivamente. Este diálogo fue bastante intuitivo, y como siempre que se sepa los fundamentos de la CSS, se puede tropezar en ella como en torno a un usuario intermedio y lograr lo que estás buscando. Fui capaz de usar este diálogo para asignar fondos, márgenes y el relleno, flotando, y el posicionamiento a todos mis divs, porque hay una marca poco clara en la parte superior del diálogo que dice "se aplican al objeto página seleccionada." Así que si seleccionar un div todo, se hace la CSS. Seleccione sólo una palabra o elemento li, y sólo el que consigue el estilo. Y yo no tenía a mano el código un poco de ella.
Como he añadido estilos para todos mis divs, saltaron por toda la página para encajar en su lugar. Cosas (como el pie de página) que se ajusta a "claro: tanto" (a través de la modalidad de diseño) saltó a la parte inferior de la página y llena todo el ancho de la ventana, como se pretendía. El texto que debe envolver envuelto en todos los lugares correctos, Expression Web manejado bastante bien.
En este punto, mi página fue esencialmente hecho. Sólo necesitaba para hacer algunos retoques a la página. Aquí es donde las cosas empezaron a ponerse un poco más difícil. Intuitivamente, yo sería capaz de seleccionar cualquiera de mis divs u otros elementos dentro de los divs y pulse el botón derecho, y luego editar el CSS en el mismo diálogo que he creado de entrada, sino que, al intentar algo como esto, le lanza Expression Web a la vista de Split, mostrando el HTML puro / CSS de la página en un panel superior y la vista de diseño en el panel inferior. Este fue estremecedora, yo no quería modificar el código (que no era el punto de mi proyecto), quería cambiar el CSS en el diseño.
Resulta que hay un "Administrar estilos" panel de la derecha que tiene una lista de todos los estilos que has creado. Si mouseover cualquier elemento de tu página, te dice qué estilo que está utilizando. A continuación, encontramos que el estilo en el Administrador de estilos, haga clic en él y, a continuación, haga clic en Modificar estilo. Creo que "Editar Estilo" habría sido una mejor redacción, y en segundo lugar, la búsqueda de esta característica fue estremecedora. Todo había salido tan bien hasta ese punto.
En cualquier caso, Modificar el estilo usando planteado que el diálogo mismo y hacer ajustes era bastante sencillo. Sin embargo, tuve que hacer varios ajustes (quería ir de nuevo a algunos divs y añadir un borde inferior, y yo también quería volver a un par de las listas y aplicar imágenes de bala costumbre; además, quería cambiar el vínculo colores sólo en un div). Hacer ajustes varios se consume demasiado tiempo, porque para cada uno de modificar, tuve que pasar el ratón el elemento que quería el cambio, averiguar qué nombre de estilo Expression Web había dado, y luego en el Administrador de estilos, haga clic en el estilo, Estilo y haga clic en Modificar y, a continuación, haga clic en Aplicar / Aceptar antes de que se hace el truco. Cuando tenga que hacer varios ajustes, esto no es la manera más intuitiva.
Después de realizar todos los ajustes necesarios, la página salió casi exactamente como yo quería en el diseñador.
Expression Web, página superior, en vista del diseñador:
Y los resultados en un navegador eran buenas también.
Expression Web, página superior, en un navegador (Firefox 2):
Expression Web, la página interior, en un navegador (Firefox 2):
Profesionales de Expression Web:
* Si usted conoce un poco de HTML / CSS, usted puede saltar adentro derecho
* Fácil de obtener el diseño de la página creada con divs varios.
* Grandes estilos de diálogo para ayudarle a estilo de una página entera o sólo un objeto individual.
* Casi todo lo que se explica por sí mismo.
* Fácil de escanear el programa con su ojo para encontrar la herramienta que necesitas.
* Cada div crear siente como un documento de Word mini, con texto de todas las herramientas de formato familiar.
* Software más fácil para alguien con un poco de conocimiento de HTML / CSS para sólo recoger y ejecutar con.
* Las páginas creadas en este software parecía prácticamente perfecta en los principales navegadores que probé en (IE7, Firefox 2, Safari, WebKit, Opera).
* De todos los programas, Expression Web y Visual Designer de la web fue la más cercana a la reproducción de la página tema exactamente. (Más información sobre la CIV en un poco).
Contras de Expression Web:
* Hacer ajustes menores es rápido ... Si desea hacer una pellizcar de menor importancia. Usted tiene que seguir una serie de pasos para cambiar algunas de las cosas más pequeñas, y si usted desea cambiar un montón de pequeñas cosas que se necesita más tiempo de lo que debería.
* El menú del botón derecho es semi-útil en vista de diseño, sino un "estilo" Edición "la opción que hacer maravillas para este programa, por lo que es correr suave como la seda en lugar de" muy bien ".
* Un gran programa, un poco de un alto precio. No es bueno para los principiantes.
Verdaderamente WYSIWYG: Diseñador web Visual
Ya he indicado que por encima de: Expression Web y Visual Designer de la web fue la más cercana a reproducir exactamente la página de tema exactamente. Pero, ¿cómo diseñador visual de la web realizar?
Si se me permite expresar la respuesta en una palabra: "realmente bien". (Bueno, dos palabras.) Al abrir el programa, me presentó con tres opciones: Nuevo Sitio Web, Open Web y uso de plantillas. Tentados como yo a navegar por las plantillas, no era mi objetivo. He hecho clic en Nuevo Sitio Web, y tengo un pequeño diálogo que me pide los fundamentos de mi diseño. Título, altura, anchura, color de fondo y de enlace / colores de los enlaces visitados. Después de llenar estos ajustes, hice clic en Aceptar y la vista del diseñador apareció. Una pantalla en blanco con las herramientas en el lado izquierdo y en la parte superior de la ventana.
Sólo se tomó un breve momento para familiarizarme con las herramientas que estaban allí, y era fácil saber lo que cada instrumento tenía un vistazo gracias por los iconos de colores. Todas las herramientas que no fueron etiquetados de forma directa (como la página, de relleno, efectos, Link, y las herramientas de Estilos) había tooltips mouseover y un diálogo útil explicar lo que hacen cuando se utilizan las primeras veces que se puede desactivar a través de un "no No mostrar este diálogo la próxima vez "casilla de verificación.
No hubo divs, sin etiquetas HTML, no estilos CSS, el diseñador de todo es verdaderamente WYSIWYG. Crear el diseño de mi página fue Braindead simple: elegir la forma de rectángulo de herramientas, le dan un color, dibujar. Me llamó la cabecera, barras laterales, y pie de página en cuestión de segundos, y fue capaz de ajustar sus formas, colores y tamaños en la ventana de objeto. La ventana de objeto es una característica poco clara, sino que flota como una pequeña ventana separada, y cambia para representar la configuración de cualquier herramienta que usted ha seleccionado. De esta manera, usted nunca tiene que mirar alrededor para su configuración de la herramienta, que siempre están en la ventana de objeto de modo que siempre sabe dónde buscar.
Después de dibujar el diseño de la página, que era el momento de añadir el texto. Al hacer clic en la herramienta de texto cambió la ventana de objeto que me cambie la fuente y el tamaño de la familia, y pude ver que hay otras opciones que me permite hacer cosas como añadir sombras, o incluso girar texto si quería. Lamentablemente, este diseño no convocatoria de estas características en busca de diversión así que tuve que descartar por ahora y sólo de tipo normal, de color de texto.
Cuando hace clic en mi página con la herramienta de texto, un cuadro de texto en rojo apareció con una pequeña asa en la parte superior que podría utilizar para arrastrar, y las flechas izquierda / derecha en ambos lados de la caja, así que podría ampliar / reducirla. Me estiré el cuadro a un tamaño decente y escrito en el contenido, a continuación, puso de relieve el texto y el formato con los colores correctos / tamaño en la ventana de objeto. Repitiendo este proceso para cada sección de mi página, se hizo con el contenido de la página en cuestión de minutos.
Del mismo modo, cayendo en las imágenes fue una brisa. Haga clic en la herramienta de imagen, busque la imagen, haga clic en Aceptar. Ahora usted puede arrastrar libremente en cualquier lugar de tu página. Una vez más, en la herramienta de objeto, lo vi más características que yo necesitaba, como agregar una luz / sombra, o la configuración de la imagen (esquinas redondeadas, pentágono, círculo, etc), pero una vez más mi diseño no convocatoria de este modo que tuve que jugar con los que más tarde.
En el momento en que tenía mi página expuesto todo el asunto era del 95% hecho, tuve un montón de objetos en la página. Barras laterales, una cabecera, un pie de página, una imagen de fondo para el encabezado, un pocos cuadros de texto, un par de imágenes ... ninguno de estos por sí mismos era ningún problema en absoluto para crear. Sin embargo, cuando tenía que volver atrás y cambiar algo, me encontré teniendo que vigilar cuidadosamente cuando hice clic en el ratón. No hay forma de "bloquear" los objetos en el lugar en el diseñador visual de la web, así que cuando yo quería para seleccionar el texto en una barra lateral, por ejemplo, tuve que tener cuidado para seleccionar el texto en lugar de la barra lateral, o bien yo podría terminar arrastrando la barra lateral por accidente o, peor aún, cambiando algunos de sus atributos. Esta no fue una falla importante, porque no es un multi-paso de deshacer en caso de que accidentalmente hacer algo como esto, pero toda la operación en el diseñador visual de la web parecía diseñado para ser rápido y suave, y en su mayor parte, se trataba, pero este pedacito de tecnicismo obstaculizado el "buen diseño sin preocupaciones" sensación de que cuando se utiliza el software.
Un tiempo muy grande en función de ahorro de diseñador visual de la web es su página de "copia" la función. Al hacer clic en "Añadir página" para crear una segunda página (que tenía que hacer para el interior), me dieron la opción de copiar una página existente. He copiado la página principal, y se creó una réplica exacta de la página que acababa de crear. Ahora, todo lo que tenía que hacer era ajustar la barra lateral izquierda y quitar la barra lateral sobre la derecha, a continuación, cambiar el contenido y se hizo con la segunda página. Si quisiera crear más páginas, definitivamente sería utilizar la función de copia de la página para mantener mi diseño y mantener intactas todas las páginas de uniforme.
Ni una vez tuvieron que escribir una línea de código HTML o CSS para hacer esto. De hecho, yo no podía: Diseñador web visual es totalmente WYSIWYG, que no tienen acceso directo a la página HTML / CSS. Diseñador web Visual maneja todo por ti en el fondo. Sin embargo, esto no quiere decir que si usted desea utilizar HTML no se puede, el diseñador de la web de Visual dispone de una herramienta de HTML que le permitirá insertar un objeto en HTML. Básicamente, esto crea un div de cualquier tamaño / forma / posición que desea, y usted puede insertar escrito a mano HTML, CSS, JavaScripts, lo que sea. Lamentablemente, por el bien de este proyecto, no pude usarla.
Así que, al final, esto es lo que la página que parecía de diseñador visual de la web:
Diseñador web Visual, página superior, en vista de diseño:
Y en un navegador, los diseños parecen bastante cerca de la página original.
Diseñador web Visual, página superior, en un navegador (Firefox 2):
Diseñador web Visual, página interior, en un navegador (Firefox 2):
Visual Designer ventajas de la web:
* Realmente rentable. A sólo $ 49.00 USD, en comparación con $ 399 (Dreamweaver), $ 299 (Expression Web) o $ 129 (Inicio, a través de Amazon.com).
* Realmente fácil de usar.
* De todos los programas, diseñador visual del sitio Web y de Expresión fue el más cercano a la reproducción de la página exactamente.
* En verdad WYSIWYG, sin necesidad de conocimientos de HTML o CSS. Extremadamente los principiantes.
* Más rápido de todos los editores de Web para completar el trabajo.
* Construida en un solo clic en Cargar.
* Maneja todos sus archivos para usted.
* Todas las herramientas de la sensación de exclusividad, que comparten la misma ventana de propiedades para que siempre sepa dónde buscar para cambiar la configuración.
* Muchas formas para elegir, y guías irremplazables con coordenadas XY hacer más fácil el diseño de un diseño.
* Creación de nuevas páginas de su sitio, manteniendo el mismo diseño que es fácil, basta con crear una nueva página, y seleccionar la página de "copia" la función para copiar una página ya existente y simplemente cambia el contenido.
Visual Designer contras de la web:
* No se vista de código, no se puede editar el código HTML directamente (sin embargo, hay una herramienta de HTML que le permitirá un uso avanzado de HTML y scripts en su página en una forma basada en objetos).
* No se puede editar las páginas que ya existen. CIV sólo pueden crear nuevos sitios, o modificar los sitios web que ha creado.
* Haga clic con cuidado, usted no quiere mover accidentalmente algunos de los elementos de la página si tiene varios apilados uno encima del otro. Esto no es un defecto importante, porque siempre se puede deshacer, pero si estás en un apuro de forma accidental, puede seleccionar un objeto que no desea seleccionado.
Entonces, ¿el mundo de mañana los diseñadores necesitan?
Diablos, sí. En pocas palabras, yo no recomendaría a nadie Frontpage 2003 para cualquier propósito, para ser perfectamente honesto. Dreamweaver CS3, sin embargo, podría ser una buena aplicación para el desarrollo web graves para aquellos que ya conocen la parte técnica de las cosas, y realmente creo que podría ser bueno para los desarrolladores web en un entorno profesional, pero debido a su alta "técnico-ness , "definitivamente no es una herramienta que podría permitir que el Joe medio crear una" Web 2.0 "del sitio.
Expression Web y Visual Designer de la web, sin embargo, son pasos en la dirección correcta, si ofrece fácil de utilizar las herramientas WYSIWYG es el futuro del diseño web. En una revisión de la realidad, sin embargo, en la mayoría de estos programas, no podría haber creado algo cercano a los diseños que hice anteriormente, si no estaba familiarizada con el diseño web. Si yo fuera a desafiar el Joe promedio con el proyecto anterior (exactamente a copiar un diseño ya existente a partir de cero), que tendría que sentarse a hacer algunas investigaciones en primer lugar, y me imagino que es razonable pensar que eso podría tomar días para llevar a cabo la tarea.
La única excepción es diseñador visual de la web, en la que básicamente se puede simplemente llamar la página. Pero incluso con este software intuitivo y rápido-a-maestro, las herramientas no son un substituto para el conocimiento y habilidad en el campo del diseño.
Expression Web y diseñador visual de la web son dos herramientas de Grado A, pero profesionales y aficionados, incluso los diseñadores Web están muy lejos de ser sustituidos por tales instrumentos, aunque los principiantes, intermedios y veteranos pueden encontrar algo que como en estos dos programas.
El siniestro, levantamiento inminente de la inteligencia artificial que diseña sitios web maníaca, por el contrario, puede ser algo de qué preocuparse ...
Suscribirse a:
Entradas (Atom)
Entradas
