网页设计总结

网页设计总结

网页设计听课总结

网页设计的阶段性课程：1、规划阶段（网站策划）2、设计阶段（网页美工）3、实施阶段（网页制作）

详细流程：站点策划、构思草图、美工设计、图形制作、脚本编程、图形页面整合、测试发布

从创建站点开始（学会搭建并定义本地站点）

规划站点结构的原则（用文件夹来保存文档、使用合理的文件名称、首页名称、将本地和远端站点设为同样的结构）搭建自己的网页文件夹比如（images、midea等等）创建站点文档（添加文件和文件夹、文件的管理）HTML代码的基本结构（头部、主体）：….

…

设定meta内容（通用头元素的设置、添加meta元素。设置关键字和描述文字、刷新网页设置）

设定页面属性（标题、背景图像、背景色、文本颜色、边距）添加文本（插入特殊字符、设定文本属性、改变字体和尺寸）换行快捷键：enter和shift+enter（br式回车紧凑型）网页支持的图像格式：gif、JPEG、png等

图像在网页中自动变形后，可以按“重新取样”后改变图片的大小

底部水平线修改颜色：点击快速标签编辑器修改源代码即可（如：color="green"）插入flash动画、flash按钮与文字、flash图片查看器、flashpaper文件插入javaapplet元素（源代码：…..）插入交互图像（翻转图片和导航条）

JavaScript脚本语句：….

设置滚动文字属性：在滚动文字前加上代码滚动方向是：direction="right"滚动速度是：scrollamount="3"延迟速度是：scrolldelay="100"鼠标指向时停止滚动命令：onmouseover="this.stop()"鼠标离开时开始滚动命令：onmouseout="this.start()"

在滚动文字结束代码的最后写上：

例如：网页链接：绝对路径（）

相对路径(相对于同网站下的链接b.htm)

根路径（\\a.htm）

内部链接、外部链接、锚链接、Email链接、链接的目标窗口、图像的超级链接、热点链接的源代码：邮件链接：（mailto:邮件地址？subject=网站意见反馈&cc=邮件地址）例如：mailto:xxx@163.com?subject=网站意见反馈&cc=xxx@163.com

锚链接的使用方法：先在头部抛锚，然后在页尾链接到锚点（在目标处写：#top）源代码如下：返回头部

图像的热点：在一张图片的不同地区选择新的链接。

脚本链接：例子：关闭窗口的链接：JavaScript：window.close()

表格的应用：新增表格、表格的属性设定

学会用fireworks切片，并且在Dreamweaver中导入fireworksHTML并调整表格的操作Html源代码表格:行：单元格：大表格制作用“像素”，小表格用“百分比”表格的绘制：（绘制表格、绘制单元格）扩展、标准、布局快捷键：ctrl+：放大ctrl-：缩小做好切片及排版

制作表单：（什么是表单？客户端填写表单（提交反馈）服务器端处理表单、加入空白表单、设定表单属性）

表单动作：（表单内容发到邮箱）mailto:xxx@163.com&cc=xxx@163.com文本域、单选按钮、复选框

源代码：（网页中的表单元素代码很重要！）制作表单使用表单插入列表、下拉菜单、插入文件域、隐藏域、跳转菜单列表html源代码：北京上海南京济南聊城深圳广州厦门

菜单的html源代码：

<1616-2122-2727-32>32

文件域的html源代码：提交：重置：图片域的html源代码：

跳转菜单的html源代码：

新浪百度网易

跳转菜单的源代码调整：增加指向键后，要去掉当初源代码中的：onchange="MM_jumpMenu("parent",this,0)"自动指向代码

CSS(CascadingStyleSheets)层叠样式表（控制页面中的每一个元素（精确定位）、对html语言处理样式的最好补充、把内容和格式处理相分离，减少工作量）添加层叠样式表的方法：

1、直接在标签内定义CSS实例

2、添加在html的里：

3、链接样式表（最适

合大型网站的css的样式定义）样式的类型：html标签样式：

选择符{属性：值}h3{font-family：arial}h3:选择符

（Font-family：arial）：定义的样式font-family：属性arial：属性值

自定义样式：

.self{color:#66ff00}

#bright{font}链接文字样式：

a：link{color:red}

a:active{color:blue;font-size:125%}

对于css的样式起作用的对象：哪一个样式离文字最近，就显示哪一个css样式。Css层叠样式表的局部链接样式：a.name:link

a.name:activea.name:hovera.name:visited

（新建css样式规则）局部链接样式的源代码：a.blue:link{

color:#0000FF;

text-decoration:none;

}

a.blue:visited{

color:#CCCCCC;text-decoration:none;

}a.blue:hover{

color:#33FF00;

text-decoration:underline;}

a.blue:active{

color:#CCFF00;

text-decoration:none;

}

CSS样式设定详解：

1、文字设定（字体、字号、样式、行高、文字修饰、粗细、变化、大小写、颜色）

2、文字块设定（单词间距、字母间距、垂直对齐方式、文字对齐、文字缩进、空白区域控制）

3、扩展设定（光标类型、滤镜）

图片滤镜的html源代码：img{filter:Alpha(Opacity=0,FinishOpacity=100,Style=3,StartX=0,StartY=317,FinishX=510,FinishY=317);}

滤镜效果：1、模糊效果：Blur(Add=t,Direction=0,Strength=30)

2、透明效果：Alpha(Opacity=0,FinishOpacity=100,Style=3,StartX=0,StartY=317,FinishX=510,FinishY=317)

3、水平反转：FlipH4、垂直反转：FlipV

5、灰色效果：Gray

6、全部反转效果：Invert（类似胶卷底片效果）

7、波纹效果：Wave(Add=?add,Freq=?频率,LightStrength=?光影效果,Phase=?波纹的偏移量,Strength=?振幅大小)

8、X光片效果：XrayCSS样式：内部CSS与外部CSS应用CSS外部样式表

关于框架创建框架、框架的删除、使用框架、制作框架链接、重命名框架设置框架属性：html源代码：

添加浮动框架：使用浮动框架（制作浮动框架、设置浮动框架属性、制作浮动框架链接）

属性的设置源代码：浮动框架链接时要指定链接的目标是：浮动框架的name（自己去定义）。

制作复杂的嵌套结构框架页面、学会在页面中使用嵌套框架，并制作框架页面间的链接。模板的应用：模板的功能什么是模板为什么用模板（方便制作及更新）创建模板（根据已有文件建立模板）文件菜单下：另存为模板定义可编辑的区域

库的建立及应用库的建立（什么是库？为什么使用库？）便于局部文件的修改

1、建立库2、应用库3、更新库层的使用创建层设置层属性（选择层改变层的大小移动层排列层）插入层的html语句：

层是属于CSS样式表的一种定位技术

作用：直接使用层排版、利用层来设计表格（层和表格可以互换）、使用层溢出属性控制当层的内容超过层的大小的时候就要用到层的溢出属性（类似滚动条效果）溢出属性的选择有四种：1、visible（可见的）2、hidden（隐藏的）3、scroll（滚动效果）4、auto（自动）

行为（什么是行为/动作/事件选择对象添加动作调整事件）

行为的应用：制作弹出信息窗口、制作打开浏览器窗口、播放音乐（实现背景音乐）在html语言中添加背景音乐：其中的（loop="-1"：指的是无限循环）

设置状态栏文本针对输入文本框的行为事件“点击”是：onfocus不在文本框的行为事件是：onblur

控制flash的播放先给flash命名然后在下方设置控制播放的命令给名字设置空连接（空

连接的目标为：#）

检查表单对按钮实施行为事件转到URL交换图像

显示弹出式菜单

检查插件（新建文字指向空连接然后设置行为属性即可。）检查浏览器（在IE流行的现在时代，一般不使用）

改变属性（例如改变图片的边框属性如：border）拖动层的效果（拖动层要对整个页面进行实施）

设置显示隐藏层（例如：鼠标划过时出现图片，离开时消失）设置层文本

制作时间轴动画（层的漂浮效果）Fps：帧速率在路线中添加关键帧

控制时间轴（鼠标经过停止、鼠标离开浮动）

常用事件：onmouseover、onmouseout、onfocus、onload等等

使用插件1、手动安装插件：扩展对象、扩展命令（对于鼠标跟随的效果，字体的设置直接在CSS样式表中）、扩展行为2、自动安装插件（使用插件管理器）：Dreamweaver中的标准插件后缀名为：*.mxp去adobe网站找插件。主要包括：扩展对象、命令、行为预览和出版：检查网站中的错误链接、检查某个html页面的链接错误Dreamweaver课程总结：

1、建立站点、维护站点

2、页面构成元素：文字（特殊字符）、图片、表单、多媒体（embed、

marquee、bgsound）、头信息的加载

在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为Favicon.ico，然后将其上传到网站的根目录即可。如果需要将Favicon.ico放到其他目录下，或者希望让不同

的网页显示不同的Favicon，就需要在网页Html文件中做设定了，在Html中的＜head＞部分加入如下的代码：

扩展阅读：网页设计心得体会

教改学习心得体会

BY01061班16号王建云

本学期的网业设计课程，开展了动态思维训练教学活动，对于我们学生来说，

可以激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。总体来说，整个学期的学习过程，我学会了很多知识，虽然过程比较艰辛，但在INTENET领域中，有了一个展示自我的空间，我觉得很开心、很有成就感。一.充分发挥动手能力

作为网页设计的初学者，我对网页设计非常感兴趣，一心想设计出一个美观、实用、内容丰富的个人网页。本学期的教改方案由以前学生单纯接受知识变为主动参与教学活动。在这样的压力和动力下，通过自己动手、动脑，通过网络资源，老师的指导，在不断发现问题和解决问题的过程中学到了很多知识，也增强了我的创作能力和动手能力，在网页设计过程中，从构思到设计、完善、维护，整个过程我都全身心投入，使我真正学到了网页设计的知识。二.在设计过程中不断提高网页设计水平

在本次网页设计中，我不仅学到了很多关于网页设计方面的知识，也从中学会了关于网络、编程等方面的知识。我从最初开始运用FrontPage设计网页，到后来运用Dreamweaver、Flash、Fireworks等网软件设计网页，完善网页。在这个过程中，我通过自学教材、上网查询，学习了Dreamweaver、Flash、Fireworks等网页软件的应用，学会了管理、维护自己的站点，以及一些简单动画、控件的制作等等。在设计过程中也出现了很多的问题，但通过看书，上网查询，请教老师等方式，不断的学习、解决、提高，设计出的网页不论是外观还是内容，都在不断的进步、改善。可以说在自己动手，不断实践的过程中，网页设计水平得到了很大的提高。三.不足之处

由于平时工作比较繁忙，学习时间比较少，对于网页设计软件的强大功能运用得还不够。在网页设计过程中，由于没有网页制作代码的知识，所以在设计时也遇到了很多麻烦，有时插入一个特效脚本也是很麻烦。在网页制作过程中，想提高设计水平，想有个理想的网页，必须学会代码的运用，我将在以后的学习过程中不断加强这方面的学习，希望老师能简单介绍一下代码，让我也对它有个初步的认识，以后再加强学习也才会有所提高。

总体来说，通过今次的对网页设计的学习，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。也希望老师在今后的日子里多指导。

友情提示：本文中关于《网页设计总结》给出的范例仅供您参考拓展思维使用，网页设计总结：该篇文章建议您自主创作。

来源：网络整理 免责声明：本文仅限学习分享，如产生版权问题，请联系我们及时删除。

《网页设计总结》由互联网用户整理提供,转载分享请保留原作者信息,谢谢!
链接地址：http://www.bsmz.net/gongwen/639179.html

• 上一篇：美工总结
• 下一篇：淘宝实训总结