制作静态网页
### 制作静态网页知识点详解 #### 网页设计基础与Dreamweaver 8工作环境 静态网页是由HTML、CSS以及可能包含的JavaScript代码组成的网页,这些代码被直接发送到浏览器并显示出来,不涉及服务器端的动态处理。本章节主要介绍如何使用Dreamweaver 8这款流行的网页设计软件来创建静态网页。 ##### 创建新站点 **步骤1:** 在Dreamweaver中,通过菜单栏的“站点”选项,选择“管理站点”,随后点击“新建”来创建一个新的站点配置。 **步骤2:** 跟随站点设置向导,指定站点名称、本地根文件夹(用于存储所有网页和资源文件)、远程服务器信息(如果有的话),以及其他相关设置,直至完成站点创建。 #### 网页文件的基本操作 - **创建、打开和保存网页文件:** 可以通过文件菜单下的“新建”选项创建新的HTML文件,通过“打开”选项加载现有文件,以及使用“保存”或“另存为”选项保存文件。 - **设置网页的页面属性:** 修改菜单下的“页面属性”选项允许你设定网页的标题、背景颜色或图像、文本颜色等。 - **设置网页对象的颜色:** 在属性面板中可以调整网页元素的颜色,包括页面背景、文字和链接颜色。 - **网页文本的输入和属性设置:** 文本可以直接键入,也可以通过导入或粘贴的方式添加。属性面板提供字体、大小、颜色和格式的设置。 - **网页图片的插入和属性设置:** 插入图片可以通过“插入”菜单下的“图像”选项完成,属性面板提供图片尺寸、边距等设置。 - **插入层:** 层可用于精确控制页面元素的布局,可以通过“插入”面板的“绘制层”功能创建,并在页面上自由移动。 - **插入表格:** 表格是另一种布局工具,可通过“插入”面板的“表格”选项插入,并在其中放置文本、图像等元素。 - **建立超链接:** 选中文本或图像,使用属性面板或右键菜单中的“创建链接”选项,设置链接目标,如内部页面、外部网站或电子邮件地址。 #### 实例练习:制作一个简单的静态网页 1. **设置页面背景和插入图片:** 设置页面背景图片为`bg0100.jpg`,然后在合适的位置插入动画图片`earth.gif`。 2. **添加横排带阴影的文字:** 输入文字“欢迎访问网络工程08级3、4班主页”,并设置其样式,如字体、颜色和阴影效果。 3. **保存与预览:** 将网页保存为`index.htm`,并确保它位于本地站点`Mysite`的根目录下,然后使用预览功能检查网页外观。 #### 操作步骤详解 - **建立站点:** 使用Dreamweaver的站点管理功能,创建名为“应用实例1”的站点,指定本地文件夹路径,如桌面下的`My site`文件夹。 - **创建图像文件夹:** 在站点根目录下创建`images`文件夹,用于存储所有图像资源。 - **创建网页:** 通过“新建”选项创建网页,然后设置页面属性,包括标题、背景图片等。 - **插入元素:** 使用“插入”菜单下的选项,如层、图像、文本等,构建网页内容。 - **保存与预览:** 将网页保存到本地站点中,并通过预览功能检查网页在浏览器中的显示效果。 通过以上步骤,你可以使用Dreamweaver 8轻松创建和编辑静态网页,掌握网页设计的基础技能。