1. Web Site Design Bert Wachsmuth

2. Checking Homework Visit our homepage http://pirate.shu.edu/ ~wachsmut/  Check the bold sites  Visit my “demo” site

3. 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

4. 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

5. 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.

6. 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.

7. 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

8. 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.

9. 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 menuindex file  A base style to set all bounds to zerobase style  A full style with layout and menu definitionsfull style  An alternate style sheet for another look on your contentalternate style  An image file serving as our logo for our web siteimage  Then drag-and-drop them into the base directory of your Expression Web

10. 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: Math 101 CS 101 Blog Private About

11. 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.

12. 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

13. 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”

14. Dynamic Web Template (3)  Switch to code view and verify that special comment tags have been inserted just properly Headline 1 This is some text Headline 2 This is some text Headline 3 And then some more text  Additional tags define the page title as editable (verify).

15. 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

16. 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)

17. 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

18. 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.

19. 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/

20. 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.

21. 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/).http://drupal.org/  A good overview of CMS’s is at: http://en.wikipedia.org/wiki/Web_content_management_system http://en.wikipedia.org/wiki/Web_content_management_system

22. 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)

23. Switching Styles (2)  Get an alternate style sheet (right-click to save, drag-and-drop it into “styles” folder)alternate style  Open template file or HTML file in code view and find the lines:  Change the second line and add a third line so that says: <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” />

24. 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!

25. 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