案例一  简单个人网站的制作
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小时内删除。