网站设计与开发培训教程

勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest网站设计与开发马瑞敏（Email：ruimin.ma@sxu.edu.cn；电话：18635578486；微博：http://t.sina.com.cn/manfa）Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest1网站设计基础 1.1Internet的相关知识 1.2网站的相关知识 1.3网站的 规划 污水管网监理规划下载职业规划大学生职业规划个人职业规划职业规划论文 1.4网站的设计Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest1网站设计基础 1.1internet的相关知识1.1.1WWW（万维网）（1）链接（2）超文本1.1.2URL（统一资源定位器）:例子（http，telnet，news）信息服务类型：//信息资源地址/文件路径1.1.3客户机/服务器V.S.浏览器/服务器1.1.4TCP/IP：一种网络 协议 离婚协议模板下载合伙人协议 下载渠道分销协议免费下载敬业协议下载授课协议下载 1.1.5端口： 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 端口号和自由端口号Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest1网站设计基础1.1.6internet地址和域名系统IP：共32位，四个十进制数构成→域名地址：字符型***掌握一级域名的含义 1.2网站的相关知识1.2.1网站的分类1.2.2主页和网页（index，default）1.2.3网页的组成要素（文字、图像、超级链接和多媒体元素）（1）GIF（2）JPEGCopyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest1网站设计基础 1.3网站的规划（1）目标（2）类型（3）主题内容（4）风格（5）网页系统树（6）网页内容（7）技术问题Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest1网站设计基础 1.4网站的设计1.4.1基本原则（10条）1.4.2设计技巧（1）网站的CI形象（LOGO，色彩）（2）确定网站的整体风格（3）确定网站的目录结构和命名规则（4）确定网站的链接结构（一对一，一对多）（5）首页的设计（6）版面设计1.4.3避免的问题（5点）Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest 补充：案例赏析1IBM（商务）2迪斯尼（儿童）3肯德基（快餐）5中国娱乐网（娱乐）6清华大学（教育）7淘宝网（购物）Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest2网站构建基础 2.1网站域名注册 2.2网站空间的获得 2.3使用MacromediaDreamweaver构建本地站点 2.4使用internet信息服务器创建本地站点Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest2网站构建基础 2.1网站域名注册2.1.1选择合适的域名IBM，InternationalBusinessMachineshttp://www.ibm.com/cn/联想，http://www.lenovo.com.cn/2.1.2域名申请的步骤2.1.3注意事项（1）委托公司代办（2）抢注（3）法律纠纷（4）增值服务2.1.4中文域名Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest 2.2网站空间的获得2.2.1选择网站空间（1）购买自己的服务器（2）租用专门服务器（3）使用虚拟主机（4）免费网站空间***例子：http://www.8u.cn/，资料：http://www.free8.com/kongjian 2.3使用MacromediaDreamweaver构建本地站点 2.4使用internet信息服务器创建本地站点都是基于IISCopyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest3DreamweaverMX入门 3.1DreamweaverMX的工作环境 3.2在网页中添加文本和插入对象Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest3DreamweaverMX入门 3.1DreamweaverMX的工作环境Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest3DreamweaverMX入门 3.2在网页中添加文本和插入对象http://manfa.webng.com/untitled-1.aspCopyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest4超级链接与图像地图 4.1超级链接概述 4.2创建超级链接 4.3管理链接 4.4创建图像地图 Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest4.1超级链接概述 绝对路径：http://www.bjfg.com/demo/chapter1.htm 相对路径：demo/chapter1.htm 基于站点根目录的路径：/demo/chapter1.htmCopyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest4.2创建超级链接命名锚记文档或文件链接 _blank _parent _self _top电子邮件Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest5表格和样式表 5.1插入表格 5.2表格的选定 5.3表格的设置及向表格中插入图片 5.4样式表 Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest5.4样式表 CSS是CascadingStyleSheet的缩写，译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 a:link a:visited a:hover a:activehttp://manfa.webng.com/index.aspCopyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest6层、行为和时间轴 6.1层 6.2行为 6.3时间轴 Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest7框架和表单 框架Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest7框架和表单 表单Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest附录：个人空间Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest8页面布局和模板的应用 8.1在布局视图中对页进行布局 8.2模板 8.3库 8.4演示 Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest8.1在布局视图中对页进行布局 主要涉及两个核心技术（1）布局表格：搭框架（2）布局单元格：细化Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest8.2模板 主要掌握两个主要技术：（1）模板的建立方式：a)建立空白模板b）将现有网页保存为模板（2）可编辑区域的选择从两个方面来深入理解：（1）模板的意义就是提供一种统一的模式来构建网站，达到批量生产文档的目的。（2）模板内任何内容和链接的改动，所有使用模板构建的文档都会自动更新Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest8.3库的应用 库是从更微观的角度（相对模板）来定义网页元素，这些元素往往也是被重复利用的。Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest8.4演示 布局表格和布局单元格 模板的建立、保存、使用和更新 库的建立、保存、使用和更新Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest10HTML语言 10.1文档基本结构 10.2HTML常用标记 10.3演示 Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest10.1文档基本结构 <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>无标题文档</title> </head> <body> 主题内容 </body> </html>最主要就两个部分：（1）head(2)bodyCopyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest10.2HTML常用标记 总的来说有三种方法：（1）<标记名>文本</标记名>（2）<标记名属性名=“属性值”…>文本</标记名>（3）<标记名>10.2.1文本格式标记（1）标题标记:<hi>标题文本</hi>（2）分段标记:<p>或者是<p>…….</p>常用属性：align=“”left,center,right,justify（3）换行标记：<br>注意：i是下标，取值范围为：1-6,越小字体越大Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest10.2HTML常用标记（4）水平线标记：<hr>常用属性：align(left,center,right)，color，noshade,size（宽度）,width(长度)（5）字体标记<font>…..</font>常用属性：face,size(1-7，值越大字号越大),color10.2.2列表标记（1）无序列表<ul>，用<li>做引导;<litype=“”>(disc,circle,square)Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest10.2HTML常用标记(2)有序列表<ol>，用li引导<oltype=>,(A,a,I,I,1)；<olstart=>,(数字)(3)定义列表<dl>,条目以<dt>为引导，说明用<dd>引导10.2.3图像标记（1）src（2）aligh（3）alt（4）hight和width示例：<imgsrc="d639b61be72cd843314e1534.jpg"width="492"height="558"border="0"align="middle"alt="地铁"/>Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest10.2HTML常用标记 10.2.5超链接标记（1）文件链接:<ahref=“a.html”>北京大学</a>（2）锚链接：<aname=“第一章”>第一章</a><ahref=“#第一章”>链接到第一章</a>（3）邮件链接：<ahref=“mailtoruimin.ma@sxu.edu.cn”>请多指教</a>10.2.6表格标记Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest10.2HTML常用标记（1）表格的相关标记 表格标记：<table>……</table> 表格标题标记：<caption>……</caption> 表格行标记：<tr>……</tr> 字段名标记：<th>字段名</th> 数据标记：<td>数据</td>（2）相关属性a)Table标记的属性Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest10.2HTML常用标记1）边框粗细:border=，最外围2)边框的宽度：cellspacing=，内部3）边框和内容的距离：cellpadding=4）表格的宽度width=#%5）表格的背景色bgcolor=6）表格的对齐方式align=b)Th和td标记的属性1)单元格所跨列数，colspan2)单元格所跨行数，rowspanCopyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest10.3演示 对五种文本格式标记的演示 对三种列表标记的演示 对图像标记的演示 对超链接标记的演示 对表格标记的演示Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest抽查与新任务 抽查（1）利用CSS技术定义链接的表现状态要求：不论是初始状态，还是点击后都没有下划线。（2）下拉菜单的实现要求：鼠标放在文字上面层出现，离开时则消失 新任务（1）网页制作综合实践要求：利用布局视图、模板和库完成一个网站初始页面（main.html）的设置Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest11VBScript基本语法 11.1VBScript的基本框架 11.2对象及对象的方法与属性 11.3数据类型 11.4常量 11.5变量 11.6运算符 11.7基本输入/输入函数 11.8数组 Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest11.1VBScript的基本框架<scriptlanguage=“VBScript”type=“text/VBScript”>…</script>*Script代码最好放在head部分中Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest11.2对象及对象的方法与属性11.2.1document对象Document.write( 参数 转速和进给参数表a氧化沟运行参数高温蒸汽处理医疗废物pid参数自整定算法口腔医院集中消毒供应 )Document.lastmodified<scriptlanguage=“VBScript”type=“text/vbscript”>Document.write(document.lastmodified)</script>11.2.2window对象 Alert(“提示信息”) Prompt(“提示信息”,“默认值”)Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest11.3数据类型11.4常量 Variant是VBScript唯一的数据类型。主要有13种类型。*其用于数字上下文中时作为数字处理，用于字符串上下文中时作为字符串处理。*用“”中使其强制转化成为字符串 Const，普通常量（字符串常量和数值常量）和符号常量（预定义符号常量，用户自定义符号常量）Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest11.5变量11.6运算符 变量名的注意事项（1）第一个字符必须是字母，不能有句点和空格（2）长度不能够超过255个字符（3）在被声明的作用域内唯一（3）不能与系统关键字相同 声明变量的方式：dim,public,private 运算符包括三个种类：算术运算符，比较运算符，逻辑运算符Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest11.7基本输入/输出函数 11.7.1msgboxMsgbox(prompt[,buttons][,title]),其Buttons参数 11.7.2inputboxInputbox(prompt[,title][,default])Input可以输入内容，而msg则只是提示Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest11.8数组 11.8.1一维数组的声明：dima(10) 11.8.2多为数组的声明：dima(1,2) 11.8.3动态数组的声明：dima(),redima(25),redimpreservea(30)Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest12选择和循环语句 12.1选择语句 12.2循环语句 Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest12.1选择语句12.1.1if…then…else语句12.1.2if…elseif…endif语句If….then…elseif….then…else…endif12.1.3select…caseSelectcase()Case1Case2[caseelse….]EndselectCopyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest12.2循环语句 12.2.1dowhile…loop语句 12.2.2do…loopwhile语句 12.2.3for…nextForv=starttoend[step…]Mainbody[exitfor….]nextCopyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest13过程与事件 13.1Sub过程 13.2Function过程 13.3事件与事件过程 Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest定义：Sub过程名（参数）语句组Endsub调用：过程名参数列表Call过程名（参数列表）定义：function过程名（参数）语句组Endfunction调用：和内部函数一样（1）function可以带参数，sub不可以（2）function可以返回值，sub不能（3）function可以直接使用，而sub则不可以（CALL）Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest 文档对象：HTML文档中的每个元素都是一个拥有属性、方法和事件的对象 事件过程：当触发一个文档对象的某个事件时，该对象能够按照某种方式做出响应，但具体的响应过程需要由程序员写脚本代码实现，这种过程为事件过程。 构成：需要用sub定义控件名称_事件名称Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest作业将11-12章的实践指导具体实践，并传到个人空间。时间为下周2之间Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest实验1（1）对静态网页遗留问题的解决（2）对html,VBscript,过程和函数等的练习要求：实现n*n计算与现实（n<6）（3）申请并加入自己的主页模块：a:免费计数器b:免费留言薄c:免费聊天室d:免费论坛Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest实验2ASP基本语法 Request:form(post),querystring(get),cookies,收集信息 Response:write,redirect,输出信息 Server:mappath(P213) Session Application 包含文件（include和execute）实验：（1）对request和response的掌握做一个登陆页面，如果正确则显示欢迎，不正确则返回登陆页面。（2）execute的掌握在多个页面调用同一个图片Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-HonestADO对象连接数据库*ADO是在OLEDB技术的基础上实现，包含3个主要对象：connection,recordset,command. connection三种连接方式(都以access为例)（1）通过ODBC连接（设置好）setcn=server.createobject("adodb.connection")cn.open"dsn=a“（2）通过ODBC连接（未设置）strcn="DRIVER=MicrosoftAccessDriver(*.mdb);DBQ="&Server.MapPath("a.mdb")setcn=server.createobject("adodb.connection")cn.openstrcn（3）通过OLEDB连接（建议使用）strcn="provider=Microsoft.jet.oledb.4.0;datasource="&Server.MapPath("a.mdb")setcn=server.createobject("adodb.connection")cn.openstrcnCopyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-HonestADO对象连接数据库 Recordset对象语法：setrs=server.createobject(“adodb.recordset”)调用具体字段：rs.fields(“字段名”)指针使用：见P227，和VB是一样的Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest演示、实验和预习 演示（1）querystring演示（2）三种连接数据库方法的演示（含recordset） 实验练习三种数据库连接方式，并实现数据查询功能(含recordset)；要求显示a.mdb中性别为“女”的记录。 预习数据的分页显示Copyright2006ThomsonCorporation*勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest勤奋、谨慎、敬业、诚信Diligent-Prudent-Dedicated-Honest实验 报告 软件系统测试报告下载sgs报告如何下载关于路面塌陷情况报告535n,sgs报告怎么下载竣工报告下载 1报告名称：对数据库的熟练操作报告内容：（1）连接数据库（2）显示全部记录（有精力同学可以实现分页显示）（3）删除记录（4）增加记录样本数据：a.mdb