下载文档原格式
第一章网页制作开发工具的基本操作实验1.1 Dreamweaver 8软件的基本操作【相关知识】1. Dreamweaver8相对于其他以前的版本增加和增强的功能有：支持XML数据、增加样式呈现工具栏、增强CSS设计、增加代码折叠功能。
2. Dreamwaver 8支持Windows和Macintosh两种操作系统。
3. 在Dreamweaver 8中可以使用HTML、CSS、XML等多种文件类型，主要的文件类型是HTML文件，可以使用.html或.htm扩展名保存HTML文件。
一、实验目的和要求学会Dreamweaver 8的安装和卸载的方法。
二、实验步骤1. 安装Dreamwaver 8（1）运行，打开安装向导对话框。
（2）单击[下一步]按钮，打开安装向导的许可证协议页面。
（3）选中[我接受该许可证协议中的条款]，单击[下一步]按钮，打开选择安装路径的对话框。
（4）可以通过选中[创建快速启动栏快捷方式]或[在桌面上创建快捷方式]复选框来创建快速启动栏快捷图标或桌面快捷图标，单击[更改]按钮，打开更改当前目的地文件夹页面。
（5）在[文件夹名称]文本框中输入新的文件夹路径，单击[确定]按钮，返回安装路径对话框，单击[下一步]，打开默认的文件类型对话框。
（6）单击[下一步]按钮，打开[已做好安装程序的准备]对话框。
（7）单击[安装]按钮，开始安装Dreamweaver 8，安装过程会持续几分钟，然后显示[完成Dreamweaver8 安装工作]对话框，如图1-1所示。
（8）单击[完成]按钮，完成Dreamweaver 8的安装工作。
2. 卸载Dreamwaver 8（1）在[开始]菜单中选择[控制面板]命令后，打开相应面板。
（2）选择[添加/删除程序]命令后，打开相应面板。
（3）在[添加或删除程序]对话框的[当前安装的程序]列表中选择[Micromedia Dreamweaver 8]一项，单击[删除]按钮。
XXX学院男生宿舍X号楼综合布线系统设计方案设计单位：设计指导：宿舍布线系统的设计一、综述A.布线系统将贯穿雨1~5楼的各个平面。
主要为语音、数据、图像等系统信号提供高性能传输路由。
B.作为一个综合性的线路平台，应具有一定的兼容性和开放性，可满足各类通讯及计算机等传输需要和网络结构，提供一个标准化、高带宽、低成本的网络环境。
C.系统应具有开放的模块化结构，可灵活地进行资源分配，线路管理、变更和扩展。
D.系统应提供一个安全、有序。
便于管理的设备安装及连接环境，可快捷简便地进行系统安装和运行。
E.在充分考虑目前应用情况下，以高起点和适度超前的原则来规划本系统。
为各种高性能应用踢狗充足的传输带宽，为日后系统的升级提供充足的空间。
F.宿舍楼基本情况：楼层面积约为16*9米，且已有中国移动和中国电信的无线网络热点分布。
二、具体布置系统包括工作区子系统、配线(水平)子系统、干线子系统、设备问子系统、管理子系统和建筑群子系统。
1.工作区子系统。
工作区子系统是由学生信息插座到计算机网络的连接线缆。
学生宿舍的房间设置一般为6人间其内部语音及网络数据点的位置不像大开问办公那样难以布置，因室内床位布置均已确定，很容易确定其数据端口的位置。
日前宿舍布置一般为上铺居住，床铺下设置学习书桌，因此数据端安装在书桌下，高度为0．3 m。
应根据校方的要求，选择数据端口的安装数量。
对于要求较高的，每个学生书桌下方设置一个数据端口，房间内公共部位设置一个电话端『_J。
要求较低的，可每两个同学共用一个数据端口，然后采用交换机分别接引至电脑。
其优点是减少了水平引来线路和保护管线(槽)，缺点是影响网络速度，需自加分配没备。
除考虑数据端r]的位置外，还需相应布置供电电源插座，间距应为0．2 m。
2.配线(水平)子系统配线(水平)子系统由楼层配线架(FD)至信息插座之间的线缆、信息插座(含转换点及配套设施)组成，它将偻层弱电竖井内配线架与每个宿舍室内的信息插座相连。
《网页设计与制作教程》实验指导书班级姓名学号实验一网页基础知识一、实验目的理解网页组成元素。
理解主页、静态网页、动态网页等概念。
了解常见的网页布局。
熟悉Dreamweaver CS6的桌面结构。
二、实验软硬件环境一台接入Internet的计算机；Windows 7操作系统；Dreamweaver CS6、Flash CS6、Fireworks CS6软件。
三、实验内容1．打开“九江学院”官网，并回答以下问题：（1）该网页上有哪些网页元素组成？（2）在网站中打开5张不同内容风格的分页面，分析下它是静态网页还是动态网页，为什么？（3）如果分页面中有图片，把图片下载到电脑中，如何操作？2．查找主页为“国字型”、“三字型”、“拐角型”、“封面型”、“Flash型”布局的网站各一个，并记录下网站地址。
3．查找若干个与图1所示布局相似的网页并记录网址。
图1网页布局4．启动Dreamweaver CS6，并完成以下操作：（1）新建一个空白网页，并保存，存储名为myweb.html。
（2）在文档工具栏中，切换“设计”、“拆分”、“代码”、“实时视图”，理解它的功能。
（3）对“插入栏”、“属性面板”和各种组合面板进行折叠/展开，打开/关闭操作，熟悉使用。
（4）给网页输入标题栏标题：我的第一张网页。
（5）在网页中输入一首唐诗，并完成简单排版。
（6）保存网页，并用浏览器预览。
四、实验思考1．动态网页与静态网页如何快速区分？2．开发个人网站的首页，可以设计哪些栏目，试做一个布局草图。
实验二常见HTML标签与简单CSS的使用一、实验目的理解常见HTML标签在HTML文档中的作用。
掌握通过纯文本编辑器熟练编写简单HTML的技能。
掌握简单CSS的使用。
熟练掌握各种常用标签并利用其来实现网页的排版。
二、实验软硬件环境一台接入Internet的计算机；Windows 7操作系统；Dreamweaver CS6、Flash CS6、Fireworks CS6软件。
设计师作业指导书1、目的：为了更好的满足客户对网站页面的要求；2、范围：适应于网页设计师的网站前台开发；3、流程说明3.1客户提出网站设计的要求；3.2网页设计师根据客户的要求，设计页面效果图；3.4项目负责人对设计的页面进行审核，如果符合要求交给客户审核，如不符合要求，则返回给设计师重新设计；3.4 客户对设计的页面进行审核，如果符合要求，须填写版面确认书，如不符合要求，则返回给设计师重新设计；3.5 设计师把客户审核通过的效果图转换成HTML静态页面；3.6、网页设计师与后台程序员共同将完成的静态页面和后台程序进行整合。
4、PSD转HTML编码流程设计制作效果图规范4.1、尺寸为能兼容1024*768分辨率的显示器，宽度不能超过1007像素，推荐使用950px，960px，980px。
4.2、颜色由于不同的显示器之间存在色差，设计是必须只使用218种WEB安全色。
、4.3、渐变渐变容易使图片文件体积迅速增大，避免过多过于复杂的渐变。
4.4、输出在不明显损坏图片质量时，要转换为索引颜色模式，最大限度的缩小图片体积。
输出使用PNG或GIF格式。
4.5、图层相关的图层放到一个组中，每个图层和组都要有一个易于理解的名字。
组可以嵌套。
5、XHTML编码规范5.1、使用过度的（Transitional）XHTML1.0DTD编写网页。
每个HTML页面的基本结构必须是：<!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>无标2、题文档</title><meta name="keywords" content=""><meta name="Description" content=""></head><body>内容</body></html>5.2、CSS和JavaScript必须使用外部调用的方式。
网页设计与制作实验指导书主编教师：李显萍吉林省经济管理干部学院国际商务系2007年9月实验一网页设计基础实验一、实验目的1．掌握商务网站设计的基本原则、网站及网页的基本风格与基本构图特点；2．熟悉页面排版，掌握网页布局的方法。
二、实验内容1．上网访问实际若干电子商务网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。
2．在网上找出下列版面布局的结构形式：⑴．“T”结构布局⑵．“口”型（“国”字型）布局⑶．“三”型布局⑷．对称对比布局⑸．POP布局3．找出使用大色块和抽象线条构图风格的网站（至少各2个）；4．使用电脑中的图片工具（Photoshop）把不同图片转换为.JPG或.GIF格式，比较两种图片格式的区别。
三、实验步骤与要求按“实验内容”中1～4完成网上的操作，完成实验报告，在实验报告中要求记录如下内容：⑴．所访问各商务网站的风格及特点；⑵．各种版面布局网站的域名和所采用的版面布局形式；⑶．使用大色块和抽象线条构图风格网站的域名和所采用的构图形式；⑷．10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。
四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。
2、存成doc文件和html文件，上传到教师机D：\zuoye目录下实验二建立站点（2学时）一、实验目的：(1)熟悉DreamWeaverMX的界面及其操作(2)熟悉使用DreamWeaverMX建立站点，理解本地站点和远程站点的概念二、实验内容本实验的内容主要是制作一个“我最喜欢的歌曲”的站点，它包括一个用来描写自己喜欢的歌曲的介绍的简单主页和若干介绍单个歌曲的网页。
三、实验步骤与要求实验前认真预习，熟练掌握有关概念和知识。
实验过程中记录发生的现象并分析原因。
实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。
网页设计实验指导书经济与管理学院二零一二年二月实验一HTML标记的基本语法一、实验目的和要求1．熟悉HTML文件的编辑环境；2．掌握HTML中与文字、图像、页面、表格、表单和框架等的基本标记。
3．学会使用HTML设计出文本与图像相结合的较为复杂的页面。
二、实验内容1、根据如表1-1所示的表格写出完整的HTML代码；其中，《网络原理》和《网页设计与制作》课程的详细说明文件分别为该网页所在目录的net.htm和web.htm，需要为表中的书名设置相应的超级链接，以便在点击后可跳转到相应的说明页上。
2、编写出实现如图1-1所示页面效果的关键html代码，要求点击左边各目录项，相应的链接会显示在右下的帧中，并且适当填加特效如：背景图片、图像、动画等（也可自行设计效果）。
图1-1 个人网站首页3、编写出实现如图1-2所示页面效果的关键html代码，其中各子项目都做了超链接，链接的目标文件自行指定。
图1-2 列表效果图三、实验步骤1．打开任何一种文本编辑工具，可以是附件中的记事本，也可以是rontPage/Dreamweaver 的代码窗口。
2．按各种不同标签的语法规则，输入合法的代码。
3．输入完成后保存代码文件，文件后缀为.htm/.html。
4．在IE浏览器中打开保存的文件，看看是否能完成自己想要的设置。
四、程序代码（在实验报告中写出）（1）<table width="500" border="1"><caption>课程表</caption><tr><td><div align="center">课号</div></td><td><div align="center">课程名</div></td><td><div align="center">学分</div></td></tr><tr><td><div align="center">1002201</div></td><td><div align="center"><u>《网络原理》</u></div></td><td><div align="center">6</div></td></tr><tr><td><div align="center">1003302</div></td><td><div align="center"><u>《网页设计与制作》</u></div></td><td><div align="center">5</div></td></tr><tr><td><div align="center">1003507</div></td><td><div align="center">《管理学原理》</div></td><td><div align="center">5</div></td></tr></table>2.还没弄3.<!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><style type="text/css"><!--.STYLE1 {font-family: "宋体";font-size: xx-large;}.STYLE4 {font-family: "宋体"; font-size: xx-large; font-weight: bold; }.STYLE5 {font-family: "宋体";font-size: x-large;}.STYLE6 {font-family: "新宋体"; font-size: x-large; }--></style></head><body><ul><li><h1><span class="STYLE1">列表项目1</span></h1><ol><li class="STYLE6"><a href="常用/新建文件夹/市场营销.doc">子列表项1</a></li><li class="STYLE6"><a href="常用/新建文件夹/市场营销.doc">子列表项2</a></li></ol></li></ul><ul><li><p class="STYLE4">列表项目2</p><ol><li class="STYLE5"> <a href="常用/新建文件夹/市场营销.doc">子列表项1</a></li><li class="STYLE5"><a href="常用/新建文件夹/市场营销.doc">子列表项2</a></li></ol></li></ul></body></html>五、实验心得体会主要包括在实验过程中学到了哪些东西；遇到了哪些困难，又是如何解决的；还有什么问题没有解决，分析其原因。
网页设计实习指导书（54学时for 信计）邹青编信息工程学院二００六年八月实习一掌握HTML的格式一、实习目的1. 掌握网页的基本结构及必须的标记；2. 了解Web页面中特殊字符及颜色的显示，掌握页面整体颜色配比。
3. 学会并掌握从网上获取HTML的知识及下载网页元素；二、实习要求1. 掌握网页的基本结构，熟悉html、head、body、title基本标记2. 了解Body标记的BackColor、BackGround、Text、Link、VLink、ALink属性，特殊字符的显示3. 用记事本完成简单的网页4. 学会从InterNet上获取网页元素三、实习内容及方法1. 网页基本结构<html> ……表示网页的开始<head> ……网页头，用来保存对网页的一些注释及规定一些动作<title>网页标题</title> ……在浏览器标题栏显示的内容</head> ……结束网页头<body> ……正文开始正文……显示在浏览器中的内容</body> ……正文结束</html> ……网页结束2. 用记事本建立一个简单的网页第一步：从开始菜单栏中启动记事本；第二步：在记事本中输入一下内容<html><head><title>我的第一个网页</title></head><body>Hollo, World!!!!</body></html>第三步：在文件菜单中单击保存→选择保存类型为：所以类型→输入文件名为test.html→单击确定按钮；第四步：找到刚才建立的文件，双击打开，浏览自己的网页3. Body属性的使用及特殊字符的显示。
用记事本建立一个网页sec.htm，内容如下：<html><head><title>我的第二个网页</title></head><body BGColor＝#cccccc Text=blue Link=black ALink=redVLink=green>我的<友情链接><a href=””>搜狐</a><br><a href=” ”>西北农林科技大学</a><br><a href=” http://127.0.0.1”>我自己</a></body></html>4. 从网上保存3个自己感兴趣的页面及10张图片到自己的软盘上。
实验一网页的认识实验目的1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、利用记事本来编辑HTML文档并浏览。
3、配置网站运行环境。
实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。
实验重点及难点◆熟悉使用浏览器进行浏览、搜索、下载。
◆熟悉HTML的结构、语法。
◆创建与管理站点实验内容1、浏览新浪主页并保存，观察其保存结果（其中包括哪些文件和文件夹）。
2、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。
3、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。
4、制作一个简单的网页sy1-1.htm，用记事本编辑，网页标题为“我的第一个网页”，内容为司空曙的《江村即事》（要求加入文档类型声明），如下图所示。
5、使用Dreamweaver建立一个本地站点。
6、注：站点名称用你的名字的首字母，如方清华用fqh。
1）在网站根文件夹下创建文件夹sy12）打开“文件”面板并上传，类似于下图注：请利用“管理站点”的“导入”和“导出”功能保存和恢复站点设置，减少重复配置操作。
3）配置IIS。
打开控制面板>管理工具>internet信息服务。
注：如果“管理工具”中没有“internet信息服务”，请利用“控制面板”的“添加/删除程序”工具添加（在“添加/删除组件”选项中设置）。
4）配置本地intranet附录2 课程设计报告模板《网页设计与制作基础》课程设计报告任课教师专业班级班级代码组号第组组长学号姓名设计主题《网页设计与制作基础》课程组制评语（由任课教师答辩时填写）分工情况表（该表后两列由教师填写外，其余部分由学生填写）员的最后课程设计成绩是小组课程设计成绩与个人附加分之和。
指导教师（签名）：年月日一、设计目的（正文字体为“仿宋_GB2312”，字号为四号字）二、设计环境（正文字体为“仿宋_GB2312”，字号为四号字）三、设计步骤（各主要设计流程如确立主题、规划网站以及网页架构、素材准备、制作网页等的具体步骤）（正文字体为“仿宋_GB2312”，字号为四号字）四、设计结果（各相关网页的截图）（正文字体为“仿宋_GB2312”，字号为四号字）五、心得（通过此次课程设计说说你在设计过程中遇到的问题和解决方法，以及有何收获）（正文字体为“仿宋_GB2312”，字号为四号字）实验报告课程名称实验项目名称班级与班级代码实验室名称（或课室）专业任课教师学号：姓名：实验日期：年月日广东商学院教务处制姓名实验报告成绩评语：指导教师（签名）年月日说明：指导教师评分后，实验报告交院（系）办公室保存。
安徽中澳科技职业学院《网页设计》实训指导书系部：计算机实训课时：36实训教师：房景丽教研室：艺术教研室目录实训一第一个页面制作实训二超链接的使用实训三简单网站制作实训四表单的设计实训五行为与互动实训六 CSS基础样式及属性设置实训七 Flash网页动画制作实训1 第一个页面制作实训目的通过Dreamweaver软件对网页的标题和背景进行设置，对文本和段落的属性进行设置。
实训环境地点：机房，工具：计算机。
实训课时2学时。
实训内容纯文本页面制作。
实训要求要求学生能掌握页面的设置、单色背景的使用，插入文本、文字属性和段落属性的设置实训过程1、在dreamwever中新建一网页，打开软件在弹出窗口中点击“html”创建一个纯html网页2、设置网页的背景和标题3、将案例素材中提供的文字源复制到编辑窗口中，文字源在“案例1文字.text”文件中。
4、设置文字属性首先选中第一行、第二行文字，然后在编辑窗口下方的属性面板中，设置所选文字属性，包括颜色、大小和粗细。
在本案例中，对文字大小、颜色和粗细进行设置5、设置段落缩进选中第四段文字，点击“属性”面板中的“文本缩进”按钮两次，使这段文字缩进相应的距离。
6、设置段落首行缩进将鼠标放在第二段的起始处，将输入法设置为“全角”模式。
输入两个“全角”的空格。
注意：在网页编辑中，不能连续输入“半角”的空格，如果要输入连续的空格，必须把输入状态改为“全角”。
同时分别在第七段、第八段的起始处，以及第十段第二行的起始处，输入两个“全角”的空格。
7、保存文件实训思考新建网页后，应该立即为其命名并保存在本地硬盘中样式的使用为页面的编辑带来了便利网页编辑中不能连续输入“半角”的空格，只能输入全角状态下的空格实训任务书要求根据实训过程，填写实训任务书实训2 网页超链接的制作实训目的为了让学生能熟练掌握网页中文本和图片的链接制作，从而将两个页面连接起来实训环境地点：机房，工具：计算机。
网页设计作业指导书一、作业背景随着互联网的不断发展，网页设计已成为一门越来越重要的技能。
为了帮助学员掌握网页设计的基本知识和技巧，本指导书将为大家详细介绍网页设计的要点和步骤。
二、作业目标本次作业的主要目标是让学员了解网页设计的基本原理和流程，并能够独立完成一个简单的网页设计项目。
具体目标如下：1. 了解网页设计的基本概念和术语；2. 掌握网页设计的原则和规范；3. 学习并运用常用的网页设计工具和技术；4. 完成一个简单的网页设计项目。
三、作业要求1. 网页设计主题：自由选择，可以是个人主页、产品展示页等；2. 设计要求：注重页面的整体布局、配色和字体的搭配，使页面美观、清晰易读；3. 页面结构：通常包括导航栏、页眉、页脚和内容区域；4. 图片使用：如果需要使用图片，请确保图片质量和版权问题；5. 页面响应式设计：尽量考虑不同设备上的显示效果，使页面在各种屏幕尺寸下都能良好显示和使用；6. 使用工具：学员可自由选择适合自己的网页设计工具，如Adobe Photoshop、Adobe Illustrator等；7. 提交要求：请将设计好的网页以图片的形式提交，同时附上简要的设计思路和注意事项。
四、作业流程1. 熟悉网页设计基本知识：阅读相关书籍或在线教程，了解网页设计的基本概念、规范和原则；2. 确定网页设计主题：根据个人兴趣或实际需求选择适合的网页设计主题；3. 设计网页结构：制定页面的整体结构和布局，包括导航栏、页眉、页脚和内容区域的位置和样式；4. 选择合适的配色和字体：根据网页主题和内容选择合适的配色方案和字体样式，注重色彩的搭配和字体的易读性；5. 导入图片和多媒体素材：如果需要使用图片和多媒体素材，请确保其质量和版权问题，并将其合理地融入页面设计中；6. 进行页面响应式设计：根据不同设备的屏幕尺寸和分辨率，优化页面的布局和显示效果；7. 调整和优化页面效果：通过不断调整和优化页面的各个元素，使其整体效果更加出色；8. 完成设计并提交：将设计好的网页以图片的形式提交，同时附上设计思路和注意事项的简要说明。
大型作业任务书设计题目：百居易房屋超市网站首页设计要求：1.按照网站开发的方法步骤进行网站设计与制作，并编写相应文档；2.要求设计的网站主题鲜明，内容丰富，布局合理，界面美观，但界面和风格在满足具体的基本要求下可增加自己的创意，发挥自己的创造能力；3.将以上设计整理编写出《大型作业说明书》，字数不少于8000字；4.按期完成大型作业任务，时间为１周。
班级：电子商务1203学号：1001120337姓名：宋建辉指导教师：李伟2013年6月23日摘要通过本课程安排的实训项目，让学生掌握设计静态网页的基础知识和基本方法，对网页设计的流程有一个全面的认识和了解，并能够独立利用DreamWeaver设计制作出完美的个人网站或商务网站. Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
随着互联网的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别。
通过本课程安排的实训项目，让学生掌握设计静态网页的基础知识和基本方法，对网页设计的流程有一个全面的认识和了解，并能够独立利用DreamWeaver设计制作出完美的个人网站或商务网站，一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP 功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。
前言Macromedia公司推出的Dreamweaver网页制作软件可以说是众多网页制作软件中的佼佼者。
作为一款专业的网页制作工具，Dreamweaver具有可视化编辑界面和强大的所见即所得网页编辑功能，它不仅可以制作网页，而且为设计和开发站点提供了良好的操作平台，集网页制作与网站管理于一身。
用户只需稍稍能看懂HTML语言，就可以应用Dreamweaver制作出跨平台、跨浏览器的精彩网页。
Dreamweaver在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，它与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。
其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高，Flash用来制作精美的网页动画，而Fireworks用来处理网页中的图形。
Dreamweave字面意思为“梦幻编织”，这一软件有着不断变化的丰富内涵和经久不衰的设计思维，它能充分展现你的创意，实现你的想法，锻炼你的能力.目录课题来源 (01)一、网站开发项目需求分析 (02)二、网页设计的要素 (03)2.1排列方法要素 (03)2.2色彩要素 (04)2.3网页设计技巧 (04)2.4 CSS样式的使用 (05)三、网站设计的前期准备 (06)3.1涉及软件 (06)3.2软件界面 (06)四、本网站设计规划 (08)4.1本网站建设的方向和目的 (08)4.1.1网站建设方向 (08)4.1.2网站建设目的 (08)五、百居易房屋超市网站结构 (10)5.1站点组织结构 (10)5.2站点目录结构 (10)六、网站制作步骤 (11)6.1首页制作 (11)6.2部分二级页面制作 (14)七、网站最终效果 (16)7.1 主页面效果 (16)7.2 部分二级页面效果 (17)实训体会 (21)参考文献 (23)课题来源随着二十一世纪新兴科技的飞速发展，如今的电子信息产业正在经受着一个巨大的挑战，同时也面临着一个重大的机遇。
就目前的科技发展水平而言，电子信息产业的发展已经不能够满足社会化大生产的要求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需要。
可喜的是在这几十年的发展中我们有了互联网。
互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上信息化的道路。
以往，人们大多数都是自己操劳自己的住房，后来房地产事业发展壮大，网络迅猛发展，人们便通过网络解决住房问题。
正是因为人们的这些需求，越来越多的房地产网站出现在网络上，使人们可以随时了解自己想知道的房子方面的新闻，真正的做到足不出户，便知天下事。
把楼房销售与网络连接起来，是今后楼房销售发展的必然方向之一。
第一章网站开发项目需求分析一个网站项目的确立是建立在各种各样的需求上面的，这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要，其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。
面对对网站开发拥有不同知识层面的客户，项目的负责人对用户需求的理解程度，在很大程度上决定了此类网站开发项目的成败。
因此如何更好地的了解、分析、明确用户需求，并且能够准确、清晰以文档的形式表达给参与项目开发的每个成员，保证开发过程按照满足用户需求为目的正确项目开发方向进行，是每个网站开发项目管理者需要面对的问题。
所以，做好房地产网站就是为了使广大的消费者提供及时和有效的信息，为其选择适合自己的产品提供良好的参考。
第二章网页设计的要素在一个网站中，最重要的页面当属主页，所以在此以主页为例，说明在网页制作中版面设计的问题。
从版面设计来讲,一个有特色的主页,必须包含有四个要素：文字，图片，排列方式和主色调，这四者相辅相成，缺一不可。
图片要素要设计出漂亮的主页，首先要成为计算机图形高手，仅这一点就可以让初学者花上一年半载的时间。
图片的要求与页面的内容有关，一些较随意的主页像股票、医药站点等，来访者并不在乎你能否做出精彩的图片，有些时候他们反而觉得放置图象后影响了访问速度，他们关心的只是页面内容；相反像一些需要靠图象来吸引访客的主页，如游戏介绍、影视介绍、风光名胜等站点，图象是一个极为重要的要素，在这里缺少了恰当的图象，整个页面就会黯然失色、就是一个不完整的主页。
这需要去学习像photoshop这样的图形图像处理软件，还要有一定的美术基础，如审美观、创意技巧等，2.1 排列方法要素主页的第二个要素是排列方法，即网页布局。
网页作为一种版面，既有文字，又有图片；文字有大有小，还有标题和正文之分；图片页有大小而且有横竖之别。
图片和文字都需要同时展示给观众，不能简单地将其罗列在一个页面上，否则会搞得杂乱无章。
关于具体的网页布局，常见的有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash 型、变化型等，关于它们，在网页设计的相关书籍中或者在网络上都可以看到详细的叙述。
比如如果内容非常多，就要考虑用“国字型”或拐角型；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。
还没有提到的就是变化型了，只有不断的变化才会提高，才会不断丰富我们的网页。
F、基于屏幕的可视开发环境；G、可视编程环境；H、高级可控制外观组件支持；I、数据绑定；J、Web服务和XML的预建数据连接器；K、项目管理功能；L、源代码控制系统；M、其它2.2 色彩要素色彩在网页所占比重很大。
有了合理清新的色调，会弥补主页上的其它不足。
页面的色彩搭配是与网站的主题分不开的，一个网站必须有一种或两种主题色。
不至于让浏览者迷失方向，也不至于单调乏味。
一般来说，页面的主体文字应尽量使用黑色等较深的颜色，与背景对比明显，按钮、边框等使用彩色。
例如教育类网站使用蓝色为主题色，再用红色和黑色作为配色，就能表达出严肃、稳重的效果。
2.3 网页设计技巧一张完美的主页设计需要积累丰富的知识以及掌握大量的技巧。
在这里从框架和CSS样式的运用两方面来介绍网页设计的技巧。
框架的使用FRAME（框架）是Web上经常会看到的页面结构。
框架的最常见用途就是导航。
一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。
使用框架具有以下优点：访问者的浏览器不需要为每个页面重新加载与导航相关的图形；每个框架都具有自己的滚动条(如果内容太大，在窗口中显示不下)，因此访问者可以独立滚动这些框架。
例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。
使用框架具有以下缺点：可能难以实现不同框架中各元素的精确图形对齐；对导航进行测试可能很耗时间。
许多专业Web 设计人员不喜欢使用框架，并且许多浏览Web 的人也不喜欢框架。
在大多数情况下，这种反感是因为遇到了那些使用框架效果不佳或不必要地使用框架的站点(例如，每当访问者单击导航按钮时就重新加载导航框架内容的框架集)。
如果框架使用得法(例如，在允许其他框架的内容发生更改的同时，使一个框架中的导航控件保持静态)，则这些框架对于某些站点可能非常有用。
2.4 CSS样式的使用CSS(层叠样式表)是一种制作网页的新技术,它的全称是级联样式表,即Cascading StyleSheets的缩写，又称之为风格样式表单。
CSS是在网页制作过程中普遍用到的技术。
采用了CSS 技术控制的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。
第三章网站设计的前期准备3.1 涉及软件3.1.1 DreamWeaVer cs5介绍Dreamweaver CS5是Adobe(奥多比)公司收购Macromedia公司后最新推出的Creative Suite 3 设计套装中用于网页设计与制作的组件。
作为全球最流行，最优秀的所见即所得的网页编辑器，Dreamweaver可以轻而易举地制作出跨操作系统平台，跨浏览器的充满动感的网页，是目前制作Web页站点,Web页和Web应用程序开发的理想工具。
Dreamweaver，Fireworks，Flash被称为网页制作的“三剑客”，这三款工具相辅相承，是制作网页的最佳拍档之一。
3.1.2 DreamWeaVer cs5操作界面DreamWeaVer cs5界面设计友好，空间广阔，操作精微细致,是一种所见即所得的网页编辑器，既有效的减少了代码编写的工作量，也确保所设计文档的专业性和兼容性。
