Dreaweaver cs5
Download as PPTX, PDF1 like2,222 views
Steve Jobs said that innovation is what distinguishes a leader from others. Innovation is what allows individuals and companies to stay ahead of the competition. Dreamweaver is a powerful and flexible HTML editor that allows both designers and developers to work efficiently. It provides features for visual editing in Design view as well as powerful code editing capabilities in Code view.
Dreaweaver cs5
- 1. La innovación es lo que distingue a un líder de los demás Steve 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. 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. 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. 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. 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. WINDOWS MACINTOSH Control = Ctrl Command = Cmd Alternate = Alt Option = Opt Examples Ctrl + S = salvar Ctrl + N = Nuevo Ctrl + B = negritas
- 7. In Dreamweaver, choose Help > Updates. Th e Adobe Updater automatically checks for updates for your Adobe software.
- 9. 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
- 10. Dreamweaver offers a customizable and easy-to-use WYSIWYG HTML editor that doesn’t compromise when it comes to power and flexibility. You’d probably need a dozen programs to perform all the tasks that Dreamweaver can do and none of them would be as fun to use.
- 11. 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.
- 13. Design view focuses the Dreamweaver workspace on its WYSIWYG editor, which provides a close, but not perfect, depiction of the web page as it would appear in a browser. To activate Design view, click the Design view button in the Document toolbar.
- 14. Code view focuses the Dreamweaver workspace exclusively on the HTML code and a variety of code-editing productivity tools. To access Code view, click the Code view button in the Document toolbar
- 15. Split view provides a composite workspace that gives you access to both the design and code simultaneously. Changes made in either window update in the other instantly. To access Split view, click the Split view button in the Document toolbar.
- 18. Doble Click Mi chavo
- 24. Some 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.
- 26. Hacer ejercicio de Save All con nuevo set de comandos
- 27. Using the HTML tab Using the CSS tab
- 28. Image Properties Table properties (Via Tag Selector
- 29. 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.
- 30. 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
- 31. HTML es la columna vertebral de la web, el esqueleto de su la página web. Al igual que los huesos de su cuerpo, es la estructura y el contenido de la Internet, aunque normalmente es invisible excepto 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.
- 32. 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.
- 33. 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.
- 35. 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 web browser. 5 Choose File > Open. Navigate to the desktop and select firstpage.html, and then click OK/Open.
- 36. 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 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
- 37. 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, HTML provides code elements called entities. Entities are entered into the code differently 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 text looks like the following sample: <p>Making web pages is fun and easy!</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.
- 38. 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.
- 39. 1 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 aceptable formas de aplicar el formato en línea utilizando elementos de código HTML estrictamente.
- 40. Head •Tasks background Codigo •Styles & Links •Title page Vital Body •Text •Tables Contenido •Images (jpg, gif and png) Visible •Movies and Flash
- 41. 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
- 43. 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.
- 44. 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.
- 45. 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 the element. 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 formatting your content.
- 46. 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. Click Save. 18 View in browser F12
- 49. 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.
- 50. 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
- 51. Hojas de estilo da control de a la apariencia de un la 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.
- 56. 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.
- 58. 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)
- 59. h1 { color: blue; } h1 { font-family: Verdana; } h1 { color: blue; font-family: Verdana; } div h1 { color: red; }
- 60. p { color: blue; font-family: Verdana; }
- 61. h1 { font-family: Verdana; color: blue; } div h1 { font-family: Impact; color: red; } div.product h1 { font-family: Times; color: green; }
- 62. 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.
- 67. 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
- 68. 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.
- 69. 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.
- 70. 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.
- 71. 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
- 73. 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.
- 74. 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
- 75. • ¿Cuál es el propósito del sitio web? • ¿Quién es el cliente? • ¿Cómo le va a llegar a nuestro cliente?
- 78. 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.