CIS 363 DeVry Week 2 iLab 2

More documents

Recommendations

Info

Correct external CSS file that attaches to each page 10 Total 40 Required Software MS Visio/MS Word/PowerPoint Access the software at https://lab.devry.edu/vpn/index.html Steps: All of Part A Dreamweaver Access the software at https://devrydesktop.rkon.com. Steps: 2, 3, 4, 5, 6, 7, 8 and 9 iLAB STEPS Step 1: Storyboard the Site Back to Top • Review the MS Word document downloaded from the scenario and summary above. • Determine what pages will be necessary for the site based on the provided document. • Create a storyboard to show those pages as they relate to each other. Step 2: Select and Save a Template Back to Top • Open Dreamweaver and reestablish your local site, if necessary. Do not attempt exercises without declaring a site. • Create a new folder named w2Lab in the site root. • From the menu, select File → New. • In the selection window, choose blank page, page type: HTML, and Layout: 3 column fixed, header and footer. Choose doc type: HTML5 and layout CSS: create new file. Once you have made these selections, click Create. • Save the CSS file in the w2Lab folder. Accept the default filename. • Save the file as index.html in the w2Lab folder. Step 3: Prepare the Resources Back to Top • Download this graphic and save it in your w2Lab folder. • Place the image in the logo placeholder on the template page. o o o Select the image placeholder in design view on the page. In the property inspector, drag the compass icon to the image in the w2Lab folder from the Src value box. In the Alt value box, type Rainbow Daycare Logo. • Save the file. Step 4: Create Links Back to Top • On the left side of the template file, there are four links representing a simple navigation menu. o Link one—change to About Us
o o o Link two—change to Our Staff Link three—change to Contact Us Link four—change to Our Rates • Select each link (the text) individually, and type in the file name that it will link to in the Link value box in the property inspector. o o o o About Us → about.html Our Staff → staff.html Contact Us → contact.html Our Rates → rates.html • Save the file. Step 5: Add Static Information Back to Top • Below the navigation menu are paragraphs describing the nature of the links. Delete all of the text in this column. • Type Phone and press Enter. • Copy and paste the phone numbers from the document to the column. Between the two phone numbers, place a line break by setting your insertion point between the numbers and pressing Shift + Enter. • Highlight the word phone and format it as Heading 4. • In the far column, delete all the text in the column. Type in owner, and format it as Heading 4. • Press enter and place the owner’s name and address below the heading. Place line breaks between each line in the address. We will add a style that will make the address fit better in a later step. • Delete all of the text except the main heading in the center column. • Save the file. Step 6: Adjust the Styles Back to Top • Place your cursor next to the image in the header section, and click div.header in the information bar at the bottom of the editor window. • Collapse the files panel (double-click the tab) and expand the CSS panel. Select the current button from All/Current at the top, and locate the small window in this pane labeled Properties for “.header.” • Click the add property link at the bottom of the list, and select background-color from the drop list. • Click on the small color square in the value section to get the eyedropper. Select the innermost color band on the rainbow image. • Click on the background property that was already there, then click the trash can in the lower right corner of the CSS Property pane. • Replace the text in the footer section of the page with the following line: Copyright 2012 Rainbow Daycare LLC – All International Rights Reserved. • Set your cursor just before 2012 in the line and select Insert → HTML → Special Characters → Copyright. This will place the symbol in the page. Space appropriately. Save the file. • Click on the thrColFixHdr.css tab at the top of the editor window. This will open the style sheet. • Locate the class .header in the styles. Copy the property and value from the .header class.
Page 1: CIS 363 DeVry Week 2 iLab 2 Downloa

CIS 363 DeVry Week 2 iLab 2

Create successful ePaper yourself

Delete template?

Save as template?