网页设计知识点.doc

网页制作复习知识点一、网页设计概述根据网站的版式分为两大类：形象网页：多用于网站的形象宣传页面，它的特点是页面的布局结构自由，页面中以图像或者是Flash为主，文字较少。这种页面的主要针对于形象宣传性质的网站，偏重设计性。 内容网页：多用于网站的内容页，大型的门户网站多采用这种类型的页面版式。其特点是文字信息多，页面中的图像相对较少，整个页面按不同的布局划分为多个区域，主要的作用是为了传达文字信息。 内容页面”的版式一般可分为：1.水平分割水平分割，强调的是层次感和精确感，并有助于不同信息的分类；水平分割的同时还应当考虑到分割的面积，水平不均匀分割，如果上半部安置标题或导航，则面积较小；上半部安置主体内容，则面积应适当加大，2.垂直分割垂直分割和水平分割有很多相似点，把水平分割的页面旋转90即为垂直分割效果。3.水平垂直分割水平垂直分割是上面两种分割形式的综合运用，整个页面中既有水平分割的部分，又有垂直分割的部分，互相交织构成一种网状结构。这样的页面给人一种非常稳定的感受。4.变化分割变化分割是在水平分割和垂直分割的基础上，添加斜线和曲线的效果，这样的页面版式结构给人自由、运动和时尚的感觉。二、网页设计的流程及思路（1）、沟通了解（知己知彼，百战不殆）要了解的内容1、客户的需求及要求（收集客户资料）2、同行业此类网站的调查（网上查询、 搜集资料）3、总结此类网站的鲜明特点及最新动态（2）、确定网站的主题、内容及风格包含的内容1、确定主题2、版块及栏目3、色彩，也就是主色调4、风格，以网站的类型为基础确定风格（3）、绘制草稿包含的内容1、尺寸的选择2、版式3、将主要内容填充（4）、平面设计制作、定稿包含的内容1、制作的流程 先整体后局部再细节 （颜色版式）（每个板块）细节2、沟通审稿定稿（5）、网页制作（写成页面）（6）、调整出彩三、网页操作新建自己的文件夹：1、双击桌面上的“我的电脑”图标，双击“本地磁盘E”图标2、单击“文件”菜单的“新建”命令的“文件夹”项，窗口中将出现一个名称为“新建文件夹”的文件夹图标3、单击屏幕右下角的输入法指示器CH，选择一种汉字输入方法，比如：智能ABC输入法4、在名称为“新建文件夹”的文件夹图标上单击鼠标右键，选择“重命名”命令5、用键盘输入自己的姓名（比如：王三毛）到文件夹的名称框中，输入完后按回车键6、关闭“我的电脑”窗口运行FrontPage2300： 单击“开始”-“程序” 单击“Microsoft FrontPage” 工具栏的显示或隐藏： 单击“查看”菜单“工具栏”单击欲显示或隐藏的工具栏名称 注：请显示出“常用”和“格式”工具栏，以方便使用若单击前工具栏名称前面有勾，说明该工具栏已经显示出来，单击后将隐藏掉该工具栏若单击前工具栏名称前面没有勾，说明该工具栏没有显示出来，单击后将显示出该工具栏字体字号字形对齐等：方法一： 先用显示或隐藏工具栏的方法显示出“格式”工具栏，选定需进行格式设置的文字后，然后再用“格式”工具栏中的相应按钮进行相应设置（方法同WORD），如：设置字体、字号、加粗、倾斜、加下划线、左对齐、居中对齐、右对齐、字体颜色、加编号、加项目符号等方法二：选定需进行格式设置的文字后，单击“格式”菜单的“字体”命令进行相关的设置如何新起一行： 按住SHIFT键不放，再按回车键注：新起一行时，新行与上一行距离较近如何新起一段： 直接按回车键 注：新起一段时，新行与上一行距离较远；而新起一行时，新行与上一行距离较近如何插入表格：（用途：进行网页布局）1、单击“表格”菜单2、单击“插入”命令，单击“表格”项3、在对话框中进行相关设定（如：行数、列数、边框粗细等）4、设定完后，单击“确定”按钮如何拆分单元格：1、鼠标在要拆分的单元格内单击2、单击“表格”菜单的“拆分单元格”命令如何合并单元格：1、选择要合并的多个单元格2、单击“表格”菜单的“合并单元格”命令设置表格边框颜色：1、选中整个表格2、单击“表格”菜单中的“属性”命令的“表格”或“单元格”项3、在对话框中的“边框”设置区中设置表格的框线粗细、颜色等4、单击“确定”按钮完成设置注：在对话框中还可设置表格背景颜色、背景图像等，请在对话框中自己作相关设置设置单元格或表格的背景颜色、背景图像、指定高度、指定宽度：1、选中某个或某些单元格或整个表格2、单击“表格”菜单中的“属性”命令的“表格”或“单元格”项3、在对话框中的“背景”设置区中设置单元格或表格的背景颜色、背景图像，在对话框中的“指定高度”、“指定宽度”设置区中分别设置指定高度、指定宽度等4、单击“确定”按钮完成设置如何插入图片：1、先把光标移到要插入图片的位置2、单击“插入”菜单，选择“图片”命令的“来自文件”3、在对话框中单击“从计算机上选择一个文件”按钮（此步骤有些情况下可略）4、在对话框中“查找范围”下拉列表框中选择图片所在的磁盘“本地磁盘E”5、在对话框的文件夹列表中双击自己的文件夹的图标，继续双击图片所在的文件夹“会考练习素材”6、找到所要插入的图片文件“soccer.jpg”后双击其图标（也可双击其他图片图标）设置网页中的图片的大小：1、单击要设置大小的图片2、单击“格式”菜单的“属性”命令3、在对话框中单击“外观”标签 勾选“指定大小”方框在“大小”设置区中将“高度”和“宽度”设置为需要的数值（象素或百分比）4、单击对话框左下角的“确定”按钮完成设置。如何保存网页文件：1、单击“文件”菜单的“保存文件”命令2、在对话框中“保存位置”下拉列表框中选择网页文件要被保存到的磁盘“本地磁盘E”3、双击网页文件要被保存到的自己的文件夹的图标4、在对话框中“文件名”框中输入网页文件要被保存为的名字5、单击对话框中的“保存”按钮如何预览网页： 单击PRONTPAGE界面中的“预览”标签，预览结束后单击“普通”标签退出FrontPage：先保存网页文件，单击FrontPage窗口右上角的“关闭”按钮即可退出FrontPage打开已有网页文件继续编辑网页：1、先运行FrontPage2000(单击“开始”“程序” 单击“Microsoft FrontPage”)2、单击“文件”菜单的“打开”命令3、 在对话框中“查找范围”下拉列表框中选择网页文件被保存到的磁盘“本地磁盘E”4、双击网页文件被保存到的自己的文件夹的图标5、双击要打开的网页文件的文件图标设置网页背景颜色：1、选择“文件”菜单的“属性”命令；或者在设计页面上单击鼠标右键，选择弹出菜单中的“网页属性”2、单击对话框中的“背景”选项卡3、在“颜色”设置区中下拉“背景”项右侧的黑色向下三角形，选择背景颜色（比如：银白色）4、单击“确定”按钮结束设置设置网页文本颜色：1、选择“文件”菜单的“属性”命令；或者在设计页面上单击鼠标右键，选择弹出菜单中的“网页属性”2、单击对话框中的“背景”选项卡3、在“颜色”设置区中下拉“文本”项右侧的黑色向下三角形，选择背景颜色（比如：银白色）4、单击“确定”按钮结束设置设置网页背景图像：1、选择“文件”菜单的“属性”命令；或者在设计页面上单击鼠标右键，选择弹出菜单中的“网页属性”2、单击对话框中的“背景”选项卡3、在“格式”设置区中单击“背景图片”复选框，让其打上勾4、单击“格式”区中的“浏览”按钮5、在对话框中单击“从计算机上选择一个文件”按钮（此步骤有些情况下可略）6、在对话框中“查找范围”下拉列表框中选择背景图片所在的磁盘（比如：“本地磁盘E”）7、在对话框的文件夹列表中双击自己的文件夹的图标，继续双击背景图片所在的文件夹（比如：“会考练习素材”）的图标8、双击作为背景图片的图片文件（比如：“bj1.gif”）的图标（也可双击其他图片图标）9、若背景图片需要水印效果，则单击“格式”设置区中的“水印”复选框，让其打上勾10、单击“确定”按钮结束设置设置网页背景音乐：1、选择“文件”菜单的“属性”命令；或者在设计页面上单击鼠标右键，选择弹出菜单中的“网页属性”2、单击对话框中的“常规”选项卡3、在“背景音乐”设置区单击“浏览”按钮5、在对话框中单击“从计算机上选择一个文件”按钮（此步骤有些情况下可略）6、在对话框中“查找范围”下拉列表框中选择背景音乐所在的磁盘（比如：“本地磁盘E”）7、在对话框的文件夹列表中双击自己的文件夹的图标，继续双击背景音乐所在的文件夹（比如：“会考练习素材”）的图标8、双击作为背景音乐的音乐文件（比如：“pp8.mid”）的图标9、若要设置背景音乐的播放次数，则单击“背景音乐”设置区中的“不限次数”复选框，让其没有勾，然后在左侧设置循环次数）10、单击“确定”按钮结束设置设置网页标题：1、选择“文件”菜单的“属性”命令；或者在设计页面上单击鼠标右键，选择弹出菜单中的“网页属性”2、单击对话框中的“常规”选项卡3、在“标题”文本框内输入网页的标题4、单击“确定”按钮结束设置插入滚动字幕：1、鼠标在要插入滚动字幕的位置单击(或选择要作为滚动字幕内容的文字）2、单击“插入”菜单的“组件”命令的“字幕”项3、在对话框中的“文本”框中输入作为滚动字幕的文字4、在对话框中设置滚动字幕的方向、速度、表现方式、文本对齐方式、是否重复及次数、背景颜色等5、单击“确定”按钮完成操作修改滚动字幕属性： 1、单击插入的滚动字幕文字 2、在选中的滚动字幕文字上单击鼠标右键，在弹出的菜单中选择“字幕属性”。或者在滚动字幕文字上双击鼠标左键 3、在对话框中重新设置滚动字幕的方向、速度、表现方式、文本对齐方式、是否重复及次数、背景颜色等4、单击“确定”按钮完成操作设置滚动字幕字体字号等属性设置：1、单击插入的滚动字幕文字2、单击“格式”菜单的“字体”命令，或用“格式”工具栏设置相关字体字号等的设置插入水平线：1、鼠标在要插入水平线的位置单击2、单击“插入”菜单的“水平线”命令设置水平线颜色、宽度、高度：1、鼠标单击选中水平线2、在选中水平线上单击鼠标右键，在弹出的菜单中选择“水平线属性”。或者在水平线上双击鼠标左键3、在对话框中对水平线进行设置（宽度、高度、对齐方式、颜色、是否为实线等）4、单击“确定”按钮完成设置为文字设置超链接：1、先选择要为它设置超链接的文字2、单击“插入”菜单的“超链接”命令3、在对话框中单击“从计算机上选择一个文件”按钮 （此步骤有些情况下可略）4、在对话框中“查找范围”下拉列表框中要链接到的目标网页文件所在的磁盘5、在对话框的文件夹列表中双击要链接到的目标网页文件所的父文件夹，继续双击要链接到的目标网页文件所在的文件夹6、找到所要链接到的目标网页文件后双击其图标 为图片设置超链接（类似为文字设置超链接）：1、先单击选择要为它设置超链接的图片2、单击“插入”菜单的“超链接”命令3、在对话框中单击“从计算机上选择一个文件”按钮 （此步骤有些情况下可略）4、在对话框中“查找范围”下拉列表框中要链接到的目标网页文件所在的磁盘5、在对话框的文件夹列表中双击要链接到的目标网页文件所的父文件夹，继续双击要链接到的目标网页文件所在的文件夹6、找到所要链接到的目标网页文件后双击其图标制作发送电子邮件的超链接：1、先选择要设置指向电子邮件超链接的文字或图片2、单击“插入”菜单的“超链接”命令3、在对话框中单击“制作发送电子邮件的超链接”按钮 4、在出来的提示框中输入目标电子邮件地址后，输入完后单击“确定”按钮5、单击“确定”按钮完成操作 注：在预览网页时，单击该超链接，将启动为目标电子邮件地址发送电子邮件的电子邮件发送软件如何为文字插入书签：1、选中文字2、单击“插入”菜单“书签”3、设置相应的“名称”制作指向书签的超链接：1、先选择要为它设置超链接的文字2、单击“插入”菜单的“超链接”命令3、在对话框中“可选”设置区中“书签”下拉列表框中要链接到书签名称4、单击“确定”按钮完成操作取消超链接：1、选定设置有超链接的文字或图片2、单击“插入”菜单的“超链接”命令3、删除对话框中“URL”右侧框中的显示出的链接到的目标网页名称4、单击“确定”按钮完成操作为文字设置动画效果：1、选定要设置动画效果的文字2、单击“格式”菜单的“动态HTML效果”命令3、在随之出来的“DHTML效果”工具栏中，单击“开启”按钮右侧的黑色向下三角形下拉选择开启动画效果的方式，比如：单击。（也可选择双击、鼠标悬停、网页加载）4、单击“应用”按钮右侧的黑色向下三角形下拉选择应用的动画效果，比如：飞出。5、单击“效果”按钮（第3个按钮）右侧的黑色向下三角形下拉设置一种具体的动画效果，比如：到右下部。6、单击“格式”菜单的“动态HTML效果”命令，不显示“DHTML效果”工具栏经过以上动画效果设置后，在预览网页时，鼠标单击或双击设置有动画效果的文字、鼠标悬停于文字上、网页加载时，所设置的动画效果将出现。为图片设置动画效果：1、选定要设置动画效果的图片2、单击“格式”菜单的“动态HTML效果”命令3、在随之出来的“DHTML效果”工具栏中，单击“开启”按钮右侧的黑色向下三角形下拉选择开启动画效果的方式，比如：单击。（也可选择双击、鼠标悬停、网页加载）4、单击“应用”按钮右侧的黑色向下三角形下拉选择应用的动画效果，比如：飞出。5、单击“效果”按钮（第3个按钮）右侧的黑色向下三角形下拉设置一种具体的动画效果，比如：到右下部。6、单击“格式”菜单的“动态HTML效果”命令，不显示“DHTML效果”工具栏经过以上动画效果设置后，在预览网页时，鼠标单击或双击设