building websites at NAU


Published on

1 Comment
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

building websites at NAU

  1. 1. BuildingWebsitesGSAAL, Feb 1, 2013 Follow along:
  2. 2. Why bother? Professionalpresence on the web Set up a CV and teaching portfolio Personal Learning Network (Randall)
  3. 3. Basic terms Site: a purposeful collection of web pages and files hosted on a server and navegable via a web brower. Page: a single text-based file within a website. Usually these have extensions like .htm, .html.
  4. 4. What to have on your page A light/dynamic digital CV  Web version of CV (use office address)  Sample materials, teaching philosophy, research interests, etc.  Professional picture of yourself. Resources to courses you teach (e.g., links to blogs, wikis, etc.) Copies of presentations, etc. (format appropriately, make sure you have permission). Limit personal information to what you feel comfortable with. Use PDFs when possible.
  5. 5. Ways to do it…1. Create a web page on your computer and upload it to a service that hosts webpages.  Control your content entirely  Have all your files locally2. Create a web page in a browser using a service like Google Sites, Wordpress, etc.  Permanent access/edit your page  Pre-designed materials are easy.
  6. 6. Create your ownThere are lots of programs to create your ownwebsite.1. Create a text file using Notepad. This requires coding in Hypertext Markup Language (HTML).2. Use a web editor like Dreamweaver or iWeb. These are sophisticated programs with lots of options.3. Create a Word document and save it as a web page (this is what we are doing)
  7. 7. Create your ownA simple web page file is a.htm/.html file (a Word file is.doc or .docx). This filecontains all the text andcoding for your web page andis the main part of a website.All the other stuff with a webpage (images, video, etc.) goin a “backpack,” a folder thatis associated with the HTML file.Most programs automaticallycreate the folder when yousave the HTML file.
  8. 8. Create your own site Login to your computer (make sure you login to nau-students). Find the W: (Webhome) drive on My Computer  If your Webhome drive does not appear, use Mapdrive to access it. This is where you will store your webpages and associated files. Anything you put in this drive (W:) is accessible online.
  9. 9. First steps Open Microsoft Word, a new document. Type in a brief greeting (doesn’t matter what). Click “Save As” Name the file index (verbatim, lower case, no spaces) File Type: choose Web Page. Save in your W: (in the main folder of this drive).
  10. 10. Test1. Open up a browser.2. Type in the URL: (replace username with your own NAU username, e.g., You should see your greeting.Congratulations! You’ve created a website.You can use the browser to test changes as youdevelop your site (just save the files first and reload inthe browser). Now, let’s make it better…
  11. 11. Text in your site Sans-serif fonts are easier to read on computer screen (i.e., instead of Times New Roman, use a font like Tahoma, Arial, etc. Indenting generally not used (and doesn’t function properly). Just use breaks in the text. You can create tables in Word and save them onto your website. However, they often do not render correctly (test them out).
  12. 12. Images You can insert images into your web page via Word (just like you would do with a doc). When you save the page, the image will automatically be saved in the sub folder (i.e., the backpack folder) for that page. Think about the size of the image before adding it. Test the dimensions of images. Use images, etc. that you have the rights to use.
  13. 13. Links AnHTML page can link to pretty much anything.  Web pages anywhere on the internet  Other web pages on your same site (websites often consist of multiple interlinked web pages that are stored in the same place).  Documents on your website or elsewhere.  Let’s create some links…
  14. 14. Creating links.1. Go back to your index page in Word.2. Type in GSAAL. Highlight the text with your mouse.3. Right click and choose Hyperlink (you can alternately find this in the Insert menu)4. In the address field type in Hit OK, Save the file, test it in a browser.
  15. 15. Linking to your other pages Let’s create another page and then create links between the two pages. Open a new document in Word. Save it as a web page in the W: Name the file resume. On this page, make a note to label the page (later you can add your resume to this page). Save the page.
  16. 16. Linking to your other pages We now have two pages on our website…but they are not connected. Return to your index page (in Word). Type in My Resume (or my CV or whatever). Highlight the text, right click, and choose Hyperlink. Using the “Look In:” Menu, find the resume.htm file in your W: drive. Click on the document and hit ok. Save the page and test it in a browser. You may want to now create a Home link (or similar) on your Resume page.
  17. 17. Linking You can not only create links using text on your webpage, but basically any object can be turned into a link. Add an image to your page, right click, and choose Hyperlink. The linking works the same way.
  18. 18. Editing and accessing yourwebsite On campus network computers, you always have access to your Webhome (W:) drive. If you do not, download a program called Mapdrive from the NAU ITS page. From remote computers, log in to the NAU Virtual Private Network. To access the NAU network from home, use virtual lab:
  19. 19. Alternative: Google Sites Easy to access and edit site (through web browser) Free, permanent (you retain after you graduate) Link/base to other Google apps for education, etc. (Blogger, Groups, Hangout) Have multiple Google Sites; Use a Google Site as a wiki.
  20. 20. Creating a Google SiteBeginning tutorials: Go to and sign in with your NAU address (don’t enter a password, just click Sign In2. Click on the red button that says create…
  21. 21. Creating a Google Site1. Choose a template, if you like (You can add one later as well).2. Name your site... This doesn’t matter and can be changed later.3. Site Location This does matter and cannot be changed. This will be the URL of your site.4. Proceed to the next page.
  22. 22. Google Home Page You now have your home page (similar to the index page on your W: site). You can edit this page by clicking on the pencil icon in the top right. Editing works a lot like Word (you can control the layout, insert links and images and documents, etc.) You can add a sub-pages to your site (link from one to another and add toolbars). You can manage your site as a whole
  23. 23. Google Site Wiki To create a wiki using Google Site, plan out the different areas of content you want to start with. Create subpages for each area/topic, link these to a toolbar. You can add a search gadget in site layout. Share permission to edit the site w/ others. You can set the access level for each page on the site. (More -> Sharing & Permissions)