下载文档原格式
题目：设计一个个人网站一、要求：1．使用Dreamweave网页工具制作一个个人网站；2．包含至少四个网页: 包括首页、个人简介、个人相册等（可随意设计），网页之间用超链接相连。
3．网页中要有图片和文字内容，用表格进行页面布局；4．添加至少两种行为，并为首页添加背景音乐。
5. 在网站中设计一个表单页面。
6. 首页必须包含页面标题，动态按钮导航栏。
首先新建一个文件夹，文件夹的名字不能为汉字，做网站所有的路径都必须用字母或者数字，不能用汉字，我们就用名字吧，譬如说名字张三，那文件夹名字就是zs，如图打开Dreamweaver软件，得到图做网页要新建站点，关于站点配置服务器什么的，这里不讲了，只讲建立站点。
选择站点——新建站点。
我们建的文件夹就是站点根文件夹。
新建站点后得到这样一个界面点选高级，得到界面站点名称与我们建文件夹得名字相同，zs填进去就可以了本地根文件夹就是我们新建的那个文件夹zs，http地址为http://localhost/zs接下来选择左侧栏里远程信息点击无后面的那个三角，选择本地网络，远端文件夹同样选择我们新建的那个文件夹接下来点选左面菜单里的测试服务器，点选访问后面那个三角，选择本地网络，测试服务器文件夹也为我们建好的文件夹zs，在url前缀后面加上zs然后点击确定就可以了得到这样一个界面。
下面看老师的第一条要求，是要至少四个网页，那我们就做四个单击新建，然后单击接下来，选择然后单击创建，接下单击文件——保存，保存这个文件，保存在我们一开始建好的文件夹里面，保存名字不能是汉字，只能是字母或者数字，因为我们只坐四个网页，可以简单一点，把这四个网页命名为a、b、c、d，或者1、2、3、4，当然一个网站默认的索引首页名为index，这里也用index，单击保存，这样得到第一个页面，以同样的方式建剩下的三个页面，这里我的首页默认为index.html，其他三个网页的名字分别为a.html、b.html、c.html，我们这四个网页文件已经保存在我们建的文件夹里。
数学系09级（3）班杜强海20091022129利用表格制作网页实验目标该网页将利用设计页面的布局，制楚雄师院的页面简介。
通过该种制作，我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象，已达到自然，生动的配置构成元素的目的。
实验过程《1》在dreamweaver中执行《文件》中的《新建》命令，创建一个HTML文档。
然后在《文件》中保存该文档。
然后在《文档》工具栏的《标题》中输入“师院首页”。
然后单击《常用》工具栏的表格按钮，插入一个3行3列的表格，图1如图1所示。
<2>选中第2行表格的第2单元格。
单击属性面板中的合并所选单元格按钮，将其合并。
然后将指针置于第1行第1列单元格内在属性面板中将《宽》设为200，<高》设为30，如右图2所示。
《3》单击《常用》工具栏中的常用图像按钮，再打开的《选择图像源文件》对话框中选中一幅图片，单击《确定》按钮，为单元的插入一幅图片，如右图3所示《4》将鼠标指针移到第1行1列单元格内，在属性面板中将《宽》设为50，《高》设为30，单击《常用》工具栏中的图像按钮，打开《插入鼠标经过图像》对话框，如图4所示。
图3 《5》在打开的< 插入鼠标经过图像>对话框中，单击《原始图像》后面的《浏览》按钮.。
在打开的对话框中选中一幅图片，单击确定按钮，在单击《鼠标经过图像》后面的《浏览》按钮，用同样的方法选定一幅图片，如图5所示《6》设置完成后，单击《确定》按钮，然后同同第4,5步一样为第1行的第1,2列也分别设置鼠标经过图像。
然后将鼠标指针置于第一行第三列的单元格内，在《属性》面板中，为《宽》设为100，《高》。
设为50。
为《背景颜色》设为#333cc，如图6所示《7》将鼠标指针置于表格的第3行，按前面的方法，为第3行单元格也插入一幅图片。
然后将鼠标指针置图4 图2于表格的下一行，单击《常用》工具栏表格图标按钮，为文档在插入一个3行3列的表格，如图7所示。
表格布局网页课程设计一、课程目标知识目标：1. 让学生掌握网页设计中的表格布局基础知识，理解表格布局的原理和用途；2. 学会运用HTML标签创建表格，设置表格的行、列和单元格属性；3. 掌握CSS样式表中与表格布局相关的属性，如边框、间距、填充等。
技能目标：1. 培养学生运用表格布局设计网页的能力，能独立完成简单的网页布局；2. 提高学生在网页设计中的问题解决能力，能够调整表格布局以适应不同设备和屏幕尺寸；3. 培养学生团队协作和沟通能力，能在小组合作中共同完成网页设计任务。
情感态度价值观目标：1. 培养学生对网页设计的兴趣和热情，激发学生的创造力和创新精神；2. 培养学生关注用户体验，注重网页布局的美观性和易用性；3. 增强学生的信息素养，使学生认识到网络技术在信息传播中的重要作用。
课程性质：本课程为信息技术课程，以实践操作为主，结合理论知识，培养学生的实际操作能力和创新思维。
学生特点：学生处于初中阶段，对新鲜事物充满好奇，具备一定的计算机操作基础，喜欢动手实践。
教学要求：教师应注重理论与实践相结合，以学生为主体，引导学生主动探究，培养其独立思考和解决问题的能力。
同时，关注学生个体差异，因材施教，确保每个学生都能在课程中取得进步。
通过课程学习，使学生能够达到上述具体的学习成果，为后续的网页设计学习打下坚实基础。
二、教学内容1. 理解表格布局的概念与作用- 表格布局的定义与分类- 表格布局在网页设计中的应用场景2. HTML表格标签的使用- <table>、<tr>、<td>、<th>等基本标签的用法- 表格行、列、单元格的属性设置3. CSS样式表中与表格布局相关的属性- 边框样式：border、border-collapse、border-spacing等- 单元格样式：padding、margin、text-align、vertical-align等- 表格背景与颜色：background-color、background-image等4. 表格布局实例分析与操作- 分析经典表格布局案例，了解其设计思路和实现方法- 学生实践操作，完成一个简单的表格布局网页5. 响应式表格布局- 介绍响应式网页设计的基本概念- 学习使用CSS媒体查询调整表格布局以适应不同屏幕尺寸6. 表格布局在实际项目中的应用- 分析实际项目需求，确定表格布局设计方案- 学生团队合作，完成一个具有实际意义的网页设计项目教学内容安排与进度：第1课时：理解表格布局的概念与作用，学习HTML表格标签的使用第2课时：CSS样式表中与表格布局相关的属性，分析表格布局实例第3课时：实践操作，完成一个简单的表格布局网页第4课时：学习响应式表格布局，调整表格布局以适应不同屏幕尺寸第5课时：团队合作，完成实际项目中的表格布局设计教学内容与教材关联性：本教学内容与教材中关于网页设计、HTML和CSS的知识点紧密相关，涵盖了表格布局的基本概念、用法和实际应用，确保了教学内容的科学性和系统性。
课程教案项目效果【任务一】布局主页 index.html——表格的基本应用所谓表格（Table）就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在XHTML语言中以<tr>标签开始，</tr>标签结束），垂直的多个单元格称为列（以<td>标签开始，</td>标签结束），如图5—1所示。
行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。
（一）插入表格Dreamweaver CS3提供了非常完善的表格编辑功能，首先介绍如何在网页文档中插入表格。
步骤 1 首先在文档页面上要插入表格的位置单击，以确定插入点位置。
步骤 2 单击“常用”插入栏中的“表格”按钮，打开“表格”对话框，设置各项参数后，单击“确定”按钮，即可插入表格，如图所示。
下面简单介绍一下“表格”对话框中几个重要选项的意义。
●表格宽度（Width）：设置表格宽度值，否则，其宽度将随其中的内容而改变。
●在Dreamweaver中，最常使用的单位是像素和百分比。
像素使用0或大于0的整数表示；百分比是相对于浏览器而言的，使用 0 或百分比表示。
●边框粗细（Border）：是指整个表格边框的粗细，标准单位是像素。
整个表格外部的边框叫外边框，表格内部单元格周围的边框叫内边框。
●单元格边距（Cell padding）：也叫单元格填充，是指单元格内部的文本或图像与单元格边框之间的距离，标准单位是像素。
●单元格间距（Cell spacing）：是指相邻单元格之间的距离，标准单位是像素。
（二）选择表格和单元格在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。
当表格外框显示为黑色粗实线时，就表示该表格被选中，另外，还可以通过“标签选择器”选择表格。
具体做法是：在表格内部任意处单击鼠标，然后在“标签选择器”中单击对应的“<table>”标签，该表格便处于选中状态。
网页设计基本操作________________________________________ 1.把文件夹转换成站点：点击【文件】菜单——打开网站——选择需要转换的文件夹并打开——点击【打开】按钮——确认2.插入表格：点击【表格】菜单——插入——表格3.设置表格属性：在表格内右击鼠标，选择【表格属性】，进行表格属性设置（包括表格边框粗细、颜色、背景等）4.插入图片：点击【插入】菜单——图片——来自文件……——选择相应的文件（插入图片后，双击图片可以进行图片属性设置）5.设置单元格背景：在单元格内右击鼠标，在菜单内选择【单元格属性】——选择【使用背景图片】——浏览选择相应图片文件6.修改网页标题：点击【文件】菜单——属性——选择【常规】选项卡——标题（修改或设置网页标题）/背景音乐——浏览选择相应的声音文件7.插入滚动字幕：点击【插入】菜单——web组件……——动态效果——字幕——进行字幕属性设置8.插入水平线：点击【插入】菜单——水平线——双击水平线进行属性设置9.插入层：点击【插入】菜单——层——在层内进行相关操作10.插入flash动画：点击【插入】菜单——图片——flash影片——选择SWF格式的文件11.插入视频：点击【插入】菜单——图片——视频——选择A VI、MPG等格式的文件12.设置导航栏：点击【视图】菜单——导航——添加相应的导航页面——定位光标——点击【插入】菜单——导航——链接栏——基于导航结构的链接栏——选择一种导航样式——选择导航栏的方向——完成。
13.插入交互式按钮：点击【插入】菜单——交互式按钮——进行交互式按钮样式选择和按钮文本设置14.设置超链接：选择需要设置超链接的对象——点击【插入】菜单——超链接……——选择相应的链接位置。
网页及表格背景设计
一、网页背景设计技巧
1.颜色背景
颜色背景的设计是最为简单的，但同时也是最为常用和最为重要的，因为相对于图片背景来说，它有无与伦比的显示速度上的优势。
在网页文件中，一般通过标签来指定页面的颜色背景，其HTML（超文本标记语言）语法为:其中的"color"表示不同的颜色，可以用各种不同的颜色表示方法，比较常用的有直接用颜色的英文名称，如blue、yellow、black等等，还可以用颜色的十六进制表示方法，如#0000FF、#FFFF00、#000000等等，此外还可以用百分比值法和整数法，其效果都是一样的。
颜色背景虽然比较简单，但也有不少地方需要注意，如要根据不同的页面内容设计背景颜色的冷暖状态，要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。
2.沙纹背景
沙纹背景其实属于图片背景的范畴，它的主要特点是整个页面的背景可以看作是局部背景的反复重排，在这类背景中以沙纹状的背景是为常见，所以我们将其统称为沙纹背景。
初学主页制作者都有这样的经历，当试图把自己的照片作为页面的背景是，却发现浏览器上显示出来的不仅仅是一个照片，而是同一照片在水平和竖直方向上的反复排列。
这就是浏览器处理图片背景时的规律方法，利用这一规律我们可以用一小块图片作为页面背景，让它自动在页面上重复排列，铺满整个页面，从而使网页的体积大大减小。
沙纹背景的原理和实现方法，就是找一个小的图片，越小越好，但注意要使最后的背景看起来要像一个整体，而不是若干图片的堆砌。
其实现的HTML语法如下:其中的"picture"表示背景图片的URL（统一资源定位符）路径。
3.条状背景
条状背景与沙纹背景是比较相似的，它适用于页面背景在水平或竖直方向上看是重复排列的，而在另一方向上看则是没有规律的。
它也是利用浏览器对图片背景的自动重复排列，与沙纹背景所不同的是它只让图片在一个方向上重复排列。
以在竖直方向上排列为例，首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片，其长度与页面的宽度相当。
也通过将其设为页面背景，经浏览器显示后，就成为整个页面从左到右蓝白渐变的分栏颜色背景。
当然，也可以用类似的方法实现条状背景在水平方向上的重复排列。
4.照片背景
把自己或朋友的照片作为页面的背景让大家看到，是有点令人激动的事情，但浏览器对图片的自动重复排列却使这一愿望难以实现。
怎么办呢?只有想不到的，没有做不到的，这里我们用上一点简单的CSS（层叠样式表)。
在网页文件的……之间加入下面的CSS语句:这样，在网页页面中，就可以看到你的照片位于页面的正中间，而且在拉动浏览器窗口的滚动条时，照片仍然位于页面的正中间而不随页面内容一起滚动。
如果你觉得照片位于页面的正中间不满意，你也可以随意地调整它在页面中的位置，只需要调整"background-position"（属性设置背景图像的起始位置）的值就可以了。
5.复合背景
如果你在练习上面的“照片背景”时“不小心”也设置了标签里的颜色背景，那么你看到了什么?颜色背景还起作用吗?对，你能看到你的照片浮于你设的颜色背景之上，二者能够同时正常地显示出来。
这就是复合背景的魅力，更为吸引人的是，当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候，浏览器能够自动用你所设置的颜色背景取而代之。
它的设计方法，就不用我再多说了吧!
6.局部背景
前面我们所说的背景都是整个页面的背景，能不能在页面上为某个局部的内
容设置属于它自己的背景呢?回答是肯定的。
最为常见的是在表格的设计当中，我们可以为表格设置一个不同于页面的背景，甚至在不同的表格单元中，我们也可以设置各个表格单元自己的背景。
在浏览器中的显示效果,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。
除此之外，我们还可以单独为某个文字段落设置背景，甚至为这个文字段落中的某几个文字设置自己的背景，这也需要用上一些CSS。
二、表格添加背景
在表格之外套个div，给div加个背景;
<table style="background-image:url(img/background.jpg); background-repeat:repeat" >
控制背景图是否重复和如何重复属性如下:
repeat 默认。
背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
路径一定要弄对了,如果都是根目录，直接写img/background.jpg。
