Quick Overview
Just to take the mystery out of this, I'll quickly lay down my own process for creating a website.- Getting organized
I always plan the layout and navigational structure of the website on paper first. This way I am clear about the design, as well as the number of pages and their organization scheme.
- Preparing images
Generally, my original digitized images will be 300 DPI scans, or large digital photos from a camera. In either case, too large for the Web (they may be larger than a viewer's browser screen, and they'll take too long to download). I'll open each image in Photoshop, resize it to 72 DPI and roughly 300-500 pixels in either direction, give them names, and save them as JPEG's (or GIF's). Since I like using thumbnails, I'll create a second resized image (either with a slightly altered name, or the same name but secured in a "thumbs" folder) that I shrink down to about 75-90 pixels in either direction.
Resizing all the images tends to take up the bulk of the time in creating a website. Fortunately, the "Save for Web" function in recent versions of Photoshop really speeds up this process.
- Writing HTML and CSS
Next I'll open up a simple text-writer (SciTE is shown above) and type the HTML script that creates the different pages of the website, along with the CSS (a scripting language that is very similar in syntax) to control presentation.
With HTML I can- create page structure
- insert text and images
- create links to other pages of the site
- add external links to other places online
With CSS I can:- control fonts
- control coloration
- control background appearances
- address a variety of other presentation issues
When I name these pages, I'll give each of them the suffix ".htm" (or ".html"), which is all a browser needs to attempt to read it as a webpage (CSS pages use the suffix ".css", and they aren't meant for display -- they just inform the browser about page presentation). If I am making a string of pages that share the same visual format or scripting, I'll first make a "template" version -- and test it before making all the copies I need. - Testing HTML pages
These .htm/.html pages can be dropped into a browser to anticipate how it will look on the Web.
I usually drop a new HTML file into a browser as soon as I begin scripting. Whenever I save changes to the file, I can hit "refresh" on the browser and view those changes. - Uploading the site
When I'm finished, I'll open up an FTP program (Filezilla is shown here, which is a free application for Windows), use it to log into the server space used to store my website projects, and load all the files and folders into an appropriate space on the server. In other words, by browsing and selecting the files on my home computer in the leftmost window (outlined in red), I can drag them to the rightmost window (outlined in blue), which shows the files and folders of my server account. At this point, the site is going "live".
- Testing online
I'll immediately test the whole site to make sure I uploaded all of its contents correctly. Since my laptop and browser are both fairly new, I'll also look at the site online on some different systems (particularly older machines) to see if any unexpected changes occur. This used to be a critical issue for Web designers when browser companies were still devising their own individual parameters for how pages would look. Nowadays, it is still a good idea to check your site over Windows and Mac systems, and on several browsers (Mozilla, IE, Safari). Some browsers are really good at detecting and correcting the HTML mistakes of the designer (and can lure designers into thinking their website skills are impeccable), but that doesn't mean every browser will do so.
My first portfolio site took a considerable amount of time to complete because I was trying out an ambitious structure on the first go (which I wouldn't recommend to anyone, unless you absolutely must do things ambitiously). Now that a number of sites are under my belt, an entire website tends to be a single evening's activity.