MODULE DESCRIPTION
This Module will guide students to Discover how to
create, design, and edit web pages using Dreamweaver's
visual design tools and code editor, equipping students
with the skills and knowledge necessary to create visually
appealing, fully functional, and easily maintainable
websites using this industry-leading tool without worrying
about the codes behind.
UNIT 1
WEB AUTHORING TOOLS
Unit Overview
This unit introduces students to Web Authoring Tools used
in designing, developing, and publishing websites. It
focuses on how these tools simplify the web development
process for both beginners and experienced developers
by offering user-friendly interfaces, drag-and-drop
functionality, and pre-designed templates.
Students will learn how to build web pages using Adobe
Dreamweaver, a professional web authoring tool that
supports both WYSIWYG (What You See Is What You
Get) design and code-based editing. The goal is to make
web development more accessible and efficient, even for
those with little to no coding background.
What is web authoring ?
Web authoring is the process of creating,
designing, and managing content for the
internet. Essentially, it's everything involved in
developing a web page or a complete website.
This process includes:
• Writing and editing the underlying code, such as
HTML, CSS, and JavaScript.
• Designing the visual layout and user experience (UX).
• Adding multimedia, interactive elements, and other
features.
• Managing the content and ensuring the site works
properly on various devices.
Web authoring tools are software applications
designed to help users create, design, and
maintain websites without needing extensive
knowledge of coding or programming
languages.
Web authoring tools range from basic editors to
advanced platforms and are often integrated
with features that streamline the design,
development, and publishing processes. These
tools bridge the gap between technical expertise
and creative expression, making web
development accessible to a broader audience.
Web authoring tools can be categorized based on their functionalities
and target users. Below are the primary types and examples:
1. Text-based Editors:-Notepad++,Sublime Text and Visual Studio
Code
2. WYSIWYG Editors:-Adobe Dreamweaver ,Microsoft Expression
Web and Webflow
• Template-based Platforms:-: Wix , Squarespace and
WordPress
3. Content Management Systems (CMS):-Joomla, Drupal and
WordPress
WYSIWYG stands for "What You See Is What You
Get." WYSIWYG editors are tools that allow users
to create and edit websites visually, where the
design interface closely resembles how the final
website will appear in a browser.
End of UNIT ONE
2.1 Getting Started with the Adobe Dreamweaver CC
Types of Adobe Dreamweaver
1. Macromedia Dreamweaver (Old, before Adobe): It was first
developed by Macromedia and launched in 1997. It quickly
became one of the leading web development tools thanks to its
pioneering WYSIWYG (What You See Is What You Get)
interface. Versions ranged from Dreamweaver 1.0 up to
Dreamweaver 8.0 before Adobe's acquisition in 2005. Macromedia
Dreamweaver allowed users to design websites visually while still
offering a code editor for more advanced users. It supported basic
HTML and JavaScript and introduced features like Split View,
templates, and libraries, making it highly popular among early web
designers during the internet boom.
1. Adobe Dreamweaver CS (One-time purchase, Creative Suite):
After acquiring Macromedia, Adobe released Adobe
Dreamweaver CS (Creative Suite) starting from 2007 until 2012.
Dreamweaver CS versions (CS3, CS4, CS5, CS5.5, and CS6)
were integrated into Adobe’s Creative Suite alongside
Photoshop, Illustrator, and other design tools. These versions
introduced stronger coding support, better CSS handling, server-
side scripting capabilities (PHP, [Link]), and site
management tools like Live View and FTP publishing.
Dreamweaver CS was sold as a one-time purchase, allowing
users to buy and own their software without the need for
ongoing payments. Dreamweaver CS6, released in 2012, was
the final version under the Creative Suite model.
1. Adobe Dreamweaver CC (Subscription, Creative Cloud):
In 2013, Adobe transitioned Dreamweaver into the
Creative Cloud (CC) model, introducing a subscription-
based system. Adobe Dreamweaver CC versions (like CC
2015, CC 2017, CC 2018, CC 2019, etc.) brought
significant advancements, including support for HTML5,
CSS3, Bootstrap integration for responsive design, real-
time browser previews, Git version control, and cloud
syncing capabilities. Unlike the CS series, CC versions
receive regular updates and improvements, ensuring
developers always have access to the latest web
technologies. Dreamweaver CC continues to evolve
today, offering a powerful, modern environment for both
visual designers and professional coders.