2.2-创建站点及页面设置-《网页设计制作》.ppt

1、创建站点及页面设置,学习目标,规划站点 创建站点 管理站点 页面的创建、保存及属性设置,1.1 规 划 站 点,进行网页制作之前需创建站点，利用站点的管理功能可对站点中的文件进行管理或测试。创建站点前首先应规划站点，再通过Dreamweaver 8的站点管理功能创建站点的框架，包括主页、分支页面和相应的文件夹等。,1.1 规 划 站 点,1.1.1 站点的概念 1.1.2 规划站点结构 1.1.3 创建导航草图,1.1.1 站点的概念,多个网页文档通过各种链接关联起来就构成了站点，站点可以小到一个网页，也可以大到整个网站。,1.1.2 规划站点结构,设计站点的必要前提是规划站点结构。规划站点结

2、构是指利用不同的文件夹将不同的网页内容分门别类地保存，合理地组织站点结构，可提高工作效率，加快对站点的设计。 在制作站点时通常先在本地磁盘上创建一个文件夹，将所有在制作过程中创建和编辑的网页内容都保存在该文件夹中。在发布站点时，直接将这些文件夹上传到Web服务器上即可。如果站点内容较多或站点较大，则还需建立子文件夹以存放不同类型的网页内容。,1.1.2 规划站点结构,在站点规划过程中，需使用合理的文件名称、文件夹名称，好的名称容易理解、记忆，能够表达出网页的内容。通常在命名时，可以采用与其内容相同的英文或拼音进行命名，应避免使用长文件名和中文，如电影文件夹可以命名为movie或dianying

3、。 制作网页所需的图片或动画等文件的存放位置也是规划站点结构时应考虑的。如果是大型站点，可分别创建相应的文件夹在各个类别的文件夹下，如在站点根目录下创建一个名称为picture的文件夹用以存放主页中用到的图片和动画。如果站点内容较少，可以只在站点的根目录下创建一个文件夹。,1.1.3 创建导航草图,做好了站点的规划后，就可根据规划制作出一个导航草图便于理清思路，制作时可直接在纸上粗略绘出导航草图。,创建导航草图,文档窗口,标签选择器,窗口大小,属性面板,面板组,1.2 创建与管理站点,站点是网页文档存放的地方，也是管理网页文档的重要场所。做好准备工作后便可进行站点的创建。,1.2 创建与管理站

4、点,1.2.1 创建站点 1.2.2 管理站点,1.2.1 创建站点,“站点”|“新建站点” “站点”|“管理站点” |“新建”按钮,1.2.2 管理站点,站点创建好后还需对站点进行有条理地管理，为以后的工作做好准备。,1.2.2 管理站点,1编辑站点 2添加文件夹或文件 3删除文件或文件夹 4重命名文件或文件夹 5编辑文件 6删除站点,1编辑站点,创建好站点后，若对站点的某些选项不满意，可重新对其进行编辑。 “站点”|“管理站点”|“编辑”按钮,2添加文件夹或文件,3删除文件或文件夹,若不再使用站点中的某个文件或文件夹，可将其删除。 选中需删除的文件或文件夹，单击鼠标右键，在弹出的快捷菜单中

5、选择“编辑/删除”命令，在弹出的确认对话框中单击 按钮即可。,4重命名文件或文件夹,选中需重命名的文件或文件夹并单击鼠标右键，在弹出的快捷菜单中选择“编辑/重命名”命令进入改写状态，此时输入新的名称即可。,5编辑文件,在需编辑的文件图标上双击即可打开该文件并进入编辑窗口进行编辑。,6删除站点,若某个站点已无须再操作，可将其从站点列表中删除。,1.3 页面的创建、保存及属性设置,站点创建好后就可以进行网页的制作了。下面将讲解Dreamweaver 8的一些基本操作。,1.3 页面的创建、保存及属性设置,1.3.1 创建新页面 1.3.2 打开已有网页 1.3.3 预览网页效果 1.3.4 网页的

6、保存 1.3.5 页面设置,1.3.1 创建新页面,在Dreamweaver 8中可以直接创建空白网页文档，也可以通过模板创建有格式的网页文档。通过模板创建网页的方法将在后面的学习中详细介绍。这里将介绍直接创建网页文档的方法。,1.3.2 打开已有网页,若要对已有的网页进行编辑，需在Dreamweaver中打开该网页文档。,1.3.3 预览网页效果,在Dreamweaver中对网页进行编辑后，可在浏览器中对其效果进行预览。 “文件”|“在浏览器中预览” 文档工具栏上的图标按钮 快捷键F12,1.3.4 网页的保存,对文档进行了编辑或修改后，需将其保存。保存文档的方法有直接保存和另存为两种方式。

7、,1.3.5 页面设置,页面设置即页面属性设置，如页面的外观、链接和标题等设置。,1.3.5 页面设置,1外观 2链接 3标题 4标题/编码 5跟踪图像,1外观,打开“页面属性”对话框时，对话框默认为外观设置，其中各设置参数含义如下。 页面字体 大小 文本颜色 背景颜色 背景图像 左边距、右边距 上边距、下边距 外观设置好后单击 按钮使设置生效。,2链接,在“页面属性”对话框的“分类”列表框中选择“链接”选项，右侧将显示“链接”的参数设置项。 其中各参数的含义如下。 链接字体 大小 链接颜色 变换图像链接 已访问链接 活动链接 下划线样式,3标题,在“页面属性”对话框的“分类”列表框中选择“标题”选项，右侧将显示“标题”的参数设置项。 其中各参数的含义如下。 标题字体 标题1 在标题2标题6下拉列表框中可分别设置26级标题的字体大小和颜色，其方法与“标题1”的设置相同。,4标题/编码,在“页面属性”对话框的“分类”列表框中选择“标题/编码”选项，右侧将显示“标题/编码