案例一简单个人网站的制作.doc

案例一简单个人的制作一、;、网页的创建、保存、运行;;、文字、等网页元素的添加和属性设置。二、案例效果图 创建个人,主要包括个人资料、我的相册和南山学院等项目,运行效果如图9-1所示,当点击“我的相册”,运行效果如图9-2所示。当单击“南山学院”,跳转到南山学院的主页。图9-1个人资料页面图9-2我的相册页面三、内容及操作步骤本案例创建如图9-1所示的,通过该案例,学会网页创建、页面布局、元素添加设置、浏览页面等基本操作。操作步骤:注:准备一个image文件夹,包括需要的图片文件。“开始|程序|Dreamweaver”后,弹出如图9-3所示的欢迎界面。图9-3所示的欢迎界面图9-4站点定义界面一图9-“站点|新建”,弹出“站点定义为”对话框,如图9-4所示的站点定义界面一,在文本框中输入站点名称“first”,选择“下一步”,选取默认信息至“共享文件”选项,在“如何连接到远程服务器”下拉列表中选择“无”如图9-5站点定义界面二,最终选择“完成”按钮。,弹出快捷菜单如图9-6所示。选择“新建文件”,修改默认文件名为“”,相同操作添加页面“”。图9-6新建文件图9-:\first文件夹下,在文件属性中,点击“刷新”按钮。Image文件夹会显示到文件站点中。如图9-7站点结构图。“”页面文件,在“文档”窗口会显示“”页面,如图9-8所示。点击“属性”栏中的“页面属性”按钮,弹出页面属性对口话框,如图9-9所示。在页面属性对话框中,单击背景图像对应的“浏览”按钮,弹出“选择图片文件源”对话框如图9-10所示,选择“”图片;上边距和下边距设置成“0像素”;在标题/编码分类中,标题文本框输入“我的主页”如图9-11所示。选择“确定”按钮完成页面属性的设置,界面效果如图9-12所示。图9-8index文件界面图9-9页面属性对话框一图9-10“选择图片文件源”对话框图9-11页面属性二图9-“插入|常用|表格”,图标为,在弹出的表格对话框中输入下列的属性。行数:3,列数2,表格宽度:800像素,边框1像素。单击“确定”按钮后,显示效果如图9-13表格对话框所示。图9-(1)表格居中显示。将“属性”栏中对齐方式设置为“居中对齐”。(2)合并单元格。左键选中表格第1行,右键单击|表格|合并表格,第3行操作相同。(3)设置单元格属性。1)单击表格第1行,在“属性”栏中设置单元格属性。如表9-1-1所以。表9-1-1第一行属性值属性垂直背景高属性值顶端image/)分别单击第2行第1个单元格,设置属性及属性值如下表。单击第2行第2个单元格,设置属性及属性值如下表。单元格垂直背景颜色高宽第2行第1列顶端#999999350px200px第2行第2列顶端#000000350px600px4)单击第3行单元格,设置属性