1、网络基础&网页设计,计算机网络工程系黄君羡,课程安排,110周授课科目:网页设计(占总成绩:50)科目特征:操作性较强,运用广,讲究创意。软件环境:Dreamweaver、FrontPage、photoshop、firework等教学方法:案例教学教学要求:认真按时完成课外设计类作业。考核方法:交设计作品(21),11周19周授课科目:网络基础(占总成绩:40)科目特征:理论性较强,与网络基础运用结合紧密软件环境:Windows 2003 server教学方法:多媒体课件教学教学要求:认真听讲、课后注意消化考核方法:期末闭卷考试,网页设计,以DreamWeaver为主要工具,讲述网页设计方法,
2、中间将穿插一些必要的程序设计语言: HTML(HyperText Markup Language ):超文本标记语言 JavaScript:非常流行的一种教本语言 还将穿插一些必要的图像处理软件: Photoshop、Firework 要想提高静态网页设计水平,视个人情况,可以完整自学HTML 、 JavaScript以及自学其它一些重要软件Flash(学院有开设选修课程),目录,界面属性 页面设置 文本编辑 图像和多媒体 表格 框架 网站上传与下载 。,DreamWeaver MX 2004,界面熟悉,网页设置,基本操作文件的新建与打开网页文件保存不能用中文名!网页的编辑与制作网页的预览利用
3、文件面板编辑、管理站点。推荐给初学者的操作步骤,网页设置,设置页面属性1、设置页面字体编辑字体列表注意一次只能添加一种字体2、设置页面字体大小 (单位:像素px)作用:使得页面字体大小不会因浏览器不同而变化3、设置文本颜色单位:RGB(16进制)或英文(如:red等)4、设置背景颜色5、设置背景图案(平铺效果)小图案背景图片的处理:讲究对称6、设置页面边距 设置超链接属性1、颜色(链接颜色、已访问链接颜色、活动链接颜色等2、下划线样式选择,网页设置,设置网页标题 编辑网页头部内容插入作者插入关键字-让搜索引擎收集,增加网站知名度插入描述插入刷新-实现页面跳转 使用标尺和网格辅助设计 查看编码(
4、HTML/DHTML)语言标记: 首部 主体 首部:通常包含作者、关键字、标题(TITLE标记)、刷新、教 本、CSS等通常不在页面中显示,而是隐藏在页面中。,网页设置,主体属性:bgcolorbackground :样式标记(定义CSS样式表)CSS技术:主要作用是规范网页对象属性,丰富网页对象的属性使其有更好的表现力,使得网页在不同的浏览环境中显示都不会改变其布局和显示效果,简单的说就是力争做到所见即所得。,文本编辑,字体属性(font-family)通过字体控件制作一个显示不同字体的网页 标题属性(H1,H2H6共6级标题)通过标题控件制作一个显示不同标题的网页使用前一定要在页面属性里先
5、定义标题字体大小 属性(应用样式),否则文字会变形 字体大小属性(font-size)通过字体大小来制作一个不同大小的网页文字一定要设置大小属性 字体颜色属性(font-color)通过颜色属性来制作一个有不同颜色的网页!颜色是最好的文字修饰方法! 设置粗体(B或strong标记)和斜体(I或EM标记) 设置文字的对齐方式(align)居中、居左、居右,文本编辑,分组、分段、分块、分行显示文本分组:组标志分行:中断本行标志,文本将在下一行输出。分块:块标记,可以包含一行或者多 行,甚至可以是一行或者多行的一部分分段: 分段标志,对文本进行分段之间关系: Div P SPAN BR 如果他们相同
6、属性的值不同 ,则显示效果按照就 近原则显示。 分行与分段的操作分组:通过鼠标选定多段文字分段:回车即可分块:通过鼠标选定多行文字或其中一部分分行:回车时同时按shift键; 它没有属性,文本编辑,设置段落缩进 设置项目符号列表(无序列表UL)-系统只提供4中图案 项目1项目2项目n1、通过图片设置图像列表(虚假列表)注意图片大小及其格式2、通过CSS技术设置图像列表(真正列表)同样注意图片大小及其格式注意操作步骤 设置编号列表(有序列表OL)-系统只提供4中列表1、通过输入其他序列号制作列表(虚假列表)2、通过CSS技术设置编号列表(真正列表),文本编辑,设置文本的超链接() 链接属性(hr
7、ef) :超链接的目标URL 目标属性(target):超链接的打开方式 _blank:在新窗口中加载目标URL _parent:在父窗口中加载目标URL _self:在当前窗口中加载目标URL _top:在框架环境中运用(以后再讲) 插入水平线(HR) 设置粗细(高度)单位:像素 设置长度(宽度)单位:像素(最好不要用单位) 设置颜色、阴影、对齐方式等。 插入日期 插入特殊字符 查找和替换,文本编辑,作业:制作一个网站,将本章所有作业链接在一起,并上传到互 联网。 交作业的方法:在论坛中跟贴,提交自己的班级姓名学号和网址,图像和多媒体,图像不仅可以用来修饰网页,还可以用来表达网页的内容。在网
8、页中使用图像主要应该考虑两个方面的问题,一是下载速度的问题,这也是首要问题,如果图像文件比较大,下载时间就比较长,特别是对于传输速度较慢的网络,这种网页显然没有人愿意浏览。第二个问题就是图片本身颜色值问题,图像颜色越丰富则图像文件就越大,因此最好采用JPEG格式、GIF格式或者是PNG格式的图像。 几种真彩色图像类型:JPG 适用于颜色较为丰富的图像压缩GIF 适用于颜色较少(小于256色)的图像压 缩,并允许透明,也可以是动画PNG 适用于矢量图像,并允许半透明,图像和多媒体,一、在网页中加入背景图片1、规则图片处理较小的图片即可(如纹理效果图)2、复杂图片处理应与网页页面像素相吻合 二、在
9、网页中插入图片1、考查所选择图片所需格式2、考查所选择图片的大小3、设置图片属性设置图像名称(name属性)设置图像大小(width、height)选择源文件(SRC)设置替代当图像无法显示或加载时显示的文字优化图片裁切图片,图像和多媒体,4、设置图片超链接对整个图片设置超链接设置图片区域链接(P142)5、对大图片的处理方法 通过Photoshop或者Firework切分优化6、设置图文混排图片与文字在一行上文字环绕图片效果(左、右环绕) 插入”图像占位符”-占个位置,为将来插入图像用 插入”鼠标经过图像” 插入”导航条”-分为横向和纵向,图像和多媒体,插入Flash 循环设置 自动播放设置
10、 品质设置 设置参数 插入Flash按钮 插入Flash文本 插入Shockwave -一种交互式多媒体 插入Applet -Java小应用程序 插入ActiveX控件 -IE提供的一些组建,如media player等 插入声音和视频 设置网页背景音乐 在头部内增加下面一行代码: ,图像和多媒体,作业:制作一个网站,将本章所有作业和第7章部分作业链接在 一起,并上传到互联网。 交作业的方法:在论坛中跟贴,提交自己的班级姓名学号和网址,超链接,一、超链接的概念(.)超链接表明了网页文件之间的相互链接关系,使用超链接管理器可以清楚的地看出各文件之间地链接关系,并且可以用来检查站点中网页链接是否正
11、确。它分为文本超链接和图像超链接,其主要形式有: www超链接 用于访问WWW服务器。这是最常用的一种方式,在WWW服务器中存放着大量的信息,特别是Web数据库技术的出现,弥补了WWW数据库信息资料的空白。如:HTTP:/ FTP超链接 用于访问FTP服务器,FTP一般用于放置一些供浏览者免费下载的软件、数据等文件。如:FTP:/,超链接,BBS超链接 在BBS上可以浏览别人的信息,也可以发布自己的信息。BBS内容很广泛、如:休闲、娱乐、求职信息、新闻等。关键是还提供一个网上交流的产所。它有两种方式:HTTP和TELNET,例如:http:/和telnet:/ Email超链接 Email超链
12、接的URL必须使用Mailto协议形式如:mailto: TELNET超链接 用来访问TELNET超链接,如:telnet:/,改方式的好处是浏览者不必下载服务器上的内容,而是直接将自己的计算机变成一个终端对服务器进行操作。其它文件超连接:用来提供下载,如:http:/ 习题:1、在b.htm中链接e.jpg2、在c.htm中链接d.jpg3、在e.htm中链接d.jpg 网络地址绝对地址:协议头:/域名/文档路径/文件名。相对地址:只包含文档路径和文件名的地址。 锚点链接:网页内部导航链接(P154)!需要先定义锚点(标签)!注意看操作方法,超链接,二、文字图像链接链接到本地站点(内部链接)
13、!看不到盘符的链接!链接不允许出现盘符!链接到其它站点(外部链接)!应该包含协议头信息!页内链接文件下载链接指向下载文件跳转菜单(p157),超链接,作业:本章所有作业,表格,一、在网页中插入表格:表格标记 :行标记 ():单元格标记 二、表格属性设定表格大小与页面大小相关 一般760或者980宽度(为什么?)表格的边框与对齐方式表格背景颜色与背景图片 背景图片有什么要求?为什么?,表格,更改单元格:增加行、列,删除行、列、合并、 拆分单元格、设置行高、列宽 HTML中的表格特征:只支持标准规范的表格,不存在 类似于Word的强大表格处理功能,就单个表格而言,其倒相似于电子表格Excel。网页
14、表格布局:先划分大块在逐步细化(先整体再细节)划块原则:分行或分列直到可以细化到细节为止,表格,三、布局后表格的进一步处理设置单元格的背景颜色、背景图片单元格中嵌套表格,进一步设置该区域的布局!使用表格嵌套可以对局部数据进行处理 而不影响全局结构! 四、单元格布局(通过插入表格(表格嵌套)后的进一步处理设置行的背景颜色、背景图片设置单元格的背景颜色、背景图片 在单元格中输入数据和图片 !利用跟踪图像设定网页布局!,表格,五、补充作业:制作网上网页布局习题。利用网页跟踪图像和抓图设计出一下站点的主页1、学院首页2、系首页3、网易首页4、hao123首页5、太平洋首页,网站的上传和更新,一、网站的
15、上传1、通过浏览器2、通过一些FTP软件 二、网站的更新,框架,作用:将浏览器窗口(网页)划分为多个窗格,其中每个窗格中含有一个网页。框架在网页设计中能起到很好的网站导航功能。 相关标记:Frameset Frame NoFrame 框架集标记 设定窗口划分为几行或几列,此标记可以嵌套 框架标记 设定此框架的一些属性:框架名称、框架网页、边框、 滚动条、高度或宽度等 3、设计嵌套框架如果有n个方格就有n个 4、保存框架文件数n+1 5、在框架中的超链接,框架,6.Noframe: 如果在浏览器不支持框架情况下,可以通过此标记显示适当消息,要显示的信息放在他们中间。如:该页面含有框架,但用户的浏
16、览器不支持框架。7、大作业:将前面几章的作业利用框架做成一个作业站点。,框架,浮动框架:这种框架通过表格可以放在WEB页的任何位置。格式: 关键点: name属性 一定要用表格嵌套 设计时不可见,只有在浏览器中预览才能看到 网页的链接设置(链接到框架,目标为name),CSS,按照课本自学,并把习题做完。,字幕标记,MARQUEE(字幕标记) HTML提供了一个字幕标记,可以用来滚动字幕。 格式: 滚动内容(文字、图片等) Behavior:指定文本动画的性质,其取值为:Scroll、Slide或Alternate Direction:指定文字移动的方向,其取值为:left 、Right、UP
17、或Down Height:整数,指定字幕的高度,以象素为单位 Width:整数,用来指定字幕的宽度,以象素为单位 Hspace:整数,指定字幕的外部边缘与浏览器窗口之间的左右边距 Loop:整数,用来指定字幕滚动次数,也可以设置为关键字Infinite Scrollamount:整数,用来指定文字每次滚动所移动的距离(象素) ScrollDelay:整数,指定滚动运动之间的时间,以毫秒为单位 Vspace:整数,用来指定字幕的外部边缘与浏览器窗口之间的上下边距 例子:Marquee.Htm,字幕标记,设计鼠标经过字幕时字幕停止滚动,鼠标离开时继续滚动效果注意:每个滚动字幕的ID(变量名)应该不同,网页特效应用,特效的使用1、可以把特效代码(javascript)拷贝到头部2、基本读懂代码,去除无关代码,例如:链接到外部站点的部分修改相关参数,使得符合自己需求 一些特效工具。网上很多。,temp,设置段落缩进,