I个人网站主页设计实验资料.docVIP

实验实例：个人网站主页设计 一、创建网页 1、在windows系统下启动Dreamweaver程序； 2、在快捷菜单面板中选择“创建新项目/HTML”命令； 3、在硬盘上创建一个新的文件夹，打开“资源管理器”，选择盘符为E盘，在E盘内单击鼠标右键，在弹出的菜单中选择“新建/文件夹”命令，将新文件夹命名为“王东的个人网站”； 4、回到dreamweaver编辑窗口，保存新建的HTML文档，选择“文件/保存”命令，在“另存为”对话框中选择“E盘/王东的个人网站”文件夹，在“文件名”文本框中输入“index.htm”； 5、保存设置，完成首页保存，把制作完成的图象文件夹inmages复制到“王东的个人网站“文件夹内，便于下面的网页制作。 二、设置页面属性 1、单击属性面板中的“页面属性“按钮，在页面属性对话框中选择分类列表中的外观项，在外观区域中的字体的大小设置为9pt，背景颜色为#006699； 2、在分类列表中选择链接项目，在链接区域中设置“链接颜色”和“已访问链接”颜色为白色#FFFFFF，设置“变换图象链接”颜色为灰色#999999； 3、在分类列表中选择“标题/编码”，在该区域中设置标题为“王东的个人网站”，设置编码为“简体中文”； 4、设置完成，单击确定。 三、制作标题栏 1、单击插入面板“常用”项的表格按钮，在“表格”对话框中设置1行1列，宽度为700像素，边框粗细、单元格边距和单元格间距为0，单 击确定； 2、在编辑窗口选中表格，在表格属性面板对齐列表中选择“居中对齐”； 3、将鼠标光标放在表格内，单击插入面板中“常用”项的“图象”按钮，在打开的“选择图象源文件”对话框中，选择images文件夹下的图象“title.gif”， 4、选择“确定”。 四、制作栏目导航 1、在标题栏外单击鼠标左键，使光标位于标题栏表格右外侧； 2、单击插入面板的“常用”项中的“表格”按钮，在“表格”对话框中，输入1行2列，宽度为700像素，其他都为0，单击“确定”； 3、选中表格，在属性面板中设置表格居中对齐，把光标放在左侧单元格内，在属性面板的“宽”文本框内输入130，设置左侧单元格宽度为130像素，设置背景颜色为兰色，单元格内容“顶端”垂直对齐； 4、在左侧单元格内插入14行1列，宽度为100%，边框粗细设置为0，单元格边距为3，单元格间距为1的嵌套表格； 5、单击表格边框、选中嵌套表格，在属性面板中设置背景颜色为浅兰色#E2EDFF； 6、按住Ctrl键，鼠标左键单击1、5、9、13、14行单元格，选中多个单元格作为栏目导航的主标题，在属性面板中设置背景颜色为深兰色#4B87C2； 7、同样的方法选中其他的几行单元格，在属性面板中设置单元格背景颜色为蓝色#6699CC； 8、在表格内输入栏目名称，并设置单元格内的文字颜色为白色#FFFFFF； 9、拖动鼠标选中“个人介绍”标题前的“@”,在属性面板字体列表中选择“Verdana,Arial,Helvetica,sans-serif”分别设置每个主栏目标题前的标志。 五、制作友情链接 1、目导航表格下方插入2行1列，宽度为100%，其他项为0的嵌套表格，设置第一行单元格背景颜色为深灰色#666666，文本颜色为白色#FFFFFF，高度为20像素，对齐方式为居中对齐； 2、设置第2行单元格背景颜色为浅灰色#999999，对齐方式为居中对齐； 3、在第2行单元格内单击，把光标定位在单元格内，单击“表单”面板的“列表/菜单”，出现提示窗口； 4、单击“是”，在单元格内插入一个空“菜单”，在“列表/菜单”属性面板中选择“列表”单选钮，在高度文本框中输入8； 5、选中列表框，单击属性面板中的“列表值”，弹出对话框，在项目标签中输入项目名，“值”区域输入项目的网址，按+或-可以增加或删除项目； 6、点击确定，完成设置。 六、制作主体内容 1、在属性面板中，设置导航栏目右侧的单元格为“顶端”，垂直对齐，在单元格内插入1行3列，宽度为100%，其他为0的嵌套表格，在属性面板中分别设置第1，2列单元格宽度为160和10； 2、将刚才插入的单元格中的左侧单元格设置为“顶端”垂直对齐，接着插入2行1列，宽度为100%，单元格边距为5的嵌套表格，在第1行输入文字“Intro……”,再在第二行单元格中插入2行1列，宽度为85%，单元格边距为3的嵌套表格，设置表格为居中对齐，使用多次嵌套表格是为了达到表格间距精确，效果完美的目的，在最内层的嵌套表格内插入王东的照片和人名； 3、在主体内容右侧单元格内插入5行1列，宽度为400像素，单元格边距为3的嵌套表格，在2到5行单元格内分别输入“个人简历”和“计算机技能”的标题和内容，并设置其背景颜色为灰色#CCCCCC，然后分别设置第1行和第3行单元格高度为30