刚进入dreamweaver点击新建下方的更多，然后选择空白页，页面类型选择html模板，布局选无就行了。
插入一个表格（菜单栏中选择插入，再找到表格），表格里的布局自己根据需要设置，在这里我设置为行数为5，列为1，表格宽度为1000像素。插入表格后，选中整个表格，选中后表框会加黑加粗，在下方设置为居中对齐。
在表格第一行插入图像（菜单栏中选择插入，再找到图像），第二行加入滚动字幕。第三行插入表格（方法同上），1行4列，表格宽度为百分之一百。插入表格之后，再选中第三行的表格，选中后表格边框会加黑加粗，在下方设置表格为居中对齐，宽度为20%。
第三行中选入一些文字，如首页，李白，杜甫，白居易。新建一个css文件，再建一个css，设置好类型中的颜色和背景中的颜色，加以区分。选中第三行，使用刚才新建的css，再新建一个css，表格的边框使用该css。
在第四行插入可区域。点击确定，可区域中的文字即EditRegion3可以去掉，换行可以扩大可区域的面积。
在第五行插入可区域，我还插入了一条水平线，并加上了版权。最后保存。此时模板已经建好。
新建，模板中的页，找到新建的模板，创建，保存为index.html（即网站的主页）,再重新打开新建的模板，在可区预报输入李白的资料，保存为libai.com，此时你会发现只有在可区域才能输入内容，其他区域都是不可操作的，这就是模板的特点。同理，在新建两个作为杜甫和白居易的网页。
现在就差用超链接把上面做的几个网页连接起来了。在模板中选中首页，在下方html中的链接中输入首页的名称，即index.html，同理，选中李白，杜甫，白居易将他们连起来。超链接做好后在文字下方会多出一条横线。
做完了之后在index.html中打开可以看看做出的效果，点击图中的小地球图标就可进行查看。
1、响应式布局
响应式网站设计布局，指的是一种网络页面设计布局，它所遵循的理念是:集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。
2、一屏以内
一张照片代表着一个世界，一屏以内的这种布局方式让读者的视线不会再受到框线的限制，比起响应式布局方式，这种布局的确多了些开阔和大气的感觉。此外，网页主画面部分还可以灵活处理，既可以向上拓展到logo和导航的顶部位置，也可以向下拓展到内容区域，这种布局方式也是非常常见的布局方式。
3、通栏
这种布局方式相对于大框套小框而言，用户浏览网页不在受到方框的限制，这种方式显得大气些，眼界显得更开阔些。
另外这种方式还有一个便利之处那就是主视觉部分可以随机灵活处理，既能往上移到网站logo和导航的位置，也可以移到向下扩展的内容区域。这种布局方式也是网站中常用的布局方式。
4、不对称布局
不对称是艺术界长期以来喜欢的技术，在网页设计师中很受欢迎。但要注意不要将不对称与不平衡混为一谈
不对称的目标是在不可能或不希望对两个部分使用相同的权重时创造平衡。使用不对称性可以创建张力和动态，并且把用户的注意力集中在各个对象(焦点)上。
关于优秀网站首页设计的四大布局技巧，青藤小编就和您分享到这里了。如果您对页面排版、网站设计、图形处理等有浓厚的兴趣，希望这篇文章可以对您有所帮助。如果您还想了解更多关于平面设计的素材及技巧等内容，可以点击本站的其他文章进行学习。
网站设计中.新鲜和个性是布局的最高境，能加强视觉效果。1、T结构布局，就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母T,这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。2、口型布局。就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。3、三型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。4、对称对比布局，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。5、POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点。优点：漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。
为什么了解网页布局很重要？ 网页布局在很大程度上决定了网站的访问者将如何与网页内容进行交互。 这里将介绍一些常见的网页布局形式，例如卡片式、分屏布局、网格布局……一起来看看吧！ 卡片式布局被Pinterest、脸书和推特等网站所使用，它非常适合在新闻网站和博客上使用，因为 卡片式布局可以在页面上放置大量内容，同时又保持每部分内容各不相同。 卡片式布局主要有两种形式： 网页中每个卡片的尺寸相同，卡片的排列非常标准，例如dribbble、UI中国的网页布局； 使用不同尺寸的卡片组成页面的布局，卡片间没有固定的排序，例如Pinterest、花瓣的页面布局。 当两个元素在页面上具有相等的权重时， 分屏布局是一种流行的设计选择，并且通常用于文本和图像都需要突出显示的设计中。 分屏设计特别适合电子商务网站上的产品页面。 产品图片需要在页面上突出显示，但价格、规格、购物车按钮等信息也要显示。 随着移动设计的盛行，大标题排版变得流行起来。大号字体在标题中特别流行，在一些网站的正文中也能看到。 较大的文本更具可读性，可以改善使用体验。 另外它还提供了强大的视觉效果，因此这种布局在极简主义设计中特别受欢迎。 个性化算法推荐可以根据每个人的喜好量身定制数字体验。 人工智能技术的发展让算法变得更易用，能精确分析用户的喜好。 根据用户之前的订阅习惯，Netflix可以为用户个性化推荐他们最有可能观看的电影。 像Medium这样的网站会基于用户以前阅读和喜欢的内容，向他们展示很多同类型的文章。 网格为设计提了视觉上的平秩序感， 以一种平衡且有组织的方式呈现内容，使内容更易于人们使用。 在网格设计中使用不同大小的内容可以在保持内容有序的同时增加视觉吸引力。 杂志和期刊的布局方式影响了网络杂志的版面设计。 这些网页布局很适合有大量内容的网站，尤其是每天都需要更新内容的网站。 单页布局将网站的所有主要内容放在一个网页上，通过滚动完成导航，有时还使用视差滚动效果。 对于内容稀疏的网站，单页布局是一个很好的解决方案。同时它也是内容叙事的完美选择，比如交互式儿童读物。 F型和Z型布局是指用户的视线如何在页面上移动，即用户如何扫描内容。F型布局有非常明确的视觉层次结构，因此适合内容更多的页面。 Z型布局将视线吸引到顶部，然后沿对角线方向向下延伸到底部，然后再次延伸。 在设计中，不对称会产生动态化的视觉冲击力。大多数情况下不对称是由于图像和文本间无法平衡而造成的。 由于不对称会产生动态的、充满活力的视觉印象，因此对那些想要传达这种形象的品牌来说是非常有用的。 这种布局的优点在于完全专注于内容，没有视觉上的混乱。 干净简单的布局几乎适用于任何类型的网站。许多优雅的网站都可以被认为是“简洁的”，无论它们包含什么设计形式。 导航标签适合用于包含少数项目的菜单，否则导航会显得很混乱。 轮播内容包含图像和文本，通常出现在网站的顶部，用来突出显示内容。 好的网页设计具有很强的适应性并且对用户来说始终是友好的。 遵循网页布局的最佳实践，能够带来全新的数字体验，灵活地调整不断变化的技术和设计趋势，进一步实现品牌目标。 精彩推荐： 1、聊聊卡片式设计的运用 2、案例分析：栅格系统的布局设计 3、如何设计深色模式？这3点因素需要考虑 4、深度解析：服务蓝图的应用逻辑 设计
网页设计模板分几种，一种是纯HTML的，一种是PSD模板，也就是可以在photoshop简称（PS）里面进行再设计的，还有一种是FLASH模板。网上一般以PS模板为多，大多数是韩国风格，FLASH的一般是欧美风格的。如何利用网页设计模板，对于本身是设计，会使用PS的，可以进行相应的根据自己要求修改设计，往往模板只是作为参考，并不建议直接拿过来使用，做好模板就是切图了，这个工作很重要，切图的好坏，直接影响你的版面中制作时候的布局，最后是用网页制作软件来制作网页。大体上这样的步骤来，详细的真不是一句话两句话能说的清楚的，希望能帮到你！
我做设计一般是这样的： 1、列出所需要的栏目及内容； 2、在PS（photoshop）中规划好布局图；然后设计出需要的样子； 3、在PS中切好图导入Dreamweaver中制作； 4、定制css样式,调试到理想完毕。 布局这些说起来很多了，你可以看看其他相近网站的一般布局，最好符合个人使用习惯，这样比较合理。页面简洁美观主要还是看你整体布局和色块安排上，多参考一些网站模板会很有收获的。 以下是相关资料：：版面布局的步骤： 一.草案 新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，你可以尽可能的发挥你的想象力，将你想到的“景象“画上去(我们建议您用一张白纸和一支铅笔，当然用作图软件photoshop等也可以)。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定一个满意的作为继续创作的脚本。 二.粗略布局 在草案的基础上，将你确定需要放置的功能模块安排到页面上。(注：功能模块我们在“首页设计-引子“中提过，主要包含网站标志,主菜单,新闻,搜索,友情链接,广告条,邮件列表,计数器,版权信息等)。注意，这里我们必须遵循突出重点、平衡谐调的原则，将网站标志，主菜单等最重要的模块放在最显眼，最突出的位置，然后在考虑次要模块的排放。 三.定案 将粗略布局精细化，具体化。（靠你的智慧和经验，旁敲侧击多方联想，才能作出具有创意的布局。） 在布局过程中，我们可以遵循的原则有： 1、正常平衡---亦称“匀称“。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。 2、异常平衡---即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。 3、对比---所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。 4、凝视---所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。 5、空白---空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体显网页的格调十分有效。 6、尽量用图片解说---此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容，可以传达给浏览者的更多的心理因素。 以上的设计原则，虽然枯燥，但是我们如果能领会并活用到页面布局里，效果就大不一样了。比如： ○网页的白色背景太虚，则可以加些色快； ○版面零散，可以用线条和符号串联； ○左面文字过多，右面则可以插一张图片保持平衡； ○表格太规矩，可以改用导角试试。 经过不断的尝试和推敲，你的网页一定会亮丽起来的哦:) 看看我们经常用到的版面布局形式： 1.“T“结构布局。所谓“T“结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母“T“,所以我们称之为“T“形布局。这是网页设计中用的最广返的一种布局方式。(图略) 这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味“。 2.“口“型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。(图略) 这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。 3.“三“型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。 4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。 5.POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见：漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。 以上总结了目前网络上常见的布局，其实还有许许多多别具一格的布局，关键在于你的创意和设计了。对于版面布局的技巧，这里提供四个建议，您可以自己推敲： 1.加强视觉效果 2.加强文案的可视度和可读性 3.统一感的视觉 4.新鲜和个性是布局的最高境界 网页的色彩是树立网站形象的关键之一，色彩搭配却是网友们感到头疼的问题。网页的背景，文字，图标，边框，超链接.，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？阿捷这里谈一些心得，希望对你有所启发。
网页设计的布局有哪几种？1.“国”字型： 网页设计也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 2.拐角型： 这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。 3.标题正文型： 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。 4.左右框架型： 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。5.上下框架型： 与上面类似，区别仅仅在于是一种上下分为两页的框架。6.综合框架型： 上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。 7.封面型： 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。8.Flash型：网页设计 其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。9.变化型：网页设计 即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。
