USQ/CSC2046 Web Publishing

Size: px

Start display at page:

Download "USQ/CSC2046 Web Publishing"

Frank Potter
5 years ago
Views:

1 USQ/CSC2046 Web Publishing Lecture 2: Design Guidelines, Graphics & Image Maps Tralvex (Rex) Yeap 29 November 2002

2 Outline Quick Review on Lecture 1 Search Engine Video Tutorial Topic 2: Advanced HTML Topic 3: Design Guidelines Topic 4: Graphics & Image Maps Class Activity 1: Reading Class Activity 2: Assignment 1 Discussion & Work Additional Handouts for L2 What s in Store for Lecture 3

3 Quick Review of Lecture 1 N-ways Introduction - Personal Information and Background - Students Information and Background Course Outline: - Requirements and Expectation - Module Assessment - Layout of Course - Strategies for Local Lectures - Virtual Office Hours Course Delivery Methods Organization of WPub Website Modules for Lecture 1 T1: Introduction Class Activity 1: Discussion T2: HTML: Background, HR, Colours, Paragraph, H1...H6, List Elements, Alignment, Font Styles, Images, Hyperlink, Bookmark Class Activity 2: Reading Additional Handouts for L1 What s in Store for Lecture 2

4 Search Engine Video Tutorial Google.com

5 Topic 2b: Practical Advanced HTML Practical Advanced HTML Tables: Basic, Colors, Merging, Blank Cell, Frames & Target <meta http-equiv="refresh" content= 0; URL= Cascading Style Sheets

6 Topic 2b: Practical Advanced HTML Table HTML codes: <table <table border="1" border="1" cellspacing="1" cellspacing="1" width="100%"> width="100%"> <tr> <tr> width="33%">a1</td> width="33%">a1</td> width="33%">a2</td> width="33%">a2</td> width="34%">a3</td> width="34%">a3</td> </tr> </tr> <tr> <tr> width="33%">b1</td> width="33%">b1</td> width="33%">b2</td> width="33%">b2</td> width="34%">b3</td> width="34%">b3</td> </tr> </tr> <tr> <tr> width="33%">c1</td> width="33%">c1</td> width="33%">c2</td> width="33%">c2</td> width="34%">c3</td> width="34%">c3</td> </tr> </tr> </table> </table> Result: A1 A2 A3 B1 B2 B3 C1 C2 C3

Topic 2b: Practical Advanced HTML Table (variations) HTML codes: <table <table border="10" border="10" cellspacing="1" cellspacing="1" width="50%" width="50%" bgcolor="#99ccff"> bgcolor="#99ccff">

7 Topic 2b: Practical Advanced HTML Table (variations) HTML codes: <table <table border="10" border="10" cellspacing="1" cellspacing="1" width="50%" width="50%" bgcolor="#99ccff"> bgcolor="#99ccff"> <tr> <tr> width="33%" width="33%" bgcolor="#ff99ff">a1</td> bgcolor="#ff99ff">a1</td> width="33%">a2</td> width="33%">a2</td> width="34%">a3</td> width="34%">a3</td> </tr> </tr> <tr> <tr> width="33%">b1</td> width="33%">b1</td> width="67%" width="67%" colspan="2">b2 colspan="2">b2 and and B3 B3 merged</td> merged</td> </tr> </tr> <tr> <tr> width="33%">c1</td> width="33%">c1</td> width="33%">c2</td> width="33%">c2</td> width="34%"></td> width="34%"></td> </tr> </tr> </table> </table> Result:

8 Topic 2b: Practical Advanced HTML Frames HTML codes: File 1: index.htm <frameset <frameset rows="10%,*"> rows="10%,*"> <frame <frame name="top" name="top" src="top.htm"> src="top.htm"> <frame <frame name="body" name="body" src="body.htm"> src="body.htm"> <noframes> <noframes> <body> <body> <p>this <p>this page page uses uses frames, frames, but but your your browser browser doesn't doesn't support support them.</p> them.</p> </body> </body> </noframes> </noframes> </frameset> </frameset> File 2: top.htm <p <p align="center"><b>title</b></p> align="center"><b>title</b></p> <p <p align="center"><a align="center"><a target="body" target="body" href="body.htm# href="body.htm# Bookmark"> Bookmark"> Hyperlink Hyperlink to to Bookmark Bookmark in in the the Body</a></p> Body</a></p> File 3: body.htm <p align="center">body</p> <p align="center">body</p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"><a name="bookmark"> <p align="center"><a name="bookmark"> Bookmark</a></p> Bookmark</a></p>

9 Topic 2b: Practical Advanced HTML Frames (cont) Result:

10 Topic 2b: Practical Advanced HTML Frames (cont)

Topic 2b: Practical Advanced HTML meta http-equiv="refresh tralvex.com HTML codes: File 1: index.htm -> http://tralvex.

11 Topic 2b: Practical Advanced HTML meta http-equiv="refresh tralvex.com HTML codes: File 1: index.htm -> <html> <html> <head> <head> <meta http-equiv="refresh" content="0; URL= <meta http-equiv="refresh" content="0; URL= </head> </head> </html> </html> File 2: index.htm -> <html> <head> <html> <title>university <head> of Southern Queensland - CSC2406 Web Publishing</title> </head> <title>university of Southern Queensland - CSC2406 Web Publishing</title> <body </head> bgcolor="#d5e3ff"> <table <body border="0" bgcolor="#d5e3ff"> width="100%"> <tr> <table border="0" width="100%"> ><a <tr> href=" src="g-usq.gif" width="69" height="102" alt="g-usq.gif ><a href=" (4973 bytes)" border="0"></a></td> src="g-usq.gif" width="69" height="102" alt="g-usq.gif align="center" (4973 width="60%"><big><big><big><a bytes)" border="0"></a></td> name="top">uni</a>versity of Southern Queensland</big></big></big></td> align="center" width="60%"><big><big><big><a name="top">uni</a>versity of Southern Queensland</big></big></big></td> align="right"><a href=" src="g-thames.gif" alt="tcol" border="0" align="right"><a width="246" href=" height="70"></a></td> src="g-thames.gif" alt="tcol" </tr> border="0" width="246" height="70"></a></td> <tr> </tr> <tr> colspan="3"><p align="center"><a HREF=" colspan="3"><p align="center"><a SRC=" HREF=" ISMAP width="1" height="1" border="0"></a></td> SRC=" ISMAP width="1" height="1" </tr> border="0"></a></td> </table> </tr> <hr> </table> <blockquote> <hr> </blockquote> <blockquote> </blockquote> =

12 Topic 2b: Practical Advanced HTML Cascading Style Sheets Cascading Style Sheets, or CSS for short, allow you to specify various style settings to be used in one or more web pages. <HTML> <HTML> <HEAD> <HEAD> <STYLE <STYLE TYPE="TEXT/CSS"> TYPE="TEXT/CSS">  --> </STYLE> </STYLE> </HEAD> </HEAD> <BODY> <BODY> <P>Blue <P>Blue Verdana Verdana text!</p> text!</p> </BODY> </BODY> </HTML> </HTML> A stylesheet rule is of the form: tag-name {style-settings} BODY BODY {font-family: {font-family: Verdana; Verdana; background-color: background-color: #EEFFEE;} #EEFFEE;} H1 H1 {font-weight: {font-weight: normal; normal; color: color: #000066; #000066; text-align: text-align: center;} center;} P, P, H6 H6 {font-family: {font-family: Verdana, Verdana, color: color: #0000FF;} #0000FF;}

13 Topic 2b: Practical Advanced HTML Cascading Style Sheets list of style-settings SETTING VALUE(S) DESCRIPTION background-color COLOR Tags that might have background colors associated with them include BODY, P, table cells and even form elements, which we'll encounter at a later time. You can set a color name, or a hex color. Alternatively, you can use the rgb function, which takes three integer arguments from 0 to 255. These correspond to the red-green-blue value of your color, so rgb(255,0,0) is red, rgb(255, 128, 0) -orange etc. backgroundimage url("image.gif") none Replace image.gif with the URL of your image. Background images are used mostly with the BODY tag and table cells. color COLOR Assign a color name, hex color, or the rgb() value. A large number of web page elements can accept the color setting. font-family FONT(S) You can specify a single font, or a list of fonts, separated by commas. Font names with spaces should be enclosed in quote marks. font-size pt px Font sizes can be in terms of standard point sizes (e.g. 8pt), or in terms of pixels (e.g. 10px). Other units are available, like the "width of m" (em) and percents, but pt and px are the common ones. You must specify a unit - simply writing font-size: 10; can cause problems in Netscape! font-style font-weight text-align normal Italic bold bolder lighter normal left right center justify Fonts have the normal style applied to them by default. Notice that bold isn't a valid option for font-style.... Setting this to bold will make your text stand out more. normal can be used to disable the boldness of headings created with the heading tags. You can also a multiple of 100 from 100 to 900, where 900 is the boldest. bolder and lighter increases / decreases the boldness. The horizontal alignment of text (default is left). Notice the justify setting - the only way make blocks of text justified is to use CSS (the text in these tutorials is justified!). text-decoration This setting controls the lines through text. none turns off underlining - useful for links, which are underlined by default. line-through is the CSS equivalent of the STRIKE tag. overline creates a line at the top of text. underline is the CSS equivalent of the U tag.

14 Topic 3: Design Guidelines A good Design Principles paper compiled by Mark Huang

15 Topic 4: Graphics & Image Maps JPEG Graphic Format JPEG/JPG Short for Joint Photographic Experts Group Browser enabled graphic format Lossy compression technique JPG images support 16 million colors Best suited for photographs and complex graphics. The user typically has to compromise on either the quality of the image or the size of the file Not suitable for line drawings, lettering or simple graphics.

16 Topic 4: Graphics & Image Maps GIF Graphic Format GIF Short for Graphics Interchange Format Browser enabled graphic format Unlike JPG, the GIF format is a lossless compression technique Supports only 256 colors GIF is suitable for images with less than 256 distinct colors, such as line drawings, black and white images With an animation editor, GIF images can be put together for animated images GIF also supports transparency The compression algorithm used in the GIF format is patented and owned by Unisys, and companies whose software generates GIF image(s) are required to license the use from Unisys.

17 Topic 4: Graphics & Image Maps PNG Graphic Format PNG Short for Portable Network Graphics Browser (some) enabled graphic format PNG was developed as a patent-free answer to the GIF format and is also an improvement on the GIF technique An image in a lossless PNG file can be 5%-25% more compressed than a GIF file of the same image PNG builds on the idea of transparency in GIF images and allows the control of the degree of transparency, known as opacity As at 2002, not common among web authors PNG does not support animation.

18 Topic 4: Graphics & Image Maps An image for GIF format (Quality vs Filesize) 6 kb 48 kb Original in GIF JPG (15% Compression) JPG (60% Compression) JPG (99% Compression) 29 kb 16 kb

19 Topic 4: Graphics & Image Maps An image for JPG format (Quality vs Filesize) 9.5mb 0.6mb Original in TIFF Uncompressed JPG (15% Compression) JPG (60% Compression) GIF 0.2mb 1.5mb

20 Topic 4: Graphics & Image Maps Animated GIFs Animation Shop: GIF Construction Set: Free animated GIFs:

21 Topic 4: Graphics & Image Maps Image Maps An IMAGE MAP describes the location of clickable "hot spots" of an image. Hot spots are simply clickable areas of an image that usually take you to another location. They can exist in various shapes and sizes. For example, each circle of this image is a hot spot: To make an image map, you define each hot spot using an <AREA> tag, which are all placed between <MAP> and </MAP>. <MAP> only has one attribute that you must set: NAME. This name will be used in the USEMAP attribute of the <IMG> tag. <IMG <IMG SRC= 5-nodes.gif" SRC= 5-nodes.gif" WIDTH="180" WIDTH="180" HEIGHT="180" HEIGHT="180" USEMAP="#Map"> USEMAP="#Map"> <MAP <MAP NAME="Map"> NAME="Map"> <AREA <AREA SHAPE="CIRCLE" SHAPE="CIRCLE" COORDS="90,30,10" COORDS="90,30,10" HREF= home/"> HREF= home/"> <AREA <AREA SHAPE="CIRCLE" SHAPE="CIRCLE" COORDS="160,90,10" COORDS="160,90,10" HREF= html/"> HREF= html/"> <AREA <AREA SHAPE="CIRCLE" SHAPE="CIRCLE" COORDS="130,150,10" COORDS="130,150,10" HREF="forums/"> HREF="forums/"> <AREA <AREA SHAPE="CIRCLE" SHAPE="CIRCLE" COORDS="50,150,10" COORDS="50,150,10" HREF="books/"> HREF="books/"> <AREA <AREA SHAPE="CIRCLE" SHAPE="CIRCLE" COORDS="20,90,10" COORDS="20,90,10" HREF="c/"> HREF="c/"> </MAP> </MAP>

22 Topic 4: Graphics & Image Maps Image Maps (cont) ATTRIBUTE VALUE DESCRIPTION SHAPE RECT CIRCLE POLY Describes the shape of the hot spot. COORDS List of integers Taking the top left corner of the image as he origin (0,0), the list depends on the shape of the image map. If SHAPE was set "RECT", COORDS should be of the form: "x1,y1,x2,y2", where x1 and y1 are the coordinates of the top left corner of the hot spot, and x2 and y2 are the coordinates of the bottom right corner. If SHAPE was set "CIRCLE", COORDS should be of the form: "x,y,r", where x and y are the coordinates of the center of the circle, and r is the radius. If SHAPE was set "POLY", COORDS should be of the form: "x1,y1,...,xn,yn", where all the xn and yn are the coordinates of the polygon's nodes. More examples later... HREF URL The location you want to point to. TARGET Frame name, window name, or _blank, _self (default), _top or _parent. ALT TEXT This is IE only, but it's the alternative text displayed when the cursor floats over a hot spot (like the ALT attribute of <IMG>).

COORDS="139,62,179,79" HREF="html/"> </MAP> <MAP <MAP NAME="Map3"> <AREA SHAPE="POLY"

23 Topic 4: Graphics & Image Maps Image Maps (cont) <MAP <MAP NAME="Map2"> <AREA SHAPE="RECT" COORDS="67,3,115,18" HREF="home/"> <AREA SHAPE="RECT" COORDS="139,62,179,79" HREF="html/"> </MAP> <MAP <MAP NAME="Map3"> <AREA SHAPE="POLY" COORDS="67,3,113,3,90,42 HREF= home/"> <AREA SHAPE="POLY" COORDS="160,60,180,80,160,100,140,80 HREF= html/"> </MAP>

24 Assignment 1: Discussion & Workouts Due: 23 Dec 2002 You work for a company that designs web sites, this includes designing the public interface and also the server side of the site. Your company is bidding for a lucrative contract to design a web site (front end and back end) for a mail order company that sells - Succulent Plants. Succulent plants include the cacti that are commonly found in arid regions of the world. The company also sells related products required by the keen succulent grower. You are to design the public side (HTML pages, Images, Forms pages) and server side (CGI scripts, Image Maps etc.) of your company's bid for the contract. The basic design criteria you are to employ are the following There should be an entrance page to the site. This should be simple but entice the potential buyer to look further into the site. From the entrance or welcome page there should be links to four major areas of the site. A section containing the product catalogue. A section describing the company. A section for submitting orders. A section to help the client in all aspects of the site. This first assignment is to set up the basic structure of the company's site, construct the welcoming page and the description of the company.

25 Assignment 1: Discussion & Workouts Due: 23 Dec 2002 (cont) In the directory ~/CSC2406/html/ass1 create four directories that will contain the documents and images etc. for the four main sections of the site: catalogue This directory will contain the catalogue with all its images that clients will be ordering from. order This directory will contain the ordering forms, CGI scripts and client orders info This directory will contain information on the company and its products. help This directory will be used by you to document your solutions to the assignments. Your site should contain the following elements: Images (at least one each): Transparency, Navigation buttons with Javascript mouse-over effects, image maps, animated GIF & Javascript on-off event; CSS: All font changes, all text colors, background colors, H1 to H6 elements etc. through style sheets. Readable and navigable with style sheets turned off; Tables; Style Guide: Follow guidelines in study book; A simple & eye-catching welcome page for the site with basic information & purpose of the company

26 Assignment 1: Discussion & Workouts Due: 23 Dec 2002 (cont) Create a catalogue page. This should list all the items the client can purchase via the web. This part of the site will be tackled more fully in Assignment 2. For assignment 1 all that is required is that examples of what will be available soon for online purchase be given. In Assignment two this page will have to be re-written using Forms - so do not spend too much time on it. But remember this will be part of the company's site and viewable by the public - so more than just "Under Construction" is required. Create a Company Information page in the directory info. This page should contain images and information about the company. Information that should sell the company to prospective clients. As this is not a main entry point to the site this can be a flashy section - but remember to bear in mind the recommendations in the Style Guide Module. Create a Help page which will contain the following Describe, with examples from your site, all the Required images and Image maps. Explain how you made your images. Display All the component images of the animated gif. Describe how you created the component images, and how you created the final animated image. Include All code included in the site - Javascipt, Image Maps etc. Describe the rationale for your page design - That is, using the Style Guide - explain your design. The help directory is to be used to document your solution to the assignments. Rex s suggestion: A final checklist for items from [1] to [6] to please and aid the marker.

27 Additional Handouts for Lecture 2 1. Design Principles by Mark Huang 2. Assignment 1

28 What s in Store for Lecture 3 Topic 5: Javascript Topic 6: HTTP and MIME Additional Class Activities / Discussion

29 End of Lecture 2 Good Night.

30 Course Outline: Strategies for Local Lectures Lecture 1/6 Getting to know each other (to optimize communications) Topic 1: Introduction Topic 2: HTML / Advanced HTML Additional Topic: Additional Class Activities / Discussion Lecture 2/6 Topic 3: Document and Site Design and Style Guidelines Topic 4: Graphics & Image Maps Discussion on Assignment 1 Additional Class Activities / Discussion

31 Course Outline: Strategies for Local Lectures (cont.) Lecture 3/6 Topic 5: Javascript Topic 6: HTTP and MIME Additional Class Activities / Discussion Lecture 4/6 Topic 7: HTML Forms Topic 8: CGI Scripts Discussion on Assignment 2 Additional Class Activities / Discussion

32 Course Outline: Strategies for Local Lectures (cont.) Lecture 5/6 Topic 9: Server Configuration Topic 10: Server Security Additional Class Activities / Discussion Lecture 6/6 Topic 11: Future of Web Publishing Exam Preparations Additional Class Activities / Discussion

Chapter 5 Images. Presented by Thomas Powell. Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A.

Chapter 5 Images. Presented by Thomas Powell. Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Chapter 5 Images Presented by Thomas Powell Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Powell Image Introduction Images are good for illustrating ideas showing