毕业论文设计个人简历表.docx

毕业论文 设计个人简历表毕业论文 设计个人简历表 无论是毕业生还是求职者，个人简历表都是不可缺少的必备品。个人简历表通常是在Word软件中创建，然后再将其打印成纸制文件，其中包含有自己的基本信息，如姓名、性别、年龄、民族、学历、工作经验等内容。本节将在Dreamweaver CS4中使用表格制作一个网页版的个人简历表，如图5-1所示。 图5-1 个人简历表 设计思路 1个人简历表分析 个人简历表是求职者向招聘单位发送的一份简要介绍，通常以表格形式为主，只需要在相应的单元格中输入个人信息即可。在设计个人简历网页时，其结构不需要太复杂，但一定要整齐大方。 最简单的个人简历表只是在网页文档中插入一个表格，然后在表格的各个单元格中输入个人信息、联系方式等文字。虽然从设计上来说最简单，但还是要注意文字的修饰和排版，布局一定要整齐，如图5-2所示。 图5-2 表格个人简历 纯文字的个人简历虽然制作简单，但其颜色单调、样式呆板，仅仅是实现了个人简历表的基本功能。如果想要让简历表变得活泼，给阅读者带来另一种不同的感觉，可以为个人简历表添加背景图像。这使得页面变得多元素化，也更加美观，由此可以产生意想不到的效果，如图5-3所示。 图5-3 具有背景的个人简历表 前面这两种个人简历表只是在网页文档中插入表格和文字，不能称作是真正意义上的网页。既然选择在网络中发布个人简历，最好能够制作成为一个完整的页面，应该包含头部信息、正文内容和尾部信息。在颜色设计上就需要几种简单的颜色搭配在一起，不要使用太多颜色，以免产生杂乱的感觉，如图5-4所示。 图5-4 个人简历主页 2本例网站分析 本例中制作的个人简历表页面是以淡蓝色为主要色调，给人以沉稳的感觉，且具有博大、理智、诚实等意象。同时，蓝色还能够营造出和平、淡雅、洁净及可靠等氛围。此外，蓝色也会使人自然联想到大海和天空，给人一种爽朗开阔和清凉的感觉。 在内容上来说，本例个人简历也摆脱了只是枯燥文字的形式，在页面中添加了背景图像和修饰图像等，使页面多元素化，这样看起来较为活泼并不单调，给人一种轻松愉悦的感觉，如图5-5所示。 修饰图像 修饰图像 图5-5 页面多元素化 从设计上来说，页面头部的图像已经注明了本页面的用途“个人简历”，使访问者在打开网页时即可明确该页面的功能。顶部采用从上至下的蓝色渐变色，可以使之与页面的主体部分进行融洽的衔接，如图5-6所示。 蓝白渐变图像 图5-6 页面的头部图像 紧接着就是对个人的信息介绍，包括基本信息、求职意象、技能和学历及工作经验四个版块。最后以一张绿色的草坪图像为结尾，与头部的天空图像呼应，如图5-7所示。 尾部图像 图5-7 页面的尾部图像 对话框中设置为1；为2；为“1003px”等。然后单击按钮，即可插入一个表格，如图5-9所示。 设计过程 首先在网页文档中插入一个1行3列的表格，将其划分为左中右三部分。左右两侧为修饰性图像，而中间为网页的正文内容。 新建空白文档，在对话框中设置为“微软雅黑”；为“15px”；为“黑色”等，并设置页边距均为“0px”，如图5-8所示。 设置 单击 图5-9插入表格 将光标置于第1列单元格中，执行|命令，打开面板。然后，在该面板中设置为160；对齐为“顶端”，如图5-10所示。 设置 图5-8 设置页面属性 在面板中上切换到选项卡或选项卡，才可以单 击按钮。 放置光标 设置 将光标置于文档中，单击面板中的按钮，在弹出的图5-10 设置单元格属性 将光标置于某一单元格中，即表示选 中了该单元格。 单击面板中的按钮，在弹出的对话框中选择外部图像，单击按钮将图像插入在该单元格中，如图5-11所示。 插入 选择 图5-11 插入图像 使用相同的方法，为第3列单元格设 置相同的属性并插入图像。 将光标置于第2列单元格中，单击面板中的按钮，在弹出的对话框中设置为9；为1；为“100%”，插入一个9行×1列的表格，如图5-12所示。 表格 设置 图5-12 插入表格 在插入表格之前，设置该单元格【垂直】对齐为“顶端”。 将光标置于该表格的第1行单元格中，单击面板中的按钮插入“top.gif”图像，如图5-13所示。 插入 图像URL 图5-13 插入图像 将光标置于第2行单元格，设置其对齐为“居中”。然后，在该单元格中插入一个9行×2列宽度为“85%”的表格，并设置其ID为info，如图5-14所示。 插入 表格属性 图5-14 插入表格 选择第1列所有单元格，在面板中设置为120；为30，如图5-15所示。 选择 设置 图5-15 设置单元格属性 在第1行第1列单元格中单击鼠标不放，并向下拖动至最后第一行单元 格，即可选中该列所有单元格。 在该表格的第1列单元格中输入项目名称，在第2列单元格中输入个人信息，如图5-16所示。 输入文字 图5-16 输入个人信息 选择第1列所有单元格，单击面板中的CSS选项卡，设置文本为“棕色”，并单击按钮。然后，在弹出的对话框中输入tit，如图5-17所示。 选择 单击 设置 图5-17 设置文字属性 选择该表格，单击面板中的按钮，新建名称为“#info”的CSS规则。然后，在弹出的对话框中单击选项卡，在右侧选择背景图像并设置其位置，如图5-18所示。 因为已经为表格设置了ID名称，所以在单击按钮后， 将会自动创建名称为“#info”的CSS规则。 单击 设置 单击 置于 单击 图5-18 创建表格CSS规则 创建名称为“#info td”的复合内容CSS规则，在弹出的对话框中单击选项卡。然后，在右侧设置bottom的Style为dashed；Width为“1px”；Color为“#CCC”，如图5-19所示。 单击 设置 图5-19 设置边框样式 在设置底边框的样式之前，首先要取消Style、Width和Color的复选框。 将光标置于第3行单元格，在面板中设置其为20，如图5-20所示。 图5-20 设置单元格高度 将光标置于第4行单元格中，插入一个宽度为“90%”的2行×1列表格，并设置其ID为objective。然后，在单元格中输入栏目图像及文字，如图5-21所示。 设置 插入 图5-21 插入表格 设置表格的方式为“居中对齐”；设置各个单元格的均为 60。 在面板中新建名称为“#objective”的CSS规则，然后在弹出的对话框中单击选项卡，并设置背景图像及其位置，如图5-22所示。 单击 设置 图5-22 设置背景图像 使用相同的方法，设置第5行单元格 的为20。 将光标置于第6行单元格，插入一个宽度为“90%”的10行×1列表格，在面板中设置其ID为skill；方式为“居中对齐”。然后，在相应的单元格中插入栏目图像及文字说明，如图5-23所示。 插入 设置 图5-23 制作技能栏目 设置各个单元格的均为30.。另外，使用相同的方法为skill表格添加 背景图像。 在第8行单元格中插入一个宽度为“90%”的5行×1列表格，在【属性】面板中设置其ID为history；方式为“居中对齐”。然后，在相应的单元格中插入栏目图像及文字说明，如图5-24所示。 设置 插入 图5-24 制作学历及工作经验栏目 将光标置于最后一行单元格中，单击面板中的按钮，在弹出的对话框中插入“bottom.jpg”图像，如图5-25所示。 图像URL 插入 图5-25 插入图像 选择第2行至第8行所有单元格，在面板中设置其为“白色”，如图5-26所示。 图5-26 设置背景颜色 选择 设置 知识点总结 1创建表格 表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。在网页中创建表格时，首先将光标放置在要创建表格的位置，在新网页中默认的位置为文档的左上角。 单击面板中的按钮，在弹出的对话框中，设置相应的属性，然后单击按钮即可，如图5-27所示。 单击 表格 设置 图5-27 插入表格 在对话框中，主要用于设置所要插入的表格属性，包括表格的行列数、宽度、边框粗细等属性，如表5-1所示。 表5-1 表格属性及作用 属性 行数 列数 表格宽度 像素 百分比 用于指定表格的行数。 用于指定表格的列数。 以像素为单位确定表格的宽度。 以百分比为单位确定表格的宽度。一般以整个页面或者外表格为参照。 作用 边框粗细 单元格边距 以像素为单位指定表格边框的宽度。 指定单元格边框和单元格内容之间的像素数，如果不希望显示边框时，设置为0像素。 单元格间距 无 标题 左侧 顶部 两者 标题 对齐标题 摘要 指定相邻的单元格之间的像素数。 对表不启用列或行标题，默认情况下此项被选中。 将表的第一列作为标题列，便于为每一行输入一个标题。 将表的第一行作为标题行，便于为每一列输入一个标题。 在表中输入列标题和行标题。 指定在表格外显示的标题。 指定表格标题相对于表格的显示位置，采用默认方式。 用于说明表格。屏幕阅读器可以读取摘要文本，但是该文本不会显示在用户的浏览器中。 如果用户没有明确指定的值，则大多数浏览器默认值为1像素。如果不希 望在浏览器中显示表格的边框，则可以将的值设置为0像素。 2编辑表格 如果插入到文档中的表格并不符合网页的要求，那么就需要对表格进行编辑，可以改变表格的宽度、行列数、合并或拆分单元格等。 l 选择表格元素 如果要选择整个表格，首先将鼠标移动到表格的上边框或下边框，当鼠标指针变成网格图标时，单击即可选择，如图5-28所示。 表格 图5-28 选择表格 如果将鼠标光标定位到表格边框上，然后按住Ctrl键，则将高亮显示该表格的整个表格结构 。 将光标置于任何一个单元格中，单击状态栏中标签选择器上的<table>标签，也可以选择整个表格，如图5-29所示。 单击 图5-29 单击表格标签 将光标放置在任意一个单元格内，即表示选择该单元格。如果想要选择多个连续的单元格，单击鼠标不放并沿任意方向拖动即可，如图5-30所示。 拖动 图5-30 选择连续单元格 将光标置于任意一个单元格中，按住Ctrl键并同时单击其它单元格，可以选择多个不连续的单元格。 将鼠标移动到行的最左端或者列的最上端，当鼠标光标变成选择箭头可选择单个行或列，如图5-31所示。 时，单击即单击 单击 选择单行 选择单列 图5-31 选择行或列 l 调整表格大小 当选择整个表格后，在表格的右边框、下边框和右下角将会出现3个控制点。通过鼠标拖动这3个控制点，可以使表格横向、纵向或整体放大，如图5-32所示。 当调整整个表格的大小时，表格中的所有单元格按比例更改大小。如果表格的单元格指定了明确的宽度或高度，则调整表格大小将更改窗口中单元格的可视大小，但不更改这 些单元格的指定宽度和高度。 控制点 拖动 图5-32 表格控制点 将鼠标移动到单元格的边框上，当光标变成左右箭头或者上下箭头时，单击并横向或纵向拖动鼠标即可改变行或列的大小，如图5-33所示。 横向拖动 纵向拖动 图5-33 改变行或列的大小 l 添加行或列 如果想要在某行的上面或者下面新添加一行，首先将光标置于该行的某个单元格中，然后单击面板中的按钮或按钮，即可在该行的上面或下面插入一行，如图5-34所示。 单击 单击 放置 放置 在上面插入行 在下面插入行 图5-34 添加行 如果想要在某列的左侧或右侧新添加一列时，首先将光标置于该列的某个单元格中，然后单击按钮或按钮或右侧插入一列，如图5-35所示。 ，即可在光标所在列的左侧单击 单击 放置 放置 在左侧插入列 在右侧插入列 图5-35 添加列 l 删除行或列 如果想要删除表格中的某行，而不影响其它行中的单元格，可以将光标置于该行的某个单元格中，然后执行命令即可，如图5-36所示。 执行 放置 图5-36 删除行 如果想要删除表格中的某列，而不影响其它列中的单元格，可以将光标置于该列的某个单元格中，然后执行命令即可，如图5-37所示。 放置 执行 图5-37 删除列