资源描述：
《案例一简单个人网站地制作》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、实用文档案例一简单个人网站的制作一、目的及要求1.认识Dreamwaver开发环境；2.掌握站点、网页的创建、保存、运行；2.掌握运用表格进行页面布局；4.熟练进行图片、文字、链接等网页元素的添加和属性设置。二、案例效果图创建个人网站，网站主要包括个人资料、我的相册和南山学院等项目，运行效果如图9-1所示，当点击“我的相册”，运行效果如图9-2所示。当单击“南山学院”链接，跳转到南山学院的主页。图9-1个人资料页面图9-2我的相册页面三、内容及操作步骤标准文案实用文档本案例创建如图9-1所示的网站，通过该案例，学会网页创建、页面布局、元素添加设置、浏览页面等基本操作。操作步骤：注：
2、准备一个image文件夹，包括需要的图片文件。1.启动Dreamweaver打开“开始
3、程序
4、Dreamweaver”后，弹出如图9-3所示的欢迎界面。图9-3所示的欢迎界面图9-4站点定义界面一图9-5站点定义界面二2.创建站点选择菜单中“站点
5、新建”，弹出“站点定义为”对话框，如图9-4所示的站点定义界面一，在文本框中输入站点名称“first”，选择“下一步”，选取默认信息至“共享文件”选项，在“如何连接到远程服务器”下拉列表中选择“无”如图9-5站点定义界面二，最终选择“完成”按钮。3.添加文件右键单击文件面板的站点，弹出快捷菜单如图9-6所示。选择“新建文件”，修改默认文件
6、名为“index.html”，相同操作添加页面“photo.html”。标准文案实用文档图9-6新建文件图9-7站点结构图4.添加文件夹将准备好的image文件夹复制到e：first文件夹下，在文件属性中，点击“刷新”按钮。Image文件夹会显示到文件站点中。如图9-7站点结构图。5.页面属性设置左键双击“index.html”页面文件，在“文档”窗口会显示“index.html”页面，如图9-8所示。点击“属性”栏中的“页面属性”按钮，弹出页面属性对口话框，如图9-9所示。在页面属性对话框中，单击背景图像对应的“浏览”按钮，弹出“选择图片文件源”对话框如图9-10所示，选择“b
7、g.gif”图片；上边距和下边距设置成“0像素”；在标题/编码分类中，标题文本框输入“我的主页”如图9-11所示。选择“确定”按钮完成页面属性的设置，界面效果如图9-12所示。图9-8index文件界面标准文案实用文档图9-9页面属性对话框一图9-10“选择图片文件源”对话框图9-11页面属性二图9-12页面效果6.表格布局选择“插入
8、常用
9、表格”，图标为标准文案实用文档，在弹出的表格对话框中输入下列的属性。行数：3，列数2，表格宽度：800像素，边框1像素。单击“确定”按钮后，显示效果如图9-13表格对话框所示。图9-13表格对话框7.表格属性设置（1）表格居中显示。将“属性”栏
10、中对齐方式设置为“居中对齐”。（2）合并单元格。左键选中表格第1行，右键单击
11、表格
12、合并表格，第3行操作相同。(3）设置单元格属性。1）单击表格第1行，在“属性”栏中设置单元格属性。如表9-1-1所以。表9-1-1第一行属性值属性垂直背景高属性值顶端image/top.jpg180px2）分别单击第2行第1个单元格，设置属性及属性值如下表。单击第2行第2个单元格，设置属性及属性值如下表。单元格垂直背景颜色高宽第2行第1列顶端#999999350px200px第2行第2列顶端#000000350px600px4）单击第3行单元格，设置属性及属性值如下表。属性垂直背景颜色属性值顶端#6
13、66666表格设置完的效果如图9-13所示。标准文案实用文档图9-13表格布局效果图8.插入表格单击第2行第1个单元格，选择“插入
14、常用
15、表格”，选择4行，1列，宽度100%，在第2行，第2个单元格选择“插入
16、常用
17、表格”，选择8行，2列。并将第1列，第3行道第8行合并单元格，对表格的操作后如图9-14所示。图9-14在页面中插入表格效果图9.插入图片在左侧表格的相应位置选择“插入
18、常用
19、图片”，选择图片“welcome.gif”，调整至合适大小；在右侧表格的第3行，第1个单元格选择“插入
20、常用
21、图片”，选择“cat.jpg”,设置图片属性，宽200px，高260px。效果图如9-
22、15所示。标准文案实用文档图9-15插入图片效果图10.设置链接在左侧表格“插入
23、常用
24、链接”，制作“我的首页”超链接，在对话康中输入相应信息如图9-16所示。同样，制作“我的相册”超链接，及“我的母校”超链接。并设置中对齐。图9-16我的首页的超链接图9-17南山学院超链接11.输入文字并设置字体①在相应的位置输入应的文字。②“个人档案”设置为字号为36px，颜色为#663399，居中。设置其所在单元格背景图片为“image/li.gif”。③左键第1行，“插入
25、布
