EDIT202 Web Page Creation Lab Prep Sheet

Transcription

1 EDIT202 Web Page Creation Lab Prep Sheet Creating and managing websites can be a valuable educational tool. Whether it is just to share administrative information, deliver course content or to be used as interactive tools, a well prepared website can only help to enhance a student s educational experience. Some key concepts that will be covered in this prep sheet include: - Creating a web folder (managing and organizing your files) - Saving information such as images and text from the web - Identifying types of hyperlinks Learning Objectives At the completion of this lab you be able to: Launch Adobe DreamWeaver and create a new web page Link to pages from within frames Insert images onto a web page Create an image map Format the text and backgrounds on a webpage Create and edit hyperlinks Insert tables Create and link to anchored hyperlinks on a web page Technical Terms.htm(l) : Stands for Hypertext Markup Language (the language used to create webpages). Files with an htm(l) file extension are often referred to

2 as webpage files. It is a very common file format, files with this extension can be modified by many different programs, but they are optimally meant to be seen on the web..jpg : Joint Photographic Experts Group, pronounced jay-peg. An image file format that can be inserted onto a web page reserved for pictures of photographic quality that can show up to millions of colors..gif : Graphic Interchange Format, pronounced jiff. An image file format that can be inserted onto a web page reserved for pictures of clipart or line drawing quality and can display up to a maximum of 256 colors. Absolute Hyperlink: An absolute hyperlink links to a page that already exists on the web and therefore has its own web address e.g. or Note here that all absolute hyperlinks need to have the prefix. Anchors & Bookmarks: A named location on a web page that can be the target of a hyperlink. A bookmark/anchor can be applied to a string of characters or exist on a page separately from any text. Bookmarks allow authors to link to a specific section of a target page. When typing in a URL, a bookmark is preceded by the pound sign (#). Hyperlink: An link is a link on your website that people can click on to send you . You typically see this done when you want to give the viewer of your website the ability to send you comments or suggestions on your website. Home Page: The main page of a Web site. Typically, the home page serves as an index or table of contents to other documents stored at the site. Hyperlink: Icon, graphic, or word in a document that links to another file or object. The World Wide Web is comprised of hyperlinks linking millions of pages and files to one another. Image Map: A single graphic image that contains more than one hot spot, with each hot spot being a hyperlink to a different web page. Relative Hyperlink: A relative hyperlink links to a page you are creating or have created; therefore, to create a hyperlink, just type in the filename to the

3 page you want to link to, e.g. page1.htm, or welcome.htm. Note here that there is no prefix required for a relative hyperlink. Key Concepts Creating web pages There are two main ways of creating web pages. One method is using HTML (Hypertext Markup Language) code. This is the authoring language used to create and format web pages. If you are curious to see what this language looks like, go to View menu option and select Source while in a web browser. You will see the many lines of code called tags that are used to create the page you are viewing. The other method of building web pages involves using authoring software. These programs are designed to build web pages and create the HTML code for you. These programs are meant to be used like word processing programs and graphics programs to create web pages. An example of one of these programs is Adobe DreamWeaver, the program you will be using in this lab to create your web pages. Creating a web folder Why do we create a web folder? There are two main reasons for creating this folder. One is for the purpose of organization, so we don't have the many files that make up our web site scattered in different areas on our computer. The second reason is so that our web pages will display as intended. When a web page is posted on the Internet, the collection of files that make up the web page are placed inside a single publicly accessible folder. When a page is displayed in a web browser, it needs to find the images that you the designer have inserted when creating the page in order to display

4 them on the web. The webpage file will always look for the image it needs to display in the same spot it was first inserted from. So, if you place the image inside a folder on your desktop, and then you move the files to the publicly accessible folder on your GPU account, the web page file will always be able to find the image to display on your page as intended because they have always been found together locally inside a folder. Saving images from the Internet Before saving images from the Internet for use on your web pages, you need to consider the following: Is this a reliable source? You should research each site that offers graphics for web use and make sure that the images are from a reliable source. Some sites have created a catalog of images by capturing graphics without the creator s permission. This is an infringement of their intellectual property. Make sure that when you do capture an image you make a note of where you found it to reference it later. Do you have permission to use this graphic? Many sites welcome the use of their graphics on web sites, but there may be some restrictions as to who can use the graphics. Usually there is no charge for the use of graphics on non-profit organization sites and only a nominal fee for commercial web sites. Does the creator of that graphic want a link back to their site? Read the terms that the owner of the graphic has for use of their images. Often the creators of that graphic require a link back to their site is included.

5 For this example, we will address all of the above issues by saving the banner image from the University of Alberta homepage. Open a web browser, either Internet Explorer or Netscape Navigator and go to the University of Alberta website by typing into the browser s address bar. Place your mouse over the main banner image and right click. Once you have done this, a context menu should pop up and you can choose one of the following options, these will differ depending on which browser you are using. Internet Explorer Netscape Navigator When the save window appears you can rename the image if desired. This may be a good idea, as you can rename the image with a filename that makes sense to you. Later on, when inserting the image into your web page, it will be easier to find in your web folder. To rename your saved image simply delete the old name and type in the new one. Make sure to give this image the correct file extension. If you are saving a GIF Image it is.gif, and if you are saving a JPEG image it is.jpg. Inserting images Before inserting images onto your web pages; you will have to make sure that you have already saved that image inside your web folder.

6 The key thing to remember with images is that if you want them to show up on the web when you publish your pages, the page needs to find the image to display and you need to tell it to look in the right spot. While working on this lab the right spot will be inside your web folder. To insert an image remember that image needs to be saved inside your web folder before you insert it onto your web page (this is where you should save all of your images when creating a web site). Working with anchors An anchor, as they are referred to in Adobe DreamWeaver, links you to a specific point in a web page document. Typically, anchors are used in web pages that have a lot of content to prevent excessive scrolling (which is often considered an element of poor web design). By linking to a specific section in a web document people viewing the webpage will find it easier to navigate through the content. Creating an image map An image map is a single graphic with two or more hot spots. Hot spots are defined in DreamWeaver as link areas. You can divide an image into several different hot spots and associate each of these hot spots with a different hyperlink. When using DreamWeaver there are three different shapes of hot spots you can apply to an image.

7 For example in the image below the circle hotspot tool was used on the soccer ball and the square hot spot tool was used on an area of the grass, both of those areas are now hot spots. Steven Scott & The EDIT 202 Development Team University of Alberta