网页设计基础知识.docx
- 文档编号:2078550
- 上传时间:2022-10-26
- 格式:DOCX
- 页数:13
- 大小:698.21KB
网页设计基础知识.docx
《网页设计基础知识.docx》由会员分享,可在线阅读,更多相关《网页设计基础知识.docx(13页珍藏版)》请在冰豆网上搜索。
网页设计基础知识
网页设计基础知识
一、教学目标
1.网站的概念与开发规范。
2.ASP技术。
3.IIS安装与配置。
二、课时分配
本项目共4个任务,建议安排4课时。
三、教学重点
网站的概念与开发、动态网页技术和本地站点服务器配置。
四、教学内容
任务1网站的组成与开发规范
任何一个网站在开发之前都需要定制一套开发约定和规则。
这类规则可以实现对网站整体风格的统一,代码编写的维护和后续扩展。
一个优良可行的规范可以使网页设计师在工作中得心应手,取得事半功倍的效果。
阶段1网站的组成
1.网站名称
2.网站网址
通常,把采用域名系统命名的网址称为“域名”或“网址”(网站的IP地址也可以称为“网址”),域名地址以层次化表示。
(1)后缀
最右边的后缀用于标识域名的性质,如cn表示中国、edu表示教育单位。
(2)名称
是域名中间的网站名称,如,这个域名的网站名称就是sina。
(3)前缀
最左侧的前缀用于标识网站的类别,如:
www表示网络服务。
通常,可以根据前缀看出网址对应的是什么内容,如下所示。
www:
网站服务。
ftp:
数据上传下载服务。
bbs:
论坛服务。
mail:
邮局服务。
down:
下载服务。
news:
新闻服务。
movie:
电影服务。
music:
音乐服务。
(4)协议
在网址的左侧会有HTTP的协议标识,这表示IE浏览器的请求会由HTTP负责传送到服务器,服务器中存储的网页内容也会由HTTP负责传送到用户的浏览器窗口中。
3.服务器
通常,将存放网站内容的计算机称为“服务器”,因为这样的计算机提供了网站访问等服务。
4.网页
网页就是可以通过IE等浏览器看到的网站文件,网页是网站的基本组成单元,它是网站具体内容(如文字、图片、视频等)的载体,需要通过不同的网页存储各种各样的内容。
5.超链接
在网站中,超链接(也称“链接”)是不可或缺的组成部分,通过链接可以实现网站中栏目与内容、页面与页面,以及文字/图片与电子邮件、程序、图片、音乐和视频网址等方面的关联。
阶段2网站开发流程
在任何网站项目开始实施之前都应该有一个工作步骤也就是工作流程。
下面列出了一个网站常用的较为合理的开发流程图,能够比较好地体现开发的整个环节,如图所示。
阶段3网站信息的收集和准备
收集了各方面的内容,确定了相应的交互功能后,下一步就是这些内容的分组。
分组的目的是为了根据浏览者的访问习惯,有序地展示内容,吸引访问者看下去,同时在分组过程中还可发掘潜在的信息内容。
信息分组的最终目的是为了确定整个网站的导航系统。
阶段4网站的目标定位
1.目标定位必须有明确的依据
2.目标定位必须了解哪些资源可被利用
3.目标定位在规模上要具有可扩展性
4.目标定位必须了解目标人群的特征
阶段5网站的风格和创意
1.色彩运用
色彩是“整体形象”最重要的元素。
2.版面设计
一个好的版面设计可以突显重点,让浏览者对“主次”内容很容易加以区分。
3.程序开发
通过结合ASP、PHP等动态网页技术实现的互动程序,能让浏览者及时对网站内容给出交互性的意见。
4.特效使用
Flash动画、Javascript、Javaapplets、DHTML等的合理使用会让网页看起来更为生动活泼。
创意思考的过程可分五个阶段:
资料收集阶段、资料整理阶段、创意产生阶段、调查验证阶段和开发制作阶段。
阶段6网站的形象设计与配色
下面将介绍一些网站形象设计中配色的使用技巧。
1.了解网站所要传达的讯息和品牌
2.了解网站的目标人群
3.配色过程中不要滥用颜色
4.阅读主体内容部分建议使用对比色
5.配色要有时效性
阶段7网站的框架与布局
网站的框架与布局大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash型、变化型。
下面列出了一些在网站的框架与布局设计时应该注意的地方。
1.分辨率是设计网页时必须考虑的问题
网页的整体宽度可分为三种设置形式:
百分比、象素、象素+百分比。
2.空间的合理利用也极为重要
只有合理的安排、有机的组合,使页面达到平衡,即使在页面的一边腾出大面积留白,并不会让人感到空,却会给人留下广阔的思考空间。
3.合理的广告布局
各类的广告投放不宜过多,适中即可。
任务2ASP技术
阶段1什么是静态网页
一般来说,静态网页就是在用户访问网页之前,其内容已经由网页的作者完全确定了。
这些网页是由一些HTML代码组成的,可以直接通过文本编辑器编写,并保存为.htm或.html格式的文件。
阶段2什么是动态网页
动态网页可分为客户端动态网页和服务器端动态网页两类。
1.客户端动态网页
在客户端模型中,附加到浏览器上的模块(插件)完成创建动态网页的全部工作。
2.服务器端动态网页
在服务器端模型中,HTML源代码与混合在其中的一套指令被传回到Web服务器。
当用户请求该页时,这些指令在服务器上被处理,然后再返回浏览器。
阶段3提供动态网页的技术
1.能提供动态网页的客户端技术
这里的客户端技术包括脚本语言、各种控件以及各种编程语言。
如JavaScript、VBScript、ActiveX控件。
2.提供动态网页的服务器端技术
(1)CGI
CGI即公共网关接口(CommonGatewayInterface),它是添加到Web服务器的模块。
CGI允许用户调用Web服务器上的另一个程序(如Perl脚本)来创建动态网页,CGI的作用是将用户提供的数据传递给该程序进行处理。
(2)ASP
ASP即动态服务器页面(ActiveServerPages),它通常依赖于JavaScript或VBScript脚本语言来创建动态网页。
(3)JSP
JSP指JavaServer页面,是允许用户将标记(HTML或XML)与Java代码相组合而动态生成Web页的一项技术。
(4)PHP
PHP是开放源代码和跨平台的,并且可以在WindowsNT和许多Unix版本上运行,而且可以构造成Apache模块和二进制模块。
阶段4ASP简介
ASP是ActiveServerPages的缩写,是一种动态页面设计技术。
使用ASP技术建立的网站可以实现与用户之间的交互,可以根据用户的请求动态生成相应的页面,并返回给客户端。
ASP文件的运行过程是这样的:
当用户使用浏览器请求ASP页面时,Web服务器响应客户端请求,调用ASP引擎来执行ASP文件,并解释其中的脚本语言(JavaScript或VBScript),若需要访问数据库,则可通过ODBC连接数据库,由数据库访问组件ADO完成数据库操作,最后将ASP文件生成为包含有数据查询结果的HTML页面返回到客户端。
阶段5ASP文件的组成
ASP文件通常由以下几部分构成:
(1)HTML标记部分。
(2)ASP语句部分
(3)文件包含部分。
任务3网页设计工具Dreamweaver
Dreamweaver支持以下3种编辑模式。
设计模式:
无需编写源代码,即可完成网页的设计,源代码会自动生成。
代码模式:
主要用于对网站进行优化与维护。
拆分模式:
这种模式下会同时提供两个窗格,上窗格为“代码”编辑环境,下窗格为“设计”编辑环境。
如图所示。
在使用Dreamweaver进行设计之前,先对几个知识点进行介绍。
(1)行为
行为由“事件”和该事件触发的“动作”组成。
“事件”是指浏览器生成的消息,它指定了该页访问者需要执行的某种操作。
“动作”是指一段预先编写的JavaScript代码,可用于执行诸如打开浏览器窗口、显示或隐藏AP元素、播放声音或停止播放AdobeShockwave影片的任务。
添加行为时,需要遵循3个步骤:
选择对象→添加动作→调整事件。
(2)表单
表单是Internet用户和服务器之间进行信息交流的一种重要工具。
在Dreamweaver中有一个“表单”工具条,如图所示。
(3)CSS
CSS是“CascadingStyleSheet”的缩写,即“层叠样式表”。
在页面制作中采用CSS技术,可以有效地对页面的布局、字体、颜色、背景、鼠标指针和其他效果实现更加精确的控制。
在Dreamweaver中可以定义如图所示的三种规则类型。
CSS的基本写法有3种。
第一种是在HEAD内实现。
第二种是在文件外的调用。
第三种是在BODY内的实现。
(4)定义脚本语言和代码页
ASP文件中可以使用的脚本语言有多种,如JavaScript、VBScript和PerlScript等。
常见的定义代码有以下两种。
指定使用VBScript:
<%@LANGUAGE="VBSCRIPT"CODEPAGE="936"%>。
指定使用JavaScript:
<%@LANGUAGE="JavaScript"CODEPAGE="936"%>。
任务4定义站点及配置服务器
阶段1IIS的安装
IIS自带的备份功能使用起来非常简单,具体操作如下:
(1)右击“本地计算机”→“所有任务”分支,选择“备份/还原配置”命令,打开“配置备份/还原”对话框,
(2)在“配置备份/还原”对话框中,单击“创建备份”按钮,打开“配置备份”对话框。
(3)要恢复IIS配置只需要在备份文档列表中选择要进行还原的备份文件,然后单击“还原”按钮。
阶段2搭建网站
下面就详细介绍一些搭建网站过程中必须掌握的安全配置技巧。
(1)在“控制面板”右侧列表框内选中“管理工具”选项,打开“计算机管理”对话框。
选择“本地用户和组”节点下的“用户”分支,在右侧列表框中创建两个用户账号test1与test2。
(2)在本地服务器选择一个目录作为FTP用途,或者选择远程服务器商提供的FTP空间。
在此目录下可建立一个名为“htdocs”的文件夹,然后对应所使用的帐号建立子文件夹。
(3)在FTP空间根目录属性的安全选项卡中添加用户组。
阶段3测试与调试
针对网站项目的测试与调试一般需要注意以下几个方面的内容:
1.模块功能测试
2.整体性能测试
3.系统安全性测试
4.运行稳定性测试
5.浏览器兼容性测试
6.操作易用性测试
7.链接有效性测试
8.代码合法性测试
阶段4发布及维护
(1)单击“站点”→“管理站点”命令,将弹出“管理站点”对话框,如图所示。
(2)单击“编辑”按钮,在“站点定义”的测试文件这一步中选择以FTP方式连接到测试服务器,并设置相应的FTP信息,包括Web服务器的主机名或FTP地址、用户名、密码等。
单击“测试连接”按钮,可以按此设置与服务器尝试连接。
如图所示。
(3)单击“完成”按钮,结束远程站点的完整设置。
这样就可以直接对网站内容进行发布了,如图所示。
五、课后练习
完成“本章习题”的练习。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 基础知识