Week 5 & 6 Web Design – Layout & Organization

Review

Step 1 Web authoring using Netscape Composer  Basics of Netscape Composer Tutorials

Step 2 FTP

Step 3: File Name and URL File NameURL (Web Address) filename (xxxx.html) (xxxx.html) reflections.htmlhttp://web.cortland.edu/userID/reflections.html resume.htmlhttp://web.cortland.edu/userID/resume.html index.htmlhttp://web.cortland.edu/userID/index.html

What’s Next: Design/Layout/Organization  Web Site 6 components for your ePortfolio as mentioned in Week 4: Basic Requirement of your ePortfolio.  Web Page Design issues - aesthetic considerations (1) Simplicity (2) Consistency (3) Rich information Design skills - focus: using tables

Web Site – 6 Major Components  Homepage: index.html EDU314 Projects  Reflections on NETS Project  PowerPoint Project  Edutopia Project  Web Quest Project  Excel Projects Other Course Projects  Science  Math  Social Studies  Language Arts About Me Resume Educational Links Cool Ideas Week 4 Basic Requirements

Web Page Design  Designing a web page without using tables evTMB 2005 webpages Google Kara’s:  Using tables Data display Page layout

Using Tables for Layout (1)

Using Tables for Layout (2)

Using Tables for Layout (3)

Table skills: Basics  Create and insert a table: Insert > Table >

Table Properties:

Table Properties: concepts  Width in percent means percent of the page, regardless of what size the page is on any viewer's screen.  Width in pixels is absolute: the table will be, say, 400 pixels wide, no matter how wide the viewer's browser window.  Alignment: Choose whether you want your table centered, on the left side of the page, or on the right side of the page.  Borders are what outline your table. Specify the thickness of your table's outside border. All table boarders are defined in pixels.  Cell Spacing: This specifies how thick the grid lines of the table cells will be.  Cell Padding: This is the space between the gridlines of the table (invisible or visible) and the contents of its cells.  Width and Height: Tables will automatically stretch to accommodate whatever you put in them (graphics, text, etc.) If you want your table to have a specific width, be sure to check the box and specify a dimension in the text box. Note: a step-by-step manual is posted to the course schedule, Week 5:

The first assignment: First Publication of your Home Page  This file shall be named: index.html (this is your default homepage)  Include at least one graphic (eg, your own picture)  A layout of the 6 components based on the syllabus including links to sub-pages (which can be an empty page only with a title).  your URL (web address) to by 12am Wednesday The subject of the 314/600 or 314/603 The body of the the link, your full name You can find the requirements for this assignment and all the other assignments at the course website: “week 5, Basic Requirements for Your ePortfolio.”

Trouble-shooting the first publication  Picture not showing up  6 components  Layout: free style or table  Other pages: Back to home The navigation bar