If necessary, select Design view to preview the contents of the ile. When you select an image in the document window, the Property inspector reveals its dimensions. Dreamweaver adlbe adobe dreamweaver cs3 tutorial pdf ebook free download new layout. If this guide is distributed with software that includes an end user license agreement, this guide, as well eboko the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Figure❿
 
 

Adobe dreamweaver cs3 tutorial pdf ebook free download.The Essential Guide to Dreamweaver CS3 with CSS, Ajax, and PHP | SpringerLink

 

You can also search for this author in PubMed Google Scholar. This is a preview of subscription content, access via your institution. With over 3 million users worldwide, Adobe’s Dreamweaver is the most popular web development software in the world, and it just took another step forward with CS3, the new version released in Having come a long way from its humble beginnings as a simple web design tool, CS3 allows you to rapidly put together standards-compliant web sites and dynamic web sites with server-side languages and Ajax, and much more.

To complement this great new application, David Powers has written the ultimate guide to it. The Essential Guide to Dreamweaver CS3 with CSS, Ajax, and PHP teaches you everything you need to know about the application, from setting up your development environment environment to publishing your sites and applications on the web, and everything in between. Authors : David Powers.

Publisher : Apress Berkeley, CA. Copyright Information : David Powers Softcover ISBN : Edition Number : 1. Number of Pages : Topics : Computer Graphics , Software Engineering.

Skip to main content. Search SpringerLink Search. To just get started building Web pages, choose None. Click Next. A summary of your settings appears see Figure After defining the site, Dreamweaver creates a site cache for your Web site. Root folder. The root is the master, outer, main folder—think of that folder as the edge of the known universe for that site: Nothing exists outside of the root. The folder you place your Web files into on a Web server is called the remote root folder.

Local site. The usual routine for creating Web pages goes like this: First you create the page on your own computer—using a program like Dreamweaver—and then you upload it to a computer on the Internet called a Web server, where your handiwork becomes available to the masses. In other words, almost every Web site exists in two places at once. One copy is on the Internet, where everyone can get at it.

The copy on your own computer is called the local site ,or the development site. Think of the local site as a sort of staging ground, where you build your site, test it, and modify it.

Remote site. The remote , or live, site is a mirror image of the local site. Because you create it by uploading your local site, it has the same organizational folder structure as the local site and contains the same files.

Only polished, fully functional pages go online to the remote site; save the half-finished, typo-ridden drafts for your local site. It merely prepares Dreamweaver for working on a site. You can then switch from one site to another using the Sites menu in the Files panel see Figure on Modifying the Files Panel View. Although the Site Definition wizard is a nearly foolproof way to define a site, clicking through each of its steps can get tedious. The number of options that appear in the Advanced view of the Site Definition window may seem overwhelming.

But to get started building a Web site, you only need to supply a few pieces of information under the Local Info category of this window. For example, the Remote Info category is for setting up Dreamweaver to move files to your Web server and is discussed in Chapter 17 , while the Testing Server category is used for the database-driven Web sites detailed in Part 6 of this book.

Figure demonstrates the process for Windows and Macs. This is an optional step, but comes in handy if you insert an image from the desktop or another folder outside your local root folder as described on Links relative to. This step is also optional. Dreamweaver creates a site cache as described in step 12 on The Site Definition Wizard. Choose Blank Page from the left-hand list of document categories. Dreamweaver CS3 does ship with some very useful page layouts which you can access from the Blank Page category.

Because CSS-based layout can be tricky, Dreamweaver includes all the code needed to create the most common types of page designs. XHTML 1. The transitional doc types let you use a few HTML tags and properties that have been phased out of the strict types.

Dreamweaver opens a new, blank Web page ready for you to save and title see Figure The Save As dialog box appears. You need to save the file somewhere inside the local root folder. You can save it inside of any subfolders within the root folder as well. Furthermore, Web servers rely on file extensions like.

Dreamweaver for Windows automatically adds the extension to your saved document names. But on the Mac—which lets you save files without extensions—make sure the file ends in the suffix.

Click inside the Title box at the top of the document window and type a name for the page see Figure Every new document Dreamweaver creates has the unflattering title Untitled Document.

Many of those pages were probably created by Dreamweaver. The best way to avoid this unprofessional mistake is to immediately title the document after saving it. Although reading a book is a good way to learn the ins and outs of a program, nothing beats sitting in front of your computer and taking a program through its paces. The rest of this chapter, for example, introduces Dreamweaver by taking you step by step through the process of building a Web page.

Click the Tutorials link to go to the tutorials page, and then download the files by clicking the download link. The tutorial files are stored as ZIP files, a type of file that compresses a lot of different files into one, smaller file. Windows folks should download the file and double-click it to open the archive.

Click the Extract All Files option, then follow the instructions of the Extraction wizard to unzip the files and place them on your computer. Mac users, just double-click the file to decompress it. The Preferences dialog box opens, listing a dizzying array of categories and options see Figure In the Category list on the left side of the Preferences dialog box, click General.

The program offers wide support for Cascading Style Sheets, but also still supports outdated HTML tags to add formatting to text, links, and basic properties of a Web page, as described in the note below.

Future browsers may not understand those tags and attributes. Select the Invisible Elements category in the Preferences dialog box, and then turn on the fourth checkbox from the top, labeled Line Breaks. This setting makes the line break character visible—represented in the document window by a little gold shield—so that you can easily select and remove it.

The Preferences dialog box closes. As noted at the beginning of this chapter, Dreamweaver has many different windows that help you build Web pages. Make sure the Property inspector and Insert bar are open see Figure This is another frequently encountered panel. It lists all the files in your site and provides an easy way to open, delete, and manage your Web pages. This closes the Application panel, which is used for the advanced, database-driven Web sites described in Part 6 of this book.

Your workspace is all set up now. Type CosmoFarmer or any name you like and then click OK. This returns the workspace to what you saw when you first installed Dreamweaver; notice how the Application panel reappears and the CSS Styles panel is closed. Dreamweaver sets up everything the way you want it. You can create multiple layouts for different Web sites or different types of sites. As discussed on Setting Up a Site , whenever you want to use Dreamweaver to create or edit a Web site, your first step is always to show the program where the root folder is—the master folder for all your Web site files.

You do this by defining a site , like so:. Type Tutorial 1 in the Site Name field. Next, you need to tell Dreamweaver where it can find the tutorial files.

The Choose Local Root Folder window opens, so that you can choose a folder on your hard drive that will serve as your local root site folder. As discussed on The Site Definition Wizard , the Mac and Windows versions of Dreamweaver handle the process of selecting a folder a bit differently; see Figure Dreamweaver asks how you want to connect to your remote server —the computer that will dish up the finished Web files to your adoring public.

If you made a mistake, click Back to return to the appropriate step in the process and make changes. The New Document window opens see Figure Creating a blank Web page involves a few clicks. The main Web standards organization, the World Wide Web Consortium W3C , recommends it due to its compatibility with future standards and its cleaner, more logical structure. The window should look like Figure Always save your pages right away. This habit prevents serious headaches if the power goes out as you finish that beautiful—but unsaved—creation.

Save the page as about. You could also save the page as about. Make sure you save this page in the correct folder. In Phase 1 Phase 1: Getting Dreamweaver in Shape , you defined the Chapter01 folder as the root of the site—the folder that holds all the pages and files for the site. The page title is also what shows up as the name of your Web page when someone searches the Web using a search engine like Yahoo or Google.

The Page Properties dialog box opens see Figure , allowing you to define the basic attributes of each Web page you create. There are five categories of settings that let you control properties like background color, link colors, and page margins.

From the pop-up color palette, choose a color a dark color like a dark grey works well. Unless you intervene, all Web page text starts out black in Dreamweaver; now, the text on this page will be the color you selected.

Alternatively, you could type a color, like , into the box beside the palette square. Both the palette and the hexadecimal color-specifying field appear fairly often in Dreamweaver see the box on Phase 4: Adding Images and Text. The Select Image Source window appears see Figure You use this window to navigate to and select a graphic.

Click the Site Root button at the top of the window bottom of the window on Macs. In Dreamweaver, you can also just double-click a file to select it and close the window you used to select that file.

Because file extensions are an important way people and Web servers can identify the different types of files used on a Web site, you may want to display extensions. Type 0 into the Left and Top margin boxes. This removes the little bit of space Web browsers insert between the contents of your Web page and the top and left sides of the browser window.

If you like, you can change this setting to make the browser add more space to the top and left side of the page. In fact, you can even add a little extra empty space on the right side of a page. The right margin control is especially useful for languages that read from right to left, like Hebrew.

Note, however, that the bottom margin has no effect on the page display. These are hexadecimal codes that specify specific Web page colors see Phase 4: Adding Images and Text for more about this notation. Links come in four varieties: regular, visited, active, and rollover.

A regular link is a plain-old link, unvisited, untouched. And finally, a rollover link indicates how the link looks when someone mouses over it. You can choose different colors for each of these link states. For its part, the rollover link gives instant feedback, changing color as soon as a visitor moves the mouse cursor over it. Since the active link color appears for only a split second when someone actually clicks the link, nobody will notice if you never set this color.

Although Dreamweaver uses the term rollover link, in the world of Cascading Style Sheets, this is called a hover link. Click OK to close the window and apply these changes to the page. You return to your document window. That innocent-looking gray box in the Property inspector, the Modify Page Properties window, and various boxes throughout Dreamweaver is called the color box. You can use it to choose a color for the selected Web page element in any of three ways.

First, you can click one of the colors on the pop-up rainbow palette that appears when you click the color box. Second, you can use the eyedropper cursor that appears when you click the color box.

You can even sample a color from another application from any visible window, Dreamweaver or not : just move the eyedropper over the color and click. This click may take you out of Dreamweaver. Finally, you can click the Color Picker icon, shown here, to launch the Mac or Windows color-picker dialog box, which lets you choose from millions of possible colors.

Without a specific color setting, Web browsers will use default colors for the element in question. For instance, text on a Web page is usually black unless you specify otherwise. Next to the color box in any Dreamweaver dialog box is a blank text field.

If you know your Web colors, you can type their hex codes into this box, which is sometimes faster and more precise than clicking on the rainbow palette. In a hex code, a Web color is represented by a six-digit code like this: FF Hexadecimal notation is a system computers use for counting.

The tells the computer that the following sequence is a series of hexadecimal numbers—in this case, three pairs of them. The Palette Options menu is of limited use. It lets you select a different set of very limited rainbow colors for your palette. The first two choices, for example, contain the out-dated Web-safe color palette—a limited collection of colors which display accurately on any computer screen. The Web-safe palette made sense back when graphics cards were expensive and dinosaurs ruled the earth.

Today, however, most monitors can show millions of different colors. Save your work frequently. Browse to the images folder in the Chapter01 folder and double-click the graphics file called banner. The Image Tag Accessibility window appears. Fresh out of the box and onto your computer, Dreamweaver CS3 has several accessibility preferences automatically turned on.

These preferences are aimed at making your Web pages more accessible to people who use alternative devices for viewing Web sites—for example, people with viewing disabilities who require special Web browser software such as a screen reader, which literally reads the contents of a Web page out loud.

In the Alternate Text box, type CosmoFarmer 2. Click OK to add the image to the page. The banner picture appears at the top of the page, as shown in Figure The Property inspector changes to reflect the properties of the image. You can also add or edit the alt text in the Property inspector Figure Deselect the image by clicking anywhere in the document window, or by pressing the right arrow key.

Press Enter to create a new paragraph. Type About CosmoFarmer 2. Notice that the text is a dark color and uses the Verdana font; these are the properties you set up earlier in the Page Properties dialog box. The Property inspector now displays text-formatting options.

The key called Enter on a Windows keyboard is named Return on most Macintosh keyboards. On the Mac, you can press either Return or Enter. From the Format menu in the Property inspector, choose Heading 1 see Figure The text you just typed becomes big and bold—the default style for Heading 1.

This Format menu offers a number of different paragraph types. White lood: Yes tered trademar k or a trademar k of M a regi s ther icro i s ei sof ow s po Cor ind. Macintosh i s inside the Lessons folder.

Made in the USA. Learn product page where you can by Video is one of the most critically access updates and bonus acclaimed training products on Adobe material. Macintosh instructions. CSS formatting. Whether you create websites for a living or plan to create one for your own business, Dreamweaver ofers all the tools you need to get professional-quality results.

You can follow the book from start to inish, or complete only those lessons that correspond to your interests and needs. Unfortunately, the TinyURLs sometimes expire over time and no longer function. Be sure you know how to use the mouse, standard menus and commands, and also how to open, save, and close iles. If you need to review these techniques, see the printed or online documentation that was included with your Microsoft Windows or Apple Macintosh operating system.

Adobe Dreamweaver CS6 software must be purchased separately; it is not included with the lesson iles that accompany this book. For system requirements, go to www.

Make sure your serial number is accessible before installing the application. Each lesson has its own folder; you must copy the folders to your hard drive to complete the lessons. It is recom- mended that you copy all lesson folders to your hard drive at once, but to conserve space on your hard disk, you can install individual folders for each lesson as you need them.

It is vitally important that you store all lesson folders within a single folder on your hard drive. Otherwise, skip to step 5. Do not copy one lesson folder into any other lesson folder. For speciic instructions, see the following section. Each new lesson builds on previous exercises, using the iles and assets you create to develop an entire website. It is rec- ommended that you perform each lesson in sequential order to achieve a successful result and the most complete understanding of all aspects of web design.

While ideal, this method may not be a practicable scenario for every user. So, if desired, individual lessons can be accomplished using the jumpstart method described in the next section. Once you start using the jumpstart method, you will have to use this method for all subsequent lessons.

For example, if you want to jumpstart Lesson 6, you will have to jumpstart Lesson 7, too. In many instances, essential iles needed for subsequent exercises were built in earlier lessons and exercises and may not be present in a jumpstart environment. Each folder contains inished iles, staged iles, and customized Template and Library iles, but not always a complete set of iles that may have been used or completed in other lessons.

You may think these folders contain seemingly duplicative materials. But these duplicate iles and assets, in most cases, cannot be used interchangeably in other lessons and exercises. Doing so will probably cause you to fail to achieve the goal of the exercise. 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.

Do not deine sites using subfolders of existing sites. Keep your jumpstart sites and assets in their original folders to avoid conlicts. One suggestion is to organize the lesson folders, as well as your own site folders, in a single web or sites master folder near the root of your hard drive. But avoid using the Dreamweaver application folder or any folders that contain a web server, like Apache, ColdFusion, or Internet Information Services IIS which are described more fully in Lessons 13 and Feel free to use the jumpstart method for all lessons, if you prefer.

Select the Local Info category. For a more complete description of how to set up a site in Dreamweaver, see Lesson 4. Remember, if you use the jumpstart method for all lessons, you may not end up with a complete set of site iles in any individual folder when you are inished. For this book the Designer workspace is recommended.

If it is not displayed, use the pop-up menu in the Application bar to choose it. Most of the igures in this book show the Designer workspace. When you inish the lessons in this book, experiment with various workspaces to ind the one that you prefer. Minor diferences exist between the two versions, mostly due to platform-speciic issues out of the control of the program. Most of these are simply diferences in keyboard shortcuts, how dialog boxes are displayed, and how buttons are named.

Screen shots may alternate between platforms throughout the book. Where speciic commands difer, they are noted within the text. 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.

Descendant theory he descendant theory describes how formatting can target a particular element based on its position relative to other elements. By constructing a selector using multiple elements, in addition to ID and class attributes, you can target the format- ting to speciic instances of text as it appears within your webpage. Click in the Design view window to refresh the display. What happened to blue Verdana? Just move the element into the proper structure or location within the code, and it formats itself.

Some refer to this as weight—giving certain rules more priority based on order, proximity, inheritance, and descendant relationships. But, at the moment, none of the rules is actually formatting the text. In Dreamweaver, commented code usually appears grayed out. But before you do this, can you determine—based on the syntax and order of the rules—what formatting will apply to the sample text? For example, will the text appear in Times, Impact, or Verdana? Will it be blue, red, green, or orange?

So, then why does the text display in the typeface Verdana? As mentioned earlier, CSS rules may style more than one HTML element at a time, and some rules may overlap or inherit styling from one another. Can you determine which one? Can you explain why? Each of the theories described here 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 conlict: 1.

Cascade 2. Inheritance 3. Descendant structure 4. In such cases, Dreamweaver comes to the rescue with a fantastic feature named Code Navigator. When activated, it will display all the CSS rules that have some role in formatting an ele- ment, and it will list the order of their cascade application and speciicity.

In an actual webpage, the possibility of styling conlicts grows with each new rule added. A small window appears, displaying a list of three CSS rules that apply to this heading.

When rules conlict, rules farther down in the list override rules that are higher up. Remember, elements may inherit styling from one or more rules, and default styling may be overridden by more-speciic settings.

But many factors can inluence which of the rules may win. As you saw earlier, changing the order of rules can often afect how the rules work.

Activate the Code Navigator. Although the rule was moved to the top of the style sheet, the display of rules did not change, because the div. In this instance, it would win no matter where it was placed in the code, but its speciicity can easily be changed by modifying the selector.

Did you notice how the styling changed? But, since this rule is the last one declared in the code, it now takes precedence in the cascade.

Is it starting to make more sense? Until that time, just remember that the rule that appears last in the Code Navigator has the most inluence on any particular element.

❿

 

Adobe dreamweaver cs3 tutorial pdf ebook free download

 

These preferences are aimed at making your Web pages more accessible to people who use alternative devices for viewing Web sites—for example, people with viewing disabilities who require special Web browser software such as a screen reader, which literally reads the contents of a Web page out loud. In the Alternate Text box, type CosmoFarmer 2. Click OK to add the image to the page.

The banner picture appears at the top of the page, as shown in Figure The Property inspector changes to reflect the properties of the image. You can also add or edit the alt text in the Property inspector Figure Deselect the image by clicking anywhere in the document window, or by pressing the right arrow key.

Press Enter to create a new paragraph. Type About CosmoFarmer 2. Notice that the text is a dark color and uses the Verdana font; these are the properties you set up earlier in the Page Properties dialog box. The Property inspector now displays text-formatting options.

The key called Enter on a Windows keyboard is named Return on most Macintosh keyboards. On the Mac, you can press either Return or Enter. From the Format menu in the Property inspector, choose Heading 1 see Figure The text you just typed becomes big and bold—the default style for Heading 1. This Format menu offers a number of different paragraph types.

You can do so either by dragging carefully across the entire line or by triple-clicking anywhere inside the line. Click the color box in the Property inspector and select a dark blue works well. Two things happen. Second, a style name appears in the Style menu on the Property inspector, named Style1 or Style2, or Style3, depending on whether your independent spirit has led you off to earlier formatting expeditions. Meanwhile, Dreamweaver has actually created a new Cascading Style Sheet style and applied it to this heading.

The Style menu lets you apply any styles you or Dreamweaver create. The text now uses the font Georgia. You just overrode the page-wide setting you chose in step 10 on Phase 3: Creating and Saving a Web Page. Sometimes when you use the Property inspector to change the look of text that already has a style applied to it, Dreamweaver creates yet another new style. For example, if a paragraph of text is styled with Style1 and you change the font, Dreamweaver sometimes creates a new style called Style2 , and leaves the old style behind.

See Font Color for an explanation of this behavior. From the Style menu in the Property inspector, select Rename. The Rename Style window appears. In this window, you simply select the style you wish to change, and type a new name. Select the style name most likely Style1 from the Rename Style menu and type heading in the New Name box.

Click OK. Dreamweaver renames the style wherever it appears in the page. This panel displays the results of any find-and-replace action—which is what Dreamweaver just did to rename the style. Click to the right of the heading text to deselect it.

Press Enter to create another new paragraph. To get that text into Dreamweaver, you simply copy it from another document and paste it into your Web page. This file is just plain text. No formatting, just words. Click the about. You should see a few gold shields sprinkled among the text circled in Figure These represent line breaks—spots where text drops to the next line without creating a new paragraph.

In this case, you need to remove them and then create separate paragraphs. Click one of the gold shields and press the Enter key. Repeat for any other gold shields in the document window. At this point, the pasted text is just a series of paragraphs.

This changes the paragraph to a headline—making it bigger and bolder. Click the I for Italics button in the Property inspector see Figure This italicizes the text and also creates another new style Style1, Style2, or something like that.

For example, drag from the start of the first paragraph down to the end of the third paragraph. You can also drag up starting from the end of the third paragraph. Click the Bulleted List button on the Property inspector see Figure A bullet appears before each name. Select the first name, Rod Dibble. Select a color using the color box in the Property inspector for example, a deep red like , and then click the B button to make the name bold.

Again, Dreamweaver creates a new style and, as before, you should give the style a more meaningful name. Select the two other names and apply the staff style to them. If you still have one of the names selected, look at the Tag selector in the bottom left of the document window.

There are a few more design touches to add to the page, but first you should see how the page looks in a real Web browser. Furthermore, much to the eternal woe of Web designers, different Web browsers display pages differently.

In some cases, the differences may be subtle for example, text may be slightly larger or smaller. Check out www. Fortunately, Dreamweaver lets you preview a Web page using any browser you have installed on your computer. When you install Dreamweaver, it detects which browsers are already installed on your computer; a list of those browsers appears in the browsers list in this window.

Click the Browse button. Search your hard drive to find a browser you wish to add to this list. If you wish to change its name for display purposes within Dreamweaver, select it and type a new name. Turn on the Primary Browser box. You can now preview your pages in this browser with a simple keyboard shortcut: F12 Option-F12 on a Mac.

Fortunately, Dreamweaver makes it easy. Macintosh fans: Unfortunately, Apple has assigned the F12 key to the Dashboard program, so it takes two keys to preview the page—Option and F This keyboard shortcut opens the Web page in your primary browser, letting you preview your work. Do so using your favorite way to switch programs on your computer—by using the Windows taskbar, or the Dock in Mac OS X. All you need to do now is add a graphic, format the copyright notice, and provide a little more structure to the appearance of the page.

Browse to the images folder in the Chapter01 folder and double-click the graphics file called headquarters.

Again, the Image Tag Accessibility window appears. You need to provide a good description for this image. So when you navigate to the images folder in step 3 above, you might see headquarters instead of headquarters.

Look at the Property inspector. It displays properties specific to images. Choose Right from the Align pop-up menu in the Property inspector. The image moves to the right edge of the page and text wraps around its left side.

At the bottom of the page is a copyright notice. CSS provides a more flexible technique—known as a float —to achieve this same effect.

A gray line appears above the copyright notice. You can also add a line above a paragraph of text using the CSS border property. See Adding Borders. You can either triple-click inside the paragraph or drag from the beginning of the paragraph text to the end. In the Property inspector, choose 12 from the Size menu, and select black from the color box. The text of the copyright changes to black and shrinks in size.

Again, Dreamweaver creates a new generically-named style after you do this. Softcover ISBN : Edition Number : 1. Number of Pages : Topics : Computer Graphics , Software Engineering. Skip to main content. Search SpringerLink Search. Authors: … David Powers Show authors. David Powers View author publications. Buying options eBook EUR Although the rule was moved to the top of the style sheet, the display of rules did not change, because the div. In this instance, it would win no matter where it was placed in the code, but its speciicity can easily be changed by modifying the selector.

Did you notice how the styling changed? But, since this rule is the last one declared in the code, it now takes precedence in the cascade. Is it starting to make more sense? Until that time, just remember that the rule that appears last in the Code Navigator has the most inluence on any particular element.

By default, all elements start at the top of the browser screen and appear consecu- tively one after the other from left to right, top to bottom. Block elements generate their own line or paragraph breaks; inline elements appear at the point of insertion. CSS can break all of these default constraints and let you size, format, and position elements almost any way you want them. CSS can control both the width and the height of an element, with varying degrees of success.

All speciications can be expressed in relative terms percentages, ems, or exs or in absolute terms pixels, inches, points, centimeters, and so on. By default, block elements occupy percent of the width of the browser window. Otherwise, CSS can deine element mea- surements in absolute or relative terms. Box 1 is unformatted to demonstrate how block elements display by default.

Relative measurements allow the elements to automati- cally adapt to changes to the width of the browser. For example, if you were to drag the divider between the Code view and Design view windows left or right, Box 2 would always display at half the width of the Design view window.

Element widths set to percentages will adapt automatically to changes in the browser window, maintaining their relative dimen- sion within the space. Box 3 is formatted to a ixed measurement of pixels. It will maintain this width no matter what happens to the size of the browser screen. It is formatted to a width of 10 ems. In other words, use a large font and the em gets big- ger; use a small font and the em gets smaller.

It even changes based on whether the font is a condensed or expanded face. Widths speciied in ems allow your page ele- ments to adapt to user requests for increases or decreases in font size. Unfortunately, the reality is not so simple. Past browser support for the height property was not consistent or reliable. But measurements in percentages require a small workaround, or hack, to make most browsers honor them.

Box 1 demonstrates the default behavior of block elements; it takes up only as much height as the content contained within it requires. Box 2 is set to a height of pixels; it will remain at this ixed height regardless of changes to the screen size or orientation.

Box 3 is set to a height of 10 ems. So far, so good. Adding the height property to the root elements of your webpage gives the browser the information it needs to calculate any element heights set in percentages. By default, it is intended to be a luid speciication that allows an element to automatically adapt to the space requirements of its content.

Borders and backgrounds Each element can feature four individually formatted borders top, bottom, left, and right. As you can see, borders can be used for more than just creating boxes. Here you see them used as graphical accents to paragraphs and even to simulate a three- dimensional button efect.

If both are used, the image will appear above, or in front of, the color. If the image ills the visible space or is set to repeat, it may obscure the color entirely. Box 1 displays the default HTML transparent background.

Box 2 depicts a back- ground with a solid color. Box 3 shows a background image that repeats in both directions along the x-axis and y-axis. Box 4 also shows a background image, but its transparency and drop-shadow efect allow you to see the background color around the edges of the image.

Be sure to fully test any background treatments. In some applications, CSS back- ground speciications are not fully supported or are supported inconsistently. All the elements display the default HTML formatting for margins and padding. Borders have been applied to all the elements to make the spacing efects easier to see.

Type padding: 30px;. Since padding is applied within the element boundaries, it will combine with margin settings to afect the overall spacing that appears between elements.

Many designers abhor these default speciications, especially because they may vary among browsers. Using zero margins may be a bit extreme for your own tastes, but you get the picture.

As you become more comfortable with CSS and webpage design, you can develop your own default speciications and implement them in this way. CSS can break all these default constraints and let you place elements almost anywhere you want them to be. As with other object formatting, positioning can be speciied in relative terms such as left, right, center, and so on or by absolute coordinates measured in pixels, inches, centimeters, or other standard measure- ment systems.

Using CSS, you can even layer one element above or below another to create amazing graphical efects. By using positioning commands carefully, you can create a variety of page layouts, including popular multicolumn designs. Using CSS, you can control the placement of these elements.

Box 1 displays on a line of its own, in the default manner. Box 2 appears on the next line, aligned to the left side of the screen as speciied. Box 3 appears on the right side of the screen, but on the same line as Box 2. In subsequent lessons, you will learn how to combine diferent loat attributes with various width, height, margin, and padding settings to create sophisticated layouts for your website designs.

Unfortunately, as powerful as CSS positioning seems to be, it is the one aspect of CSS that is most prone to misinterpretation by the various browsers in use today. Commands and formatting that work ine in one browser can be translated difer- ently or totally ignored—with tragic results—in another. In fact, formatting that works ine on one page of your website can fail on another page containing a difer- ent mix of code elements. By taking advantage of the cascade, inheritance, descendant, and speciicity theo- ries, you can target formatting to almost any element anywhere on a webpage.

But CSS ofers a few more ways to optimize and customize the formatting even further. Class attributes may be applied to any number of elements on a page, whereas P Note: Dreamweaver will warn you when ID attributes may appear only once.

Class and ID names can be a single word, an abbreviation, any combination of letters and numbers, or almost anything, but they may not start with a number or contain spaces. To declare a CSS class selector, insert a period before the name within the style sheet, like this:. In the past, many web designers used ID attributes to point at speciic components within the page, such as the header, the footer, or articles. With the advent of HTML5 elements—header, footer, aside, article, and so on—the use of ID and class attributes for this purpose is less neces- sary than it was.

But IDs can still be used to identify speciic text elements, images, and tables to assist you in building powerful hypertext navigation within your page and site. Technologies and standards are evolving and changing constantly. Although these standards have not been oicially adopted, browser vendors are already implementing many of their features and techniques.

As you work through the upcoming lessons, you will be introduced to many of these new and exciting techniques and actually implement many of the more stable HTML5 and CSS3 features within your own sample pages. Css3 features and efects here are over two dozen new features in CSS3. Many are ready now and have been implemented in all the modern browsers; others are still experimental and are sup- ported less fully.

Some of the new CSS3 features have not been standardized, and certain browsers may not recognize the default markup generated by Dreamweaver. In these instances, you may have to include speciic vendor commands to make them work properly.

If you do nothing, HTML elements will feature no formatting or structure. CSS3 features are all experimental, and you should not use them at all. Industry best practices recommend using CSS-based formatting instead. Even if you do nothing, many HTML elements feature built-in formatting. Many CSS3 features are already supported by modern browsers and can be used today. What is the purpose of the website?

Will the website sell or support a product or service? Is your site for entertainment or games? Will you provide information or news? Will you need a shopping cart or database? Do you need to accept credit card payments or electronic transfers? Who is the customer? Are the customers adults, children, seniors, professionals, hobbyists, men, women, everyone?

Knowing who your market will be is vital to the overall design and func- tionality of your site. A site intended for children probably needs more animation, interactivity, and bright engaging colors. Adults will want serious content and in- depth analysis. Seniors may need larger type and other accessibility enhancements.

A good irst step is to check out the competition. Is there an existing website Could two sites be more performing the same service or selling the same product? Are they successful? Look and Yahoo? Yet they both perform the same at Google and Yahoo. But, just as with a brick-and-mortar business, your online customers can come to you in a variety of ways.

For example, are they accessing your site on a desktop computer, laptop, tablet, or cell phone? Are they using high-speed Internet, wireless, or dial-up service?

What browser do they most like to use, and what is the size and resolution of the display? Dial-up and cell phone users may not want to see a lot of graphics or video, while users with large lat-panel displays and high-speed connec- tions may demand as much bang and sizzle as you can send at them.

So, where do you get this information? But a lot of it is actually available on the Internet itself. In , they started to track the usage of mobile devices on the Internet.

If you are redesigning an existing site, your web hosting service itself may provide valuable statistics on historical traic patterns and even the visitors themselves. If you host your own site, third-party tools are available, like Google Analytics and Adobe Omniture, which you can incorporate into your code to do the tracking for you for free or for a small fee. When you boil down all the statistics, this is what you will ind as of the begin- ning of Windows 80 to 90 percent dominates the Internet, with most users divided almost equally between Firefox 37 percent and Google Chrome 33 per- cent , with various versions of Internet Explorer 22 percent taking third position.

Designing a website that can look good and work efectively for both lat-panel displays and cell phones is a tall order. Each day, more people are using cell phones and other mobile devices to access the Internet. Some users may use them now to access the Internet more fre- quently than they use desktop computers. For one thing, cell phone screens are a fraction of the size of even the smallest lat-panel display. How do you cram a two- or three-column page design into a meager to pixels?

Keep all these statistics in mind as you go through the process of designing your site. A page carefully designed for a typical lat panel is basically useless on a cell phone. Your customers come from a broad demographic including all ages and education levels. Your marketing research indicates that most of your customers use desktop com- puters or laptops, connecting via high-speed Internet services, but that you can expect 10 to 20 percent of your visitors via cell phone and other mobile devices.

Creating thumbnails Many web designers start by drawing thumbnails with pencil and paper. Draw lines between the thumbnails showing how your navigation will connect them. Thumbnails list the pages that need to be built and how they are connected to each other.

Most sites are divided into levels. Typically, the irst level includes all the pages in your main navigation menu, the ones a visitor can reach directly from the home page. Make a list of compo- nents you want on each page, such as headers and footers, navigation, and areas for the main content and the sidebars if any. What other factors do you need to consider? Do you have a company logo, business identity, graphic imagery, or color scheme you want to accent?

Do you have publications, brochures, or current advertising campaigns you want to emulate? It helps to gather them all in one place so you can see everything all at once on a desk or conference table. Most designers settle on one basic page design that is a compromise between lexibility and sizzle. Some site designs may naturally lean toward using more than one basic layout. But resist the urge to design each page separately.

Using a consistent page design, or template, lends a sense of professionalism and gives conidence to your visitor. Wireframes allow you to experiment with page designs quickly and eas- ily without wasting time with code. Where you put a component can drasti- cally afect its impact and usefulness.

Are they on a inch lat panel or a 2-inch cell phone? Do you want to waste this position by slapping the company logo here? Or, make the site more useful by slipping in a navigation menu? Do you go for design sizzle, workable utility, or something in between? Creating wireframes After you pick the winning design, wireframing is a fast way to work out the structure of each page in the site.

A wireframe is like a thumbnail, but bigger, that sketches out each page and ills in more details about the components, such as actual link names and main headings. The wireframe for the inal design should identify the compo- nents and feature markup for content, color, and dimensions. Such mockups are as good as seeing the real thing but may take only a fraction of the time to produce.

Deining a Dreamweaver site From this point forward, the lessons in this book function within a Dreamweaver site. Along with the options for creating a standard Dreamweaver site, the dialog ofers the ability to create a site based on the services ofered by Adobe Business Catalyst. Business Catalyst is an online, hosted application that allows you to build and manage rich, dynamic web-based businesses.

To learn more about the capabilities of Business Catalyst, check out www. To create a standard website in Dreamweaver CS6, you need only name it and select the local site folder.

Site names typically relate to a speciic project or client and will appear in the Files panel. For example, many websites provide individual folders for images, PDFs, video, and so on. Dreamweaver assists in this endeavor by including an option for a Default Images folder. Later, as you insert images from other places on your computer, Dreamweaver will use this setting to automatically move the images into the site structure. Setting up a site is a crucial irst step in beginning any project in Dreamweaver.

Knowing where the site root folder is located helps Dreamweaver determine link pathways and enables many site-wide options, such as Find and Replace. Click Cancel. You will use the Welcome screen several times in this book. You can re-enable the Welcome screen in the General category of the Dreamweaver Preferences panel. Take a few moments to familiarize yourself with the design and components on the page. Can you determine what makes this layout diferent from existing HTML 4-based designs?

You will learn the diferences as you work through this lesson. You will align this element to the left later in this lesson. Observe the names and order of the tag selectors at the bottom of the document window. Elements appearing to the left are parents, or containers, of all elements to the right.

As you click around the page sections, you will be able to determine the HTML structure without having to delve into the Code view window at all. In many ways, the tag selector interface makes the job of identifying the HTML skeleton much easier, especially in complex page designs.

These are some of the new semantic elements being introduced in HTML5. By using elements that are named for speciic tasks or types of content, you can streamline code construction while achieving other beneits as well. For example, as search engines, such as Google and Yahoo, are optimized for HTML5, they will be able to locate and identify speciic types of content on each page more quickly, making your site more useful and easier to browse.

Using these new elements means that you can apply complex CSS styling while reducing the complexity of the code overall. You can still use class and id attributes, but the new semantic elements reduce the need for this technique. Style display is typically on by default showing a check mark in the menu. Without the CSS styling, the navigation menu reverted back to a simple bulleted, or unordered, list with hyperlinks.

Not too long ago this menu would have been built with images and complex rollover animation. If the images failed to load, the menu usually became a jumbled, unusable mess. But navigation built on text-based lists, on the other hand, will always be usable, even without styling.

Get into the habit of saving your iles on a regular basis. It will prevent the loss of data and important changes to your iles. In the Save As dialog box, navigate to the site root folder, if necessary. Name the ile mylayout. All HTML pages created for the inal site will be saved in the site root folder.

If you start at the top of the page and work down, the irst step would be to insert the graphical banner that appears in the inal design. You could insert the banner directly into the header, but adding it as a background image has the advantage of leaving that element open for other content. It will also allow the design to be more adaptable to other applications, like cell phones and mobile devices.

Press Delete. When you delete the image placeholder, the empty header will collapse to a fraction of its former size because it has no CSS height speciication. But HTML5 is not the current web standard and some pages or components may not display properly on certain older browsers and devices. With all the caveats out of the way, the ugly truth is that even when you use standard HTML 4 code and components, older browsers and certain devices will still fail to render them properly.

Some web design- ers believe that the longer we persist in using the older code, the longer the older software and devices will hang around making our lives diicult and delaying the inevitable adoption of HTML5. These design- ers say we should abandon the older standards and force users to upgrade as soon as possible.

Background images repeat both vertically and horizontally by default. Click Apply. Note that the image is slightly narrower than the container. Before clicking OK, we need to add some inishing touches to the element. Did you notice that the butterly actually overlaps both the header and the hori- zontal navigation bar? This technique has declined dramatically in recent years as the need to support cell phones and other mobile devices has increased. For certain applications, AP divs are still handy.

An AP div will appear at the top left of the header. Note the ID apDiv1 assigned to the new div in the tag selector. A corresponding rule has been added to the CSS Styles panel. You could build pages with colorful text and graphics and make words jump out using different sizes, fonts, and colors. CSS is a formatting language used to make text look good, add sophisticated layout to pages, and basically add style to your site. From now on, think of HTML as merely the language you use to give organization to a page.

It helps identify and structure the stuff you want the world to know about. Cascading Style Sheets, on the other hand, add design flair to the highly structured HTML content, making it more beautiful and easier to read. But CSS is more powerful than that. You can use it to add borders, change margins, and even control the exact placement of an element on a page.

If you want to be a Web designer, you need to get to know Cascading Style Sheets. To click means to point the arrow cursor at something on the screen and then—without moving the cursor at all—press and release the clicker button on the mouse or laptop trackpad. To double-click , of course, means to click twice in rapid succession, again without moving the cursor at all. And to drag means to move the cursor while holding down the button.

Keyboard shortcuts. Every time you take your hand off the keyboard to move the mouse, you lose time and potentially disrupt your creative flow. This command, by the way, saves changes to the current document. Choice is good. Dreamweaver frequently gives you several ways to trigger a particular command—by selecting a menu command, or by clicking a toolbar button, or by pressing a key combination, for example.

Some people prefer the speed of keyboard shortcuts; others like the satisfaction of a visual command available in menus or toolbars. This book lists all the alternatives, but by no means are you expected to memorize all of them. Despite the many improvements in software over the years, one feature has grown consistently worse: documentation. Until version 4, Dreamweaver came with a printed manual. But since MX , all you get is a Getting Started booklet.

At times, the terse electronic help screens assume you already understand the discussion at hand, and hurriedly skip over important topics that require an in-depth presentation. Engineers often add technically sophisticated features to a program because they can , not because you need them. The purpose of this book, then, is to serve as the manual that should have been in the box. This book periodically recommends other books, covering topics that are too specialized or tangential for a manual about using Dreamweaver.

The primary discussions are written for advanced-beginner or intermediate computer users. Open that. Inside the System folder window is a folder called Library; double-click it to open it. Inside that folder is yet another one called Fonts.

Double-click to open it, too. Similarly, this kind of arrow shorthand helps to simplify the business of choosing commands in menus, as shown in Figure I Dreamweaver CS3 works almost precisely the same way in its Macintosh and Windows versions.

Every button in every dialog box is exactly the same; the software response to every command is identical. Add Spry Checkboxes Completing and Testing the Form Spry What is Spry? Tabbed Panels Adding a Tabbed Panel Adding and Editing Panel Content Formatting Tabbed Panels Accordions Adding an Accordion Adding and Editing Accordion Content Formatting a Spry Accordion Collapsible Panels Adding a Collapsible Panel Adding Content to a Collapsible Panel Formatting a Collapsible Panel Spry Data Sets What Is XML?

Rules of the Road Inserting a Spry Data Set Creating a Spry Region The Bindings Panel Spry Repeating Region Spry Repeat Lists Spry Table Adding a Detail Region Dreamweaver Behaviors Understanding Behaviors Behavior Elements More about Events Applying Behaviors The Behaviors Panel Applying Behaviors, Step by Step Adding Multiple Behaviors Editing Behaviors A Quick Example Events Mouse Events Keyboard Events Body and Frameset Events Selection and Highlighting Events Form Events The Actions, One by One Spry Effects Blind Highlight Shake Slide Squish Navigation Actions Open Browser Window Go to URL Jump Menu and Jump Menu Go Check Plugin Image Actions Preload Images Swap Image Swap Image Restore Set Navigation Bar Image Message Actions Popup Message Set Text of Status Bar Set Text of Text Field Set Text of Container Text of Frame Element Actions Show-Hide Elements Draggable and Animated Divs Advanced Behaviors Call JavaScript Change Property Adding More Behaviors Flash and Other Multimedia Flash: An Introduction Inserting a Flash Movie Flash Movie Properties Naming a Flash movie The movie file Src property Movie size Play options Margins Quality settings Scaling Alignment Background color Adding Flash Videos Building a Web Site Introducing Site Management Structuring a Web Site Defining a Site Site name Local root folder Default images folder Links relative to HTTP address Case-sensitive links Cache Editing or Removing Defined Sites Exporting and Importing Sites Organizing Site Files Modifying the Files Panel View Adding New Folders and Files Adding files Adding folders Moving files and folders Renaming files and folders Deleting files and folders Site Assets Viewing the Assets Panel Inserting Assets Adding color and link assets Favorite Assets Identifying your Favorites Using your Favorites Removing Favorites Organizing Favorite assets Testing Your Site Site Launch Checklist Find and Fix Broken Links Finding Broken Links Checking just one page Checking specific pages Checking the entire Web site Fixing Broken Links Listing External Links Orphaned Files Changing a Link Throughout a Site Validating Web Pages Steps for Validating Web Pages Common Validation Errors Site Reporting Accessibility Accessibility Priorities Accessibility Options Download Statistics Moving Your Site to the Internet Defining a Remote Site Transferring Files Moving Files to the Web Server Other ways to move files to the Web server

❿
 
 

❿

Learn More