Dr. Chalmers WWU

Chalmers Home
-------------
WWU Home
PAGE INDEX

HLED 435 Home

Set up

Creating web pages

Editing graphics

Editing web pages

Styles (fonts) to use


Health Education 435 Web Page Lesson

Set Up (done once when preparing to create the web site) 
  • Show Chalmers web page, and sub pages.  Note: top banner, bottom footer, left navigation sidebar same on all pages.
  • If you want to add a new item to navigation bar or banner or footer, do not want to have to make change on dozens of pages that contain the bar, banner, footer.
  • The navigation bar or banner or footer are contained ONCE in a separate file to be INCLUDED in the final web page when it is displayed.
  • NOTE:  the navigation bar, banner & footer are not in the page file.  They are in separate "INCLUDE" files.  Make a change ONCE in an "INCLUDE" file and the change will show up on all the pages that "include" that page element.
  • The actual page contains only the page specific content.

 

  • Set up U:drive to host your web site in myweb folder:  http://west.wwu.edu/atus/web/myweb_labpc.shtml
  • Use a TEMPLATE of a web page to get you started.
    • WWU template: http://west.wwu.edu/atus/web/templates.shtml  (many other templates available for free or purchase on the web)
    • Download it = save it into your "myweb" folder (do not just open it), "open" at the end of the download, "extract all files" into Templates folder by: next=>next=> finish
    • Select everything inside the new "templates" folder and "CUT" it, then move up one level and paste it inside the "my web" folder", say "YES" to overwrite  templates folder. (zip folder can be deleted)
       
  • Students: To view your web, visit http://myweb.students.wwu.edu/[username] where “username” is your universal username.
  • Faculty: To view your web, visit http://myweb.facstaff.wwu.edu/[username] where “username” is your universal username. Instructor:  http://myweb.facstaff.wwu.edu/chalmers/435myweb/index.shtml

Creating Web Pages (done once when preparing the web site pages)  

NOTE:  
  • all files must go into the "my web" folder.  Pictures and all other files can not be elsewhere on your computer. 
  • Filesname rules:  
    • no spaces
    • do not start with #
    • no special characters (e.g. &, *, #, -,)
    • files names are case sensitive

Now edit the pages using your web authoring software.

  • file => open=> index.shtml  (your home page)
  • file => open=> includes/nav.html  (your left side bar navigation)
  • file => open=> includes/news.html  (your right side bar breaking news)

edit:  index.shtml  (your home page)

  • type your name in the top blue text, then your interest after your graduate in the text blow this, save the file
  • highlight the first "Related Links" "Link 1":  replace the text with "Center For Disease Control" (no quotes), then make the text a link to:  http://www.cdc.gov  (Related links will show up only on the page you place them).

edit:  news.html  (your right side bar breaking news)

  • type "Contest closes on May 25th", save the file  (this news will show on all your pages)

edit:  nav.html  (your left side bar navigation)  Set up your navigation around your site pages.

  • top line:  Home  (enter COMPLETE link address to your site home page: http://myweb.students.wwu.edu/[username]
  • 2ND line:  More Info  {this will be your second page}  (enter COMPLETE link address to your site 2nd page: http://myweb.students.wwu.edu/MoreInfo.shtml  {NOTE THAT THIS IS CASE SENSITIVE}
  • 3RD line:  Health 435 page  {this will be link to external page}  (enter COMPLETE link address to the external page: http://myweb.facstaff.wwu.edu/chalmers/435.html  {NOTE THAT THIS IS CASE SENSITIVE}

 

Now create your page 2,  by duplicating your index page, using your web authoring software.

  • file => save as =>  MoreInfo.shtml  (your 2nd page)
    • NOTE: THAT THIS FILE NAME IS CASE SENSITIVE.
    • NOTE: THAT YOU MUST SAVE THE FILE AS ".shtml". TYPE THIS EXTENSION INTO THE FILE NAME FIELD AS NEEDED.
  • new: reopen your index.shtml

edit your page 2:  MoreInfo.shtml  (your 2nd page)

  • type the name of your favorite university in the top blue text, then your favorite activities at that school in the text blow this, save the file.
  • highlight the first "Related Links" "Link 1":  replace the text with "NIH" (no quotes), then make the text a link to:  http://www.nih.gov  (Related links will show up only on the page you place them).

View your page in a web browser: http://myweb.students.wwu.edu/[username]

( To view your 2nd page in a web browser if you don't yet have a link to it yet from your home page: http://myweb.students.wwu.edu/[username]/[MoreInfo]  (this assumes your 2nd page file name is MoreInfo.shtml)

  • try navigating from home page to 2nd page and back, and to external pages.
View your page within the web authoring software (does not require that the files are in a web server)
  • use the "Preview" tab in web authoring software.

Edit the two pages to remove sample content and error in the template.

  • On both home page and 2nd page:
    • Delete the two yellow boxed !! symbols at the bottom of the Nvu page (to remove font samples included in the displayed file)
    • Open footer.incl file in "Includes" folder, and delete the WWU icon figure on the right (you can edit the footer links here if you wish).

Editing Graphics 

IF TIME:  edit top banner.  To modify a banner (.jpg) using Gimp

  • Make backup copy of: U:\myweb\resources\banner-home.jpg
  • Start Gimp
  • Open file:
    • U:\myweb\resources\banner-home.jpg
  • Menu: Dialog: Layers (to show layer dialog box)
  • Wipe out existing text and bars at bottom:
    • Click on color picker eye dropper
    • Click on blue color in banner (observe blue color is in the foreground color box)
    • Click on rectangular selection tool
    • Drag and select all of the banner
    • Click on Bucket fill tool, and select “fill whole selection”
    • Click on banner (to fill it blue)
  • Select text tool “A”
  • Change color to white
  • Click on banner where you want your name to go
  • In text editor window type: your page name
  • Change font style and/or size in text control box
  • Close text editor box
  • Shut off “eye” of background layer (to allow you to see only the TEXT layer)
  • To MOVE the text:
    • Select 4 way headed arrow tool
    • Click on the white font of text to move
    • Drag position
  • If needed:  delete text layer and start text on banner again.
  • To save:
    • Make sure all picture layers are visible
    • File: Save:
    • EXPORT: SAVE
  • Add an image to the banner:
    • Locate and download  an image from the web
    • Create new layer in the banner image.  While new layer is being created note the vertical size of the banner.
    • Open the new image in Gimp.  Resize the image to be a bit smaller than the vertical size of the banner size (to leave blue margin at top and bottom)
    • Select the resized new image
    • Paste the resized image into the banner image, and position image
    • save
  • Refresh web pages to see change to banner on all the pages.

Editing Web Pages (done to revise the web site pages) 

Add content to your home and second pages using your web authoring software:

  • file => open=> index.shtml  (your home page)
  • file => open=> MoreInfo.shtml  (your second page)
  • file => open=> includes/nav.html  (your left side bar navigation)
  • file => open=> includes/news.html  (your right side bar breaking news)

ADD

  • pictures
  • text  NOTE:  let the cascading style sheets (CSS) format the text.  See the instructions on your home page (these instructions will be removed by deleting the "include" that inserts them):
The styles that you see below are the only ones that should ever be used when implementing this template. Please do not create custom font styles, sizes or colors. Bolded and italicized styles are acceptable.

Heading 1 

Heading 1 provides the largest font size available on this template. It should only be used once at the top of your content area to indicate the title of the page.

Heading 2

Heading 2 is great for pages with multiple sections, as it can be used to better categorize content

Use the other headings to divide your content into more subsections.

Heading 3

Heading 4

Heading 5
Heading 6

Unordered list:

  • List item 1
    • Sublist item 1
    • Sublist item 2
  • List item 2
  • List item 3

Ordered list:

  1. List item 1
    1. Sublist item 1
    2. Sublist item 2
  2. List item 2
  3. List item 3
  Report Problems with this page