Adobe Dreamweaver Cc Classroom In A Book Pdf Free Download – Wakelet.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Responsive websites. Really fast. Get Dreamweaver as part of Adobe Creative Cloud for just US$/mo. Free trial. Learn Adobe Dreamweaver CC with this full-color book and DVD training package You may be eager to learn how to use Adobe Dreamweaver CC (Creative Cloud) to. Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software. books as you like for personal use. More.
 
 

 

GAINAKO – Guardianship and Independence.[*] Read/Download Adobe Dreamweaver Classroom in a Book ( Release) Kindle Ebook

 
The CSS Designer can be displayed in one or two columns.

 
 

Adobe Dreamweaver Classroom in a Book ( release) [Book] – Individual Purchases

 
 

In this exercise, you will learn how to apply inline formatting. Most formatting, both inline and otherwise, is properly applied using cascading style sheets CSS. Technically speaking, these elements are intended more to add semantic meaning to text content than to add styling, but the result is the same. However, this may change in the near future.

There has been a move to separate the content from its presentation, or formatting, over the last decade. Although most browsers and HTML readers currently apply default formatting based on specific tags, this may not always be the case.

These elements create the essential underlying structure of the webpage. The root element contains all the code and content, with the exception of any dynamic code that must load before the page content itself. A webpage can exist without this section, but adding any advanced functionality to this page without one would be difficult.

Add the highlighted tags and content as shown here: Click here to view code image. Note In some instances, tabs may be turned off by default when single pages are displayed. Did you notice what changed? It may not be obvious at first.

Look at the title bar or window tab of the browser. Google, Yahoo! The content of the title is one of the items typically displayed within the results of a search. It also appears automatically when you create a bookmark for that page in your browser. A well-titled page could be ranked higher than one with a bad title or one with none at all. Keep your titles short but meaningful. In this exercise, you will re-create the same sample webpage using Dreamweaver.

Launch Dreamweaver CC release or later. In the New Document dialog, select the New Document category. In the Framework section, choose the None tab. Click Create. The document window may default to one of four displays: Live view, Code view, Design view, or Split view. The basic structure of the page is already in place, including the root, head, body, and title elements, among others. Another advantage is evident when you need to view the results of your coding efforts.

The text editor required the use of a separate application to preview the HTML code. Dreamweaver provides a built-in method.

Click the Split view button. In Split view, the interface is divided into two windows. One will show the HTML code; the other can be used to provide an accurate preview of the finished webpage. This preview alone can save you hours of time loading and previewing pages in a separate application.

If necessary, activate Live view in Split view. The program interface should now be divided in half, displaying Code view in one window and Live view in another. Dreamweaver also makes it easy to write HTML code. Note Split view may use either Live view or Design view to display side by side or top to bottom with the Code window.

For simple pages like this, either one will do. Live view renders the HTML code as it would appear in a web browser. After you enter the text, it may appear immediately in the Live view window. However, sometimes you may need to refresh the preview to see the changes. Click in the Live view window to refresh the preview, if necessary. The text appears in Live view without any special formatting. A drop-down menu appears next to the cursor.

You can continue typing the tag name manually or select it using the mouse or keyboard. Double-click h1 from the list to insert it in the code. Note Depending on your preference settings, Dreamweaver may create only the opening tag or the entire element at once.

The following steps assume that only the opening tag is created. Feel free to adjust the code-completion preferences to your liking. Type Making webpages in Dreamweaver is even more fun! Tired of hand-coding yet? Dreamweaver offers multiple ways to write code automatically. This panel is an important component to many workflows in Dreamweaver. If it appears as a floating panel, you can dock it to the bottom of the document window so that it will be handy when you need it.

See Lesson 1 for more information on how to customize the Dreamweaver interface. These tags produce the appearance of bold and italic formatting on the selected text. Something missing? When you reached for the B and I buttons in step 24, were they missing? When you make changes in Code view, the Property inspector occasionally needs to be refreshed before you can access the formatting commands and metadata fields featured there. Simply click the Refresh button to make the formatting commands and other tools reappear.

Only two more tasks remain before your new page is complete. You could select the text within the code window and enter a new title, or you could change it using another built-in feature. Locate the Document Title field in the Property inspector, and select the Untitled Document placeholder text. The new title text appears in the code, replacing the original content. Navigate to the folder lesson02bonus. Name the file mysecondpage and click Save.

Note Dreamweaver uses the browsers already installed on your computer. You may install additional, alternate browsers and configure their use in the Dreamweaver Preferences dialog. Right-click the document tab displaying the name of the file. Select Open In Browser from the context menu, and select your favorite browser. The completed page appears in the browser window. Using Dreamweaver you completed the task in a fraction of the time it took you to do it manually in a text editor. You have just completed two webpages—one by hand and the other using Dream-weaver.

In both cases, you can see how HTML played a central role in the whole process. To learn more about this technology, go to the website of the W3 Consortium, www. This lesson will take about 1 hour and 15 minutes to complete. Define a site based on the lesson03 folder. Cascading style sheets control the look and feel of a webpage. The language and syntax of CSS are complex, powerful, and endlessly adaptable. What is CSS? HTML was never intended to be a design medium.

Other than allowing for bold and italic, version 1 lacked a standardized way to load fonts or even format text. Designers resorted to various tricks to produce the desired results. For example, they used HTML tables to simulate multicolumn and complex layouts for text and graphics, and they used images when they wanted to display typefaces other than Times or Helvetica. HTML-based formatting was so misguided a concept that it was deprecated from the language less than a year after it was formally adopted in favor of cascading style sheets CSS.

Using CSS lets you strip the HTML code down to its essential content and structure and then apply the formatting separately so that you can more easily tailor the webpage to specific devices and applications.

By adding cell padding and margins to the table structure in Dreamweaver left , you can see how this webpage relies on tables and images to produce the final design right. Note We removed many of the hands-on exercises and moved them to an online bonus lesson. Note To save ink, screen shots in this and all subsequent lessons were taken using the lightest UI and the Classic code-coloring theme. You are free to use the default dark UI and code theme if you prefer it, or any custom setting of your own choosing.

The program and lessons will perform identically in any UI color settings. Name the site lesson Note Code and Live view windows can be swapped top to bottom and left to right by selecting the option under the View menu.

Replace the word «blue» with «green» in each line in which it appears. If necessary, click the mouse cursor in the Live view window to update the display. The text displays in green now in each line where you changed the color value. Make a mistake, like typing greeen or geen, and the browser will ignore the color formatting entirely. Note that the code contains only two color:blue; attributes. If necessary, click in the Live view window to update the display.

Note Dreamweaver usually defaults to Live view when you open or create a new page. In Live view, all the heading elements display in green. The paragraph elements remain blue. Click in the Live view window to update the display. In Live view, all the paragraph elements have changed to green. Close all files and do not save the changes.

Now think how tedious it would be to go through thousands of lines of code and hundreds of pages on a site to make such a change. This exercise highlights just a small sample of the formatting power and productivity enhancements offered by CSS, unmatched by HTML alone.

So even if you did nothing, much of your text would already be formatted in a certain way in most browsers. One of the essential tasks in mastering CSS is learning and understanding these defaults and how they may affect your content. If necessary, select Live view to preview the contents of the file. The file contains a range of HTML headings and text elements. Each element visually exhibits basic styling for traits such as size, font, and spacing, among others.

Switch to Split view. A quick look will tell you that there is no overt styling information in the file, yet the text still displays different kinds of formatting. So where does the formatting come from?

And, more importantly, what are the settings being used? The answer is: It depends. In the past, HTML 4 elements drew characteristics from multiple sources. The first place to look is the W3C. The style sheet defines the standard formatting and behaviors of all HTML elements.

The browser vendors used this style sheet on which to base their default rendering of HTML elements. But that was before HTML5. HTML5 defaults? If you look for a default style sheet for HTML5 on w3. At the moment, there are no public moves to change this relationship, and browser manufacturers are still honoring and applying HTML 4 default styling to HTML5-based webpages. Join the club. The ramifications of this trend could be dramatic and wide reaching. Someday, in the not-too- distant future, HTML elements may not display any formatting at all by default.

That means that understanding how elements are currently formatted is more important than ever so that you will be ready to develop your own standards if or when the need arises. To save time and give you a bit of a head start, I pulled together Table 3.

Note If the current trends continue, the lack of an HTML5 default style sheet makes the development of your own site standards even more important. Apparent sizes may vary between browsers. Headings and other text elements may also display additional spacing margins above or below.

Fonts Text color is black. Default typeface and font are specified and supplied by the browser, which in turn can be overridden by the user using the preference settings in the browser itself.

Many HTML elements feature some form of margin spacing. Padding Spacing within the box border is handled by padding. According to the default HTML 4 style sheet, no elements feature default padding.

Browser antics The next task in developing your own styling standards is to identify the browser and its version that is displaying the HTML. Unfortunately, even different versions of the same browser can produce wide variations from identical code. Web design best practices dictate that you build and test your webpages to make sure they work properly in the browsers employed by the majority of web users in general—but especially the browsers preferred by your own visitors.

The breakdown of browsers used by your own visitors can differ quite a bit from the norm. They also change over time—especially now, as more and more people abandon desktop computers in favor of tablets and smartphones.

In May , the W3C published the following statistics identifying the most popular browsers from the 50 million visitors they receive each year on their website:. Although this chart shows the basic breakdown in the browser world, it obscures the fact that multiple versions of each browser are still being used.

To make matters more complicated, these statistics show trends for the Internet overall, but the statistics for your own site may vary wildly.

As HTML5 becomes more widely supported, the inconsistencies will fade, although they may never go away. It imposes an imaginary box around each element and then enables you to format almost every aspect of how that box and its contents are displayed. CSS permits you to specify fonts, line spacing, colors, borders, background shading and graphics, margins, and padding, among other things.

Launch Dreamweaver CC or later, if necessary. Open boxmodel. If necessary, switch to Split view. The text displays visible borders, background colors, margins, and padding. Switch to Design view. Dreamweaver now displays the page without any applied styling. A basic tenet in web standards today is the separation of the content text, images, lists, and so on from its presentation formatting. Whether the text is formatted or not, this illustrates the importance of the structure and quality of your content.

Will people still be enthralled by your website if all the wonderful formatting were pulled away? Close all files, and do not save changes. The working specifications found at www. A CSS formatting instruction is known as a rule. A rule consists of two parts—a selector and one or more declarations. The selector specifies what element, or combination of elements, is to be formatted; declarations contain the styling information. These sample rules demonstrate some typical constructions used in selectors and declarations.

The way the selector is written determines how the styling is applied and how the rules interact with one another. Applying a CSS rule is not a simple matter of selecting some text and applying a paragraph or character style, as in Adobe InDesign or Adobe Illustrator. CSS rules can affect single words, paragraphs of text, or combinations of text and objects.

A single rule can affect an entire webpage, a single paragraph, or just a few words or letters. Many factors come into play in how a CSS rule performs its job. Cascade theory The cascade theory describes how the order and placement of rules in the style sheet or on the page affects the application of styling.

In other words, if two rules conflict, which one wins out? Since they style the same element, they both cannot win. According to the cascade theory, the rule declared last, or closest to the HTML code, wins. That means, in this case, the text would appear in blue. It has the power to style and format any HTML element, but the language is sensitive to even the smallest typo or syntax error.

Miss a period, comma, or semicolon and you may as well have left the code out of your page entirely. Even worse, an error in one rule may cancel all the styling in subsequent rules or the entire style sheet. Removing excess spacing is known as minification and is often used to optimize style sheets. Browsers and other applications processing the code do not need this extra space, but the same cannot be said of the various punctuation marks sprinkled throughout the CSS.

Can you catch the error in each of the following sample rules? Click here to view code image. Similar problems can arise in the construction of compound selectors too.

For example, putting a space in the wrong place can change the meaning of a selector entirely. The rule article. A tiny error can have dramatic and far-reaching repercussions. To keep their CSS and HTML functioning properly, good web designers keep their eyes peeled for any little error, misplaced space, or punctuation mark.

As you work through the following exercises, keep a careful eye on all the code for any similar errors. When you try to determine which CSS rule will be honored and which formatting will be applied, browsers typically honor the following order of hierarchy, with number 4 being the most powerful: 1. Browser defaults.

External or embedded style sheets. If both are present, the one declared last supersedes the earlier entry in conflicts. Inline styles within the HTML element itself. Styles with the value attribute! Inheritance theory The inheritance theory describes how an element can be affected by one or more rules at the same time. Inheritance can affect rules of the same name as well as rules that format parent elements—ones that contain other elements.

Take a look at the following code: Click here to view code image. If you wanted to apply blue to all the text, you could use the following set of CSS rules: Click here to view code image. This is where inheritance comes into play to save time and effort.

Using inheritance you can replace all four lines of code with:. Inheritance can be of real assistance in economizing the amount of code you have to write to style your pages. As much as you can use it to style elements intentionally, you also have to keep an eye out for unintentional effects. Descendant theory Inheritance provides a means to apply styling to multiple elements at once, but CSS also provides the means to target styling to specific elements.

The descendant theory describes how formatting can target specific elements based on their position relative to other elements. This technique involves the creation of a selector name that identifies a specific element, or elements, by combining multiple tags and, in some cases, id and class attributes.

Notice how both paragraphs contain no intrinsic formatting or special attributes, although they do appear in different parent elements.

See how two tags are combined in each selector? One targets p tags that are children of section tags, the other p tags that are children of div tags. In recent years, a set of special characters has been developed to hone this technique to a fine edge. But be careful using these special characters. Many of them were added only in the last few years and still have limited support. In the past, designers would have to spend hours manually scanning style sheets and rules one by one, trying to track down the source of styling errors.

Specificity describes how browsers determine what formatting to apply when two or more rules conflict. Some refer to this as weight—giving certain rules higher priority, or more weight, based on order cascade , proximity, inheritance, and descendant relationships. For example, each HTML tag gets 1 point, each class gets 10 points, each id gets points, and inline style attributes get points.

By adding up the component values within each selector, its specificity can be calculated and compared to another, and the higher specific weight wins. Calculating specificity Can you do the math?

Look at the following list of selectors and see how they add up. Look through the list of rules appearing in the sample files in this lesson. Can you determine the weight of each of those selectors and figure out which rule is more specific on sight? They may style more than one HTML element at a time and may overlap or inherit styling from one another. Each of the theories described so far has a role to play in how CSS styling is applied through your webpage and across your site.

When the style sheet is loaded, the browser will use the following hierarchy —with number 4 being the most powerful—to determine how the styles are applied, especially when rules conflict: 1. Cascade 2. Inheritance 3. Descendant structure 4. Luckily, Dreamweaver has two powerful tools that can help you in this endeavor. When activated, it displays all the embedded and externally linked CSS rules that have some role in formatting a selected element, and it lists them in the order of their cascade application and specificity.

Code Navigator works in all Dreamweaver-based document views. Since you were using Split view with the previous webpage, it should still be selected when the new file opens.

One window shows Code view and the other shows Design view. Select Live view in the Document toolbar. Depending on the size of your computer display, you may want to split the screen horizontally to see the entire page width at once. The screen shot shows the Live view window on top. Then, note the appearance of the text in the Live view window. A small window appears, displaying a list of eight CSS rules that apply to this heading. This is how you access Code Navigator in Live view.

You can also right-click any element and select Code Navigator from the context menu. If you position the pointer over each rule in turn, Dreamweaver displays any properties formatted by the rule and their values. The rule with the highest specificity most powerful is at the bottom of the list. Otherwise, the sequence of rules in the list indicates both their cascade order and their specificity.

When rules conflict, rules farther down in the list override rules that are higher up. Remember that elements may inherit styling from one or more rules, and default styling—that which is not overridden—may still play a role in the final presentation.

You have to figure that out for yourself. In this case, the. But many factors can influence which of the rules may win. As described earlier, changing the order of rules can often affect how the rules work. In the Code view window, locate the. Clicking the line number selects all the code on that line.

Insert the cursor at the beginning of the style sheet line 8. Click in the Live view window to refresh the display, if necessary. For additional information resources, such as tips, techniques, and the latest prod- uct information, visit www. Checking for updates Adobe periodically provides software updates. You can obtain these updates using Adobe Updater if you have an active Internet connection. Only the commands and options used in the lessons are explained in this book.

For comprehensive information about program features and tutorials, please refer to these resources: Adobe Community Help: Community Help brings together active Adobe product users, Adobe product team members, authors, and experts to give you the most useful, relevant, and up-to-date information about Adobe products. Adobe content is updated based on community feedback and contributions.

You can add comments to content and forums including links to web content , publish your own content using Community Publishing, or contribute Cookbook recipes.

Find out how to contribute at www. See community. Adobe Forums: forums. Adobe TV: tv. Adobe Design Center: www. Adobe Developer Connection: www. Resources for educators: www. Find solutions for education at all levels, including free curricula that use an integrated approach to teaching Adobe software and can be used to prepare for the Adobe Certiied Associate exams.

Adobe Dreamweaver CS6 product home page: www. You can use Adobe certiication as a catalyst for getting a raise, inding a job, or promoting your expertise. If you are an ACE-level instructor, the Adobe Certiied Instructor program takes your skills to the next level and gives you access to a wide range of Adobe resources. Adobe Authorized Training Centers ofer instructor-led courses and training on Adobe products, employing only Adobe Certiied Instructors.

A directory of AATCs is available at partners. For information on the Adobe Certiied programs, visit www. Dreamweaver ofers something for everyone. Take a moment to familiarize yourself with the names of these components. Dreamweaver provides much of its power via dockable panels and toolbars you can display or hide and arrange in innumerable combinations to create your ideal workspace. In the lesson01 folder, choose start-here. Click Open. Design view Design view focuses the Dreamweaver workspace on its WYSIWYG editor, which provides a close, but not perfect, depiction of the webpage as it would appear in a browser.

To activate Design view, click the Design view button in the Document toolbar. Design view Code view 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. Changes made in either window update in the other instantly. To access Split view, click the Split view button in the Document toolbar.

To take advantage of the expanded width of the new lat-panel displays, Dreamweaver splits the workspace vertically, by default. Split view You can also split the screen horizontally by disabling the vertical split in the view menu. You can display, hide, arrange, and dock panels at will around the screen. You can even move them to a second or third video display if you desire.

Standard panel grouping he Window menu lists all the available panels. If you do not see a speciic panel on the screen, choose it from the Window menu. A check mark appears in the menu to indicate that the panel is open. Occasionally, one panel may lie behind another on the screen and be diicult to locate. In such situations, simply choose the desired panel in the Window menu and it will rise to the top of the stack.

To minimize a panel, double- click the tab containing the panel name. To expand the panel, double-click the tab again. Minimizing one panel in a stack using its tab To recover more screen real estate, you can minimize panel groups or stacks down to icons by double-clicking the title bar. You can also minimize the panels to icons by clicking the double arrow icon in the panel title bar.

When panels are minimized to icons, you access any of the individual panels by clicking its icon or button. Minimizing sequence to icons Floating A panel grouped with other panels can be loated separately. To loat a panel, drag it from the group by its tab. Dragging a tab to change its position To reposition panels, groups, and stacks in the workspace, simply drag them by the title bar. Dragging a whole panel group or stack to a new position Grouping, stacking, and docking You can create custom groups by dragging one panel into another.

Release the mouse button to create the new group. To stack panels, drag the desired tab to the top or bottom of another panel.

When you see the blue drop zone appear, release the mouse button. Creating panel stacks Floating panels can be docked to the right, left, or bottom of the Dreamweaver workspace. To dock a panel, group, or stack, drag its title bar to the edge on which you wish to dock. Dreamweaver CS6 includes 11 prebuilt workspaces. To access these workspaces, choose them from the Workspace menu located in the Application bar.

Coder workspace he Designer workspace provides the optimum environment for visual designers. You will explore the capabilities of these toolbars in later exercises. You can store these conigura- tions in a custom workspace of your own naming. To save a custom workspace, create your desired coniguration, choose New Workspace from the Workspace menu in the Application bar, and then give it a custom name. Keyboard shortcuts are loaded and preserved independent of custom workspaces.

Create it yourself. Click OK. Note that the Save All command does not have an existing shortcut, although you will use this command frequently in Dreamweaver. Note the error message indicating that the keyboard combination you chose is already assigned to a command. You have created your own keyboard shortcut—one you will use in upcoming lessons. When the HTML button is selected, you can apply heading or paragraph tags, as well as bold, italics, bullets, numbers, and indenting, among other formatting and attributes.

CSS Property inspector Image properties Select an image in a webpage to access the image-based attributes and formatting control of the Property inspector. Image Property inspector table properties To access table properties, insert your cursor in a table and then click the table tag selector at the bottom of the document window. It is the structure and substance of the Internet, although it is usually unseen except by the web designer. Without it, the web would not exist.

Dreamweaver has many features that help you access, create, and edit HTML code quickly and efectively. Most people confuse the program with the technology. Print designers are used to working with iles ending with. Designers have learned over time that opening these ile formats in a diferent program may produce unacceptable results or even damage the ile.

On the other hand, the goal of the web designer is to create a webpage for display in a browser. In fact, it is a nonproprietary, plain-text language that can be edited in any text editor, in any operating system, and on any computer. Dreamweaver is an HTML editor at its core, although it is much more than this. Where did htmL begin? He intended the technology as a means for sharing technical papers and information via the ledgling Internet that existed at the time.

He shared his HTML and browser inventions openly as an attempt to get the scien- tiic community and others to adopt it and engage in the development themselves. At the time of this writing, HTML is at version 4. It consists of around 90 tags, such as html, head, body, h1, p, and so on.

When two matching tags appear this way, they are referred to as an element. Some elements are used to create page structures, others to format text, and yet others to enable interactivity and programmability. Even though Dreamweaver obviates the need for writing most of the code manually, the ability to read and interpret HTML code is still a recommended skill for any burgeoning web designer.

And sometimes, writing the code by hand is the only way to ind an error in your webpage. Tags are enclosed within angle brackets. Empty tags, like the horizontal rule, can be written in an abbreviated fashion, as shown above.

Like an iceberg, most of the content of the actual webpage remains out of sight. Navigate to the desktop, select irstpage. Congratulations, you just created your irst webpage.

Finish by typing and easy! In fact, you could add hundreds of paragraph returns between the lines and dozens of spaces between each word, and the browser display would be no diferent. By inserting a tag here and there, you can easily create the desired text display. Entities are entered into the code using the standard diferently than tags. For example, the method for inserting a nonbreaking key keyboard. Switch to the browser and reload or refresh the page display.

Because the tags and entities were added, the browser can display the desired paragraph structure and spacing. Besides creating paragraph structures and creating white space as demonstrated earlier, they can impart basic text formatting, as well as identify the relative importance of the page content.

Heading tags are automatically formatted in bold and often at a larger relative size. In this exercise, you will add a heading tag to the irst line: 1 Switch back to the text editor. Note how the text changed.

It is now larger and formatted in boldface. Web designers use heading tags to identify the importance of speciic content and to help improve their site rankings on Google, Yahoo, and other search engines. A typical use of inline code would be to apply bold or italic styling to a word or to a portion of a paragraph.

In this exercise, you will apply inline formatting: 1 Switch back to the text editor. Notice how 3 Save the ile. A webpage can exist without this section, but adding any advanced functionality to this page without one would be diicult.

Did you notice what changed? It may not be obvious at irst. Look at the title bar of the browser window. A well-titled page could be ranked higher than one with a bad title or one with none at all. Keep your titles short but meaningful.

Click Create. A new document window opens in Dreamweaver. Dreamweaver makes it a simple matter to format the irst line as a heading 1. Note how Dreamweaver automatically opens a drop-down list of compatible code elements. Tired of hand-coding yet? Dreamweaver ofers multiple ways to format your content. When you reached for the B and I buttons in step 14, were they missing?

When you make changes in Code view, the Property inspector occasionally needs to be refreshed before you can access the formatting commands featured there.

Simply click the Refresh button, and the formatting commands will reappear. Only two more tasks remain before your new page is complete. You could select the text within the code window and enter a new title, or you could change it using another built-in feature. Note that the new title text appears in the code, replacing the original content.

Navigate to the desktop. Name the ile secondpage, and click Save. Dreamweaver adds the proper extension. You have just completed two webpages—one by hand and the other using Dreamweaver. In both cases, you can see how HTML played a central role in the whole process.

To learn more about this technology, go to www. Tags can create structures, apply formatting, identify logical content, or generate interactivity. Tags that create stand-alone structures are called block elements; the ones that perform their work within the body of another tag are called inline elements. To get the most out of Dreamweaver and your webpages, it helps to understand the nature of these elements and how they are used. Remember, some tags can serve multiple purposes.

Table 2. Creates a hyperlink. Used extensively to simulate columnar layouts. Adds semantic emphasis. Creates bold headings.

Defines a numbered list. Creates a stand-alone paragraph. Displays as bold by default. Designates a table cell. Defines a bulleted list. So, what does that mean for current or up-and-coming web designers? Not much—yet.

Websites and their developers change and adapt to current technologies and market realities quickly, but the underlying technologies progress at a more glacial pace. Browser manufacturers are already supporting many of the new features of HTML5 today. Early adopters will attract developers and users who are interested in the latest and greatest, which means that older, non-HTML5-compliant brows- ers will be abandoned as these new features are implemented in the majority of popular websites.

In any case, backward-compatibility to HTML 4. HTML 4. Some of these elements have been deprecated or removed altogether, and new ones have been adopted or proposed. Many of the changes to the list revolve around supporting new technologies or dif- ferent types of content models. Some changes simply relect customs or techniques that have been popularized within the developer community since the previous version of HTML was adopted.

Other changes simplify the way code is created and make it easier to write and faster to disseminate. Almost 30 old tags have been deprecated, which means HTML5 features nearly 50 new elements in total. Take a few moments to familiarize yourself with these tags and their descriptions. Multiple sources can be defined for browsers that do not support the default resource.

It is a move- ment that has important ramiications for the future and usability of HTML and for the interoperability of websites on the Internet. At the moment, each webpage stands alone on the web. Search engines do their best to index the content that appears on every site, but much of it is lost because of the nature and structure of old HTML code. HTML was initially designed as a presentation language.

In other words, it was intended to display technical documents in a browser in a readable and predict- able manner. Was it a title or merely a subheading? HTML5 has added a signiicant number of new tags to help us add meaning to our markup. If you are new to web design, this transition will be painless, because you have nothing to relearn and no bad habits to break.

If you already have experience building webpages and applications, this book will guide you safely through some of these waters and introduce the new technologies and techniques in a logical and straightforward way. Valid HTML 4 code will remain valid for the foreseeable future. HTML5 was intended to make your task easier by allowing you to do more, with less work. To see the complete list of HTML5 elements, check out www. To learn more about W3C, check out www.

An inline element can exist within another element. The language and syntax is complex, powerful, and end- lessly adaptable; it takes time and dedication to learn and years to master. HTML was never intended to be a design medium. Other than bold and italic, version 1. Designers resorted to various tricks to produce the desired results. For example, they used HTML tables to simu- late multicolumn and complex layouts for text and graphics, and they used images when they wanted to display typefaces other than Times or Helvetica.

Using the expanded table mode in Dreamweaver top , you can see how this webpage relies on tables and images to produce the inal design bottom.

Using CSS lets you strip the HTML code down to its essential content and structure and then apply the formatting separately, so you can more easily tailor the webpage to spe- ciic applications. Click in the Design view window to update the display. Make a mistake, like typing greeen or geen, and the browser will ignore the color formatting altogether. Note that the code contains two color: blue; attributes. In Design view, all the heading elements display in green. In Design view, the paragraph elements have changed to green.

So even if you do nothing, the text will already be formatted in a certain way. One of the essential tasks in mastering CSS is learning and understanding these defaults.

If necessary, select Design view to preview the contents of the ile. Each element exhibits basic styling for traits such as size, font, and spacing, among others. A quick look will tell you that there is no obvious styling information in the ile, but the text still displays diferent kinds of formatting. So where does it come from? And what are the settings? HTML elements draw characteristics from multiple sources. You can ind a default style sheet at www.

To save time and give you a bit of a head start, the following table pulls together some of the most common defaults.

Body text Outside of a table cell, text aligns to the left and starts at the top of the page. This default is not honored by all browsers. Fonts Text color is black. Default typeface and font is specified and supplied by the browser or by browser preferences specified by the manufacturer and then by the user.

Margins Spacing external to the element box. Many HTML elements feature some form of margin spacing. Padding Spacing between the box border and the content.

According to the default style sheet, no element features default padding. Unfortunately, even diferent versions identify the browsers that visitors in your of the same browser can produce wide target audience use. IE Other 0. In January , the W3C published statistics, shown in the image above, identifying the most popular browsers. Although this chart shows the basic breakdown in the browser world, it obscures the fact that multiple versions of each browser are still being used.

To make matters more complicated, although these statistics are valid for the Internet overall, the statistics for your own site may vary wildly. Css box model he browser normally reads the HTML code, interprets its structure and format- ting, and then displays the webpage. It imposes an imaginary box around each element and then enables you to format almost every aspect of how that box and its contents are displayed.

The box model is a programmatic construct imposed by CSS that enables you to format, or redeine, the default settings of any HTML element. In most instances these boxes are invisible, and although CSS gives you the ability to format them, it does not require you to do so.

Open boxmodel. Content vs. Here is identical HTML content, side by side. Formatting text You can apply CSS formatting in three ways: inline, embedded in an internal style sheet , or linked via an external style sheet.

A CSS formatting instruction is called a rule. A rule consists of two parts—a selector and one or more declarations. Applying a CSS rule is not a simple matter of selecting some text and applying a paragraph or character style, as in Adobe InDesign or Adobe Illustrator. CSS rules can afect single words, paragraphs of text, or combinations of text and objects.

A single rule can afect an entire page. A rule can be speciied to begin and end abruptly, or to format content continuously until changed by a subsequent rule. The way the selector is written HTML element determines how the styling is applied and Multiple how the rules interact with one another.

Cascade theory he cascade theory describes how the order and placement of rules in the style sheet or on the page afects the application of styling. In other words, if two rules conlict, which one wins out? Note that the code contains two CSS rules that are identical except that they apply diferent colors: red or blue. Both rules want to format the same elements, but only one will be honored.

Obviously, the second rule won. Because the second rule is the last one declared, which makes it the closest one to the actual content. You have switched the order of the rules. Both proximity and the order in which rules appear within the markup are powerful factors in how CSS is applied. When you try to determine which CSS rule will be honored and which formatting will be applied, browsers typically use the following order of hierarchy, with 3 being the most powerful.

Browser defaults. If both are present, the one declared last supersedes the earlier entry in conlicts. Inline styles within the HTML element itself. Inheritance theory he inheritance theory describes how one rule can be afected by one or more pre- viously declared rules. Inheritance can afect rules of the same name as well as rules that format parent elements or elements that nest one inside another. In Split view, observe the CSS code. In other words, since both rules do something diferent, both will be honored.

Far from being a mistake or an unintended consequence, the ability to build rich and elaborate formatting using multiple rules is one of the most powerful and complex aspects of cascading style sheets.

Redundant code should be avoided whenever possible. It adds to the size of the code as well as to the time it takes to download and process it. By using inheritance, you can create the same efect with a single rule.

All the elements remain formatted as blue Verdana. One rule is now formatting three diferent elements. You may have also noticed that the two h1 rules combined create the same styling applied by the new div rule. Click in the Design view window to refresh the display; it should look exactly the same. The reader then learns to design individual web pages, adding styled text, images, and interactive elements to make their designs attractive and engaging.

Along the way, the book provides guidance for working with code, and in the end shows how to publish a finished site to the Web. Deitel, Harvey M. This is the eBook of the printed book and may not include any media, website access …. Even bad code can function. But if code isn’t clean, it can bring a development organization ….

Deitel, Paul Deitel, Harvey Deitel. Skip to main content. Start your free trial. Follow the instructions in the books Getting Started section to unlock access to: Downloadable lesson files you need to work through the projects in the book Web Edition containing the complete text of the book, interactive quizzes, and videos that walk you through the lessons step by step What you need to use this book: Adobe Dreamweaver release software, for either Windows or macOS.