静态网页设计代码
基本<div>+<css>代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"><!--body,td,th {font-size: 16px;color: #000000;}body {margin-top: 10px;}.STYLE1 {color: #000000}.STYLE2 {color: #00FFFF}--></style></head><link href="index.css" rel="stylesheet"/></head><body><div class="main"><div class="menu"><ul><li class="current"><a href="">首页</a></li><li><a href="">餐饮美食</a></li><li><a href="">休闲娱乐</a></li><li><a href="">美容美发</a></li><li><a href="">关于我们</a></li><li><a href="">收藏我们</a></li><li><a href="">登录</a></li><li><a href="">注册</a></li></ul></div><div class="ad"><img src="images/banner_l1.gif" /></div><div><div class="left"><img src="images/banner.gif" width="475" /> </div> <div class="right"><img src="images/2013050315234570697.gif" width="475" /> </div></div><div><div class="left1"><img src="images/2013051314293280059.gif" width="475"/></div><div class="right1"><img src="images/banner.gif" width="475"/></div></div><div class="left2"><p id="green">推荐<span class="STYLE1">商家</span></p> <ul><li>大丰收鱼庄（福州店）地址：台江万象城4楼</li><li>合作伙伴2</li><li>合作伙伴3</li><li>合作伙伴4</li><li>合作伙伴5</li><li>合作伙伴6</li><li>合作伙伴7</li><li>合作伙伴8</li><li>合作伙伴9</li><li>合作伙伴10</li></ul> <input name="" type="image" src="images/reading.gif" border="0" /> <div><p id="green">餐饮<span class="red">美食</span></p><ul><li>大丰收鱼庄（福州店）</li><li>合作伙伴2</li><li>合作伙伴3</li><li>合作伙伴4</li><li>合作伙伴5</li><li>合作伙伴6</li><li>合作伙伴7</li><li>合作伙伴8</li><li>合作伙伴9</li><li>合作伙伴10</li></ul><input name="" type="image" src="images/reading.gif" border="0" /></div><div><p id="green">休闲<span class="STYLE1">娱乐</span></p><ul><li>大丰收鱼庄（福州店）</li><li>合作伙伴2</li><li>合作伙伴3</li><li>合作伙伴4</li><li>合作伙伴5</li><li>合作伙伴6</li><li>合作伙伴7</li><li>合作伙伴8</li><li>合作伙伴9</li><li>合作伙伴10</li></ul> <input name="" type="image" src="images/reading.gif" border="0" /></div><div><p id="green">美容<span class="STYLE1">美发</span></p><ul><li>大丰收鱼庄（福州店）</li><li>合作伙伴2</li><li>合作伙伴3</li><li>合作伙伴4</li><li>合作伙伴5</li><li>合作伙伴6</li><li>合作伙伴7</li><li>合作伙伴8</li><li>合作伙伴9</li><li>合作伙伴10</li></ul> <input name="" type="image" src="images/reading.gif" border="0" /></div> </div><div class="mid"><table width="1000" border="0" cellspacing="60"><tr><td height="260"><img src="images/t7.jpg" width="200"/></td></tr><tr><td height="300"><span class="last"><img src="images/t6.jpg" width="200"/></span></td></tr><tr><td height="250"><img src="images/t5.jpg" width="200"/></td></tr><tr><td height="300"><img src="images/t4.jpg" width="200"/></td></tr></table></div><div class="right2"><div class="D"><ul><li> </li></ul></div><div class="d"></p><p class="red">餐饮<span class="STYLE2">美食</span></p><li>火锅</li><li>私房菜</li><li>川菜</li><li>粤菜</li><li>自助</li><li>大排档</li></ul> </div><div class="A"><ul><li> </li></ul></div><div class="a"><p class="red">休闲<span class="STYLE2">娱乐</span></p> <ul><li>Home</li><li>TemplateInfo</li><li>Style Demo</li><li>Blog</li><li>Archives</li><li>Web Templates</li></ul></div><div class="B"><ul><li> </li></ul></div><div class="b"><p class="red">美容<span class="STYLE2">美发</span></p> <ul><li>Home</li><li>TemplateInfo</li><li>Style Demo</li><li>Blog</li><li>Archives</li><li>Web Templates</li></ul></div><div class="C"><ul><li> </li></ul></div><div class="c"><p class="red">网站<span class="STYLE2">信息</span></p> <ul><li>总会员数</li><li>新增会员数</li><li>在线会员数</li><li>单日访问量</li><li>总访问量</li></div></div><div class="last"><table width="950" border="0" cellpadding="14.9" cellspacing="15" bgcolor="#CC6600"><tr><td width="190"><img src="images/t1.jpg" /> 樱桃采摘</td><td width="190"><img src="images/t2.jpg" /> 悦木之源</td><td width="190"><img src="images/t3.jpg" /> 串串传奇</td><td width="193"><img src="images/t4.jpg" /> 刷刷锅</td></tr><tr><td><img src="images/t5.jpg" width="190" /> 香格里拉</td><td><img src="images/t6.jpg" width="190" /> 穿衣汇</td><td><img src="images/t7.jpg" width="190" /> 厨房印象</td><td><img src="images/t8.jpg" width="190" /> 膳园</td></tr></table></div></div></body></html>@charset "utf-8";/* CSS Document */.main{ width:950px; border:solid 1px;}.main .menu{width:100%; height:75px; background:url(images/main_bg2.jpg)}.main .menu ul{ list-style:none;margin-left:0px; padding-left:0px}.main .menu ul li{float:left; margin-left:5px; width:110px; height:50px;padding-top:25px; text-align:center}.main .menu ul li a:link{color:#FFFFFF; text-decoration:none}.main .menu ul li a:visited{color:#FFFFFF; text-decoration:none}.main .menu ul li a:hover{ font-weight:bold}.current{ background:url(images/l_menu.gif)}.main .ad{width:95%}.main .left{float:left}.main .right{float:left}.main .left1{float:left}.main .right1{float:left}.main .left2{float:left;width:40%}.main .left2 ul{list-style:none}.main .left2 ul li{border-bottom:dotted 1px}.main .mid{float:left;width:30%}.main .right2{float:right;width:30%}.main .right2 .a{border-bottom-color:#CCCCCC;border-left-color:#CCCCCC;border-top-color:#C CCCCC;border-bottom-style:solid;border-left-style:solid;border-top-style:solid}.main .right2 .b{border-bottom-color:#CCCCCC;border-left-color:#CCCCCC;border-top-color:# CCCCCC;border-bottom-style:solid;border-left-style:solid;border-top-style:solid}.main .right2 .c{border-bottom-color:#CCCCCC;border-left-color:#CCCCCC;border-top-color:#C CCCCC;border-bottom-style:solid;border-left-style:solid;border-top-style:solid}.main .right2 .d{border-bottom-color:#CCCCCC;border-left-color:#CCCCCC;border-top-color:# CCCCCC;border-bottom-style:solid;border-left-style:solid;border-top-style:solid}.main .right2 .A ul{list-style:none}.main .right2 .B ul{list-style:none}.main .right2 .C ul{list-style:none}.main .right2 .D ul{list-style:none}.main .right2 .a ul li{border-bottom:dotted 1px}.main .right2 .b ul li{border-bottom:dotted 1px}.main .right2 .c ul li{border-bottom:dotted 1px}.main .right2 .d ul li{border-bottom:dotted 1px}#green{font-size:24px;color:#00FFFF}.red{font-size:24px;color:#000000}。
6_静态网页制作
换行
对于需要换行的地方，应加上<Br>标记， 有了它浏览器会自动将右边的文字转移至 下一行。请注意， <Br>是单标记。 示例：没有换行效果 换行效果
段落标记
为了使文本排列的整齐和清晰，文字段落 之间常用<P>和 </P>来做标记。 </P>是可 以省略的，因为下一个<P>的开始就意味着 上一个<P>的结束。 <P>标记还有一个属性ALING，它用来指明 字符显示时的对齐方式，一般值有 CENTER、LEFT、RIGHT3种。 示例：段落标记效果
6.2.2 页面布局与文字标记
文本是网页传播信息的基本载体，在网页 中的重要地位可想而知。对于任何一个基 本网页来说，文本都是必不可少的，文本 的格式化也是非常重要的。
标题
HTML中提供了相应的标题标记<Hn>。HTML 总共提供6个等级的标题，n越小标题字号就越大。 字号大 <H1>„ </H1> 一级标题 <H2>„ </H2> 二级标题 <H3>„ </H3> 三级标题 <H4>„ </H4> 四级标题 <H5>„ </H5> 五级标题 字号小 <H6>„ </H6> 六级标题 示例:标题效果
1. 2. 3. 4.
5.
简单动态页面处理流程 浏览器发出对动态页面的请求； Web服务器找到该页面，传给应用服务器； 应用服务器扫描页面，执行代码，生成结果； 应用服务器把结果页面返回给Web服务器； Web服务器发回该结果页面给浏览器。
实验2HTML与静态网页
background-color: #000033; } .STYLE4 {font-size: 18px; color: #000000; } --> </style> </head>
<body
leftmargin="0"
topmargin="0"
marginwidth="0"
marginheight="0" >
<head>
<meta
http-equiv="Content-Type"
charset=gb2312" />
<title> 公司首页 </title>
<style type="text/css">
<!--
.STYLE1 {
color: #FFFFFF;
font-size: 18pt;
font-family: "
class="STYLE2" scope="row"> 产品介绍 </th>
</tr>
<tr>
<th
height="46"
background="INDEX_LM.GIF"
class="STYLE2" scope="row"> 技术支持 </th>
</tr>
</table></td>
<td width="568" valign="top"><table width="568" border="0"
网页设计代码大全
<body></body> 段落标记background:网页背景图像<p>…</p> bgcolor：网页背景颜色align:left right center text:字体颜色强制换行标记link：可链接文字的色彩<br></br> alink：被鼠标点中时可链接文字的颜色预排格式标记vlink：已经单击过的可链接文字的颜色<pre></pre> leftmargin：页面左边距插入水平线标记topmargin：页面上边距<hr width=“宽度” size=“厚度”标题格式标记align=“对齐方式” color=“颜色”Alink：被鼠标点中时可链接文字的颜色noshacle：除阴影 > Vlink：已经单击过的可链接文字的颜色文本缩标记Leftmargin：页面左边距<blockquote>…</blockquote> Topmargin：页面上边距列表标记标题格式标记 1.无序<hn>标题</hn> （范围（h1-h6））<ul type= “加重符号类型”> align：left(左) right(右) center(中) <li type=“加重符号类型”>列1 bottom(底) top(顶) <li type=“加重符号类型”>列2 文字格式标记………<font face=“字体” size=“字号”</ul> color=“颜色”>文字</font> type:disc● circle○ square■字形设置标记 2.有序<b>字形</b> 粗 <u>字形</u> 下划线<ol type=“序号类型” stare=“起始号码”> <i>字形</i> 斜 <big>字形</big>文字增大<li type=“加重符号类型”>列1 <strike>字形</strike> 删除线<li type=“加重符号类型”>列2 <small>字形</small> 文字减小………<sup>字形</sup> 上标 <sub>字形<sub>下标</ol> <tt>字形</tt> 宽体 <em>字形</em> 强调 3.定义<bink>字形<bink> 闪烁 <cite>字形<cite>斜<dl> <dt>条目1<dd>条目1的说明<strong>字形</strong> 特别强调………</dl>文字滚动标记<img>的图像标记<marquee>文字滚动</marquee> <img> behavior(滚动方式):alternate(交替) sic：图片的路径 scroll(往复) slide(一次) longdesc：详细说明bgcolor：背景颜色alt：替代说明direction(滚动方向):up(上) down(下) width和height：图片的宽和高 left(左) right(右) border：图片外围边框的宽度height和width:滚动的区域hspace和vspace：水平和垂直方向空白loop：循环的次数值是-1 align：left right center scrollamount:滚动的速度加快<img>的视频标记scrolldelay:滚动的速度延迟src：静态图像的路径hspace和vspace:滚动的水平垂直空间dynsrc：视频的路径表格标记loop：infinite或-1(反复播放) <table> start(设置何时播放视频文件)：fileopen和mouseover <caption>表格标题</caption>→align controls:加播放控制条<tr>→align和valign loopdelay:两次播放的间隔<th>表头1</th> <th>表头2</th>…背景音乐标记</tr> <bgsound> <tr> src:音乐地址 loop：次数(-1) <td>(width和nowrap)表项1</td>…多媒体标记<embed></embed> </tr> src：多媒体的地址………height和width：播放的区域<table> hidden：播放面板的显示和隐藏值true和false summary:简要说明 bgcolor:表格的背景颜色autostart：是否自动播放(true和false) background:表格的背景图像 border:表格线的粗细loop:是否循环(true和false) width和height表格的宽和高 align：左、右、中超链接标记valign:顶、(middle)中、底 bordercolor:表格线的颜色<a>…</a> nowrap：禁止表格单元格内的内容自动换行href:链接到的目标的地址rowspan=n n=1 为一行单元格target:链接的目标窗口colspan=n n=1 为一列的合并self(原) blank(新) parent(上) top(整)1.表单标记<form><form name= “form_name” method=“method” action=“url” enctype=“value”target=“target_win”>……</form>name：设置表单的名称 method=处理程序从表单中获得信息的方式其取值为get和postaction：定义表单处理程序（asp、cgi等程序）的位置（相对位置或绝对位置）enctype：设置表单资料的编码方式 target：设置返回信息的显示窗口2.输入标记<input><input name=“field_name” type=“type_name”>name:设置输入区域的名称type：设置输入区域的类型（有10种）①文本域text（maxlength:文本域的最大输入字符 size：文本域的宽度 value:初始默认值）②密码域password(maxlength:密码域的最大输入字符 size：密码域的宽度)③文件域file（input type=“file”）④复选框checkbox(（checked）表示此项被默认选中 value：选中项目后传送到服务器端的值)⑤单选框radio(同4)⑥普通按钮button(value值代表显示在按钮上的文字)⑦“提交”按钮submit(value=“button_text”)⑧“重设”按钮reset（value=“button_text”）⑨图像域image(src:设置图片的路径)⑩隐藏域hidden（input type=“hidden”）3.菜单和列表的标记<select>和<option><select name=“name” size=“value” multiple><option value=“value” selected>选项一<option value=“value”>选项二………</select>size:显示的选项数目（multiple：不用赋值就可以直接加入到标记中，就成多选了）<optiop>→value:用来给<optiop>指定的选项赋值这个值是要传送到服务器上的（selected）：指定初始默认的选项4.文本框标记<textarea><textarea></textarea>name：名称 rows：设置文本框的行数 cols：文本框的列数1.框架集标记<frameset><framese cols=“value,value,…” rows=“value,value,…” framespacing=“value”bordercolor=“color_value”>……</frameset>cols:左右分割窗口（用“，”分割） rows：上下分割（用“，”分割）framespacing：框架集的边框宽度bordercolor：框架集的边框颜色2.框架标记<frame src=“file_name” name=“frame_name” scrolling=“value” noresize>…</frame>src：框架显示的文件路径 name：框架的名称（用来供超文本链接标记）scrolling：滚动条是否显示值(yes , no , auto)3.不支持框架标记<noframes>………</noframes>css1.css称为“层叠样式表”或“级联样式表”2.css的基本语法：html标记｛标记属性：属性值；标记属性：属性值；…｝列如：b,i,h1{color:red}3.css的实现方法（有三种）①在head内实现（叫内部样式表他写在html的<head></head>里面的）内部样式表要用style标记（<style type=“text/css”> h1{color:red}</style>）②在body内实现（叫内嵌样式他在body中实现，主要是在标记中引用，只对所在的标记中有效）③在文件外实现（叫外部样式表）<link href=“style.css” rel=“stylesheet”>4.三种css实现方法的比较样式的优先级依次是内嵌样式，内部样式表，外部样式表使用外部样式时相对于前两种有以下优点：②样式代码可以复用，一个外部css文件，可以被多个网页共用②便于修改，只需修改css文件，不用修改每个网页③提高了网页的显示速度欢迎您的下载，资料仅供参考！致力为企业和个人提供合同协议，策划案计划书，学习资料等等打造全网一站式需求。
Dreamweaver静态网页制作过程(ppt 39页)
d)Text（文本） 这里可以设置文档页面中文字的前景颜色，实际上设置的是 <body>标记的text属性。
e)Links（链接） 这里可以设置文档页面中尚未访问过的超级链接的文字颜色， 实际上设置的是<body>标记的link属性。
Dreamweaver静态网页制作(续)
地机上所做好的静态网页（文件名 一般为index.htm)上传至服务 器中，然后用/用户名/index.htm来访问 所上传的网页。检查是否正确。
方法二： 通过PWS来实现，在个人机器上将网页文件（包括图片、声音、 视频、动画等元素）拷贝至C:\inetpub\wwwroot\目录下，然后 在浏览器中输入http://127.0.0.1/ 如果不能正确的看到网页，应 该检查一下PWS WEB管理器的默认的文件是否设置为
index.htm
er静态网页制作(续)
三、基本操作 1、编缉文本 1）添加文本的方法是一种是直接在文档窗口中键入文本内容，另一种是在文
档窗口中，将插入点设置到要放置文本的地方，打开Edit下拉菜单，将文 本导入。 2）编缉文本（大小、颜色、字体、样式） 可以直接通过属性面板来实现或通过选择“文本字体”来设置 2、超链接 创建超链接最常见的做法是将超链接信息设置在文本及图像上。使其链接至其 它的网页或网站上。源端点和目标端点 目标端点有：图片、电子邮件地址、多媒体文件、程序（如： javascript:window.close()关闭当前窗口 javascript:windows.print()打印文 档 1）链接的类型
Dreamweaver静态网页制作
高职院校《静态网页设计》教学改革研究
画制作知识 ； ⑤理解和 掌握数 据表单 的基 本知识 ； ⑥ 了 解
１ 课 程联 系
前 期 课 程 及 后续 课 程 之 间 联 系及 能 力 培 养 见表 １ 。
网站的测 试 、 发 布及维 护知 识 ； ⑦ 理 解 和 掌 握 ＤＩ Ｖ＋ Ｃ Ｓ Ｓ
技术知识 。
３ ． ２ 能 力 目标 口
③ 充 分 调 动 学 生 自学 的积 极 性 ， 给予 学 生较 宽松 的学 习 环
境， 培 养 学 生 的 团 队协 作 能 力 ； ④ 给 予 学 生 专 业 的 技 术 指
＿
ｔ ｏ Ｓ ｈ ｏ ｐ Ｃ Ｓ ５ ； ④ 动 画制 作 软 件 ： Ｆ ｌ ａ ｓ ｈ／Ｓ ｗ ｉ ｓ ｈ 。
７ 实施 说 明 １
① 与 企 业 紧密 合 作 ， 让企 业参 与课 程建设 ， 如 引 入 企
业 的实 际项 目、 工 作 规 范 与流 程 、 企 业 文化 等 ； ② 精 心设 计 教学环节 ， 在 教 学 任 务 中体 现 任 务 驱 动 和 “ 教学 做” 合一；
技能 。
① 具有一 定的需 求分析 能力 ； ② 具有一定的团 队协作
能力与团队沟 通 能力 ； ③ 具 有 一 定 的 资 料 收 集 与 整 理 能
力； ④具 有一定的艺术设计素质和创新意识 。
作者简 介 ： 张俊 晖 （ １ ９ ８ ３ 一） ， 男， 四 川 信 息 职 业 技 术 学 院讲 师 、 电子 信 息 工程 师 ， 研 究 方 向为 软 件 技 术 。
课 程 教 学 困难 。
为解决这些 问 题 ， 我 们 取 消 了 传 统 的 演 示 ＋ 练 习 模 式， 转 而 采 取 以真 实 企 业 案 例 贯 穿 始 终 的 教 学 方 式 ， 即 让
网页设计代码大全
网页设计代码大全Background refers to the background image of a webpage。
while bgcolor refers to the background color。
Text refers to the color of the font。
while link。
alink。
XXX clickable text。
XXX has been clicked。
XXX。
XXX to the left and top margins of the webpage.The format for titles is XXX。
where n ranges from h1 toh6.The align attribute can be set to left。
right。
center。
bottom。
or top。
To format text。
use the text tag。
To modify the font。
use tags such as。
for bold。
for underline。
for italic。
for larger text。
and。
XXXTo create paragraphs。
use the。
tag and set the align attribute to left。
right。
or center。
To force a line break。
use。
Preformatted text can be created using the。
tag。
Horizontal lines can be inserted using the。
tag。
with attributes such as width。
size。
align。
and color。
To create a XXX。
use the。
tag。
For lists。
unordered lists can be created using the。
静态网页
静态网页只是由一些HTML、CSS及简单的JS脚本等代码编写的，可在其中插入文字、图片、音频、FLASH视频等。
具有以下特征：1 每个静态网页都有一个固定的URL，且网页URL以htm.html、shtml 等形式为后缀，而不含有“？”。
2 网页内容一经发布到网站服务器上，即成为实际存在的保存在服务器上的文件，每个网页都是一个独立的文件。
3 静态网页的内容相对固定，因此容易被搜素引擎检索。
4 静态网页没有数据库的支持，采用静态网页技术的网站，在制作和维修方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式是很难进行后期的维护和管理的。
5 静态网页的交互性较差，在功能方面有较大的限制。
而动态网页的所谓“动态”是指网页显示需要连接数据库，例如Access、SQL、SERUER数据库等，是动态读取的数据，利于方便更新和修改，这种动态网页多为后台操作更新资料的。
动态网页的网址后缀不是htm、html、shtml、xml等形式，而是以asp、jsp、php、perl、cgi等形式为后缀，并且在动态网页中有一个标志性的符号“？”动态网页一般具有以下特点：1 动态网页以数据库技术为基础，可以大大降低网站维护的工作量。
2 采用动态网站的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等。
3 动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才生成一个完整的网页。
4 动态网页中的“？”对搜索引擎检索存在问题，搜索引擎一般不能从一个网站的数据库中访问全部网页，或者处于技术方面的考虑，搜索引擎不去检索网址中“？”后面的内容，因此采用动态网页的网站在进行搜索引擎的要求。
二静态网站与动态网站网页是组成一个网站的基本元素，一个页面成为网页，多个网页组成则成为网站。
1 静态站点静态站点仅提供单向的信息服务，静态网站是指网站中网页内容是真实存在的网页文件，当用户发送请求时，只是将设计好的并存放在服务器中的网页发送给用户，这个网页中的内容和形式，任何用户在查看时都是相通的。
陈绪兵毕业设计(静态网页设计)
毕业设计题目静态网页设计学生姓名陈绪兵学号 2 0 9 0 2 0 8 1 2 1 5专业计算机网络技术班级 2 0 0 9 0 2 班指导教师孙俊完成日期2011 年11 月 15 日目录摘要 (1)关键词： (1)Abstract (1)第1章绪论 (2)1.1Internet的历史与发展 (2)1.2 网页的概述 (3)第2章开发软件简介 (3)2.1 Dreamweaver 简介 (3)2.2 Html语言简介 (4)2.3 Flash 简介 (5)2.4 Photoshop 简介 (6)2.5 本章小结 (7)第3章网络需求分析 (7)3.1 相关术语及解释 (8)3.2 个人网站的由来与发展 (8)3.3我的个人网页的设计与规划 (9)3.3.1 我的个人网页的概貌 (9)3.3.2 个人网页的设计理念 (10)3.4 网页小结 (14)第4章结论 (15)致谢 (16)参考文献 (17)静态网页的设计与制作学生：陈绪兵指导老师：孙俊（黄冈职业技术学院）摘要本文就网站的设计与制作，以软件工程的方法对全过程进行了分析与研究，本文的主要工作集中在：1.对web页进行概述，主要是对internet的历史和发展作了回顾，并对WEB页的定义和特性进行阐述，并对网站设计过程中使用的工具和技术简单的介绍.2.对网站建设中提及的术语进行简单解释，并对网站的由来和发展进行讨论。
3.对自己设计的网站从设计理念到制作的过程进行详细分析.4.使用Dreamweaver+Flash+photoshop 等软件的设计方式进行解析.5.就网站的设计与制作提出自己的观点以及建议。
关键词：网站设计工具设计方案创意风格Static web design and productionAbstractThis website design and production, with the method of software engineering to process the analysis and research, this paper main work concentrates in:1. The paper to web page is mainly to the Internet's history and development,and a review of the definition and characteristics of web pages is expounded, and the website design process using the tools and techniques of simple introduction.2. The website construction mentioned in terms of website, and simple explanation of the origin and development are discussed.3. For the design of your own website from design concept to making process were analyzed.4. Use Flash +Dreamweaver + photoshop software design methods are analyzed5. Just website design and facture put forward its own views and Suggestions第1章绪论随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越多的职业需要具有计算机应用技能型人才。
Html静态网页代码汇总
Dreamweaver静态网页Html标记代码汇总网站相关概念Internet是一个全球计算机互相网络，WWW是Internet所提供的一种极其重要的服务，即World Wide Web，简称Web；WWW主要以Web为表现形式，或者说，Web是Web页即网页的载体，我们所说的Web页就是指由HTML（超文本标记语言）这种语言编写的一类特殊文件，通常后缀为*.html或*.htm的页面。
Dreamweaver CS基本应用HTML文档结构：<html></html>：静态网页源代码首尾结构标记，代码内呈现网页所有内容<body bgcolor=”背景色”></body>：网页主体部分<head></head>：网页头部，包含网页导航栏中的标题和网页不显示的信息<title></title>：标签内显示出网页台头的标题名，用于<head></head>标签之内<meta name=”描述” content=”搜索信息” />：辅助性标签，用于<head>标记之内<meta name=”作者” content=”余学兵”>：标注网页的作者<meta name=”关键字” content=”IT，教育，网络”>：设定搜索关键字<meta name=”robots” content=”all”>：告诉搜索机器人需要索取的页面，默认全部<meta http-equiv=”expires” content=”web，26 feb 2010 08：21：57 GMT”>：http-equiv属性代替name属性，expires 设定网页到期时间<meta http-equiv=”refresh” content=”5; url=”>：间隔5秒网页自动刷新，并指向新的URL网址<h2></h2>：表示是一行级别是2号的标题文字，有h1~h6的6级标题可选<font color=”颜色” face=”字体” size=”尺寸”></font>：文字处理标签<pre></pre>：预先格式化，以格式化显示标签中的内容结构<p align=”对齐方式”></p>：段落标记，center(居中)、left(左边)、right(右边)<br />：换行标记，按[shift]+[enter]可实现<b>粗体</b>：粗体字体标记<i>斜体</i>：斜体字体标记<sup>上标</sup>：上标标记文本格式<sub>下标</sub>：下标标记文本格式<ul></ul>：无序列表开始结束标记<li></li>：列表项标记，</li>为可选项<ol start=”数字”></ol>：有序列表开始结束标记，start属性指定列表的起始数字<li type=”有序列表标签”>：有序列表的序列标记，可自定义为数字或字母等<hr align=”对齐位置” width=”长度” size=”高度” noshade=”纯色” color=”颜色”>：水平线标记，可标记水平线的长度、高度、纯色阴影显示、颜色等属性<img align=”图像与文本的对齐方式” src=”图像名称”>：在HTML中插入图像，align属性值：top(头部)、bottom(底部)、middle(居中)、left(居左)、right(居右)<p onclick="MM_popupMsg('你好！')">点击</p>：弹出“你好！”信息的行为<p onmouseover="MM_swapImage('image', '图像路径'),|">点击</p>：弹出图片<embed src=”第一次爱的人.mp3”><embed/>：在网页中插入音频文件<marquee direction=”移动方向” behavior=”设置路径” loop=”循环圈数” bgcolor=”背景色”>：滚动文字字幕，方向属性:down向下、up向上、left向左、right向右<a href=””>咔咔主页</a>：超级链接标记<a href=javascript.alert(“谢谢！”)>点击</a>：对话框脚本链接<a href=”kxncwg.exe”>开心农场外挂下载<a/>：文件下载链接<a href=”news.html”>新闻报道<a/>：相对路径链接（锚记）HTMLHTML表格标记：<table align=”对齐方式”width=”宽度”bgcolor=”背景色”background=”背景图片”border=”边框显隐”cellspacing=”单元格之间间距” cellpadding=”单元格内间距”<caption></caption>：定义表格的标题（可选）<tr></tr>：定义表格的一行<th><th/>：设置表格栏标题（表头），显示为粗体子此标记可以省略<td></td>：用来装载单元格数据，它们必须位于<tr></tr>标记之间链接路径：（链接的类型和目标属性）1.链接类型◆外部链接：跳转到站点外其他网站的链接◆内部链接：站点根目录内文档之间的互相链接，也称为相对文档链接◆E-mail链接：实现打开E-mail客户端应用程序进行撰写、发送邮件的工作◆局部链接：在同一文档内部或不同文档之间指定位置的链接2.链接目标◆_blank：将打开一个新窗口◆_parent：将在父窗口中打开◆_self：将在当前窗口中打开◆_top：将在上级窗口中打开<a name=”命名锚” id=”命名锚id”><a/>：命名锚记插入图像、Flash及其他多媒体对象1．在网页中插入图片和图像占位符打开HTML文档，将插入点放在要插入图像的位置，单击插入栏中“常用”面板的“图像”按钮，或选择“插入”的“图像”命令，在弹出的“选择图像源”对话框中选择要插入的图像，确定即可。
静态网页代码集
Html语言2.1头部标记：<head></head> <!—描述web页面相关的各种信息-->1.<title></title><!—标题栏标记-->2.<meta><!—描述页面信息--><meta name=”description” contect=”阿里巴巴是（b2b）”/> description是web界面的简要说明<meta name=”Generator” contect=”Microsoft FrontPage 4.0”> Generator指定web界面的生成工具<meta name=”Author” contect=”Nadia”> Author制定web界面的作者姓名<meta name=”Robots” contect=”all|none|index|noindex|follow|nofollow”>3. 1.换行<br>；2.原样显示标记<pre></pre>3.缩排标记<blockquote></blockquote>4.水平线<hr> 属性去3D阴影noshade5.<body backgroud=”bg.jpg”>4．有序列表：<ol type=”1” state=”1”> 样式A I i a<li>…</li><li>…</li></ol>5.无序列表：<ul><li type=”Disc”></li></ul>实心圆圈Disc 空心圆圈Circle 小方块Sqiare6.超链接：锚点链接<a href=”#1”>点击跳转到链接</a><a name=”1”>链接的目标</a>超链接<a href=”” titile=”链接百度网” target=”_blank”>百度</a><a href=”work.html” titile=”链接内部” >内部链接显示在本页</a>外部E-mail链接：<a href=”mailto:334860757@?cc=1525528088@&Subject=网页开发&Body=超链接的使用方法”>向334860757发送邮件</a>7.图片<img src=”bg.jpg” align=”top” width=”100” height=”66”>8.div中添加网页<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body><div align="center"><div style="width:800px; height:400px;"><div style="width:80px; height:400px;float:left;"><a href="" target="s">链接一</a><br /><a href="" target="s">链接二</a><br /><a href="" target="s">链接三</a></div><div style="width:720px; height:400px; float:left;"><iframe name="s" id="s" width="720" height="400" frameborder="0"></iframe></div></div></div></body></html>9.控件的代码：滚动字幕<marquee scrollamount=3 FONT style="COLOR=FF0000; FILTER: shadow(color=FFFF33 ); FONT-FAMILY: 隶书; FONT-SIZE: 25pt; WIDTH: 100%"></marquee>音频视频<embed src=”1.avi” loop=”false”></embed>10.样式表内部样式：<font style=”font-family:”楷体”;font-weight:bold;”>嵌入样式：<head><style type=”test.css”></style></head>外部样式：<link href=”样式地址” rel=”stylesheet” type=”text.css”>输入样式表：<style>@import url(http://......)</style>11.鼠标光标属性：<span style=”cursor=move”></span>12.滤镜属性：Filter:alpha(opacity=opcity,…..)Alpha不透明度Blur 图片模糊Chroma 对象指定颜色透明色dropShadow 对象产生投影效果FlipH水平翻转FlipV垂直Glow边缘发光Gray变灰度图Invert可视化属性全部翻转Mask覆盖膜Shadow投影Wave垂直波浪打乱Xray X光照效果13.背景音乐：<bgsound src=e:\mp3\歌曲1\死了都要爱.mp3>。