Easy way to find all Non-secure content for SSL
Open Page in Chrome
Open Page in Chrome
Make sure your “Site” is set up
Use Find & Replace
Choose Entire Current Local Site & Source Code
Then Open up template2.dwt and make any changes.
Save the Template and it will update all the pages.
In Chapter 4 you learned about the :hover pseudo-class, which lets you change the style of a link as a visitor mouses over it. For example, the background color of a link in a navigation bar might be deep blue, but when a visitor mouses over that link, the background changes to bright orange. That change, from blue to orange, is instantaneous, but it might feel a bit abrupt to some. What if you could animate the change so that the link starts out blue and then morphs, moving through a range of colors on the way to turning solid orange. When you mouse off the link, the color would animate back from orange to blue. Now that would be cool…and, thanks to CSS3’s new CSS Transitions property, it’s easy to achieve.
In a nutshell, a CSS transition is an animation between one or more CSS properties to another set of CSS properties. Web browsers handle the animation: You only need to supply the starting point (the blue background of a link, for instance) and the ending point (the orange background). You also need to add the CSS Transition property, which, unfortunately, requires a fair amount of code. However, Dreamweaver CS6 provides a simple, straightforward tool for creating that code: the new CSS Transitions panel. Here’s how you use it:
Create a style for an element on your page.
That element can be a class, tag, ID, or any CSS selector style. The element’s style represents the beginning of the animation, and you can use a wide range of CSS properties, including background-color; background-position (Background Attachment); border-color and border-width (Adding Borders); color (Picking a Font Color); font-size (Changing the Font Size); font-weight (Aligning Text); margins (Understanding the Box Model); padding (Understanding the Box Model); width and height (Understanding the Box Model); the left, top, bottom and right position settings (Overflow); word-spacing (Block Properties); and more. (You can find a complete list of valid, animate-able properties at http://tinyurl.com/dxjbdhd, though not all browsers support all the properties.)
If you’re creating a style for a nav button, for example, you could start with a simple class (.nav) that you apply to each link you want to animate. Or, if all the nav buttons are together inside a single div tag or unordered list, you could add a class name to the div or list tag (<ul class=“nav”, for example) then use a descendent selector (discussed on Descendent Selectors) like .nav a to style all the links.
Choose Window→CSS Transitions to open the CSS Transitions panel (see Figure 8-16).
The CSS Transitions panel lists any CSS transitions already applied to the page. You can use the panel to add new transitions or edit or delete existing ones.
Click the New Transition button (the + sign).
The New Transition window appears (see Figure 8-17).
From the Target Rule menu, select the style you created in step 1.
This menu lists all the styles in the page’s style sheet, including tag styles, class styles, IDs, and so on. It also lists any IDs applied to page elements, even if you never created an accompanying ID style, which comes in handy if you simply want to animate an element without first creating an ID style for it.
From the Transition On menu, select the trigger for the animation.
Unfortunately, you can’t just animate an element whenever you like—you’re limited to a handful of events related to CSS selectors. The :hover pseudo-class is the most well-known, but there are others you can tap into:
active refers to the moment you click on a link. It’s the same as the :active pseudo-class discussed on Removing a Link. Browsers also apply an active state to any time you click on an element and hold the mouse button down. In other words, you could create a CSS animation so that when a visitor clicks on a particular <div> element and holds the mouse button down, that div’s background color changes, its width increases, and its font size grows.
checked applies to checkboxes (Checkboxes and Checkbox Groups) and radio buttons. However, there aren’t a lot of CSS properties that apply to checkboxes and radio buttons that are worth animating.
focus refers to text fields in web forms. When a visitor either clicks into or tabs to a text field, that field receives what’s called “focus.” You can apply a separate set of styles to a field when it’s focused and animate the change between the look of the field as it normally appears and as it appears when a guest clicks into it to type. For example, you could set the height of a multi-line text field (also called a textarea, as described on Text Fields) to 100 pixels, and then create a CSS transition that changes the field’s height to 500 pixels. When a visitor clicks into that text box, it grows to 500 pixels high, and when the visitor tabs or clicks out of the box, it shrinks back to 100 pixels. Likewise, you could set the background color of a text field to white, but when a visitor clicks into it, the background slowly changes to bright yellow.
hover is the most commonly used option. It applies when a visitor mouses over an element. While you’ll commonly use the hover transition with links, you can apply it to any page element: paragraphs, div tags, headlines, and so on.
target applies to named anchors, described on Linking Within a Web Page, and it applies when a visitor clicks a link that jumps to that anchor. For example, say you add a link at the top of a page that jumps down the page to a named anchor. You could add a background color and a CSS transition to that named anchor so that when a visitor clicks the link and jumps to that spot on the page, the color fades into view.
Choose either “Use the same transition for all properties” or “Use a different transition for each property.”
As you’ll see in steps 7-9, you can set a duration for the animation (how long it takes), a delay (how long before it begins), and a “timing function” (the rate of change during the animation). You can apply the same settings to all CSS properties or set different timings for each property. For example, if, when a visitor mouses over a navigation button, you want that button to change from blue to orange, have its text grow from 16 to 25 pixels, and enlarge its border from 1 pixel to 10 pixels in width, you have a choice. You can have all three animations occur at the same rate, or set different rates for each. For example, you could have the background color change quickly, make the border change more slowly, and wait for a second before the text increases in size; to do this, you’d choose the “Use a different transition for each property” option.
Depending on which selection you make, the next steps will vary. If you selected the “Use the same transition” option, continue to the next step. If you selected “Use a different transition,” skip to steps 10 and 11 to add a CSS property to animate, and then jump back to steps 7– 9 to set the duration, delay, and timing function for that property.
Type a number in the Duration box and select either “s” (for seconds) or “ms” (for milliseconds) from the menu to the right.
The duration specifies how long the animation takes. While it may seem cool to slowly change the background color over the course of 10 seconds, most web surfers are impatient and don’t want to wait to savor your carefully choreographed animation. A good value is .25 seconds (250 milliseconds)—that speed is fast enough for anxious visitors, but slow enough so they can see it. However, you may want to try .5 seconds (500 milliseconds) or longer to see how the effect looks.
As mentioned in step 6, you can set different timings for each property, so you might want one animation to happen really quickly (like a change in the text size), but another (like a change in background color) to happen more slowly.
Type a number in the Delay box and select either “s” (for seconds) or “ms” (for milliseconds) from the menu to the right.
The delay value indicates how long the browser should wait before starting the animation. In general, it’s best to type 0, since waiting for any significant amount of time before starting the animation might confuse visitors. In addition, an animated transition reverses itself the moment the “trigger” stops: In other words, if a visitor mouses over a link, the animation begins, but when he moves the mouse off the link, the animation stops (even if the animation hasn’t ended) and goes back to the original CSS property. If you add a long delay, then, your visitors may never see the animation.
Choose an animation speed from the Timing Function drop-down menu.
While the duration setting indicates how long the animation takes from start to finish, the timing function (also known as an “easing” function) controls the rate of change in an animation. Normally, a CSS transition doesn’t progress at the same speed for the entire animation. That is, if you’re changing the background of a link from blue to orange, the background color will start moving toward orange slowly at first; more quickly in the middle, reaching a more orangish color rapidly; and then slowly turning solid orange at the end. Different timing functions specify different rates of change. You can get some interesting and more “natural”-looking animations with different options:
The cubic Bezier setting is the most complex. It requires four numbers that plot four “control points” along a line. Each point is a number from 0 to 1. In reality, all the timing functions follow what’s called a Bezier curve that plots the amount of visual change over time (if you’ve worked with a drawing program, you’ve probably used Bezier “handles” to add curves to lines). The math isn’t worth explaining (that’s just our way of saying it’s too confusing even for us), so you’re better off using an online tool to create and test different settings. The “CSS cubic-bezier Builder” tool at http://tinyurl.com/bljzsxl is particularly good. It lets you drag the control handles around and test how the animation changes over time. Once you find a curve you like, just note the four numbers and type them into the Timing Function box: for example, cubic-bezier(.17, 1, .78, .42).
The ease option is the normal way a transition animates: slowly at first, rapidly in the middle, and then slowly at the end.
The ease-in setting begins slowly at first, then picks up speed to finish the animation rapidly.
The ease-in-out option begins very slowly, proceeds very rapidly in the middle and ends very slowly.
The ease-out option begins very quickly, and then ends slowly.
The linear option provides a smooth animation, where every step in the show represents the same amount of progress. There’s a reason that this setting isn’t the default for animations…it’s just boring.
From the Property menu (Figure 8-17) pick the CSS Property you want to animate.
While the list is very long, there are a few properties that work particularly well. Any property that uses color, like the background-color, border-color, and color properties, are good candidates; positioning properties like left, right, top, and bottom (used with absolutely positioned elements, described in Chapter 9) also look great when animated, as do the width and height properties. Some animated properties don’t look very good or don’t work at all in most browsers. For example, while Chrome can animate a change in background-image, no other browsers can, and animating font-weight (from normal to bold, for example) doesn’t work in any browser.
You should select a CSS property that you specified in the original selector you chose for step 4. For example, if you want to animate the background color of an element, make sure you first give the element a background color before you add a CSS transition to it. While it’s possible to animate a property without first adding that property to the beginning style (the Target selector), it sometimes produces weird results.
Set the value for the property in the End Value box.
What you add to this box depends on what property you selected. If you pick the background-color property, for example, Dreamweaver displays a color picker box; either select a color from it or type a color value into the box (see Adding Bold and Italic for more on CSS colors). If you pick a property that requires a numeric value, like width, height, margin-left, and so on, Dreamweaver displays two options: a box to enter a value and a menu for selecting a measurement unit, like px (pixels), em, or % (see Changing the Font Size for more on CSS measurement units).
If, in step 6, you chose to set a different transition for each property, go back to steps 7– 9 to set the timing options for this particular property.
Continue to add additional properties following steps 10 and 11.
You don’t need to animate every CSS property applied to an element. Trying to add too many visual changes at once not only slows down the browser, it also probably distracts your audience. One or two animated changes is often enough to capture people’s attention.
From the “Choose Where to Create the Transition” menu, select which style sheet you want to add the transition information to.
CSS transitions are really just CSS styles, so you store them in either an internal or external style sheet. This is the same choice you make when creating any CSS style, as described on Phase 1: Set Up the Style. In general, it’s best to store the style in the same external style sheet you use for all the styles in your site.
Click Create Transition.
Dreamweaver closes the New Transition window, adds the required CSS to the page’s style sheet, and lists the animation in the CSS Transitions panel (see Figure 8-18).
This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout, insert images and text, create links, and how to upload your site to the Internet. This tutorial offers information for Mac and PC users.
TABLE OF CONTENTS
In this tutorial, you will learn the following: 1. ACTIVATING YOUR WEBSPACE
2. GETTING STARTED
3. CREATING A HOMEPAGE
4. DESIGN AND LAYOUT
5. INSERTING AND USING TABLES 6. ADDING DESIGN ELEMENTS
7. PREVIEWING IN BROWSER
8. CREATING HYPERLINKS
9. INSERTING SPECIAL MEDIA
10. UPLOADING YOUR SIT
1. ACTIVATING YOUR WEBSPACE
Before you get started, it is important that you have somewhere to upload your Web site when it is com- pleted. To activate your personal Web space, either:
1. Visit the Technology Support Center (TSC), located at 110 Hayes Hall, and apply for personal web space.
2. Ask your instructor (if the project is for class work) about setting up a ClassWorks server space for your class.
Information about applying for a personal web space from the TSC can be found at:
2. GETTING STARTED
CREATING YOUR LOCAL ROOT FOLDER
First, you need to decide what you want to put on your website: images, buttons, videos, PDF documents, PowerPoint presentations, etc. To create and maintain an organized website, you need to establish a hier- archy of folders that contain all of the components that make up your site. This folder is called your Local root folder. This folder is important because this is where Dreamweaver looks for all your files.
To create a root folder, follow these steps:
choose New Folder.
NOTE: Make sure that all of your pages and images are saved in your rooter folder, or they will not ap- pear the next your website is opened.
MANAGING YOUR SITES
1. Begin by opening Adobe Dreamweaver CS6.
On a PC, click Start > Programs > Adobe > Dreamweaver CS6, or click on the Dreamweaver shortcut on the desktop.
On a Mac, click Macintosh HD > Applications > Adobe Dreamweaver CS6 , or click the Dreamweaver icon in the Dock. (Figure 3)
Figure 3. Navigating to the Dreamweaver CS5 application. on a Mac
2. GETTING STARTED CONT.
The most important step you need to take every time you launch Dreamweaver CS6 is to define your Local Info. The local root folder is the name for the folder where you are storing all of your website’s contents.
To define a site, follow these steps:
1. Click Site > Manage Sites.
2. Click New > Site.
3. Select the Site tab.
4. Enter a name for the site in the Site Name text field (This name will be for your use only – it will not be published with your site.)
5. Click the small folder icon next to the Local Site Folder text field. Browse to the root folder that you created earlier in the tutorial. Once you’ve located the folder, click the Choose button.
6. Select the Advanced Settings tab.
7. Click the small folder icon next to the Default Images Folder text field (Figure 4). Browse to the images folder that you created earlier in the tutorial. Once you’ve located the folder, click the Choose button.
Figure 3. Selecting the Default Images Folder in Dreamweaver CS6 on a Mac.
2. GETTING STARTED CONT.
Next, every time you launch Dreamweaver, you have to define your Remote Info. The Remote Info tab is used to tell Dreamweaver where to put your files when you are ready to upload them to the web. If you are using the BGSU personal server space, use the diagram below (Figure 5) to fill out the informa- tion. (If you are using any other server you will need to know the host name.)
To define the remote info, do the following:
Figure 5. Configuring the Remote Server in Dreamweaver CS6 on Mac.
3. CREATING A HOMEPAGE
To create a Web page, follow these guidelines:
1. To add a new page go to File > New and choose a basic HTML page. Save this page by clicking
File >Save As. Name the first page index.html. This will be the first page that users encounter when they visit your site. Save this file to your local root folder as index.html. Naming the homepage index.html tells the Web browser that this is the first page it should open when someone visits your site.
2. After your homepage index.html is created, you can use this page as a template layout for all the other pages in your site. Simply hit Save As and name the file whatever you wish, but be sure to keep the name is simple, for example history.html, resume.html, etc. Remember not to use capital letters or spaces when naming files, this will make it easier for web browsers to find your files.
3. To save the pages of your site simply click File > Save for each page. Make sure your homepage is named index.html, and save all of your files in the folder you chose when you defined your site, i.e. in your local root folder.
NOTE: This process will save your files to your local site. You can transfer each file separately to the remote site or transfer the entire site once you have finished working on it.
4. DESIGN AND LAYOUT
Even if you are creating only a simple Website, you should begin by sketching out the layout of your site. Decide where you want titles, images, navigation buttons, and text to appear on the screen.
Most web sites have the same design characteristics on every page. For example, Website titles are usually in the top left or top center, while navigation buttons usually appear vertically on the left or horizontally below the title. In addition to sketching out a layout for each page, you should determine how many pages you will need for the Website. Thorough planning is essential to good web design.
In order to get your text, navigation buttons, and images to appear where you want them on the Web page; you need to use tables to format content of each page. Everything on each page of your Website should fit within one large table.
Using your layout sketches, you can determine what your table needs to look like. Figure 5 shows a simple layout sketch. Figure 6 shows the same layout, with table borders drawn in. Figure 7 shows how the table can be implemented in Dreamweaver.
Now, simply create a table in Dreamweaver that has the same characteristics as the borders drawn on the page. The next chapter will teach you how to insert your table.
Figure 5: Simple layout sketch Figure 6: Simple layout sketch with borders
5. INSERTING AND USING TABLES
WHY USE TABLES
Tables help you divide the space on your page. They are similar to tables in Word or Excel but can be used in much more flexible ways. Tables give you the option of making your page a fixed size or making it fit to the user’s window the best it can. Tables also guarantee that the location of your text and images does not change when seen on screen with different resolutions or in different Web browsers.
HOW TO INSERT A TABLE
1. To insert a table, follow these steps:
2. In the main menu, click Insert > Table.
3. Insert the amount of Table Rows and Columns (Figure 7).
4. Set Table Width to between 600 and 800 pixels.
5. Set Border Thickness. To have a visible border type in 1 or higher, to have no border type in 0. 6. Cell Padding adds room inside of a cell. Enter 0 for no space or a number to Increase the space. 7. Cell Spacing adds space between cells. Enter 0 for no space or a number to Increase the space. 8. Click Ok.
Figure 7: Table window
5. INSERTING AND USING TABLES CONT.
PROPERTIES OF TABLES
If you click on one of the table borders, you can view your table properties in the Properties window.
Figure 8: Table Properties Window
In the top section of this window (Figure 8) you can:
In the bottom section of this window (Figure 8) you can:
• Clear and convert table widths and heights
• Change the background color of the whole table • Insert a background image for the whole table
• Change the border color
5. INSERTING AND USING TABLES CONT.
PROPERTIES OF CELLS INSIDE TABLE
Once the properties of the table have been set, you can also adjust the properties of individual cells within the table by clicking inside the cell (Figure 9).
In the top section of this window you can format the text inside the table cell. In the bottom section of this window you can:
Figure 9: Table Format window
Here is an example of a page with a background color selected for the page, for each table, and for some specific cells in each table (Figure 10).
Figure 10: Background color, table color, cell color
6. ADDING DESIGN ELEMENTS
To insert text simply click inside a cell and type in your content. When you click Enter, Dreamweaver automatically adds paragraph spacing. To add a line space, click Shift + Enter.
To insert an image, follow these steps:
1. Click in the cell where you want the image to appear.
2. Click Insert > Image.
3. Locate the image you want to insert
NOTE: All of your images should be saved in the “images” folder that you established when you started.
4. Click Choose to insert the image.
Click on the image to view its properties in the Image Properties Inspector window (Figure 11).
Figure 10: Image Properties Inspector Window
FORMATTING PAGE PROPERTIES
To change the background color of your pages or other overall properties of your website, go to
Modify > Page Properties. Here, in the Page Properties window, you can set the default font, text size, text color, and background for all of your pages (Figure 12).
6. ADDING DESIGN ELEMENTS CONT.
Figure 12: Page Properties Window
7. PREVIEWING IN BROWSER
TO PREVIEW IN A BROWSER
You can preview your Web pages in a browser in many ways:
1. Choose File > Preview in Browser.
2. Hit F12.
3. Click on the world icon located on the toolbar at the top of your page (Figure 13).
Figure 13: Preview in Browser Menu
8. CREATING H YPERLINKS
A hyperlink or link, is an object or text that, when clicked, takes the users to another webpage or opens a file. The various types of hyperlinks are explained below.
Internal links are used to connect users to other pages within the same website. Before linking to other pages, you must make sure that the other pages are saved in your local root folder and contain the file extension .htm or .html.
To create an internal link, follow these steps:
1. Select the text or image you would like to make a hyperlink.
2. Click on the small folder next to the Link field in the Properties Inspector (Fig.19 and 20). 3. Browse through the files, and select the page you would like to link.
4. Click Choose.
Figure 6. Duplication Objects.
External links are used to connect the users to pages from other websites. To create an external link, do the following:
NOTE: If you select the Target type as _blank, it will open the link in a new window while keeping your website open in another window.
8. CREATING H YPERLINKS CONT.
LINKS TO FILES
Sometimes you may need to link a file such as a PDF, a Word document, or a PowerPoint presentation. When the user clicks the hyperlink, the files will either automatically open up in its original program, or the browser will prompt the user to save the file on their hard drive.
To create a link to a file, follow these steps:
1. Make sure that the file you want to link is saved in your root folder.
2. Select a text or an image you would like to make a hyperlink.
3. Click on the small folder next to the Link field in the Properties Inspector. 4. Browse through the files, and select the file you would like to link.
5. Click Choose.
6. Select the Target type as -blank.
BASIC EMAIL LINK
E-mail links are links that will automatically open the user’s default email program with a blank e-mail ad- dressed to the specified e-mail link.
There are two ways to create an email link you can:
Fig.21: E-mail Link window
Freddie Falcon firstname.lastname@example.org
Or, you can:
1. Select the text you want to be your email link.
2. In the Properties window in the Links field, type in mail to: email@example.com, or any other email address you want to use as your contact.
9. INSERTING SPECIAL MEDIA
Figure 10. Texting Wrapping.
Rollover images allow you to have a graphic change to a different graphic when the mouse rolls over it. To insert a rollover image, do the following:
seen before the mouse rolls over it (Fig.23).
To insert a movie, follow these simple steps: 1. Click on Insert > Media > Plug-in.
2. Navigate to the desired file.
3. Click Choose.
NOTE: By default the QuickTime is viewed in a very small window; to make the window larger, click
on it once and drag one of the corners to the desired size. Make sure the movie file is located in your 16 local root folder.
9. INSERTING SPECIAL MEDIA CONT.
EMBEDDING A POWERPOINT PRESENTATION
To insert a Power Point Presentation, do the following:
1. Open a project in PowerPoint.
2. Click Save as Web Page.
3. Put both the .html and the folder of files created in PowerPoint into your local root folder.
NOTE: The file .html is now your PowerPoint embedded into a Web page; you can double-click on it to open it in a browser.
4. Insert a link to your PowerPoint .html file. Now if the user clicks on the link, your presentation will open.
10. UPLOADING YOUR SITE
To upload your site to the Web successfully, you must make sure that you defined your Local Info and Remote Info before you did anything else in Dreamweaver. If you are working on a different computer and forgot to define your site, follow the steps on Getting Started page. You will have to create a new site and enter all the information in the Local Info and Remote Info tabs. If you are sure that you defined your Remote Info, but uploading is not working, go back and check your Remote Info. Go to Site > Manage Sites > Your Site Name. If the name of the site is not there, follow the steps on Getting Started page.
UPLOADING YOUR FILES
To upload your files to the Web, complete this process:
Figure 16. Grouping Objects.
NOTE: If you make changes, be sure to upload your entire folder and replace the old version to keep all files linked properly.
1. In the toolbar, switch your view from Local to Remote View. You should now see your files under Remote as well. The Remote View shows you all of the files uploaded on your server space.
2. Check your site in a browser by typing in your Web site address. If you are using the BGSU personal web space your Web address is: http://personal.bgsu. edu/~(your username).
NOTE: We recommend that you save a backup of your local root folder on something semi permanent such as a CD, a zip disk, or a flash drive (Do not use a floppy disk!) in order to save you time and energy when you need to update the site.