Adobe Dreamweaver CS6实战：打造美食网站HTML布局

需积分: 0 97 浏览量更新于2024-08-04 收藏 657KB DOCX 举报

在本篇关于Adobe Dreamweaver CS6 网页制作案例的文章中，我们将深入探讨如何利用这款强大的前端开发工具来构建一个具有吸引力且功能丰富的网站。首先，我们了解到该案例主要涉及HTML和CSS的基础应用，以及如何通过Dreamweaver进行设计和编码。 HTML部分是网页结构的核心，提供的代码展示了创建一个基本的HTML5文档结构，包括`<!DOCTYPE html>`声明、`<html>`标签、`<head>`区域内的元数据（如字符集设置`<meta charset=utf-8>`）和`<title>`标签用于定义网页标题，以及链接到图标和CSS文件的`<link>`标签。在`<body>`标签下，我们看到一个简洁的网站头部设计，包含语言切换选项、网站标题、logo、登录/注册链接和购物车链接。在菜单部分，`<menu>`标签下的`<ul>`列表结构定义了六个导航链接，分别对应首页到小吃的不同页面分类。这显示了Dreamweaver在构建网站导航和布局方面的灵活性。 CSS部分，虽然没有直接展示完整的代码，但可以推测是用于定义页面样式和布局的关键。`<link rel="stylesheet">`标签导入外部CSS文件，确保网站具有统一的外观和用户体验。`article`标签中的内容可能涉及到网站的主要文章或模块，其中包含一个“每日推荐”标题和一个搜索框，通过`<input>`标签实现用户搜索功能。通过Adobe Dreamweaver CS6，开发者能够方便地设计响应式布局，确保在不同设备上都能良好展示。此外，它还提供了代码提示、实时预览、以及直观的可视化编辑工具，极大地提高了开发效率和网站质量。学习这个案例不仅可以帮助初学者理解HTML和CSS的基础，还能了解如何将这些技术整合到实际项目中，实现功能性和美观性的结合。总结来说，这篇文章提供了一个实战示例，展示了如何使用Adobe Dreamweaver CS6设计和开发一个基础的美食主题网站，涉及到了HTML结构、CSS样式控制和用户体验设计的元素。熟练掌握此类技能对于任何想要从事前端开发的人员都至关重要。

用 Adobe Dreamweaver CS6 制作

代码如下：

HTML 代码：

<!DOCTYPE html><html><head><meta charset=utf-8" /><title>爱尚美食

</title><link rel="shortcut icon"

type="images/x-icon" href="images/xlogo.png"/><link

rel="stylesheet" type="text/css" href="css/index.css"/></head><body><!--

头部开始 --><header><div class="language_change"><select

name="language"><option>简体中文

</option><option>English</option></select ><select

name="currency"><option>人民币

</option><option>Dollor</option></select></div><div class="title"><p>爱

尚美食</p></div><div class="logo"></div><div class="login_resister"><a

href="#">登录</a>|<a href="#">注册</a></div><div class="shop_cart"><a

href="#">购物车</a></div></header><menu><ul><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></menu><article><div class="topic1"><p></p><h1>每日推荐

</h1><div class="search"><input type="text"/><input type="button" value="

站内搜索"/></div><ul><li><a href="#"><img src="images/可乐鸡

翅.jpg"/></a><span>28yaun</span><h5>可乐鸡翅</h5></li><li><a

href="#"><img src="images/蛋糕.jpg"/></a><span>15yaun</span><h5>提拉米苏

</h5></li><li><a href="#"><img src="images/糖醋排

骨.jpg"/></a><span>28yaun</span><h5>糖醋排骨</li><li><a href="#"><img

src="images/龙虾.jpg"/></a><span>75yaun</span><h5>深海龙虾

</h5></li></ul></div><div class="topic2"><p></p><h1>优惠菜品</h1><div

class="shaoma"><h2>微信公众号<h2><hr></hr><img

src="images/m.png"/></div><ul><li><a href="#"><img src="images/生

蚝.jpg"/></a><span>49yaun</span><h5>蒜蓉生蚝</h5></li><li><a

href="#"><img src="images/东坡肉.jpg"/></a><span>49yaun</span><h5>东坡肉

</h5></li><li><a href="#"><img src="images/蛋糕

1.jpg"/></a><span>15yaun</span><h5>丝袜蛋糕</h5></li><li><a href="#"><img

src="images/披萨.jpg"/></a><span>50yaun</span><h5>芝士披萨

</h5></li></ul></div><div class="topic3"><p></p><h1>今日套餐</h1><div

class="tishi"><h2>特别提示<h2><hr></hr><h4><br>请客人保管好自己的财产安全和

帐户密码。</h4></div><ul><li><a href="#"><img src="images/咖喱

饭.jpg"/></a><span>39yaun</span><h5>咖喱鸡饭</h5></li><li><a

href="#"><img src="images/套餐.jpg"/></a><span>28yaun</span><h5>排骨饭

</h5></li><li><a href="#"><img src="images/蛋糕

2.jpg"/></a><span>20yaun</span><h5>千层蛋糕</h5></li><li><a href="#"><img

src="images/蛋糕 3.jpg"/></a><span>25yaun n </span><h5>水果蛋糕

</h5></li></ul></div></article><footer><p><a href="#">关于我们</a>|<a

href="#">联系我们</a>|<a href="#">加入收藏</a>|<a href="#">留言板

下载后可阅读完整内容，剩余8页未读，立即下载

老了敲不动了

粉丝: 86
资源: 4421

Adobe Dreamweaver CS6实战：打造美食网站HTML布局

《中文版Dreamweaver CS6网页制作案例教程》631-6资源包

Dreamweaver CS6网页设计与应用（第4版）-案例集锦.zip

Adobe Dreamweaver CS6 Classroom in a Book

11323638_Adobe Dreamweaver CS6 Bible_9781118170632__1225.pdf

网页设计与制作项目案例教程（Dreamweaver CS6）-电子教案及相关素材.rar

网页设计与制作——Dreamweaver CS6标准教程（第二版）案例素材.zip

Dreamweaver CS6添加网页元素综合实践4.pdf

Dreamweaver CS6添加网页元素综合实践5.pdf

Dreamweaver cs6 标准实例教程 PPT.rar

Dreamweaver cs6 标准实例教程 PPT.7z

最新资源