CIS 363 DeVry Week 2 iLab 2
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
<strong>CIS</strong> <strong>363</strong> <strong>DeVry</strong> <strong>Week</strong> 2 <strong>iLab</strong> 2<br />
Downloading is very simple, you can download this Course here:<br />
http://wiseamerican.us/product/cis-<strong>363</strong>-devry-week-2-ilab-2/<br />
Or<br />
Contact us at:<br />
SUPPORT@WISEAMERICAN.US<br />
<strong>CIS</strong> <strong>363</strong> <strong>DeVry</strong> <strong>Week</strong> 2 <strong>iLab</strong> 2<br />
<strong>CIS</strong><strong>363</strong><br />
<strong>CIS</strong> <strong>363</strong> <strong>DeVry</strong> <strong>Week</strong> 2 <strong>iLab</strong> 2<br />
<strong>iLab</strong> 2 of 6: Create a Website Using Dreamweaver WEEK 2<br />
Note! Submit your assignment to the Dropbox located on the silver tab at the top of this page.<br />
(See the Syllabus section “Due Dates for Assignments & Exams” for due dates.)<br />
iLAB OVERVIEW<br />
Scenario and Summary<br />
Review a data file given by a client, and determine the number and type of pages needed. Create a storyboard depicting<br />
each page and the relationship to the other pages. Choose a template as instructed, alter the styles to fit the client’s<br />
logo, and produce several pages based on the design. Populate the new pages with the appropriate data from the data<br />
sheet.<br />
In this exercise, you will choose a Dreamweaver template file and modify the styles according to the instructions below.<br />
Deliverables<br />
Submit a <strong>Week</strong> 2 Lab folder, including<br />
• index.html;<br />
• about.html;<br />
• contact.html;<br />
• staff.html;<br />
• rates.html;<br />
• <strong>CIS</strong><strong>363</strong>A_W2_LabA_graphic.gif; and<br />
• thrColFixHdr.css.<br />
Word or Visio Storyboard Diagram document<br />
Deliverable Points<br />
Word or Visio document with storyboard 5<br />
Completed website based on project specifications 25
Correct external CSS file that attaches to each page 10<br />
Total 40<br />
Required Software<br />
MS Visio/MS Word/PowerPoint<br />
Access the software at https://lab.devry.edu/vpn/index.html<br />
Steps: All of Part A<br />
Dreamweaver<br />
Access the software at https://devrydesktop.rkon.com.<br />
Steps: 2, 3, 4, 5, 6, 7, 8 and 9<br />
iLAB STEPS<br />
Step 1: Storyboard the Site<br />
Back to Top<br />
• Review the MS Word document downloaded from the scenario and summary above.<br />
• Determine what pages will be necessary for the site based on the provided document.<br />
• Create a storyboard to show those pages as they relate to each other.<br />
Step 2: Select and Save a Template<br />
Back to Top<br />
• Open Dreamweaver and reestablish your local site, if necessary. Do not attempt exercises without declaring<br />
a site.<br />
• Create a new folder named w2Lab in the site root.<br />
• From the menu, select File → New.<br />
• In the selection window, choose blank page, page type: HTML, and Layout: 3 column fixed, header and footer.<br />
Choose doc type: HTML5 and layout CSS: create new file. Once you have made these selections, click Create.<br />
• Save the CSS file in the w2Lab folder. Accept the default filename.<br />
• Save the file as index.html in the w2Lab folder.<br />
Step 3: Prepare the Resources<br />
Back to Top<br />
• Download this graphic and save it in your w2Lab folder.<br />
• Place the image in the logo placeholder on the template page.<br />
o<br />
o<br />
o<br />
Select the image placeholder in design view on the page.<br />
In the property inspector, drag the compass icon to the image in the w2Lab folder from the Src value box.<br />
In the Alt value box, type Rainbow Daycare Logo.<br />
• Save the file.<br />
Step 4: Create Links<br />
Back to Top<br />
• On the left side of the template file, there are four links representing a simple navigation menu.<br />
o<br />
Link one—change to About Us
o<br />
o<br />
o<br />
Link two—change to Our Staff<br />
Link three—change to Contact Us<br />
Link four—change to Our Rates<br />
• Select each link (the text) individually, and type in the file name that it will link to in the Link value box in the<br />
property inspector.<br />
o<br />
o<br />
o<br />
o<br />
About Us → about.html<br />
Our Staff → staff.html<br />
Contact Us → contact.html<br />
Our Rates → rates.html<br />
• Save the file.<br />
Step 5: Add Static Information<br />
Back to Top<br />
• Below the navigation menu are paragraphs describing the nature of the links. Delete all of the text in this<br />
column.<br />
• Type Phone and press Enter.<br />
• Copy and paste the phone numbers from the document to the column. Between the two phone numbers, place<br />
a line break by setting your insertion point between the numbers and pressing Shift + Enter.<br />
• Highlight the word phone and format it as Heading 4.<br />
• In the far column, delete all the text in the column. Type in owner, and format it as Heading 4.<br />
• Press enter and place the owner’s name and address below the heading. Place line breaks between each line<br />
in the address. We will add a style that will make the address fit better in a later step.<br />
• Delete all of the text except the main heading in the center column.<br />
• Save the file.<br />
Step 6: Adjust the Styles<br />
Back to Top<br />
• Place your cursor next to the image in the header section, and click div.header in the information bar at the<br />
bottom of the editor window.<br />
• Collapse the files panel (double-click the tab) and expand the CSS panel. Select the current button from<br />
All/Current at the top, and locate the small window in this pane labeled Properties for “.header.”<br />
• Click the add property link at the bottom of the list, and select background-color from the drop list.<br />
• Click on the small color square in the value section to get the eyedropper. Select the innermost color band on<br />
the rainbow image.<br />
• Click on the background property that was already there, then click the trash can in the lower right corner of<br />
the CSS Property pane.<br />
• Replace the text in the footer section of the page with the following line: Copyright 2012 Rainbow Daycare<br />
LLC – All International Rights Reserved.<br />
• Set your cursor just before 2012 in the line and select Insert → HTML → Special Characters → Copyright.<br />
This will place the symbol in the page. Space appropriately. Save the file.<br />
• Click on the thrColFixHdr.css tab at the top of the editor window. This will open the style sheet.<br />
• Locate the class .header in the styles. Copy the property and value from the .header class.
• Locate the .footer class in the file. Replace the background property with the clipboard content that you copied<br />
from the header class.<br />
• Add a property at the bottom of the .footer class for font-size. Set the value to 85%.<br />
• Add another property, this time for color. Click on the painter’s palette symbol in the pop-up suggestions to<br />
get a color selector. Pick a bright shade of yellow.<br />
• Add a new class with the following values: .smallFont {font-size: 85%; }.<br />
• Save the CSS file.<br />
• Return to the design view of the index page. Select the paragraph with the owner’s name and address in the<br />
right column. Apply the new class to the paragraph using the property inspector.<br />
• Save the file. You now have the base template for the rest of the site.<br />
Step 7: Create and Test the Other Pages<br />
Back to Top<br />
• Collapse the CSS panel and expand the files panel.<br />
• Save the index.html file as about.html. Dreamweaver will open this as a new file and focus on the new page.<br />
• Select the image in the header, and use the property inspector to set the link to index.html.<br />
• Save the file, then save the file as staff.html, contact.html, and rates.html.<br />
• Each of the files is now open in the editor. Place a line in each file below the Heading Level 1 in the center<br />
column that will identify the page.<br />
• Save All.<br />
• Test the file in the browser. Set the focus on the index page, and select the globe in the middle of the design<br />
toolbar. Select a browser. When the page loads, click through the links in the navigation menu. When you reach the<br />
rates page, click on the logo to return to the index.html page.<br />
Step 8: Populate the Pages<br />
Back to Top<br />
• The data document is arranged by page. Change the Heading 1 for each page to an appropriate title for that<br />
content, and use the content supplied for that page.<br />
• Here is the formatting suggestion for each page.<br />
o<br />
o<br />
o<br />
Index—Use a paragraph.<br />
About—Use paragraphs, with a bullet list for activities.<br />
Staff—Use a bullet list, indented for each group.<br />
o Contact—These are labels and values separated by colons, line breaks for phone, e-mail, and address. Place<br />
the promotion statement in a paragraph at the bottom and style appropriately.<br />
o<br />
Rates—This is a three-column table. Age, hours, and rates are the column headers.<br />
Step 9: Prep for Turn-In.<br />
Back to Top<br />
• Save all files. Locate the w2Lab folder in Windows Explorer and select it.<br />
• Right-click and select Send To and choose compressed file.<br />
• Rename the file Lastname_w2Lab.zip, where Lastname is your last name.<br />
• Place this in the Dropbox for grading.