Embed Size (px)
Citation preview
HTML Authoring
Design
A good website starts its life in the design stage Layout, Color, Sound, Content, Functionality
and Maintainability aspects are formed in the design stage.
Designing a website involves: Look and Feel of the site, languages & server
resources, programming & data structures involved, the time and programming abilities needed, end user ease, & site maintenance.
Good Design vs Bad Design
What makes a good design? Plan the web site structure Plan the navigation setup Plan the page layout, considering how
and where to use color and sound Plan your content
The 5 w’s: Who, What, When, Where, Why
Good Design vs Bad Design
Examples of good web design:http://www.geom.unimelb.edu.au/http://www.theage.com.au/http://www.virgintravelstore.comhttp://www.ge.ucl.ac.uk
Good Design vs Bad Design
What makes a bad design? Poor Planning!
The 10 Sins of web designhttp://www.peckwebs.com/sins.htm
Examples of bad web design:http://www.ratz.com/featuresbad.html
Building a Website
Set up the web site folder structure first: Example:
public_html/index.html -my home page public_html/assignments/ -my
assignments public_html/images/ -my pictures public_html/include/ -my style sheet public_html/multimedia/ -my multimedia public_html/templates/ -my templates
Building a Website
Create a template file Use include files for common
content Frames?
OK for managing simple websites though beware – frames can be annoying to work with when you have a large website
Building a Website
Other tips: Be consistent E.g. 1. Use a style sheet rather than remember
what font style you want to use E.g. 2. If your website uses frames, use the same
frame structure throughout E.g. 3. Make comments to yourself in HTML code if
it helps: <!- - my comments go here - ->
Remember: Planning and Consistency are the key to a well designed website!
Web Development Tools
What kind of tools can be used? Text editors:
E.g.. Notepad, WordPad, crimson editor Specific Software:
Microsoft WordNetscape ComposerMicrosoft FrontPageMacromedia Dreamweaver
HTML Tags
<HTML> The first tag in every HTML file Indicates that the content of the file is
in HTML All text and HTML
commands should fall within the beginning and ending <HTML> tags
<html><head><title>A Web Page</title></head><body>A simple web page </body></html>
HTML Tags
<HEAD> Reserved section for only a few tags
(e.g.. <TITLE>)
<html><head><title>A Web Page</title></head><body>A simple web page </body></html>
<TITLE> Each HTML page needs atitle to indicate what the pagedescribes Used by browser’s bookmarksand by other programs thatcatalog Web pages
HTML Tags
<BODY> The remainder of the page, including
all text, graphics etc. is enclosed within the <BODY> tag
<html><head><title>A Web Page</title></head><body>A simple web page </body></html>
HTML Tags
Page Formatting Background color
<BODY BGCOLOR=“#FFFFFF”><BODY BGCOLOR=“RED”>
Background Image<BODY BACKGROUND=“tiles.gif” >
HTML Tags
Font Formatting <H1> </H1> <H2> </H2> <H3> </H3> <P> </P> <B> </B> <I> </I>
Alignment ALIGN=CENTER ALIGN=LEFT ALIGN=RIGHT
<body><H1 ALIGN=CENTER> A simple web page </H1></body></html>
HTML Tags
Hyperlinks <A>
Link or anchor tag
<body><H1 ALIGN=CENTER> A simple web page </H1><A HREF=“page2.htm”>Page 2</A></body></html>
HTML Tags
Hyperlinks Relative Pathname
HREF=“file.htm” HREF=“assign2.ppt”HREF=“files/file.htm”HREF=“../file.htm”
Absolute PathnameHREF=“/user1/joiana/file.htm”HREF=“http://www.geom.unimelb.edu.au”
HTML Tags
Hyperlinks Mail to
<body><H1 ALIGN=CENTER> A simple web page </H1><A HREF=“mailto:[email protected]”>Email me </A></body></html>
HTML Tags
Tables <TABLE>
Holds the table contents and an optional caption
<table border=0><TR> <TH>Lecturer</TH> <TH>Subject</TH></TR><TR> <TD>Cliff Ogleby</TD> <TD>451-113</TD></TR></table>
HTML Tags
Frames Frameset document
<html><frameset cols=“100,50%,*”> <frame src=“leftcol.html” name=“left”> <frame src=“midcol.html” name=“middle”> <frame src=“rightcol.html” name=“right”><noframes>This site requires frames.</noframes></frameset></html>
HTML Tags
Images Inline format: GIF, JPG External format: TIFF, BMP, PNG <IMG>
<IMG SRC=“image1.gif”> ALIGN=TOP ALIGN=MIDDLE ALIGN=BOTTOM
E.g.. An image as a link <A HREF=“page2.htm”><IMG SRC=“arrow.gif”
BORDER=“0”></A>
Web Graphics
Animated GIFs
HTML Tags
Inserting Multimedia Flash files Shockwave files Plugins E.g.. A flash animation object:
<OBJECT width="550" height="400"> <param name="movie" value=“flashfilename.swf"> <EMBED src=“flashfilename.swf" width="550" height="400"> </EMBED> </OBJECT>
Useful Links
http://www.goodpractices.com http://www.w3.org/MarkUp http://www.htmlhelp.com/reference http://www.coolhomepages.com http://www.med.yale.edu/caim/manual/contents.html http://hotwired.lycos.com/webmonkey/design http://www.wpdfd.com/resources/Layout.htm http://webhelp.org http://www.htmlgoodies.com
<html><head><title>A Web Page</title><link href=“styles.css" rel="style sheet" type="text/css"></head><body>A simple web page </body></html>
body {font-family: Geneva, Arial, Helvetica, sans-serif;font-size: 12px;color: #000000;}
Advanced HTML
Cascading Style Sheets E.g.. styles.css sets the style for the body tag
Web page - index.html
Style Sheet – styles.css
Advanced HTML
Image Maps
<img src="images/toplinks_vsv.gif" width="800" height="22" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="7,1,58,22"
href=“index.html“><area shape="rect" coords="83,1,138,20"
href=“assignments.html"><area shape="rect" coords="163,2,214,20"
href=“resume.html"></map>
Advanced HTML
Layers
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"></div>
Javascript
A programming language for adding functionality and features to web pages.
Javascript is embedded into HTML E.g.. Rollover buttons
Java
Object oriented programming language
Designed with the intent: Write a program once and run it on
many different platforms Java programs are compiled into
bytecode Applets
Flash
Allows vector animation Is extremely compact Has streaming capabilities Used to create entire websites Used as an advertising tool
animations & games
Flash
Examples:
http://www.airforce.com/index_fr.htm http://www.lookandfeel.com/ http://www.flasharcade.com/ http://www.flasharcade.com/game.cgi?bubbletrouble
Flash
Principles of flash animation: Animation sequence based on a
timeline Vector objects created in Flash Library of objects of which there can
be many instances.
![MILITARY STANDARD MAINTAINABILITY VERIFICATION ...1].pdf · Maintainability, a characteristic of design and installation and affected by various personnel and logistic factors, is](https://img.pdfslide.net/doc/110x75/60a725817206a72da75f3ab4/military-standard-maintainability-verification-1pdf-maintainability-a-characteristic.jpg)
![Ch.3 Design for Maintainability. - IEMS. Design for Maintainability.pdf · Design For Maintainability. [Blanchard, pp285 - 292] ... training program, skills, equipment and tool availability;](https://img.pdfslide.net/doc/110x75/5a7887b27f8b9a87198cab53/ch3-design-for-maintainability-design-for-maintainabilitypdfdesign-for-maintainability.jpg)
