Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating the HTML for the container

From: Create an Interactive Homepage Marquee with jQuery and Dreamweaver

Video: Creating the HTML for the container

Now that all of our graphics are created and we actually started our HTML and CSS file earlier, let's go back to Dreamweaver, and what we're going to do here is create our markup that we need in order to attach our CSS to that, and recreate our layout. So at this point, I want to bring up a sketch that I put together to show what we're going to be developing here. So I always recommend drawing out a sketch to give us sort of an idea on what kind of divs and elements we need. So what we're going to do is we're going to create an outermost container that's going to hold the entire marquee.

Creating the HTML for the container

Now that all of our graphics are created and we actually started our HTML and CSS file earlier, let's go back to Dreamweaver, and what we're going to do here is create our markup that we need in order to attach our CSS to that, and recreate our layout. So at this point, I want to bring up a sketch that I put together to show what we're going to be developing here. So I always recommend drawing out a sketch to give us sort of an idea on what kind of divs and elements we need. So what we're going to do is we're going to create an outermost container that's going to hold the entire marquee.

We're going to have a div that's going to hold all of the photos. We're going to have another div that's going to hold the captions, and inside of the captions, we're going to have the smaller div that's going to hold all of the content. We're going to have a third div, which is going to be the marquee navigation, which is going to hold all of the anchor tags with the little dots that we created inside of Photoshop. Then lastly, we'll have another div that we'll hide through CSS, which will hold all of the information for all of the different panels. We'll also use our preloader to load all of the images inside of this area to make sure that the entire marquee preloads before we actually start animating and transitioning it.

So now let's go back to our index file. We're going to switch over to Code view. And inside of Code view, this is one of the fastest ways we can get our markup in place. Let's come down and separate the body tag a little bit. I'm going to hit a tab character inside here, and we're going to create our first div, which is going to be the outermost marquee container. So what we're going to do here is create the HTML first, and then we'll create the CSS to attach onto this. So let's start by typing the less than sign, which is the beginning HTML tag.

Type 'div', space, start typing 'class'. If you're using a tool like Dreamweaver with code completion, when I start typing some of this stuff, I'll get a menu here which will pop up and let me simply hit Return to accept these settings. And the outermost item is going to be marquee_container. So we'll set class="marquee_container". Again, we'll make sure that we recreate that same CSS rule with the same name so it will attach to this. Ending HTML tag or greater than sign.

Then I'm going to start a new HTML tag. Hit the forward slash and Dreamweaver will automatically close this marquee div for me. Back my cursor up. Add a few lines. Let's come up to the next line. Let's tab in again. This is going to be a child of the marquee_container. All of our elements are going to be inside of the main container. Type

That will end the div. Let's hit Return, add another div, class. This is going to be marquee_caption. End the tag, forward slash, end the div. Now inside of marquee_caption, we're going to put some children inside up here. So tab in inside of marquee_caption, start typing

to call this marquee_caption_content. Come out here, end the tag, forward slash, end that div.

Now, let's come out outside of marquee_caption. Let's hit another return,

marquee_nav, end the tag, begin a new one, forward slash, and then end the div. Let's come down here and take out the negative space. I do want to add one more div outside of the marquee_container, and this is going to contain all of the data for the marquee.

We're actually going to hide this with CSS later as well. So let's start

So now this is the entire markup that we're going to need for our entire project. The container is going to hold everything that our marquee does. We're going to have a photos panel here that's actually going to stretch and be as wide as all of the photos we load in, and slide back and forth. We have the caption, which is going to slide vertically to hold our content and go over top of the photos area.

Then we have the navigation piece here, which is going to contain the little circle links, allowing our users to jump between the individual panels. Then again, lastly, our CSS, we're going to populate all of the HTML inside up here, but our CSS is actually going to hide marquee panels so that our user will never see all of this data; they'll only see the interactive experience we're going to create inside of marquee_container. Now that this is complete, in the next movie, we're going to manually add in some data inside of the marquee_ container in order to get enough data in there to work with our CSS, and then we'll move that content out into the marquee panels.

Show transcript

This video is part of

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Create an Interactive Homepage Marquee with jQuery and Dreamweaver.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
  • Mark video as unwatched
  • Mark ALL videos as unwatched
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

  • new course releases
  • newsletter
  • general communications
  • special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

  • new course releases
  • newsletter
  • general communications
  • special notices

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.