11 Replies Latest reply on Jun 10, 2010 2:25 PM by Nancy OShea

    Help wanted for making a picture page in Dreamweaver.

    braico Level 1

      Hi for my site www.dorff.nl i want to make a page full wilth pictures..

       

      I want to make it so my client can add pictures to this site himself with cushy.

       

      Ive just add cushy to the whole site.. so now i want to add a page full with images.. who knows how to do this is an easy and simple way...

       

      Regards  Brian

        • 1. Re: Help wanted for making a picture page in Dreamweaver.
          Nancy OShea Adobe Community Professional & MVP

          Semi-Liquid Proof Sheet.  View Source in your browser to see the code.

          http://alt-web.com/DEMOS/CSS-Semi-Liquid-Proof-Sheet.html

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          • 2. Re: Help wanted for making a picture page in Dreamweaver.
            braico Level 1

            Thank you Nancy but how can i get this page in my website in a nice way? Im not very good with dreamweaver so is it possible to tell me in very very easy  english??

             

            regards Brian

             

            website www.dorff.nl

             

            Date: Sat, 29 May 2010 16:14:15 -0600

            From: forums@adobe.com

            To: briandorff@live.nl

            Subject: Help wanted for making a picture page in Dreamweaver.

             

            Semi-Liquid Proof Sheet.  View Source in your browser to see the code.

            http://alt-web.com/DEMOS/CSS-Semi-Liquid-Proof-Sheet.html

             

             

            Nancy O.

            Alt-Web Design & Publishing

            Web | Graphics | Print | Media  Specialists

            http://alt-web.com/

            http://twitter.com/altweb

            http://alt-web.blogspot.com

            >

            • 3. Re: Help wanted for making a picture page in Dreamweaver.
              Nancy OShea Adobe Community Professional & MVP

              1) Hit File > New HTML page.

              2) Switch to code view.

              3) Highlight all the code (Ctrl+A) and hit Delete key.

               

              4) Copy and paste this code into your new page. Change images to your own.

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
              <title>CSS Semi-Liquid Proof Sheet</title>
              
              <style type="text/css" media="all">
              
              body {
              margin:0;
              padding:0;
              font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";
              background: silver;
              text-align:center;
              }
              
              /**this styles the container**/
              #thumbs {
              width: 80%;
              min-width: 500px;
              max-width: 1200px;
              margin: 0 auto; /**centers on screen**/
              background: #FFF;
              }
              
              /**this styles the images**/
              #thumbs img {
              margin: 12px;
              padding: 25px; 
              border: 1px solid silver
              }
              
              </style>
              </head>
              
              <body>
              <h2>CSS Semi-Liquid Proof Sheet </h2>
              <div id="thumbs">
              <img src="/Images/your-image.jpg" width="92" height="124" />
              <img src="/Images/your-image.jpg" width="92" height="124" />
              <img src="/Images/your-image.jpg" width="92" height="124" />
              <img src="/Images/your-image.jpg" width="92" height="124" />
              <img src="/Images/your-image.jpg" width="92" height="124" />
              <img src="/Images/your-image.jpg" width="92" height="124" />
              <img src="/Images/your-image.jpg" width="92" height="124" />
              <img src="/Images/your-image.jpg" width="92" height="124" />
              <img src="/Images/your-image.jpg" width="92" height="124" />
              <img src="/Images/your-image.jpg" width="92" height="124" />
              <img src="/Images/your-image.jpg" width="92" height="124" />
              <img src="/Images/your-image.jpg" width="92" height="124" />
              <img src="/Images/your-image.jpg" width="92" height="124" />
              <img src="/Images/your-image.jpg" width="92" height="124" />
              </div>
              </body>
              </html>
              
              

               

              5) Hit File > SaveAs filename.html

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web.blogspot.com

              • 4. Re: Help wanted for making a picture page in Dreamweaver.
                braico Level 1

                Hi Nancy, as you can see ive bin able to manage the photopage on my site. but i can get it right mabey you can see whats wrong.. first of all. how can i add pictures to it? if i replace the text to the photos name nothing happened. and i want it editable so that my client can add some pictures himself. ive worked with cushy but i can get it right. can you see what i do wrong?

                 

                 

                regards Brian

                 

                 

                http://www.dorff.nl/photos.html

                 

                 

                 

                 

                 

                 

                 

                1) Hit File > New HTML page.

                2) Switch to code view.

                3) Highlight all the code (Ctrl+A) and hit Delete key.

                 

                4) Copy and paste this code into your new page. Change images to your own.

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                <html xmlns="http://www.w3.org/1999/xhtml">

                <head>

                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

                <title>CSS Semi-Liquid Proof Sheet</title>

                 

                <style type="text/css" media="all">

                 

                body {

                margin:0;

                padding:0;

                font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";

                background: silver;

                text-align:center;

                }

                 

                /*this styles the container*/

                #thumbs {

                width: 80%;

                min-width: 500px;

                max-width: 1200px;

                margin: 0 auto; /*centers on screen*/

                background: #FFF;

                }

                 

                /*this styles the images*/

                #thumbs img {

                margin: 12px;

                padding: 25px;

                border: 1px solid silver

                }

                 

                </style>

                </head>

                 

                <body>

                h2. CSS Semi-Liquid Proof Sheet

                 

                <div id="thumbs">

                </div>

                </body>

                </html>

                 

                 

                 

                5) Hit File > SaveAs filename.html

                 

                • 5. Re: Help wanted for making a picture page in Dreamweaver.
                  Nancy OShea Adobe Community Professional & MVP

                  Brian,

                  Replace what you have now with this.  I made improvements.

                   

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <html xmlns="http://www.w3.org/1999/xhtml">
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                  <title>TLM Goldman Fotopagina</title>
                  
                  <style type="text/css" media="all">
                  
                  body {
                  margin:0;
                  padding:0;
                  font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";
                  text-align:center;
                  }
                  
                  /**this styles the page wrapper**/
                  #wrapper {
                  width: 90%;
                  min-width: 600px;
                  max-width: 1280px;
                  margin: 0 auto; /**centers on screen**/
                  background: #FFF;
                  text-align:center;
                  }
                  
                  /**this styles image container**/
                  #thumbs p {
                  float:left;
                  width: 180px;
                  height: 12.5em;
                  margin: 10px;
                  padding: 10px; 
                  border: 1px solid silver;
                  /**this styles caption text**/
                  font: italic 12px/1 Geneva, Arial, Helvetica, sans-serif;
                  color: #666;
                  text-align:center;
                  }
                  
                  /**same size images**/
                  #thumbs img {
                  width:  180px;
                  height: 113px;
                  }
                  
                  /**float clearing**/
                  .clearing {
                  clear:left; 
                  height:1px;
                  width: 100%;
                  }
                  </style>
                  </head>
                  
                  <body>
                  <div id="wrapper">
                  <h2>TLM Goldman Pictures</h2>
                  <div id="thumbs">
                  
                  <!--begin Cushy CMS division -->
                  <div class="cushycms">
                  
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />
                  optional caption lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />optional caption </p>
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />optional caption </p>
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />optional caption </p>
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />optional caption </p>
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />optional caption </p>
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />optional caption</p>
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />optional caption</p>
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />optional caption</p>
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />optional caption</p>
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />optional caption</p>
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />optional caption</p>
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />optional caption</p>
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />optional caption</p>
                  <p><img src="photos_2_383278338.jpg" alt="#" /><br />optional caption</p>
                  <p><img src="foo.jpg" alt="#" /><br />optional caption</p>
                  <p><img src="foo.jpg" alt="#" /><br />optional caption</p>
                  <p><img src="foo.jpg" alt="#" /><br />optional caption</p>
                  <p><img src="foo.jpg" alt="#" /><br />optional caption</p>
                  <p><img src="foo.jpg" alt="#" /><br />optional caption</p>
                  
                  <!--end cushycms --> </div>
                  
                  <!--end thumbs --> </div>
                  
                  <!--IMPORTANT! clear floats after thumbs div-->
                  <hr class="clearing" />
                  
                  <div class="cushycms">
                  <p>&copy; 2010 TLM Goldman, all rights reserved. </p>
                  <!--end cushycms --> </div>
                  
                  <!--end wrapper --> </div>
                  </body>
                  </html>
                  

                   

                  Nancy O.
                  Alt-Web Design & Publishing
                  Web | Graphics | Print | Media  Specialists
                  http://alt-web.com/
                  http://twitter.com/altweb
                  http://alt-web.blogspot.com

                  • 6. Re: Help wanted for making a picture page in Dreamweaver.
                    braico Level 1

                    Dear Nancy very nice i like the improved option so i can add text to the pictures. But when i look in cushy the only thing i can change is the text and it isnt possible to add or delete any pictures. Is there a way i can have it both? i mean that i can add the pictures and add some text below it. And is it possible to drop the text line a few pixels?

                     

                    regards Brian

                    • 7. Re: Help wanted for making a picture page in Dreamweaver.
                      Nancy OShea Adobe Community Professional & MVP

                      I just tested this in Cushy CSM editor.  You can see the results below.

                      http://alt-web.com/Tutorials/CUSHYCMS/photo-test.html

                       

                      To add more space between image and captions, add margin-bottom to your CSS code like  so:

                       

                      #thumbs img {

                      height: xxpx;

                      width: xxpx;

                      margin-bottom: 1.5em;

                      }

                       

                      How to use CUSHY CMS Editor to insert/edit images and captions.

                      1. Right click on image or # mark.
                      2. Select Image Properties.
                      3. Choose Upload tab.
                      4. Browse to desired image on your computer  drive.
                      5. Click Send it to Server and hit OK
                      6. Remove image height and width (that's taken care of by the CSS).  Hit OK.
                      7. Edit optional captions by backspacing to the first letter and typing a new caption.  If you backspace too far, hit Ctrl+Z to undo.
                      8. When done, hit Publish Page at bottom of page.

                       

                       

                       

                       

                      Nancy O.
                      Alt-Web Design & Publishing
                      Web | Graphics | Print | Media  Specialists
                      http://alt-web.com/
                      http://twitter.com/altweb
                      http://alt-web.blogspot.com

                      • 8. Re: Help wanted for making a picture page in Dreamweaver.
                        braico Level 1

                        Very nice. As you can see i was able to do so. i almost affraid to ask. but is it possible to place the header and spry from the other pages above the photpage. so you can always navigate you way out of there?

                         

                        regards brian

                        • 9. Re: Help wanted for making a picture page in Dreamweaver.
                          Nancy OShea Adobe Community Professional & MVP
                          is it possible to place the header and spry from the other pages above the photpage.

                          Sure you can.

                           

                          Option #1 - copy and paste relevant code into the photo page.

                           

                          Option #2 - bring the photo page into a site page using an inline frame or <iframe>.

                           

                          Iframes

                          http://www.htmlcodetutorial.com/frames/_IFRAME.html

                           

                          Option #3 - use server-side includes for reusable headers and menus.

                           

                          Server-Side Includes

                          http://www.smartwebby.com/web_site_design/server_side_includes.asp

                           

                           

                          Nancy O.
                          Alt-Web Design & Publishing
                          Web | Graphics | Print | Media  Specialists
                          http://alt-web.com/
                          http://twitter.com/altweb
                          http://alt-web.blogspot.com

                          • 10. Re: Help wanted for making a picture page in Dreamweaver.
                            braico Level 1

                            So can you tell me how i do the most easiest way.. Because i dont have a clue how to do this.

                             

                            Date: Sun, 6 Jun 2010 11:14:20 -0600

                            From: forums@adobe.com

                            To: briandorff@live.nl

                            Subject: Help wanted for making a picture page in Dreamweaver.

                             

                            is it possible to place the header and spry from the other pages above the photpage.

                             

                            Sure you can.

                             

                            Option #1 - copy and paste relevant code into the photo page.

                             

                            Option #2 - bring the photo page into a site page using an inline frame or <iframe>.

                             

                            Iframes

                            http://www.htmlcodetutorial.com/frames/_IFRAME.html

                             

                            Option #3 - use server-side includes for reusable headers and menus.

                             

                            Server-Side Includes

                            *http://www.smartwebby.com/web_site_design/server_side_includes.asp

                            *

                             

                             

                            Nancy O.

                            Alt-Web Design & Publishing

                            Web | Graphics | Print | Media  Specialists

                            http://alt-web.com/

                            http://twitter.com/altweb

                            http://alt-web.blogspot.com

                            >

                            • 11. Re: Help wanted for making a picture page in Dreamweaver.
                              Nancy OShea Adobe Community Professional & MVP

                              If you want to do nice things with your web sites, you must learn to work in Code View. 

                              HTML & CSS Tutorials - http://w3schools.com/

                               

                               

                               

                              Nancy O.
                              Alt-Web Design & Publishing
                              Web | Graphics | Print | Media  Specialists
                              http://alt-web.com/
                              http://twitter.com/altweb
                              http://alt-web.blogspot.com