9 Replies Latest reply on Apr 9, 2010 11:49 AM by awothers

    Captions for Images in DWCS4

    awothers

      Is there a (hopefully straightforward) way to place a caption below an image on a page?

        • 1. Re: Captions for Images in DWCS4
          mhollis55 Level 4

          You can do this in CSS.

           

          Create an element called "figure" in CSS:

           

          div.figure {
            float: right;
            width: 25%;
            border: thin silver solid;
            margin: 0.5em;
            padding: 0.5em;
          }
          div.figure p {
            text-align: center;
            font-style: italic;
            font-size: smaller;
            text-indent: 0;
          }

           

           

          Now, you don't need anything other than "float" and "width" here, but I do like to get fancy. You're also floating the figure to the right here, a distance equal to 25% of the total area defined in your surrounding paragraphs. You can change that as you wish.

           

          Now, let's make some HTML:

           

          <div class="figure">
            <p><img src="mypic.jpg" width="136"
              height="200" alt="My Photo">
            <p>This is the caption under 
              the image I have placed in the document.
          </div>

           

           

          Try that and see if it doesn't work for you.

          1 person found this helpful
          • 2. Re: Captions for Images in DWCS4
            awothers Level 1

            Thank you. As I am relatively new to all this I do have a couple of questions:

             

            For the element(s) you describe:

            • do I create two elements figure and figure p?
            • When I create them do I use  Insert->Layout Objext -> Div Tag? If so do I then give it an ID of figure? OR do I create two classes .figure and .figure p

             

            For the HTML do I simply insert the code you gave me (with any changes for image name etc) at the place I want the image to go?

             

            Thanks again. Alan

            • 3. Re: Captions for Images in DWCS4
              mhollis55 Level 4

              Do just what I did. figure p is needed for your text, which is designed to be inside the box you describe in the CSS.

               

              Try this first on your web page. Open up your CSS stylesheet. Cut and paste my code directly in there. Save your style sheet. Insert a photo using Dreamweaver. Now, choose that image and click on Class. Choose figure for the class. Insert some text right below the image and choose figure p for the class of the text. You're done.

              • 4. Re: Captions for Images in DWCS4
                awothers Level 1

                Is this what it should look like?

                 

                Capture.JPG

                • 5. Re: Captions for Images in DWCS4
                  mhollis55 Level 4

                  Yes, that is pretty much it.

                   

                  Looks very nice.

                  • 6. Re: Captions for Images in DWCS4
                    awothers Level 1

                    Thank you very much. I will use the technique often.

                     

                    Alan

                    • 7. Re: Captions for Images in DWCS4
                      awothers Level 1

                      I just thought of something. If I have several images that are of different sizes will I have to use different "figure" codes/names with different width percentages? Or could I set width to "auto"?

                      • 8. Re: Captions for Images in DWCS4
                        mhollis55 Level 4

                        OK, firstly, the size thing:

                         

                        When I make a website, I try to get my photos and images about the same size. Maybe this is a follow-on from print or television or something, but an image that is larger than another in a website tends to take on increased importance. Additionally, (and this is a really cool plug-in that should be in everyone's copy of Dreamweaver) if your viewers need to see a larger image, you can use Open Picture Window Fever! to give them a larger view of your image very quickly if that is important.

                         

                        So think about size as a formatting issue that should be solved by resizing images to something about the same on a good website.

                         

                        But sometimes, you just have to go large.

                         

                        And as I said before, you can adjust percentages to suit. There are times when you need an image that fills 100% of the text area. A great example of this is a contractor that I work for who loves to take photos of all of his heavy equipment and show it off. Now, his customers aren't buying his heavy equipment but he's really proud of what he uses and so he wants it on his website. So there is a panoramic shot of all of his cool tools above some text.

                         

                        So you simply change the percentage to 100% of the width of the text area for that image. You can even set up several different styles, some on the left of the text, some on the right and create whatever you will need for your website. Since it's all done in CSS, you can make rules for just about everything.

                        • 9. Re: Captions for Images in DWCS4
                          awothers Level 1

                          Thanks you for the advice re being consistent with regards to image sizes. Which of the extensions were you referring to in the link - the Open Picture Window one? OOPS - it is Open Picture Window. Sorry.

                          Thanks, Alan