网页设计的使用.ppt

网页设计的使用,Dreamweaver8,目录,1.网页设计的界面简介2.网页设计文件属性3.网页设计的站点设置4.网页设计的静态1与动态5.网页设计的背景音乐（即透明效果）6.网页设计的框架7.CSS样式的使用08.网页设计的后期制作,1.网页设计的界面简介,dreamweaver8的工作界面简洁、好用，具体由：标题栏、菜单栏、常用工具栏、工作区、属性栏和高级工具栏组成。各个工具都分工明确，使我们做网页更加轻松,2.网页设计文件属性,1.html网页中常用的超文本标记文件、“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括头部分（Head）、和主体部分（Body），其中头部（head）提供关于网页的信息，主体（body）部分提供网页的具体内容,1.HTML,2.网页设计文件属性,ASP是ActiveServerPage的缩写，意为“动态服务器页面”ASP的网页文件的格式是.asp，现在常用于各种动态网站中。ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。利用ASP可以向网页中添加交互式内容（如在线表单），也可以创建使用HTML网页作为用户界面的web应用程序,2.ASP,总结,html可以用来制作静态的网页，可以包含图片、文字、音乐、链接等元素ASP可以用来制作动态网页包含了html、脚本命令、COM组件ASP比html强大,3.网页设计之站点设置,站点包含了我们所有文件也是上传服务器的路径站点-新建站点-高级-本地信息-接下来自己设置建议：站点名称最好和网页的文档名一样,4.网页设计之动态与静态,动态网页是指使用网页脚本语言，比如php、asp、jsp等，通过脚本将网站内容动态存储到数据库，用户访问网站是通过读取数据库来动态生成网页的方法。网站上主要是一些框架基础，网页的内容大都存储在数据库中。当然可以利用一定的技术使动态网页内容生成静态网页，这样有利于网站的优化，方便搜索引擎搜索。,动态,4.网页设计之动态与静态,静态网页是指不应用程序而直接或间接制作成html的网页，这种网页的内容是固定的，修改和更新都必须要通过专用的网页制作工具，Dreamweaver、而且只要修改了网页中的一个字符或一个图片都要重新上传一次覆盖原来的页面,静态,5.网页设计的背景音乐（透明）,通常我们在一些网站上，会有一些音乐出来，但是我们看不到他的播放控制是在哪里，或者说他根本就没有播放控制，思考：他这个是怎么制作的看例题透明动画！桌面的透明效果,5.网页设计的背景音乐（透明）,这个就是我们今天讲的这个透明背景他的代码是embedsrc=005.swfwidth=800height=184quality=high,5.网页设计的背景音乐（透明）,这个的制作步骤是：插入一个表格-设置一个背景-把我们的flash插入到我们表格里-选中flash-切换到代码视图-找到他的代码中的,5.网页设计的背景音乐（透明）,找到在这个的后面回车下插入代码然后再找到,5.网页设计的背景音乐（透明）,在184后面空格一下输入wmode=transparentwmode=transparent,5.网页设计的背景音乐（透明）,然后保存-预览一下就好了这种办法是一种复杂的方法，教一种简单的方法插入一个表格-设置一个背景-把我们的flash插入到我们表格里-选中flash-切换到代码视图-找到他的代码中的,5.网页设计的背景音乐（透明）,在我们的184前面插入wmode=transparentwmode=transparent保存预览就行了,6.网页设计之框架,框架分为框架集和浮动框架2种，框架集适合做一些页面不是很大很长的网页，他的高度和宽度都固定了，不好更改浮动框架自由性提高了很多，适合很大很长的页面，浮动框架的长宽、大小都可以随意更改,6.网页设计之框架,框架集的页面情况以及新建的类型有很多种，这里就只介绍一个上方固定，下方固定的框架,6.网页设计之框架,这个框架集新建好了之后就是一个完整的框架了，这个框架分为四个页面第一个为top.第二个是main.第三个是bott.第四个是index使我们的首页更改大小的方法：窗口-选中了框架-在高级工具栏里面会出现一个框架-打开-选中框架的全部-切换到代码-里面会有一个代码framesetrows=80,*,80,6.网页设计之框架,这个代码表示我们的框架集上中下的高度，在当中设置你想要的高度即可那我们的浮动框架呢？怎么去设置？思考,6.网页设计之框架,在我们的设计软件里有两种方法，第一种：在插入-HTML-框架-浮动框架,但是这个有一个缺点不能在我们的设计页面插入，要切换到代码当中去设置第二种方法在代码中输入输入即可,6.网页设计之框架,如果我们的浮动框架小了那怎么去调整？选中我们的浮动框架-切换到代码中在设置了这个即可，这个width是宽度的意思，这个height是高度的意思，设置你们想要的参数即可,7.网页设计之CSS样式,1.CSS是一个方便我们管理网站的一个工具叙述：类、可应用于单元格一行、一列、一个表格等叙述：标签、死板的规则、只能使用在特定的标签上叙述：高级、设置链接的样式、鼠标效果,7.网页设计之CSS样式,类和标签的区别：类是自由身，标签是束缚了的东西这样说，类的应用更广，而标签只是在比较大的范围内才可以发挥出他的效果类的名称前面必须要有一个点（.）有了这个点，我们才能和他们不一样，做不同的事,7.网页设计之CSS样式,标签的名字，前面不需要点，他是一个固定了的名称，这就是比较死板的地方了，（比如一个表格里，有两个嵌套的表格，我们需要的效果是上面的表格有个下边框虚线，如果用标签来做，最后的结果是整个表格都应用了这个样式，但是我们用类来做的话，效果就不一样了，就能够达到我们需要的那种效果了）,7.网页设计之CSS样式,高级：专门用来对付链接的，有链接的地方就有他，是专门设置鼠标放上去的效果以及链接静态时的效果，分为两种，一种是特定的链接，一种是不特定的链接，他们两个各有优点，比如（我们的嵌套表格里的链接想和表格外面的链接不一样，我们就得用上特定的链接，但是有一点，特定的链接有一个名字，那个名字就是你的表格名字，设置了表格名字之后，就能使用了，名字的格式是：,7.网页设计之CSS样式,（“#表格名字然后是效果”）比如（#dha:link,#dha:visited）这就是那个特定的效果，如果你不想要特定的效果，全部都一样的话，具体设置是（a:link,a:visited）这个样式一设置，就全部的链接样式就一样了例题,7.网页设计之CSS样式,应用了CSS类的样式,应用了