This week...

Many weeks have been spent learning the basics of HTML and CSS. Now is time to apply that knowledge to a website of your own creation. Hopefully, you have been collecting information and materials throughout the semester. Doing so will make this part of the course less time consuming. If you have not, now is the time to get started.

If you so choose, you may use professional web site creation software. In the past Dreamweaver was used. However, do to the change in their marketing and trial version procedures, it is no longer compatible with this Online course. Using their Creative Cloud option would still be a beneficial experience, but it is not required.

Dreamweaver CC (Creative Cloud) https://creative.adobe.com/products/dreamweaver

There are also other products that you are welcome to explore. Microsoft Word may NOT be used to create web pages. It adds way too much extraneous code which increases file size and serves no real purpose. Wordpress and similar products are also not allowed.

The design of your site must your own. Templates created by others may not be used. The site may not be a redo of Pacific Trails with different content. It is to be a new and innovative site.

Create, Test, Validate, Save:

1. Create a folder named GlobalWeb. Inside that folder, create three folders: css, js, and media.
2. Create a template named GWMaster.htm with the design you have chosen for your site. Include place holding text. The following is often used which some say is a combination of Latin and jibberish.

   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Create a style sheet for the screen. Test it. Also be sure to validate. Save in the css folder.
4. Create a style sheet for mobile applications. Test and validate. Save in the css folder.
5. Create a style sheet for the printer. Test and validate. Save in the css folder.
6. Be sure all files include proper documentation and the web page includes meta tags, contact information, and the date last modified. Again test and validate. Save in the GlobalWeb folder.
7. Make a copy of GWMaster.htm/l and rename it index.html. Modify this page to include the content you have chosen for your homepage. Customize the meta tags and the title tag. Test all three versions (screen, printer, mobile). Make sure all of links are valid. Save in the GlobalWeb folder.
8. Make another copy of GWMaster.htm/l and rename it as one of your country pages. Continue with the same procedure as number 6 above. Save in the GlobalWeb folder.
9. Make a third copy of GWMaster.htm/l and rename it the the other country page. Again, continue with the same procedure as number 6 above. Save in the GlobalWeb folder.

 

Publish:
When you are satisfied with your work, publish your web pages to your Apollo site. In the past the entire folder has been uploaded to Apollo. That was done because this is an academic environment. For the "real" website, index.htm/l must be in the root. In our case the root is http://apollo.occc.edu/user#####. So the individual htm/l files will be uploaded. Here is the sometimes confusing part. The css, js, and media folders will still be upload as one unit. Hopefully, the following image will help.

Test, Validate

Once the files have been uploaded, enter the URL http://apollo.occc.edu/user##### (user##### is replaced by your login) in the browser's address bar. The result should be the homepage of your website.

Note: The browser knows that index.htm/l is the default homepage so its name does not need to be included in the URL. Depending on the hosting service other files such as default.htm/l, index.php, default.php, default.aspx and so on may also be configured as the default home page.

Test the web page, test the links, view the printer version, view the mobile version for each of the pages. Test the links between the pages. Validate the HTML and CSS on all of the pages.

Submit the Assignment

See the assignment specs page.