Dreaweaver cs5


Published on

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Dreaweaver cs5

  1. 1. La innovación es lo que distingue a un líder de los demásSteve Jobs www.centrodeentrenamiento.mx Jonathan Cordoba Martinez Specialization Teaching, Learning and Facilitating Educational Change Macromedia Certified Dreamweaver MX 2004 Designer and Dreamweaver CS2 Developer ASP Macromedia Certified Flash MX 2004 ACE Flash CS1 Desingner 15 years 1996-2012 Web Graphic Designer and Developer Community Manager “Social Media” Especialist Marketing Traditional, Web, Online, SEO Support
  2. 2.  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
  3. 3.  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.
  4. 4.  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
  5. 5.  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.
  6. 6.  WINDOWS MACINTOSH Control = Ctrl Command = Cmd Alternate = Alt Option = Opt Examples Ctrl + S = salvar Ctrl + N = Nuevo Ctrl + B = negritas
  7. 7.  In Dreamweaver, choose Help > Updates. Th e Adobe Updater automatically checks for updates for your Adobe software.
  8. 8.  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
  9. 9. Dreamweaver offers acustomizable andeasy-to-useWYSIWYG HTML editorthat doesn’tcompromise whenit comes to power andflexibility.You’d probably needa dozen programs toperform all the tasksthat Dreamweavercan do and none ofthem would be as funto use.
  10. 10.  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.
  11. 11. Design viewfocuses theDreamweaverworkspace on itsWYSIWYG editor,whichprovides a close,but not perfect,depiction of theweb page as itwould appearin a browser. Toactivate Designview, click theDesign viewbutton in theDocumenttoolbar.
  12. 12. Code viewfocuses theDreamweaverworkspaceexclusively onthe HTML codeanda variety ofcode-editingproductivitytools. To accessCode view, clickthe Codeview button inthe Documenttoolbar
  13. 13. Split viewprovides acompositeworkspace thatgives you accessto both the designand codesimultaneously.Changes made ineither windowupdate in theotherinstantly. Toaccess Split view,click the Split viewbutton in theDocumenttoolbar.
  14. 14. Doble Click Mi chavo
  15. 15. Some program features are so handy you may want them available allthe time in the form of a toolbar. Four of the toolbars—Style Rendering,Document, Standard, and Browser Navigation—appear horizontally atthe top of the document window.Th e Coding toolbar, however, appears vertically, but only in the Codeview window. You will explore the capabilities of these toolbars in laterexercises.
  16. 16.  Hacer ejercicio de Save All con nuevo set de comandos
  17. 17.  Using the HTML tab Using the CSS tab
  18. 18.  Image Properties Table properties (Via Tag Selector
  19. 19.  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.
  20. 20.  Lesson Overview In this lesson, you’ll familiarize yourself with 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
  21. 21. HTML es la columnavertebral de la web, elesqueleto de sula página web. Al igual quelos huesos de su cuerpo, esla estructuray el contenido de la Internet,aunque normalmente esinvisibleexcepto por el diseñador depáginas web. Sin ella, la webno existe. Dreamweavertiene muchas característicasque le ayudan a acceder,crear y editar el código HTMLde forma rápida y efectively.
  22. 22.  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.
  23. 23.  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.
  24. 24. 1 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 webbrowser.5 Choose File > Open. Navigate to the desktop and selectfirstpage.html, and then click OK/Open.
  25. 25. 1.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 fivetimes to insert five spaces. Finish by typing and easy! on the sameline.4 Save the file.5 Switch to the browser and refresh the window to load the updatedpage
  26. 26. 1 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 nonbreakingspace is by typing the entity: &nbsp;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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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.
  27. 27. 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.
  28. 28. 1 Switch back to the text editor.2 Add the bold tags to the text as follows:<p>Making web pages is fun&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 aceptable formas de aplicar el formato en línea utilizando elementos de código HTML estrictamente.
  29. 29. Head •Tasks background Codigo •Styles & Links •Title page Vital Body •Text •TablesContenido •Images (jpg, gif and png) Visible •Movies and Flash
  30. 30.  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
  31. 31. 1 Launch Dreamweaver CS5.2 Choose File > New.3 In the New Document window, select Blank Page from the fi rstcolumn.4 Select HTML from the Page Type column and <none> from theLayout column. Click Create.A new document window opens in Dreamweaver. The window maydefault 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 upperleft of the document window.
  32. 32. 6 Insert the cursor after the opening <body> tag and type Welcometo my second page following the tag.Dreamweaver makes it a simple matter to format the fi rst line as aheading 1.7 Move the cursor to the beginning of the text “Welcome to mysecond page.” Type < to open the code hinting feature.Note how Dreamweaver automatically opens a drop-down list ofcompatiblecode elements. Th is is Dreamweaver’s code hintingfeature. When activated, code hinting provides a drop-down list ofapplicable HTML, CSS, and JavaScript elements.
  33. 33. 8 Double-click h1 from the list to insert it in the code. Type > toclose the element.9 Move the cursor to the end of the text. Type </ at the end of thesentence.Note how Dreamweaver closes the <h1> tag automatically. But mostcoders 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 > toclose theelement.12 Type Making web pages in Dreamweaver is even more fun!, andthen type </to close the <p> element.Tired of hand-coding yet? Dreamweaver off ers multiple ways forformattingyour content.
  34. 34. 13 Select the word “more.” In the Property inspector, click the B andthe I buttons to apply the <strong> and <em> tags to the text. These tags produce the appearance of bold and italic formatting on theselected text.14 Locate the Title fi eld at the top of the document window andselect 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 originalcontent.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 lesecondpage. ClickSave.18 View in browser F12
  35. 35.  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.
  36. 36.  Lesson Overview In this lesson, you’ll familiarize yourself with 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
  37. 37. Hojas de estilo dacontrol de a laapariencia de unla página web.El lenguaje y lasintaxis es complejay potente, yadaptable sin fin. Senecesita tiempo ydedicación paraaprender y años endominar. Unmoderno diseñadorweb no puede vivirsin ellos.
  38. 38.  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.
  39. 39.  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)
  40. 40.  h1 { color: blue; } h1 { font-family: Verdana; } h1 { color: blue; font-family: Verdana; } div h1 { color: red; }
  41. 41.  p { color: blue; font-family: Verdana; }
  42. 42.  h1 { font-family: Verdana; color: blue; } div h1 { font-family: Impact; color: red; } div.product h1 { font-family: Times; color: green; }
  43. 43.  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.
  44. 44.  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
  45. 45.  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.
  46. 46.  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.
  47. 47.  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.
  48. 48.  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
  49. 49.  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 para crear efectos especiales FEP? 5 ¿Cómo se puede crear la costumbre de formato CSS utilizando el inspector de propiedades? Revisión de las respuestas 1 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 orden de los elementos en la pantalla selector de etiquetas se correlaciona directamente con la estructura de la Elementos 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 el Background-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. por su 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 web página y luego elegir cualquiera de los comandos de formato en el inspector. Dreamweaver se creará una regla CSS personalizada basada en la selección y el formato.
  50. 50.  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
  51. 51.  • ¿Cuál es el propósito del sitio web? • ¿Quién es el cliente? • ¿Cómo le va a llegar a nuestro cliente?
  52. 52.  www.w3schools.com/browsers/browsers_stat s.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_dis play.asp: Lets you fi nd out the latest information on screen resolutions.