Step 2 Designing the Web Site and Creating Basic Web Site
Figure 1 - Working with multiple files. Viewing the template pages in the browser.
1. Template. Create the template page with content regions defined. Link the style sheet and theme to the template page. Add in some content to test it.
2. Cascading Style Sheet: Create the style sheet and link it to the template page. Use a variety of styles and properties. Make sure to properly document the style sheet. You should keep as much of the style information contained within the style sheets. Use the style sheet to format the properties of the DIV tags. Use CSS styles to format the content. Avoid the use the local style or HTML attributes when possible. Use the lectures and lessons from class as a guide. Create CSS styles to allow you to create a mouseover effect for your entire menu. You should do this in the external CSS file so that it is easier to maintain.
3. Navigation. Set up your navigation using your template. Use the lectures and lessons from class as a guide.
Sample page - This is an example of a web page with a clear and consistent navigation.
[IMAGE][SRC][/SRC][ALT][/ALT][WIDTH]100[/WIDTH][HEIGHT]100[/HEIGHT][STYLE]width: 665px; height: 488px;[/STYLE][/IMAGE]
Figure 2 Clear and Consistent Navigation
4. Content Pages. Create the individual content pages using your template.
5. Compare and Contrast uploading files to a web server – On one page, please provide a discussion of how you would plan to obtain a domain, locate a hosting provider and upload your files to a live web site.
6. Add Content And Appropriate Content Only You must put content in the page. Look at other web sites. They are filled with content. You need to make sure you create a full page, not just “placeholder” and dummy content! You will use this site throughout the term. So spending a few extra minutes will help you in the long run.
You can put any reasonable content in the page. The content must be professional, follow school, department and classroom policies and must not be illegal content or violate copyright laws. And for students in the military, I know I don’t have to remind you to please don’t use anything sensitive. In other words, keep it decent and please do not use anything controversial, inappropriate or unprofessional.
Make sure to use "appropriate content" for a college course at Park. If you are not sure if the content is appropriate, ask the instructor in the discussion area. Examples of inappropriate content are flaming, pornography, illegal or illicit material. While there is freedom of speech and expression, the instructor reserves the right to ‘not grade’ or give a 0 to any assignment that they feel is offensive or any of the above. I’ve only had less than a handful of students in different colleges try to submit inappropriate material, so this shouldn’t be a problem for most students. Think of this like a scholarly research term paper that you would submit in a marketing class.
Do not put ‘filler content’ such as the default latin text from editors or blah blah blah. Put something meaningful. Don’t just make up garbage content. Take the viewpoint that this is a professional web site you are developing and will show to your client.
8. Create 2-3 forms. Create forms. You should create several forms using a variety of form field elements, not just a login form! Each form control should have a corresponding label. You can simply assign a value displayed on the button controls. You may use the label control if you associate the label control with the form control.
Provide directions for the user on how to complete the form. Is there a special format they need to enter the data like a phone number? (###-###-####) or birth date (##/##/##) Require the user to make a selection or enter values for at least 3 of the fields. Put an asterisk * or other indication to tell your user which fields are required! You will also provide them with directions on what the asterisk mean.
Figure: A simple form example
9. HTML Elements – should include a variety of elements, lists, tables, nav, header, footer, div and span tags, headings, line break, images, hyperlinks, iframe, video, audio, svg files and canvas.
11. Web Page Content. Create the individual images, media and textual content for the web pages.
12. Validate your code. The page needs to comply with HTML 5. Go to the W3C Validation Service . Validate the HTML code using the W3C Validation Service at http://validator.w3.org/file-upload.html. There should be no errors.