学生美食网页设计？怎么用dreamweaver网页设计

一、网站怎么制作设计好

摘要：网站制作，通俗的来说就是网站通过页面结构定位，合理布局，图片文字处理，程序设计，数据库设计等一系列工作的总和，也是将网站设计师的图片用HTML（标准通用标记语言下的一个应用）方式展示出来。网站怎么制作设计好？下面小编就来介绍一下网站制作的基本步骤和设计。网站制作软件有哪些1、Dreamweaver就目前来说，使用最多的静态网站的制作工具有dreamweaver，软件直接百度就可以找到并下载了。

经过重新设计的uidreamweaver更加的好用。

它默认支持代码模式和设计模式，也可以两种模式同时打开，方便即时的查看网页效果。

因为高度集成化，使用它来编写静态网页是非常的方便。

2、WebStorm毋庸置疑的是，webstorm用来进行网页的前端开发是非常好用的。

它适用动态网页的开发。

3、Frontpagefrontpage是早前微软的产品，目前已经停止更新了。不过它比较简单，轻便，如果你不是太了解网页，并且你的电脑还能够安装这个软件。可以尝试使用它来制作网页。

当然它和dreamweaver一样，适用于静态网页。

注意：据说frontpage不支持win10系统。

4、HBuilderHBuilder非常好用的html5ide。使用它来编写JavaScript简直如行云流水。最重要的是，它是个人免费使用的，不像上面的软件需要授权收费。

它可以为你自动调节屏幕的颜色，保护你的眼睛。

多种语言支持：php、jsp、ruby、python、nodejs等web语言

5、WampServerWampServer用于一键启动各种PHP后端服务器，Mysql数据库等服务。

不需要你重新安装这些软件，也不需要太复杂的配置。

如果你是创建PHP的动态网页这个软件是必不可少的。

6、visualstudiovisualstudio是微软开发并且程序员使用比较多的软件，可以用于C/C++，C#等等软件的开发。

如果你想要编写asp.net动态网页，也可以使用这个软件进行开发。

7、eclipseeclipse是基于Java编写的程序ide，安装之前需要安装jdk并配置好环境变量。

如果你以为eclipse只能写写java,c,c++的，那么你就错了。

同样的它支持python，php等脚本语言的开发，并支持绑定浏览器调试。

同样：eclipse是免费使用的。

优秀的网页设计模板免费网页模型

在参考阶段，免费的网页模型往往是初学者的首选。毫不犹豫，我们为大家奉上一批免费的网页模型案例，拿走不谢！

1、Amcharts-工具类网页模型

参考点：登陆界面设计

下载地址：

该网站模型的原型是Amcharts公司开发的JavaScriptCharts，是兼容性好的JavaScript、HTML5图表开发工具，能满足大部分的开发需求。

此模板中有Products，Download，Support，Buy，Demos等5个页面，网站设计采用了悬浮导航栏和footer的效果，可用于订单购买，登陆，图标展示等网页界面设计参考。

2、Dribbble-设计类网页设计模型

参考点：多资源多链接页面布局

下载地址：

Dribbble是一个面向创作家、艺术工作者、设计师等创意类作品的人群的社区网站。作为设计平台类的佼佼者，此网页设计模板很好的展示了如何处理多资源多链接，图文结合，图文链接的网页排版模式，是一个非常值得学习和参考的优秀模板。可以参考的页面有：主页、设计师页面、找工作页面等。

3、BBC-新闻类网页设计模型

参考点：信息排版布局

下载地址：

BBC是英国最大的新闻广播机构，属于新闻类的网站，所以网站没有过多花哨的内容，网站布局以信息排版为主。可以参考的页面有：主页、新闻页面、天气页面、视频页面等。

4、Shopify-电子商务类网页设计模板

参考点：电子商务信息布局

下载地址：

作为一个典型的在线电子商务平台，Shopify不仅仅只是提供专业的电子商务网站建设服务，同时也开展基于社交网络的电子商务，即卖家通过Shopify在Facebook、Pinterest、Twitter等几个主流社交网络平台上就可以开店。

此网页模型主要展示了登录页面、主页、销售方法页面、价格页面、博客页面等。是制作电子商务类网站必看的模板之一。

5、edX-教育类网页设计模板

参考点：列表视图布局

下载地址：

edX是一家在线课程提供商，为世界各地的学生提供了各种学科的在线大学课程，其中也包括一些免费的课程。整个网页模板设计元素以图片组件和文字组件为主，逻辑清晰，简明直观。

主要页面有：主页、课程列表页面、课程详情页面、程序页面、关于页面。此模板适用于教育机构网站或在线课程类网站。课程介绍页面的设计思路尤其值得学习。

6、Pexels-图片素材类网页设计模板

参考点：图片瀑布流设计

下载地址：

Pexels是一个高清图片下载服务站点，为用户提供海量共享图片素材的网站，每周都会定量更新。网站首页采用悬浮设计，将菜单栏和底部栏都是悬浮在固定位置，内容区域滚动。首页图片排列采用瀑布流的方式，多图片滚动。包含的页面有：浏览页，下载页，注册页，登陆页。

PSD透视网站模型

拥有透视效果的网站设计模型可以让你从不同角度展示你的设计布局，让你的设计看起来更像真实的产品，而不是静态的模型。

7、PerspectiveWebsiteMockup

参考点：等距角度切换

下载地址：

该透视网站模型是个简单的模型，可以在一个透视展示中展示你的作品。这个PSD模型允许你在一个等距的角度切换设计。无论您是否需要一个页面或更多的页面，您都可以更改模板中的视图数量。

8、PerspectiveWebsitePSDMockup

参考点：智能物体改变侧面外观、背景

下载地址：

此案例以绝佳的独特视角演示了网页设计模板，多样化的图层设计和让人眼前一亮的视觉体验使整个设计充满了高级感。通过智能对象改变背景，即可自动透视。

9、TheScreensPerspectivePSDMockups

参考点：支持阴影、尺寸调整

下载地址：

TheScreens是一个Behance和Dribbble上的设计师们用来展示他们的项目的免费PSD模型模板。高分辨率的视觉效果使其极具现代风格。作为一个智能PSD网站透视图，您可以轻松地将自己的设计添加到智能图层中，轻松实现阴影、尺寸的调整、屏幕编辑，以及自定义背景。

10、Misocial_FreeWebsitePSDMockupTemplate

参考点：智能元素+谷歌字体

下载地址：

MISocial是一个免费的音乐网站类PSD模板，在Behance上深受好评，获得大量分享。它可以帮助很多人更轻松，更快地创建新网站。

“我们精心制作了7个网页，其中包含对开发新网站至关重要的元素。这些图像都是免费的，并包含在智能对象中。我们使用的字体是免费的Google字体。”

11、FreeIsometricWebsiteMockup

参考点：等距透视

下载地址：

这个网站模型旨在以优雅、独特而有吸引力的方式展示您的Web截图。这个模型由等距的Smartobjects组成，这样您就可以将您的独特设计结合到2个模型中。这个模型有一个透视图，并且文件是通过智能对象分层的，也就是说你可以通过自己定制页面的元素来使用模板。

12、PerspectivePresentationWebMockup

参考点：主题定制

下载地址：

这个模型可以提供关于你的网站设计中的一个视角的特写。该模板的分辨率达到了3000×2000px，可以完全分层的智能对象和多变的背景，便于你定制不同的主题。它还包括一个预先设计好的模板，以帮助你快速入门。

网站模型设计工具这部分的内容主要是回答如何设计出优秀的网页模型。关于这个问题，主要是取决于网页模型设计工具的选取。作为前期工作，网页模型设计可低保真，也可高保真，可快速设计，也可慢工出细活。以下，为大家整理几个好用的网页模型设计工具。

1、Mockplus-简单快速的网页模型设计工具

作为一款桌面端的网页设计工具，Mockplus在原型/线框设计方面也同样具有出色的表现。较其他在线网页模型设计工具而言，Mockplus不仅仅是擅长于静态模型的制作，在交互设计方面也尤其独特的无法比拟的优势。

其最新发布的格子和数据自动填充功能针对多图文的网页布局案例来说十分便捷，例如Dribbble。设计师设计者可以快速填充：姓名、日期、文本（句子或段落）及邮箱等文本类型，常用的头像（写实/卡通）、办公、美食及其他多种多样主题的高清图片。为设计师省去了大量的查找素材的时间。

2、Moqups-在线网页模型设计工具

Moqups是一个非常好的、免费的HTML5应用，通过它可以创建朴素的线框图、实体模型和UI概念图。该程序使用起来非常简单，内置的模板可以直接使用（模板包括单选按钮、链接、图像占位符、文本框以及滑块等）。缺点在于它只能制作静态的网页展示，不能在实际演示中进行动态的操作。

3、Mockingbird-在线网页模型设计工具

Mockingbird是另一个流行的基于网络的线框应用程序，其中包含了一些功能强大的功能，用于链接和分享您的网页模型。Mockingbird允许您使用拖放编辑器快速创建界面。

二、博客网站设计策划书

博客(Blog或Weblog)一词源于“Web Log(网络日志)”的缩写，是一种通常由个人管理、内容按照时间新旧顺序排列，并且不断更新文章的网站。以下是我为大家精心整理的“博客网站设计制策划书”，欢迎大家阅读，供您参考。更多详请关注!

一、前期调研分析

1、创建博客网站所遵循的一般原则

(1)系统性原则。创建者要提供设计方案，还应充分了解用户的一些基本情况，并将其需求等要素融入到网站建设方案中。

(2)完整性原则。博客又称为网络日志，是一种大众化的网络载体，它是一种由个人管理、不定期张贴新文章的网站，应该为用户提供完整的信息和服务：网站的基本要素合理、完整。网站的内容丰富、有效。网站的服务和功能适用、方便。网站建设与网站运营维护相衔接、支持。

(3)友好性原则。博客网站的友好性包括以下几个个方面：对用户友好——满足用户需求、获得用户信任。对网络环境友好——适合搜索引擎检索、便于积累网络资源。对经营者友好——网站便于管理维护、能提高工作效率。

(4)简单性原则。在保证网站基本要素完整的前提下，尽可能减少不相关的内容、图片和文件等，使得用户以尽可能少的点击次数和尽可能短的时间里获得需要的信息和服务。

(5)适应性原则。博客网站的功能、内容、服务和表现形式等需要适应不断变化的网络环境，网站应具有连续性和可扩展性。

2、网站建设基本流程规范

(1)制定网站规划方案，包括网站预期目标、状况分析、网站栏目结构、用户行为分析及内容规划、网页模版设计、网站服务器技术、网站运营维护等基本内容。

(2)网站技术开发、网页设计。

(3)网站测试。

(4)网站发布和推广。

(5)网站维护及管理。

(6)网站设计对不同浏览器具有兼容性。

二、网站的功能定位

1、个人博客网站的基本功能和内容

(1)与互联网络实现无缝链接。

(2)具有信息发布、信息分享和管理功能。

(3)详细的个人介绍。

(4)详细的联系方式。

(5)具有较强的互动性。

(6)相关的联系和服务信息。

(7)在线服务信息。

(8)持续更新的信息。

(9)相关网站链接管理功能。

三、网站技术方案

(网站设计和制作中所采用的技术)

1.Flash特效功能。

2.使用各种常用行为。

3.调用javaScript。

4.具有一定的动态效果。

5.运用页面布局技术(DIV+CSS)。

四、网站内容规划

我的个人博客网站大体上包括以下内容：我的圈子，我的相册，我的音乐，最新动态，实时互动等模块，各模块简介如下：

1.我的圈子简介：

(1)介绍我和博客创建的同学，把同学加到我的网页中并对每个人做详细的介绍，形成一个同学录一样的子页面，在这里边每个人都可以书写个人的兴趣爱好。

(2)个人简历。首先是详细的自我介绍，然后加上个人简历，以便更多的人了解我。

2.我的相册简介：

因为只要有 QQ号的几乎都有自己的空间所以我可以加个超连接，连接到我的QQ空间、我的相册：

(1)设计个人的相册

(2)朋友的相册

(3)贴图，如果发现好的图片我收集起来可以和广大朋友共同分享。

3.我的音乐简介：

这个模块主要包括：

(1)国内最新流行的音乐

(2)日韩最新流行的音乐

(3)欧美最新流行的音乐。

4.最新动态简介：

(1)网站公告

(2)站内新闻

5.项目互动简介：

(1)请你留言，通过这个模块可以实时交流。

(2)博客论坛。

五、网页设计

首页的设计简述为了使我的的首页美观生动、吸引人。在我的首页我还添加了形象开头动画页面，在页面上首先映入你眼帘的是美丽的图片在它的上面我添加可透明的FLASH动画，这样会使网页具有动态美感，加上合理的颜色搭配，动听的背景音乐。无论是从视觉、听觉还是感觉上都是一个不错的博客网站。在网站的右上角我还插了滚动字幕，这样可以让浏览着第一时间了解我本站的最新动态。在网页的右下角是我的网站的名称，通过点击它就可以进入我的主页。

1.网站名称：博客组团

2.网站LOGO:

3.网站作用：让别人了解我、认识我。

4.网站规模：因为是个人博客网站，以团队平均每人做1个页面的数值来建立网站，所以规模不大。由6个网页页面组成。

5.网站目标客户：学生及青年朋友。

6.网站特色：我的博客网站受众一般为学生，所以在色彩上和设计风格上追求学生的口味，以校园的学习和生活为主题，在内容上的特色表现为：

(1)内容标准化与个性化。

(2)充分体现互动性。

(3)内容实用性。

(4)多媒体技术专业性。

(5)网站平台延展性。

7.网站的宣传标语：展示自我，分享快乐。

8.网站的风格及配色方案：

网站标准色：整个网站以橙黄色为主基色，配以黑白色，我认为配这种色代表年轻人的激情。

9.网站标准字体：在字体上我主张采用默认字体，因为这种字体无论在那种浏览器上都能正常显示。所以我采用系统默认字体。

10.网站的栏目设计(画出栏目结构图)：

主页布局示意图

子页示意图

六、网页测试

博客网站在本地和服务器有无图片和动画无法显示或链接失效等情况。

七、网站发布与推广

通过广泛发布邮件信息获得第一注意力，有效加注搜索引擎是注意力推广的必备手段之一。加注搜索引擎既要注意措辞和选择好引擎，也要注意定期跟踪加注效果，并做出合理的修正和补充。通过确定博客形象、宣传标识、口碑传递、公益活动、市场调查、相关单位机构合作等，并且切实履行承诺，在活动中宣传网站形象，获取忠实访客和同行的口碑，是推广网站的重要办法，也是汇聚博客人气的最直接办法。博客社区是博客网站的核心，大力营造博客活动社区，推陈出新的倡导文化建设、开辟博客生活新时尚，吸引用户眼球。

八、博客网站设计日程表

1.小组分工与合作：

前期策划制作：**

主页制作：***

子页制作：(如图所示)

(第1张：1.html)**

(第2张:2.html)***

(第3张:3.html)***

(第4张:4.html)**

(第5张:5.html)**

项目测试报告：**

项目汇报：***

2.博客网站策划书：20**年5月26日

博客网站设计与制作：20**年5月28日---6月

博客网站测试：20**年5月31日

博客网站测试报告：20**年6月2日

博客网站项目汇报：20**年6月4日

九、费用明细

1.网页制作人员工资：

*****(元/月/人)/30(天)*6(人)*8(天)=*****元

2.为了达到最好的视觉效果，现推荐使用****整机租用-****型(推荐)****服务器，租赁价格为：****元/季。

我的博客是以旅行为主，去一些自己喜欢的地方，在这些地方留下自己的印记。接下来会给大家介绍一些自己去过或者值得大家去的地方，同时还会分享旅行中的一些图片，美食，有趣的事情。

一、市场分析

(1)放松身心。人们来自学习和生活的压力比较大，面对繁重的学习和生活压力，几乎所有的学生都有外出旅游，放松身心，寻求乐趣的愿望。调查相关资料显示，16到26岁的青少年中，有35.16%的人旅游目的在于寻求乐趣。

(2)拓宽视野。现在的大学生对知识的渴求早已不局限于单纯课本知识界限，而是转向社会和生活学习。据调查显示：16到26岁的青少年外出旅游的目的，46.29%在于拓宽视野。

(3)运动。大学生活泼好动，而平时又忙于学业，缺乏运动和锻炼的机会，因此，许多大学生旅游包含利用旅游的机会，进行登山、滑雪等运动健身的动机。

(4)交际。现在的大学生多数是独生子女，平日里社会交往比较少，因此，许多大学生渴望通过旅游活动与别人交流思想、加深了解、沟通感情、建立友谊。

二、网站目标

随着中国旅游业的日益成熟，旅游市场竞争加剧。近年来，许多景区的营销策略，从大众营销逐步转变为基于市场细分及市场定位理论的差异化营销。各旅游景点根据自身优势资源，在文化，休闲，运动，老人，学生等细分市场份额上展开了激烈的争夺。然而，专门为大学生旅游市场开展的营销活动并不多。之所以会这样，是因为大学生游客消费能力有限，出游时间又大部分为旅游旺季。因此大学生旅游市场被理所当然地当成了“鸡肋”市场。然而，随着旅游市场营销观念的转变，大学生旅游市场在新一轮的旅游景点的市场竞争中的重要性不断明显。

三、服务对象

大学生旅游消费市场是一个比较特殊的旅游消费市场，既拥有一般旅游消费者的特征，同时受其知识构成、生活规律的影响。

四、推广方式

1.利用各地门户网站的人气来宣传。在各地门户网站相关版块频繁发表相关的帖子，在帖子的底部签名档附带本站的链接。

2.在相关旅游网站和学生经常光顾的网站发表文章，把旅游，以及白领一族的健康联系起来，可以和点击量高的旅游网站建立友情链接，借助他们的人气来壮大自己，而这些网站对链接的网站质量有较高的要求，一般的网站是无法吸引他们的注意的。

3.找一些有特色的地方景点进行合作，在本站免费发布他们的信息和地址，这样可以实现双赢。

五、未来赢利手段

1.收取广告服务费。吸引餐著名景点进驻，我们帮商家进行推广提高知名度，吸引消费者，而我们就会对商家收取一定的服务费用。

2.收取销售提成。，我们还会对进一步在商家通过在我们博客网站报名的消费者的收取提成。

三、怎么用dreamweaver网页设计

如果你会运用Dreamweaverdivcss来写前端的话，仅靠这个就足够写一个漂亮的前端页面了，可以尝试几点来使页面效果更丰富：

运用好盒子的浮动，做好层级的设计，页面会更有层次

设计一个Logo，有图形设计的logo不仅仅是几个文字，可以在iconfont找一些成熟漂亮的图标，切记新手要学会利用素材，而不是搞全新的创作，为什么，因为不具备创作的能力

hover的运用，比如hover设置底部边框线颜色改变，就会有鼠标滑过变色的效果，也同样可以使用鼠标滑过字体颜色大小改变，背景图的改变等，一句代码、事半功倍

制作一个漂亮的导航条，无需js使用ulli即可完成一个带下拉菜单栏的导航栏，一个可下拉的导航栏会为整个页面增加不少高级感，建议使用浅灰色不必那么鲜艳，同时加入鼠标滑过效果体验更佳

引入成熟的js轮播图，首页有一个通屏的滚动banner效果会不错，这里可以直接引用成熟的轮播图代码事半功倍，在这里不要觉得不会写js下载代码是不可取的办法，在网页设计上，使用成熟或开源的代码是合理高效的方法，在写网页设计报告的时候也直接写清楚是引用的，自己通过调整尺寸适配等引入到自己的网页中即可

学生作业还是要尽可能的将所学知识点融入在网页中，比如音频、视频、表单验证等功能的运用，也是丰富页面的一个手段

最后可以去大设计师论坛看下我这边做的一些成品，旅游、美食、明星、校园、游戏等等主题，也都有共享源码，可以看下我的css、导航栏是怎么写的。