Building Websites II - Creating Static Webpages

Static websites are written in HTML. It's a simple markup language to format documents and display basic elements in them. This series will show you how to create websites without having to deal with the actual code, but its useful to work with programs that keep the HTML clean so you can later use it while working in the program. An excellent program for such purposes is Microsoft Expression Web. It can be purchased relatively cheaply online, and is free for college students without any restrictions. To download it, sign up at Dreamspark with a Microsoft account, and then give them your student email address. After they verify it, you'll be able to download the installation file to a CD and install it on your computer.  One you've done that, you can read the dry introduction below to get to know the basics of Expression Web and its layout.

 Creating a Site with Expression Web

After you install and open Expression Web, click on Site>New Site to create your first site. There are different options you can choose from, such as trying one of their templates, but you might as well just create a single-page site. Pick a location and name and hit 'OK'. This will create a folder with a single file called "default.html". Whenever you go to a website without specifying a specific page on it, it sends you the homepage of the site, which is usually called "default" or "index".  So make sure to name this file correctly, or when people visit YourSiteName.com they will get an error. You can find out what format your web host uses by seeing what default files come with it.

 Creating basic web pages

After creating a site, double-click on "default.html" to edit it. It will open in a new tab, and you can immediately begin creating your site. You can type whatever content you want in the WYSIWYG editor.  Although you don't need to edit any code now, you should be aware how easy it is to do so. Just click on "code" on the bottom left.  This is where you could type or paste direct code. To view both the code and the design view simultaneously, just click on "split".

 The Toolbar



The toolbar on top of expression web contains the basic options for customizing your webpage content.

In the center-right are common options that shopuld look pretty similar to toolbar options in other programs,  like bolding text or making bullet points.

Further to the right are options for inserting basic HTML elements, such as a table or div. Tables should be used to display tabular data, while divs can be used later to help format your site. They mark off blocks of the site that can be formatted in specific ways. There's another button for inserting an image, though you can also just drag an image into Expression web from your computer. When inserting a picture, a dialog will pop up to prompt you for alternate text if the picture cannot be viewed.

The next button is for inserting Hyperlinks, one of the fundamental aspects of the web. No longer is information out of reach, everything is just a click away. After selecting on text and clicking on the link button (or pressing ctrl-K), a dialog will pop up. You can choose to link to another page in your site by selecting it, or you can paste in a URL to another page on the internet. Another option is to link to another spot on the same page, but to do this, you will first need to insert a bookmark at the location you want.

On the center-left of the toolbar, there are styling options similar to those in Word, but customized for the web. The drop-down box on the left contains names for different HTML tags, mainly headers and lists. You can select text and then click to apply the style that you want, such as "h2 - Heading 2".  This will by default make the text larger to mark it as a heading.  You will also be able to format such headings more specifically with CSS styles.

The font option doesn't just list one font, but a whole series of them, or "font family". This is to make sure your site will display some font on any browser that its viewed on.  In case a viewer does not have the first font on his computer, the browser will display the next font in the family.  The font option has different sizes, xx-small to xx-large. They also display certain default fonts, though these can be customized later. On the web, you do not want to be locked-in to certain font-sizes, so the focus is on changing the relative size.

Styling sites and CSS

Since Expression Web is meant for creating standards-based websites, it uses normal CSS to style and format webpages. CSS is the styling language used on websites to control the presentation of a webpage, such as what colors and fonts to display for each HTML element. While we won't go into all the details of CSS, you should be aware how it works and how Expression Web generates CSS.

CSS lets you select a certain general HTML element such as "h2" and apply a specific look to it. You can also mark specific items with a "class" and then use CSS to only modify items of that class.

In Expression Web, you can select a specific item by highlighting it, and then apply formatting to it by clicking on one of the toolbars, or by clicking on "style" in tag properties pane on the left. When you apply a style, Expression Web will mark that item with a specific class, and then use CSS in the top of the page's code to apply the look you selected.  This area of CSS is known as an Internal Style Sheet.

If you want to edit the style of multiple items, such as every "h2" element, you can click on "New Style" in the Apply Styles pane on the right. This will diplay a dialog box with many different options. You first need to select what item the style will be applied to by choosing the "selector". In this case, you would choose "h2", though you could choose from any of them, or make your own to apply it more specifically. You can leave the "Define In" as "Current page" for now so the styles will be defined in the Internal style sheet. You can then try out the different options to see all the different ways you can edit something with CSS.

If you want to make things more efficient and apply consistent styles across all the pages of your website, you won't want to keep all the CSS on the page itself, but on an External style sheet. You can use one of Expression Web's default style sheets by clicking on File>New>Page>Style Sheet and selecting one of the CSS pages. You can then attach it to your HTML page by clicking on "Attach style sheet" on the right side. This can be done on any page that you want to have that look, and will automatically apply all the relevant styles to the page. Now, when you add new styles through the "New Style" box, you can select "Define In">"External style sheet" to have Expression Web put the changes in your general CSS page.

Previewing your Site

While the WYSIWYG editor shows you basically how your site will look, you'll want to preview it in a browser also. You can do this from File>Preview In Browser and pick from one of the available browsers. They give you these choices since each browser displays things in a slightly different way, though you don't really need to worry about such details at this point. When you're done editing something, you can also just click on F12 to preview the page in your default browser. If you make another change, you can just save the page in expression web, and refresh it in your browser to see the latest version. (To do this all from your keyboard, click on "Ctrl-S" top save, "alt-tab" to switch windows and "crtl-R" to refresh.)

Publishing your website

Once your done creating your basic website, you will want to publish it online. The most effective way of publishing your web page is through FTP, or "File Transfer Protocol", a way to upload and download files to and from your web server. Expression web has built-in tools for publishing FTP. Click on the "site view" tab>"publishing". The first time you use it, you will need to "add a publishing destination". You can name it whatever you want, but will need the FTP location, username and password that came with your web host. You can also select a specific "directory" (or folder) to automatically open when connected.  Once you've successfully added the FTP information, you should be able to connect to your web host at any point by clicking on "connect to current publishing destination". You can then drag and drop the files you want to publish to the folders you want to publish them to, or you can select them and click on the right arrow. You can also publish files quickly from the "Site" menu, but make sure you're sending them to the folder you want.  Once you've published your site, it will be available to anyone in the world with internet access. You have created a small part of the web. Congratulations :)