Facebook Twitter LinkedIn RSS
Home tutorial Dreamweaver Tutorial 3

Dreamweaver Tutorial 3

Published on September 18, 2012, by in tutorial.

In this tutorial, we will put content on our home page. At the same time, we will learn how to use Dreamweaver. If you have not yet have the index.html and style.css in a p2 folder on your desktop, please make sure you follow through the previous tutorial: DW Tutorial 2.

1. Adding some real content

In the image below, I have added some real content: my bio and a photo of me. Let’s also look through some important tools that we can use.

a. When click on the “Source Code” tab, the html code of this web page shows. When clicking on the “style.css” the css code show. The css code is the code we have in the file style.css.

b. Here we can change the title of the web page.

c. Click on any element in the Design Area and you can change the property of that element.

d. Note here I added in some real content: my bio and a photo of me. I put this photo in p2 folder on my desktop. It shows up automatically in my Files Panel. From the Files Panel, I dragged it into the Design Area where I want it to be.

e. Make sure you the have following three panels open: Insert, CSS, and Files. If any of them is not open, in your Toolbar, Window -> Files; Window -> CSS; Window -> Insert.


2. Editing Nav (navigation)

Decide what pages you want and put them in the nav. For example, I have the following five: Home, Research, Teaching, Service, and Assignment.

To make them links, for example, highlight the text Assignment, and then in the properties window, type in “assignment.html”. This is something similar we did in project 1. Please do so for all five nav items.


3. Adding Links

To link to a web page, another website, an external link, do the same thing. Highlight the text in your Design Area. In the Properties Panel, type in the whole URL, starting with http://…. Also, make “target” to be “_blank.”


4. Modifying CSS

Look into your source code, you will see in the head section (that is, <head>), there is a link tag: <link href=”style.css” rel=”stylesheet” type=”text/css”>. This tells us the css that is controlling the design of this web page is a file named style.css. if we delete this line, you will see your index.html has completely no style.


When we click on the “style.css” tab, we see the actual content of our css file. To understand the css code, please read (1) CSS Basics (2) style.css annotated.


Example: Let’s say I want to change the background color of my nav. There are two ways to do it: (a) change the css code in the Code Area or (b) change the code in the CSS Panel. The color code of the new color I want is: BF3604.

(a) In the Design Area, click on nav. When nav is selected, you will see yellow border around it. In the code area, make sure you are under “style.css” tab (not Source Code tab). Find the block of code for “nav”. Change the color code for “background-color”.


(b) In the Design Area, click on nav. When nav is selected, you will see yellow border around it. In your CSS Panel, make sure you select “Current” tab. Change the color code for “background-color”.


By the way, I found that color using Kuler by Adobe at http://kuler.adobe.com/. Some screenshots on how to use the website is here.


5. Insert Panel

Make sure you look through the items in the Insert Panel too. There are many useful item, such as insert Hyperlink, Email Link, Images, Table, Media, etc.


6. My Home Page

After changing other CSS and adding more content, here’s my Home Page:

Tags: , ,

One Response

© Web Design & Publishing