Sign In | Subscribe

Enter your Sign on user name and password.

Forgot password?
  • Follow us on:
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Creating the Page Designs

  • A web page always begins with some form of design for the page
  • You can create your web page design using any graphics program
  • I am using Fireworks because it is an Adobe product and I have been using it for years
  • You can use Photoshop, or any other web graphic program that you are comfortable with
  • Once the page design is set, it must be converted into HTML & CSS
  • That process is not covered in this course
  • As the design is converted to HTML/CSS, a style guide should be created
  • The style guide contains information about the styles used within the design
  • This is very useful when you need to reference colors or fonts as you build the website

Creating the Page Designs

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Examples of Page Designs and Programs 0:40
    • Photoshop Example
    • FireWorks Example
  • JPEG Format Example 4:25

Transcription: Creating the Page Designs

I now want to talk about creating the page designs for your website.0000

I get asked quite often, what do you use to create the original designs?0007

And it really does not matter is the answer.0014

You can use whatever you are comfortable in, and whatever can do the job for you.0017

Since I am an Adobe Certified Instructor, I often use the Adobe products but that does not mean you have to.0023

Any graphics editor that you have available to you is just fine as long as you can create the look you want for the page, using that program.0031

I want to show you a couple of different examples of working with page designs and a couple of programs just to make you aware of a couple of different features within those programs.0041

So, I have Wanderlust travel, this website that we are going to be working in throughout the course and I have it open in Photoshop.0053

You can see the page is all laid out, it has the drop shadows, it has the images, everything is all set up.0065

And that is because I usually tend to find you cannot move forward with creating a website until everybody is agreed upon a design.0072

So that is why, quite often, the design you are stuck in that graphics editing piece for quite a while.0081

But this is using Photoshop, so you can see it is open, it is the overall the page design and I get it all set up.0087

The design is approved and this is specifically for the homepage, normally that is where you start.0095

But it is all approved and then you start to move forward.0101

Now, the tricky part is how do you get this page into HTML and CSS and I am afraid that is another course.0105

We are just going to cover Dreamweaver and working in the program and creating the HTML.0114

That converting from the graphic design into the HTML and CSS is a whole different course.0118

But that is our design as we look at it in Photoshop.0126

Now, if I remove Photoshop, what I am in is Fireworks and Fireworks is another Adobe product.0131

Over the years, it has not got much attention but Fireworks can provide you few different details that Photoshop cannot, and one of those is an interesting piece.0139

So, you are looking at this in Fireworks and the idea behind this page is we have under the fold and over the fold or above the fold,0150

What you are looking at now is kind of the top piece of the webpage and then we have the lower section.0162

depending upon the user's size of their screen, they may see the whole thing or they may see just the top portion.0170

But what is interesting about Fireworks is Fireworks has a panel called the pages panel.0177

And what I can do within that panel is create different pages for my website, even a master page and create other pages from it just based on the layers within my design.0184

So, if I click on the mobile version or the mobile page within the program, I have mapped out the whole mobile look to my website,0198

I also can click on the inner pages.0209

Take a look at how the inner pages are going to be designed, because our home page is going to be a little bit different from those other pages.0213

So, it is a little bit different type of concept in terms of a program and if I go ahead and make this little bit smaller, you can get little bit better overview of what this is going to look like.0221

There is my inner pages, here is my mobile page and then I have my home page.0235

You also have to consider whether or not all of your other pages are going to look like your home page.0241

You have to plan out, am I going to create separate mobile pages or not, and then, plan designs for all of that as well.0249

But that just an overview of a couple of the programs, that since they are Adobe products, I tend to use.0257

You can also create it in anything and what we are looking at is just the JPEG version where another image format version, so it is not in any major graphics design.0265

In other words, this was created in whatever, it was made into a JPEG.0277

And we can take a look at it that way, either through on Windows the Photo Viewer, because I happen to be on Windows.0282

Or whatever viewer you have that can open a JPEG file on your system.0289

Or you can even put it directly into the browser and view that page design in the browser.0295

So, ultimately all you need is the look of the page and whatever you want to use to create that page, feel free.0301

As I said I am Adobe associated so, I happen to have those products and I am familiar with them.0309

But do not feel like you have to learn Photoshop just to plan out the basic design of a webpage, use whatever you are comfortable in.0316

Those are some ideas for how to create the initial design for your webpages, because you have to plan all that out before you can ever get to Dreamweaver.0325

So, just some thoughts and the various programs that are available to you or use your own for planning your page designs.0336