网页设计与制作实验指导.doc

1、 燕山大学经济管理学院网页设计与制作实验报告书经济管理学院电子商务系2013年7月实验一【实验目的】1. 练习不设置服务器的本地站点的建立过程。2. 练习需要设置服务器的本地站点的建立过程。3. 在任意一个站点下新建一个网页设置此页页面属性。【实验内容】创建一个名为“我的站点”的站点，将其中的需要设置服务器的本地站点保存在“D:guohua”文件夹下（服务器可以用IIS配置，也可以用其他代替IIS的方式进行配置），不需要设置服务器的站点保存在“E:guohua”文件夹下，写出两种情况下的配置步骤。【实验步骤】（1）设置需要服务器的本地站点的步骤： 站点，新建站点（站点名称：我的站点 本地站点文

2、件夹：D:guohua),服务器，+（服务器名称：我的站点 连接方法：本地 /网络 服务器文件夹：D:guohua web URL:忽略此处:/localhost/），保存，保存。（2）设置不需要服务器的站点的步骤：站点，新建站点（站点名称：我的站点 本地站点文件夹：E:guohua)【实验结果】（1）动态站点 图 1.1 图 1.2 图 1.3 （2）静态站点 图 1.4 图 1.5 【实验总结】 （1）建立站点要注意区分本地文件夹和远程文件夹的选择。 （2）建立站点的同时，也要建立和选择好图片、CSS等分类储存的文件夹。 （3）动态站点的使用要注意先开启Aws。 实验二【实验目的】1. 掌

3、握文本插入以及格式设置。2. 掌握图像插入及基本属性设置。3. 掌握flash动态元素插入及基本属性设置。4. 掌握用表格布局页面。【实验内容】设置窗体的背景色：#999999，边距均为0；字号14px，字体颜色：#000000图1图1部分高度为20px，宽度760px 图2 图2 中5个图片所在行高度：150px 图3图3所在行高度为242px，表格颜色为 #FFCC99最终实现效果如图4所示： 图4【实验思路】（1）表格整体布局（六行一列）： 第一行第一个格：插入Flash标题。 第二行第一个格： 1）设置背景图片。 2）输入文字 居中显示。 第三行第一个表格：1）插入一个新表格：一行十一

4、列。 2）根据位置设置每个格的宽度，插入图片，调整。 第四行第一个表格：1）设置背景图片。 2）输入文字，调整位置。 第五行第一个表格：1）插入一个新表格，一行两列。 2）第一个表格：插入图片。 第二个表格：插入一个新表格，九行四列。 调整：合并，调大小，输入文字。 文字调整：CSS或调整。 第六行第一个表格：插入背景图片。 （2）网页调整： 每个表格的填充值，表格边界值，表格的宽度 高度.。【实验代码】 课件吧 - !- 此页面上的内容需要较新版本的 Adobe Flash Player。 - !- 首页 | 课件图书 | 课件教程 |&nb

5、sp;课件论坛 | 语音网校                                          新书快递      书名：

6、PowerPoint多媒体课件制作实用教程 作者： 繆亮 出版社： 清华大学出版社 地址： 北京清华园 发行日期： 2005年3月第一版 开本： 185*206 字数： 355,000字 价格： 26元 发行号： ISBN7-302-10488 反馈意见： hanlan1970 邮购信息 swfobject.registerObject(FlashID);【实验总结】（1） 网页整体结构的把握最重要，在开始做之前先分析清楚网页的结构能起到事半功倍的效果。（2） 网页的调整可以有多种办法，同样实现某一种效果也有多种办法。有时查查资料能有更多的收获。（3） 注意软件和浏览的调试，考虑不同的浏览器存

7、在的差异，导致显示效果不同等因素。实验三【实验目的】1. 掌握css样式的基本操作。2. 掌握DIV+CSS样式布局。3. 掌握库和模板的基本制作。【实验内容】1、 DIV+CSS设计出下图5、图6两个网页。 图 5 图62、 导航栏做成库模式。3、 图6中上部logo和版本选择部分和左部导航栏部分做成不可编辑区，正文部分作为可编辑区。【实验思路】（1）图5 网页整体层设计： 一个底层里面包括4个层：横1，横2，横3，竖1。 横1：设置背景颜色，插入层，调整到本层底部，插入白色方块。 横2：插入“word字体”层和下面“同我联系”层。 “word字体”层：插入world-word图片，设置大小

8、，位置。 “同我联系”层：输入文字，设置文字字体，位置。 横3：设置背景颜色，插入层，调整到本层上部，插入白色方块。 竖1：插入“between”层和“between_next”层，调整层位置。 竖1层:设置背景颜色，白色。透明度：30%。 “between”层：背景颜色，白色。填充：左，上20px。 插入文字。 “between_next”层：背景颜色：橘黄色。插入EGLISH图片，右对齐。（2）图6 网页整体设计： 网页整体分为：main层，top层，body_left层，body_right层。 main层：插入top层，body_left层，body_right层。 top层：背景颜色

9、：浅绿色；插入world-word图片。 top_bottom层：背景颜色：橘黄色；插入EGLISH图片。 body_left层：插入四行一列的表格，设置CSS样式。 body_right层：设置CSS样式，插入文字。【实验代码】（1）图5网页的代码：World-word 思想和文化的交流始于文字，我们以新颖而行之有效的方式为世界各地的沟通做出贡献，我们以美好的愿望为您提供实际的服务。 我们是来自具有多元文化、多元种族、多元文字的美丽岛国新加坡。 翻译服务 网站建设 服务流程 付费 同我们联系：serviceworld- 图6 网页的代码：无标题文档  翻译服务  &nbs

10、p;网站建设  服务流程   付费为您提供精准的翻译服务   你是否要将某些文档翻译成标准的英文版本？您是否担心译文会不符合西方语系的语言习惯？你是否遇到语言障碍而放缓向境外拓展业务的步伐？您是否受到时而要处理外文的困扰？。     让我们来帮您解决这些问题。我们这里提供的服务 快捷、高效、准确，而且付费方便，您无需走出家门，就可以同我们一起走完服务的全过程，甚至包括付费。    我们有来自中国和新加坡的翻译专家，他们就有得天独厚的语言基础和深厚的文化背景。他们合作

11、的结晶一定是非常贴切而精美的翻译作品。我们会分配以您的目标语种为母语的翻译员为您翻译，同时他们也精通您的源语语种。    您若有此需求或任何疑问，请浏览我们的网站，也可以随时同我们联系，您会得到耐心的解答。我们的联系方式：severworld- 同我们联系：severworld-【实验总结】（1） 以后应该多练习CSS样式的使用。（2） 网页的布局在网页设计中有着非常重要的作用。（3） 层和DIV标签的应用，以及层的移动需要在认真学习。实验四【实验目的】掌握模板可编辑区域与重复区域的制作与应用。【实验内容】制作模版class.dwt在dreamweaver中如下图

12、7所示，其中标题栏下面所包含图片为“kind06.gif”，用其生成一个新网页applydwt.html如下图8（设计界面中），图9为在浏览器中浏览情况，dreamweaver中对html文档可编辑区域进行编辑，效果如图10所示。图7 模板图8 设计界面html文档图9 浏览器中 图10 编辑后的网页 （浏览器中）【实验思路】 （1）创建模板： 1）设置背景颜色。 2）建立body层，背景白色。 在body层左侧建立 text层，背景浅灰色。 在text层上，添加表格设置CSS样式。 3）在表格中添加可编辑区域。 在右侧添加可编辑区域。 4）调整模板的样式。（2）应用模板新建shiyan4主页

13、，在可编辑区域添加内容。【实验代码】（1）CSS样式代码:无标题文档!-#body background-color: #FFFFFF;height: 800px;width: 800px;margin-left: 100px;#body #text1 background-color:#93a5c4;float: left;height: 800px;width: 160px;#body #text1 #table margin-top: 45px;background-color: #8090ab;border-right-style: none;border-left-style: none;border-top-width: thin;border-bottom-width: thin;border-top-style: solid;border-bottom-style: solid;b