Dreaweaver cs5

DREAWEAVER CS5.5www.centrodeentrenamiento.mx

Jonathan Cordoba MartinezSpecialization Teaching, Learning and Facilitating Educational Change

Macromedia Certified Dreamweaver MX 2004 Designer and Dreamweaver CS2 Developer ASP

Macromedia Certified Flash MX 2004ACE Flash CS1 Desingner

15 years1996-2012Web Graphic Designer and DeveloperCommunity Manager “Social Media” EspecialistMarketing Traditional, Web, Online, SEO Support

La innovación es lo que distingue a un líder de los demásSteve Jobs

http://www.centrodeentrenamiento.mx/

En México 70%* de los usuarios de Internet utilizan esta plataforma como fuente primaria de información cuando están planeando una compra

70 millones de usuarios online en México Acceso a Computadoras, Smartphones,

Tablets e internet publicos Clase Media Baja, Media y Alta esta en

crecimiento constante 40% de poblacion. Fuente Secretaria de Economia Federal

Datos Relevantes

The jumpstart method for completing individual lessons treats each folder as a stand-alone website

To jumpstart a lesson, copy the lesson folder to your hard drive and create a new site for that lesson using the Site Setup dialog box.

JumpStart Method

1 Choose Site > New Site.

The Site Setup dialog box appears.

2 In the Site Name fi eld, enter the name of the lesson, such as lesson06.

3 Next to the Local Site Folder fi eld, click the Browse icon. Navigate to

the

lesson folder you copied

4 Click the arrow next to the Advanced Settings category to reveal the

tabs listed there. Select the Local Info category.

5 Next to the Default Images Folder fi eld, click the Browse icon. When

the dialog box opens, navigate to the Images folder contained within the lesson

folder and click Select/Choose.

6 In the Site Setup dialog box, click Save.

7 The name of the currently active website will appear in the Files panel

Show pop-up menu. If necessary, press F8

JumpStart Method

In Dreamweaver CS5, locate the Application bar. If necessary, choose Window > Application Bar to display it.

2 Th e default workspace is called Designer. If it is not displayed, use the pop-up menu in the Application bar to choose it.

Setting up the workspace

WINDOWS MACINTOSH Control = Ctrl Command = Cmd Alternate = Alt Option = Opt

Examples Ctrl + S = salvar Ctrl + N = Nuevo Ctrl + B = negritas

Windows vs Mac Instrucciones

In Dreamweaver, choose Help > Updates. Th e Adobe Updater automatically checks for updates for your Adobe software.

Updates

Demostración de Adobe TV

1 Lesson Overview In this lesson, you’ll familiarize yourself with

the Dreamweaver CS5 program interface and learn how to:

Switch views Work with panels Adjust toolbars Select a workspace layout Personalize preferences Use the Property inspector

CUSTOMIZING YOURWORKSPACE

Dreamweaver offers a customizable and easy-to-useWYSIWYG HTML editor that doesn’t compromise whenit comes to power and flexibility.

You’d probably need a dozen programs to perform all the tasks that Dreamweavercan do and none of them would be as fun to use.

Coders love the variety of enhancements built into the Code view environment,and developers enjoy the program’s support for ASP, PHP, ColdFusion, and JavaScript, among other programming languages.

Designers marvel at seeing their text and graphics appear in an accurate What You See Is What You Get (WYSIWYG) depiction as they work, saving hours of time previewing pages in browsers.

Touring the workspace

Views (Design, Code and Split)Design view

focuses the Dreamweaver workspace on its WYSIWYG editor, whichprovides a close, but not perfect, depiction of the web page as it would appearin a browser. To activate Design view, click the Design view button in theDocument toolbar.

Views (Design, Code and Split)

Code view focuses the Dreamweaver workspace exclusively on the HTML code anda variety of code-editing productivity tools. To access Code view, click the Codeview button in the Document toolbar


Split view provides a composite workspace that gives you access to both the designand code simultaneously. Changes made in either window update in the otherinstantly. To access Split view, click the Split view button in the Document toolbar.


Panels

Panels Minimizing

Doble Click Mi chavo

Panels Floating

Panels Dragging

Panels Dragging

Grouping, stacking, and docking

Grouping, stacking, and docking

Selecting a workspace layout

ToolbarsSome program features are so handy you may want them available all the time in the form of a toolbar. Four of the toolbars—Style Rendering, Document, Standard, and Browser Navigation—appear horizontally at the top of the document window.Th e Coding toolbar, however, appears vertically, but only in the Code view window. You will explore the capabilities of these toolbars in later exercises.

Personalizing preferences

Hacer ejercicio de Save All con nuevo set de comandos

Keyboard shotcuts

Using the HTML tab

Using the CSS tab

Using the Property inspector

Image Properties

Table properties (Via Tag Selector

Using the Property inspector

Review questions 1 Where can you access the command to display or hide any panel? 2 Where can you fi nd the Code, Design, and Split view buttons? 3 What can be saved in a workspace? 4 Do workspaces also load keyboard shortcuts? 5 What happens in the Property inspector when you insert the cursor into various elements on the web page?

Review answers 1 All panels are listed in the Window menu. 2 These buttons are components of the Document toolbar. 3 Workspaces can save the configuration of the document window, selected

panels, size,and their location on the screen. 4 No, keyboard shortcuts are loaded and preserved independently of a workspace. 5 Th e Property inspector adapts to the selected element, displaying pertinent information and formatting commands.

Preguntas y Respuestas (FAQ)


HTML and learn how to: Write HTML code by hand Understand HTML syntax Insert code elements Format text Add HTML structure Create HTML with Dreamweaver

HTML BASICS

HTML es la columna vertebral de la web, el esqueleto de sula página web. Al igual que los huesos de su cuerpo, es la estructuray el contenido de la Internet, aunque normalmente es invisibleexcepto por el diseñador de páginas web. Sin ella, la web no existe. Dreamweaver tiene muchas características que le ayudan a acceder,crear y editar el código HTML de forma rápida y efectively.

The web is based on Hypertext Markup Language (HTML). The language and the file format don’t belong to any individual program or company. In fact, it is a nonproprietary, plain-text language that can be edited in any text editor, in any operating system, on any computer.

Dreamweaver is an HTML editor at its core, although it is much more than this.

.html vs .pdf .psd .ppt .ai

HTML and the first browser were invented in the early 1990s by Tim Berners-Lee, a scientist working at the CERN (European Council for Nuclear Research)

He did not copyright or try to sell his work started a trend for openness and camaraderie on the web that continues today.

HTML father or creator ;)

Basic HTML Code Structure

Exercise 11 Launch Notepad.2 Enter the following code in the empty document window:<html><body>Welcome to my first web page</body></html>3 Save the file to the desktop as firstpage.html.4 Launch Internet Explorer, Safari, Firefox, or another installed web browser.5 Choose File > Open. Navigate to the desktop and select firstpage.html, and then click OK/Open.

Felicidades es tu primera pagina html programadaA la bio a la bao a la bim bom ba

Exercise 21.Switch back to the text editor without closing the browser.2 Insert your cursor at the end of the text “Welcome to my first page” and press Enter/Return to insert a paragraph return.3 Type Making web pages is fun, and then press the spacebar five times to insert five spaces. Finish by typing and easy! on the same line.4 Save the file.5 Switch to the browser and refresh the window to load the updated page

Exercise 3 <p></p> &nbsp1 Switch back to the text editor.2 Add the bold tags to the text as follows:<p>Making web pages is fun and easy!</p>To add letter spacing, or other special characters, within a line of text, HTMLprovides code elements called entities. Entities are entered into the codedifferently than tags. For example, the method for inserting a nonbreaking space is by typing the entity: 3 Replace the five spaces in the text with nonbreaking spaces, so that the textlooks like the following sample:<p>Making web pages is fun andeasy!</p>4 Save the file. Switch to the browser and reload or refresh the page display.The browser is now showing the paragraph return and desired spacing.

Exercise 4 <hi> al <h6>1 Switch back to the text editor.2 Add the bold tags to the text as follows:<h1>Welcome to my first web page</h1>3 Save the fi le. Switch to the browser and reload or refresh the page display.

Exercise 5 formato en línea1 Switch back to the text editor.2 Add the bold tags to the text as follows:<p>Making web pages is fun <strong><em>and easy!</em></strong></p>3 Save the fi le. Switch to the browser and reload or refresh the page display.

Muchos de los formatos, tanto en línea, se aplica correctamente el uso de hojas de estilo en cascada (CSS). Las etiquetas <strong> y <em> se encuentran entre los pocos que aún aceptableformas de aplicar el formato en línea utilizando elementos de código HTML estrictamente.

•Tasks background •Styles & Links•Title page

HeadCodigo Vital

•Text•Tables•Images (jpg, gif and png)•Movies and Flash

BodyContenido Visible

Estructura de un HTML

1Switch back to the text editor. 2 Add the bold tags and content to the text

as follows: <html> <head> <title>HTML Basics for Fun and Profit</title> </head> <body> 3 Save the fi le. Switch to the browser and

reload or refresh the page display

Exercise 6 Porque es importante el titulo?????

Que pasa si no pongo <title>

1 Launch Dreamweaver CS5.2 Choose File > New.3 In the New Document window, select Blank Page from the fi rst column.4 Select HTML from the Page Type column and <none> from the Layout column. Click Create.A new document window opens in Dreamweaver. The window may default to one of three displays: Code view, Design view, or Split view.5 If it’s not already selected, click the Code view button in the upper left of the document window.

If I can write HTML in any text editor, why do I need to use Dreamweaver?

6 Insert the cursor after the opening <body> tag and type Welcome to my second page following the tag.Dreamweaver makes it a simple matter to format the fi rst line as a heading 1.7 Move the cursor to the beginning of the text “Welcome to my second page.” Type < to open the code hinting feature.

Note how Dreamweaver automatically opens a drop-down list of compatiblecode elements. Th is is Dreamweaver’s code hinting feature. When activated, code hinting provides a drop-down list of applicable HTML, CSS, and JavaScript elements.

Exercise 7

8 Double-click h1 from the list to insert it in the code. Type > to close the element.9 Move the cursor to the end of the text. Type </ at the end of the sentence.Note how Dreamweaver closes the <h1> tag automatically. But most coders add the tags as they write, in the following way:10 Press Enter/Return to insert a line break. Type <.11 Type p and press Enter/Return to insert the element. Type > to close theelement.12 Type Making web pages in Dreamweaver is even more fun!, and then type </to close the <p> element.Tired of hand-coding yet? Dreamweaver off ers multiple ways for formattingyour content.

Exercise 7

13 Select the word “more.” In the Property inspector, click the B and the I buttons to apply the <strong> and <em> tags to the text. Th ese tags produce the appearance of bold and italic formatting on the selected text.14 Locate the Title fi eld at the top of the document window and select the“Untitled Document” text.15 Type HTML Basics, Page 2 in the Title fi eld.16 Press Enter/Return to complete the title.Th e Title fi eld enables you to change the content of the <title> element without having to work in the HTML code.Note that the new title text appears in the code replacing the original content.It’s time to save the fi le and preview it in the browser.17 Choose File > Save. Navigate to the desktop. Name the fi le secondpage. ClickSave.18 View in browser F12

Exercise 7

HTM

L T

ag

s F

req

uen

tly u

sed

HTM

L T

ag

s F

req

uen

tly u

sed

Review questions 1 What programs can open HTML fi les? 2 What does a markup language do? 3 HTML is comprised of how many code elements? 4 What are the three main parts of most web pages? 5 What’s the diff erence between a block and inline element?

Review answers 1 HTML is a plain-text language that can be opened and edited in any text editor

and viewed in any web browser. 2 It places tags contained within brackets < > around plain-text content to pass information concerning structure and formatting from one application to another. 3 Less than 100 codes are defi ned in the HTML specifi cations. 4 Most web pages are composed of three sections: a root, head, and body. 5 A block element creates a stand-alone element. An inline element can exist

within another element.

Preguntas y Respuestas (FAQ)


CSS and learn: CSS (cascading style sheets) terms and

terminology The difference between HTML and CSS

formatting How cascade, inheritance, descendant,

and specifi city theories affect how browsers apply CSS formatting

How CSS can format objects

CSS BASICS

Hojas de estilo da control de a la apariencia de unla página web. El lenguaje y la sintaxis es compleja y potente, y adaptable sin fin. Se necesita tiempo y dedicación para aprender y años en dominar. Un moderno diseñador web no puede vivir sin ellos.

Each of the nearly 100 HTML tags comes right out of the box with one or more default formats, characteristics, and/or behaviors. So if you don’t do anything, the text will already be formatted in a certain way. One of the essential tasks in mastering CSS is learning and understanding these defaults.

100 html tags

100 HTML TAGS

h1 { color: blue; } h1 { color: red; }

1 Browser defaults 2 External style sheet 3 Internal style sheet (in the head

section) 4 Inline style (inside an HTML element)

Teoria Cascada

h1 { color: blue; } h1 { font-family: Verdana; }

h1 { color: blue; font-family: Verdana; } div h1 { color: red; }

Teoria de Herencia

p { color: blue; font-family: Verdana; }

Teoria de Herencia

h1 { font-family: Verdana; color: blue; } div h1 { font-family: Impact; color: red; } div.product h1 { font-family: Times; color:

green; }

Teoria de decadencia

Positioning can be specified in relative terms (such as left, right, center, and so on)

absolute coordinates measured in pixels, inches,centimeters, or other standard measurement system.

Formato de Objetos

Tamaño

Bordes 3d

Fondos

Margenes y rellenos

4 Lesson Overview In this lesson, you’ll be introduced to the Dreamweaver

web page building features while learning how to work within its

workspace. You’ll learn how to do the following: • Set up a site in Dreamweaver • Create a new page using a CSS layout • Save a document • Modify the page title and change text headings • Insert text from an external document • Add foreground and background images • Create, modify, and select CSS styles • Preview your page in Live view and a browser

GETTING A QUICK START

Adobe Dreamweaver CS5 provides 16 diff erent CSS layouts. In this exercise, you’ll select and modify one. Th e CSS layouts are carefully built and tested to comply with web standards and to work cross-platform in all major browsers with no additional changes to the layout. Popular one-, two-, and three-column choices are included, specifi ed either in fi xed-width dimensions set in pixels or in relative measurements set in percentages: 1 Choose File > New. 2 In the New Document dialog box, from the fi rst column, select Blank Page. 3 In the Page Type column, select HTML. Dreamweaver allows you to create a wide range of page types. HTML is the page type most commonly used for building basic web pages. 4 In the Layout column, select “1 Column Fixed, Centered, Header And

Footer.” Th e preview for this layout displays a padlock ( ) symbol to indicate that the width is fi xed at a set number of pixels. Other layouts display a spring ( ) symbol to indicate that the width will expand or contract with the browser window. 5 Leave all other options at their default settings and click Create. Your new page appears in Dreamweaver as a document with fi ller text and default coloring. Th is is the document window where you add your own content and customize the appearance of the page.

Exercise 1 Seleccionar diseño CSS

After you’ve created a page, it’s a good practice to save it immediately:

1 Choose File > Save. Alternatively, you could press Ctrl-S/Cmd-S.

2 When the Save As dialog box appears, navigate to the DW-CIB folder.

Type greenstart.htm or greenstart.html in the Filename fi eld.

It’s a matter of personal preference whether you use three- or four-letter

extensions in your fi lenames; either will work fi ne on the web. Just remember

to be consistent. (Th is book will use .html.) 3 Click Save.

Exercise 2 Salvar documento

1 If necessary, choose File > Open Recent > greenstart.html.

2 Click the Design button to view the page in Design view.

3 In the Title fi eld of the document toolbar, select the placeholder text, Untitled

Document. 4 Type Get a green start with Meridien

GreenStart and press Enter/Return.

Exercise 3 Titulo de pagina

Dreamweaver’s CSS layouts are populated by sample headings, body text, and

colors. Placeholder headings and text help you visualize the layout as it will appear

when your final content is placed on the page. Changing the placeholders is a

simple process: 1 Double-click the placeholder text,

Instructions, to select it. Th n type It’s Easy

Being Green with GreenStart to replace it

Exercise 4

Exercise 6-10 en copias

1 ¿Cuál es la ventaja de utilizar un diseño CSS?2 ¿Cómo puede utilizar los selectores de etiquetas para determinar qué elemento CSS para editar?3 ¿Cómo se cambia el color de fondo en una sección de la página?4 ¿Qué capacidad especial no tiene una imagen de fondo, y cómo se puede utilizar paracrear efectos especiales FEP?5 ¿Cómo se puede crear la costumbre de formato CSS utilizando el inspector de propiedades?Revisión de las respuestas1 Los diseños de CSS incluidas con Dreamweaver han sido cuidadosamente construido y probado para funcionar sin problemas en todos los principales navegadores.2 Cuando se inserta el cursor en cualquier parte del contenido de la página, los nombres y el ordende los elementos en la pantalla selector de etiquetas se correlaciona directamente con la estructura de laElementos HTML en esa posición, con el elemento más alto padre situado más a la izquierda.3 Haga doble clic en la regla CSS que da formato al elemento y entrar en un color en elBackground-color field de la caja de diálogo de regla CSS Definición. Haga clic en Aceptar.4 Las imágenes de fondo se puede repetir varias veces, tanto vertical como horizontalmente. porsu combinación con el color de fondo, puede crear efectos especiales eff, como en 3D.5 En el inspector de propiedades, haga clic en el botón CSS. Seleccione el texto o un objeto dentro de la webpágina y luego elegir cualquiera de los comandos de formato en el inspector. Dreamweaverse creará una regla CSS personalizada basada en la selección y el formato.

FAQ

5 Lesson Overview In this lesson, you’ll learn: Th e basics of web page design theory

and strategy How to create design thumbnails and

wireframes How to insert and format new

components into a predefi ned CSS layout How to use Code Navigator to identify

CSS formatting How to check for browser compatibility

CREATING A PAGE LAYOUT

• ¿Cuál es el propósito del sitio web?• ¿Quién es el cliente?• ¿Cómo le va a llegar a nuestro cliente?

Tres preguntas

Dispositivos

Sistema Operativo

www.w3schools.com/browsers/browsers_stats.asp: Provides more

information about browser statistics. •

www.w3schools.com/browsers/browsers_os.asp: Gives the breakdown on

operating systems. •

www.w3schools.com/browsers/browsers_display.asp: Lets you fi nd out the

latest information on screen resolutions.

Estadisticas del dia de hoy

Scenario

Creando mapa del sitio

Estructura de la pagina

Crear bosquejos

Crear los wireframes o marcos