1 / 37

Susan Cates Posting HTML documents to the Web Library using Dreamweaver Bios 576/577

Susan Cates Posting HTML documents to the Web Library using Dreamweaver Bios 576/577. http://www.bioc.rice.edu/bios576/library_homepage.html. Web Library - Purpose Prevents graduate students from having to reinvent the wheel

eliza
Download Presentation

Susan Cates Posting HTML documents to the Web Library using Dreamweaver Bios 576/577

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. Susan Cates Posting HTML documents to the Web Library using Dreamweaver Bios 576/577

  2. http://www.bioc.rice.edu/bios576/library_homepage.html

  3. Web Library - Purpose • Prevents graduate students from having to reinvent the wheel • Provides contact information for additional, supplemental information • C. Showcases the resources of the Bioscience departments (BCB, BioE)

  4. HTML Editors • A. Netscape: composer (Under the Communicator menu) • B. Mozilla: composer (Under the Windows menu) • C. Dreamweaver (Rice IT dept. recommended software) • D. Any text editor can be used to hand-code HTML • E. For those who don’t want to know anything about HTML: • 1. Microsoft Word: Save as Web Page (under the File menu) • a. can really only be altered/edited in Word • b. sometimes looks funny on non-Microsoft browsers

  5. Netscape and Mozilla composers Viewing modes: Normal HTML Tags Source code Preview Publish tool Print tool

  6. Normal and Preview Viewing Modes - see HTML objects, can’t see code

  7. HTML Source Viewing Mode - shows source code

  8. Hints for HTML coding • A. Wrap-around text within a paragraph – sizes itself to the browser. • 1. Do not return or format within a paragraph • 2. Use HTML to format, not keys (ie, space, tab) • 3. Blockquote – tool for using formatting keys, text shows up “as is” • B. Brackets and Beginning/Ending Statements • 1. General rule - each beginning must have an ending (<table> </table>) • 2. HTML tags start with “<” and end with “>”

  9. Resources for HTML help • The W3C HTML Home Page - http://www.w3.org/MarkUp/ • B. Dreamweaver Manual – available for check out from Susan Cates

  10. Basic HTML document structure - formal HTML Head: Title Body <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>My first HTML document</TITLE> </HEAD> <BODY> <P>Hello world! </BODY> </HTML>

  11. Basic HTML document structure - practical HTML Head: Title Body <html> <head> <title>syllabus</title> </head> <body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#551A8B" alink="#0000FF"> <font size=+1>This is the official web site for course BIOS 533, Bioinformatics &amp; Computational Biology, offered at Rice University as a part of the <a href="http://cohesion.rice.edu/centersandinst/gcc/keck.cfm">Keck Computational Biology</a> &amp; <a href="http://www.bioc.rice.edu/hambp">Houston Area Molecular Biophysics</a> Programs. </font> <h2> <font color="#FF0000"> Bios 533 Online Syllabus: </font> </h2> </body> </html>

  12. Basic HTML document structure - practical HTML Head: Title Body <html> <title>Susan Cates</title> <body bgcolor="#000000" text="#eeeeee" link="#337799" vlink="#337799"> <center> <h3>Ribbons Diagram of Carp Parvalbumin</h3> <img src="wt.jpg"></img> <p> <h1>Susan Cates, Ph.D.</h1> <h3>Laboratory Coordinator<br> Department of Biochemistry and Cell Biology<br> Rice University</h3></p> </center> <p> <h3>Course Web Pages</h3></p> <ul> <li><a href="http://www.bioc.rice.edu/bios532/bios532.html"><h4>Bios 532 </h4></a></li> <li><a href="http://www.bioc.rice.edu/bios533/bioinfo.html"><h4>Bios 533 </h4></a></li> </ul>

  13. Colors <body bgcolor="#000000" text="#eeeeee" link="#337799" vlink="#337799"> This is web page content here. </body> <font color="#FF0000">Bios 533 Online Syllabus:</font> 16 color names with their sRGB values: Black = #000000 Green = #008000 Silver = #C0C0C0 Lime = #00FF00 Gray = #808080 Olive = #808000 White = #FFFFFF Yellow = #FFFF00 Maroon = #800000 Navy = #000080 Red = #FF0000 Blue = #0000FF Purple = #800080 Teal = #008080 Fuchsia= #FF00FF Aqua = #00FFFF

  14. Elements and Attributes Elements are the sections or objects defining the document structure and format such as <head>, <body>, <font>, <list> and <table>. Attributes assign characteristics to the element, such as color, bgcolor, name, align. Examples: <body bgcolor="#000000" text="#eeeeee" link="#337799" vlink="#337799"> This is web page content here. </body> <font color="#FF0000">Bios 533 Online Syllabus:</font>

  15. Images element within an html document, supplemental files must be in same directory or specified by path Examples: <img src="wt.jpg"> <img src="header_title.gif" width="640" height="73" border="0" alt="NIH Home" usemap="#title"> <IMG src="http://www.somecompany.com/People/Ian/vacation/family.png" alt="A photo of my family at the lake.">

  16. Tables elements TABLE, THEAD, TBODY, TR, TH, TD <table summary="Element index. Columns are: Name, start tag required, end tag required, empty, deprecated, which DTD, and description" border="1" align="center"> <tr align="center"> <th>Name</th> <th>Start Tag</th> <th>End Tag</th> <th>Empty</th> <th>Depr.</th> <th>DTD</th> <th>Description</th> </tr> <tr> <td title="Name"><a href="../struct/links.html#edef-A">A</a></td> <td align="center" title="Start Tag">&nbsp;</td> <td align="center" title="End Tag">&nbsp;</td> <td align="center" title="Empty">&nbsp;</td> <td align="center" title="Depr.">&nbsp;</td> <td align="center" title="DTD">&nbsp;</td> <td align="center" title="Description">anchor</td> </tr> </table>

  17. Lists elements UL, OL <ul> <li><a href="http://www.bioc.rice.edu/~mscates/thesis.html"> <h4>Doctoral Dissertation</h4></a </li> <li><a href="http://www.rcsb.org/pdb/"> <h4>Link to the PDB</h4></a> </li> <li><a href="http://www-bioc.rice.edu/index.html"> <h4>W. M. Keck Center for Computational Biology</h4></a> </li> </ul>

  18. Anchors element A Each A element defines an anchor 1. The A element's content defines the position of the anchor. 2. The name attribute names the anchor so that it may be the destination of zero or more links (see also anchors with id). 3. The href attribute makes this anchor the source anchor of exactly one link. <a href="http://www.bioc.rice.edu/~mscates/thesis.html"> <h4>Doctoral Dissertation</h4></a

  19. Anchors Table of Contents Example <p><font size="+2"><a NAME="TOP"></a>Contents:</font></p> <p><font color="#0000FF" size="+2"> <ul> <li> <a href="#history">Brief History of NMR</a></li> <li> <a href="#basic">Basic Concepts of NMR</a></li> <li> <a href="#biochem">NMR for Biochemical Applications - Overview</a></li> <li> <a href="#label">Labeling and Sample Prep</a></li> <li> <a href="#analysis">Two/Three dimensional analysis </a></li> <li> <a href="#assign">Sequential assignment process</a></li> <li> <a href="#example">Applications example</a> </li> <li> <a href="#advantage">Advantages over crystallography</a></li> <li> <a href="#rice">NMR at Rice</a></li> <li> <a href="#links">Links to useful sites</a></li> <li> <a href="#ref">References</a></li> </ul> </font> </p> <a NAME="history"></a> <h3>I. Brief History of NMR </h3>

  20. <br> Line break - html text is “wrap around” - fits itself into browser unless author species a different structure - to skip lines or move to the next line the author must use <br> <hr width="100%"> Draws a line across the web page to separate sections.

  21. Viewing Page Sources from the Internet Mozilla - View: Page Source

  22. Viewing Page Sources from the Internet Mozilla - View: Page Source

  23. Dreamweaver (Rice IT dept. recommended software)

  24. Dreamweaver (cont’d)

  25. Placing the documents in the appropriate directory • Move file by ssh/ftp (requires correct permissions in the target directory) • B. Dreamweaver, Mozilla Composer and Netscape Composer can publish

  26. Embedding media other than image files @ http://cit.ucsf.edu/embedmedia/step1.php Will autogenerate code for the following media types: • Flash • Real Player • Quick Time • Windows Media

  27. Template files: www.bioc.rice.edu/bios576/

  28. EXAMPLE LIBRARY FILES: header_title.gif

  29. EXAMPLE LIBRARY FILES: header_title.gif is referenced in the html code The actual file header_title.gif must reside in the same directory as the html document or must be (1) referenced by relative directory or (2) explicitly by URL: 1. image_folder/header_title.gif 2. www.bioc.rice.edu/bios576/images/header_title.gif

  30. EXAMPLE LIBRARY FILES: include images and link “back to top” using anchor (a)

  31. Name the anchor “top” at the start of the table of contents: <p><font size="+2"><a NAME="TOP"></a>Contents:</font></p> Then link back to “TOP” later in the document (as many times as you wish): <h4 ><a href="#TOP"><i>Back to top</i></a></h4>

  32. At the bottom of your page: Author: Your name Mailto link to author’s email Last modified date <hr width="100%"> <h4><i>Author: Susan Cates</i></h4> <A href="mailto:mscates@bioc.rice.edu">mscates@bioc.rice.edu</A><br> Last modified Nov 2002. </body> </html>

More Related