网站设计与开发培训教程

网站设计与开发,马瑞敏 （Email：ruimin.masxu.edu.cn；电话：18635578486； 微博：http:/t.sina.com.cn/manfa ）,1 网站设计基础,1.1Internet的相关知识 1.2网站的相关知识 1.3网站的规划 1.4网站的设计,1 网站设计基础,1.1 internet的相关知识 1.1.1WWW（万维网） （1）链接 （2）超文本 1.1.2 URL（统一资源定位器）:例子（http，telnet，news） 信息服务类型：/信息资源地址/文件路径 1.1.3客户机/服务器 V.S. 浏览器/服务器 1.1.4TCP/IP：一种网络协议 1.1.5端口：标准端口号和自由端口号,1 网站设计基础,1.1.6 internet地址和域名系统 IP：共32位，四个十进制数构成域名地址：字符型 *掌握一级域名的含义 1.2网站的相关知识 1.2.1 网站的分类 1.2.2主页和网页（index， default） 1.2.3网页的组成要素（文字、图像、超级链接和多媒体元素）,（1）GIF （2）JPEG,1 网站设计基础,1.3网站的规划 （1）目标 （2）类型 （3）主题内容 （4）风格 （5）网页系统树 （6）网页内容 （7）技术问题,1 网站设计基础,1.4网站的设计 1.4.1基本原则（10条） 1.4.2设计技巧 （1）网站的CI形象（LOGO，色彩） （2）确定网站的整体风格 （3）确定网站的目录结构和命名规则 （4）确定网站的链接结构（一对一，一对多） （5）首页的设计 （6）版面设计,1.4.3避免的问题（5点）,补充：案例赏析 1IBM（商务） 2迪斯尼（儿童） 3肯德基（快餐） 5中国娱乐网（娱乐） 6清华大学（教育） 7淘宝网（购物）,2 网站构建基础,2.1网站域名注册 2.2网站空间的获得 2.3 使用Macromedia Dreamweaver构建本地站点 2.4 使用internet信息服务器创建本地站点,2 网站构建基础,都是基于IIS,3 Dreamweaver MX入门,3.1Dreamweaver MX的工作环境 3.2在网页中添加文本和插入对象,3 Dreamweaver MX入门,3.1Dreamweaver MX的工作环境,3 Dreamweaver MX入门,3.2在网页中添加文本和插入对象http:/manfa.webng.com/untitled-1.asp,4 超级链接与图像地图,4.1超级链接概述 4.2创建超级链接 4.3管理链接 4.4创建图像地图,4.1 超级链接概述,4.2 创建超级链接,命名锚记,文档或文件链接 _blank _parent _self _top,电子邮件,5 表格和样式表,5.1插入表格 5.2表格的选定 5.3表格的设置及向表格中插入图片 5.4样式表,5.4 样式表,CSS是Cascading Style Sheet 的缩写，译作层叠样式表单。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。,a:link a:visited a:hover a:active,http:/manfa.webng.com/index.asp,6 层、行为和时间轴,6.1层 6.2行为 6.3时间轴,7框架和表单,框架,7框架和表单,表单,附录：个人空间,8 页面布局和模板的应用,8.1在布局视图中对页进行布局 8.2模板 8.3库 8.4演示,8.1在布局视图中对页进行布局,主要涉及两个核心技术 （1）布局表格：搭框架 （2）布局单元格：细化,8.2模板,主要掌握两个主要技术： （1）模板的建立方式： a)建立空白模板 b）将现有网页保存为模板 （2）可编辑区域的选择,从两个方面来深入理解： （1）模板的意义就是提供一种统一的模式来构建网站，达到批量生产文档的目的。 （2）模板内任何内容和链接的改动，所有使用模板构建的文档都会自动更新,8.3库的应用,库是从更微观的角度（相对模板）来定义网页元素，这些元素往往也是被重复利用的。,8.4 演示,布局表格和布局单元格 模板的建立、保存、使用和更新 库的建立、保存、使用和更新,10 HTML语言,10.1文档基本结构 10.2HTML常用标记 10.3演示,10.1文档基本结构, 无标题文档 主题内容 ,最主要就两个部分： （1）head (2) body,10.2 HTML常用标记,总的来说有三种方法： （1）文本 （2）文本 （3）,10.2.1文本格式标记 （1）标题标记:标题文本 （2）分段标记:或者是. 常用属性：align=“ ” left, center, right, justify （3）换行标记：,注意：i是下标，取值范围为：1-6,越小字体越大,10.2 HTML常用标记,（4）水平线标记： 常用属性：align(left,center,right)，color，noshade,size（宽度） ,width(长度) （5）字体标记 常用属性：face,size(1-7，值越大字号越大),color 10.2.2列表标记 （1）无序列表，用做引导 ; (disc,circle,square),10.2 HTML常用标记,(2)有序列表，用li引导 ,(A,a,I,I,1)；,(数字) (3)定义列表,条目以为引导，说明用引导 10.2.3 图像标记 （1）src（2）aligh（3）alt（4）hight和width 示例：,10.2 HTML常用标记,10.2.5 超链接标记 （1）文件链接:北京大学 （2）锚链接： 第一章 链接到第一章 （3）邮件链接：请多指教 10.2.6表格标记,10.2 HTML常用标记,（1）表格的相关标记 表格标记： 表格标题标记： 表格行标记： 字段名标记：字段名 数据标记：数据 （2）相关属性 a)Table标记的属性,10.2 HTML常用标记,1）边框粗细:border=，最外围 2)边框的宽度：cellspacing=，内部 3）边框和内容的距离：cellpadding= 4）表格的宽度 width=#% 5）表格的背景色bgcolor= 6）表格的对齐方式align= b)Th和td标记的属性 1)单元格所跨列数，colspan 2)单元格所跨行数，rowspan,10.3演示,对五种文本格式标记的演示 对三种列表标记的演示 对图像标记的演示 对超链接标记的演示 对表格标记的演示,抽查与新任务,抽查 （1）利用CSS技术定义链接的表现状态 要求：不论是初始状态，还是点击后都没有下划线。 （2）下拉菜单的实现 要求：鼠标放在文字上面层出现，离开时则消失 新任务 （1）网页制作综合实践 要求：利用布局视图、模板和库完成一个网站初始页面（main.html）的设置,11 VBScript基本语法,11.1VBScript的基本框架 11.2对象及对象的方法与属性 11.3数据类型 11.4常量 11.5变量 11.6运算符 11.7基本输入/输入函数 11.8数组,11.1 VBScript的基本框架, *Script代码最好放在head部分中,11.2对象及对象的方法与属性,11.2.1document对象 Document.write(参数) Document.lastmodified Document.write(document.lastmodified) 11.2.2 window对象 Alert(“提示信息”) Prompt(“提示信息”,“默认值”),11.3 数据类型 11.4常量,Variant是VBScript唯一的数据类型。主要有13种类型。 *其用于数字上下文中时作为数字处理，用于字符串上下文中时作为字符串处理。 *用“”中使其强制转化成为字符串 Const，普通常量（字符串常量和数值常量）和符号常量（预定义符号常量，用户自定义符号常量）,11.5 变量 11.6 运算符,变量名的注意事项 （1）第一个字符必须是字母，不能有句点和空格 （2）长度不能够超过255个字符 （3）在被声明的作用域内唯一 （3）不能与系统关键字相同 声明变量的方式：dim,public,private 运算符包括三个种类：算术运算符，比较运算符，逻辑运算符,11.7 基本输入/输出函数,11.7.1msgbox Msgbox(prompt,buttons,title),其Buttons参数 11.7.2inputbox Inputbox(prompt,title,default),Input可以输入内容，而msg则只是提示,11.8 数组,11.8.1一维数组的声明：dim a(10) 11.8.2多为数组的声明：dim a(1,2) 11.8.3动态数组的声明： dim a(),redim a(25), redim preserve a(30),12 选择和循环语句,12.1选择语句 12.2循环语句,12.1 选择语句,12.1.1 ifthenelse语句 12.1.2 ifelseifendif语句 If.thenelseif.thenelseendif 12.1.3 selectcase Select case() Case 1 Case 2 case else. End select,12.2 循环语句,12.2.1do whileloop语句 12.2.2 doloop while语句 12.2.3 fornext For v=start to endstep Main body exit for. next,13过程与事件,13.1Sub过程 13.2Function过程 13.3事件与事件过程,定义： Sub 过程名（参数） 语句组 End sub 调用： 过程名 参数列表 Call 过程名（参数列表）,定义： function 过程名（参数） 语句组 End function 调用： 和内部函数一样,（1）function可以带参数，sub不可以 （2）function可以返回值，sub不能 （3）function可以直接使用，而sub则不可以（CALL）,文档对象：HTML文档中的每个元素都是一个拥有属性、方法和事件的对象 事件过程：当触发一个文档对象的某个事件时，该对象能够按照某种方式做出响应，但具体的响应过程需要由程序员写脚本代码实现，这种过程为事件过程。 构成：需要用sub定义 控件名称_事件名称,作业,将11-12章的实践指导具体实践，并传到个人空间。时间为下周2之间,实验1,（1）对静态网页遗留问题的解决 （2）对html,VBscript,过程和函数等的练习 要求：实现n*n计算与现实（n6） （3）申请并加入自己的主页模块： a:免费计数器 b:免费留言薄 c:免费聊天室 d:免费论坛,实验2 ASP基本语法,Request:form(post),querystring(get),cookies,收集信息 Response:write,redirect,输出信息 Server:mappath(P213) Session Application 包含文件（include和execute）,实验： （1）对request和response的掌握 做一个登陆页面，如果正确则显示欢迎，不正确则返回登陆页面。 （2）execute的掌握 在多个页面调用同一个图片,ADO对象连接数据库,*ADO是在OLE DB技术的基础上实现，包含3个主要对象：connection,recordset,command. connection三种连接方式(都以access为例) （1）通过ODBC连接（设置好） set cn = server.createobject(“adodb.connection“) cn.open “dsn=a“