网络基础&网页设计

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