Website Development (WEB) Lab Exercises

Size: px

Start display at page:

Download "Website Development (WEB) Lab Exercises"

Elizabeth Fisher
5 years ago
Views:

1 Website Development (WEB) Lab Exercises Select exercises from the lists below to complete your training in Website Development and earn 125 points. You do not need to do all the exercises listed, except for those marked with an asterisk. Focus on the ones that help you advance your skills or fill in gaps. Files for each week s exercises are located at the class wiki Lab Resources page. Find the file(s) you need before you start each exercise and make a COPY in your lab T drive personal folder. Submission: Save screenshots or final exercise images as indicated in a single MS Word document for submission. Use your CSU server space to post completed pages when indicated. Label each exercise you complete in the document with its exercise number (e.g., 2.1) and save with your last name, e.g., smith_webexercises.doc. Make sure you keep regular backups of this document on your flash drive and on the lab T Drive in the labs. Week 1. Basics 1.1. *Edit an HTML document *Simple inline CSS Formatting * Upload a page 4 TOTAL (week1) / 18 Week 2. Dreamweaver(DW)/HTML Beginner (Complete 5 exercises) 2.1. *HTML Link clean up & titles HTML Page structure HTML Lists HTML Image cleanup & titles *Understanding Dreamweaver *Define your site and folders DW background properties Create a CSS class 4 TOTAL (week2) / 22 Week 3. DW/HTML Intermediate (Complete 5 exercises) 3.1. *HTML Links DW Images DW Links DW Anchors DW Link Formatting DW Tables DW Table styles *DW create and format divs 7 TOTAL (week3) / 35 Week 4. DW/HTML Advanced (Complete 3 exercises) 4.1. *DW Create/link an Ext. CSS Positioning Divs/Box Model CSS Navigation Bar Embed a YouTube video Embed a FB or Twitter Feed Embed a Google map 10 TOTAL Advanced / 30 Week 5. DW/HTML Expert (Complete 1 exercise) 5.1. Redesign a site Usability & Accessibility Online artwork 20 TOTAL Expert / 20 Total Exercises TOTAL NEEDED 125 TOTAL EARNED 21

2 Week 4. Advanced DW & HTML Complete three exercise 4.1 *Create/Link External CSS Text editor or DW Files: divpractice.html and stylesheet.css GOAL: Link an EXTERNAL CSS document. In DW or in an HTML editor open divpractice.html. In your HTML document inside the <head> tag write the following code to link your CSS: <link href="stylesheet.css" rel="stylesheet" type="text/css" /> If you wanted to create a new CSS file in DW, you can just choose the CSS option in the File>New menu. CSS files are just text files that contain the Style information that otherwise would be included in each tag. This is useful if you want to make global changes to several pages that use that CSS document. The HTML and CSS files MUST be kept in the same root directory to work. You know it's working if you see three div boxes with different colors. Note how each one of the <div> tags into the HTML calls a specific ID with the id="idname" property. SUBMIT: Paste a screenshot of the browser preview into your Lab Exercises document. 4.2 Positioning Divs Text editor or DW Files: files from exercise 4.1 GOAL: To position three div boxes next to each other. Open divpractice.html in DW, it should already have the CSS attached to from the previous exercise. Choose the Stylesheet option on the upper-right side to see the code for the CSS (alternately, open stylesheet.css file in DW). For each <div> box ID selector (#greenbox, #bluebox, #redbox) add a new float property with a value of left or right. Then add a padding property with a value of 10px). The property float:left or float:right will make the <div> box lose it's "block" characteristic - occupying the entire block from left to right of the browser- and will allow elements to display next to each other. Change the padding and the margin values and see what happens. What changes when you add a margin to the boxes? and padding? Often it's necessary to have another <div> tag surrounding the layout divs to contain them into a specific width and height. SUBMIT: Paste a screenshot of the browser preview into your Lab Exercises document. 22

3 4.3 CSS Navigation Text editor or DW GOAL: Create a navigation bar using only HTML and CSS. Files: your own, one HTML and one CSS In a new HTML document with a linked CSS (follow directions on 4.1) create a Navigation Bar with five links (they can be to any page). The navigation bar should have a hover state that changes background color of the whole "button". Your HTML will look something like this: <ul> <li><a href="index.html">home</a></li> <li><a href="aboutme.html">news</a></li> <li><a href="contact.html">contact</a></li> <li><a href="portfolio.html">about</a></li> </ul> Your CSS in the linked style sheet will contain the styles to make the list items look like buttons. This can usually be achieved by changing the <ul> and <a> tags in the CSS for vertical menus as well as the <li> tag for horizontal menus. Go to and follow the tutorial for either vertical or horizontal navigation bars. There are many tutorials and samples online that you can use to complete this exercise (you can google CSS navigation bar). Most navigation bars, horizontal and vertical, use the <ul> (unordered list) HTML tag to generate the link items. SUBMIT: Paste a screenshot of the browser preview into your Lab Exercises document making sure that you are rolling over one of the "buttons" so the hover state is visible. 4.4 Embed a YouTube video Text editor or DW Files: your own GOAL: Embed a YouTube video into your web page Select a video from YouTube, and click the <Share> and then <Embed> button below the video to see the Embed options. First, select the size you want. Deselect Show suggested videos when the video finishes and select Enable privacy-enhanced mode. Then copy and paste the HTML code into your page in Code View where you want it on the page. Make sure that you paste using Code View if using Dreamweaver YouTube embeds as one of the pre-set sizes, or your custom size. You can put the video into a Div to place it on the page where you want it to be SUBMIT: Paste a screenshot of the browser preview into your Lab Exercises document. 22

4 4.5 Embed Facebook or Twitter Feed widgets Text editor or DW Files: your own GOAL: Adding a Facebook "Like" Box OR Twitter feed on your website Go to or to: Follow the directions and embed (copy>paste) tone of the two social media feeds into an html document. In both instances you must have an account so you can plug in the information into the widget code. NOTE: The Facebook widget ONLY WORKS when you upload your HTML file to a web server (your CSU FTP account) and then preview it in a browser!! Just copy and paste the code provided into the location on your page you want the room. Use Code View, not Design view, when you paste. Make sure you follow the directions very carefully so the widgets work! SUBMIT: Paste a screenshot of the browser preview into your Lab Exercises document. 4.6 Embed a Google map Text editor or DW GOAL: Create a Google map and embed it onto your webpage in a Div. Files: your own Create a Dreamweaver page about a travel destination you would like to visit. Embed an active Google map on the page. Go to Click the link icon ( ) and then select the Customize and preview embedded map link at the bottom. Use the sample HTML code to create a map that fits your page. Paste in Code View. Zoom the map in the Google Customization window. The HTML code will update. SUBMIT: Paste a screenshot of the browser preview into your Lab Exercises document. 23

5 Week 5. Expert DW & HTML Complete one exercise 5.1 Redesign a site Text editor or DW GOAL: Find a poorly designed website from a local business and redesign its layout and formatting for at least 3 pages Choose an existing local business's website you think is an example of poor design. Redesign the layout and formatting of the homepage and two other pages of the site. Look at elements like Navigation Menus, Page Layout, Colors, Fonts, Media used, and Interactivity in your redesign. Try to find a site of a local store where you are a customer. Think about the audience or kind of target customer for your store. When you finish your site bring it into the store and tell them about the class and project. See if they would like to update to your site! SUBMIT: Paste your two screenshots into your Lab Exercises document. Label with the exercise number. 5.2 Usability & Accessibility Text editor or DW GOAL: Create a 3 page website outlining the do s and don ts of good website design In Dreamweaver create a website focusing on good Usability and Accessibility principles in web design. Design your homepage to offer a quick introduction to both terms. Use your other two pages to cover each term with further depth. Use resources from class lecture and readings, external links to useful sites, external links to examples of good and poor design, and your own research to fill the content of your site. Design your site so someone who knows nothing about website design will be able to understand the terms and realize their importance. Post your site to your server space. You must use HTML in DW to complete this exercise. Spend some time collecting specific design tips from quality sources. Make sure to provide a citation if you use materials or ideas from a website or other reference. Provide a link for the user if you can (but make it open in a blank page so yours stays up in the background). Make sure you follow your researched principles on this site in particular. SUBMIT: Paste the URL for your posted site into your Lab Exercises document. Label with the exercise number. 24

6 5.3 Online artwork Text editor or DW GOAL: Create a 3+ page website to display your own artwork in a style that expresses personality and stands out from the crowd Use Dreamweaver or an HTML editor to create a 3+ page Art Portfolio page for your own photography or artwork. Design the page to be expressive and stand out. Be sure the format is one fitting the art content and style. You must use Dreamweaver or an HTML editor to complete this exercise. Think carefully about the style of the art or target audience to develop your page design, layout, colors, etc. Take advantage or multimedia to display the art. Try to think beyond the actual art medium. Have fun with this site! If you do design for someone else's artwork show them your site when you finish. SUBMIT: Post your site to your server space. Paste the URL for your site into your Lab Exercises document. Label with the exercise number. 25

Dreamweaver Basics Outline

Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working