Modify cmp.htm, contactme.htm and create scheduleme.htm

GRC 175 Assignment 2 Modify cmp.htm, contactme.htm and create scheduleme.htm Tasks: 1. Setting up Dreamweaver and defining a site 2. Convert existing HTML pages into proper XHTML encoding 3. Add alt tags to all images for accessibility 4. Create a new XHTML page called schedulee.htm 5. Add a visual schedule by creating a table and using colspan and rowspan 6. Add an anchor hyperlink and anchor tag 7. Add an external CSS style sheet to all three webpages 8. Check all your web pages for validation 9. Upload all pages using Dreamweaver s built in FTP 10. Email Instructor a link to your schedulee.htm page 1

Assignment overview: You will be begin using Dreamweaver in this assignment. DW is the premiere webpage authoring program used for web design, web development, and website management. This assignment builds off of the cmp.htm and contact_me.htm, created in A1; you will also complete a new file schedulee.htm add an external CSS style sheet to all pages, validate, and then upload website to your web host account using Dreamweaver. Dreamweaver Primer: Before you are able to use Dreamweaver you will need to configure the program in order to properly save your web pages and manage your website (.html and related files). You also need to configure Dreamweaver in order to be able to publish to your web hosting account using Dreamweaver s built-in FTP program. You will set up a New Site within Dreamweaver; a new site represents a web site you will be creating and managing and ultimately uploading to a remote web host. When setting up your site, define where the website files are saved locally. You must always save all your GRC 175 web site related materials into the same local website folder. In DW, you will define where this folder is located and this is where all of your files for your coursework will be saved throughout the entire semester. You will use DW to upload our files to your remote website throughout the semester. 2

Step 1 Setting up Dreamweaver and defining a site Open Dreamweaver Within Dreamweaver, click on Site > New Site then click on the Advanced tab Provide under Local Info your own unique data input Site name: grc175- () Local root folder: (click on folder icon and navigate to where your site will be located.) It may where you saved the html documents for A1. Identify locally where you will be saving your files, you should probably save to your jump drive, but you can also save inside the documents folder. Wherever you are saving make sure you have created a folder for this class and that you save all of our website related course work during the whole semester into this folder. Keep the site folder organized by adding folders for future assignments inside of this main folder) Next, click on Remote Info (located top left panel under category) 3

Select FTP under the Access: (menu) shown above (you will connect to your remote web host account using DW s built-in FTP program) Type the remote info for your web host account 4

Fill out the Remote Info (FTP) with the following data (this is the same info that you sent for A1) FTP host: (type the ftp/hostname for your web host account) May look similar to ftp.sitesled.com or username.freehostia.com or whatever you web host provided you during registration, check your email confirmation, look for ftp account info, cannot begin with ftp:// Host directory: (leave blank) Login: (type your login) Password: (type your unique password) Click on the Test button If your account info has been entered correctly you should receive a confirmation that you have successfully connected. If you were unsuccessful then you will have to solve your problem, test again, and connect successfully before continuing. If you are successful, then continue below; if you check the Save password option then you won't need to fill in each time. Click OK to close the Site Definition window. If the manage sites window is not currently showing click on Site> Manage Sites Click on your new site name and then click on Done Next, make sure the Files window is showing (Window>Files) and is expanded and shows your folder contents (expand by clicking on Triangle next to the word Files at the very top of Files window) Click on Connect icon (looks like two plugs, connects to remote host) Once you are connected you can use the Files window to manage your site, rename files, create folders, move files into folders and upload files (put) to your remote web host account, all within the Files window 5

Please note: you must click on Site> Manage Sites and pick your site name every time you open Dreamweaver!!! This is how Dreamweaver knows which site it will be managing and where to upload your files to. Every NEW computer that you attempt to use Dreamweaver for managing your website(s) you will need to have your site info set up again using Site> New Site or import the site info created in the step shown below, Site> Manage Sites> Import (pick the.ste site file) Optional: Once you have set up your site onto a computer using DW you can then export the site info: Site> Manage Sites> Export (pick the back up my settings option) DW will create an.ste file that can be imported via the manage sites window on any new computer with Dreamweaver Step 2 Convert existing HTML pages into proper XHTML encoding Within DW, your open cmp.htm and contact_me.htm pages. Convert your cmp.htm and contact_me.htm pages to XHTML; you will need to convert both pages individually. File Convert>XHTML 1.0 Transitional Switch to the other page and repeat this step XHTML 1.0 Transitional explained: XHTML 1.0 Transitional is a version of HTML. It happens to be the most commonly used version for new websites. There are newer versions of HTML like XHTML 1.1 and older versions of HTML like 4.01. but they are not as widely used for newer websites. For this class, you will create all of your pages using XHTML 1.0 Transitional. Each version of HTML has different tags and rules that are supported and must be followed. You are selecting the XHTML version so DW knows how to best encode your pages for proper displaying on the most popular web browsers. 6

Make sure you have successfully converted both pages. If you look at the code view you would see that DW has added a DTD tag that defines the version of XHTML you are using. Make sure you have successfully converted both pages. If you look at the code view, you would see that DW has added a DTD tag that defines the version of XHTML we are using. DTD or DocType stands for Document Type Definition. Example: DTD as seen in code view: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> Step 3 Add alt tags to all images for accessibility Add image alt tag to all of your images. alt tags should describe what that image represents or what the image is showing a picture of. Some viewers and devices that are not able to display your images use the alt tag to communicate to the viewer what is displayed by the image. Select image and add a description under Alt in Properties <img src="http://www.cnn.com/image.jpg" alt="people waiting for food" > (Alt tags are required with some versions of XHTML, they are important for people with accessibility issues and those with disabilities that use screen readers.) Step 4 Create a new XHTML page called scheduleme.htm Next, you will be creating a new page, scheduleme.htm (name your pages lower case and without any spacing) On scheduleme.htm, add your weekly schedule at the very bottom of the webpage Remember we want to encode this page the same as the other pages, XHTML 1.0 Transitional 7

Create a new page, File > New Select Blank page, HTML, None (layout), XHTML 1.0 Transitional (DocType) A blank page should open Add three paragraphs to the top of your schedule page Write three reviews of your three favorite websites Each review goes within a paragraph and each review must have a title, date, author and hyperlink Every time you press the return key in Dreamweaver this creates a new paragraph In order to create a hyperlink, select the desired text and then type the absolute URL within the Link field on the Properties window/panel. Add enough content to each of the paragraphs. Each paragraph must have different content. Do not use my example below. Remember, each review is within a paragraph and must have a title, date, author and link. Add examples of Bold and Italicized text inside each review paragraph. Here is an example of a paragraph as seen in Code view (your paragraph will look different): <p><strong>the LARGEST WEB DEVELOPER'S SITE ON THE NET</strong> <a href="http://www.w3schools.com">w3schools</a><br /> <em>by Ed Kanet 1-16-2007</em><br /> Full Web Building Tutorials - All Free. At W3Schools you will find all the Webbuilding tutorials you need, from basic HTML and XHTML to advanced XML, SQL, Database, Multimedia and WAP. </p> Try using the line break tag <br /> or shift+return inside of your paragraph (inserts a line break, no extra line spacing, soft return, hit Shift+Return) Separate each paragraph with a <hr /> tag (horizontal rule, horizontal line), put an <hr /> tag in between each paragraph. Insert>HTML>Horizontal Rule Check to make sure you separated each of the three paragraphs with an <hr /> tag (horizontal rule, looks like a horizontal line) Make sure you have added enough content to each of the paragraphs. Each paragraph must have a different review. Each paragraph should have several sentences and each must have a title, date, author and link. 8

Step 5 Add a visual schedule by creating a table and using colspan and rowspan Next, you will create a visual schedule using a table The schedule will be a matrix or column and row style view which lists out the days of the week and the times you are taking classes. Similar to something that you might create in Excel, but we be creating ours in HTML using tables. Our schedule will also provide examples of colspan (column span) and rowspan (row span) Below your three paragraph reviews, create a new paragraph that describes your work schedule or school schedule. Make sure to have at least two sentences in this paragraph. First create a table with a minimum 6 columns for Monday Friday and one blank column to represent the hour and approximately 14 rows for a title, days of the week, and the time slots like 8 am, 9am, 10am etc. In DW, select Insert>Table Next we are going to add colspan and rowspan to certain cells only. Colspan tells a cell to span a number of cells. Rowspan tells a cell to span a number of rows. Here is an example of colspan and rowspan; your table will look different since you will need more columns and more rows. This shows you what the code looks like. You will create spans using DW, this is the code behind the scenes. Example only: <table border="1"> <tr> <td colspan="3">aaaa</td> </tr> <tr> <td>bbbb</td> <td rowspan="3">ccccc</td> <td>dddd</td> </tr> <tr> <td>eeee</td> <td>ffff</td> </tr> <tr> <td>gggg</td> <td>hhhh</td> 9

</tr> </table> This is what the table would look like in DW, notice how two cells span cells or rows The easiest way to to add colspan and rowspan in DW is to first select the range (click and drag cursor across range) of cells or rows we want a cell to span Next click on the merge icon located in the property inspector, black rectangle below Cell, located in the lower left corner of Properties palette Add an example of colspan (column span): add to first row so there is only one cell in that entire first row 10

Add the times of the day in the first column going down, start in the second row like 8 am, 9, 10, 11, etc. Add text to the second row, so columns are labeled the days of the week Monday, Tuesday, Wednesday, etc. start in the second column of the second row Add examples of rowspan (row span): add to each class so that class ranges several hours. First row should have a title for your table which shows an example of colspan (first cell must span all of the columns, add a title or text inside of this cell, like First Name Last Name Summer 2009 Schedule) Weekly schedule should show the classes you are taking and the range in hours your class spans, for example if you take GRC 175 on Tuesday from 12-4pm then this is the visualization you are trying to create using rowspan Schedule should have different colors for each class (color the background of each cell time slot) Make schedule evenly spaced so cells appear universal in size; each day column must also be the same width, you may need to add a width to each column Try adding a border to your table Here s an example of what my table looks like so far: 11

Step 6 Add an anchor hyperlink and anchor tag Next, at the top of our schedule page you will create an anchor link which will take you down to the bottom of the page to your schedule Note: An anchor link is actually a hyperlink that will take you to an anchor somewhere within a webpage. The anchor link located at the top of the page will take the visitor to the bottom of the page to the named anchor. First, you will type the word "Schedule" and make it a link to an anchor you will create at the bottom of the page. Add the href tag to the top of your schedule page, Insert > Hyperlink and then type text: Schedule and for the link, #schedule. The # tells the browser to look for an anchor on the page with the name schedule. The code view is shown below: <a href="#schedule">schedule</a> Next, add an anchor id tag to the bottom of your schedule page, just above the schedule table Place cursor just above the schedule table, Insert > Named Anchor and for anchor name type "schedule", do not type the # in front of schedule. Name must match our hyperlink. The code view is shown below: <a id="schedule">schedule</a> Names between the anchor hyperlink and the anchor id tag must match. The pound sign within the anchor hyperlink # tells a browser that this link is a anchor link and in this case will link within the page. Notice the names used must match exactly, "schedule" and "schedule" in the example are both spelled the same Save and Preview in Browser by pressing f12 12

Test link to see if page scrolls down to our schedule table Step 7 Add an external CSS style sheet to all three webpage s Next, you will be adding an external style sheet to all of your pages. You will use Dreamweaver to do this Note: The presentational attributes of HTML (html tags were previously used for colors and certain styling) have been deprecated (this means no longer supported) and replaced with CSS. CSS stands for Cascading Style Sheets. CSS is now the preferred way to specify an HTML document's presentation or style. There are three types of Cascading Style Sheets, internal and external and inline. For this example, you will be creating an external CSS to use for all three pages. In DW, CSS is defined in the CSS Styles window, open via Window> CSS Styles In order to add a CSS Style Sheet to our current page click on the New CSS Rule button, icon with a + (plus sign) Type or select the following: Selector Type: Tag Tag: body Define in: New Style Sheet File 13

Next, when prompted make sure to save your style sheet within your website folder, should save at the root level where all your pages are being saved, give it some name like 175site.css Click on Background and select a Background color and then click OK. The following is an example of the code view of your page that shows the link to the external style sheet, link appears in the head. This is the code DW automatically writes, which links your page to an external CSS file. External CSS is the preferred method in web design since one style sheet can update your entire site, external will be the required method for most of this course. <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>to Do GRC 175 Fall 2006 Adam Valentiner</title> <link href="175site.css" rel="style sheet" type="text/css" /> </head> The following is an example of the syntax for a style inside your style sheet. This example defines a rule for our <body> tag. Anything located within the body will inherit this style, in this case a webpage background of silver. 14

body { backgroun } d-color: silver; You can edit the external stylesheet file either inside DW or with a text editor, just like you did with you web pages in A1. Next, within our external style sheet try adding a repeating background image. You must first find a graphic image to use as a background and copy it into your class folder or directory Optional: try creating a transparent graphic in Photoshop, make sure to save as.gif or.png with the transparency option, and place it in an "images" folder. In order to add the bg image to your stylesheet, you will need to open the css styles editor again On the CSS panel, make sure you are on the CSS Styles tab and then click on All Select body style that is listed and click on Add Property or double click on body and CSS Rule Definition window will open for the body rule or style Click on Background under category and the select a background image and click Ok. The following is an example of the code view for our body rule in our 175site.css file. In this example the bg image is in an images folder and inside this folder there is a file named background.gif body { background-color: silver; background-image: url(images/background.gif); } Next add font, size and color to our body rule. You can edit the body rule by double-clicking on body listed under all rules, listed on the CSS Styles panel, make sure you are on the All selection. Optional: You can edit your style sheet in code view by clicking on the style sheet name listed on the CSS Styles panel, make sure you are on the All selection and then double-click on the name of your 15

style sheet file like 175site.css or whatever you named it. The following is an example of the code view for our body rule in our 175site.css file. Notice the additional properties for font, size and color added to our body rule. body { background-color: silver; background-image: url(images/background.gif); font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; } Next, you will need to add the external CSS file to your other web pages. Open cmp.htm and then click on the attach style sheet button, it looks like a chain link, the attach style sheet button is located on the CSS Styles panel. Repeat this step for contact_me.htm RENAME YOUR CMP.HTM FILE TO INDEX.HTM. It will replace your previous index page (to make the url to your PMP shorter). In addition, back in Assignment 1, you added a background image to the contact page using HTML. Remove this background property tag, since you are now using your style sheet to add a background to the page Remove only the highlighted code on the contact page: <body background="http://www.nutrocker.co.uk/images/tiles/gold_noise.jpg"> Click on code view in order to edit the body tag. This is for the contact_me.htm page and any other page you added a background to Your body tag on the contact page should now look like this: <body> Save and view f12 each of the pages to make sure all use the same CSS file and all show the same background image. Step 8 Check all your web pages for validation Next, validate your pages to see if there are any problems with your code. 16

First, make sure all three pages are open in DW Before you validate you will have DW clean up your code Commands>Clean up HTML and click Ok. Repeat this step for each of the pages. Next use DW to check all your pages to see that they properly validate File>Check Page>Validate Markup Make sure to fix any errors You can find the error, shown in the code view, by clicking on the error displayed Repeat this step for each of the pages. You will need to fix all the critical errors before continuing to the upload step. Step 9 Upload all pages using Dreamweaver s built in FTP Make sure you have added links on your index page (formerly the cmp.htm or course management page should have renamed it in previous step) for both A1, A2 A1 links to contact_me.htm; A2 should link to the scheduleme.htm page Save all your pages, File> Save All Upload all pages and necessary files (images, CSS file) to your web host using the put files command (up arrow) in the files window. If closed open via Window> Files Make sure each page was converted to XHTML 1.0 Transitional and you have validated and fixed any crucial errors. Make sure to send an email to the Instructor stating that you have uploaded your work and that it is ready to be graded. Make sure you have put the minimum requirements first and then go back and get fancy if you wish. You can also experiment with adding additional styles to your CSS file, ask me how. 17

Grading Criteria three webpage s encoded using Xhtml 1.0 Transitional, validated and saved as index.htm, contact_me.htm, schedule_me.htm Added <alt> tags to all images All three pages linked to the external CSS Added a body rule including having a background image Removed original bg image within <body> for contact_me.htm Validated all pages Published pages to your web host account emailed instructor For schedule_me.htm Provided unique title for schedule_me.htm Added three paragraphs to the schedule_me page, each paragraph reviews a different website Review paragraphs include an author, date, hyperlink review and examples of Bold and Italicized text inside each paragraph. Examples of <hr /> horizontal rule between the three paragraphs. Add a schedule table with examples of colspan and rowspan with colors in cells, a bg color, and text in the spanned cells Added an anchor link which links to an anchor tag above the schedule 18