1 / 14

Page Layout, SSI, Computers & Information Representation

CS110: Computer Science and the Internet. Page Layout, SSI, Computers & Information Representation. Team accounts http ://cs.wellesley.edu/~cs110/students/ accounts.html Meet with client soon Meet with project advisor next week HW 3 get started (always protected) HW 1 and 2 (return).

harken
Download Presentation

Page Layout, SSI, Computers & Information Representation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS110: Computer Science and the Internet Page Layout, SSI, Computers & Information Representation

  2. Team accounts http://cs.wellesley.edu/~cs110/students/accounts.html • Meet with client soon • Meet with project advisor next week • HW 3 get started (always protected) • HW 1 and 2 (return)

  3. Recap: two-column fixedlayout <body> <div id=“allcontent”> <header> . . . </header> <nav> . . . </nav> <div id=“main”> <div id=“intro”> . . . </div> <div id=“read”> . . . </div> <div class=“week”> . . . </div> <div class=“week”> . . . </div> </div> <footer> . . . </footer> </div> </body> nav { width: 150px; float: right; . . . } #allcontent{ width: 800px; margin: 0 auto; . . . } #main { width: 600px; . . . } Key CSS:

  4. Create a two-column liquid layout http://cs.wellesley.edu/~cs110/ellen/amLit/fixedPage.html How does the page change as you shrink the window size? Using Firebug (later), edit the CSS rules to create a two-column liquid layoutthat spans the width of the window and has columns that change size as you shrink the window size Hint: the value of the width property can be specified as a percentage, e.g. width: 60%; Why use fixed vs. liquid layouts?

  5. CSS Tables

  6. Use CSS Tables • http://cs.wellesley.edu/~cs110/scott/L05-page-layout/css-tables.html

  7. Server Side Includes (SSI) Suppose we have the same code on lots of web pages: <html> <head> . . . </head> <body> <nav> . . . lots of hyperlinks . . . </nav> . . . </body> </html> <html> <head> . . . </head> <body> <nav> . . . lots of hyperlinks . . . </nav> . . . </body> </html> <html> <head> . . . </head> <body> <nav> . . . lots of hyperlinks . . . </nav> . . . </body> </html> . . . home.htmlmission.htmlmembers.html (1) Place code in a new file (2) include the new file in the HTML code: <body> <!--#include nav.part --> . . . (3) change filename extensions to .shtml <nav> . . . lots of hyperlinks . . . </nav> nav.part

  8. Opening up the black box Fetch/execute cycle: • Fetch instructions from memory • Decode the instruction • Execute the instruction • Repeat!

  9. Most questions • Binary, binary, binary

  10. Binary <-> Decimal

  11. Binary numbers - bits & bytes 1 Byte = 8 bits, and then…

  12. Binary numbers, exponential possibilities! • 1 bit • 2 bits • 3 bits • 4 bits • 5 • …… • 32 (IP address) • 128 (IPv6)

  13. ASCII code ASCII code allows 256 “characters” to be represented UTF-8 encodes more than 1 million characters from the Unicode character set Line-endingsz

  14. Create a two-column liquid layout http://cs.wellesley.edu/~cs110/ellen/amLit/fixedPage.html How does the page change as you shrink the window size? Using Firebug (later), edit the CSS rules to create a two-column liquid layoutthat spans the width of the window and has columns that change size as you shrink the window size Hint: the value of the width property can be specified as a percentage, e.g. width: 60%; Why use fixed vs. liquid layouts?

More Related