Over the years, web design has evolved dramatically. In the early days, we could only create very simple websites like this one with static photos and text. In fact, in the really early days, you couldn’t even align an image to the left and have the text wrap up next to it. Today, you can create rich media experiences with interactive games and video like this jellyfish dancing across the page. You could even include controls so users can pause and play a video at their leisure.
As you’ll learn in the series, you’ll need a video editing program to optimize video for the web, but you can Dreamweaver to load it in to a page like this. Similarly, if you want to create something like this turtle game which is really a puzzle, you will need Adobe Flash. But once you have created the game, you can use Dreamweaver to load it into the page so that your users can play along.
Over the course of the next several hours together, we will explore many different approaches to web design from simple sites to more complex ones like this artist’s site. We will spend several lessons working on different aspects of this site which features the artwork of Robin Eschner who graciously agreed to let me redesign her site with my friend Dabi Chang and to feature her paintings in this video.
As we get into the more advanced lessons in the series, you will learn how to create rollovers like this using Dreamweaver’s behaviors which uses JavaScript to create many interactive features.
You will also learn how to use behaviors to launch a new browser window when you click on a link like this and to resize the window to whatever height and width that you want to specify. And in that same advanced lesson, you will learn how to use the swap image behavior to create rollovers like this. In the middle of this training, we will spend several lessons exploring different layout techniques and we will build various pages in Robin’s site together using CSS and D tags. We will create layouts like this one with staggered dibs for this up and down effects and this one with two columns of text and images. We will also create navigation links like these which are formatted with the unordered list tag and then styled to create this simple rollover effect using just text and CSS, no images necessary.
As we work on these different CSS layouts, we will use Firefox’s ability to remove style sheets to help you better understand the underlying structure of pages like this one. What you see when you turn off styles in Firefox is how this page looks with no style sheet applied. If you study this design carefully, you will notice that it is designed semantically so that even if the styles are not visible, the content on the page makes logical sense. The banner is the first thing that you see at the top of the page, and this list of links is formatted using the UL or unordered list tag at increasingly common convention for formatting a list of links.
You will also notice as I scroll down the page that this next collection of links is also formatted using the list option even though it includes images. And then, each of the sections of text are really positioned one after another on the page. When I apply the style sheet again, you can see that using CSS, you can change the display of any HTML tag making a list like this one spanned across the page horizontally and a list like this one continue to display vertically.
We will cover all of these CSS features and more in the lessons that follow and I have included all of the files that you see here in your project files so you can follow along with all of the exercises as we go through the series. For now, my goal is to just give you an overview of what is possible and to help you appreciate all of the things that we will be covering in the series before we get into the details.
Transcription by:
Scribe4you Transcription Services