第五篇dreamweaver.pptVIP

第五章 使用Dreamweaver设计网站 本章任务 本章目标 1.能使用网站设计流程分析简单网站的设计 2.能使用表格技术进行页面整体布局 3.能制作模板页，并使用模板编辑其他网页 4.能使用CSS样式美化网页 §5.1 网站系统需求分析与整体规划 网站开发的4个步骤： 1、需求分析 网站开发的流程介绍 2、网站制作 3、测试网页 4、发布网站 二、需求分析 客户需求 业务背景 武汉软件学院计算机系需要创建一个网站 设计风格 网站要具有鲜明、简约、大气的风格 网站内容 系部概括 、专业设置 、特色班级 、教学管理 、实验基地 、学生工作 、党建工作 、学生作品等 确认需求 提供给客户一个首页和模板页(可用photoshop制作) 三、创建站点 使用Dreamweaver创建站点的步骤如下： 1、选择“新建站点”，然后为其命名 2、选择“是否”使用服务器技术 3、选择“编辑我的计算机上的本地副本…”选项 4、选择用于存储网站文件的文件夹 5、选择连接到远程服务器的选项 6、在“文件”面板中创建名为images文件夹 四、页面内容 §5.2 系部主页的设计 一、表格布局 （一）如何使用表格布局 目前大多数的网页仍然是采用嵌套表格来进行页面布局。所谓嵌套表格，也就是在一个表格中再插入另一个表格。如你要设计的页面分成几个大部分，可以先利用表格的行数和列数来控制它们的布局，如果某一个单元格中的内容又要分成几部分，则可以继续在这个单元格中插入表格进行布局，以此类推，直到完成整个网页的布局。 表格布局 （二）为什么使用表格布局 在进行页面布局时，我们之所以运用多个嵌套表格来布局是因为如果网页的布局采用多个表格并排向下，则浏览器可以多线程下载，页面加载速度会很快。浏览器在解释HTML代码时，遇到一个Table标签时，会将对应的/table读取完成时，才会显示在界面上，所以常用的布局思路是一般整个网页为一个表格，然后再分别用表格来划分布局。否则网页代码比较冗长，需要全部读取完成后才显示，会导致最终浏览时网页下载特别慢，浏览者失去耐心而最终离开网站。 表格布局 （三）在运用表格进行网页布局时，有以下技巧： 1. 表格布局第一步：先插入一个表格，设置好宽度（注意单位一般不用百 分比，要用px），高度不用设置，然后令这个表格居中。以后所有的内容都限制在这个表格中。 2. 熟练使用表格嵌套。采用表格中插入表格，多个表格并排向下的方法进行布局。 3. 表格的边框一定要为0，即table中的border属性值为0。也就是让 表格在网页预览中不可见，这样才能实现表格布局的目的。 表格布局 （四）表格布局的优缺点和应用场合 二、用表格布局设计系部主页 （一）新建网页 新建一文档，将其保存为首页文件“index.htm”，然后选择主菜单中的【修改】/【页面属性】命令，将网页的上、下、左、右边距全部设置为“0”。如图6-2-1所示。 （二）制作系部首页导航 1.单击【常用】工具栏上的表格按钮，打开【插入表格】对话框，将【行数】设为“3”，【列数】设为“1”，【宽度】设置为“786像素”，其他选项设为都设置为“0”。如图6-2-2所示。 如果浏览器选择的是800*600像素分辩率，而表格的垂直滚动条会占25像素，所以将表格的宽度设置为775像素时，浏览器就不会出现水平滚动条。这有一个前提，就是网页文档的水平方向的边距为“0”，如果不为“0”，那么表格的宽度就要小于775像素，会产生水平滚动条，对浏览用户来说不方便。 如果浏览器选择的是1024*768像素分辩率，表格的宽度最多设置为1002，浏览器就不会出现水平滚动条。其他相同。 2. 选定表格，在【属性】面板的【对齐】选项上选择“居中对齐”。 3.把光标定位于第一行，设置单元格背景为index-top_r1_c1.gif。 4.把光标定位于第二行，设置单元格背景为index-top.gif。 5.把光标定位于第二行，然后打开【插入表格】对话框，将【行数】设为“1”，【列数】设为“9”，【宽度】设置为“786像素”，其他选项设为都设置为“0”。插入内容 网站导航制作完成，如图所示6-2-3所示 （二）制作网站主体内容 1.单击【常用】工具栏上的表格按钮，打开【插入表格】对话框，将【行数】设为“1”，【列数】设为“2”，【宽度】设置为“786像素”，其他选项设为都设置为“0”。 2. 选定表格，在【属性】面板的【对齐】选项上选择“居中对齐”。 3.把光标定位于左边一列，然后打开【插入表格】对话框，将【行数】设为“9”，【列数】设为“1”，【宽度】设置为“192像素”，其他选项设为都设置为“0”。依次插入内容。 4.把光标定位于右边一列，然后打