How to place images

I am totally new to dreamweaver. I have done a lot of tutorials, and I'm trying to make a web page. I have laid out what I want my page to look like in InDesign, is there a way for me to attach or upload that here to show what I'm trying to do? I have a series of images sort of scattered on the page, how do I place them in dreamweaver to be where I want them on the page? With padding? How would I calculate that?

Here is the HTML code I have so far:
<!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=UTF-8" />
<title>Burnette Architecture</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="pagelayout"><img src="frontpage-web-images/site layout.jpg" width="998" height="570" border="0" usemap="#Map" />
<map name="Map" id="Map">
      <area shape="rect" coords="724,110,917,304" href="commercial.html" alt="commercial projects" />
      <area shape="rect" coords="328,282,447,401" href="residential.html" alt="residential projects" />
</map>
</div>
</div>
</body>
</html>
And the CSS code:
@charset "UTF-8";
/* CSS Document */
#container {
    width: 968px;
    background: #fff
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
#pagelayout {
    margin:0 auto;
The image is the pagelayout id. I have added two of the hotspot rectangles so far, and linked them to other pages, so that seems to be easy enough. I can't put it on the web because we actually already have an existing website, they want me to design this one and then replace the old one when it's finished, so I guess there's no way for me to test this one really. I do have new questions though as I move forward, just tell me if I'm asking too much and I'll stop...
The end result of this is I want the word "residential" or "commercial" to pop up when you mouseover those red boxes, but at the same time I also want the corresponding residential images to highlight when you mouseover the residential box. To further clarify, when you mouse over the residential box, the white word "residential" comes up and also all of the pictures on that side of the logo highlight. Is it possible to do both of these with one hotspot, or would I layer two of them for the two different behaviors? I am such a beginner this is a hard thing to do.

Similar Messages

How to place image and crop to fit inside vector shape

I'm trying to place an image on top of a vector shape and then i want to trim the edges of the image so it takes on that shape (essentially filling the shape with the image)
I'm also trying to do this with two layers of vector shapes, i want to fit one within the other and not have any over hang.. the top or "filling shape" is an array of hexagons (making a honeycomb like structure) i want it to fit within the underlying oval (lime green one) shape. here's a link if you want to see what i'm doing.. its the one on the right
www.oregonstate.edu/~pearsoan/images/achieve3.ai
How do you do this?

Blue,
Put the shaping (vector) path on top of the image, select both, and Object>Clipping Mask>Make.
I cannot open the file to see what there is to see, and I have to leave in a moment.
If you upload an image, using the Camera icon, all helpers can see it here in the thread.

[VB, CS3] How to place images using wildcards in filenames

Dear all,
Can anyone think of a way to place an image using a wildcard in the filename?
I can place the image fine if the complete filename is known, but what if the filename changes from day to day? - eg it could be House1234.tif for one document then House56r.tif for another. So I'd like to place House*.tif sort of thing. The files are in different folders, of which the path is known.
Any ideas?
Nigel

Get the contents of the whole folder in an array, then you can check each item to see if it matches some criterium. In Javascript (VB should be similar):
function find_file (dir, mask)
   var f = Folder (dir).getFiles ('*.*');
   for (var i = 0; i < f.length; i++)
   if ( // compare f[i].name and mask here
      return f[i];
This returns the first file in "dir" that matches "mask".
Peter

Adobe CS4 AE, how to place images in order

Gentlemen !
Windows 7 Ultimate
6 GB Ram
AE CS4
I have about 3 layers of video (green screen), with 3 boys standing in front of Green Screen.
How Can I make the tallest boys layer appear in the back and the medium boy layer in front of him and the 3rd in front of all layer or in front of medium boy layer, so the image would look like small, medium and large
Many thanks in advance !

Many thanks Szalam for the explanation, I know brother exactly what you and Mr. Dave wanted me to do , and I appreciated , but sometimes we run out of time , or finish certain within certain time frame, and that was my case I had to finish it , I had only 10 mins to do that then go back to colledge.
But the thing is that my answer was so simple , all I had to do was drag the video channels to my desired order , on the left , where you see eye symbols and next to it is the layer number and next to the layer number there is my shot and as I mentioned, all I had to do was drag it over the other layers. here is a snapshot

How to place image in flv player

I would like to have an image, frame grag, etc instead of a
blank screen show on the flash player on my website. How is this
done? I use flash CS3 encoder, but do not know how to use flash
otherwise.

I believe what you are looking to do is to set a poster
frame. You should be able to do this with Flash, or you will need a
program like Quicktime Pro to set the poster frame of a
movie.

How to place an image in database and how to retrieve and display it in the front end

how to place an image in database and how to retrieve and display it in the front end
and to place an image in database and retrieve the image from database using xml
please,help me out.

Create a table with a Long RAW Datatype column for storing the Image Column Data.
Create the form based on the table , which by defaults the column with LONG RAW atatype to a Image Item.
You can use Forms Built in function READ_IMAGE_FILE to read a Image file stored on the file system in to the image item.
A save on the form saves the image in the Image item in the long raw column.

How do i place image instead of text in swing button ?

Hi
I need to place image in place of text in button i.e in place of button name i need to display image.
Please tell me how to do this.......

You'll need to use CSS floats.
.floatLt {
float:left;
width:auto;
HTML:
<div class="floatLt">
YOUR LOGO IMG HERE
</div>
<ul id="MenuBar1" class="MenuBarHorizontal floatLt">
YOUR MENU GOES HERE
</ul>
Coding skills are essential to using DW. Learn HTML & CSS first. DW will be much easier.
HTML, CSS & Web Design Theory Tutorials -
http://w3schools.com/
http://www.csstutorial.net/
http://phrogz.net/css/HowToDevelopWithCSS.html
http://webdesign.tutsplus.com/sessions/web-design-theory/
Nancy O.

How to place the images in Indesign xml file by Javascript?

How to place the images in Indesign xml file by Javascript?
We got the Indesign xml file, how to give the image placement link by Indesign javascript? Please help me its urgent.

Hi,
You can pass the image url as a href attribute=> file:///Users/me/Documents/my_pic.jpg directly within your xml. It just needs that you pass a local, static and valid url.
If you want to add image later once the xml is flowed and so target specific nodes and inject images, it's a bit more complex. If the node is not part of the layout, you may try to reach the XMLElement objet and such an attribute, then layout the element.
var x = some XMLElement
x.xmlAttributes.add("href","file:///Users/m/Documents/my_pic.jpg" );
If already placed, then you have to get the associated pageItem, then place your file into it.
pagItm.place ( File ( "/Users/m/Documents/my_pic.jpg" ) );
Hope that helps,
Loic
http://www.loicaigon.com

How do I place images in iBooks Author?

How do I place images in iBooks Author?

Drag them from the Finder onto a page
...or...
Copy/Paste
See: Publishing With iBooks Author
http://shop.oreilly.com/product/0636920025597.do

How to place multiple images?

Hi,
How to place multiple images?
Regards,
Learner

Is the script creating the frames? If so, just assign each frame a
variable, or make them all into an array. Then use something like:
myFrame.place("aFile");
If the script is not creating the frame, then are they live frames on
the page, or are they actually on a master page?
If they're on master spreads, you'll have to release them to the page
you want. (I think it's myMasterFrame.override(myPage) where myPage is
the live page you want to detach them on, but you'll have to double
check that.)
But presuming they're regular detached frames on a page, if you want
your script to figure out which is the first and which is the second you
can either use script labels in the UI and then search for the script
label, or else you'll have to write a function that will get all
rectangles on the page (myPage.rectangles.everyItem().getElements() and
either do a clever javascript sort, or write a straightforward function
to sort them by height and x-pos.
Hope that sheds some light on the task ahead!
Ariel

How to place two different indesign documents side by side on my desktop in order to copy and paste images and text from one to the other?

How to place two different indesign documents side by side on my desktop in order to copy and paste images and text from one to the other?

Or choose Window > Arrange > Tile
And, you of course can copy/paste without tiling.

Need to know how to place a tiling image in the div tags

Let me see if I can explain what I want to do in a way that makes sense.
I have created a box using the <div> I want a background image I made in photoshop that has rounded corners. I need this image to stretch or tile the length and width of the box without duplicating the image in the tile. I don't want multiple rounded corner corner boxes appearing. Just the one stretched.
I am guessing I need to crop the rounded corner top, bottom and take a 1 px tall crop from from the center of the image for tiling and the top and bottom remain fixed in their position.
I don't know how to place these in the box if my assumptions about cropping are right.
I don't know how to stretch the width of the image to fit the width of the box either. Do I need to create a fixed width image the width of the box or can it stretch to fill the width?
Using DW CS6
Thanks

Tiling would mean duplicating itself horizontally and vertically to appear as though it were tiled (envision a shower wall).
You do not want it to tile it sounds like, but you want the background image to cover the entire background by resizing to whatever size the containing <div> is.
That can be done relatively easily with the css3 background-size property.
The css would look like this...
#container_id {
     background-image:url(your_image.jpg);
     background-size:100% 100%;
     background-repeat:no-repeat;
Then the html would look like this...
<div id="container_id>
     your content
</div>

How do i place images using the Flipcard (images) - Andrew prototype library in Muse, How do i place images using the Flipcard (images) - Andrew prototype library in Muse

I am using the Andrew protoypes library. In it there are flipcards that i want to use to place images. How do i get to place images into these flipcards.

Hi,
Please take a look at this post for a similar discussion : How do I make the "Flip-Card" widget work??
Regards,
Aish

How to place an image in JFrame

hello
i want to know how to place a image on JFrame
i am not using any layout..
pls help..

Hi...
To do this, u can look to tweak the paintComponent() method . All u have to do is create a JPanel subclass and override the paintComponent method to draw the image. then set it as the frame's content pane. that is because you work only on the content pane in swing. that should help.
Source for ImagePanel :
<code>
package com.rsramanujam.help;
import javax.swing.*;
import java.awt.*;
import java.awt.image.*;
public class ImagePanel extends JPanel
     Image backImage = null;
     public ImagePanel(Image backImage)
          try
               this.backImage = backImage;
          catch(Exception e)
               System.out.println("Could not get Image");
     public void paintComponent(Graphics g)
          Graphics innerG = g.create();
          if(backImage == null)
               innerG.setColor(new Color(0xffccccff));
               innerG.fill3DRect(0,0,getSize().width,getSize().height,true);
          else
               innerG.drawImage(backImage,0,0,getSize().width,getSize().height,this);
     public void setBackImage(String path)
          ImageIcon ic = new ImageIcon(path);
          this.backImage = ic.getImage();
          repaint();
</code>
U can see a working example at http://www.geocities.com/ramanujam_off/java.
There , download the app called RamHelp. It comes with a GUI that uses panels with Background Images.
Regards,
Ramanujam

How to place a image in a page?

pls anyone guide me? how to place a image in a page?
thanks,
screen410099

Take a look at the code found in this function:
SDKLayoutHelper::PlaceFileInFrame
As expected you can find it in the SDKLayoutHelper file usually found in the Common folder of the SDK. Anyway it has an example of one way of achieving your goal.
There are other ways as well. Here is some code from one of my plugins which uses the LoadPlaceGunCmd boss:
          PMRect pRC = itemGeometry -> GetPathBoundingBox(InnerToPasteboardMatrix(pParentTransform));;
          // Create an ImportCmd:
          InterfacePtr<ICommand> importAndLoadPlaceGunCmd(CmdUtils::CreateCommand(kImportAndLoadPlaceGunCmdBoss));
          //InterfacePtr<ICommand> importAndLoadPlaceGunCmd(CmdUtils::CreateCommand(kImportFileCmdBoss));
          if (importAndLoadPlaceGunCmd == nil)
              ASSERT_FAIL("importAndLoadPlaceGunCmd invalid");
              break;
            URI URIPath;
            URIUTILS -> IDFileToURI(path, URIPath);
          // Set the IImportResourceCmdData Interface's data:
          InterfacePtr<IImportResourceCmdData> importFileCmdData(importAndLoadPlaceGunCmd, IID_IIMPORTRESOURCECMDDATA);
          if (importFileCmdData == nil)
              ASSERT_FAIL("importFileCmdData invalid");
              break;
          importFileCmdData -> Set(db, URIPath, (K2::UIFlags)0, kTrue, kFalse);
          ErrorCode status = CmdUtils::ProcessCommand(importAndLoadPlaceGunCmd);
          const UIDList* imageList = importAndLoadPlaceGunCmd -> GetItemList();
          if (!imageList || imageList -> Length() == 0)
              break;
          UIDRef imageFrame = imageList -> GetRef(0);
          InterfacePtr<IHierarchy> imageFrameHierarchy(imageFrame, UseDefaultIID());
          UIDRef newImage(db, imageFrameHierarchy -> GetChildUID(0));
          imageFrameHierarchy -> Remove(imageFrameHierarchy -> GetChildUID(0));
          // Create an placeGraphicCmd:
          InterfacePtr<ICommand> placeGraphicCmd(CmdUtils::CreateCommand(kPlaceItemInGraphicFrameCmdBoss));
          if (placeGraphicCmd == nil)
              ASSERT_FAIL("placeGraphicCmd invalid");
              break;
          placeGraphicCmd -> SetItemList(UIDList(newImage));
          // Set the IPlacePIData Interface's data:
          InterfacePtr<IPlacePIData> placePIData(placeGraphicCmd, IID_IPLACEPIDATA);
          if (placePIData == nil)
              ASSERT_FAIL("placePIData invalid");
              break;
          placePIData -> Set(pageItemRef, nil, kFalse);
          // Process the ImportAndPlaceCmd:
          status = CmdUtils::ProcessCommand(placeGraphicCmd);
HTH.
John

How to place images

Similar Messages

Maybe you are looking for