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

2017-03-27

15430

案例一简单个人网站的制作一、目的及要求 1. 认识Dreamwaver 开发环境；2. 掌握站点、网页的创建、保存、运行；2. 掌握运用表格进行页面布局；4. 熟练进行图片、文字、链接等网页元素的

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

一、目的及要求 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所示。