CSUN  Wordmark
Page Description

The following page is a three column layout with a header that contains a quicklinks jump menu and the search CSUN function. Page sections are identified with headers. The footer contains update, contact and emergency information.

Web Editing For Faculty - Dreamweaver

Dreamweaver Workflow Overview

The Dreamweaver Workflow is key in establishing a sound web development process. Understanding and incorporating these steps will make it easy for to not only edit existing web pages, but also start new web pages in the web environment at California State University, Northridge. There are two sections concerning workflow. The main focus of this guide is the first section, which is directed more to beginners. The second section is more focused to advanced web developers. This guide will not go into detail concerning the second section. Links and external documentation will be provided to guide the more advanced users. The steps to the Dreamweaver Workflow is as follows:

Main Workflow

  1. Planning Your Site

    Planning your web site from the start will definitely help save time later on. The Faculty Web Templates do provide an initial basis for developing a web site - a quick start, so to speak. However, they do not provide the necessary folder structure needed to have a solid web development environment. By using the Dreamweaver Files panel, the folder and file structure needed for a solid web development environment can be easily created.

     

    View of Files Panel

     

    To learn more about "Planning Your Site", please reference the Online Documentation for Dreamweaver 8, hosted by Adobe. In the side menu pane, navigate to <Dreamweaver Basics>, <Introduction>, <Dreamweaver workflow for creating websites>, then <Planning your site>.

  2. Managing Your Site Files

    Dreamweaver contains the Files and Assets panels (that will be covered in the Dreamweaver Workspace section more indepth) that help with managing, organizing and publishing files.

     

    View of Files and Assets Panel Button

     

    When using the Files panel, make sure that the practice of establishing a solid web file structure is followed. Setting up the cssfiles, images, docs, cgi-bin, and Templates folders in the public_html folder will definitely aid in organization and development for web development. To learn more about managing files, please reference the Online Documentation for Dreamweaver 8, hosted by Adobe. In the side menu pane, navigate to <Working with Dreamweaver Sites>, then <Managing Your Files>.

    The Assets panel also helps with organization. The images, links, and scripts associated with all the files in the public_html folder are displayed here. This allows for dragging reusable assets into new/old files that are being updated. To learn more about site assets, please reference the Online Documentation for Dreamweaver 8, hosted by Adobe. In the side menu pane, navigate to <Working with Dreamweaver Sites>, then <Managing Site Assets and Libraries>.

    To learn more about "Managing Your Site Files", please reference the Online Documentation for Dreamweaver 8, hosted by Adobe. In the side menu pane, navigate to <Dreamweaver Basics>, <Introduction>, <Dreamweaver workflow for creating websites>, then <Managing your site files>.

  3. Laying Out Web Pages

    This step covers the actual layout of the content on the web page. Fortunately, the Faculty Web Templates take care of 95% - 99% of the layout of the web page. The goal was to give more focus to editing content rather than the actual page layout. To learn more about "Laying Out Web Pages", please reference the Online Documentation for Dreamweaver 8, hosted by Adobe. In the side menu pane, navigate to <Dreamweaver Basics>, <Introduction>, <Dreamweaver workflow for creating websites>, then <Laying out web pages>.

  4. Adding Content To Pages

    Within Dreamweaver, content can be added to the Faculty Web Templates very easily. Text, images, and tables are just a few of the elements that can be added. The sections entitled Editing Text - Links and Lists, and Integrating Tables and Images will cover this step more indepth.

     

    View of Insert Option

     

    To learn more about "Adding Content To Pages", please reference the Online Documentation for Dreamweaver 8, hosted by Adobe. In the side menu pane, navigate to <Dreamweaver Basics>, <Introduction>, <Dreamweaver workflow for creating websites>, then <Adding content to pages>.

  5. Hand-coding

    Hand-coding (i.e. manipulating the HTML by editing the markup language) is another way to edit a web site. This step is a bit more sophisticated, but in some situations, necessary to do. The section that will can utilize this step is entitled Metatags and Title Attributes.

     

    View of Code View

     

    To learn more about "Hand-coding", please reference the Online Documentation for Dreamweaver 8, hosted by Adobe. In the side menu pane, navigate to <Dreamweaver Basics>, <Introduction>, <Dreamweaver workflow for creating websites>, then <Hand-coding>.

Additional Steps to Workflow (Advanced)

  1. Setting Up A Web Application

    This step is for more advanced web developers who intend to have dynamic content that connects to a database of some sort. To learn more about "Setting Up A Web Application", please reference the Online Documentation for Dreamweaver 8, hosted by Adobe. In the side menu pane, navigate to <Dreamweaver Basics>, <Introduction>, <Dreamweaver workflow for creating websites>, then <Setting up a web application>.

  2. Rapid Application Development

    This is also another step for advanced web developers. This step is a continuation of the previous step, and discusses how to develop an environment for rapid deployment of web applications. To learn more about "Rapid Application Development", please reference the Online Documentation for Dreamweaver 8, hosted by Adobe. In the side menu pane, navigate to <Dreamweaver Basics>, <Introduction>, <Dreamweaver workflow for creating websites>, then <Rapid application development>.

Publishing A Web Site

There are a few ways to publish a web site. This depends heavily on how the development environment is set up. In this tutorial, we recommend setting up a development environment to where local web development is done, then once all the changes have been put into place, upload the content to the CSUN Web Environment. As users become more comfortable with developing web sites, the more non-standard ways of publishing a web site will be discovered and developed by that user.

Now that the workflow has been covered, the next step is to cover the the Dreamweaver Workspace.