搜索
网页设计网页设计——网站是企业向用户和网民提供信息（包括产品和服务）的一种方式，是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反应企业形象和文化的重要窗口。SQLJavaScriptVBScriptJavaHTMLJSPASP.netORACLEAccess/SQLServer课程结构静态网页动态网页应该熟练掌握网页开发工具和相关工具（图像处理、Flash、FireWork等应该熟练掌握网页语言，主要通过程序设计实现动态服务页面的开发。C#科目特征：操作性较强，运用广，讲究创意。软件环境：Dreamweaver、FrontPage、photoshop、firework、Flash等教学方法：案例教学教学要求：认真按时完成课外设计类作业。考核方法：交设计作品（2＋1）、期末闭卷考试课程介绍课程介绍以DreamWeaver为主要工具，讲述网页设计方法，中间将穿插一些必要的程序设计语言：HTML（HyperTextMarkupLanguage）：超文本标记语言JavaScript：非常流行的一种脚本语言CSS：层叠样式表，一种格式化网页的标准方式。还将穿插一些必要的图像处理软件：Photoshop、Firework要想提高静态网页设计水平，视个人情况，可以自学其它一些重要软件，如Flash（学院有开设选修课程）几个概念•网页•网站•网址•首页•主页•静态网页与动态网页网页设计---HTML首部主体字幕标记图像表格框架超连接表单首部HTML：HyperTextMarkupLanguage语言标记：Html/Html首部Head/Head主体Body/Body实例：网页结构.htmhtmlheadtitle文挡标题/title/headbody文档主体：文本、图像、声音、HTML命令等/body/htmlTitle/Title主题：用于显示该网页的主题。主体1.主体属性：Background=”..\abc.gif”BGColor=”#ffaacc”TopMargin=”30”margin:页边的空白leftmargin=50Topmargin=40link=#ff6600Vlink=#330099Text=Red实例：主体属性.htm文本2、分组、分段、分行显示文本BR中断本行标志，文本将在下一行输出。注意：无需相应的匹配标记若存在/br则html忽略p分段标志，对文本进行分段注意：无需相应的匹配标记若存在/p则html忽略div/div组标志!DivPBR!Align属性，用来设置组、段落的对齐方式例如：palign=“right”这段文字居右对齐/pdivalign=“center”这组p文字br居中p对齐/div！注：此外还可以用center/center来设置文本居中显示！3、注释标志：1!----2comment/comment例如：!--thisisahtmlcomment--commentthisisanotherhtmlcomment/comment实例：分行、居中与注释.htm4.文本1)格式化文本标记B设置黑体属性I设置斜体属性文本文本2)设置字体、字号和颜色Font[color=”#rrggbb”][face=”font”][Size=”integer”]/fontSize：整数，指定字体的大小，其取值为1-7Color：字体颜色，除了用“RRGGBB”表示外，也可通过名称指定：Black黑Navy海蓝Blue蓝Olive橄榄Green绿Purple紫Teal淡青Yellow黄White白Gray灰Lime橙Fuchsia紫红Maroon栗Red红Aqua淡蓝Silver银白例如：fontcolor=redthisisred/fontfontcolor=bluethisisblue/font注：控制行内不同的文字效果也可以用标记－－span/span例如：spanstyle=“color:red”这是一段/spanspanstyle=“color:blue”有多种颜/span色和字体大小构成spanstyle=font-size:18px的一行文字span文本5.标题标志Hn/Hnn=1-6如：H1这是一级标题/H1实例：标题.htm6.列表有序列表：用来定义一个加编号的列表，由标记OL/OL定义。格式：OL[type=”type”][start=”interger”]/OLtype:A（大写字母）、a（小写字母）、I（大写数字）、i（小写数字）1（阿拉伯数字）start：整数，用来指定单前列表想的顺序值。无序列表格式如下：UL[type=”type”]LIItem1……../ULtype：circle（空心园）、disc（实心园）、squire（方块）注：dir/dirmenu/menuul/ul也可以用来定义无序列表实例：有序和无序列表.Htm“图像列表”的制作方法？图像图像的格式：JPG：适用于较大的图像GIF：适用于小图像，并允许是透明和动画PNG：矢量图像图像的处理工具PhotoshopFireWorkFlashCoreDraw图像通过IMG标记，把图像或视频放到Web页面中。格式：img[align…][alt=”text”][border…][controls][dynsrc=”url”][ismap][loop=”ingeger”][src=”url”][start=”start-event”][usemap=”map-name”][vspace=”integer”][width=”integer”]各属性值意思如下：Alt：指定加载图像时显示的文字，这些文字也是当光标移动图像时显示的文字。Border：整数，图像边框的宽度Heigth：整数，图像的高度Width：整数，用来指定图像的宽度。它允许浏览器在图象下载之前就可以正确格式化页面。SRC：指定要显示的图像的URLDynsrc：（DynamicSource动态源）指定到视频剪辑或VRMl文件的URL。Controls：指定该选项后，如果有视频剪辑，则显示一套视频控件Hspace：整数，用来指定图像的左、右边距。Loop：整数，用来指定视频剪辑播放次数。Start：指定何时开始播放DYNSRC文件，其取值可以是FileOpen或MouseOver。图像例子：Image.Htm（显示两个图像，一个是JPG，另一个GIF）注：要播放视频文件，应使用Dynsrc属性，该属性必须与Controls属性一起使用。如果Dynsrc和SRC属性同时使用，因Dynsrc优于SRC，所以若计算机有多媒体功能，而且所指定的视频文件不存在时，才显示由SRC属性指定的图形文件。例如：播放AVI文件.Htm图像的对齐方式align属性：top：middle：bottom：left：right：超链接路径：绝对路径：带盘符的路径相对路径：习题：1、在b.htm中链接e.jpg2、在c.htm中链接d.jpg3、在e.htm中链接d.jpg网络地址绝对地址：协议头：//域名/文档路径/文件名。相对地址：只包含文档路径和文件名的地址。锚点链接：网页内部导航链接！需要先定义锚点（标签）！注意看操作方法超链接作用：用来定义一个Web页到另一个Web页的跳转，在Web页中，超链接可以是文本或图像。格式：A[href=”URL”][name=”name”][Target=”rarget_window”][title=”title”]………/a含义：Href：制定目标节点的URL链接Name：超链接的名字Target：指定一个框架窗口，用该属性可以指定不同的窗口，包括：_blank把链接加载到一个新的无标题窗口_parent把链接加载到链接所在文档的父文档_self把链接加载到链接所在的同一个框架窗口_top把链接加载到整个窗口例子：hyperlinks.htm超链接二、文字图像链接链接到本地站点(内部链接)！看不到盘符的链接！！链接不允许出现盘符！链接到其它站点(外部链接)！应该包含协议头信息！页内链接文件下载链接——指向下载文件跳转菜单字幕标记MARQUEE（字幕标记）HTML提供了一个字幕标记，可以用来滚动字幕。格式：Marquee[align…][behaviorl=”behavior”][bgcolor…][direction=”direction”][height…][hspace…][loop=”integer”][scrollamounto=”integer”][scrolldelay=”integer”][vspace=”integer”][width=”integer”]滚动内容（文字、图片等）/marqueeBehavior：指定文本动画的性质，其取值为：Scroll、Slide或AlternateDirection：指定文字移动的方向，其取值为：left、Right、UP或DownHeight：整数，指定字幕的高度，以象素为单位Width：整数，用来指定字幕的宽度，以象素为单位Hspace：整数，指定字幕的外部边缘与浏览器窗口之间的左右边距Loop：整数，用来指定字幕滚动次数，也可以设置为关键字InfiniteScrollamount：整数，用来指定文字每次滚动所移动的距离（象素）ScrollDelay：整数，指定滚动运动之间的时间，以毫秒为单位Vspace：整数，用来指定字幕的外部边缘与浏览器窗口之间的上下边距例子：Marquee.Htm表格通过标记table/table来定义，表格可分为表头、行、单元格构成，这些元素分别用不同的标记来定义：TR/TR：定义表的行TD/TD：定义单元格TH/TH：定义表头/*与TD等价，可以相互替换*/CAPTION/CAPTION：定义表的标题表格1)定义表格Table/TableTable[align=”align”][backround=”url”][bgcolor=”#|RRGGBB”][border=”integer”][bordercolor=”#RRGGBB”][borderColorDark=”#RRGGBB”]borderColorLight=”RRGGBB”][Width=”integer”][heitht=“integer”]/TableAllign：制定表的对齐方式，取值为三种：Left、CENTER、RightBackground：指定用作背景图形的一个URLBGColor：指定表格的背景颜色Border：整数，指定边框的尺寸，象素为单位。BorderColor：指定边框颜色BorderColorLight：指定3D边框的高亮显示颜色，必须和Border属性一起使用BorderColorDark：指定3D边框的阴影颜色，必须和Border属性一起使用CellPadding：整数，用来指定单元格之间在水平和垂直方向上的间距，以像素为单位Width：整数，用来指定表的宽度，以像素为单位；也可以把宽度指定为一个百分比。Height：整数，用来知道表的高度表格2)定义标题：caption[align=”align”][valign=”valign”]/captionValign:指定标题的垂直对齐方式，取值为：Top、Middle、Bottom3)定义行：TR/TRTR[align=”align”][background=”url”][bgcolor=”#rrggbb”][va