Expression Web Tutorials For Beginners
How to Create a Photo Gallery with Expression Web?
So many people ask this very question. Therefore, I feel the need to clarify that Expression Web is not capable of creating a Photo Gallery.
Now what are we to do?
There are so many different ways we can create a photo gallery. Once we make the photo gallery, then we can use Expression Web to insert the gallery into a web page.
If you do not have Adobe Lightroom, or a graphics program like Photoshop or Fireworks, then download JAlbum, which is a free application. Actually, I like to use JAlbum instead of the the programs I just listed.
Using Inline Frames (iframes) in Expression Web
The <iframe> (inline frame) is one method one can use to embed flash videos, photo galleries, or a link to another frame-able page.
However, do not go overboard using iframes. And be sure to use a Doctype that will allow the iframe to validate...for instance, the iframe is valid code when used with XHTML 1.0 Transitional Doctype, but not the Strict Doctype.
Embed Flash Photo Gallery
or Flash Video
*Import the folder containing the Flash Video and files. Typically, this folder will have 4 different files that are needed to make the video work properly.
You will link to one of those files inside the folder.
To Import: Click FILE >IMPORT > file. The click "add folder". A box opens, look for the folder to import.
Optional way to import a folder or a file: Locate your folder on your PC by clicking the Start Menu, MY Documents, then look for your folder. Click and drag the folder into the Folders List in Expression Web.
Next: Place a div on your page > then double click the Inline Frame icon in the Toolbox > HTML Tags. This places the iframe into your div.
NEXT: Click new style > give it a selector > iframe (this is an tag selector)> place the style on an existing style sheet, etc. Click the checkbox to apply to document.
Position: Give it a width and height, a border, margins, and click ok. to the location and size, etc ...you would like. Experiment. Once you set the Initial page, see below, then we will style the div that contains the iframe.
Next, click on "Set Initial Page". This will open the Hyperlink dialog box.
(just ignore the new page button as we do not need to use it)
Look for the folder that holds your Flash video or photo gallery, click on the folder to open it (you are still inside the hyperlink dialog box).
Look for the file that has the ending of .htm or .html OR it may be index.htm. Don't confuse this index.htm with your home page of your website. They are not the same.
Click Ok once you found and chose the .htm or .html file as your link.
Now, the iframe is modifiable using CSS Styles as long as you have not moved the iframe with your cursor.
STYLE the div: Click New Style, name the div something like #box1.
OR....
You can copy and paste the styles below. Paste them on an external style sheet that is linked to your web page.
iframe {
border: 5px outset #000000;
width: 700px;
height: 770px;
margin: 20px 100px 20px 100px;
}
#box1 {
background-color: #719171;
width: 900px;
height: 100%;
margin: 0px auto 0px auto;
}
Click here to see Example of the iframe