The purpose of this page is to talk about how the tools that we are using will fit together in web site design. We have learned some HTML and some CSS. We are going to be learning some Photoshop and some JavaScript.
HTML markup is used to put "tags" onto content. Some of tags are specific tags, such as <table> or <p>. These tags instruct browsers about how the content is displayed.
Other tags are generic tags, such as <div> and <span>. How these generic tags affect the way content is displayed depends on the style sheet controls that we attach to them, using the class = "" statement and a linked style sheet. Also, we use the linked style sheet to create special classes that can be invoked using specific HTML tags, such as a <td class = "mytabletd">.
The reason that we use CSS is that we want to make our page look more like a magazine and less like a monotonous block of text. CSS allows us to put content in boxes or into columns. It allows us to create white space between sections by using the padding or margin- controls. It allows us to use colors, backgrounds, and font sizes and styles to create a more interesting look.
One aspect of style sheets that we should start to take advantage of is the ability of more than one page to link to the same style sheet. It is possible--in fact highly desirable--to have every page on a specific site, such as your hobby project, link to the same style sheet.
For example, I might want every page of my Othello Web site to have two columns, and to have white text on a green background for the right-hand column. I can create a style sheet that has .firstcolumn{float: left;} and .secondcolumn{float: left; color: white; background: green;}. I can link to the style sheet from every page on my Othello site, and on every page I can put <div class = "firstcolumn"> in front of the content that I want to appear in the first column, then close this off and put <div class = "secondcolumn"> in front of the content that I want to appear on the second column, and then close that off.Now, suppose I change my mind and decide that I really do not like the green background. I can go to the style sheet and switch to a silver background by changing the class to .secondcolumn{float: left; color: white; background: silver;} and the background will change on every page on my site! Make one change, affect the whole site.
Photoshop is used to create graphics for the site. First, we will create a logo. A logo is a distinctive, simple graphic that can be shrunk to a small size and used to symbolize your site.
The logo then suggests a color scheme for the site. For example, if you have a purple logo, then you will want to use colors that complement purple. Depending on the shade of purple, a good complementary color might be a soft brown or pink. You can use the color scheme in your style sheet to control the colors of table elements, boxes, and columns.
Photoshop can be used to create wallpaper. Sometimes, a solid color background is hard on the eyes. A subtly spotted background can be more comfortable. This is called wallpaper. You can create wallpaper in Photoshop by adding noise to plain color. You store wallpaper as an image on your site, and then use it as a background-image in a style sheet. It can serve as background for a column, a box, or for an entire page.
Photoshop can be used after you scan in a photo (hence the name, "Photoshop"), you can put it into a format for use on the Web. There are all sorts of ways that you can edit a photograph--you can really make it look very different from how it was taken. You also could scan in other artwork. So if you are a good artist with a brush but not with a mouse, you can draw artwork on paper, scan it in, and then process it for the Web.
Photoshop can be used to create image maps. Sometimes, there are graphics on a site that are links. When the page that you link to depends on the section of the graphic where you click, that is called an image map.
Finally, we can use Photoshop to create "rollovers." A rollover is two graphics that replace one another depending on where the user puts the mouse. For example, I might have a menu topic called "Othello results" that is represented by a graphic that includes text. When a user puts the mouse over "Othello results," the graphic will change to an expanded graphic that says "U.S. Nationals | Japanese Meijin | IOS". You can see rollovers if you go the mjbha.org web site and put your mouse over the word "academics" at the top.
Actually, rollovers are an example of using JavaScript. It is JavaScript code that causes the graphic to change when your mouse runs over it.
Our first use of JavaScript will be to create code that puts a common header on every page in your hobby project site. This header can include the link to the style sheet.
Putting the code that generates the header onto a JavaScript function is another way to enhance the flexibility of a site. You can change the header in one place, and the change will take place on every page!
The flexibility of JavaScript and CSS can be combined to allow different users to view your site with different color schemes. For example, "Purple people" can see a version with a purple background, and "plain people" can see it with a white background. To implement this, we will have to learn something about HTML forms, JavaScript form processing, and browser cookies.