Download presentation
Presentation is loading. Please wait.
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
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)
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 ( ) 2. HTML tags start with “ ”
9
Resources for HTML help A.The W3C HTML Home Page - http://www.w3.org/MarkUp/ http://www.w3.org/MarkUp/ B.Dreamweaver Manual – available for check out from Susan Cates
13
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"> My first HTML document Hello world!
14
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:
15
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
16
Colors This is web page content here. Bios 533 Online Syllabus: 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
17
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:
18
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="http://www.somecompany.com/People/Ian/vacation/family.png" alt="A photo of my family at the lake.">
19
Tables elements TABLE, THEAD, TBODY, TR, TH, TD Name Start Tag End Tag Empty Depr. DTD Description A anchor
20
Lists elements UL, OL Doctoral Dissertation </a Link to the PDB W. M. Keck Center for Computational Biology
21
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
22
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
24
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.
25
Viewing Page Sources from the Internet Mozilla - View: Page Source
26
Viewing Page Sources from the Internet Mozilla - View: Page Source
27
Dreamweaver (Rice IT dept. recommended software)
28
Dreamweaver (cont’d)
29
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
30
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
31
Template files: www.bioc.rice.edu/bios576/
32
EXAMPLE LIBRARY FILES: header_title.gif
33
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
34
EXAMPLE LIBRARY FILES: include images and link “back to top” using anchor (a)
35
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
36
At the bottom of your page: Author: Your name Mailto link to author’s email Last modified date Author: Susan Cates mscates@bioc.rice.edu Last modified Nov 2002.
Similar presentations
