导航:首页 > 万维百科 > 网站版面设计实训

网站版面设计实训

发布时间:2020-09-07 09:23:33

1、网页设计实训报告里有一个网页模块介绍,要怎么写,网页模块是什么意思

是网页模板吧。网页一般没有模块,模块一般在模块化程序设计中,网页一般都是指的模板。
网页模板就是已经做好的网页框架,使用网页编辑软件输入自己需要的内容,再发布到自己的网站。每个网页模板压缩包内包含:PSD图片文件(可用Photoshop、ImageReady或Fireworks修改),按钮图片PSD文件、Flash源文件和字体文件,推荐使用Dreamweaver软件向网页模板添加内容。
1)模板的概念:作为创建其它文档的样板的文档。创建模板时,可以说明哪些网页元素不可编辑,哪些元素可以编辑。其扩展名为.dwt。
2)模板的作用:有利于保持网页风格的一致;提高工作效率。
1.创建模板
1)创建一个全新的模板:在模板面板中,使用快捷菜单按钮或单击面板上的新建按钮
模板面板的打开:Window菜单--Templates
2)创建基于文档的模板:File菜单-Save As Template
2.设置模板页面属性
1)用模板创建的文档继承模板的页面属性,页标题除外。
2)设置:Modify菜单-Page Properties
3.定义模板的可编辑区
1)定义模板的可编辑区
在模板文档中选定对象、Modify菜单、Templates、New Editable Region
2)取消可编辑区标记
Modify菜单-Templates-Remove Editable Region

2、网页设计实验报告

2

3、网站版面设计要注意哪些问题?

需要注意以下四点:

1.加强视觉效果
2.加强文案的可视度和可读性
3.统一感的视觉
4.新鲜和个性是布局的最高境界。

设计首页的第一步是设计版面布局。
就象传统的报刊杂志编辑一样,我们将网页看作一张报纸,一本杂志来进行排版布局。
虽然动态网页技术的发展使得我们开始趋向于学习场景编剧,但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的,你可以领会要点,举一反三。

版面指的是浏览器看到的完整的一个页面(可以包含框架和层)。因为每个人的显示器分辨率不同,所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸。

布局,就是以最适合浏览的方式将图片和文字排放在页面的不同位置。
你可能注意到:“最适合”是一个不确定的形容词,什么才是最适合的呢?抱歉的是阿捷不能也不可能给您一个完整的正确的答案。就好比有人希望知道成功的秘诀是什么,成功者只能建议您用什么方法,什么途径才能最容易获得成功,而不可能有一步成功的"秘诀"告诉您。

我们在设计思考系列文章第四篇讲过站点整体的创意,版面布局也是一个创意的问题,但要比站点整体的创意容易,有规律的多。让我们先来了解一下版面布局的步骤:

一.草案
新建页面就象一张白纸,没有任何表格,框架和约定俗成的东西,你可以尽可能的发挥你的想象力,将你想到的"景象"画上去(我们建议您用一张白纸和一支铅笔,当然用作图软件photoshop等也可以)。这属于创造阶段,不讲究细腻工整,不必考虑细节功能,只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张,最后选定一个满意的作为继续创作的脚本。

二.粗略布局
在草案的基础上,将你确定需要放置的功能模块安排到页面上。(注:功能模块我们在"首页设计-引子"中提过,主要包含网站标志,主菜单,新闻,搜索,友情链接,广告条,邮件列表,计数器,版权信息等)。注意,这里我们必须遵循突出重点、平衡谐调的原则,将网站标志,主菜单等最重要的模块放在最显眼,最突出的位置,然后在考虑次要模块的排放。

三.定案
将粗略布局精细化,具体化。(靠你的智慧和经验,旁敲侧击多方联想,才能作出具有创意的布局。)

在布局过程中,我们可以遵循的原则有:

1、正常平衡---亦称"匀称"。多指左右、上下对照形式,主要强调秩序,能达到安定诚实、信赖的效果。
2、异常平衡---即非对照形式,但也要平衡和韵律,当然都是不均整的,此种布局能达到强调性、不安性、高注目性的效果。
3、对比---所谓对比,不仅利用色彩、色调等技巧来作表现,在内容上也可涉及古与今、新与旧、贫与富等对比。
4、凝视---所谓凝视是利用页面中人物视线,使浏览者仿照跟随的心理,以达到注视页面的效果,一般多用明星凝视状。
5、空白---空白有两种作用,一方面对其他网站表示突出卓越,另一方面也表示网页品位的优越感,这种表现方法对体显网页的格调十分有效。
6、尽量用图片解说---此法对不能用语言说服、或用语言无法表达的情感,特别有效。图片解说的内容,可以传达给浏览者的更多的心理因素。

以上的设计原则,虽然枯燥,但是我们如果能领会并活用到页面布局里,效果就大不一样了。比如,
○网页的白色背景太虚,则可以加些色快;
○版面零散,可以用线条和符号串联;
○左面文字过多,右面则可以插一张图片保持平衡;
○表格太规矩,可以改用导角试试。
经过不断的尝试和推敲,你的网页一定会亮丽起来的哦:)

看看我们经常用到的版面布局形式:
1."T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,因为菜单条背景教深,整体效果类似英文字母"T",所以我们称之为"T"形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰,主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板,如果细节色彩上不注意,很容易让人"看之无味"。

2."口"型布局。这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情连接等,中间是主要内容。这种布局的优点是充分利用版面,信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤,不够灵活。也有将四边空出,只用中间的窗口型设计,例如网易壁纸站。

3."三"型布局。这种布局多用于国外站点,国内用的不多。特点是页面上横向两条色块,将页面整体分割为四部分,色块中大多放广告条。

4.对称对比布局。顾名思义,采取左右或者上下对称的布局,一半深色,一半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是将两部分有机的结合比较困难。

5.POP布局。POP引自广告术语,就是指页面布局象一张宣传海报,以一张精美图片作为页面的设计中心。常用于时尚类站点,比如ELLE.com。优点显而易见:漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。

以上总结了目前网络上常见的布局,其实还有许许多多别具一格的布局,关键在于你的创意和设计了。

4、网站美工设计基础 平面设计的门类有哪些

《网站美工设计基础》
一、课程的性质与任务
《网站美工设计基础》是“计算机网络技术”专业(网络编辑、网页设计等方向)(专科)的一门统设必修课。通过本课程的学习,使学生了解平面设计构图与视觉传达的关系,掌握平面设计构图的几种常用的表现方法,理解点、线、面等设计元素之间的相互关系,掌握CorelDRAW绘图工具的基本使用方法,从而掌握利用绘图工具设计网页的方法,成为初步掌握网站美工基础知识和基本技能的应用型人才。
本课程侧重介绍网站美工的基本理论、基础知识、基本技能和方法,使学生了解网站和网页的基本设计思想,提高和掌握对色彩基础知识(色相、明度、纯度,空间混合概念,色彩搭配,色彩的心理、网页的色彩设计、配色软件的使用等)、平面构成(平面设计构图的形式要素、关系要素,平面设计构图的基本形式、平面设计构图的形式规律,平面设计构图的几种常用的表现方法等)、版式(版式设计的形式法则、网页的版式构成与设计)及创意等相关的内容。在完成基础知识教学任务的同时,还要着重加强学生实际动手能力的培养。
二、与相关课程的衔接、配合、分工
先修课程:计算机应用基础
后续课程:网络多媒体素材加工、网页制作三剑客、网络信息采集、网络信息编辑等。
三、课程教学的基本要求
本课程包括基础理论和实训两大部分,特点和教学基本要求如下:
1、基础理论部分
※对色彩基础知识、平面构成、色彩搭配、版面设计等美术基础知识应能较熟练的掌握。
※掌握并能利用平面绘图软件辅助设计、制作网页。
2、实训部分
※通过本课程的学习,使学生提高色彩观察能力和色彩的感知能力;一般色彩搭配能力;了解平面设计构图与视觉传达的关系,熟悉点、线、面等设计元素的性质并能灵活运用;掌握平面设计构图的几种常用表现方法;加强实际动手能力的培养和训练;培养对优秀网页版式分析模仿的能力;基本掌握一种绘图工具的使用,最终能设计出优秀网页。
四、教学内容
第一章 21世纪网页设计的审美
教学内容:
1.什么是网页
2.网页设计与美术基础知识
2.1网页与平面构成
2.2网页与色彩
 第二章 平面构成
教学内容:
2.1形式美的基本法则
2.2平面设计的门类、元素和形象
2.3重复
2.4渐变
2.5发射
2.6骨骼
2.7特异
2.8对比
2.9肌理
2.10图与底
2.11基本型的各种排列
教学要求:
第三章 色彩在现实领域中的应用
教学内容:
3.1色彩的概念
3.1.1色彩的产生
3.1.2光源
3.1.3物体固有色与光源色
3.2色彩三要素
3.2.1明度
3.2.2色相
3.2.3纯度
3.3色彩在现实领域中的应用
3.3.1色彩表示法
3.3.2色彩的混合
3.3.3色彩的对比
3.3.4色彩调和
3.3.5色彩肌理
3.3.6无彩色与有彩色的相互作用
3.3.7色彩结构
3.3.8色彩在现实领域中的应用
 第四章 网页版式设计的图文魅力
教学内容:
4.1网页设计的独特性与必要性
4.2网页设计的审美情感
4.3网页设计的装饰语境
4.4网页版式设计的形式法则
4.5网页的版式构成与设计创意
第五章 绘图工具的基本应用
教学内容:
5.1CorelDRAW的基础知识
5.2工具箱基本应用
5.3图像填充效果
5.4位图的应用与编辑
第六章 CorelDRAW与网页设计
教学内容:
6.1按钮的制作
6.2制作Logo
6.3绘制导航条
6.4制作广告
6.5文本的处理
6.6主页设计

5、用ASP制作网页的实训报告总结

1. 实习内容及知识应用
1.1实训内容以及进程安排
实训内容:动态网站制作的学习及动态网站的制作
这次在3名指导老师的带领下,我们主要学习了用2种现在比较流行的动态网站开发平台来开发网站:JSP平台与ASP.NET平台;JSP平台方面主要通过XX老师示范制作myblog个人博客网站而学习JSP平台的搭建、数据库的连接、网站测试等内容;而ASP.NET平台主要通过XX老师和XX2位老师的指导,学习并搭建了ASP.NET平台,掌握了网页三剑客制作动态网站的基本常识与方法,以及数据库的连接、网站测试及Photoshop处理图片等内容


进程安排

日期
日程安排
08年7月28日 确定小组组员,小组成员为:XX(组长),XX(组员)
08年7月29日 确定小组动态网页开发平台为ASP.NET
08年7月30日 确定网站要实现的功能①
08年7月31日-8月5日 制作BBS网站
08年8月6日 测试BBS网站
08年8月7日-08年8月15日 制作电子商务网站
08年8月16日-8月17日 测试电子商务网站
08年8月18日-8月20日 提交网站给指导老师,听取指导老师意见,完善网站
08年8月21日-8月22日 网站制作与小学期总结,写小学期文档
08年8月23日 提交小学期文档,小学期实训结束

说明:①经过讨论,我们组决定建设2个网站来实现以下功能
网站1-BBS网站:在这个网站中,我们主要实现了站点日历与站点搜索引擎2大功能。
网站2-电子商务网站:在这个网站中,我们主要实现了用户注册与登陆、购物车的实现、订单的显示等页面。
1.2知识(点)应用以及经验总结
这次制作2个网站主要应用的知识有以下:
⒈ 数据库的创建
① Access数据库的创建
Acess提供2种数据库创建方式:一种是创建一个空数据库,然后编辑数据表的内容;另一种使用数据库自带的模板创建;在动态网页面中,一般应用第一种方式
② Access数据库的打开方式
包括打开、只读方式打开、独占方式打开、只读独占方式打开
③ 利用设计器设计Access数据库
利用Access数据库里的设计器设计Access数据库
④ 使用向导设计Access数据库
通过Access的向导,经过一系列对话来设置Access数据库
⑤ 通过输入数据连接Access数据库。
先输入数据再确定字段
⒉ 数据库的连接
① ODBC连接数据库
打开ODBC数据源管理器面板。 在windows XP中打开控制面板,再打开管理工具,找到数据源(ODBC),双击图标打开管理器,选择系统DSN。添加数据源,点击添加按钮,开始创建数据源,在接下来的对话框中选择数据源的驱动程序,因我们使用的是Microsoft Access创建的数据库,所以选择Microsoft Access Driver(*.mdb)作为数据库驱动程序。点击完成按钮,填写数据源名,以简单易记为原则,这里我们以userinfo(表名)来命名,注意不要冲突。说明填不填都无所谓,是描述这个数据库的用途而已。点击选择按钮,选择你的数据库文件。找到自己想添加的数据库,选中即可。
② OLEDB连接数据库
在Dreamweaver 中,可以通过在连接字符串中包含 Provider 参数来创建 OLE DB 连接。打开Dreameaver,在站点里面先新建个ASP页面(index.asp)。 在“应用程序”面板中选中“数据库”标签。只要我们在前面建立了站点,选择了文档类型(即我们选的ASP Javascript的),并且还测试了服务器(http://localhost/newgn/);则当前我们看到就剩下第四步没有打勾了。 那现在就点击“+”号,选择“自定义连接字符串”。在弹出来的“自定义连接字符串”对话框中,"连接名称"随便写一个。“连接字符串”就要好好填写了。当"使用此计算机上的驱动程序"时应用绝对路径:DRIVER={Microsoft Access Driver (*.mdb)};DBQ=d: ewgndatabasecnbruce.mdb 否则“使用测试服务器上的驱动程序”采用Mappath转换路径"Driver={Microsoft Access Driver (*.mdb)};DBQ="& server.mappath("/newgn/database/cnbruce.mdb"),点击“测试”,出现成功对话框,成功连接数据库后,在DW里其实是自动生成了一个连接文件。位置在自动生成的Connections文件夹中,名称是你刚才在“自定义连接字符串”随便敲的为命名asp文件。还可以注意到DW数据库标签内看到mdb文件内的各个字段。
⒊ 动态网页开发技术
① 记录集的定义
分为简单记录集定义与高级记录集定义,简单记录集的定义使用户不必用SQL语句查询而快速定义记录集。高级记录集定义则通过SQL语来定义记录集。
② 记录集的绑定
记录集(查询)的绑定。在网页中插入一个表单,并输入需要插入到数据库的相关内容,然后通过记录集(查询)功能来实现表单和数据库的相互协调使用,并实现“动态”功能
③ 重复区域服务器行为
服务器行为其实一段VB代码,为了方便用户对记录集的操作,DW中将常用代码进行封装,命名为服务器行为。而重复区域服务器行为相当于一个FOR循环函数
④ 设置记录集导航条
添加记录集导航条以分页的方式用来显示重复区域服务器行为显示有限的记录
⒋XML动态网页制作
① XSLT
XSLT 是一种用于将 XML 文档转换为 XHTML 文档或其他 XML 文档的语言,XSLT 用于将一种 XML 文档转换为另外一种 XML 文档,或者可被浏览器识别的其他类型的文档,比如 HTML 和 XHTML。通常,XSLT 是通过把每个 XML 元素转换为 (X)HTML 元素来完成这项工作的。
⒌服务器的配置
① 站点存放点的创建
打开电脑,在D盘下建立一文件夹newgn(这个夹子就是你的站点存放点了),并且在里面建几个子文件夹(就好似你网站的子目录)。
② 建立虚拟目录
回到newgn的根目录,右键选择“共享和安全”(其实是快速地建立虚拟目录)
③ 设置IIS的虚拟目录
出现属性对话框后,选择“Web共享”标签,点选“共享文件夹”,出现共享别名对话框,选择默然设置,确定即可
⒍利用Dreamweaver创建站点
选择“编辑站点”,在弹出的属性框中选“高级”标签,从“分类”中先选“本地信息”,右窗口中设置站点名称,本地根文件夹,然后设置远程信息,访问选择“本地/网络”,远端文件夹仍选择站点文件夹d: ewgn,再接着“测试服务器”,“服务器模型”暂为ASP vbscript,“访问”本地/网络,“测试服务器文件夹”仍是站点文件夹d: ewgn,“URL前缀”在http://localhost后面添加“newgn/”,添加的东西就是设置的虚拟目录,这时,站点定义基本结束,点击确定。出现“编辑站点”对话框,“完成”即可。
⒎利用FIREWORKS处理图片
利用FIREWORKS处理一些图片和制作一些GIF动画图片

经验总结:
利用Dreamweaver做ASP动态网站主要为以下几步:
①网站服务器配置
②数据库设置
③数据库显示
④建立注册系统
⑤建立登陆系统
⑥美化网站

2. 实习心得
{要求500字以上}
l 过程、功能需求、菜单设计、界面设计、数据库设计、知识的应用技巧、团队合作感受等(指导教师可按实习内容进行要求并自行增加内容)
本次小学期期实训,我们小组主要制作了2个动态网站,而制作这2个动态网站的主要过程是:
⒈个人博客网站
①站点的定义
②数据库的连接
③制作站点搜索引擎及搜索结果页面
④制作日志列表
⑤制作BLOG首页面,基本页面设计
⑥定义并绑定记录集
⑦界面的美化
⑧设置重复区域
⑨指定日期的日志内容页面
⑩日志具体内容页面-日志内容和回复及日志回复功能
⒉电子商务网站
①站点的建立和连接字符串
②用户登陆及用户登陆信息显示页面
③错误信息页面设计
④创建模板
⑤添加登陆页面的嵌入框架
⑥用户注册页面的实现
⑦添加“密码”比较验证的代码
⑧制作最新产品导航条与滚动产品导航条
⑨产品展示的实现
⑩用户购物车:限制用户登陆、添加购物车程序、购物车链接、删除购物车
而这2个网站实现的功能大不相同,前者为一个博客网站,主要实现了站点搜索引擎、日志列表、站点日期等内容;后者为一个电子商务网站,主要实现了用户登陆、用户注册、密码验证、产品展示以及用户在线购物等内容;刚确定制作网站的时候,本设想将2个网站整合在一起,但由于技术和其他原因,这个目的没能实现。
制作动态网站,数据库最重要,在我们小组这次制作网站的过程中,花时间最多的地方就是数据库-数据库的建立、数据库与网站的连接、记录集的绑定、数据库安全等等,由于时间的关系,我们小组这次采用的是Acess数据库,它与其他数据库相比较相对来说操作比较简单。在数据库的制作中,这次我们小组遇到的难题主要是采用OLEDB连接数据库的方法,这个难题的关键之处是在于如何利用 Provider 参数来创建 OLEDB 连接,我们在网上搜索了大量资料并在XX老师的帮助下终于学会了如何使用OLEDB连接数据库。
总结这次小学期实训,这次2个网站能这么顺利的完成,离不开老师的帮助和小组成员的努力,虽然这次小学期实训我们小组只有2人,但是我们是一个有效率、有组织、有团队精神的小组,有效率在于小组制作网站中分工明确、讨论有目的;有组织在于小组成员能按时、有质量的完成自己的分工任务,值得一提的是这次小学期网站开发的大部分时间在小学期实训教室而我们小组成员还从未擅自旷课、上课迟到、早退等违纪行为;有团队精神在于我们小组实训过程中的共进退,从不因为自己分工任务提前完成而拉下其他组员,我们意识到小组是一个有组织、有记录、有共同目的的集体而不是一个由分散的个人组成的团体,在这次小学期实训中之所以提出小组分工这是锻炼小组组员的个人能力培养,而帮助有困难的组员这充分培养了组员之间的默契和团队协作能力。
这次是毕业前最后的一次小学期实训,也是自己做投入、最用心的一次实训,与以前的小学期相比,以前的小学期都是以掌握某种实训技能为主,而这次小学期则不仅掌握了动态网站的制作技术而且还制作出了自己的成果,自己非常高兴。经过这次小学期,我领悟到任何东西都要“学以至用”,学习了还不行还要看自己掌握了没,掌握了还不行还要看自己熟练了没,熟练了还不行还要做出一定成果。即将毕业,能接受这么一次有意义的小学期实训感觉很充实。
网址:www.liuboxue.cn

6、网页设计与制作实验

这个要求还是不难的,不过制作报告还是只有自己来写的。可以自己提供素材,才能百分百原创。支持在线预览效果。

7、如何设计网站版面

版面布局的步骤:

一.草案

新建页面就象一张白纸,没有任何表格,框架和约定俗成的东西,你可以尽可能的发挥你的想象力,将你想到的"景象"画上去(我们建议您用一张白纸和一支铅笔,当然用作图软件photoshop等也可以)。这属于创造阶段,不讲究细腻工整,不必考虑细节功能,只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张,最后选定一个满意的作为继续创作的脚本。

二.粗略布局

在草案的基础上,将你确定需要放置的功能模块安排到页面上。(注:功能模块我们在"首页设计-引子"中提过,主要包含网站标志,主菜单,新闻,搜索,友情链接,广告条,邮件列表,计数器,版权信息等)。注意,这里我们必须遵循突出重点、平衡谐调的原则,将网站标志,主菜单等最重要的模块放在最显眼,最突出的位置,然后在考虑次要模块的排放。

三.定案

将粗略布局精细化,具体化。(靠你的智慧和经验,旁敲侧击多方联想,才能作出具有创意的布局。)

在布局过程中,我们可以遵循的原则有:

1、正常平衡---亦称"匀称"。多指左右、上下对照形式,主要强调秩序,能达到安定诚实、信赖的效果。
2、异常平衡---即非对照形式,但也要平衡和韵律,当然都是不均整的,此种布局能达到强调性、不安性、高注目性的效果。
3、对比---所谓对比,不仅利用色彩、色调等技巧来作表现,在内容上也可涉及古与今、新与旧、贫与富等对比。
4、凝视---所谓凝视是利用页面中人物视线,使浏览者仿照跟随的心理,以达到注视页面的效果,一般多用明星凝视状。
5、空白---空白有两种作用,一方面对其他网站表示突出卓越,另一方面也表示网页品位的优越感,这种表现方法对体显网页的格调十分有效。
6、尽量用图片解说---此法对不能用语言说服、或用语言无法表达的情感,特别有效。图片解说的内容,可以传达给浏览者的更多的心理因素。

以上的设计原则,虽然枯燥,但是我们如果能领会并活用到页面布局里,效果就大不一样了。比如:

○网页的白色背景太虚,则可以加些色快;
○版面零散,可以用线条和符号串联;
○左面文字过多,右面则可以插一张图片保持平衡;
○表格太规矩,可以改用导角试试。

经过不断的尝试和推敲,你的网页一定会亮丽起来的哦:)

与网站版面设计实训相关的知识