Dreamweaver如何快速搭建个人网站？

第一步：准备工作

在打开 Dreamweaver 之前，先做好这些准备工作，会让整个过程更顺利。

1. 明确网站目标与内容

   • 你的网站是做什么的？ 个人作品集、博客、简历展示、还是个人日记？
   • 需要哪些页面？ 通常至少包括：
     • 首页: 欢迎页，展示你的核心信息、亮点和最新动态。
     • 关于我: 介绍你的背景、技能、兴趣爱好等。
     • 作品集/项目: 展示你的作品、项目经验、文章等。
     • 联系方式: 你的邮箱、社交媒体链接、联系方式表单等。
   • 收集素材：
     • 图片： 个人照片、作品截图、项目图片等。建议提前将图片处理成合适的尺寸和格式（如 JPG, PNG, WebP），以加快网站加载速度。
     • 将你要写的所有文字内容整理成 Word 或文本文档。
     • Logo： 如果有，准备好你的 Logo 图片。

2. 规划网站结构

   • 在电脑上创建一个文件夹,例如命名为 my-website。
   • 在这个文件夹里,再创建几个子文件夹，用来管理不同类型的文件：
     • images 或 assets/images：存放所有图片。
     • css：存放样式表文件。
     • js：存放 JavaScript 文件。
   • 这样做的好处是,网站文件结构清晰，便于后期维护。

3. 安装必要软件

   • Adobe Dreamweaver: 确保你已经安装并激活了最新版的 Dreamweaver。
   • Web 浏览器: Chrome, Firefox, Edge 等，用于预览你的网站。
   • (可选) FTP 客户端: 如 FileZilla，用于将网站文件上传到服务器。

第二步：在 Dreamweaver 中创建网站

这是核心操作步骤,Dreamweaver 的“站点”功能会帮你管理所有文件和链接。

1. 打开 Dreamweaver，启动站点向导

   • 启动 Dreamweaver。
   • 在主界面,点击 “站点” > “新建站点”。

2. 设置站点名称和本地文件夹

   • 站点名称： 输入一个你喜欢的名字，"我的个人网站"，这个名字只在 Dreamweaver 内部使用。
   • 本地站点文件夹： 点击文件夹图标，选择你在第一步中创建的那个主文件夹 my-website。
   • 点击 “完成”。

   Dreamweaver 右侧的“文件”面板会显示你的站点结构，你可以在这里看到 images, css 等文件夹，但目前是空的。

第三步：创建网页文件

1. 创建首页

   
   （图片来源网络，侵删）
   • 在“文件”面板中，右键点击你的站点根目录。
   • 选择 “新建文件”。
   • 将新文件重命名为 index.html。注意：首页必须命名为 index.html (或 index.htm)，这样访问者输入你的网址时，服务器才会自动找到它。

2. 创建其他页面

   • 用同样的方法,创建 about.html (关于我), portfolio.html (作品集), contact.html (联系方式) 等页面。

3. 创建 CSS 文件

   • 在“文件”面板中，右键点击 css 文件夹。
   • 选择 “新建文件”。
   • 将文件重命名为 style.css，这个文件将用来存放我们网站的样式。

第四步：设计和编辑网页内容

现在开始给网页“装修”，Dreamweaver 提供了“代码”、“拆分”、“实时”三种视图，你可以自由切换。

• 实时视图： 所见即所得，直接点击元素进行编辑，最直观。
• 代码视图： 直接编写 HTML, CSS, JavaScript 代码。
• 拆分视图： 上方是代码，下方是实时视图，同步显示，非常适合学习和修改。

以编辑 index.html 为例：

1. 设置页面标题

   • 在 Dreamweaver 顶部，文档标题栏（通常显示在浏览器标签页上的文字）输入 “首页 - [你的名字]”非常重要，对 SEO 和用户体验都有影响。

2. 添加基本结构

   • 切换到 “实时” 或 “拆分” 视图。
   • 你会看到一个空白的页面,光标放在页面中，开始输入你的欢迎语，欢迎来到我的网站！”。
   • 使用 Dreamweaver 的 “插入” 菜单来添加更复杂的元素：
     • 插入 > 图像： 选择你准备好的图片，它会自动插入到页面，并帮你生成 <img>
     • 插入 > 表格： 可以用来布局内容，比如制作一个包含“关于我”、“作品集”、“联系方式”的导航栏。
     • 插入 > HTML > 超链接： 选中一段文字，点击此按钮，链接到你的其他页面（如 about.html）。

3. 使用 CSS 美化页面

   • 这是让网站变漂亮的关键一步,我们推荐使用 “CSS 设计器” 面板（窗口 > CSS 设计器）。
   • 创建 CSS 规则：
     • 在 CSS 设计器中，点击 “源” 旁边的 号，选择“附加现有的 CSS 文件”，然后选择你之前创建的 style.css。
     • 在 “选择器” 框中，输入你想定义的元素，body。
     • 在下方的 “属性” 区域，你可以设置：
       • 字体： 选择一种好看的字体，设置字号、颜色。
       • 背景： 设置页面背景颜色或背景图片。
       • 布局： 设置页面宽度、居中对齐等。
   • 应用类：
     • 你可以为特定元素创建类,创建一个名为 .header 的类，设置特殊的背景色和文字样式。
     • 在实时视图中,选中你的标题，在“属性”面板的“类”下拉菜单中选择 .header，样式就会立刻应用。