Building a Website using Site Builder Getting Started Request a site via webdev@whoi.edu. Go to http://www.whoi.edu/siteselect.do Log in using your email username and password Click on your site Site Builder Tool breaks down the a website by Site Page Items on the page such as Article or Content List After logging in, the general process is to first, set up your site properties using the Site Manager, and then add pages and subpages. For each page, you select a Type based on the content you want to display. The Type of Page determines what happens next. Site Overview The homepage of Site Builder tool. 1. Name of your website found on banner and in list of sites in Site Select 2. Main Navigation for Site Builder 1
3. Button to add top level navigation to site 4. Button to go reorder all pages of the site 5. Navigation that mirrors your site and a quick way to get to your pages 6. Page Search quick way to get to a page 7. Preview site shows pages and assets that are published (and enabled) and unpublished (and disabled) 8. View live site shows only pages and assets that are published (and enabled) 9. Allows you to delete your site 10. Shows if you site is published or unpublished 11. Link to get back to Site Select 12. Link to webdev@whoi.edu use for questions Site Manager Where you can add, edit or view information about the site. 1. Descriptive Information this is where you can edit the banner title and add/edit the banner subtitle 2. Site Settings this is where you would add site contact, view if the site is published or not and edit site privacy settings. 3. Site Footer this is where you can add new pages to the footer, select from ones that are already on the site and add a Site Map. Page Manager Where you can add new pages and reorder pages. You can also edit, view, publish and add subpages from here. 2
Admins & Roles Where you can add Site and Page Administrators to your site. Adding Pages to your Site I. There are two ways to add a top level page to your site 1. Select add page from the page tree on the left 2.From Page Manager select the Add New Page button at the top II. Add page title 3
III. Select a page type based on the content you want to display There are three groups: Article Pages, Index Pages and Miscellaneous Pages. There is an image and description for each type of page with a group. The most commonly used pages are: Standard Article Multiarticle Content List Universal Index Page One Column Index Page Two Column Slideshow Site Map 4
Page Type: Standard Article 1. Content Where you add an article (see below*) or search for an article (including all Oceanus stories and News Releases) 2. Descriptive Information Where you add/edit Page Name, Link to Text, Callout Text and Image, Meta Description and Keywords for search and Page Introduction. Page Name Title of the page for all page types except the standard article page. Also appears on top bar of Internet Browser window and is used by search engines to help locate the page. Link to Text Callout text Introduction Meta Keywords Meta Description Originally Published Date Callout image Frontpage image Button text that links to the page. If not filled out Page Name will be used. Brief introductory text describing the page. Appears on parent index page under Page Link to Text or Page Name. Introductory text appears under the Page Title on all page types. It is highly recommended that you fill out this field with 6 7 keywords related to the page you are creating. Internal and external search engines use these keywords to help find your page. Use this field on all pages except Standard Article. It is highly recommended that you fill out this field with a description of your page. Internal and external search engines use this description in the search results. Use this field on all pages except Standard Article. This field is currently not being used. Image (either 75x75 or 140x100) representing the page. Appears on parent page with callout text. This field is currently not being used. 5
3. Setting Where you Publish the page, edit Type of Page and Privacy Setting, and view Parent Page and Date Created and Last Modified. Status View if the site is published or not. Type of Page Privacy Settings Parent Page Created Last Modified Select from a series of templates that determine the look and functionality of your page. Indicate whether you would like this page to viewed by external and internal audiences or by internal audiences only. The page that navigational appears before this page. The date when this page was created. When and who lasted updated this page. 4.Subpages Where you add or reorder subpages. *Adding a Standard Article to your Site I. Select add Article II. Insert Title of the Article This will show up as the Title in the main content area of the page and will be displayed by the browser as the title of the page. This title can be different from Page Title you added when you created the page. The Page Title will show up in left nav unless you use link to text to change it. 6
III. Add Article Information 1. Article Descriptive Information Headline/Title Title of article appears in main content area Link to Text Subhed/Subtitle Byline/Author Dateline Originally Published Callout Image Front page Image Callout Text Meta Keywords Meta Description If you are linking to an article from the content list you can fill out this field and that text will appear as the link that goes to the article. If you do not fill this out, the link by default will be the article title. Appears under the title Author field appears under the subtitle in smaller font Dateline field appears under the byline/author in same font Appears at the bottom of the page above the last updated. It is good to fill this out if you are posting an article that was published prior to the date published on the site. Callout image for a Content List This field is currently not being used. Callout text for a Content List It is highly recommended that you fill out this field with 6 7 keywords related to the page you are creating. Internal and external search engines use these keywords to help find your page. It is highly recommended that you fill out this field with a description of your page. Internal and external search engines use this description in the search results. 7
2. Text Sections Using the wysiwig tool, you can add text with links, symbols, tables, etc. and change the formatting. The html button allows you to edit html. The paste from Word button allows you to copy a Word document and keep the formatting. You can add multiple text sections that you can reorder and/or disable (the default is enabled). The Section Head creates a different color heading for the section. Select Save the Section when done adding text. 3. Sidebars A journalistic term for a text area that appears in a different color table at the bottom of the text sections. This is used if you want to add a supplemental side content that complements the main content 4. Related Images Upload from your computer an image that is either a gif, jpg or png Related fields include alt text, caption, credit Choice to automatically create a thumbnail image or to upload a your own o Thumbnail image appears in the main article page and clicks to off to the main/enlarged image you have uploaded. o If you choose to auto generate the thumbnail, it will crop the image you upload to a width of 300px o Standard images sizes 700px for enlarged, 300px for thumbnail 5. Related Slideshows Add a title to the slideshow Optional fields include: o callout text (text that appears in the article and calls out to the slideshow) o introduction (text that appears within the slideshow) Upload images from your computer for the slideshow Images can be re ranked based on preference Once you add a slideshow, you can add an icon that will appear next to the callout text 6. Related Audio/Video/Flash Search for video/audio/flash that is already on the site by title For new Video/Audio o Add a title for the video o For each video you can upload a quicktime, wmv, and REAL formatted video o You need to input the dimensions of the video clip Typical size is 320x240 o Optional fields include: callout text (text that appears in the article and calls out to the slideshow) caption (text that appears next to the video) For Flash o Add title of Flash o Upload the flash from your computer Once you add audio/video/flash, you can add an icon that will appear next to the callout text 7. Related Files Upload any type of file from your computer, including pdf, ppt, zip, etc File name is the text that will appear as the file title File description is the text that will appear below the file name Once you add a file, you can add an icon 8
8. Related Links Title of the url (name), the url (URL) and content that appears under the title/name (description) when creating a url You may find that you are asked whether or not you want to use a url that already is in the system or to create a new one. This is if you are using a link on multiple pages and want to use the same data on each page. This allows you to just change it once on any article, if the url changes. Once you add a link, you can add an icon IV. When done adding content (text and related assets items #2 #8), select Done Editing Content V. You will return to the Page where you will have to Publish the Article and Publish the Page in order for content to appear on the site. Example below: and see htttp://www.whoi.edu/page.do?pid=20857 9
Page Type: Content List Content lists are lists of content that appear within your page. These lists of content can be lists of article, video/audio, flash, slideshows, files, images, and links. Each content list has a title bar above the list. The title bar shows the Content List title (you can remove bar if necessary as well). You can put multiple content lists on a page. 1., 2., 3., 4. above are the same as for an Article Adding Content Lists to your Site I. Choose add Content List II. Insert Content List title (shows up in bar) and type of content list (you can select from article, video/audio, flash, slideshows, files, and links). III. Types of Content Lists 1. Article You can either add a new article or search for an existing article by article title Fields it uses: (the following fields are located in the article s descriptive information) Link to text of Title 10
o To link to the article, the system will first look to see if you have filled out link to text. If you haven t filled this out, then it will default to the article s title Callout text Originally published date o If you do not select and originally published date, then no date will appear Source o If you have searched and selected an Oceanus article or news release, the system will automatically fill out this field Icon (this field appears within the actual content list) o You can add an icon image (jpg, gif or png) to each article o Standard size is 75x75px 2. Video/Audio You can either add a new video/audio or search for an existing by video/audio title Fields it uses: (the following fields are located in the video/audio s descriptive information) o Video Title o Callout text o Uploaded video/audio files o Icon (this field appears within the actual content list) You can add an icon image (jpg or gif) to each article Standard size is 140x100px 3. Flash You can either add a new flash or search for an existing flash by flash title Fields it uses: (the following fields are located in the flash s descriptive information) o Video Title o Callout text o Uploaded Flash file o Icon (this field appears within the actual content list) You can add an icon image (jpg or gif) to each article Standard size is 140x100px 4. File Fields it uses: o File Name o Description o Uploaded File 5. Link Fields it uses: o Name o URL o Description 11
Example below: and see http://www.whoi.edu/page.do?pid= 20858 12
Page Type: Multiarticle Many articles Has On this page functionality Image(s) on the left Related link, files, multimedia below the text Page Type: Universal Page Standard article Content list Page Type: Index Shows links to subpages in one or two or three columns Shows subpage s callout text and image Page Type: Site Map Automatically generated by Site Builder Appears in the footer Used by search engines to index the site Additional Other Information All pages have. Title, Share, Email, Print, PDF, Text size increase (top right) Last updated date (bottom) and footer with copyright and link to our Privacy Statement and a link at the top back to WHOI. Viewability. Everything on the site can be turned on or off. To make items show up on your site or turn them on, you have to make sure they are published or enabled. Items include; pages, articles, content lists, images, multimedia, files and links. Privacy. Your site and the pages and assets on the site can have various levels of privacy. Externally and Internally Internally only Password protection (set up by contacting webdev@whoi.edu) o Give everyone at WHOI access, o Give a group one username and password or o Only allow a selected group at WHOI to access using their email username and password. Admins and Roles. You can give anyone at WHOI Administrator rights for the whole site or individual pages. To give people outside of WHOI Administrator right, please contact webdev@whoi.edu. Sharing articles. You can articles any articles on your own site as well as all Oceanus articles and New Releases. To share other articles and assets onto your site, please contact webdev@whoi.edu. Images. Standard images sizes are 700px for enlarged image, 300px for thumbnail image, 140px x 100px or 75px x 75px for callout images. There are online tools listed in the resource section for resizing images. Other. For your site, you can request: User friendly url Search Functionality Statistics Banner Design 13
Resources Image Resize Tools http://www.resizeimage.4u2ges.com/ http://www.resize2mail.com/ http://www.picresize.com/ Special Characters http://www.ramsch.org/martin/uni/fmi hp/iso8859 1.html Image/Art Credit Guidelines http://www.whoi.edu/fileserver.do?id=24063&pt=2&p=28566 Writing for the Web http://www.whoi.edu/fileserver.do?id=24064&pt=2&p=28566 Demo Pages http://www.whoi.edu/page.do?pid=20856 14