Geek Certs Blog

This week’s material is fun to work with!

This tutorial explains how to create rollovers, menus, filters and transitions. Students learn how to create and use different types of effects in their Web pages, and how to use some of these effects as Web page navigation aids.

Make sure you look back to Tutorial 11 and review object collections if you’ve forgotten what those are. They are explored further this week. The Reference Window on page 638 describes how to reference an inline image. Be aware that an image can be referenced by its name, but since the name attribute has been deprecated in favor of the id attribute, it’s generally safer to use the document.images object collection. For backward compatibility with older browsers, it is recommended to use both the id and name attributes, set to the same value. Don’t forget the importance of good cross-browser Web site design as there are still many people using older versions of browsers. Also remember that there are a good number of browsers available and that your users (customers) will probably use most of them.

You can write code that detects if a browser supports image objects. If a browser does not support image objects, the rollover effect cannot be obtained, but with good Web development practices, the users should be able to navigate through the Web site without problems. If users have problems navigating your site they won’t stay and you will probably lose a customer.

There are two types of menus: pop-up and pull-downs. You should be familiar with both of these. A pop-up menu can be created using hidden <div> elements and JavaScript code. The clip style attribute can be used to create pull-down menus. Make sure you do the example that is in the book so you know how to do this. Create pop-up menus using JavaScript code. A pop-up menu should appear when the user clicks (or onmouseover, depending on the design) on a menu title. Only one pop-up menu should be visible at a time. If a user clicks the page content that appears below the menus, any active menu should be hidden. JavaScript to show and hide a menu needs to be created.

A function to display the appropriate pop-up menu and to hide all others should also be created. This function will be called when the user clicks on a menu title, specifying it in the href property of the <a> tag. The section exercise explains in detail how to create a pop-up menu for the case study (hint, hint).

A filter is an effect that is applied to an object or page to change its appearance. Using Internet Explorer filters, you can make text or images appear partially transparent, add a drop shadow, or make an object appear to glow. Filters were introduced in Internet Explorer version 4.0 and are not supported by other browsers, so they should be used with caution (I don’t recommend using them at all unless you always get the browser type the user has installed). You should run the filter demo (see page 659) so that you know what these are and how to use them.

A transition is a visual effect that is applied to an object over an interval of time. Transitions are only supported by the Internet Explorer browser. Internet Explorer 4.0 supports two types of transitions: blend and reveal. The Reference Window on page 668 shows how to create transition styles. The section also includes a transition demo. Make sure you check this out. On pages 672-673, a step-by-step exercise shows how to add a transition to a pop-up menu.

Interpage transitions, involve effects applied to a page when a browser either enters or exits the page. Interpage transitions are created using the meta element within the head section of the HTML file. There are four types of transitions, which are run when a user initially enters the Web page, exits the page, enters the Web site, or exits the site, respectively. The Reference Window on page 674 describes how to create an interpage transition.

Finally, the section contains a step-by-step exercise showing how to add an interpage transition to a Web page.

PHP is a Web programming language, similar to JavaScript in that it’s not an object-oriented programming language. The big differentiator between the two is that PHP allows us to take data from a Web page and place it in a database. In reverse, we can also take data from a database and place it on a Web page. You can also do this with ASP (Active Server Pages), but PHP provides much more functionality, as you shall see. Like JavaScript, PHP is based on the ‘old’ programming language of C.

As with the JavaScript programming language, capitalization, parentheses, and quotation marks (single and double) are used and how you use them determines whether your code works (or not). Pay close attention to your typing and scan for errors as your first line of defense when your code does not function as expected.

PHP is a strange name for a programming language. When it originated, it meant Personal Home Pages, but then became a strange occurrence – a self-referencing acronym – when folks began to call it PHP Hypertext Processor (which is PHP referred to within the PHP acronym). Strange, wouldn’t you say?

The authoritative Web site for PHP can be found at http://us.php.net/history. You should bookmark this site and look there for answers to problems you encounter.

As mentioned above, you don’t need to install PHP on your home computer if you don’t want to do that. I suggest that you do as if you don’t, you won’t be able to run PHP code unless you’re connected to the Internet. Chapter 2 outlines what you need to do to install PHP on your computer. However, if the install takes more than a couple of hours or so, I’d save that task for another day (like next summer).

Keep in mind that when the PHP engine is installed you also need a Web server under which to run it. This means that you will need to turn your computer into a Web server. You have two good options available to make this possible. One option is to install the Apache server on your computer. I have a program (I believe it’s still on the school’s “i” drive) that installs PHP v5.0 and Apache in one install package. You are welcome to try this if you want to do that. You can install Apache on Windows XP Pro. I’d check Apache’s Web site for a Vista version if you’re running that OS.

Since I’m a Microsoft sort of guy, I prefer the second option, which is to enable IIS (Internet Information Services) in Windows XP. You can use IIS instead of Apache and again, chapter 2 outlines how to do that. Remember too that Apache is Unix-based and IIS is Microsoft-based. You install IIS as you would any other Windows Component (through the Control Panel / Add/Remove Programs / Add/Remove Windows Components). Once you install IIS, it shows up with your other Admin tools under the Control Panel / Administrative Tools link. Windows XP can use IIS v6.0 whereas Vista shipped with IIS v7.0.

Windows XP can act as a Web server and can host one (and only one) Web site. This comes in handy when you’re on a company LAN and you want your own personal Web site (you might need one for your work, which isn’t as uncommon as you might think). If you install IIS on a Windows Server, then the server can host thousands of Web sites. Of course, you must also install PHP on the server so that PHP code can be understood (refer to page 53). A great primer for understanding IIS can be found at http://en.wikipedia.org/wiki/Internet_Information_Services.  In case you need it, here’s a good URL for installing IIS in Windows XP Pro: (http://www.webwizguide.com/kb/asp_tutorials/installing_iis_winXP_pro.asp). Microsoft’s IIS Web site URL is http://www.iis.net/default.aspx?tabid=1.

In addition to PHP and Web server ability (IIS or Apache), you also need a database for use by your Web site. Most people today are using the free MySQL database engine. Their Web site URL is http://www.mysql.com/, and you will want to bookmark this site as well. You can download the install program from this Web site too if you want to install it on your computer.