案例一  简单个人网站的制作
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所示。
图9-8  index文件界面
图9-9  页面属性对话框一
图9-10 “选择图片文件源”对话框                图9-11 页面属性二
图9-12  页面效果
6.表格布局
      选择“插入|常用|表格”，图标为，在弹出的表格对话框中输入下列的属性。行数：3 ，列数2，表格宽度：800 像素，边框1像素。单击“确定”按钮后，显示效果如图9-13表格对话框所示。
    图  9-13  表格对话框

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