Beginning Dreamweaver
Center for Innovation in Teaching and Research
Presenter: Chad Dennis
Instructional Technology Systems Manager
ce-dennis@wiu.edu
Malpass Library 637 • Phone: 309.298.2434
1
Setting up a site in Dreamweaver
Before you set up your site in Dreamweaver you need to do two things. (1)
Create a folder on your computer where all your site files will be located.
(2) Determine where your site will be hosted. Everyone at WIU has web
space available to them on Westerns servers. To be sure that your web
space is enabled, go to www.wiu.edu/guava. After you login, click the
Web link and follow the instructions. (NOTE: If you are going to use the site
for use on Western Online, you do not need to set this up)
Once your folder is created you are ready to open Dreamweaver and set
up your site.
• From the main menu choose Site > New Site
• Click on the Advanced Tab. It will default to the Local Info Category
on the left.
• Enter in the following information:
‣
Site Name (Can be anything you want)
‣
Local Root Folder (Click the folder icon on the right and choose
the folder you created on your computer earlier)
• Next click Remote Info in the Category section. (NOTE: If you are going to use the site for use on Western Online, you can skip this part.)
• Enter in the following information:
‣
Access - Choose FTP from the drop-down menu
‣
FTP host - ftp.wiu.edu
‣
Host directory - http
‣
Login - Your ECOM ID (e.g. ced101)
‣
Password - ECOM password (If you want Dreamweaver to remember your password click the Save checkbox)
‣
Click Test to test that the info is correct and you can connect
‣
If connection is successfull click OK, then click OK again.
Malpass Library 637 • Phone: 309.298.2434
2
Templates
Dreamweaver allows you to create a template from your designs or use
one of their predefined templates to help you get started.
To use a Dreamweaver template:
•
•
•
•
•
•
•
•
First go to File > New in the main menu.
Click on Blank Template.
Under the Template Type section choose HTML template.
In the next column choose the layout you would like to begin with.
(There will be a thumbnail preview to the right with a short description underneath).
You can leave the DocType at it’s default setting.
Choose Create New File for Layout CSS (Or choose Link to Existing
File if you already have a CSS file to use. Use the Attach Style Sheet
button to browse to and select the file)
Click Create. Change the name of the css file to something like
styles.css or stylesheet.css. Make sure you save to the local folder
that you created at the beginning. For better organization, I also like
to put the stylesheet file in a separate folder called styles.
Click Save. (NOTE: This saves your .css file but you still have not actually saved the template yet.)
Malpass Library 637 • Phone: 309.298.2434
3
Lets go ahead and save the template.
• Go to File > Save As Template… in the main menu. You will get the
following message.
•
• We will create editable regions next so go ahead and type in a
name for your template and click OK. (NOTE: Templates are stored
in a folder named “Templates” inside of your site folder. They can be
uploaded to the server if you want, but isn’t necessary for the site to
work.)
Editable Regions
Editable regions are areas in a page (created by the template) that are
editable by the user. Any area in the page that is not made into an editable region locks out any editing of any kind. This is useful when you have
areas such as a header or footer that you want to remain the same and
do not want to accidently make changes to it when updating content.
To make an editable region:
• First select the area you want to make editable.
• Next choose Insert > Template Objects > Editable Region from the
menu.
• In the New Editable Region dialog window, give the region a name
such as Main Content Area.
• Click OK.
The area now shows up in a colored box with the name you gave it in a
tab at the top.
Malpass Library 637 • Phone: 309.298.2434
4
Be sure to save the changes to your template by going to File > Save in
the menu or using Ctrl + S for Windows or Command + S for mac
Modifying the Template Using CSS
To view the CSS Styles window go to Window > CSS Styles in the menu. In
the CSS Styles list you should see the stylesheet file that was created when
you created your template. To modify the stylesheet:
• Click the + (plus sign or arrow) to the left of the stylesheet to expand
the styles in the file.
• Click the style you want to edit to select it.
• Now click the Edit Style icon (pencil) located at the bottom of the
CSS Styles window.
• Use the options in the window that appears to modify the template.
Using Templates
Now let’s use the template to begin building a website. Go ahead and
close the template and css files if they are still open. To create your first
page in the site:
• First go to File > New in the menu.
• ClIck on Page from Template located on the very left of the New
Document window.
• Make sure your site folder is selected in the Site section.
• The template you created earlier will appear in the Template for
Site... section.
• Select it and click Create.
Malpass Library 637 • Phone: 309.298.2434
5
Your new page appears on the screen. Notice that the areas NOT defined
as editable regions do not allow you to click on them or edit them in any
way. However, the area defined as an editable region is outlined with the
name located at the top. You can enter and edit your content in this
area.
After you have entered your content, save the page by going to File >
Save in the menu. Save your first page as index.html. This lets the users
browser know that this is the first page to go to when the URL is typed in.
For example, when you type in www.wiu.edu, the first page you see has
the file name index.html. Again, make sure you are saving it to your site
folder that you created at the beginning. (NOTE: If you are creating pages
for Western Online, you do not need to use this naming convention)
Adding Images
A quick note about images: All your images should be in a folder in the
same directory as your site files. Name the folder something like images or
graphics.
To add an image to your page:
• Click in the page where you want the image to appear.
• Next, click Insert > Image.
• Navigate to your images folder for your site and choose the image
you want to insert.
• Click Choose.
Adding Links
•
•
•
•
First type the text you want to make a link.
Next click and drag to highlight the text.
In the Properties window, click and hold the Point to File icon.
Now drag your mouse to the Files window, hover over the file you
want the text to link to and let go of the mouse
Using Your Site in Western Online
Once you have completed your web pages you can import them for use
in Western Online. Before you can import your site files you must compress
or “zip” your files.
Malpass Library 637 • Phone: 309.298.2434
6
To Compress your files on a PC:
• Right click your site folder that you created.
• Go to Send To > Compressed (zipped) folder
To Compress your files on a Mac:
• Right click (Control Click) your site folder that you created.
• Choose Compress
Importing into Western Online
• First, go to the Build tab.
• Click File Manager under the Designer Tools section.
• In the File Manager click Get Files. Navigate to your computer and
choose the zipped file you just created.
• Click Open. The file will appear in your File Manager.
• Click the Action drop-down menu to the right of the file and choose
Extract.
Your site files will now show up in a folder of the same name as your
zipped file and are ready to be added.
Malpass Library 637 • Phone: 309.298.2434
7