案例一--简单个人网站的制作
————————————————————————————————作者：————————————————————————————————日期：
案例一  简单个人网站的制作
1.认识Dreamwaver 开发环境；
2.掌握站点、网页的创建、保存、运行；
2.掌握运用表格进行页面布局；
个人网站的制作代码
4.熟练进行图片、文字、链接等网页元素的添加和属性设置。
创建个人网站，网站主要包括个人资料、我的相册和南山学院等项目，运行效果如图9-1所示，当点击“我的相册”，运行效果如图9-2所示。当单击“南山学院”链接，跳转到南山学院的主页。
图9-1  个人资料页面
图9-2  我的相册页面
本案例创建如图9-1所示的网站，通过该案例，学会网页创建、页面布局、元素添加设
二、案例效果图
三、内容及操作 一、目的及要求
置、浏览页面等基本操作。
操作步骤：
注：准备一个image文件夹，包括需要的图片文件。
1.启动Dreamweaver
打开“开始|程序|Dreamweaver”后，弹出如图9-3所示的欢迎界面。
图9-3所示的欢迎界面图9-4 站点定义界面一
图9-5 站点定义界面二
2.创建站点
选择菜单中“站点|新建”，弹出“站点定义为”对话框，如图9-4所示的站点定义界面一，在文本框中输入站点名称“first”，选择“下一步”，选取默认信息至“共享文件”选项，在“如何连接到远程服务器”下拉列表中选择“无”如图9-5 站点定义界面二，最终选择“完成”按钮。
3.添加文件
右键单击文件面板的站点，弹出快捷菜单如图9-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所示，选择“bg.gif ”图片；上边距和下边距设置成“0像素”；在标题/编码分类中，标题文本框输入“我的主页”如图9-11所示。选择“确定”按钮完成页面属性的设置，界面效果如图9-12所示。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。