Starting Site Plan Stanford College Proceeding with Studies CS 21.


106 views
Uploaded on:
Category: Sales / Marketing
Description
Starting Site Outline Stanford College Proceeding with Studies CS 21 Mark Branom markb@stanford.edu http://www.stanford.edu/individuals/markb/Course Site: http://www.geocities.com/stanfordcs21/Week 5 Motivation Unfinished business Utilizing Design on pages Sorts of web representation
Transcripts
Slide 1

Starting Web Site Design Stanford University Continuing Studies CS 21 Mark Branom markb@stanford.edu http://www.stanford.edu/individuals/markb/Course Web Site: http://www.geocities.com/stanfordcs21/Week 5

Slide 2

Week 5 Agenda Unfinished business Using Graphics on site pages Types of web representation Using existing web illustrations Creating web representation Background illustrations Week 5

Slide 3

Using Graphics on Web Pages Graphics on website pages are isolated records. Dissimilar to a Word archive, where the representation really "live" inside of the record, to get a realistic on a site page, fashioners point to the realistic document in the HTML source code like this: <IMG SRC="URL-of-graphic" ALT="description of graphic"> Graphics are copyrighted material and ought to just be utilized with authorization. Week 5

Slide 4

Graphics can be portrayed as either relative or completely qualified URLs http://www.geocities.com/stanfordcs21/demos/bunny.html <HTML> <HEAD> <TITLE>Bunny Webpage</TITLE> </HEAD> <BODY BGCOLOR="turquoise"> <H2 align="center">BUNNY!</H2> <CENTER> <IMG SRC="bunny.gif"> </CENTER> </BODY> </HTML> Relative reference (with respect to the area of the HTML archive) <HTML> <HEAD> <TITLE>Bunny Webpage</TITLE> </HEAD> <BODY BGCOLOR="turquoise"> <H2 align="center">BUNNY!</H2> <CENTER> <IMG SRC="http://www.geocities.com/stanfordcs21/demos/bunny.gif"> </CENTER> </BODY> </HTML> Fully qualified URL Week 5

Slide 5

Bunny.html In the bunny site page case, both bunny.html and bunny.gif are situated in the same index. (http://www.geocities.com/stanfordcs21/demos/) That\'s the reason we could utilize relative URL to embed the realistic ( <img src="bunny.gif"> ). In the event that we needed to utilize the completely qualified URL, it would have been: <img src="http://www.geocities.com/stanfordcs21/demos/bunny.gif"> But since both bunny.gif and bunny.html are in the same webspace, it bodes well to utilize the relative URL. Week 5

Slide 6

Types of Web Graphics GIF: GIF (Graphics Interchange Formula) is the most widely recognized realistic sort on the web. It can be maintained with a hard or delicate “g.” GIF is constrained to 8-bit shading data (256 hues) and works best for line craftsmanship. It takes into account straightforward and vivified illustrations. JPEG: JPEG (Joint Photographic Experts Group) was intended for shading rich pictures, for example, photos. JPEG packs representation with high shading profundity (24-bit shading - up to 16 million hues) so they are littler and download speedier. JPEG pressure is "lossy" - some picture point of interest is lost amid pressure Week 5

Slide 7

Using Existing Web Graphics Not a visual craftsman? Try not to give up! Few of us are! There are various design files on the Web where you can discover glorious, usable, expert searching illustrations for utilization on your site pages. Keep in mind, representation are copyrighted - don\'t utilize them unless they are from a document or you have unequivocal composed authorization to utilize them. To discover an illustrations file, indicate your program Yahoo! (http://www.yahoo.com/) and scan for "Clip Art" or "Web graphics". You\'ll likely discover more than you could utilize. There are two or three realistic documents recorded on the Resources page. Week 5

Slide 8

Downloading Graphics In Netscape & IE: Point your mouse over the picture and hang on the mouse catch (on a PC, right-tap the picture) Choose “Save Image (Picture) As . . .” Specify the destination area of the picture record on you\'re PC. Click OK. Week 5

Slide 9

Downloading Graphics case Suppose you went over this site I’ve made which has a few pictures of me. Assume you truly adored the photo of me on the left and you need to download it for utilization all alone site. How might you go about doing this? BTW, the URL is: http://www.stanford.edu/~markb/pictures.html Week 5

Slide 10

Downloading Graphics sample (cont.) Step 1: Move the mouse over the picture that you need and right-tap on the picture you need (on a Macintosh, hold down the mouse over the picture you need) Step 2: Choose “Save Image As” Week 5

Slide 11

Downloading Graphics case Step 3: Choose the area on your hard commute where you need to spare the picture. I’m going to place it into an organizer on my desktop called “Working Web Stuff”. Week 5

Slide 12

Creating Web Graphics If you are acquainted with making PC representation, applying that information to making web illustrations isn\'t excessively troublesome. In case you\'re not a visual craftsman, the procedure and alternatives could without much of a stretch take up a course all their own. Things to consider: When you make your own realistic, spare it in a "true picture format" (BMP on Windows, PICT on the Mac). Roll out any improvements to the realistic in the local record design. At that point resave a duplicate as GIF or JPEG Save the representation as 75-100 dpi - anything a great deal more than that is squandered Smaller record sizes are better in terms of web illustrations. The bigger the realistic, the more extended the download time. Week 5

Slide 13

Photographs Existing photographs can be changed over to advanced configuration utilizing a scanner and scanner programming. Most scanner programming permits you to spare the realistic as a GIF or JPEG. In the event that you aren\'t content with the subsequent photograph, it can be "cleaned up" utilizing a system, for example, Adobe Photoshop or Photostyler. New photographs can be changed over to computerized organization (more often than not JPEG) by the processor. Kodak, Longs, and different processors can spare your photographs on a CD-ROM or diskette and additionally making prints for you. Once more, these photographs can be "cleaned up" utilizing a system, for example, Photoshop. Week 5

Slide 14

Creating Web Graphics Software Packages There are a wide mixture of programming bundles accessible for the production of Web design. Some are outlined particularly for this reason while others can do significantly more than simply make Web illustrations yet make an extraordinary showing with that assignment too, (for example, Photoshop). Making representation can be a basic procedure (making a catch with a content mark) or a significantly more muddled procedure (making a logo). Visit the Resources page for proposals on programming. Additionally, there is a posting of free instruments accessible for download on the web. Week 5

Slide 15

Background Graphics Done by altering the <BODY> label: <BODY BACKGROUND="URL"> , where "URL" is the realistic\'s area Creating a page with a hued foundation can be decent however you can run above and beyond with a foundation realistic. Foundation representation are for the most part little illustrations that tile over the program window to make a filled as a result. All things considered, a few representation are more qualified to being foundation illustrations than others. General standards: Keep the realistic/content differentiation high Keep the foundation realistic SIMPLE - an excess of shading, an excess of example can make it truly difficult to peruse over Don\'t abuse foundation illustrations - it can get to be diverting Week 5

Slide 16

Animated Graphics Using Existing Animations Most representation files incorporate energized segments Animations are a type of GIF organization; regarding putting activitys on a website page, there is no distinction between a vivified GIF and a non-enlivened GIF (same label, same procedure). Making New Animations There are programming bundles particularly to create movements. Activitys are a progression of static design that are "stitched" together and spared into one record. The program demonstrates each of the static pictures in arrangement bringing about the activitys. Week 5

Slide 17

Uploading picture to webspace Process is the same as transferring HTML documents Only distinction - representation are BINARY, not plain ASCII content so you\'ll have to press the BINARY or RAW DATA catch in your FTP customer (Fetch/WS_FTP) Don’t neglect to reset the catch back to "ASCII" for when you send HTML records... Week 5

Slide 18

In-class assignments Background realistic Inserting pictures into website pages Week 5

Slide 19

Weekly Assignment Visit a few design chronicles. Pick a few illustrations you\'d like to have on your pages. Spare them to your hard commute so you\'ll have entry to them (get consent on the off chance that they\'re copyrighted!) Or, in the event that you have the product and abilities, make a realistic or two to use on your site. Alternately, check a photograph into your PC Week 5

Slide 20

Preview of one week from now... Records W

Recommended
View more...