Web Site DesignBert Wachsmuth

Checking Homework

Visit our homepage http://pirate.shu.edu/ ~wachsmut/

Check the bold sites Visit my “demo” site

Creating Web Sites

A web site consists of multiple web pages that

are interconnectedhave a common, uniform theme or lookallow for some navigation between them.

Style sheets are perfect for providing uniformity – and are intended for just that – but web sites also have content that repeats (e.g. menus, footers, headers, logo):

no accepted standard to create repeating content

Our Web Site

Design your site theoretically:

what is the topic of your overall site what categories can you divide your site into what common elements do your categories have how do you plan to navigate between categories and pages how might your site grow in the future who is your intended audience

Exercise:Design a web site “on paper” to serve students you teach but that includes some semi-private information such as a blog and a picture gallery. All information is public.

Live versus LocalExpression has three modes of operations:

“live” mode where you edit and create content on the server, for everyone to see

“publish” mode where you edit a copy of your content on your local computer and synchronize your changes all at once

“local” mode where you edit and create content on your local computer only

In local mode you can also work on individual files but usually you want all your files to reside in one common “web” (local or live), the Expression Web site.

“Publish” mode is most useful since you can create and edit your site in private, then publish everything in one step.

Exercise:

Create an empty Expression Web site:

Start Expression Web Click “File | New” and pick “Web Site” From the dialog, choose “General” and “Empty Web Site”.

Note that there are also a variety of templates for you to explore – but not now

Exercise:

Each class gets its own folder, but since I anticipate many classes, we create a “Teaching” folder inside which the class folders go

We have a folder “About”. We have a folder “Blog” We have a “Private” folder We also decide to create storage folders:

“Images” to contain general images “Styles” to contain our style sheets, for

easy reference.

Develop a Menu Start out with two style sheets “base.css” and “styles.css” as well

as an “index.html” in the base directory. Download them to your desktop by right-clicking or control-

clicking on each link: A basic index file with menu A base style to set all bounds to zero A full style with layout and menu definitions An alternate style sheet for another look on your content An image file serving as our logo for our web site

Then drag-and-drop them into the base directory of your Expression Web

Develop a Menu (2)

Create the menus for the categories of our web site (with empty links). It might be easiest to enter the HTML code directly:

<div id="menu">

<ul>

<li><a href="">Math 101</a></li>

<li><a href="">CS 101</a></li>

<li><a href="">Blog</a></li>

<li><a href="">Private</a></li>

<li><a href="">About</a></li>

</ul>

</div>

Develop a Menu (3)

The styles and the logo are in the wrong place, which we’ll fix now:

In the file view, drag the image file to the Images folder In file view, drag the style sheets to the Styles folder

Check the source of your index file: the links have adjusted automatically.

Dynamic Web Template

When we click on each menu, a page should appear with the right content but the same menu, header, and footer!

To achieve that, we save our index.html file as a Dynamic Web Template file:

Click “Save As …” Pick type “Dynamic Web Template” Name the new file index.dwt (the extension dwt will be added

automatically

Dynamic Web Template (2)

A dynamic web page consists of two parts: content that is fixed and should not change (manually) – the

menu, header, and footer in our case content that changes from page to page – the actual content of

each page including the page title

We need to specify those parts of our template that can change: mark the content, but not the menu or title click “Format | Dynamic Web Template | Manage Editable

Regions” in the dialog box, enter “content” and click “Add”

Dynamic Web Template (3) Switch to code view and verify that special comment tags have

been inserted just properly<div id="content">

<!-- #BeginEditable "content" -->

<h1>Headline 1</h1>

<p>This is some text</p>

<h2>Headline 2</h2>

<p>This is some text</p>

<h3>Headline 3</h3>

<p>And then some more text</p>

<p>&nbsp;</p>

<!-- #EndEditable -->

</div>

 Additional tags define the page title as editable (verify).

Dynamic Web Template (4) Create an index.html file from template in each directory:

save the modified template (as index.dwt) click “File | New | Create from Dynamic Web Template” pick the “index.dwt” file you just created switch to design view to verify the look of your document

includes the menus, header, etc. change the “Header 1” to “Math 101” and remove other text right-click on some empty content and pick “Page Properties”. enter “Math 101” as page title and click OK click “Save” to save your document. Make sure to save it in the

directory “Teaching | Math101” and name it “index.html” Repeat accordingly for each directory

Dynamic Web Template (5) The only page which has not been create from our template is the

original index.html page. You can attach a template to an existing page, but in our case it is

simpler to: Create a new file from Dynamic Web Templates as before Click “Save” to save it as index.html in your base directory When prompted, click to “overwrite” the file (make sure to

overwrite index.html, not index.dwt)

Dynamic Web Template (6)Now we can edit our template and the changes will automatically be applied to all files that have the template attached.Open the template file index.dwtHighlight on the menu the text “Math 101”Press “Ctrl-K” to adjust the hyperlink to point to /Teaching/Math101/index.htmlRepeat accordingly for the remaining menu entriesClick the yellow “Home” and link it to the home index.html file. Note that the text color will change to blue, making the word basically invisible (blue text on blue background)Save your template. You need to confirm that you want to update all attached files as well

Final Touch

The “home” link is blue on blue. Fix it to make it yellow.

Note that the ‘back’ and ‘forward’ links don’t work – we’ll fix those later.

Publish your Web Site Close all files in Expression Web. You see your “Web Site” info with all files and

folders. At the bottom of that view is an entry labeled “Remote Web Site”. Click that. The first time you click you need to configure the web server to use for

this web site, so click that. In our case: select FTP enter as “Remote Web site location”: courses.shu.edu uncheck “use Passive FTP”

You will be prompted for your username and password. Enter your Seton Hall username and the password you were given.

If all goes well you see a split window to transfer files individually or all at once Select “local to remote” and press “Publish Web Site”.

Now your web site is online:

http://courses.shu.edu/spring09/CEPS0100/username/

Editing your Site Start Expression Make your changes on the local copy of your web site When everything is perfect

open your remote site publish from local to remote

If you goofed and your new web site looks worse than you old one open your remote site publish from remote to local.

That will restore your local site to the way it was prior to your changes.

You could also edit a web site directly online. That mode is particularly useful for very large site where synchronization would take too long.

CMS We are now in a position to create and maintain small to moderate web

sites For large web sites, especially if you need interactive features or you

have different people responsible for different portions of your site you might consider using a content management system (CMS).

There are many free CMS’s and they offer many, many different options and configuration choices. They usually require special access to a web server to install scripts so you need to work with whoever provides you with web space to figure out what can and can’t be done.

A popular CMS is for example, Drupal (see http://drupal.org/). A good overview of CMS’s is at:

http://en.wikipedia.org/wiki/Web_content_management_system

Switching Styles

We learned how to attach multiple style sheets to a document, which all ‘cascade’ into one style. You can also define alternate style sheets so that the user can switch between them to give a page the look they prefer. You can, for example:

use a default style sheet for your average userprovide an alternate style sheet with large print for users with poor eye sightprovide another style sheet in gray-scale to use for printinguse yet another style sheet to optimize your content to viewers with small devices (smart phones)

Switching Styles (2) Get an alternate style sheet (right-click to save, drag-and-drop it into “styles” folder) Open template file or HTML file in code view and find the lines:

<link href="Styles/base.css" rel="stylesheet" type="text/css" />

<link href="Styles/styles.css" rel="stylesheet" type="text/css"/>

Change the second line and add a third line so that says:

<link href="Styles/base.css" rel="stylesheet" type="text/css" />

<link href="Styles/styles.css" rel="stylesheet" type="text/css"

title="stacked" />

<link href="Styles/styles_inline.css" rel="alternate stylesheet“

type="text/css“ title="inline” />

Switching Styles (3) Save the modified template and view your main page in Firefox (not

IE) – nothing has changed. Now select “View | Page Style” and pick you alternate style.

Pretty cool, but there are two disadvantages:

the new style does not ‘stick’ and has to be re-selected every time this type of style switching is not supported by Internet Explorer!!

We need to develop a method to switch styles that remedies both problems. That’s where JavaScript comes in!

JavaScript JavaScript is primarily used in the form of client-side scripts

embedded in HTML documents for the development of dynamic websites.

JavaScript is an interpreted, weakly typed, object-oriented language with a simple syntax.

JavaScript is essentially unrelated to the Java programming language although there are some similarities

The language's name is the result of a co-marketing deal between Netscape and Sun, in exchange for Netscape bundling Sun's Java runtime