Web site design with Dreamweaver
Create folders
Create a folder in your course folder called Dreamweaver Design
Inside Web Site Design create a folder called LastNameFirstNameFirstSite
Inside that folder create a folder called Images
Evaluation of our first web site – it won’t be pretty, but…
This first site is not being judged for beauty or subject content. Rather it is just a work space in which you can test many of the features of Dreamweaver. The more items you use from the check lists that follow the better your mark.
Every image and page should go into the site folder created above. Place all images in the image folder. Name image and page files appropriately – there should not be any untitled documents.Avoid long names and spaces when you name your files as it can lead to errors.
Getting Started
- Create a home page and save it as index.html
File > New (Category List: Basic page, Page Type: html) Create
File > Save Save as index.html (or index.htm)in the local site folder
Your homepage, for any site, should always be called index.htm or index.html, web hosting servers will always look to open index first. - Change page properties
Window > Properties or Modify > Page Properties
Notice the options you have here – you can change the background colour, text colour, link colours, title and more …
- Duplicate a page and make minor changes
File > Save As (change the name and title)
This option saves you time as you can keep your pages looking alike without altering the properties again.
- View your pages in Internet Explorer
Click the preview (earth) icon
Use this often. This is the view that really matters. - Use the spell checker
Text > Check Spelling (Be sure to use it on all your pages) - Control the display of windows
– maximize any document window to get a view with tabs at the bottom
– it is sometimes easier to work with multiple windows on your screen - to separate windows choose WindowCascade, Tile Horizontally, or Tile Vertically
– to see just 2 of many windows minimize the other windows and repeat the line above
Working with text
On your homepage:
- Create 3 pages called index, page2 and page3. Alter the page properties to use colours you like. Avoid bright colours that will make your pages hard to read.
- Center your name in red, size 36, italic in a font of your choice.
- Insert a horizontal rule under your name – alter the default settings to match it’s length with your name
It’s the first item on the html toolbar. Make changes in the Properties window. - Create a bulleted list of 5 teacher names and separate the lines by using a line break:
Normally pressing enter just takes you to a new bullet on the next line. But if you want a bulleted list that skips every other line, press “shift + enter”.“Shift + enter” goes to a new line without ending the bulleted item. - Give each page a title to be displayed in the browser’s title bar
Type it after title in the document tool bar. The title of the document is displayed in the blue bar in the web browser – it does NOT have to be the same as the file name. Give each page an appropriate title – index could be called “your name’s homepage”, page2 could be titled “Working with images” and page3 could be titled “Working with tables”
Working with images
No webpages actually contain pictures. You can put a picture in a Word document or in an Excel spreadsheet, but you can not put a picture in a web page. You can, however, put the location of a picture in a webpage so that picture will be displayed in part of the web page. This means that where you store the picture and what you name your pictures matters. If thepicture is moved the web page may no longer be able to find the picture and then it will not be displayed.
- Find and save 5 images from the web to your web site images folder
Right click on the image on the web and select save picture as… - Insert an image in a web page using an image source dialog box
Click the commontoolbar and the imagemenu - Insert an image in a web page using the site panel
(This method is really easier than the first—try it!)
Open the site panel: windows > site
In the site panel open folders until locate the image file
Drag the image name onto the web page
- Open Page2 and center the heading “Images” at the top, use a horizontal rule to separate your heading from the body.
- Insert 3 images on page2 positioned left ,center and right
To start put the images one under the other.
Select each image and click on the appropriate button in the properties window - Add alternate text for 2 or more images
In the properties window for the image, type descriptive text after Alt
To see the effect view the page in Internet Explorer and roll onto the image with the mouse. Alternate text is also used to describe images to the deaf and it helps Google find images. - Set a Background Image for page2
Modify > Page Properties (The image is automatically tiled)
Background images should not interfere with the reading of text. Either fade the image in Photoshop or use an image designed to be used as a background. You can search using words such as: backgrounds, tiles, textures, design sets, wallpaper, and themes . (e. g. )
White is usually a good background. - Put an image to the left and right of text that wraps around it
(You need a few lines of text so see the wrap around effect. If needed just copy text from a web site or an essay. If its not enough to see the text warp around the image just copy and paste the text a few times)
Insert two images somewhere in a large piece of text. Notice that the text does not wrap around it. In the Property Inspector click the Alignment dropdown menu
Choose either the left or right options at the bottom of the list. (The other options are seldom useful) - Add some other image options from the properties window. You can add a border, or uniform space around the image (V Space adds vertical space, H Space adds horizontal space)
Creating links
- Create links from both images and text
To make a link you start by selecting either text or an image
First we are going to connect our 3 pages together with text links.
To allow for the links to be nicely spaced we are going to insert a table with one row and 3 columns and no border (this table is to neatly align text, we don’t want to see it).
Insert > table
In the table and put in appropriate text for links to homepage, page 2 and page 3
- Create links using the browse button
Highlight the text “Page 2”. In the Property inspector click the browse button (a folder)after the link text box and find page2.htm.
- Create links using the pointer button
First you must either open the destination page or the files panel and the site tab
Select “Page 3” text to be the link
Drag from the pointer button (the circle next to the browse folder) to the desired page: either the open page or the name of the page in the site panel
- Link to the top of a page ( don’t use an anchor)
Normally a link to a web page takes you to the top of the page. If you link to the page you are in, it will take you to the top of that page.
Highlight “homepage” and create a link to itself. Drag the pointer button over the page listed in the site panel or use the folder icon and search for the page you are in.
Try out your links in the web browser. Press F12. Note that you can link to page 2 and page 3 but you don’t yet have links to take you back to the homepage.
Copy this table onto each of your pages. Now you should be able to navigate between them with ease.
Save all of the pages before you preview in the browser. File – save all
- Link to a web site on the net
Go to the desired web page on the net
Click on the URL (web address) to select it
Right click and select copy
Return to Dreamweaver and select the text or image that is to be the link.
In the property inspector, paste the text in the link box - Link to a page in a new window
Normally a link changes in the window you are in. But you can link to a page and show it in a new window.
In the Property Inspector for the link choose _blank in the Target pull-down menu
Test it in the browser(Internet Explorer)
On your homepage – make links to the five teacher’s sites. Have them open in a new window.
- Link using images and buttons.
An image or text can be used as a link.
Select the first image you inserted onto page2. Have it link to
Save the following images in your image folder.
Replace the links we currently have in place in the navigation table on page with these new image links.
- Creating rollover images and inserting flash buttons.
Save the following images in your image folder.
We are going to create a rollover image in place of the text links. In the navigation bar we made for page 3, erase the current homepage link. While in the same table cell, go to Insert – interactive images – rollover image (or hold down on the image button and choose rollover image)
Browse to find the two homepage images, fill in an appropriate alt text and browse to find the appropriate link. NOTE: You do not need to put in a link. If you want to only create a rollover image without a link leave the link line blank.
Important points to keep in mind for rollover images:
- Save 2 images that are the same size
- A link is optional:
A dummy link will be created for you, if you do not want a real link
This is very easy because Dreamweaver writes the JavaScript for you. JavaScript is a scripting language use to control html pages. It is quite different from Java.
Create another rollover image on the index page of your site.
How can you link to the middle of a web page? First you must mark the point on the page that you want to link to with a named anchor – this is like a bookmark in Word. Then you link to the page and anchor, rather than just to the page. An anchor is a named spot on a web page that you can link to – but you can’t see the anchor when you are viewing the page.
- Create a named anchor
Put the insertion where you want to be taken to on the page.
Insert > Named Anchor
For the practice create two anchors on page 2.
Create one called “middle” in the middle of the page, and create a second anchor called “picture” and put it next to your centered picture.
- Link to an anchor on the same page
(important: to see this effect use internet explorer. The page containing the anchor must be a large page: 3 or more screens tall is recommended.)
Drag the pointer button over the anchor (so easy!)
or
Select the page then add “#” and the anchor name without any spaces(must be exact to work)
Create links to your anchors, “middle” and “picture” at the bottom of page 2.
- Link to an anchor on a different page
Open both pages so that you can see the anchor when the text/image is selected.
Try this: Window > Tile Vertically
Select the text or image and drag the pointer button to the anchor
Create a link to “middle” and “picture” on index.
Formatting with Hidden Tables
Tip: One way to select nested tables, rows, cells, & paragraphs is to click with the cursor on the page inside the desired item and then click on the tag at the bottom of the page: <table> <tr> <td> <p>
Working with Page 3 – create a heading at the top that indicates this page is working with tables
- Create a hidden table: 1row 2 columns with widths 40%, 60%
Insert > Table > rows: 1, columns: 2 width: 100% and border: 0
Select each cell in turn and in the properties window set w: 40%, or 60%.
Enter several lines of text.
Test in Internet Explorer. Play with changing the window size. - Position Pictures in a table cell centered left-right
To center a picture:
-- create an empty paragraph by pressing enter
-- add the picture (make sure the picture is narrower than the cell)
-- center it using the properties window - Position Pictures in a table cell with text wrapped around it
To create word wrap
-- add an image anywhere in the middle of text
(only the vertical position will matter)
-- in the image’s properties window set align to either left or right
-- press tab in the last cell to create a new row in the table
- Put a background image in a cell, row or table
Select a cell, row or table by clicking on the tag: <table>, <tr> or <td>
Put the address of the picture in the space beside Bg in the properties window
One method is to drag the pointer to the image listed in the Site window on the right
-- BE CAREFUL using pictures as backgrounds – be sure that the background enhances the site and does not make the text hard to read
- Create a completely fixed-width column in a table
Insert a new table with : 1 row 2 columns with widths 40%, 60%
Insert an image with the width you would like the column to be
Set the percentage width of the cell to be 1%
(this works because the remaining percentages keep their relative sizes—it’s a ratio)
Avoid inserting any word or new image that is wider than the original image
- Play around with table and cell alignment.
Add rows to the current table. Make text that is:
-horizontally left aligned, and vertically top aligned
-horizontally left aligned, and vertically centered
-horizontally centered and vertically centered
-horizontally right aligned, and vertically bottom aligned
- Play around with table borders and shading.
Insert a table with the following properties.
In the properties window:
-change the border colour
-change the cell background colour
-play around with the cell spacing, cell padding and border size to see the differences
-center the table
- Insert your flash animation.
Save your flash animation file .swf or .gif (not .fla) file in your webpage image folder. Under the insert menu, find the insert “Flash”. Preview it in the browser to see it work.