This is a step by step tutorial that will guide you on how to make a basic HTML & CSS portfolio page using Dreamweaver. Here is a preview of the final project: http://www.webstudioeac.com/my_portfolio/
This preview has a additional jQuery Light Box image gallery. Later we will add more pages and build a light box gallery. More after the Jump.
1. Create a folder on your desktop and name it “My Portfolio”
Inside of “My Portfolio” make a new folder and name it “images”
Drag the images from the “portfolio starter” file and copy them to your images folder.
2. Open up Dreamweaver and define a new site.
Go to, Site, New Site and fill out the local info in the site definition window.
Enter the following info:
Site Name: My Portfolio
Local Root Folder: choose “My Portfolio” from your desktop
Default Images Folder: Choose the “images” folder inside of “My Portfolio”
Click ok when done.
3. Make an HTML file. Go to, File, Choose “New” Select page type, HTML and then click the Create button.
4. Save your page as “index.html” make sure you save it inside of your Root folder: “My Portfolio”.
5. Make a CSS file. Go to, File, Choose “New” Select page type, CSS and then click the Create button.
6. Save your page as “styles.css” make sure you save it inside of your Root folder: “My Portfolio”.
7. Set up your style sheet. Copy and paste the following text into your style sheet:
/* CSS Document */
/* check it out, this is a note. you can write anything you want between these tags, bla bla bla… */
/* ———————main elements——————- */
h1{}
h2{}
h3{}
h4{}
h5{}
h6{}
p{}
ul{} /* this is an unordered list */
li{} /*this is a list item */
img{} /*this is for all images */
hr {} /* this is a horizontal rule*/
em {} /* this makes fonts bold*/
/* —————————-layout——————————- */
*{
margin:0;
padding:0;
}
body { text-align:center; /*For IE6 Shenanigans*/ }
#wrapper{
width:800px;
margin:0 auto;
}
/*—————this is the stuff inside the wrapper tags——————- */
#banner{}
#nav{}
#nav li{}
#left_col{}
#right_col{}
#center_col{}
#footer{}
#footer li{}
/* —————Link colors—————— */
a:link {}
a:visited {}
a:hover {}
a:active {}
/*————— CSS Class—————— */
.bold{} /* this is a CSS class, you can name it what ever you want and you can make as many as you want. */
8. Set up your index.html page.
In dreamweaver open up your index.html file from the files window. At this point you may have a tab up for this document and also your styles.css.
Lets start by adding some layout structure to the page. In “code view” enter the following between your body tags. NOTE, These are body tags: <body></body>
<body>
<div id=”wrapper”>
<div id=”banner”></div>
<div id=”nav”></div>
<div id=”center_col”></div>
<div id=”footer”></div>
</div>
</body>
9. Attach the Style sheet to your index.html page.
Go to your properties window and click the style button, then choose “Attach Style Sheet”. Navigate to your style sheet “styles.css” and click choose.
10. Modify your style sheet.
Go to the CSS Style window and double click onto “body” in the CSS rule box enter the following by selecting the background category:
background-image: url(images/background.gif);
background-repeat: repeat-x;
background-position: top;
11. Lets do the same for the wrapper. Choose #wrapper in the CSS window.
We need to make our wrapper have a fixed width. Choose Category: Box and make the box width 800 px,
Margin: top 0, right auto, bottom 0, left auto
Under the Block category select, text align, left
this is what it should look like in your style sheet:
#wrapper{
width:800px;
margin:0 auto;
text-align:left;
}
12. Add the banner image. From the CSS style window double click onto #banner from the list.
in the style definition box choose the Box category then make the height 160 px.
Next go to the Background category and select background image: images/banner.gif with no repeat.
the CSS on your style sheet should look like the following:
#banner{
background-image: url(images/banner.gif);
background-repeat: no-repeat;
height: 159px;
margin-top: 0px;
}
13. Important. Stop! Save your files and preview your page in a browser.
14. Lets work on our navigation. In the code view look for <div id “nav”></div>
Between the nav DIV tags lets make a unordered list for our menu. Copy and paste the following.
Or type this out:
<div id=”nav”>
<ul>
<li><a href=”portfolio.html”>portfolio</a></li>
<li><a href=”about.html”>about</a></li>
<li><a href=”contact.html”>contact</a></li>
</ul>
</div>
15. Add style to the list. Go to the CSS Style window and double click onto “li “
under category block, select display “inline”
16. Lets get rid of the bullets. Go to the CSS Style window and double click onto “ul “
under category list, select type “none”.
17. Change the fonts and add padding to your menu items.
Enter the following to “nav” in the CSS Style window and double click onto “nav “
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 16px;
font-weight: bold;
color: #333333;
letter-spacing: 1px;
padding-left: 55px;
18. Go to the CSS Style window and double click onto “nav li “
under category box, enter: margin-right: 110px;
19. Make links to your soon to be pages. Highlight each menu item in the design window and type the following for each page that you will be creating inside properties window. For example: portfolio.html, about.html and contact.html
20. Add content to your #center_col div.
Type something in your html between the <div id=”center_col”>this is where you may type something and add images</div> To insert an image first click between the center_col div tags or in design view click into the center_col box. Go to: Insert > Insert image, select image source then click select.
21. Add the Horizontal Rule by typing <hr /> after your image or before the end of your <div id=”center_col”> tag.
For example:
<div id=”center_col”><img src=”images/img6-lg.jpg” width=”550” height=”400” /></div>
<hr />
22. Add content to your footer. Go to the CSS Style window and double click onto “#footer “ under category box, make padding left 55px
23. Enter the footer menu items as a list. In your html look for <div id=”footer”></div>
type out your content between those tags, Example:
<div id=”footer”>
My Portfolio | All Rights Reserved 2010
info@myportfolio.com
Follow me on Twitter
Join My Facebook
</div>
24. Make the content into a unordered list by surrounding it with <ul> </ul>.
Turn each item into a list item by adding <li> </li>. Your HTML should look like this:
<div id=”footer”>
<ul>
<li>My Portfolio | All Rights Reserved 2010</li>
<li>info@myportfolio.com</li>
<li>Follow me on Twitter</li>
<li>Join My Facebook</li>
</ul>
</div>
25. Go to the CSS Style window and double click onto “#footer li “
under category box, make margin right 50px. You may also change your fonts
and colors at this point.
26. Add your links in the footer section.
27. Go to file “Save All” and then preview in your browser.
*Note. To make new pages go to file “save as” and rename each page as follows:
portfolio.html, about.html and contact.html. Now all of your linked pages will work and you may change content as needed per page.
Congrats! you have made a basic portfolio web page.
See the final project here: http://www.webstudioeac.com/my_portfolio/
