acadia institute for teaching and technology basic web page design for courses

Acadia Institute for Teaching and Technology

Basic Web Page Design for CoursesBasic Web Page Design for Courses


ACME vs. Custom Course PageACME vs. Custom Course Page

ACME• Simple to use

• Easy to update

• Hidden flexibility

Custom Page• Control look of site

• Embed media

• Linked pages


Limitations of the WebLimitations of the Web

• Font type (Arial, Times New Roman, Century)

• Size (8, 10, 12, 14, 18, 24, 36 points) - CSS

• Screen size (800x600 – include browser)

• Colors (safe color #’s 0, 51, 102, 153, 204, 255)

• Download speed (watch large images)

• Server storage (issues with video and sound)


Tables Tables

• Preparing a proper layout for a page

• Tables let you position items on your page easily

• Turn borders off

• Fix column size by pixels

• Do not use Frames: compatibility issues, printing problems, extra files and linking trouble

• Do use CSS for layout if you have the time


MenusMenus

• Be consistent on every page

• Always create a link back to your main page

• If menu items need to be in cells then create an embedded table to do this


FilenamesFilenames

• Don’t use spaces, special characters or capitals in the filename of any file or folder on your site.


Organizing Your FilesOrganizing Your Files

• Create a folder to hold allall of your web site files and/or subfolders

• More organization = more time saved– Files may include htm/html, pictures, word

documents, etc.– Decide if you need subfolders – if so, how will you

organize them?


Folder ExampleFolder Example


Absolute and Relative File NamesAbsolute and Relative File Names


Copying textCopying text

• Source (scanner, web)

• Copy the picture if text is an image

• Copy text from web by highlighting, copy (control+C) and paste (control+V)


Copying picturesCopying pictures

• Source (digital camera, scanner, web)

• Right click to copy picture from a page

• Copy the screen if image is in a table (Print screen)

• Before you add to web page (resize, crop, compress) this will reduce file size

• JPG for most pictures

• Gif for solid colors, simple animation and transparent color


Creating LinksCreating Links

• Copy link from URL

• Paste into page

• Note you can link to any other page on your computer, but watch the file structure


Uploading a web pageUploading a web page

• Save page in www folder on Network drive

• Keep elements of page together

• Watch spaces and special characters

• Copy all files


Creating a TemplateCreating a Template

• Templates save you TIME!• Decide on a layout that will include:

– Menu– Page heading– Content area– Title of the site

• Decide on a style (colors, fonts)• Save two copies!• Know the difference between a normal template and

a dynamic web template


Dynamic Web TemplatesDynamic Web Templates

• Pages defined with dynamic templates limit what areas of the page can be edited.

• Changes made to the dynamic template will be applied to all pages that were previously created using it

• Dynamic templates are proprietary and cannot be edited by other editors

• Costs for editors that can do this (Dreamweaver)• Used in powerful editors (good and bad)• Work well when pages will not be significantly

altered


Normal TemplatesNormal Templates

• Pages defined with normal templates do not limit what areas of the page can be edited

• Changes made to the template do not get applied to pages previously created using it.

• Normal templates are not proprietary and can be edited by other editors

• Cost is not an issue• Simple editors can do the job• Work well if you want to make significant changes to

pages


Acadia TemplateAcadia Template

• http://webmaster.acadiau.ca

acadia institute for teaching and technology basic web page design for courses

Documents