表格案例一简单个人网站地制作

实用文档

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

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文件夹下在文件属性中点击“刷新”按站点结构图。

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 表格对话框

7.表格属性设置

1表格居中显示。将“属性”栏中对齐方式设置为“居中对齐” 。

2合并单元格。左键选中表格第1行右键单击|表格|合并表格第3行操作相同。

(3设置单元格属性。

1单击表格第1行在“属性”栏中设置单元格属性。如表9-1-1所以。

表9-1-1第一行属性值

2分别单击第2行第1个单元格设置属性及属性值如下表。单击第2行第2个单元格设置属性及属性值如下表。

4单击第3行单元格设置属性及属性值如下表。

表格设置完的效果如图9-13所示。

标准文案

实用文档

图9-13表格布局效果图

8.插入表格

单击第2行第1个单元格选择“插入|常用|表格”选择4行 1列宽度100%在第2行第2个单元格选择“插入|常用|表格”选择8行 2列。并将第1列第3行道第8行合并单元格对表格的操作后如图9-14所示。

图9-14在页面中插入表格效果图

9.插入图片

在左侧表格的相应位置选择“插入|常用|图片”选择图片“welcome.gif”调整至合适大小在右侧表格的第3行第1个单元格选择“插入|常用|图片”选择“cat. jpg” ,设置图片属性宽200px高260px。效果图如9-15所示。

标准文案

实用文档

图9-15 插入图片效果图

10.设置链接

在左侧表格“插入|常用|链接”制作“我的首页”超链接在对话康中输入相应信息如图9-16所示。同样制作“我的相册”超链接及“我的母校”超链接。并设置中对齐。

图9-16 我的首页的超链接 图9-17南山学院超链接

11.输入文字并设置字体

①在相应的位置输入应的文字。

② “个人档案”设置为字号为36px颜色为#663399居中。设置其所在单元格背景图片为“imag e/l i.gif”。

③左键第1行 “插入|布局|绘制AP Div”  当出现十字架后拖拽合适宽度输入“欢迎光临奋斗网站”。在属性栏中设置文字的属性如图9-18。设置字号为48号“奋斗”两字为绿色。

图9-18 文字属性设置

标准文案

实用文档

12保存页面。选择“文件|保存”。

13复制页面

复制整个index.html页面。粘贴至photo.html页面。

14删除表格

选择“个人档案”表格按Delete键删除表格。

按照样张及以上操作实现对photo.html页面的制作。插入4行两列表格 “插入|图片”设置图片合适大小。

15. 保存页面。选择“文件|保存”。

16运行页面.运行键盘中F12键.按提示保存页面。运行结果如样张所示。

标准文案