多媒体基础及技术 1

Dreamweaver网页制作实战教程CONTENTS目录01

项目概述与工具介绍02

Web基础知识03

网页设计基础04

核心技术与功能应用CONTENTS目录05

Dreamweaver界面与操作06

项目实现步骤07

AI辅助网页制作08

总结与提高项目概述与工具介绍01项目提出与需求分析

01项目背景：小张的“古诗词网”构想中文系文学爱好者小张，希望创建一个“古诗词网”，用于分享诗词原文、精美术插画、深度解读，并搭建同好交流的创作平台，让更多人领略传统文化魅力。

02核心问题：技术实现的困惑小张对网页开发基本概念（如HTML结构、CSS样式、布局原理等）理解不系统，且不了解主流网页制作软件的功能特点与使用方法，难以将构想转化为结构清晰、页面雅致、功能完善的网站。

03解决方案：引入Dreamweaver针对小张需求，王老师推荐AdobeDreamweaver。该软件能帮助初学者快速上手，同时满足高级开发者需求，是实现创意构想与高效开发的理想选择，可助力小张实现文化与技术的融合。Dreamweaver软件简介发展历程：从Macromedia到AdobeDreamweaver最初由美国MACROMEDIA公司开发，1997年12月发布1.0版本，2005年被Adobe收购，随后经历CS3、CS4、CS5、CS5.5、CS6等版本更新，持续为Web开发人员提供改进和更新。功能特点：可视化与代码编辑的融合作为专业网页设计和开发软件，提供直观的所见即所得设计界面，支持拖拽布局元素，同时支持手写代码编辑，可创建静态和动态网页、网站及网络应用程序，满足精细控制需求。适用人群：初学者与专业开发者的共同选择对于初学者，能帮助快速上手网页制作；对于高级开发者，可满足复杂开发需求，是实现创意构想与高效开发的理想工具，在业界广泛应用，是Web开发人员软件库中不可或缺的工具。Web基础知识02网页与网站的基本概念网页的定义与组成网页是互联网上供浏览的信息页面，由HTML编写，包含文本、图片、链接等元素，通过URL访问。基本组成包括文本、图片、链接、颜色字体、布局和互动元素。网站的构成要素与特点网站是相互链接的网页集合，具有统一主题、域名、服务器、导航和互动性等特点。核心要素包括信息架构、导航设计、内容布局和URL结构。主页的作用与常见文件名主页是网站的入口页面，提供内容概览和导航引导。常见文件名有index.html、index.php、default.html等，其中index.html为最常用默认主页名。HTML语言基础HTML的定义与作用HTML（超文本标记语言）是创建网页的标准标记语言，用于定义内容结构，非编程语言，需与CSS、JavaScript结合实现功能与设计。HTML的基本组成单击此处添加项正文HTML文档基本结构示例单击此处添加项正文Dreamweaver中的站点管理站点的概念与组织结构

站点是本地计算机上管理网页文件和资源的文件夹，需按类型分类存储文件（如images、css文件夹），确保结构清晰。本地与远程站点设置

本地站点用于开发，远程站点为服务器端存储，可通过FTP/SFTP连接，支持文件同步与上传，实现本地与服务器文件管理。站点管理的注意事项

需合理设置文件结构、利用链接管理功能、配置多环境服务器，建立站点可提升开发效率，避免文件管理混乱和链接错误。网页设计基础03网页结构设计要素

信息架构确定网站内容的层次结构，包括主要和次级导航的组织，以及如何通过类别和标签来分类内容。

导航设计设计直观的导航系统，确保用户能够轻松地找到他们需要的信息。包括主导航菜单、面包屑导航、搜索功能和辅助导航。

内容布局规划内容的布局，使用网格系统来对齐和组织元素，确保在不同设备上都能保持良好的响应式表现。

HTML5语义化标签单击此处添加项正文网页结构设计要素

URL结构设计简洁、逻辑清晰的URL路径，使用户和搜索引擎都能容易理解网页内容。

设计前需求分析了解目标用户群体和业务目标，确定网站需要展示的核心内容和功能。

实现流程进行网站结构的草图绘制，创建交互原型，设计页面模板，使用HTML、CSS和JavaScript等技术实现网页结构，进行测试并填充内容。常见网页布局版式卡片式布局适用于展示大量内容，保持每部分内容独立性和多样性，常见于新闻网站和博客网站，如Facebook和Twitter。分屏布局当页面上的两个元素具有相等权重时使用，如电子商务网站的产品页面，可平衡展示产品图片和详细信息。大标题布局随着移动设计盛行，大号字体在标题和正文中使用流行，提高可读性和视觉冲击力，在极简主义设计中特别受欢迎。网格布局提供视觉上的秩序感，以平衡且有组织的方式呈现内容，使内容更易于使用，可在保持有序的同时通过不同大小内容增加视觉吸引力。杂志版式布局受杂志和期刊影响，适合有大量内容更新的网站，如网络杂志，能够处理大量信息并保持视觉吸引力。常见网页布局版式

单页布局将所有主要内容放在一个页面上，通过滚动完成导航，有时使用视差滚动效果，适合内容较少的网站或需要叙事连贯性的交互式内容。

F型和Z型布局基于用户视线移动方式设计，F型布局适合内容较多的页面，Z型布局引导视线沿对角线方向移动，影响用户扫描和阅读网页内容。

不对称布局在设计中产生动态化的视觉冲击力，通常由于图像和文本间的不平衡造成，适用于希望传达活力和动态形象的品牌。

简洁布局专注于内容展示，避免视觉混乱，适用于多种类型的网站，干净简单的布局被认为是优雅的设计形式。网页配色方案与文本使用原则

互补色配色方案互补色在色轮上相对位置相隔180度，如蓝色和橙色、红色和绿色，高对比度可吸引眼球，适用于突出重要元素，但需谨慎使用避免刺激或不和谐。

类似色配色方案类似色在色轮上彼此相邻，提供温和视觉过渡，如不同深浅的蓝色，适用于创造和谐、统一的视觉效果，传递平静、专业感，需调整亮度和饱和度保持对比度。

三色配色方案在色轮上等距选择三种颜色形成三角形，如蓝色、黄色和红色，提供更多色彩选择且保持协调性，适合需要活力和动感的设计，需平衡三种颜色视觉权重。

字体选择与搭配根据网站主题和受众选择字体类型，正式网站可选衬线字体，现代时尚网站可选无衬线字体，一个网页建议使用两到三种字体，标题比正文大，正文行距保持在1.5倍至2倍之间。

颜色与对比度颜色选择应与网页主题和品牌形象一致，合理搭配提升美感，引导视线和情感；对比度指文字与背景颜色差异，高对比度提高可读性，避免纯黑正文，可选择较灰颜色。网页配色方案与文本使用原则

排版布局与层次结构良好排版布局使页面内容层次分明，使用网格系统创建有序布局，提升美感；标题与段落层次结构清晰，主标题醒目，副标题较小但突出，段落间有适当间距。

图片与多媒体的融合高质量、相关图片增强网页吸引力，图片需优化以确保加载速度和显示效果；多媒体元素如视频、音频和动画使网页更具互动性和吸引力，但应适量使用避免影响加载速度和用户体验。

响应式设计与跨平台适配响应式设计确保网页在不同设备和浏览器中显示良好，使用CSS媒体查询和灵活网格系统实现；图片和媒体元素能自适应不同屏幕尺寸，设置百分比宽高及使用CSS媒体查询调整显示效果。

用户体验与可访问性用户体验设计以用户为中心，关注需求和行为习惯，简洁导航和易懂内容结构提升体验；可访问性指网页对所有用户（包括残障用户）的友好程度，使用语义化HTML标签、提供文本替代内容等提升可访问性。核心技术与功能应用04超链接的创建与管理超链接的定义与作用超链接是互联网的基本导航工具，允许用户通过点击文本、图片等元素在网页间跳转或定位到页面特定部分，是实现网页互联互通的核心技术。超链接的分类包括内部链接（同一网站内页面跳转）、外部链接（跳转至其他网站，URL以http://或https://开头）、锚点链接（页面内特定部分跳转）、电子邮件链接（以mailto:开头）、下载链接（指向可下载文件）、空链接（占位符，以#表示）和脚本链接（执行JavaScript代码）。Dreamweaver中创建超链接的方法选中需设为链接的文本或对象，通过插入面板的“Hyperlink”或属性面板的“链接”字段设置URL，可选择本地文件或输入外部链接，同时可设置目标窗口（如_blank在新窗口打开）和标题属性（鼠标悬停提示）。超链接的创建与管理

超链接的常用属性设置主要包括链接目标（URL）、目标窗口（_self当前窗口、_blank新窗口等）、标题属性（悬停提示文本）、CSS类（应用样式）、链接颜色（正常、悬停、访问后、活动状态）及下划线样式等，可在属性面板或CSS中配置。表格的应用与属性设置

表格的基本结构单击此处添加项正文

表格的常用属性设置基本属性包括宽度（像素或百分比）、高度（像素）、边框（厚度）、单元格边距（内容与边框间距）、单元格间距（单元格间距离）；背景属性可设背景颜色和图像；对齐方式含水平对齐（左、中、右）和垂直对齐（上、中、下）；还可设置边框颜色、样式及ID/Class用于CSS样式控制。

表格在网页中的应用数据展示：清晰呈现结构化数据，如价格表、排行榜；页面布局：早期用于整体页面框架搭建，通过合并/拆分单元格实现复杂布局；表单布局：辅助表单元素对齐，提升页面整洁度；内容组织：将相关信息分栏展示，如产品参数对比。

Dreamweaver中表格的编辑操作可通过插入面板“Table”创建表格，在属性面板修改属性；支持选中行/列/单元格进行合并、拆分；设计视图中可直接拖拽调整大小，代码视图中可编辑HTML标签精确控制结构；还可通过CSS设置表格样式，如边框-collapse合并边框。CSS样式基础与选择器

CSS的定义与功能CSS（层叠样式表）用于描述HTML文档的表现形式，控制文本样式（字体、大小、颜色）、布局（盒子模型、定位）、背景、边框等，实现内容与样式分离，提高网页维护效率。

CSS的三种类型单击此处添加项正文

常用CSS选择器类型单击此处添加项正文

Dreamweaver中设置CSS样式的方法通过“CSS设计器”面板可视化创建、编辑选择器和样式，支持添加类、ID、标签等选择器，设置字体、颜色、边距等属性；属性面板可快速添加内联样式；代码视图提供代码提示和自动完成，辅助手写CSS代码。表单的创建与元素设置

表单的作用与基本结构单击此处添加项正文

常见表单元素包括文本框（text）、密码框（password）、单选按钮（radio）、复选框（checkbox）、选择下拉列表（select）、文本区域（textarea）、文件域（file）及按钮（提交submit、重置reset、普通button），用于收集不同类型的用户信息。

Dreamweaver中插入表单的步骤单击此处添加项正文

表单的样式与验证可通过CSS设置表单外观，如字体、颜色、边框、布局；Dreamweaver提供基本表单验证功能（如必填字段），复杂验证需结合JavaScript或服务器端脚本实现；提交按钮点击后将表单数据按method指定方式发送至action指定的服务器地址。Dreamweaver界面与操作05Dreamweaver2020界面组成01菜单栏包含文件、编辑、查看等9个菜单项，提供文件操作、编辑、视图切换、插入元素、站点管理等核心功能，如“文件”菜单可新建/打开文档，“站点”菜单用于站点管理。02文档工具栏提供代码、拆分、设计等视图切换按钮，可在不同编辑模式间切换，还包含实时视图功能，方便在编写代码时预览网页效果。03文档窗口显示打开的文档，可通过文档工具栏切换代码、拆分、设计视图，拆分视图下上为设计区、下为代码区，支持直接编辑内容。04属性面板用于设置选中元素的属性，如图像的宽高、链接，文本的字体、颜色等，选中元素不同，显示的属性选项也不同，可通过“窗口→属性”调出。Dreamweaver2020界面组成

文件面板管理站点文件和文件夹，支持文件的打开、移动、重命名等操作，可连接远程服务器进行文件传输，未定义站点时仅显示系统文件列表。

插入面板集成超链接、图像、表格等多种网页元素按钮，按类别（如表单、HTML）组织，点击即可插入相应元素，简化网页制作流程。

CSS设计器可视化创建和管理CSS样式，包含源、@媒体、选择器、属性窗格，可定义媒体查询、编辑选择器及设置字体、边框等样式属性。元素定位与行为应用CSS元素定位方式包括static（默认，正常文档流）、relative（相对自身原位置偏移）、absolute（相对非static祖先定位）、fixed（相对浏览器窗口定位）、sticky（滚动时在特定范围切换定位方式）。APDIV元素单击此处添加项正文行为的概念由事件和动作组成，事件是触发条件（如onclick、onmouseover），动作是预编JavaScript代码（如打开窗口、交换图像），无需手写代码即可实现交互效果。常见事件类型包括鼠标事件（onclick、onmouseover）、页面事件（onload、onunload）、表单事件（onsubmit、onchange）等，如onload在页面加载完成后触发。常见行为应用如交换图像（鼠标悬停切换图片）、弹出信息（显示提示对话框）、显示-隐藏元素（控制元素可见性）、拖动AP元素（允许用户拖拽元素）等，通过行为面板添加和管理。项目实现步骤06站点创建与管理

01建立本地网站文件夹选择易于访问的目录（如C盘）创建主文件夹（如“Myshop”），并在主文件夹内创建子文件夹（如“images”），用于分类存储不同类型的文件，命名需避免特殊字符。

02新建站点与网页文件在Dreamweaver中通过“站点”→“新建站点”，设置站点名称（如“我的小店”）和本地站点文件夹路径，可设置默认图像文件夹。创建站点后，通过右击站点名称选择“新建文件”创建“index.html”等网页文件。

03站点的编辑、复制、删除与导入导出通过“站点”→“管理站点”可对站点进行编辑（修改名称、文件夹路径等）、复制（快速创建相似站点结构）、删除（仅删除管理信息，文件保留）操作。导出站点可生成.ste文件便于移植，导入站点可将.ste文件恢复到Dreamweaver中。网页基本元素应用设置页面属性通过属性面板的“页面属性”按钮，可设置页面字体（如添加“楷体”“华文新魏”到字体列表）、大小、颜色，背景颜色或图像，页边距以及页面标题等。编辑文本与插入列表单击此处添加项正文插入图片、日期、水平线与特殊符号点击插入面板“HTML”下的“Image”插入图片，在属性面板设置宽高、对齐方式等；插入水平线可设置宽度、高度、颜色；通过“日期”按钮插入日期并设置格式；利用“字符”选项插入版权符号等特殊符号，部分效果需在浏览器预览查看。表格布局与超链接应用利用表格布局页面

插入表格时设置行数、列数、宽度、边框等属性，通过合并/拆分单元格调整结构。在“古诗词网”主页制作中，合并单元格插入banner图，设置单元格背景色，在表格中插入导航文字、图片和诗词信息，实现页面的有序布局。设置内部与外部超链接

选中文字或图片，通过属性面板或插入面板设置内部链接（如导航菜单链接到本站点其他页面“qwsx.html”），外部链接（如“友情链接”到“/”），并可设置目标窗口（如“_blank”在新窗口打开）。设置锚点、电子邮件与图片热点超链接

锚点链接通过插入锚点标签（）并设置链接为“#top”实现页面内跳转；电子邮件链接格式为“mailto:邮箱地址”；图片热点链接通过选择图片热点工具，在图片特定区域设置链接目标，如“qwsx.html”。表单、多媒体与特效制作

用户注册表单制作插入表单后，添加表格布局表单元素，包括文本框（设置尺寸、最大长度）、密码框、单选按钮（统一name属性）、复选框、下拉列表（添加列表值）、文本区域（设置行数、列数）、文件域以及提交和重置按钮，可通过CSS设置表单样式。

插入音频与视频在“全文赏析页”插入HTML5Audio，设置音频源路径，勾选“Controls”显示控制条、“Autoplay”自动播放、“Loop”循环播放；在“诗人简介页”插入HTML5Video，设置视频源路径、宽高及播放控制选项，实现多媒体内容在网页中的集成。

利用行为面板制作网页特效通过行为面板可添加多种特效，如“交换图像”实现鼠标悬停图片切换，“弹出信息”在页面加载时显示提示框，“改变属性”实现鼠标悬停图片缩放，“显示-隐藏元素”控制DIV元素在鼠标悬停时显示或隐藏，增强网页交互性。AI辅助网页制作07AI工具生成网页模块

头部模块生成通过提示词“生成含logo和导航栏的头部区域”，AI可生成包含logo、导航链接（主页、关于我等）的HTML和CSS代码，需替换logo图片路径并调整样式。

Banner模块生成输入提示词“生成带居中背景图的banner”，AI生成含