7/7: Intro to Dreamweaver CS4
Adobe Dreamweaver CS4: A web developing program known as a WYSIWYG, “what you see is what you get”. Dreamweaver automatically writes HTML code.
Get Started:
Like HTML, you must have a separate “Root folder” (web folder) for all your .html, image, and media files.
1. Create a NEW folder for your Dreamweaver website (>File >New Folder).
2. Place .gif and .jpg images for use; if moving from HTML folder, be sure to make a *COPY* so original HTML files are not disturbed.
Define Your Site:
Before beginning your first page you must “define your site” in Dreamweaver. This tells the program which root folder to point to. You only have to do this once per website.
1. Open the program Adobe Dreamweaver CS4 in the Applications folder. Create a shortcut on your Dock.
2. In the Welcome Screen, select “Create New: HTML”
3. In the new document window, select >Site >New Site
4. In the Site Definition Window, choose the BASIC Tab.
5. Go through the prompts to make sure you are pointing to your Dreamweaver Root folder. Click ‘Done’ when ready. You will see a new blank document.
Main Windows
Document Window: Images and text here. Move your cursor in the Document window and start typing.
Tag Selector (lower left): displays current tag
Document Toolbar (top of page):
* Displays different views: Code, Split, Design. You are able to enter HTML code in these windows at any time.
* TITLE of each page is entered here.
* Preview in Browser button is here.
Properties Inspector:
Options for editing your selected Text, Images, Relative & Absolute Links, Ordered/Unordered Lists. Highlight content with cursor first.
File Panel: Your root folder and corresponding files displayed here.
Modify Page Properties:
Select font, font size, background color, background image, font color, etc.
>Modify >Page Properties:
* “Appearance” select font, size, text color, background color, background image (repeated or not)
* “Links” select link colors
Visual Guides:
>View: Rulers (inches, pixels)
>View :Grid :Show Grid
Save your Page
>File>Save… point to your Dreamweaver folder. Remember to save your homepage as “index.html”.
Preview your page in the Browser icon (found in the Document Toolbar)
Insert an Image:
Place all .jpg and .gif image files into your Dreamweaver Root folder.
>Insert >Image: choose a .jpg or .gif in your Dreamweaver folder -or- drag image file from the File Panel.
There are limited options for editing your image in Dreamweaver. Select the image and then look in the Properties Inspector for options like: edit in Photoshop, Optimize, Crop, Sharpen, Brightness and Contrast.
Add a Rollover Image: An image changes when moused over to reveal another image.
>Insert >Image Objects >Rollover Images
“Browse” a .jpg or .gif in your Dreamweaver folder for “Original Image” and “Rollover Image”.
Add an Absolute Link: Link to an outside website.
1. Highlight the text or image you want to link.
2. In the Properties Inspector, see “Link” box
3. Enter the entire URL : “http://www.____.___“
4. Select target: _blank to have the Absolute link open in a new window.
Add an Relative Link: Link to another page within your own website.
1. Highlight the text or image you want to link.
2. In the Properties Inspector, see “Link” box
3. Enter the name of your relative link: “_______.html”
-or-
Click “Browse to File ” icon and point to your .html file in your Dreamweaver folder.
-or-
Click “Point to File” icon and point to your .html file in the Files Panel
Add an Email Link:
>Insert >Email link : type in your email text (ie: “email” , “contact”) , add your email address in this window.
Tables: Comprised of rows and columns, insert images/text here for consistent placement.
>Insert >Table : choose parameters…select # rows & # columns
Click and drag on edges of table to resize.
Merge Cells within a Table:
Highlight (by clicking and dragging) the cells you wish to combine.
>Modify >Table >Merge Cells
Add Rows & Columns:
Highlight an additional row/column
>Insert >Table Objects…Insert Row Above/ Below, Insert Column to the Left/Right…
-or-
>Modify >Table…Insert Row/ Column, Delete Row/Column…
Create an Image Map
1. Create an image in Photoshop or Illustrator. Includes text for anything you wish to link (ie: email/contact, portfolio, about…).
Some common screen (monitor) sizes:
- 640 x 480 pixels
- 800 x 600 pixels
- 1024 x 768 pixels
2. Save for Web & Devices….point to your Dreamweaver Root folder. Make sure it is a .jpg or .gif
3. In Dreamweaver, insert the picture >Insert >Image…
4. Click on the image. In the Properties Inspector, select a HotSpot Tool.
5. Click and drag around the area of the image your want to link. A blue box appears.
6. Add the relative or absolute link in the Link box.
7. Test the link in the Browser.
In Class Assignment: Dreamweaver Website
Create a 3-page website using Dreamweaver CS4
-
Page 1/homepage : “index.html”
Include an introduction to your website. This could be in the form of an interesting graphic using an image map, a description of the website, and/or anything you think may draw a viewer in! Include a link to portfolio.html and about.html, a link to your email, along with other requirements listed below.
Page 2 : “portfolio.html”
Include examples of your Photoshop and/or Ilustrator projects. Include a brief description of the tools used, processes, and any additional information about what went into the creation of the work. Include a link to index.html and about.html, a link to your email, along with other requirements listed below.
Page 3 : “about.html”
Include some information about yourself through a bio. This can take the form of a paragraph or a list of random things you want to share. Include a link to portfolio.html and index.html, a link to your email, along with other requirements listed below.
Include Examples of:
-
Compressed images
-
Absolute Links that open in a new window
-
Ordered or Unordered List
As you plan the design and navigation of your website, it may be easier to sketch out your 3 pages on a piece of paper.
We will upload these new pages to the CCSF server on Thursday, when it will “go live”. We will review them from the server at that time.
Links
30 Examples of Attractive Nav
http://www.webdesignerwall.com/trends/30-examples-of-attractive-nav/
Web Design Trends of 2009
http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
Color Combo Library
http://www.colorcombos.com/combolibrary.html
I Like Your Colors
Leave a Reply