Beginning Web Design
--------------------
11. When I create my initial index page, what name should I give it?
The default page that apache will look for in your directory goes
by the name "index". You should create your page with either the
name "index.html" or "index.php". You will have to use the "php"
extension if you are going to use the Olc include resources.
12. What are the Olc includes and how do I use them?
The web portal design is a 5 block php web page that is created
by combining a series of php and html files to create the current
look of the 2011 portal page. The advantage of using the portal
design is that you have access to all of the portal resources,
without having to manage any of the changes to them. The 4
blocks of the OlC portal are:
The Banner and Header
The Left Column (Designated as Col1) - Main content area
The Right Column (Designated as Col2) - Supporting menus
The Footer
The simplest way to use the portal 5 block design is to recreate
the actual portal page and then make your modifications to this
index.php file. Below is the content for the portal page:
01. <?php include '/www/xhtml.html'; ?>
02. <head>
03. <title>Oglala Lakota College Home</title>
04. <?php include '/www/metacss.html'; ?>
05. </head>
06. <body>
07.
08. <?php
09. $banner = '/images/banner.jpg';
10. include '/www/header.php';
11. include '/www/colstart.html';
12. include '/www/col1.html';
13. include '/www/col2.html';
14. include '/www/colend.html';
15. include '/www/footer-blue.html';
16. ?>
17.
18. </body>
19. </html>
For most designers, you will likely change only lines 3, 9, 12
and maybe 13 depending on which columns you would like to
replace with your own department html information. Information
specific to creating your own html column information is defined
below.
13. I want to include javascript in my web page designs. Can I still
do this if I use the php portal includes as described above?
Yes. Unlike the previous 3 block portal design which was created
to gather content and limited the user to the middle block, this
design is completely open from the top to the bottom, but DOES
require that the user understand more about html and php than the
previous portal revision.
14. I notice the new portal design is now XHTML 1.1 compliant and not
HTML 4.01. Does this mean that we have to create our pages as
XHTML 1.1, or can we use a previous DOCTYPE?
The new portal is designed around XHTML, but as before, you can
still create any kind of web page that you desire. Just realize
that if you do not use the portal design to create your pages,
you "may" spend more time keeping your pages current and up to
date. If you need to use any deprecated tags that still exist
in XHTML 1.0 STRICT, you can change the top and bottom includes
to regress to a 1.0 STRICT design, and your pages "should" still
validate. To do this, change lines #1 and #15 to:
1. <?php include '/www/xhtml1.0.html'; ?>
15. include '/www/footer-blue.html';
If you prefer the blue W3C validation tags, you can change the
footer line #15 to:
15. include '/www/footer-blue.html';
15. I realize that I should change line #3 to reflect the name of the
webpage that I want to create, but how do I change line #9 for
the banner (and where do I get one)?
The banner that is displayed at the top of your web page could
actually be any picture that you want it to be. Just realize
that any banner you use will be displayed with a width of 600
pixels, and a height of 113 pixels. We would hope that you would
want to keep your pages looking similar to the existing design
and submit any information that you would need on your banner and
let the graphics artist that designed the portal banner, create a
banner for your department. Once your banner is created, we
would like it to be stored in the main images folder so that any
department will have access to it and know where it is. Changing
line #9 to display your banner is then as easy as editing it like
this:
09. $banner = '/images/mathbanner.jpg';
16. I've created the index.php page as described above, now how do I
create the content for my specific department?
You will most likely want your department information to appear
in the middle of the page (this is column #1). Edit line #12
above to represent where your column #1 information is comming
from:
12. include 'col1.html'; #This would be the local directory.
Now create a file called "col1.html" and place your content
between the division tags. It should look something like this:
<div class="col1">
<h2>Nursing Program</h2>
<p>
The Oglala Lakota College has had an
Associate Degree program in nursing
since 1986. It is reservation based,
being located in Pine Ridge, South
Dakota on the Pine Ridge Indian
Reservation. The program bases its
model of nursing on the four
traditional Lakota values of
Respect, Generosity, Wisdom, and
Courage.
</p>
<p>
This program offers academic
excellence and prepares an Associate
Degree nurse who is aware of
existing nursing (health) care needs
of individuals and families.
</p>
</div>
17. If I have links to other resources, where should I place those
resources and how do I link to them?
Every department page has a webfolder identical to the one
created for user accounts. The webfolders for the department
pages have the name "docs". You can either upload your resources
into your docs folder (using a browser and the autoindex
interface), or you can create your own folders within the
department work area and upload files using ftp.
You can create any of the 2 columns to place your links into, but
it is prefered that you try to keep them within column #1 or #2.
Please use relative addresses (to the department page) when you
link your resources. This can either be addressed from the local
folder or from the symbolic link to the department page:
<a href="resource.pdf">Some File</a>
#This represents your local departments root folder.
<a href="docs/resource.pdf">Some File</a>
#This represents your departments document folder.
<a href="files/resource.pdf">Some File</a>
#Or you could (ftp) create a container folder.
<a href="/local_links/nursing/docs/resource.pdf">Some File</a>
#This represents a symbolic link to your document folder.
18. Is it better to use symbolic linking instead of local links to the
directory that I am working in?
This depends on the content that you want to distribute, and if
other departments might want to use your columns for their own
web pages. A good rule to follow is that the majority of your
department content is going to display in the middle (column #1),
and that you most likely will place ONLY linked resources into
the 2nd column. It is best to use symbolic linking in that 2nd
column in case someone else may want to use it.
19. I noticed that the "Instructional Division" web page has links to
all of the other academic departments on the left hand side. Can
I use this column in my own web page so that I don't have to make
links to these other departments?
Yes, in fact we would prefer that you use this method so that
your web pages don't break when people/departments/programs get
shifted around. In your index page, use the symbolic link to the
academic division folder to use this column:
12. include 'col1.html'; #Your department Content.
13. include '/www/academics/col2.html'; #The Academic Links.
20. Can this also be done with the other main links located in the
header of the portal page?
Yes, as long as those main links conform to this standard. If
for example you want to use the simple calendar located on the
"home" page you can replace your col2.html with the one from the
"home" root page:
13. include '/www/col2.html';
If you wanted to use the administrative columns links, you would
change it as follows:
13. include '/www/administration/col2.html';
+--------------------------------------------------+
| Designing The OLC Internet (The OLC WebFaq) |
| Guide to Online Internet Access |
| Version 4 - December 20 2011 |
+--------------------------------------------------+
Copyright (c) 2005-2012, Brett Bump and James Dudek
bbump at olc.edu
jdudek at olc.edu
Revised 4 January 2012 by James Dudek
All rights reserved. Permission is granted to duplicate and
distribute copies of this document provided the copyright
notice and this permission notice are preserved on all copies.
FAQ Disclaimer
------------------------------------------------------------------------
We disclaim everything. The contents of this article might be totally
inaccurate, inappropriate, misguided, or otherwise perverse - except for
our names (you can probably trust me on that).
Copyright (c) 2005-2012, by Brett Bump, James Dudek, all rights reserved.
This FAQ may be posted to any USENET newsgroup, on-line service, web
site, or BBS as long as it is posted in its entirety and includes this
copyright statement.
This FAQ may be distributed as class material electronic disk or memory
device as long as there is no charge (except to cover materials).
This FAQ may not be distributed for financial gain.
This FAQ may not be included in commercial collections or compilations
without express permission from the author.
------------------------------------------------------------------------
Brett Bump - bbump at olc.edu
James Dudek - jdudek at olc.edu
© Copyright 2001-2013, all rights reserved.
OLC Home | Disclaimer | Privacy | Web Design Info | Contact us