Download presentation
Presentation is loading. Please wait.
1
Review session for Web development
2
Today’s class Review the web designing. Filling out instructor evaluation form.
3
Time line of the internet history When was the ARPANET first demostrated? When did the NFSNet replace it? When did the email(ftp, www…) appear? Exact year not required, but you need to know the era.
4
Basics of Internet What is an IP address. What is the structure of an IP address. What is the static IP and dynamic IP. What are domain names? What are domain names? How does a domain name corresponding to an IP address. –www.lib.msu.edu www.lib.msu.edu –35.8.220.219
5
Domain names What are first level, second level domain names?.com.org.edu are top level domains, which specify the category of the domain name user. Second level domain name gives the entity ’ s name. This must be unique in the top level domain. Low level domain gives the server ’ s name. What is the difference between a domain name and a URL
6
Universal Resource Locator: Static http://www.msu.edu/~urquhar5/tour/active.html www.msu.edu Domain Name - name of remote computer http:// identifies type of transfer /~urquhar5/tour/active.html File Location on Remote Computer This part is CasE SenSiTiVe.
7
Universal Resource Locator: Dynamic http://www.msu.edu/cgi-bin/redirect.cgi?q=LBS&site=Web www.msu.edu Domain Name - name of remote computer http:// identifies type of transfer Folder name /cgi-bin/ Server program name: redirect.cgi Argument of the server program: ?q=LBS&site=Web
8
Web Page Development Cycle EDIT and SAVE the file in your AFS p:\web\test.html TEST by BROWSING to the page http://www.msu.edu/~msunetid/test.html
9
HTML File Structure <HTML><HEAD></HEAD><BODY></BODY></HTML>
10
Essential HTML tags MSU MSU H1, H2, u, em.
11
Cascading Style Sheets (CSS) A Cascading Style Sheet is a file with a list of formatting instructions. When a CSS file is attached to an HTML file, the appearance of the HTML will be defined by the CSS file. When a CSS file is attached to an HTML file, the appearance of the HTML will be defined by the CSS file. What can CSS change –Define customized style and apply to the content. –Redefine the appearance of HTML tags. –Advanced HTML tags. a:link, a:hover…
12
Separation of Content and Presentation Content –Use tags like,,, or to indicate the structure of your pages Presentation –Use a CSS style sheet to determine how the tags are formatted Advantage of separation –Changing the formatting only requires editing the style sheet
13
Hyperlinks in HTML Code Text for link Text for link Opening Tag Tag Attribute: URL Closing Tag Link text href = “Hyper Text Reference ”
14
Types of link Absolute link – – http://www.msu.edu Relative Link – – Email Link – – Anchor Link – –
15
Color Control Codes Computer monitors combine Red, Green and Blue (RGB) in various amounts Hexadecimal codes tell the computer how much Red, Green and Blue to display –Red: FF0000 –Green:00FF00 –Blue: 0000FF –Other colors? Combinations! Yellow = FFFF00 –White: FFFFFF –Black: 000000 Approximately 17 million combinations.
16
Graphics Types of graphics that can be insert into HTML –Jpeg –Gif What are they good for?
17
Graphics in HTML First step: Copy the graphics into your web folder, because graphics is NOT embedded in HTML. or or Can include size parameters – – Note: No closing tag!
18
Additional graphics features Graphics as link –How? Image map –What is it? Rollover images –What is under beneath the rollover images?
19
General steps of web site design Survey –Who’s my audience –Decide the general style Organize information Layout design Template design Implementation –Generating content page from template. Testing the web site Publishing
20
Layout design Two methods –Using table –Using layout view to draw layout cells. Dreamweaver automatically translate the layout table and cell to standard tables.
21
Dreamweaver Template What is a Dreamweaver template? –A special HTML file (with.dwt) What are the advantages of using a template to create the pages in a web site? Why is it better than reusing previously created HTML files? How template file differs from an HTML file –Non-editable region: same for every pages –Editable region: different in different pages
Similar presentations
