Lab Assignment

Overview

Scenario/Summary

In this iLab, you will use Dreamweaver for the first time in this course. In terms of content, this iLab is similar to last week's iLab assignment in that you will once again create a simple web page that describes the website planning process and what should happen before any code is written when starting a business website development project. Your page will include links to three external websites.

What is really different about this iLab is that you will be using Dreamweaver. Dreamweaver is an advanced WYSIWYG website creation tool. Not only does Dreamweaver allow a designer to code directly in HTML, but it offers ways to create web pages without coding any HTML and also contains features for managing websites.

Dreamweaver is part of the Creative Cloud suite of products by Adobe. You will be accessing Dreamweaver not through the Citrix iLab environment but through a different interface altogether. Be sure to read through the rest of the lab for directions. You also would be well advised to connect to Dreamweaver early in the week, even if you don't complete the iLab until later in the week, in order to make sure that you don't have any connection problems.

Required Software

Access the following software in the Citrix iLab environment or from a local installation on your computer

• MS Word: Steps 1-4
• Notepad: Step 4
• Internet Explorer: Step 11
• Dreamweaver: Steps 2-10

Use a personal copy or the free Adobe Creative Cloud subscription provided by DeVry.

Adobe Creative Cloud Subscription

NOTE: once you have installed Dreamweaver on your local computer, you will access the software via the Adobe Desktop Manager on your local computer.

Lab Steps

STEP 1: Research and Writing

1. Conduct research on the website planning process.

2. Using Microsoft Word, write three to five paragraphs that clearly describe the website planning process and what should happen before any code is written when starting a business website development project. This should be in your own words. Make sure to reference three external websites, and include the site URLs at the bottom of your document.

3. Save your document as FirstnameLastnameLAB2.docx (e.g., NancyStegallLab2.docx). You will not need to submit this file with your lab, but you will need to copy text from it into your web page in a later step.

STEP 2: Startup and Setup

If you see a welcome screen like the one shown below, simply close it. Feel free to go back at another time to look it over, but you need not do so for this lab.

When the Dreamweaver main window opens, your screen will look something like this. If your screen does not look exactly like this but is close, that is fine. We will work on that in a bit.

STEP 3: Creating a New HTML Page

Create a new document by pulling down the File menu and clicking New.

In the New Document dialog that appears, select HTML under Page Type and under Layout, then click Create as shown below.

You will see a document work area window that looks something like the following image. Verify that in the Property Inspector in the lower left corner, the HTML button is highlighted and not the CSS button. Also verify that you are in the Design view.

If the Property Inspector is not visible, you can make it visible by clicking on Window in the top menu and then clicking Properties in the dropdown menu that will appear.

STEP 4: Save Your File

As you know, saving your work often is a good idea when working with any application. You should save your file now and save it again frequently as you work on the iLab.

Save your work-in Dreamweaver, that is typically done by using Ctrl + S or by going to the File menu and selecting Save or Save As.

You will need to save the file to a drive on your local computer so that you will be able to submit it to the Dropbox. Do the following in Dreamweaver: In the Save As dialog, select the location where you wish to save the file (probably Documents). Then click New Folder to create a folder named BIS325Labs. Click on the BIS325Labs folder to open it.

Name the file YourNameLab2.htm (replacing YourName with Nelson Ramos).

Image Description

STEP 5: Creating a Heading and Inserting Content

Note the Property Inspector at the bottom of the screen. Select Heading1 from the Format dropdown list on the Property Inspector as shown in the below image. Then click in the Design pane and enter the heading Your Name BIS325 Lab 2 (replacing Your Name with your name) at the top of the document. Your page so far might look like this.

STEP 6: Linking and Text Formatting

Use the Property Inspector to apply specific formatting to your content. The three types of formatting required are as follows.

1. Select a word or phrase and make it italic by clicking the I (italic) button in the Property Inspector.
2. Select a word or phrase and make it bold by clicking the B (bold) button in the Property Inspector.
3. Select a group of paragraphs and create a bullet or a numbered list by clicking the Ordered List or Unordered List button in the Property

Inspector. (Before creating the list, make sure that you have blank lines between the paragraphs.)

Troubleshooting Tip: If you selected several paragraphs but ended up with only one list item after clicking the Ordered List or Unordered List button, you may have copied and pasted several paragraphs at once into Dreamweaver, rather than doing one paragraph at a time as directed in Step 4. If this happens, press Ctrl + Z to undo the list formatting. Then place the cursor at the beginning of your second paragraph, press Backspace twice to remove the blank line and merge the first and second paragraphs, and press Enter to separate the paragraphs again. Repeat this process for each subsequent paragraph, then select all the paragraphs and apply the list format again.

Switch to Code view or Split view for a moment, and review the HTML code. Switch back to Design view, or just use the Design view pane in Split view.

You can apply any additional formatting you'd like, but remember you will be graded on the three types above, so be sure to have one of each of those types of text formatting at the very least. To apply further formatting, you may want to select all of your text and make it in the sans serif font family instead of the default serif font face, for instance, or change a color here or there. You can use the Help system in Dreamweaver to get more information about how to apply any type of formatting you want to experiment with.

STEP 7: Create Hyperlinks

At the bottom of your document, you should have URLs for three references you used in writing your document. The following image shows the references almost in APA format. The references are not shown with hanging indents. Creating hanging indents in Dreamweaver is somewhat complicated, and we will not do that in this lab. The references are to be in APA format in all other respects. Convert each URL to a hyperlink by selecting the URL in the document and copying and pasting it into the Link textbox in the Property Inspector, as shown below.

STEP 8: Preview in Browser

You should have been saving your work often throughout the lab. Whether you have or not, save the file again by pressing Ctrl-S or by clicking the diskette icon in the top Dreamweaver toolbar.

After you have saved the file, you will need to test it by clicking on the Preview icon located on the toolbar, pressing the F12 shortcut key, or by selecting Preview in Browser from the File menu. If you click the Preview icon or select Preview in Browser from the File menu, you may be asked to choose from a list of available browsers; choose IExplore for Internet Explorer, or whatever the default browser is on your computer. Does the finished page look the way you think it should?

Does the page contain any spelling errors? Go back to Dreamweaver and make any corrections. You should spell check the content of web pages you create. The spell check shortcut is Shift + F7, or you can select Check Spelling from the Commands menu. Save the file once more.

STEP 9: Code and Split Views; Add a Title

You've created an entire web page and didn't enter a single HTML tag! Dreamweaver did that for you. Take a look at the HTML code that was created by clicking on the Code icon at the top of the page. You could also look at both the Code and the Design views at the same time by clicking on the Split icon at the top of the page.

As you look at the HTML code, look for the similarities with what you created in Lab 1 using a text editor. There will probably be some HTML code above the body section with which you aren't yet familiar, but that's okay. It is still a valuable learning opportunity to look at all the code you have now for the body section of your page.

You may notice that there is no title. Add a title now by clicking between the tags as shown below and entering the title in the text box that will appear in the Property Inspector. Use your name and the iLab number as the text content.

Attachment:- Lab_Assignment.rar