CIT 256 CIT 256 Dreamweaver Sites and Dreamweaver Sites and

Image MapsImage Maps

Dr. Beryl HoffmanDr. Beryl Hoffman

Start A Dreamweaver SiteStart A Dreamweaver Site

Start Dreamweaver.Start Dreamweaver.

Choose Dreamweaver Site (not HTML Choose Dreamweaver Site (not HTML file).file).

Or select New Site from Site menu.Or select New Site from Site menu.

Set up Site LocationSet up Site Location

Type in a Site Name and browse to your Type in a Site Name and browse to your Local Site folder. Hit Open then Select Local Site folder. Hit Open then Select then Save.then Save.

File DirectoryFile Directory

Your site directory is seen on Your site directory is seen on the bottom right panel.the bottom right panel.

Right click to create new Right click to create new subdirectories.subdirectories.

Drag to move files. Links will Drag to move files. Links will update automatically!update automatically!

Click on the filename to rename.Click on the filename to rename.

Double click on a file to open it.Double click on a file to open it.

Web site filesWeb site files

Index.html: the main page, automatically Index.html: the main page, automatically loaded for each directory.loaded for each directory.

Other pages with .html extensions linked Other pages with .html extensions linked to the index page.to the index page.

An images directory with all the images of An images directory with all the images of the site.the site.

NavigationNavigation

Web sites usually have a navigation bar with links Web sites usually have a navigation bar with links that link to different site pages.that link to different site pages.

Top or Side Navigation.Top or Side Navigation.

Types of links:Types of links:– Text links, see Text links, see http://www.elms.edu – Buttons (images), see Buttons (images), see http://GreenfieldMassage– Text made into buttons using CSS3, see Text made into buttons using CSS3, see http://apple.com– Menus (Spry/Javascript), see Menus (Spry/Javascript), see http://elms.readyhosting.com – Image Map with hot spots, see Image Map with hot spots, see

http://localnorthampton.com/http://localnorthampton.com/

External vs. Internal LinksExternal vs. Internal Links

External Links go to a different website External Links go to a different website and start with http://. Usually target and start with http://. Usually target new/blank window.new/blank window.

Internal Links go to other pages in your Internal Links go to other pages in your web site. Just a page name .html if in the web site. Just a page name .html if in the same directory or a relative path. Do not same directory or a relative path. Do not use absolute paths!use absolute paths!

3 Ways to Make Links in 3 Ways to Make Links in DreamweaverDreamweaver

Insert/HyperlinkInsert/Hyperlink

Type in text to underline, highlight, type in Type in text to underline, highlight, type in URL next to Link: in the properties window URL next to Link: in the properties window at the bottom.at the bottom.

Type in the text to underline, highlight, and Type in the text to underline, highlight, and use the Point to File target button next to use the Point to File target button next to the link. the link.

Linking with Point to FileLinking with Point to File

Type in text to link and highlight it.Type in text to link and highlight it.

Click on the Point to File button at the Click on the Point to File button at the bottom and drag it to the file you want to bottom and drag it to the file you want to link to on the right.link to on the right.

Button Links Button Links

Insert image for a button.Insert image for a button.

Click on it to select it.Click on it to select it.

Type in file name next to Link: in the bottom Type in file name next to Link: in the bottom panel or click on Point To File tool next to the panel or click on Point To File tool next to the Link textfield and drag to right file.Link textfield and drag to right file.

Rollover buttons created by swapping two Rollover buttons created by swapping two images. Easy from Insert menu.images. Easy from Insert menu.

Drawbacks: making all the buttons and Drawbacks: making all the buttons and updating as needed.updating as needed.

Image MapsImage MapsSometimes the top banner image can have Sometimes the top banner image can have hotspots that can be turned into links.hotspots that can be turned into links.

Click on the image. Click on the Rectangular Click on the image. Click on the Rectangular Hot Spot Tool at the bottom. Hot Spot Tool at the bottom.

Drag a rectangle around the place you want to Drag a rectangle around the place you want to link. Type or use the File Pointer to point to link. Type or use the File Pointer to point to linked file.linked file.

Drawback: hard to do rollovers.Drawback: hard to do rollovers.

Images folderImages folder

Images are usually saved in a subfolder Images are usually saved in a subfolder called images in the web site directory.called images in the web site directory.

If you move your images there, If you move your images there, Dreamweaver will update all the links to a Dreamweaver will update all the links to a local path like “images/banner.jpg”.local path like “images/banner.jpg”.

CSS3 Text made into buttonsCSS3 Text made into buttons

Very popular right now. We’ll learn how to Very popular right now. We’ll learn how to do this later.do this later.

Advantage: Easy to change text. No extra Advantage: Easy to change text. No extra images. See http://apple.com for example images. See http://apple.com for example navigation bar, and navigation bar, and http://www.cssbuttongenerator.com/ to http://www.cssbuttongenerator.com/ to generategenerate..

Drawback: different browsers do the CSS Drawback: different browsers do the CSS differently so lots of CSS code variants.differently so lots of CSS code variants.

Save CSS Styles into a .css FileSave CSS Styles into a .css FileUse Page Properties to set the CSS for the Use Page Properties to set the CSS for the site colors which puts css rules in the <style> site colors which puts css rules in the <style> tags in the <head> section.tags in the <head> section.

Select and right click to cut the css section in Select and right click to cut the css section in <style> tags at the top of your file..<style> tags at the top of your file..

File/New CSS file to create a blank css file.File/New CSS file to create a blank css file.

Paste the CSS rules into the .css file.Paste the CSS rules into the .css file.

Attach the .css file to your file (see next slide)Attach the .css file to your file (see next slide)

(Or select properties and right click in right CSS (Or select properties and right click in right CSS window and move to file.)window and move to file.)

Attach a StyleSheetAttach a StyleSheet

All pages in the same site All pages in the same site can have the same can have the same stylesheet attached.stylesheet attached.

Click on the chain button at Click on the chain button at the bottom of the CSS panel the bottom of the CSS panel in the top right side.in the top right side.

Embed Google Map iframeEmbed Google Map iframeEnter an address at http://maps.google.com.

Click on the paperclip icon and copy the generated HTML code to embed in your page.

Back in Dreamweaver, switch to code view to paste in the HTML code from Google Maps into the content area in the HTML code.

Midterm next week during lab Midterm next week during lab on Thu. or Fri.on Thu. or Fri.

No class on Monday (Presidents day)No class on Monday (Presidents day)

Midterm based on this week’s assignment Midterm based on this week’s assignment to create a website with a couple pages in to create a website with a couple pages in Dreamweaver but with no help. Dreamweaver but with no help.

Open book/open notes.Open book/open notes.