Web Page Design
This hands-on course will focus on the use of applications such as Adobe Dreamweaver and Adobe Photoshop to create web pages for the Internet. The course will feature service learning in that students will be expected to collaborate with members of the school community to bring the work of various departments, clubs, and organizations to the World Wide Web.
- Click here for Web Page Design Course Expectations 2017/2018
- Click here to view my Opening Day Presentation.
- Students are expected to use MLA Formatting for all written work. Click here to see a sample paper written in MLA format presented by Purdue University. Purdue OWL is the gold standard of MLA resources.
- Click here for Assessment Rubrics.
- Click here to download a copy of the latest syllabus.
- Click here to visit a great resource for working with hexadecimal colors, courtesy of H. Daly, (OAHS Class of 2018). Visit the Links page for additional HTML resources.
- Click here for a Quizlet set for our Keyboard Shortcut Test #1, courtesy of C. Ando, (OAHS Class of 2018).
Having trouble with your tables and navigation shifting?
Try this strategy, courtesy of C. Crouch (OA Class of 2018).
- The page is shifting because of the scroll bar.
- Add a scroll bar to all of your other pages by clicking below your Master Table, and hitting enter until a scroll bar appears.
- File<Save All
- F12 to test your pages in Google Chrome
Trouble with your navigation?
- Select and copy this code:
- <div id="nav"><a href="index.html">home</a> | <a href="academics.html">academics</a> | <a href="interests.html">interests</a> | <a href="gallery.html">gallery</a> | <a href="interests.html"></a><a href="tutorials.html">tutorials</a> | <a href="links.html">links</a></div>
- Open your index.html page in Design view
- Select your navigation
- Switch to Split view
- Scroll down through the code until you see your highlighted navigation. It will be directly below your <body> tag
- Select everything from <div id="nav"> to the closing tag </div>
- Paste the code
- You may see some code below the <body> tag but above the code you just pasted. Delete it.
- Repeat this process on each of your pages
- Test again, repeat the previous steps if anything doesn't work.
Creating Folders in
Windows Explorer and Google Drive
Portfolio Procedure, Fall 2015
- Open Google Chrome, and sign in by clicking the icon of the person in the upper right hand corner, next to the minimize button.
- Navigate to Google Classroom, and then open your Web Design folder
- Create a new folder inside your Web Design folder, and name it Portfolio Fall 2015
- Create a new document, and name it lastname_firstname_personal_website_css
- Open Dreamweaver CS6
- Open your .css document
- Ctrl+A to Select All
- Ctrl+C to Copy
- Return to your lastname_firstname_personal_website_css in Google Documents
- Ctrl+V to Paste
- Enter a page heading
- Your name
- the teacher’s name
- the course name and section
- the date
- Print your work
Click here if you want to improve your grade on the pw_files assignment.
- Click the globe
- Save the Zip file in your html folder
- Right-click the folder
- Choose Extract All
Q: I got a low grade on the pw_files assignment. How did that happen? Is there anything I can do about it?
A: Yes. Figure out what you did wrong, correct all problems, and then show me your work after school. I will raise your grade. Let's look at what I wrote on the white board while you were working on the assignment:
White Board, 11/30/2015
- If your Title appeared one way on the page, and a different way in the Title Box in Dreamweaver, your grade dropped. For example, if the page says "Links" and the Title box says "links". The first is correct, as it is written in Title Case. In any case, they must match.
- If you typed your name starting with a lowercase letter, it is considered to be a spelling error, and your grade dropped. Of course, misspellings of any kind lowered your grade. Standard mistakes include "Acedemics" rather than "Academics", "Intrests" instead of "Interests", and "Turtorial" instead of "Tutorial". By the way, everyone makes typing errors. That's why I am going to use the Check Spelling command right now: Shift+F7.
- Your file names can't be spell checked in Dreamweaver. However, you can spell check the page, and then compare the two yourself. Remember the four acceptable character types: lowercase letters, numbers, underscores, and the dot. You can refresh your files by clicking the curled arrow icon, or by using the shortcut F5.
- Double check your folder and file structure against what's written here. Make sure that your image folder is inside your root folder, and that your root folder is inside your network folder. If this is incorrect, you must move them and/or rename them as the case may be. You will have to reset your Site Definitions if you move or rename your root folder. There is a tutorial to help you with this, below.
Remember to use the Check Spelling command before you save your work, and before you consider your work to be complete. The Check Spelling shortcut: Shift+F7.
We will begin today's class by reading an article, watching a video, and discussing what we have learned. Click on the link below, read the article, and then we will watch the video together. Be ready to discuss the article.
-Special thanks to S. Scolaro (OAHS Class of 2017) for bringing this article to my attention.