1、网站设计实训总结
首先我要做的就是要选择好题目和网站的风格,之后我就分步骤准备在制作网站前所要做好的准备工作。我浏览了中国美食网的一些特点,借监这些网站的优秀之处,不好的地方在自己的网站上加以改良,从而使自己的网站更加美观。
回顾这次课程设计,至今我仍感慨颇多。的却。从选题到开始制作,从理论到实践,在实训机房日子里,可以说得是苦多于甜,但是可以学到很多很多的的东西,同时不仅可以巩固了以前所学过的知识,而且学到了很多在书本上所没有学到过的知识。
在选择好题目和网站的风格之后,我就开始了实训项目的进程,按照实训方案的规定,先是将网站的总体策划以书面的形式展现出来,通过老师审核之后,在相应的时间段找相关的素材,搜集与主题相关的文字、图像等。再是设计网站的内容结构、目录结构和链接结构,设计首页及其页面的版式结构。然后创建本地网站,建立网站的目录结构。制作首页、二级子页、内容页,创建超级链接。最后就是测试与浏览网页,如果还有什么不理想的地方再改进再预览,如此反复,最后达到最好效果!
在此次网站的设计与制作过程中,难免会遇到过各种各样的问题,这毕竟是第一次独自设计网站、制作网站。但值得高兴的是:在设计的过程中发现了自己的不足之处,对以前所学过的知识理解得不够深刻,掌握得不够牢固,没有能完全达到自己预期的效果,还好通过老师的细心指导才能达到最终效果……
一周网页设计与制作的实训课程结束了,回顾这次课程设计实训,至今我仍感慨颇多。的确,从选材到开始制作,从理论到实践,在两周的实训日子里,可以说得是苦多于甜,但是可以学到很多很多的的东西,同时不仅可以巩固了以前所学过的知识,而且学到了很多在书本上所没有学到过的知识。更懂得并亲身体会到了理论与实际相结合的重要性,只有理论知识是远远不够的,把所学的理论知识与实践相结合起来,从理论中得出结论,才能真正为掌握技术,从而提高自己的实际动手能力和独立思考的能力。
2、网页是如何实现的,Web UI设计理论入门教程
一、学习HTML5和CSS3基础
随着这移动互联网快速发展的时代,尤其是4G时代,HTML5+CSS3已然成为新一代的web前端技术。
随着HTML5的发展和普及,了解 HTML5 也将成为 Web开发人员的必修课。涉及到网页外观时,就需要学习 CSS 了,它可以帮你把网页做得更美观。
利用 HTML5 和 CSS3 模拟一些你所见过的网站的排版和布局(色彩,图片,文字样式等等)。
当然,远标Web前端开发课程第一阶段还会学习 PS设计工具使用和互联网UI设计理论。
二、学习Java,了解DOM
Java 是一种能让你的网页更加生动活泼的程序语言。学习 Java 的基本语法,学会用 Java 操作网页中 DOM 元素。
Web前端开发课程第二阶段完全可以实现大家平常喜欢玩的 2048 游戏。(是不是感觉挺有意思)
接着学习使用一些 Java 库,比如 Jquery 是大部分 Web开发人员都喜欢用的,通过 Jquery 可以有效的提高 Java 的开发效率。
三、学习Web前端核心
学习 Jquery 之后,大家就要学习 HTML5 高级阶段(HTML5 Canvas 绘图、HTML5 SVG、音频和视频处理、表单处理、表单验证...等)
四、学习HTTP协议及Server端技术
服务器端脚本编程(后台开发)也是Web开发人员的基本功之一。
要构建动态页面通常会使用到数据库,通常PHP使用Oracle、MySQL数据库。
对于Web服务器来说,Apache 一个就已经是了。那么Apache、php、数据库,该怎么理解它们的关系?
1、Apache是服务器基础,php和数据库都需要Apache来协调工作
2、php是脚本解释,如果不用php,那么Apache出来的东西就只是静态的,而不能在服务器实现功能
3、数据库完全可以单独使用,但是和Apache、php一起,则是由php代码调用数据库接口,而apache就负责解释php代码,让他能真正地实现对数据库的调用
五、学习Web前端高级技术
当你掌握了HTML5,CSS3,Java等技术之后,就应该找一个Web框架加快你的Web开发速度,使用框架可以节约你很多时间。
学习的Bootstrap是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVA 的,它简洁灵活,使得 Web 开发更加快捷,是web前端开发者最喜欢,也是现在企业里最常用的前端框架。
Angular JS是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC编程、模块化、控制器、路由、事件绑定等等。
AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会损失一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。
3、如何自学网站设计及网页制作
先学一学HTML,找本自己能看懂的教材,浏览为主,不用记住所有的概念,只要记住使用原理就行了,这一阶段,估计三天就够了;然后用两天时间学CSS,方法同上;进而再花些时间了解一下JavaScript。
然后就可以用记事本尝试写几个网页,记住这时千万不要用那些可视化工具,比如FrontPage、Dreamweaver(那些以后再学)。
有一个提高自己“写网页”的捷径,就是上各大网站,把网页保存下来(什么?你说你不会保存网页?就是“文件→另存为”),然后打开保存下来的网页,点击右键→查看源文件,看看人家的网页是怎么写的,然后模仿他们的写法,不断规范自己的代码。嘿嘿,这个方法不错吧。先好好模仿一下吧。
接下来该学一下Fireworks了。建议一开始就到网上找些实例教程,这些实例教程一般都介绍得很详细,跟着它一步一步做下来,每学会一个实例就掌握了几项操作,而且也有了自己的作品,很有成就感的,长期积累下来对自己的提高很有帮助。学Fireworks主要是学图片处理,比如加一些效果,还有很重要的就是切图,这对于初学者是很重要的。
这时还可以结合Dreamweaver进行学习,你就可以体会到Dreamweaver和Fireworks的无缝集成了。利用这些工具多做几个网页,你就可以达到一定水平了。
要是想让你的网页多一些炫目的效果,建议你学一下Flash,难度并不大,而且要是前面的JavaScript基础打得好的话,学到Flash中ActionScript时,你会有一种似曾相识的感觉,因为这两种语法几乎是一模一样的。
到这时,相信你就可以真正领会到“网页三剑客”的威力了。
在实践中不断提高
要是每天能拿出两个小时来学习,完成以上这些学习估计只要20天就差不多了。要是天赋高的话(比如说像我这样的,呵呵),那需要的时间就更少了。接下来该实习了,找个地方锻炼一下自己,比如可以去一些公司干干兼职,或是给自己的单位设计一下主页等。
最好是能进入一个正规的开发团队,你就会学会如何以团队合作的方式开发网站,特别是怎样和程序组合作,把页面与后台程序数据库配合起来。可能你会担心自己是新手,人家会嫌弃你,没关系,只要努力去找,总会有机会的。
到此,你就基本可以称作是一个“准Web Designer”了,不过要从根本上提高自己,最好去学学美术,这是当一个网页设计师的基本功。
4、网页设计基础教程
http://tech.163.com/special/w/000915SQ/webmediatech.html
菜鸟教程,懂点电脑就可以看懂
5、怎样制作自己的网页 web开发教程 企业建网站
我这边主要介绍一下企业找外包团队制作网站的一些流程,一般都是这样:
第一个步骤专,就是网站制作公司的人属员,来公司了解一下客户的主要目标和想法。一般的用户可以在这一步的时候,认真的跟网站制作公司的人员进行沟通。只有这样才可以做好网站。
第二个步骤就是进行初步的网站构架。这个主要是为实现网站的基本功能而坐的。有的网站看着很花哨,其实构架很简单,但是有的功能比较复杂。根据网站制作的技术人员的说法,网站框架的搭建比较考验技术,但是网站的整体就比较考验网站美工设计的能力。
第三个步骤就是网站的功能开发。如提交一个信息是否方便,是否能够有效传达企业的信息等。包括页面的特效,菜单展现形式,这些尽管策划人员前期已经规划,但是还是需要在网站功能开发中参与,以保证网站功能与开发需求的一致性,工作量少,但是却不可忽略。
第四个步骤上传网站并测试。网页制作完毕,最后要发布到Web服务器上,才能够让全世界的朋友观看,现在上传的工具有很多,如LeadFTP,CuteFTP是常用的网页上传工具。
网站开发制作的过程耗时还是蛮久,如果用网站模板制作,就会方便快捷很多。
6、如何设计制作网页,那里有教程学习。
一、定义站点
1、 在任意一个根目录下创建好一个文件夹(我们这里假设为E盘),如取名为MyWeb。
***备注:网站中所用的文件都要用英文名。
2、打开Dreamweaver,选择“站点—新建站点”,打开对话框。在站点名称中输入网站的名称(可用中文),在本地根文件夹中选择刚才创建的文件夹(E:web)。然后确定即可。
***备注:再次打开Dreamweaver,会自动找到刚才设立的站点。如果有多个站点,可以在菜单“站点—打开站点”中去选择。
二、创建页面
1、在本地文件夹E:\MyWeb下面的空白处,按右键选“新建文件”,这样就建好了一个页面,默认的文件名为untitled.htm。htm就表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。
***网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。
2、双击index.htm进入该页面的编辑状态。在标题空格里输入网页名称,按右键选页面属性,打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背影图像,超级链接的颜色(一般默认即可),其他都保持默认即可。
3.此时光标位于左上角,可输入一句话,如“欢迎来到我的主页”。选取文字,用菜单“窗口/属性”打开属性面板,选取文字大小为6,再使文字居中,然后在文字前用几个回车使其位于页面中间。
4.如要选取字体,则选择字体中的最后一项:编辑字体列表。然后在对话框中选+号,接着在“可用字体”栏中选择需要加入到字体列表中的一种字体,点击中间的按钮就可以加入了。
***在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用,因为别人电脑上未装就看不到。如果需要用的话,要做成图片后再使用。
***在网页上打入空格的办法是:把输入法调为全角。
***在网页上换行的办法是:shift+Enter。只按Enter则为换段。
三、为页面添加图片
1、在本地文件夹E:\MyWeb下面的空白处,按右键选“新建文件夹”,这样建立了一个文件夹,用它来放图片,可以改名为tu或pic或images都可以。
2、用菜单“窗口/对象”打开对象面板,点击“插入图像”,在对话框里选要插入的图片。如果会出现对话框:“你愿意将该文件复制到根文件夹中吗?”,必须选“是”,然后将它保存到刚建好的文件夹里。
3、选中该图片,打开属性面板,可以在上面为图片取名,重新设置图片的高、宽,拖住图片角上的点可以变大小。按住shift键,再拖动角上的点,可以使图片保持宽高比例拉伸。如要恢复这原始大小,则单击右下角的“重设大小”按钮。
4、 “链接”可以直接在这里输入地址。“替代”是图片的说明,即鼠标指向图片所显示的文字;“边框”是图片边框宽度,“对齐”是对齐方式。
四、添加超级链接
1、为文字添加链接。
比如,在页面上输入“我的文章”,然后将其选中,打开属性面板,在“链接”一格中,选择它所要链接到的页面即可。后面一格“目标”我们一般常用的是self即打开的新窗口代替了现开的窗口;或是选择blank即打开新窗口。
2、为图片添加链接
与上面文字的链接同理,插入图片,然后在属性面板中的链接一格中选择即可。
****图片可以创建不同的多个链接。方法如下:
在属性面板中的“地图”一项下面有一些图形,比如点击方形,光标变成十字,在图片上画一个蓝色矩形的热区,此时在属性面板上可以为这个热区设置链接地址,鼠标指向会显示。同样,再用圆形设置一个热区,就可以再为该图片设置其他链接了。
3、添加E-mail链接
选中需要添加E-mail链接的文字或图片,打开属性面板,在“链接”一格中输入填写邮件地址。格式如下:mailto:邮件地址。注意中间不空格。
4、如果链接到浏览器无法打开的文件,例如exe、Zip等文件,那么浏览者在点击这个链接的时候,就会实现文件下载、或是在线播放的功能。
五、表格的使用
1、点击插入/表格,打开表格面板进行设置。行数、列数、宽度、边框等,“单元格填充”为单元格内侧与内容的距离;“单元格间距”为单元格之间的距离,单位均为像素。
2、插入表格后,在表格的边框上点击一下,可以全选整个表格。然后在下面的属性面板里可以进行各种设置。
3、把光标移到其中一个单元格,此时看到的属性面板,就是单元格的属性面板。也可以进行各种关于单元格的操作。如背景色、背景图、边框、合并、拆分等。
六、关于表格的其他操作
一制作细线表格 原理:
1、选中整个表格,设置其背景为黑色(该颜色即表格线的颜色)。
2、选中所有单元格,设置其背景为白色。
二自动格式化表格
1、先制作好一张表格,然后选中。
2、选菜单中的命令/格式化表格。即可以其中选择预设好的一些表格样式。
三一像素分割条
1、插入一个1行1列,宽为200像素,边框边距均为0的表格。
2、选中表格,设置表格高为1像素,并设置一个背景色(即所要的线条颜色)。
3、切换到代码和设计窗口,将代码<td> 删除。
七、用表格构建完整的页面
一网页顶部(一般包括图标、广告、导航菜单)
1、创建一个1行2列,宽为760像素,边框及边距均为0的表格。
2、选中表格,设置排列方式为居中对齐,背景色为#3366CC。
3、将光标置于左边单元格中,设置其水平排列为左对齐,垂直排列为顶端对齐,然后插入一张图像,一般在此插入的是网站的图标,即logo。
4、将光标置于右边单元格中,设置其宽度为500,水平排列为居中对齐,垂直排列为中间,然后插入图像,一般是网页广告,即banner。
5、将光标置于刚完成的表格之后,插入/表格,创建一个1行1列,宽为760像素,边框及边距均为0的表格。
6、选中刚创建的表格,设置排列方式为居中对齐,背景色为#005173。
7、在该表格中依次插入多个图像,作为导航条菜单。
二网页中部(左边栏目列表、中间网站新闻、右边栏目列表)
1、 在导航条表格后面,插入/表格,创建一个1行3列,宽为760像素,边框及边距均为0的表格。并设置排列方式为居中对齐,背景色为#FFFFFFF。
2、 将光标置于左边单元格中,设置其宽度为18%,水平排列为居中对齐,垂直排列为顶端对齐,然后插入一张图像,插入一个导航条。
3、 将光标置于刚插入的图片后,插入/表格,插入一个12行1列,宽为90%的表格。设置其单元格间距为1,背景色为#CCCCCC。
4、 将光标放在表格第一个单元中,设置其高为20,背景色为#FFFFFF。插入/图像,插入一个导航文字前面的小点。同样设置其他11个单元格,这样左边的栏目分类列表就完成了。
5、 将光标置于主体表格的中间单元格中,设置其宽度为66%,水平排列为居中对齐,垂直排列为顶端对齐,然后插入/图像,插入一个导航条。
6、 将光标置于图像后,插入/表格,插入一个4行1列,宽为95%的表格。设置其单元格间距为1,背景色为#CCCCCC。
7、 将光标置于表格的第一个单元格中,拖动鼠标,将4个单元格都选中,设置高为60,背景色为#FFFFFF。
8、 将光标置于主体表格右边的单元格中,设置其宽度为16%,水平排列为居中对齐,垂直排列为顶端对齐,插入/图像,插入一个导航条。
9、 将光标置于图像后,插入/表格,插入一个7行一列,宽为90%的表格。设置其间距为1,背景色为#CCCCCC。
10、按住Ctrl键,用鼠标点击刚插入的表格的第1、3、5、7单元格,然后设置它们的高为55,背景色为#FFFFFF。
11、选中第2、4、6单元格,设置其高为6,背景色为#FFFFFF。
12、切换到源代码窗口,将第2、4、6单元格中的空格符号“ ”删除。
三网页底部(一般包括版权信息及其他相关内容)
1、 将光标置于主体表格后,插入/表格,创建一个2行2列,宽为760像素,边框及边距均为0的表格。
2、 选中表格,设置排列方式为居中对齐,背景色为#3366CC。
3、 将光标置于表格第1行的左边单元格中,设置其宽度为50%,水平排列为默认,垂直排列为基线,背景色为#FFFFFF,然后输入版权信息,内容颜色随便。
4、 将光标置于表格第1行右边单元格中,插入/图像,插入一个圆角图像,在它后面输入Email字样,设置其大小和颜色为1和#FFFFFF。
5、 插入/表单对象/文本域,插入一个文本域,宽度可以随意。
6、 插入/图像,插入一个GO的图像。
7、 设置页属性。点击菜单修改/页面属性,在标题一栏中输入标题,并选择背景图像,将顶部边界设为0。
***将整个网页分部分放到不同的表格中组合而成,还可以加快浏览器读取页面的时间。;因为浏览器是读完整个表格后才显示内容的,所以最好不要框在整个一个表格中。
八、用布局表格构建完整的页面
1、 单击插入/布局,里面的布局视图按钮,就切换到布局视图状态(默认为标准视图)。也可以用菜单里的查看/表格视图/布局视图来进入。
2、 先单击绘制布局表格按钮,然后在页面中像绘图一样创建出布局表格。
3、 就像上一个例子一样,先绘制好网页的顶部,再中部,再底部的大表格。
4、 再单击绘制布局单元格按钮,然后在已经绘制好的布局表格中,再绘制布局单元格。
5、 返回到标准视图,在已经划分好的表格里,再插入嵌套的小的表格,把页面再细化,就可以完成整个页面的设计了。
****注意把整个页面都放在一个大的布局表格中,因为这样的网页浏览速度会很慢。应该按照页面的版面和内容划分出几个布局表格,然后在其中分别插入布局单元格。
九、层的使用
1、点击插入/层。也可以点击图标,然后拖动鼠标创建出一个层。
3、选中创建的层,看属性面板。“层编号”和“标签”都使用默认即可。“层编号”是编程时需要用的,我们现在一般不用。“上”即距页面上边界的距离;“左”是距左边界的距离。“z轴”是层的顺序,数字大的叠加在数字小的上面。
****如不设置颜色时,层是透明的。
4、点中层左上角的小方框可以随意拖动层,大小也可以调节。
5、“溢出”一栏中,当文字多于层的大小时,visible(超出的部分照样显示)、hidden(超出部分隐藏)、scroll(不管有否超出,都显示滚动条)、auto(有超出时才出现滚动条)。
6、点击菜单窗口/其他/层,此时将出现层管理窗口。可以在其中修改层的名称和Z轴值,也可以点击眼睛图标使层可见或不可见。还有一个防止重叠的选项。
7、层的对齐。按住shift键,同时选中几个层。然后用修改/对齐,用这里的选项。
8、嵌套层。⑴首先在文档中插入一个层。⑵将光标置于该层内,然后继续插入一个层,就得到了嵌套层。⑶里面的叫子层,外面的父层。它们的Z轴顺序是一样的。拖动父层时,子层也会相对移动。移动子层时,父层不会随之移动。
十、了解时间轴
1、点击菜单中的插入/层,插入一个层。
2、在层中插入图片,如一张飞机的图片。(这里的图片也可以是一张小动画的.gif图像)
3、点击菜单中的窗口/其他/时间轴,打开时间轴窗口。
4、选中页面上创建的层,用鼠标按住层左上角的小方框图标,将层拖放到时间轴的第1帧中。这时自动创建了一个长度为15帧的时间轴。
5、选中时间轴上的第1帧,将页面中的层拖放到页左上角,即动画开始时的位置。
6、选中时间轴上第15帧,可以拖动该帧至任意长度,如30帧。
7、选中第30帧,将层拖放到页面的右下方,此时窗口中显示出层从第1帧到第30帧的运动轨迹。(此时运动为直线)
8、可以点中第15帧,右键选“增加关键帧”,在选中第15帧的状态下,拖动层到页面中下方。
9、勾选“自动播放”项。
十一、制作滚动公告牌
1、在页面上插入一个层,然后为层设置一个背景,作为公告版的框架。
2、然后在创建的层中插入嵌套层,将嵌套层移动到父层的下方。
3、在嵌套层中输入文本,并将其居中排列。
4、打开时间轴面板,将子层作为对象添加到面板中。
5、为子层创建一个向上移动的路径,将其移动到父层的上方。
6、拖动最后一关键帧,增长动画时间,然后勾选“自动播放”和“循环”两项。
7、选定父层,在其属性面板中将“溢出”属性设置为“hidden”。
十二、在页面中运用flash动画
1、点击插入中的Flash按钮,即可为页面插入一个动画。也可以选菜单插入/媒体/Flash来完成这一步。
2、选中已插入的动画,看属性面板。这里可以设置它的宽、高,也可以通过拖动来改变大小。
3、可以在这里点击“播放”来预览动画。
十三、让插入的flash动画变透明
1、当网页上已经有背景,或是想要在一张图片上再插入flash动画,而flash动画本身也有背景色,所以会影响美观,这时我们要把它做成透明动画。
2、如在页面上插入一张图像。
3、在图像上插入一个层,在层中插入好所需要的flash动画。
4、选中flash动画,在属性面板中点击“参数”按钮。
5、在“参数”的左面一格输入“wmode”。在右面“值”一格输入“transparent”。
十四、在页面中播放声音
1、在完成全页面以后,如果要为该页添加背景音乐,注意背景音乐一般是*.midi文件,这样的声音文件十分小,易于快速下载,其他格式不适合作为背景音乐。
2、在页面中所有表格之外,(注意此时编辑窗口左下方的标签选择栏中仅显示<body>这一项,或是在左下角点一下<body>,这样才能保证这个行为是添加在整个页面上的)。点击行为窗口上的“+”按钮,(或用菜单 窗口/行为,打开行为窗口。)
3、从弹出菜单中选择“播放声音”。打开一个对话框。
4、在这个对话框里用“浏览”选择要播放的声音,并确定。
5、这时行为面板上自动显示了事件为onload,动作为播放声音。点击这一行,中间出现一个按钮。点击按钮,可以设置这个声音在什么事件下播放。可以选择“显示事件”/“IE5.0。
6、我们常用的如Onload(当页面载入时)、OnClick(单击鼠标)、OnMouseOver(鼠标移到对象上)、OnUnload(当关闭页面时)等。
7、该行为也可以设置在图片上、文字链接上。在文字链接上播放声音之前,先为文字添加一个空链接,即选中文字,在链接一格里输入一个“#”符号。
十五、弹出窗口
1、首先制作一个准备在小窗口中显示的页面(比如a.htm),由于这个弹出窗口不能太大,所以内容要少一些。
2、打开一个制作好的页面,把光标移到页面中所有我表格以外,点击行为窗口上的“+”按钮,从弹出菜单中选择“打开浏览器窗口”一项。
3、在对话框中里输入相应的设置。要显示的URL即a.htm,窗口宽度和高度自己定,单位为像素。属性中的各项参数需要就打勾。
4、设置完毕后,点“确定”。此时行为窗口中将显示打开浏览窗口这个行为,触发条件为Onload,如果不是要这项,就自己设置。
5、该行为也可以设置在图片上、文字链接上。。
6、可以用这个方法来表示对浏览者的打开时的欢迎、网站公告、离开时的告别语等。
十六、控制状态栏信息
1、打开页面,选中一张图片。
2、点击行为窗口上的“+”号按钮,选择设置文本/设置状态条文本。
3、在对话框里的“消息”一栏里,输入需要显示的话,如对这张图片的介绍。
4、可以设置行为的触发条件为OnMouseOver(鼠标移到对象上),这样当鼠标经过这张图片的时候,状态栏将出现相关的信息。
5、如果需要鼠标在移开后,这个信息消失,那么再次使用这个行为,在“消息”一栏里什么都不写,然后把触发条件改为OnMouseOut(鼠标移开)。
6、同样可以在一段文字上设置该行为。或是设置在整个页面上也可以。
十七、弹出信息
1、打开一个制作好的页面,点左下角<body>项。点击行为窗口上的“+”按钮,从弹出菜单中选择“弹出信息”一项。
2、在设置窗口中“消息”一栏里输入想显示的消息即可。
3、触发条件设置为Onload(当页面载入时),就可以用来作为打开页面的欢迎信息。如设为OnUnload(当关闭页面时),就可以作为用户关闭页面时送别信息。
4、也可以在某一段文字上设置弹出信息。比如一段文字不愿让人复制,就选中整段文字,注意此时左下角显示〈P〉,即段落。
5、然后同样操作,消息可以输入版权之类的语句。只是设置触发条件为OnBeforeCopy(按右键时触发),或OnCopy(按右键选复制时触发)。
十八、动态图片按钮
1、准备好两张同样大小的图片,常用的方法是如一张为灰度照片,一张为彩色照片。或一张是按钮凹下的样式,一张是按钮凸起的样式。
2、举例:插入一个3行1列的表格,设置宽度为180像素。
3、将光标置于第一行,插入一张灰度的图片。
4、在属性面板中“链接”一栏里输入需要链接的地址,并给图片加上名称,如tu1.
5、点击行为窗口上的“+”按钮,从弹出菜单中选择“交换图像”。
6、此时在“图像”一栏中已显示要交换的图像,然后在“庙宇原始档为”一栏里选择好交换后的那张图。
7、下面有两个参数,“预先载入图像”和“鼠标滑开时恢复图像”,都要选中。
8、同样方法创建另外两个动态按钮。
十九、用框架布局页面
框架由两个主要部分组成——框架集和单个框架。
1、 点击插入中的框架,即显示出已定义的13种框架的样式。我们上—中—下结构为例。
2、 点击“上—中—下”框架结构的图标,此时在页上插入上下两个框架,将整个页面分割成了3部分。我们分别在上面输入“上”,在中间输入“中”,在下面输入“下”。
3、 先保存一下。点击菜单中的文件/保存全部。这时首先保存框架集文件,可以自己修改名字,如kuangjia.htm。然后将分别保存框架集中的其他页面。在保存对应的页面的时候,该部分会以虚线框起来,这样可将上面部分保存为shang.htm。下面部分保存为xia.htm。中间部分保存为zhong.htm。
4、 至此,我们保存了四个页面,分别是框架集,和组成框架集的上、中、下三个页面。所以,其实这个框架是由四个页面组成的,所以用框架会降低一点用户浏览的速度。
5、 点击窗口/其他/框架,打开框架的面板。在这里单击某个框架,即可选中该框架。当框架被选中时,编辑窗口中对应的框架出现虚线。
6、 如:选中上面topframe,此时属性面板上显示的是上面这个框架的属性。同样选中中间框架和下面框架,也可以分别设置它们的属性。
7、 在编辑窗口中,将鼠标放在两框架之间的边框上,光标将变成上下箭头形,此时点击边框,选中的是整个框架集。
8、 此时属性面板上出现的是整个框架组的属性。可以在此设置框架集是否有边框、宽度及颜色等。不过最为重要的是可以在这里设置框架集中各个框架的大小。
9、 在属性面板的右面的图示上选中上面框架,设置它的行为80像素,边框为0。
10、选中下面框架,设置行高为30像素,边框为0。
11、选中中间框架,设置行高为1,单位为相对。(相对的意思是:当前行相对于其他行所占的比例。设为1就是指占据除上和下以后的所有浏览窗口剩余空间。
12、举例:将光标置于上面框架topFrame上,右键选页面属性,设置背景色为#FF6600。然后插入/表格,插入一个1行2列,边框边距都为0的表格。设置第1个单元格的宽度为116像素,然后插入一张图片。将第2个单元格设置为水平对齐方式为居中,垂直排列方式为底部,然后依次输入“狮子座”、“魔蝎座”、“双子座”字样。
13、将光标置于中部框架mainFrame中,右键选页面属性,设置背景色为#FFFFCC。然后插入一张大图像。
14、将光标置于下面框架bottomFrame中,右键选页面属性,设置一个背景图像。
15、另外做好三个页面,作为“狮子座”、“魔蝎座”、“双子座”所要链接的页面。
16、选中“狮子座”,在属性中为它设置好要链接的页面,然后在“目标”里选“mainframe”,即该内容在中间那个框架中显示。
17、同样设置“魔蝎座”、“双子座”的链接。
二十、跳转菜单
1、 点击主菜单中的插入/表单对象/跳转菜单,也可以用插入/表单,中的跳转菜单图标,来调出跳转菜单设置窗口。
2、 首先在“文本”一栏里输入“请选择相关网站”字样。然后点击窗口上的“+”号按钮。这时菜单里多了一个选项,这个选项没有链接,仅作为跳转菜单的说明文字。
3、 在文一栏里输入需要的网站,如“新浪”,然后在“选择时,前往URL”一栏里输入网站链接地址http://www.sina.com.cn,此时,菜单项一栏里又多了一个选项,这个选项对应一个网的链接地址。
4、 使用同样方法,在菜单中添加其他一些选项及对应的链接。还可以用“上”“下”的按钮,来调整它们的顺序。
5、 设置窗口的“菜单之后插入前往按钮”一项先不要选择。选中“更改URL后选择第一个项目”一项,这样当使用跳转菜单到某个页面后,如果返回到跳转菜单页面,此时页面中的跳转菜单默认显示的依旧是第1项内容。
6、 设置完毕后点击“确定”即可。
****因为跳转菜单是一个表单,所以其实是先插入了表单(红色虚线区域),然后在表单中再插入了下拉菜单。
7、 想修改选项,可以选中页面上的下拦菜单,此时点击属性面板中的“列表值”,即可修改各项内容了。
8、 当选中跳转菜单时,行为窗口中也出现行为。双击该行为,也可以进入设置窗口,可以重新对其进行设置。
9、 如果“菜单项”里的第一项就是链接,而不是上面所说的一句提示的话,那么就要选中“选项“中的“菜单之后插入前往按钮”。添加一个“前往”按钮。
网页制作详细教程:http://www.cr173.com/html/27216_1.html
7、跪求:网页设计实训个人总结
《网站设计与制作》实训报告
X学院 XX班 XX X号
一.实训时间:
2010年6月7日到2010年6月13日二.实训地点:
科实南213
三.实训组员:
XXX、XXX
四.实训目标:
以金华农特产为主题,制作网站,通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。
五.实训策划:
这一周,我们要进行《网站设计与制作》实训,我们认为做网站前最主要的是确定主题、框架和标题栏的设计。因此我们相互讨论之后,确定制作以“健康”为主题的“林安健康网”,但在之后的资料收集和网页的框架的建设中,我们发现出了问题,在确认无法做出效果后,我们决定放弃这个主题,重新建立以“水果”为主题,以我们的名字连体命名的“林安水果网”。以下是我们的策划内容:
1.确定主题。制作网页,首先是确定主题,金华有许多特色水果,水果产品丰富,,经过考虑,确定以金华水果品种为主题的网站 ,建立一个简单的介绍金华水果的网站,专业介绍一些金华地区优秀的水果市场和销售渠道等。我们本次间的网站基本以绿色为基点,绿色是生命的颜色,绿色代表着生机勃勃,所以本站以绿色为风格,让整个网站充满绿的生机。
2.设计主页。主页的设计是整个网站的灵魂,构思导航栏的分类,然后是整体规划,每一版块都有其个性的色彩,清晰明了,便于阅读浏览,我们构思大致分几部分,首页,特价专区,优质水果,果树栽培,婺城商场,金东商场,客户中心,联系我们,意见反馈等板块,再加入个别网站等,每一部分又分几小部分,内容比较充分,多样。确定导航栏的各个分类标题之后对于建立二级子网尤为重要,我们运用Photoshop CS3技术来设计出导航栏,再用Fireworks CS3或Photoshop CS3技术制作切片,建立导航栏,将整体的主页效果建立起来。
3.资料的搜集。主页的导航栏设计好后,接下来就是对主页导航栏的各个内容进行资料的收集,我们采用大量的资料收集再对资料进行塞选,得到最适合导航栏内容的资料。素材的选择,要符合网站的主题,图片的大小要符合模板的轮廓,我们将不符合模板的用Photoshop处理编辑,然后放入站点底下,进行图文的链接和排版。
4. 建立模板和库。此次网站建设中我们决定大量运用模板和库,运用模板和库对于建立网站提供便利同时也为我们减少大量的工序。本次水果网的建设主要采用两个模板,各具风格,样式标准。
5.各个子网页的建立。我们设计好模板后只要在可编辑区依次编辑所需资料就可,运用模板建立子网页少了很多工序,为我们节省大量的时间。尽管我们建立了模板,但我们在建立子网时很小心,因为一张图片的大小插入就有可能破坏整个模板的结构尤其在使用表格时,因此我们对所插入的图片和表格都得进行测量,做到不影响网站整体的美观。
6.实现网页间的链接。做好个格子网和首页后,接下来就是通过模板的链接,将整个网站中的网页链接起来,过程其实很简单,主要是把要链接的文字和图标选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。通过模板建的几张网页其实超链接都不怎么用链接,只需要修改模板上的链接就可以了,这也是通过模板新建网页的好处,省去一张一张超级链接的时间了。做好这一步后,网站基本算是建好了。
7.向静太网页插入动态效果。在基本建好网页中的插入层和时间轴,制作其动态效果,让整个网页充满生机。我们在网上进行flash素材的收集,通过Flash CS3设计出主题下的风格动态效果。然后插入到静态网页中,使网页更加生动形象。
六.实训心得:
通过这半年的学习实践中 和老师的指导下以大量明晰的操作步骤和典型的应用实例,教会我们。使更丰富全面的软件技术和应用技巧,使我们真正对所学的软件融会贯通。所以我结合所学专业的内容制作了企业水果网站,作为实习的成果。其内容是多样化的。制作网页用的软件是Deamweaver CS3软件。它提供了网页和表单的动态生成到企业级的解决方案。主图是一个网页的门面,它能体现出这个网页的整体风格。
制作网页,首先是确定主题,经过再三考虑,就做了个关于金华水果的网站 ,要对这些有些了解,于是确定主题,做一些类似的网站,但考虑到,现在网络上好多类似的网站,但有些内容不适合我们大学生阅读,对于我们来说有点不实际,根据这种情况,最后决定建立一个简单的介绍金华水果的网站,专门介绍一些金华地区优秀的水果市场和销售渠道等。于是网站主题确立。
然后是整体规划,每一版块都有其个性的色彩,清晰明了,便于阅读浏览,大致分几部分,首页,特价专区,优质水果,果树栽培,婺城商场,金东商场,客户中心,联系我们,意见反馈等板块,再加入个别网站等,每一部分又分几小部分,内容比较充分,多样。
再后是收集资料与素材,大量浏览相关网站,收集关于金华水果的图片,进行Photoshop CS3图片处理和排版,插入好的文章和图片等,还有参考一些好的网站的布局,特色,颜色搭配,背景图等。
再后是设计网页图片,用flash制作网友调查表,用Photoshop制作静态图片。再后是建立站点,和制作网页了,使用dreamweaver制作。
首页内容精彩丰富,首页主要是导航作用。首页制作时,时刻考虑着网页的基本原则:统一,连贯,分割,对比及和谐的原则,内容统一,都是为了主题服务,一个网站强调的就是一个整体,只有围绕一个统一的目标所做的设计才是成功的;连贯,页面之间关系连贯,统成一体;每版内容都自成一体,颜色各异,便于浏览;整个网页有动有静,颜色不同,形成对比,不呆板,富有生气;颜色各异,但又不同之中又相同,浑然一体。
简洁实用: 这是非常重要的,网络特殊环境下,尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的,所以要去掉所有的冗余的东西。使用方便:同第一个是相一致的,满足使用者的要求,网页做得越适合使用,就越显示出其功能美;页面用色协调,布局符合形式美的要求: 布局有条理,充分利用美的形式,是网页富有可欣赏性,提高档次。当然雅俗共赏是人人都追求的。
利用我们所学的模板设计,制作更完美的页面。将动态网页与静态网页结合起来
再后,调试过程,好多次本来在Deamweaver CS3里好好的,把字调的好好的,位置很对,可在浏览器里御览就出毛病了,不是靠上了,就是靠下了,很不老实,经过再三调试,整理,加了好多表格,终于满意了。
通过温本周的实训,发现自己还有很多的不足。就框架的应用很难把握,切片也很难合理切割,当插入图片的时候把原有的模板给撑破了,精确定位很重要。因为学艺不精,所以不会网页的代码设计,只能通过网络三剑客综合使用。不过也实践中也学到了很多知识,比如原本不知道网页设计还需要切片,表格的嵌套是非常重要的,模板的应用时非常便捷的。还有一些行为中的效果也是蛮不错的。所以这次实训还是很有意义的。