Dreamweaver建设一个完整的网站流程是怎样的?
本经验讲解如何使用Dreamweaver来开发网站的高级工作流程,从而建设出一个相对完整的网站(注:了解 Web 域、HTML、CSS 、JavaScript及jQUery方面处于初级到中级阶段)。
工具/原料
方法/步骤
(一)Web 开发第一阶:规划,给‘我’一个坚持的理由
首先要分析受众、市场需求,掌握相关技术,接着收集有关设计和网站发布所需信息,明确目标才能提供动力方向,步步为营,步步为赢!拔营起行之前,先考考自己以下问题,查漏补缺,弥补不足,减少在开发网站时的困扰。
自己已整装待发,对网站开发、托管已有清楚了解,并选择Dreamweaver 和 Creative Cloud 用于 Web 开发流程,则可谓人心思顺,即时投袂而起。
(二)资源准备
检查您是否有设计网站所需的所有资源,可在本地文件夹或 Creative Cloud Libraries 中收集和整理它们。
(三)文档创建
使用以下项在 Dreamweaver 中创建新文档:
· 新的空白文档
· 起始页模板(Ctrl+N 快捷键)
· 其他人创建的模板文件 (*.dwt)
(注:起始页模板适用于Dreamweaver初学者和Web 开发新手,在参考页面的同时了解良好网页设计应具备哪些要素)。
(四)熟悉 Dreamweaver 工作区
找到适合您的工作区,设置颜色主题,以适合您的方式重新组织面板布置。
(五)站点设置
已定好架构,文件、资源及文本信息一应俱全,只欠东风,这时就可创建文件夹结构,以设定站点(注:在此阶段,建议设置远程服务器连接,如有动态内容,还需设置测试服务器)。
0Dw怎样编辑站点
(六)视图转换
“代码”视图中可编写代码, “设计”/“实时”视图中可设计网页。如需用到 Photoshop 复合,可将复合图层提取到Dreamweaver并处理它们。
(七)CSS的应用
使用 CSS 确定网页外观样式,可采用不同方式在 Dreamweaver 中处理 CSS,可手动编写 CSS 代码。对创建 CSS 页只得一知半解,可使用 CSS Designer 面板帮助生成 CSS。
更热衷使用 Sass 和 Less 文件,将 Sass 和 Less 文件导入 Dreamweaver 站点并处理它们。Dreamweaver 然后自动编译它们(或手动编译它们)并实时查看 CSS 更改的结果。
(八)设置 Web 应用程序:创建动态内容
许多 Web 站点都包含了动态页,访问者可从动态页中查看存储在数据库中的信息,一般允许某些访问者在数据库中添加新信息或编辑信息。创建此类页面,先设置 Web 服务器和应用程序服务器,编辑Dw站点,然后连接到数据库。
(九)创建动态页
先定义动态内容来源,其中包括从数据库提取记录集、表单参数和 JavaBeans 组件。然后将动态内容拖放到网页,即可完成添加。
设置页面,可同时显示一个或多个记录,还可显示多页记录。添加用于在记录页之间来回移动的特殊链接,以及创建记录计数器来,帮助用户跟踪记录。
10
(十)测试、预览和发布网站
在创建页面后,预览以查看网站是否符合设计目标。
在“拆分”视图下中, “编码”视图和“实时”视图并排放置,编码同时可预览效果。另外,还可在设备上实时预览网页(响应式网页),或在浏览器中预览。已实现远程连接,可向远程服务器上传文件,发布您的网站。
END
注意事项
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。