第十二章 综合实例1(创建网页的基本过程).pptVIP

二、设置页面属性 在正式开始制作网页前，需要对新建的页面进行一些必要的页面属性设置。双击打开新建的 index.htm，就自动转入编辑窗口。选择菜单“修改”-“页面属性”，将弹出页面属性设置窗口。 二、设置页面属性 二、设置页面属性 1．标题 页面的标题会直接显示在浏览器的左上方，例如用浏览器打开网站，可以在浏览器的左上角看到该页的标题“搜狐首页”。 标题不是网页必要的元素，但最好为每一页都设定一个标题，这既便于访问者的浏览，也有助于在网页编辑的过程中区分不同的页面。 二、设置页面属性 2．背景图像 在背景图像的文本输入栏，点击“浏览”按钮，可以为网页添加背景图像。 3．背景颜色 利用背景颜色可为背景添加颜色。默认为白色，点击颜色选择图标可以选择其他的颜色。后面“#FFFFFF”是以16进制形式显示的RGB色值。 二、设置页面属性 4．文字的颜色 假如不对背景及文字的颜色进行设置（此时RGB色值显示为空），那么浏览器在显示页面的时候，就会采用系统的默认设置。 但因为不同的系统的设置都可能会有所区别，这样就会导致页面的显示效果也是千差万别。因此，为了更好地让页面体现出你的设计思想，别忘记设定页面的背景颜色及文字颜色。 二、设置页面属性 5．左右边距和上下边距 设置左部及顶部的页边距，一般都设置为“0”以方便于网页的编辑。 6．链接 利用超链接的属性设置窗口，可以对超链接的属性进行，设置设定超级链接的颜色，若不进行设定则默认为蓝色。 设置好网页属性的其它选项，确保页面属性的设置正确后，点击“确定”结束。 二、设置页面属性 三、在网页中使用文本 打开一个网页文件，进入Dreamweaver页面编辑设计视图状态。我们可以像在其他的文字编辑程序中一样，直接输入文字。 在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。 三、在网页中使用文本 三、在网页中使用文本 修改文字属性。选中文字，在文字属性面板设置即可。修改文字颜色时，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取相应的颜色即可。 四、用表格定位网页元素 使用表格不仅可以清晰地显示列表的数据，而且可用于网页的定位上，尤其是对于使用非IE浏览器来说，使用表格定位的网页比使用图层定位的网页更具有优势。 四、用表格定位网页元素 （一）创建表格 1．插入表格 选择“插入”-“表格”命令，弹出表格设置窗口，设置表格的行数、列数、宽度，同时还可以设定表格的样式，根据自己的需要来设置表格的相应属性即可。 四、用表格定位网页元素 四、用表格定位网页元素 2．设置表格属性 点击窗口中的“确定”按钮之后即可新建一个表格，而且通过窗口下部的属性面板还可以对其进行诸如表格线条的颜色、表格的背景色、单元格的对齐方式等参数进行调整。 也可以打开表格的属性面板，对表格的属性进行设置。 四、用表格定位网页元素 表格的宽度和高度可以通过浏览器窗口百分比或者使用绝对像素值来定义，比如设置宽度为窗口宽度的60％，那么当浏览器窗口大小变化的时候表格的宽度也随之变化；如果设置宽度为400像素，那么无论浏览器窗口大小为多少，表格的宽度都不会变化。 四、用表格定位网页元素 （二）表格的基本使用 1．表格的属性设置 选中表格，在Dreamweaver下方的表格属性面板中对整个表格的属性进行设置。通常选取整个表格常用的方法有四种： 四、用表格定位网页元素 （1）把鼠标移动到表格右边界外侧，按下鼠标左键向左拖拽，可快速选取整个表格。 （2）执行菜单“修改”-“表格”-“选择表格”命令，选择整个表格。 （3）在单元格中右击鼠标，从弹出右键快捷菜单中选择“表格”-“选择表格”命令，选取整个表格。 （4）用鼠标单击任一个单元格，接着按两下“Ctrl＋A”组合按钮选取整个表格。 四、用表格定位网页元素 五、图片的使用 只有文字的网页太单调，通常为了使页面更加生动，图文并茂，常常用图片来美化页面，最简单直接的方法是在网页上添加图片。 Dreamweaver支持JPG、Gif和DNG格式的图像文件。 五、图片的使用 （一）插入图片 在网页中插入图片常用的方法有三种： 1．使用插入菜单 在“插入”菜单选“图像”选项，弹出“选择图像源文件”对话框，选中需要插入的图像文件，单击确定即可。 五、图片的使用 五、图片的使用 2．使用插入栏 单击插入栏图像按钮，弹出“选择图像源文件”对话框，其余操作同上。 3．使用面板组中的“资源”面板 使用面板组“资源”面板，展开根目录的图片文件夹，选定需要插入的图像文件，用鼠标拖动至工作区合适位置即可。 五、图片的使用 五、图片的使用 五、图片的使用 （二）图片的处理 选中要处理的图片，打开属性面板（Ctrl+F3如