Question;iLab 3 of 6: Create a Web Page Using CSS in Dreamweaver;Note!;Submit your assignment to the Dropbox located on the silver tab at the top of this page.;(See the Syllabus section "Due Dates for Assignments & Exams" for due dates.);iLAB OVERVIEW;Scenario and Summary;This iLab supports the following TCOs.;TCO 3?Given an original source document, convert the document to a web page using HTML and CSS.;TCO 4?Given an older website that requires updating, review the;techniques used to create the current site, develop a plan to revise the;site using CSS layout techniques, client-side scripts, and other;current website design techniques, and convert the web pages based on;the plan.;Scenario;Create an index.html file and create an external CSS file based on the specifications given in the assignment.;You will need to create an internal and external CSS.You will also need to attach an external CSS file to the original page.;Deliverables;index.html with attached external CSS sheetstyle.css file;Part;Deliverable;Points;A;Create HTML and CSS files (style.css);3;B;Internal (embedded) CSS;22;C;Tag Selector CSS;22;D;Class CSS (index.html with attached external CSS sheet);23;Total;70;Required Software;Dreamweaver;Access the software at https://devrydesktop.rkon.com.;Steps: All;iLAB STEPS;Lab Preparation;Download the lab3Content.docx document found in Doc Sharing.;Part A: Create HTML and CSS Files (3 Points);Step 1: Create a New HTML File (1 point);Back to Top;Open Dreamweaver and create a new HTML page.Enter index.html as the web page name.;Step 2: Copy Content From the Word Document (1 point);Back to Top;Open the lab3Content document found in Doc Sharing.Paste the content into the index.html page.;Step 3: Create a CSS File (1 point);Back to Top;Create a new CSS page.Save the file and name it styles.css.;Note: If your styles.css file does not show when;needed in the remaining steps, then click on the attach stylesheet;icon, select browse, locate the styles.css file, and then click OK.;(The styles.css will automatically be linked to the index.html file in;the head section of the code.);Part B: Internal CSS (22 Points);Step 1: Create an Internal CSS (10 points);Back to Top;Go to the index.html file and create an internal CSS for the;following properties. Use the Page Properties option in the;Properties Panel.;Background color for the body;A light tan: #FC6;Font color for all text in the body;A dark blue: #039;Font for all text in the body;Comic Sans MS;Font size for all the text in the body;Body: 14 points;Link color for all links;Dark red: #CC0000;Visited link color for all links;Dark red: #CC0000;Rollover link color for all links;Dark green: #060;Active link color for all links;Dark red: #CC0000;No link should be underlined for all links;Never underline;Step 2: Apply Internal CSS (12 points);Back to Top;Your index.html page should reflect the styles from above.Go back to Page Properties if the page did not update with your internal CSS.;Part C: Tag CSS (22 Points);Step 1: Create Tag CSS (10 Points);Back to Top;For all of the following tags, create the CSS rule from the descriptions below.Hint: To create a CSS, you need to click on the New CSS Rule;in the CSS panel on the right-hand side. Watch Adobe TV on best;practices for creating a style sheet. You will need to enter Style;Sheets or CSS in the Adobe TV searchbox (http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e32a.html).;H2;Text color: #333, bold;H3;Background color: #39f;Border on the bottom with the following rules;Width: thinStyle: solidColor: #003;Centered text;Margin on all sides: 35 pixels;p;Font: Georgia;Text color: #030;Padding of 15 pixels on all sides;li;Font family: Arial;Background color: gray;Text color:black, bold;Text size: 18 points;Step 2: Apply Tag CSS (12 points);Back to Top;Apply the new tag CSS to the content on the page.;Part D: Class CSS (23 Points);Step 1: Create a Class CSS (10 points);Back to Top;Create a new CSS rule using a class CSS. You will need to;select the option to include the class CSS to the styles.css file.;Navtable: This class will be applied to a navigation table.;Font family: Times Roman;Background color: #0ff;Text color: bold, center;example1:This class will be applied to Example 1.;Background color: #699;Text color: #033, bold;Text size: 10 points;Margin on all sides: 25 pixels;Padding on all sides: 25 pixels;example2:This class will be applied to Example 2.;Background color: #66c;Border on all sides with the following rules;Width: 10pxStyle: solidColor: #06c;Text size: 10 pixels;Text color: #ccc;header:This class will be applied to the heading "IEBGENER STUDY GUIDE.;Font family: Arial;Background color: #6ff;Text color: 030;Text size: 36 points;Margin on all sides: 50 pixels;Padding on all sides: 50 pixels;Step 2: Apply the Class CSS (12 points);Back to Top;Apply the class CSS as done in the class CSS steps above.;Step 3: Upload Zipped File (1 point);Back to Top;Your index.html page should have all inline, tags, and class CSS applied.Create a folder called CIS363A_YourLastName_Lab3.Put copies of each required deliverable into the new folder.Right-click on the folder and select Send To -> Compressed (zipped) Folder. You can also use other tools to compress the files into a single zip folder (e.g., 7-zip).Upload the zip file to the weekly iLab Dropbox in eCollege.
Paper#36527 | Written in 18-Jul-2015Price : $37