Building a Webpage (and making it look pretty!)

Merlin66 (Ken) · #1 21-03-2017, 12:20 PM

I have a "basic" webpage (built using "Creating Web Pages Simplified") but really need to improve the layouts and "feel".
http://www.astronomicalspectroscopy.com/
Can anyone recommend a book which might help me get there???

pluto (Hugh) · #2 21-03-2017, 01:36 PM

Maybe check out something like Wordpress.com. It's fairly straight forward to set up a basic site with one of their templates that suits the kind of site you want and add all your pages/catagories, and it looks pretty good. Plus it will take care of the site working across desktop and mobile.
It's free though if it gets popular they can put ads at the bottom of some posts. I've had my blog with them for years and I think I've seen only a couple of ads in all that time.

Note that wordpress.com is different to wordpress.org. The former is where you can set up a site and all the hosting and everything is taken care of. The latter is a system you can install on your own host if you want to host your site yourself. At a basic level you can do the same stuff with both though obviously you get a lot more control with the self hosted wordpress.org.

dimithri86 (Dimithri) · #3 21-03-2017, 01:37 PM

Do you want to do it from scratch, or can you use a template?

dannat (Daniel) · #4 21-03-2017, 01:55 PM

i agree with wordpress, Ken will it be very photo heavy? in which case one of the photography page build platforms might be better?

you need any extra features apart from a basic page- eg forum or anything different o fairly static pages which just have content

Merlin66 (Ken) · #5 21-03-2017, 02:00 PM

Thanks guys...
I already made a start using a generic template ( see -http://www.astronomicalspectroscopy.com/) but I'd like to be able to run the text or lists in two columns on the page, improve the fonts and headers etc.
Hopefully there will be plenty (eventually) photos of astronomical gear and spectra....

gary · #6 21-03-2017, 05:02 PM

Quote:

Originally Posted by Merlin66

I have a "basic" webpage (built using "Creating Web Pages Simplified") but really need to improve the layouts and "feel".
http://www.astronomicalspectroscopy.com/
Can anyone recommend a book which might help me get there???

Ken,

If you are crafting your web pages by hand and are seeking insight into
how to control the presentation of the document, then the keyword is
"CSS" which stands for Cascading Style Sheets.

CSS helps you separate content from style and in particular external
CSS style sheets (i.e. files that end with the .css suffix that you then
link into your .html file) are the way to go.

Here is an example of the header of a HTML web page which is
linking in three arbitrarily named style sheets. You might have just one
style sheet with all your styles in it, or you could have multiple
style sheets that do different jobs as shown here :-

<head>
<link rel="stylesheet" type="text/css" href="mystyle_this.css">
<link rel="stylesheet" type="text/css" href="mystyle_that.css">
<link rel="stylesheet" type="text/css" href="mystyle_and_the_other.css">
</head>

Google CSS HTML and start reading and playing.

Here is one tutorial starting place :-
https://www.w3schools.com/css/default.asp

CSS also allows you to control layout, so if you want multi-column text,
CSS helps achieve that.

By having external CSS files, you can control the look and feel
of your whole web site and with one change to one css file, change
the look and feel of many web pages at once.
etc., then it

Merlin66 (Ken) · #7 22-03-2017, 06:43 AM

Gary,
I did start by finding what I thought was a "suitable" webpage template....
I've found the .css and have already dabbled with some changes.
It's the simple stuff like changing the font sizes, and a double column layout of lists on a couple of pages.....
Thanks for the link. I'll check it out.

garymck (Gary) · #8 22-03-2017, 08:22 AM

Why not use a simple web site development package? Years ago I used

http://www.webpage-maker.com/

to build half a dozen web sites. Cheap, so easy to use (no coding) that it's child's play...

cheers
Gary

JA · #9 22-03-2017, 08:52 AM

Quote:

Originally Posted by Merlin66

I have a "basic" webpage (built using "Creating Web Pages Simplified") but really need to improve the layouts and "feel".
http://www.astronomicalspectroscopy.com/
Can anyone recommend a book which might help me get there???

Books, no. As a consumer, advice plenty

Minimalist almost monochrome is best for backgrounds and text. Bring colour with your images, articles, headings and banner. These will POP against such a monochrome background and reduce reader fatigue.

Background: Black or Very Dark Grey/Charcoal with any boxes in same colour theme only vary brightness. If you must have a white background (please no), then at least off-white/very/very light grey. A site I frequent, dpreview has a user selectable colour theme: Dark or Light. It's a good idea in itself, but try it just to see the difference in fatigue. Here: https://www.dpreview.com/ there Dark/Light control is in the upper right of the page.

Text: Something like Arial. No serif type fonts. Colour very very very light grey or very very light blue, almost but not white. No other colours, except for headings (in larger font) and hyperlinks.

Logical Separation: Keep areas of the page that need logical separation, separate with a highlighted/same colour theme box (no border) .

Use a navigation pane on the left side to all subpages.

Scrolling: Reduce Scrolling where possible

Phone Number If it is a business, use a prominent phone number top right - don't make people navigate to a Contact us page to find this.

Above all, be consistent - the mind strives to understand whatever is put in front of it, so to reduce fatigue or worse, people leaving your page, create order by being consistent in your layout, whilst at the same time creating some interest, possibly through images or video provided as say a series of thumbnail images in a column on the right hand side, or possibly a format with a thumbnail image to go with EVERY article or story - Sort of like the Deep space subforum page here, where all threads have an image & title or like the news page of the dpreview site I linked to.

Sample image attached (Extract from webpage with banner removed so as to show more of detailed area)

Knock yourself out.....

Best
JA

Moon (James) · #10 22-03-2017, 11:42 AM

The best way to do it depends on what you want to get out of it.

If you just want the end result (a good looking website) in the shortest possible time with minimal frustration - then go for wordpress or something like that.

On the other hand you want to build it yourself from the ground up, learn lots of web development stuff along the way and end up with a site you built yourself, but it doesn't look anywhere near as polished as a professional one - then you don't need any tools other than a text editor and lots of google-fu to figure out how to do it all. CSS frameworks like bootstrap and skeleton are great to get you started.

A third way / middle ground would be something like the very awesome Hugo.

Anyhow, good luck :-)

ZeroID (Brent) · #11 22-03-2017, 12:57 PM

Weebly.com
Free for personal, some slight restrictions with video but online editing and easy to use
Check my two out, seems to be no restrictions on multiple sites either.

eplusbike.weebly.com and brenthrussell.weebly.com

Some nice templates in there, suitable for most sites, very easily modified, no ads and cheap if you go professional one day.

pluto (Hugh) · #12 22-03-2017, 01:49 PM

Quote:

Originally Posted by Moon

A third way / middle ground would be something like the very awesome Hugo.

That looks really cool!