MULTIMEDIACLASSPPT7

1、slide 1 of 75stay awake for todays lecturevaluable information slide 2 of 75webpage layout and webpage designtechnical definitions: a webpage is a single html document a website is a collection of related webpagesexamples http:/ slide 3 of 75have something valuable to offer p r

2、 o v i d e s o m e t h i n g u s e f u l o r interestingdont distract with blinking, animated gifs, autoloading sound, too much scrollingdont use images on the background unless you know what your doingput a lot of thought into the organization of your pageminimize clicking (no more than 3 clicks to

3、 get to a page)slide 4 of 75have a way to get to the home page on every pageinclude a menu on every page (in the same location on every page)dont make your page too wide, user should never have to do horizontal scrolling. vertical scrolling should be kept to a minimumslide 5 of 75use contrasting col

4、ors or simple backgrounds to make text easy to readmake text large enough to readuse all capital letters sparingly,never underline words that are not linksput contact info or a link to it on every pageslide 6 of 75test your linksremove dead linksinclude a “last modified” date keep up to date, update

5、 your “whats new” section frequentlyslide 7 of 75have a consistency throughout your pages colours menu placement layout fonts buttonsthink about the layout, have white space, clean alignment and balance on your pagesslide 8 of 75navigation confusing, menus in different spotsugly design: no color con

6、tinuity or white spacescrolling horizontally to see whole page widthslow when loadingbroken linkstext hard to readspelling mistakesstale contentuseless informationtoo many adsblinking, animation slide 9 of 75decide on where you want the menu, in general it should go along the left side or at the top

7、, why? what will the navigation structure look like? what will the pages be besides the home page? will there be submenus under the menus? (this will affect your folder layout)pick a colour scheme you likethink about your banner: what should it focus on will the menu be part of the banner? think abo

8、ut the colours make it about 800 pixels wide, dont make it too tall.sketch it out on paperslide 10 of 75web page layoutlayout of web pages is very importantpoor layout makes for - difficult navigation hard to locate information on page visually unappealingslide 11 of 75tables, tables, tables!use tab

9、les to lay out your pages!make the table borders invisiblea 2x2 table works wellslide 12 of 75areas of a web pagemenuheadercontentlogoslide 13 of 75a 2 x 2 layoutslide 14 of 75table within a tableslide 15 of 75the outer tableslide 16 of 75the inner tableslide 17 of 75the inner tableslide 18 of 75spl

10、ash pagethe index.html file is called the “splash page”it is the key pagethe first page visitors usually seem u s t b e v i s u a l l y a t t r a c t i v e , informative, and easy to navigateslide 19 of 75organizing informationdecide what info goes on each page friends page family page personal page

11、 hobbies pageslide 20 of 75good web communicationbe conciselimit choices use a hierarchical structure a h i e r a r c h y i s a s t r u c t u r e d organization where some pages are at a higher level than others hierarchy results in a site map with multiple levelsslide 21 of 75site mapa site map is

12、designed to show the connections between pagesa graphical site map uses lines to connect linked pagesslide 22 of 75site mapecit websitesplash pageindex.htmldepartments pagedept.htmlteachers pageteachers.htmlstudents pagestud.htmllibrarylib.htmlsportssports.htmlslide 23 of 75design themechoose a comm

13、on layout for your website. the splash page will probably differ but interior pages should be the sameuse tables to control placement throughoutslide 24 of 75consistency in designuse the same font throughout! use consistent graphics in website do not use ultra modern on one page and calligraphy on a

14、notheruse color scheme that is consistentslide 25 of 75slide 26 of 75keep the menu in the same place on every page. (either the top or the left, it is up to you)s h o u l d n o t h a v e t o s c r o l l horizontallykeep the colours consistent on every pagekeep the layout fairly consistent on every p

15、ageshould always have a way to get homelong pages should have a “back to top” buttonslide 27 of 75each web page web page is normally an html file, a file that has the extension .html .html or . .htmhtm.html .html .htmhtm very basic page, just has clickable links, images, sometimes forms the .html fi

16、le is just a file with html codes that is displayed in a browser to make it look pretty for the client (ie, safari, firefox) cs1033 just covers .html & .htm pagesslide 28 of 75cont.other extensions for web pages include: .shtmlshtml server side includes: add some extra stuff from the server before d

17、isplaying the page to the client” .phpphp, .asp, ., .asp, .cgicgi extra stuff that is brought in also from the server, allows for use of data in a database on the server, more complex form manipulation. asp is a microsoft technologyslide 29 of 75chapter - 11.who coined the term hypertext? 2.tim bern

18、ers-lee proposed the_ 3.who create the netscape program？4._ is the best example of a hypermedia application.5.who invented the hypertext markup language (html)?6.who invented the hypertext transfer protocol (http)? slide 30 of 757.which one is first popular web browser?8.uri stands for _9.the curren

19、t version of html is_10.cakewalk also called_11._ was the first popular gui-based audio editor for digitized audio 12._a video editing tool by apple; macintosh only.13._ is the most basic element of multimedia.14.w h a t a r e t h e c a t e g o r i z a t i o n o f multimedia?15._ is a text which con

20、tains links to other texts. slide 31 of 75chapter 21._is the process of creating multimedia applications2.which one is the example of scripting language metaphor?3._ is the example of frames metaphor.4._is the simplest and most frequently used video transition 5.what are the types of dissolve?6.what

21、 are the most popular video formats? slide 32 of 757.pal stands for _8.secam stands for _9._ displays pixels on the screen.10.what are the popular authoring tools?11.what is the main purpose or objective of vrml? 12.vrml files are called_ and have _extension.13._describes the properties of node.14.w

22、hat are the types of nodes?15.what are the types of texture?slide 33 of 75chapter - 11.ted nelson2.world wide web3.jim clark and marc andreessen 4.world wide web5.tim berners-lee 6.tim berners-lee7.mosaic 8.uniform resource identifier9.html 5.010.pro audio11.sound edit12.final cut pro13.text14.linea

23、r & non-linear15.hypertextslide 34 of 75chapter 2 1.authoring2.tool book program3.quest4.cut5.cross dissolve and dither dissolve.6.ntsc, pal, and secam7.phase alternating line8.sequential color and memory9.video card or video capture card10.adobe premiere, flash, dreamweaver11.it is a standard for d

24、elivering 3d rendering on the net 12.world, .wrl13.fields14.shape and material15.image ,movie, pixelslide 35 of 75jpeg compression examplejpeg compression examplethis example shows the effects of jpeg compression at various levels of quality. the first file is a gif version of the original, requirin

25、g 258898 bytes of storage. the other files use quality factors of 100 (best) down to 5 (nearly the worst) and therefore require space in the range 326321 down to 9438 bytes. http:/www.cs.sfu.ca/coursecentral/365/mark/material/cgi-bin/whichjpeg.cgi slide 36 of 75what is lossless compression?what is l

26、ossless compression? lossless compression is a method of reducing the size of computer files without losing any information. that means when you compress a file, it will take up less space, but when you decompress it, it will s t i l l h a v e t h e e x a c t s a m e e x a c t s a m e informationinf

27、ormation. slide 37 of 75slide 38 of 75questionquestion: match the following images to the correct file format:gifpngjpgslide 39 of 75questionquestion: how many pixels is an image that is 800 pixels by 800 pixels?question question : how many megapixels is that image?question question : how many colou

28、rs can you represent with 4 bit colour?slide 40 of 75questionquestion: assume we have 3 images, all 3 images are 100 pixels by 100 pixels but they were each scan in with different dpi. (one was 10dpi, one was 50 dpi, one was 100dpi) which of the following statements are true? all 3 images will have the same file size the image that was scanned in at 100dpi will printprint smaller than the one scanned in at 10dpislide 41 of 75questionquestion: how big will an image be in terms of bytes if it is uncompressed, true colour and 200 by 400 bytes?question: q