dreamweaver网页设计教程

1. Dreamweaver 界面基础布局
   打开 Dreamweaver，默认界面包含文件面板、设计视图和代码视图。左侧文件面板显示项目结构，中间切换设计与代码可双屏预览。新建 HTML 文件时，系统会自动生成骨架，用户只需在右侧属性检查面板设置标题和编码。
2. 响应式网页设计实操
   使用媒体查询功能调整布局，设计面板中拖入容器盒子，通过网格系统自适应屏幕宽度。可在底部工具栏选择手机、平板图标快速预览不同设备效果，确保文字、图片在移动端不失真。
3. CSS 样式与类定义
   选中元素后，在右侧样式面板添加或修改 CSS 规则。Dreamweaver 支持实时预览样式变化，用户可自定义字体、颜色、边距。建议统一使用外部样式表，方便后期统一修改整站设计。
4. 文件上传与远程部署
   配置站点设定后，可通过「站点-发布服务器」将本地代码上传至服务器。输入 FTP 或 SFTP 信息后，一键同步文件，确保线上版本与本地设计一致。上传完成后建议在浏览器中打开链接验证是否正常。
5. 常用快捷键与代码提示
   按 Ctrl+E（Mac 为 Cmd+E）可快速定位文件，Ctrl+Shift+E 可打开远程文件列表。代码编辑区支持自动补全，输入 HTML 标签名后按 Tab 自动生成成对标签，大幅提高网页设计效率。

软件页面：Dreamweaver。