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

实验实例：个人网站主页设计一、创建网页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和47，这样右侧部分内容与左侧照片完全对齐；4、在“个人介绍”下方需要放置“参考文章”栏目，提供了一个与业内人士交流、共享的平台，把光标定位在单元格内，按回车键输入“参考文章”标题；5、再次按回车键，插入1行1列，宽度为100%的表格，在属性面板中设置表格背景颜色为浅灰色#CCCCCC，在表格内再插入14行2列，宽度为100%，单元格边距为3，单元格间距为1的嵌套表格，属性面板设置左列宽度为270，右列宽度为116，第1行单元格背景颜色为#3366FF，用鼠标拖动选中其他单元格，设置背景颜色为#006699，这样设置可以得到表格边框为1像素的效果；6、在单元格内输入表格标题和内容，在表格下方在插入一个表格输入文字“更多内容”链接到下级页面。七、制作版权信息1、把光标定位在表格外最下方，插入2行1列，宽度为700像素的表格，设置表格为居中对齐；2、在第1行内单击鼠标，在属性面板中设置高度为30，单击插入面板上的“HTML”项“水平线”按钮，在单元格内插入水平线，选中水平线，选中水平线在属性面板中设置水平宽度为100%，高度为1；3、“文档”面板的“拆分”按钮，切换到代码和设计视图模式，在水平线代码内设置水平线颜色，当在代码中输入color 的时候会自动弹出“代码提示标签”，加入颜色后代码显示为;4、单击“设计”按钮，返回设计视图模式，在第2行单元格内输入版权信息和联系方式，设置字体为白色。八、制作弹出窗口1、在index.htm编辑窗口中执行“文件/另存为”菜单命令，将网页另存为“windows.htm”;2、按Ctrl+A组合键，选中页面中所有内容，按Delete键删除，此时网页只保留页面属性设置，其他页面内容都被删除；3、在文件面板中，修改“标题”文本框为“参考文章”，单击“表格”按钮，创建1行1列，宽度为90%的表格，在属性面板中设置表格居中对齐；4、由于文章内容比较多，所以按文章的4个问题分别制作标签链接，拖动鼠标选中问题1的标题，单击“常用”面板上的“命名锚记”按钮，在弹出的“命名锚记”对话框的“锚记名称”文本框中输入1，按确定后问题1标题后面出现一个锚记标志；5、同样的方法，分别为其他三个问题设置锚记标志，名称分别为“2、3、4”；6、完成锚记设置后，返回页首，分别为表格上部的4个标题制作锚记链接，选中第一个问题，在属性面板中“链接”文本框中输入“#1”，同样的方法，分别为其他三个问题制作锚记链接，链接地址分别为“#2，#3，#4”；7、制作完成锚记链接，保存网页，预览，选择某个问题时，网页会自动跳到相关的标题处。九、制作弹出窗口效果1、选中“参考文章”栏目的第1篇文章名称，在属性面板上创建无此链接，也就是在链接文本框中输入“#”；2、执行“窗口/行为”命令，打开“行为”面板，单击行为面板上的“+”按钮，在弹出的下拉菜单中选择打开浏览器窗口“命令；3、在“打开浏览器窗口”对话框中设置链接及窗口，单击“浏览”按钮选择需要链接的网页“windows.htm”,在窗口宽度和高度文本框中分别输入500和400，勾选“需要时使用滚动条”，完成设置单击确定；4、在行为面板“事件”下拉列表中选择“onMouseDown”选项，设置完成后，保存网页。十、编辑CSS样式1、执行“窗口/CSS样式”，打开CSS样式面板；2、单击面板右下角的“编辑样式表”按钮，在“样式”对话框中选择“新建”按钮；3、在“新建CSS样式”对话框中，设置“选择器类型”为“类”，在“名称”文本框中输入“.shadow”，“定义在”为“仅对该文档”；4、单击“确定”按钮，弹出“.shadow的CSS样式定义”对话框，在其他设置字体类型及字体大小；“Verdana,Arial,Helvetica,sans-serif”、“9pt”；5、在“分类”列表中选择“扩展”选项，在“扩展”区域内选择“过滤器下拉菜单中的”DropShadow(Color=?,offX=?,offY=?,positive=?),选项，文本框内修改代码为“DropShadow(Co