| 1 |
TinyMCE - Ribbon Editing |
- WYSIWYG Editor: TinyMCE is a popular, platform-independent rich-text editor used to input content that looks visually similar to the final output (What You See Is What You Get).
- Ribbon Interface: The ribbon is the graphical control element at the top of the editor, organizing tools and functions into tabs (e.g., File, Edit, Insert).
- User-Friendly: It simplifies content creation for users unfamiliar with raw HTML, providing one-click formatting options like bold, lists, and links.
- Customizable: Its appearance, functionality, and the specific buttons on the ribbon can be highly customized to fit application requirements.
|
| 2 |
Dreamweaver (DW) Basics |
-
IDE/Code Editor: Dreamweaver is an Integrated Development Environment (IDE) and visual code editor primarily used for designing and developing websites.
-
Code, Split, and Design Views: It offers multiple views, allowing developers to work directly with the code, see the live visual design, or view both simultaneously.
-
Site Management: Helps organize and manage a local copy of a website, including files, folders, and settings for publishing to a remote server.
-
Visual Design Tools: Provides tools for visually creating layouts, inserting media, and applying CSS without manually writing every line of code.
|
| 3 |
HTML DOM |
-
Tree Structure: The DOM represents an HTML document as a logical tree structure, where every element, attribute, and piece of text is a node.
-
API for HTML: It provides a programming interface (API) that allows scripts (like JavaScript) to access, modify, add, or delete HTML elements and content dynamically.
-
Standardized: It is a W3C standard, ensuring a consistent way for scripts to interact with web pages across different browsers.
-
Dynamic Content: Crucial for dynamic content updates, handling user events, and creating interactive web applications without reloading the entire page.
|
| 4 |
File System Folders, Mapping, Absolute vs Relative Links |
-
File System Folders: Websites are organized into folders (directories) to structure files (HTML, CSS, images) logically.
-
Mapping (Site Root): The site root (or local site folder) is the top-level folder on your computer that mirrors the structure of the live website.
-
Absolute Links: Full URLs that include the protocol, domain name, and file path (e.g.,
https://www.example.com/images/logo.png). Used for external resources.
-
Relative Links: Paths defined relative to the current file's location (e.g.,
../css/styles.css or images/photo.jpg). Best practice for internal site navigation.
|
| 5 |
DHTML Basics |
- Umbrella Term: DHTML (Dynamic HTML) is not a single technology but a marketing term for the combination of HTML, CSS, and JavaScript.
-
Interactive Web Pages: It was used to describe web pages that could change content, style, or position after being loaded, without server interaction.
-
Precursor to Modern Web: While the term is outdated, its underlying technologies (DOM manipulation via scripting) are the foundation of modern interactive web applications.
|
| 6 |
Protocols: FTP, HTTPS, Cloud Services |
- FTP (File Transfer Protocol): A standard network protocol used to transfer computer files between a client (your computer) and a server (the web host).
-
HTTPS (Hypertext Transfer Protocol Secure): The secure version of HTTP. It uses SSL/TLS encryption to ensure data transmitted between the user's browser and the website is private.
-
Cloud Services: Third-party hosting and computing resources (e.g., AWS, Azure, Google Cloud) that provide scalable web hosting, storage, and application delivery.
-
Protocols Define Rules: These protocols define the specific rules and formats for how data is transmitted and interpreted over the internet.
|
| 7 |
Dreamweaver RWD Templates Bootstrap |
-
RWD (Responsive Web Design): Design approach ensuring web pages look good and function correctly across all screen sizes and devices (desktops, tablets, phones).
-
Bootstrap Integration: Dreamweaver often integrates the popular Bootstrap framework, which provides pre-built CSS and JavaScript components for quick RWD development.
-
Templates: Dreamweaver provides pre-designed templates based on Bootstrap, offering a starting point for developing responsive, mobile-first layouts.
|
| 8 |
Dreamweaver Email Templates |
- HTML Email Challenges: Creating HTML emails is difficult due to inconsistencies and limitations across various email clients (Gmail, Outlook, etc.).
-
Table-Based Layouts: Email templates often rely heavily on nested HTML tables for layout stability, as CSS support is inconsistent.
-
Inlining CSS: Dreamweaver can help with the process of inlining CSS (moving styles from the
<head> tag to the HTML elements themselves) which is necessary for broad client compatibility.
|
| 9 |
WordPress |
-
CMS (Content Management System): WordPress is the most popular open-source CMS used for creating and managing websites and blogs without writing all the code from scratch.
-
Themes and Plugins: Its functionality is extended through Themes (for design and layout) and Plugins (for specific features like SEO, contact forms, or e-commerce).
-
Dashboard Interface: Users manage content, design, and site settings through an intuitive graphical administration area called the Dashboard.
-
PHP and MySQL: It is built using the PHP scripting language and stores its content and settings in a MySQL database.
|
| 10 |
WordPress vs Social Media WordPress WooCommerce vs
Wix, SquareSpace |
-
WordPress vs. Social Media: WordPress offers full ownership and control over content and data, unlike social media, which is rented space.
-
WordPress WooCommerce (Open-Source): Offers a highly customizable, feature-rich, open-source e-commerce platform that can handle large scale and complex requirements.
-
Wix/SquareSpace (Closed/Proprietary): Simpler, all-in-one, proprietary platforms focused on ease of use with drag-and-drop builders but with less customization flexibility.
-
Customization vs. Simplicity: WordPress/WooCommerce favors custom development and scalability, while Wix/SquareSpace prioritizes beginner-friendliness and fast setup.
|
| 11 |
AI, HTML Validation, AI as a Tool |
-
HTML Validation: The process of checking HTML code against W3C standards to ensure it is correctly structured, accessible, and renders consistently across browsers.
-
AI as a Tool (Code Generation): AI models (like Gemini or GitHub Copilot) can be used to rapidly generate boilerplate code, suggest function implementations, and explain complex concepts.
-
Debugging and Optimization: AI can assist in identifying logical errors or suggesting performance optimizations in existing code snippets.
-
Augmentation, Not Replacement: AI is a powerful productivity tool that augments developer capabilities but still requires human expertise for review, context, and validation.
|
| 12 |
Adobe Firefly |
-
Generative AI: Adobe Firefly is a family of creative generative AI models developed by Adobe.
-
Image Creation: Its primary function is to generate images, art, and graphic design elements from text prompts (Text-to-Image).
-
Creative Editing Tools: Firefly powers features within Adobe Creative Cloud applications, such as Generative Fill and Generative Expand in Photoshop, for seamless object manipulation and image extension.
-
Commercial Safety: It is trained on licensed content (Adobe Stock, public domain, and openly licensed content) intended to be commercially safe for creative professionals.
|
