Dreamweaver网页设计形考任务8_Dreamweaver资源-CSDN文库

共1个文件

html：1个

版权申诉

5星 · 超过95%的资源 127 浏览量 2022-04-07 21:32:19 上传评论 1 收藏 1KB RAR 举报

在本形考任务8中，我们将深入探讨Adobe Dreamweaver这一强大的网页设计工具，它被广泛应用于创建、编码和管理网站以及移动内容。Dreamweaver是网页设计师和开发者的重要武器，因为它提供了直观的用户界面和丰富的功能，使得网页制作过程更为高效。 1. **基本界面与工作流程** Dreamweaver的界面由多个面板组成，包括“文档”面板、“资源”面板、“属性”面板等。初学者应熟悉这些面板，了解它们各自的功能，以便于高效工作。在设计网页时，通常遵循“设计视图”到“代码视图”的工作流程，先在设计视图中布局，然后在代码视图中进行精确调整。 2. **HTML与CSS基础** Dreamweaver支持直接编写HTML和CSS代码。HTML用于构建网页结构，CSS则负责样式和布局。在形考任务中，你需要掌握如何在Dreamweaver中创建HTML文档，添加标题、段落、链接、图像等元素，并理解CSS选择器、属性和值，用于控制元素的外观。 3. **布局技术** 学习使用表格、Div和CSS Grid进行页面布局。表格是传统的布局方式，但现代网页设计更倾向于使用Div配合CSS进行流式布局。CSS Grid提供了一种二维布局系统，能够灵活地定义行和列，适用于复杂的网页布局。 4. **响应式设计** 由于移动设备的普及，响应式设计成为必不可少的技能。在Dreamweaver中，你可以利用内置的Bootstrap框架创建响应式网页，通过媒体查询适应不同设备的屏幕尺寸。 5. **交互与动态效果** 了解如何在Dreamweaver中添加JavaScript特效，如下拉菜单、滑动图片、弹出框等，提升用户体验。此外，还可以集成jQuery和其他库来实现更复杂的交互。 6. **模板与库** 利用Dreamweaver的模板和库功能，可以创建可重复使用的代码片段，提高工作效率。模板允许你定义可自定义和不可自定义的部分，而库可以存储常用元素，如页眉、页脚和导航栏。 7. **发布与预览** 完成设计后，学会如何在本地和远程服务器上预览网页，确保在不同浏览器和设备上的兼容性。Dreamweaver内置FTP功能，方便上传文件至服务器，实现网页上线。 8. **调试与优化** 掌握使用Dreamweaver的内置工具进行代码验证和性能优化，例如检查HTML和CSS语法错误，优化图片大小，以确保网页加载速度。 9. **协同工作** 如果你在一个团队中工作，了解如何使用版本控制系统（如Git）并与团队成员共享项目是必要的。Dreamweaver可以与这些系统集成，帮助团队协作。 Dreamweaver网页设计形考任务8旨在检验和巩固你在网页设计和开发中的理论知识和实践能力，包括HTML、CSS、布局、响应式设计、交互效果以及项目管理和协同工作的技巧。通过这个任务，你应该能独立完成一个功能完备且具有良好用户体验的网页。

资源推荐

资源详情

资源评论

收起资源包目录

形考任务8.rar （1个子文件）

形考任务8

index8.html 3KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" charset="UTF-8" /> <title> js实现多项滑动门选项卡特效</title> <style media="screen" type="text/css"> </style> <style> *{ margin:0; padding:0; box-sizing:border-box; list-style: none; } #tab_zzjs_{ width:100%; height:40px; background:#2891f8; border-top:1px solid #666; } #tab_zzjs_ ul{ width:100%; height:100%; text-align: center; line-height:40px; } #tab_zzjs_ ul li{ display: inline; text-align: center; margin:0px 80px; color:#fff; } #tab_zzjs_ ul li:hover{ color:red; } .ctt_zzjs_net{ width:100%; height:50px; position: relative; border:1px solid #000; } .ctt_zzjs_net>div{ position: absolute; width:100%; height:100%; left:0px; top:0px; } .dis_zzjs_net{ display: block; } .undis_zzjs_net{ display: none; } #tab_zzjs_ .hovertab_zzjs{ color:darkgreen; } </style> </head> <body> <div id="tab_zzjs_" class="tab_zzjs_"> <ul> <li id="tab_zzjs_1" class="hovertab_zzjs">一、内容</li> <li id="tab_zzjs_2" class="nor_zzjs">二、内容</li> <li id="tab_zzjs_3" class="nor_zzjs">三、内容</li> <li id="tab_zzjs_4" class="nor_zzjs">四、内容</li> <li id="tab_zzjs_5" class="nor_zzjs">五、内容</li> <li id="tab_zzjs_6" class="nor_zzjs">六、内容</li> </ul> </div> <div class="ctt_zzjs_net"> <div class="dis_zzjs_net" id="tab_zzjs_01"><a href="#">一、内容</a>，测试内容一！</div> <div class="undis_zzjs_net" id="tab_zzjs_02"><a href="#">二、内容</a>，测试内容二！</div> <div class="undis_zzjs_net" id="tab_zzjs_03"><a href="#">三、内容</a>，测试内容三！</div> <div class="undis_zzjs_net" id="tab_zzjs_04"><a href="#">四、内容</a>，测试内容四！</div> <div class="undis_zzjs_net" id="tab_zzjs_05"><a href="#">五、内容</a>，测试内容五！</div> <div class="undis_zzjs_net" id="tab_zzjs_06"><a href="#">六、内容</a>，测试内容六！</div> </div> </div> <script type="text/javascript" language="javascript"> var li=document.querySelectorAll('#tab_zzjs_ ul li'); var main = document.querySelectorAll('.ctt_zzjs_net>div'); for(let i=0;i<li.length;i++){ li[i].onclick=function(){ for(var j=0;j<li.length;j++){ li[j].style.color='#darkgreen'; main[j].className='undis_zzjs_net'; } this.style.color='#fff'; main[i].className='dis_zzjs_net'; } } </script> </body> </html>

评论收藏

内容反馈

版权申诉