CVHS Robotics 589 (we need suggestions)

Technical Website Design/Showcase
1

I am a one man website designer, I have no one else helping me out on this site. Does anyone have any suggestions or ideas? If so what and where can I get the html for it?

http://www.cvhsrobotics.org/beta

(HTML based, no flash, Bryce 5 Animation) Help! Please!

:confused:

2

Hi, I judged websites for the PNW and So. Cal regionals this year and here are a couple things that stick out…

  1. Put the FIRST logo on the main page.
  2. Add some more color or a background picture to all of the pages (it is a little bland)
  3. The index page is really long (you shouldn’t have to scroll the main page if there is a whole lot of blank space) maybe make the links run horizontally in one or two rows.
  4. If you have bigger copies of the pictures on your pictures page add the ability to click on them to enlarge them.
  5. Make the link to your high school open up in a new window by using the _blank attribute.
  6. Maybe convert the main page animation to a flash file since more people have flash installed than quicktime.
  7. I know you are not going to update your Announcements everyday, so why don’t you change it to Announcements, updated as necessary.
  8. Maybe use text links to recognize your sponsors on the main page in a column of their own.

Those are just some thoughts… let me know if you would like more!

3

Thanks that helps, I just need to get more into HTML because I can’t do much at the moment.

more suggestions would help, Thanks :slight_smile:

4

Use Dreamweaver…

5

I accually don’t have Dreamweaver, but do you know how to convert a quicktime to flash on a mac? :confused:

6

I just got back from Fry’s Electronics with Macromedia Studio MX, now i can work on finding out how Dreamweaver works, but how do i upload the files to the site?

7

To convert a quicktime .mov file to flash follow this:

  • Open up Flash and goto File>Import and select the .mov quicktime file you made.
  • Flash will ask you for certain settings of the quicktime file, you can change these to better suit your needs or just leave them at default.
  • Now make sure your stage (the white design area) is the same size as your .mov file. You can change your stage size by modifying the H and W boxes under the properties panel.
  • Now all you do is goto File>Export and pick the Save As Type “.swf”. That’s pretty much all you need to know.
  • I suggest you play around with your settings for compression and file size when exporting. You can simply add the “.swf” file you made into your index.html page.
8

Dreamweaver is very easy to use… just play around with it… I am still learning new features even though I have been using the program for 5 years!

To upload files; your web host should have given you an ftp server name, user name, and password. You can either use the built in FTP client to upload the files or you can download a FTP client like WS FTP or Leap FTP (and there are hundreds of other ftp clients out there.)

Just upload the files (html and images) and it should (if you have done everything correctly)

9

Hey, this software is like typing HTML done in seconds. Thanks check it out now :smiley:

http://www.cvhsrobotics.org/beta

feel free to add ideas or comments

10

Looks good.

IMHO, I would center the robot picture and send the Falcon text to the next line and center that.

11

There I did some updates, check it out now what would you rate it?

http://www.cvhsrobotics.org/beta

Tell me if I should add anything, I really need suggestions

12

OK… I would center the nav bar at the top and then have the nav bar at the top of all of the pages on your site.

13

On your website, I think the most critical thing to change is making all of the pages keep a consistent layout. There are a few different ways to do this.

  • Create each page individually, and manually keep the same layout
  • Use php/asp/some other server side scripting
  • Use frames
  • Use a javascript to print out the sections that all pages have in common
  • Use a weird custom pre-server program

If you can, use server-side scripting. This is probably not an option for you since you know only a limited amount of HTML, and such.

You could just make each page and make them look the same, but this get sort of annoying when many updates are needed.

The last three options are things I have used on wilsonvillerobotics.com. In my opinion, frames are probably the easiest way for you to go. You could continue using dream weaver for whatever layout you like to have, but then make the central part an iframe.

Using javascript to print out the layout code is what I do right now. It allows me to do some fancy things client-side without having to load another page. However, all you would need to do is add a link to a javascript file on each of the pages, and in the script, you could do everything you needed to with just one or two lines using document.write();. If you finished making one page look exactly how you want your site to look like, I could probably write this for you.

The last option I would not recommend. I actually implemented this at a couple different points in the design of my team’s website, and it actually works right now although we aren’t using it. It’s not in a general enough form to work for a different team, and I would not recommend spending the to write your own.

Oh yeah, one other thing. The FIRST logo needs to be cleaned up somewhat.

Good luck, and tell me if there’s anything I can help with.

Eric

14

The above is good advice. I would caution you though not to use frames as search engines have a hard time actually viewing your content among other issues.

If you are feeling adventuresome (and your webhost supports it) use server side includes and .shtml files. Google is your friend on this one!

15

hmmm… Well I like the idea of iframe, but how do I open it or use it on dreamweaver?

16

I have no idea how to use dreamweaver. I do everything in a text editor. (ok, not image manipulation, but everything else.) There’s probably a way to do it, but I couldn’t tell you what it is.

However, you don’t necessarily have to use dreamweaver to put it in. You could just put in: <iframe href=“x.html” width=‘x’ height=‘x’ name=‘x’></iframe>
note: href defines default page loaded in the frame, and width and height are in pixels.
This would probably replace everything starting with the line that contains:
<p class=“style7”>NEWS:</p>
to
<p>The Kickoff day has come and the team beings to plan and think of a strategy. To find out more about the competition visit <a href=“http://www.usfirst.org”>FIRST.</a> </p>

The ‘name’ is what the window is called, so that you can link to it. You will need to make the links on the main page point to this frame, otherwise they will just take up the whole browser window. There are two ways to do this. In my opinion, the easiest is to say: <base target=“my_iframe’s name”>, where “my_iframe’s name” is whatever you decided to call it. (I’m not sure if this works with flash objects within a page, so you’ll have to see what happens.)

To me, the biggest drawback of using an iframe is not that it limits search engines, but that it usually limits how much your site is ‘fluid’, meaning that it changes for different screen sizes. Many people would not agree with the last sentence, but that’s what I think. My rationale is that you site is being designed for a specific audience that already exists and you do not need to work to attract with search engine listings. Also, I’m I a fan of ‘liquid’ design, for a couple reasons. 1) I hate side scrolling, and 2) I run 1280x1024, but often use unusual window sizes. Few static-layout sites look just as good in all sizes.