Images on the my web

  Boy Zone 13:35 14 Nov 03
Locked

Dear All,
Here I go again, I'm learning but slow.
I'm using Dreamweaver MX. In trying to create a web site, I'm using images of my family on one page. I put the images within frames (GIF files) as small images. The idea that when you click an image this will link to a larger size of the same photo. Problem, am I doing this correct? I put the large photo image on its own page named same as photo. It's that when looking at other web sites with small photo image, when you click them, it opens a page just the same size at the large photo. How do they do this.
PS I don't know any html .
would welcome any ideas.

  MichelleC 13:42 14 Nov 03

In FP (I assume it's similar) you insert the pic and when clicked will give you picture options, one of which is to reduce it to thumbnail. Then it opens in larger window in browser. This is an icon or shortcut to original and any amendments done to tn will also be done to original.

  Taran 14:18 14 Nov 03

There is a usefil walkthrough on the Macromedia site:

click here

It assumes that you have Fireworks for your image editing, but you can transpose much of the above article to your own situation with a bit of common sense.

Opening an image in its own window that is only as big as the image itself is normally done by using a JavaScript hook. This allows you to click on a thumbnail and a new window opens with no navigation buttons along the top, no scollbars down the side and the only content is your image. If you want to try this, post again and I'll walk you through it. It's not overly complex but does entail rolling your sleeves up with some coding.

Happily for you, it becomes slightly less complicated since I can do the coding and you can copy and paste it into the code of your page.

Try the above link first though, just to get you up and running.

Oh, one more thing. There is a nice Dreamweaver add-in available from the Macromedia Dreamweaver exchange. It's free to register and many of the add-ins are also free for downloading. The add-in is called Web Photo Album 2.1 for Dreamweaver MX and it puts a wizard driven menu into Dreamweaver, allowing you to easily create web photo albums along with lots of options to configure them.

click here for the Macromedia Exchange page.

Hope this helps.

Regards

Taran

  Boy Zone 17:26 14 Nov 03

Thanks for your help.

I don't have Flash, I use Photoshop.
I am as explained very new to Dreamweaver MX. I don't know any html code, Iv'e looked at it but as of yet I 'm still trying to get me pages sorted out.
Visited the site at Macromedia , but as I don't have both programs don't think this will help me. But any help will do, just explain where and how I copy and paste code and I will have a go.

  Taran 19:17 14 Nov 03

That's not entirely how it works.

The Macromedia tutorial I gave you the link for, altough it assumes that you use their own flagship image editor (Fireworks) still has much all of what you need to get a web photo album up and running using the built in tools in Dreamweaver, although to do the process as it is detailed you do need Fireworks. I meant that you could possibly adapt the tutorial to your own situation. The add-in I suggested from the Macromedia Exchange just gives you more options from within Dreamweaver to do the same overall kind of thing.

Since you are as you say "still trying to get me pages sorted out" I don't think I'd be doing you any favours by giving you a series of instructions and code for JavaScript hooks.

As you use Photoshop, we can look at its built in features for generating web photo albums. As long as you are reasonably happy about basic opening and saving of image files in Photoshop, the rest is pretty easy and you can use the output in your Dreamweaver website.

Open Photoshop. Click on Help then Photoshop Help... or press your F1 key. Scroll down the Helpfile contents list on the left side of the page until you come to the link that says Designing Web Pages and click on it. You get a page on the right side with a series of subheaded links about web design with Photoshop. Click on the one called Creating Web photo galleries (Photoshop) or Customizing and creating Web photo gallery styles (Photoshop).

All the steps and instructions are contained in those helpfiles and the resulting web galleries look pretty good. More importantly, Photoshop can be used to optimise your images for download over the web, and when it's all done your finished album can be set to go into your Dreamweaver web folder (select this as the web album destination folder). Once it's created, you can edit the overall look of the pages if you like using Dreamweaver.

I'd suggest you don't select the option to use a Frames web album page since frames pages can be a bit of a chore to get your head around when you're starting out in web design.

Another alternative method is to use the Dreamweaver template pages for graphics. In Dreamweaver click on File, New then on the General tab select either Page Designs or Page Designs (accessible) then choose one of the Image: Thumbnail Grid pages for your thumbnails and possibly one of the Image Picture and Description pages for each of the full size pictures.

You'll have to create your thumbnails and whatnot to use this method, so you may prefer to let Photoshop do the whole lot for you.

Let me know if you need more info.

Regards

Taran

  Charence 23:02 15 Nov 03

Hi,

I have not used Dreamweaver but if it is possible to directly edit HTML code, here's how to do it!

What you have done so far seems correct here's the next stage:

-you need a small picture and the original picture. e.g. name them - "me_small.jpg" and "me.jpg"
-You will then need to Hyperlink (link) "me_small.jpg" which would be on your webpage, directly to the file "me.jpg" without creating another webpage for it. (I find creating another webpage for it a tedious and unnecessary process)

Code: <p align="center"><img src="me_small.jpg"><a href="me.jpg"></a></p>

This should give you a small picture align centred with a link to the large picture once the small picture is clicked.

If you want a borderless linked picture, please contact me via click the small Mail Icon

Hope this helps you,


Charence

This thread is now locked and can not be replied to.

Best phone camera 2016/2017: Galaxy S7 vs iPhone 7 vs Google Pixel vs HTC 10 Evo vs OnePlus 3T vs…

1995-2015: How technology has changed the world in 20 years

These are the Best Christmas Ads and Studio Projects of 2016

Super Mario Run preview | Hands-on first impressions of Super Mario Run: Mario's iPhone & iPad…