Create a Website using Dreamweaver

Dreamweaver is an application that can be used as a web editor. Dreamweaver generates both HTML and CSS code. It can be a useful tool for creating web pages, once you have a solid foundation in HTML and CSS, and after you learn the details of using the application.

In this exercise, you'll use Dreamweaver to create and format a website about Hogwarts Houses.

Looking at the end product

Look at a beautiful example of a page about Hogwarts: Hogwarts Houses, by Eni Mustafaraj, a faculty member of our department. Dreamweaver can be used to create an elegant page like this!

Also view a simpler version, much more like the one we worked on in a previous lab. This exercise takes you through the steps to produce a page like this, the one with the 2x2 layout, using Dreamweaver.

Setting up your file structure

Begin by saving this text file on your Desktop, as it contains the text you will for your web pages. Notice that this is a plain text document, as opposed to an html document.

To save lab time, download a starting set of organized folders. Use Fetch to navigate to the /home/cs110/public_html/lectures/dreamweaver folder, and drag the hogwarts_initial folder to your desktop. Examine the folder and contents to make sure that it is organized as follows:

Structure of the initial Hogwarts Houses website

Create your first page with Dreamweaver

The instructions on this page are not very detailed, and they aren't intended to substitute for the official Dreamweaver documentation. Instead, they are used as reminders of how things are done. For exact step-by-step instructions, please use the online Dreamweaver documentation, which is user-friendly and absolutely great!

The page you are going to create looks like this:

Screenshot of finalized web page

Start Dreamweaver, and create a new file, going to File --> New... . You will see the dialog box shown in the following image: set Page Type: to HTML with Layout: set to <none>, Doc Type: set to HTML5, and click the Create button.

Depending on the Dreamweaver settings you might see either some HTML code or an empty page. To be able to see both, on the toolbar on the top of the document window, click on the Split button. With the other two buttons you can change the view of your window between code and design, depending on your need. The image below shows the document toolbar:

If you cannot see the toolbar on the document window, then go to View --> Toolbars --> Documents. This will show the toolbar.

Save your document within the houses subfolder, as house_info.shtml (use the .shtml extension so that we can later use SSI to include a navbar).

Take a moment to notice the different parts of the Dreamweaver workspace. Usually, there will be several spaces open at the same time: the Document area in the middle, the Property Inspector at the bottom, and the Panel group at the right (which includes the Insert Panel and the CSS Panel). We will be using all of these during this lab. If any of these components is not showing on your screen, go to Window and check the appropriate lines.

Add the title The Houses of Hogwarts to your new page, either by writing directly in the HTML code or by replacing "Untitled Document" in the document toolbar.

In the Design View window, write the line: Hogwarts Houses, and in the Property Inspector (at the bottom) choose Format | Headings1. Notice how the HTML code in the Code View window changes accordingly. While you can use the Property Inspector to change the font or color of this header, you are going to instead create a new CSS rule for that purpose. Go to: Format --> CSS Style --> New... and change the options as shown in the following image (note: newer versions may have some of the options available through a pull-down menu):

Screenshot of Dreamweaver - New CSS Rule dialog window

After clicking OK, you will be shown another dialog window, titled "CSS Rule definition for h1", where you can change every style property of the h1 tag. For the moment, just change its font-family, font-size and color in the Type tab, and change text align to center in the Block tab. After submitting these changes, you will see the new styled header in the Design view, as well as the CSS code in the HTML code view. Another place where the new CSS rule shows up is in the Panel group, on the right of your document. At this point, it should look similar to the image below:

Screenshot of Dreamweaver - CSS tab in the Panel group

This tab is useful when you want to add new properties to an existing rule or change previous values. Tip: Clicking on a name tag in the code view will show the style properties in the CSS panel group.

In order to create one of the boxes that contains short information about a house in the index page, we will insert a div in the Design view, using the Insert Panel.

Name the div "houseinfo" and click on the button "Add CSS Style". You will be presented again with the "New CSS Rule" window we saw before, and you just need to click on OK. The familiar window, "CSS Rule definition for .houseinfo" will show up, and you can use it to define style and positioning for your div. Use these values to style the div:

        
                font-family: Geneva, Arial, Helvetica, sans-serif
                font-size: 12pt
                color: #3300CC
                margin: 10px
                padding: 10px
                float: left
                height: 300px
                width: 300px
                border: thin solid #3300CC

Going back to the Design view after submitting the following style rules, you will notice a placeholder that should look like this:

Screenshot of Dreamweaver - A styled, empty div

Enter the short information about Gryffindor inside the box (copy the text from your file), and choose Paragraph from the Property Inspector. Notice how the HTML code has br tags after the lines (respecting the original text). If you don't like them (and sometimes you will not need them), make sure to change the code.

Insert an image at the start of the paragraph, using the appropriate icon in the Insert bar (the sixth one) . In this case we are using the images from the thumbnails subfolder. You will be asked to enter a value for the alt tag.

In the design view, click to select the image and go to Format --> CSS Style --> New..., to create a CSS rule for the img tag. Use Dreamweaver to choose a nested selector for your rule: .houseinfo img. Click OK, and then make the image float left and have some margin to the right and at the bottom.

Now that you have the style for the div, you can actually copy the box (or the code) and paste it 3 times. Then, change the text and the image for each of the boxes. To change the image, you can use the Property Inspector (changing the source and the alt values). Since the style is already there, your work on the page is done.

Save your file and view it in a browser by selecting File --> Preview in Browser , and selecting a browser. Your four house divs should appear in a 2x2 grid. Try resizing the browser window and making it smaller. What happens to the layout of your divs?

One way to ensure that the layout is maintained is to encase the four "houseinfo" divs in another div that is wide enough to hold two "houseinfo" divs. The layout will then be maintained even if the browser size changes.

Insert a new div above the "houseinfo" divs in the Design window. Name it "mainpage", and when you select the new CSS style, specify a width of 700px. Why that wide?
You need enough space for two of the "houseinfo" divs, plus any padding and margins that are required. Each "houseinfo" div has 10px margins and 10px paddings on the left and right, plus 300px of content = 340px each, or at least 680px total for two. 700px gives you a little extra room.
Also specify a margin-left of 200px, so there is space between the "mainpage" div and the lefthand side of the browser window. This will come in handy later when you insert a sidebar in that space.
Copy the four "houseinfo" divs into the content of the new "mainpage" div, and save. Preview the page in the browser again, and notice that resizing the browser window now has no effect on the layout!

Adding a navigational menu

The original Hogwarts page you looked at earlier also had a sidebar containing a menu.

Start by specifying the menu right below the header of your page:
Hogwarts Houses
Gryffindor House
Hufflepuff House
Ravenclaw House
Slythering House
Mugglenet Website
Create an unordered list out of these lines by selecting the lines in the Design window. In the Property Inspector, click on the unordered list icon.
Make the last item in the list a link by selecting the item. In the Property Inspector, enter the Mugglenet URL in the Link: box: http://www.mugglenet.com. Later, when you have created the individual pages for the houses, you can make the other items in the list links to those pages using the same method.

You'd like this menubar to appear in a sidebar to the left of the "mainpage" div. To do so:

Insert a new div in the Design window called "sidebar". When you specify the new CSS, choose float left, and a width of 200px.
Copy the menu into the "sidebar" div. The sidebar and mainpage should now appear as two columns.

External style sheet

Until now, you have used document-level CSS for your page. Of course, an external style sheet is preferable (especially since we know in this case that we are making a multi-page site). The easiest thing to do at this point is to copy your document-level CSS into an external style sheet, and then attach the style sheet to the HTML file. To create a new style sheet:

Select File -->New...,set Page Type: to CSS, and click the Create button. Notice that you now have two files open in Dreamweaver, and that you can switch between them with the tabs at the top of the Dreamweaver window.
Cut the CSS document-level style sheet from your html file, and paste it into the new style sheet (be careful to remove the <style> tags from the code).
Save the new CSS file as houses.css (make sure it is in the same folder as the HTML file).
Go back to the HTML file, and select Format -->CSS Styles -->Attach Style Sheet. In the dialog box, browse for the new CSS file, and make sure the "Link" button is selected. This will put the link tag into your HTML file, so that you are linked to the new external style sheet.

Creating other pages and styling the navigation bar

Until now we have created only one page for the website and need four others. The good news is that we can use the existing page as a template for the other files and just change the main content in the other files.

Use File -->Save as... to save the existing file four times under the different names: gryffindor.shtml, hufflepuff.shtml, ravenclaw.shtml and slytherin.shtml. Save these files in the html subfolder. Before saving each file, change the title of the page and the header to something like "Gryffindor House", etc.
For each file, replace the contents of the "mainpage" div with the long text for each house.
Open the original file houses_info.shtml and add hyperlinks to the first four navigation menu items (similar to what you did earlier for the Mugglenet link, except that you will browse for the files you're linking to, and use relative URLs, rather than an absolute URL).

Now that our navigational menu has all its links, let us give it some style. Copy the following code (from the lecture notes, slightly modified) at the end of houses.css:

/* get rid of bullet and stuff that adds to width. */
.sidebar ul {
   margin: 0;
   padding: 0;
   list-style-type: none;  
}

.sidebar a {   
   display: block;
   padding: 0 20px 0 20px;
}

.sidebar a:hover {
   background-color: silver;
}

.sidebar a:visited{
        text-decoration: none;
}

Save everything and refresh the browser. Does your page look like the one we started to create at the beginning of this hour? You will notice that clicking on the menu links will open the new pages. However, if you view one of the new pages, the menu does not contain all the links (because we created them in the house_info.shtml page after we created the new pages). Should we go and copy and paste the new version of the menu to every file?
A better solution (in terms of website maintainance) is to use SSI (Server Side Includes). The general idea is to put the code that is duplicated for each page (i.e. the navbar) into a separate file, and point to that file (in a similar way to what we do when we link to an external style sheet).
If there is still time, go back and finish the pages for the four houses by adding the images. If you want to use divs to specify a layout for the house pages, define the divs for one of the pages, and the definitions will go into the external style sheet. You can then just use those those divs on the other pages for the same effect.