Transcript Science Fair Project - Seton Hall University

Web Site Design
Bert 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 interconnected
 have a common, uniform theme or look
 allow 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 Local
Expression 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 controlclicking 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.dwt
 Highlight on the menu the text “Math 101”
 Press “Ctrl-K” to adjust the hyperlink to point to
/Teaching/Math101/index.html
 Repeat accordingly for the remaining menu entries
 Click 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 user
 provide an alternate style sheet with large print for users with poor
eye sight
 provide another style sheet in gray-scale to use for printing
 use 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