Looking for:
Adobe dreamweaver cs6 basics free |
Table of contents - Adobe dreamweaver cs6 basics free
Dreamweaver tutorials | Learn how to use Dreamweaver
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.
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.
Level : Beginners Created : February 22, Size : Computer PDF guide you and allow you to save on your studies. Download the file. You are a blessing to me. Incidentally, if you think that the text reads like instructions written in technical jargon, you're not wrong. However, you can ignore what it says, since this tutorial series will translate the relevant portions into plain English as and when it's needed. Now scroll to the bottom of the page. You can do this in the usual way, for example, by hitting PgDn on your keyboard, by clicking the down arrow on the scroll bar on the right side of the Dreamweaver window, or by dragging the tab on that scroll bar.
That is, do it the same way you scroll your web browser window when reading this chapter. Note that if you scroll using the PgDn key, Dreamweaver will highlight the text on your page as you go down. Just ignore this for now. At the bottom of your page, you will see another horizontal band cutting across both columns of your web page.
This band is commonly referred to as the footer since it sits at the foot of the page. Scroll back to the top of the page again. As before, you can either use the keyboard this time with the PgUp key or your mouse to do this.
If you have used the keyboard to scroll, and find the highlighted text on your web page irritating, just click your mouse somewhere on your page to get rid of the highlighting. Actually, even if the highlighting doesn't irk you, it's still a good idea to remove it anyway. If you type something by mistake when there is text selected, what you enter will replace everything that is highlighted.
It's an accident waiting to happen. Just above your web page, in the portion of the screen that belongs to the Dreamweaver program rather than your page, there is a field labelled "Title:" containing the words "Untitled Document".
Click your mouse somewhere in the words "Untitled Document". This will put the text cursor in that field. Now use the Backspace or Delete keys on your keyboard to erase everything in that field.
In its place, type the name of your website. For example, if your website is called "Example Company", type "Example Company" without the quotes there.
The words you type in this Title field will be used by the search engines when they list your page in the search engine results. They are also displayed in the title bar of your visitors' web browsers or maybe the browser tab for web browsers that don't have a title bar and their bookmarks or "Favourites" if you use Internet Explorer. To see what I mean, glance at the top of your browser window this very moment. No, don't scroll up or click anywhere, just lift your eyes to look at the top part of the browser window itself not my web page.
This title field is not actually displayed within the visible portion of your web page. As such, don't worry about trying to change its colour or font or size or anything. Although the title is ultimately meant for human consumption, it is only indirectly so; its primary function is probably so that computer programs like web browsers and search engines can figure out your page title without having to jump through hoops to analyse your page content.
Nonetheless, it's a vital part of your web page that you must always set, unless you prefer your web page to be known as "Untitled Document" in the search engines and your visitors' bookmarks. For your home page, as I mentioned above, you can simply use your site name as the title, followed by a brief description of the purpose of the site. For example, if you are selling bicycles, you can append "buy bicycles online" or something like that.
There are no arbitrary restrictions to the length of the title, nor are there any rules about what you should or should not put there. Having said that, bear in mind that if your title is too long, web browsers and search engines will truncate it to fit the space they allocate for it.
In addition, for things like your home page, make sure that the name of your site appears somewhere in the title preferably as the very first thing, since this is your home page. Otherwise, when your visitors bookmark your website, it will appear in their Favourites menu as some meaningless slogan without a site name.
Similarly, without your site name in the title of your home page, search engines may not necessarily associate that name with your site, and therefore will not list your site when your visitors search for it by name. The technical aspect of replacing the dummy text in the main body of the page with your own words is actually quite simple if you have ever used a word processor like Microsoft Word before.
That is, click your mouse at any spot on the page to put your text cursor in that location. Whatever you type from that point will be inserted into your page, exactly like any other wordprocessor. Deleting text is as simple as using the Backspace or Delete key on your keyboard, again, like in a wordprocessor. And, as you might expect, you can also move the text cursor around with the arrow keys on your keyboard.
The more complex task involves crafting what you actually want to say on your page. I suggest that you start by replacing the big bold word "Instructions" with the name of your website. This will be the first appearance of the name of your website in the user-visible portion of your web page.
Remember that the Title field that you set earlier only appears in the browser's title bar or tab, so if you don't put the name of your site somewhere on your home page, your site will appear to have no name to your human visitors. Note that if you plan on having your site name appear in your logo which you will create and insert into the top horizontal bar in chapter 2 , it's possible to get away with not typing it here.
In this case, either replace "Instructions" with some other word or words , or just get rid of it. Once you have settled this user-visible title, move on to replace the text in the rest of the right column not the left column. Review what I said earlier about some of the things that should go into a home page if you're not sure how to proceed.
Those who are completely stuck can take a look at the example home page for a fictitious company in the box below. You won't be able to use the words verbatim, since your company is unlikely to be selling the same goods, but it can serve as a framework to get you started on the sort of things you may want on your own page eg a list of your products. Example Co. If you have heard, seen or read an example somewhere, or even just dreamt about one, we probably have it in our stock. Our selection of examples is so extensive that we even have examples of examples.
For example, this example that you're reading about this very moment is available in our stores too. Dreamweaver Site: Get your very own example website, carefully created using thesitewizard. As you know, thesitewizard. Think of all you can do with your own example website! Rejected Manuscripts: Are you a budding author, faced with the unrelenting barrage of rejection slips from potential publishers for your magnum opus?
Now you can comfort yourself by getting examples of rejected manuscripts from other wannabe authors. As you know, misery loves company. Don't worry about things like changing fonts, putting words in bold or italics, adjusting the font size, putting photos of your products next to your words, etc. These things will be taught in the later chapters of this tutorial. For now, just concentrate on writing your content. If you're experiencing writer's block, it may be because you're subconsciously trying to come up with the perfect set of words for your needs.
One possible solution is to just dump your words unceremoniously onto the page, even if they sound utterly mundane. You can always polish it later. In fact, many people find it easier to modify a rough copy of what they want to say than to stare at a blank page, waiting for inspiration to strike so that they can wax lyrical about their products. Leave everything in the left column alone for now. The left column will be dealt with in a later chapter, since you will need additional knowledge before you can change it correctly.
If you want a sub-heading for some of the sections on your page, like the "Featured Products" in my example text above, you'll need to do the following. Type your sub-heading on a line of its own. Then select the line that you just typed.
In computer jargon, selecting a line means to highlight it. You can do this by dragging your mouse pointer over the words on that line. Finally, David shows how to use Media Queries to make your site look good on any screen, from a desktop to a tiny mobile device.
This innovative product is a focused video workshop and accompanying page full-color book that teaches web …. Learn JavaScript by building real-world apps. For more information on heading tags, read this article. After that, you can also type in a title for your page. In your real website, you would choose something descriptive with keywords and not just Dreamweaver Test Site as in the example. Alright, you have just created a page header!
In case you are not familiar with it, CSS is the part that provides all the styling on a web page. It allows you to define colors, the dimensions of elements, font types and sizes, and a whole lot more. We want to use the markup to spruce up our page title and also learn how to change CSS in Dreamweaver.
Yet, that is a much less elegant option than what we will do, which is creating a dedicated file for all the CSS styling of the entire site. Leave the rest as is.
When you now select OK , a new file will appear at the top of your live view. You can view and edit it from there. The first thing you want to do is to change the font of your heading and also center it. For that, you first need to create a new CSS selector. A selector is the name of an element on your page that you can assign properties to, e. Mark your H1 heading in the DOM view on the lower right. Then, above that, choose CSS Designer. To create a CSS selector, click on the line where it says S electors and then click on the plus symbol.
This should automatically propose a selector named. Hit enter to create it. Quick note: For all those new to CSS, this selector means that you are targeting the element named h1 inside the element called. That way, whatever you input as CSS applies to the written text only and not the header element overall. Now that you have a selector, you can assign properties to it. If you know your way around CSS, you can simply type markup into style.
For the less experienced users, Dreamweaver helps you along the way. When you do, it will unlock a lot of additional options. With the new buttons, you can choose many CSS properties from the areas of layout, text, border, and background. The More button gives you options to input your own rules. To change the font type, click on the Text option at the top alternatively, scroll down.
In the upcoming options, hover over font-family and click on default font. This will give you a number of options for common fonts including their fallbacks in case the user browser is unable to show the primary font.
You may want to click on Manage Fonts at the bottom to get to this menu:. Here, you are able to choose free fonts from Adobe Fonts. Either search for them by name or use the many filter options on the left to narrow down your choices until you find something. A click on any of the typefaces marks it for inclusion in Dreamweaver. Once you have done so, you can either use them directly or go to Custom Font Stacks to define your own fallback fonts.
For now, simply hit Done and then click on default fonts again. If you click on your style.
❿
No comments:
Post a Comment