网页概述讲义.ppt

保存和关闭网页文档 选择“文件”菜单中“保存”命令即可保存网页文档。 选择“文件”菜单中“关闭”命令即可关闭网页文档。 注意： 在Dreamweaver中保存网页文档时，文件的名称最好使用英文和数字，而不要使用中文。 如果是主页，文件名称一般为index.html 打开和预览网页文档 选择“文件”菜单中“打开”命令，在“打开”对话框中的“查找范围”下拉列表框中选择网页所在的位置，选中需要打开的网页后，单击“打开”按钮即可打开网页文档。 选择“文件”菜单/“在浏览器中预览”/”IExplore6.0”可以预览网页。 HTML标记语言 标记：在HTML中用于描述功能的符号。必须用括起来。 单标记：只需单独使用就能完整地表达意思的标记。如BR（强制换行） 双标记：由“始标记”和“尾标记”两部分构成，必须成对使用。如HEAD/HEAD HTML标记语言（续） 标记属性 在单标记和双标记中可以包含的一些属性 语法：标记名称 属性1 属性2 属性3… 如：font size=“” color=“”…具体文字/font 说明：各属性之间无先后次序，属性也可以省略。如省略，则取默认值。 注释语句 可以放在任何地方，不会在浏览器中显示出来 目的是方便设计人员的阅读和理解 HTML基本结构 HTML HTML文件开始 HEAD 文件头开始 文件头 /HEAD 文件头结束 BODY 文件体开始 文件体 /BODY 文件体结束 /HTML HTML文件结束 文字格式标记 用于设置网页中普通文字的显示效果 格式 FONT face=“字体” size=“字号” color=“颜色”文字/FONT 字体：如黑体、宋体、隶书等 字号：1~7；+n；-n。N的基准值为3 颜色：red、white、black等；16进制的RGB颜色，如红色#FF0000 段落标记 设置文章段落的开始和结束 格式 P align=“对齐方式”…/P 对齐方式：取值可为left, right, center 例2：利用表格布局网页 在开始制作网页之前，要做好如下准备： 应该对网站的页面数量、页面与页面之间的关系有设计 应该对要制作的每一个网页页面的布局有设计 应该把所有要用到的素材准备好 页面属性的设置 在属性面板中，选择“页面属性”选项，即可，如下： 利用表格布局 新建html文档，并保存到站点文件夹下面。 在“常用”插入栏中，单击表格按钮，插入一个6行1列的表格，并设置表格宽度为701，边框粗细、单元格间距、单元格边距均为0。 选择表格，在“属性”面板“对齐”下拉列表框中选择“居中对齐”。 将鼠标定位到第4行的单元格中，选择“常用”插入栏中的表格按钮，插入一个1行2列的表格，表格宽度为619像素。其余为0。 利用表格布局（续） 将鼠标定位到嵌套表格的最后，插入一个1行5列、宽度为643像素、单元格间距为5、单元格边距为4的表格。 将鼠标定位到1行5列嵌套表格的最后，插入一个1行2列、表格宽度619像素、其余为0的表格。 将鼠标定位到1行2列嵌套表格的最后，插入一个1行4列、表格宽度643像素、单元格间距为5、单元格边距为4的表格。 将鼠标定位到整个表格的最后一行，插入一个3行1列、表格宽度701像素的表格。 设置表格背景 选中整个大表格，在属性面板中，选择背景图像为：bb_bg.gif。 选中由第4行拆分的表格，方法是将鼠标定位在该表格的最前面，然后单击td，然后再属性面板中，选择背景颜色为：#FFFFFF。 往表格中添加内容 将已经制作好的素材存放到站点文件夹下，利用“插入”菜单中的有关命令往表格中添加相应的内容：动画、图像 表格的创建和删除 创建表格 插入菜单、常用工具栏 表格对话框的设定 表格属性的设定 明边框和暗边框（是否为0） 删除表格 表格的编辑 选取表格、单元格、行、列；相邻或者不相邻 单元格、行、列的属性设置 单元格的合并和拆分 插入/删除行或列 表格的嵌套 单击现有表格中的一个单元格，选择“插入”“表格”。 表格格式设置的优先顺序如下： 单元格、行、表格 Photoshop中的切片工具 切片的作用：许多网页（比如欢迎页面）为了追求更好的视觉效果，往往采用一整幅图片来布局网页。而网页图像设计与一般平面设计的最大区别正是图像大小与图像下载速度。为了加快下载速度，常常需要将一张整图切割成若干部分，分别进行压缩和优化，不仅能缩小图像的体积，还可以分别设置不同的参数和制作不同的效果。 如何使用切片工具 在工具箱选择切片工具后，在图像上拖出一个矩形，这个矩形就是创建的用户切片。同时，图像上其他区域自动生成多个自动切片。 可以通过拖拽切片四周的边框来调整切片的大小，也可以选中该切片，右键单击鼠