Web Design—Project 1 Basic Design/HTMLBasics of Web Design—Joel JohnsonProject 1 | 2 | 3 | 4 | 5 | 6Project 1: create a basic HTML page. Scan one current magazine cover, “Save for Web” in Photoshop, and make a link to this image and to the magazine’s Web site. These pages should have the appearance of a critique of the magazine, design, topics, etc. You do not need to seriously research these topics, just present a clean professional appearance. Make up text content here or credit sources if you want to gather external content. An example is provided below of this two page assignment. Click on the browser (Internet Explorer) screen shots to see the working HTML examples.
Yahoo Internet Life New Years Resolution: Survive the Next Year Yahoo Internet Life may have seen its heyday come and go with 2001. Already over their head in debt YIL is now seeing drastic cuts in the advertising budgets of many of their current (and former) advertisers. In the cutthroat world of publishing a lost ad revenue stream could finish the once prominent publication. Check out Yahoo Internet Life at www.yil.com.
(Click To Enlarge)
Web Design—Project 2 Columns (print style)Basics of Web Design—Joel JohnsonProject 1 | 2 | 3 | 4 | 5 | 6Project 2: Dissecting columns. This project requires the use of two column style pages. Compare and contrast the two approaches used. Consider column width, white space, visual appeal, areas of focus, and of course FACES. Don’t forget to open these sites in Dreamweaver, check browsers, screen resolutions, platforms, etc. Try to use pages that rely heavily on column based design. News/Information sites are often laid out this way. Make sure to save the sites as “Web Page Complete (Internet Explorer)” in order to evaluate them in Dreamweaver. Click on the browser (Internet Explorer) screen shot to go to the Washington Post Web site.
In Dreamweaver click around the page (particularly on table borders indicated by dashed lines) while watching the properties window to examine details of each site. Look for column and row widths and heights, color schemes, font schemes, navigation type, whatever you can discover. If you select something on the page and then view the code Dreamweaver will highlight the code that generated the selection (shown below in Dreamweaver 4).
Web Design—Project 3 FramesBasics of Web Design—Joel JohnsonProject 1 | 2 | 3 | 4 | 5 | 6Frames are considered out of bounds by many Web designers. They can lead to some very major usability issues if they are used poorly. Used correctly, frames can allow site elements (e.g. navigation and banner) to exist as separate HTML documents. They allow a designer to fully compartmentalize a site. Navigation, banners, headers, footers, logos, etc. can be fully separated from other page elements. This can bring high levels of site consistency and rapid load times. The page below is about 30 Kb everything is generated using HTML code except the animation (25 Kb). Project 3 will require you make a basic frame-based page. This project can be a frameset as visually simple as this example below and using frames as simply as the k9-rx site example. Place a navigation system in a frame or use framesets for headers and footers. Try to keep this page relatively simple, frames will not tolerate the many things that tables and layers will and there are several significant properties unique to frames that must be understood to use them. This site is the HTML example of this project.
The page above is comprised of 3 framesets, one inside another and that one inside the third. Below are shown the properties of the first frameset: three rows and one column. The top and bottom rows here are designed to block off the header and footer areas giving each 50 pixels of space. The middle row is given a value of 1 relative and will take up any vertical space that is left.
Here are the three columns and one row that make the second frameset. It is inside the middle row (nested) of the frameset above. In this frameset the left and right columns each take up 1 relative meaning they will split any leftover horizontal space and center horizontally the center column. The center column defines the width of the center area you see on the final page (570 pixels).
The final frameset is inside of the middle column of the second frameset. It has three rows and one column as well. The top and bottom row each take up 1 relative meaning they will split any leftover vertical space and center vertically the center row.
|
WHAT IS IT? XML Web workshop--Developers
Guide--Demos WHAT CAN YOU DO WITH IT? WORKING EXAMPLE (WITH HTML CODE) XML Film Reviewer WEB LINKS AND MORE INFORMATION WHAT SOFTWARE IS REQUIRED, WHERE DO YOU GET ACCESS TO IT, AND HOW MUCH DOES IT COST? XML and SGML
Authoring HotMetal Pro |
Advanced Concepts DHTML
WHAT IS IT?
WHAT CAN YOU DO WITH IT?
WEB LINKS TO MORE INFORMATION ABOUT TOPIC? Inside DHTML an in-depth newsletter
about all things DynamicHTML Project Cool Developer Zone DHTML Demos WebCoder WHAT SOFTWARE IS REQUIRED, WHERE DO YOU GET ACCESS TO IT, AND HOW MUCH DOES IT COST? Dreamweaver DHTML
Authoring/Editing Software |
Fall 2000 Student Topic Exam Questions
Templates and Libraries
Name two reasons why templates are used.
Site consistency
Maintenance restrictions to protect design
What’s the difference between templates and libraries?
A template is a design model putting limits on site changes; a library is a storage area for site elements.
Forms
Why are forms one of the most important elements of a Web site?
They allow interaction between the site managers and the site users.
What
does CGI stand for?
Common Gateway Interface
What is a jump menu used for?
A jump menu offers rapid access to site areas while taking up little on screen space.
DHTML
What does DHTML stand for?
Dynamic HTML
What does DHTML offer for Web sites?
DHTML offers Dynamic, interactive content, high levels of design control in a plug-in free environment.
Name three technologies that are included in DHTML.
HTML
CSS
Javascript
Commands
Name two commands Dreamweaver comes installed with.
Clean up Word HTML
Create Web photo album
Color Scheme
Optimize
Image In Fireworks
Explain what one of the commands you listed enables you to do.
-Clean up Word HTML allows you to remove Microsoft specific code allowing easier maintenance within Dreamweaver.
-Color Scheme = allows you to choose and change the color scheme for the background and text of a web page.
-Create Web Photo Album = allows you to quickly create a web page in which you can display pictures in a folder.
-Optimize Image in Fireworks = allows you to optimize images in fireworks which makes the file size smaller.
Automation
Name at least two things that the history palette is good for.
- shows you what you've done so far
- can make changes without clicking undo/redo all of the time
-can make the same changes from one document to another without retyping
CSS (Cascading Style Sheets)
For what purpose would one use CSS?
You would use CSS to achieve a high level of text and design control.