Learning Resources
Lesson
Web design and production can be divided into logical phases
- conceptual planning
- purpose,
- what it will be about,
- generally how it will be organized
- visual planning
- organizational structure including organization of content,
- navigation structure,
- choices for the use of fonts,
- formats for graphics and other media)
- development
- site development and management
- stylesheet development
- content development
- individual page development
This lesson will focus on the tools employed for the development phase. The other topics will be covered in more detail in Unit 3.
Site Development and Management
The web site is the entire collection of web pages, folders and media contained in a web. For a small project, this may contain only a few pages and organization and management is very simple. If the project contains a few dozen pages, or a few hundred pages, then careful planning is required and periodic maintenance of the site is essential. Webs like the one built for this course, for example, will contain hundreds of files for each unit (more than 850 for unit 2, if you include all the temporary files that FrontPage builds), and thousands of files for the entire course.
Tools that enable the developer to organize pages into folders, use common naming for folders and files, and visually determine if there are broken links are essential. There are a number of such tools
- Adobe's GoLive
- Macromedia's Dreamweaver
- Macromedia's HomeSite
- Microsoft's FrontPage
Each of these tools has web site management features. FrontPage's management tools include
- a visual representation of the organization of your web site showing the links between pages (the Hyperlink View)
- a folder list and a folder view that let you build, edit, copy, and delete the folders and files to get the organizational structure you want
- a reports view that lets you get information on a variety of components of your web, including
- number of pages
- size of pages
- status of hyperlinks (shows broken links, lets you edit the broken links)
- pictures (number, sizes, locations)
- unlinked pages (pages that have no links to them from other pages)
- pages that will take longer to download (you can set the criteria)
- uncompleted tasks (see next item)
- a task manager
- this is a tool that you can start from a page and make notes about what you want to do with the page. When you edit the page, it allows you to update the status of the task (finished or not)
- a navigation view
- this tool allows you to build an automatic navigation structure for the web, putting navigation features on every page that you add to the site
- a theme tool
- this tool allows you to apply the same visual look to all the pages in the web
- a shared borders tool
- this tool allows you to add the same content to all pages in the web site, placing it at the top, bottom, left and right sides as you choose
Stylesheet Development
You have already encountered stylesheets. While you can write them directly in a text editor, there are a number of tools available for developing and managing stylesheets. You may, for example, want to have multiple stylesheets for a web site. Some tools simplify this task.
Standalone tools include CoffeeCup's Stylesheet Editor, Danere's Stylemaker, and Bradbury Software's TopStyle Pro.
Stylesheet tools are also included in many web production tools, including
- FrontPage (select Style under the Format menu), although it is not easy to use, nor does it produce code that can be used by all browsers. FrontPage also allows you to link the current page or all pages in you web to a stylesheet by selecting Format / Style Sheet Links on the menu
- HomeSite comes with TopStyle Lite, which is a separate program.
- Dreamweaver has an embedded stylesheet editor
Content Development
We are distinguishing between content development and web page development.
Content includes all text, images, and other media. As you can see, this means that there is a huge variety of tools and programs available for developing web content. Essentially, if you can get the content onto the computer, it is in digital format - if it is digital you can include it in a web page. You may have to convert it from one format to another. This means that content produced in all programs can be considered web-content (even if you have to use a screen capture utility to get it).
The important thing to realize about this is that you are not restricted to content you can make in a web editor program.
Web Page Development
You may have figured this out by now. Building web pages can be as simple as adding some text, making a few links and your done. Or it may require creation of a variety of media content using hardware such as cameras and scanners, software such as video editors, illustration programs and animation programs. The web page editor is where it all comes together. This is similar to using a desktop publishing program to build print documents. There are three general types of web page production software
- Text editors such as Notepad, where you have to enter all the text and all the code manually. This was the only method for the first year or so of the web.
- Html text editors, such as HomeSite and HotDog, where the codes are selected from a list and you manually enter your text. these programs tend to have a lot of features to automate production tasks. These were the next editors to develop. They have been around for 7-8 years and many are quite sophisticated, including web-site management tools as well as content production tools,
- WYSIWYG (what you see is what you get) editors. Programs such as FrontPage, PageMill, Dreamweaver and GoLive include WYSIWYG editors. Most of these let you switch from a WYSIWYG view to a text view. In FrontPage you do this by clicking on the Normal and HTML tabs at the bottom of the edit window. In HTML voew you have to manually enter everything, including code. These programs tend to automate almost all the tasks of building web content, entering all the HTML code automatically. They do sometimes cause 'code bloat', making larger file sizes than if you did it manually. The Normal view in FrontPage has a wide variety of tools and features which enable you to include many different media formats with minimal effort. These are full blown web site management and content production tools. FrontPage, for example has built-in image editing and image production tools. You can show the toolbars for them by going to View / Toolbars on the menu and selecting (turning on the check mark) the Pictures and Drawing Toolbars. The first lets you edit gifs and jpgs that you imported. The second lets you create new images directly in FrontPage. The Pictures toolbar turns on automatically when you click on an imported image in your page.
Activity
Assigned activities
The purpose of this activity is to determine the types of web management features and web content development features in web production software. Information about the products can be found at the web site links given below. Many of these products allow you to download and run 30 day trial copies. That is beyond the scope of this assignment, although you should feel free to do so if you wish.
Please complete the following
- Select any one of
- Dreamweaver (Macromedia) or
- GoLive (Adobe)
and any one of
- HomeSite (Macromedia) or
- HotDog (Sausage)
and determine
- 4 features that are designed to help you manage a web or website
- 4 features that are designed to help you create web content
You will have to do web-based research to determine the answers to these questions. For example, you might consider doing google searches for things like "GoLive features", "HomeSite tutorials", "compare HomeSite and HotDog" and so on.
- Create an entry in your course portfolio to hold your results
- Publish you entry to your course portfolio web
Test Yourself
There is no test for this lesson