制作简单网页.PPT

第3章 制作简单网页 本章重点介绍如何使用Dreamweaver CS4快速建立站点，在站点中新建网页，并学会在网页中进行文本、图像的处理。本章重点： 创建站点 新建页面 设置文件头 设置网页文本 使用图像 3.1 创建站点 在制作网站时首先要做的就是创建站点，创建本地或远程站点，为站点内的所有文件建立联系，Dreamweaver CS4的“管理站点”还能为创建的站点进行修改、删除、复制等操作。 3.1.1 新建站点 创建站点从路径上考虑可分为两种，一种是创建本地站点，另一种是创建远程站点。 创建本地站点 创建远程站点 3.1.2 修改站点 选择菜单命令“站点”｜“管理站点”，打开“管理站点”对话框，单击右侧的“编辑”按钮，可以对现有的的站点进行编辑。 3.1.3　多站点管理 在同时存在多个站点的情况下，单击“管理站点”对话框左侧列表中的站点名称，然后单击“完成”按钮，即切换到此站点。 3.1.4 创建站点目录结构 创建完站点以后，还要为这个站点添加文件和文件夹，形成完整的目录结构，这跟Windows的资源管理器基本的原理是一致的，有了清晰的目录结构，也能使设计者的思路清楚，在确定网站的内容的同时明确网站的目录结构。 3.2　新建页面 上一节学习了如何创建站点，本节重点介绍如何新建页面。自Dreamweaver CS3版本推出以来，到Dreamweaver CS4版本，让设计者在新建页面的时候有了更多的可选性，并有各种已有的样例模板库可供选择。 3.2.1　新建页面 启动Dreamweaver CS4，单击菜单命令“文件”｜“新建”，弹出“新建文档”对话框，在对话框中有5个选项卡：空白页、空模板、模板中的页、示例中的页、其他。 3.2.2　保存页面 选择菜单命令“文件”｜“保存”，弹出“另存为”对话框，输入文件名为“index.html”，单击“保存”按钮，将新建的页面保存到站点根目录下。 3.2.3　关闭页面 选择菜单命令“文件”｜“关闭”，或按Ctrl+W键，将当前页面关闭。 选择菜单命令“文件”｜“全部关闭”，或按Ctrl+Shift+W键，将关闭当前窗口打开的所有文档。 3.3 设置网页文本 文本是网页的重要组成要素，制作网页设计的时候，光有合理的布局、精细的图片设计也还是不够的，网页文字的排版也将直接决定网页的视觉效果。网页文本的排版取决于行距、字距、字数、字体大小等几个要素。 3.3.1　输入文本 文本在网页中占有重要的位置，文本的录入可以通过直接录入或复制粘贴外部内容完成。 3.3.2　设置标题文本 网页中可以使用默认样式对页面中的文本进行设置，如标题文本的设置。 3.3.3　设置段落文本 网页文本内容较多时，需要对页面的文本进行段落样式的设置，用来控制全局的文本显示效果。 3.3.4　设置预先格式化的文本 根据软件中自带的格式化样式，可以对文本进行预先的格式化设置。 3.3.5　设置文本样式 根据网页的设计效果图，对网页中的文本进行相应的样式设计。 3.3.6　设置文本对齐方式 网页中的文本，有的时候需要根据设计效果对文本进行对齐设置。 3.3.7　设置文本凸出/缩进 选定文本，用“属性”面板中的“文本凸出”按钮和“文本缩进”按钮，可以对文本进行整段的文本缩进设置。 3.3.8 创建列表/编号列表 文本中使用列表或编号可以使用默认样式，也可以自定义项目符号等。 3.3.9 设置首行缩进 在网页中，根据中英文的文本以及不同人群的阅读习惯，对文本进行首先缩进的设置。 3.4 图像处理 图像是网页最主要的元素之一，也是不可或缺的元素，合理地在网页中使用图像，不仅能美化网页，还能清楚表达作者的意图，更能比文字更直观地说明问题。通常在设计中，如需用到特殊的字体，一般都将文本转化为图像后实现。 JPEG格式 GIF格式 PNG格式 3.4.1 插入图像 在网页中，图像与文本进行结合，才能让界面更为生动和富有灵性，在文档中插入图像有两种方法。 3.4.2 设置图像为背景 选择合适的网页背景可以让网页在外观上增色不少。网页的背景可以使用背景色或背景图像，而单一的颜色作为背景色可能会让页面在视觉上显得单调，如果选择整个图片作为背景又因为图像本身的大小造成网页过大，加载时间长而影响网页的浏览速度。一般在选择背景图像时多选择一幅可以拼接的小图片，然后平铺，形成一个具体整体风格的网页背景。 3.4.3 设置跟踪图像 跟踪图像在许多设计者中都没有使用，可能有些人觉得没有用，因为跟踪图像只是在Dreamweaver文档窗口中显示，而在浏览器中用户是看不到的。其实这是网页制作中经常使用的一种辅助工具，也是Dreamweaver CS4比较人性化的一面。 3.4.4 插入翻转图像 在网页图片中