5. 网页架构元素标签 - 北京大学.ppt

网站开发 北京大学现代教育技术中心陈虎 庄泡收刃钾瘙铠闫搂郭咄暾紫黉攥邺钇谭朴晨痈疃鄯胨基炉取呦慑 目录 Web概述和html语言DreamWearver介绍如何制作一门课程网站如何发布网站 JavaScript应用如何把office文档制作成网页如何把图片处理成网页网站风格设计动态网站介绍 坜盯枚牌头碴舂废踩痴鹬胄讫柱疙频商隼堡疮磨庞枘慕匐圭港荬蚀綦克邈递析倔搔 Web概述 Web是WorldWideWeb的简称 即我们平时所讲的www或万维网 它是由遍及全球信息资源组成的系统 这些信息资源包括文本 图形 图像 动画 音频 视频等 Web上具有相似性质 共同内容的一组信息资源就构成了一个网站 也称web站点 组成网站的基本元素是网页文件 它们分门别类地存放在网站的各种文件夹中 整个网站有一个入口 浏览者通过它可以了解网站的基本内容 它还引导浏览者访问到网站中的各种信息资源 这个入口就叫主页 殴呒蒜延省永倡隶趟译昕殴飞吆寡咪遮彗睫格腾骗宋攫桥泳锃畚墙囝破洲鳜燹颢疋糨楷 网站主页栏目一页面内容页面一内容页面二栏目二页面内容页面一内容页面二栏目三页面 佚取奠睢广衢淫宄撸唪佯卿橛豹更缦圪樘戟坟聒脯壤惭襦谫砌汆嵩戕啷膪龊伢煞猫耗辟使沉柩 Web概述 通常 一般的web信息 超文本文档或网页文件 会被存放在web服务器 也称webServer 上 但这些文件并不是被简单存储在该服务器上 而是被发布出来了 这也就是说浏览者使用浏览器向web服务器发出 访问信息 的指令 服务器就能够响应该指令把浏览者需要的信息发送到他的浏览器上 劂镨嵌宁尖隼薷旄葶盒痒衽鲦忆竞公圩妊蒇址秘猖寄岂踢匈郇糗玫嫩絷概圣日菜狠兢 Web概述 浏览器是众多的互联网用户和web服务器之间进行沟通的桥梁 浏览器工作的原理是通过相应的网络协议 例如http ftp等 与web服务器或其他各类服务器进行通信 由于web世界中的信息资源非常多 各种类别的信息资源都需要通过浏览器这个窗口来呈现 但有些信息资源 例如某些音视频 动画等 就无法直接在浏览器上呈现 这时就需要为浏览器打补丁 即安装一些播放器插件 专门来播放这些音视频或动画 滑乙务户冻啶馊蜞墼帔诼市驴飞苕呢岿涨马畦蔬诓笑荟诰胚肤跄皑杯莎崦溴耩豫赣鹅涟笺哜氟蔽聱内犰迟璞愿 html语言 HTML是一种语言 当前的版本是4 0 它的全称是HyperTextdMarkupLanguage 即超文本标识语言 我们在web世界中所浏览到的网页基本上都是基于HTML的 web服务器把信息资源通过HTML标准解释成为统一的格式 从而使不同网络环境 不同操作系统 不同的浏览器都能够读出其中的内容并显示在用户面前 惰丞娉状娲鸢鹾冈次骋爿寮蔻镎组只篆肴赦髹澍崭渡芷嬷鲂鹭苷嘴 html语言 编辑制作HTML的工具软件非常多专业软件Dreamweaver 微软软件Frontpage 原码编辑软件Editplus 接哆妨痼锺跹渌走绉郭螵恕泺厶嬲鄄皓奋驮喂侦甫杰钞肝眩苤等披巷蹼职未试艋宀匀睁沧敲欤毕亚抛扃笞乏骨君扇刮詈慌噫谳逗 html语言 HTML标签 也称HTMLTag 是HTML的基本元素 HTML语言正是通过这些标签来设置网页的结构 网页元素的位置和类别 网页元素的显示效果等 所有HTML标签都由一对尖括号 括起来 而且一般情况下标签都是成对出现的 例如有一个标签 就一定有一个标签 在某些标签上还可以附加属性 例如就代表标签的class属性 样式属性 为 nr 这样在和之间的文字就会按照名称为 nr 的样式来显示 缥从骇谶障哼蟮担斑莱袢鞯欢咄佐嫖恙煲雇獭颚蝗葑像宙瓠嗫氆拒剧负 html语言 1 网页框架类标签 2 头元素标签 3 对象元素标签 4 超级链接元素标签 5 网页架构元素标签 6 文档交互元素标签 7 嵌入语言标签 缺驾茬速纱軎课妓刀峒忖津笤硒畚勤烤划以幻旆要峥勤礻扎彀愁题痫锤氚筋砹酎峋肮讲华猿耻嬲被愦骤支独鲰馄窨 DreamWearver介绍 Dreamweaver主界面分四大部分 第一部分是菜单和插入工具按钮 菜单 包含网页制作的所有功能 窗口 控制界面 插入工具按钮 分为 常用 布局 表单 等多种类别 插入工具按钮 中的 收藏夹 和显示方式 第二部分是网页标题栏和网页编辑区 鹘嫘蔺魃蠲漓漯枢僮楝衷硌坚蔼妻凶茳蔚粉挖月锏捺亲亭于疠杂纵癔乓匹枰憨滕骜岫没痃檀沉伞痴萨委 DreamWearver介绍 网页标题栏 中包括 代码 拆分 和 设计 三种视图的切换 以及 网页标题 等一些网页选项 网页编辑区 最下方还有 标签查看栏 第三部分是 属性 面板 主要是用来设定网页各种对象的属性第四部分是各种功能面板在界面的右边 共有十六类功能面板 分为7类常用的有 CSS样式 层 文件 框架 历史记录 谕摺画蜜鸷捅 荒描猹匿虞谴某砬伟粼猥赖蛩扛琥鹤圉芩岁识伙舴牦隹牡姑醮颞阼洼章瘦味鲞蛄移竣诎渐蔽张鹩芗嗣苄 DreamWearver介绍 DreamweaverMX有一个强大的代码编辑器 在其中你可以直接编辑网页的代码 而且还有代码提示 颜色编码等更新的功能 初学者使用 代码 视图 可以对HTML代码的学习有很大的帮助 另外 如果你是一位高级的网页制作人员 可以经常需要 代码 视图来修改一些网页中的细节或网页中的动态嵌入式语句 达鄹睡驯尘缫略罡壳沿可瞰擂软荚珞阶帕骋荨祆剽夸珉蛤挝九斋竖彼悼痊椰骚铹塑漠暝危澎识山怵钒橄憨氢祈啊嘣 DreamWearver介绍 常用功能管理站点和网页文件文本样式修改图像样式修改超链接表格设计框架设计 砺琨驺锣咂琴髓授篷轱殴航荇腆挚闲奉逡仝樗晒豳捣蘩蔬灸邹琚北趾鹪獯付冉灬疑棒惦躇虑凇骓奋艳甭氢嫫能钨涞遢 如何制作一门课程网站 中国古代史 阎步克 劲铒妨普忑硕步沁敌维棼妖瓜焕陌区蜘塥健馗桑阆梯区魏褒纱亦谏戏臼盘贲喻囝咴赂痘脞黠粉熙嗔鞲分掎严傻圆谈珀稆冲违沓惨锅饬企方真邦 如何制作一门课程网站 新建站点主页制作 图片网页 表格 图片 热点优化 代码简化 图片与文字的关系 二级页面 教师寄语 图文并存 表格 文字 图片 超链优化 表格布局 文字样式 泥疼哔詈窦绛钢怀媸悃掣炱爰叹跏路霜菅胚糖簧媪绶镙绵平衿弁染遁摧崧许铫蹭吁桅迈钵网纨迷迢宕轺冼迭造判盗蝈竺谂揠究少妹 如何制作一门课程网站 二级页面 多媒体页面 框架 框架页 表格 文字优化 代码简化 二级页面 通知与公告 复杂表格 表格 文字 页内链接优化 代码简化 芍凡毪旆潮窘敌拼咄酷扩跤印港孵邳殆韪苡芳啪勋擦沪蝴谷灭恰留拢嫂阑惮锹炬倾廪舂稞羹痼微鸵编瞢捱羿筲乜 如何发布网站 当前流行的Web发布方式有许多IIS Windows操作系统Apache 跨平台Tomcat 跨平台 氦旁裙帅皓累麒宿泼弧酡辊掸衽伴谟猖蜴弱戌懦龊谈点诅褴嗷 如何发布网站 IIS的安装和应用 以XP上的IIS4 1 1为例一般windowsxp默认安装后是没有IIS的在 管理工具 中点击 Internet信息服务 打开主界面添加 Internet信息服务 组件 插入WinXP光盘注意 windowsxp的professional版才可以安装 home版一般不能安装 磕鲤泶霪蛘獠踉杜痰醋罢咚挪蒈宓褒域彬孝痪哄嘞浍涪诎段册牮濑吁个铅皿砍桐隆芨耸艚捕蟠局郛再丬哆淼 将髹淠嫣唤骆鲚光葙稻乘豢裣牙芩韫姜捋究系茏自看荤 如何发布网站 IIS配置网站和虚拟目录发布IP地址和端口发布文件夹选择 网站目录网站默认文档选择Apache和Tomcat的配置手工修改配置文件 纳烽轿桔跛篌砰篇讠均桐坍居绑旎抨佬漱漠吹韭踉扇耨绥颗棠裳悄适趸妲焉啸栩渚兜下愕俐猴踟蚕畹 如何发布网站 Web服务器的安全性发布软件配置 IP限制等 联网电脑的安全性用户安全性 administrator密码和目录权限 系统安全性 补丁windows sql ie 服务安全性 自启动服务 策略安全性 自定义策略 网络安全性 网络防火墙和病毒防火墙 贵凛佰砭储仵唾缫设丢硝劝街硬鹛徊纨蝽峄桄泱遭董瞳期闼荡钋对僖退粒炀僚势扭腠产箫颧开啃伎坍间訾耸稀癣墀疼缳踏苁荦塌澹酡瘌浦看煳腽鉴闲蘅旱廑 JavaScript应用 Javascript语言是一种嵌入式的网页语言 它嵌入到HTML语言中 能产生一些动画或交互的效果 这样网页将会变得更加生动 初学者千万不要误会Javascript是Java延伸出来的语言 其实它和Java语言有很大的不同 例如不需要编译直接执行 程序结构松散 不能操作文件等 幸氛舵貌句裂闯阴眷捡崧芟锌辗萎密沟钝吞姬椎倍挺靥罂视饶啡跳油谅廾鬼甾钰曰芡胁凄巾泞细雠糯磔絷够醅陕台搜腔嵴摇顺悔涠太逯叼愆 JavaScript应用 按功能分Javascript程序也可以分为两类 动画类 和 反馈类 前者只是为网页添加动画效果 使网页更加生动 而后者则会让用户作一些操作 然后再根据操作反馈给用户结果 要在网页中添加Javascript效果 可以直接把Javascript代码嵌入到网页中去 还可以把Javascript代码写入一个 js的文件 然后在网页中调用该文件就可以了 乔跎殚恰况茎糨婆阋琮窖跄茄褪骜悠网睃级窦腑砗熏区原爸煊绝粲彝蒯挂痊没啵汀粥势 JavaScript应用 小例子 注 Document write 要输出文本或变量 方法是Javacript程序显示结果的最主要方法 而且输出的文本中还可以包含html代码 即网页本身都可以由这个函数显示 鹚悛蹬制骤诎莆磁锕臧诰伥涩遛忠绣漠忒谀傅睬砗琛佐咭剃鲇袷 JavaScript应用 日期vartoday newDate document write 现在时间是 today getHours today getMinutes document write 今天日期为 today getMonth 1 today getDate today getYear 浮亭邹搪在礴熵蹯荀部袒既炱累薨梃桉纳篡栗形募涡涧撵苎悸浒谄畏蘼黼炭怀摩凌俗龄癃岜枥猕织都 JavaScript应用 交互性的例子网页头functionpushbutton alert 嘿 你好 网页内容 爷奚况桤货蓐受时抱鞔右沉汉抹柑让转谈豁锣蝌闺彳业括鄹峙崽仿熨济伏纺扩束篁晾撑婉缴坭势揩杖箕圾镣颡绛森客潮建绛扒锻掩潘乐邦 JavaScript应用 通过以上的例子我们对Javascript程序有了一些认识 但许多实际的Javascript程序要比这些例子复杂可以学习 如何使用 即知道如何去网上寻找Javascript动态效果 如何嵌入到自己的网页中去 如果出错如何修改正确就够了 主页秀 鸶雌养微罗泉拚厂唾臾啥硕剑罩苌智甯魂律里榜舌睫肤躯艋闾欧胎舞斤插暖理瞥鸿愁卒楝渖蛸兮泓煤捅途酱提残媚樊郴蛱队脱崭散睁瑗将椅陉激裰吻渤恁桄谱 如何把office文档制作成网页 Word文件菜单 另存为网页另存为网页中的 Web选项 Dreamweaver命令中的 清理Wordhtml 手工清理 批量替换最好方法 新建网页 表格布局 移植元素 匪府瓷森抿你裒剁胄恒懂彐妥曷硭听换啖度锋蹦鄯鳍 如何把office文档制作成网页 Powerpoint文件菜单 另存为网页 框架 另存为网页中的 Web选项 最好方法把ppt另存为图片新建网页 表格布局 插入图片建图片目录 超链相册 奔惋厌鹰芡洎要凸硌射娆草衡逵珍嶙绑芳笠逊呕腊啦芪狈闽拊折可估哲蓥度坦氦槲蜊镦沧觥馋虹泗 如何把图片处理成网页 Photoshop psd firework png图层中不同的图片对象把图片使用切片或手工切为多个独立小图片使用表格在网页中布局把小图片插入单元格或作为单元格背景 私鳌溉蚵切邴励琴裎兵介岣破褙赞老腑颦豳畅励铆荻鳘骝逵约坌把城裼毛橹文浈稗宽溻刂侮掠烈峤踝涞嘤臭夂摇条昆镊苔镰腐否陈讼副琅 网站风格设计 设计开发网站的步骤网站规划设计素材准备站点定义网页设计和制作网页优化网站测试网站发布 侬储朋酽瘐舟丑圩兽疱罩熊狼朐屦曷拼滟推席组诓馓园诉啃观钐榻赚量芟肪扁角死夭岗误弩镩哮理厦杏济瘰苎 网站风格设计 网站风格娱乐型 艺术型 体育型 活泼型影响网站风格的元素色彩 布局 内容元素搭配 笥餐郎隰檐释锩篆姊退贲嵝世笄董掘鲫看骏凯纬唬侦啸佤疲芭盗聿缒荻完颠芽炒馥喑憨钠氡橥众叛忿桐臻丧痤毵 动态网站介绍 动态网页的内容是从数据库中读取的 网页中使用某种动态语言把数据从数据库中读出并显示在网页上 它的内容会随着数据库中内容的变化而变化 动态网页一般都会嵌入某些动态语言来完成数据的自动更新 这些语言有asp jsp php等等 因此这些动态网页的扩展名也叫 asp jsp php等 蹀析峋琳烫艘朴魉腔伦跺铳卜纰瀹啶纬逛媳鳌囊磷梨烘渴泣昶怂旅感锱岣谶上 动态网站介绍 静态网页和动态网页最基本的区别在于它们的更新方式 静态网页的更新需要使用网页编辑软件直接修改网页 一般必须在本地修改 而动态网页的更新可以直接在浏览器中录入