1 / 30

Web Design 101 How can we use the internet to communicate to our students?

Web Design 101 How can we use the internet to communicate to our students?. By Thomas Poon. Today’s Agenda . Building a Teacher/Class website Creating a banner in Fireworks. What is a website?.

janus
Download Presentation

Web Design 101 How can we use the internet to communicate to our students?

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design 101How can we use the internet to communicate to our students? By Thomas Poon

  2. Today’s Agenda • Building a Teacher/Class website • Creating a banner in Fireworks

  3. What is a website? •  A website is a collection of related web pages, images, videos or other digital assets that are addressed with a common domain name.

  4. What is a Domain Name? • Domain name is a series of characters that provides a label for a given Web location. • Examples: • Yahoo.com • Google.com • Pbs.org • Sub-domain name is to define another level of name pointers within the domain • Examples: • Mail.yahoo.com • content.websitegear.com • kb.brinkster.com

  5. How do you access your domain? • All domain names are assigned with a Domain Name System(DNS), a series of numbers. • DNS Example: 208.77.188.166

  6. Webpage Creation Software • Dreamweaver – www.adobe.com • Frontpage – www.microsoft.com • Many software are WYSIWYG – what you see is what you get. • Hint: It is not necessary to know the html codes to build a webpage.

  7. Online webpage creation • An online application that creates webpages. • Pbworks.com • Other online application • classnotesonline.com • Arisnyc.org • Many more …

  8. Getting started with pbworks.com • Before it became pbworks, it was called pbwiki. • A wiki is a website that allows the easy creation and editing of any number of interlinked Web pages, using a simplified markup language or a WYSIWYG text editor.

  9. What can you include on pbworks.com? • Images • Text • Video • Calendar • PowerPoint slide show • Photo slide show • Files

  10. Let’s Sign up for a Pbworks account. • Open Pbworks.com page in Internet Explorer. • Click on Plan & Pricing on the navigation bar. • Click on

  11. Sign up (cont’d) • Signup for the basic account for free. • Create an address for your website. • Complete the required information to begin your account.

  12. What are the common items we can place on the teacher’s webpage? • Teacher background/credentials • Contact information • Classroom rules and policies • Student work • Weekly/Monthly calendar • Class information/profile • Trip information/activities • Announcements • Homework/Assignments/Projects • Supply list • …

  13. Items on a webpage • Banner • Content • Links to other contents • Content, content, & content

  14. How do we make a banner? • A banner identifies the webpage to a website. • Banner is an image and will require an image editing program. • There are many image editing program. The program we will use is Fireworks.

  15. Sample Banners

  16. Imaging Basics • Contains a set dimension in Pixels. • Color Mode - always RGB (Red, Green, Blue) – visible light spectrum • Screen Resolution (72 ppi) pixels per inch - any higher will have a larger file size.

  17. Firework Layout • Menu Bar, Toolbar, Property Inspector, Layer Palette, and various palette

  18. Fireworks Toolbar Selection tools Image editing tools Drawing & writing tools Interactive tools Color tools View tools

  19. Firework tools for a simple banner • Selection Tool • Rectangle Tool • Text Tool • Properties Palette • Layers Palette • Assets Palette

  20. The width and height determines the sizes of the image file. In this example, the file size is 3.7MB Therefore, accurate image size is important to minimum file size. Creating a new document

  21. Starting to make a banner • New Document • Size: Width – 700 pixels Height – 125 pixels • Resolution 72 pixels/inch

  22. Importing Pictures:Drag and Drop Method • Find the image that you want on the internet. • Click and hold onto the image. • Drag it over the Fireworks windows. • The image will be placed in the last file you were working.

  23. Create your banner in fireworks • Take 10 minutes to make your banner.

  24. Upload your banner to pbworks • Click on the Upload files link(Located on top right hand corner) • Select the banner and upload to the server.

  25. Editing your page • Select the page and click on the edit tab. • Toolbar for editing your content.

  26. Formatting Text (Orange box) • Tables (Blue Box) • Items in Insert Plugin

  27. Creating pages • Create a new page

  28. Linking pages • Linking page (using Pages Tab) • Click on the file and it will automatically create a link onto your page. • Inserting Images • Select the Images and files Tab • Click on the image or file and it will automatically create a link onto your page.

  29. Creating your teacher’s webpage • Teacher background/credentials • Contact information • Classroom rules and policies • Student work • Weekly/Monthly calendar • Class information/profile • Trip information/activities • Announcements • Homework/Assignments/Projects • Supply list • …

More Related