HTML version of Fel's stories

[Mark_Reed]

Hello all-

I'm taking an HTML class, the final project of which is to produce a web page of some kind. Due to a history of intermittent Internet access, I’ve long preferred to download my favorite stories for viewing on my computer directly. The wonderful folk(s) behind weavespinner.net have brought us Fel’s stories in a number of different formats, but the HTML version on that site has each story in a single file. I’m going to write a version where each chapter is a separate file, and formatted to my personal preferences. However, I plan to use a linked CSS page to do all this, which means that once I release this on the forum another person will be able to replace my preferences (background, text color, font size) with their own in a single place and have it affect every file.

So with all that said, I need help with two things. First, do any of you web design guru’s know how to make a drop down box that will be able to move between chapters like fanfiction.net has? Can this be done with HTML?

Second, on the home page (the first page a reader will open up) you’ll be able to select which universe of Fel’s writings you want to read: sennadar, subjugation, spirit walker, kit, assorted short stories, and a link to these forums. I need a picture for each of them. The size doesn’t matter, as I can modify it to fit appropriately. For sennadar, I’d like a multicolor shaeram along the lines of canisD’s forum picture. (I know the wiki had some, but the wiki seems to be down.) For subjugation, I was thinking of some sort of symbol for House Karinne or a star fighter, but I’m definitely open for suggestion. The others are completely open to your own ideas.

Please post your picture suggestions below. Any other help or advice would be appreciated.

-Mark Reed

[Greymist]

If you have a look at the source on a fanfic page (I'm using Lochar's Harry Potter and the Summoner's Stone page as an example) you'll see the below html. Basically what's happening, is that when you select an option, it's changing the webpage with self.location = ...blah blah.

Now if you navigate to chapter 3 and chapter 4 respectively, you'll see that the only difference is the piece I've bolded, which is the option value =3 and option value =3 in the <SELECT>

Chapter 3: http://www.fanfiction.net/s/7092183/3/Harry_Potter_and_the_Summoners_Stone
Chapter 4: http://www.fanfiction.net/s/7092183/4/Harry_Potter_and_the_Summoners_Stone

Code: Select all

 <SELECT title='chapter navigation' Name=chapter onChange="self.location = '/s/7092183/'+ this.options[this.selectedIndex].value + '/Harry_Potter_and_the_Summoners_Stone';">
	<option  value=1 selected>1. A simple question
	<option  value=2 >2. Not so simple answers
	<option  value=3 >3. A question of Houses
	<option  value=4 >4. When is a raven like a writing desk?
	... (I've taken out the next 25 chapers).
</select>

An easier way to visualise it, is if the option values were set like this:

Code: Select all

 <option value=http://stuff.co.nz>Stuff website

and the onChange part was like this:

Code: Select all

 onChange="self.location.href = this.options[this.selectedIndex].value;"

Then all you'd need to do, is create a web page for each chapter, and put it in the value section of the select/option.

Either way go have a read on this page, which explains the select/option tags,
http://www.w3schools.com/tags/tag_select.asp
https://developer.mozilla.org/En/DOM/Window.location

[Mark_Reed]

I don't know enough about scripting to understand what each one.of.these do, but I know enough (very) basic programming to follow along with each point once you've explained the gist. It seems to me that I can get what I need by only slightly modifying the code that's already on fanfiction.net.

So presuming all html files were labeled chapterXX.html and existed within the same folder, the code should be as follows: (I'm removing greater-lesser-than signs because I'm not sure how the forum will react.)

select title='chapter navigation' Name=chapter onChange="self.location = 'chapter'+ this.options[this.selectedIndex].value + '.html';"
option value=01 selected Chapter 1
option value=02 Chapter 2
option value=03 Chapter 3
/select

[Greymist]

(I'm removing greater-lesser-than signs because I'm not sure how the forum will react.)

Use the code block

Code: Select all

[code] your code here 

[/code]

[Spec8472]

It's probably worth pointing out that Stack Overflow is the best place to ask programming type questions... likely to get a very quick response, if the question hasn't already been asked and answered over there.

The other Stack Exchange sites are also great for asking questions on various other topics.