Susan Cates Posting HTML documents to the Web Library using Dreamweaver Bios 576/577
I.Web Library - Purpose A.Prevents graduate students from having to reinvent the wheel B.Provides contact information for additional, supplemental information C.Showcases the resources of the Bioscience departments (BCB, BioE)
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
Netscape and Mozilla composers Viewing modes: Normal HTML Tags Source code Preview Publish tool Print tool
Normal and Preview Viewing Modes - see HTML objects, can’t see code
HTML Source Viewing Mode - shows source code
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 ( ) 2. HTML tags start with “ ”
Resources for HTML help A.The W3C HTML Home Page B.Dreamweaver Manual – available for check out from Susan Cates
Basic HTML document structure - formal HTML Head: Title Body <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " My first HTML document Hello world!
Basic HTML document structure - practical HTML Head: Title Body syllabus <body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#551A8B" alink="#0000FF"> This is the official web site for course BIOS 533, Bioinformatics & Computational Biology, offered at Rice University as a part of the Keck Computational Biology & Houston Area Molecular Biophysics Programs. Bios 533 Online Syllabus:
Basic HTML document structure - practical HTML Head: Title Body Susan Cates Ribbons Diagram of Carp Parvalbumin Susan Cates, Ph.D. Laboratory Coordinator Department of Biochemistry and Cell Biology Rice University Course Web Pages Bios 532 Bios 533
Colors This is web page content here. Bios 533 Online Syllabus: 16 color names with their sRGB values: Black = # Green = # Silver = #C0C0C0 Lime = #00FF00 Gray = # Olive = # White = #FFFFFF Yellow = #FFFF00 Maroon = # Navy = # Red = #FF0000 Blue = #0000FF Purple = # Teal = # Fuchsia= #FF00FF Aqua = #00FFFF
Elements and Attributes Elements are the sections or objects defining the document structure and format such as,,, and. Attributes assign characteristics to the element, such as color, bgcolor, name, align. Examples: This is web page content here. Bios 533 Online Syllabus:
Images element within an html document, supplemental files must be in same directory or specified by path Examples: <img src="header_title.gif" width="640" height="73" border="0" alt="NIH Home" usemap="#title"> <IMG src=" alt="A photo of my family at the lake.">
Tables elements TABLE, THEAD, TBODY, TR, TH, TD Name Start Tag End Tag Empty Depr. DTD Description A anchor
Lists elements UL, OL Doctoral Dissertation </a Link to the PDB W. M. Keck Center for Computational Biology
Anchorselement 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. Doctoral Dissertation </a
AnchorsTable of Contents Example Contents: Brief History of NMR Basic Concepts of NMR NMR for Biochemical Applications - Overview Labeling and Sample Prep Two/Three dimensional analysis Sequential assignment process Applications example Advantages over crystallography NMR at Rice Links to useful sites References I. Brief History of NMR
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 Draws a line across the web page to separate sections.
Viewing Page Sources from the Internet Mozilla - View: Page Source
Viewing Page Sources from the Internet Mozilla - View: Page Source
Dreamweaver (Rice IT dept. recommended software)
Dreamweaver (cont’d)
Placing the documents in the appropriate directory A.Move file by ssh/ftp (requires correct permissions in the target directory) B.Dreamweaver, Mozilla Composer and Netscape Composer can publish
Embedding media other than image Will autogenerate code for the following media types: Flash Real Player Quick Time Windows Media
Template files:
EXAMPLE LIBRARY FILES: header_title.gif
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.
EXAMPLE LIBRARY FILES: include images and link “back to top” using anchor (a)
Name the anchor “top” at the start of the table of contents: Contents: Then link back to “TOP” later in the document (as many times as you wish): Back to top
At the bottom of your page: Author: Your name Mailto link to author’s Last modified date Author: Susan Cates Last modified Nov 2002.