Creating Special Effects With Images and Animation

50% off godday web hosting :


domain search

Creating a Rollover Image in Dreamweaver
In Dreamweaver, Rollover images — as the name implies — are designed to react when someone rolls a cursor over an image. The effect can be as dramatic as a picture of a dog being replaced by a picture of a lion, or as subtle as the color of a word changing as one image replaces another. Either way, Dreamweaver includes a special dialog box for rollovers that makes creating a simple rollover effect one of the easiest behaviors to apply.

To create a rollover image by using Dreamweaver's Insert Image Rollover dialog box, follow these steps:
1. Click to place your cursor on the page where you want the rollover to appear.
Rollover effects require at least two images: one for the initial state and one for the rollover state. You can use two different images or two similar ones, but they both should have the same dimensions. Otherwise, you get some strange scaling effects because both images must be displayed in exactly the same space on the page.

2. Choose Insert --> Image Objects --> Rollover Image.
The Insert Rollover Image dialog box appears.

3. In the Image Name box, name your image.
Before you can apply a behavior to an element, such as an image, the element must have a name so that the behavior script can reference it. You can name elements anything you like as long as you don't use spaces or special characters.

4. In the Original Image box, specify the first image you want visible. Use the Browse button to locate and select the image.
If the images are not already in your site's root folder, Dreamweaver will copy them into your site when you create the rollover.

5. In the Rollover Image box, enter the image you want to become visible when visitors move their cursors over the first image.
Again, you can use the Browse button to locate and select the image.

6. Select the Preload Rollover Image check box to load all rollover images into the browser's cache when the page first loads.
If you don't choose to do this step, your visitors may experience a delay because the second image will not be downloaded until a mouse is rolled over the original image.

7. In the When Clicked, Go to URL box, enter any Web address or browse to locate another page in your site that you want to link to.
If you don't specify a URL, Dreamweaver automatically inserts the # sign as a placeholder.

8. Click OK.
The images are automatically set up as a rollover.

9. Click the globe icon at the top of the workspace to preview your work in a browser and test how the rollover works.

Create a Mouseover Effect
A "mouseover" effect occurs when a user moves the mouse pointer onto an image. When the pointer rests on the image, it changes to something else. This is especially useful for navigation buttons. Dreamweaver 3.0 has mouseover commands ready for you to set up!

1. Start Dreamweaver and open the page the mouse-over effect will be located on.
  
2. Open the Insert menu and select Rollover Image. A dialog box will appear.

3. Type the name of the image to be rolled over in the first box. For example, you might call a Home Page button Home Rollover.

4. In the next box, type the location of the image that will appear on the page. Click Browse to choose an image from your hard disk.

5. In the Rollover Image box, type the location of the image that will be appear when the mouse hovers over the image. Click Browse to choose an image from your hard disk.

6. If the image is click able (linked), type the Web address in the next box. Click OK.

7. Save the page when finished.

8. Test the mouse-over by choosing Preview in Browser from the File menu. Hover your mouse over the image to see the new image take its place.

Go Daddy Deal of the Week: 30% off your order at GoDaddy.com! Offer expires 11/6/12

Implementing Site Navigation

Website navigation is important to the success of your website visitor’s experience to your website. The website’s navigation system is like a road map to all the different areas and information contained within the website.

Using a consistent navigation scheme from page to page helps the website visitor learn your website navigation system.

Types of Website Navigation
There are different types of website navigation:

• Hierarchical website navigation

The structure of the website navigation is built from general to specific. This provides a clear, simple path to all the web pages from anywhere on the website.

• Global website navigation

Global website navigation shows the top level sections/pages of the website. It is available on each page and lists the main content sections/pages of the website.

• Local website navigation

Local navigation would the links with the text of your web pages, linking to other pages within the website.

Styles of Website Navigation
Styles of website navigation refers to how the navigation system is presented.

• Text Links

Text links are words (text) which are surrounded by the anchor set of tags to create clickable text which takes the visitor to another web page within your website, a downloadable document from your website, or to another website on the Internet.

• Breadcrumbs

Breadcrumb navigation shows the website visitor the path within your website to the page they are currently on.

• Navigation Bar

A navigation bar is the collection of website navigation links all grouped together. A navigation bar can be horizontal or vertical.

• Tab Navigation

Tab navigation is where the website navigations links appear as tabs, similar to the tabs you use in a binder to divide the contents into sections.

• Sitemap

A sitemap is a page within your website that lists all the sections and web pages (if you don’t have too many) that are contained within the website. This is different from Google Sitemaps and Yahoo Sitemaps.
A traditional sitemap provides navigation for your website visitors should they get lost, a shorter path to the different areas of the website for those who know what exactly they are looking for and a means for the search engines to find all the pages within your website.

• Dropdown Menu

A drop down menu is a style of website navigation where when the visitor places their mouse over a menu item, another menu is exposed. A drop down menu can include a flyout menu (see next item).
A drop down menu system can create accessibility issues and a problem as far as the search engines not being able to read the links in the menu, but if constructed properly, these issues can be overcome.

• Flyout Menu

A flyout menu is constructed similar to the dropdown menu. When the visitor places their mouse over a link, another menu “flys out”, usually to the right, from the link where the mouse is placed.
Flyout menus face the same challenges as dropdown menus but if constructed properly, they can be accessible and readable by the search engines.

• Named Anchors

Named anchors are the type of links that take you directly to a spot on the current page or on another web page.

Website Navigation Use
To be effective, the website navigation system needs:

• To be consistent throughout the website.

The website visitors will learn, through repetition, how to get around the website.

• The main navigation links kept together.

This makes it easier for the visitor to get to the main areas of the website.

• Reduced clutter by grouping links into sections.

If the list of website navigation links are grouped into sections and each section has only 5-7 links, this will make it easier to read the navigation scheme.

• Minimal clicking to get to where the visitor wants to get to.

If the number of clicks to the web page the visitor wishes to visit is minimal, this leads to a better experience.

    Some visitors can become confused or impatient when clicking a bunch of links to get to where they want to be. In large websites, this can be difficult to reduce. Using breadcrumbs is one way to help the visitor see where they are within the website and the path back up the navigation path they took.

Creating the website navigation system at the planning stage of the website will effect the overall design of the web page layout and help develop the overall plan for the website.

Go Daddy Deal of the Week: 30% off your order at GoDaddy.com! Offer expires 11/6/12

Creating Templates for Site Consistency and Ease of Maintenance

Web page design has become quite complicated due to the rapid advances in technology. Still, you can make your life much easier if you plan your web site in advance of building it.

1. Who is Your Audience?
Before you even begin to build a Website, consider your audience. Before you spend a lot of time and effort, it is necessary to do some do keyword research to see if your product or service is a viable solution.

2. Create a Storyboard
There is an old expression in programming which states: "The sooner you start to code the longer it takes to finish." With that in mind, the first step you should observe is to create a storyboard, essentially a flow chart that you build on paper. If you run into problems, they are much easier to fix here than during the process of building your Web site.

3. Visit Forums and Blogs
Another important research technique is to find out what users actually want. In this case, visit forums and blogs that cater to your interest and find out what users have to say on the subject.

4. Viewing Size
Viewing size is how the user will see your finished design. Unfortunately, this can vary widely depending on the size of the viewing area and whether the browser is maximized or not. According to some online research, a good starting point is to design your Web pages for a maximum viewing size of 776 x 424 pixels in order to reach 95% of visitors. If you decide to design for a larger viewing size, be aware that some users might have to scroll to see the entire page, which will detract from your overall design.

5. Consistency
A big problem with Website design is a lack of consistency. To fix the problem, consider using templates. In many cases, you will save yourself a lot of time and effort. One option to consider is to use Wordpress to build your sites. It offers many templates, both free and professional.

6. Use CSS
CSS (Cascading Style Sheets) are very important for maintaining consistency. Simply making a change to your CSS will immediately update the entire site (assuming that the CSS document is linked to all pages).

7. Keep it Simple
Too many Web designers are seduced by technology and wind up building unnecessarily complicated sites. In reality, simple is better. Your message will be clearer and more direct.

8. Image Slicing
Occasionally, a web designer will want to use an image that covers the entire page. The down side is that such an image is likely to be quite large and could take quite awhile to load. This poses a danger because if the image takes too long to load (roughly ten seconds), you run the risk of losing your audience. The solution is image slicing, which breaks the image into sections that load a bit at a time. This lets the user know that the image is in the process of loading and they are more likely to wait until the process is finished. Another option is to consider creating a web gallery. In this case, one page would show a number of thumbnails, which, when clicked upon would open another page which contains a larger image.

9. Use Stock Photography
Building a Web site is often a time intensive process, especially when it comes to creating images. One simple (and often inexpensive) solution is to use Stock Photography. Many options exist, such as rights-protected or royalty-free imagery.

10. Use Comps
A comp is a low-resolution image that you can download from many Stock Photography sites and use as part of your layout. With such an image you'll be able to see if your design "works," or not.

Ease of Maintenance
Just about the time you think it’s all finished, you get new ideas, new products or services – things change. There are lots of changes you’ll be wanting to do with your website as time marches forward. Sometimes you’ll want to add new content, remove old content or just make some changes to existing content on your website.

With content management system, making changes like these is as easy as using a word processor. Type your content and use the editing menu to add styles, color, hyperlinks, and so forth. Browse with your mouse to upload images to include in your articles. You can even include multimedia.

Think about what this means. You can log into your website's administration area, and add a new article or change an existing one. You can add a new product or change a description or price - all in less than five minutes!

Joomla won't just save you money, Joomla will save your organization TIME! And you know that unlike the old saying, "Time is money.", time is actually more valuable than money.

Being able to keep your website fresh and up-to-date will also mean that visitors to your site will have more trust in the information they find there and they'll be more likely to check back frequently, knowing that things are constantly being updated. That has to transfer into more customers and more profit.

Even big changes like adding new features, is as easy as finding the particular extension you want; downloading it, then installing it onto your website and configuring it to your tastes.  If that’s more work than you want to do, at least a web developer can do this for you in just a tiny fraction of the time it would take for him to create this new application.

Even having a custom feature programmed for you is a simple matter because of cms’s popularity and the number of web developers who are familiar with various content management systems, but chances are you’ll never need a custom feature because there are thousands of extensions readily available – most of them for free.

You can read reviews from others who have tried an extension and you can install it on your website with just a few mouse-clicks.  If you decide later that you don’t like that particular implementation, uninstalling is just as simple, so you can try another extension until you find the one you like.

Adding a new feature can take as little as five minutes and you can’t beat the cost – if you’re willing to DIY, and even if you hire someone to do it for you, it will cost just a fraction of what it would take to write a custom script.

Not only is adding extensions fast, easy and usually free with content management systems, but since these are programmed modularly, you don’t have to worry about a new extension causing a problem elsewhere in your application.  That’s a common problem with custom web applications.

When you want a new look for your website, installing a new design template is often as simple as installing an extension.  Many cms templates are free. Some of the more intricate designs may require some experience with html, css or Javascript to initially setup, but many will install with your current content automatically.

Go Daddy Deal of the Week: 30% off your order at GoDaddy.com! Offer expires 11/6/12

Web content management

A web content management system (WCMS) is a software system that provides website authoring, collaboration, and administration tools designed to allow users with little knowledge of web programming languages or markup languages to create and manage website content with relative ease. A robust WCMS provides the foundation for collaboration, offering users the ability to manage documents and output for multiple author editing and participation.

Most systems use a content repository or a database to store page content, metadata, and other information assets that might be needed by the system.

A presentation layer displays the content to website visitors based on a set of templates. The templates are sometimes XSLT files.

Most systems use server side caching to improve performance. This works best when the WCMS is not changed often but visits happen regularly.

Administration is typically done through browser-based interfaces, but some systems require the use of a fat client.

A WCMS allows non-technical users to make changes to a website with little training. A WCMS typically requires a systems administrator and/or a web developer to set up and add features, but it is primarily a website maintenance tool for non-technical staff.
Advantages
Low cost
Some content management systems are free, such as Drupal, TYPO3, Joomla, and WordPress. Others may be affordable based on size subscriptions.[7] Although subscriptions can be expensive, overall the cost of not having to hire full-time developers can lower the total costs. Plus software can be bought based on need for many CMSs.

Easy customization
A universal layout is created, making pages have a similar theme and design without much code. Many CMS tools use a drag and drop AJAX system for their design modes. It makes it easy for beginner users to create custom front-ends.

Easy to use
CMSs are designed with non-technical people in mind. Simplicity in design of the admin UI allows website content managers and other users to update content without much training in coding or technical aspects of system maintenance.

Workflow management
CMSs provide the facility to control how content is published, when it is published, and who publishes it. Some WCMSs allow administrators to set up rules for workflow management, guiding content managers through a series of steps required for each of their tasks.

Disadvantages
Cost of implementation
Larger scale implementations may require training, planning, and certifications. Certain CMSs may require hardware installations. Commitment to the software is required on bigger investments. Commitment to training, developing, and upkeep are all costs that will be incurred for enterprise systems.

Cost of maintenance
Maintaining CMSs may require license updates, upgrades, and hardware maintenance.

Latency issues
Larger CMSs can experience latency if hardware infrastructure is not up to date, if databases are not being utilized correctly, and if web cache files that have to be reloaded every time data is updated grow large. Load balancing issues may also impair caching files.

Tool mixing
Because the URLs of many CMSs are dynamically generated with internal parameters and reference information, they are often not stable enough for static pages and other web tools, particularly search engines, to rely on them.

Notable web CMS
Some notable examples of CMS:

• WordPress is the most popular content management system. It originated as a blogging CMS, but later evolved into a fully-fledged CMS.
• Joomla! is a popular content management system that can be used to easily create and edit webpages, but it is more complex than WordPress.
• Drupal is the third top used CMS and originated before WordPress and Joomla. It is more difficult to learn and understand than the above two CMSs, but is the most secure. It powers the White House site.

Uploading Files to the Web

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:
1. Make sure your Files panel is open. If not, go to Window > Files.
2. Click the Connect button. This button connects Dreamweaver to your server space.

3. Make sure your toolbar displays Local View and your files can be seen in the panel. The Local View shows everything in the Files panel that is on the computer in your local root folder.
4. Select your local root folder and click on the Put button.

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).

 

Inserting Special Media

Rollover images
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:
1. Click on Insert > Image Objects > Rollover Images.
2. In the Insert Rollover Image dialog box under Original Image, browse for the image that is to be seen before the mouse rolls over it (Fig.23).
3. Under Rollover Image browse for the image to be seen when the mouse rolls over it.
4. In the When clicked. Go to URL field, you can enter a link by typing in the web address or browsing to a file.
5. Click OK.

QuickTime Movie
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 local root folder.

Embedding a Power Point 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.

Creating Hyperlinks

A hyperlink is text that can be clicked by your reader to go to some other Web page.

Write the text you would like to link.

1. Select the text.
2. Open the properties window, if it is not already open, and click in the link box.
3. To link to a file on the Web, type in the URL to that file.
4. To link to a file on your hard drive, choose that file from your file list, by clicking on the "File" icon (it looks like a yellow folder by the Link box).

You can create a mail link by typing
mailto:email address
Replace "email address" with your email address.
If you want to make an image clickable, follow the above instructions for your image instead of text.

Previewing in Browser

You can preview the current page in these browsers. Choose File > Preview in Browser, then choose the browser name from the list. Dreamweaver saves the file to a temporary page and launches the saved file in the specified browser.

Or you can view preview the web page by clicking on the Preview in Browser button on the Document toolbar. This brings up a pop-up menu with a list of the browser choices available on your computer.

 

Adding Design Elements

Adding text
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.

Inserting images
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.

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.

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.

Tables are useful if you want to show relationships between different types of data. They allow you to group related data in rows and link them to other data in different columns. While they are often not needed on many sites, there are certain situations where you may want to present your data in tabular form.

Steps to Creating a Table

1. Start up Dreamweaver and open the page where you want the table.
2. Move your text cursor to the location on the page where you wish to insert the table. One way to do this is to simply click the spot where you want the table to appear. This will cause your text cursor to move to that place.
3. Click the "Insert" menu and then the "Table" item on the menu that appears. In the interest of brevity, I shall refer to such a sequence of clicking menu items as "Insert | Table".
4. A dialog box entitled "Table" will pop up. Enter the number of (horizontal) rows and (vertical) columns you want the table to have in the spaces for "Rows" and "Columns" respectively.
5. "Table width" refers to how broad you want the table to appear. This width can be specified in percentage of the enclosing column of your multi-column site or in pixels. For example, if you want the table to span the entire width, type 100 into the box for "Table width", click the down arrow of the adjacent drop down box and select "Percent". It's also possible to create an auto-resizing table by deleting the number in your table width box. Your table will then be resized by the web browser and Dreamweaver according to how much content it has.
6. Tables can be borderless or have borders. Borders are just the lines that demarcate the boundaries of each table cell. In general, for data tables, most people want borders since they make the table easier to read. The thickness of the borders are specified in the "Border thickness" box. It defaults to 1 pixel. It's up to you whether to change it or leave it at the default. If you do not want a border, enter "0" (zero, without the quotation marks) into the box.
7. Cell padding is the amount of space you want between each cell's content and its border. Cell spacing is the amount of space you want between adjacent cells. You can leave it blank or set it to any value you wish. If you're not sure what number is appropriate, you can always enter some random value (like "2") to start with and adjust it later. I'll mention how you can change the settings you make here below, without having to recreate everything. Note that "0" (zero) is a valid value for these fields as well.
8. The "Header" section allows you to indicate that leftmost column or topmost row of your table is going to contain a description for that column or row. The content of the column or row that you designate as a "header" will be displayed in a bold font and centred. The default is to create a table with no headers, that is, all rows and columns look the same, and nothing is internally marked in the HTML code as being a title for that row or column.
9. In the "Summary" box, enter a brief description of what your table contains. For example, if the table contains the examination scores for each student in your class, you may want to put "student examination results" in the summary box. This box is optional, and its contents will not be displayed. It is primarily intended to improve the accessibility of your table and may be used by specialized software like screen readers.
10. When you're done, click the "OK" button. The table should appear on your web page. Note that when the table is first created, Dreamweaver selects the entire table although it may not be immediately obvious that it has done so. Therefore do not type anything yet or you'll accidentally replace the whole table with what you type. Instead, click a cell in the table before starting on your content.

How to Configure/Customize a Table After It Has Been Created
If you are dissatisfied with the table you created above for some reason, you do not have to delete everything and start over.

1. Adding More Rows or Columns to Your Table in Dreamweaver

To add new rows or columns to your existing table, click "Insert | Table Objects". A menu will appear allowing you to insert a new row above or below your current cell (where your text cursor is currently shown) as well as a new column to its left or right. If your cursor is not within any cell in the table, first click somewhere within one of the cells before using this menu.

2. Changing Your Mind about the Headers

If you have set or not set a particular cell as a header, and now have a change of heart, click the cell that you want to change. Look at the bottom of your Dreamweaver window to locate the Properties pane. Somewhere in that pane, you should be able to see the word "Header" with a checkbox beside it. If you had previously designated the cell as a header and now changed your mind, uncheck that box. If you have previously not made that cell a header and now want it to be one, check it.

3. Changing the Table's Width

Look at your table. There should be a fine green line above the table with the width of the table displayed in the centre. Click that line. This should select the entire table.
(If you don't see any green line, it means that your text cursor is not in the table itself. Click anywhere in the table and the green line will appear. Don't worry about that green line: it's just a visual cue used by Dreamweaver to allow you to select the entire table easily. It is not actually displayed in a real browser.)
The Properties pane at the bottom of your Dreamweaver window should now show the table width in the box beside the "W" character. Change it to the new value. You can also switch between specifying the width in pixels and percentage by clicking the down arrow in the adjacent drop down box.

4. Changing the Cell Padding and Cell Spacing

To change the cell padding and spacing of the table, click the green line above your table to select the entire table. The Properties pane at the bottom of the Dreamweaver window should now display the "Cellpad" and "CellSpace" fields, allowing you to set or change them.

5. Changing the Colours of the Background and Border or Adding a Background Image

In the same way, you can change the background or border colours of your table. Click the green line above your table to select the entire table. In the Properties pane at the bottom of the Dreamweaver window, you should now be able to see the fields "Bg color" (that is, background colour), "Brdr color" (for "border colour") and "Bg Image" (for "background image"). Clicking the box beside any of the colour fields will cause a colour picker to appear, allowing you to choose a colour.

If you're setting a background image, you should first copy the background image into a folder or subfolder of your website directory. By "website directory", I mean the directory that appears in the rightmost column (the "Files" pane) of your Dreamweaver window. Either copy the image into that folder itself, or a subfolder within it. This will allow Dreamweaver to manage that file with its site manager and upload it automatically when you publish your web page. Once you've done this, return to the Properties pane for the table and click the folder icon on the "Bg image" line and select the image file accordingly.

6. How to Change the Background Colour of a Row or Column

If you wish to change the background colour of an entire row or column, for example to make your table zebra-striped or have alternate shades of colour (for easier reading), drag your mouse across that row or column. That should select that particular row or column. Then change the background colour for that row through the Properties pane at the bottom of the Dreamweaver window. Specifically, click the box beside the word "Bg" (for "background") to display the colour selector.