Introduction. Steps in Creating Web Pages

Transcription

1 1 of 7 Introduction A basic web page is a plain text file that has been marked up with tags around a word or phrase to describe how it should be displayed by the web browser. To see the HTML codes of any page open in your browser go to the View menu: Firefox, SeaMonkey: - View>Page Source Internet Explorer View>Source In the case of Blackboard make sure you are in the build tab and click on the HTML file s Action button and click the Edit Properties menu option. A web page editor makes it easy to edit or create web pages; the HTML code is being created for you but you do not have to see it or worry about it. (Note: although a Word document can be converted to HTML, the results are often difficult to edit and will not always work well on certain web servers or browsers. In fact, Blackboard has trouble supporting Word HTML pages.) However, Blackboard provides a web page editor that, while it does not support all the features of full webpage design it will allow you to create and edit basic web pages. Steps in Creating Web Pages The first part of this help document will cover the basic steps to creating a web page. This will just cover things generally and gets into more specifics, such as how to use the various tools the Blackboard editor gives you, later on in the help document. The steps to create a web page are as follows: 1. Planning: Create a rough outline of what you would like to include in your website. Gather any text files and images that you want to include. Decide what links you want to include. If you are creating more than one page, design the flow of your website. 2. Start an HTML Page a. Start by signing into the course you want to create a webpage for. b. Make sure you are in the Build Tab. c. From the build tab, navigate down to the Designer Tools area and click on File Manager. d. Once in File Manager click the Learning Materials Storage link and then the appropriate week that you want the webpage to be displaying in. e. Once inside the appropriate week click the Create File button to begin the webpage creation process. 3. Naming and Enabling HTML Creator a. When you click the Create File button you are presented with an area where you write your page and give it a name.

2 2 of 7 b. Enter a name for your page in the text box provided. Make sure it is descriptive so you know what the page is about. c. Click the Enable HTML Creator button to begin the webpage creation writing. By clicking this button you will be able to write text and apply formatting without knowing the different HTML tags and codes to do so. 4. Using the HTML Creator design your page by adding in text, applying formatting and even adding links and pictures. 5. When you are finished make sure to click the Save button otherwise your work will be lost. When saved you will see the HTML page you created. To preview it, click the file s Action button and then click Preview. To make changes to the webpage you created, click the Edit option under the Preview option. 6. Make sure you create a link to the HTML page you created in the Learning Materials so students can access it and see it. Using the HTML Creator The last part of the video will discuss in-depth the various tools on the HTML creator and how to use them to do certain things for a webpage. Formatting Text (A) Formatting text using the Blackboard HTML creator works exactly like it would in Word. As with Word, text is formatted by selecting (highlighting with the mouse or keyboard) then clicking on the tool you would like, such as size, colour style, alignment.

3 3 of 7 Tool What it Looks Like What it Does Font Style This tool allows you to change the font type in your web page. Font Size Tool Emphasis Tools Alignment Tool Script Tools Font Colour Tool This tool allows you to change the font size. These three tools let you add emphasis to parts of your webpage by bolding, italicizing and underlining text. This tool lets you choose how certain paragraphs are aligned in your document. These tools let you had a tine number/letter above or below a word. Simply put, this tool lets you change the colour of selected areas of text. Paragraph Style (B) Tool What it Looks Like What it Does The Headings Tool This tool works like styles in Word. They range from the largest, Heading 1 to the smallest, Heading 6. They let the browser decide on how to display them. They serve to indicate the organization of the content. The List Tools These two tools let you create a numbered or bulleted list within your webpage. The Indent Tools These two tools, as their name suggests, lets you increase or decrease the indent on paragraphs. Horizontal Line Tool This tool allows you to separate paragraphs or even sections of your webpage by inserting a horizontal line

4 4 of 7 across the page. Images (C) An image is any graphic file (a photograph, a fancy bullet or colour line, a chart that you have produced in a spreadsheet program, etc.). Images must be saved in.gif or.jpeg formats. (If you know your audience, you can also use.png files.) It is also desirable to size and adjust the resolution of your file so that it is as small as possible (i.e. fewer kb) in order to load quickly. To Insert an Image: 1. Place the cursor where you want the image to appear. 2. Click the Insert Image button. 3. A new window will appear with a few different options. 4. The first thing to do is either enter the URL where the image is stored or browse to where the image is and open it. 5. In this new window you are also given a area where you can specify how the image will appear on the webpage. a. ALT Text: Is a brief description of your image which pops up when you point to the image or displays if the image doesn t load. It is important for those who are visually impaired and using a voice synthesizer. b. Border: Lets you enter a number width (in pixels) for the size of the border surrounding the image. Generally you want to keep the border small so around 2 or 3 is the maximum border size you want to apply. c. Width/Height: These two text boxes let you specify the size you want the image to appear when on the webpage. If it is different from the sizes you specify it will resize or enlarge to fit the sizes you set. It is generally not a good idea to take an image and blow it up to drastically. 6. Click OK. Editing an Already Inserted Image: 1. Right-click on the image you want to edit. 2. Click the Image Properties... option in the menu that appears. 3. A new window will appear that will allow you to change the options you set when you were first inserting the image into your webpage as well as a few others.

5 5 of 7 a. Aspect Ratio: By checking this checkbox you are able to keep the same proportions in the image if you resize it. b. Alignment: You can easily determine how the image is aligned on the webpage with this drop-down menu. Links (D) Some of the most important pieces in a web page are the links to other documents, to another part of the same document or even to an address. Links consist of two parts: the text that will be hot (sometimes called the anchor) and the destination (information on where the link takes the reader). 1. Start by clicking where you want the link to be placed. 2. Click the Insert Link button. 3. A new window will appear with a few options. 4. Start by selecting what you want to link to (under the Link Type heading): a. File Browse or Upload: By choosing this option the link you create will link to a file or image, etc. b. URL: This is a standard link. Simply enter the full web address or website that you want the link to be linked to. Make sure you have an at the front of the webaddress. 5. Once you have decided where the link will be linked to enter some link text. Link text is found under the Link Text heading. Link text is the text that will appear as the link. 6. When you are satisfied with the link you have created click OK. Tables (E) Tables are another useful tool that can be added to your webpage to enhance it. The following steps show you how to add a table: 1. Start by clicking either of the two table buttons. 2. The first button allows you to set every setting you want for your tables. 3. The second button is a table wizard where you choose the number of rows and columns without setting a lot of the other settings. 4. If you choose the first button a Table Properties... window will appear. 5. The following parts of this window are as follows: a. The Rows/Columns Area: This is where you choose the number of rows and columns in your table.

6 6 of 7 b. The Table Properties Area: From this area you are able to choose the width of the table in the webpage, how wide the borders are and even how it is aligned. c. Row/Column Properties Area: This area allows you to set the exact width/height for the rows and columns in your table. d. Cell Properties Area: This area lets you chose the spacing between the rows and columns as well as how text is aligned in them. e. Color Properties Area: This area is a simply area and lets you choose the background colour for the table you are inserting. 6. When you are satisfied with the setting you have applied for your table click OK. Inserting a Row/Column To insert a row or column make sure you place your cursor where you want the new row/column to be inserted and then click the first button to insert a row or the second button to insert a column. Additional Table Editing Options To further modify your table such as changing a cells specific properties or deleting certain rows or columns follow these steps: 1. Right-click in the appropriate area of the table you want to change. 2. A menu will appear. 3. Chose the Table option. 4. You will be presented with numerous options to modify and change the table you created. 5. Choose the one that you want. Other Useful Tools in the HTML Creator There are a few other useful tools that are contained in Blackboard HTML creator. The following table summarizes a few of them. Tool What it Looks Like What it Does Spell Check Tool This tool, as the name suggests, allows you to check the webpage you created for any spelling errors. The Symbol Tool This tool allows you to insert special symbols into your webpage such as the symbol. The Frame Window Mode Button This tool allows you to not be constricted by the small window Blackboard initially offers you and work in a full screen instead.

7 7 of 7