Web Design Course. Home Page. Join in. Home. Objectives. Course Content. Assignments & Discussion. Grades. Help. Contact Me aab43@uakron.

Size: px

Start display at page:

Download "Web Design Course. Home Page. Join in. Home. Objectives. Course Content. Assignments & Discussion. Grades. Help. Contact Me aab43@uakron."

Howard Houston
8 years ago
Views:

1 Home Page Web Design Course Join in Navigation Bar: Home Objectives Course Content Assignments & Discussion Grades Help Contact Me Welcome to web design course., This course is designed to immerse you in the concepts of designing for the website business. This course will be completed entirely online over the next five weeks. It is my hope that the shell of this course will grow into a resource that you, as well as future classes, can use as a dynamic resource when designing your website. Please contact me by phone ( ) or (aab43@uakron.edu) if you have any questions or concerns about this course. I suggest posting these questions at discussion page to help other colleagues

It is my hope that the shell of this course will grow into a resource that you, as well as future classes, can use as a dynamic resource when designing your website.

2 Objectives Page Web Design Course Log out Navigation Bar: Home Objectives Course Content Assignments & Discussion Grades Help Contact Me Course Objectives: At the conclusion of this course, you will be able to: Be familiar with the website designing research and trends and to explore its skills. Apply elements and principles of visual design effectively. Apply tools such as digital image, audio, and video editors and digital authoring tools to create a simple website. Apply html/xhtml programming skills and webpage design principles to develop web-based instructional materials.

explore its skills. Apply elements and principles of visual design effectively.

3 Course Content Page Web Design Course Log out Navigation Bar: Home Objectives Course Content Assignments & Discussion Grades Help Course Content: Course information.pdf Guidelines for Writing your discussion and reflections.pdf Introduction to web design: 1. HTML - An introduction to the computer language which forms the heart of web pages. 2. Editors - Tools you can use to help create websites. Contact Me aab43@uakron.edu

pdf Guidelines for Writing your discussion and reflections.pdf Introduction to web design: 1.

4 Assignments & Discussion page Web Design Course Log out Navigation Bar: Home Objectives Course Content Assignments & Discussion Grades Help Contact Me Course Assignments: Week 1: Create a Simple HTML page by Using Notepad. Week 1 Assignment instruction.pdf Week 2: Create a Simple HTML page by Using Dreamweaver. Week 2 Assignment instruction.pdf What is your favorite website, why? Week 3: Edit Images File by Using Photoshop. Week 3 Assignment instruction.pdf Week 4: Create video File by Using Windows Movie Maker. Week 4 Assignment instruction.pdf Document for your final website. Week 5: Final Project Week 5: Project instruction.pdf

pdf Week 2: Create a Simple HTML page by Using Dreamweaver. Week 2 Assignment instruction.pdf What is your favorite website, why?

5 These are examples of my instruction to do the assignments: Week 1 Assignment instruction.pdf: Create a Simple HTML page by Using Notepad. After reading the Introduction on the content page you should create a web by using Notepad: I. How to open Notepad Open Notepad (Start > Programs > Accessories > Notepad) II. Write this text on the Notepad. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns= xml:lang= en lang= en > <head> <title>my First Web Page</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <p>some info about yourself.</p> <p>more info about your.</p> </body> </html> This is the title of your page and it will show when you using the internet browser.

Write this text on the Notepad. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.

Press save or click Save IV. Review your web page Remember the location that you saved your Home.html. 1. Close Notepad. 2.

6 III save the File 1. In the Notepad window, click: File > Save As The Save As window will open 2. in the filename field, type: For the your first page, you might Consider name it as index.html 3. In the save as type field, select All files (*.*) 4. Press save or click Save IV. Review your web page Remember the location that you saved your Home.html. 1. Close Notepad. 2. Open your web browser such as Microsoft Internet Explorer, then click File > Open > Browse and find index.html. it will display. Whatever you write between open and close body tag, it will display. This is the title of your page

V. edit your page 1. Right click, on your page and then select view source "You will see the Notepad file. 2. After editing, you must save these changes. 3. Refresh the page.

7 V. edit your page 1. Right click, on your page and then select view source "You will see the Notepad file. 2. After editing, you must save these changes. 3. Refresh the page. VI. Add Image to your page 1. HTML code: <img src="name of image.jpg" alt="description of the photo" width="150"height="95 /> 2. Copy this code and paste in the between body tag.

After editing, you must save these changes. 3. Refresh the page. VI.

8 3. Save the page. 4. Refresh the browser. The Assignment: After reading the instructions, you should create a web named index.html to introduce yourself and upload at least one picture to it. Then write a summary on this web page about what you did.

Week 2 Assignment instruction.pdf: Create a Simple HTML page by Using Dreamweaver. Introduction: Adobe Dreamweaver software is one of the most web editor that has been used through designers.

9 Week 2 Assignment instruction.pdf: Create a Simple HTML page by Using Dreamweaver. Introduction: Adobe Dreamweaver software is one of the most web editor that has been used through designers. As well as Netscape Composer, FrontPage, etc. Dreamweaver allows you to review three types of work: code, design and split view. You can use design tools and features and you will see the exactly the same design that you did on your page. You can also edit your code source because this software is separating the design and code. I. How to create new file Once you open Dreamweaver, a new box will come up. Click on HTML under Create New to create a new.html web page file. You can also open existing pages, such as the pages that you have created in previous units, by clicking on open under open a recent item to locate the files. II. Some information about Dreamweaver interface. Insert Bar Code area Split review options Design Area

You can use design tools and features and you will see the exactly the same design that you did on your page.

10 III Insert table 1. Select insert > table. 2. Choose how many rows and columns.> OK

3. Some table's features : To organize the page. You can write and add image in each cell. IV. Insert images 1.

11 3. Some table's features : To organize the page. You can write and add image in each cell. IV. Insert images Select insert > table. 2. Select the location of the images then select the image. 3. A new window will come up to write the alternate. 4. Press Enter.

12 V. Save the page. 1. Select file> Save >choose the location and name of the file. VI. Review the page. Do the same step that you did it in the week 1 assignment.

14 Grades Page Web Design Course Log out Navigation Bar: Home Objectives Course Content Assignments & Discussion Grades Help Contact Me Grades: Students Id Grades W 1 W 2 W 3 W 4 W 5

15 Help Page Web Design Course Log out Navigation Bar: Home Objectives Course Content Assignments & Discussion Help: FAQ's Adobe Dreamweaver (trial ver.) Adobe Photoshop (trial ver.) Grades Help Contact Me

Discussion Help: FAQ's Adobe Dreamweaver (trial ver.

Learnem.com. Web Development Course Series. Quickly Learn. Web Design Using HTML. By: Siamak Sarmady

Learnem.com. Web Development Course Series. Quickly Learn. Web Design Using HTML. By: Siamak Sarmady Learnem.com Web Development Course Series Quickly Learn Web Design Using HTML By: Siamak Sarmady L E A R N E M W E B D E V E L O P M E N T C O U R S E S E R I E S Quickly Learn Web Design Using HTML Ver.