Women & Lit Final project

[Jess]

So I thought I was screwed when I saw I had to do a 8-10 page essay for the final project for this class. Then I learned I didn't have to write an essay. One of the "nontraditional" ways is to create a website. Since I am learning how to create websites in another class, I thought I would put that knowledge into creating a website as the final project.

The Hunger Games project website (http://jzc22.comuv.com/index.html)

I would appreciate it if you leave some feedback and suggestions. What I put on there is another matter entirely (meaning the content for the project itself). I want to first deal with the "structure" part.

***

I will also need some help, since I'm still learning.

My first question is this. I want to put a frame around the date/time that appears on my site. I also want to align it to the right. I'm not really sure how to do this....The frame I want would just be a simple border, nothing special.



Thanks in advance for all help, feedback, and suggestions. I'm thinking if I end up getting a good grade for this project, I might be able to pass the class (right now I'm totally FAILING)....

[Hypers]

You could use a table as the border. Then align the table to the right. I'm not sure of the code though(im using tapatalk on an iPod...)

Also, you might want to leave a blank line before the logo so it looks balanced.

[Jess]

Okay, thanks.


More help needed. I am going to create several pages, and that means I will have to keep on copying the menu/logo/clock. Is there any way I can avoid doing that, or do I have no choice? Also, I want to create a "footer", kind of like the text at the very bottom here at VT...how do I do that?

[Hypers]

You could put an 'iframe' that loads the pages in between the title and footer. This way you won't have to copy and paste everything.

[Jess]

Thank you again!! :)

EDIT: I don't think it's working...

if you go to http://womenandlit-jzc22.comze.com/test.html, you see the menu is messed up.

Using:
<iframe src="overall_header.html" frameborder="0"></iframe>

overall_header.html is where I have the menu/logo/clock. Am I doing something wrong?

EDIT #2: I think I know why...just a sec

EDIT #3: Fixed the look, but there are some issues. I'll deal with them later....


EDIT #4: I can't figure it out. I manage to successfully add in the menu/logo/clock using iframe on a page, but when I click on another page, like Home, the url does not change and nor does the tab's title. Also, if you go directly from /test.html to /home.html you'll see a slight difference (alignment)...

[Jess]

Anyone can help me?

[Hypers]

I click on another page, like Home, the url does not change and nor does the tab's title.

that unfortunately... is the downside of using iframes...

[Jess]

Dang that sucks :/

well I have another thing. Say I'm on the Home page. I want the button Home to have a different background (say, green), to indicate it's the selected button. And if I go to Sources, the background will change to green since that has been selected. How would I do this?

Using this menu: http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

[TheMatrix]

Try looking into "SSI", which is often referred to as "SHTML". Basically, you can include a header and footer, so that a document looks like this:

<!--#include file="header.html" -->
<p>stuff that goes as content on the page</p>
<!--#include file="footer.html" -->

All of the menus and stuff goes in the header.html. To set a title, use a JavaScript one-liner:

<script type="text/javascript">
document.title = "The title you want for your page";
</script>


Look at that. Alternatively, if you are just starting out with all this, try a simple CMS. You can then study the output and how that looks on your screen.

[Jess]

hmm I tried that SHTML earlier but I was doing it all wrong. Thank you. I will give that a try. And maybe I'll use a CMS...

[Jess]

Okay I'm not getting it at all. I'm gonna post the code of one of the pages here soon. I still need lots of help. If this is just not gonna work out, I'm going to have to go with a CMS.

[Jess]

okay I've completely started over and used some new stuff.
new link: http://jzc22.comuv.com/index.html


I still don't get the SHTML stuff. I need help :/

here's the code for index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="footer.css" />
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="../css/bootstrap.css">
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
}

/* Custom container */
.container-narrow {
margin: 0 auto;
max-width: 700px;
}
.container-narrow > hr {
margin: 30px 0;
}


</style>
<link href="../css/bootstrap-responsive.css" rel="stylesheet">

<link rel="shortcut icon" href="http://jzc22.comuv.com/ico/favicon.ico" />
</head>

<body>

<div class="container-narrow">

<ul class="nav nav-pills pull-right">
<li class="active"><a href="index.html"><i class="icon-home"></i> Home</a></li>
<li><a href="books.html"><i class="icon-book"></i> Books</a></li>
<li><a href="sources.html"><i class="icon-globe"></i> Sources</a></li>
</ul>
<h3 class="muted">Women & Lit Final Project</h3>

<hr>

<div class="alert alert-info"><i class="icon-info-sign"></i>
<strong>Note:</strong> Site is still under construction.
</div>
* * <script src="http://code.jquery.com/jquery-latest.js"></script>
* * <script src="js/bootstrap.min.js"></script>
</br></br>
</br></br>
<div id="footer">
Created by Jessica Chen |
<a href="http://www.tinycounter.com" target="_blank" title="web counter"><img border="0" alt="web counter" src="http://mycounter.tinycounter.com/index.php?user=jesschen"></a>
</div>

</body>
</html>


I don't get what to put in the header.html and footer.html...I tried to follow tutorials but it didn't work out.

[Jess]

help please?

[Jess]

I'm doing yet another complete makeover. After the final project conference with my professor, I've decided to solely focus it on The Hunger Games.

I still need help with SHTML! Tried googling and still don't understand.

[TheMatrix]

You need a webhost that supports "SSI"(aka "SHTML"). Contact them to see if they have it(unless it states in their features list) for your plan. You would then proceed by putting all 3 of these files in the same directory(folder):

<!-- This is "header.html" -->
<html>
<head>
<title> | Something site</title>
<!-- anything else that should always be included -->
</head>

<!-- end of "header.html" -->


<!-- this is "footer.html" -->
<center>
<p>copyright yours truly</p>
</center>
</body>
</html>
<!-- end of "footer.html" -->


<!-- this is "page1.shtml" Notice the "shtml" -->

<!--#include file="header.html" -->
<!-- ^^ includes that file - basically just pastes the contents right there -->
<script>
//Set the page title
var nameOfThisPage = "Page 1";
document.title = nameOfThisPage + document.title; //Prepend the new title to the existing one
</script>
<p>This is page 1.</p>

<!--#include file="footer.html" -->
<!-- ^^ pastes the footer.html right there -->

And basically you repeat "page1.shtml" for every page you have, giving them new names of course.
Alternatively, look into a simple wiki. MediaWiki is already too advanced, by the way.