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.
8.
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.
12.
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.
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.
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.
25.
26. Hacer ejercicio de Save All con nuevo set de
comandos
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.
34.
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
42.
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
47.
48.
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.
52.
53.
54.
55.
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.
57.
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)
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.
63.
64.
65.
66.
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
72.
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?
76.
77.
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.
