第一讲 网页设计与网站开发(48)

1网页设计与制作愿大家开心学习、学习开心！2自我介绍•任课教师：乐小燕•电子邮箱：[e-mail]•网络综合平台：《网页设计与制作》•注：以登录教务系统的用户名和密码登录。3思考•网页设计•网页制作•网站设计•网站开发•Web开发4课程特点•“信息技术水平考试”的指定教材。•涵盖的内容广泛，知识实用性强。•可参加“网页设计技术证书（中级）”的认证考试。•远程考试网站：课程结构•第1章网页设计与网站开发基础（第23章网页制作的流程）•第2章HTML基础•第17～22章DreamweaverMX2004•第4章ASP动态网页制作基础（第3章JavaScript在网页中的应用）•第5章数据库在网页中的应用•第6章PhotoshopCS2基础知识•第7～11章FireworksMX2004•第12～16章FlashMX2004乐小燕北京理工大学珠海学院6如何学？•希望和要求：上课要认真，上机要投入。课后要勤思考、勤动手，多多上机实践。要带着任务、目的的学。要多看书、多交流，会自学。上课要积极主动。7课程安排•一共48学时，包括32学时理论教学和16学时的上机实践。•最终期末成绩＝40％的平时成绩＋60％的笔试成绩•40％的平时成绩＝11％（考勤和课堂表现）＋14％上机练习＋15％大作业8总作业安排•每次上机必须在指定时间结束之前提交当次上机布置的上机练习，不允许迟交。•大作业：1.设计一份网站的策划书。2.运用Dreamweaver及其他技术和工具设计开发网站。（要求有动态网页和数据库设计，如论坛、用户登录、留言板等）3.网站完成后，编写一份说明书（说明网站的主题、特点、功能、主要技术等）。4.以个人或兴趣小组（3人以下）的形式完成。9第一讲网页设计与网站开发基础网页设计与网站开发1011121314•了解有关网络基础知识•了解网页中的基本元素•了解网站的基本结构和网页布局•了解网页的开发语言、制作工具及美化工具•熟悉网站制作的基本流程学习目标151.1网络基础知识•网页（又称页面）•万维网（WorldWideWeb）•浏览器（一种工具）常用的浏览器有：IE、MozillaFireFox、傲游（Maxthon）、NetScapeNavigator网景浏览器、腾讯TT、GreenBrowser、Opera、360安全浏览器等16IP地址•IP地址（Net-ID＋Host-ID）：由32个二进制组成，分四组，每组间用小数点分开。主机号网络号001主机号网络号01主机号网络号011组播地址0111保留地址11118162431ABCDE17IP地址的分类可表示的网络号数可有的最多主机号编址范围A126167772141.0.0.1～126.255.255.254B1638466534128.0.0.1～191.255.255.254C2097152254192.0.0.1～223.255.255.254181.1网络基础知识•Internet域名：（计算机名.网络名.机构号.最高域名）public.tpt.tj.cnDNS（域名解析系统）域名DNSIP地址域名的结构国际顶级域名分为三类:•国家域•国际性的通用域:.com.org.net.edu.mil.gov•国际域：真正具有国际特性的实体,如国际联盟、国际组织等。e.g.int中国瑞典英国法国德国日本加拿大cnseukfrDeJpca20域名的结构我国域名体系分类别域名和行政域名两套：•类别域名：.ac.com.edu.gov.net.org•行政域名：按各个行政区划分，如.BJ.SH.CQ211.1网络基础知识•统一资源定位器（UniversalResourceLocator，简称URL）协议名＋Web服务器地址＋文件在服务器中的路径和文件名•通信协议：包括HTTP（超文本传输协议）、FTP（文件传输协议）、Gopher（Gopher协议）和News（新闻组）等。221.1网络基础知识•HTML（HyperTextMarkupLanguage，超文本标记语言）•表单•超级链接•导航条•发布，也称为上传或上载。23表单实例24导航条实例251.2网页中的基本元素•文本字体，字号，颜色，底纹和边框等格式•表格•图像和动画•声音和视频•链接标志•表单•导航栏26实例1网站Logo导航栏文本27实例2网站Logo导航栏动画广告动画超链接按钮链接文本链接简单表单28实例3图像按钮背景图像291.3网站的基本结构和网页布局•网站的目录结构•网站的链接结构•网站布局301.3.1网站的目录结构建立目录结构的一些建议：1．不要将所有文件都存放在根目录下。2．按栏目内容建立子目录。3.不要使用中文名字的目录名。4.不要使用过长的目录名。5.尽量使用意义明确的目录名，尽量做到“见名知意”。6.目录的层次不要太多，建议不要超过3层。311.3.2网站的链接结构树状链接结构321.3.2网站的链接结构星状链接结构331.3.2网站的链接结构混合结构341.4网站布局－基本元素网页尺寸351.4网站布局－基本元素整体造型361.4网站布局－基本元素页头文本图片371.4网站布局－基本元素页脚381.4网站布局－基本元素多媒体视频391.4网站布局－基本元素1.页面尺寸2.整体造型3.文本4.图片5.页头6.页脚7.多媒体401.4网站布局－方法1.纸上布局法2.软件布局法411.4网站布局－技术1.层叠样式表的应用2.表格布局3.框架布局421.4网站布局－色彩搭配•主要内容文字用非彩色（黑色），边框、背景、图片用彩色。•不要将所有颜色都用到，尽最控制在三种色彩以内。•背景和前文的对比尽量要大，绝对不要用花纹繁复的图案作背景。431.4网站布局－色彩搭配•注意色彩比例。越是鲜艳的色彩越少用，所占比例一定要少。高亮度不合适大面积出现，最好以很少的比例出现。•注意对比色的选择。要避开“灰”、“邪”的配色，要寻求色彩、明暗、饱和度三者间至少有一个是统一的。44色彩比例45464748对比色——不和谐49对比色——不和谐50对比色——和谐511.4网站布局－版面结构•“同”字形结构•“国”字形结构•“匡”字形结构•“川”字形结构•“三”字形结构……52“同”字形结构实例53“国”字形结构实例54“匡”字形结构实例55“川”字形结构实例56“三”字形结构实例571.5网站的开发技术和语言1.超文本标识语言（HTML）可扩展标记语言（XML）2.动态网站开发技术和语言•PHP•ASP（VBScript、JavaScript)•JSP（Java）•ASP.net（C＃）58CGIASPPHPJSPASP.NETJ2EE59ASP（ActiveServerPages）•微软公司推出•服务器端：Windows2000+IIS、Windows98+PWS；客户端：普通浏览器即可•特点：将VBscript、或JavaScript嵌入到HTML中。•优点：简单易学、容易上手；缺点：不能跨平台60ASP简单示例61PHP•RasmusLerdorf1994年提出，经过其他人参与，共同开发而成。•服务器端：Unix，Linux，或者Windows操作系统下；客户端：普通浏览器。•优点：免费、开放源代码；缺点：缺乏大公司的支持。62JSP（JavaServerPages）•它是由SUN提出，多家公司合作建立的一种动态网页技术。该技术的目的是为了整合已经存在的Java编程环境（例如JavaServlet等），结果产生了一个全新的足以和ASP抗衡的网络程序语言。•JSP是将Java程序片段（Scriptlet）和JSP标记嵌入普通的HTML文档中。•优点：跨平台；缺点：复杂难学631.6网页制作工具1.FrontPage2.Dreamweaver3.VisualStudio.net4.MyEclipse641.7网页美化工具•图像处理软件1.Photoshop2.Fireworks•动画制作软件1.FLASH2.UleadGIFAnimator3.UleadCool3D651.8网站制作的基本流程•网站定位1.网站的主题2.网站的名称•搜集和整理资料•网站的整体规划1.总体设计2.网站的栏目设计3.网站的目录及链接的设计4.数据库设计661.8网站制作的基本流程•选择合适的制作工具•制作网页1.首页的制作2.其他页面的制作•测试网页•上传发布网页•网站的宣传与推广•网站的反馈与评价•网站的更新与维护67综合实例－《七彩靓衣》网站制作流程1.网站的定位主题：受先进的交互软件与高性能的硬件服务设施支持的、运行于INTERNET中的反映服装行业的、BtoB型大规模电子商务平台，是具有权威性的大型服装专业网站。名称：《七彩靓衣》2.搜集和整理资料68综合实例－《七彩靓衣》网站制作流程3.网站的整体规划•制作中文、英文两种版本•实现BtoB电子商务功能•网站实行会员制，注册成为会员才能享受服务。•在网站中建立社区，能娱乐、购物和交朋友的地方，吸引更多的人浏览•加入一些知名的友情链接，如PECC（中国太平洋经济合作组织全国委员会）69综合实例－《七彩靓衣》网站制作流程4.栏目设计服装栏目、服饰栏目、面料栏目、辅料栏目、模特栏目、社区栏目、网上学校、信息栏目、管理栏目、电子商务、代理服务、网上超市、网上办公室、合作项目和集团介绍5.数据库设计采用ADO技术和SQLServer来设计数据库70综合实例－《七彩靓衣》网站制作流程6.选择工具选择Dreamweaver8、Fireworks8和Flash8采用asp技术，html和VBScript语言7.制作网页8.测试9.上传和发布10.更新和维护